line-segment-drawer.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  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 (e != undefined) {
  47. if (
  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. } else if (e.attrs != undefined && e.attrs.genericObject != undefined) {
  56. this.drawByLineSegment(e.attrs.genericObject)
  57. return;
  58. }
  59. }
  60. const points = Selector.getSelectedPoints();
  61. if (points == undefined || points.length == 0) {
  62. this.drawByStates();
  63. return;
  64. }
  65. this.drawByPoints(points);
  66. }
  67. drawByStates(konvaObject) {
  68. let aggregator = undefined;
  69. if (konvaObject != undefined) {
  70. aggregator = Objects.getByKonvaObject(konvaObject)[0];
  71. }
  72. if (this.state == undefined) {
  73. super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
  74. } else if (this.state == LineSegmentDrawer.FIRST_POINT_STATE) {
  75. aggregator =
  76. aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
  77. this.setAggregatorA(aggregator);
  78. super.setState(LineSegmentDrawer.SECOND_POINT_STATE);
  79. } else if (this.state == LineSegmentDrawer.SECOND_POINT_STATE) {
  80. aggregator =
  81. aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
  82. this.setAggregatorB(aggregator);
  83. this.drawByPoints(
  84. [this.pointA, this.pointB],
  85. [this.aggregatorA, this.aggregatorB]
  86. );
  87. super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
  88. }
  89. }
  90. drawByPoints(points, aggregators) {
  91. if (points == undefined || points.length < 1) return;
  92. this.setPointA(points[0]);
  93. this.setPointB(points[1]);
  94. aggregators = this.resolveAggregators(points, aggregators, true);
  95. this.label = Label.draw();
  96. this.lineSegment = new LineSegmentModel(
  97. this.pointA,
  98. this.pointB,
  99. this.label
  100. );
  101. this.drawByLineSegment(this.lineSegment);
  102. this.reset();
  103. }
  104. drawByLineSegment(lineSegment) {
  105. this.lineSegment = lineSegment;
  106. const konvaObject = LineSegmentDrawer.getKonvaLine(
  107. lineSegment.pointA,
  108. lineSegment.pointB
  109. );
  110. super.setKonvaObject(konvaObject);
  111. const aggregator = new DrawerAggregator(
  112. this,
  113. this.lineSegment,
  114. this.konvaObject,
  115. ELEMENTS_CLASS.LINE_SEGMENT
  116. );
  117. super.addAggregator(aggregator);
  118. const aggregators = this.resolveAggregators([this.lineSegment.pointA, this.lineSegment.pointB], undefined);
  119. aggregators[1].addAggregator(aggregator);
  120. aggregators[0].addAggregator(aggregator);
  121. SelectableDrawer.drawObject(this.konvaObject);
  122. this.konvaObject.zIndex(1);
  123. super.batchDraw();
  124. SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
  125. SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
  126. }
  127. resolveAggregators(points, aggregators, selected) {
  128. this.pointA = points[0];
  129. this.pointB = points[1];
  130. if (aggregators == undefined && selected == true)
  131. aggregators = Selector.getSelectedPointsAggregators();
  132. else {
  133. aggregators = [
  134. Objects.getByGenericObject(this.pointA)[0],
  135. Objects.getByGenericObject(this.pointB)[0]
  136. ];
  137. }
  138. return aggregators;
  139. }
  140. update(aggregator, e) {
  141. if (!aggregator.visible) return;
  142. const pointA = aggregator.genericObject.pointA;
  143. const pointB = aggregator.genericObject.pointB;
  144. aggregator.konvaObject.points([
  145. pointA.posX,
  146. pointA.posY,
  147. pointB.posX,
  148. pointB.posY
  149. ]);
  150. super.batchDraw();
  151. }
  152. insertPoint(aggregator) {
  153. const pointA = aggregator.genericObject.pointA;
  154. const pointB = aggregator.genericObject.pointB;
  155. const pointCAggregator = this.pointDrawer.drawPoint();
  156. const pointC = pointCAggregator.genericObject;
  157. aggregator.konvaObject.points([
  158. pointA.posX,
  159. pointA.posY,
  160. pointB.posX,
  161. pointB.posY,
  162. pointC.posX,
  163. pointC.posY
  164. ]);
  165. super.batchDraw();
  166. }
  167. static getKonvaLine(pointA, pointB, useLabel) {
  168. const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
  169. const line = new Konva.Line({
  170. points: points,
  171. stroke: "grey",
  172. strokeWidth: 2,
  173. lineJoin: "round",
  174. draggable: false,
  175. strokeScaleEnabled: false,
  176. class: ELEMENTS_CLASS.LINE_SEGMENT,
  177. connections: [],
  178. index: 1,
  179. selectable: false,
  180. draggable: false,
  181. style: { stroke: "grey", fill: "grey" }
  182. });
  183. SelectableDrawer.setSelectableIfToolChanged(line);
  184. return line;
  185. }
  186. static drawKonvaLine(pointA, pointB) {
  187. const line = LineSegmentDrawer.getKonvaLine(pointA, pointB);
  188. return line;
  189. }
  190. }