circumference-drawer.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. import { CircumferenceModel } from "../models/circumference-model";
  2. import { PointDrawer } from "../../point-component/drawers/point-drawer";
  3. import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
  4. import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
  5. import { selector as Selector } from "../../../core/application/selector";
  6. import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
  7. import { objects as Objects } from "../../../core/application/objects";
  8. export class CircumferenceDrawer extends SelectableDrawer {
  9. constructor() {
  10. super();
  11. this.states = ["center", "radius"];
  12. this.state = undefined;
  13. this.circumference = undefined;
  14. this.pointDrawer = new PointDrawer();
  15. this.center;
  16. this.radius;
  17. this.centerAggregator;
  18. this.konvaObject;
  19. }
  20. draw(e) {
  21. if (
  22. e != undefined &&
  23. e.target != undefined &&
  24. e.target.attrs.class != undefined &&
  25. (e.target.attrs.class == ELEMENTS_CLASS.POINT ||
  26. e.target.attrs.class == ELEMENTS_CLASS.INTERSECTION_POINT)
  27. ) {
  28. this.drawByStates(e.target);
  29. return;
  30. }
  31. const points = Selector.getSelectedPoints();
  32. if (points == undefined || points.length == 0) {
  33. this.drawByStates();
  34. } else this.drawByPoints(points, undefined, e);
  35. }
  36. drawByPoints(points, aggregators, e) {
  37. if (aggregators == undefined)
  38. aggregators = Selector.getSelectedPointsAggregators();
  39. else {
  40. aggregators = [
  41. Objects.getByGenericObject(this.pointA)[0],
  42. Objects.getByGenericObject(this.pointB)[0]
  43. ];
  44. }
  45. this.centerAggregator = aggregators[0];
  46. this.radiusAggregator = aggregators[1];
  47. this.center = points[0];
  48. this.radius = points[1];
  49. this.createAndDraw(this.center, this.radius);
  50. this.reset();
  51. this.setStatus("");
  52. }
  53. drawByStates(konvaObject) {
  54. let aggregator = undefined;
  55. if (konvaObject != undefined) {
  56. aggregator = Objects.getByKonvaObject(konvaObject)[0];
  57. }
  58. if (this.state == undefined) {
  59. this.state = this.states[0];
  60. this.setStatus("Selecione o centro da Circunferência");
  61. } else if (this.state == this.states[0]) {
  62. this.centerAggregator =
  63. aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
  64. this.center = this.centerAggregator.genericObject;
  65. this.state = this.states[1];
  66. this.setStatus("Selecione o raio da Circunferência");
  67. } else if (this.state == this.states[1]) {
  68. this.radiusAggregator =
  69. aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
  70. this.radius = this.radiusAggregator.genericObject;
  71. this.createAndDraw(this.center, this.radius);
  72. this.reset();
  73. this.state = this.states[0];
  74. }
  75. }
  76. createAndDraw(center, radius) {
  77. this.center = center;
  78. this.radius = radius;
  79. this.circumference = new CircumferenceModel(this.center, this.radius);
  80. this.konvaObject = this.drawcircumference(this.circumference);
  81. const aggregator = new DrawerAggregator(
  82. this,
  83. this.circumference,
  84. this.konvaObject,
  85. ELEMENTS_CLASS.CIRCUMFERENCE
  86. );
  87. super.addAggregator(aggregator);
  88. this.centerAggregator.addAggregator(aggregator);
  89. this.radiusAggregator.addAggregator(aggregator);
  90. SelectableDrawer.drawObject(this.konvaObject);
  91. this.konvaObject.zIndex(0);
  92. super.batchDraw();
  93. return aggregator;
  94. }
  95. drawcircumference(circumference) {
  96. const circle = new Konva.Arc({
  97. x: circumference.center.posX,
  98. y: circumference.center.posY,
  99. innerRadius: circumference.getRadius(),
  100. outerRadius: circumference.getRadius(),
  101. angle: 360,
  102. fill: "grey",
  103. stroke: "grey",
  104. strokeWidth: 2,
  105. strokeScaleEnabled: false,
  106. transformEnabled: false,
  107. draggable: false,
  108. selectable: false,
  109. index: 0,
  110. class: ELEMENTS_CLASS.CIRCUMFERENCE,
  111. style: { stroke: "grey", fill: "grey" }
  112. });
  113. SelectableDrawer.setSelectableIfToolChanged(circle);
  114. return circle;
  115. }
  116. update(aggregator, e) {
  117. if (!aggregator.visible) return;
  118. const center = aggregator.genericObject.center;
  119. aggregator.konvaObject.innerRadius(aggregator.genericObject.getRadius());
  120. aggregator.konvaObject.outerRadius(aggregator.genericObject.getRadius());
  121. aggregator.konvaObject.x(center.posX);
  122. aggregator.konvaObject.y(center.posY);
  123. super.batchDraw();
  124. }
  125. }