|
@@ -1,4 +1,4 @@
|
|
-import {Diagram, EquipmentNode, Template, Comp, Container, MainPipe, Legend, Anchor, Point4Anchor} from './DiagramModel';
|
|
|
|
|
|
+import {Diagram, EquipmentNode, Line, Comp, Container, MainPipe, Legend, Anchor, Point4Anchor} from './DiagramModel';
|
|
import {Point, BackgroundPaniter, ViewTool} from './UIUtils';
|
|
import {Point, BackgroundPaniter, ViewTool} from './UIUtils';
|
|
import {Editor, Selection} from './Editor';
|
|
import {Editor, Selection} from './Editor';
|
|
|
|
|
|
@@ -19,6 +19,7 @@ export class DiagramEditor extends Editor {
|
|
|
|
|
|
showData(data?: any): void {
|
|
showData(data?: any): void {
|
|
this.diagram = (<Diagram>data);
|
|
this.diagram = (<Diagram>data);
|
|
|
|
+ this.templateData = this.diagram.template;
|
|
|
|
|
|
this.selection = new Selection();
|
|
this.selection = new Selection();
|
|
|
|
|
|
@@ -54,9 +55,7 @@ export class DiagramEditor extends Editor {
|
|
|
|
|
|
if(!this.diagram.template)
|
|
if(!this.diagram.template)
|
|
return;
|
|
return;
|
|
-
|
|
|
|
- this.templateData = this.diagram.template;
|
|
|
|
-
|
|
|
|
|
|
+
|
|
this.libertyCons = new Array<Container>();
|
|
this.libertyCons = new Array<Container>();
|
|
const root = this.templateData.frame;
|
|
const root = this.templateData.frame;
|
|
this.util.prepareParent(root);
|
|
this.util.prepareParent(root);
|
|
@@ -96,7 +95,29 @@ export class DiagramEditor extends Editor {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.ctx.stroke();
|
|
this.ctx.stroke();
|
|
- this.ctx.closePath();
|
|
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //绘制连线
|
|
|
|
+ if(this.diagram.lines) {
|
|
|
|
+ this.diagram.lines.forEach(line => {
|
|
|
|
+ if(line.locationPath) {
|
|
|
|
+ this.ctx.strokeStyle = "#000000";
|
|
|
|
+ this.ctx.setLineDash([]);
|
|
|
|
+ this.ctx.lineWidth = 1;
|
|
|
|
+
|
|
|
|
+ this.ctx.beginPath();
|
|
|
|
+ var iter = 0;
|
|
|
|
+ for(const p of line.locationPath){
|
|
|
|
+ p = this.util.toCanvas(p);
|
|
|
|
+ if(iter == 0)
|
|
|
|
+ this.ctx.moveTo(p.x, p.y);
|
|
|
|
+ else
|
|
|
|
+ this.ctx.lineTo(p.x, p.y);
|
|
|
|
+ iter++;
|
|
|
|
+ }
|
|
|
|
+ this.ctx.stroke();
|
|
|
|
+ }
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -151,6 +172,11 @@ export class DiagramEditor extends Editor {
|
|
this.ctx.beginPath();
|
|
this.ctx.beginPath();
|
|
this.ctx.rect(location.x, location.y, node.size.x, node.size.y);
|
|
this.ctx.rect(location.x, location.y, node.size.x, node.size.y);
|
|
|
|
|
|
|
|
+ if(this.getSelComp() == node) {
|
|
|
|
+ this.ctx.fillStyle = "rgba(0, 127, 255, 0.1)";
|
|
|
|
+ this.ctx.fill();
|
|
|
|
+ }
|
|
|
|
+
|
|
this.ctx.stroke();
|
|
this.ctx.stroke();
|
|
if(node.anchorLocations) {
|
|
if(node.anchorLocations) {
|
|
for(const code in node.anchorLocations) {
|
|
for(const code in node.anchorLocations) {
|
|
@@ -180,7 +206,7 @@ export class DiagramEditor extends Editor {
|
|
var sel:any = this.util.findMainPipe(event.layerX, event.layerY);
|
|
var sel:any = this.util.findMainPipe(event.layerX, event.layerY);
|
|
if(sel == null)
|
|
if(sel == null)
|
|
sel = this.util.findComp(event.layerX, event.layerY);
|
|
sel = this.util.findComp(event.layerX, event.layerY);
|
|
-
|
|
|
|
|
|
+
|
|
if(sel != this.getSelComp)
|
|
if(sel != this.getSelComp)
|
|
this.setSelComp(sel);
|
|
this.setSelComp(sel);
|
|
} else { //paint main pipe
|
|
} else { //paint main pipe
|
|
@@ -215,34 +241,40 @@ export class DiagramEditor extends Editor {
|
|
|
|
|
|
const sel = this.getSelComp();
|
|
const sel = this.getSelComp();
|
|
if(sel != null) {
|
|
if(sel != null) {
|
|
- info = 'id: ' + sel.id;
|
|
|
|
- if(sel.name)
|
|
|
|
- info += ' | 名称: ' + sel.name;
|
|
|
|
- if(sel.layout) {
|
|
|
|
- if(sel.layout.layout == 1)
|
|
|
|
- info += ' | 布局方式: 行式';
|
|
|
|
- else if(sel.layout.layout == 2)
|
|
|
|
- info += ' | 布局方式: 列式';
|
|
|
|
- }
|
|
|
|
- if(sel.equipmentTypes && sel.equipmentTypes.length > 0){
|
|
|
|
- info += ' | 设备类型: ' + sel.equipmentTypes;
|
|
|
|
- }
|
|
|
|
- if(sel.locationPath){
|
|
|
|
- var str = '';
|
|
|
|
- const arr:Array<Array<Point>> = new Array<Array<Point>>();
|
|
|
|
- for(const line of sel.locationPath) {
|
|
|
|
- const ps:Array<Point> = new Array<Point>();
|
|
|
|
- arr.push(ps);
|
|
|
|
-
|
|
|
|
- line.forEach(item => {
|
|
|
|
- ps.push(this.util.toCanvas(item));
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- if(str.length > 0)
|
|
|
|
- str += ", ";
|
|
|
|
- str += ViewTool.pointsToStr(ps);
|
|
|
|
|
|
+ if(sel.compType == "equipmentNode") {
|
|
|
|
+ info = '设备id: ' + sel.dataObject.id;
|
|
|
|
+ info += ' | 设备类型: ' + sel.dataObject.classCode;
|
|
|
|
+ info += ' | 设备名称: ' + sel.dataObject.name;
|
|
|
|
+ } else {
|
|
|
|
+ info = 'id: ' + sel.id;
|
|
|
|
+ if(sel.name)
|
|
|
|
+ info += ' | 名称: ' + sel.name;
|
|
|
|
+ if(sel.layout) {
|
|
|
|
+ if(sel.layout.layout == 1)
|
|
|
|
+ info += ' | 布局方式: 行式';
|
|
|
|
+ else if(sel.layout.layout == 2)
|
|
|
|
+ info += ' | 布局方式: 列式';
|
|
}
|
|
}
|
|
- info += ' | ' + str;
|
|
|
|
|
|
+ if(sel.equipmentTypes && sel.equipmentTypes.length > 0){
|
|
|
|
+ info += ' | 设备类型: ' + sel.equipmentTypes;
|
|
|
|
+ }
|
|
|
|
+ if(sel.locationPath){
|
|
|
|
+ var str = '';
|
|
|
|
+ const arr:Array<Array<Point>> = new Array<Array<Point>>();
|
|
|
|
+ for(const line of sel.locationPath) {
|
|
|
|
+ const ps:Array<Point> = new Array<Point>();
|
|
|
|
+ arr.push(ps);
|
|
|
|
+
|
|
|
|
+ line.forEach(item => {
|
|
|
|
+ ps.push(this.util.toCanvas(item));
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ if(str.length > 0)
|
|
|
|
+ str += ", ";
|
|
|
|
+ str += ViewTool.pointsToStr(ps);
|
|
|
|
+ }
|
|
|
|
+ info += ' | ' + str;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -400,7 +432,11 @@ class EditUtil {
|
|
|
|
|
|
containsPoint(con:Comp, x:number, y:number):boolean{
|
|
containsPoint(con:Comp, x:number, y:number):boolean{
|
|
if(con.location){
|
|
if(con.location){
|
|
- const point = this.locationOnCanvas(con);
|
|
|
|
|
|
+ var point;
|
|
|
|
+ if(con.position && con.position.absolute)
|
|
|
|
+ point = this.toCanvas(con.location)
|
|
|
|
+ else
|
|
|
|
+ point = this.locationOnCanvas(con);
|
|
return x >= point.x && y >= point.y && x <= point.x + con.size.x && y <= point.y + con.size.y;
|
|
return x >= point.x && y >= point.y && x <= point.x + con.size.x && y <= point.y + con.size.y;
|
|
}
|
|
}
|
|
return false;
|
|
return false;
|