Browse Source

系统图连线绘制

zhaoyk 3 năm trước cách đây
mục cha
commit
6de18e343a
2 tập tin đã thay đổi với 78 bổ sung34 xóa
  1. 70 34
      adm_comp/src/lib/DiagramEditor.ts
  2. 8 0
      adm_comp/src/lib/DiagramModel.ts

+ 70 - 34
adm_comp/src/lib/DiagramEditor.ts

@@ -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 {Editor, Selection} from './Editor';
 
@@ -19,6 +19,7 @@ export class DiagramEditor extends Editor {
 	
 	showData(data?: any): void {
 		this.diagram = (<Diagram>data);
+		this.templateData = this.diagram.template;
 
 		this.selection = new Selection();
 		
@@ -54,9 +55,7 @@ export class DiagramEditor extends Editor {
 		
 		if(!this.diagram.template)
 			return;
-		
-		this.templateData = this.diagram.template;
-		
+				
 		this.libertyCons = new Array<Container>();
 		const root = this.templateData.frame;
 		this.util.prepareParent(root);
@@ -96,7 +95,29 @@ export class DiagramEditor extends Editor {
 					}	
 				}
 				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.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();
 		if(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);
 			if(sel == null)
 				sel = this.util.findComp(event.layerX, event.layerY);
-				
+			
 			if(sel != this.getSelComp)
 				this.setSelComp(sel);
 		} else { //paint main pipe
@@ -215,34 +241,40 @@ export class DiagramEditor extends Editor {
 
 		const sel = this.getSelComp();
 		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{
 		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 false;

+ 8 - 0
adm_comp/src/lib/DiagramModel.ts

@@ -250,6 +250,8 @@ export class Diagram {
 	
 	nodes: Array<DiagramNode>;
 	
+	lines: Array<Line>;
+	
 	template: Template;
 	
 }
@@ -284,4 +286,10 @@ export class Label extends Comp {
 	
 	content: string;
 	
+}
+
+export class Line {
+	
+	locationPath: Array<Point>;
+	
 }