|
@@ -19,16 +19,19 @@ import { LineSegmentModel } from "../../line-segment-component/models/line-segme
|
|
|
|
|
|
export class LineDrawer extends LineSegmentDrawer {
|
|
export class LineDrawer extends LineSegmentDrawer {
|
|
|
|
|
|
- constructor() {
|
|
|
|
|
|
+ static count2debugLS = 1; //DEBUG
|
|
|
|
+
|
|
|
|
+ constructor () {
|
|
super();
|
|
super();
|
|
|
|
+ this.id = LineDrawer.count2debugLS++; //DEBUG
|
|
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 +43,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);
|
|
@@ -68,10 +71,10 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
|
|
|
|
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 +87,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)
|
|
@@ -120,9 +123,10 @@ 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
|
|
|
|
+ //D console.log("line-drawer.js!update(aggregator, e): this.id=" + this.id + ", pointA.id=" + pointA.id);
|
|
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 dx = Bx - Ax, dy = By - Ay; // direction d=B-A
|
|
@@ -144,8 +148,8 @@ 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 { // if (dx === 0)
|
|
// 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
|
|
@@ -158,19 +162,19 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
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)
|
|
- }
|
|
|
|
|
|
+ } // else if (dx === 0)
|
|
|
|
|
|
// 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];
|
|
@@ -184,10 +188,10 @@ 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;
|
|
|
|
|
|
@@ -212,16 +216,16 @@ export class LineDrawer extends LineSegmentDrawer {
|
|
selectable: false,
|
|
selectable: false,
|
|
draggable: false,
|
|
draggable: false,
|
|
style: { stroke: "grey", fill: "grey" }
|
|
style: { stroke: "grey", fill: "grey" }
|
|
- });
|
|
|
|
|
|
+ });
|
|
|
|
|
|
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;
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
|
|
-}
|
|
|
|
|
|
+ }
|