SZoneLegendItem.ts 7.4 KB

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