/* * ********************************************************************************************************************* * * !! * .F88X * X8888Y * .}888888N; * i888888N; .:! .I$WI: * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8& * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I * +888888N; .8888888Y "&&8Y.}8, * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$* * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~ * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi' * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/ * .:R888888I * .&888888I Copyright (c) 2009-2020. 博锐尚格科技股份有限公司 * ~8888' * .!88~ All rights reserved. * * ********************************************************************************************************************* */ import { SImageItem, STextItem, SAnchorItem, SGraphItem, } from "@persagy-web/graph"; import { SItemStatus, ItemOrder } from "@persagy-web/big"; import { Anchor } from "@persagy-web/big/lib/types/topology/Anchor" import { SMouseEvent } from "@persagy-web/base"; import { SSize, SRect, SPainter, SColor, SFont, SPoint } from "@persagy-web/draw"; import { SGraphEdit, SBaseTextEdit, SBaseImageEdit } from ".."; import { Marker } from "../type/Marker"; /** * 图标 * * @author 韩耀龙 */ export class SBaseIconTextEdit extends SGraphEdit { /** item 数据*/ _data: Marker | null = null; get data(): Marker | null { return this._data; } // Get data set data(v: Marker | null) { this._data = v; this.initData() this.update(); } // Set data /** item 状态 */ _status: SItemStatus = SItemStatus.Normal; get status(): SItemStatus { return this._status; } // Get status set status(v: SItemStatus) { this._status = v; if (v == SItemStatus.Normal) { this.moveable = true; this.textItemList.map(item => { item.moveable = false }); this.img.moveable = false; } else if (v == SItemStatus.Edit) { this.moveable = false; this.textItemList.map(item => { item.moveable = true }); this.img.moveable = true; } else if (v == SItemStatus.Create) { this.moveable = true; this.textItemList.map(item => { item.moveable = false }); this.img.moveable = false; } this.update(); } // Set status /** 锚点 list */ anchorList: SAnchorItem[] = []; /** 是否显示文字 */ _showText: boolean = true; get showText(): boolean { return this._showText; } // Get showText set showText(v: boolean) { if (v === this._showText) { return; } this._showText = v; if (v) { this.textItemList.map(item => { item.show() }); } else { this.textItemList.map(item => { item.hide() }); } } // Set showText /** 是否被选中 */ 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.textItemList.map(item => { item.cursor = "pointer" }); this.img.cursor = "pointer"; } else { this.cursor = "auto"; this.textItemList.map(item => { item.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; } // Get sWidth set sWidth(v: number) { this.img.width = v; this.img.origin = new SPoint( this.img.width * 0.5, this.img.height * 0.5 ); this.changeAnchorPoint(); this.update(); } // Set sWidth /** icon 高 */ get sHeight(): number { return this.img.height; } // Get sHeight set sHeight(v: number) { this.img.height = v; this.img.origin = new SPoint( this.img.width * 0.5, this.img.height * 0.5 ); this.changeAnchorPoint(); this.update(); } // Set sHeight /** 是否显示锚点 */ private _showAnchor: boolean = true; get showAnchor(): boolean { return this._showAnchor; } // Get showAnchor set showAnchor(v: boolean) { this._showAnchor = v; this.anchorList.forEach(t => { t.visible = v; }); } // Set showAnchor /** 文本颜色 */ get color(): SColor { if (this.textItemList.length) { return this.textItemList[0].color; } else { return new SColor(); } } // Get color set color(v: SColor) { this.textItemList.forEach(item => { item.color = v; }) this.update(); } // Set color /** 文本字体 */ get font(): SFont { if (this.textItemList.length) { return this.textItemList[0].font } else { return new SFont } } // Get font set font(v: SFont) { this.textItemList.forEach(item => { item.font = v }) this.update(); } // Set font /** 图像 */ img: SBaseImageEdit = new SBaseImageEdit(this); /** 文本数组 */ textItemList: SBaseTextEdit[] = []; /** 当前选中的文本item */ curTextItem: SBaseTextEdit | null = null; /** * 构造体 * * @param parent 父节点 * @param data 锚点数据 */ constructor(parent: SGraphItem | null, data: Marker | null = null) { super(parent); this.showSelect = false; this.img.showSelect = false; this.data = data; } // Constructor /** * 如果 data 设置;初始化data */ initData() { if (!this.data) return; if (this.data.size) { this.sWidth = this.data.size.width; this.sHeight = this.data.size.height; } this.img.connect("onMove", this, this.changeAnchorPoint.bind(this)); const anchorPoint = [ { x: this.img.x, 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; // 对文本数据进行处理 if (this.data.style && this.data.style.default && this.data.style.default.textList) { const textList = this.data.style.default.textList; if (textList.length) { const textItemList: any[] = []; textList.forEach((item: any, index: number) => { let obj = new SBaseTextEdit(this, null); obj.propertyData = item; obj.text = item.text; if (item.pos) { obj.moveTo(item.pos.x, item.pos.x) } else { obj.moveTo( this.img.width * 0.5, -(this.font.size * 1.25 * 0.5) + (index) * 10 ); } obj.font.size = item.font; obj.isTransform = false; obj.showSelect = false; obj.color = new SColor(item.color); obj.connect('textSelect', this, this.textSelectChange) textItemList.push(obj) }) this.textItemList = textItemList; } } this.img.url = this.data.style.default.url; this.x = this.data.pos.x; this.y = this.data.pos.y this.moveable = true; this.selectable = true; }// Function initData() /** * 添加文本 * * @param item 文本图例 */ addTextItem(item: SBaseTextEdit) { this.textItemList.push(item) }// Function addTextItem /** * 删除文本 * * @param index 索引 */ removeTextItem(index: number) { let [delteItem] = this.textItemList.splice(index, 1); if (this.scene) { this.scene.removeItem(delteItem) } }// Function removeTextItem /** * 计算并移动锚点的位置 */ changeAnchorPoint(): 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 } ]; this.anchorList.forEach((item, index) => { item.moveTo(anchorPoint[index].x, anchorPoint[index].y); }); } } // Function changeAnchorPoint() /** * 选中的文本item变化 */ textSelectChange(item: SBaseTextEdit): void { this.curTextItem = item; } // Function textSelectChange() /** * 鼠标按下事件 * * @param event 事件对象 * @return 是否处理事件 */ onMouseDown(event: SMouseEvent): boolean { this.curTextItem = null; if (this.status == SItemStatus.Normal) { super.onMouseDown(event) return true; } 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) { this.textItemList.forEach(item => { rect = rect.unioned( item .boundingRect() .adjusted(item.pos.x, item.pos.y, 0, 0) ); }) } return rect.adjusted(-5, -5, 10, 10); } // Function boundingRect() /** * Item 绘制操作 * * @param painter 绘制对象 */ onDraw(painter: SPainter): void { const rect = this.boundingRect(); const lw = painter.toPx(1); // 编辑态和选中态出现绘制区域 if (this.status == SItemStatus.Edit || this.selected) { // doto 如果子元素被选中 painter.pen.lineWidth = lw; painter.pen.lineDash = [3 * lw, 7 * lw]; painter.pen.color = SColor.Black; painter.brush.color = SColor.Transparent; painter.drawRect(rect); } // 编辑态出现四个角的圆点 if (this.status == SItemStatus.Edit) { painter.pen.lineDash = []; painter.brush.color = SColor.White; painter.drawCircle(rect.x, rect.y, 5 * lw) painter.drawCircle(rect.right, rect.bottom, 5 * lw) painter.drawCircle(rect.x, rect.bottom, 5 * lw) painter.drawCircle(rect.right, rect.y, 5 * lw) } 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() /** * 返回对象储存的相关数据 * * @return 相关数据 */ toData(): any { if (this.data) { if (this.data.size) { this.data.size.width = this.sWidth; this.data.size.height = this.sHeight; } this.data.style.default.text = JSON.stringify(this.textItemList); this.data.pos.x = this.pos.x; this.data.pos.y = this.pos.y; this.data.style.default.zorder = this.zOrder; this.data.style.default.url = this.img.url; } const anchorPoint = [ { x: this.img.x, 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.textItemList.font.size = this.data.style.default.font || 12; // this.img.url = this.data.style.default.url; if (this.data) { this.x = this.data.pos.x; this.y = this.data.pos.y } } // Function toData() } // Class SBaseIconTextEdit