adm-diagram-front/adm_comp/src/common/Map0.ts

export class Map {
		
	private mapData: any;
	private container: any;
	private div: any;
	private canvas: HTMLCanvasElement | undefined;
	private ctx: CanvasRenderingContext2D | undefined;
	private initialised = false;
	private unit = 10;
	private xCount = 0;
	private yCount = 0;
	
	private margin = 20;
	private xMax: number = Number.MIN_VALUE;
	private xMin: number = Number.MAX_VALUE;
	private yMax: number = Number.MIN_VALUE;
	private yMin: number = Number.MAX_VALUE;
	private scale: number;
	
	constructor(container: any) {
		this.container = container;
	}
	
	show(data?: any): void {
		this.mapData = data;
		
		this.initPanel(data);
		this.draw(data);
	}
	
	private initPanel(data: any): void{
		const walls = data.EntityList[0].Elements.Walls;
		const cols = data.EntityList[0].Elements.Columns;
		const doors = data.EntityList[0].Elements.Doors;
		
		for(const w of walls){
			if(w.OutLine.length > 0){
				this.findEdge(w.OutLine);
			} else {
				for(const p of w.Location.Points){
					this.xMax = Math.max(p.X, this.xMax);
					this.xMin = Math.min(p.X, this.xMin);
					this.yMax = Math.max(p.Y, this.yMax);
					this.yMin = Math.min(p.Y, this.yMin);
				}	
			}
		}
		for(const c of cols){
			this.findEdge(c.OutLine);
		}
		for(const d of doors){
			this.findEdge(d.OutLine);
		}
				
		for(const w of walls){
			if(w.OutLine.length > 0){
				this.moveToOrigin(w.OutLine);
			}
			for(const p of w.Location.Points){
				p.X -= this.xMin;
				p.Y -= this.yMin;
			}	
		}
		for(const c of cols){
			this.moveToOrigin(c.OutLine);
		}
		for(const d of doors){
			this.moveToOrigin(d.OutLine);
		}
		this.xMax -= this.xMin;
		this.xMin = 0;
		this.yMax -= this.yMin;
		this.yMin = 0;
		
		this.scale = 10;
		
		const w = this.container.clientWidth;
		const h = this.container.clientHeight;
		
		this.div = document.createElement('div');
		this.div.style.width = (this.trans(this.xMax, this.margin) + this.margin) + 'px';
		this.div.style.height = (this.trans(this.yMax, this.margin) + this.margin) + 'px';
		this.container.appendChild(this.div);
		
		// this.scale = 5;
		// const w = 5000;
		// const h = 5000;
		
		const canvas = document.createElement('canvas');		
		var ratio = 1; //window.devicePixelRatio || 1;
		canvas.width = w * ratio; // 实际渲染像素
		canvas.height = h * ratio; // 实际渲染像素
		canvas.style.width = w + 'px'; // 控制显示大小
		canvas.style.height = h + 'px'; // 控制显示大小
		canvas.style.pointerEvents = 'none';
		canvas.style.position = 'relative';
								
		this.div.appendChild(canvas);
		this.canvas = canvas;
		
		this.container.addEventListener("scroll", ()=>{this.redrawOnScroll(this)});
				
		const ctx = canvas.getContext('2d');
		// ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
		if (ctx) {
			ctx.translate(0.5, 0.5);
			this.ctx = ctx;
		} else {
			throw new Error('Canvas 2D context not found, please check it is running in Browser environment.');
		}

		this.paintBg();
		
		this.initialised = true;
	}
	
	private paintBg(){
		for(var x = this.unit; x < this.canvas.width; x += this.unit){
			this.xCount++;

			if(this.xCount % 5 == 0)
				this.ctx.strokeStyle = "#f1f1f1";
			else
				this.ctx.strokeStyle = "#f7f7f7";
								
			this.ctx.beginPath();
			this.ctx.moveTo(x, 0);
			this.ctx.lineTo(x, this.canvas.height);
			this.ctx.stroke();
		}
		for(var y = this.unit; y < this.canvas.height; y += this.unit){
			this.yCount++;
			
			if(this.yCount % 5 == 0)
				this.ctx.strokeStyle = "#f4f4f4";
			else
				this.ctx.strokeStyle = "#fafafa";
				
			this.ctx.beginPath();
			this.ctx.moveTo(0, y);
			this.ctx.lineTo(this.canvas.width, y);
			this.ctx.stroke();
		}		
	}
	
	private redrawOnScroll(_this) {
		_this.ctx.clearRect(-1, -1, _this.canvas.width + 1, _this.canvas.height + 1);  
				
		const top = _this.container.scrollTop;
		const left = _this.container.scrollLeft;
		_this.canvas.style.top = top + 'px';
		_this.canvas.style.left = left + 'px';
		
		_this.paintBg();
		_this.draw(_this.mapData);
	}
	
	private findEdge(outlines: any): void{
		for(const o of outlines){
			for(const p of o){
				this.xMax = Math.max(p.X, this.xMax);
				this.xMin = Math.min(p.X, this.xMin);
				this.yMax = Math.max(p.Y, this.yMax);
				this.yMin = Math.min(p.Y, this.yMin);
			}	
		}
	}
	
	private moveToOrigin(outlines: any): void{
		for(const o of outlines){
			for(const p of o){
				p.X -= this.xMin;
				p.Y -= this.yMin;
			}	
		}
	}
	
	private paintOutlines(outlines: any): void{
		for(const o of outlines){
			var pre = null;
			for(const p of o){
				if(pre)
					this.drawLine(pre, p);
				pre = p;
			}	
		}
	}
		
	private draw(data: any):void {
		const walls = data.EntityList[0].Elements.Walls;		
		for(const w of walls){
			if(w.OutLine.length > 0){
				this.ctx.strokeStyle = "#cccccc";
				this.ctx.beginPath();
				
				this.paintOutlines(w.OutLine);
				
				this.ctx.stroke();	
				
				// var p = w.OutLine[0][0];
				// this.drawText(w.Id, p);
			} 
			/* else */ 
			{
				this.ctx.strokeStyle = "#78e28d";
				this.ctx.beginPath();
				
				var pre = null;
				for(const p of w.Location.Points){
					if(pre)
						this.drawLine(pre, p);
					pre = p;						
				}
				
				this.ctx.stroke();	
			}
		}
		
		this.ctx.strokeStyle = "#000000";
		const cols = data.EntityList[0].Elements.Columns;
		for(const c of cols){
			if(!c.RoomBoundary)
				continue;
			this.ctx.beginPath();
			this.paintOutlines(c.OutLine);
			this.ctx.stroke();
		}
		
		this.ctx.strokeStyle = "#b65b00";
		const doors = data.EntityList[0].Elements.Doors;
		for(const d of doors){
			this.ctx.beginPath();
			this.paintOutlines(d.OutLine);
			this.ctx.stroke();
		}
	}
	
	private drawLine(p1: any, p2: any) {			
		this.ctx.moveTo(this.transX(p1.X), this.transY(p1.Y));
		this.ctx.lineTo(this.transX(p2.X), this.transY(p2.Y));
	}
	
	private trans(x: number, offset: number): number {
		return Math.round(x/this.scale + offset);
	}
	
	private transX(x: number): number {
		return Math.round(x/this.scale + this.margin - this.container.scrollLeft);
	}
	
	private transY(y: number): number {
		return Math.round(y/this.scale + this.margin - this.container.scrollTop);
	}
	
	private drawText(text: string, point: any):void{
		const fontSize = 10;
		this.ctx.font = "lighter " + fontSize + "px Microsoft YaHei";
		this.ctx.textBaseline = "bottom";
		this.ctx.strokeStyle = "#000000";
		
		this.ctx.strokeText(text, this.transX(point.X), this.transY(point.Y));
	}

}