import { SObjectItem, SImageItem, STextItem, SAnchorItem, SGraphItem } from "@saga-web/graph/lib"; import { SItemStatus, ItemOrder } from ".."; import { SMouseEvent } from "@saga-web/base"; import { SSize, SRect, SPainter, SColor, SFont, SPoint } from "@saga-web/draw"; import { Anchor } from "../types/topology/Anchor"; /** * 图例item icon * * */ export class SIconTextItem extends SObjectItem { /** item状态 */ _status: SItemStatus = SItemStatus.Normal; get status(): SItemStatus { return this._status; } set status(v: SItemStatus) { this._status = v; if (v == SItemStatus.Normal) { this.moveable = true; this.textItem.moveable = false; this.img.moveable = false; } else if (v == SItemStatus.Edit) { this.moveable = false; this.textItem.moveable = true; this.img.moveable = true; } else if (v == SItemStatus.Create) { this.moveable = true; this.textItem.moveable = false; this.img.moveable = false; } this.update(); } /** 是否显示文字 */ _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(); } } /** 是否被选中 */ get selected(): boolean { return this._selected && this.selectable && this.enabled; } // Get selected set selected(value: boolean) { // 如果选择状态未变更 if (this.selected == value) { return; } this._selected = value; if (value) { this.img.scale = 1.25; this.zOrder = ItemOrder.highLightOrder; } else { this.img.scale = 1; this.zOrder = ItemOrder.markOrder; } this.update(); } // Set selected /** 是否激活 */ _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"; this.img.cursor = "pointer"; } else { this.cursor = "auto"; this.textItem.cursor = "auto"; this.img.cursor = "auto"; } this.update(); } // Set isActive /** 激活显示颜色 */ _activeColor: SColor = new SColor("#00000033"); get activeColor(): SColor { return this._activeColor; } // Get activeColor set activeColor(v: SColor) { this._activeColor = v; this.update(); } // Set activeColor /** X轴坐标 */ get x(): number { return this.pos.x; } // Get x set x(v: number) { this.pos.x = v; this.$emit("changePos"); this.update(); } // Set x /** Y轴坐标 */ get y(): number { return this.pos.y; } // Get y set y(v: number) { this.pos.y = v; this.$emit("changePos"); this.update(); } // Set y /** icon宽 */ get sWidth(): number { return this.img.width; } set sWidth(v: number) { this.img.width = v; this.img.origin = new SPoint(this.img.width * 0.5, this.img.height * 0.5); this.changeAhchorPoint(); this.update(); } /** icon宽 */ get sHeight(): number { return this.img.height; } set sHeight(v: number) { this.img.height = v; this.img.origin = new SPoint(this.img.width * 0.5, this.img.height * 0.5); this.changeAhchorPoint(); this.update(); } /** 是否显示锚点 */ private _showAnchor: boolean = false; get showAnchor(): boolean { return this._showAnchor; } set showAnchor(v: boolean) { this._showAnchor = v; this.anchorList.forEach(t => { t.visible = v; }); } 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; this.update(); } get font(): SFont { return this.textItem.font; } set font(v: SFont) { this.textItem.font = v; this.update(); } /** img Item */ img: SImageItem = new SImageItem(this); /** text item */ textItem: STextItem = new STextItem(this); /** * 构造体 * * */ constructor(parent: SGraphItem | null, data?: Anchor[]) { super(parent); this.img.width = 32; this.img.height = 32; this.img.origin = new SPoint(this.img.width * 0.5, this.img.height * 0.5); this.img.connect("onMove", this, this.changeAhchorPoint.bind(this)); let anchorPoint; if (data && data.length) { anchorPoint = data.map(t => { return { x: t.Pos.X, y: t.Pos.Y, id: t.ID }; }); } else { anchorPoint = [ { x: this.img.x, y: this.img.y, id: "" }, { x: this.img.x, y: this.img.y, id: "" }, { x: this.img.x, y: this.img.y, id: "" }, { x: this.img.x, y: this.img.y, id: "" } // { x: this.img.x, y: this.img.y + this.img.height / 2, id: "" }, // { x: this.img.x, y: this.img.y - this.img.height / 2, id: "" }, // { x: this.img.x - this.img.width / 2, y: this.img.y, id: "" }, // { x: this.img.x + this.img.width / 2, y: this.img.y, id: "" } ]; } this.anchorList = anchorPoint.map(t => { let item = new SAnchorItem(this); if (t.id) { item.id = t.id; } item.moveTo(t.x, t.y); return item; }); this.showAnchor = false; this.textItem.text = ""; this.textItem.font.size = 12; // 偏移二分之一文本高度 this.textItem.moveTo((this.img.width * 0.5), -(this.font.size * 1.25 * 0.5)); this.moveable = true; this.selectable = true; } /** * 计算并移动锚点的位置 * * */ private changeAhchorPoint(): void { // 判断是否有锚点 if (this.anchorList.length) { let anchorPoint = [ { x: this.img.x, y: this.img.y }, { x: this.img.x, y: this.img.y }, { x: this.img.x, y: this.img.y }, { x: this.img.x, y: this.img.y } // { x: this.img.x, y: this.img.y + this.img.height / 2 }, // { x: this.img.x, y: this.img.y - this.img.height / 2 }, // { x: this.img.x - this.img.width / 2, y: this.img.y }, // { x: this.img.x + this.img.width / 2, y: this.img.y } ]; this.anchorList.forEach((item, index) => { item.moveTo(anchorPoint[index].x, anchorPoint[index].y); }); } } // Function changeAhchorPoint() /** * 鼠标按下事件 * * */ onMouseDown(event: SMouseEvent): boolean { if (this.status == SItemStatus.Normal) { return super.onMouseDown(event); } else if (this.status == SItemStatus.Edit) { return super.onMouseDown(event); } return true; } // Function onMouseDown() /** * 宽高发发生变化 * * @param oldSize 改之前的大小 * @param newSize 改之后大小 * */ onResize(oldSize: SSize, newSize: SSize) { console.log(arguments); } // Function onResize() /** * 鼠标双击事件 * * @param event 鼠标事件 * @return 是否处理事件 * */ onDoubleClick(event: SMouseEvent): boolean { // 如果位show状态 双击改对象则需改为编辑状态 if (SItemStatus.Normal == this.status) { this.status = SItemStatus.Edit; this.grabItem(this); } else if (SItemStatus.Edit == this.status) { this.status = SItemStatus.Normal; this.releaseItem(); } this.update(); return true; } // Function onDoubleClick() /** * 宽高发生变化 * * @return SRect 所有子对象的并集 * */ boundingRect(): SRect { let rect = this.img .boundingRect() .adjusted(this.img.pos.x, this.img.pos.y, 0, 0); if (this.showText) { rect = rect.unioned( this.textItem .boundingRect() .adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0) ); } return rect.adjusted(-5, -5, 10, 10); } // Function boundingRect() /** * Item绘制操作 * * @param painter painter对象 */ onDraw(painter: SPainter): void { if (this.status == SItemStatus.Edit) { painter.pen.lineWidth = painter.toPx(1); painter.pen.lineDash = [painter.toPx(3), painter.toPx(7)]; painter.pen.color = SColor.Black; painter.brush.color = SColor.Transparent; painter.drawRect(this.boundingRect()); } if (this.isActive) { painter.pen.color = SColor.Transparent; painter.brush.color = this.activeColor; if (this.selected) { painter.shadow.shadowBlur = 10; painter.shadow.shadowColor = this.activeColor; painter.shadow.shadowOffsetX = 5; painter.shadow.shadowOffsetY = 5; painter.drawCircle(this.img.x, this.img.y, (this.sWidth / 2.0 + 3) * 1.25); } else { painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0 + 3); } } else { if (this.selected) { painter.pen.color = SColor.Transparent; painter.brush.color = SColor.Transparent; painter.shadow.shadowBlur = 10; painter.shadow.shadowColor = new SColor(`#00000033`); painter.shadow.shadowOffsetX = 5; painter.shadow.shadowOffsetY = 5; painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0); } } } // Function onDraw() }