udpate

src/assets/icons/components/IconAlginYCenter.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconAlginYCenter = createIcon(<svg viewBox="0 0 22 22"><g transform="translate(-8846 7759)"><g transform="translate(7022 -8041)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g><g transform="translate(8844.078 -7761.549)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="5" height="13" transform="translate(10.422 7.05)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M19.845,24H6" transform="translate(0 -10.451)"/></g></g></svg>)

src/assets/icons/components/IconAlignXBetween.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconAlignXBetween = createIcon(<svg viewBox="0 0 22 22"><g transform="translate(-8910 7759)"><g transform="translate(7290 -8086)"><g transform="translate(-204 45)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g></g><g transform="translate(8907.201 -7760.195)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="8.354" height="4.5" transform="translate(16.049 8.096) rotate(90)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M40,6V18.39" transform="translate(-20.201)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M8,6V18.39" transform="translate(-0.201)"/></g></g></svg>)

src/assets/icons/components/IconAlignXCenter.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconAlignXCenter = createIcon(<svg viewBox="0 0 22 22"><g transform="translate(-8846 7759)"><g transform="translate(7022 -8041)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g><g transform="translate(8870.55 -7760.922) rotate(90)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="5" height="12.112" transform="translate(10.423 7.455)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M19.845,24H6" transform="translate(0 -10.488)"/></g></g></svg>)

src/assets/icons/components/IconAlignXLeft.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconAlignXLeft = createIcon(<svg viewBox="0 0 22 22"><g transform="translate(-8814 7759)"><g transform="translate(6990 -8041)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g><g opacity="0.998" transform="translate(8818.698 -7741.901) rotate(-90)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="4.201" height="9.453" transform="translate(4.201 3.151)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M18.2,42H6" transform="translate(-6 -42)"/></g></g></svg>)

src/assets/icons/components/IconAlignXRight.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconAlignXRight = createIcon(<svg viewBox="0 0 22 22"><g transform="translate(-8878 7759)"><g transform="translate(7054 -8041)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g><g transform="translate(8882.698 -7741.901) rotate(-90)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="4.201" height="9.453" transform="translate(4.201 0)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M18.2,42H6" transform="translate(-6 -29.396)"/></g></g></svg>)

src/assets/icons/components/IconAlignYBetween.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconAlignYBetween = createIcon(<svg viewBox="0 0 22 22"><g transform="translate(-8910 7759)"><g transform="translate(7290 -8086)"><g transform="translate(-204 45)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g></g><g transform="translate(8933.195 -7761.799) rotate(90)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="8.354" height="4.5" transform="translate(16.049 8.096) rotate(90)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M40,6V18.39" transform="translate(-20.201)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M8,6V18.39" transform="translate(-0.201)"/></g></g></svg>)

src/assets/icons/components/IconAlignYBottom.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconAlignYBottom = createIcon(<svg viewBox="0 0 22 22"><g transform="translate(-8878 7759)"><g transform="translate(7054 -8041)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g><g transform="translate(8882.902 -7754.302)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="4.201" height="9.453" transform="translate(4.201 0)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M18.2,42H6" transform="translate(-6 -29.396)"/></g></g></svg>)

src/assets/icons/components/IconAlignYTop.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconAlignYTop = 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 opacity="0.941" transform="translate(8822.855 -7750.417)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-width="1.2px" width="5.611" height="12.625" transform="translate(5.339 4.208)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M22.289,42H6" transform="translate(-6 -42)"/></g></g></svg>)

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="#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>)
+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/IconUngroup.tsx

@@ -1,3 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconUngroup = 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="#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>)
+export const IconUngroup = 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="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/index.ts

@@ -3,9 +3,17 @@ export * from "./components/Icon3D";
 export * from "./components/IconAdd";
 export * from "./components/IconAi";
 export * from "./components/IconAirPlain";
+export * from "./components/IconAlginYCenter";
 export * from "./components/IconAlignC";
 export * from "./components/IconAlignL";
 export * from "./components/IconAlignR";
+export * from "./components/IconAlignXBetween";
+export * from "./components/IconAlignXCenter";
+export * from "./components/IconAlignXLeft";
+export * from "./components/IconAlignXRight";
+export * from "./components/IconAlignYBetween";
+export * from "./components/IconAlignYBottom";
+export * from "./components/IconAlignYTop";
 export * from "./components/IconApplication";
 export * from "./components/IconClear";
 export * from "./components/IconCombination";

src/assets/icons/svg/alginYCenter.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 22"><g transform="translate(-8846 7759)"><g transform="translate(7022 -8041)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g><g transform="translate(8844.078 -7761.549)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="5" height="13" transform="translate(10.422 7.05)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M19.845,24H6" transform="translate(0 -10.451)"/></g></g></svg>

src/assets/icons/svg/alignXBetween.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 22"><g transform="translate(-8910 7759)"><g transform="translate(7290 -8086)"><g transform="translate(-204 45)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g></g><g transform="translate(8907.201 -7760.195)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="8.354" height="4.5" transform="translate(16.049 8.096) rotate(90)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M40,6V18.39" transform="translate(-20.201)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M8,6V18.39" transform="translate(-0.201)"/></g></g></svg>

src/assets/icons/svg/alignXCenter.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 22"><g transform="translate(-8846 7759)"><g transform="translate(7022 -8041)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g><g transform="translate(8870.55 -7760.922) rotate(90)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="5" height="12.112" transform="translate(10.423 7.455)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M19.845,24H6" transform="translate(0 -10.488)"/></g></g></svg>

src/assets/icons/svg/alignXLeft.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 22"><g transform="translate(-8814 7759)"><g transform="translate(6990 -8041)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g><g opacity="0.998" transform="translate(8818.698 -7741.901) rotate(-90)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="4.201" height="9.453" transform="translate(4.201 3.151)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M18.2,42H6" transform="translate(-6 -42)"/></g></g></svg>

src/assets/icons/svg/alignXRight.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 22"><g transform="translate(-8878 7759)"><g transform="translate(7054 -8041)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g><g transform="translate(8882.698 -7741.901) rotate(-90)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="4.201" height="9.453" transform="translate(4.201 0)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M18.2,42H6" transform="translate(-6 -29.396)"/></g></g></svg>

src/assets/icons/svg/alignYBetween.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 22"><g transform="translate(-8910 7759)"><g transform="translate(7290 -8086)"><g transform="translate(-204 45)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g></g><g transform="translate(8933.195 -7761.799) rotate(90)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="8.354" height="4.5" transform="translate(16.049 8.096) rotate(90)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M40,6V18.39" transform="translate(-20.201)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M8,6V18.39" transform="translate(-0.201)"/></g></g></svg>

src/assets/icons/svg/alignYBottom.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 22"><g transform="translate(-8878 7759)"><g transform="translate(7054 -8041)"><rect fill="none" width="22" height="22" transform="translate(1824 282)"/></g><g transform="translate(8882.902 -7754.302)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" width="4.201" height="9.453" transform="translate(4.201 0)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-linecap="round" d="M18.2,42H6" transform="translate(-6 -29.396)"/></g></g></svg>

src/assets/icons/svg/alignYTop.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 opacity="0.941" transform="translate(8822.855 -7750.417)"><rect fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-width="1.2px" width="5.611" height="12.625" transform="translate(5.339 4.208)"/><path fill="none" stroke="#c1c1c1" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M22.289,42H6" transform="translate(-6 -42)"/></g></g></svg>

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

@@ -59,7 +59,7 @@ export const SelectTransfer = defineComponent({
             top: transferStyle.baseCardTop
           }}
         >
-          <div
+          {/* <div
             id= "toolbar"
             class={toolbarStyle}
             style={{
@@ -79,7 +79,7 @@ export const SelectTransfer = defineComponent({
                 ) : null;
               })
             }
-          </div>
+          </div> */}
 
           <div
             class={["absolute", selctRectStyle]}

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -37,6 +37,7 @@ export const View = defineComponent({
             store.isEditMode && controls.selectCtrl._state != 0 && editCompStyle,
             isGroupComp && groupCompCls,
             store.currStreamCardId == props.compId && CurrCompStyle,
+            store.isEditMode && store.selected.length > 1 && store.lastSelected == props.compId && AnchorCompStyle
           ]}
           style={helper.createStyle(comp.layout)}
           onClick={(e) => {
@@ -150,6 +151,10 @@ const editCompStyle = css`
   }
 `;
 
+const AnchorCompStyle = css`
+  outline: 2px dashed @inf-primary-color;
+`;
+
 const CurrCompStyle = css`
   position: relative;
   outline: 1px solid @inf-primary-color;

src/modules/editor/components/TipIcons/TipIcon.tsx

@@ -19,6 +19,10 @@ export const TipIcon = (props: {
   );
 };
 
+export function FontSize(Icon:any, size = 16) {
+  return <Icon style={{fontSize: size + "px"}} />
+}
+
 const iconStyle = css`
   font-size: 16px;
   border-radius: 4px;

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

@@ -15,6 +15,14 @@ import {
   IconSave,
   IconUngroup,
   IconGroup,
+  IconAlignXLeft,
+  IconAlignXCenter,
+  IconAlignXRight,
+  IconAlignXBetween,
+  IconAlignYTop,
+  IconAlginYCenter,
+  IconAlignYBetween,
+  IconAlignYBottom,
 } from "@/assets/icons";
 import {
   IconCamera,
@@ -29,6 +37,10 @@ import {
   IconUnlock,
 } from "@queenjs/icons";
 import { createTipIcon } from "./create";
+import { FontSize } from "./TipIcon";
+
+
+
 
 export const TipIcons = {
   QueenService: createTipIcon({
@@ -101,11 +113,11 @@ export const TipIcons = {
     tips: ["保存为组件"],
   }),
   CancelGroup: createTipIcon({
-    icons: [IconUngroup],
+    icons: [FontSize(IconUngroup, 26)],
     tips: ["取消打组"],
   }),
   CreateGroup: createTipIcon({
-    icons: [IconGroup],
+    icons: [FontSize(IconGroup, 26)],
     tips: ["打组"],
   }),
   Cross: createTipIcon({
@@ -120,4 +132,36 @@ export const TipIcons = {
     icons: [IconCroperr],
     tips: ["裁剪"],
   }),
+  AlignXLeft: createTipIcon({
+    icons: [FontSize(IconAlignXLeft,28)],
+    tips: ["左对齐"],
+  }),
+  AlignXCenter: createTipIcon({
+    icons: [FontSize(IconAlignXCenter, 26)],
+    tips: ["横向居中对齐"],
+  }),
+  AlignXRight: createTipIcon({
+    icons: [FontSize(IconAlignXRight, 28)],
+    tips: ["右对齐"],
+  }),
+  AlignXBetween: createTipIcon({
+    icons: [FontSize(IconAlignXBetween, 28)],
+    tips: ["横向均匀排布"],
+  }),
+  AlignYTop: createTipIcon({
+    icons: [FontSize(IconAlignYTop, 28)],
+    tips: ["顶对齐"],
+  }),
+  AlignYCenter: createTipIcon({
+    icons: [FontSize(IconAlginYCenter, 28)],
+    tips: ["纵向居中对齐"],
+  }),
+  AlignYBottom: createTipIcon({
+    icons: [FontSize(IconAlignYBottom, 28)],
+    tips: ["底对齐"],
+  }),
+  AlignYBetween: createTipIcon({
+    icons: [FontSize(IconAlignYBetween, 28)],
+    tips: ["纵向均匀排布"],
+  }),
 };

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

@@ -29,6 +29,11 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
       action() {
         this.actions.ctrlc();
       },
+    },{
+      hotKey: "ctrl+g",
+      action() {
+        this.actions.toogleGroup();
+      },
     },
     {
       hotKey: "ctrl+v",

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

@@ -68,6 +68,9 @@ export class ObjsContainer {
     }
 
     init() {
+
+        this.parent.removeChildren(0, this.parent.children.length);
+        
         //获取选择对象的aabb（画布空间）
         this.aabb.clear();
         let n = this.selected.length;
@@ -99,7 +102,8 @@ export class ObjsContainer {
 
         this.rect = rect;
 
-
+        console.log("xxxx=>", rect);
+        
         //设置位置
         let p = this.parent.position;
         p.x = center.x;
@@ -303,4 +307,8 @@ export class ObjsContainer {
             if (child.comp)  child.comp.layout.transformMatrix = child.worldTransform.getMatrixStr();
         }
     }
+
+    updateSize() {
+        this.init();
+    }
 }

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

@@ -63,6 +63,13 @@ export class CompObject extends DisplayObject {
         return this._height
     }
 
+    translate(x:number, y:number) {
+        this.x = this.x + x;
+        this.y = this.y + y;
+        this.updateTransform();
+        this.comp.layout.transformMatrix = this.worldTransform.getMatrixStr();
+    }
+    
     getRect(){
         let p1 = {x:0,y:0} as any;
         this.worldTransform.apply(p1, p1);

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

@@ -476,8 +476,14 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     if (isClick) {
       this._state = MODE_NONE;
-      this._selectObjs(this._downClickedCompId?[this._downClickedCompId]:[], e)
-      // this.actions.pickComp(this._downClickedCompId);
+      if ((!e.shiftKey && !e.ctrlKey) ) {
+          this.actions.pickComp(this._downClickedCompId);
+      } else {
+        const paths = this.helper.getCompTrees(this._downClickedCompId)
+        if (paths[2]) {
+          this._selectObjs([paths[2].id], e)
+        }
+      }
     }
 
     if (this._state == MODE_SEL_RECT && !isClick) {
@@ -579,6 +585,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   _selectObjs( outs:string[], e:MouseEvent) {
 
     let objs = this.store.selected.slice(0);
+    let lastId = outs[outs.length-1];
+   
     if (e.ctrlKey) {
       objs.forEach(o=>{
         if (outs.indexOf(o) == -1) {
@@ -586,14 +594,17 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         }
       })
     }
+    
     let selected = outs;
     if (e.shiftKey) {//反选
       selected = [];
       objs.forEach(o=>{
          if (outs.indexOf(o) == -1) selected.push(o); 
       })
+      lastId = selected[selected.length-1] || "";
     }
-    this.actions.selectObjs(selected);
+
+    this.actions.selectObjs(selected, lastId);
     if (selected.length < 1) {
       this.actions.pickComp(this.store.currStreamCardId);
     }

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

@@ -237,9 +237,10 @@ export const editActions = EditorModule.action({
     }, 100);
   },
 
-  async selectObjs(ids: string[]) {
+  async selectObjs(ids: string[], last = "") {
     this.store.selected = ids;
     this.store.selectId = ids.length > 1 ? Date.now() + "" : "";
+    this.store.lastSelected = last ? last : ( ids.length > 0 ? ids[ids.length-1] : "") 
   },
 
   // 添加组件到画布
@@ -315,6 +316,19 @@ export const editActions = EditorModule.action({
      ctrlcselected = this.store.selected.slice(0);
   },
 
+  toogleGroup() {
+     if (this.store.selected.length > 1) {
+        this.actions.createGroupComps();
+        return;
+     }
+    if (this.store.selected.length == 1) {
+      const c = this.helper.findComp(this.store.selected[0]) as DesignComp;
+      if (c.compKey == "Group") {
+        this.actions.cancelGroupComps(c);
+      }
+    }
+  },
+
   ctrlv() {
     console.log("ctrlv ", this.store.selected);
     if (ctrlcselected.length < 1) return;
@@ -592,6 +606,185 @@ export const editActions = EditorModule.action({
       99
     );
   },
+  //横向对齐
+  setAlignX(flag: 0 | 1 | 2 | 3) {
+    console.log("alignX")
+    const selectCtrl = this.controls.selectCtrl;
+
+    if (this.store.selected.length == 1) {
+        const objc = selectCtrl.objContainer as ObjsContainer;  
+        const box = objc.getBound();
+        switch(flag) {
+            case 0:
+              selectCtrl.translate(-box.left ,  0);
+              break;
+            case 1:
+              selectCtrl.translate(-(box.center.x - 187.5) ,  0);
+              break;
+            case 2:
+              selectCtrl.translate(375 - box.right,  0);
+              break;
+        }
+        return;
+    }
+
+    
+
+    const anchorBox = this.helper.findComp(this.store.lastSelected);
+    if (!anchorBox) return;
+
+    const anchor = new CompObject(anchorBox);
+    const anchorRect = anchor.getBox();
+
+    const objc = selectCtrl.objContainer as ObjsContainer;
+    let min = 10000, max = -10000;
+    let step = 0;
+    if (flag == 3)  {//Y轴均匀排布
+      objc.parent.children.forEach((c)=>{
+        const child = c as CompObject;
+        const r = child.getBox();
+        const x = r.x + r.w / 2.0;
+        if (x <min)  min = x;
+        if (x >max ) max = x;
+      })
+      const stepCount = objc.parent.children.length;
+
+      step = (max - min) / (stepCount - 1);
+
+      const stepIndexMap:any = {};
+
+      objc.parent.children.forEach((c)=>{
+        const child = c as CompObject;
+        const r = child.getBox();
+        const x = r.x + r.w / 2.0;
+
+        let minIndex = -1;
+        let minV = 10000;
+        for (let i=0; i<stepCount; i++) {
+           const ty = i*step + min;
+           if ( Math.abs(x - ty) < minV && !stepIndexMap[i]) {
+              minV = Math.abs(x - ty);
+              minIndex = i;
+           }
+        }
+        stepIndexMap[minIndex] = true;
+        child.translate((minIndex*step + min) - x, 0);
+      })
+      objc.updateSize();
+      selectCtrl.upgateGizmoStyle();
+      return;
+    }
+
+   objc.parent.children.forEach((c)=>{
+        const child = c as CompObject;
+        if (child.comp.id  == this.store.lastSelected) return;
+        const r = child.getBox();
+        switch(flag) {
+          case 0:
+            child.translate(anchorRect.x -r.x,  0);
+            break;
+          case 1:
+            child.translate(anchorRect.x + anchorRect.w / 2.0 - (r.x + r.w/2.0),  0);
+            break;
+          case 2:
+            child.translate(anchorRect.x + anchorRect.w - (r.x + r.w),  0);
+            break;
+        }
+    })
+    objc.updateSize();
+    selectCtrl.upgateGizmoStyle();
+  },
+
+  setAlignY(flag: 0 | 1 | 2 | 3) {
+    const selectCtrl = this.controls.selectCtrl;
+    if (this.store.selected.length == 1) {
+        const objc = selectCtrl.objContainer as ObjsContainer;
+        const box = objc.getBound();
+
+        const card = new CompObject(this.store.currStreamCard);
+        const cardBox = card.getBox();
+
+        switch(flag) {
+            case 0:
+              selectCtrl.translate(0,  -box.top);
+              break;
+            case 1:
+              selectCtrl.translate(0 ,  -(box.center.y - cardBox.h / 2.0));
+              break;
+            case 2:
+              selectCtrl.translate(0,  cardBox.h - box.bottom);
+              break;
+        }
+        return;
+    }
+
+    const anchorBox = this.helper.findComp(this.store.lastSelected);
+    if (!anchorBox) return;
+
+    const anchor = new CompObject(anchorBox);
+    const anchorRect = anchor.getBox();
+
+    const objc = selectCtrl.objContainer as ObjsContainer;
+
+    let min = 10000;
+    let max = -10000;
+    let step = 0;
+
+    if (flag == 3)  {//Y轴均匀排布
+      objc.parent.children.forEach((c)=>{
+        const child = c as CompObject;
+        const r = child.getBox();
+        const y = r.y + r.h / 2.0;
+        if (y <min)  min = y;
+        if (y >max ) max = y;
+      })
+      const stepCount = objc.parent.children.length;
+
+      step = (max - min) / (stepCount - 1);
+
+      const stepIndexMap:any = {};
+
+      objc.parent.children.forEach((c)=>{
+        const child = c as CompObject;
+        const r = child.getBox();
+        const y = r.y + r.h / 2.0;
+
+        let minIndex = -1;
+        let minV = 10000;
+        for (let i=0; i<stepCount; i++) {
+           const ty = i*step + min;
+           if ( Math.abs(y - ty) < minV && !stepIndexMap[i]) {
+              minV = Math.abs(y - ty);
+              minIndex = i;
+           }
+        }
+        stepIndexMap[minIndex] = true;
+        child.translate(0,  (minIndex*step + min) - y);
+      })
+      objc.updateSize();
+      selectCtrl.upgateGizmoStyle();
+      return;
+    }
+  
+   objc.parent.children.forEach((c)=>{
+        const child = c as CompObject;
+        if (child.comp.id  == this.store.lastSelected) return;
+        const r = child.getBox();
+        switch(flag) {
+          case 0:
+            child.translate(0,  anchorRect.y -r.y);
+            break;
+          case 1:
+            child.translate(0, anchorRect.y + anchorRect.h / 2.0 - (r.y + r.h /2.0));
+            break;
+          case 2:
+            child.translate(0, anchorRect.y + anchorRect.h - (r.y + r.h));
+            break;
+        }
+    })
+    objc.updateSize();
+    selectCtrl.upgateGizmoStyle();
+  },
   // 宽度铺满
   fullCompWidth(comp: DesignComp) {
     comp.layout.size || (comp.layout.size = []);

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

@@ -23,7 +23,8 @@ export const store = EditorModule.store({
     selectId: "", //选中的id唯一标识一次选中
     croppImage: "", //裁剪图片
     compEditMode: false, //组件编辑模式
-    compEditReslut: 0 // -1 取消， 1 确定 
+    compEditReslut: 0, // -1 取消， 1 确定 
+    lastSelected: ""   //最后上传
   }),
   getters: {
     isEditMode(): boolean {

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

@@ -0,0 +1,68 @@
+import { TipIcons } from "../../components/TipIcons";
+import { createToolbars } from "./default";
+
+
+export const LayoutToolbars = createToolbars({
+    xLeft: {
+        component: TipIcons.AlignXLeft,
+        getVisible(comp) { return this.store.selected.length > 0 },
+        onClick(comp) {
+            this.actions.setAlignX(0);
+        },
+    },
+    xCenter: {
+        component: TipIcons.AlignXCenter,
+        getVisible(comp) { return this.store.selected.length > 0 },
+        onClick(comp) {
+            this.actions.setAlignX(1);
+        },
+    },
+    xRight: {
+        component: TipIcons.AlignXRight,
+
+        getVisible(comp) { return this.store.selected.length > 0 },
+        onClick(comp) {
+            this.actions.setAlignX(2);
+        },
+    },
+    xBetween: {
+        component: TipIcons.AlignXBetween,
+
+        getVisible(comp) { return this.store.selected.length > 2 },
+        onClick(comp) {
+            this.actions.setAlignX(3);
+        },
+    },
+
+    yBetween: {
+        component: TipIcons.AlignYBetween,
+        getVisible(comp) { return this.store.selected.length > 2 },
+        onClick(comp) {
+            this.actions.setAlignY(3);
+        },
+    },
+
+    YTop: {
+        component: TipIcons.AlignYTop,
+
+        getVisible(comp) { return this.store.selected.length > 0 },
+        onClick(comp) {
+            this.actions.setAlignY(0);
+        },
+    },
+    YCenter: {
+        component: TipIcons.AlignYCenter,
+
+        getVisible(comp) { return this.store.selected.length > 0 },
+        onClick(comp) {
+            this.actions.setAlignY(1);
+        },
+    },
+    YBottom: {
+        component: TipIcons.AlignYBottom,
+        getVisible(comp) { return this.store.selected.length > 0 },
+        onClick(comp) {
+            this.actions.setAlignY(2);
+        },
+    },
+});

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

@@ -1,16 +1,31 @@
 import {toolbars, ToolbarItem } from "./default";
 import { Toolbars } from "./comps";
 import { toolbar } from "../../components/CompUI/basicUI/Polygon/toolbar";
+import { LayoutToolbars } from "./layout";
 
 export const TopToolbarsLeft: ToolbarItem[] = [
 
-    Toolbars.text,
+    
+    toolbars.delete,
     toolbars.layerUp,
     toolbars.layerDown,
     toolbars.align,
-    toolbars.delete,
+   
     toolbars.imageCropper,
+    toolbars.createGroup,
+    toolbars.cancelGroup,
 
+    LayoutToolbars.xLeft,
+    LayoutToolbars.xCenter,
+    LayoutToolbars.xRight,
+    LayoutToolbars.xBetween,
+
+    LayoutToolbars.YTop,
+    LayoutToolbars.YCenter,
+    LayoutToolbars.YBottom,
+    LayoutToolbars.yBetween,
+    
+    Toolbars.text,
     toolbar,
 ]