YaolongHan преди 4 години
родител
ревизия
3b7c68ac1d

Файловите разлики са ограничени, защото са твърде много
+ 12537 - 0
package-lock.json


+ 4 - 4
package.json

@@ -8,10 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@saga-web/base": "2.1.14",
-    "@saga-web/big": "1.0.25",
-    "@saga-web/draw": "2.1.84",
-    "@saga-web/graph": "2.1.69",
+    "@saga-web/base": "2.1.16",
+    "@saga-web/big": "1.0.30",
+    "@saga-web/draw": "2.1.87",
+    "@saga-web/graph": "2.1.74",
     "@saga-web/feng-map": "1.0.7",
     "@saga-web/topology": "1.0.84",
     "ant-design-vue": "^1.6.0",

+ 35 - 46
src/components/baseEditer.vue

@@ -54,34 +54,38 @@ export default {
       this.clearGraphy();
       // 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();
-      // });
+      // 选择绑定选额item事件
+      this.scene.selectContainer.connect("listChange", this, this.listChange);
+      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.view.scene = this.scene;
+        this.view.fitSceneToView();
+      });
+    },
+    // 监听变化
+    listChange(itemList) {
+      this.$emit("changeFocusItem", itemList.itemList);
     },
-
     // 引入折线
     // DirectRelationItem() {
     //   const data = {
@@ -124,27 +128,12 @@ export default {
   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();
+        if (cmd == null) {
+          cmd = 0;
+        }
         this.scene.setCmd = cmd;
       },
-      immediate: true
+      deep: true
     },
     "scene.cmd": {
       handler(cmd) {

+ 2 - 3
src/components/edit/left_toolbar.vue

@@ -48,7 +48,7 @@
         placement="left"
         :closable="false"
         :visible="visible"
-        :getContainer="ele"
+        :getContainer="false"
         :wrap-style="{ position: 'absolute' }"
         @close="onClose"
       >
@@ -150,7 +150,7 @@ export default {
         }
       ],
       visible: false,
-      ele: null,
+      ele: false,
       activeItem: 1
     };
   },
@@ -170,7 +170,6 @@ export default {
       this.$emit("toolActionClick", item);
     },
     showDrawer(item) {
-      console.log(item);
       if (item.name == "管线桥架") {
         this.activeItem = 2;
       } else {

+ 36 - 12
src/components/edit/right_toolbar.vue

@@ -103,13 +103,13 @@ const msgList = [
   {
     msg: "",
     disable: false,
-    name: "",
+    name: "X",
     unit: "x"
   },
   {
     msg: "",
     disable: false,
-    name: "",
+    name: "Y",
     unit: "y"
   },
   {
@@ -121,38 +121,62 @@ const msgList = [
   {
     msg: "",
     disable: false,
-    name: "",
+    name: "Width",
     unit: "w"
   },
   {
     msg: "",
     disable: false,
-    name: "",
+    name: "Height",
     unit: "h"
   }
 ];
 // import Select from "@/components/Select/Select.vue";
 export default {
+  props: {
+    focusItemList: {
+      type: Array,
+      default: function() {
+        return [];
+      },
+      required: false
+    }
+  },
   components: {
     // Select
   },
   data() {
     return {
       poistionList,
-      msgList,
-      dataSelect2: [
-        { id: "test1", name: "选择项" },
-        { id: "test2", name: "单平米" },
-        { id: "test3", name: "下级分项" },
-        { id: "test4", name: "滑动平均滑动平均" }
-      ]
+      msgList
     };
   },
   methods: {
     callback(key) {
       console.log(key);
     },
-    onSearch(){}
+    onSearch() {}
+  },
+  watch: {
+    focusItemList: function(newVal) {
+      console.log(newVal[0]);
+      this.msgList.forEach(item => {
+        if (item.name == "X") {
+          item.msg = newVal[0].minX;
+          // item.msg = newVal[0].mapToScene(0, 0).x;
+        }
+        if (item.name == "Y") {
+          item.msg = newVal[0].minY;
+          // item.msg = newVal[0].mapToScene(0, 0).y;
+        }
+        if (item.name == "Width") {
+          item.msg = newVal[0].boundingRect().width;
+        }
+        if (item.name == "Height") {
+          item.msg = newVal[0].boundingRect().height;
+        }
+      });
+    }
   }
 };
 </script>

+ 73 - 65
src/components/mapClass/SPolygonItem.ts

@@ -25,10 +25,11 @@ import {
     SPainter,
     SPoint,
     SRect,
-    SLine
+    SLine,
+    SPolygonUtil
 } from "@saga-web/draw";
-import { SRelationState } from "@saga-web/big/lib/enums/SRelationState"
 import { SMathUtil } from "@saga-web/big/lib/utils/SMathUtil";
+import { SItemStatus } from "@saga-web/big";
 
 /**
  * 编辑多边形
@@ -53,15 +54,12 @@ export class SPolygonItem extends SGraphItem {
     // 编辑当前状态
     set setPointList(arr: SPoint[]) {
         this.pointList = arr;
-        if (arr) {
-            this._xyzListToSPointList(arr);
-        };
         this.update();
     };
     /** 是否闭合    */
     closeFlag: boolean = false;
     // 当前状态
-    _status: number = SRelationState.Normal;
+    _status: number = SItemStatus.Normal;
     // 获取当前状态
     get getStatus(): number {
         return this._status;
@@ -70,14 +68,14 @@ export class SPolygonItem extends SGraphItem {
     set setStatus(value: number) {
         this._status = value;
         // 如果状态为show则需清栈
-        if (value == SRelationState.Normal) {
+        if (value == SItemStatus.Normal) {
             if (this.undoStack) {
                 this.undoStack.clear();
             }
         }
         this.update();
     };
-    data: PolygonData | null = null;
+    data: any | null = null;
     /** 边框颜色 */
     borderColor: SColor = new SColor("#0091FF");
     /** 填充颜色 */
@@ -154,7 +152,6 @@ export class SPolygonItem extends SGraphItem {
                 point = null
             }
         }
-        console.log('删除点位', point, i)
         this.update()
         return point
     }
@@ -189,35 +186,6 @@ export class SPolygonItem extends SGraphItem {
         return this.pointList
     }
 
-    /**
-     * xyz数据转换为SPoint格式函数;获取外接矩阵参数
-     *
-     * @param arr    外层传入的数据PointList
-     */
-    protected _xyzListToSPointList(arr: SPoint[]): void {
-        if (arr.length) {
-            this.pointList = arr.map(it => {
-                let x = it.x,
-                    y = it.y;
-                if (x < this.minX) {
-                    this.minX = x;
-                }
-                if (y < this.minY) {
-                    this.minY = y;
-                }
-                if (x > this.maxX) {
-                    this.maxX = x;
-                }
-                if (y > this.maxY) {
-                    this.maxY = y;
-                }
-                return new SPoint(x, y);
-            });
-        } else {
-            this.pointList = []
-        }
-    }
-
     ////////////
     //  以下为三种状态下的绘制多边形方法
 
@@ -396,7 +364,7 @@ export class SPolygonItem extends SGraphItem {
      * 执行取消操作执行
      */
     undo(): void {
-        if (this._status == SRelationState.Normal) {
+        if (this._status == SItemStatus.Normal) {
             return
         }
         if (this.undoStack) {
@@ -408,7 +376,7 @@ export class SPolygonItem extends SGraphItem {
      * 执行重做操作执行
      */
     redo(): void {
-        if (this._status == SRelationState.Normal) {
+        if (this._status == SItemStatus.Normal) {
             return
         }
         if (this.undoStack) {
@@ -427,10 +395,12 @@ export class SPolygonItem extends SGraphItem {
      */
     onDoubleClick(event: SMouseEvent): boolean {
         // 如果位show状态 双击改对象则需改为编辑状态
-        if (SRelationState.Normal == this._status) {
-            this._status = SRelationState.Edit;
-        } else if (SRelationState.Edit == this._status) {
-            this._status = SRelationState.Normal;
+        if (SItemStatus.Normal == this._status) {
+            this._status = SItemStatus.Edit;
+            this.grabItem(this);
+        } else if (SItemStatus.Edit == this._status) {
+            this._status = SItemStatus.Normal;
+            this.releaseItem();
             if (this.undoStack) {
                 this.undoStack.clear()
             }
@@ -448,13 +418,15 @@ export class SPolygonItem extends SGraphItem {
      */
 
     onKeyDown(event: KeyboardEvent): boolean {
-        if (this._status == SRelationState.Normal) {
+        if (this._status == SItemStatus.Normal) {
             return false;
-        } else if (this._status == SRelationState.Create) {
+        } else if (this._status == SItemStatus.Create) {
             if (event.code == 'Enter') {
                 // 当顶点大于二个时才又条件执行闭合操作并清空堆栈
                 if (this.pointList.length > 2) {
-                    this._status = SRelationState.Normal;
+                    this._status = SItemStatus.Normal;
+                    //3 传递完成事件状态
+                    this.$emit('finishCreated')
                     //1 grabItem 置为null
                     if (this.scene) {
                         this.scene.grabItem = null;
@@ -463,11 +435,9 @@ export class SPolygonItem extends SGraphItem {
                     if (this.undoStack) {
                         this.undoStack.clear();
                     }
-                    //3 传递完成事件状态
-                    this.$emit('finishItemCreated')
                 }
             }
-        } else if (this._status == SRelationState.Edit) {
+        } else if (this._status == SItemStatus.Edit) {
             if (event.key == 'Alt') {
                 this.isAlt = true;
             }
@@ -483,14 +453,13 @@ export class SPolygonItem extends SGraphItem {
      * @param	event         事件参数
      * @return	boolean
      */
-    onKeyUp(event: KeyboardEvent): boolean {
-        if (this._status == SRelationState.Edit) {
+    onKeyUp(event: KeyboardEvent): void {
+        if (this._status == SItemStatus.Edit) {
             if (event.key == 'Alt') {
                 this.isAlt = false;
             }
         }
         this.update()
-        return true;
     } // Function onKeyUp()
 
     /**
@@ -501,17 +470,20 @@ export class SPolygonItem extends SGraphItem {
      */
     onMouseDown(event: SMouseEvent): boolean {
         // 如果状态为编辑状态则添加点
-        if (this._status == SRelationState.Create) {
+        if (this._status == SItemStatus.Create) {
             // 新增顶点
             this.insertPoint(event.x, event.y);
             // 记录新增顶点操作记录压入堆栈
             let pos = new SPoint(event.x, event.y);
-            this.recordAction(SGraphPointListInsert, [this.pointList, pos])
-        } else if (this._status == SRelationState.Edit) {
+            this.recordAction(SGraphPointListInsert, [this.pointList, pos]);
+            return true;
+        } else if (this._status == SItemStatus.Edit) {
             // 对多边形数组做编辑操作
             this.editPolygonPoint(event);
+            return true;
+        } else {
+            return super.onMouseDown(event)
         }
-        return true;
     } // Function onMouseDown()
 
     /**
@@ -544,12 +516,12 @@ export class SPolygonItem extends SGraphItem {
      */
 
     onMouseMove(event: SMouseEvent): boolean {
-        if (this._status == SRelationState.Create) {
+        if (this._status == SItemStatus.Create) {
             this.lastPoint = new SPoint
             this.lastPoint.x = event.x;
             this.lastPoint.y = event.y;
             this.update()
-        } else if (this._status == SRelationState.Edit) {
+        } else if (this._status == SItemStatus.Edit) {
             if (-1 != this.curIndex) {
                 this.pointList[this.curIndex].x = event.x;
                 this.pointList[this.curIndex].y = event.y;
@@ -569,7 +541,7 @@ export class SPolygonItem extends SGraphItem {
      */
 
     onMouseUp(event: SMouseEvent): boolean {
-        if (this._status == SRelationState.Edit) {
+        if (this._status == SItemStatus.Edit) {
             if (-1 != this.curIndex) {
                 const pos = new SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y)
                 this.recordAction(SGraphPointListUpdate, [this.pointList, this.curPoint, pos, this.curIndex])
@@ -598,12 +570,12 @@ export class SPolygonItem extends SGraphItem {
      */
     cancelOperate(): void {
         // 当状态为展示状态
-        if (this._status == SRelationState.Create) {
+        if (this._status == SItemStatus.Create) {
             // 闭合多边形
             this.parent = null
-        } else if (this._status == SRelationState.Edit) {
+        } else if (this._status == SItemStatus.Edit) {
             // 编辑状态
-            this._status = SRelationState.Normal
+            this._status = SItemStatus.Normal
         }
         this.update()
     } // Function cancelOperate()
@@ -614,6 +586,28 @@ export class SPolygonItem extends SGraphItem {
      * @return SRect
      */
     boundingRect(): SRect {
+        if (this.pointList.length) {
+            this.minX = this.pointList[0].x;
+            this.maxX = this.pointList[0].x;
+            this.minY = this.pointList[0].y;
+            this.maxY = this.pointList[0].y;
+            this.pointList.forEach(it => {
+                let x = it.x,
+                    y = it.y;
+                if (x < this.minX) {
+                    this.minX = x;
+                }
+                if (y < this.minY) {
+                    this.minY = y;
+                }
+                if (x > this.maxX) {
+                    this.maxX = x;
+                }
+                if (y > this.maxY) {
+                    this.maxY = y;
+                }
+            });
+        };
         return new SRect(
             this.minX,
             this.minY,
@@ -623,6 +617,20 @@ export class SPolygonItem extends SGraphItem {
     } // Function boundingRect()
 
     /**
+     * 判断点是否在区域内
+     *
+     * @param x
+     * @param y
+     */
+    contains(x: number, y: number): boolean {
+        let arr = this.pointList;
+        if (arr.length < 3 || !SPolygonUtil.pointIn(x, y, arr)) {
+            return false;
+        }
+        return true;
+    } // Function contains()
+
+    /**
      * Item绘制操作
      *
      * @param   painter       painter对象
@@ -630,10 +638,10 @@ export class SPolygonItem extends SGraphItem {
     onDraw(painter: SPainter): void {
         this.scenceLen = painter.toPx(this.len)
         // 当状态为展示状态
-        if (this._status == SRelationState.Normal) {
+        if (this._status == SItemStatus.Normal) {
             // 闭合多边形
             this.drawShowPolygon(painter, this.pointList);
-        } else if (this._status == SRelationState.Create) {
+        } else if (this._status == SItemStatus.Create) {
             // 创建状态
             this.drawCreatePolygon(painter, this.pointList)
         } else {

+ 23 - 20
src/components/mapClass/editScence.ts

@@ -1,9 +1,11 @@
 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 { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
 import { SGraphItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
 import { SPolygonItem } from "./SPolygonItem";
+import { TipelineItem } from "@/lib/TipelineItem";
+
 
 /**
  * 在线绘图
@@ -40,18 +42,7 @@ export class EditScence extends SGraphScene {
 
     constructor() {
         super();
-        // 选择绑定选额item事件
-        this.selectContainer.connect('listChange', this, this.listChange)
-    }
-
-
-    /**
-     * 监听选择item数据
-     *
-     */
 
-    listChange() {
-        console.log(arguments)
     }
 
     /**
@@ -71,17 +62,15 @@ export class EditScence extends SGraphScene {
      */
     addPolylineItem(event: SMouseEvent): boolean {
         const point = new SPoint(event.x, event.y)
-        const item = new DirectRelationItem(null, [point]);
+        const item = new TipelineItem(null, [point]);
         //设置状态
-        item.status = 3;
+        item.status = SItemStatus.Create;
         this.addItem(item);
+        item.connect("finishCreated", this, this.finishCreated);
         // this.undoStack.push(new SGraphAddCommand(this, item));
         this.grabItem = item;
         this.focusItem = item;
 
-
-    //   const directRelationItem = new DirectRelationItem(null, data);
-    //   this.scene.addItem(directRelationItem);
         return true
     }
 
@@ -91,11 +80,13 @@ export class EditScence extends SGraphScene {
     addPolygonItem(event: SMouseEvent): void {
         //创建item
         const Polylines = new SPolygonItem(null);
+        Polylines.selectable = true;
         //设置状态
-        Polylines.setStatus = 3;
+        Polylines.setStatus = SItemStatus.Create;
         const point = new SPoint(event.x, event.y)
         Polylines.setPointList = [point];
         this.addItem(Polylines);
+        Polylines.connect("finishCreated", this, this.finishCreated);
         this.grabItem = Polylines;
         this.focusItem = Polylines;
     }
@@ -107,6 +98,8 @@ export class EditScence extends SGraphScene {
         const url = require('./../../assets/logo.png')
         const item = new SImageItem(null);
         item.url = url;
+        item.zOrder = 400;
+        item.selectable = true;
         item.moveTo(event.x, event.y);
         this.addItem(item);
         this.grabItem == null;
@@ -120,9 +113,11 @@ export class EditScence extends SGraphScene {
     addTextItem(event: SMouseEvent): void {
         const item = new STextItem(null, '请在右侧属性栏输入文字!');
         item.moveTo(event.x, event.y);
+        item.selectable = true;
         this.addItem(item);
         this.grabItem == null
         this.cmd = 0;
+        item.zOrder = 400;
     }
 
     /**
@@ -178,7 +173,14 @@ export class EditScence extends SGraphScene {
     undo(): void {
         this.undoStack.redo();
     }
-
+    /**
+     * 完成事件创建的回调函数
+     */
+    finishCreated(item:any){
+        this.setCmd = 0;
+        this.focusItem = item;
+        this.selectContainer.toggleItem(item)
+    }
     ////////////////////////
     //  以下为鼠标键盘操作事件
     onMouseDown(event: SMouseEvent): any {
@@ -199,7 +201,8 @@ export class EditScence extends SGraphScene {
                 this.addPolygonItem(event);
                 break;
             case 5:
-                this.addPolylineItem(event);
+                // this.addPolylineItem(event);
+                this.addPolygonItem(event);
                 break;
             default:
                 return super.onMouseDown(event);

+ 1 - 5
src/lib/FloorScene.ts

@@ -16,14 +16,10 @@ export class FloorScene extends SGraphScene {
   // 构造函数
   constructor() {
     super();
-<<<<<<< HEAD
-    this.selectContainer.connect('listChange',this,this.listChange)
-=======
     this.selectContainer.connect('listChange', this, this.listChange)
->>>>>>> master
   }
 
-  // 
+  //
   listChange() {
     console.log(arguments)
   }

+ 7 - 3
src/views/editer.vue

@@ -11,13 +11,13 @@
       </div>
       <!-- 绘制界面 -->
       <div class="baseEdit">
-        <baseEditer ref="graphy" :cmd="cmd" @setCmd="setCmd"></baseEditer>
+        <baseEditer ref="graphy" :cmd="cmd" @setCmd="setCmd" @changeFocusItem="changeFocusItem"></baseEditer>
         <!-- <baseEditertest ref="graphy"></baseEditertest> -->
         <!-- <baseEditerzy ref="graphy"></baseEditerzy> -->
       </div>
       <!-- 右侧工具栏 -->
       <div class="right_toolbar">
-        <rightToolbar></rightToolbar>
+        <rightToolbar :focusItemList="focusItemList"></rightToolbar>
       </div>
     </div>
   </div>
@@ -35,7 +35,8 @@ export default {
   name: "wandaEditer",
   data() {
     return {
-      cmd: 0 //命令操作
+      cmd: 0, //命令操作
+      focusItemList: null
     };
   },
   components: {
@@ -53,6 +54,9 @@ export default {
     },
     setCmd(cmd) {
       this.cmd = cmd;
+    },
+    changeFocusItem(item) {
+      this.focusItemList = item;
     }
   }
 };