SZoneLegendItem.js 5.1 KB

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