update

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

@@ -229,7 +229,7 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     const parentb = parent.getBoundingClientRect();
 
     const designW =
-      this.helper.designSizeToPx(this.store.currStreamCard.layout.size[0]) + 80;
+      this.helper.designSizeToPx(this.store.currStreamCard.layout.size[0]) + 200;
     if (parentb.width < designW) {
       scale = parentb.width / designW;
     }

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

@@ -11,16 +11,15 @@ import { getKeyThenIncreaseKey } from "ant-design-vue/lib/message";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { nanoid } from "nanoid";
 
-
 const ctrlState = {
   selected: [] as string[],
-  type: 0,  // 1 ctrlc 2 ctrlx
+  type: 0, // 1 ctrlc 2 ctrlx
   cardId: "", //当前的卡片Id
   screenId: "", //屏幕Id
   selWidth: 0,
   selX: 0,
-  selY: 0
-}
+  selY: 0,
+};
 
 export const editActions = EditorModule.action({
   pickComp(compId: string, selected = true) {
@@ -92,6 +91,7 @@ export const editActions = EditorModule.action({
         currCardIndex
       );
       currCard = this.helper.findComp(compId) as DesignComp;
+      currCard.layout.size[0] = this.controls.screenCtrl.getCurrScreenWidth();
     }
 
     const compId = await this.store.insertCompContainer(compKey, currCard);
@@ -105,7 +105,7 @@ export const editActions = EditorModule.action({
 
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
-      w / 2.0  - (currComp.layout.size?.[0] || w) / 2
+      w / 2.0 - (currComp.layout.size?.[0] || w) / 2
     );
     const obj = new CompObject(currComp);
     //没有选中组件添加到当前卡片最后
@@ -224,7 +224,7 @@ export const editActions = EditorModule.action({
 
       selCtrl.translate(
         this.helper.designSizeToPx(
-          w/2.0 - (currComp.layout.size?.[0] || w) / 2
+          w / 2.0 - (currComp.layout.size?.[0] || w) / 2
         ),
         cardPoints.y
       );
@@ -259,11 +259,11 @@ export const editActions = EditorModule.action({
       // index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
       const compId = await this.store.insertDesignContent(compKey, index);
       this.actions.pickComp(compId);
-      
+
       const c = this.helper.findComp(compId) as DesignComp;
       c.layout.size[0] = this.controls.screenCtrl.getCurrScreenWidth();
       c.layout.size[1] = this.controls.screenCtrl.getCurrScreenHeight();
-      
+
       this.helper.extendStreamCard(compId);
 
       this.actions.selectObjs([]);
@@ -327,20 +327,21 @@ export const editActions = EditorModule.action({
   },
 
   ctrlc() {
-    ctrlState.selected = []; 
+    ctrlState.selected = [];
     const children = this.store.currStreamCard.children.default || [];
-    children.forEach(c=>{
+    children.forEach((c) => {
       if (this.store.selected.indexOf(c) > -1) {
         ctrlState.selected.push(c);
       }
-    })
+    });
     ctrlState.screenId = this.controls.screenCtrl.currScreenId;
     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;
+    const currX = objc.parent.x,
+      currY = objc.parent.y;
     ctrlState.selX = currX;
     ctrlState.selY = currY;
     objc.setPivot(4);
@@ -360,7 +361,9 @@ export const editActions = EditorModule.action({
     const w = this.controls.screenCtrl.getCurrScreenWidth();
     if (this.store.selected.length == 1) {
       if (isWidth) this.store.currComp.layout.size[0] = w;
-      else this.store.currComp.layout.size[1] = this.store.currStreamCard.layout.size[1];
+      else
+        this.store.currComp.layout.size[1] =
+          this.store.currStreamCard.layout.size[1];
 
       objc.updateSize();
       selectCtrl.upgateGizmoStyle();
@@ -399,13 +402,13 @@ export const editActions = EditorModule.action({
     //console.log("ctrlv ", this.store.selected);
 
     //保持图层顺序
-    ctrlState.selected = []; 
+    ctrlState.selected = [];
     const children = this.store.currStreamCard.children.default || [];
-    children.forEach(c=>{
+    children.forEach((c) => {
       if (this.store.selected.indexOf(c) > -1) {
         ctrlState.selected.push(c);
       }
-    })
+    });
 
     ctrlState.cardId = this.store.currStreamCardId;
     ctrlState.type = 2;
@@ -413,7 +416,8 @@ export const editActions = EditorModule.action({
     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;
+    const currX = objc.parent.x,
+      currY = objc.parent.y;
     ctrlState.selX = currX;
     ctrlState.selY = currY;
     objc.setPivot(4);
@@ -440,7 +444,6 @@ export const editActions = EditorModule.action({
       }
     };
 
-
     ctrlState.selected.forEach((c) => {
       const cp = this.helper.findComp(c) as DesignComp;
       const cp1 = cloneDeep(cp);
@@ -456,25 +459,30 @@ export const editActions = EditorModule.action({
     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.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;
+      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;
       }
 
       if (ctrlState.screenId == this.controls.screenCtrl.currScreenId) {
@@ -489,7 +497,9 @@ export const editActions = EditorModule.action({
     this.store.currStreamCard.children.default = childs;
   },
   ctrlAndA() {
-    const childrens = (this.store.currStreamCard.children.default ||[]).slice(0);
+    const childrens = (this.store.currStreamCard.children.default || []).slice(
+      0
+    );
     this.actions.selectObjs(childrens);
     // this.controls.selectCtrl.
     //objc.updateSize();
@@ -639,7 +649,7 @@ export const editActions = EditorModule.action({
       root.value.useFor = c.state.screen.useFor;
       root.value.pageMode = c.state.screen.pageMode;
       root.value.pageSizeType = c.state.screen.pageSizeType;
-      
+
       // 封面截屏
       if (!this.store.designData.thumbnail) {
         await this.actions.updateThumbnailByScreenshot();
@@ -736,25 +746,26 @@ export const editActions = EditorModule.action({
   },
   // 设置组件锁定状态
   setCompLock(comp: DesignComp) {
-     comp.layout.locked = !comp.layout.locked
+    comp.layout.locked = !comp.layout.locked;
   },
   // 设置组件层级
   setCompLayer(comp: DesignComp, offset: number) {
-    const cards = (this.store.currStreamCard.children.default || []);
+    const cards = this.store.currStreamCard.children.default || [];
     const i = cards.indexOf(comp.id);
     if (i == -1) return;
 
-    if (offset < 0) {//向下移动
-       if (i== 0) return;
-      const temp = cards[i-1];
-      cards[i-1] = comp.id;
+    if (offset < 0) {
+      //向下移动
+      if (i == 0) return;
+      const temp = cards[i - 1];
+      cards[i - 1] = comp.id;
       cards[i] = temp;
       return;
     }
-    
-    if (i == cards.length -1) return;
-    const temp = cards[i+1];
-    cards[i+1] = comp.id;
+
+    if (i == cards.length - 1) return;
+    const temp = cards[i + 1];
+    cards[i + 1] = comp.id;
     cards[i] = temp;
 
     // comp.layout.zIndex = Math.min(
@@ -763,15 +774,17 @@ export const editActions = EditorModule.action({
     // );
   },
   //横向对齐
-  setAlignX(flag: 0 | 1 | 2 | 3, isGroup =false) {
+  setAlignX(flag: 0 | 1 | 2 | 3, isGroup = false) {
     console.log("alignX");
     const selectCtrl = this.controls.selectCtrl;
-    const w = this.helper.designSizeToPx(this.controls.screenCtrl.getCurrScreenWidth())
+    const w = this.helper.designSizeToPx(
+      this.controls.screenCtrl.getCurrScreenWidth()
+    );
 
     if (this.store.selected.length == 1 || isGroup) {
       const objc = selectCtrl.objContainer as ObjsContainer;
       const box = objc.getBound();
-      
+
       switch (flag) {
         case 0:
           selectCtrl.translate(-box.left, 0);

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

@@ -36,6 +36,7 @@ export const ImgCompActions = EditorModule.action({
     // }
   },
   previewImage(url, previewImageList) {
+    if (this.controls.screenCtrl.state.screen.useFor == "pc") return;
     if (isWeixinBrowser()) {
       this.controls.wxCtrl.setPreviewData(url, previewImageList);
     } else {