123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198 |
- import { app as App } from "../app";
- import { menu as Menu } from "../core/components/menu";
- import { point as Point } from "./point";
- import { selector as Selector } from "../core/components/selector";
- import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
- export class LineSegment {
- static get STATE_PRIMEIRO_PONTO () {
- return "primeiro_ponto";
- }
- static get STATE_SEGUNDO_PONTO () {
- return "segundo_ponto";
- }
-
- constructor() {
- this._state = undefined;
- this._points = new Set();
- this._tool = {
- id: "line-segment",
- title: "Reta",
- icon: "line-segment",
- click: this.click,
- draw: this.draw,
- points: this.points,
- object: this
- };
- this.bootstrap();
- }
- draw (event) {
- console.log("chamou o método draw()");
- console.log("evento: ", event);
- let _this = this;
- if(event != null) {
- _this = event;
- }
- if(_this._state == null) {
- _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
- _this._points.clear();
- App.setStatus("Selecione o primeiro ponto no canvas");
- } else if (_this._state === LineSegment.STATE_PRIMEIRO_PONTO) {
- const pos = App.pos();
- _this._points.add({x: pos.x, y: pos.y});
- _this._state = LineSegment.STATE_SEGUNDO_PONTO;
- } else if (_this._state === LineSegment.STATE_SEGUNDO_PONTO) {
- const pos = App.pos();
- _this._points.add({x: pos.x, y: pos.y});
- _this.drawPoint(_this._points);
- _this._points.clear();
- _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
- }
- // let _this = e;
- // if (e == undefined) {
- // _this = this;
- // }
- // if (_this._state == undefined) {
- // _this._state = _this._states[0];
- // App.setStatus("Selecione o primeiro ponto no canvas");
- // } else if (_this._state == _this._states[0]) {
- // let pos = App.pos();
- // _this._points[0] = pos.x;
- // _this._points[1] = pos.y;
- // _this._state = _this._states[1];
- // App.setStatus("Selecione o segundo ponto no canvas");
- // } else if (_this._state == _this._states[1]) {
- // let pos = App.pos();
- // _this._points[2] = pos.x;
- // _this._points[3] = pos.y;
- // let p = _this._points.slice();
- // _this.drawPoint(p);
- // }
- }
- click(e) {
- console.log("chamou o método click()");
- let _this = e;
- if (e == undefined) {
- _this = this;
- }
- if (_this._state == LineSegment.STATE_PRIMEIRO_PONTO ||
- _this._state == LineSegment.STATE_SEGUNDO_PONTO) {
- App.clearSelectedTool();
- _this.clearState();
- return;
- }
- let objects = Selector.getPoints();
- if (
- _this._state == undefined &&
- objects != undefined &&
- objects.length > 0
- ) {
- let layer = App.currentLayer();
- let p = [];
- let ln = _this.createLine(p);
- objects.forEach(object => {
- object.attrs.connections.push(ln);
- p.push(object.x());
- p.push(object.y());
- object.parent.on("dragmove", () => {
- let p = [];
- p.push(object.x());
- p.push(object.y());
- //object.attrs.connections[0].points(p.slice());
- layer.batchDraw();
- });
- ln.points(p.slice());
- layer.batchDraw();
- });
- _this.drawPoint(p);
- App.clearSelectedTool();
- _this.clearState();
- return;
- }
- App.setSelectedTool(_this._tool);
- _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
- App.setStatus("Selecione o primeiro ponto no canvas");
- }
- clearState() {
- this._state = undefined;
- this._points.clear();
- }
- drawPoint (p) {
- const points = Array.from(p).map(xy => {
- return Point.drawPoint(xy.x, xy.y, true);
- });
- const points_xy = points.map( group => this.getPoint(group))
- .reduce((prev, next) => prev.concat([next.x(), next.y()]), []);
- let ln = this.createLine(points_xy);
- let layer = App.currentLayer();
- this.attachPoints(ln, points);
- layer.add(ln);
- App.stage.draw();
-
- //this.clearState();
- //App.clearSelectedTool();
- //App.setStatus("");
- return ln;
- }
- createLine (points) {
- return new Konva.Line({
- points: points,
- stroke: "grey",
- strokeWidth: 2,
- lineJoin: "round",
- draggable: false,
- strokeScaleEnabled: false,
- class: ELEMENTS_CLASS.LINE_SEGMENT,
- connections: []
- });
- }
- getPoint (group) {
- const point_collection = group.find(node => {
- return node.getClassName() === 'Circle';
- });
- return point_collection.toArray()[0];
- }
- attachPoints (line, points) {
- line._parents = []
- points.forEach( (p, idx)=> {
- line._parents.push(p);
- const point = this.getPoint(p);
- point._name = idx;
- if(!p._parents) {
- p._children = [];
- }
- p._children.push(line);
- p.on('dragmove', () => {
- App.clearSelectedTool();
- this.clearState();
- const current_points = line.points();
- const new_point = this.getPoint(p);
- const new_x = new_point.x() + p.x();
- const new_y = new_point.y() + p.y();
- if(new_point._name == 0) {
- // pos 0 ,1
- current_points[0] = new_x;
- current_points[1] = new_y;
- } else {
- current_points[2] = new_x;
- current_points[3] = new_y;
- }
- line.points(current_points);
- //App.stage.draw();
- });
- })
- }
- bootstrap() {
- Menu.add(this._tool);
- }
- }
- export const line_segment = new LineSegment();
|