From 6b3782a926904b2aad1a165d22f442a6d4925f3d Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 12 Jan 2024 18:44:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A4=9A=E9=80=89=E5=87=A0=E4=B8=AA=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=90=8E=EF=BC=8C=E4=B8=8A=E4=B8=8B=E5=B7=A6=E5=8F=B3?=
 =?UTF-8?q?=E5=BF=AB=E9=80=9F=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/ContextMenuDetails.vue             | 39 ++++++++++++++++--
 .../modules/data-visualization/compose.ts     | 40 +++++++++++++++++++
 2 files changed, 75 insertions(+), 4 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
index e32beddc99..d77debce8d 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
@@ -135,6 +135,11 @@ const decompose = () => {
   menuOpt('decompose')
 }
 
+const alignment = params => {
+  composeStore.alignment(params)
+  snapshotStore.recordSnapshotCache('decompose')
+}
+
 // 阻止事件向父级组件传播调用父级的handleMouseDown 导致areaData 被隐藏
 const handleComposeMouseDown = e => {
   e.preventDefault()
@@ -147,10 +152,33 @@ const composeDivider = computed(() => {
 </script>
 
 <template>
-  <div class="context-menu-details" @mousedown="handleComposeMouseDown">
+  <div class="context-menu-base context-menu-details" @mousedown="handleComposeMouseDown">
     <ul @mouseup="handleMouseUp">
       <template v-if="areaData.components.length">
         <li @mousedown="handleComposeMouseDown" @click="componentCompose">组合</li>
+        <el-dropdown
+          style="width: 100%"
+          trigger="hover"
+          effect="dark"
+          placement="right-start"
+          popper-class="context-menu-details"
+        >
+          <li>对齐</li>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item style="width: 118px" @click="alignment('left')"
+                >左对齐</el-dropdown-item
+              >
+              <el-dropdown-item style="width: 118px" @click="alignment('right')"
+                >右对齐</el-dropdown-item
+              >
+              <el-dropdown-item @click="alignment('top')">上对齐</el-dropdown-item>
+              <el-dropdown-item @click="alignment('bottom')">下对齐</el-dropdown-item>
+              <el-dropdown-item @click="alignment('transverse')">水平居中</el-dropdown-item>
+              <el-dropdown-item @click="alignment('direction')">垂直居中</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
         <el-divider class="custom-divider" />
         <li @click="copy">复制</li>
         <li @click="paste">粘贴</li>
@@ -190,11 +218,13 @@ const composeDivider = computed(() => {
   </div>
 </template>
 
-<style lang="less" scoped>
+<style lang="less">
+.context-menu-base {
+  width: 220px;
+}
 .context-menu-details {
   z-index: 1000;
   border: #434343 1px solid;
-  width: 220px;
   ul {
     padding: 4px 0;
     background-color: #292929;
@@ -205,6 +235,7 @@ const composeDivider = computed(() => {
     }
 
     li {
+      width: 100%;
       font-size: 14px;
       padding: 0 12px;
       position: relative;
@@ -225,7 +256,7 @@ const composeDivider = computed(() => {
       }
 
       &:hover {
-        background-color: #333;
+        background-color: #333 !important;
       }
     }
   }
diff --git a/core/core-frontend/src/store/modules/data-visualization/compose.ts b/core/core-frontend/src/store/modules/data-visualization/compose.ts
index f5bca7ae78..78f277edc4 100644
--- a/core/core-frontend/src/store/modules/data-visualization/compose.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/compose.ts
@@ -56,6 +56,46 @@ export const composeStore = defineStore('compose', {
       // do updateGroupBorder
     },
 
+    alignment: function (params) {
+      const { areaData } = this
+      if (areaData.components.length === 1) {
+        // 一个组件不进行组合直接释放
+        areaData.components = []
+        return
+      }
+      if (areaData.components.length > 0 && areaData.style.width === 0) {
+        // 计算组合区域
+        this.calcComposeArea()
+      }
+      const { left, top, width, height } = areaData.style
+      const areaRight = left + width
+      const areaTransverseCenter = left + width / 2 // 横向中心点
+      const areaBottom = top + height
+      const areaDirectionCenter = top + height / 2 // 纵向中心点
+
+      areaData.components.forEach(component => {
+        if (params === 'left') {
+          // 居左
+          component.style.left = left
+        } else if (params === 'right') {
+          // 居右
+          component.style.left = areaRight - component.style.width
+        } else if (params === 'top') {
+          // 居上
+          component.style.top = top
+        } else if (params === 'bottom') {
+          // 居下
+          component.style.top = areaBottom - component.style.height
+        } else if (params === 'transverse') {
+          // 横向居中
+          component.style.left = areaTransverseCenter - component.style.width / 2
+        } else if (params === 'direction') {
+          // 纵向
+          component.style.top = areaDirectionCenter - component.style.height / 2
+        }
+      })
+    },
+
     compose: function (canvasId = 'canvas-main') {
       const editor = this.editorMap[canvasId]
       const { areaData } = this