添加对齐属性

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

@@ -1,23 +1,48 @@
+import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { CompAlignTools } from "@/modules/editor/objects/Toolbars/liveTools";
 import { css } from "@linaria/core";
 import { defineComponent, reactive, watchEffect } from "vue";
+import { string } from "vue-types";
 
 export default defineComponent({
   props: {
-
+    value: string(),
   },
-  emits: ["change"],
-  setup(props, { emit }) {
-    const state = reactive({
-    });
+  setup(props) {
 
+    const editor = useEditor();
+    const comp = editor.helper.findComp(props.value as string) as DesignComp;
+    console.log("align id=>", props.value, comp);
     return () => {
-      
       return (
         <div class={AlignToolsStyle}>
+            <div class="row">
+            {
+                CompAlignTools.Left.map((item) => {
+                    return item.getVisible.call(editor, comp) ? (
+                      <item.component
+                        class="p-4px"
+                        value={item.getValue?.(comp)}
+                        onClick={() => item.onClick.call(editor, comp)}
+                      />
+                    ) : null;
+                  })
+            }
+            </div>
+            <div class="row ml-12px">
             {
-                CompAlignTools
+                CompAlignTools.right.map((item) => {
+                    return item.getVisible.call(editor, comp) ? (
+                      <item.component
+                        class="p-4px"
+                        value={item.getValue?.(comp)}
+                        onClick={() => item.onClick.call(editor, comp)}
+                      />
+                    ) : null;
+                  })
             }
+            </div>
         </div>
       );
     };
@@ -28,4 +53,8 @@ const AlignToolsStyle = css`
   flex: 1;
   display: flex;
   align-items: center;
+  .row {
+    background: #303030;
+    border-radius: 4px 4px 4px 4px;
+  }
 `;

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

@@ -7,7 +7,7 @@ import { Size } from "../formItems/Size";
 import Slider from "../formItems/Slider";
 import { createColorOpts } from "./formOpts/createColorOpts";
 import { Divider } from "ant-design-vue";
-import { GroupNumber } from "../formItems/GroupNumber";
+import Align from "./align";
 
 export const layoutColumns: ColumnItem[] = [
   {
@@ -18,6 +18,11 @@ export const layoutColumns: ColumnItem[] = [
       labels: ["宽度", "高度"],
     },
   },
+  {
+    label: "对齐",
+    component: Align,
+    dataIndex: "id",
+  },
   // {
   //   label: "对齐",
   //   dataIndex: "layout.alignSelf",
@@ -99,6 +104,7 @@ export const layoutColumns: ColumnItem[] = [
     dataIndex: "layout.locked",
     component: "Switch",
   },
+  
 ];
 
 export const bdColumns: ColumnItem[] = [

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

@@ -143,7 +143,7 @@ export const TipIcons = {
     tips: ["裁剪"],
   }),
   AlignXLeft: createTipIcon({
-    icons: [FontSize(IconAlignXLeft,28)],
+    icons: [FontSize(IconAlignXLeft,26)],
     tips: ["左对齐"],
   }),
   AlignXCenter: createTipIcon({
@@ -151,27 +151,27 @@ export const TipIcons = {
     tips: ["横向居中对齐"],
   }),
   AlignXRight: createTipIcon({
-    icons: [FontSize(IconAlignXRight, 28)],
+    icons: [FontSize(IconAlignXRight, 26)],
     tips: ["右对齐"],
   }),
   AlignXBetween: createTipIcon({
-    icons: [FontSize(IconAlignXBetween, 28)],
+    icons: [FontSize(IconAlignXBetween, 26)],
     tips: ["横向均匀排布"],
   }),
   AlignYTop: createTipIcon({
-    icons: [FontSize(IconAlignYTop, 28)],
+    icons: [FontSize(IconAlignYTop, 26)],
     tips: ["顶对齐"],
   }),
   AlignYCenter: createTipIcon({
-    icons: [FontSize(IconAlginYCenter, 28)],
+    icons: [FontSize(IconAlginYCenter, 26)],
     tips: ["纵向居中对齐"],
   }),
   AlignYBottom: createTipIcon({
-    icons: [FontSize(IconAlignYBottom, 28)],
+    icons: [FontSize(IconAlignYBottom, 26)],
     tips: ["底对齐"],
   }),
   AlignYBetween: createTipIcon({
-    icons: [FontSize(IconAlignYBetween, 28)],
+    icons: [FontSize(IconAlignYBetween, 26)],
     tips: ["纵向均匀排布"],
   }),
   SameWidth: createTipIcon({

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

@@ -10,12 +10,15 @@ export const LiveToolbars: ToolbarItem[] = [
     toolbars.delete
 ]
 
-export const CompAlignTools:ToolbarItem[] = [
-    LayoutToolbars.xLeft,
-    LayoutToolbars.xCenter,
-    LayoutToolbars.xRight,
-
-    LayoutToolbars.YTop,
-    LayoutToolbars.YCenter,
-    LayoutToolbars.YBottom
-]
+export const CompAlignTools= {
+    Left: [
+        LayoutToolbars.xLeft,
+        LayoutToolbars.xCenter,
+        LayoutToolbars.xRight
+    ] as ToolbarItem[],
+    right: [
+        LayoutToolbars.YTop,
+        LayoutToolbars.YCenter,
+        LayoutToolbars.YBottom
+    ] as ToolbarItem[]
+}