feat:多选-大屏对齐

src/views/components/PensProps.vue

@@ -110,6 +110,29 @@
             :borderless="true"
           >
             <t-collapse-panel value="1" header="对齐">
+              <t-space direction="vertical" size="small" class="w-full">
+                <div style="color: var(--color); margin-bottom: 2px">
+                  大屏对齐
+                </div>
+                <div class="icons">
+                  <t-tooltip
+                    v-for="item in vAligns"
+                    :content="item.label"
+                    placement="top"
+                  >
+                    <svg
+                      class="l-icon btn"
+                      aria-hidden="true"
+                      @click="alignV(item.value)"
+                    >
+                      <use :xlink:href="item.icon"></use>
+                    </svg>
+                  </t-tooltip>
+                </div>
+              </t-space>
+              <t-divider
+                style="margin: 16px -16px 12px -16px; width: calc(100% + 32px)"
+              />
               <t-space direction="vertical" size="small" class="w-full">
                 <div style="color: var(--color); margin-bottom: 2px">
                   区域对齐
@@ -860,6 +883,39 @@ const data = reactive<any>({
   lineWidth: 1,
 });
 
+const vAligns = [
+  {
+    value: 'left',
+    label: '左对齐',
+    icon: '#l-align-left',
+  },
+  {
+    value: 'center',
+    label: '垂直居中对齐',
+    icon: '#l-align-center',
+  },
+  {
+    value: 'right',
+    label: '右对齐',
+    icon: '#l-align-right',
+  },
+  {
+    value: 'top',
+    label: '顶部对齐',
+    icon: '#l-align-top',
+  },
+  {
+    value: 'middle',
+    label: '水平居中对齐',
+    icon: '#l-align-middle',
+  },
+  {
+    value: 'bottom',
+    label: '底部对齐',
+    icon: '#l-align-bottom',
+  }
+];
+
 const aligns = [
   {
     value: 'left',
@@ -980,6 +1036,12 @@ const align = (align: string) => {
   }
 };
 
+const alignV = (align: string) => {
+  meta2d.alignNodesV(align, meta2d.store.active);
+  // getRect();
+  meta2d.render();
+};
+
 const align2 = (align: string) => {
   if (align === 'same-size') {
     meta2d.beSameByLast(meta2d.store.active);