update

src/modules/editor/components/CompUI/basicUI/Transfer/index.tsx

@@ -1,7 +1,8 @@
-import { CompToolbars } from "@/modules/editor/objects/EditingCompTools";
 import { css } from "@linaria/core";
 import { defineComponent, onMounted, onUnmounted } from "vue";
 import { useEditor } from "../../../..";
+import { TransferCtrl } from "@/modules/editor/controllers/TransferCtrl";
+import { CompToolbars } from "@/modules/editor/objects/Toolbars";
 
 const btnStyles = {
   top: {
@@ -30,7 +31,7 @@ export const Transfer = defineComponent({
   setup() {
     const editor = useEditor();
     const { store } = editor;
-    const { transferCtrl } = editor.controls;
+    const transferCtrl = new TransferCtrl(editor);
     const { transferStyle } = transferCtrl;
 
     onMounted(() => {
@@ -39,6 +40,10 @@ export const Transfer = defineComponent({
       });
     });
 
+    onUnmounted(() => {
+      transferCtrl.destroy();
+    });
+
     onUnmounted(() => {
       transferCtrl.resetStyle();
     });
@@ -57,10 +62,11 @@ export const Transfer = defineComponent({
           >
             <div class={toolbarStyle}>
               {CompToolbars.default.map((item, i) => {
+                if (item.disable?.call(editor, comp)) return;
                 return (
                   <item.component
                     class="p-4px"
-                    value={item.value?.(comp)}
+                    value={item.getValue?.(comp)}
                     onClick={() => item.onClick.call(editor, comp)}
                   />
                 );

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -1,4 +1,3 @@
-import { treeNodeActions } from "@/modules/editor/objects/TreeNode/treeNodeActions";
 import { css } from "@linaria/core";
 import { useReactive } from "@queenjs/use";
 import { Tree } from "ant-design-vue";
@@ -7,6 +6,7 @@ import { string } from "vue-types";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { CompUI } from "../../../CompUI";
+import { TreeToolbars } from "@/modules/editor/objects/Toolbars";
 
 type TreeItem = {
   key: string;
@@ -74,7 +74,7 @@ const CompNode = defineComponent({
     return () => {
       if (!comp) return;
       const compOpts = CompUI[comp.compKey].options;
-      const actions = treeNodeActions[comp.compKey] || treeNodeActions.default;
+      const actions = TreeToolbars[comp.compKey] || TreeToolbars.default;
       const thumbnail =
         comp.compKey === "Image" ? comp.value.url : compOpts.thumbnail;
       return (

src/modules/editor/controllers/TransferCtrl/index.ts

@@ -99,6 +99,10 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
       (this.transferStyle as any)[key] = "";
     });
   }
+
+  destroy() {
+    this.currObserver?.disconnect();
+  }
 }
 
 function findPageContent(el?: HTMLElement): HTMLElement | undefined {

src/modules/editor/module/actions/edit.ts

@@ -63,4 +63,8 @@ export const editActions = EditorModule.action({
     comp.layout.margin = "";
     comp.layout.offset = {};
   },
+  // 设置组件锁定状态
+  setCompLock(comp: DesignComp){
+    //
+  }
 });

src/modules/editor/module/index.ts

@@ -27,7 +27,6 @@ export class EditorModule extends ModuleRoot {
   controls = {
     historyCtrl: new HistoryCtrl(this),
     pickCtrl: new ImagePickController(),
-    transferCtrl: new TransferCtrl(this),
   };
 
   onReady() {

src/modules/editor/objects/EditingCompTools/index.ts

@@ -1,46 +0,0 @@
-import { TipIcons } from "../../components/TipIcons";
-import { EditorModule } from "../../module";
-import { ICompKeys } from "../../typings";
-import { DesignComp } from "../DesignTemp/DesignComp";
-
-type CompToolbarItem = {
-  component: any;
-  value?: (comp: DesignComp) => number;
-  onClick: (this: EditorModule, comp: DesignComp) => void;
-};
-
-function createToolbars<T extends Record<string, CompToolbarItem>>(obj: T) {
-  return obj;
-}
-
-const default_toolbars = createToolbars({
-  position: {
-    component: TipIcons.Position,
-    value: (comp) => (comp.layout.position === "absolute" ? 1 : 0),
-    onClick(comp) {
-      this.actions.setCompPosition(comp);
-    },
-  },
-  delete: {
-    component: TipIcons.Delete,
-    onClick(comp) {
-      this.actions.removeComp(comp.id);
-    },
-  },
-  clearOffset: {
-    component: TipIcons.ClearOffset,
-    onClick(comp) {
-      this.actions.clearCompOffset(comp);
-    },
-  },
-});
-
-export const CompToolbars: Partial<Record<ICompKeys, CompToolbarItem[]>> & {
-  default: CompToolbarItem[];
-} = {
-  default: [
-    default_toolbars.position,
-    default_toolbars.clearOffset,
-    default_toolbars.delete,
-  ],
-};

src/modules/editor/objects/Toolbars/CompToolbars.ts

@@ -0,0 +1,5 @@
+import { ICompToolbars, toolbars } from "./default";
+
+export const CompToolbars: ICompToolbars = {
+  default: [toolbars.position, toolbars.clearOffset, toolbars.delete],
+};

src/modules/editor/objects/Toolbars/TreeToolbars.ts

@@ -0,0 +1,14 @@
+import { ICompToolbars, toolbars } from "./default";
+
+export const TreeToolbars: ICompToolbars = {
+  default: [
+    {
+      ...toolbars.position,
+      disable(comp) {
+        return comp.layout.position !== "absolute";
+      },
+    },
+    toolbars.visible,
+  ],
+  Page: [],
+};

src/modules/editor/objects/Toolbars/default.ts

@@ -0,0 +1,62 @@
+import { isEmpty } from "lodash";
+import { TipIcons } from "../../components/TipIcons";
+import { EditorModule } from "../../module";
+import { ICompKeys } from "../../typings";
+import { DesignComp } from "../DesignTemp/DesignComp";
+
+type ToolbarItem = {
+  component: any;
+  getValue?: (c: DesignComp) => number;
+  disable?: (this: EditorModule, c: DesignComp) => boolean;
+  onClick: (this: EditorModule, c: DesignComp) => void;
+};
+
+export type ICompToolbars = { [name in ICompKeys]?: ToolbarItem[] } & {
+  default: ToolbarItem[];
+};
+
+function createToolbars<T extends Record<string, ToolbarItem>>(obj: T) {
+  return obj;
+}
+
+export const toolbars = createToolbars({
+  position: {
+    component: TipIcons.Position,
+    getValue: (comp) => (comp.layout.position === "absolute" ? 1 : 0),
+    onClick(comp) {
+      this.actions.setCompPosition(comp);
+    },
+  },
+  delete: {
+    component: TipIcons.Delete,
+    disable(comp) {
+      return !this.store.pageCompIds.includes(comp.id);
+    },
+    onClick(comp) {
+      this.actions.removeComp(comp.id);
+    },
+  },
+  clearOffset: {
+    component: TipIcons.ClearOffset,
+    disable(comp) {
+      return isEmpty(comp.layout.offset);
+    },
+    onClick(comp) {
+      this.actions.clearCompOffset(comp);
+    },
+  },
+  visible: {
+    component: TipIcons.Visible,
+    getValue: (comp) => (comp.layout.visible !== false ? 0 : 1),
+    onClick(comp) {
+      this.actions.setCompVisible(comp);
+    },
+  },
+  lock: {
+    component: TipIcons.Lock,
+    getValue: (comp) => (comp ? 0 : 1),
+    onClick(comp) {
+      this.actions.setCompLock(comp);
+    },
+  },
+});

src/modules/editor/objects/Toolbars/index.ts

@@ -0,0 +1,2 @@
+export * from "./CompToolbars"
+export * from "./TreeToolbars"

src/modules/editor/objects/TreeNode/treeNodeActions.ts

@@ -1,35 +0,0 @@
-import { TipIcons } from "../../components/TipIcons";
-import { EditorModule } from "../../module";
-import { ICompKeys } from "../../typings";
-import { DesignComp } from "../DesignTemp/DesignComp";
-
-type Action = {
-  component: any;
-  getValue?: (c: DesignComp) => 0 | 1;
-  disable?: (this: EditorModule, c: DesignComp) => boolean;
-  onClick: (this: EditorModule, c: DesignComp) => void;
-};
-
-export const treeNodeActions: { [name in ICompKeys]?: Action[] } & {
-  default: Action[];
-} = {
-  default: [
-    {
-      component: TipIcons.Visible,
-      getValue: (comp) => (comp.layout.visible !== false ? 1 : 0),
-      onClick(comp) {
-        this.actions.setCompVisible(comp);
-      },
-    },
-    {
-      component: TipIcons.Delete,
-      disable(comp) {
-        return !this.store.pageCompIds.includes(comp.id);
-      },
-      onClick(comp) {
-        this.actions.removeComp(comp.id);
-      },
-    },
-  ],
-  Page: [],
-};