调整页面的缩放控制

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

@@ -22,7 +22,9 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
         pos: {
             x: 0, y:0
         },
-        
+        mouse: {
+            x: 0, y: 0
+        },
         scale:  1,
         keyCode: -1,
         moveMode: false,
@@ -52,7 +54,6 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
         // EditorRef.value.style.backgroundColor = "greenyellow";
         EditorRef.value.style.left = "0";
         EditorRef.value.style.top = "0";
-
         CanvasRef.value.style.width = "100%"
         CanvasRef.value.style.height = "100%"
         EditorRef.value.style.position = "absolute";
@@ -115,19 +116,35 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
 
     let isMoving = false;
     let moveX = 0, moveY = 0;
+
+    
+    const obj = new ObjsContainer([]);
+    this.state.onWidthChanged(()=>{
+        obj.rect.width = this.state.width;
+    })
+    this.state.onWidthChanged(()=>{
+        obj.rect.height = this.state.height;
+    })
+
     parent.addEventListener("mousemove",(e:MouseEvent)=>{
-        //this.state.setMouse({x: e.offsetX, y: e.offsetY});
+
+        const s = this.state.scale;
+        const b = editorLayer.getBoundingClientRect()
+        this.state.setMouse({x: (e.clientX - b.left) / s , y: (e.clientY - b.top) / s});
+
         if (isMoving || e.button == 2) { //鼠标右键
             e.preventDefault();
             parent.style.cursor = "grab";
             const xOffset = e.pageX - moveX;
             const yOffset = e.pageY - moveY;
-            this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
+
+            obj.translate(xOffset, yOffset);
+            editorLayer.style.transform = obj.parent.worldTransform.getMatrixStr();
+            //this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
         }
         moveX = e.pageX;
         moveY = e.pageY;
     });
-
     
     parent.addEventListener("mouseup",(e:MouseEvent)=>{
         if(this.state.moveMode) this.moveEditor();
@@ -143,9 +160,14 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     })
 
     this.state.onScaleChanged((v)=>{
-        editorLayer.style.transformOrigin = "50% 50%";
-        editorLayer.style.transform = `scale(${v})`;
+        obj.setPivot2(this.state.mouse.x, this.state.mouse.y)
+        obj.scale(v, v);
+        editorLayer.style.transformOrigin = `0 0`;
+        editorLayer.style.transform = obj.parent.worldTransform.getMatrixStr();
+        //editorLayer.style.left
     })
+
+
     this.state.onPosChanged((v)=>{
         editorLayer.style.left= v.x + "px";
         editorLayer.style.top = v.y + "px";

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

@@ -156,18 +156,19 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    updateAdapterState() {
       if (!this.store.rootPage) return;
 
-    
-
       this.restorScreenPage();
-
+      let total = 0;
       this.store.streamCardIds.forEach(c=>{
          const card = this.helper.findComp(c) as DesignComp;
          card.setW(this.getCurrScreenWidth());
-         this.helper.extendStreamCard(card.id);
+         total += this.helper.extendStreamCard(card.id);
       })
       const w = this.helper.designSizeToPx(this.getCurrScreenWidth());
-      const h =  this.helper.designSizeToPx(this.getCurrScreenHeight());
-
+      let h =  this.helper.designSizeToPx(this.getCurrScreenHeight());
+      if (this.state.screen.pageMode == "long") {
+         h = this.helper.designSizeToPx(total)
+      }
+      
       this.controls.editorCtrl.state.setPage({w, h});
       this.store.rootPage.layout.size[0] = this.getCurrScreenWidth();
       this.store.rootPage.layout.size[1] = this.getCurrScreenHeight(); 

src/modules/editor/module/actions/init.ts

@@ -48,7 +48,9 @@ export const initActions = EditorModule.action({
     this.controls.screenCtrl.state.screen.pageMode = root.value.pageMode || "long"  
     this.controls.screenCtrl.state.screen.pageSizeType = root.value.pageSizeType || "normal"
 
-    
+    if (this.store.isEditMode) {
+      this.controls.screenCtrl.updateAdapterState();
+    }
   },
 
   async initWkDesign(id: string) {

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

@@ -208,13 +208,14 @@ export const helpers = EditorModule.helper({
   },
 
   extendStreamCard(streamCardId: string) {
-    if (!streamCardId) return;
+    if (!streamCardId) return 0;
 
     const compMap = this.store.designData.compMap;
     const card = compMap[streamCardId];
     if (this.controls.screenCtrl.isShortPage) {
-       card.setH(this.controls.screenCtrl.getCurrScreenHeight());
-       return;
+      const  h = this.controls.screenCtrl.getCurrScreenHeight();
+       card.setH(h);
+       return h;
     }
     
     const childs = card.children.default || [];
@@ -231,6 +232,8 @@ export const helpers = EditorModule.helper({
       maxH = 200;
     }
     card.setH(maxH);
+    
+    return maxH;
   },
 
   getCardNextPosY(cardId:string, itemWidth:number) {