SFHFQZoneLegendItem.ts 7.3 KB

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