editor

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -91,12 +91,33 @@ export const layoutColumns: ColumnItem[] = [
   // },
 ];
 
+export const animateColumns: ColumnItem[] = [
+  {
+    label: "入场效果",
+    dataIndex: "layout.border.style",
+    component: "Select",
+    props: {
+      bordered: false,
+      style: { backgroundColor: "#303030" },
+      defaultValue: "none",
+      options: [
+        { label: "无", value: "none" },
+        { label: "直线", value: "solid" },
+        { label: "点状线", value: "dotted" },
+        { label: "破折线", value: "dashed" },
+      ],
+    },
+  },
+];
+
 export const bdColumns: ColumnItem[] = [
   {
     label: "边框样式",
     dataIndex: "layout.border.style",
     component: "Select",
     props: {
+      bordered: false,
+      style: { backgroundColor: "#303030" },
       defaultValue: "none",
       options: [
         { label: "无", value: "none" },
@@ -289,12 +310,17 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                 />
               </>
             ) : null}
-            {/* 动画 */}
+            {/* 动效 */}
             <>
               <Divider />
-              <div>
-                <span class="text-white">动画</span>
+              {/* <div>
+                <span class="text-white">动效</span>
               </div>
+              <FormUI
+                data={component}
+                columns={animateColumns}
+                onChange={changeVal}
+              /> */}
             </>
           </div>
         );

src/modules/editor/components/TipIcons/index.ts

@@ -29,6 +29,7 @@ import {
   IconRelate,
   IconRelateLocked,
   IconTextLink,
+  IconMove,
 } from "@/assets/icons";
 import {
   IconCamera,
@@ -45,6 +46,10 @@ import { createTipIcon } from "./create";
 import { FontSize } from "./TipIcon";
 
 export const TipIcons = {
+  Move: createTipIcon({
+    icons: [IconMove],
+    tips: ["移动模式"],
+  }),
   Rename: createTipIcon({
     icons: [IconEdit],
     tips: ["重命名"],

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

@@ -1,62 +1,110 @@
 import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import {
+  TopToolbarsLeft,
+  TopToolbarsRight,
+} from "@/modules/editor/objects/Toolbars/topToolbars";
 import { useLauncher } from "@/modules/launcher";
-import { css } from "@linaria/core";
+import { css, cx } from "@linaria/core";
+import { IconPlus, IconReduce } from "@queenjs/icons";
+import { InputNumber } from "ant-design-vue";
 import { defineUI } from "queenjs";
 import { TipIcons } from "../../TipIcons";
 
-import { TopToolbarsLeft, TopToolbarsRight } from "@/modules/editor/objects/Toolbars/topToolbars";
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
-
 export default defineUI({
   setup() {
     const editor = useEditor();
-    const { store, actions, helper } = editor;
+    const { controls, store, actions, helper } = editor;
+    const { editorCtrl } = controls;
     const launcher = useLauncher();
-    
+
     return () => {
-      const comp = helper.findComp(store.selected[0])
-      const toolsLeft = comp ? TopToolbarsLeft.filter(t => t.getVisible.call(editor, comp)) : [];
-      const toolsRight = comp ? TopToolbarsRight.filter(t => t.getVisible.call(editor, comp)) : [];
+      const comp = helper.findComp(store.selected[0]);
+      const toolsLeft = comp
+        ? TopToolbarsLeft.filter((t) => t.getVisible.call(editor, comp))
+        : [];
+      const toolsRight = comp
+        ? TopToolbarsRight.filter((t) => t.getVisible.call(editor, comp))
+        : [];
+
+      const scale = editorCtrl.state.scale;
 
       return (
         <div>
-          {
-            false && <div id="toptoolbar" class={"p-10px h-50px flex items-center justify-between"}>
+          {false && (
+            <div
+              id="toptoolbar"
+              class={"p-10px h-50px flex items-center justify-between"}
+            >
               <div class="flex-grow flex items-center">
-              {
-                toolsLeft.map((item) => {
+                {toolsLeft.map((item) => {
                   return (
                     <item.component
                       class="p-4px"
                       value={item.getValue?.(comp as DesignComp)}
-                      onClick={() => item.onClick.call(editor, comp as DesignComp)}
+                      onClick={() =>
+                        item.onClick.call(editor, comp as DesignComp)
+                      }
                     />
                   );
-                })
-              }
+                })}
               </div>
               <div class="flex items-center">
-                {
-                   toolsRight.map((item) => {
-                    return (
-                      <item.component
-                        class="p-4px"
-                        value={item.getValue?.(comp as DesignComp)}
-                        onClick={() => item.onClick.call(editor, comp as DesignComp)}
-                      />
-                    );
-                  })
-                }
+                {toolsRight.map((item) => {
+                  return (
+                    <item.component
+                      class="p-4px"
+                      value={item.getValue?.(comp as DesignComp)}
+                      onClick={() =>
+                        item.onClick.call(editor, comp as DesignComp)
+                      }
+                    />
+                  );
+                })}
               </div>
             </div>
-          }
-          <div class="absolute right-25px top-80px space-x-10px z-1000">
+          )}
+          <div class="absolute right-20px top-40px space-x-10px z-1000">
             <TipIcons.Screenshot
               class={bottomBtnStyles}
               onClick={() => actions.updateThumbnailByScreenshot(true)}
             />
           </div>
-          <div class="absolute bottom-20px right-20px z-1000">
+          <div class="absolute bottom-30px right-20px flex items-center justify-center z-1000 space-x-10px">
+            <div
+              class={cx(group, "flex items-center p-4px rounded bg-[#262626]")}
+            >
+              <IconReduce
+                class="ml-5px text-light-50 text-30px cursor-pointer transition hover:bg-dark-800"
+                onClick={() => editorCtrl.setScale(scale - 0.1)}
+              />
+              <IconPlus
+                class="text-light-50 text-30px cursor-pointer transition hover:bg-dark-800"
+                onClick={() => editorCtrl.setScale(scale + 0.1)}
+              />
+              <InputNumber
+                min={0.5}
+                max={2}
+                bordered={false}
+                controls={false}
+                value={scale}
+                class="!w-60px !ml-10px text-center !bg-[#303030] rounded"
+                formatter={(v: any) => Math.floor(v * 100) + "%"}
+                onPressEnter={(e: any) => {
+                  const newScale = e.target.value.split("%")[0] / 100;
+                  editorCtrl.setScale(newScale);
+                }}
+              />
+            </div>
+            <TipIcons.Move
+              class={cx(
+                "p-10px rounded text-18px cursor-pointer transition hover:opacity-70",
+                editorCtrl.state.moveMode
+                  ? "!text-orange bg-[#382916] !hover:(bg-[#382916])"
+                  : "!text-light-50 bg-[#262626] !hover:(bg-[#262626])"
+              )}
+              onClick={() => editorCtrl.moveEditor()}
+            />
             <TipIcons.QueenService
               class={bottomBtnStyles}
               onClick={() => {
@@ -68,7 +116,7 @@ export default defineUI({
           </div>
         </div>
       );
-    }
+    };
   },
 });
 
@@ -78,3 +126,18 @@ const bottomBtnStyles = css`
   background-color: #333;
   @apply shadow;
 `;
+
+const group = css`
+  .inficon {
+    transition: all 0.2s ease-in;
+    margin-right: -37px;
+  }
+  .ant-input-number-input {
+    text-align: center;
+  }
+  &:hover {
+    .inficon {
+      margin-right: 0;
+    }
+  }
+`;

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

@@ -13,6 +13,8 @@ const KeySpace = 32;
 
 export class EditorCtrl extends ModuleControl<EditorModule> {
 
+    parent: HTMLElement | undefined = undefined;
+
 
     state = RxValue.create({
         width: 1500,
@@ -23,7 +25,7 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
         
         scale:  1,
         keyCode: -1,
-
+        moveMode: false,
         page: {w: 375, h: 650}
     })
 
@@ -63,10 +65,17 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     return this.state.keyCode === key;
   }
   isMoving() {
-    return this.isKeyDown(KeySpace);
+    return this.isKeyDown(KeySpace) || this.state.moveMode;
+  }
+
+  moveEditor(){
+    if(!this.parent) return;
+    this.parent.style.cursor = this.state.moveMode ? "default" : "grab";
+    this.state.setMoveMode(!this.state.moveMode);
   }
 
   initEditorEvent(editorLayer:HTMLElement, parent:HTMLElement) {
+    this.parent = parent;
     // 监听键盘的 keydown 事件
     document.addEventListener("keydown", (event)=>{
         this.state.keyCode = event.keyCode;
@@ -79,6 +88,9 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     document.addEventListener("keyup", (event)=>{
         this.state.keyCode = -1;
         isMoving = false;
+        if(!this.isMoving()){
+            parent.style.cursor = "default";
+        }
     });
     
 
@@ -109,7 +121,9 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     });
 
     document.addEventListener("mouseup",(e:MouseEvent)=>{
-        if (isMoving) {
+        if(!this.isMoving()){
+            parent.style.cursor = "default";
+        } else if(isMoving) {
             parent.style.cursor = "pointer";
         }
         isMoving = false;
@@ -125,7 +139,7 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     })
 
     parent.addEventListener("mousedown", (e:MouseEvent)=>{
-        isMoving = this.isKeyDown(KeySpace) || e.button == 2;
+        isMoving = this.isMoving() || e.button == 2;
         if (isMoving) {
             parent.style.cursor = "grab";
             e.preventDefault();
@@ -162,4 +176,12 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
 
     this.state.setPos({x: left, y: top});
   }
+
+  setScale(scale: number) {
+    if (isNaN(scale)) scale = this.state.scale;
+    else if (scale < 0.5) scale = 0.5;
+    else if (scale > 2) scale = 2.0;
+    this.state.setScale(scale);
+  }
+
 }