xiebeibei před 4 roky
rodič
revize
0f7748e377

+ 3 - 0
src/components/baseEditer.vue

@@ -137,6 +137,9 @@ export default {
       bus.$on("deleiteItem", () => {
         this.scene.deleiteItem();
       });
+      bus.$on("changeAlignItem", (val) => {
+        this.scene.changeAlignItem(val);
+      });
       bus.$on("extractItem", () => {
         const map = {};
         this.fParser.spaceList.forEach(t => {

+ 62 - 8
src/components/edit/top_toolbar.vue

@@ -19,9 +19,21 @@
           <span>重做</span>
         </li>-->
         <li>缩放窗口</li>
-        <li @click="alignItem">
-          <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
-          <span>对齐</span>
+        <li>
+          <a-dropdown :trigger="['click']">
+            <div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
+              <div>
+                <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt/>
+                <div>对齐</div>
+              </div>
+              <a-icon type="caret-down" class="down-icon"/>
+            </div>
+            <a-menu slot="overlay">
+              <a-menu-item v-for="item in alignmentOptions" :key="item.value" @click="changeAlignItem(item.value)">
+                {{item.label}}
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
         </li>
         <!-- <li>
           <a-icon type="edit" />
@@ -55,11 +67,46 @@
 </template>
 <script>
 import bus from "@/bus";
+import {SGraphLayoutType} from "@saga-web/graph/lib";
 export default {
   data() {
     return {
       isLock: false, //是否锁定
-      focusItem: null
+      focusItem: null,
+      alignmentOptions:[  //对齐数据
+        {
+          value:SGraphLayoutType.Left,
+          label:'左对齐'
+        },
+        {
+          value:SGraphLayoutType.Right,
+          label:'右对齐'
+        },
+        {
+          value:SGraphLayoutType.Top,
+          label:'顶对齐'
+        },
+        {
+          value:SGraphLayoutType.Bottom,
+          label:'底对齐'
+        },
+        {
+          value:SGraphLayoutType.Center,
+          label:'水平居中对齐'
+        },
+        {
+          value:SGraphLayoutType.Middle,
+          label:'垂直居中对齐'
+        },
+        {
+          value:SGraphLayoutType.Vertical,
+          label:'垂直分布'
+        },
+        {
+          value:SGraphLayoutType.Horizontal,
+          label:'水平分布'
+        }
+      ]
     };
   },
   methods: {
@@ -99,8 +146,8 @@ export default {
       }
     },
     // 对齐item
-    alignItem() {
-
+    changeAlignItem(val) {
+      bus.$emit("changeAlignItem",val);
     }
   },
   mounted() {
@@ -113,8 +160,8 @@ export default {
 <style lang="less" scoped>
 ul,
 li {
-  margin: 0;
-  padding: 0;
+  /*margin: 0;*/
+  /*padding: 0;*/
   list-style: none;
 }
 #top_toolbar {
@@ -148,6 +195,13 @@ li {
           width: 16px;
           height: 16px;
         }
+        .dropdown-flex{
+          display: flex;
+          align-items: center;
+          .down-icon{
+            margin-left: 12px;
+          }
+        }
       }
     }
   }

+ 3 - 1
src/components/mapClass/EditScence.ts

@@ -6,6 +6,7 @@ import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem";
 import { TipelineItem } from "@/lib/items/TipelineItem";
 import { SImgTextItem } from "@/lib/items/SImgTextItem"
 import { SPoint, SFont } from '@saga-web/draw/lib';
+import {SZoneLegendItem} from "@/lib/items/SZoneLegendItem";
 
 
 /**
@@ -336,7 +337,8 @@ export class EditScence extends SGraphScene {
      * @param v
      */
     changeAlignItem(v: any): void {
-        this.selectContainer.layout(SGraphLayoutType.v);
+        console.log(v);
+        this.selectContainer.layout(v);
     }
 
     /**