line drawer

src/app/component-registry/line-component.js

@@ -0,0 +1,15 @@
+import { Component } from "../core/models/components/component";
+import { ComponentOptions } from "../core/models/components/component-options";
+import { LineDrawer } from "../components/line-component/drawers/line-drawer";
+class LineComponent extends Component {
+  constructor() {
+    const options = new ComponentOptions(
+      "aa5962d0-8f90-45b3-91db-61e0de6809ae",
+      "Line",
+      "line"
+    );
+    super(new LineDrawer(), options);
+  }
+}
+
+export const lineComponent = new LineComponent();

src/app/component-registry/line-segment-component.js

@@ -5,7 +5,7 @@ class LineSegmentComponent extends Component {
   constructor() {
     const options = new ComponentOptions(
       "0566268b76d744f28c79e482e26fab3a",
-      "Line",
+      "Line Segment",
       "line-segment"
     );
     super(new LineSegmentDrawer(), options);

src/app/components/line-component/drawers/line-drawer.js

@@ -0,0 +1,174 @@
+import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
+import { label as Label } from "../../../component-registry/label";
+import { LineModel } from "../models/line-model";
+import { objects as Objects } from "../../../core/application/objects";
+import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
+import { LineSegmentDrawer } from "../../line-segment-component/drawers/line-segment-drawer";
+import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
+import { LineSegmentModel } from "../../line-segment-component/models/line-segment-model";
+
+export class LineDrawer extends LineSegmentDrawer {
+  constructor() {
+    super();
+    this.setElementClass(ELEMENTS_CLASS.LINE);
+  }
+  drawByStates(konvaObject) {
+    let aggregator = undefined;
+    if (konvaObject != undefined) {
+      aggregator = Objects.getByKonvaObject(konvaObject)[0];
+    }
+    if (this.state == undefined) {
+      super.setState(LineDrawer.FIRST_POINT_STATE);
+    } else if (this.state == LineDrawer.FIRST_POINT_STATE) {
+      aggregator =
+        aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
+      this.setAggregatorA(aggregator);
+      super.setState(LineDrawer.SECOND_POINT_STATE);
+    } else if (this.state == LineDrawer.SECOND_POINT_STATE) {
+      aggregator =
+        aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
+      this.setAggregatorB(aggregator);
+      this.drawByPoints(
+        [this.pointA, this.pointB],
+        [this.aggregatorA, this.aggregatorB]
+      );
+      super.setState(LineDrawer.FIRST_POINT_STATE);
+    }
+  }
+
+  drawByLineSegment(lineSegment) {
+    this.lineSegment = lineSegment;
+    const group = SelectableDrawer.getKonvaGroup(false);
+    const text = LineDrawer.getKonvaText(lineSegment, lineSegment.label);
+    group.add(text);
+    const konvaObject = LineDrawer.getKonvaLine(
+      lineSegment.pointA,
+      lineSegment.pointB
+    );
+    group.add(konvaObject);
+    super.setKonvaObject(group);
+    const aggregator = new DrawerAggregator(
+      this,
+      this.lineSegment,
+      group,
+      ELEMENTS_CLASS.LINE
+    );
+    super.addAggregator(aggregator);
+    const aggregators = this.resolveAggregators([this.lineSegment.pointA, this.lineSegment.pointB], undefined);
+    aggregators[1].addAggregator(aggregator);
+    aggregators[0].addAggregator(aggregator);
+    SelectableDrawer.drawObject(this.konvaObject);
+    this.konvaObject.zIndex(1);
+    super.batchDraw();
+    SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
+    SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
+  }
+
+  drawByPoints(points, aggregators) {
+    if (points == undefined || points.length < 1) return;
+    this.setPointA(points[0]);
+    this.setPointB(points[1]);
+    aggregators = this.resolveAggregators(points, aggregators, true);
+    this.label = Label.draw(true);
+    this.lineSegment = new LineModel(
+      this.pointA,
+      this.pointB,
+      this.label
+    );
+    this.drawByLineSegment(this.lineSegment);
+    this.reset();
+  }
+
+
+  update(aggregator, e) {
+    if (!aggregator.visible) return;
+    const pointA = aggregator.genericObject.pointA;
+    const pointB = aggregator.genericObject.pointB;
+    const pos = aggregator.genericObject.getMiddlePoint();
+    aggregator.konvaObject.children[0].x(pos.posX);
+    aggregator.konvaObject.children[0].y(pos.posY - 20);
+    super.batchDra
+    aggregator.konvaObject.children[1].points([
+      pointA.posX,
+      pointA.posY,
+      pointB.posX,
+      pointB.posY
+    ]);
+    super.batchDraw();
+  }
+
+  // insertPoint(aggregator) {
+  //   const pointA = aggregator.genericObject.pointA;
+  //   const pointB = aggregator.genericObject.pointB;
+  //   const pointCAggregator = this.pointDrawer.drawPoint();
+  //   const pointC = pointCAggregator.genericObject;
+  //   aggregator.konvaObject.points([
+  //     pointA.posX,
+  //     pointA.posY,
+  //     pointB.posX,
+  //     pointB.posY,
+  //     pointC.posX,
+  //     pointC.posY
+  //   ]);
+  //   super.batchDraw();
+  // }
+
+  static getKonvaLine(pointA, pointB, useLabel) {
+
+    const lineSegment = new LineSegmentModel(pointA, pointB);
+
+
+    const xA = pointA.posX,
+      xB = pointB.posX,
+      yA = pointA.posY,
+      yB = pointB.posY;
+
+
+
+    // x0 - x
+    const d1 = xB - xA,
+      // y0 - y
+      d2 = yB - yA;
+
+    // const dA = d1 * xA + d2 * yA;
+    // const dB = d1 * xB + d2 * yB;
+
+
+    const a = -d1 / d2;
+    const b = (a * xA) * -1;
+
+    // y =  ax + b;
+
+    const Qy = -d1 / d2 * 0 + b;
+    const Px = (0 - b) / a;
+
+
+    const points = [Px, 0, 0, Qy];
+
+
+    const line = new Konva.Line({
+      points: points,
+      stroke: "grey",
+      strokeWidth: 2,
+      lineJoin: "round",
+      draggable: false,
+      strokeScaleEnabled: false,
+      class: ELEMENTS_CLASS.LINE,
+      connections: [],
+      index: 1,
+      selectable: false,
+      draggable: false,
+      style: { stroke: "grey", fill: "grey" }
+    });
+
+    SelectableDrawer.setSelectableIfIntersectionChanged(line);
+
+    return line;
+  }
+
+  static drawKonvaLine(pointA, pointB) {
+    const line = LineDrawer.getKonvaLine(pointA, pointB);
+    return line;
+  }
+
+}

src/app/components/line-component/models/line-model.js

@@ -0,0 +1,20 @@
+
+import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
+import { LineSegmentModel } from "../../line-segment-component/models/line-segment-model";
+export class LineModel extends LineSegmentModel {
+  constructor(pointA, pointB, label, id) {
+    super(pointA, pointB, label, id);
+    this.setClass(ELEMENTS_CLASS.LINE);
+  }
+
+  static do(map, list) {
+    const id = map.get("id");
+    const pointAId = map.get("param")[0];
+    const pointBId = map.get("param")[1];
+    const pointA = list.find(x => x.id === pointAId);
+    const pointB = list.find(x => x.id === pointBId);
+    const label = map.get("label")[0];
+    return new LineModel(pointA, pointB, label, id);
+  }
+}
+

src/app/components/line-segment-component/models/line-segment-model.js

@@ -2,188 +2,188 @@ import { GeometricObject } from "../../../core/models/objects/geometric-object";
 import { IntersectionModel } from "../../intersection-component/models/intersection-model";
 import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
 export class LineSegmentModel extends GeometricObject {
-  constructor(pointA, pointB, label, id) {
-    super(id);
-    this.pointA = pointA;
-    this.pointB = pointB;
-    this.setLabel(label);
-    super.setClass(ELEMENTS_CLASS.LINE_SEGMENT);
-    this.definitions.push(this.pointA);
-    this.definitions.push(this.pointB);
-  }
-  getStraight() {
-    const aX = this.pointA.posX;
-    const aY = this.pointA.posY;
-    const bX = this.pointB.posX;
-    const bY = this.pointB.posY;
-    const a = bY - aY;
-    const b = aX - bX;
-    const c = a * aX + b * aY;
-    return [a, b, c];
-  }
-  getDirection() {
-    const aX = this.pointA.posX;
-    const aY = this.pointA.posY;
-    const bX = this.pointB.posX;
-    const bY = this.pointB.posY;
-    const a = bX - aX;
-    const b = bY - aY;
-    return [a, b];
-  }
-
-
-  getMiddlePoint() {
-    const x = (this.pointA.posX + this.pointB.posX) / 2;
-    const y = (this.pointA.posY + this.pointB.posY) / 2;
-    return { posX: x, posY: y };
-  }
-  getIntersection(geometricObject) {
-    switch (geometricObject.elementClass) {
-      case ELEMENTS_CLASS.LINE_SEGMENT:
-        return this.getIntersectionByLine(geometricObject);
-      case ELEMENTS_CLASS.CIRCUMFERENCE:
-        return this.getIntersectionByCircumference(geometricObject);
-      default:
-        break;
+    constructor(pointA, pointB, label, id) {
+        super(id);
+        this.pointA = pointA;
+        this.pointB = pointB;
+        this.setLabel(label);
+        super.setClass(ELEMENTS_CLASS.LINE_SEGMENT);
+        this.definitions.push(this.pointA);
+        this.definitions.push(this.pointB);
     }
-  }
-  getDeterminantByLine(lineSegment) {
-    const r = this.getStraight();
-    const s = lineSegment.getStraight();
-    const a1 = r[0];
-    const b1 = r[1];
-    const a2 = s[0];
-    const b2 = s[1];
-    const determinant = a1 * b2 - a2 * b1;
-    return determinant;
-  }
-  getIntersectionByLine(lineSegment) {
-    const r = this.getStraight();
-    const s = lineSegment.getStraight();
-    const a1 = r[0];
-    const b1 = r[1];
-    const c1 = r[2];
-    const a2 = s[0];
-    const b2 = s[1];
-    const c2 = s[2];
-    const determinant = a1 * b2 - a2 * b1;
-    if (determinant == 0) {
-      return [
-        new IntersectionModel(
-          Number.MAX_SAFE_INTEGER,
-          Number.MAX_SAFE_INTEGER,
-          undefined,
-          this,
-          lineSegment,
-          true,
-          0
-        )
-      ];
-    } else {
-      const x = (b2 * c1 - b1 * c2) / determinant;
-      const y = (a1 * c2 - a2 * c1) / determinant;
-      return [new IntersectionModel(x, y, undefined, this, lineSegment, true, 0)];
+    getStraight() {
+        const aX = this.pointA.posX;
+        const aY = this.pointA.posY;
+        const bX = this.pointB.posX;
+        const bY = this.pointB.posY;
+        const a = bY - aY;
+        const b = aX - bX;
+        const c = a * aX + b * aY;
+        return [a, b, c];
+    }
+    getDirection() {
+        const aX = this.pointA.posX;
+        const aY = this.pointA.posY;
+        const bX = this.pointB.posX;
+        const bY = this.pointB.posY;
+        const a = bX - aX;
+        const b = bY - aY;
+        return [a, b];
     }
-  }
 
-  getIntersectionByCircumference(circumference) {
 
-    const pointA = this.pointA;
-    const pointB = this.pointB;
-    const center = circumference.center;
-    const radius = circumference.getRadius();
+    getMiddlePoint() {
+        const x = (this.pointA.posX + this.pointB.posX) / 2;
+        const y = (this.pointA.posY + this.pointB.posY) / 2;
+        return { posX: x, posY: y };
+    }
+    getIntersection(geometricObject) {
+        switch (geometricObject.elementClass) {
+            case ELEMENTS_CLASS.LINE_SEGMENT:
+                return this.getIntersectionByLine(geometricObject);
+            case ELEMENTS_CLASS.CIRCUMFERENCE:
+                return this.getIntersectionByCircumference(geometricObject);
+            default:
+                break;
+        }
+    }
+    getDeterminantByLine(lineSegment) {
+        const r = this.getStraight();
+        const s = lineSegment.getStraight();
+        const a1 = r[0];
+        const b1 = r[1];
+        const a2 = s[0];
+        const b2 = s[1];
+        const determinant = a1 * b2 - a2 * b1;
+        return determinant;
+    }
+    getIntersectionByLine(lineSegment) {
+        const r = this.getStraight();
+        const s = lineSegment.getStraight();
+        const a1 = r[0];
+        const b1 = r[1];
+        const c1 = r[2];
+        const a2 = s[0];
+        const b2 = s[1];
+        const c2 = s[2];
+        const determinant = a1 * b2 - a2 * b1;
+        if (determinant == 0) {
+            return [
+                new IntersectionModel(
+                    Number.MAX_SAFE_INTEGER,
+                    Number.MAX_SAFE_INTEGER,
+                    undefined,
+                    this,
+                    lineSegment,
+                    true,
+                    0
+                )
+            ];
+        } else {
+            const x = (b2 * c1 - b1 * c2) / determinant;
+            const y = (a1 * c2 - a2 * c1) / determinant;
+            return [new IntersectionModel(x, y, undefined, this, lineSegment, true, 0)];
+        }
+    }
 
-    const dx = pointB.posX - pointA.posX;
-    const dy = pointB.posY - pointA.posY;
+    getIntersectionByCircumference(circumference) {
 
-    const cx = center.posX - pointA.posX;
-    const cy = center.posY - pointA.posY;
+        const pointA = this.pointA;
+        const pointB = this.pointB;
+        const center = circumference.center;
+        const radius = circumference.getRadius();
 
-    const a = dx * dx + dy * dy;
-    const b = dx * cx + dy * cy;
-    const c = cx * cx + cy * cy - radius * radius;
+        const dx = pointB.posX - pointA.posX;
+        const dy = pointB.posY - pointA.posY;
 
-    const D = b / a;
-    const q = c / a;
+        const cx = center.posX - pointA.posX;
+        const cy = center.posY - pointA.posY;
 
-    const delta = D * D - q;
+        const a = dx * dx + dy * dy;
+        const b = dx * cx + dy * cy;
+        const c = cx * cx + cy * cy - radius * radius;
 
-    const PA = new IntersectionModel(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 0);
-    const PB = new IntersectionModel(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 1);
+        const D = b / a;
+        const q = c / a;
 
-    if (delta < 0) {
-      return [
-        PA,
-        PB
-      ];
-    }
+        const delta = D * D - q;
 
-    const deltaSqrt = Math.sqrt(delta);
-    const root1 = -D + deltaSqrt;
-    const root2 = -D - deltaSqrt;
-    const x1 = pointA.posX - dx * root1
-    const y1 = pointA.posY - dy * root1;
-
-    if (delta == 0) {
-      PA.bind(x1, y1, undefined, this, circumference, true, 0);
-      return [
-        PA,
-        PB
-      ];
-    }
+        const PA = new IntersectionModel(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 0);
+        const PB = new IntersectionModel(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 1);
 
-    const x2 = pointA.posX - dx * root2;
-    const y2 = pointA.posY - dy * root2;
+        if (delta < 0) {
+            return [
+                PA,
+                PB
+            ];
+        }
 
-    PA.bind(x1, y1, undefined, this, circumference, true, 0);
-    PB.bind(x2, y2, undefined, this, circumference, true, 1);
+        const deltaSqrt = Math.sqrt(delta);
+        const root1 = -D + deltaSqrt;
+        const root2 = -D - deltaSqrt;
+        const x1 = pointA.posX - dx * root1
+        const y1 = pointA.posY - dy * root1;
 
-    if (this.visible) {
-      if (!this.insideSegment(PA.posX, PA.posY))
-        PA.bind(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 0)
+        if (delta == 0) {
+            PA.bind(x1, y1, undefined, this, circumference, true, 0);
+            return [
+                PA,
+                PB
+            ];
+        }
 
-      if (!this.insideSegment(PB.posX, PB.posY))
-        PB.bind(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 1);
-    }
-    return [
-      PA,
-      PB
-    ];
+        const x2 = pointA.posX - dx * root2;
+        const y2 = pointA.posY - dy * root2;
 
-  }
+        PA.bind(x1, y1, undefined, this, circumference, true, 0);
+        PB.bind(x2, y2, undefined, this, circumference, true, 1);
 
-  insideSegment(intersecX, intersecY) {
-    const valuesR = this.getDirection();
-    const dirX = valuesR[0];
-    const dirY = valuesR[1];
-    const cInterA = dirX * intersecX + dirY * intersecY;
+        if (this.visible) {
+            if (!this.insideSegment(PA.posX, PA.posY))
+                PA.bind(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 0)
 
-    // comparaca cv do ponto A > cv da intersec =>  vazio
-    const cRA = dirX * this.pointA.posX + dirY * this.pointA.posY;
+            if (!this.insideSegment(PB.posX, PB.posY))
+                PB.bind(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 1);
+        }
+        return [
+            PA,
+            PB
+        ];
 
-    if (cInterA < cRA) {
-      return false;
     }
 
-    // comparaca cv do ponto B < cv da intersec =>  vazio
-    const cRB = dirX * this.pointB.posX + dirY * this.pointB.posY;
+    insideSegment(intersecX, intersecY) {
+        const valuesR = this.getDirection();
+        const dirX = valuesR[0];
+        const dirY = valuesR[1];
+        const cInterA = dirX * intersecX + dirY * intersecY;
 
-    if (cInterA > cRB) {
-      this.posX = Number.MAX_SAFE_INTEGER;
-      this.posY = Number.MAX_SAFE_INTEGER;
-      return false;
-    }
+        // comparaca cv do ponto A > cv da intersec =>  vazio
+        const cRA = dirX * this.pointA.posX + dirY * this.pointA.posY;
+
+        if (cInterA < cRA) {
+            return false;
+        }
+
+        // comparaca cv do ponto B < cv da intersec =>  vazio
+        const cRB = dirX * this.pointB.posX + dirY * this.pointB.posY;
 
-    return true;
-  }
-  static do(map, list) {
-    const id = map.get("id");
-    const pointAId = map.get("param")[0];
-    const pointBId = map.get("param")[1];
-    const pointA = list.find(x => x.id === pointAId);
-    const pointB = list.find(x => x.id === pointBId);
-    const label = map.get("label")[0];
-    return new LineSegmentModel(pointA, pointB, label, id);
-  }
+        if (cInterA > cRB) {
+            this.posX = Number.MAX_SAFE_INTEGER;
+            this.posY = Number.MAX_SAFE_INTEGER;
+            return false;
+        }
+
+        return true;
+    }
+    static do(map, list) {
+        const id = map.get("id");
+        const pointAId = map.get("param")[0];
+        const pointBId = map.get("param")[1];
+        const pointA = list.find(x => x.id === pointAId);
+        const pointB = list.find(x => x.id === pointBId);
+        const label = map.get("label")[0];
+        return new LineSegmentModel(pointA, pointB, label, id);
+    }
 }
 

src/app/core/application/stage-manager.js

@@ -8,6 +8,13 @@ class StageManager {
     this._stage;
     this._bootstrap();
   }
+
+  getSize() {
+    return {
+      w: this._width,
+      h: this._height
+    }
+  }
   getCurrentStage() {
     return this._stage;
   }
@@ -84,10 +91,10 @@ class StageManager {
   _selectFile(e) {
     const file = $(e.currentTarget);
     const id = parseInt(file.attr("file-id"));
-    const layer = this._files.find(function(element) {
+    const layer = this._files.find(function (element) {
       return element.id == id;
     });
-    $(".file").each(function() {
+    $(".file").each(function () {
       $(this).removeClass("active");
     });
     file.addClass("active");
@@ -111,7 +118,7 @@ class StageManager {
   }
 
   _makeTemplate(layer) {
-    $(".file").each(function() {
+    $(".file").each(function () {
       $(this).removeClass("active");
     });
     $("#files").append(

src/app/core/enums/elements-class-enum.js

@@ -2,8 +2,8 @@ export const ELEMENTS_CLASS = {
   POINT: 0,
   INTERSECTION_POINT: 1,
   CIRCUMFERENCE: 3,
+  LINE: 4,
   LINE_SEGMENT: 6,
-  SELECTOR: 6
   // TO: PONTO                      =   0;
   // TO: PONTO_INTERSECAO           =   1;
   // TO: PONTO_SOBRE                =   2;

src/assets/images/icons/Line.svg

@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: #464646;
+        fill-rule: evenodd;
+      }
+
+      .cls-2 {
+        fill: #84bb3a;
+      }
+    </style>
+  </defs>
+  <g id="Line">
+    <g id="Line-2" data-name="Line">
+      <path class="cls-1" d="M701,1.458l0.44-.439L738,37.542l-0.439.439Z" transform="translate(-700)"/>
+      <path class="cls-1" d="M701,1.458l0.44-.439L738,37.542l-0.439.439Z" transform="translate(-700)"/>
+      <circle class="cls-2" cx="11.61" cy="10.703" r="2.61"/>
+      <circle id="Ellipse_1_copy" data-name="Ellipse 1 copy" class="cls-2" cx="28.39" cy="28.297" r="2.61"/>
+    </g>
+  </g>
+</svg>

src/css/icons.css

@@ -21,3 +21,7 @@
 .icon-selector {
   background-image: url("../assets/images/icons/Selector.png");
 }
+
+.icon-line {
+  background-image: url("../assets/images/icons/Line.png");
+}