浏览代码

feat:新增编辑器scence

YaolongHan 4 年之前
父节点
当前提交
76f38f9c4c

+ 7 - 17
package-lock.json

@@ -1067,21 +1067,11 @@
       "integrity": "sha512-mmoFJ6Bsg/ui2aqhwNdRPTj6meAEEVPAK+jjTmHWqDSsjVbAqNeSAKL04Cr0UtOqgi4+6P3Ys9klZgITHDpiFw=="
     },
     "@saga-web/big": {
-      "version": "1.0.19",
-      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/big/-/big-1.0.19.tgz",
-      "integrity": "sha512-HqPY37IXZmVnMFaz0xblD5gKaKsCuPtsn57xIMVg42tWYt7plOCL9n3b/qpoYxwfdVpR41tnW/vfuqDGug7uRA==",
+      "version": "1.0.25",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/big/-/big-1.0.25.tgz",
+      "integrity": "sha512-/9Ztlw+3Mc/riFI99rxTyOJu+DWOWpWgpknpT7ENlFL5p8sqToZAqkPWKrLqterIRwv1oO1wgAAG6MNgEHNGsQ==",
       "requires": {
-        "@saga-web/graph": "2.1.67"
-      },
-      "dependencies": {
-        "@saga-web/graph": {
-          "version": "2.1.67",
-          "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.67.tgz",
-          "integrity": "sha512-MFjU5vW2ROA6/hT0ZkE52dqdHx3pW3YFyWeZqyoDth3lQvdNKPNU8J3yK+yHHimTr+FnSrBFBMbXJ6Jfs2oinA==",
-          "requires": {
-            "@saga-web/draw": "2.1.84"
-          }
-        }
+        "@saga-web/graph": "2.1.69"
       }
     },
     "@saga-web/draw": {
@@ -1108,9 +1098,9 @@
       }
     },
     "@saga-web/graph": {
-      "version": "2.1.68",
-      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.68.tgz",
-      "integrity": "sha512-2+MgPWxFrgyVNQKx6aAG4lZKo4fTed0MyvaccWAXB+j/D9EUy2TxGPNnR3nSMQabHhZKbWlHJqRMBvYybbb9ag==",
+      "version": "2.1.69",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.69.tgz",
+      "integrity": "sha512-Ekmrf4X8ytZdacdVd+jzPT92uzndO0zJi+tndgFYp6LWmeiyVNxIzxIf+C/s8PS1PbmBfP3HlGe2NCLyonrDSA==",
       "requires": {
         "@saga-web/draw": "2.1.84"
       }

+ 2 - 2
package.json

@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@saga-web/base": "2.1.14",
-    "@saga-web/big": "1.0.19",
+    "@saga-web/big": "1.0.25",
     "@saga-web/draw": "2.1.84",
-    "@saga-web/graph": "2.1.68",
+    "@saga-web/graph": "2.1.69",
     "@saga-web/feng-map": "1.0.7",
     "@saga-web/topology": "1.0.84",
     "ant-design-vue": "^1.6.0",

+ 83 - 71
src/components/baseEditer.vue

@@ -9,11 +9,26 @@
 <script>
 import { SFengParser } from "@saga-web/feng-map";
 import { SPoint } from "@saga-web/draw/lib";
-import { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem } from "@saga-web/big";
+import {
+  SFloorParser,
+  SImageItem,
+  STextItem,
+  SLineItem,
+  SPolylineItem
+} from "@saga-web/big";
 import { SPolygonItem } from "./mapClass/SPolygonItem";
-import { FloorView } from "./../lib/FloorView"
-import { FloorScene } from "./../lib/FloorScene"
+import { FloorView } from "./../lib/FloorView";
+import { FloorScene } from "./../lib/FloorScene";
+import { EditScence } from "./mapClass/EditScence";
+import { SRelationState } from "@saga-web/big/lib/enums/SRelationState";
 export default {
+  props: {
+    cmd: {
+      type: Number,
+      default: 0,
+      required: false
+    }
+  },
   data() {
     return {
       appName: "万达可视化系统",
@@ -31,56 +46,42 @@ export default {
   mounted() {
     this.canvasWidth = this.$refs.graphy.offsetWidth;
     this.canvasHeight = this.$refs.graphy.offsetHeight;
-    this.init()
+    this.init();
   },
   methods: {
     init() {
-      document.getElementById(`canvas`).focus()
+      document.getElementById(`canvas`).focus();
       this.clearGraphy();
-      this.scene = new FloorScene();
-      this.fmap = new SFengParser(
-        "fengMap",
-        this.mapServerURL,
-        this.key,
-        this.appName,
-        null
-      );
-      this.fmap.parseData("1001724_29", 6, res => {
-        console.log(res);
-        this.fParser = new SFloorParser(null);
-        console.log(this.fParser);
-        this.fParser.parseData(res);
-        this.fParser.spaceList.forEach(t => {
-          t.connect('click', this, this.spaceClick)
-          t.selectable = true;
-          this.scene.addItem(t)
-        });
-        this.fParser.wallList.forEach(t => this.scene.addItem(t));
-        this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
-        this.fParser.doorList.forEach(t => this.scene.addItem(t));
-        this.fParser.columnList.forEach(t => this.scene.addItem(t));
-        this.fParser.casementList.forEach(t => this.scene.addItem(t));
-        // this.addPolyLine();
-        // this.DirectRelationItem();
-        this.view.scene = this.scene;
-        this.view.fitSceneToView();
-      });
-    },
-    // 引入构建多边形类
-    addPolyLine() {
-      const data = {
-        PointList: [
-          { X: -138.71000000089407, Y: -17.5 },
-          { X: -130.31000000052154, Y: -17.5 },
-          { X: -130.31000000052154, Y: -25.5 },
-          { X: -138.71000000089407, Y: -25.5 }
-        ]
-      };
-      const Polylines = new SPolygonItem(null);
-      Polylines.setStatus = 2;
-      this.scene.addItem(Polylines);
-      this.scene.grabItem = Polylines;
+      // this.scene = new FloorScene();
+      this.scene = new EditScence();
+      // // this.fmap = new SFengParser(
+      //   "fengMap",
+      //   this.mapServerURL,
+      //   this.key,
+      //   this.appName,
+      //   null
+      // );
+      // this.fmap.parseData("1001724_29", 6, res => {
+      //   console.log(res);
+      //   this.fParser = new SFloorParser(null);
+      //   console.log(this.fParser);
+      //   this.fParser.parseData(res);
+      //   this.fParser.spaceList.forEach(t => {
+      //     t.connect("click", this, this.spaceClick);
+      //     t.selectable = true;
+      //     this.scene.addItem(t);
+      //   });
+      //   this.fParser.wallList.forEach(t => this.scene.addItem(t));
+      //   this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+      //   this.fParser.doorList.forEach(t => this.scene.addItem(t));
+      //   this.fParser.columnList.forEach(t => this.scene.addItem(t));
+      //   this.fParser.casementList.forEach(t => this.scene.addItem(t));
+      // this.addPolyLine();
+      this.view.scene = this.scene;
+      this.view.fitSceneToView();
+      // });
     },
+
     // 引入折线
     // DirectRelationItem() {
     //   const data = {
@@ -98,10 +99,10 @@ export default {
         return;
       }
       this.view = new FloorView("canvas");
-      document.getElementById('canvas').focus()
+      document.getElementById("canvas").focus();
     },
     spaceClick(space, event) {
-      console.log(this.scene.selectContainer)
+      console.log(this.scene.selectContainer);
       // const item = new SImageItem(null, {
       //   Width: 32,
       //   Height: 32,
@@ -117,28 +118,39 @@ export default {
       // setInterval(() => { item.text += '魔' }, 1000)
     },
     iconClick(item, event) {
-      console.log(2222222222222)
+      console.log(2222222222222);
+    }
+  },
+  watch: {
+    cmd: {
+      handler(cmd) {
+        // if (!this.scene) return;
+        // // grabItem !==null 则处在绘制状态
+        // if (this.scene.grabItem) {
+        //   const item = this.scene.grabItem;
+        //   // 如果为创建状态 cmd发生更改,则删除创建过程种的item
+        //   if (item.getStatus == SRelationState.Create) {
+        //     this.scene.removeItem(item);
+        //     this.scene.grabItem = null;
+        //   } else if (item.getStatus == SRelationState.Edit) {
+        //     // 如果为编辑状态 cmd发生更改,则该item转换为show状态,grabItem = null
+        //     item.setStatus == SRelationState.Normal;
+        //     this.scene.grabItem = null;
+        //   }
+        // } else {
+        //   // grabItem == null 则处在选择状态 可以随意切换cmd
+
+        // }
+        // this.view.update();
+        this.scene.setCmd = cmd;
+      },
+      immediate: true
     },
-    // changeFloor() { },
-    changeStatus(name) {
-      switch (name) {
-        case '选择':
-          // test init
-          this.init();
-          break;
-        case '画线':
-          this.scene.isLining = true;
-          break;
-        case '画文字':
-          this.scene.isTexting = true;
-          break;
-        case '画图片':
-          this.scene.isImging = true;
-          break;
-        default:
-          console.log(name)
-          break;
-      }
+    "scene.cmd": {
+      handler(cmd) {
+        this.$emit("setCmd", cmd);
+      },
+      deep: true
     }
   }
 };

+ 54 - 23
src/components/edit/left_toolbar.vue

@@ -7,27 +7,23 @@
         v-for="(item,i) in baseChoice"
         :key="i"
         @click="toolActionClick(item)"
+        v-bind:class="{ actives:item.isChoice}"
       >
         <div class="item">
-          <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
-          <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
+          <img
+            v-show="!item.isHover && !item.isChoice"
+            :src="require(`./../../assets/images/${item.img}`)"
+            alt
+          />
+          <img
+            v-show="item.isHover || item.isChoice "
+            :src="require(`./../../assets/images/${item.hoverImg}`)"
+            alt
+          />
         </div>
       </li>
     </ul>
     <ul class="list-2">
-      <!-- <li>
-        <div class="item">
-          <a-icon type="team" />
-          <div>消防系统</div>
-        </div>
-        <div class="tooltip">
-          <a-card style="width: 300px">
-            <p>Card content</p>
-            <p>Card content</p>
-            <p>Card content</p>
-          </a-card>
-        </div>
-      </li>-->
       <li
         v-on:mouseout="mouseoutActive(item)"
         v-on:mouseover="mouseoverActive(item)"
@@ -37,7 +33,7 @@
         <div class="item">
           <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
           <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
-          <div>弱电系统</div>
+          <div>{{item.name}}</div>
         </div>
       </li>
     </ul>
@@ -56,26 +52,34 @@ export default {
         {
           img: "t-select.png", //logo
           hoverImg: "t-select-hover.png", //hoverlogo
-          isHover: false, //是否hover
-          name: "选择" //类型
+          isHover: true, //是否hover
+          isChoice: true,
+          name: "选择", //类型
+          cmd: 0
         },
         {
           img: "t-line.png", //logo
           hoverImg: "t-line-hover.png", //hoverlogo
           isHover: false, //是否hover
-          name: "画线" //类型
+          isChoice: false,
+          name: "画线", //类型
+          cmd: 1
         },
         {
           img: "t-text.png", //logo
           hoverImg: "t-text-hover.png", //hoverlogo
           isHover: false, //是否hover
-          name: "画文字" //类型
+          isChoice: false,
+          name: "画文字", //类型
+          cmd: 2
         },
         {
           img: "t-img.png", //logo
           hoverImg: "t-img-hover.png", //hoverlogo
           isHover: false, //是否hover
-          name: "画图片" //类型
+          isChoice: false,
+          name: "画图片", //类型
+          cmd: 3
         }
       ],
       // 系统选择
@@ -101,6 +105,13 @@ export default {
       ]
     };
   },
+  props: {
+    cmd: {
+      type: Number,
+      default: 0,
+      required: false
+    }
+  },
   methods: {
     // 触入
     mouseoverActive(item) {
@@ -110,8 +121,22 @@ export default {
       item.isHover = false;
     },
     toolActionClick(item) {
-      this.$emit('toolActionClick',item.name);
-     }
+      this.baseChoice.forEach(item => {
+        item.isChoice = false;
+      });
+      item.isChoice = true;
+      this.$emit("toolActionClick", item);
+    }
+  },
+  watch: {
+    cmd(cmd) {
+      this.baseChoice.forEach(item => {
+        item.isChoice = false;
+        if (item.cmd == cmd) {
+          item.isChoice = true;
+        }
+      });
+    }
   }
 };
 </script>
@@ -229,5 +254,11 @@ export default {
       height: 54px;
     }
   }
+  .actives {
+    background: #e1f2ff;
+    border-radius: 8px;
+    opacity: 0.89;
+    color: #0091ff;
+  }
 }
 </style>

+ 29 - 5
src/components/mapClass/SPolygonItem.ts

@@ -27,7 +27,6 @@ import {
     SRect,
     SLine
 } from "@saga-web/draw";
-import { PolygonData } from "./type/PolygonData";
 import { SRelationState } from "@saga-web/big/lib/enums/SRelationState"
 import { SMathUtil } from "@saga-web/big/lib/utils/SMathUtil";
 
@@ -86,7 +85,7 @@ export class SPolygonItem extends SGraphItem {
     /** border宽 只可输入像素宽*/
     borderLine: number = 4;
     /** 鼠标移动点  */
-    private lastPoint = new SPoint();
+    private lastPoint: SPoint | null = null;
     /** 当前鼠标获取顶点对应索引 */
     private curIndex: number = -1;
     /** 当前鼠标获取顶点对应坐标 */
@@ -254,7 +253,12 @@ export class SPolygonItem extends SGraphItem {
         painter.pen.color = SColor.Transparent;
         painter.brush.color = this.brushColor;
         painter.pen.lineWidth = painter.toPx(this.borderLine);
-        painter.drawPolygon([...pointList, this.lastPoint]);
+        if (this.lastPoint) {
+            painter.drawPolygon([...pointList, this.lastPoint]);
+        } else {
+            painter.drawPolygon(pointList);
+        }
+
     }
 
     /**
@@ -308,7 +312,7 @@ export class SPolygonItem extends SGraphItem {
                 const delePoint = new SPoint(this.pointList[lenIndex].x, this.pointList[lenIndex].y)
                 this.deletePoint(lenIndex);
                 // 记录顶点操作记录压入堆栈
-                this.recordAction(SGraphPointListDelete, [this.pointList, delePoint,lenIndex]);
+                this.recordAction(SGraphPointListDelete, [this.pointList, delePoint, lenIndex]);
             }
         } else {
             // 1 判断是否点击在多边形顶点
@@ -451,6 +455,9 @@ export class SPolygonItem extends SGraphItem {
                 // 当顶点大于二个时才又条件执行闭合操作并清空堆栈
                 if (this.pointList.length > 2) {
                     this._status = SRelationState.Normal;
+                    if (this.scene) {
+                        this.scene.grabItem = null;
+                    }
                     if (this.undoStack) {
                         this.undoStack.clear();
                     }
@@ -499,7 +506,6 @@ export class SPolygonItem extends SGraphItem {
         } else if (this._status == SRelationState.Edit) {
             // 对多边形数组做编辑操作
             this.editPolygonPoint(event);
-
         }
         return true;
     } // Function onMouseDown()
@@ -535,6 +541,7 @@ export class SPolygonItem extends SGraphItem {
 
     onMouseMove(event: SMouseEvent): boolean {
         if (this._status == SRelationState.Create) {
+            this.lastPoint = new SPoint
             this.lastPoint.x = event.x;
             this.lastPoint.y = event.y;
             this.update()
@@ -614,4 +621,21 @@ export class SPolygonItem extends SGraphItem {
         }
     } // Function onDraw()
 
+    /**
+     * 取消操作
+     *
+     * @param   painter       painter对象
+     */
+    cancelOperate(): void {
+        // 当状态为展示状态
+        if (this._status == SRelationState.Create) {
+            // 闭合多边形
+            this.parent = null
+        } else if (this._status == SRelationState.Edit) {
+            // 编辑状态
+            this._status = SRelationState.Normal
+        }
+    } // Function cancelOperate()
+
+
 }

+ 96 - 17
src/components/mapClass/editScence.ts

@@ -1,8 +1,9 @@
-import { SGraphyScene } from "@saga-web/graphy";
 import { SMouseEvent, SUndoStack } from "@saga-web/base";
-
-
-
+import { SGraphScene,SGraphyItem } from '@saga-web/graph/lib';
+import { SPoint } from '@saga-web/draw/lib';
+import { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem } from "@saga-web/big";
+import { SGraphItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
+import { SPolygonItem } from "./SPolygonItem";
 
 /**
  * 在线绘图
@@ -10,35 +11,73 @@ import { SMouseEvent, SUndoStack } from "@saga-web/base";
  * @author 韩耀龙
  */
 
-export class editScence extends SGraphyScene {
+export class EditScence extends SGraphScene {
 
     undoStack = new SUndoStack();
-    // 状态 1处于选择状态 2 处于编辑状态
-    private status = 1;
+    /** 命令 1 绘制直线 */
+    private cmd = 0;
+    /** 获取当前状态 */
+    get getCmd(): number {
+        return this.cmd;
+    }
+    /** 编辑当前状态 */
+    set setCmd(cmd: number) {
+        if (cmd == 0) {
+            this.grabItem = null;
+            this.focusItem = null;
+        }
+        this.cmd = cmd;
+        if(this.focusItem){
+            // 取消操作
+            this.focusItem.cancelOperate();
+            this.focusItem = null;
+
+        }
+    };
+    /** 当前选中焦点Item */
+    focusItem:SGraphyItem:null = null;
 
     constructor() {
         super();
+        // 选择绑定选额item事件
+        this.selectContainer.connect('listChange', this, this.listChange)
     }
 
+
     /**
-    * 选择空间状态
-    */
-    initStatus() {
+     * 监听选择item数据
+     *
+     */
 
+    listChange() {
+        console.log(arguments)
     }
 
     /**
      * 增加线段item
      */
-    addLine() {
-
+    addLine(event: SMouseEvent): boolean {
+        const item = new SLineItem(null, new SPoint(event.x, event.y));
+        this.addItem(item);
+        this.grabItem = item;
+        this.undoStack.push(new SGraphAddCommand(this, item));
+        // item.connect("onMove", this, this.onItemMove.bind(this));
+        return true
     }
 
     /**
      * 增加多边形item
      */
-    addPolygonItem() {
-
+    addPolygonItem(event: SMouseEvent): void {
+        //创建item
+        const Polylines = new SPolygonItem(null);
+        //设置状态
+        Polylines.setStatus = 3;
+        const point = new SPoint(event.x, event.y)
+        Polylines.setPointList = [point];
+        this.addItem(Polylines);
+        this.grabItem = Polylines;
+        this.focusItem = Polylines
     }
 
     /**
@@ -50,8 +89,12 @@ export class editScence extends SGraphyScene {
     /**
      * 增加管道
      */
-    addTextItem(): void {
-
+    addTextItem(event: SMouseEvent): void {
+        const item =  new STextItem(null, '请在右侧属性栏输入文字!');
+        item.moveTo(event.x, event.y);
+        this.addItem(item);
+        this.grabItem == null
+        this.cmd = 0;
     }
 
     /**
@@ -93,7 +136,6 @@ export class editScence extends SGraphyScene {
     lockItem(): void {
     }
 
-
     /**
      * 执行取消操作
      */
@@ -109,4 +151,41 @@ export class editScence extends SGraphyScene {
         this.undoStack.redo();
     }
 
+    ////////////////////////
+    //  以下为鼠标键盘操作事件
+    onMouseDown(event: SMouseEvent): any {
+        if (this.grabItem) {
+            return this.grabItem.onMouseDown(event);
+        }
+        switch (this.cmd) {
+            case 1:
+                this.addLine(event);
+                break;
+            case 2:
+                this.addTextItem(event);
+                break;
+            case 3:
+                this.addPolygonItem(event);
+                break;
+            default:
+                return super.onMouseDown(event);
+        }
+    }
+
+    /**
+     * 键盘事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+
+    onKeyDown(event: KeyboardEvent): any {
+        if (this.grabItem) {
+            this.grabItem.onKeyDown(event);
+        }
+        if (event.key == "Enter") {
+            this.cmd = 0
+        }
+        return false
+    }
 }

+ 12 - 5
src/views/editer.vue

@@ -7,11 +7,11 @@
     <div class="content">
       <!-- 左侧工具栏 -->
       <div class="left_toolbar">
-        <leftToolbar @toolActionClick="toolActionClick"></leftToolbar>
+        <leftToolbar @toolActionClick="toolActionClick" :cmd="cmd"></leftToolbar>
       </div>
       <!-- 绘制界面 -->
       <div class="baseEdit">
-        <baseEditer ref="graphy"></baseEditer>
+        <baseEditer ref="graphy" :cmd="cmd" @setCmd="setCmd"></baseEditer>
         <!-- <baseEditertest ref="graphy"></baseEditertest> -->
         <!-- <baseEditerzy ref="graphy"></baseEditerzy> -->
       </div>
@@ -33,6 +33,11 @@ import rightToolbar from "@/components/edit/right_toolbar.vue";
 
 export default {
   name: "wandaEditer",
+  data() {
+    return {
+      cmd: 0 //命令操作
+    };
+  },
   components: {
     baseEditer,
     baseEditertest,
@@ -43,9 +48,11 @@ export default {
   },
   methods: {
     // 左侧工具栏 点击事件
-    toolActionClick(name) {
-      console.log(name)
-      this.$refs.graphy.changeStatus(name);
+    toolActionClick(item) {
+      this.cmd = item.cmd;
+    },
+    setCmd(cmd) {
+      this.cmd = cmd;
     }
   }
 };