SEquipmentTextItem.ts 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. import { SObjectItem, SImageItem, SGraphItem, STextItem } from "@saga-web/graph/lib";
  2. import { ItemOrder } from "@saga-web/big/lib";
  3. import { SColor, SPainter, SRect } from "@saga-web/draw/lib";
  4. import { SMouseEvent } from "@saga-web/base/lib";
  5. import { EquipmentData } from "../types/EquipmentData";
  6. import { uuid } from '@/components/mapClass/until';
  7. // @ts-ignore
  8. import { cloneDeep } from 'lodash'
  9. enum StatusType {
  10. /** 普通态 */
  11. Normal,
  12. /** 编辑态 */
  13. Edit
  14. }
  15. export class SEquipmentTextItem extends SObjectItem {
  16. _textArr: STextItem[] = [];
  17. /**保存设备数据 */
  18. _epData: EquipmentData | any = {};
  19. /** 设备名称 */
  20. _name: string = '';
  21. get textArr(): STextItem[] {
  22. return this._textArr
  23. }
  24. set textArr(v) {
  25. this._textArr = v
  26. this.update();
  27. }
  28. // 将EquipmentData保存起来,以便修改status时,可以找到StatusImage
  29. get epData(): EquipmentData {
  30. return this._epData;
  31. }
  32. set epData(v: EquipmentData) {
  33. this._epData = v;
  34. this.update();
  35. }
  36. _info: any[] = []
  37. // 修改信息点名称
  38. get info(): [] {
  39. // @ts-ignore
  40. return this._info
  41. }
  42. /**
  43. * @param data 修改信息点信息
  44. */
  45. set info(data) {
  46. // @ts-ignore
  47. let { index, Name, FontSize, Color } = data
  48. // 更新信息点名称
  49. if (this.epData && index < this.epData.InfoList.length) {
  50. // this.textArr[index + 1].text = Name
  51. // this.epData.InfoList[index].Name = Name
  52. }
  53. // item对象属性修改
  54. this.textArr[index + 1].text = Name
  55. this.textArr[index + 1].font.size = FontSize
  56. this.textArr[index + 1].color = Color
  57. // 数据修改
  58. this.epData.InfoList[index].Name = Name
  59. this.epData.InfoList[index].FontSize = FontSize
  60. this.epData.InfoList[index].Color = Color
  61. this.update();
  62. }
  63. /**
  64. *
  65. * @param parent 父类
  66. * @param epData 需要展示的节点信息
  67. */
  68. constructor(parent: SGraphItem | null, epData: EquipmentData) {
  69. super(parent);
  70. // if (epData) epData = cloneDeep(epData)
  71. // epData && (this.epData = epData);
  72. this.epData = cloneDeep(epData)
  73. this.moveable = true;
  74. this.id = epData.ID;
  75. this.zOrder = ItemOrder.textOrder;
  76. this.textArr = [];
  77. // 有信息点信息时,绘制信息点信息
  78. // 加载设备
  79. this.loadEquipment(epData);
  80. }
  81. /**
  82. * 加载设备
  83. * @param epData 设备信息
  84. */
  85. loadEquipment(epData: EquipmentData): void {
  86. // 位置
  87. this.x = epData.Pos.X;
  88. this.y = epData.Pos.Y;
  89. // 名称
  90. this.name = epData.Name
  91. let nameItem = new STextItem(this);
  92. // nameItem.moveable = true;
  93. nameItem.backgroundColor = SColor.Transparent;
  94. nameItem.font.size = 14;
  95. nameItem.text = epData.Name;
  96. // nameItem.moveTo(-epData.Size.Width / 2, epData.Size.Height / 2 + 7);
  97. nameItem.moveTo(10, epData.Size.Height + 7);
  98. this.textArr.push(nameItem);
  99. // 信息点
  100. let { InfoList } = epData;
  101. InfoList.map(({ Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign }) => {
  102. let textItem = new STextItem(this);
  103. textItem.backgroundColor = new SColor(Background);
  104. textItem.width = Width;
  105. textItem.height = Height;
  106. textItem.text = Name;
  107. textItem.font.size = FontSize;
  108. textItem.color = new SColor(Color);
  109. textItem.pos.x = X;
  110. textItem.pos.y = Y;
  111. this.textArr.push(textItem);
  112. });
  113. }
  114. /**
  115. * 宽高发生变化
  116. *
  117. * @return SRect 所有子对象的并集
  118. * */
  119. boundingRect(): SRect {
  120. // return new SRect(-this.width / 2, -this.height / 2, this.width, this.height);
  121. /* let rect = this.img.boundingRect().adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
  122. if (this.textArr.length) {
  123. for (let text of this.textArr) {
  124. rect = rect.unioned(text.boundingRect().adjusted(text.pos.x, text.pos.y, 0, 0));
  125. }
  126. }
  127. return rect.adjusted(-5, -5, 10, 10); */
  128. } // Function boundingRect()
  129. /**
  130. * 转换成data
  131. */
  132. toData(): EquipmentData {
  133. // 更新相关数据
  134. this.epData.Name = this.name;
  135. this.epData.Pos.X = this.x;
  136. this.epData.Pos.Y = this.y;
  137. this.epData.Size.Width = this.width;
  138. this.epData.Size.Height = this.height;
  139. // @ts-ignore
  140. // infoList中坐标,名称处理
  141. this.epData.InfoList.map((item, index, arr) => {
  142. arr[index].X = this.textArr[index + 1].pos.x;
  143. arr[index].Y = this.textArr[index + 1].pos.y;
  144. arr[index].Name = this.textArr[index + 1].text;
  145. });
  146. this.epData.GraphElementType = 'Equipment'
  147. // @ts-ignore
  148. this.epData.Type = 'equipment'
  149. return this.epData;
  150. }
  151. /**
  152. * 添加信息点
  153. */
  154. addEquipmentInfo() {
  155. let { InfoList } = this.epData;
  156. let textItem = new STextItem(this);
  157. let Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign
  158. if (InfoList.length) {
  159. let info = InfoList[InfoList.length - 1]
  160. Background = info.Background
  161. X = info.X
  162. Y = info.Y + 20
  163. Width = info.Width
  164. Height = info.Height
  165. FontSize = info.FontSize
  166. Background = info.Background
  167. Color = info.Color
  168. TextAlign = info.TextAlign
  169. Name = info.Name
  170. // { Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign } = InfoList[InfoList.length - 1]
  171. } else {
  172. // 默认设置
  173. Background = '#ffffff'
  174. X = this.img.width + 10
  175. Y = this.img.height / 2 - 6
  176. Width = 100
  177. Height = 25
  178. FontSize = 14
  179. Background = '#ffffff'
  180. Color = '#000000'
  181. TextAlign = 'center'
  182. Name = '请输入'
  183. }
  184. // 信息点对象 属性修改
  185. textItem.backgroundColor = new SColor(Background);
  186. textItem.width = Width;
  187. textItem.height = Height;
  188. textItem.text = '请输入';
  189. textItem.font.size = FontSize;
  190. textItem.color = new SColor(Color);
  191. textItem.pos.x = X;
  192. textItem.pos.y = Y;
  193. this.textArr.push(textItem);
  194. InfoList.push({
  195. Code: uuid(),
  196. Name: '请输入',
  197. X,
  198. Y,
  199. Width,
  200. Height,
  201. FontSize,
  202. Background,
  203. TextAlign,
  204. Color,
  205. })
  206. this.update()
  207. }
  208. // 删除信息点
  209. deleteEquipmentInfo() {
  210. this.epData.InfoList.pop()
  211. if (this.textArr.length) {
  212. this.textArr[this.textArr.length - 1].text = '';
  213. this.textArr[this.textArr.length - 1].width = 0;
  214. this.textArr[this.textArr.length - 1].height = 0;
  215. this.textArr[this.textArr.length - 1].backgroundColor = SColor.Transparent;
  216. this.textArr.pop()
  217. }
  218. this.update()
  219. }
  220. /**
  221. * Item绘制操作
  222. *
  223. * @param painter painter对象
  224. */
  225. onDraw(painter: SPainter): void {
  226. painter.pen.lineWidth = painter.toPx(1);
  227. painter.pen.color = SColor.Black;
  228. painter.brush.color = SColor.Transparent;
  229. if (this.equipmentStatus === StatusType.Edit) {
  230. painter.drawRect(this.boundingRect());
  231. this.textArr.map(item => item.moveable = true)
  232. } else {
  233. this.textArr.map(item => item.moveable = false)
  234. }
  235. } // Function onDraw()
  236. }