SZoneLegendItem.js 6.2 KB

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