From 1ebf37664b0574c7e2e92890ef58c3e7a48a6639 Mon Sep 17 00:00:00 2001
From: Andrea Gottsponer <ago@attr.ch>
Date: Sat, 17 Sep 2022 22:03:48 +0200
Subject: [PATCH] - fix fill line when point is already in polygon
---
src/app/index.ts | 36 ++++-
src/lib/elements/connections/Line.ts | 132 +++++++++++-------
.../elements/connections/LineControlPoint.ts | 6 +-
src/lib/elements/connections/LineCorner.ts | 18 +--
4 files changed, 130 insertions(+), 62 deletions(-)
diff --git a/src/app/index.ts b/src/app/index.ts
index 77820b8a..16a43c9a 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -637,7 +637,7 @@ async function setupImageObjects() {
primitives: []
});
image.addChild(testPoint);
- // -- Test point
+ // -- Test 2 point
const test2Point = new MedsurfDraw.PositionPoint({
id: 'test2Point',
type: Models.ImageObjectType.POSITIONPOINT,
@@ -652,6 +652,21 @@ async function setupImageObjects() {
primitives: []
});
image.addChild(test2Point);
+ // -- Test 3 point
+ const test3Point = new MedsurfDraw.PositionPoint({
+ id: 'test3Point',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 150 / image.dimensions.width,
+ y: 150 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: ['rectanglePoint'],
+ primitives: []
+ });
+ image.addChild(test3Point);
// -- Test point
const test17Point = new MedsurfDraw.PositionPoint({
id: 'test17Point',
@@ -936,6 +951,25 @@ async function setupImageObjects() {
});
image.addChild(fillLine);
elementsArray['fillLine'] = fillLine;
+ // -- FillLine2
+ const fillLine2 = new MedsurfDraw.Line({
+ id: 'fillLine2',
+ type: Models.ImageObjectType.LINE,
+ isStatic: false,
+ zIndex: 0,
+ start: 'test3Point',
+ end: 'fill1',
+ isBezier: true,
+ strokeWidth: 1 / image.dimensions.width,
+ interactWithLines: false,
+ options: {
+ hasLine: true,
+ lineColor: 0xFFFFFF,
+ hasFill: false,
+ }
+ });
+ image.addChild(fillLine2);
+ elementsArray['fillLine2'] = fillLine2;
// -- Legend model
const legendCollectionModel: Models.LegendCollection = {
id: 'legend',
diff --git a/src/lib/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts
index 211d2bd6..28b2f830 100644
--- a/src/lib/elements/connections/Line.ts
+++ b/src/lib/elements/connections/Line.ts
@@ -15,6 +15,7 @@ import {debounce} from "debounce";
* Line types
*/
export enum LineTypes {
+ NOT_INITIALIZED,
LINEAR,
QUADRATIC,
BEZIER,
@@ -202,9 +203,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
// Members
this.start = image.getChildByName(this.model.start) as BaseElementContainer<Models.ImageObject, BaseElementContainerModel<Models.ImageObject>>;
- // TODO: this.start = image.children.find((c) => c.name === this.model.start) as BaseElementContainer<Models.ImageObject, BaseElementContainerModel<Models.ImageObject>>;
this.end = image.getChildByName(this.model.end) as BaseElementContainer<Models.ImageObject, BaseElementContainerModel<Models.ImageObject>>;
- // TODO: this.end = image.children.find((c) => c.name === this.model.end) as BaseElementContainer<Models.ImageObject, BaseElementContainerModel<Models.ImageObject>>;
// Events
if (this.start instanceof MedsurfDraw.PositionPoint) {
@@ -231,6 +230,32 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
}
this.end.on("removed", this.onButtonDelete, this);
+ //<editor-fold desc="Elements">
+ // -- Line corner element
+ this._lineCornerElement = new MedsurfDraw.LineCorner({
+ points: undefined,
+ options: Object.assign({}, this.model.options),
+ lineWidth: Math.round(this.model.strokeWidth * this.getImageDimensions().width * 100) / 100,
+ });
+ this.addChild(this._lineCornerElement);
+ // -- Line control point element
+ this._lineControlPointElement = new MedsurfDraw.LineControlPoint({
+ points: undefined,
+ options: {
+ hasLine: true,
+ lineColor: Design.line.bezierLineColor,
+ lineAlpha: Design.line.bezierLineAlpha,
+ hasFill: true,
+ fillColor: Design.line.bezierPointColor,
+ fillAlpha: Design.line.bezierPointAlpha
+ },
+ lineWidth: Design.line.bezierLineWidth,
+ radius: Design.line.bezierPointRadius
+ });
+ this._lineControlPointElement.hideItem();
+ this.addChild(this._lineControlPointElement);
+ //</editor-fold>
+
//<editor-fold desc="Menu elements">
//<editor-fold desc="Edit">
// -- Edit button element
@@ -440,7 +465,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
public draw(): void {
// Elements
// -- Line element
- if (this._lineElement) {
+ if (this._lineElement || this.type === LineTypes.NOT_INITIALIZED) {
// Store type
const oldType = this.type;
@@ -457,7 +482,10 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
if (this.type !== oldType) {
// Elements
// -- Line element
- this._lineElement.destroy();
+ if (this._lineElement) {
+ this._lineElement.destroy();
+ }
+
// Get line object
const result = this._getLineObject(points);
@@ -467,16 +495,35 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
}
} else {
// -- Line element
- this._lineElement.points = points;
+ if (this._lineElement) {
+ this._lineElement.points = points;
+ }
}
- this._lineElement.renderable = true;
- this._lineElement.draw();
+ // Elements
+ // -- Line element
+ if (this._lineElement) {
+ this._lineElement.draw();
+ }
+ // -- Line corner element
+ this._lineCornerElement.renderable = true;
+ // -- Line control point element
+ this._lineControlPointElement.renderable = true;
} else {
// Elements
// -- Line element
if (this._lineElement) {
- this._lineElement.renderable = false;
+ this._lineElement.destroy();
+ delete this._lineElement;
+ this.type = LineTypes.NOT_INITIALIZED;
+ }
+ // -- Line corner element
+ if (this._lineCornerElement) {
+ this._lineCornerElement.renderable = false;
+ }
+ // -- Line control point element
+ if (this._lineControlPointElement) {
+ this._lineControlPointElement.renderable = false;
}
}
}
@@ -696,7 +743,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
return;
}
- this.type = LineTypes.LINEAR;
+ this.type = LineTypes.NOT_INITIALIZED;
this.direction = LineDirection.START_END;
this.controlStart = null;
this.controlEnd = null;
@@ -718,6 +765,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
// No matching control points
const points = this._getStraightLinePointsModel(this.start, this.end);
if (points) {
+ this.type = LineTypes.LINEAR;
return points;
}
}
@@ -751,6 +799,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
// Straight line
const points = this._getStraightLinePointsModel(this.start, this.end);
if (points) {
+ this.type = LineTypes.LINEAR;
return points;
}
}
@@ -1106,45 +1155,32 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
*/
protected _removeModeInit(): void {
// Elements
- const points = this._getLinePointsModel();
- if (!points) {
- return;
- }
- const result = this._getLineObject(points);
- if (result) {
- // -- Line element
- this._lineElement = result;
- this.addChild(this._lineElement);
- // -- Line corner element
- this._lineCornerElement = new MedsurfDraw.LineCorner({
- points: result.points,
- options: Object.assign({}, this.model.options),
- lineWidth: Math.round(this.model.strokeWidth * this.getImageDimensions().width * 100) / 100,
- });
- this.addChild(this._lineCornerElement);
- // -- Line control point element
- this._lineControlPointElement = new MedsurfDraw.LineControlPoint({
- points: result.points,
- options: {
- hasLine: true,
- lineColor: Design.line.bezierLineColor,
- lineAlpha: Design.line.bezierLineAlpha,
- hasFill: true,
- fillColor: Design.line.bezierPointColor,
- fillAlpha: Design.line.bezierPointAlpha
- },
- lineWidth: Design.line.bezierLineWidth,
- radius: Design.line.bezierPointRadius
- });
- this._lineControlPointElement.hideItem();
- this.addChild(this._lineControlPointElement);
- }
+ try {
+ const points = this._getLinePointsModel();
+ if (!points) {
+ return;
+ }
+ const result = this._getLineObject(points);
+ if (result) {
+ // -- Line element
+ this._lineElement = result;
+ this.addChild(this._lineElement);
+ // -- Line corner element
+ this._lineCornerElement.points = result.points;
+ // -- Line control point element
+ this._lineControlPointElement.points = result.points;
+ }
- // Sort items
- this.sortChildren();
+ // Sort items
+ this.sortChildren();
- // Draw
- this.emit("debounceDraw");
+ // Draw
+ this.emit("debounceDraw");
+ }
+ catch (e) {
+ this.type = LineTypes.NOT_INITIALIZED;
+ this.emit("debounceDraw");
+ }
}
/**
@@ -2218,10 +2254,6 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
* TODO return linetype so we can compare ???
*/
public onPointUpdate(): void {
- if (!this._lineElement) {
- return;
- }
-
// Draw
this.draw();
}
diff --git a/src/lib/elements/connections/LineControlPoint.ts b/src/lib/elements/connections/LineControlPoint.ts
index ff2851ca..8270fb4b 100644
--- a/src/lib/elements/connections/LineControlPoint.ts
+++ b/src/lib/elements/connections/LineControlPoint.ts
@@ -6,7 +6,7 @@ import {StraightLinePointsModel, BezierLinePointsModel, QuadraticCurvePointsMode
* Line control point model
*/
export class LineControlPointModel extends BaseGraphicsModel {
- points: StraightLinePointsModel | QuadraticCurvePointsModel | BezierLinePointsModel;
+ points: StraightLinePointsModel | QuadraticCurvePointsModel | BezierLinePointsModel | undefined;
options: Models.ElementOptions;
lineWidth: number;
radius: number;
@@ -82,7 +82,7 @@ export class LineControlPoint extends BaseGraphics<LineControlPointModel> {
/**
* Get points
*/
- public get points(): StraightLinePointsModel | QuadraticCurvePointsModel | BezierLinePointsModel {
+ public get points(): StraightLinePointsModel | QuadraticCurvePointsModel | BezierLinePointsModel | undefined {
return this.data.points;
}
@@ -90,7 +90,7 @@ export class LineControlPoint extends BaseGraphics<LineControlPointModel> {
* Set points
* @param value
*/
- public set points(value: StraightLinePointsModel | QuadraticCurvePointsModel | BezierLinePointsModel) {
+ public set points(value: StraightLinePointsModel | QuadraticCurvePointsModel | BezierLinePointsModel | undefined) {
this.data.points = value;
}
diff --git a/src/lib/elements/connections/LineCorner.ts b/src/lib/elements/connections/LineCorner.ts
index b67639d3..281cf602 100644
--- a/src/lib/elements/connections/LineCorner.ts
+++ b/src/lib/elements/connections/LineCorner.ts
@@ -6,7 +6,7 @@ import {BaseGraphics, BaseGraphicsModel} from "../../bases/elements/BaseGraphics
* Line corner model
*/
export class LineCornerModel extends BaseGraphicsModel {
- points: MedsurfDraw.StraightLinePointsModel | MedsurfDraw.QuadraticCurvePointsModel | MedsurfDraw.BezierLinePointsModel;
+ points: MedsurfDraw.StraightLinePointsModel | MedsurfDraw.QuadraticCurvePointsModel | MedsurfDraw.BezierLinePointsModel | undefined;
options: Models.ElementOptions;
lineWidth: number
}
@@ -47,19 +47,21 @@ export class LineCorner extends BaseGraphics<LineCornerModel> {
this.clear();
// Draw corner
- this.lineStyle(this.lineWidth / 2, this.options.lineColor, this.options.lineAlpha);
- this.beginFill(this.options.lineColor, this.options.lineAlpha);
- this.drawCircle(this.points.start.x, this.points.start.y, this.lineWidth / 4);
- this.drawCircle(this.points.end.x, this.points.end.y, this.lineWidth / 4);
+ if (this.points) {
+ this.lineStyle(this.lineWidth / 2, this.options.lineColor, this.options.lineAlpha);
+ this.beginFill(this.options.lineColor, this.options.lineAlpha);
+ this.drawCircle(this.points.start.x, this.points.start.y, this.lineWidth / 4);
+ this.drawCircle(this.points.end.x, this.points.end.y, this.lineWidth / 4);
- this.endFill();
+ this.endFill();
+ }
}
//<editor-fold desc="Getter and Setter">
/**
* Get points
*/
- public get points(): MedsurfDraw.StraightLinePointsModel {
+ public get points(): MedsurfDraw.StraightLinePointsModel | MedsurfDraw.QuadraticCurvePointsModel | MedsurfDraw.BezierLinePointsModel | undefined {
return this.data.points;
}
@@ -67,7 +69,7 @@ export class LineCorner extends BaseGraphics<LineCornerModel> {
* Set points
* @param value
*/
- public set points(value: MedsurfDraw.StraightLinePointsModel) {
+ public set points(value: MedsurfDraw.StraightLinePointsModel | MedsurfDraw.QuadraticCurvePointsModel | MedsurfDraw.BezierLinePointsModel | undefined) {
this.data.points = value;
}
--
GitLab