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

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

@@ -7,6 +7,7 @@ import { RxValue } from "../ReactCtrl/rxValue";
 import { DisplayObject } from "../SelectCtrl/objects/displayObject";
 import { ObjsContainer } from "../SelectCtrl/ObjsContainer";
 import { settingsStore } from "@queenjs-modules/queditor/module/stores/settings";
+import { object } from "vue-types";
 
 
 const KeySpace = 32;
@@ -19,7 +20,9 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
         pos: {
             x: 0, y:0
         },
-        
+        mouse: {
+            x: 0, y: 0
+        },
         scale:  1,
         keyCode: -1,
         moveMode: false,
@@ -49,7 +52,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";
@@ -79,6 +81,7 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     this.state.setMoveMode(!this.state.moveMode);
   }
 
+  editRoot = new ObjsContainer([]);
   initEditorEvent(editorLayer:HTMLElement, parent:HTMLElement) {
     // 监听键盘的 keydown 事件
     document.addEventListener("keydown", (event)=>{
@@ -111,19 +114,35 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
 
     let isMoving = false;
     let moveX = 0, moveY = 0;
+
+    
+    const obj = this.editRoot;
+    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();
@@ -139,9 +158,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";
@@ -186,9 +210,26 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     this.state.setPos({x: left, y: top});
 }
 
-autoInScreen() {
-    this.updateEditorSize();
+  autoInScreen() {
+    
      this.setScale(1);
+     const bound = this.store.currStreamCard.$el.getBoundingClientRect();
+     console.log(bound.width, bound.height);
+
+     const parent = this.doms.parent.value as HTMLElement;
+
+     const parentb = parent.getBoundingClientRect();
+
+     const left = parentb.left + ( parentb.width - bound.width) / 2.0;   //屏幕坐标位置
+     const top =  parentb.top + ( parentb.height - bound.height) / 2.0;
+
+     let offsetX = left - bound.left;
+     let offsetY = top -bound.top;
+
+     this.editRoot.translate(offsetX, offsetY);
+
+    const editor =   this.doms.editor.value  as HTMLElement;
+    editor.style.transform = this.editRoot.parent.worldTransform.getMatrixStr();
   }
 
   setScale(scale: number) {

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) {