SFHFQZoneLegendItem.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. import { SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw'
  2. import { STextItem } from '@saga-web/graph/lib'
  3. import { hexify } from '@/components/mapClass/until'
  4. import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib'
  5. /**
  6. *图例节点Item(区域类型 --防火分区)
  7. *
  8. * * @author 张宇(taohuzy@163.com)
  9. */
  10. export class SFHFQZoneLegendItem extends SPolygonItem {
  11. /**
  12. * 构造函数
  13. *
  14. * @param parent 指向父对象
  15. * @param data 图例节点对象数据
  16. */
  17. constructor(parent, data) {
  18. super(parent)
  19. /** text item */
  20. this.textItem = new STextItem(this)
  21. /** 是否显示文字 */
  22. this._showText = true
  23. /** 是否蒙版遮罩 */
  24. this._maskFlag = false
  25. this.textItem.isTransform = false
  26. this.zOrder = ItemOrder.polygonOrder
  27. this.data = data
  28. this.id = data.ID
  29. this.name = data.Name
  30. this.text = data.Name
  31. if (data) {
  32. this.setPointList = []
  33. let setPointList
  34. if (data.OutLine) {
  35. if (data.OutLine[0] instanceof SPoint) {
  36. this.setPointList = data.OutLine
  37. } else {
  38. setPointList = data.OutLine.map((i) => {
  39. return new SPoint(i.X, i.Y)
  40. })
  41. this.setPointList = setPointList
  42. }
  43. }
  44. // 设置线宽
  45. if (data.Properties.LineWidth) {
  46. this.lineWidth = data.Properties.LineWidth
  47. }
  48. if (data.Properties.StrokeColor) {
  49. this.strokeColor = data.Properties.StrokeColor.includes('#')
  50. ? new SColor(data.Properties.StrokeColor)
  51. : new SColor(hexify(data.Properties.StrokeColor))
  52. }
  53. if (data.Properties.FillColor) {
  54. this.fillColor = data.Properties.FillColor.includes('#')
  55. ? new SColor(data.Properties.FillColor)
  56. : new SColor(hexify(data.Properties.FillColor))
  57. }
  58. if (data.Properties.TextPos) {
  59. this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y)
  60. }
  61. if (data.Properties.color) {
  62. this.color = new SColor(data.Properties.color)
  63. }
  64. if (data.Properties.font) {
  65. this.font = new SFont('sans-serif', data.Properties.font)
  66. }
  67. // if( data.Properties.LineDash){
  68. // this.LineDash =this._legend.Properties.LineDash
  69. // }
  70. }
  71. // 监听多边形创建完成事件,并动态计算文本位置
  72. this.connect('finishCreated', this, () => {
  73. // 计算文本位置
  74. let x = this.getPointList.reduce((pre, cur, index, arr) => {
  75. return pre + cur.x / arr.length
  76. }, 0),
  77. y = this.getPointList.reduce((pre, cur, index, arr) => {
  78. return pre + cur.y / arr.length
  79. }, 0)
  80. this.textItem.moveTo(x, y)
  81. })
  82. }
  83. get text() {
  84. return this.textItem.text
  85. }
  86. set text(v) {
  87. this.textItem.text = v
  88. this.update()
  89. }
  90. get color() {
  91. return this.textItem.color
  92. }
  93. set color(v) {
  94. this.textItem.color = v
  95. }
  96. get font() {
  97. return this.textItem.font
  98. }
  99. set font(v) {
  100. this.textItem.font = v
  101. }
  102. get status() {
  103. return this._status
  104. }
  105. // 编辑当前状态
  106. set status(value) {
  107. this._status = value
  108. // 如果状态为show则需清栈
  109. if (value == SItemStatus.Normal) {
  110. // 切换显示状态显示文本
  111. this.showText = true
  112. // 切换显示状态不可移动文本
  113. this.textItem.moveable = false
  114. if (this.undoStack) {
  115. this.undoStack.clear()
  116. }
  117. } else if (value == SItemStatus.Edit) {
  118. // 切换编辑状态显示文本
  119. this.showText = true
  120. // 切换编辑状态可移动文本
  121. this.textItem.moveable = true
  122. } else if (value == SItemStatus.Create) {
  123. // 切换创建状态不显示文本
  124. this.showText = false
  125. // 切换创建状态不可移动文本
  126. this.textItem.moveable = false
  127. }
  128. this.update()
  129. }
  130. get showText() {
  131. return this._showText
  132. }
  133. set showText(v) {
  134. if (v === this._showText) {
  135. return
  136. }
  137. this._showText = v
  138. if (v) {
  139. this.textItem.show()
  140. } else {
  141. this.textItem.hide()
  142. }
  143. }
  144. get maskFlag() {
  145. return this._maskFlag
  146. }
  147. set maskFlag(v) {
  148. if (v === this._maskFlag) {
  149. return
  150. }
  151. this._maskFlag = v
  152. this.update()
  153. }
  154. toData() {
  155. this.data.Pos = { X: this.x, Y: this.y }
  156. this.data.Name = this.text
  157. this.data.Properties.FillColor = this.fillColor.value
  158. this.data.Properties.StrokeColor = this.strokeColor.value
  159. this.data.Properties.LineWidth = this.lineWidth
  160. this.data.OutLine = this.getPointList.map((pos) => {
  161. return {
  162. X: pos.x,
  163. Y: pos.y,
  164. }
  165. })
  166. this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y }
  167. this.data.Properties.font = this.font.size
  168. this.data.Properties.color = this.color.value
  169. return this.data
  170. }
  171. onDraw(painter) {
  172. if (this.maskFlag && this.status == SItemStatus.Normal) {
  173. let color = new SColor(this.strokeColor)
  174. color.alpha = color.alpha / 2
  175. let brushcolor = new SColor(this.fillColor)
  176. brushcolor.alpha = brushcolor.alpha / 2
  177. painter.pen.color = color
  178. painter.pen.lineCapStyle = SLineCapStyle.Square
  179. painter.pen.lineWidth = painter.toPx(this._lineWidth)
  180. painter.brush.color = brushcolor
  181. // @ts-ignore
  182. painter.drawPolygon([...this.pointList])
  183. } else {
  184. this.selected = true
  185. super.onDraw(painter)
  186. }
  187. }
  188. } // Class SZoneLegendItem