添加card2组件的实现

src/modules/editor/actions/image.ts

@@ -0,0 +1,38 @@
+import { Exception } from "queenjs";
+import { EditorModule } from "..";
+import { DesignTemp } from "../defines/DesignTemp";
+import { editActions } from "./edit";
+
+export const ImgCompActions = EditorModule.action({
+  handleImageHotKey(key:string) {
+     if ( !this.store.isEditMode ) return;     
+     if (this.store.currComp?.compKey !== "Image") return;
+
+     console.log( this.store.currComp );
+     const value = this.store.currComp.value
+     if (key == "w") {
+        value.y = (parseFloat(value.y) - 0.5).toFixed(2)
+        return;
+     } 
+     if (key == "s") {
+        value.y = (parseFloat(value.y) + 0.5).toFixed(2)
+        return;
+     }
+     if (key == "a") {
+        value.x = (parseFloat(value.x) - 0.5).toFixed(2)
+        return;
+     }
+     if (key == "d") {
+        value.x = (parseFloat(value.x) + 0.5).toFixed(2)
+        return;
+     }
+     if (key == "q") {
+        value.s = (parseFloat(value.s) - 0.05).toFixed(2)
+        return;
+     }
+     if (key == "e") {
+        value.s = (parseFloat(value.s) + 0.05).toFixed(2)
+        return;
+     }
+  },
+});

src/modules/editor/actions/init.ts

@@ -12,6 +12,8 @@ export const initActions = EditorModule.action({
     // createProxyEffect(this.store, (type, paths, value) => {
     //   historyCtrl.onChange(this.store, type, paths, value);
     // });
+
+    this.actions.initInputEvent();
   },
 
   // 初始化数据

src/modules/editor/actions/input.ts

@@ -0,0 +1,36 @@
+import { Exception } from "queenjs";
+import { EditorModule } from "..";
+import { DesignTemp } from "../defines/DesignTemp";
+import { editActions } from "./edit";
+
+export const InputEventActions = EditorModule.action({
+  // 模块初始化
+  initInputEvent() {
+
+      //lastFocusEvent
+
+      window.addEventListener("mousemove", (event)=>{
+           if ( !this.store.isEditMode ) return;
+      })
+
+      let dx = 0, dy=0, dt = 0;
+      window.addEventListener("mousedown", (event)=>{
+          console.log(event.clientX, event.clientY)
+          dx = event.clientX;
+          dy = event.clientY;
+          dt = Date.now();
+      })
+
+      window.addEventListener("mouseup", (event)=>{
+         const x = event.clientX - dx;
+         const y = event.clientY - dy;
+         const t = Date.now() - dt;
+         if ( !this.store.isEditMode ) return;
+         
+         if (Math.abs(x) < 3 && Math.abs(y) < 3  && t < 300 ) {
+           console.log("clicked");
+         }
+         
+      })
+  },
+});

src/modules/editor/components/CompUI/basicUI/Image/component.tsx

@@ -1,13 +1,13 @@
 import { useEditor } from "@/modules/editor";
 import { queenApi } from "queenjs";
-import { string } from "vue-types";
+import { string , object} from "vue-types";
 import { useCompData } from ".";
 import { createUIComp } from "../../defines/createUIComp";
 
 export const Component = createUIComp({
   props: {
     compId: string(),
-    value: string(),
+    value: object<{url:string, x:number, y:number, s:number}>(),
   },
   emits: ["update:value"],
   setup(props, { emit }) {
@@ -19,17 +19,32 @@ export const Component = createUIComp({
       if (!url) return;
       
       if (comp) {
-        comp.value = url;
+        comp.value.url = url;
+        comp.value.x = 0;
+        comp.value.y = 0;
+        comp.value.s = 1;
       } else {
-        emit("update:value", url);
+
+        emit("update:value", {url, x: 0, y: 0, s: 1});
       }
     }
-    return () => (
-      <img
-        class="w-1/1 h-1/1 object-cover"
-        src={comp?.value || props.value}
-        onDblclick={store.isEditMode ? changeVal : undefined}
-      />
-    );
+
+    return () => {
+
+      const value = comp?.value || props.value;
+      const scale =  value?.s || 1;
+      const ox = value?.x || 0;
+      const oy = value?.y || 0;
+      const objFit =  (scale + "" == "1") && (ox + "") == "0" &&  (oy + "") == "0" ? "object-cover" : "object-contain"
+      
+      return (
+        <img
+          class={"w-1/1 h-1/1 " + objFit}
+          style={{transform: `scale(${scale}) translate(${ox}%,${oy}%)`}}
+          src={value?.url}
+          onDblclick={store.isEditMode ? changeVal : undefined}
+        />
+      )
+    }
   },
 });

src/modules/editor/components/CompUI/basicUI/Image/index.ts

@@ -7,13 +7,27 @@ export { Component } from "./component";
 export const { options, useCompData } = createOptions({
   name: "图片",
   thumbnail: Dict_Imgs.Default,
-  value: Dict_Imgs.Default,
+  value: {url: Dict_Imgs.Default, x: 0, y:0, s: 1},
 });
 
 export const Form = createAttrsForm([
   {
     label: "图片",
-    dataIndex: "value",
+    dataIndex: "value.url",
+    component: "Input",
+  },
+  {
+    label: "x偏移",
+    dataIndex: "value.x",
+    component: "Input",
+  },
+  {
+    label: "y偏移",
+    dataIndex: "value.y",
+    component: "Input",
+  },{
+    label: "缩放",
+    dataIndex: "value.s",
     component: "Input",
   },
 ]);

src/modules/editor/components/CompUI/basicUI/Text/component.tsx

@@ -34,7 +34,7 @@ export const Component = createUIComp({
         Alignment,
       ],
       fontSize: {
-        options: [12, 14, 16, 18, 20, 24, 28],
+        options: [12, 14, 16, 18, 20, 24, 28, 32, 38,42, 46],
       },
       toolbar: {
         items: [

src/modules/editor/components/CompUI/customUI/Cards/Card2/component.tsx

@@ -3,6 +3,7 @@ import { useCompData } from ".";
 import { Image, Text } from "../../..";
 import { useEditor } from "../../../../..";
 import { createUIComp } from "../../../defines/createUIComp";
+import { css } from "@linaria/core";
 
 export const Component = createUIComp({
   props: {
@@ -10,19 +11,66 @@ export const Component = createUIComp({
   },
   setup(props) {
     const { designToNaturalSize } = useEditor().helper;
-    const { value } = useCompData(props.compId);
+    const { value, children } = useCompData(props.compId);
 
     return () => (
-      <div class="flex">
-        <Image.Component
-          style={{
-            width: designToNaturalSize(value.imgSize[0]),
-            height: designToNaturalSize(value.imgSize[1]),
-          }}
-          v-model={[value.img, "value"]}
-        />
-        <Text.Component class="flex-1 ml-0.1rem" v-model={[value.desc, "value"]} />
+      <div class="relative">
+        <div class={upStyle}>
+            <div class={style}>
+            <Image.Component
+                style={{
+                width: designToNaturalSize(750),
+                height: designToNaturalSize(464),
+                }}
+                compId={children.bgImg.id}
+            />
+            </div>
+
+            <Image.Component
+                class="!absolute  bottom-0 transform translate-x-1/4 translate-y-1/4 rounded-1/2 overflow-hidden"
+                style={{
+                
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                }}
+                compId={children.item1.id}
+            />
+
+            <Image.Component
+                class="!absolute transform rounded-1/2 overflow-hidden -translate-x-1/2 bottom-0 left-1/2"
+                style={{
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                }}
+                compId={children.item2.id}
+            />
+            
+            <Image.Component
+                class="!absolute bottom-0 right-0 rounded-1/2 overflow-hidden transform -translate-x-24/100 -translate-y-1/3"
+                style={{
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                }}
+                compId={children.item3.id}
+            />
+        </div>
+
+        <div class="absolute top-0 left-0">
+          <Text.Component compId={children.text1.id} />
+        </div>
+
+    
+        <Text.Component compId={children.text2.id}  />
       </div>
     );
   },
 });
+const upStyle = css`
+  position:relative;
+`
+const style = css`
+  background: gray;
+  clip-path: polygon(0 0, 100% 0, 100% 57%, 0 100%);
+  transform-origin: center;
+  transform: translate(0%, 0%) scale(1);
+`;

src/modules/editor/components/CompUI/customUI/Cards/Card2/index.tsx

@@ -5,13 +5,41 @@ import { GroupNumber } from "../../../formItems/GroupNumber";
 
 export { Component } from "./component";
 
+const thumbnail =  require("@/assets/comps/card2/thumbnail.png")
 export const { options, useCompData } = createOptions({
   name: "卡片2",
-  thumbnail: require("@/assets/thumbnails/1.png"),
+  thumbnail:thumbnail,
   value: {
-    img: Dict_Imgs.Default,
-    imgSize: [240, 240],
-    desc: "描述",
+
+  },
+  layout: {
+    padding: "0 0 0.2rem 0",
+  },
+  children: {
+    bgImg: {
+      compKey: "Image",
+      value: { url: require("@/assets/comps/card2/bg.png"), x: 0, y: 0, s: 1 },
+    },
+    item1: {
+        compKey: "Image",
+        value: { url: thumbnail, x: 26.50, y: -23.00, s: 4.05 },
+    },
+    item2: {
+        compKey: "Image",
+        value: { url: thumbnail, x: -4.0, y: -13.50, s: 3.90 },
+    },
+    item3: {
+        compKey: "Image",
+        value: { url: thumbnail, x: -34.00, y: -3.5, s: 4.0 },
+    },
+    text1: {
+        compKey: "Text",
+        value:  `<p><span style="font-size:42px;"><strong>&nbsp; </strong></span><span style="color:hsl(0, 0%, 100%);font-size:42px;"><strong>P190</strong></span></p><p><span style="color:hsl(0, 0%, 100%);font-size:20px;">&nbsp; &nbsp; &nbsp;可注塑</span></p>`,
+    },
+    text2: {
+        compKey: "Text",
+        value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:14px;">全新 &nbsp;| &nbsp;时尚 &nbsp;| &nbsp;简约 &nbsp;</span></p>`,
+    },
   },
 });
 

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

@@ -2,7 +2,7 @@ import hotkeys from "hotkeys-js";
 import { ModuleControl } from "queenjs";
 import { EditorModule } from "../..";
 
-type IHotKeyItem = { hotKey: string; action: (this: EditorModule) => void };
+type IHotKeyItem = { hotKey: string; action: (this: EditorModule, key:string) => void };
 
 export class HotKeyCtrl extends ModuleControl<EditorModule> {
   // 热键配置
@@ -10,10 +10,20 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
     // 删除当前组件
     {
       hotKey: "Backspace,del",
-      action() {
+      action(key:string) {
         this.actions.removeComp(this.store.currCompId);
       },
     },
+
+    {
+      hotKey: "q,w,a,s,d,e",
+      action(key:string) {
+        // this.actions.removeComp(this.store.currCompId);
+        // console.log("image hot key down", key);
+        this.actions.handleImageHotKey(key)
+      },
+    },
+
   ]);
 
   init() {
@@ -24,10 +34,11 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
       module.moduleName,
       function (event, handler) {
         event.preventDefault();
+        
         const hotAct = hotKeys.find((d) =>
           d.hotKey.split(",").includes(handler.key)
         );
-        hotAct?.action.call(module);
+        hotAct?.action.call(module, handler.key);
       }
     );
     hotkeys.setScope(module.moduleName);

src/modules/editor/index.ts

@@ -8,12 +8,14 @@ import { helpers } from "./helpers";
 import { https } from "./https";
 import { store } from "./stores";
 import { ImagePickController } from "./controllers/ImagePickerController";
+import { ImgCompActions } from "./actions/image";
+import { InputEventActions } from "./actions/input";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig(config);
   components = this.useComponents(components);
 
-  actions = this.createActions([initActions, editActions]);
+  actions = this.createActions([initActions, editActions, ImgCompActions, InputEventActions]);
   https = this.createHttps(https);
   store = this.createStore(store);
   helper = this.createHelper(helpers);