添加相同宽度和高度 toolbar

src/assets/icons/components/IconGroup.tsx

@@ -1,3 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconGroup = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)" /><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)" /><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)" /><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)" /><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)" /><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)" /><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)" /><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)" /></g><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(0 1.674)" /><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(27.676 -0.061) rotate(90)" /></g></g></svg>)
+export const IconGroup = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(0 1.674)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(27.676 -0.061) rotate(90)"/></g></g></svg>)

src/assets/icons/components/IconHeight.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconHeight = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-8814 7759)"><g transform="translate(8814 -7759)"><rect fill="none" width="34" height="34"/></g><g transform="translate(8846.416 -7756.912) rotate(90)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M6,7H23.824"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M8,24H23.843" transform="translate(-1.01 -8.583)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M10.28,22.567,8,20.285,10.283,18" transform="translate(-1.01 -4.867)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8,22.567l2.28-2.282L8,18" transform="translate(12.55 -4.867)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M6,41H23.824" transform="translate(0 -17.167)"/></g></g></svg>)

src/assets/icons/components/IconWidth.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconWidth = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-8814 7759)"><g transform="translate(8814 -7759)"><rect fill="none" width="34" height="34"/></g><g transform="translate(8816.088 -7757.417)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M6,7H23.824"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M8,24H23.843" transform="translate(-1.01 -8.583)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M10.28,22.567,8,20.285,10.283,18" transform="translate(-1.01 -4.867)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8,22.567l2.28-2.282L8,18" transform="translate(12.55 -4.867)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M6,41H23.824" transform="translate(0 -17.167)"/></g></g></svg>)

src/assets/icons/index.ts

@@ -24,6 +24,7 @@ export * from "./components/IconEmpty";
 export * from "./components/IconFloatOff";
 export * from "./components/IconFloatOn";
 export * from "./components/IconGroup";
+export * from "./components/IconHeight";
 export * from "./components/IconImage";
 export * from "./components/IconLayerDown";
 export * from "./components/IconLayers";
@@ -57,3 +58,4 @@ export * from "./components/IconTransfer";
 export * from "./components/IconUngroup";
 export * from "./components/IconVideo";
 export * from "./components/IconWechat";
+export * from "./components/IconWidth";

src/assets/icons/svg/group.svg

@@ -1 +1 @@
-<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(0 1.674)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(27.676 -0.061) rotate(90)"/></g></g></svg>
+<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(0 1.674)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(27.676 -0.061) rotate(90)"/></g></g></svg>

src/assets/icons/svg/height.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 34 34"><g transform="translate(-8814 7759)"><g transform="translate(8814 -7759)"><rect fill="none" width="34" height="34"/></g><g transform="translate(8846.416 -7756.912) rotate(90)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M6,7H23.824"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M8,24H23.843" transform="translate(-1.01 -8.583)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M10.28,22.567,8,20.285,10.283,18" transform="translate(-1.01 -4.867)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8,22.567l2.28-2.282L8,18" transform="translate(12.55 -4.867)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M6,41H23.824" transform="translate(0 -17.167)"/></g></g></svg>

src/assets/icons/svg/ungroup.svg

@@ -1 +1 @@
-<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(13.116 13.115) rotate(45)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(17.145 13.115) rotate(135)"/></g></g></svg>
+<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(13.116 13.115) rotate(45)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(17.145 13.115) rotate(135)"/></g></g></svg>

src/assets/icons/svg/width.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 34 34"><g transform="translate(-8814 7759)"><g transform="translate(8814 -7759)"><rect fill="none" width="34" height="34"/></g><g transform="translate(8816.088 -7757.417)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M6,7H23.824"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M8,24H23.843" transform="translate(-1.01 -8.583)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M10.28,22.567,8,20.285,10.283,18" transform="translate(-1.01 -4.867)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8,22.567l2.28-2.282L8,18" transform="translate(12.55 -4.867)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M6,41H23.824" transform="translate(0 -17.167)"/></g></g></svg>

src/modules/editor/components/TipIcons/index.ts

@@ -23,6 +23,8 @@ import {
   IconAlginYCenter,
   IconAlignYBetween,
   IconAlignYBottom,
+  IconWidth,
+  IconHeight,
 } from "@/assets/icons";
 import {
   IconCamera,
@@ -168,4 +170,12 @@ export const TipIcons = {
     icons: [FontSize(IconAlignYBetween, 28)],
     tips: ["纵向均匀排布"],
   }),
+  SameWidth: createTipIcon({
+    icons: [FontSize(IconWidth, 28)],
+    tips: ["相同宽度"],
+  }),
+  SameHeight: createTipIcon({
+    icons: [FontSize(IconHeight, 28)],
+    tips: ["相同高度"],
+  }),
 };

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

@@ -309,6 +309,7 @@ export class ObjsContainer {
     }
 
     updateSize() {
+        this.selected.forEach(s=>s.updateSize());
         this.init();
     }
 }

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

@@ -149,4 +149,18 @@ export class CompObject extends DisplayObject {
         this.worldTransform.apply(p,p);
         return p;
     }
+    updateSize() {
+        const c = this.comp;
+        if (c.layout.size ) {
+            if (c.layout.size[0]) {
+                this._width =  designSizeToPx(c.layout.size[0]);
+            }
+            if (c.layout.size[1]) {
+                this._height =  designSizeToPx(c.layout.size[1]);
+            }
+        }
+        // this.transform.setFromMatrix(Matrix.createFromMatrixStr(c.layout.transformMatrix || "matrix(1,0,0,1,0,0)"));
+        this.updateTransform();
+        this._boundsID++;
+    }
 }

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

@@ -320,6 +320,27 @@ export const editActions = EditorModule.action({
       ctrlcselected = [this.store.currCompId]
     }
   },
+
+  setSameSize(isWidth:boolean) {
+    const anchorBox = this.helper.findComp(this.store.lastSelected);
+    if (!anchorBox) return;
+
+    const selectCtrl = this.controls.selectCtrl;
+    const objc = selectCtrl.objContainer as ObjsContainer;
+   
+    objc.parent.children.forEach((c)=>{
+      const child = c as CompObject;
+      const r = child.getBox();
+      if (isWidth)  child.comp.layout.size[0] = anchorBox.layout.size[0];
+      else child.comp.layout.size[1] = anchorBox.layout.size[1];
+    })
+
+    objc.updateSize();
+
+    selectCtrl.upgateGizmoStyle();
+    
+  },
+
   toogleGroup() {
      if (this.store.selected.length > 1) {
         this.actions.createGroupComps();

src/modules/editor/objects/Toolbars/layout.ts

@@ -73,4 +73,18 @@ export const LayoutToolbars = createToolbars({
             this.actions.copyLastSelected();
         },
     },
+    SameWidth: {
+        component: TipIcons.SameWidth,
+        getVisible(comp) { return this.store.selected.length > 1 && !!this.store.lastSelected },
+        onClick(comp) {
+            this.actions.setSameSize(true);
+        },
+    },
+    SameHeight: {
+        component: TipIcons.SameHeight,
+        getVisible(comp) { return this.store.selected.length > 1 && !!this.store.lastSelected },
+        onClick(comp) {
+            this.actions.setSameSize(false);
+        },
+    },
 });

src/modules/editor/objects/Toolbars/topToolbars.ts

@@ -26,6 +26,9 @@ export const TopToolbarsLeft: ToolbarItem[] = [
     LayoutToolbars.YBottom,
     LayoutToolbars.yBetween,
     
+    LayoutToolbars.SameWidth,
+    LayoutToolbars.SameHeight,
+    
     Toolbars.text,
     toolbar,
 ]