YaolongHan 4 anni fa
parent
commit
e43507782b
5 ha cambiato i file con 317 aggiunte e 34 eliminazioni
  1. 2 2
      package.json
  2. 2 16
      src/components/baseEditer.vue
  3. 101 16
      src/lib/FloorScene.ts
  4. 175 0
      src/lib/SImgTextItem.ts
  5. 37 0
      src/lib/TipelineItem.ts

+ 2 - 2
package.json

@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@saga-web/base": "2.1.9",
-    "@saga-web/big": "1.0.17",
+    "@saga-web/big": "1.0.24",
     "@saga-web/draw": "2.1.84",
-    "@saga-web/graph": "2.1.66",
+    "@saga-web/graph": "2.1.68",
     "@saga-web/feng-map": "1.0.6",
     "@saga-web/topology": "1.0.84",
     "ant-design-vue": "^1.6.0",

+ 2 - 16
src/components/baseEditer.vue

@@ -45,9 +45,7 @@ export default {
         this.appName,
         null
       );
-      console.log(this.fmap);
       this.fmap.parseData("1001724_29", 6, res => {
-        console.log(res);
         this.fParser = new SFloorParser(null);
         console.log(this.fParser);
         this.fParser.parseData(res);
@@ -61,8 +59,6 @@ export default {
         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();
       });
@@ -82,17 +78,6 @@ export default {
       this.scene.addItem(Polylines);
       this.scene.grabItem = Polylines;
     },
-    // 引入折线
-    // DirectRelationItem() {
-    //   const data = {
-    //     PointList: [
-    //       { X: -138.71000000089407, Y: -17.5 },
-    //       { X: -130.31000000052154, Y: -17.5 }
-    //     ]
-    //   };
-    //   const directRelationItem = new DirectRelationItem(null, data);
-    //   this.scene.addItem(directRelationItem);
-    // },
     clearGraphy() {
       if (this.view) {
         this.view.scene = null;
@@ -128,13 +113,14 @@ export default {
           this.init();
           break;
         case '画线':
-          this.scene.isLining = true;
+          this.scene.CMD = 2;
           break;
         case '画文字':
           this.scene.isTexting = true;
           break;
         case '画图片':
           this.scene.isImging = true;
+          this.scene.CMD = 1;
           break;
         default:
           console.log(name)

+ 101 - 16
src/lib/FloorScene.ts

@@ -1,33 +1,118 @@
 import { SGraphScene } from '@saga-web/graph/lib';
 import { SMouseEvent } from '@saga-web/base/lib';
-import { SPoint } from '@saga-web/draw/lib';
-import { SFloorParser, SImageItem,STextItem,SLineItem,SPolylineItem } from "@saga-web/big";
+import { SPoint, SPainter, SRect, SColor } from '@saga-web/draw/lib';
+import { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem, SAnchorItem, SItemStatus } from "@saga-web/big";
+import { SMathUtil } from '@saga-web/big/lib/utils/SMathUtil';
+import { SImgTextItem } from './SImgTextItem';
+import { TipelineItem } from './TipelineItem';
 
 export class FloorScene extends SGraphScene {
-  isLining: boolean = false;
 
-  constructor(){
+  CMD: number = 0;
+
+  // 图标itemlist
+  imgtextList: SImgTextItem[] = [];
+
+  // 构造函数
+  constructor() {
     super();
-    console.log(999999999)
-    this.selectContainer.connect('listChange',this,this.listChange)
+    this.selectContainer.connect('listChange', this, this.listChange)
   }
 
-  listChange(){
+  // 
+  listChange() {
     console.log(arguments)
   }
 
+  // 创建图标item
+  createSImgText(event: SMouseEvent): SImgTextItem {
+    const item = new SImgTextItem(null);
+    item.moveTo(event.x, event.y);
+    this.addItem(item);
+    this.imgtextList.push(item);
+    this.CMD = 0;
+    // this.grabItem = item;
+    return item;
+  }
+
+  // 创建图标item
+  createSPolyline(event: SMouseEvent, anchor: SAnchorItem | null = null): TipelineItem {
+    const item = new TipelineItem(null, [new SPoint(event.x, event.y)]);
+    this.addItem(item);
+    item.startAnchor = anchor;
+    if (anchor) {
+      anchor.parent?.connect('changePos', item, item.changePos)
+    }
+    this.grabItem = item;
+    return item;
+  }
+
   onMouseDown(event: SMouseEvent): boolean {
-    if (this.isLining) {
-      if (this.grabItem instanceof SPolylineItem) {
+    if (this.CMD == 1) {
+      this.createSImgText(event);
+      return true;
+    } else if (this.CMD == 2) {
+      const anc = this.clickIsAnchor(event);
+      if (anc) {
+        const p = anc.mapToScene(0, 0)
+        anc.isConnected = true;
+        event.x = p.x;
+        event.y = p.y;
+      }
+      if (this.grabItem instanceof TipelineItem) {
+        // 是否点击锚点
+        if (anc){
+          if (this.grabItem.pointList.length) {
+            this.grabItem.endAnchor = anc;
+            anc.parent?.connect('changePos', this.grabItem, this.grabItem.changePos)
+          }
+          this.grabItem.onMouseDown(event);
+          this.grabItem.status = SItemStatus.Edit;
+          this.CMD = 0;
+          return true
+        }
         return super.onMouseDown(event);
-      } else {
-        const item = new SPolylineItem(null, new SPoint(event.x, event.y));
-        this.addItem(item);
-        this.grabItem = item;
-        return true;
       }
-    } else {
-      return super.onMouseDown(event);
+      this.createSPolyline(event, anc);
+      return true;
     }
+    this.CMD = 0
+    return super.onMouseDown(event);
+  }
+
+  /**
+     *  划线时点击位置是否是锚点
+     *
+     *  @param  event   事件
+     *  @param  len     限制距离
+     *  @return 点击的锚点
+     * */
+  clickIsAnchor(event: SMouseEvent): SAnchorItem | null {
+    let minAnchor = null;
+    let len: number = -1;
+    this.imgtextList.forEach(imgtext => {
+      console.log(imgtext.anchorList)
+      imgtext.anchorList.forEach(anchor => {
+        let anchorPoint = anchor.mapToScene(0, 0);
+        let dis = SMathUtil.pointDistance(
+          event.x,
+          event.y,
+          anchorPoint.x,
+          anchorPoint.y
+        );
+        if (len < 0) {
+          len = anchor.sceneDis;
+        }
+        if (dis < len) {
+          minAnchor = anchor;
+          len = dis;
+        }
+      })
+    })
+    return minAnchor;
+  } // Function clickIsAnchor()
+
+  drawScene(painter: SPainter, rect: SRect) {
+    super.drawScene(painter, rect);
   }
 }

+ 175 - 0
src/lib/SImgTextItem.ts

@@ -0,0 +1,175 @@
+import { SItemStatus } from "@saga-web/big/lib/enums/SItemStatus";
+import { SObjectItem, SImageItem, SAnchorItem, STextItem } from '@saga-web/big/lib';
+import { SGraphItem } from '@saga-web/graph/lib/SGraphItem';
+import { STextBaseLine } from '@saga-web/draw/lib/enums/STextBaseLine';
+import { SMouseEvent } from '@saga-web/base/lib/SMouseEvent';
+import { SSize } from '@saga-web/draw/lib/types/SSize';
+import { SPainter } from '@saga-web/draw/lib/SPainter';
+import { SColor } from '@saga-web/draw/lib/SColor';
+import { SRect } from '@saga-web/draw/lib/types/SRect';
+
+/**
+     * 图例item  icon
+     *
+     * */
+export class SImgTextItem extends SObjectItem {
+
+  /** item状态  */
+  _status: SItemStatus = SItemStatus.Normal;
+  get status(): SItemStatus {
+    return this._status;
+  }
+  set status(v: SItemStatus) {
+    this._status = v;
+    this.update();
+  }
+
+  /** 是否显示文字  */
+  _showText: boolean = true;
+  get showText(): boolean {
+    return this._showText;
+  }
+  set showText(v: boolean) {
+    if (v === this._showText) {
+      return
+    }
+    this._showText = v;
+    if (v) {
+      this.textItem.show();
+    } else {
+      this.textItem.hide();
+    }
+  }
+
+  /** X轴坐标 */
+  get x(): number {
+    return this.pos.x;
+  } // Get x
+  set x(v: number) {
+    this.pos.x = v;
+    this.$emit("changePos");
+    this.update();
+  } // Set x
+  /** Y轴坐标 */
+  get y(): number {
+    return this.pos.y;
+  } // Get y
+  set y(v: number) {
+    this.pos.y = v;
+    this.$emit("changePos");
+    this.update();
+  } // Set y
+
+  /** 是否显示锚点  */
+  _showAnchor: boolean = false;
+  get showAnchor(): boolean {
+    return this._showAnchor;
+  }
+  set showAnchor(v: boolean) {
+    this._showAnchor = v;
+    this.anchorList.forEach(t => {
+      t.visible = v;
+    })
+  }
+
+  get text():string{
+    return this.textItem.text;
+  }
+  set text(v:string){
+    this.textItem.text = v;
+    this.update();
+  }
+  
+  /** img Item    */
+  img: SImageItem = new SImageItem(this);
+
+  /** text item   */
+  textItem: STextItem = new STextItem(this);
+
+  /**
+   * 构造体
+   *
+   * */
+  constructor(parent: SGraphItem | null) {
+    super(parent);
+    this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
+    this.img.width = 32;
+    this.img.height = 32;
+    let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
+    this.anchorList = anchorPoint.map(t => {
+      let item = new SAnchorItem(this);
+      item.moveTo(t.x, t.y);
+      return item;
+    });
+    this.update();
+    this.textItem.text = "请填写文本";
+    this.textItem.moveTo(16, -6);
+    this.moveable = true;
+    this.selectable = true;
+    this.isTransform = false
+  }
+
+  /**
+   * 鼠标按下事件
+   *
+   * */
+  onMouseDown(event: SMouseEvent): boolean {
+    console.log(this)
+    if (this.status == SItemStatus.Normal) {
+      return super.onMouseDown(event);
+    } else if (this.status == SItemStatus.Edit) {
+      return super.onMouseDown(event);
+    }
+    return true;
+  } // Function onMouseDown()
+
+  /**
+   * 宽高发发生变化
+   *
+   * @param   oldSize 改之前的大小
+   * @param   newSize 改之后大小
+   * */
+  onResize(oldSize: SSize, newSize: SSize) {
+    console.log(arguments);
+  } // Function onResize()
+
+  /**
+   * 鼠标双击事件
+   *
+   * @param   event   鼠标事件
+   * @return  是否处理事件
+   * */
+  onDoubleClick(event: SMouseEvent): boolean {
+    this.status = SItemStatus.Edit;
+    return true;
+  } // Function onDoubleClick()
+
+  /**
+   * 宽高发生变化
+   *
+   * @return  SRect   所有子对象的并集
+   * */
+  boundingRect(): SRect {
+    let rect: SRect = new SRect();
+    this.children.forEach(t => {
+      if (rect.isNull()) {
+        rect = t.boundingRect().adjusted(t.pos.x, t.pos.y, 0, 0);
+      } else {
+        rect = rect.unioned(t.boundingRect().adjusted(t.pos.x, t.pos.y, 0, 0));
+      }
+    });
+    return rect;
+  } // Function boundingRect()
+
+  /**
+   * Item绘制操作
+   *
+   * @param   painter painter对象
+   */
+  onDraw(painter: SPainter): void {
+    painter.pen.lineWidth = painter.toPx(1);
+    painter.pen.color = new SColor("#00FF00");
+    painter.brush.color = SColor.Transparent;
+    painter.drawRect(this.boundingRect());
+  } // Function onDraw()
+}

+ 37 - 0
src/lib/TipelineItem.ts

@@ -0,0 +1,37 @@
+import { SPolylineItem, SAnchorItem } from '@saga-web/big/lib';
+import { SPainter, SColor } from '@saga-web/draw/lib';
+
+/**
+ * 管道item
+ *
+ * */
+export class TipelineItem extends SPolylineItem {
+  /** 起始锚点  */
+  startAnchor: SAnchorItem | null = null;
+  /** 结束锚点  */
+  endAnchor: SAnchorItem | null = null;
+
+  changePos() {
+    if (this.startAnchor) {
+      // 判断删除equip后,不移动
+      if (this.startAnchor.parent && this.startAnchor.parent.parent) {
+        this.pointList[0] = this.startAnchor.mapToScene(0, 0);
+      }
+    }
+    if (this.endAnchor) {
+      // 删除equip后
+      if (this.endAnchor.parent && this.endAnchor.parent.parent) {
+        this.pointList[
+          this.pointList.length - 1
+        ] = this.endAnchor.mapToScene(0, 0);
+      }
+    }
+  }
+
+  // onDraw(painter:SPainter){
+  //   if (this.startAnchor) {
+
+  //   }
+  //   if (this.endAnchor) 
+  // }
+}