Reorganize editor modes relative entities ids

ShestakovViktor · May 17, 2024 · a93eac2 · a93eac2
1 parent 07244f4
commit a93eac2
Show file tree

Hide file tree

Showing 15 changed files with 91 additions and 79 deletions.
diff --git a/src/interface/ToolbarMode.ts b/src/interface/ToolbarMode.ts
diff --git a/src/interface/index.ts b/src/interface/index.ts
@@ -1,3 +1,2 @@
 export * from "./ArchiveDriver";
-export * from "./ImageDriver";
-export * from "./ToolbarMode";
+export * from "./ImageDriver";
diff --git a/src/ui/area/mode/AreaMode.tsx b/src/ui/area/mode/AreaMode.tsx
@@ -60,7 +60,7 @@ export class AreaMode extends Input {
 
         if (!areaId) areaId = this.initArea();
 
-        this.editorCtx.formMode?.set(ENTITY.AREA.name, areaId);
+        this.editorCtx.formMode?.set(ENTITY.AREA.id, areaId);
 
         const area = this.editorCtx.store.entity
             .getById<Area>(areaId);

diff --git a/src/ui/decor/mode/DecorMode.tsx b/src/ui/decor/mode/DecorMode.tsx
@@ -48,7 +48,7 @@ export class DecorMode extends Input{
 
         this.viewerCtx.reRender();
 
-        this.editorCtx.formMode?.set(ENTITY.DECOR.name, entityId);
+        this.editorCtx.formMode?.set(ENTITY.DECOR.id, entityId);
 
         this.editorCtx.focusMode?.set(entityId);
     }

diff --git a/src/ui/editor/context/EditorContext.tsx b/src/ui/editor/context/EditorContext.tsx
@@ -1,7 +1,6 @@
 import {Accessor, Setter, createContext, useContext} from "solid-js";
 import {Core, Store} from "@core";
-import {InputMode, FocusMode, FormMode} from "@ui/editor/mode";
-import {ToolbarMode} from "@src/interface";
+import {InputMode, FocusMode, FormMode, ToolbarMode} from "@ui/editor/mode";
 
 export type EditorContexType = {
     core: Core;

diff --git a/src/ui/editor/mode/FormMode.tsx b/src/ui/editor/mode/FormMode.tsx
@@ -14,23 +14,23 @@ type Form = {
 };
 
 export class FormMode {
-    private forms: {[key: string]: Form} = {};
+    private forms: {[key: Id]: Form} = {};
 
     getCurrent: Accessor<Form | null>;
 
     setCurrent: Setter<Form | null>;
 
-    constructor(forms: {name: string; component: ValidComponent}[]) {
+    constructor(forms: {id: Id; name: string; component: ValidComponent}[]) {
         const [getCurrent, setCurrent] = createSignal<Form | null>(null);
         this.getCurrent = getCurrent;
         this.setCurrent = setCurrent;
 
         forms.forEach((form) => {
-            const {name, component} = form;
+            const {id, name, component} = form;
             const [getId, setId] = createSignal<Id | null>(null);
             const [fetch, refetch] = createSignal(undefined, {equals: false});
 
-            this.forms[name] = {
+            this.forms[id] = {
                 name,
                 component,
                 id: [getId, setId],
@@ -43,8 +43,8 @@ export class FormMode {
         });
     }
 
-    set(name: string, id?: Id): void {
-        this.setCurrent(this.forms[name]);
+    set(entityTypeId: Id, id?: Id): void {
+        this.setCurrent(this.forms[entityTypeId]);
         this.getCurrent()?.setId(id ?? null);
     }
 

diff --git a/src/ui/editor/mode/InputMode.tsx b/src/ui/editor/mode/InputMode.tsx
@@ -1,20 +1,21 @@
+import {Id} from "@type";
 import {Input} from "@ui/editor/mode";
 
 export class InputMode {
-    private inputs: {[key: string]: Input} = {};
+    private inputs: {[key: Id]: Input} = {};
 
     private current: Input;
 
     constructor() {
         this.current = new Input();
     }
 
-    add(name: string, input: Input): void {
-        this.inputs[name] = input;
+    add(id: Id, input: Input): void {
+        this.inputs[id] = input;
     }
 
-    set(name: string): void {
-        this.current = this.inputs[name];
+    set(id: Id): void {
+        this.current = this.inputs[id];
     }
 
     get(): Input {

diff --git a/src/ui/editor/mode/ToolbarMode.tsx b/src/ui/editor/mode/ToolbarMode.tsx
@@ -0,0 +1,46 @@
+import {Id} from "@type";
+import {ValidComponent, Signal, Accessor, Setter, createSignal} from "solid-js";
+
+type Toolbar = {
+    name: string;
+    component: ValidComponent;
+    id: Signal<Id | null>;
+    getId: Accessor<Id | null>;
+    setId: Setter<Id | null>;
+};
+
+export class ToolbarMode {
+    private forms: {[key: Id]: Toolbar} = {};
+
+    getCurrent: Accessor<Toolbar | null>;
+
+    setCurrent: Setter<Toolbar | null>;
+
+    constructor(toolbar: {id: Id; name: string; component: ValidComponent}[]) {
+        const [getCurrent, setCurrent] = createSignal<Toolbar | null>(null);
+        this.getCurrent = getCurrent;
+        this.setCurrent = setCurrent;
+
+        toolbar.forEach((toolbar) => {
+            const {id, name, component} = toolbar;
+            const [getId, setId] = createSignal<Id | null>(null);
+
+            this.forms[id] = {
+                name,
+                component,
+                id: [getId, setId],
+                getId,
+                setId,
+            };
+        });
+    }
+
+    set(entityTypeId: Id, id?: Id): void {
+        this.setCurrent(this.forms[entityTypeId]);
+        this.getCurrent()?.setId(id ?? null);
+    }
+
+    get(): Toolbar | null {
+        return this.getCurrent();
+    }
+}
diff --git a/src/ui/editor/mode/index.ts b/src/ui/editor/mode/index.ts
@@ -1,4 +1,5 @@
 export * from "./FormMode";
 export * from "./FocusMode";
 export * from "./Input";
-export * from "./InputMode";
+export * from "./InputMode";
+export * from "./ToolbarMode";
diff --git a/src/ui/editor/widget/DockArea/DockArea.tsx b/src/ui/editor/widget/DockArea/DockArea.tsx
@@ -13,9 +13,9 @@ export function DockArea(): JSX.Element {
     const editorCtx = useEditorContext();
 
     const formMode = new FormMode([
-        {name: ENTITY.MARKER.name, component: MarkerForm},
-        {name: ENTITY.DECOR.name, component: DecorForm},
-        {name: ENTITY.AREA.name, component: AreaForm},
+        {...ENTITY.MARKER, component: MarkerForm},
+        {...ENTITY.DECOR, component: DecorForm},
+        {...ENTITY.AREA, component: AreaForm},
     ]);
 
     editorCtx.formMode = formMode;

diff --git a/src/ui/editor/widget/Editor/Editor.tsx b/src/ui/editor/widget/Editor/Editor.tsx
@@ -30,10 +30,10 @@ export function Editor(props: Props): JSX.Element {
     const editorCtx = useEditorContext();
 
     editorCtx.inputMode = new InputMode();
-    editorCtx.inputMode.add(ENTITY.ENTITY.name, new EntityMode());
-    editorCtx.inputMode.add(ENTITY.MARKER.name, new MarkerMode());
-    editorCtx.inputMode.add(ENTITY.DECOR.name, new DecorMode());
-    editorCtx.inputMode.add(ENTITY.AREA.name, new AreaMode());
+    editorCtx.inputMode.add(ENTITY.ENTITY.id, new EntityMode());
+    editorCtx.inputMode.add(ENTITY.MARKER.id, new MarkerMode());
+    editorCtx.inputMode.add(ENTITY.DECOR.id, new DecorMode());
+    editorCtx.inputMode.add(ENTITY.AREA.id, new AreaMode());
 
     editorCtx.focusMode = new FocusMode();
 

diff --git a/src/ui/editor/widget/ToolBar/ToolBar.tsx b/src/ui/editor/widget/ToolBar/ToolBar.tsx
@@ -10,53 +10,26 @@ import {
 import {NamespaceProvider} from "@ui/app/context";
 import {Dynamic} from "solid-js/web";
 import {useEditorContext} from "@ui/editor/context";
-import {Id} from "@type";
 import {EntityToolbar} from "@ui/entity/widget";
 import {ENTITY} from "@enum";
-
-type Toolbar = {
-    name: string;
-    component: ValidComponent;
-    id: Signal<Id | null>;
-    getId: Accessor<Id | null>;
-    setId: Setter<Id | null>;
-};
+import {ToolbarMode} from "@ui/editor/mode";
 
 export function ToolBar(): JSX.Element {
     const editorCtx = useEditorContext();
 
-    const forms: Toolbar[] = [
-        {name: ENTITY.ENTITY.name, component: EntityToolbar},
-    ].map((form) => {
-        const id = createSignal<Id | null>(null);
-        return {...form, id, getId: id[0], setId: id[1]};
-    });
-
-    const [selected, setSelected] = createSignal<Toolbar | undefined>();
+    const toolbarMode = new ToolbarMode([
+        {...ENTITY.ENTITY, component: EntityToolbar},
+    ]);
 
-    editorCtx.toolbarMode = {
-        set: (name?: string, id?: Id): void => {
-            if (name) {
-                const form = forms.find((form) => form.name == name);
-                if (!form) throw new Error();
-                form.setId(id ?? null);
-                setSelected(form);
-            }
-            else {
-                setSelected();
-            }
-        },
-    };
+    editorCtx.toolbarMode = toolbarMode;
 
     return (
         <div class={styles.ToolBar}>
             <NamespaceProvider namespace={"ToolbarMode"}>
-                <NamespaceProvider namespace={selected()?.name ?? ""}>
-                    <Dynamic
-                        component={selected()?.component}
-                        entityId={selected()?.id}
-                    />
-                </NamespaceProvider>
+                <Dynamic
+                    component={toolbarMode.getCurrent()?.component}
+                    entityId={toolbarMode.getCurrent()?.id}
+                />
             </NamespaceProvider>
         </div>
     );

diff --git a/src/ui/editor/widget/ToolKit/ToolKit.tsx b/src/ui/editor/widget/ToolKit/ToolKit.tsx
@@ -17,33 +17,30 @@ export function ToolKit(): JSX.Element {
         {
             icon: CursorIconSvg,
             onClick: (): void => {
-                editorCtx.inputMode?.set(ENTITY.ENTITY.name);
-                editorCtx.toolbarMode?.set(ENTITY.ENTITY.name);
+                editorCtx.inputMode?.set(ENTITY.ENTITY.id);
+                editorCtx.toolbarMode?.set(ENTITY.ENTITY.id);
             },
         },
         {
             icon: MarkerIconSvg,
             onClick: (): void => {
-                editorCtx.inputMode?.set(ENTITY.MARKER.name);
-                editorCtx.formMode?.set(ENTITY.MARKER.name);
-                editorCtx.toolbarMode?.set();
+                editorCtx.inputMode?.set(ENTITY.MARKER.id);
+                editorCtx.formMode?.set(ENTITY.MARKER.id);
             },
 
         },
         {
             icon: DecorIconSvg,
             onClick: (): void => {
-                editorCtx.inputMode?.set(ENTITY.DECOR.name);
-                editorCtx.formMode?.set(ENTITY.DECOR.name);
-                editorCtx.toolbarMode?.set();
+                editorCtx.inputMode?.set(ENTITY.DECOR.id);
+                editorCtx.formMode?.set(ENTITY.DECOR.id);
             },
         },
         {
             icon: PolygonIconSvg,
             onClick: (): void => {
-                editorCtx.inputMode?.set(ENTITY.AREA.name);
-                editorCtx.formMode?.set(ENTITY.AREA.name);
-                editorCtx.toolbarMode?.set();
+                editorCtx.inputMode?.set(ENTITY.AREA.id);
+                editorCtx.formMode?.set(ENTITY.AREA.id);
             },
         },
     ];

diff --git a/src/ui/entity/mode/EntityMode.tsx b/src/ui/entity/mode/EntityMode.tsx
@@ -70,7 +70,8 @@ export class EntityMode extends Input {
             else {
                 this.editorCtx.focusMode?.set(id);
             }
-            //this.editorCtx.formMode?.set(entity.entityTypeId, id);
+
+            this.editorCtx.formMode?.set(entity.entityTypeId, id);
         }
     }
 }
diff --git a/src/ui/marker/mode/MarkerMode.tsx b/src/ui/marker/mode/MarkerMode.tsx
@@ -49,7 +49,7 @@ export class MarkerMode extends Input {
 
         this.viewerCtx.reRender();
 
-        this.editorCtx.formMode?.set(ENTITY.MARKER.name, markerId);
+        this.editorCtx.formMode?.set(ENTITY.MARKER.id, markerId);
 
         this.editorCtx.focusMode?.set(markerId);
     }