TipelineItem.js 5.7 KB

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