line-segment.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. import { app as App } from "../app";
  2. import { menu as Menu } from "../core/components/menu";
  3. import { point as Point } from "./point";
  4. import { selector as Selector } from "../core/components/selector";
  5. import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
  6. export class LineSegment {
  7. static get STATE_PRIMEIRO_PONTO () {
  8. return "primeiro_ponto";
  9. }
  10. static get STATE_SEGUNDO_PONTO () {
  11. return "segundo_ponto";
  12. }
  13. constructor() {
  14. this._state = undefined;
  15. this._points = new Set();
  16. this._tool = {
  17. id: "line-segment",
  18. title: "Reta",
  19. icon: "line-segment",
  20. click: this.click,
  21. draw: this.draw,
  22. points: this.points,
  23. object: this
  24. };
  25. this.bootstrap();
  26. }
  27. draw (event) {
  28. console.log("chamou o método draw()");
  29. console.log("evento: ", event);
  30. let _this = this;
  31. if(event != null) {
  32. _this = event;
  33. }
  34. if(_this._state == null) {
  35. _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
  36. _this._points.clear();
  37. App.setStatus("Selecione o primeiro ponto no canvas");
  38. } else if (_this._state === LineSegment.STATE_PRIMEIRO_PONTO) {
  39. const pos = App.pos();
  40. _this._points.add({x: pos.x, y: pos.y});
  41. _this._state = LineSegment.STATE_SEGUNDO_PONTO;
  42. } else if (_this._state === LineSegment.STATE_SEGUNDO_PONTO) {
  43. const pos = App.pos();
  44. _this._points.add({x: pos.x, y: pos.y});
  45. _this.drawPoint(_this._points);
  46. _this._points.clear();
  47. _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
  48. }
  49. // let _this = e;
  50. // if (e == undefined) {
  51. // _this = this;
  52. // }
  53. // if (_this._state == undefined) {
  54. // _this._state = _this._states[0];
  55. // App.setStatus("Selecione o primeiro ponto no canvas");
  56. // } else if (_this._state == _this._states[0]) {
  57. // let pos = App.pos();
  58. // _this._points[0] = pos.x;
  59. // _this._points[1] = pos.y;
  60. // _this._state = _this._states[1];
  61. // App.setStatus("Selecione o segundo ponto no canvas");
  62. // } else if (_this._state == _this._states[1]) {
  63. // let pos = App.pos();
  64. // _this._points[2] = pos.x;
  65. // _this._points[3] = pos.y;
  66. // let p = _this._points.slice();
  67. // _this.drawPoint(p);
  68. // }
  69. }
  70. click(e) {
  71. console.log("chamou o método click()");
  72. let _this = e;
  73. if (e == undefined) {
  74. _this = this;
  75. }
  76. if (_this._state == LineSegment.STATE_PRIMEIRO_PONTO ||
  77. _this._state == LineSegment.STATE_SEGUNDO_PONTO) {
  78. App.clearSelectedTool();
  79. _this.clearState();
  80. return;
  81. }
  82. let objects = Selector.getPoints();
  83. if (
  84. _this._state == undefined &&
  85. objects != undefined &&
  86. objects.length > 0
  87. ) {
  88. let layer = App.currentLayer();
  89. let p = [];
  90. let ln = _this.createLine(p);
  91. objects.forEach(object => {
  92. object.attrs.connections.push(ln);
  93. p.push(object.x());
  94. p.push(object.y());
  95. object.parent.on("dragmove", () => {
  96. let p = [];
  97. p.push(object.x());
  98. p.push(object.y());
  99. //object.attrs.connections[0].points(p.slice());
  100. layer.batchDraw();
  101. });
  102. ln.points(p.slice());
  103. layer.batchDraw();
  104. });
  105. _this.drawPoint(p);
  106. App.clearSelectedTool();
  107. _this.clearState();
  108. return;
  109. }
  110. App.setSelectedTool(_this._tool);
  111. _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
  112. App.setStatus("Selecione o primeiro ponto no canvas");
  113. }
  114. clearState() {
  115. this._state = undefined;
  116. this._points.clear();
  117. }
  118. drawPoint (p) {
  119. const points = Array.from(p).map(xy => {
  120. return Point.drawPoint(xy.x, xy.y, true);
  121. });
  122. const points_xy = points.map( group => this.getPoint(group))
  123. .reduce((prev, next) => prev.concat([next.x(), next.y()]), []);
  124. let ln = this.createLine(points_xy);
  125. let layer = App.currentLayer();
  126. this.attachPoints(ln, points);
  127. layer.add(ln);
  128. App.stage.draw();
  129. //this.clearState();
  130. //App.clearSelectedTool();
  131. //App.setStatus("");
  132. return ln;
  133. }
  134. createLine (points) {
  135. return new Konva.Line({
  136. points: points,
  137. stroke: "grey",
  138. strokeWidth: 2,
  139. lineJoin: "round",
  140. draggable: false,
  141. strokeScaleEnabled: false,
  142. class: ELEMENTS_CLASS.LINE_SEGMENT,
  143. connections: []
  144. });
  145. }
  146. getPoint (group) {
  147. const point_collection = group.find(node => {
  148. return node.getClassName() === 'Circle';
  149. });
  150. return point_collection.toArray()[0];
  151. }
  152. attachPoints (line, points) {
  153. line._parents = []
  154. points.forEach( (p, idx)=> {
  155. line._parents.push(p);
  156. const point = this.getPoint(p);
  157. point._name = idx;
  158. if(!p._parents) {
  159. p._children = [];
  160. }
  161. p._children.push(line);
  162. p.on('dragmove', () => {
  163. App.clearSelectedTool();
  164. this.clearState();
  165. const current_points = line.points();
  166. const new_point = this.getPoint(p);
  167. const new_x = new_point.x() + p.x();
  168. const new_y = new_point.y() + p.y();
  169. if(new_point._name == 0) {
  170. // pos 0 ,1
  171. current_points[0] = new_x;
  172. current_points[1] = new_y;
  173. } else {
  174. current_points[2] = new_x;
  175. current_points[3] = new_y;
  176. }
  177. line.points(current_points);
  178. //App.stage.draw();
  179. });
  180. })
  181. }
  182. bootstrap() {
  183. Menu.add(this._tool);
  184. }
  185. }
  186. export const line_segment = new LineSegment();