添加top toolbars

src/modules/editor/components/Viewport/Toolbar/index.tsx

@@ -3,35 +3,55 @@ import { useLauncher } from "@/modules/launcher";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
 import { TipIcons } from "../../TipIcons";
-import { Toolbar } from "@/modules/editor/components/CompUI/basicUI/Text";
+
+import { TopToolbars } from "@/modules/editor/objects/Toolbars/topToolbars";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+
 export default defineUI({
   setup() {
-    const { store, actions } = useEditor();
+    const editor = useEditor();
+    const { store, actions, helper } = editor;
     const launcher = useLauncher();
-
-    return () => (
-      <div>
-        <div class={"p-10px h-50px"}>
-          <Toolbar component={store.currComp} />
-        </div>
-        <div class="absolute right-25px top-80px space-x-10px z-1001">
-          <TipIcons.Screenshot
-            class={bottomBtnStyles}
-            onClick={() => actions.updateThumbnailByScreenshot(true)}
-          />
-        </div>
-        <div class="absolute bottom-20px right-20px z-1001">
-          <TipIcons.QueenService
-            class={bottomBtnStyles}
-            onClick={() => {
-              launcher.showModal(<launcher.components.Viewport />, {
-                width: "400px",
-              });
-            }}
-          />
+    
+    return () => {
+      const comp = helper.findComp(store.selected[0])
+      const tools = comp ? TopToolbars.filter(t => t.getVisible.call(editor, comp)) : [];
+      return (
+        <div>
+          {
+            <div class={"p-10px h-50px flex items-center"}>
+              {
+                tools.map((item) => {
+                  return (
+                    <item.component
+                      class="p-4px"
+                      value={item.getValue?.(comp as DesignComp)}
+                      onClick={() => item.onClick.call(editor, comp as DesignComp)}
+                    />
+                  );
+                })
+              }
+            </div>
+          }
+          <div class="absolute right-25px top-80px space-x-10px z-1001">
+            <TipIcons.Screenshot
+              class={bottomBtnStyles}
+              onClick={() => actions.updateThumbnailByScreenshot(true)}
+            />
+          </div>
+          <div class="absolute bottom-20px right-20px z-1001">
+            <TipIcons.QueenService
+              class={bottomBtnStyles}
+              onClick={() => {
+                launcher.showModal(<launcher.components.Viewport />, {
+                  width: "400px",
+                });
+              }}
+            />
+          </div>
         </div>
-      </div>
-    );
+      );
+    }
   },
 });
 

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

@@ -22,4 +22,4 @@ export const CompToolbars: ICompToolbars = {
     toolbars.createGroup,
     toolbars.cancelGroup,
   ],
-};
+};

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

@@ -10,7 +10,8 @@ function getVisible(this: EditorModule, comp: DesignComp) {
 type ItemParams = Pick<ToolbarItem, "getValue" | "component" | "onClick"> & {
   getVisible?: typeof getVisible;
 };
-class ToolbarItem {
+
+export class ToolbarItem {
   component: any;
   getValue?: (c: DesignComp) => number;
   onClick: (this: EditorModule, c: DesignComp) => void;
@@ -36,7 +37,7 @@ export type ICompToolbars = { [name in ICompKeys]?: ToolbarItem[] } & {
   MultiSelector: ToolbarItem[];
 };
 
-function createToolbars<T extends Record<string, ItemParams>>(obj: T) {
+export function createToolbars<T extends Record<string, ItemParams>>(obj: T) {
   const data: any = {};
   Object.entries(obj).forEach(([key, value]) => {
     data[key] = new ToolbarItem(value);
@@ -140,7 +141,7 @@ export const toolbars = createToolbars({
   // 全屏尺寸
   fullWidth: {
     component: TipIcons.FullWidth,
-    getVisible: (comp) => !comp.isTransformed && !comp.isFullWidth,
+    getVisible: (comp) => !!comp && !comp.isTransformed && !comp.isFullWidth,
     onClick(comp) {
       this.actions.fullCompWidth(comp);
     },
@@ -148,7 +149,7 @@ export const toolbars = createToolbars({
   // 清除变换
   clearTransform: {
     component: TipIcons.ClearTransform,
-    getVisible: (comp) => comp.isTransformed(),
+    getVisible: (comp) =>  !!comp && comp.isTransformed(),
     onClick(comp) {
       this.actions.clearCompTransform(comp);
     },
@@ -156,7 +157,7 @@ export const toolbars = createToolbars({
   // 定位图层上移
   layerUp: {
     component: TipIcons.LayerUp,
-    getVisible: (comp) => comp.isPostioned(),
+    getVisible: (comp) =>true,
     onClick(comp) {
       this.actions.setCompLayer(comp, 1);
     },
@@ -164,7 +165,7 @@ export const toolbars = createToolbars({
   // 定位图层下移
   layerDown: {
     component: TipIcons.LayerDown,
-    getVisible: (comp) => comp.isPostioned(),
+    getVisible: (comp) => true,
     onClick(comp) {
       this.actions.setCompLayer(comp, -1);
     },
@@ -173,7 +174,7 @@ export const toolbars = createToolbars({
   parentComp: {
     component: TipIcons.ParentComp,
     getVisible(comp) {
-      return !this.helper.isCustomChildComp(comp);
+      return !!comp && !this.helper.isCustomChildComp(comp);
     },
     onClick(comp) {
       this.actions.pickParentComp(comp.id);
@@ -183,9 +184,10 @@ export const toolbars = createToolbars({
   saveAsComp: {
     component: TipIcons.SaveAsComp,
     getVisible(comp) {
-      return this.helper.isShowSaveComp(comp);
+      return !!comp && this.helper.isShowSaveComp(comp);
     },
     async onClick(comp) {
+      if (!comp) return;
       await this.actions.saveAsComp(comp);
       this.controls.compUICtrl.init();
     },
@@ -194,10 +196,10 @@ export const toolbars = createToolbars({
   cancelGroup: {
     component: TipIcons.CancelGroup,
     getVisible(comp) {
-      return comp && comp.compKey == "Group" && this.store.selected.length == 1 && this.helper.isStreamCardChild(comp.id);
+      return !!comp && comp.compKey == "Group" && this.store.selected.length == 1 && this.helper.isStreamCardChild(comp.id);
     },
-
     onClick(comp) {
+      if (!comp) return;
       this.actions.cancelGroupComps(comp);
     },
   },

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

@@ -0,0 +1,13 @@
+import { createToolbars } from "./default";
+import { Toolbar } from "@/modules/editor/components/CompUI/basicUI/Text";
+
+export const TextToolbar = createToolbars( {
+    editor: {
+        component: Toolbar,
+        getVisible: (comp) =>  !!comp && comp.compKey == "Text",
+        onClick(comp) {
+            // this.actions.setCompLayer(comp, -1);
+        },
+    },
+});
+

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

@@ -0,0 +1,12 @@
+import {toolbars, ToolbarItem } from "./default";
+import { TextToolbar } from "./text";
+
+export const TopToolbars: ToolbarItem[] = [
+
+    TextToolbar.editor,
+    toolbars.layerUp,
+    toolbars.layerDown,
+    toolbars.align,
+    toolbars.delete,
+    toolbars.imageCropper,
+]