SSCPZZoneLegendItem.ts 8.7 KB

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