Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

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

@@ -1,7 +1,7 @@
 import { Dict_Imgs } from "@/dict";
 import { useEditor } from "@/modules/editor";
 import { defineComponent, watch } from "vue";
-import { string } from "vue-types";
+import { string, bool } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
 import { css } from "@linaria/core";
@@ -10,6 +10,7 @@ import { css } from "@linaria/core";
 export const Component = defineComponent({
   props: {
     compId: string().isRequired,
+    editlayer: bool().def(true),
   },
   setup(props) {
     const comp = useCompData(props.compId);
@@ -31,9 +32,6 @@ export const Component = defineComponent({
       };
     }
 
-
-
-
     async function changeVal() {
       try {
         const url = await controls.pickCtrl.pickOneImage();
@@ -87,7 +85,6 @@ export const Component = defineComponent({
 
       return (
         <View
-          class={ [ "overflow-hidden"]}
           compId={props.compId}
           onDblclick={store.isEditMode ? changeVal : undefined}
           onClick={() => {
@@ -97,8 +94,9 @@ export const Component = defineComponent({
               actions.previewImage(value.url, store.previewImageList);
             }
           }}
+          editlayer={props.editlayer}
         >
-          <div   class={["w-1/1 h-1/1 object-cover pointer-events-none", isCropping && cropingBorder]} >
+          <div class={["w-1/1 h-1/1 object-cover pointer-events-none overflow-hidden", isCropping && cropingBorder]} >
             <img
                   crossorigin="anonymous"
                   class={"w-1/1 h-1/1 object-cover"}

src/modules/editor/components/CompUI/basicUI/Page/PageMusic.tsx

@@ -96,6 +96,10 @@ export const PageMusic = defineComponent({
       }, 500);
     };
     const checkAutoPlay = () => {
+      const duration = audioBgm.value.duration();
+      if (duration) {
+        state.duration = duration;
+      }
       if (!audioBgm.value || store.isEditMode) {
         return;
       }

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

@@ -1,9 +1,10 @@
 import { IconRotate , IconMove} from "@/assets/icons";
 import { css } from "@linaria/core";
-import { defineComponent, onMounted, ref, nextTick, reactive } from "vue";
-import { any } from "vue-types";
+import { defineComponent, onMounted, ref, nextTick, reactive, createApp } from "vue";
+import { any, func } from "vue-types";
 import { TransformCtrl } from "@/modules/editor/controllers/TransformCtrl";
 
+
 export const Transforms = defineComponent({
     props: {
         ctrl: any<TransformCtrl>()
@@ -47,6 +48,7 @@ export const Transforms = defineComponent({
             ctrl.state.visible ? showgizmo : hideGizmo,
           ]}
           style={{
+            pointerEvents:"auto",
             top: ctrl.state.baseTop + "px"
           }}
         >
@@ -164,6 +166,12 @@ export const Transforms = defineComponent({
     };
   },
 });
+
+
+export function CreateTransform(ctl: TransformCtrl) {
+  return createApp(<Transforms ctrl={ctl} />)
+}
+
 const selctRectStyle = css`
   /* pointer-events: none; */
 `;

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -3,24 +3,28 @@ import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 import { css } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
 import { defineComponent, onMounted, ref } from "vue";
-import { string } from "vue-types";
+import { string ,bool} from "vue-types";
 import { useEditor } from "../../..";
-import { useCompRef } from "./hooks";
+import { useCompRef , useCompEditLayerRef} from "./hooks";
 
 export const View = defineComponent({
   props: {
     compId: string().isRequired,
+    editlayer: bool().def(true),
   },
   emits: ["dblclick", "click"],
   setup(props, { slots, emit }) {
     const { store, actions, helper, controls } = useEditor();
     const compRef = useCompRef(props.compId);
+    const editorLayerRef = props.editlayer? useCompEditLayerRef(props.compId) : ref();
 
     return () => {
       const comp = helper.findComp(props.compId);
       if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
       const isStreamCard = helper.isStreamCard(props.compId);
       const isGroupComp = helper.isGroupComp(props.compId);
+      const isStreamChild = helper.isStreamCardChild(props.compId);
+
       const obj = new CompObject(store.compMap[props.compId]);
       const m = obj.worldTransform.clone();
       m.invert();
@@ -44,15 +48,6 @@ export const View = defineComponent({
           onDblclick={() => emit("dblclick")}
         >
           <div
-            // onMousedown={(e) => {
-            //   if (helper.isGroupCompChild(props.compId)) return;
-            //   e.stopPropagation();
-
-            //   if (store.isEditMode) {
-            //     actions.pickComp(props.compId);
-            //   }
-            // }}
-
             onMousemove={(e) => {
               if (
                 !store.isEditMode ||
@@ -65,7 +60,14 @@ export const View = defineComponent({
           >
             {slots.default?.()}
           </div>
+
           {store.isEditMode && isStreamCard && store.currStreamCardId == props.compId && <Hudop compId={props.compId} />}
+
+          {
+             store.isEditMode && props.editlayer && <div ref={editorLayerRef} class={editAreaStyle}>
+                
+             </div>
+          }
         </div>
       );
     };
@@ -158,3 +160,21 @@ const CurrCompStyle = css`
 const groupCompCls = css`
   outline: 2px solid @inf-primary-color !important;
 `;
+
+const editAreaStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+`
+
+const editAreaTestStyle = css`
+   position: absolute;
+   top: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+`

src/modules/editor/components/CompUI/basicUI/hooks.ts

@@ -24,3 +24,31 @@ export function useCompRef(compId: string) {
   });
   return compRef;
 }
+
+export function useCompEditLayerRef(compId: string) {
+
+  const editLayerRef = ref<HTMLElement>();
+  const { helper, store } = useEditor();
+
+  onMounted(() => {
+      if ( !editLayerRef.value ) return;
+      const comp = helper.findComp(compId);
+      if (comp) {
+          Object.defineProperties(comp, {
+          $editor: {
+              value: editLayerRef.value,
+              configurable: true,
+          },
+          });
+          const dom = editLayerRef.value
+          helper.setCompEditLayer(compId, ()=>{
+              const {left, top, width, height} = dom.getBoundingClientRect();
+               return {
+                  left,top, width,height
+               }
+          })
+      }
+  });
+  return editLayerRef;
+
+}

src/modules/editor/components/CompUI/basicUI/utils.tsx

@@ -0,0 +1,41 @@
+import { useEditor } from "@/modules/editor";
+import { ref, onMounted, defineComponent, nextTick } from "vue";
+import { css } from "@linaria/core";
+import { string ,any} from "vue-types";
+import { useCompEditLayerRef } from "./hooks";
+
+const WidthEditlayer = defineComponent({
+     props: {
+        compId: string().isRequired
+     },
+
+     setup(props, {slots}) {
+     
+        const { helper, store } = useEditor();
+        if (!store.isEditMode) {
+            return ()=>(slots.default?.())
+        }
+        const editLayerRef = useCompEditLayerRef(props.compId);
+
+        return ()=>(
+            <div class="relative">
+                {
+                    slots.default?.()
+                }
+                <div class={editLayerStyle} ref={editLayerRef}>
+                </div>
+            </div>
+        )
+     },
+})
+
+const editLayerStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+`
+
+export {WidthEditlayer}

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

@@ -1,18 +1,35 @@
 import { css } from "@linaria/core";
-import { string } from "vue-types";
+import { number, string } from "vue-types";
 import { useCompData } from ".";
 import { useEditor } from "../../../../..";
 import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
+import { WidthEditlayer } from "../../../basicUI/utils";
 
 export const Component = createUIComp({
   props: {
     compId: string().isRequired,
   },
   setup(props) {
-    const { designToNaturalSize } = useEditor().helper;
+    const { store  , helper} = useEditor();
     const { children } = useCompData(props.compId);
 
+    const designToNaturalSize = helper.designToNaturalSize;
+    function fixedSize(id:string, w:number, h:number)
+    { 
+        const item1Comp = store.compMap[id]
+        if ( !item1Comp ) return;
+        const isDefault = item1Comp.layout.size[0] == 750 && item1Comp.layout.size[1] == 400
+        if (isDefault) {
+          item1Comp.layout.size[0] = w;
+          item1Comp.layout.size[1] = h;
+        }
+    }
+    fixedSize(children.item1, 191, 191);
+    fixedSize(children.item2, 191, 191);
+    fixedSize(children.item3, 191, 191);
+
+
     return () => (
       <div class="relative">
         <div class="relative">
@@ -23,38 +40,33 @@ export const Component = createUIComp({
             class="absolute bottom-0 w-1/1 pl-40px pr-10px flex items-end justify-between transform translate-y-1/3"
             style={{
               height: designToNaturalSize(191),
-              // marginBottom: designToNaturalSize(191 / 2),
             }}
           >
-            <Image.Component
-              class="rounded-1/2 overflow-hidden"
-              style={{
-                width: designToNaturalSize(191),
-                height: designToNaturalSize(191),
-                // marginTop: designToNaturalSize(191 / 3),
-              }}
-              compId={children.item1}
-            />
-
-            <Image.Component
-              class="rounded-1/2 overflow-hidden"
-              style={{
-                width: designToNaturalSize(191),
-                height: designToNaturalSize(191),
-                marginBottom: designToNaturalSize(191 / 3),
-              }}
-              compId={children.item2}
-            />
+          
+                <Image.Component
+                  class="rounded-1/2 overflow-hidden"
+                  editlayer = {false}
+                  compId={children.item1}
+                />
+       
+              <Image.Component
+                class="rounded-1/2 overflow-hidden"
+                style={{
+                  marginBottom: designToNaturalSize(191 / 3),
+                }}
+                compId={children.item2}
+                editlayer = {false}
+              />
+              
+              <Image.Component
+                  class="rounded-1/2 overflow-hidden"
+                  style={{
+                    marginBottom: designToNaturalSize((191 / 3) * 2),
+                  }}
+                  compId={children.item3}
+                  editlayer = {false}
+              />
 
-            <Image.Component
-              class="rounded-1/2 overflow-hidden"
-              style={{
-                width: designToNaturalSize(191),
-                height: designToNaturalSize(191),
-                marginBottom: designToNaturalSize((191 / 3) * 2),
-              }}
-              compId={children.item3}
-            />
           </div>
         </div>
         <div class="absolute top-50px left-0 z-1">

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

@@ -34,14 +34,23 @@ export const { createComp, useCompData } = createCompHooks({
     item1: () =>
       createCompId("Image", {
         value: { url: thumbnail, x: 26.5, y: -23.0, s: 4.05 },
+        layout: {
+          size: [191, 191]
+        }
       }),
     item2: () =>
       createCompId("Image", {
         value: { url: thumbnail, x: -4.0, y: -13.5, s: 3.9 },
+        layout: {
+          size: [191, 191]
+        }
       }),
     item3: () =>
       createCompId("Image", {
         value: { url: thumbnail, x: -34.0, y: -3.5, s: 4.0 },
+        layout: {
+          size: [191, 191]
+        }
       }),
     text1: () =>
       createCompId("Text", {

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

@@ -1,7 +1,7 @@
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
-import { onUnmounted, reactive, ref } from "vue";
+import { onUnmounted, reactive, ref, onMounted } from "vue";
 import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
@@ -33,6 +33,7 @@ export default defineUI({
     const selectCanvasRef = ref();
     const viewportRef = ref();
     controls.cropCtrl.modifyCtrl.toolbars = TipIcons;
+    const editLayerRef = ref();
 
     return () => {
       const pageRoot = helper.findRootComp();
@@ -48,9 +49,10 @@ export default defineUI({
             selectCanvasRef.value,
             viewportRef.value
           );
+          helper.initEditLayer(editLayerRef.value);
         }, 0);
       }
-
+      
       return (
         <div class="scrollbar overflow-y-auto h-1/1" ref={viewportRef}>
           <div class="relative">
@@ -105,10 +107,11 @@ export default defineUI({
                           />
                         )} */}
 
-                        { 
+                        {/* { 
                           !state.draging && controls.cropCtrl.state.visible && <Transforms ctrl={ controls.cropCtrl.modifyCtrl} />
-                        }
-                        
+                        } */}
+
+
                         {!state.draging && <SelectTransfer />}
                       </>
                     );
@@ -126,6 +129,9 @@ export default defineUI({
                 }}
               </CompUI.Page.Component>
             </div>
+            
+            <div class={editLayerStyle} ref={editLayerRef}>
+            </div>
             <canvas class={selectCls} ref={selectCanvasRef} />
           </div>
           <div class={meatureStyle}>
@@ -196,3 +202,13 @@ const meatureStyle = css`
     cursor: ew-resize;
   }
 `;
+
+const editLayerStyle = css`
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+`

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

@@ -32,7 +32,7 @@ export default defineComponent({
       const xhr = new XMLHttpRequest();
       xhr.open(
         "post",
-        "http://186b2d5554134321a0afd4b1be443273.apig.ap-southeast-1.huaweicloudapis.com/chatgpt"
+        "https://186b2d5554134321a0afd4b1be443273.apig.ap-southeast-1.huaweicloudapis.com/chatgpt"
       );
       xhr.setRequestHeader("content-type", "application/json");
       xhr.send(JSON.stringify(reqData));

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

@@ -13,6 +13,7 @@ export default defineUI({
     Content,
     Toolbar,
   },
+  
   setup(props, { slots }) {
     return () => (
       <div class="flex flex-col h-1/1">

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

@@ -5,6 +5,7 @@ import { CompObject } from "../SelectCtrl/compObj";
 import { ObjsContainer } from "../SelectCtrl/ObjsContainer";
 import { Matrix } from "../SelectCtrl/matrix";
 import { TransformCtrl } from "../TransformCtrl";
+import { CreateTransform } from "../../components/CompUI/basicUI/Transfer/transform";
 
 function createImage(url:string) :Promise<HTMLImageElement> {
     return new Promise((r)=>{
@@ -46,14 +47,15 @@ export class ImageCropperCtrl extends ModuleControl<EditorModule> {
             const initW = this.initValue.w;
             const initH = this.initValue.h;
             const initMtrx = this.initValue.matrix;
-
+            
             if (name == "Cross") { //取消操作
                 const compId = this.state.compId
                 const imgComp = this.store.compMap[compId];
                 imgComp.value.matrix = initMtrx;
                 imgComp.value.w = initW;
                 imgComp.value.h = initH;
-                this.state.compId = "";
+                this.close();
+
                 return;
             }
             //确定操作
@@ -77,22 +79,23 @@ export class ImageCropperCtrl extends ModuleControl<EditorModule> {
                     imgComp.value.h = lastH;
                 }
             } as any)
+
+            this.close();
         })
 
         let tmpM = new Matrix();
         let tmpM2 = new Matrix();
 
         this.modifyCtrl.on("change", (dtx:number, dty:number)=>{
-            
             const imgComp = this.store.compMap[this.state.compId];
 
             tmpM.copyFrom(this.modifyCtrl.objContainer.parent.worldTransform);
 
-            const comp = new CompObject(imgComp);
+            // const comp = new CompObject(imgComp);
+            // tmpM2.copyFrom(comp.worldTransform)
+            // tmpM2.invert()
+            // tmpM.prepend(tmpM2)
 
-            tmpM2.copyFrom(comp.worldTransform)
-            tmpM2.invert()
-            tmpM.prepend(tmpM2)
 
             this.lastValue.w = this.modifyCtrl.objContainer.width;
             this.lastValue.h = this.modifyCtrl.objContainer.height;
@@ -103,34 +106,53 @@ export class ImageCropperCtrl extends ModuleControl<EditorModule> {
         });
     }
 
+    cancelTransform: ()=>void = ()=>{console.log("not cropper!!")};
+
+    async croppImage(id:string) {
 
-    async croppImage(id :string) {    
         const imgComp = this.store.compMap[id]
         if (imgComp.compKey != "Image") return;
 
         this.state.compId = id;
         this.state.visible = true;
-
         this.controls.historyCtrl.state.enable = false;
+        this.modifyCtrl.state.toolbarNames = ["Right", "Cross"];
+
+        const cardBox = this.controls.selectCtrl.getCurrCardBox();
+        this.modifyCtrl.baseBox.x = cardBox.left;
+        this.modifyCtrl.baseBox.y = cardBox.top;
+        this.modifyCtrl.baseBox.w = cardBox.width;
+        this.modifyCtrl.baseBox.h = cardBox.height;
+
+        const isChild = this.helper.isStreamCardChild(id)
+        if (isChild) {
+             await this.croppImageImpl(id, true);
+        } else {
+            await this.croppImageImpl(id, false);
+        }
+        const vm = CreateTransform(this.modifyCtrl);
+
+        const editLayer = this.helper.createEditElement(id)
+        if (!editLayer) return;
+
+        vm.mount(editLayer.dom);
+
+        this.cancelTransform = ()=>{
+            vm.unmount()
+            editLayer.destroy();
+        }
+    }
 
+    async croppImageImpl(id :string, isChild= true) {    
+       
+       const imgComp = this.store.compMap[id]
         const obj = new CompObject(imgComp);
         const w = obj.width, h = obj.height; //图片的宽高
         const r1 = h / w;
         const imgObj = await createImage(imgComp.value.url)
         const r2 = imgObj.height / imgObj.width;
 
-        const selecCtrl = this.controls.selectCtrl;
-        const cardBox = selecCtrl.getCurrCardBox();
-        const pageBox = selecCtrl.getPageBox();
-
-        const yoff = cardBox.top - pageBox.top;
-        this.modifyCtrl.state.baseTop = yoff;
-        this.modifyCtrl.baseBox.x = cardBox.left;
-        this.modifyCtrl.baseBox.y = cardBox.top;
-        this.modifyCtrl.baseBox.w = cardBox.width;
-        this.modifyCtrl.baseBox.h = cardBox.height;
-        this.modifyCtrl.state.toolbarNames = ["Right", "Cross"];
-
+        this.modifyCtrl.state.baseTop = 0;
         const defaultScale =  imgComp.value.s == undefined || (imgComp.value.s == 1 && imgComp.value.x == 0 && imgComp.value.y == 0);
         let scale = 1;
         let offsetX = 0;
@@ -181,11 +203,14 @@ export class ImageCropperCtrl extends ModuleControl<EditorModule> {
         this.initValue.w = srcWidth;
         this.initValue.h = srcHeight;
 
-         //获取obj的image图片的世界大小
-         const paths = this.helper.getCompTrees(id);
-         const objC =  new ObjsContainer([new CompObject(paths[2])]) //当前对象作为容器
-        m.prepend(objC.parent.worldTransform);
-        
+        //获取obj的image图片的世界大小
+        // const paths = this.helper.getCompTrees(id);
+        // const objC =  new ObjsContainer([new CompObject(paths[2])]) //当前对象作为容器
+        // const wmx = new Matrix();
+        // wmx.copyFrom(objC.parent.worldTransform)
+        // wmx.tx = 0;
+        // wmx.ty = 0;
+        // m.prepend(wmx);
         if (this.controls.selectCtrl.assistMagnet) {
             this.controls.selectCtrl.assistMagnet.enable = false;
         }
@@ -204,7 +229,8 @@ export class ImageCropperCtrl extends ModuleControl<EditorModule> {
     }
 
     close(): void {
-        if ( !this.state.visible  ) return;
+        this.cancelTransform();
+        this.cancelTransform = ()=>{console.log("empty")};
 
         const compId = this.state.compId
         const imgComp = this.store.compMap[compId];

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

@@ -1,5 +1,5 @@
 import { Events } from "queenjs";
-import { reactive } from "vue";
+import { reactive , createApp} from "vue";
 import OnMouseDown from "./mouseDown";
 import { ObjsContainer } from "../SelectCtrl/ObjsContainer";
 import { CONST, downOptions, moveOptions, rotateOptions, scaleOptions } from "./state";
@@ -14,14 +14,14 @@ export class TransformCtrl extends Events {
     showScalebottom: true,
     
     matrixInvert: 'matrix(1,0,0,1,0,0)',
-    relWidth: 0,
-    relHeight: 0,
+    relWidth: 100,
+    relHeight: 100,
     width: 100,
     height: 100,
     matrix: 'matrix(1,0,0,1,0,0)',
     visible: true,
     baseTop: 0,
-    bbox: {x:0, y: 0, w: 0, h:0},
+    bbox: {x:0, y: 0, w: 100, h:100},
   })
   //所有toolbar组件
   toolbars = {} as {[key :string]: (props: any)=>JSX.Element};
@@ -43,7 +43,6 @@ export class TransformCtrl extends Events {
   }
 
   initUI(ui: HTMLElement) {
-
      ui.addEventListener("mousedown", (e:MouseEvent)=>{
         e.preventDefault();
         e.stopPropagation();

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

@@ -0,0 +1,74 @@
+import { EditorModule } from "..";
+import { CompObject } from "../../controllers/SelectCtrl/compObj";
+import { Matrix } from "../../controllers/SelectCtrl/matrix";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
+import { Layout } from "../../typings";
+
+
+type EditCompPara = {
+    left: number
+    top: number;
+    width: number;
+    height: number;
+}
+
+const CachEditMasks:any = {};
+let   RootEditLayer:HTMLElement;
+
+export const editHelpers = EditorModule.helper({
+    setCompEditLayer(compId: string, getPara:()=>EditCompPara) {
+        CachEditMasks[compId] = getPara;
+    },
+
+    initEditLayer( root : HTMLElement) {
+        RootEditLayer = root;
+    },
+
+    createEditElement(compId:string) {
+        if (!RootEditLayer) return;
+     
+        const r = RootEditLayer.getBoundingClientRect();
+        const comp = this.store.compMap[compId];
+        const w = this.helper.designSizeToPx(comp.layout.size[0])
+        const h = this.helper.designSizeToPx(comp.layout.size[1])
+        const parent = document.createElement("div")
+        const mtrx = this.helper.getCompWorlParentPos(compId, r.left, r.top);
+
+        parent.style.position = "absolute";
+        parent.style.width = "375px";
+        parent.style.height = "375px";
+        parent.style.transform = mtrx.getMatrixStr();
+        parent.style.transformOrigin = "0 0";
+
+        const v = document.createElement("div")
+        v.style.width  =  w+ "px";
+        v.style.height =  h + "px";
+        v.style.position = "absolute";
+
+        if (comp.layout.transformMatrix) {
+            v.style.transform = comp.layout.transformMatrix;
+            v.style.transformOrigin = "0 0";
+        } else {//标识对象没有被移动过
+
+            const p  = this.helper.findParentComp(compId) as DesignComp;
+            const box = p.$el.getBoundingClientRect();
+            const c = comp.$el.getBoundingClientRect();
+            let x = c.left - box.x;
+            let y = c.top -  box.y;
+            const m = new Matrix();
+            m.translate(x, y);
+            v.style.transform = m.getMatrixStr();
+            v.style.transformOrigin = "0 0";
+        }
+        parent.appendChild(v);
+        RootEditLayer.appendChild(parent);
+
+        return {
+            dom: v,
+            destroy: ()=>{
+                RootEditLayer.removeChild(parent);
+            }
+        }
+    }
+});

src/modules/editor/module/helpers/index.ts

@@ -1,5 +1,6 @@
 import { EditorModule } from "..";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
+import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
 import { Layout } from "../../typings";
@@ -59,6 +60,27 @@ export const helpers = EditorModule.helper({
   findRootComp(): DesignComp | undefined {
     return this.store.designData.compMap["root"];
   },
+
+  getCompCard(compId:string) {
+      const paths:DesignComp[] = this.helper.getCompTrees(compId);
+      return paths[1]
+  },
+
+  getCompWorlParentPos(compId:string, vx:number ,vy: number) {
+    const paths:DesignComp[] = this.helper.getCompTrees(compId);
+    const m = new Matrix();
+    let n = paths.length;
+    let box = paths[1].$el.getBoundingClientRect();
+    m.translate(box.left-vx, box.top-vy);
+    for( let i=2; i<(n-1); i++) {//card开始遍历
+      const m1 = new Matrix();
+      m1.setMatrixStr(paths[i].layout.transformMatrix || "matrix(1,0,0,1,0,0)")
+      m.append(m1);
+    }
+    return m;
+  },
+
+
   getCompTrees(compId: string) {
     const comps: DesignComp[] = [];
     const getParentComp = (compId: string) => {

src/modules/editor/module/index.ts

@@ -11,6 +11,8 @@ import { editActions } from "./actions/edit";
 import { ImgCompActions } from "./actions/image";
 import { initActions } from "./actions/init";
 import { helpers } from "./helpers";
+import { editHelpers } from "./helpers/edit";
+
 import { https } from "./https";
 import { store } from "./stores";
 import { DragAddCtrl } from "../controllers/DragAddCtrl";
@@ -39,8 +41,8 @@ export class EditorModule extends ModuleRoot {
   store = this.createStore(store, {
     transform: (state) => createProxy(state),
   });
-  helper = this.createHelper(helpers);
-
+  helper = this.createHelper([helpers, editHelpers]);
+    
   controls = {
     uploader: new UploadController({
       httpConfig: {