YaolongHan 4 år sedan
förälder
incheckning
d20c9f8b5d

+ 23 - 0
src/assets/font/demo_index.html

@@ -31,6 +31,12 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe68a;</span>
+                <div class="name">箭头</div>
+                <div class="code-name">&amp;#xe68a;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe639;</span>
                 <div class="name">工具</div>
                 <div class="code-name">&amp;#xe639;</div>
@@ -111,6 +117,15 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont iconjiantou-copy"></span>
+            <div class="name">
+              箭头
+            </div>
+            <div class="code-name">.iconjiantou-copy
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icongongju"></span>
             <div class="name">
               工具
@@ -186,6 +201,14 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconjiantou-copy"></use>
+                </svg>
+                <div class="name">箭头</div>
+                <div class="code-name">#iconjiantou-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icongongju"></use>
                 </svg>
                 <div class="name">工具</div>

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 12 - 14
src/assets/font/iconfont.css


BIN
src/assets/font/iconfont.eot


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 1
src/assets/font/iconfont.js


+ 7 - 0
src/assets/font/iconfont.json

@@ -6,6 +6,13 @@
   "description": "博瑞拓扑图编辑去",
   "glyphs": [
     {
+      "icon_id": "16867744",
+      "name": "箭头",
+      "font_class": "jiantou-copy",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
+    },
+    {
       "icon_id": "7088035",
       "name": "工具",
       "font_class": "gongju",

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 3 - 0
src/assets/font/iconfont.svg


BIN
src/assets/font/iconfont.ttf


BIN
src/assets/font/iconfont.woff


BIN
src/assets/font/iconfont.woff2


+ 2 - 1
src/components/editClass/big-edit/index.ts

@@ -1,2 +1,3 @@
 import {BaseEditScene} from "./BaseEditScene"
-export {BaseEditScene}
+import {BaseLineEdit} from "./items/BaseLineEdit"
+export {BaseEditScene,BaseLineEdit}

+ 8 - 1
src/components/editClass/persagy-edit/PTopoScene.ts

@@ -1,6 +1,13 @@
-import { BaseEditScene } from "./../big-edit"
+import { BaseEditScene } from "./../big-edit";
+import { SMouseEvent } from "@persagy-web/base/lib";
 export class PTopoScene extends BaseEditScene {
     constructor() {
         super()
     }
+
+    onMouseUp(event: SMouseEvent): any {
+        if (this.editCmd == "EditBaseLine") {
+            console.log('编辑线')
+        }
+    }
 }

+ 52 - 4
src/components/editview/baseTopoEditer.vue

@@ -1,5 +1,53 @@
 <template>
-    <div>
-        基础编辑组件
-    </div>
-</template>
+  <div class="baseTopo" ref="baseTopo">
+    <canvas id="persagy_topo" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
+  </div>
+</template>
+<script>
+import { PTopoScene } from "@/components/editClass/persagy-edit";
+// import { BaseLineEdit } from "@/components/editClass/big-edit";
+import { SGraphView } from "@persagy-web/graph";
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      scene: null, //场景
+      view: null, //视图
+      canvasWidth: 700, //画布宽
+      canvasHeight: 700 //画布高
+    };
+  },
+  computed: {
+    ...mapState(["choiceLegend"])
+  },
+  mounted() {
+    this.canvasWidth = this.$refs.baseTopo.offsetWidth;
+    this.canvasHeight = this.$refs.baseTopo.offsetHeight - 10;
+    this.scene = new PTopoScene();
+    this.view = new SGraphView("persagy_topo");
+    this.view.scene = this.scene;
+    // this.scene.root.children = [];
+    // this.lineItem = new BaseLineEdit(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();
+  },
+  watch: {
+    choiceLegend(val) {
+      if (this.scene) {
+        // 设置当前编辑状态
+        this.scene.editCmd = this.choiceLegend;
+      }
+      console.log("choiceLegend", val);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+    .baseTopo{
+        width: 100%;
+        height: 100%
+    }
+</style>

+ 16 - 3
src/components/editview/leftToolBar.vue

@@ -3,6 +3,9 @@
   <div class="left-tool-bar">
     <div class="btn-list">
       <ul>
+        <li :class="{ 'btn-active': chiceStatus==0 }" @click="choiceStatus()">
+          <span class="icon iconfont iconjiantou-copy"></span>
+        </li>
         <li :class="{ 'btn-active': chiceStatus==1 }" @click="openTool(1)">
           <span class="icon iconfont iconzhongxin"></span>
         </li>
@@ -24,10 +27,10 @@
       size="240px"
       :with-header="false"
       :destroy-on-close="true"
-      :append-to-body="true"
       :visible.sync="drawer"
       :direction="direction"
       :modal="false"
+      :modal-append-to-body="false"
       :show-close="true"
       :before-close="handleClose"
       :wrapperClosable="false"
@@ -38,16 +41,18 @@
 </template>
 <script>
 import legendList from "./leftToolBar/legendList.vue";
+import { mapMutations } from "vuex";
 export default {
   components: { legendList },
   data() {
     return {
-      drawer: true,
+      drawer: false,
       chiceStatus: 0, //选中按钮状态
       direction: "ltr"
     };
   },
   methods: {
+    ...mapMutations(["SETCHOICELEHEND"]),
     handleClose() {
       this.drawer = false;
     },
@@ -64,8 +69,13 @@ export default {
         }
       } else {
         this.drawer = !this.drawer;
-        this.chiceStatus = 0;
+        this.chiceStatus = -1;
       }
+    },
+    choiceStatus() {
+      this.chiceStatus = 0;
+      this.drawer = false;
+      this.SETCHOICELEHEND("");
     }
   }
 };
@@ -110,5 +120,8 @@ li {
 .el-drawer__wrapper {
   left: 64px;
   top: 50px;
+  // background: rgba(255, 255, 255, 1);
+  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  width: 242px;
 }
 </style>

+ 77 - 0
src/components/editview/leftToolBar/data.js

@@ -0,0 +1,77 @@
+export const baseEditItems = [{
+    title: '基础组件',
+    itemList: [{
+            title: '通用元素',
+            itemList: [{
+                    name: '线条',
+                    id: "EditBaseLine",
+                    icon: ''
+                },
+                {
+                    name: '文本框',
+                    id: "EditBasetext",
+                    icon: ''
+                },
+                {
+                    name: '图片',
+                    id: "EditBaseImage",
+                    icon: ''
+                },
+                {
+                    name: '批注',
+                    id: "EditBasePostil",
+                    icon: ''
+                }
+            ]
+        },
+        {
+            title: '图形',
+            itemList: [{
+                    name: '矩形',
+                    id: "EditBaseRect",
+                    icon: ''
+                },
+                {
+                    name: '三角形',
+                    id: "EditBaseTriangle",
+                    icon: ''
+                },
+                {
+                    name: '圆形',
+                    id: "EditBaseCircle",
+                    icon: ''
+                },
+                {
+                    name: '箭头',
+                    id: "EditBaseArrows",
+                    icon: ''
+                }
+            ]
+        },
+        {
+            title: '图标',
+            itemList: [{
+                    name: '锚',
+                    id: "123",
+                    icon: ''
+                },
+                {
+                    name: '矫正',
+                    id: "112",
+                    icon: ''
+                },
+                {
+                    name: '面积',
+                    id: "123",
+                    icon: ''
+                },
+                {
+                    name: '箭头',
+                    id: "12313",
+                    icon: ''
+                }
+            ]
+        },
+
+    ]
+}]

+ 29 - 61
src/components/editview/leftToolBar/legendList.vue

@@ -2,68 +2,19 @@
 <template>
   <div class="lengend-list">
     <!-- 基础图例 -->
-    <div class="lengend-item">
-      <span class="legend-title">基础组件</span>
-      <div class="legend-content">
-        <div class="title">通用元素</div>
+    <div class="lengend-item" v-for="(item,index) in baseEditItems" :key="index">
+      <span class="legend-title">{{item.title}}</span>
+      <div class="legend-content" v-for="(itemList,i) in item.itemList" :key="i">
+        <div class="title">{{itemList.title}}</div>
         <ul>
-          <li>
+          <li
+            :class="{ 'btn-active': choiceLegend== baseItem.id }"
+            v-for="(baseItem,k) in itemList.itemList"
+            :key="k"
+            @click="drawItem(baseItem.id)"
+          >
             <div class="icon"></div>
-            <span>线条</span>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <span>文本框</span>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <span>图片</span>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <span>批注</span>
-          </li>
-        </ul>
-      </div>
-      <div class="legend-content">
-        <div class="title">图形</div>
-        <ul>
-          <li>
-            <div class="icon"></div>
-            <span>矩形</span>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <span>三角形</span>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <span>圆形</span>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <span>箭头</span>
-          </li>
-        </ul>
-      </div>
-      <div class="legend-content">
-        <div class="title">图标</div>
-        <ul>
-          <li>
-            <div class="icon"></div>
-            <span>锚</span>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <span>矫正</span>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <span>面积</span>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <span>箭头</span>
+            <span>{{baseItem.name}}</span>
           </li>
         </ul>
       </div>
@@ -71,9 +22,23 @@
   </div>
 </template>
 <script>
+import { baseEditItems } from "./data";
+import { mapMutations, mapState } from "vuex";
 export default {
   data() {
-    return {};
+    return {
+      baseEditItems
+      // choiceLegend: "" //选中绘制类型
+    };
+  },
+  computed: {
+    ...mapState(["choiceLegend"])
+  },
+  methods: {
+    ...mapMutations(["SETCHOICELEHEND"]),
+    drawItem(item) {
+      this.SETCHOICELEHEND(item);
+    }
   }
 };
 </script>
@@ -123,6 +88,9 @@ export default {
         li:hover {
           background: #e1f2ff;
         }
+        .btn-active {
+          background: #e1f2ff;
+        }
       }
     }
   }

+ 0 - 6
src/components/editview/topoEditer.vue

@@ -17,8 +17,6 @@
   </div>
 </template>
 <script>
-import { PTopoScene } from "@/components/editClass/persagy-edit";
-import { SGraphView } from "@persagy-web/graph";
 import leftToolBar from "./leftToolBar";
 import rightPropertyBar from "./rightPropertyBar";
 import baseTopoEditer from "./baseTopoEditer";
@@ -31,10 +29,6 @@ export default {
       scene: null
     };
   },
-  mounted() {
-    // this.scene = new PTopoScene();
-    // this.view = new SGraphView("persagy_topo");
-  }
 };
 </script>
 <style lang="less">

+ 5 - 0
src/store/index.ts

@@ -5,8 +5,13 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    choiceLegend: '' //编辑器选中图例
   },
   mutations: {
+    // 修改编辑器
+    SETCHOICELEHEND(state, data) {
+      state.choiceLegend = data;
+    }
   },
   actions: {
   },