diff --git a/package-lock.json b/package-lock.json
index 3009cd16186c6dd561ce72562430aa420572aacf..1c66dc8c7d5cffa211e8c16a52af286f2687825c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
{
"name": "medsurf-draw",
- "version": "1.0.233",
+ "version": "1.0.234",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "medsurf-draw",
- "version": "1.0.233",
+ "version": "1.0.234",
"license": "MIT",
"dependencies": {
- "@ascii-dev-user/medsurf-lib": "^1.18.0-143",
+ "@ascii-dev-user/medsurf-lib": "^1.18.0-144",
"@babel/core": "^7.8.4",
"@pixi-essentials/cull": "^1.0.12",
"debounce": "^1.2.1",
@@ -91,9 +91,9 @@
}
},
"node_modules/@ascii-dev-user/medsurf-lib": {
- "version": "1.18.0-143",
- "resolved": "https://registry.npmjs.org/@ascii-dev-user/medsurf-lib/-/medsurf-lib-1.18.0-143.tgz",
- "integrity": "sha512-vpX3wbOxvtnh6KMqeUgD+Lts/9yLg3Ge+z5xAhz0Yq8YBul/w7hCpoh5QFnqgw8SdjBbqWiDgX7d7HWJ1SXniQ==",
+ "version": "1.18.0-144",
+ "resolved": "https://registry.npmjs.org/@ascii-dev-user/medsurf-lib/-/medsurf-lib-1.18.0-144.tgz",
+ "integrity": "sha512-urkuq5JDTkbFBsD5umZpKzlbm2URYCmKcCXEN8nB93xcDkpn4nhTGRJr6lx5cyNwo0Pst5C7rnV9zhV+UsIHNg==",
"dependencies": {
"lodash.clonedeep": "^4.5.0",
"tslib": "^2.3.0"
@@ -12104,9 +12104,9 @@
}
},
"@ascii-dev-user/medsurf-lib": {
- "version": "1.18.0-143",
- "resolved": "https://registry.npmjs.org/@ascii-dev-user/medsurf-lib/-/medsurf-lib-1.18.0-143.tgz",
- "integrity": "sha512-vpX3wbOxvtnh6KMqeUgD+Lts/9yLg3Ge+z5xAhz0Yq8YBul/w7hCpoh5QFnqgw8SdjBbqWiDgX7d7HWJ1SXniQ==",
+ "version": "1.18.0-144",
+ "resolved": "https://registry.npmjs.org/@ascii-dev-user/medsurf-lib/-/medsurf-lib-1.18.0-144.tgz",
+ "integrity": "sha512-urkuq5JDTkbFBsD5umZpKzlbm2URYCmKcCXEN8nB93xcDkpn4nhTGRJr6lx5cyNwo0Pst5C7rnV9zhV+UsIHNg==",
"requires": {
"lodash.clonedeep": "^4.5.0",
"tslib": "^2.3.0"
diff --git a/package.json b/package.json
index dd4134927836c45d5e5b2be68883799b3a2c0f7a..6f1f9b3eaf79af178c8d6721910ca7f5e6b8494c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "medsurf-draw",
- "version": "1.0.233",
+ "version": "1.0.234",
"description": "Draw annotations on jpg/zoomify images, based on PIXI.js",
"keywords": [
"draw",
@@ -29,7 +29,7 @@
"author": "Gottsponer Andrea Leonardo",
"license": "MIT",
"dependencies": {
- "@ascii-dev-user/medsurf-lib": "^1.18.0-143",
+ "@ascii-dev-user/medsurf-lib": "^1.18.0-144",
"@babel/core": "^7.8.4",
"@pixi-essentials/cull": "^1.0.12",
"debounce": "^1.2.1",
diff --git a/src/lib/config/design.ts b/src/lib/config/design.ts
index d4acb178d9669bb39e738e9ecfaf8c46a2c5833e..398f9a692f3f84fbfd80e62a9bb4dde81eb497fb 100644
--- a/src/lib/config/design.ts
+++ b/src/lib/config/design.ts
@@ -17,6 +17,8 @@ export const Design = {
fillAlpha: 0.3,
},
selftest: {
+ zIndex: 9001,
+ scaleAspect: 0.4,
lineWidth: 1,
lineColor: 0xFFDBAC,
lineColorSelect: 0x4ae29c,
@@ -27,6 +29,8 @@ export const Design = {
fillColorUnselect: 0xF02C6B,
fillAlpha: 0.8,
pad: 2,
+ selftestRadius: 4,
+ selftestRadiusSelected: 2,
},
// Elements
image: {
diff --git a/src/lib/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts
index 28b2f83026a8d8dc985f05064da74be9e3a8cec8..16093b7bd73e873e54594e93c46dd7578380ee5f 100644
--- a/src/lib/elements/connections/Line.ts
+++ b/src/lib/elements/connections/Line.ts
@@ -1987,20 +1987,62 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
layerGroup.layerImageObjects.push(endLayerImageObject);
}
- // Get fill collections
- const fillCollections = this.getImage().getImageObjects()
- .filter((child: MedsurfDraw.ImageObject) => child instanceof MedsurfDraw.FillCollection) as MedsurfDraw.FillCollection[];
- // .map((positionPoint: MedsurfDraw.PositionPoint) => positionPoint.getChildByName(this.model.primitiveId))
- // .filter((result: MedsurfDraw.ImageObject) => result)[0] as MedsurfDraw.PrimitiveObject;
-
// Update fill collections
- for (let fillCollection of fillCollections) {
- if (fillCollection.removeLine(this)) {
- fillCollection.addLine(startLine);
- fillCollection.addLine(endLine);
- fillCollection.draw();
- }
- }
+ this.getImage().getImageObjects()
+ .filter((child: MedsurfDraw.ImageObject) => child instanceof MedsurfDraw.FillCollection)
+ .forEach((fillCollection: MedsurfDraw.FillCollection) => {
+ if (fillCollection.removeLine(this)) {
+ fillCollection.addLine(startLine);
+ fillCollection.addLine(endLine);
+ fillCollection.draw();
+ }
+ });
+
+ // Remove and add selftest items
+ this.getImage().getImageObjects()
+ .filter((child: MedsurfDraw.ImageObject) => child instanceof MedsurfDraw.PositionPoint
+ || child instanceof MedsurfDraw.FillCollection || child instanceof MedsurfDraw.LegendCollection)
+ .forEach((imageObject: MedsurfDraw.PositionPoint | MedsurfDraw.FillCollection
+ | MedsurfDraw.LegendCollection) => {
+ let index: number | undefined = undefined;
+ switch (imageObject.model.type) {
+ case Models.ImageObjectType.POSITIONPOINT:
+ const positionPoint = (imageObject as MedsurfDraw.PositionPoint);
+ if (!positionPoint.model.selftestItems) {
+ positionPoint.model.selftestItems = [];
+ }
+ index = positionPoint.model.selftestItems.findIndex((item: string) => item === this.name);
+ if (index > -1) {
+ // Remove from selftest items
+ positionPoint.model.selftestItems.splice(index, 1);
+ // Add new selftest items
+ positionPoint.model.selftestItems.push(startLine.name);
+ positionPoint.model.selftestItems.push(endLine.name);
+ }
+ break;
+ case Models.ImageObjectType.LEGENDCOLLECTION:
+ const legendCollection = (imageObject as MedsurfDraw.LegendCollection);
+ throw 'Not implemented';
+ // TODO legend selftest
+ break;
+ case Models.ImageObjectType.FILLCOLLECTION:
+ const fillCollection = (imageObject as MedsurfDraw.FillCollection);
+ if (!fillCollection.model.interactiveItems) {
+ fillCollection.model.interactiveItems = [];
+ }
+ index = fillCollection.model.interactiveItems.findIndex((item: string) => item === this.name);
+ if (index > -1) {
+ // Remove from interactive items
+ fillCollection.model.interactiveItems.splice(index, 1);
+ // Add new selftest items
+ fillCollection.model.interactiveItems.push(startLine.name);
+ fillCollection.model.interactiveItems.push(endLine.name);
+ }
+ break;
+ default:
+ throw 'Not implemented';
+ }
+ })
// Emits
this.getImage().deleteImageObject(this.model);
diff --git a/src/lib/elements/positionings/PositionPoint.ts b/src/lib/elements/positionings/PositionPoint.ts
index 8d38f0ce5644dfd03110d8e3ec5d6e8f8b351948..ba4e81f296ff2250e26e76161ba9814d057f977d 100644
--- a/src/lib/elements/positionings/PositionPoint.ts
+++ b/src/lib/elements/positionings/PositionPoint.ts
@@ -352,7 +352,6 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this._lineElement.lineWidth = lineWidth;
this._lineElement.draw();
}
-
/* TODO selftest indicator
// -- Killbox element
const rectangle = this.getRectangle();
@@ -1549,6 +1548,49 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
if (this.model.selftestItems) {
if (this.model.selftestItems.indexOf(imageObject.name as string) > -1) {
imageObject.showItem();
+ if (imageObject instanceof MedsurfDraw.PositionPoint) {
+ imageObject.children.forEach((child) => {
+ if (child instanceof MedsurfDraw.ArrowPrimitive) {
+ child.showItem();
+ // @ts-ignore
+ child._arrowElement.alpha = 1;
+ // @ts-ignore
+ child._arrowElement.showItem();
+ // @ts-ignore
+ child._selftestElement.alpha = 0;
+ } else if (child instanceof MedsurfDraw.BackgroundRectanglePrimitive) {
+ child.showItem();
+ // @ts-ignore
+ child._rectangleElement.alpha = 1;
+ // @ts-ignore
+ child._rectangleElement.showItem();
+ } else if (child instanceof MedsurfDraw.EllipsePrimitive) {
+ child.showItem();
+ // @ts-ignore
+ child._ellipseElement.alpha = 1;
+ // @ts-ignore
+ child._ellipseElement.showItem();
+ // @ts-ignore
+ child._selftestElement.alpha = 0;
+ } else if (child instanceof MedsurfDraw.RectanglePrimitive) {
+ child.showItem();
+ // @ts-ignore
+ child._rectangleElement.alpha = 1;
+ // @ts-ignore
+ child._rectangleElement.showItem();
+ // @ts-ignore
+ child._selftestElement.alpha = 0;
+ } else if (child instanceof MedsurfDraw.TextPrimitive) {
+ child.showItem();
+ // @ts-ignore
+ child._textElement.alpha = 1;
+ // @ts-ignore
+ child._textElement.showItem();
+ // @ts-ignore
+ child._selftestElement.alpha = 0;
+ }
+ });
+ }
} else if (imageObject instanceof MedsurfDraw.LegendCollection) {
const legendRows = imageObject.legendColumns.map(lc => lc.legendRows)
.reduce((cur, acc: any) => [...cur, ...acc], [])
@@ -1650,7 +1692,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
// Set element mode unselect
element.modeInteraction.setMode('choose_unselect');
- } else {
+ } else {
// Add to selftest items
this.model.selftestItems.push(element.name as string);
diff --git a/src/lib/elements/primitives/ArrowPrimitive.ts b/src/lib/elements/primitives/ArrowPrimitive.ts
index 1fd9b95a57347862bb86f71e3f79688d55cadc2c..bef58eb95ce72cd5429fb5225e71431b9f482b6d 100644
--- a/src/lib/elements/primitives/ArrowPrimitive.ts
+++ b/src/lib/elements/primitives/ArrowPrimitive.ts
@@ -18,7 +18,8 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
/**
* Members
*/
- private _wedgePoint: Models.Point | null;
+ protected _wedgePoint: Models.Point | null;
+ protected _selftestSelected = false;
/**
* Interactions
@@ -37,6 +38,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
* Elements
*/
protected _arrowElement: MedsurfDraw.Arrow;
+ protected _selftestElement: MedsurfDraw.Circle;
// protected _wedgePointElement: MedsurfDraw.WedgePoint;
/**
@@ -169,6 +171,15 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
lineWidth: this.model.strokeWidth ? Math.round(this.model.strokeWidth * imageWidth * 100) / 100 : undefined
});
this.addChild(this._arrowElement);
+ // -- Selftest element
+ this._selftestElement = new MedsurfDraw.Circle({
+ circle: new PIXI.Circle(0, 0, Design.selftest.selftestRadius),
+ options: Object.assign({}, this.model.options),
+ lineWidth: Design.selftest.lineWidth
+ });
+ this._selftestElement.zIndex = Design.selftest.zIndex;
+ this._selftestElement.hideItem();
+ this.addChild(this._selftestElement);
// -- Wedge point element
/* TODO remove
this._wedgePointElement = new MedsurfDraw.WedgePoint({
@@ -360,6 +371,20 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
// -- Arrow element
this._arrowElement.draw();
this._arrowElement.pivot.set(this._arrowElement.rectangle.width / 2, this._arrowElement.rectangle.height / 2);
+ // -- Selftest element
+ if (this._selftestElement.visible) {
+ let scale = this.getImageScale().x * Design.selftest.scaleAspect;
+ let lineWidth = Math.floor(Design.selftest.lineWidth || 1 / scale);
+ if (lineWidth < 1) {
+ lineWidth = 1;
+ }
+ console.log(this._selftestElement);
+ let radius = this._selftestSelected ? Design.selftest.selftestRadiusSelected : Design.selftest.selftestRadius;
+ radius = Math.floor(radius / scale);
+ this._selftestElement.circle.radius = radius;
+ this._selftestElement.lineWidth = lineWidth;
+ this._selftestElement.draw();
+ }
// -- Wedge point element
/* TODO remove
this._wedgePointElement.draw();
@@ -401,6 +426,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
if (this._arrowElement) {
this._arrowElement.destroy(options);
}
+ // -- Selftest element
+ if (this._selftestElement) {
+ this._selftestElement.destroy(options);
+ }
// -- Wedge point element
/* TODO remove
if (this._wedgePointElement) {
@@ -553,21 +582,42 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
// Get position point
const positionPoint = this.parent as MedsurfDraw.PositionPoint;
- if (this.model.isStatic || positionPoint.model.isSelftest) {
+ if (this.model.isStatic) {
// Setup
this.interactive = true;
this.cursor = "select";
// Events
- positionPoint.selectInteraction.reset();
- this.on("pointerover", positionPoint.selectInteraction.onHover, positionPoint.selectInteraction);
- this.on("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
- this.on("mousedown", positionPoint.selectInteraction.onPointerDown, positionPoint.selectInteraction);
- this.on("mouseup", positionPoint.selectInteraction.onSelftest, positionPoint.selectInteraction);
- }
+ this.selectInteraction.reset();
+ this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
- // Show item
- this.showItem();
+ // Show item
+ this.showItem();
+ } else if (positionPoint.model.isSelftest) {
+ // Setup
+ this.interactive = true;
+ this.cursor = "select";
+
+ // -- Arrow element
+ this._arrowElement.alpha = 0;
+ this._arrowElement.hideItem();
+ // -- Selftest element
+ this._selftestElement.alpha = 1;
+ this._selftestElement.showItem()
+
+ // Events
+ this.selectInteraction.reset();
+ this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ } else {
+ // Hide Item
+ this.hideItem();
+ }
}
/**
@@ -575,17 +625,21 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
* @private
*/
protected _removeModeSelftest(): void {
- // Get position point
- const positionPoint = this.parent as MedsurfDraw.PositionPoint;
-
- // Setup
+ // Setupthis
this.interactive = false;
+ // Elements
+ // -- Arrow element
+ this._arrowElement.alpha = 1;
+ this._arrowElement.showItem();
+ // -- Selftest element
+ this._selftestElement.hideItem();
+
// Events
- this.off("pointerover", positionPoint.selectInteraction.onHover, positionPoint.selectInteraction);
- this.off("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
- this.off("mousedown", positionPoint.selectInteraction.onPointerDown, positionPoint.selectInteraction);
- this.off("mouseup", positionPoint.selectInteraction.onSelftest, positionPoint.selectInteraction);
+ this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.off("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
}
/**
@@ -1547,7 +1601,9 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
* @private
*/
public onSelftest(): void {
+ this._selftestSelected = true;
(this.parent as MedsurfDraw.PositionPoint).onSelftest();
+ this.emit("debounceDraw");
}
//</editor-fold>
@@ -1751,6 +1807,19 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
}
//</editor-fold>
+ //<editor-fold desc="ImageZoom">
+ /**
+ * On image zoom
+ */
+ public onImageZoom(): void {
+ // Parent event
+ super.onImageZoom();
+
+ // Draw
+ this.emit("debounceDraw");
+ }
+ //</editor-fold>
+
//<editor-fold desc="BaseContainer">
/**
* Get rectangle
diff --git a/src/lib/elements/primitives/BackgroundRectanglePrimitive.ts b/src/lib/elements/primitives/BackgroundRectanglePrimitive.ts
index f0e01da01b51c436fa58240067496b1bfabf7402..e6ee67ecb3140fd585981b0349e01dffb5d6d01a 100644
--- a/src/lib/elements/primitives/BackgroundRectanglePrimitive.ts
+++ b/src/lib/elements/primitives/BackgroundRectanglePrimitive.ts
@@ -18,7 +18,8 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
/**
* Members
*/
- private _primitive: MedsurfDraw.PrimitiveObject | null;
+ protected _primitive: MedsurfDraw.PrimitiveObject | null;
+ protected _selftestSelected = false;
/**
* Interactions
@@ -568,7 +569,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
// Get position point
const positionPoint = this.parent as MedsurfDraw.PositionPoint;
- if (this.model.isStatic || positionPoint.model.isSelftest) {
+ if (this.model.isStatic) {
// Setup
this.interactive = true;
this.cursor = "select";
@@ -579,10 +580,13 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.on("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
this.on("mousedown", positionPoint.selectInteraction.onPointerDown, positionPoint.selectInteraction);
this.on("mouseup", positionPoint.selectInteraction.onSelftest, positionPoint.selectInteraction);
- }
- // Show item
- this.showItem();
+ // Show item
+ this.showItem();
+ } else {
+ // Hide Item
+ this.hideItem();
+ }
}
/**
@@ -596,6 +600,11 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
// Setup
this.interactive = false;
+ // Elements
+ // -- Rectangle element
+ this._rectangleElement.alpha = 1;
+ this._rectangleElement.showItem();
+
// Events
this.off("pointerover", positionPoint.selectInteraction.onHover, positionPoint.selectInteraction);
this.off("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
diff --git a/src/lib/elements/primitives/EllipsePrimitive.ts b/src/lib/elements/primitives/EllipsePrimitive.ts
index 0479db6f822e6069f1c885db4b49af2eb470fef8..ee3410501b20b42bf6f352ef1c8090d42ed5e54c 100644
--- a/src/lib/elements/primitives/EllipsePrimitive.ts
+++ b/src/lib/elements/primitives/EllipsePrimitive.ts
@@ -15,6 +15,11 @@ import {debounce} from "debounce";
* Ellipse primitive
*/
export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimitive, BaseElementContainerModel<Models.EllipsePrimitive>> {
+ /**
+ * Members
+ */
+ protected _selftestSelected = false;
+
/**
* Interactions
*/
@@ -32,6 +37,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
* Elements
*/
protected _ellipseElement: MedsurfDraw.Ellipse;
+ protected _selftestElement: MedsurfDraw.Circle;
/**
* Menu elements
@@ -159,6 +165,15 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
lineWidth: this.model.strokeWidth ? Math.round(this.model.strokeWidth * imageWidth * 100) / 100 : undefined
});
this.addChild(this._ellipseElement);
+ // -- Selftest element
+ this._selftestElement = new MedsurfDraw.Circle({
+ circle: new PIXI.Circle(0, 0, Design.selftest.selftestRadius),
+ options: Object.assign({}, this.model.options),
+ lineWidth: Design.selftest.lineWidth
+ });
+ this._selftestElement.zIndex = Design.selftest.zIndex;
+ this._selftestElement.hideItem();
+ this.addChild(this._selftestElement);
//</editor-fold>
//<editor-fold desc="Menu elements">
@@ -340,6 +355,19 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
//<editor-fold desc="Elements">
// -- Ellipse element
this._ellipseElement.draw();
+ // -- Selftest element
+ if (this._selftestElement.visible) {
+ let scale = this.getImageScale().x * Design.selftest.scaleAspect;
+ let lineWidth = Math.floor(Design.selftest.lineWidth || 1 / scale);
+ if (lineWidth < 1) {
+ lineWidth = 1;
+ }
+ let radius = this._selftestSelected ? Design.selftest.selftestRadiusSelected : Design.selftest.selftestRadius;
+ radius = Math.floor(radius / scale);
+ this._selftestElement.circle.radius = radius;
+ this._selftestElement.lineWidth = lineWidth;
+ this._selftestElement.draw();
+ }
//</editor-fold>
}
@@ -376,6 +404,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
if (this._ellipseElement) {
this._ellipseElement.destroy(options);
}
+ // -- Selftest element
+ if (this._selftestElement) {
+ this._selftestElement.destroy(options);
+ }
//</editor-fold>
//<editor-fold desc="Menu elements">
@@ -518,21 +550,42 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
// Get position point
const positionPoint = this.parent as MedsurfDraw.PositionPoint;
- if (this.model.isStatic || positionPoint.model.isSelftest) {
+ if (this.model.isStatic) {
// Setup
this.interactive = true;
this.cursor = "select";
// Events
- positionPoint.selectInteraction.reset();
- this.on("pointerover", positionPoint.selectInteraction.onHover, positionPoint.selectInteraction);
- this.on("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
- this.on("mousedown", positionPoint.selectInteraction.onPointerDown, positionPoint.selectInteraction);
- this.on("mouseup", positionPoint.selectInteraction.onSelftest, positionPoint.selectInteraction);
- }
+ this.selectInteraction.reset();
+ this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
- // Show item
- this.showItem();
+ // Show item
+ this.showItem();
+ } else if (positionPoint.model.isSelftest) {
+ // Setup
+ this.interactive = true;
+ this.cursor = "select";
+
+ // -- Ellipse element
+ this._ellipseElement.alpha = 0;
+ this._ellipseElement.hideItem();
+ // -- Selftest element
+ this._selftestElement.alpha = 1;
+ this._selftestElement.showItem()
+
+ // Events
+ this.selectInteraction.reset();
+ this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ } else {
+ // Hide Item
+ this.hideItem();
+ }
}
/**
@@ -540,17 +593,21 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
* @private
*/
protected _removeModeSelftest(): void {
- // Get position point
- const positionPoint = this.parent as MedsurfDraw.PositionPoint;
-
// Setup
this.interactive = false;
+ // Elements
+ // -- Ellipse element
+ this._ellipseElement.alpha = 1;
+ this._ellipseElement.showItem();
+ // -- Selftest element
+ this._selftestElement.hideItem();
+
// Events
- this.off("pointerover", positionPoint.selectInteraction.onHover, positionPoint.selectInteraction);
- this.off("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
- this.off("mousedown", positionPoint.selectInteraction.onPointerDown, positionPoint.selectInteraction);
- this.off("mouseup", positionPoint.selectInteraction.onSelftest, positionPoint.selectInteraction);
+ this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.off("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
}
/**
@@ -1460,7 +1517,9 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
* @private
*/
public onSelftest(): void {
+ this._selftestSelected = true;
(this.parent as MedsurfDraw.PositionPoint).onSelftest();
+ this.emit("debounceDraw");
}
//</editor-fold>
@@ -1630,6 +1689,19 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
}
//</editor-fold>
+ //<editor-fold desc="ImageZoom">
+ /**
+ * On image zoom
+ */
+ public onImageZoom(): void {
+ // Parent event
+ super.onImageZoom();
+
+ // Draw
+ this.emit("debounceDraw");
+ }
+ //</editor-fold>
+
//<editor-fold desc="BaseContainer">
/**
* Get rectangle
diff --git a/src/lib/elements/primitives/RectanglePrimitive.ts b/src/lib/elements/primitives/RectanglePrimitive.ts
index c89ddf544641a137d9bc4b02d38490e3cf14f6e7..4cb59e10eff343b47568317c351bb2ac7be4164b 100644
--- a/src/lib/elements/primitives/RectanglePrimitive.ts
+++ b/src/lib/elements/primitives/RectanglePrimitive.ts
@@ -15,6 +15,11 @@ import {debounce} from "debounce";
* Rectangle primitive
*/
export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePrimitive, BaseElementContainerModel<Models.RectanglePrimitive>> {
+ /**
+ * Members
+ */
+ protected _selftestSelected = false;
+
/**
* Interactions
*/
@@ -32,6 +37,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
* Elements
*/
protected _rectangleElement: MedsurfDraw.Rectangle;
+ protected _selftestElement: MedsurfDraw.Circle;
/**
* Menu elements
@@ -159,6 +165,15 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
lineWidth: this.model.strokeWidth ? Math.round(this.model.strokeWidth * imageWidth * 100) / 100 : undefined
});
this.addChild(this._rectangleElement);
+ // -- Selftest element
+ this._selftestElement = new MedsurfDraw.Circle({
+ circle: new PIXI.Circle(0, 0, Design.selftest.selftestRadius),
+ options: Object.assign({}, this.model.options),
+ lineWidth: Design.selftest.lineWidth
+ });
+ this._selftestElement.zIndex = Design.selftest.zIndex;
+ this._selftestElement.hideItem();
+ this.addChild(this._selftestElement);
//</editor-fold>
//<editor-fold desc="Menu elements">
@@ -341,6 +356,19 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// -- Rectangle element
this._rectangleElement.draw();
this._rectangleElement.pivot.set(this._rectangleElement.rectangle.width / 2, this._rectangleElement.rectangle.height / 2);
+ // -- Selftest element
+ if (this._selftestElement.visible) {
+ let scale = this.getImageScale().x * Design.selftest.scaleAspect;
+ let lineWidth = Math.floor(Design.selftest.lineWidth || 1 / scale);
+ if (lineWidth < 1) {
+ lineWidth = 1;
+ }
+ let radius = this._selftestSelected ? Design.selftest.selftestRadiusSelected : Design.selftest.selftestRadius;
+ radius = Math.floor(radius / scale);
+ this._selftestElement.circle.radius = radius;
+ this._selftestElement.lineWidth = lineWidth;
+ this._selftestElement.draw();
+ }
//</editor-fold>
}
@@ -377,6 +405,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
if (this._rectangleElement) {
this._rectangleElement.destroy(options);
}
+ // -- Selftest element
+ if (this._selftestElement) {
+ this._selftestElement.destroy(options);
+ }
//</editor-fold>
//<editor-fold desc="Menu elements">
@@ -519,21 +551,42 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// Get position point
const positionPoint = this.parent as MedsurfDraw.PositionPoint;
- if (this.model.isStatic || positionPoint.model.isSelftest) {
+ if (this.model.isStatic) {
// Setup
this.interactive = true;
this.cursor = "select";
// Events
- positionPoint.selectInteraction.reset();
- this.on("pointerover", positionPoint.selectInteraction.onHover, positionPoint.selectInteraction);
- this.on("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
- this.on("mousedown", positionPoint.selectInteraction.onPointerDown, positionPoint.selectInteraction);
- this.on("mouseup", positionPoint.selectInteraction.onSelftest, positionPoint.selectInteraction);
- }
+ this.selectInteraction.reset();
+ this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
- // Show item
- this.showItem();
+ // Show item
+ this.showItem();
+ } else if (positionPoint.model.isSelftest) {
+ // Setup
+ this.interactive = true;
+ this.cursor = "select";
+
+ // -- Rectangle element
+ this._rectangleElement.alpha = 0;
+ this._rectangleElement.hideItem();
+ // -- Selftest element
+ this._selftestElement.alpha = 1;
+ this._selftestElement.showItem();
+
+ // Events
+ this.selectInteraction.reset();
+ this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ } else {
+ // Hide Item
+ this.hideItem();
+ }
}
/**
@@ -541,17 +594,21 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
* @private
*/
protected _removeModeSelftest(): void {
- // Get position point
- const positionPoint = this.parent as MedsurfDraw.PositionPoint;
-
// Setup
this.interactive = false;
+ // Elements
+ // -- Rectangle element
+ this._rectangleElement.alpha = 1;
+ this._rectangleElement.showItem();
+ // -- Selftest element
+ this._selftestElement.hideItem();
+
// Events
- this.off("pointerover", positionPoint.selectInteraction.onHover, positionPoint.selectInteraction);
- this.off("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
- this.off("mousedown", positionPoint.selectInteraction.onPointerDown, positionPoint.selectInteraction);
- this.off("mouseup", positionPoint.selectInteraction.onSelftest, positionPoint.selectInteraction);
+ this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.off("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
}
/**
@@ -1461,7 +1518,9 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
* @private
*/
public onSelftest(): void {
+ this._selftestSelected = true;
(this.parent as MedsurfDraw.PositionPoint).onSelftest();
+ this.emit("debounceDraw");
}
//</editor-fold>
@@ -1631,6 +1690,19 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
}
//</editor-fold>
+ //<editor-fold desc="ImageZoom">
+ /**
+ * On image zoom
+ */
+ public onImageZoom(): void {
+ // Parent event
+ super.onImageZoom();
+
+ // Draw
+ this.emit("debounceDraw");
+ }
+ //</editor-fold>
+
//<editor-fold desc="BaseContainer">
/**
* Get rectangle
diff --git a/src/lib/elements/primitives/TextPrimitive.ts b/src/lib/elements/primitives/TextPrimitive.ts
index 5f2869effce99f4e8038bc69a558ebf02e8d5e62..ea2694a44600281f4862cd68a64e6c8dafd98ad4 100644
--- a/src/lib/elements/primitives/TextPrimitive.ts
+++ b/src/lib/elements/primitives/TextPrimitive.ts
@@ -15,6 +15,11 @@ import {debounce} from "debounce";
* Text primitive
*/
export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, BaseElementContainerModel<Models.TextPrimitive>> {
+ /**
+ * Members
+ */
+ protected _selftestSelected = false;
+
/**
* Interactions
*/
@@ -33,6 +38,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
* Elements
*/
protected _textElement: MedsurfDraw.Text;
+ protected _selftestElement: MedsurfDraw.Circle;
/**
* Menu elements
@@ -173,6 +179,15 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this._textElement.on("onText", this.onText, this);
this._textElement.on("endText", this.endText, this);
this.addChild(this._textElement);
+ // -- Selftest element
+ this._selftestElement = new MedsurfDraw.Circle({
+ circle: new PIXI.Circle(0, 0, Design.selftest.selftestRadius),
+ options: {hasLine: true, lineColor: style.fill, lineAlpha: 1, hasFill: true, fillColor: style.fill, fillAlpha: 1},
+ lineWidth: Design.selftest.lineWidth
+ });
+ this._selftestElement.zIndex = Design.selftest.zIndex;
+ this._selftestElement.hideItem();
+ this.addChild(this._selftestElement);
//</editor-fold>
//<editor-fold desc="Menu elements">
@@ -364,6 +379,21 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Pivot
this.pivot.set(this._textElement.width / 2, this._textElement.height / 2);
+
+ // Elements
+ // -- Selftest element
+ if (this._selftestElement.visible) {
+ let scale = this.getImageScale().x * Design.selftest.scaleAspect;
+ let lineWidth = Math.floor(Design.selftest.lineWidth || 1 / scale);
+ if (lineWidth < 1) {
+ lineWidth = 1;
+ }
+ let radius = this._selftestSelected ? Design.selftest.selftestRadiusSelected : Design.selftest.selftestRadius;
+ radius = Math.floor(radius / scale);
+ this._selftestElement.circle.radius = radius;
+ this._selftestElement.lineWidth = lineWidth;
+ this._selftestElement.draw();
+ }
}
/**
@@ -401,6 +431,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this._textElement.off("endText", this.endText, this);
this._textElement.destroy(options);
}
+ // -- Selftest element
+ if (this._selftestElement) {
+ this._selftestElement.destroy(options);
+ }
//</editor-fold>
//<editor-fold desc="Menu elements">
@@ -528,6 +562,8 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Elements
// -- Text element
this._textElement.onImageZoom();
+ // -- Selfteest element
+ this._selftestElement.onImageZoom();
if (this.model.isStatic) {
// Show item
@@ -569,21 +605,42 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Get position point
const positionPoint = this.parent as MedsurfDraw.PositionPoint;
- if (this.model.isStatic || positionPoint.model.isSelftest) {
+ if (this.model.isStatic) {
// Setup
this.interactive = true;
this.cursor = "select";
// Events
- positionPoint.selectInteraction.reset();
- this.on("pointerover", positionPoint.selectInteraction.onHover, positionPoint.selectInteraction);
- this.on("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
- this.on("mousedown", positionPoint.selectInteraction.onPointerDown, positionPoint.selectInteraction);
- this.on("mouseup", positionPoint.selectInteraction.onSelftest, positionPoint.selectInteraction);
- }
+ this.selectInteraction.reset();
+ this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
- // Show item
- this.showItem();
+ // Show item
+ this.showItem();
+ } else if (positionPoint.model.isSelftest) {
+ // Setup
+ this.interactive = true;
+ this.cursor = "select";
+
+ // -- Text element
+ this._textElement.alpha = 0;
+ this._textElement.hideItem();
+ // -- Selftest element
+ this._selftestElement.alpha = 1;
+ this._selftestElement.showItem();
+
+ // Events
+ this.selectInteraction.reset();
+ this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ } else {
+ // Hide Item
+ this.hideItem();
+ }
}
/**
@@ -591,17 +648,21 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
* @private
*/
protected _removeModeSelftest(): void {
- // Get position point
- const positionPoint = this.parent as MedsurfDraw.PositionPoint;
-
// Setup
this.interactive = false;
+ // Elements
+ // -- Text element
+ this._textElement.alpha = 1;
+ this._textElement.showItem();
+ // -- Selftest element
+ this._selftestElement.hideItem();
+
// Events
- this.off("pointerover", positionPoint.selectInteraction.onHover, positionPoint.selectInteraction);
- this.off("pointerout", positionPoint.selectInteraction.onOut, positionPoint.selectInteraction);
- this.off("mousedown", positionPoint.selectInteraction.onPointerDown, positionPoint.selectInteraction);
- this.off("mouseup", positionPoint.selectInteraction.onSelftest, positionPoint.selectInteraction);
+ this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.off("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
}
/**
@@ -1240,56 +1301,6 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
(this.parent as MedsurfDraw.PositionPoint).onButtonClipboard();
}
//</editor-fold>
- //<editor-fold desc="Selftest">
- /**
- * On button set selftest
- * @param event
- */
- // TODO
- public onButtonSetSelftest(event: PIXI.InteractionEvent): void {
- /* TODO
- this.model.isSelftest = !this.model.isSelftest;
- this._selftestButton.text = this.model.isSelftest ? "\uf00d" : "\uf00c";
- this._lineColor = this.model.isSelftest ? this._lineColorSelftest : this._lineColorSelected;
- this._fillColor = this.model.isSelftest ? this._fillColorSelftest : this._fillColorSelected;
- this.emit("debounceDraw");
-
- if (this.model.isSelftest) {
- this._selftestContainerElement.addImageObject(this._selftestChooseButton);
- this._selftestContainerElement.draw();
- } else {
- const items = this.selftestItemElements;
- this.selftestItemElements = []; // Remove existing items
- items.forEach((element: MedsurfDraw.ImageObject) => {
- element.modeInteraction.changeMode("blocked", this);
- });
- this._selftestContainerElement.removeImageObject(this._selftestChooseButton);
- }
-
- this.emit("selftestChanged");
-
- // Update
- this.getImage().updateImageObject(this.model);
- */
- }
-
- /**
- * On button choose selftest
- * @param event
- */
- // TODO
- public onButtonChooseSelftest(event: PIXI.InteractionEvent): void {
- /* TODO
- // TODO better implementation: this._configurationElement.hideItem();
- this.removeChild(this._configurationElement);
-
- const image = this.getImage();
-
- image.generator = new MedsurfDraw.SelftestGenerator(image, this.parent as MedsurfDraw.PositionPoint, this);
- image.modeInteraction.changeMode("choose");
- */
- }
- //</editor-fold>
//<editor-fold desc="Color">
/**
* On color
@@ -1681,7 +1692,9 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
* @private
*/
public onSelftest(): void {
+ this._selftestSelected = true;
(this.parent as MedsurfDraw.PositionPoint).onSelftest();
+ this.emit("debounceDraw");
}
//</editor-fold>
@@ -1730,8 +1743,11 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// @ts-ignore TODO ignore
this.model.style.fontSize = this._textElement.style.fontSize / imageWidth;
- // Update image zoom
+ // Elements
+ // -- Text element
this._textElement.onImageZoom();
+ // -- Selfteest element
+ this._selftestElement.onImageZoom();
// Draw
this.draw();
@@ -1847,6 +1863,19 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
}
//</editor-fold>
+ //<editor-fold desc="ImageZoom">
+ /**
+ * On image zoom
+ */
+ public onImageZoom(): void {
+ // Parent event
+ super.onImageZoom();
+
+ // Draw
+ this.emit("debounceDraw");
+ }
+ //</editor-fold>
+
//<editor-fold desc="BaseContainer">
/**
* Get rectangle