YaolongHan 4 years ago
parent
commit
9f55b22096

+ 219 - 0
docs/.vuepress/components/edit/items/editPolygon/editPolygon.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="edit-line">
+    <div class="btn-list">
+      <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">画线</el-button>
+      <el-tooltip class="item" effect="dark" content="双击 item 也可进入编辑状态" placement="top-start">
+        <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button>
+      </el-tooltip>
+
+      <el-button
+        :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
+        size="small"
+        @click="deleteItem"
+      >删除</el-button>
+      <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start">
+        <el-button
+          :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']"
+          size="small"
+          @click="eqDrawLine"
+        >垂直水平划线</el-button>
+      </el-tooltip>
+    </div>
+    <div class="content">
+      <div class="left">
+        <canvas id="edit_line" width="700" height="460" tabindex="0" />
+      </div>
+      <div class="line-property">
+        <el-card shadow="always">
+          <div slot="header" class="clearfix">
+            <span>属性修改</span>
+          </div>
+          <div class="always-item">
+            <span>线宽:</span>
+            <el-input-number
+              size="small"
+              v-model="lineWidth"
+              @change="changeLineWidth"
+              :min="1"
+              :max="50"
+            ></el-input-number>
+          </div>
+          <div class="always-item">
+            <span>线类型:</span>
+            <el-select
+              style="width:130px"
+              size="small"
+              v-model="lineType"
+              @change="changeType"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </div>
+          <div class="always-item">
+            <span>线颜色:</span>
+            <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
+          </div>
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
+import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
+import { SPoint } from "@persagy-web/draw/";
+import { EditLineItem } from "./../../../../../guides/edit/items/src/EditLineItem";
+import { hexify } from "./../../../../public/until/rgbaUtil";
+//注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/";
+export default {
+  name: "editLine",
+  data() {
+    return {
+      scene: null,
+      view: null,
+      isCreated: false, //是否创建完成
+      cmdStatus: "", //选中状态
+      lineItem: null, //存放创建的Item
+      lineWidth: 1,
+      lineColor: "",
+      lineType: "",
+      options: [
+        {
+          value: "Solid",
+          label: "实线"
+        },
+        {
+          value: "Dashed",
+          label: "虚线"
+        },
+        {
+          value: "Dotted",
+          label: "点"
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.view = new SGraphView("edit_line");
+    this.scene = new SGraphScene();
+    this.view.scene = this.scene;
+  },
+  methods: {
+    create() {
+      this.cmdStatus = "create";
+      this.scene.root.children = [];
+      this.lineItem = new EditLineItem(null, []);
+      this.lineItem.status = SItemStatus.Create;
+      this.lineItem.connect("finishCreated", this, this.finishCreated);
+      this.scene.addItem(this.lineItem);
+      this.scene.grabItem = this.lineItem;
+      this.view.update();
+    },
+    deleteItem() {
+      this.cmdStatus = "";
+      this.scene.removeItem(this.lineItem);
+      this.lineItem = null;
+      this.view.update();
+    },
+    edit() {
+      if (this.lineItem) {
+        if (this.lineItem.status == SItemStatus.Normal) {
+          this.scene.grabItem = this.lineItem;
+          this.lineItem.status = SItemStatus.Edit;
+          this.cmdStatus = "edit";
+        } else {
+          this.lineItem.status = SItemStatus.Normal;
+          this.scene.grabItem = null;
+          this.cmdStatus = "";
+        }
+      }
+    },
+    eqDrawLine() {
+      this.cmdStatus = "eqDrawLine";
+      this.scene.root.children = [];
+      this.lineItem = new EditLineItem(null, []);
+      this.lineItem.verAndLeve = true;
+      this.lineItem.status = SItemStatus.Create;
+      this.lineItem.connect("finishCreated", this, this.finishCreated);
+      this.scene.addItem(this.lineItem);
+      this.scene.grabItem = this.lineItem;
+      this.view.update();
+    },
+    // 改变线宽属性
+    changeLineWidth(val) {
+      if (this.lineItem) {
+        this.lineWidth = val;
+        this.lineItem.lineWidth = val;
+      }
+    },
+    // 改变颜色
+    changeColor(val) {
+      if (this.lineItem) {
+        this.lineColor = hexify(val);
+        this.lineItem.strokeColor = this.lineColor;
+      }
+    },
+    //改变线得类型
+    changeType(val) {
+      if (this.lineItem) {
+        this.lineItem.lineStyle = SLineStyle[val];
+      }
+    },
+    // 完成创建后的回调
+    finishCreated() {
+      this.cmdStatus = "";
+    }
+  },
+  watch: {
+    lineItem(val) {
+      if (val) {
+        this.lineWidth = val.lineWidth; // 线宽
+        this.lineStyle = val.lineStyle; // 线条样式
+        this.lineColor = val.strokeColor.value; // 线条填充色
+        this.lineType = this.options[val.lineStyle].value;
+      } else {
+        this.lineWidth = 0;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+.edit-line {
+  width: 100%;
+  height: 500px;
+  .content {
+    display: flex;
+    justify-content: flex-start;
+    .left {
+      margin-right: 20px;
+    }
+    .line-property {
+      width: 300px;
+      margin-top: 20px;
+      .always{
+        width: 100%;
+        height: 100%;
+      }
+      .always-item {
+        display: flex;
+        margin-top: 10px;
+        justify-content: space-between;
+      }
+    }
+  }
+  .heightLight {
+    color: #409eff;
+    border-color: #c6e2ff;
+    background-color: #ecf5ff;
+  }
+}
+</style>

+ 0 - 31
docs/.vuepress/config.js

@@ -67,36 +67,6 @@ module.exports = {
             },
             {
                 text: "开发文档",
-<<<<<<< HEAD
-                items: [{
-                    text: "引擎",
-                    items: [{
-                            text: "安装",
-                            link: "/guides/base/"
-                        },
-                        {
-                            text: "图形引擎",
-                            link: "/guides/engine/"
-                        },
-                        {
-                            text: "场景管理",
-                            link: "/guides/scene/"
-                        },
-                        {
-                            text: "楼层平面图",
-                            link: "/guides/big/"
-                        },
-                        {
-                            text: "系统图",
-                            link: "/guides/system-diagram/"
-                        },
-                        {
-                            text: "编辑器",
-                            link: "/guides/edit/"
-                        }
-                    ]
-                }, ]
-=======
                 items: [
                     {
                         text: "引擎",
@@ -109,7 +79,6 @@ module.exports = {
                         ]
                     },
                 ]
->>>>>>> a5361b3c73737dafb997d2168184296691e4255f
             },
             {
                 text: "API参考",

+ 8 - 0
docs/guides/edit/items/editPolygonItem.md

@@ -0,0 +1,8 @@
+# 多边形编辑类 EditPolygonItem 示例
+::: details 目录
+[[toc]]
+:::
+
+## 绘制示例
+
+<edit-items-editPolygon-editPolygon />

+ 1 - 1
docs/guides/index.js

@@ -79,7 +79,7 @@ const content = [
                 title: "编辑器Item示例",
                 children: [
                     ["/guides/edit/items/editLine", "编辑线"],
-                    ["/guides/big/items/editPolygonItem", "编辑多边形"],
+                    ["/guides/edit/items/editPolygonItem", "编辑多边形"],
                 ]
             },
             ["/guides/edit/undo/undo", "Undo示例"],