|
@@ -18,12 +18,17 @@
|
|
|
* ********************************************************************************************************************
|
|
|
*/
|
|
|
|
|
|
-import { SGraphyScene } from "@saga-web/graphy/lib";
|
|
|
+import { SGraphyItem, SGraphyScene } from "@saga-web/graphy/lib";
|
|
|
import Axios from "axios";
|
|
|
import { Equip } from "./types/Equip";
|
|
|
import { Relation } from "./types/Relation";
|
|
|
import { EquipItem } from "./items/EquipItem";
|
|
|
import { RelationItem } from "./items/RelationItem";
|
|
|
+import { SMouseEvent } from "@saga-web/base/lib";
|
|
|
+import { Anchor } from "./types/Anchor";
|
|
|
+import { SMathUtil } from "./util/SMathUtil";
|
|
|
+import { SPoint } from "@saga-web/draw/lib";
|
|
|
+import { AnchorItem } from "./items/AnchorItem";
|
|
|
|
|
|
/**
|
|
|
* 拓扑图场景
|
|
@@ -35,6 +40,8 @@ export class TopoScene extends SGraphyScene {
|
|
|
EquipList: EquipItem[] = [];
|
|
|
/** 所有关系item */
|
|
|
RelationList: RelationItem[] = [];
|
|
|
+ /** 所有锚点 */
|
|
|
+ AnchorList: AnchorItem[] = [];
|
|
|
/** 设备是否隐藏 */
|
|
|
_isShowEquip: boolean = true;
|
|
|
get isShowEquip(): boolean {
|
|
@@ -71,6 +78,14 @@ export class TopoScene extends SGraphyScene {
|
|
|
);
|
|
|
} // Set isShowEquip
|
|
|
|
|
|
+ /** 添加item状态 */
|
|
|
+ isAdding: boolean = false;
|
|
|
+ /** 划线状态 */
|
|
|
+ isLining: boolean = false;
|
|
|
+
|
|
|
+ /** 当前关系item */
|
|
|
+ relatItem: RelationItem | null = null;
|
|
|
+ /** */
|
|
|
loadData() {} // Function loadData()
|
|
|
|
|
|
/**
|
|
@@ -84,15 +99,42 @@ export class TopoScene extends SGraphyScene {
|
|
|
});
|
|
|
}
|
|
|
} // Function addAllEquip()
|
|
|
+
|
|
|
/**
|
|
|
* 添加设备item
|
|
|
*/
|
|
|
addEquip(equip: Equip): void {
|
|
|
let item = new EquipItem(null, equip);
|
|
|
+ item.moveTo(equip.Pos.X, equip.Pos.Y);
|
|
|
item.visible = this.isShowEquip;
|
|
|
this.EquipList.push(item);
|
|
|
+ if (equip.AnchorList.length) {
|
|
|
+ this.addAllAnchor(item, equip.AnchorList);
|
|
|
+ }
|
|
|
this.addItem(item);
|
|
|
} // Function addEquip()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 添加单个设备item的锚点
|
|
|
+ *
|
|
|
+ */
|
|
|
+ addAllAnchor(parent: SGraphyItem, list: Anchor[]): void {
|
|
|
+ if (list.length) {
|
|
|
+ list.forEach(t => {
|
|
|
+ this.addAnchor(parent, t);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } // Function addAllAnchor()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 添加设备item的锚点
|
|
|
+ */
|
|
|
+ addAnchor(parent: SGraphyItem, anchor: Anchor): void {
|
|
|
+ let item = new AnchorItem(parent, anchor);
|
|
|
+ item.visible = this.isShowEquip;
|
|
|
+ this.AnchorList.push(item);
|
|
|
+ } // Function addAnchor()
|
|
|
+
|
|
|
/**
|
|
|
* 添加所有设备item
|
|
|
*
|
|
@@ -104,6 +146,7 @@ export class TopoScene extends SGraphyScene {
|
|
|
});
|
|
|
}
|
|
|
} // Function addAllRelation()
|
|
|
+
|
|
|
/**
|
|
|
* 添加设备item
|
|
|
*/
|
|
@@ -113,4 +156,156 @@ export class TopoScene extends SGraphyScene {
|
|
|
this.RelationList.push(item);
|
|
|
this.addItem(item);
|
|
|
} // Function addRelation()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 点击事件
|
|
|
+ *
|
|
|
+ */
|
|
|
+ onMouseDown(event: SMouseEvent): boolean {
|
|
|
+ console.log("mousedown");
|
|
|
+ if (this.isAdding) {
|
|
|
+ this.addSelectItem(event);
|
|
|
+ } else if (this.isLining) {
|
|
|
+ let anc = this.clickIsAnchor(event);
|
|
|
+ if (anc) {
|
|
|
+ // 点击的是锚点,直接处理添加到关系item点数据中
|
|
|
+ let ancPoint = anc.mapToScene(anc.X, anc.Y);
|
|
|
+ if (this.relatItem) {
|
|
|
+ console.log("第二次点击锚点");
|
|
|
+ this.relatItem.Anchor2 = anc;
|
|
|
+ if (anc.parent) {
|
|
|
+ anc.parent.connect(
|
|
|
+ "changePos",
|
|
|
+ this.relatItem,
|
|
|
+ this.relatItem.change
|
|
|
+ );
|
|
|
+ }
|
|
|
+ this.relatItem.onMouseDown(event);
|
|
|
+ this.isLining = false;
|
|
|
+ this.relatItem = null;
|
|
|
+ this.grabItem = null;
|
|
|
+ } else {
|
|
|
+ let data = {
|
|
|
+ Anchor1: anc
|
|
|
+ };
|
|
|
+ let item = new RelationItem(null, data);
|
|
|
+ this.addItem(item);
|
|
|
+ if (anc.parent) {
|
|
|
+ anc.parent.connect("changePos", item, item.change);
|
|
|
+ }
|
|
|
+ this.RelationList.push(item);
|
|
|
+ this.relatItem = item;
|
|
|
+ this.grabItem = item;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log("未点击锚点");
|
|
|
+ // 点击的不是锚点,处理点击点与
|
|
|
+ // if (this.grabItem) {
|
|
|
+ // this.grabItem.onMouseDown(event);
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ super.onMouseDown(event);
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ } // Function onClick
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 点击事件
|
|
|
+ *
|
|
|
+ */
|
|
|
+ onMouseMove(event: SMouseEvent): boolean {
|
|
|
+ if (this.isLining && this.relatItem) {
|
|
|
+ this.relatItem.onMouseMove(event);
|
|
|
+ } else {
|
|
|
+ super.onMouseMove(event);
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 根据点击设备创建对应item
|
|
|
+ *
|
|
|
+ * */
|
|
|
+ createItem(data: Equip): void {
|
|
|
+ this.isAdding = true;
|
|
|
+ this.grabItem = new EquipItem(null, data);
|
|
|
+ } // Function createItem()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 根据当前选中的item添加到场景
|
|
|
+ *
|
|
|
+ * @param event 点击事件
|
|
|
+ * @return 是否添加成功
|
|
|
+ * */
|
|
|
+ addSelectItem(event: SMouseEvent): boolean {
|
|
|
+ if (this.grabItem && this.grabItem instanceof EquipItem) {
|
|
|
+ // @ts-ignore
|
|
|
+ this.grabItem.data.Pos = {};
|
|
|
+ // @ts-ignore
|
|
|
+ this.grabItem.data.Pos.X = event.x;
|
|
|
+ // @ts-ignore
|
|
|
+ this.grabItem.data.Pos.Y = event.y;
|
|
|
+ this.grabItem.moveTo(event.x, event.y);
|
|
|
+ this.addItem(this.grabItem);
|
|
|
+ this.EquipList.push(this.grabItem);
|
|
|
+ if (this.grabItem.data && this.grabItem.data.AnchorList.length) {
|
|
|
+ this.addAllAnchor(this.grabItem, this.grabItem.data.AnchorList);
|
|
|
+ }
|
|
|
+ this.isAdding = false;
|
|
|
+ this.grabItem = null;
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ } // Function addSelectItem()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 划线时点击位置是否是锚点
|
|
|
+ *
|
|
|
+ * @param event 事件
|
|
|
+ * @param len 限制距离
|
|
|
+ * @return 点击的锚点
|
|
|
+ * */
|
|
|
+ clickIsAnchor(event: SMouseEvent, len: number = 100): AnchorItem | null {
|
|
|
+ let minAnchor = null;
|
|
|
+ if (this.view) {
|
|
|
+ len = 100 / this.view.scale;
|
|
|
+ }
|
|
|
+ this.AnchorList.forEach(anchor => {
|
|
|
+ if (anchor.data) {
|
|
|
+ let anchorPoint = anchor.mapToScene(anchor.X, anchor.Y);
|
|
|
+ let dis = SMathUtil.pointDistance(
|
|
|
+ event.x,
|
|
|
+ event.y,
|
|
|
+ anchorPoint.x,
|
|
|
+ anchorPoint.y
|
|
|
+ );
|
|
|
+ if (dis < len) {
|
|
|
+ minAnchor = anchor;
|
|
|
+ len = dis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return minAnchor;
|
|
|
+ } // Function clickIsAnchor()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 设备item位置改变时,触发修改relation连线
|
|
|
+ */
|
|
|
+ changeEquipPos(){
|
|
|
+
|
|
|
+ } // Function changeEquipPos()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 根据两点生成折点数据
|
|
|
+ *
|
|
|
+ * @param p1 锚点1
|
|
|
+ * @param p2 锚点2
|
|
|
+ * @return p1到p2折点路径
|
|
|
+ * */
|
|
|
+ pointsToList(p1: Anchor, p2: Anchor): SPoint[] {
|
|
|
+ let arr = [p1];
|
|
|
+ arr.push(p2);
|
|
|
+ return [];
|
|
|
+ }
|
|
|
} // Class TopoScene
|