|
@@ -0,0 +1,241 @@
|
|
|
+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()
|
|
|
+}
|