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

package.json

@@ -35,8 +35,8 @@
     "@queenjs-modules/queentree": "^0.0.10",
     "@queenjs-modules/queentree-explorer": "^0.0.6",
     "@queenjs-modules/queentree-explorer-viewer": "^0.0.3",
-    "@queenjs/components": "^0.0.22",
-    "@queenjs/controllers": "^0.0.6",
+    "@queenjs/components": "^0.0.23",
+    "@queenjs/controllers": "^0.0.8",
     "@queenjs/icons": "^0.0.20",
     "@queenjs/theme": "^0.0.8",
     "@queenjs/ui": "^0.0.6",

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

@@ -16,7 +16,7 @@ export const Component = defineComponent({
   },
   setup(props) {
     const { helper, controls , store} = useEditor();
-    const { children } = useCompData<CompCardObj>(props.compId);
+    const comp = useCompData<CompCardObj>(props.compId);
     const isStreamCard = helper.isStreamCard(props.compId);
     
     const isShowSwiper = () => {
@@ -72,7 +72,7 @@ export const Component = defineComponent({
       const showSwiper = isShowSwiper();
       const containerStyles = getContainerStyles();
       const containerScale = createScale();
-
+      
       return (
         <div
           class={cx(rootStyles, showSwiper && "swiper-slide")}
@@ -83,7 +83,7 @@ export const Component = defineComponent({
             style={containerScale}
             showMask={props.showMask}
           >
-            {children.default?.map((compId) => {
+            {comp.children.default?.map((compId) => {
               const compItem = helper.findComp(compId) as DesignComp;
               const Comp =
                 controls.compUICtrl.state.components.get(compItem?.compKey)

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

@@ -113,6 +113,7 @@ export const Component = defineComponent({
 
       return (
         <div
+          key={controls.pageCtrl.state.designId}
           ref={compRef}
           style={pageStyles}
           class={cx(pageRootStyles, editor.store.isEditMode && pageEditStyle)}

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

@@ -14,7 +14,6 @@ export const Component = defineComponent({
     const data = useCompData<CompRectObj>(props.compId);
 
     onMounted(()=>{
-        // draw();
         effect(draw);
     })
 
@@ -25,7 +24,7 @@ export const Component = defineComponent({
         const canvas = canvasRef.value as HTMLCanvasElement;
         if (!canvas) return;
 
-        const ctx = canvasRef.value?.getContext("2d") as CanvasRenderingContext2D;
+        const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
 
         const width = data.layout.size[0];
         const height = data.layout.size[1];

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

@@ -19,8 +19,7 @@ export const SelectTransfer = defineComponent({
 
 
     watch(()=>[controls.selectCtrl.gizmo.state.transform.selected], ()=>{
-      console.log("changing--")
-   
+     
       nextTick(()=>{
         nextTick(()=>{
           if (!toolbarRef.value) {

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

@@ -47,18 +47,18 @@ export default defineUI({
         flagRef.value = true;
         setTimeout(() => {
           actions.onViewReady(
-            pageRoot.$el,
+            refs.page.value,
             refs.canvas.value,
             refs.parent.value
           );
           helper.initEditLayer(editLayerRef.value);
         }, 100);
       }
-
+      console.log("======================", controls.pageCtrl.state.designId)
       return (
         <div class="flex flex-1 relative">
           <div class={["scrollbar", cardList]}>
-            <div>
+            <div key={controls.pageCtrl.state.designId}>
               <Container
                 class="space-y-15px mt-15px"
                 onDrop={(e: any) => {

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

@@ -6,20 +6,19 @@ import { history } from "@/modules/editor/objects/DesignTemp/factory";
 export default defineUI({
   setup() {
     const h = history;
-
     return () => {
-      console.log("h.refCanUndo.value=>", h.refCanUndo.value )
+      const undoDisable = !h.refCanUndo.value || !h.enable;
+      const redoDisable = !h.refCanRedo.value || !h.enable;
+
       return (
         <div class="space-x-20px z-999">
           <TipIcons.Undo
-            disable={ !h.enable || !h.refCanUndo.value}
+            disable={ undoDisable }
             class={btnCls}
             onClick={() => h.undo()}
           />
           <TipIcons.Redo
-            disable={
-              !h.enable || !h.refCanRedo.value
-            }
+            disable={ redoDisable }
             class={btnCls}
             onClick={() => h.redo()}
           />

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

@@ -19,16 +19,25 @@ export class PageCtrl extends ModuleControl<EditorModule> {
         currCompId: "root",
         currStreamCardId: "",
         rootId: "",
+        designId: "",
         title: ''
     }, history)
 
     initEvent() {
 
+        const updatePid = (pid:string)=>{
+           const comps = this.compMap[pid].children.default;
+           comps.forEach(c=>{
+               this.setCompPid(c, pid)
+               updatePid(c);
+           })
+        }
+
         this.rootPage.children.default.forEach(cid=>{
             const card = this.compMap[cid];
             let first = true;
             this.setCompPid(cid, this.rootPage.id);
-
+            updatePid(this.rootPage.id)
             card.children.onDefaultChanged((childs)=>{
                 if (first) {
                     first = false;
@@ -36,6 +45,7 @@ export class PageCtrl extends ModuleControl<EditorModule> {
                 }
                 childs.forEach(c=>{
                   this.setCompPid(c, card.id);
+                  updatePid(c)
                 })
                 this.helper.extendStreamCard(cid);
             })
@@ -86,7 +96,8 @@ export class PageCtrl extends ModuleControl<EditorModule> {
         return this.rootPage?.children.default || [];
     }
 
-    setDesignData(data: Partial<DesignTemp>) {     
+    setDesignData(data: Partial<DesignTemp>) {  
+       history.enable = false;
        this.designData = new DesignTemp(data);
        this.state.title = data.title || '';
         //设置组件父子关系
@@ -107,9 +118,19 @@ export class PageCtrl extends ModuleControl<EditorModule> {
         this.initEvent();
         this.controls.propsCtrl.state.propId = "root";
 
-       setTimeout(() => {
-            history.enable = true;
-       }, 1000);
+        const root = this.rootPage;
+        this.controls.screenCtrl.state.screen.useFor= root.value.useFor as any || "mobile"
+        this.controls.screenCtrl.state.screen.pageMode = root.value.pageMode as any || "long"  
+        this.controls.screenCtrl.state.screen.pageSizeType = root.value.pageSizeType as any || "normal"
+    
+        if (this.store.isEditMode) {
+          this.controls.screenCtrl.updateAdapterState();
+        }
+
+        setTimeout(() => {
+              history.clear();
+              history.enable = true;
+        }, 1000);
     }
 
     get rootPage() {

src/modules/editor/controllers/ReactCtrl/rxValue.ts

@@ -128,7 +128,6 @@ class RxValue {
                     out[name] = obj[name].toJson();
                     return;
                 }
-                if ( obj[name] )
                 out[name] = obj._rxs[name].getValue().value;
             })
             return out;

src/modules/editor/controllers/SelectCtrl/gizemo.ts

@@ -146,18 +146,22 @@ export class Gizemo extends Events {
           this.parent.pivot.y = t.py;
           this.parent._boundsID++;
 
+
           if (this.selected.length == 1 && this.state.mouse ) {//调整宽度
             
-            if (this.selected[0].comp.compKey != "Text") {//文本只有左右 可以进行宽度设置
+            const compkey = this.selected[0].comp.compKey;
+            if (compkey != "Group") {
+                if ( compkey!= "Text") {//文本只有左右 可以进行宽度设置
                 
-                const sx = t.sx * t.w / this.selected[0].width;
-                const sy = t.sy * t.h / this.selected[0].height;
-                this.applyChildWidth({scaleX: sx, scaleY: sy});
-            } 
-            else {
-                if ( EdgeNames.indexOf(this.state.mouse) != -1 ) {
                     const sx = t.sx * t.w / this.selected[0].width;
-                    this.applyChildWidth({scaleX: sx, scaleY: 1});
+                    const sy = t.sy * t.h / this.selected[0].height;
+                    this.applyChildWidth({scaleX: sx, scaleY: sy});
+                } 
+                else {
+                    if ( EdgeNames.indexOf(this.state.mouse) != -1 ) {
+                        const sx = t.sx * t.w / this.selected[0].width;
+                        this.applyChildWidth({scaleX: sx, scaleY: 1});
+                    }
                 }
             }
           }
@@ -257,12 +261,23 @@ export class Gizemo extends Events {
     }
 
     //index
-    // 0 ---- 1
-    // |  4   |
-    // 3 -----2
+    // 0 --5-- 1
+    // |       |
+    // 8   4   6 
+    // |       |
+    // 3 --7---2
+
     setPivot(index:number) {
         let rect = this.rect;
-        let pivots = [{ x: 0, y: 0 }, { x: rect.width, y: 0 }, { x: rect.width, y: rect.height }, { x: 0, y: rect.height }, { x: rect.width / 2, y: rect.height / 2 }];
+        let pivots = [ { x: 0, y: 0 }, { x: rect.width, y: 0 }, 
+                        { x: rect.width, y: rect.height }, 
+                        { x: 0, y: rect.height }, 
+                        { x: rect.width / 2.0, y: rect.height / 2.0 },
+                        { x: rect.width / 2.0, y: 0 },
+                        { x: rect.width , y: rect.height / 2.0 },
+                        { x: rect.width / 2.0 , y: rect.height},
+                        { x: 0, y: rect.height / 2.0},
+                    ];
         let targetPivot = pivots[index];
         let point = { x: targetPivot.x, y: targetPivot.y } as any;
         this.parent.worldTransform.apply(point, point);
@@ -296,9 +311,17 @@ export class Gizemo extends Events {
 
     getPivotXY(index:number) {
         let rect = this.rect;
-        let pivots = [{ x: 0, y: 0 }, { x: rect.width, y: 0 }, { x: rect.width, y: rect.height }, { x: 0, y: rect.height }, { x: rect.width / 2, y: rect.height / 2 }];
-        let targetPivot = pivots[index];
+        let pivots =  [ { x: 0, y: 0 }, { x: rect.width, y: 0 }, 
+            { x: rect.width, y: rect.height }, 
+            { x: 0, y: rect.height }, 
+            { x: rect.width / 2.0, y: rect.height / 2.0 },
+            { x: rect.width / 2.0, y: 0 },
+            { x: rect.width , y: rect.height / 2.0 },
+            { x: rect.width / 2.0 , y: rect.height},
+            { x: 0, y: rect.height / 2.0},
+        ];
 
+        let targetPivot = pivots[index];
         let point = { x: targetPivot.x, y: targetPivot.y } as any;
         this.parent.worldTransform.apply(point, point);
 
@@ -341,8 +364,6 @@ export class Gizemo extends Events {
 
 
     scaleX(x:number, submit= false) {
-        console.log("scalex=>", x);
-
         const t = {...this.state.transform};
         t.sx = x;
         this.state.setTransform(t);

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

@@ -147,7 +147,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     selCanvas: HTMLCanvasElement,
     viewport: HTMLElement
   ) {
-
     this.viewport = viewport;
     this.pageEl = pageEl;
     this.selCanvas = selCanvas;
@@ -591,7 +590,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     //@ts-ignore
     const yoff = this.store.currStreamCard.$el.getBoundingClientRect().top - this.pageEl?.getBoundingClientRect().top;
     this.transferStyle.baseCardTop = yoff / s  + "px";
-    
   
     this.transferStyle.showGizmo = true;
 
@@ -823,16 +821,23 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   initScaleWith = { w: 0, h: 0 };
 
+    // 0 --5-- 1
+    // |       |
+    // 8   4   6 
+    // |       |
+    // 3 --7---2
   scaleMousemove(event: MouseEvent) {
     let dirIndexs = [
       "scaleBottomright",
       "scaleBottomleft",
       "scaleTopleft",
       "scaleTopright",
+      "scaleCenter",
+      "scalebottom",
+      "scaleleft",
+      "scaletop",
+      "scaleright"
     ];
-    let dirOrth = ["scaleright", "scaleleft", "scalebottom", "scaletop"];
-
-   
     const maget = this.assistMagnet as AssistMagnetCtrl;
     maget.test(event);
 
@@ -841,18 +846,15 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     let StartX = pos.x;
     let StartY = pos.y;
 
+    console.log("StartX=>", StartX)
+
     const objContainer = this.objContainer;
     const gizmo = this.gizmo;
 
     //获取当前屏幕坐标和选框中心点坐标，计算旋转值
     if (!this.scalePivot) {
       let dir = this._mouseDownFlag;
-      let scaleIndex = dirIndexs.indexOf(dir);
-      if (scaleIndex == -1) {
-        scaleIndex = dirOrth.indexOf(dir);
-        if (scaleIndex == 2) scaleIndex = 0;
-      }
-
+      const scaleIndex = dirIndexs.indexOf(dir);
       let pivot = objContainer.setPivot(scaleIndex);
 
       this.scaleIndex = scaleIndex;
@@ -894,25 +896,21 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     } else {
       let mainVec = this.mainAxisVector;
       let dtaScale = Project(vec, mainVec) / this.mainAxisVectorLenth;
-      console.log("dtaScale=>", dtaScale);
-
-      let i = dirOrth.indexOf(this._mouseDownFlag);
-      if (i == -1) {
+     
+      let i = dirIndexs.indexOf(this._mouseDownFlag);
+      if (i < 4) {
         this.lastScale.x = dtaScale * this.initScale.x;
         this.lastScale.y = dtaScale * this.initScale.y;
         gizmo.scale(this.lastScale.x, this.lastScale.y);
-        
-      } else if (i == 0 || i == 1) {
-
+      } else if (i == 6 || i == 8) {
         this.lastScale.x = dtaScale * this.initScale.x;
         gizmo.scaleX(this.lastScale.x);
         
-      } else if (i == 2 || i == 3) {
+      } else if (i == 5 || i == 7) {
         this.lastScale.y = dtaScale * this.initScale.y;
         gizmo.scaleY(this.lastScale.y);
       }
     }
-
     this.upgateGizmoStyle();
   }
 

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

@@ -476,12 +476,13 @@ export const editActions = EditorModule.action({
 
   // 删除组件
   removeSelectComps() {
-    this.controls.editorCtrl.clickPickComp("");
     const selected = this.controls.selectCtrl.gizmo.selected.slice(0);
+    this.controls.editorCtrl.clickPickComp("");
     let n = selected.length;
     while (n--) {
       this.actions.removeComp(selected[n].comp.id);
     }
+    history.submit();
   },
 
   // 删除组件
@@ -948,26 +949,31 @@ export const editActions = EditorModule.action({
 
   // 取消打组
   cancelGroupComps(groupComp: DesignComp) {
-    const childs = groupComp.children.default || [];
-    const objC = this.controls.selectCtrl.objContainer;
-    const parentMtrx = objC.parent.worldTransform.clone();
+    const childs = groupComp.children.default;
+    const gizmo = this.controls.selectCtrl.gizmo;
+
+    const parentMtrx = gizmo.parent.worldTransform.clone();
+    gizmo.selectObjs([]);//取消选择
+
     childs.forEach((o) => {
       const obj = this.helper.findComp(o) as DesignComp;
       const mxt = Matrix.createFromMatrixStr(
         obj.layout.transformMatrix as string
       );
       mxt.prepend(parentMtrx);
-      obj.layout.transformMatrix = mxt.getMatrixStr();
+      obj.layout.setTransformMatrix(mxt.getMatrixStr());
     });
+
     const paths = this.helper.getCompTrees(groupComp.id);
     const card = paths[1];
     const parentChilds = (card.children.default || []).filter(
       (item) => item != groupComp.id
     );
     parentChilds.push(...childs);
-    card.children.default = parentChilds;
-
+    card.children.setDefault(parentChilds);
     this.controls.editorCtrl.clickPickComp(childs[0]);
+
+    history.submit();
   },
 
   createGroupComps() {
@@ -977,38 +983,42 @@ export const editActions = EditorModule.action({
 
     const sels = gizmo.selected.map(item=>item.comp.id);
     const id = this.controls.compUICtrl.createCompId("Group");
-    
     const comp = this.helper.findComp(id) as DesignComp;
     const chils = this.controls.pageCtrl.currStreamCard.children.default || [];
     const newChilds: any = [];
-    const groupChilds: any = [];
+    const groupChilds: string[] = [];
     chils.forEach((c) => {
       if (sels.indexOf(c) == -1) newChilds.push(c);
       else {
         groupChilds.push(c);
       }
     });
-
     newChilds.push(id);
-    page.currStreamCard.children.setDefault(newChilds);
-    page.setCompPid(id, page.currStreamCard.id);
 
     //更新节点的新位置
+    const newMatrixMap:any= {};
     gizmo.parent.children.forEach((obj) => {
       const cobj = obj as CompObject;
       const comp = cobj.comp;
-      comp.layout.transformMatrix = cobj.localTransform.getMatrixStr();
+      newMatrixMap[comp.id] = cobj.localTransform.getMatrixStr();
     });
-
+    page.currStreamCard.children.setDefault(newChilds);
+ 
     //再添加新的节点
-    comp.layout.size = [
+    comp.layout.setSize([
       this.helper.pxToDesignSize(gizmo.width),
       this.helper.pxToDesignSize(gizmo.height),
-    ];
+    ]);
+    comp.layout.setTransformMatrix(gizmo.parent.worldTransform.getMatrixStr());
 
-    comp.layout.transformMatrix = gizmo.parent.worldTransform.getMatrixStr();
+    this.controls.selectCtrl.gizmo.selectObjs([]);
 
-    comp.children.default = groupChilds;
+    groupChilds.forEach((c)=> {
+        const comp = this.helper.findComp(c) as DesignComp;
+        comp.layout.setTransformMatrix(newMatrixMap[c]);
+        page.setCompPid(c, id);
+    });
+    comp.children.setDefault(groupChilds);
 
     this.controls.propsCtrl.showProp(comp.id);
 
@@ -1050,13 +1060,15 @@ export const editActions = EditorModule.action({
       content: "要替换正在编辑的内容？",
     });
     if (!res) return;
+    
     const frameData = await this.https.getDesignDetail(record._id, {
       isSys: true,
     });
-    const { compMap, content, desc, thumbnail, title } = frameData.result;
+    const { compMap, content, desc, thumbnail, title , _id} = frameData.result;
 
     const designData = {
-      ...ctrl.designData,
+      _id: ctrl.designData._id,
+      version: ctrl.designData.version,
       compMap,
       content,
       desc,
@@ -1066,5 +1078,7 @@ export const editActions = EditorModule.action({
 
     this.controls.editorCtrl.clickPickComp("root");
     ctrl.setDesignData(designData);
+
+    ctrl.state.setDesignId(_id as string);
   },
 });

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

@@ -30,19 +30,10 @@ export const initActions = EditorModule.action({
   // 初始化数据
   async initDesign(id: string, isSys = false) {
     const ret = await this.https.getDesignDetail(id, { isSys });
-    // this.store.setDesignData(ret.result);
 
     const page = this.controls.pageCtrl;
-    page.setDesignData(ret.result);
-    
-    const root = this.helper.findRootComp() as DesignComp;
-    this.controls.screenCtrl.state.screen.useFor= root.value.useFor || "mobile"
-    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();
-    }
+    page.setDesignData(ret.result);
   },
 
   async initWkDesign(id: string) {

src/modules/editor/module/index.ts

@@ -79,6 +79,7 @@ export class EditorModule extends ModuleRoot {
 
   onReady() {
     this.actions.init();
+    this.controls.uploader.ignoreDashField = true;
     this.controls.screenCtrl.initEvent();
     this.controls.menuCtrl.initEvent();
     this.controls.propsCtrl.initEvents();

yarn.lock

@@ -1796,17 +1796,17 @@
   resolved "http://124.70.149.18:4873/@queenjs-modules%2fqueentree/-/queentree-0.0.10.tgz"
   integrity sha512-P4cIjXKgcvd8h3vVs4f1rGLNf3/Kd5G+qGiZN+idkLjiu22HU6SNmOVLUwV6PuKg+9sTPRn7FKamSHuFxXWX5g==
 
-"@queenjs/components@^0.0.22":
-  version "0.0.22"
-  resolved "http://124.70.149.18:4873/@queenjs%2fcomponents/-/components-0.0.22.tgz#c1fbf2c8e38a3e02f2e9625a3f64b44e84e8461a"
-  integrity sha512-DwbnVsrc5NZXv3gL1H/GFxqQaI455H0G6HAVruR4B2I3IXvYUBbli/eArAyDnK5WOp6cVX11dnWt8BWa5sJZ9Q==
+"@queenjs/components@^0.0.23":
+  version "0.0.23"
+  resolved "http://124.70.149.18:4873/@queenjs%2fcomponents/-/components-0.0.23.tgz#2451ddc94a99d19d37baf2d1a6d371131aa07485"
+  integrity sha512-D8d5WokiUTjnHt1wZEAoRJKp5nRECIkrrAfAn0MkBgNF8fK2l5PLWMqvKRngzk8X5PWLI/eTjv3S4uFuI82JOw==
   dependencies:
     "@queenjs/utils" "^0.0.1"
 
-"@queenjs/controllers@^0.0.6":
-  version "0.0.6"
-  resolved "http://124.70.149.18:4873/@queenjs%2fcontrollers/-/controllers-0.0.6.tgz"
-  integrity sha512-oAVDDiPSDesIVOIIaJpFEto7QPTJ5a2ZyBg+dluGn7BDQdNDKDDcml4gvqA0x8fzuwxJd3pTVb0HIYwI+o/lDQ==
+"@queenjs/controllers@^0.0.8":
+  version "0.0.8"
+  resolved "http://124.70.149.18:4873/@queenjs%2fcontrollers/-/controllers-0.0.8.tgz#5ce115c618148305fc12fc6bd2265cfbfc7b457a"
+  integrity sha512-YZ9wrbw14j+7EA62vvDvF18aavGGey9jlesaGceQfYqvSRhSajp8sAp4glxucl0GDsI9nd+k0DMumgyr40Qoyg==
 
 "@queenjs/icons@^0.0.20":
   version "0.0.20"