添加自动剧中

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

@@ -83,6 +83,7 @@ export default defineUI({
                       <div key={item} class={["card-item relative transition-opacity hover:opacity-80"]} style={style} onClick={()=>{
                          actions.selectObjs([]);
                          actions.pickComp(item, false);
+                         controls.editorCtrl.autoInScreen();
                       }}>
                           {
                               store.streamCardIds.length > 1 && <IconDelete onClick={()=>{
@@ -99,6 +100,9 @@ export default defineUI({
                 <img class="mt-15px cursor-pointer" onClick={()=>{
                       const index = store.streamCardIds.length;
                       actions.addCompToDesign("Container", index);
+                      setTimeout(() => {
+                        controls.editorCtrl.autoInScreen();
+                      }, 200);
                 }} src={require("@/assets/imgs/add.svg")} alt="" />
                 </Container>
               </div>

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

@@ -177,6 +177,11 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     this.state.setPos({x: left, y: top});
   }
 
+  autoInScreen() {
+     this.updateEditorSize();
+     this.setScale(1);
+  }
+
   setScale(scale: number) {
     if (isNaN(scale)) scale = this.state.scale;
     else if (scale < 0.5) scale = 0.5;

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

@@ -41,6 +41,12 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
         this.actions.ctrlv();
       },
     },
+    {
+      hotKey: "ctrl+x",
+      action() {
+        this.actions.ctrlx();
+      },
+    },
     // 删除当前组件
     {
       hotKey: "Backspace,del",

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

@@ -1,4 +1,4 @@
-import { cloneDeep, pick } from "lodash";
+import { cloneDeep, curry, pick } from "lodash";
 import { Exception, queenApi } from "queenjs";
 import { EditorModule } from "..";
 import { ScreenshotCtrl } from "../../controllers/ScreenshotCtrl";
@@ -10,9 +10,16 @@ import { ObjsContainer } from "../../controllers/SelectCtrl/ObjsContainer";
 import { getKeyThenIncreaseKey } from "ant-design-vue/lib/message";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { nanoid } from "nanoid";
-import { string } from "vue-types";
 
-let ctrlcselected: string[] = [];
+
+const ctrlState = {
+  selected: [] as string[],
+  type: 0,  // 1 ctrlc 2 ctrlx
+  cardId: "", //当前的卡片Id
+  selWidth: 0,
+  selX: 0,
+  selY: 0
+}
 
 export const editActions = EditorModule.action({
   pickComp(compId: string, selected = true) {
@@ -259,7 +266,7 @@ export const editActions = EditorModule.action({
       this.helper.extendStreamCard(compId);
 
       this.actions.selectObjs([]);
-      
+
       return;
     }
 
@@ -320,11 +327,23 @@ export const editActions = EditorModule.action({
 
   ctrlc() {
     //  console.log("contrc ", this.store.selected);
-    ctrlcselected = this.store.selected.slice(0);
+    ctrlState.selected = this.store.selected.slice(0);
+    ctrlState.cardId = this.store.currStreamCardId;
+    ctrlState.type = 1;
+    const objc = this.controls.selectCtrl.objContainer as ObjsContainer;
+    ctrlState.selWidth = this.helper.pxToDesignSize(objc.width);
+    objc.setPivot(0);
+    const currX = objc.parent.x, currY = objc.parent.y;
+    ctrlState.selX = currX;
+    ctrlState.selY = currY;
+    objc.setPivot(4);
   },
+
   copyLastSelected() {
     if (this.store.currCompId && this.store.currCompId != "root") {
-      ctrlcselected = [this.store.currCompId];
+      ctrlState.selected = [this.store.currCompId];
+      ctrlState.cardId = this.store.currStreamCardId;
+      ctrlState.type = 1;
     }
   },
 
@@ -368,10 +387,24 @@ export const editActions = EditorModule.action({
       }
     }
   },
+  ctrlx() {
+    //console.log("ctrlv ", this.store.selected);
+    //console.log("ctrlv ", this.store.selected);
+    ctrlState.selected = this.store.selected.slice(0);
+    ctrlState.cardId = this.store.currStreamCardId;
+    ctrlState.type = 2;
+    
+    const objc = this.controls.selectCtrl.objContainer as ObjsContainer;
+    ctrlState.selWidth = this.helper.pxToDesignSize(objc.width);
+    objc.setPivot(0);
+    const currX = objc.parent.x, currY = objc.parent.y;
+    ctrlState.selX = currX;
+    ctrlState.selY = currY;
+    objc.setPivot(4);
+  },
 
   ctrlv() {
-    console.log("ctrlv ", this.store.selected);
-    if (ctrlcselected.length < 1) return;
+    if (ctrlState.selected.length < 1) return;
 
     const news: string[] = [];
 
@@ -391,12 +424,12 @@ export const editActions = EditorModule.action({
       }
     };
 
-    ctrlcselected.forEach((c) => {
+
+    ctrlState.selected.forEach((c) => {
       const cp = this.helper.findComp(c) as DesignComp;
       const cp1 = cloneDeep(cp);
       cp1.id = nanoid();
       news.push(cp1.id);
-
       this.store.compMap[cp1.id] = cp1;
       this.store.setCompPid(cp1.id, this.store.currStreamCardId);
 
@@ -404,10 +437,29 @@ export const editActions = EditorModule.action({
     });
 
     this.actions.addComps(news);
-
     this.actions.selectObjs(news);
 
     setTimeout(() => {
+      if (ctrlState.type == 2) {//剪辑删除原来的组件
+         const card = this.helper.findComp(ctrlState.cardId) as DesignComp;
+         const childs = card.children.default?.slice(0) || [];
+         ctrlState.selected.forEach(s=>{
+             let i = childs.indexOf(s);
+             if (i != -1) {
+              childs.splice(i, 1);
+             }
+         })
+         card.children.default = childs;
+         this.helper.extendStreamCard(ctrlState.cardId);
+         ctrlState.selected = [];
+      }
+
+      //获取当前选中的内容
+      if ( ctrlState.cardId != this.store.currStreamCardId) {//跨卡片拷贝
+          let pox = this.helper.getCardNextPosY(this.store.currStreamCardId, ctrlState.selWidth);
+          this.controls.selectCtrl.translate(0, pox.y - ctrlState.selY);
+          return;
+      }
       this.controls.selectCtrl.translate(20, 20);
     }, 100);
   },

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

@@ -196,6 +196,33 @@ export const helpers = EditorModule.helper({
     card.setH(maxH);
   },
 
+  getCardNextPosY(cardId:string, itemWidth:number) {
+      let yOffset = 0;
+      if (cardId != this.store.currStreamCardId) {
+        //const paths = this.helper.getCompTrees(cardId);
+        const bound = this.helper.getCardCompBound(cardId);
+        yOffset = bound.y + bound.h;
+      } else {
+        const currCard = this.helper.findComp(cardId) as DesignComp;
+        //没有选中组件添加到当前卡片最后
+        const children = currCard.children.default || [];
+        let prevCompIndex = -1;
+        if (this.store.currCompId != "" && this.store.currCompId != "root") {
+           prevCompIndex = children.indexOf(this.store.currCompId);
+        }
+        if (prevCompIndex != -1) {
+          const bound = this.helper.getCardCompBound(children[prevCompIndex]);
+          yOffset = bound.y + bound.h;
+        }
+      }
+      const w = this.controls.screenCtrl.getCurrScreenWidth();
+      //添加组件到当前选中的组件下面
+      const xOffset:number = this.helper.designSizeToPx(
+        w / 2.0 - (itemWidth || w) / 2
+      );
+      return {x: xOffset, y: yOffset};
+  },
+
   getClientId() {
     let clientId = undefined;
     try {