diff --git a/src/app/index.ts b/src/app/index.ts
index 8973d19a6a7a4d73fd83e9e487a379bc51114d0c..77820b8af8cc14c0c6231d4b47cceb713124f3a4 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -687,6 +687,7 @@ async function setupImageObjects() {
}
});
image.addChild(line1);
+ elementsArray['line1'] = line1;
// -- Line2
const line2 = new MedsurfDraw.Line({
id: 'line2',
@@ -705,6 +706,7 @@ async function setupImageObjects() {
}
});
image.addChild(line2);
+ elementsArray['line2'] = line2;
// -- Line3
const line3 = new MedsurfDraw.Line({
id: 'line3',
@@ -723,6 +725,7 @@ async function setupImageObjects() {
}
});
image.addChild(line3);
+ elementsArray['line3'] = line3;
// -- Line4
const line4 = new MedsurfDraw.Line({
id: 'line4',
@@ -741,6 +744,7 @@ async function setupImageObjects() {
}
});
image.addChild(line4);
+ elementsArray['line4'] = line4;
// -- Line5
const line5 = new MedsurfDraw.Line({
id: 'line5',
@@ -759,6 +763,7 @@ async function setupImageObjects() {
}
});
image.addChild(line5);
+ elementsArray['line5'] = line5;
// -- Arrow
const arrow = new MedsurfDraw.ArrowPrimitive({
id: 'arrow',
@@ -930,6 +935,7 @@ async function setupImageObjects() {
}
});
image.addChild(fillLine);
+ elementsArray['fillLine'] = fillLine;
// -- Legend model
const legendCollectionModel: Models.LegendCollection = {
id: 'legend',
@@ -1104,6 +1110,7 @@ async function setupImageObjects() {
}
});
image.addChild(realLine1);
+ elementsArray['realLine1'] = realLine1;
// -- Real Ellipse 1
const realEllipse1 = new MedsurfDraw.EllipsePrimitive({
id: 'realEllipse1',
@@ -1430,30 +1437,23 @@ buttonVirtualPointer.addEventListener("click", () => {
virtualPointer.visible = !virtualPointer.visible;
});
buttonTest.addEventListener("click", () => {
+ /* Fill polygon test
const test = new PIXI.Graphics();
- test.lineStyle(5, 0xffffff, 1);
- test.moveTo(300, 300);
- test.lineTo(600, 400);
+ test.lineStyle(1, 0xffffff, 1);
+ test.drawPolygon([100, 100, 107.16581074474149, 93.83305489669469, 114.97047240007768, 88.9560224214893, 123.3293745522215, 85.35006137190423, 132.15790678738588, 82.99633054545986, 141.37145869178374, 81.87598873967652, 150.88541985162811, 81.97019475207463, 160.61517985313188, 83.26010738017457, 170.47612828250803, 85.72688542149672, 180.38365472596945, 89.3516876735614, 190.2531487697291, 94.11567293388903, 200, 100, 200.56348610067616, 105.52216378662658, 202.02854996243425, 112.7723516153268, 204.0570999248685, 121.41247182569496, 206.31104432757323, 131.1044327573253, 208.4522915101427, 141.51014274981213, 210.1427498121713, 152.29151014274981, 211.04432757325318, 163.11044327573254, 210.81893313298275, 173.6288504883546, 209.12847483095416, 183.50864012021037, 205.6348610067618, 192.41172051089404, 200, 200, 192.59954921111944, 206.198347107438, 184.18482344102176, 211.1570247933884, 174.98121712997747, 214.87603305785123, 165.21412471825693, 217.3553719008264, 155.1089406461307, 218.595041322314, 144.89105935386925, 218.59504132231405, 134.78587528174305, 217.35537190082644, 125.01878287002253, 214.87603305785126, 115.81517655897821, 211.15702479338842, 107.40045078888053, 206.198347107438, 100, 200, 93.80165289256198, 192.59954921111944, 88.84297520661156, 184.18482344102176, 85.12396694214875, 174.98121712997747, 82.64462809917356, 165.21412471825693, 81.40495867768593, 155.1089406461307, 81.40495867768595, 144.89105935386925, 82.64462809917354, 134.78587528174305, 85.12396694214877, 125.01878287002253, 88.84297520661158, 115.81517655897821, 93.80165289256198, 107.40045078888053, 100, 100]);
image.addChild(test);
+ */
- console.log(test);
-
- setTimeout(() => {
- // @ts-ignore
- console.log(test.geometry.graphicsData);
-
- // @ts-ignore
- test.hitArea = new PIXI.Polygon(test.geometry.graphicsData[0].shape.points);
-
- test.interactive = true;
- test.on('pointerover', () => {
- console.log("okokokoko")
- });
- }, 300);
+ // Add Middle point
+ // line1-5; fillLine; realLine1
+ (elementsArray['line1'] as MedsurfDraw.Line).onButtonAddMiddlePoint(image, layerGroupsArray['layerGroupModel1']);
+ // (elementsArray['fillLine'] as MedsurfDraw.Line).onButtonAddMiddlePoint(image);
+ // (elementsArray['realLine1'] as MedsurfDraw.Line).onButtonAddMiddlePoint(image, layerGroupsArray['realLayerGroup1']);
- (elementsArray['fill1'] as MedsurfDraw.FillCollection).onColor(MedsurfDraw.ColorMode.LINE, false, undefined, undefined);
+ // Check fill
+ // (elementsArray['fill1'] as MedsurfDraw.FillCollection).onColor(MedsurfDraw.ColorMode.LINE, false, undefined, undefined);
/* Text add middle point button * /
line1.onButtonAddMiddlePoint(image);
diff --git a/src/lib/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts
index 529fe29bf27784cdbc9b5e1a656794e04b1fda3c..211d2bd6a34cf9bef5b7e1bfc754a5d671fb42eb 100644
--- a/src/lib/elements/connections/Line.ts
+++ b/src/lib/elements/connections/Line.ts
@@ -448,6 +448,8 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
try {
const points = this._getLinePointsModel();
if (points) {
+ // -- Line corner element
+ this._lineCornerElement.points = points;
// -- Line control point element
this._lineControlPointElement.points = points;
@@ -467,8 +469,16 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
// -- Line element
this._lineElement.points = points;
}
+
+ this._lineElement.renderable = true;
+ this._lineElement.draw();
+ } else {
+ // Elements
+ // -- Line element
+ if (this._lineElement) {
+ this._lineElement.renderable = false;
+ }
}
- this._lineElement.draw();
}
catch (e) {
this.emit("debounceDraw");
@@ -1802,7 +1812,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
}
// @ts-ignore
- const points = this._lineElement.geometry.points;
+ const points = this._lineElement.geometry.graphicsData[0].shape.points as number[];
// Split points to x and y components
const valuesX = points.filter((v, i) => i % 2 === 0)
diff --git a/src/lib/elements/fills/FillCollection.ts b/src/lib/elements/fills/FillCollection.ts
index f522cd9f75ad96bde2d6b19315f7b96cdb76eefb..15f99e37b01ce4e82e4c4e8afa773a373825313b 100644
--- a/src/lib/elements/fills/FillCollection.ts
+++ b/src/lib/elements/fills/FillCollection.ts
@@ -583,25 +583,45 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
/**
* Is point in polygon
+ *
+ * @see https://stackoverflow.com/questions/217578/how-can-i-determine-whether-a-2d-point-is-within-a-polygon
* @param point
*/
public isPointInPolygon(point: PIXI.IPoint): boolean {
- const polygon: MedsurfDraw.PositionPoint[] = this.lines.map((line) => {
- return [line.start, line.end] as MedsurfDraw.PositionPoint[];
- }).reduce((cur, acc) => {
- acc.forEach((a) => {
- if (cur.indexOf(a) === -1) {
- cur.push(a);
- }
- });
- return cur;
- }, []);
+ // Check for polygon
+ // ts-ignore
+ if (this._fillElement.geometry.graphicsData.length === 0) {
+ return false;
+ }
- let i, j;
+ // Get polygon
+ // @ts-ignore
+ const polygon = this._fillElement.geometry.graphicsData[0].shape.points.slice(0, -2);
+
+ //
let inside = false;
- for (i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+ let minX = polygon[0], maxX = polygon[0];
+ let minY = polygon[1].y, maxY = polygon[1];
+ for (let n = 1; n < polygon.length; n+=2) {
+ let qx = polygon[n];
+ let qy = polygon[n+1];
+ minX = Math.min(qx, minX);
+ maxX = Math.max(qx, maxX);
+ minY = Math.min(qy, minY);
+ maxY = Math.max(qy, maxY);
+ }
+
+ if (point.x < minX || point.x > maxX || point.y < minY || point.y > maxY) {
+ return false;
+ }
+
+ let i, j;
+ for (i = 0, j = polygon.length - 1; i < polygon.length; j = i, i += 2) {
// @ts-ignore
- if(((polygon[i].y > point.y) != (polygon[j].y > point.y)) && (point.x < (polygon[j].x-polygon[i].x) * (point.y-polygon[i].y) / (polygon[j].y-polygon[i].y) + polygon[i].x) ) inside = !inside;
+ if(((polygon[i+1] > point.y) != (polygon[j+1] > point.y))
+ && (point.x < (polygon[j]-polygon[i]) * (point.y-polygon[i+1])
+ / (polygon[j+1]-polygon[i+1]) + polygon[i]) )
+ inside = !inside;
}
return inside;
}
@@ -710,7 +730,9 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
* Get middle point for fills
* @param fill
*/
+ /* TODO remove not needed
public getMiddlePointForFills(fill: FillCollection): PIXI.IPoint {
+ // TODO use the graphics data here
let myLine: MedsurfDraw.Line;
let otherLine: MedsurfDraw.Line;
@@ -756,6 +778,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
(myLine.start.y + myLine.end.y + otherLine.start.y + otherLine.end.y) / 4
);
}
+ */
/**
* Add line