YaolongHan 4 年之前
父節點
當前提交
ba053fcd1b
共有 4 個文件被更改,包括 316 次插入12558 次删除
  1. 0 12544
      package-lock.json
  2. 104 14
      src/lib/FloorScene.ts
  3. 175 0
      src/lib/SImgTextItem.ts
  4. 37 0
      src/lib/TipelineItem.ts

File diff suppressed because it is too large
+ 0 - 12544
package-lock.json


+ 104 - 14
src/lib/FloorScene.ts

@@ -1,32 +1,122 @@
 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();
+<<<<<<< HEAD
     this.selectContainer.connect('listChange',this,this.listChange)
+=======
+    this.selectContainer.connect('listChange', this, this.listChange)
+>>>>>>> master
   }
 
-  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) 
+  // }
+}