SZoneLegendItem.ts 9.0 KB

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