TipelineItem.ts 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib';
  2. import { SPainter, SColor, SRect } from '@saga-web/draw';
  3. import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib';
  4. import { Relation } from '../types/Relation';
  5. import { SPoint } from "@saga-web/draw/lib";
  6. import { Point } from "@saga-web/big/lib/types/Point";
  7. import { uuid } from '@/components/mapClass/until';
  8. import { SMouseEvent } from '@saga-web/base/lib';
  9. /**
  10. * 管道item
  11. *
  12. * */
  13. export class TipelineItem extends SPolylineItem {
  14. /** 起始锚点 */
  15. startAnchor: SAnchorItem | null = null;
  16. /** 结束锚点 */
  17. endAnchor: SAnchorItem | null = null;
  18. /** 对应的图例ID */
  19. _graphElementId: string = "";
  20. get graphElementId(): string {
  21. return this._graphElementId;
  22. }
  23. set graphElementId(v: string) {
  24. this._graphElementId = v;
  25. if (this.data) {
  26. this.data.GraphElementId = this._graphElementId;
  27. }
  28. }
  29. /** 关联节点1ID */
  30. _node1Id: string = "";
  31. get node1Id(): string {
  32. return this._node1Id;
  33. }
  34. set node1Id(v: string) {
  35. this._node1Id = v;
  36. if (this.data) {
  37. this.data.Node1ID = this._node1Id;
  38. }
  39. }
  40. /** 关联节点2ID */
  41. _node2Id: string = "";
  42. get node2Id(): string {
  43. return this._node2Id;
  44. }
  45. set node2Id(v: string) {
  46. this._node2Id = v;
  47. if (this.data) {
  48. this.data.Node2ID = this._node2Id;
  49. }
  50. }
  51. /** 关联锚点1ID */
  52. _anchor1ID: string = "";
  53. get anchor1ID(): string {
  54. return this._anchor1ID;
  55. }
  56. set anchor1ID(v: string) {
  57. this._anchor1ID = v;
  58. if (this.data) {
  59. this.data.Anchor1ID = this._anchor1ID;
  60. }
  61. }
  62. /** 关联锚点2ID */
  63. _anchor2ID: string = "";
  64. get anchor2ID(): string {
  65. return this._anchor2ID;
  66. }
  67. set anchor2ID(v: string) {
  68. this._anchor2ID = v;
  69. if (this.data) {
  70. this.data.Anchor2ID = this._anchor2ID;
  71. }
  72. }
  73. /** 是否蒙版遮罩 */
  74. _maskFlag: boolean = false;
  75. get maskFlag(): boolean {
  76. return this._maskFlag;
  77. }
  78. set maskFlag(v: boolean) {
  79. if (v === this._maskFlag) {
  80. return
  81. }
  82. this._maskFlag = v;
  83. this.update()
  84. }
  85. /** 数据存储 */
  86. data: Relation | null = null;
  87. /** 接收事件作出修改 */
  88. changePos() {
  89. if (this.startAnchor) {
  90. // 判断删除equip后,不移动
  91. if (this.startAnchor.parent && this.startAnchor.parent.parent) {
  92. this.pointList[0] = this.startAnchor.mapToScene(0, 0);
  93. }
  94. }
  95. if (this.endAnchor) {
  96. // 删除equip后
  97. if (this.endAnchor.parent && this.endAnchor.parent.parent) {
  98. this.pointList[
  99. this.pointList.length - 1
  100. ] = this.endAnchor.mapToScene(0, 0);
  101. }
  102. }
  103. }
  104. constructor(parent: SGraphItem | null, data: Relation) {
  105. super(parent, []);
  106. this.zOrder = ItemOrder.polylineOrder;
  107. this.pointList = data.PointList.map(item => {
  108. return new SPoint(item.X, item.Y);
  109. });
  110. this.data = data;
  111. this.name = data.Name;
  112. if (!data.ID) {
  113. data.ID = uuid()
  114. }
  115. this.id = data.ID;
  116. if (data.GraphElementId) {
  117. this._graphElementId = data.GraphElementId
  118. }
  119. if (data.Node1ID) {
  120. this._node1Id = data.Node1ID
  121. }
  122. if (data.Node2ID) {
  123. this._node2Id = data.Node2ID
  124. }
  125. if (data.Anchor1ID) {
  126. this._anchor1ID = data.Anchor1ID
  127. }
  128. if (data.Anchor2ID) {
  129. this._anchor2ID = data.Anchor2ID
  130. }
  131. if (data.Properties.Zorder) {
  132. this.zOrder = data.Properties.Zorder;
  133. }
  134. if (data.Properties && data.Properties.Color) {
  135. this.strokeColor = new SColor(data.Properties.Color);
  136. }
  137. // if(data.Properties && data.Properties.LineDash){
  138. // this.LineDash = data.Properties.LineDash
  139. // }
  140. if (data.Properties && data.Properties.LineWidth) {
  141. this.lineWidth = data.Properties.LineWidth;
  142. }
  143. }
  144. /**
  145. * 鼠标按下事件
  146. *
  147. * @param event 保存事件参数
  148. * @return boolean
  149. */
  150. onMouseDown(event: SMouseEvent): boolean {
  151. if (event.buttons == 1)
  152. this.$emit("legendItemClick", event);
  153. return super.onMouseDown(event);
  154. } // Function onMouseDown()
  155. /** 获取data数据 */
  156. toData(): Relation | null {
  157. let pointList: Point[] = this.pointList.map(item => {
  158. return {
  159. X: item.x,
  160. Y: item.y
  161. }
  162. });
  163. if (this.data) {
  164. this.data.Name = this.name;
  165. this.data.PointList = pointList;
  166. this.data.Properties.Zorder = this.zOrder;
  167. this.data.Properties.LineWidth = this.lineWidth;
  168. // this.data.Properties.LineDash = this.LineDash;
  169. this.data.Properties.Color = this.strokeColor.value;
  170. }
  171. return this.data
  172. }
  173. // onDraw(painter: SPainter) {
  174. // if (this.maskFlag && this.status == SItemStatus.Normal) {
  175. // let color = new SColor(this.strokeColor)
  176. // color.alpha = color.alpha / 8
  177. // painter.pen.color = color
  178. // if (this.selected) {
  179. // painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
  180. // painter.shadow.shadowBlur = 10;
  181. // painter.shadow.shadowColor = new SColor(`#00000033`);
  182. // painter.shadow.shadowOffsetX = 5;
  183. // painter.shadow.shadowOffsetY = 5;
  184. // } else {
  185. // painter.pen.lineWidth = painter.toPx(this.lineWidth);
  186. // painter.shadow.shadowColor = SColor.Transparent
  187. // }
  188. // painter.drawPolyline(this.pointList)
  189. // painter.pen.color = new SColor('#ffffff80')
  190. // painter.drawPolyline(this.pointList)
  191. // } else {
  192. // super.onDraw(painter)
  193. // }
  194. // }
  195. /**
  196. * Item绘制框架
  197. *
  198. * @param painter painter对象
  199. * @param rect 绘制区域
  200. */
  201. onPaint(painter: SPainter, rect: SRect): void {
  202. super.onPaint(painter, rect);
  203. if (this.maskFlag && this.status == SItemStatus.Normal) {
  204. if (this.selected) {
  205. painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
  206. } else {
  207. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  208. }
  209. painter.pen.color = new SColor('#ffffff80')
  210. painter.drawPolyline(this.pointList)
  211. }
  212. } // Function onPaint()
  213. }