123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- import { SGraphItem, SLineStyle, STextOrigin } from '@saga-web/graph/lib';
- import { Legend } from '../types/Legend';
- import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw';
- import { STextItem } from '@saga-web/graph/lib';
- import { hexify } from '@/components/mapClass/until';
- import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
- import { SMouseEvent } from '@saga-web/base/lib';
- /**
- * 图例节点Item(区域类型 --防火分区)
- *
- * * @author 张宇(taohuzy@163.com)
- */
- export class SFHFQZoneLegendItem extends SPolygonItem {
- /** 图例节点对象数据 */
- data: Legend;
- /** text item */
- textItem: STextItem = new STextItem(this);
- get text(): string {
- return this.textItem.text;
- }
- set text(v: string) {
- this.textItem.text = v;
- this.update();
- }
- get color(): SColor {
- return this.textItem.color;
- }
- set color(v: SColor) {
- this.textItem.color = v;
- }
- get font(): SFont {
- return this.textItem.font
- }
- set font(v: SFont) {
- this.textItem.font = v
- }
- get status(): SItemStatus {
- return this._status;
- }
- // 编辑当前状态
- set status(value: SItemStatus) {
- this._status = value;
- // 如果状态为show则需清栈
- if (value == SItemStatus.Normal) {
- // 切换显示状态显示文本
- this.showText = true;
- // 切换显示状态不可移动文本
- this.textItem.moveable = false;
- if (this.undoStack) {
- this.undoStack.clear();
- }
- } else if (value == SItemStatus.Edit) {
- // 切换编辑状态显示文本
- this.showText = true;
- // 切换编辑状态可移动文本
- this.textItem.moveable = true;
- } else if (value == SItemStatus.Create) {
- // 切换创建状态不显示文本
- this.showText = false;
- // 切换创建状态不可移动文本
- this.textItem.moveable = false;
- }
- this.update();
- };
- /** 是否激活 */
- _isActive: boolean = false;
- get isActive(): boolean {
- return this._isActive;
- } // Get isActive
- set isActive(v: boolean) {
- this._isActive = v;
- if (v) {
- this.cursor = "pointer";
- this.textItem.cursor = "pointer";
- } else {
- this.cursor = "auto";
- this.textItem.cursor = "auto";
- }
- this.update();
- } // Set isActive
- /** 是否显示文字 */
- _showText: boolean = true;
- get showText(): boolean {
- return this._showText;
- }
- set showText(v: boolean) {
- if (v === this._showText) {
- return
- }
- this._showText = v;
- if (v) {
- this.textItem.show();
- } else {
- this.textItem.hide();
- }
- }
- /** 是否蒙版遮罩 */
- _maskFlag: boolean = false;
- get maskFlag(): boolean {
- return this._maskFlag;
- }
- set maskFlag(v: boolean) {
- if (v === this._maskFlag) {
- return
- }
- this._maskFlag = v;
- this.update()
- }
- /**
- * 构造函数
- *
- * @param parent 指向父对象
- * @param data 图例节点对象数据
- */
- constructor(parent: SGraphItem | null, data: Legend) {
- super(parent);
- this.textItem.originPosition = STextOrigin.Centrum;
- this.textItem.isTransform = false;
- this.zOrder = ItemOrder.polygonOrder - 0.00005;
- this.data = data;
- this.id = data.ID;
- this.name = data.Name;
- this.text = data.Name;
- if (data) {
- this.setPointList = [];
- let setPointList: SPoint[];
- if (data.OutLine) {
- if (data.OutLine[0] instanceof SPoint) {
- this.setPointList = data.OutLine;
- } else {
- setPointList = data.OutLine.map(i => {
- return (new SPoint(i.X, i.Y))
- })
- this.setPointList = setPointList;
- }
- }
- if (data.Properties.Zorder) {
- this.zOrder = data.Properties.Zorder;
- }
- // 设置线宽
- if (data.Properties.LineWidth) {
- this.lineWidth = data.Properties.LineWidth;
- }
- if (data.Properties.StrokeColor) {
- this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
- }
- if (data.Properties.FillColor) {
- this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor));
- }
- if (data.Properties.TextPos) {
- this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
- }
- if (data.Properties.color) {
- this.color = new SColor(data.Properties.color);
- }
- if (data.Properties.font) {
- this.font = new SFont("sans-serif", data.Properties.font);
- }
- if (data.Properties && data.Properties.IsActive) {
- this.isActive = data.Properties.IsActive;
- }
- if (data.AttachObjectIds && data.AttachObjectIds.length) {
- this.isActive = true;
- }
- switch (data.Properties.LineDash) {
- case "solid":
- this.lineStyle = SLineStyle.Solid;
- break;
- case "dotted":
- this.lineStyle = SLineStyle.Dotted;
- break;
- case "dashed":
- this.lineStyle = SLineStyle.Dashed;
- break;
- default:
- this.lineStyle = SLineStyle.Solid;
- }
- }
- // 监听多边形创建完成事件,并动态计算文本位置
- this.connect("finishCreated", this, () => {
- // 计算文本位置
- let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
- return pre + (cur.x / arr.length)
- }, 0),
- y: number = this.getPointList.reduce((pre, cur, index, arr) => {
- return pre + (cur.y / arr.length)
- }, 0);
- this.textItem.moveTo(x, y);
- })
- }
- /**
- * 鼠标按下事件
- *
- * @param event 保存事件参数
- * @return boolean
- */
- onMouseDown(event: SMouseEvent): boolean {
- if (event.buttons == 1)
- this.$emit("legendItemClick", event);
- super.onMouseDown(event);
- return true;
- } // Function onMouseDown()
- toData(): any {
- this.data.Pos = { X: this.x, Y: this.y };
- this.data.Name = this.name;
- this.data.Properties.Zorder = this.zOrder;
- this.data.Properties.FillColor = this.fillColor.value;
- this.data.Properties.StrokeColor = this.strokeColor.value;
- this.data.Properties.LineWidth = this.lineWidth;
- switch (this.lineStyle) {
- case SLineStyle.Solid:
- this.data.Properties.LineDash = "solid";
- break;
- case SLineStyle.Dotted:
- this.data.Properties.LineDash = "dotted";
- break;
- case SLineStyle.Dashed:
- this.data.Properties.LineDash = "dashed";
- break;
- default:
- this.data.Properties.LineDash = "solid";
- }
- this.data.OutLine = this.getPointList.map(pos => {
- return {
- X: pos.x,
- Y: pos.y
- }
- });
- this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
- this.data.Properties.font = this.font.size;
- this.data.Properties.color = this.color.value;
- this.data.Properties.IsActive = this.isActive;
- return this.data;
- }
- onDraw(painter: SPainter) {
- if (this.maskFlag && this.status == SItemStatus.Normal) {
- let color = new SColor(this.strokeColor)
- color.alpha = color.alpha / 5
- let brushcolor = new SColor(this.fillColor)
- brushcolor.alpha = brushcolor.alpha / 5
- painter.pen.color = color
- painter.pen.lineCapStyle = SLineCapStyle.Square
- painter.pen.lineWidth = painter.toPx(this.lineWidth)
- painter.brush.color = brushcolor
- if (this.selected) {
- painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
- painter.shadow.shadowBlur = 10;
- painter.shadow.shadowColor = new SColor(`#00000033`);
- painter.shadow.shadowOffsetX = 5;
- painter.shadow.shadowOffsetY = 5;
- }
- // @ts-ignore
- painter.drawPolygon([...this.pointList]);
- } else {
- super.onDraw(painter);
- }
- }
- } // Class SFHFQZoneLegendItem
|