update

src/modules/editor/components/CompUI/defines/alignMulti.tsx

@@ -0,0 +1,88 @@
+import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { SelItemsAlignTools } from "@/modules/editor/objects/Toolbars/liveTools";
+import { css } from "@linaria/core";
+import { defineComponent } from "vue";
+import { string } from "vue-types";
+
+export default defineComponent({
+  props: {
+    value: string(),
+  },
+  setup(props) {
+    const editor = useEditor();
+    return ()=>{
+
+      return (
+        <>
+          {
+             editor.store.selected.length > 1 && <div class={AlignToolsStyle}>
+                <div>
+                    <span class="text-white">已选择({editor.store.selected.length})</span>
+                </div>
+
+                <div class="flex py-12px px-0px items-center">
+                    <span class="pr-8px">元素</span>
+                    <div class="row flex-1 flex">
+                        {SelItemsAlignTools.Left.map((item) => {
+                        return item.getVisible.call(editor, null as any) ? (
+                            <item.component
+                            class="p-4px flex-1"
+                            onClick={() => item.onClick.call(editor, null as any)}
+                            />
+                        ) : null;
+                        })}
+                    </div>
+                    <div class="row ml-10px flex-1 flex">
+                        {SelItemsAlignTools.right.map((item) => {
+                        return item.getVisible.call(editor, null as any) ? (
+                            <item.component
+                            class="p-4px flex-1"
+                            onClick={() => item.onClick.call(editor, null as any)}
+                            />
+                        ) : null;
+                        })}
+                    </div>
+                </div>
+
+                <div class="flex py-12px px-0px items-center">
+                    <span class="pr-8px">整体</span>
+                    <div class="row flex-1 flex">
+                        {SelItemsAlignTools.Left.map((item) => {
+                        return item.getVisible.call(editor, null as any) ? (
+                            <item.component
+                            class="p-4px flex-1"
+                            onClick={() => item.onClick.call(editor, null as any, true)}
+                            />
+                        ) : null;
+                        })}
+                    </div>
+                    <div class="row ml-10px flex-1 flex">
+                        {SelItemsAlignTools.right.map((item) => {
+                        return item.getVisible.call(editor, null as any) ? (
+                            <item.component
+                            class="p-4px flex-1"
+                            onClick={() => item.onClick.call(editor, null as any, true)}
+                            />
+                        ) : null;
+                        })}
+                    </div>
+                </div>
+            </div>
+          }
+        </>
+      );
+    };
+  },
+});
+
+const AlignToolsStyle = css`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  .row {
+    background: #303030;
+    border-radius: 4px 4px 4px 4px;
+  }
+`;

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -9,6 +9,7 @@ import { createColorOpts } from "./formOpts/createColorOpts";
 import { Divider } from "ant-design-vue";
 import Align from "./align";
 import { css } from "@linaria/core";
+import AlignMulti from "./alignMulti";
 
 export const layoutColumns: ColumnItem[] = [
   {
@@ -265,10 +266,17 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
         actions.submitUpdate();
       }
 
+
+
       return () => {
         const { component } = props;
+
+        if (store.selected.length > 1) return (<AlignMulti />);
+
         return (
           <div class={formStyle}>
+           
+
             {valueColumns.length ? (
               <>
                 <div>

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

@@ -756,14 +756,15 @@ export const editActions = EditorModule.action({
     // );
   },
   //横向对齐
-  setAlignX(flag: 0 | 1 | 2 | 3) {
+  setAlignX(flag: 0 | 1 | 2 | 3, isGroup =false) {
     console.log("alignX");
     const selectCtrl = this.controls.selectCtrl;
     const w = this.helper.designSizeToPx(this.controls.screenCtrl.getCurrScreenWidth())
 
-    if (this.store.selected.length == 1) {
+    if (this.store.selected.length == 1 || isGroup) {
       const objc = selectCtrl.objContainer as ObjsContainer;
       const box = objc.getBound();
+      
       switch (flag) {
         case 0:
           selectCtrl.translate(-box.left, 0);
@@ -778,6 +779,7 @@ export const editActions = EditorModule.action({
       return;
     }
 
+    //多选元素对齐模式
     const anchorBox = this.helper.findComp(this.store.lastSelected);
     if (!anchorBox) return;
 
@@ -848,9 +850,9 @@ export const editActions = EditorModule.action({
     selectCtrl.upgateGizmoStyle();
   },
 
-  setAlignY(flag: 0 | 1 | 2 | 3) {
+  setAlignY(flag: 0 | 1 | 2 | 3, isGroup = false) {
     const selectCtrl = this.controls.selectCtrl;
-    if (this.store.selected.length == 1) {
+    if (this.store.selected.length == 1 || isGroup) {
       const objc = selectCtrl.objContainer as ObjsContainer;
       const box = objc.getBound();
 

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

@@ -14,7 +14,7 @@ type ItemParams = Pick<ToolbarItem, "getValue" | "component" | "onClick"> & {
 export class ToolbarItem {
   component: any;
   getValue?: (c: DesignComp) => any;
-  onClick: (this: EditorModule, c: DesignComp) => void;
+  onClick: (this: EditorModule, c: DesignComp, other?:any) => void;
   getVisible!: typeof getVisible;
 
   constructor(data: ItemParams) {

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

@@ -6,23 +6,23 @@ export const LayoutToolbars = createToolbars({
     xLeft: {
         component: TipIcons.AlignXLeft,
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignX(0);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignX(0, isGroup);
         },
     },
     xCenter: {
         component: TipIcons.AlignXCenter,
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignX(1);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignX(1, isGroup);
         },
     },
     xRight: {
         component: TipIcons.AlignXRight,
 
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignX(2);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignX(2, isGroup);
         },
     },
     xBetween: {
@@ -37,8 +37,8 @@ export const LayoutToolbars = createToolbars({
     yBetween: {
         component: TipIcons.AlignYBetween,
         getVisible(comp) { return this.store.selected.length > 2 },
-        onClick(comp) {
-            this.actions.setAlignY(3);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignY(3, isGroup);
         },
     },
 
@@ -46,23 +46,23 @@ export const LayoutToolbars = createToolbars({
         component: TipIcons.AlignYTop,
 
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignY(0);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignY(0, isGroup);
         },
     },
     YCenter: {
         component: TipIcons.AlignYCenter,
 
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignY(1);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignY(1, isGroup);
         },
     },
     YBottom: {
         component: TipIcons.AlignYBottom,
         getVisible(comp) { return this.store.selected.length > 0 },
-        onClick(comp) {
-            this.actions.setAlignY(2);
+        onClick(comp, isGroup= false) {
+            this.actions.setAlignY(2, isGroup);
         },
     },
 

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

@@ -23,3 +23,18 @@ export const CompAlignTools = {
     LayoutToolbars.YBottom,
   ] as ToolbarItem[],
 };
+
+export const SelItemsAlignTools = {
+  Left: [
+    LayoutToolbars.xLeft,
+    LayoutToolbars.xCenter,
+    LayoutToolbars.xRight,
+    LayoutToolbars.xBetween,
+  ] as ToolbarItem[],
+  right: [
+    LayoutToolbars.YTop,
+    LayoutToolbars.YCenter,
+    LayoutToolbars.YBottom,
+    LayoutToolbars.yBetween,
+  ] as ToolbarItem[],
+};