adm-diagram-front/adm_comp/src/lib/TemplateEditor.ts

import {Template, Container, MainPipe} from './DiagramModel';
import {Point, BackgroundPaniter, ViewTool} from './UIUtils';
import {ContainerRefPoint} from './ContainerRefPoint';
import {Editor, Selection} from './Editor';

/**
 * 模板编辑器
 * @author zhaoyk
 */
export class TemplateEditor extends Editor {

	private util: EditUtil;
	
	templateData: Template;
	
	tmpMainPipe:Array<Array<Point>>;
	currentTmpMainPipe:Array<Point>;
	
	refPoints: any;
	currentRefPoint: any;
	
	protected initCanvasSize(): Point{
		return new Point(2500, 2500);
	}
	
	addListeners(): void {
		this.canvas.addEventListener('click', event=>{this.onClick(event)});
		this.container.addEventListener("mousemove", event=>{this.onMouseMove(event)});
	}
	
	showData(template?: any): void {
		this.templateData = (<Template>template);

		this.selection = new Selection();
		
		this.setState(this.getState());

		this.util = new EditUtil(this);
		this.refPoints = {};
		
		this.redraw();
	}

	setState(state: number): void{
		this.state = state;
		
		if(this.state == 9) 
			this.tmpMainPipe = new Array<Array<Point>>();
		else
			this.tmpMainPipe = null;
		
		this.currentTmpMainPipe = null;	
		this.currentRefPoint = null;
	}
			
	redraw():void {
		this.beforeRedraw();
		
		const root = this.templateData.frame;
		this.util.prepareParent(root);
		if(this.templateData.scatteredContainers)
			this.templateData.scatteredContainers.forEach(con => this.util.prepareParent(con));

		//绘制排列定位容器		
		this.drawContainer(root);
		
		//绘制自由定位容器
		if(this.templateData.scatteredContainers) {
			const p = new Point(root.location.x, root.location.y);
			p.y += root.size.y;
			this.templateData.scatteredContainers.forEach(con => {
				p.y += 20;
				con.location = new Point(p.x, p.y);
				this.drawContainer(con, true);
				p.y += con.size.y;
			});	
		}
		
		//绘制干管
		if(this.templateData.mainPipes) {
			this.templateData.mainPipes.forEach(item => {
				let color = "#5783FA";
				if(item.bindEquipment)
					color = "#000000";
				this.ctx.strokeStyle = color; //#FA943B
				this.ctx.setLineDash([]);
				if(this.getSelComp() == item)
					this.ctx.lineWidth = 2;
				else
					this.ctx.lineWidth = 1;
					
				this.ctx.beginPath();
				for(const arr of item.locationPath){
					var iter = 0;
					for(var p of arr) {
						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();
				this.ctx.closePath();
			});
		}
		
		//干管绘制过程
		if(this.tmpMainPipe) {	
			let color = "#5783FA";
			for(const line of this.tmpMainPipe) {
				var pre: Point = null;
				for(const p of line) {
					this.ctx.beginPath();
					
					//画点
					ViewTool.paintPoint(this.ctx, p, color, true);
					//画线
					if(pre != null) {
						this.ctx.strokeStyle = color;
						this.ctx.lineWidth = 1;
						this.ctx.setLineDash([]);
						
						this.ctx.moveTo(pre.x, pre.y);
						this.ctx.lineTo(p.x, p.y);	
						this.ctx.stroke();
					}					

					this.ctx.closePath();
					
					pre = p;
				}
			}
		}
		//干管绘制的定位参考点
		if(this.currentRefPoint) {
			this.ctx.beginPath();
			ViewTool.paintPoint(this.ctx, this.currentRefPoint.location, "#ff5500", true);
			this.ctx.closePath();
		}
	}
	
	private drawContainer(con:Container, drawLiberty?:boolean) {
		if(!drawLiberty && con.position.absolute)
			return;
		
		const liberty = con.position.absolute;
		const location = !liberty ? this.util.locationOnCanvas(con) : this.util.toCanvas(con.location);
		
		if(!liberty && con.parent != null)
			this.refPoints[con.id] = ContainerRefPoint.getRefPoints(con.id, location, con.size);
				
		const equip = con.equipmentTypes && con.equipmentTypes.length > 0;
		const color = equip ? (!liberty ? "#000000" : "#2a7652") : (!liberty ? "#9b9ea3": "#42B983");
		const dash = equip ? [] : [3, 2];
		
		this.ctx.lineWidth = 1;
		this.ctx.setLineDash(dash);
		this.ctx.strokeStyle = color;
		
		this.ctx.beginPath();
		this.ctx.rect(location.x, location.y, con.size.x, con.size.y);	
		this.ctx.stroke();
		
		if(this.getSelComp() == con) {
			this.ctx.fillStyle = "rgba(0, 127, 255, 0.1)";
			this.ctx.fill();
		}

		if(con.dynGroup && con.parent){
			var mark = "";
			if(con.parent.layout.layout == 1)
				mark = "↓";
			else if(con.parent.layout.layout == 2)
				mark = "→";
			if(mark.length > 0)
				ViewTool.drawText(this.ctx, mark, new Point(location.x, location.y), con.size);	
		}

		if(equip) {
			var info = "";
			
			if(con.name)
				info += con.name + "\n";				
			info += "[ " + con.equipmentTypes + " ]";	
			if(con.dataFilter)
				info += ViewTool.filterToStr(con.dataFilter);
			if(con.equipPack)
				info += "  <打包>";
			ViewTool.drawText(this.ctx, info, new Point(location.x + 10, location.y + 10), con.size);
			
			var layoutInfo = "";
			var offset: Point;
			if(con.layout.layout == 1) {
				layoutInfo = "---\n---\n---";
				offset = new Point(-5, -30);
			} else if(con.layout.layout == 2) {
				layoutInfo = "|   |   |";	
				offset = new Point(-10, -10);
			}
			ViewTool.drawText(this.ctx, layoutInfo, new Point(location.x + (con.size.x / 2) + offset.x , location.y + (con.size.y / 2) + offset.y), new Point(con.size.x / 2, con.size.y / 2));
		}
		
		if(con.children)
			con.children.forEach(item => this.drawContainer(<Container>item));
	}
			
	// private redrawOnScroll(_this) {	
	// 	const top = _this.container.scrollTop;
	// 	const left = _this.container.scrollLeft;
	// 	_this.canvas.style.top = top + 'px';
	// 	_this.canvas.style.left = left + 'px';
		
	// 	_this.draw(_this.mapData);
	// }
	
	private onClick(event): void {
		if(this.state != 9) { //selection
			var sel:any = this.util.findMainPipe(event.layerX, event.layerY);
			if(sel == null)
				sel = this.util.findContainer(event.layerX, event.layerY);
				
			if(sel != this.getSelComp)
				this.setSelComp(sel);
		} else { //paint main pipe
			if(this.currentTmpMainPipe == null) {
				this.currentTmpMainPipe = new Array<Point>();
				this.tmpMainPipe.push(this.currentTmpMainPipe);
			}
			
			const point = new Point(event.layerX, event.layerY);
			this.adjustPointForMp(point);
			this.currentTmpMainPipe.push(point);
			
			this.redraw();
		}
	}
	
	setSelComp(comp: any): void{
		this.selection.setSel(comp);
		this.redraw();
		
		this.editorPart.onSelectionChange();
	}
	
	getSelComp(): any {
		if(!this.selection)
			return null;
		return this.selection.getSel();
	}
	
	buildSelInfo(){
		var info = null;

		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.dataFilter) {
				info += '  |  过滤条件: '
				info += ViewTool.filterToStr(sel.dataFilter);
			}
			if(sel.equipPack)
				info += '  |  <打包>';
			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;
			}
		}
		
		if(info == null)
			info = '~';
		return info;
	}
	
	getState(): number {
		const sel = this.getSelComp();
		if(!sel)
			return 0;
		if(sel.locationPath)
			return 2;
		return 1;
	}
	
	getCompById(id: string): any {
		if(!id)
			return null;
			
		if(this.templateData.mainPipes) {
			for(const mp of this.templateData.mainPipes) {
				if(mp.id == id)
					return mp;
			}
		}
		
		return this.getConById(id);
	}
	
	getConById(id:string): Container {
		return this.findCon(id, this.templateData.frame);
	}

	private findCon(id:string, con: Container): Container {
		if(con.id == id)
			return con;
		for(const sub of con.children) {
			const rtn = this.findCon(id, <Container>sub);
			if(rtn != null)
				return rtn;
		}
		return null;
	}

	//干管绘制时，自动调整横平竖直
	private adjustPointForMp(point: Point) {
		if(this.currentTmpMainPipe && this.currentTmpMainPipe.length > 0) {
			const pre = this.currentTmpMainPipe[this.currentTmpMainPipe.length - 1];
			if(Math.abs(pre.x - point.x) < Math.abs(pre.y - point.y))
				point.x = pre.x;
			else
				point.y = pre.y;
		}
	}
	
	private onMouseMove(event): void {
		if(this.state == 9) {
			const point = new Point(event.layerX, event.layerY);
			this.adjustPointForMp(point);
			
			//显示当前坐标位置
			this.editorPart.dynInfo = ViewTool.pointToStr(point);
			
			//计算定位参考点
			var min: number = Number.MAX_VALUE;
			var nearRp: any;
			for(const cId in this.refPoints) {
				const rps = this.refPoints[cId];
				if(rps && rps.length) {
					for(const rp of rps){
						const p1 = rp.location;
						const distance = Math.sqrt(Math.pow(p1.x - point.x, 2) + Math.pow(p1.y - point.y, 2));
						if(distance < min) {
							min = distance;
							nearRp = rp;
						}
					}
				}
			}
			this.currentRefPoint = nearRp;
			
			this.redraw();
		}
	}

}

class EditUtil {
	
	private editor:TemplateEditor;
	
	private template:Template;

	constructor(editor:TemplateEditor) {
		this.editor = editor;
		this.template = editor.templateData;
	}
	
	prepareParent(con:Container) {
		con.children.forEach(item => {
			item.parent = con;
			this.prepareParent(<Container>item);
		});
	}
	
	locationOnDiagram(con:Container): Point {
		const p:Point = new Point(0, 0);
		var c:Container = con;
		while (c != null){
			p.x += c.location.x;
			p.y += c.location.y;
	
			c = c.parent;
		}
		return p;
	}
	
	locationOnCanvas(con:Container): Point {
		return this.toCanvas(this.locationOnDiagram(con));
	}
	
	toCanvas(point:Point): Point {
		return new Point(point.x + this.editor.margin, point.y + this.editor.margin); 
	}
	
	findContainer(x:number, y:number): Container {
		var rtn = this.findCon(x, y, this.template.frame);
		if(!rtn && this.editor.templateData.scatteredContainers) {
			for(const con of this.editor.templateData.scatteredContainers){
				rtn = this.findCon(x, y, con);
				if(rtn)
					break;
			}
		}
		return rtn;
	}
	
	private findCon(x:number, y:number, target:Container): Container {
		if(this.containsPoint(target, x, y)){
			for(const item of target.children) {
				const c = this.findCon(x, y, <Container>item);
				if(c != null)
					return c;
			}
			return target;
		}
		return null;
	}
	
	containsPoint(con:Container, x:number, y:number):boolean{
		if(con.location){
			const point = con.position.absolute ? this.toCanvas(con.location) : this.locationOnCanvas(con);
			return x >= point.x && y >= point.y && x <= point.x + con.size.x && y <= point.y + con.size.y;	
		}
		return false;
	}
	
	findMainPipe(x:number, y:number): any {
		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;	
					}	
				}
			}
		}
		return null;
	}
		
}