123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 |
- import { SObjectItem, SImageItem, SGraphItem, STextItem } from "@saga-web/graph/lib";
- import { ItemOrder } from "@saga-web/big/lib";
- import { SColor, SPainter, SRect } from "@saga-web/draw/lib";
- import { SMouseEvent } from "@saga-web/base/lib";
- import { EquipmentData } from "../types/EquipmentData";
- import { uuid } from '@/components/mapClass/until';
- // @ts-ignore
- import { cloneDeep } from 'lodash'
- enum StatusType {
- /** 普通态 */
- Normal,
- /** 编辑态 */
- Edit
- }
- export class SEquipmentTextItem extends SObjectItem {
- _textArr: STextItem[] = [];
- /**保存设备数据 */
- _epData: EquipmentData | any = {};
- /** 设备名称 */
- _name: string = '';
- get textArr(): STextItem[] {
- return this._textArr
- }
- set textArr(v) {
- this._textArr = v
- this.update();
- }
- // 将EquipmentData保存起来,以便修改status时,可以找到StatusImage
- get epData(): EquipmentData {
- return this._epData;
- }
- set epData(v: EquipmentData) {
- this._epData = v;
- this.update();
- }
- _info: any[] = []
- // 修改信息点名称
- get info(): [] {
- // @ts-ignore
- return this._info
- }
- /**
- * @param data 修改信息点信息
- */
- set info(data) {
- // @ts-ignore
- let { index, Name, FontSize, Color } = data
- // 更新信息点名称
- if (this.epData && index < this.epData.InfoList.length) {
- // this.textArr[index + 1].text = Name
- // this.epData.InfoList[index].Name = Name
- }
- // item对象属性修改
- this.textArr[index + 1].text = Name
- this.textArr[index + 1].font.size = FontSize
- this.textArr[index + 1].color = Color
- // 数据修改
- this.epData.InfoList[index].Name = Name
- this.epData.InfoList[index].FontSize = FontSize
- this.epData.InfoList[index].Color = Color
- this.update();
- }
- /**
- *
- * @param parent 父类
- * @param epData 需要展示的节点信息
- */
- constructor(parent: SGraphItem | null, epData: EquipmentData) {
- super(parent);
- // if (epData) epData = cloneDeep(epData)
- // epData && (this.epData = epData);
- this.epData = cloneDeep(epData)
- this.moveable = true;
- this.id = epData.ID;
- this.zOrder = ItemOrder.textOrder;
- this.textArr = [];
- // 有信息点信息时,绘制信息点信息
- // 加载设备
- this.loadEquipment(epData);
- }
- /**
- * 加载设备
- * @param epData 设备信息
- */
- loadEquipment(epData: EquipmentData): void {
- // 位置
- this.x = epData.Pos.X;
- this.y = epData.Pos.Y;
- // 名称
- this.name = epData.Name
- let nameItem = new STextItem(this);
- // nameItem.moveable = true;
- nameItem.backgroundColor = SColor.Transparent;
- nameItem.font.size = 14;
- nameItem.text = epData.Name;
- // nameItem.moveTo(-epData.Size.Width / 2, epData.Size.Height / 2 + 7);
- nameItem.moveTo(10, epData.Size.Height + 7);
- this.textArr.push(nameItem);
- // 信息点
- let { InfoList } = epData;
- InfoList.map(({ Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign }) => {
- let textItem = new STextItem(this);
- textItem.backgroundColor = new SColor(Background);
- textItem.width = Width;
- textItem.height = Height;
- textItem.text = Name;
- textItem.font.size = FontSize;
- textItem.color = new SColor(Color);
- textItem.pos.x = X;
- textItem.pos.y = Y;
- this.textArr.push(textItem);
- });
- }
- /**
- * 宽高发生变化
- *
- * @return SRect 所有子对象的并集
- * */
- boundingRect(): SRect {
- // return new SRect(-this.width / 2, -this.height / 2, this.width, this.height);
- /* let rect = this.img.boundingRect().adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
- if (this.textArr.length) {
- for (let text of this.textArr) {
- rect = rect.unioned(text.boundingRect().adjusted(text.pos.x, text.pos.y, 0, 0));
- }
- }
- return rect.adjusted(-5, -5, 10, 10); */
- } // Function boundingRect()
- /**
- * 转换成data
- */
- toData(): EquipmentData {
- // 更新相关数据
- this.epData.Name = this.name;
- this.epData.Pos.X = this.x;
- this.epData.Pos.Y = this.y;
- this.epData.Size.Width = this.width;
- this.epData.Size.Height = this.height;
- // @ts-ignore
- // infoList中坐标,名称处理
- this.epData.InfoList.map((item, index, arr) => {
- arr[index].X = this.textArr[index + 1].pos.x;
- arr[index].Y = this.textArr[index + 1].pos.y;
- arr[index].Name = this.textArr[index + 1].text;
- });
- this.epData.GraphElementType = 'Equipment'
- // @ts-ignore
- this.epData.Type = 'equipment'
- return this.epData;
- }
- /**
- * 添加信息点
- */
- addEquipmentInfo() {
- let { InfoList } = this.epData;
- let textItem = new STextItem(this);
- let Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign
- if (InfoList.length) {
- let info = InfoList[InfoList.length - 1]
- Background = info.Background
- X = info.X
- Y = info.Y + 20
- Width = info.Width
- Height = info.Height
- FontSize = info.FontSize
- Background = info.Background
- Color = info.Color
- TextAlign = info.TextAlign
- Name = info.Name
- // { Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign } = InfoList[InfoList.length - 1]
- } else {
- // 默认设置
- Background = '#ffffff'
- X = this.img.width + 10
- Y = this.img.height / 2 - 6
- Width = 100
- Height = 25
- FontSize = 14
- Background = '#ffffff'
- Color = '#000000'
- TextAlign = 'center'
- Name = '请输入'
- }
- // 信息点对象 属性修改
- textItem.backgroundColor = new SColor(Background);
- textItem.width = Width;
- textItem.height = Height;
- textItem.text = '请输入';
- textItem.font.size = FontSize;
- textItem.color = new SColor(Color);
- textItem.pos.x = X;
- textItem.pos.y = Y;
- this.textArr.push(textItem);
- InfoList.push({
- Code: uuid(),
- Name: '请输入',
- X,
- Y,
- Width,
- Height,
- FontSize,
- Background,
- TextAlign,
- Color,
- })
- this.update()
- }
- // 删除信息点
- deleteEquipmentInfo() {
- this.epData.InfoList.pop()
- if (this.textArr.length) {
- this.textArr[this.textArr.length - 1].text = '';
- this.textArr[this.textArr.length - 1].width = 0;
- this.textArr[this.textArr.length - 1].height = 0;
- this.textArr[this.textArr.length - 1].backgroundColor = SColor.Transparent;
- this.textArr.pop()
- }
- this.update()
- }
- /**
- * Item绘制操作
- *
- * @param painter painter对象
- */
- onDraw(painter: SPainter): void {
- painter.pen.lineWidth = painter.toPx(1);
- painter.pen.color = SColor.Black;
- painter.brush.color = SColor.Transparent;
- if (this.equipmentStatus === StatusType.Edit) {
- painter.drawRect(this.boundingRect());
- this.textArr.map(item => item.moveable = true)
- } else {
- this.textArr.map(item => item.moveable = false)
- }
- } // Function onDraw()
- }
|