line-segment-drawer.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
  2. import { label as Label } from "../../../component-registry/label";
  3. import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
  4. import { selector as Selector } from "../../../core/application/selector";
  5. import { LineSegmentModel } from "../models/line-segment-model";
  6. import { PointDrawer } from "../../point-component/drawers/point-drawer";
  7. import { objects as Objects } from "../../../core/application/objects";
  8. import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
  9. export class LineSegmentDrawer extends SelectableDrawer {
  10. static FIRST_POINT_STATE() {
  11. return "FIRST_POINT";
  12. }
  13. static SECOND_POINT_STATE() {
  14. return "SECOND_POINT";
  15. }
  16. constructor() {
  17. super();
  18. this.pointA;
  19. this.pointB;
  20. this.aggregatorA;
  21. this.aggregatorB;
  22. this.label;
  23. this.states = [
  24. LineSegmentDrawer.FIRST_POINT_STATE,
  25. LineSegmentDrawer.SECOND_POINT_STATE
  26. ];
  27. this.lineSegment;
  28. this.pointDrawer = new PointDrawer();
  29. super.setElementClass(ELEMENTS_CLASS.LINE_SEGMENT);
  30. }
  31. setPointA(point) {
  32. this.pointA = point;
  33. }
  34. setPointB(point) {
  35. this.pointB = point;
  36. }
  37. setAggregatorA(aggregator) {
  38. this.aggregatorA = aggregator;
  39. this.setPointA(aggregator.genericObject);
  40. }
  41. setAggregatorB(aggregator) {
  42. this.aggregatorB = aggregator;
  43. this.setPointB(aggregator.genericObject);
  44. }
  45. draw(e) {
  46. if (
  47. e != undefined &&
  48. e.target != undefined &&
  49. e.target.attrs.class != undefined &&
  50. (e.target.attrs.class == ELEMENTS_CLASS.POINT ||
  51. e.target.attrs.class == ELEMENTS_CLASS.INTERSECTION_POINT)
  52. ) {
  53. this.drawByStates(e.target);
  54. return;
  55. }
  56. const points = Selector.getSelectedPoints();
  57. if (points == undefined || points.length == 0) {
  58. this.drawByStates();
  59. return;
  60. }
  61. this.drawByPoints(points);
  62. }
  63. drawByStates(konvaObject) {
  64. let aggregator = undefined;
  65. if (konvaObject != undefined) {
  66. aggregator = Objects.getByKonvaObject(konvaObject)[0];
  67. }
  68. if (this.state == undefined) {
  69. super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
  70. } else if (this.state == LineSegmentDrawer.FIRST_POINT_STATE) {
  71. aggregator =
  72. aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
  73. this.setAggregatorA(aggregator);
  74. super.setState(LineSegmentDrawer.SECOND_POINT_STATE);
  75. } else if (this.state == LineSegmentDrawer.SECOND_POINT_STATE) {
  76. aggregator =
  77. aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
  78. this.setAggregatorB(aggregator);
  79. this.drawByPoints(
  80. [this.pointA, this.pointB],
  81. [this.aggregatorA, this.aggregatorB]
  82. );
  83. super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
  84. }
  85. }
  86. drawByPoints(points, aggregators) {
  87. if (points == undefined || points.length < 1) return;
  88. this.setPointA(points[0]);
  89. this.setPointB(points[1]);
  90. if (aggregators == undefined)
  91. aggregators = Selector.getSelectedPointsAggregators();
  92. else {
  93. aggregators = [
  94. Objects.getByGenericObject(this.pointA)[0],
  95. Objects.getByGenericObject(this.pointB)[0]
  96. ];
  97. }
  98. this.label = Label.draw();
  99. this.lineSegment = new LineSegmentModel(
  100. this.pointA,
  101. this.pointB,
  102. this.label
  103. );
  104. const konvaObject = LineSegmentDrawer.getKonvaLine(
  105. this.pointA,
  106. this.pointB
  107. );
  108. super.setKonvaObject(konvaObject);
  109. const aggregator = new DrawerAggregator(
  110. this,
  111. this.lineSegment,
  112. this.konvaObject,
  113. ELEMENTS_CLASS.LINE_SEGMENT
  114. );
  115. super.addAggregator(aggregator);
  116. aggregators[1].addAggregator(aggregator);
  117. aggregators[0].addAggregator(aggregator);
  118. SelectableDrawer.drawObject(this.konvaObject);
  119. this.konvaObject.zIndex(1);
  120. super.batchDraw();
  121. SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
  122. SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
  123. this.reset();
  124. }
  125. update(aggregator, e) {
  126. if (!aggregator.visible) return;
  127. const pointA = aggregator.genericObject.pointA;
  128. const pointB = aggregator.genericObject.pointB;
  129. aggregator.konvaObject.points([
  130. pointA.posX,
  131. pointA.posY,
  132. pointB.posX,
  133. pointB.posY
  134. ]);
  135. super.batchDraw();
  136. }
  137. insertPoint(aggregator) {
  138. const pointA = aggregator.genericObject.pointA;
  139. const pointB = aggregator.genericObject.pointB;
  140. const pointCAggregator = this.pointDrawer.drawPoint();
  141. const pointC = pointCAggregator.genericObject;
  142. aggregator.konvaObject.points([
  143. pointA.posX,
  144. pointA.posY,
  145. pointB.posX,
  146. pointB.posY,
  147. pointC.posX,
  148. pointC.posY
  149. ]);
  150. super.batchDraw();
  151. }
  152. static getKonvaLine(pointA, pointB, useLabel) {
  153. const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
  154. const line = new Konva.Line({
  155. points: points,
  156. stroke: "grey",
  157. strokeWidth: 2,
  158. lineJoin: "round",
  159. draggable: false,
  160. strokeScaleEnabled: false,
  161. class: ELEMENTS_CLASS.LINE_SEGMENT,
  162. connections: [],
  163. index: 1,
  164. selectable: false,
  165. draggable: false,
  166. style: { stroke: "grey", fill: "grey" }
  167. });
  168. SelectableDrawer.setSelectableIfToolChanged(line);
  169. return line;
  170. }
  171. static drawKonvaLine(pointA, pointB) {
  172. const line = LineSegmentDrawer.getKonvaLine(pointA, pointB);
  173. return line;
  174. }
  175. }