SZoneLegendItem.ts 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import { SGraphItem } from "@saga-web/graph/lib";
  2. import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
  3. import { Legend } from '../types/Legend';
  4. import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
  5. import { STextItem } from '@saga-web/graph/lib';
  6. import { hexify } from "@/components/mapClass/until"
  7. import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
  8. /**
  9. * 图例节点Item(区域类型)
  10. *
  11. * * @author 张宇(taohuzy@163.com)
  12. */
  13. export class SZoneLegendItem 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(): string {
  26. return this.textItem.color;
  27. }
  28. set color(v: string) {
  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. console.log("多边形item", this);
  65. console.log("文本item", this.textItem);
  66. };
  67. /** 是否显示文字 */
  68. _showText: boolean = true;
  69. get showText(): boolean {
  70. return this._showText;
  71. }
  72. set showText(v: boolean) {
  73. if (v === this._showText) {
  74. return
  75. }
  76. this._showText = v;
  77. if (v) {
  78. this.textItem.show();
  79. } else {
  80. this.textItem.hide();
  81. }
  82. }
  83. /**
  84. * 构造函数
  85. *
  86. * @param parent 指向父对象
  87. * @param data 图例节点对象数据
  88. */
  89. constructor(parent: SGraphItem | null, data: Legend) {
  90. super(parent);
  91. this.data = data;
  92. this.id = data.ID;
  93. this.name = data.Name;
  94. this.font = new SFont("sans-serif", 2);
  95. if (data) {
  96. this.setPointList = [];
  97. let setPointList: SPoint[];
  98. if (data.OutLine) {
  99. if (data.OutLine[0] instanceof SPoint) {
  100. this.setPointList = data.OutLine;
  101. } else {
  102. setPointList = data.OutLine.map(i => {
  103. return (new SPoint(i.X, i.Y))
  104. })
  105. this.setPointList = setPointList;
  106. }
  107. }
  108. if (data.Properties.Text) {
  109. this.text = data.Properties.Text;
  110. }
  111. // 设置线宽
  112. if (data.Properties.LineWidth) {
  113. this.lineWidth = data.Properties.LineWidth
  114. }
  115. if (data.Properties.strokeColor) {
  116. this.strokeColor = data.Properties.strokeColor.includes('#') ? new SColor(data.Properties.strokeColor) : new SColor(hexify(data.Properties.strokeColor));
  117. }
  118. if (data.Properties.fillColor) {
  119. this.fillColor = data.Properties.fillColor.includes('#') ? new SColor(data.Properties.fillColor) : new SColor(hexify(data.Properties.fillColor))
  120. }
  121. if (data.Properties.TextPos) {
  122. this.textItem.moveTo(data.Properties.TextPos.x, data.Properties.TextPos.y);
  123. }
  124. // if( data.Properties.LineDash){
  125. // this.LineDash =this._legend.Properties.LineDash
  126. // }
  127. }
  128. // 监听多边形创建完成事件,并动态计算文本位置
  129. this.connect("finishCreated",this, () => {
  130. // 计算文本位置
  131. let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
  132. return pre + (cur.x / arr.length)
  133. }, 0),
  134. y: number = this.getPointList.reduce((pre, cur, index, arr) => {
  135. return pre + (cur.y / arr.length)
  136. }, 0);
  137. this.textItem.moveTo(x, y);
  138. })
  139. }
  140. toData(): any {
  141. this.data.Pos = {X: this.x, Y: this.y};
  142. this.data.Properties.Text = this.text;
  143. this.data.Properties.fillColor = this.fillColor.value;
  144. this.data.Properties.strokeColor = this.strokeColor.value;
  145. this.data.Properties.lineWidth = this.lineWidth;
  146. this.data.OutLine = this.getPointList.map(pos => {
  147. return {
  148. X: pos.x,
  149. Y: pos.y
  150. }
  151. });
  152. this.data.Properties.TextPos = this.textItem.pos;
  153. return this.data;
  154. }
  155. } // Class SZoneLegendItem