add preference callback & add debug mode in workspace stae

Author: softmarshmallow

editor-packages/editor-preferences/components/preference-item.tsx

@@ -6,30 +6,43 @@ import type {
   Preference,
   TBooleanProperty,
   TNumberProperty,
+  TProperty,
   TPropertyValueType,
   TStringProperty,
 } from "../core";
 
+type PropertyValues = {
+  [key: string]: TPropertyValueType;
+};
+
 export function PreferenceItem({
   identifier,
   title,
   properties,
+  values,
+  onChange,
 }: Preference & {
+  values: PropertyValues;
   onChange?: OnPropertyChange;
 }) {
   return (
     <PreferenceItemContainer data-preference-id={identifier}>
-      <h3>{title}</h3>
+      <span className="title">{title}</span>
       <div className="properties">
         {Object.keys(properties).map((k) => {
           const property = properties[k];
+          const value = values[k];
+          const cb = (v) => {
+            onChange?.(k, v);
+          };
           switch (property.type) {
             case "boolean": {
               return (
                 <PreferenceCheckboxItem
                   key={k}
                   {...property}
-                  onChange={() => {}}
+                  onChange={cb}
+                  value={value as boolean}
                 />
               );
             }
@@ -38,7 +51,8 @@ export function PreferenceItem({
                 <PreferenceTextFieldItem
                   key={k}
                   {...property}
-                  onChange={() => {}}
+                  onChange={cb}
+                  value={value as number | string}
                 />
               );
             }
@@ -48,15 +62,17 @@ export function PreferenceItem({
                   <PreferenceSelectItem
                     key={k}
                     {...property}
-                    onChange={() => {}}
+                    onChange={cb}
+                    value={value as string}
                   />
                 );
               }
               return (
                 <PreferenceTextFieldItem
                   key={k}
                   {...property}
-                  onChange={() => {}}
+                  onChange={cb}
+                  value={value as string}
                 />
               );
             }
@@ -68,7 +84,11 @@ export function PreferenceItem({
 }
 
 type TOnChange<T> = (value: T) => void;
-type OnPropertyChange = (identifier: string, value: TPropertyValueType) => void;
+type Properties = { [key: string]: TProperty };
+type OnPropertyChange = <K extends keyof Properties>(
+  key: K,
+  value: Properties[K]["default"]
+) => void;
 
 function PropertyDescription({
   description,
@@ -82,26 +102,45 @@ function PropertyDescription({
       {markdownDescription ? (
         <ReactMarkdown>{markdownDescription}</ReactMarkdown>
       ) : (
-        <p>{description}</p>
+        <span>{description}</span>
       )}
     </div>
   );
 }
 
 function PreferenceCheckboxItem({
+  value,
+  onChange,
   ...props
-}: TBooleanProperty & { onChange?: TOnChange<boolean> }) {
+}: TBooleanProperty & {
+  onChange?: TOnChange<boolean>;
+  value?: boolean | "indeterminate";
+}) {
   return (
     <div className="checkbox">
-      <Checkbox />
+      <Checkbox
+        style={{
+          color: "white",
+        }}
+        // defaultChecked={props.default}
+        checked={value}
+        onCheckedChange={(checked) => {
+          if (typeof checked === "boolean") {
+            onChange?.(checked);
+          }
+        }}
+      />
       <PropertyDescription {...props} />
     </div>
   );
 }
 
 function PreferenceTextFieldItem({
   ...props
-}: (TStringProperty | TNumberProperty) & { onChange?: TOnChange<string> }) {
+}: (TStringProperty | TNumberProperty) & {
+  onChange?: TOnChange<string>;
+  value?: string | number;
+}) {
   return (
     <>
       <PropertyDescription {...props} />
@@ -110,21 +149,40 @@ function PreferenceTextFieldItem({
 }
 
 function PreferenceSelectItem(
-  props: TStringProperty & { onChange?: TOnChange<string> }
+  props: TStringProperty & {
+    onChange?: TOnChange<string>;
+    value?: string;
+  }
 ) {
   return <></>;
 }
 
 const PreferenceItemContainer = styled.div`
   /*  */
+  cursor: default;
   display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 4px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  .title {
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: 500;
+  }
 
   .properties {
     display: flex;
     flex-direction: column;
   }
 
   .description {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 14px;
   }
 
   .checkbox {
@@ -134,4 +192,6 @@ const PreferenceItemContainer = styled.div`
     align-items: center;
     justify-content: flex-start;
   }
+
+  transition: background 0.1s ease-in-out;
 `;

editor-packages/editor-preferences/pages/advanced.tsx

@@ -1,15 +1,19 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { PageContentLayout } from "../layouts";
 import type { Preference, PreferencePageProps } from "../core";
 import { PreferenceItem } from "../components/preference-item";
+import { useWorkspace, useWorkspaceState } from "editor/core/states";
+
+const ppi_debug_mode = "workbench.debug-mode.enabled";
 
 const preference_debug_mode: Preference = {
   identifier: "editor.debug-mode",
-  title: "Debug Mode",
+  title: "Enable Debug Mode",
   properties: {
-    "editor.debug-mode.enabled": {
+    [ppi_debug_mode]: {
       type: "boolean",
-      description: "Enable debug mode",
+      description:
+        "Experimental: Enabling Debug Mode will provide advanced tooling for deeper inspections and monotor activities behind the scene.",
       default: false,
     },
   },
@@ -19,13 +23,26 @@ export default function AdvancedPreferencesPage({
   state,
   dispatch,
 }: PreferencePageProps) {
+  const { debugMode } = useWorkspaceState();
+  const { setDebugMode } = useWorkspace();
+
   return (
     <>
       <PageContentLayout>
         <h1>Advanced</h1>
         <main>
           <section>
-            <PreferenceItem {...preference_debug_mode} />
+            <PreferenceItem
+              {...preference_debug_mode}
+              values={{
+                [ppi_debug_mode]: debugMode,
+              }}
+              onChange={(k, v: boolean) => {
+                if (k == ppi_debug_mode) {
+                  setDebugMode(v);
+                }
+              }}
+            />
           </section>
         </main>
       </PageContentLayout>

editor/core/actions/index.ts

@@ -25,6 +25,7 @@ export type HistoryAction =
   | Action;
 
 export type Action =
+  | SetDebugModeAction
   | SetFigmaAuthAction
   | SetFigmaUserAction
   | PageAction
@@ -211,3 +212,8 @@ export interface BackgroundTaskUpdateProgressAction {
   id: string;
   progress: number;
 }
+
+export type SetDebugModeAction = {
+  type: "debug-mode/enable";
+  enabled: boolean;
+};

editor/core/reducers/workspace-reducer.ts

@@ -4,6 +4,7 @@ import {
   BackgroundTaskPopAction,
   BackgroundTaskPushAction,
   BackgroundTaskUpdateProgressAction,
+  SetDebugModeAction,
   WorkspaceAction,
   WorkspaceWarmupAction,
 } from "../actions";
@@ -65,8 +66,15 @@ export function workspaceReducer(
       return produce(state, (draft) => {
         draft.taskQueue.tasks.find((i) => i.id !== id).progress = progress;
       });
-      break;
     }
+
+    case "debug-mode/enable": {
+      const { enabled } = <SetDebugModeAction>action;
+      return produce(state, (draft) => {
+        draft.debugMode = enabled;
+      });
+    }
+
     // default fallback - use history reducer
     case "redo":
     case "undo":

editor/core/states/use-workspace.ts

@@ -25,14 +25,27 @@ export function useWorkspace() {
     [dispatch]
   );
 
+  const setDebugMode = useCallback(
+    (enabled: boolean) => dispatch({ type: "debug-mode/enable", enabled }),
+    [dispatch]
+  );
+
   return useMemo(
     () => ({
       highlightedLayer,
       highlightLayer,
       taskQueue,
       pushTask,
       popTask,
+      setDebugMode,
     }),
-    [highlightedLayer, highlightLayer, taskQueue, pushTask, popTask]
+    [
+      highlightedLayer,
+      highlightLayer,
+      taskQueue,
+      pushTask,
+      popTask,
+      setDebugMode,
+    ]
   );
 }

editor/core/states/workspace-state.ts

@@ -33,6 +33,8 @@ export interface WorkspaceState extends EssentialWorkspaceInfo {
     /** URL link to the user's profile image */
     profile: string;
   };
+
+  debugMode?: boolean;
 }
 
 export interface TaskQueue {