import { SGraphyItem, SMouseEvent } from '@sybotan-web/graphy' import { SRect, SSize, SPoint } from "@sybotan-web/base"; import { SPen, SPainter, SColor, SFont } from "@sybotan-web/draw"; import { dataItemPath, dataItem, dataSpaceItem, dataInterface, PolygonItemInterface } from './../dataType' //传入参数的参数接口类型 /** * 不规则多边形Item类 * */ export class SGraphyPolygonItem extends SGraphyItem { pointArr: SPoint[]; fillColor: SColor =new SColor('#F2F6FC'); color: SColor = SColor.Black; width: number =0; businessId: string | null; id: string | null; centerOfGravityPoint: { x: number, y: number }; businessName: null | string | undefined; //业务空间名字 initName: null | string | undefined; //空间名字 isBusiness: number = 1; cacheColor:SColor= SColor.Black //需要缓存的边框 cacheFillColor:SColor = new SColor('#F2F6FC'); //需要缓存的填充色 cacheWidth:number = 0; // actived: boolean = false; //是否激活 /** * 构造函数 * * @param pointArr 点坐标list * @param width 边框的宽度 * @param color 边框的颜色 * @param fillColor 多边形填充的颜色 * @param businessId 空间id * @param businessName 空间名称 * @param centerOfGravityPoint 中心点 * @param isBusiness 状态 * @param parent */ constructor(PolygonItemData: PolygonItemInterface) { super(PolygonItemData.parent); // 修改绘制路径格式 let newSpacePaths: SPoint[] = PolygonItemData.space.Paths[0].map(item => { return new SPoint(item.X, -item.Y) }); this.pointArr = newSpacePaths; // // 填充色 PolygonItemData.fillColor ? this.fillColor = PolygonItemData.fillColor : this.fillColor = new SColor('#F2F6FC'); // 边框色 PolygonItemData.color ? this.color = PolygonItemData.color : this.color = SColor.Black; //边框宽度 PolygonItemData.width ? this.width = PolygonItemData.width : this.width = 0; //中心点 this.centerOfGravityPoint = { x: PolygonItemData.space.LocationPoint.X, y: PolygonItemData.space.LocationPoint.Y }; //业务空间类型 PolygonItemData.isBusiness ? this.isBusiness = PolygonItemData.isBusiness : this.isBusiness = 1; //业务空间id PolygonItemData.businessId ? this.businessId = PolygonItemData.businessId : this.businessId = null; //业务空间名称 this.businessName = PolygonItemData.space.Name; this.initName = PolygonItemData.space.Name; // 空间id this.id = PolygonItemData.space.id; } /** * Item对象边界区域 * * @return SRect */ boundingRect(): SRect { let minX = this.pointArr[0].x; let maxX = minX; let minY = this.pointArr[0].y; let maxY = minY; for (let i = 1; i < this.pointArr.length; i++) { if (this.pointArr[i].x < minX) { minX = this.pointArr[i].x } if (this.pointArr[i].y < minY) { minY = this.pointArr[i].y } if (this.pointArr[i].x > maxX) { maxX = this.pointArr[i].x } if (this.pointArr[i].y > maxY) { maxY = this.pointArr[i].y } } return new SRect( minX, minY, maxX - minX, maxY - minY ); } // Function boundingRect() /** * 判断点是否在区域内 * * @param x * @param y */ contains(x: number, y: number): boolean { let nCross = 0, point = [x, y], APoints = this.pointArr, length = APoints.length, p1, p2, i, xinters; p1 = APoints[0]; for (i = 1; i <= length; i++) { p2 = APoints[i % length]; if ( point[0] > Math.min(p1.x, p2.x) && point[0] <= Math.max(p1.x, p2.x) ) { if (point[1] <= Math.max(p1.y, p2.y)) { if (p1.x != p2.x) { //计算位置信息 xinters = (point[0] - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y; if (p1.y == p2.y || point[1] <= xinters) { nCross++ } } } } p1 = p2; } return nCross % 2 === 1 } /** * Item绘制操作 * * @param painter painter对象 * @param rect 绘制区域 */ onDraw(painter: SPainter, rect?: SRect): void { if (this.pointArr.length) { painter.pen.color = this.color; painter.brush.color = this.fillColor; painter.pen.lineWidth = this.width; painter.drawPolygon(this.pointArr) let text = '' if (this.businessName || this.businessId) { text = '👇 ' + this.businessName } else { text = '⬇️ ' + this.initName } painter.font.size = this.scale*200; painter.brush.color = SColor.Black; painter.drawText(text,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y) } } onClick(event: SMouseEvent): boolean { this.$emit('click', { item: this, event: event }); return true; } // Function onClick() /** * 鼠标双击事件 * * @param event 保存事件参数 * @return boolean */ onDoubleClick(event: SMouseEvent): boolean { this.$emit('doubleClick', { item: this, event: event }); return true; } /** * 鼠标按下事件 * * @param event 保存事件参数 * @return boolean */ onMouseDown(event: SMouseEvent): boolean { this.$emit('mouseDown', { item: this, event: event }); return true; } // Function onMouseDown() /** * 鼠标移动事件 * * @param event 保存事件参数 * @return boolean */ onMouseMove(event: SMouseEvent): boolean { this.$emit('mouseMove', { item: this, event: event }); return true; } // Function onMouseMove() /** * 释放鼠标事件 * * @param event 保存事件参数 * @return boolean */ onMouseUp(event: SMouseEvent): boolean { this.$emit('mouseUp', { item: this, event: event }); return true; } } // Class SGraphyPolygonItem