point-drawer.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
  2. import { label as Label } from "../../../component-registry/label";
  3. import { app as App } from "../../../app";
  4. import { PointModel } from "../models/point-model";
  5. import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
  6. import { objects } from "../../../core/application/objects";
  7. import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
  8. const STYLE = {
  9. fill: "#9bc364",
  10. fill2: "#828783",
  11. strokeWidth: 1,
  12. stroke: "#9bc364"
  13. };
  14. export class PointDrawer extends SelectableDrawer {
  15. constructor() {
  16. super();
  17. this.point;
  18. this.label;
  19. this.text;
  20. this.states = ["center"];
  21. super.setElementClass(ELEMENTS_CLASS.POINT);
  22. }
  23. draw(e) {
  24. if (e != undefined && e.attrs != undefined && e.attrs.genericObject != undefined) {
  25. const aggregator = this.drawPoint(e.attrs.genericObject);
  26. return aggregator;
  27. }
  28. if (this.state == undefined) {
  29. super.setState(this.states[0]);
  30. App.setStatus("Selecione o centro do Ponto");
  31. }
  32. if (this.state == this.states[0]) {
  33. App.setStatus("Selecione o centro do Ponto");
  34. const aggregator = this.drawPoint();
  35. super.setState(this.states[0]);
  36. return aggregator;
  37. }
  38. }
  39. drawPoint(point) {
  40. const pos = App.pos();
  41. let drawResult;
  42. if (point == undefined) {
  43. if (pos == undefined) return;
  44. drawResult = PointDrawer.drawAndGetPoint(pos.x, pos.y, true);
  45. } else drawResult = PointDrawer.drawPoint(point, true);
  46. this.point = drawResult.geometricObject;
  47. super.setKonvaObject(drawResult.konvaObject);
  48. const aggregator = new DrawerAggregator(
  49. this,
  50. this.point,
  51. this.konvaObject,
  52. ELEMENTS_CLASS.POINT
  53. );
  54. super.addAggregator(aggregator);
  55. this.konvaObject.on("dragmove", aggregator.update.bind(aggregator));
  56. return aggregator;
  57. }
  58. update(aggregator, event) {
  59. aggregator.konvaObject.children.forEach(function (element) {
  60. if (element.attrs.class == ELEMENTS_CLASS.POINT) {
  61. aggregator.genericObject.update(element, event);
  62. }
  63. });
  64. }
  65. inserPointInLineSegment(konvaObject) {
  66. const drawerAggregators = objects.getByKonvaObject(konvaObject);
  67. if (drawerAggregators == undefined || drawerAggregators.length == 0) return;
  68. const drawerAggregator = drawerAggregators[0];
  69. drawerAggregator.drawer.insertPoint(drawerAggregator);
  70. }
  71. static drawAndGetPoint(x, y, useLabel) {
  72. return PointDrawer.drawPoint(new PointModel(x, y), useLabel);
  73. }
  74. static drawPoint(point, useLabel, draggable, selectable) {
  75. const group = SelectableDrawer.getKonvaGroup(draggable);
  76. const circle = PointDrawer.getKonvaCircle(point, draggable, selectable);
  77. if (useLabel != undefined && useLabel) {
  78. const label = Label.draw();
  79. point.setLabel(label);
  80. const text = PointDrawer.getKonvaText(point, label);
  81. group.add(text);
  82. }
  83. if (selectable == undefined || selectable)
  84. SelectableDrawer.setSelectable(circle);
  85. if (useLabel) {
  86. group.add(circle);
  87. SelectableDrawer.drawObject(group);
  88. SelectableDrawer.setMaxIndex(group);
  89. return { geometricObject: point, konvaObject: group };
  90. } else {
  91. SelectableDrawer.drawObject(circle);
  92. SelectableDrawer.setMaxIndex(circle);
  93. return { geometricObject: point, konvaObject: circle };
  94. }
  95. }
  96. static getKonvaCircle(point, draggable, selectable) {
  97. const fill = draggable == undefined || draggable ? STYLE.fill : STYLE.fill2;
  98. const stroke =
  99. draggable == undefined || draggable ? STYLE.stroke : STYLE.fill2;
  100. return new Konva.Circle({
  101. x: point.posX,
  102. y: point.posY,
  103. radius: 5,
  104. fill: fill,
  105. stroke: fill,
  106. strokeWidth: 1,
  107. strokeScaleEnabled: false,
  108. draggable: false,
  109. resizeEnabled: false,
  110. transformEnabled: false,
  111. style: { fill: fill, stroke: stroke },
  112. class: ELEMENTS_CLASS.POINT,
  113. connections: [],
  114. startPosX: point.posX,
  115. startPosY: point.posY,
  116. listening: true,
  117. selectable: selectable
  118. });
  119. }
  120. static getKonvaText(point, label) {
  121. return new Konva.Text({
  122. x: point.posX + 10,
  123. y: point.posY - 10,
  124. text: label,
  125. fontSize: 14,
  126. fontFamily: "Calibri",
  127. fill: "#434a45",
  128. stroke: "#ffffff",
  129. strokeWidth: 0.2,
  130. draggable: false,
  131. resizeEnabled: false,
  132. transformEnabled: false,
  133. selectable: false
  134. });
  135. }
  136. }