line-segment-drawer.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  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() {
  46. const points = Selector.getSelectedPoints();
  47. if (points == undefined || points.length == 0) {
  48. this.drawByState();
  49. }
  50. this.drawByPoints(points);
  51. }
  52. drawByState() {
  53. if (this.state == undefined) {
  54. super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
  55. } else if (this.state == LineSegmentDrawer.FIRST_POINT_STATE) {
  56. const aggregator = this.pointDrawer.drawPoint();
  57. this.setAggregatorA(aggregator);
  58. super.setState(LineSegmentDrawer.SECOND_POINT_STATE);
  59. } else if (this.state == LineSegmentDrawer.SECOND_POINT_STATE) {
  60. const aggregator = this.pointDrawer.drawPoint();
  61. this.setAggregatorB(aggregator);
  62. this.drawByPoints(
  63. [this.pointA, this.pointB],
  64. [this.aggregatorA, this.aggregatorB]
  65. );
  66. super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
  67. }
  68. }
  69. drawByPoints(points, aggregators) {
  70. if (points == undefined || points.length < 1) return;
  71. this.setPointA(points[0]);
  72. this.setPointB(points[1]);
  73. if (aggregators == undefined)
  74. aggregators = Selector.getSelectedPointsAggregators();
  75. else {
  76. aggregators = [
  77. Objects.getByGenericObject(this.pointA)[0],
  78. Objects.getByGenericObject(this.pointB)[0]
  79. ];
  80. }
  81. this.label = Label.draw();
  82. this.lineSegment = new LineSegmentModel(
  83. this.pointA,
  84. this.pointB,
  85. this.label
  86. );
  87. const konvaObject = LineSegmentDrawer.getKonvaLine(
  88. this.pointA,
  89. this.pointB
  90. );
  91. super.setKonvaObject(konvaObject);
  92. const aggregator = new DrawerAggregator(
  93. this,
  94. this.lineSegment,
  95. this.konvaObject,
  96. ELEMENTS_CLASS.LINE_SEGMENT
  97. );
  98. super.addAggregator(aggregator);
  99. aggregators[1].addAggregator(aggregator);
  100. aggregators[0].addAggregator(aggregator);
  101. SelectableDrawer.drawObject(this.konvaObject);
  102. this.konvaObject.zIndex(1);
  103. super.batchDraw();
  104. SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
  105. SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
  106. this.reset();
  107. }
  108. update(aggregator, e) {
  109. if (!aggregator.visible) return;
  110. const pointA = aggregator.genericObject.pointA;
  111. const pointB = aggregator.genericObject.pointB;
  112. aggregator.konvaObject.points([
  113. pointA.posX,
  114. pointA.posY,
  115. pointB.posX,
  116. pointB.posY
  117. ]);
  118. super.batchDraw();
  119. }
  120. insertPoint(aggregator) {
  121. const pointA = aggregator.genericObject.pointA;
  122. const pointB = aggregator.genericObject.pointB;
  123. const pointCAggregator = this.pointDrawer.drawPoint();
  124. const pointC = pointCAggregator.genericObject;
  125. aggregator.konvaObject.points([
  126. pointA.posX,
  127. pointA.posY,
  128. pointB.posX,
  129. pointB.posY,
  130. pointC.posX,
  131. pointC.posY
  132. ]);
  133. super.batchDraw();
  134. }
  135. static getKonvaLine(pointA, pointB, useLabel) {
  136. const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
  137. const line = new Konva.Line({
  138. points: points,
  139. stroke: "grey",
  140. strokeWidth: 2,
  141. lineJoin: "round",
  142. draggable: false,
  143. strokeScaleEnabled: false,
  144. class: ELEMENTS_CLASS.LINE_SEGMENT,
  145. connections: [],
  146. index: 1,
  147. selectable: false,
  148. draggable: false,
  149. style: { stroke: "grey", fill: "grey" }
  150. });
  151. SelectableDrawer.setSelectableIfToolChanged(line);
  152. return line;
  153. }
  154. static drawKonvaLine(pointA, pointB) {
  155. const line = LineSegmentDrawer.getKonvaLine(pointA, pointB);
  156. return line;
  157. }
  158. }