瀏覽代碼

feat 新增对齐方式

yunxing 4 年之前
父節點
當前提交
11d5fa69b7

+ 10 - 0
src/components/editview/basePlanEditer.vue

@@ -345,6 +345,11 @@ export default {
                 this.view.scaleByPoint(newV / oldV, this.canvasWidth / 2, this.canvasHeight / 2);
                 this.changeScaleByClick = false;
             });
+            // 更改对齐方式
+            bus.$off("changeAlignItem");
+            bus.$on("changeAlignItem", val => {
+                this.scene.changeAlignItem(val);
+            });
         },
         // 读取拓扑图
         readPlanMsg() {
@@ -536,6 +541,11 @@ export default {
                 this.scene.addItem(t);
             });
             if (this.view?.scene) this.view.fitSceneToView();
+            // 设置初始化缩放比例
+            this.initScale = this.view.scale;
+            // this.view.maxScale = this.initScale * 10;
+            // this.view.minScale = this.initScale / 10;
+            bus.$emit("initScale", this.view.scale);
         },
         // 生成快照并保存草稿
         saveTopoDraft() {

+ 14 - 7
src/components/editview/rightPropertyBar/BaseGraphy.vue

@@ -154,16 +154,23 @@ export default {
          */
         lineWidth: {
             get: function () {
-                const size = this.GraphyItem.lineWidth;
-                if (size > 20) {
-                    return 20;
-                }
-                return Number(size);
+                return this.GraphyItem.lineWidth;
             },
             set: function (newV) {
+                if (!newV) newV = 0;
+                newV = Number(newV);
                 const oldV = this.GraphyItem.lineWidth;
-                this.GraphyItem.lineWidth = Number(newV);
-                bus.$emit("undoAttr", this.GraphyItem, "lineWidth", oldV, newV);
+                // 宽度最大20
+                if (newV > 20) {
+                    newV = 20
+                } else if (newV < 0) {  //宽度最小0
+                    newV = 0
+                }
+                // 宽度改变,修改对象的宽度
+                if (newV !== oldV) {
+                    this.GraphyItem.lineWidth = newV;
+                    bus.$emit("undoAttr", this.GraphyItem, "lineWidth", oldV, newV);
+                }
             },
         },
         /**

+ 12 - 8
src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -105,7 +105,7 @@ export default {
          */
         width: {
             get: function () {
-                return this.ImageItem.width || "";
+                return this.ImageItem.width;
             },
             set: function (newV) {
                 if (!newV) newV = 0;
@@ -123,7 +123,7 @@ export default {
          */
         height: {
             get: function () {
-                return this.ImageItem.height || "";
+                return this.ImageItem.height;
             },
             set: function (newV) {
                 if (!newV) newV = 0;
@@ -133,7 +133,6 @@ export default {
                     this.ImageItem.width = newV / this.aspectRatio;
                 }
                 this.ImageItem.height = newV;
-                console.log(newV, this.ImageItem.height);
                 bus.$emit("undoAttr", this.ImageItem, "height", oldV, newV);
             },
         },
@@ -142,18 +141,23 @@ export default {
          */
         lineWidth: {
             get: function () {
-                return this.ImageItem.lineWidth || "";
+                return this.ImageItem.lineWidth;
             },
             set: function (newV) {
                 if (!newV) newV = 0;
                 newV = Number(newV);
                 const oldV = this.ImageItem.lineWidth;
+                // 宽度最大20
                 if (newV > 20) {
-                    this.ImageItem.lineWidth = 20;
-                } else {
+                    newV = 20
+                } else if (newV < 0) {  //宽度最小0
+                    newV = 0
+                }
+                // 宽度改变,修改对象的宽度
+                if (newV !== oldV) {
                     this.ImageItem.lineWidth = newV;
+                    bus.$emit("undoAttr", this.ImageItem, "lineWidth", oldV, newV);
                 }
-                bus.$emit("undoAttr", this.ImageItem, "lineWidth", oldV, newV);
             },
         },
         /**
@@ -191,7 +195,7 @@ export default {
             },
         },
     },
-    mounted() {},
+    mounted() { },
     methods: {
         /**
          * 切换锁状态

+ 14 - 7
src/components/editview/rightPropertyBar/baseLinePro.vue

@@ -171,16 +171,23 @@ export default {
          */
         lineWidth: {
             get: function () {
-                const size = this.LineItem.lineWidth;
-                if (size > 20) {
-                    return 20;
-                }
-                return size;
+                return this.LineItem.lineWidth;
             },
             set: function (newV) {
+                if (!newV) newV = 0;
+                newV = Number(newV);
                 const oldV = this.LineItem.lineWidth;
-                this.LineItem.lineWidth = newV;
-                bus.$emit("undoAttr", this.LineItem, "lineWidth", oldV, newV);
+                // 宽度最大20
+                if (newV > 20) {
+                    newV = 20
+                } else if (newV < 0) {  //宽度最小0
+                    newV = 0
+                }
+                // 宽度改变,修改对象的宽度
+                if (newV !== oldV) {
+                    this.LineItem.lineWidth = newV;
+                    bus.$emit("undoAttr", this.LineItem, "lineWidth", oldV, newV);
+                }
             },
         },
         /**

+ 18 - 10
src/components/editview/rightPropertyBar/baseTextPro.vue

@@ -91,17 +91,25 @@ export default {
          */
         size: {
             get: function () {
-                const size = this.TextItem.font.size;
-                if (size > 20) {
-                    return 20;
-                }
-                return size;
+                return this.TextItem.font.size;
             },
             set: function (newV) {
-                newV = new SFont("sans-serif", newV);
-                const oldV = new SFont("sans-serif", this.TextItem.font.size);
-                this.TextItem.font = newV;
-                bus.$emit("undoAttr", this.TextItem, "font", oldV, newV);
+                if (!newV) newV = 0;
+                newV = Number(newV);
+                let oldV = this.TextItem.font.size;
+                // 宽度最大20
+                if (newV > 20) {
+                    newV = 20
+                } else if (newV < 0) {  //宽度最小0
+                    newV = 0
+                }
+                // 字体大小改变,修改对象的字体大小
+                if (newV !== this.TextItem.font.size) {
+                    newV = new SFont("sans-serif", newV);
+                    oldV = new SFont("sans-serif", this.TextItem.font.size);
+                    this.TextItem.font = newV;
+                    bus.$emit("undoAttr", this.TextItem, "font", oldV, newV);
+                }
             },
         },
         /**
@@ -134,7 +142,7 @@ export default {
         },
     },
     methods: {},
-    mounted() {},
+    mounted() { },
     watch: {},
 };
 </script>

+ 129 - 3
src/components/editview/topToolBar.vue

@@ -47,6 +47,33 @@
                 </li>
                 <el-divider direction="vertical"></el-divider>
                 <!-- 对齐方式 -->
+                <!-- <el-dropdown trigger="click">
+                    <span class="el-dropdown-link">
+                        <i class="icon iconfont icon-zuoduiqi"></i>
+                        <i class="el-icon-arrow-down el-icon--right"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item>
+                            <i class="icon iconfont icon-zuoduiqi" disabled></i>
+                            左对齐
+                        </el-dropdown-item>
+                        <el-dropdown-item icon="icon iconfont icon-zuoduiqi">左对齐</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown> -->
+
+                <el-dropdown trigger="click" @command="changeAlignItem" placement="top-start">
+                    <span class="el-dropdown-link">
+                        <i class="icon iconfont icon-zuoduiqi"></i>
+                        <i class="el-icon-arrow-down el-icon--right"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown" class="top-dropdown">
+                        <el-dropdown-item v-for="item in alignmentOptions" :key="item.value" :command="item.value" :disabled="item.disabled">
+                            <img :src="require(`@/assets/images/` + item.img + `.png`)" alt="" />
+                            <span>{{ item.label }}</span>
+                        </el-dropdown-item>
+                        <!-- <el-dropdown-item icon="icon iconfont icon-zuoduiqi">左对齐</el-dropdown-item> -->
+                    </el-dropdown-menu>
+                </el-dropdown>
                 <el-divider direction="vertical"></el-divider>
                 <li @click="setLock()">
                     <el-tooltip class="item" effect="dark" :content="!isLock ? '解锁' : '锁定'" placement="bottom">
@@ -55,12 +82,12 @@
                 </li>
                 <li @click="hideItem">
                     <el-tooltip class="item" effect="dark" content="隐藏" placement="bottom">
-                        <span class="icon iconfont icon-yincang" :class="{'disabled': hideDisabled}"></span>
+                        <span class="icon iconfont icon-yincang" :class="{ disabled: hideDisabled }"></span>
                     </el-tooltip>
                 </li>
                 <li @click="deleteItem">
                     <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
-                        <span class="icon iconfont icon-shanchu" :class="{'disabled': deleteDisabled}"></span>
+                        <span class="icon iconfont icon-shanchu" :class="{ disabled: deleteDisabled }"></span>
                     </el-tooltip>
                 </li>
             </ul>
@@ -72,6 +99,7 @@
 </template>
 <script>
 import bus from "@/bus/bus";
+import { SGraphLayoutType } from "@persagy-web/graph/lib";
 export default {
     data() {
         return {
@@ -80,7 +108,57 @@ export default {
             lockDisabled: false,
             deleteDisabled: false,
             hideDisabled: false,
-
+            alignmentOptions: [
+                //对齐数据
+                {
+                    value: SGraphLayoutType.Left,
+                    label: "左对齐",
+                    img: "t-left",
+                    disabled: true
+                },
+                {
+                    value: SGraphLayoutType.Right,
+                    label: "右对齐",
+                    img: "t-right",
+                    disabled: true
+                },
+                {
+                    value: SGraphLayoutType.Top,
+                    label: "顶对齐",
+                    img: "t-top",
+                    disabled: true
+                },
+                {
+                    value: SGraphLayoutType.Bottom,
+                    label: "底对齐",
+                    img: "t-bottom",
+                    disabled: true
+                },
+                {
+                    value: SGraphLayoutType.Center,
+                    label: "水平居中对齐",
+                    img: "t-center",
+                    disabled: true
+                },
+                {
+                    value: SGraphLayoutType.Middle,
+                    label: "垂直居中对齐",
+                    img: "t-topandbottm",
+                    disabled: true
+                },
+                {
+                    value: SGraphLayoutType.Vertical,
+                    label: "垂直分布",
+                    img: "t-vertical",
+                    disabled: true
+                },
+                {
+                    value: SGraphLayoutType.Horizontal,
+                    label: "水平分布",
+                    img: "t-level",
+                    disabled: true
+                }
+            ],
         };
     },
     methods: {
@@ -96,6 +174,26 @@ export default {
         deleteItem() {
             bus.$emit("deleteItem");
         },
+        /**
+         * 修改对齐方式
+         * @param  val 选中的对齐方式类型
+         */
+        changeAlignItem(val) {
+            console.log(val)
+            bus.$emit("changeAlignItem", val);
+        },
+        /**
+         * 处理对齐方式
+         * @param itemList 选中的元素数组
+         */
+        handleAlign(itemList) {
+            // 选中两个以上元素时,对齐方式解开禁用
+            if (itemList?.length > 1) {
+                this.alignmentOptions.map(v => v.disabled = false)
+            } else {
+                this.alignmentOptions.map(v => v.disabled = true)
+            }
+        },
         // 复制
         copy() {
             bus.$emit("copy");
@@ -150,6 +248,8 @@ export default {
                     }
                 })
             }
+            // 处理对齐方式
+            this.handleAlign(itemList)
         },
     },
     mounted() {
@@ -160,6 +260,32 @@ export default {
     },
 };
 </script>
+<style lang="less">
+// 对齐方式下拉按钮菜单
+.top-dropdown {
+    li {
+        padding-left: 12px !important;
+        width: 130px;
+        height: 30px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        img {
+            width: 16px;
+            margin-right: 5px;
+            vertical-align: middle;
+        }
+        span {
+            font-weight: 400;
+            font-size: 14px;
+        }
+    }
+    .el-dropdown-menu__item.is-disabled {
+        pointer-events: initial;
+        cursor: not-allowed;
+    }
+}
+</style>
 <style lang="less" scoped>
 ul,
 li {

+ 7 - 0
src/lib/SPlanScene.ts

@@ -74,6 +74,13 @@ export class SPlanScene extends SBaseEditScene {
      * @param list   选中的 item 数组
      */
     emitChoice(list: any) {}
+    /**
+     * 修改选中item的对齐方式
+     * @param val
+     */
+    changeAlignItem(val: any): void {
+        this.selectContainer.layout(val);
+    }
 
     /**
      * 鼠标左键按下