|
@@ -17,6 +17,8 @@ export class DiagramEditor extends Editor {
|
|
|
tmpMainPipe:Array<Array<Point>>;
|
|
|
currentTmpMainPipe:Array<Point>;
|
|
|
|
|
|
+ showContainer = true;
|
|
|
+
|
|
|
showData(data?: any): void {
|
|
|
this.diagram = (<Diagram>data);
|
|
|
this.templateData = this.diagram.template;
|
|
@@ -79,8 +81,10 @@ export class DiagramEditor extends Editor {
|
|
|
this.ctx.strokeStyle = "#000000";
|
|
|
this.ctx.setLineDash([]);
|
|
|
this.ctx.lineWidth = 2;
|
|
|
- if(this.getSelComp() == item)
|
|
|
+ if(this.getSelComp() == item){
|
|
|
this.ctx.strokeStyle = "#5783FA";
|
|
|
+ this.ctx.lineWidth = 3;
|
|
|
+ }
|
|
|
|
|
|
this.ctx.beginPath();
|
|
|
for(const arr of item.locationPath){
|
|
@@ -105,7 +109,18 @@ export class DiagramEditor extends Editor {
|
|
|
this.ctx.strokeStyle = "#000000";
|
|
|
this.ctx.setLineDash([]);
|
|
|
this.ctx.lineWidth = 1;
|
|
|
-
|
|
|
+ if(this.getSelComp() == line) {
|
|
|
+ this.ctx.strokeStyle = "#5783FA";
|
|
|
+ this.ctx.lineWidth = 2;
|
|
|
+ }else if(line.flag == 'duplicate') {
|
|
|
+ if(this.showContainer) {
|
|
|
+ this.ctx.setLineDash([3, 2]);
|
|
|
+ this.ctx.strokeStyle = "#ffaa7f";
|
|
|
+ }else{
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
this.ctx.beginPath();
|
|
|
var iter = 0;
|
|
|
for(var p of line.locationPath){
|
|
@@ -135,7 +150,7 @@ export class DiagramEditor extends Editor {
|
|
|
var color = !liberty ? "#9b9ea3": "#42B983";
|
|
|
var dash = [3, 2];
|
|
|
|
|
|
- if(equip) {
|
|
|
+ if(equip && this.showContainer) {
|
|
|
this.ctx.lineWidth = 1;
|
|
|
this.ctx.setLineDash(dash);
|
|
|
this.ctx.strokeStyle = color;
|
|
@@ -205,6 +220,8 @@ export class DiagramEditor extends Editor {
|
|
|
if(this.state != 9) { //selection
|
|
|
var sel:any = this.util.findMainPipe(event.layerX, event.layerY);
|
|
|
if(sel == null)
|
|
|
+ sel = this.util.findLine(event.layerX, event.layerY);
|
|
|
+ if(sel == null)
|
|
|
sel = this.util.findComp(event.layerX, event.layerY);
|
|
|
|
|
|
if(sel != this.getSelComp)
|
|
@@ -242,9 +259,18 @@ export class DiagramEditor extends Editor {
|
|
|
const sel = this.getSelComp();
|
|
|
if(sel != null) {
|
|
|
if(sel.compType == "equipmentNode") {
|
|
|
- info = '设备id: ' + sel.dataObject.id;
|
|
|
+ info = '设备id: ' + sel.objId;
|
|
|
info += ' | 设备类型: ' + sel.dataObject.classCode;
|
|
|
info += ' | 设备名称: ' + sel.dataObject.name;
|
|
|
+ } else if(sel.compType == "mainPipe") {
|
|
|
+ info = '<干管 ' + sel.name + '> 设备id: ' + sel.dataObjectId;
|
|
|
+ if(sel.dataObject) {
|
|
|
+ info += ' | 设备类型: ' + sel.dataObject.classCode;
|
|
|
+ info += ' | 设备名称: ' + sel.dataObject.name;
|
|
|
+ }
|
|
|
+ } else if(sel.compType == "line") {
|
|
|
+ info = '<连线> 关系id: ' + sel.dataObjectId;
|
|
|
+ info += ' | 关系类型: ' + sel.relType;
|
|
|
} else {
|
|
|
info = 'id: ' + sel.id;
|
|
|
if(sel.name)
|
|
@@ -354,8 +380,11 @@ class EditUtil {
|
|
|
|
|
|
private template:Template;
|
|
|
|
|
|
+ private diagram:Diagram;
|
|
|
+
|
|
|
constructor(editor:DiagramEditor) {
|
|
|
this.editor = editor;
|
|
|
+ this.diagram = editor.diagram;
|
|
|
this.template = editor.templateData;
|
|
|
}
|
|
|
|
|
@@ -446,35 +475,49 @@ class EditUtil {
|
|
|
if(this.template.mainPipes) {
|
|
|
for(const mp of this.template.mainPipes){
|
|
|
for(const line of mp.locationPath) {
|
|
|
- var pre: Point = null;
|
|
|
- for(var point of line) {
|
|
|
- point = this.toCanvas(point);
|
|
|
- if(pre != null) {
|
|
|
- var x1:number;
|
|
|
- var y1:number;
|
|
|
- var x2:number;
|
|
|
- var y2:number;
|
|
|
- const scope = 3;
|
|
|
- if(pre.y == point.y) { //水平
|
|
|
- y1 = pre.y - scope;
|
|
|
- y2 = pre.y + scope;
|
|
|
- x1 = Math.min(pre.x, point.x);
|
|
|
- x2 = Math.max(pre.x, point.x);
|
|
|
- } else { //垂直
|
|
|
- x1 = pre.x - scope;
|
|
|
- x2 = pre.x + scope;
|
|
|
- y1 = Math.min(pre.y, point.y);
|
|
|
- y2 = Math.max(pre.y, point.y);
|
|
|
- }
|
|
|
- if(x >= x1 && y >= y1 && x <= x2 && y <= y2)
|
|
|
- return mp;
|
|
|
- }
|
|
|
- pre = point;
|
|
|
- }
|
|
|
+ if(this.onPath(x, y, line))
|
|
|
+ return mp;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
return null;
|
|
|
}
|
|
|
+
|
|
|
+ findLine(x:number, y:number){
|
|
|
+ for(const line of this.diagram.lines) {
|
|
|
+ if(this.onPath(x, y, line.locationPath))
|
|
|
+ return line;
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+
|
|
|
+ private onPath(x:number, y:number, path: Array<Point>): boolean {
|
|
|
+ var pre: Point = null;
|
|
|
+ for(var point of path) {
|
|
|
+ point = this.toCanvas(point);
|
|
|
+ if(pre != null) {
|
|
|
+ var x1:number;
|
|
|
+ var y1:number;
|
|
|
+ var x2:number;
|
|
|
+ var y2:number;
|
|
|
+ const scope = 3;
|
|
|
+ if(pre.y == point.y) { //水平
|
|
|
+ y1 = pre.y - scope;
|
|
|
+ y2 = pre.y + scope;
|
|
|
+ x1 = Math.min(pre.x, point.x);
|
|
|
+ x2 = Math.max(pre.x, point.x);
|
|
|
+ } else { //垂直
|
|
|
+ x1 = pre.x - scope;
|
|
|
+ x2 = pre.x + scope;
|
|
|
+ y1 = Math.min(pre.y, point.y);
|
|
|
+ y2 = Math.max(pre.y, point.y);
|
|
|
+ }
|
|
|
+ if(x >= x1 && y >= y1 && x <= x2 && y <= y2)
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ pre = point;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
|
|
|
}
|