|
@@ -19,16 +19,16 @@ import { LineSegmentModel } from "../../line-segment-component/models/line-segme
|
|
|
|
|
|
export class LineDrawer extends LineSegmentDrawer {
|
|
export class LineDrawer extends LineSegmentDrawer {
|
|
|
|
|
|
- constructor () {
|
|
|
|
|
|
+ constructor() {
|
|
super();
|
|
super();
|
|
this.setElementClass(ELEMENTS_CLASS.LINE);
|
|
this.setElementClass(ELEMENTS_CLASS.LINE);
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- drawByStates (konvaObject) {
|
|
|
|
|
|
+ drawByStates(konvaObject) {
|
|
let aggregator = undefined;
|
|
let aggregator = undefined;
|
|
if (konvaObject != undefined) {
|
|
if (konvaObject != undefined) {
|
|
aggregator = Objects.getByKonvaObject(konvaObject)[0];
|
|
aggregator = Objects.getByKonvaObject(konvaObject)[0];
|
|
- }
|
|
|
|
|
|
+ }
|
|
if (this.state == undefined) {
|
|
if (this.state == undefined) {
|
|
super.setState(LineDrawer.FIRST_POINT_STATE);
|
|
super.setState(LineDrawer.FIRST_POINT_STATE);
|
|
} else if (this.state == LineDrawer.FIRST_POINT_STATE) {
|
|
} else if (this.state == LineDrawer.FIRST_POINT_STATE) {
|
|
@@ -40,10 +40,10 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
this.setAggregatorB(aggregator);
|
|
this.setAggregatorB(aggregator);
|
|
this.drawByPoints([this.pointA, this.pointB], [this.aggregatorA, this.aggregatorB]);
|
|
this.drawByPoints([this.pointA, this.pointB], [this.aggregatorA, this.aggregatorB]);
|
|
super.setState(LineDrawer.FIRST_POINT_STATE);
|
|
super.setState(LineDrawer.FIRST_POINT_STATE);
|
|
- }
|
|
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
|
|
- drawByLineSegment (lineSegment) { //TODO Nome adequado? Nao seria 'drawLine(lineSegment)'?
|
|
|
|
|
|
+ drawByLineSegment(lineSegment) { //TODO Nome adequado? Nao seria 'drawLine(lineSegment)'?
|
|
this.lineSegment = lineSegment;
|
|
this.lineSegment = lineSegment;
|
|
const group = SelectableDrawer.getKonvaGroup(false);
|
|
const group = SelectableDrawer.getKonvaGroup(false);
|
|
const text = LineDrawer.getKonvaText(lineSegment, lineSegment.label);
|
|
const text = LineDrawer.getKonvaText(lineSegment, lineSegment.label);
|
|
@@ -64,14 +64,14 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
|
|
|
|
this.konvaObject.zIndex(1);
|
|
this.konvaObject.zIndex(1);
|
|
//leo super.batchDraw(); //D usar novo metodo para desenhar, aproveitar o proprio 'update' - REMOVER
|
|
//leo super.batchDraw(); //D usar novo metodo para desenhar, aproveitar o proprio 'update' - REMOVER
|
|
- this.update(aggregator,null);
|
|
|
|
|
|
+ this.update(aggregator, null);
|
|
|
|
|
|
SelectableDrawer.setMaxIndex(aggregators[0].konvaObject); // mark object 1: A
|
|
SelectableDrawer.setMaxIndex(aggregators[0].konvaObject); // mark object 1: A
|
|
SelectableDrawer.setMaxIndex(aggregators[1].konvaObject); // mark object 2: B
|
|
SelectableDrawer.setMaxIndex(aggregators[1].konvaObject); // mark object 2: B
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
|
|
// Draw Straight Line by its points
|
|
// Draw Straight Line by its points
|
|
- drawByPoints (points, aggregators) {
|
|
|
|
|
|
+ drawByPoints(points, aggregators) {
|
|
if (points == undefined || points.length < 1) return;
|
|
if (points == undefined || points.length < 1) return;
|
|
this.setPointA(points[0]);
|
|
this.setPointA(points[0]);
|
|
this.setPointB(points[1]);
|
|
this.setPointB(points[1]);
|
|
@@ -84,7 +84,7 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
// Use: ./app/components/core/drawers/selectable-drawer
|
|
// Use: ./app/components/core/drawers/selectable-drawer
|
|
this.drawByLineSegment(this.lineSegment); // here, makes: SelectableDrawer.drawObject(this.konvaObject);
|
|
this.drawByLineSegment(this.lineSegment); // here, makes: SelectableDrawer.drawObject(this.konvaObject);
|
|
this.reset();
|
|
this.reset();
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
// Update straight line (Line)
|
|
// Update straight line (Line)
|
|
@@ -103,7 +103,7 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
// +----------+----------+----------+----------+
|
|
// +----------+----------+----------+----------+
|
|
// Straight line defined by points A,B (parametric equation by 'g'):
|
|
// Straight line defined by points A,B (parametric equation by 'g'):
|
|
// P(g) = A + g * (B-A) = A + g * d
|
|
// P(g) = A + g * (B-A) = A + g * d
|
|
-
|
|
|
|
|
|
+
|
|
// Given W=canvas width and H=canvas height, find intersections with borders, i.e., find values of "g" such that:
|
|
// Given W=canvas width and H=canvas height, find intersections with borders, i.e., find values of "g" such that:
|
|
// r(g).x=0 or r(g).x=W or r(g).y=0 or r(g).y=H (call this "g" respectively as Lg, Rg, Ug, and Dg - these are dependent of A and B positions)
|
|
// r(g).x=0 or r(g).x=W or r(g).y=0 or r(g).y=H (call this "g" respectively as Lg, Rg, Ug, and Dg - these are dependent of A and B positions)
|
|
// Ug
|
|
// Ug
|
|
@@ -120,13 +120,13 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
// Lg |P o A | Rg Rg | o B | Lg
|
|
// Lg |P o A | Rg Rg | o B | Lg
|
|
// +-o-----------------------------+ +-o-----------------------------+
|
|
// +-o-----------------------------+ +-o-----------------------------+
|
|
// \|/ Dg Ug
|
|
// \|/ Dg Ug
|
|
- update (aggregator, e) {
|
|
|
|
|
|
+ update(aggregator, e) {
|
|
if (!aggregator.visible) return;
|
|
if (!aggregator.visible) return;
|
|
const pointA = aggregator.genericObject.pointA; // A
|
|
const pointA = aggregator.genericObject.pointA; // A
|
|
const pointB = aggregator.genericObject.pointB; // B
|
|
const pointB = aggregator.genericObject.pointB; // B
|
|
const Ax = pointA.posX, Ay = pointA.posY, Bx = pointB.posX, By = pointB.posY; // A=(Ax,Ay) and B=(Bx,By)
|
|
const Ax = pointA.posX, Ay = pointA.posY, Bx = pointB.posX, By = pointB.posY; // A=(Ax,Ay) and B=(Bx,By)
|
|
- const dx = Bx-Ax, dy = By-Ay; // direction d=B-A
|
|
|
|
- const size = stageManager.getSize(); // From: ../../../core/application/stage-manager
|
|
|
|
|
|
+ const dx = Bx - Ax, dy = By - Ay; // direction d=B-A
|
|
|
|
+ const size = stageManager.getSize(); // From: ../../../core/application/stage-manager
|
|
const W = size.w; // canvas width
|
|
const W = size.w; // canvas width
|
|
const H = size.h; // canvas height
|
|
const H = size.h; // canvas height
|
|
var Ix, Iy, Ex, Ey; // Point I will be left-bottom one and E will be the top-right one
|
|
var Ix, Iy, Ex, Ey; // Point I will be left-bottom one and E will be the top-right one
|
|
@@ -135,7 +135,7 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
if (dx === 0) {
|
|
if (dx === 0) {
|
|
// Calculates parameters Ug, Dg:
|
|
// Calculates parameters Ug, Dg:
|
|
Ug = -Ay / dy; // -A.y / d.y
|
|
Ug = -Ay / dy; // -A.y / d.y
|
|
- Dg = (H-Ay) / dy; // (H-A.y) / d.y
|
|
|
|
|
|
+ Dg = (H - Ay) / dy; // (H-A.y) / d.y
|
|
// Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
|
|
// Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
|
|
const ming = Math.min(Ug, Dg); // minimum
|
|
const ming = Math.min(Ug, Dg); // minimum
|
|
const maxg = Math.max(Ug, Dg); // maximum
|
|
const maxg = Math.max(Ug, Dg); // maximum
|
|
@@ -144,36 +144,36 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
|
|
Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
|
|
Ex = Ax; Rg = 0;
|
|
Ex = Ax; Rg = 0;
|
|
Ey = Ay + maxg * dy; // right end point of this line (Ex, Ey)
|
|
Ey = Ay + maxg * dy; // right end point of this line (Ex, Ey)
|
|
- }
|
|
|
|
|
|
+ }
|
|
else {
|
|
else {
|
|
// Calculates parameters Lg, Rg, Ug, Dg:
|
|
// Calculates parameters Lg, Rg, Ug, Dg:
|
|
Lg = -Ax / dx; // -A.x / d.x
|
|
Lg = -Ax / dx; // -A.x / d.x
|
|
- Rg = (W-Ax) / dx; // (W-A.x) / d.x
|
|
|
|
|
|
+ Rg = (W - Ax) / dx; // (W-A.x) / d.x
|
|
Ug = -Ay / dy; // -A.y / d.y
|
|
Ug = -Ay / dy; // -A.y / d.y
|
|
- Dg = (H-Ay) / dy; // (H-A.y) / d.y
|
|
|
|
|
|
+ Dg = (H - Ay) / dy; // (H-A.y) / d.y
|
|
// Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
|
|
// Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
|
|
var ming, maxg; // calculate extreme points (intercepted with the Canvas frame)
|
|
var ming, maxg; // calculate extreme points (intercepted with the Canvas frame)
|
|
- if (dx>0) { // (1)
|
|
|
|
- if (Lg<Dg) ming = Dg;
|
|
|
|
|
|
+ if (dx > 0) { // (1)
|
|
|
|
+ if (Lg < Dg) ming = Dg;
|
|
else ming = Lg;
|
|
else ming = Lg;
|
|
- if (Rg>Ug) maxg = Ug;
|
|
|
|
|
|
+ if (Rg > Ug) maxg = Ug;
|
|
else maxg = Rg;
|
|
else maxg = Rg;
|
|
- }
|
|
|
|
|
|
+ }
|
|
else { // (2)
|
|
else { // (2)
|
|
- if (Lg>Ug) ming = Ug;
|
|
|
|
|
|
+ if (Lg > Ug) ming = Ug;
|
|
else ming = Lg;
|
|
else ming = Lg;
|
|
- if (Rg<Dg) maxg = Dg;
|
|
|
|
|
|
+ if (Rg < Dg) maxg = Dg;
|
|
else maxg = Rg;
|
|
else maxg = Rg;
|
|
- }
|
|
|
|
|
|
+ }
|
|
// Draw from minimum to maximum
|
|
// Draw from minimum to maximum
|
|
Ix = Ax + ming * dx;
|
|
Ix = Ax + ming * dx;
|
|
Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
|
|
Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
|
|
Ex = Ax + maxg * dx;
|
|
Ex = Ax + maxg * dx;
|
|
Ey = Ay + maxg * dy; // right end point of this line (Ex, Ey)
|
|
Ey = Ay + maxg * dy; // right end point of this line (Ex, Ey)
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
|
|
// Ix = Ax; Iy = H; Ex = Ax; Ey = 0;
|
|
// Ix = Ax; Iy = H; Ex = Ax; Ey = 0;
|
|
- const points = [Ix, Iy, Ex, Ey];
|
|
|
|
|
|
+ const points = [Ix, Iy, Ex, Ey];
|
|
//D console.log("./app/components/line-component/drawers/line-drawer.js: update(aggregator, e):\nA=("+Ax+","+Ay+"), B=("+Bx+","+By+")"); //leo
|
|
//D console.log("./app/components/line-component/drawers/line-drawer.js: update(aggregator, e):\nA=("+Ax+","+Ay+"), B=("+Bx+","+By+")"); //leo
|
|
|
|
|
|
// Update label line
|
|
// Update label line
|
|
@@ -184,12 +184,12 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
aggregator.konvaObject.children[1].points(points);
|
|
aggregator.konvaObject.children[1].points(points);
|
|
|
|
|
|
super.batchDraw();
|
|
super.batchDraw();
|
|
- } // update(aggregator, e)
|
|
|
|
|
|
+ } // update(aggregator, e)
|
|
|
|
|
|
|
|
|
|
- static getKonvaLine (pointA, pointB, useLabel) { //TODO: revisar, pois o codigo 'slope', 'linearCoefficient' so' funciona para quadrantes 1 e 3...
|
|
|
|
|
|
+ static getKonvaLine(pointA, pointB, useLabel) { //TODO: revisar, pois o codigo 'slope', 'linearCoefficient' so' funciona para quadrantes 1 e 3...
|
|
const xA = pointA.posX, xB = pointB.posX,
|
|
const xA = pointA.posX, xB = pointB.posX,
|
|
- yA = pointA.posY, yB = pointB.posY;
|
|
|
|
|
|
+ yA = pointA.posY, yB = pointB.posY;
|
|
|
|
|
|
const slope = (yB - yA) / (xB - xA);
|
|
const slope = (yB - yA) / (xB - xA);
|
|
const linearCoefficient = (yA * xB - yB * xA) / (xB - xA);
|
|
const linearCoefficient = (yA * xB - yB * xA) / (xB - xA);
|
|
@@ -217,11 +217,11 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
SelectableDrawer.setSelectableIfIntersectionChanged(line);
|
|
SelectableDrawer.setSelectableIfIntersectionChanged(line);
|
|
|
|
|
|
return line;
|
|
return line;
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- static drawKonvaLine (pointA, pointB) {
|
|
|
|
|
|
+ static drawKonvaLine(pointA, pointB) {
|
|
const line = LineDrawer.getKonvaLine(pointA, pointB);
|
|
const line = LineDrawer.getKonvaLine(pointA, pointB);
|
|
return line;
|
|
return line;
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
|
|
|
+}
|