point.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import { app as App } from "../app";
  2. import { label as Label } from "./label";
  3. import { menu as Menu } from "../core/application/menu";
  4. import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
  5. const HOVER_STYLE = {
  6. fill: "#9bc364",
  7. strokeWidth: 2,
  8. stroke: "#FF0000"
  9. };
  10. export const point = (function() {
  11. let style = {
  12. fill: "#9bc364",
  13. strokeWidth: 1,
  14. stroke: "#9bc364"
  15. };
  16. let _tool = {};
  17. let states = ["center"];
  18. let state = undefined;
  19. let points = [0, 0];
  20. function _draw(e) {
  21. if (state == undefined) {
  22. state = states[0];
  23. App.setStatus("Selecione o centro do Ponto");
  24. } else if (state == states[0]) {
  25. let pos = App.pos();
  26. this.points[0] = pos.x;
  27. this.points[1] = pos.y;
  28. let p = this.points.slice();
  29. this.drawPoint(p[0], p[1], true);
  30. state = undefined;
  31. App.clearSelectedTool();
  32. App.setStatus("");
  33. }
  34. }
  35. function _bootstrap() {
  36. Menu.add(_tool);
  37. }
  38. function _drawPoint(x, y, useLabel) {
  39. let group = new Konva.Group({
  40. draggable: true,
  41. resizeEnabled: false
  42. });
  43. let circle = new Konva.Circle({
  44. x: x,
  45. y: y,
  46. radius: 5,
  47. fill: "#9bc364",
  48. stroke: "#9bc364",
  49. strokeWidth: 1,
  50. strokeScaleEnabled: false,
  51. draggable: false,
  52. resizeEnabled: false,
  53. transformEnabled: false,
  54. style: style,
  55. class: ELEMENTS_CLASS.POINT,
  56. connections: [],
  57. listening: true
  58. });
  59. // mouse over event
  60. circle.on("mouseover", function() {
  61. this.strokeWidth(HOVER_STYLE.strokeWidth);
  62. this.stroke(HOVER_STYLE.stroke);
  63. App.stage.draw();
  64. });
  65. circle.on("mouseout", function() {
  66. this.strokeWidth(style.strokeWidth);
  67. this.stroke(style.stroke);
  68. App.stage.draw();
  69. });
  70. let text = new Konva.Text({
  71. x: x + 10,
  72. y: y - 10,
  73. text: Label.draw(),
  74. fontSize: 12,
  75. fontFamily: "Calibri",
  76. fill: "#434a45",
  77. draggable: false,
  78. resizeEnabled: false,
  79. transformEnabled: false,
  80. selectable: false
  81. });
  82. group.add(circle);
  83. if (useLabel != undefined && useLabel) {
  84. group.add(text);
  85. }
  86. let layer = App.currentLayer();
  87. layer.add(group);
  88. App.stage.draw();
  89. App.pushObject(group);
  90. return group;
  91. }
  92. function _click(e) {
  93. if (state == states[0]) {
  94. App.clearSelectedTool();
  95. _clearState();
  96. return;
  97. }
  98. App.setSelectedTool(_tool);
  99. state = states[0];
  100. App.setStatus("Selecione o centro da Ponto");
  101. }
  102. function _clearState() {
  103. state = undefined;
  104. }
  105. _tool = {
  106. id: "point",
  107. title: "Ponto",
  108. icon: "point",
  109. click: _click,
  110. draw: _draw,
  111. drawPoint: _drawPoint,
  112. points: points
  113. };
  114. _bootstrap();
  115. return {
  116. draw: _draw,
  117. click: _click,
  118. drawPoint: _drawPoint
  119. };
  120. })();