feat:conflict

src/views/components/FitProps.vue

@@ -49,6 +49,26 @@
               <t-switch size="small" @change="fitPenVisible"></t-switch>
             </div>
           </div>
+          <div class="form-item px-12">
+            <label>
+              大屏对齐
+            </label>
+            <div class="icons mt-8">
+              <t-tooltip
+                v-for="item in vAligns"
+                :content="item.label"
+                placement="top"
+              >
+                <svg v-if="data.fit[item.value]"
+                  class="l-icon btn ml-16"
+                  aria-hidden="true"
+                  @click="alignV(item.value,true)"
+                >
+                  <use :xlink:href="item.icon"></use>
+                </svg>
+              </t-tooltip>
+              </div>
+          </div>
           <div class="px-12">
             <div class="mb-8">{{$t('图元列表')}}</div>
             <div class="grid head">
@@ -199,6 +219,36 @@ const active = () => {
 const onFitChange = () => {
   meta2d.canvas.updateFitRect(data.fit);
 };
+
+const vAligns = [
+  {
+    value: 'left',
+    label: '左对齐',
+    icon: '#l-align-left',
+  },
+  {
+    value: 'right',
+    label: '右对齐',
+    icon: '#l-align-right',
+  },
+  {
+    value: 'top',
+    label: '顶部对齐',
+    icon: '#l-align-top',
+  },
+  {
+    value: 'bottom',
+    label: '底部对齐',
+    icon: '#l-align-bottom',
+  }
+];
+
+const alignV = (align: string,whole?:boolean) => {
+  const pens = selections.fit.children.map((id) => meta2d.store.pens[id]);
+  meta2d.alignNodesV(align,pens,whole);
+  meta2d.render();
+};
+
 </script>
 <style lang="postcss" scoped>
 .props {

src/views/components/PensProps.vue

@@ -81,7 +81,32 @@
             <t-collapse-panel value="1" :header="$t('对齐')">
               <t-space direction="vertical" size="small" class="w-full">
                 <div style="color: var(--color); margin-bottom: 2px">
-                  {{$t('大屏对齐')}}
+                  {{$t('大屏对齐（整体）')}}
+                </div>
+                <div class="icons">
+                  <t-tooltip
+                    v-for="item in vAligns"
+                    :content="item.label"
+                    placement="top"
+                  >
+                    <svg
+                      class="l-icon btn"
+                      aria-hidden="true"
+                      @mouseenter="previewAlign(1,item.value,true)"
+                      @mouseleave="recoverAlign()"
+                      @click="alignV(item.value,true)"
+                    >
+                      <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">
+                  大屏对齐（独立）
                 </div>
                 <div class="icons">
                   <t-tooltip
@@ -802,10 +827,10 @@ const aligns2 = [
   },
 ];
 
-function previewAlign(type,alignValue) {
+function previewAlign(type,alignValue,whole?:boolean) {
   switch (type) {
     case 1:
-      meta2d.alignNodesV(alignValue, meta2d.store.active)
+      meta2d.alignNodesV(alignValue, meta2d.store.active,whole);
       break;
     case 2:
       align(alignValue)
@@ -870,8 +895,8 @@ const align = (align: string) => {
   }
 };
 
-const alignV = (align: string) => {
-  meta2d.alignNodesV(align, meta2d.store.active);
+const alignV = (align: string,whole?:boolean) => {
+  meta2d.alignNodesV(align, meta2d.store.active,whole);
   // getRect();
   meta2d.render();
 };