SFHFQZoneLegendItem.ts 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. import { SGraphItem, SLineStyle, STextOrigin } 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 SFHFQZoneLegendItem 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. _isActive: boolean = false;
  67. get isActive(): boolean {
  68. return this._isActive;
  69. } // Get isActive
  70. set isActive(v: boolean) {
  71. this._isActive = v;
  72. if (v) {
  73. this.cursor = "pointer";
  74. this.textItem.cursor = "pointer";
  75. } else {
  76. this.cursor = "auto";
  77. this.textItem.cursor = "auto";
  78. }
  79. this.update();
  80. } // Set isActive
  81. /** 是否显示文字 */
  82. _showText: boolean = true;
  83. get showText(): boolean {
  84. return this._showText;
  85. }
  86. set showText(v: boolean) {
  87. if (v === this._showText) {
  88. return
  89. }
  90. this._showText = v;
  91. if (v) {
  92. this.textItem.show();
  93. } else {
  94. this.textItem.hide();
  95. }
  96. }
  97. /** 是否蒙版遮罩 */
  98. _maskFlag: boolean = false;
  99. get maskFlag(): boolean {
  100. return this._maskFlag;
  101. }
  102. set maskFlag(v: boolean) {
  103. if (v === this._maskFlag) {
  104. return
  105. }
  106. this._maskFlag = v;
  107. this.update()
  108. }
  109. /**
  110. * 构造函数
  111. *
  112. * @param parent 指向父对象
  113. * @param data 图例节点对象数据
  114. */
  115. constructor(parent: SGraphItem | null, data: Legend) {
  116. super(parent);
  117. this.textItem.originPosition = STextOrigin.Centrum;
  118. this.textItem.isTransform = false;
  119. this.zOrder = ItemOrder.polygonOrder - 0.00005;
  120. this.data = data;
  121. this.id = data.ID;
  122. this.name = data.Name;
  123. this.text = data.Name;
  124. if (data) {
  125. this.setPointList = [];
  126. let setPointList: SPoint[];
  127. if (data.OutLine) {
  128. if (data.OutLine[0] instanceof SPoint) {
  129. this.setPointList = data.OutLine;
  130. } else {
  131. setPointList = data.OutLine.map(i => {
  132. return (new SPoint(i.X, i.Y))
  133. })
  134. this.setPointList = setPointList;
  135. }
  136. }
  137. if (data.Properties.Zorder) {
  138. this.zOrder = data.Properties.Zorder;
  139. }
  140. // 设置线宽
  141. if (data.Properties.LineWidth) {
  142. this.lineWidth = data.Properties.LineWidth;
  143. }
  144. if (data.Properties.StrokeColor) {
  145. this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
  146. }
  147. if (data.Properties.FillColor) {
  148. this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor));
  149. }
  150. if (data.Properties.TextPos) {
  151. this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
  152. }
  153. if (data.Properties.color) {
  154. this.color = new SColor(data.Properties.color);
  155. }
  156. if (data.Properties.font) {
  157. this.font = new SFont("sans-serif", data.Properties.font);
  158. }
  159. if (data.Properties && data.Properties.IsActive) {
  160. this.isActive = data.Properties.IsActive;
  161. }
  162. if (data.AttachObjectIds && data.AttachObjectIds.length) {
  163. this.isActive = true;
  164. }
  165. switch (data.Properties.LineDash) {
  166. case "solid":
  167. this.lineStyle = SLineStyle.Solid;
  168. break;
  169. case "dotted":
  170. this.lineStyle = SLineStyle.Dotted;
  171. break;
  172. case "dashed":
  173. this.lineStyle = SLineStyle.Dashed;
  174. break;
  175. default:
  176. this.lineStyle = SLineStyle.Solid;
  177. }
  178. }
  179. // 监听多边形创建完成事件,并动态计算文本位置
  180. this.connect("finishCreated", this, () => {
  181. // 计算文本位置
  182. let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
  183. return pre + (cur.x / arr.length)
  184. }, 0),
  185. y: number = this.getPointList.reduce((pre, cur, index, arr) => {
  186. return pre + (cur.y / arr.length)
  187. }, 0);
  188. this.textItem.moveTo(x, y);
  189. })
  190. }
  191. /**
  192. * 鼠标按下事件
  193. *
  194. * @param event 保存事件参数
  195. * @return boolean
  196. */
  197. onMouseDown(event: SMouseEvent): boolean {
  198. if (event.buttons == 1)
  199. this.$emit("legendItemClick", event);
  200. super.onMouseDown(event);
  201. return true;
  202. } // Function onMouseDown()
  203. toData(): any {
  204. this.data.Pos = { X: this.x, Y: this.y };
  205. this.data.Name = this.name;
  206. this.data.Properties.Zorder = this.zOrder;
  207. this.data.Properties.FillColor = this.fillColor.value;
  208. this.data.Properties.StrokeColor = this.strokeColor.value;
  209. this.data.Properties.LineWidth = this.lineWidth;
  210. switch (this.lineStyle) {
  211. case SLineStyle.Solid:
  212. this.data.Properties.LineDash = "solid";
  213. break;
  214. case SLineStyle.Dotted:
  215. this.data.Properties.LineDash = "dotted";
  216. break;
  217. case SLineStyle.Dashed:
  218. this.data.Properties.LineDash = "dashed";
  219. break;
  220. default:
  221. this.data.Properties.LineDash = "solid";
  222. }
  223. this.data.OutLine = this.getPointList.map(pos => {
  224. return {
  225. X: pos.x,
  226. Y: pos.y
  227. }
  228. });
  229. this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
  230. this.data.Properties.font = this.font.size;
  231. this.data.Properties.color = this.color.value;
  232. this.data.Properties.IsActive = this.isActive;
  233. return this.data;
  234. }
  235. onDraw(painter: SPainter) {
  236. if (this.maskFlag && this.status == SItemStatus.Normal) {
  237. let color = new SColor(this.strokeColor)
  238. color.alpha = color.alpha / 5
  239. let brushcolor = new SColor(this.fillColor)
  240. brushcolor.alpha = brushcolor.alpha / 5
  241. painter.pen.color = color
  242. painter.pen.lineCapStyle = SLineCapStyle.Square
  243. painter.pen.lineWidth = painter.toPx(this.lineWidth)
  244. painter.brush.color = brushcolor
  245. if (this.selected) {
  246. painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
  247. painter.shadow.shadowBlur = 10;
  248. painter.shadow.shadowColor = new SColor(`#00000033`);
  249. painter.shadow.shadowOffsetX = 5;
  250. painter.shadow.shadowOffsetY = 5;
  251. }
  252. // @ts-ignore
  253. painter.drawPolygon([...this.pointList]);
  254. } else {
  255. super.onDraw(painter);
  256. }
  257. }
  258. } // Class SFHFQZoneLegendItem