/* * ********************************************************************************************************************* * * !! * .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) 2016-2020. 博锐尚格科技股份有限公司 * ~8888' * .!88~ All rights reserved. * * ********************************************************************************************************************* */ import { SGraphItem, SAnchorItem } from "@persagy-web/graph/lib"; import { SBaseIconTextEdit, SBaseTextEdit } from "@persagy-web/edit"; import { SColor } from "@persagy-web/draw/lib"; import { v1 as uuidv1 } from "uuid"; import { Legend, svgTobase64 } from "@persagy-web/big/lib"; /** * 编辑基础设备类 * * @author 韩耀龙 */ export class SBaseEquipment extends SBaseIconTextEdit { /** 图例节点 id */ nodeId: string | undefined = undefined; /** 设备图例 */ _legendData: Legend | null = null; set legendData(val) { this._legendData = val; this.initData(); } get legendData(): Legend | null { return this._legendData; } /** 信息点存储 */ _infoPointList: any[] = []; set infoPointList(val) { this._infoPointList = val; } get infoPointList(): any[] { return this._infoPointList; } defaultUrl: string = ""; /** 图得url */ _url: string = ""; set url(val) { this._url = val; this.initUrl(); } get url(): string { return this._url; } /** 设备附加数据 */ anotherMsg: string = ""; /** * 构造函数 * * @param parent 指向父 Item * @param data 数据 */ constructor(parent: SGraphItem | null, data: Legend) { super(parent); this.legendData = data; } /** * 设置 legendData 时对 item 做设置 */ initData() { // this.legendData 不能为空 if (!this.legendData) return; this.nodeId = this.legendData?.nodeId; // 判断 size 是否存在 if (this.legendData.size) { this.sWidth = this.legendData.size.width; this.sHeight = this.legendData.size.height; } this.img.connect("onMove", this, this.changeAnchorPoint.bind(this)); // 判断是否有锚点数据 if (this.legendData.anchorList && this.legendData.anchorList.length) { // 对锚点数据遍历生成对应的锚点 this.anchorList = this.legendData.anchorList.map(t => { let item = new SAnchorItem(this); // 是否存在 anchorId if (t.anchorId) { item.id = t.anchorId; } item.moveTo(t.pos.x, t.pos.y); return item; }); } else { const anchorPoint = [ { pos: { x: this.img.x, y: this.img.y }, anchorId: uuidv1() } ]; // 没锚点则默认中心点为锚点 this.anchorList = anchorPoint.map(t => { let item = new SAnchorItem(this); // 是否存在 anchorId if (t.anchorId) { item.id = t.anchorId; } item.moveTo(t.pos.x, t.pos.y); return item; }); } // 该设备是否有信息点 if ( this.legendData.properties && this.legendData.properties.infoPointList ) { const infoPointList = this.legendData.properties.infoPointList; // 将信息点数据转换为实例 if (infoPointList.length) { this.infoPointList = infoPointList; this.infoPointList.forEach((obj, i) => { this.setTextItem(obj, i); }); } else { this.infoPointList = []; } } else { this.infoPointList = []; } this.showAnchor = false; // eslint-disable-next-line max-len // this.url = this.legendData.style.default.base64Url ? this.legendData.style.default.base64Url : this.legendData.style.default.url this.anotherMsg = this.legendData.properties.anotherMsg ? this.legendData.properties.anotherMsg : ""; this.x = this.legendData.pos.x; this.y = this.legendData.pos.y; this.moveable = true; this.selectable = true; } /** * 根据 url 获取图片 */ initUrl() { // 获取图数据转换为 base64 svgTobase64(this.url) .then(res => { // @ts-ignore this.img.url = res ? res : ""; }) .catch(res => { this.img.url = res; }); } /** * 设置信息点 * * @params obj 设置的信息点 */ setMsgPoint(val: any) { // 根据是否勾选来判断是够增加或删除 if (val.checked) { this._infoPointList.push(val); this.setTextItem(val, this._infoPointList.length - 1); } else { let deleteItemIndex = -1; // 遍历信息点数组删除 checked 为 false 的信息点 this._infoPointList.forEach((item, index) => { // 通过 id 对比定位对象 if (val.code == item.code) { deleteItemIndex = index; } }); this._infoPointList.splice(deleteItemIndex, 1); this.setTextItem(val, deleteItemIndex); } } /** * 根据选中状态增加 textItem * * @params obj textItem 文本信息 * @params index 文本索引 */ setTextItem(val: any, index: number): void { // 该状态时否选中如果选中生成实例并维护 if (val.checked) { let item = new SBaseTextEdit(this, null); item.propertyData = val; item.text = val.name; // 是否存在pos if (val.pos) { item.moveTo(val.pos.x, val.pos.y); } else { item.moveTo( this.img.width * 0.5, -(this.font.size * 1.25 * 0.5) + index * 10 ); } item.font.size = val.font ? val.font : 12; item.isTransform = false; item.showSelect = false; item.color = val.color ? new SColor(val.color) : new SColor("#000000"); item.backgroundColor = val.backgroundColor ? new SColor(val.backgroundColor) : SColor.Transparent; item.strokeColor = val.strokeColor ? new SColor(val.strokeColor) : SColor.Transparent; item.connect("textSelect", this, this.textSelectChange); this.textItemList.push(item); } else { this.scene?.removeItem(this.textItemList[index]); this.textItemList.splice(index, 1); this.update(); } } /** * 返回对象储存的相关数据 * * @return 对象储存的相关数据 */ toData(): any { // this.legendData 必须存在 if (this.legendData) { // 遍历锚点获取需要存储的数据格式 const list = this.anchorList.map(item => { return { anchorId: item.id, // 数据类型中定义为 id,但是后台保存要的是字段anchorId pos: { x: item.x, y: item.y } }; }); this.legendData.anchorList = list; // 反馈大小 if (this.legendData.size) { this.legendData.size.width = this.sWidth; this.legendData.size.height = this.sHeight; } else { this.legendData.size = { width: this.sWidth, height: this.sHeight }; } // 位置 this.legendData.pos = { x: this.x, y: this.y }; // 存储信息点 const infoPoinList: any[] = []; // 获取信息点对应参数 this.textItemList.forEach(item => { let obj = Object.assign(item.propertyData, { pos: { x: item.x, y: item.y }, font: item.font.size, color: item.color.value, backgroundColor: item.backgroundColor.value, strokeColor: item.strokeColor.value }); delete obj.currentEquipMsg; infoPoinList.push(obj); }); this.legendData.properties.infoPointList = infoPoinList; this.legendData.properties.anotherMsg = this.anotherMsg; this.legendData.style.default.base64Url = ""; // 判断 defaultUrl 是否存在 if (this.defaultUrl) { this.legendData.style.default.url = this.defaultUrl; } return this.legendData; } } }