diff --git a/package-lock.json b/package-lock.json
index 1b05964039d4465be63899f89056d829357bf4f8..88d18ebe10901678d3378268c909c2fe1ed49fa9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "medsurf-draw",
- "version": "1.0.13",
+ "version": "1.0.15",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index e673d78eeda96638a1a002469c345b2add29e9a4..fc11492714df275536fa6087ded6a34f16e4bd81 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "medsurf-draw",
- "version": "1.0.13",
+ "version": "1.0.15",
"description": "Draw annotations on jpg/zoomify images, based on PIXI.js",
"keywords": [
"draw",
diff --git a/src/app/index.ts b/src/app/index.ts
index d640d2e59733484edcd1c79dcad8cb30545fc3b7..53f87fb58b11303df99c8c9c64ec3909a74e8c64 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -232,12 +232,14 @@ PIXI.Renderer.registerPlugin('bla', bla);
});
//</editor-fold>
+ const imageWidth: number = 29512;
+
// IMAGES
// BaseSprite
// let image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("https://api.medsurf.stage.iml.unibe.ch/v1/file/slides/3893/image/1500x1514_80_eaaa24fd-e69e-491e-b576-fccab29c85a2.jpg"));
// let image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("http://localhost:3000/v1/file/slide/2701,2701/image/1800x1800_80.jpeg"));
// Tile BaseSprite
- let image = new MedsurfTileSprite(app.renderer, canvas, 5800, "https://api.medsurf.stage.iml.unibe.ch:443/v1/file/slide/5800/image/", 29512, 20512);
+ let image = new MedsurfTileSprite(app.renderer, canvas, 5800, "https://api.medsurf.stage.iml.unibe.ch:443/v1/file/slide/5800/image/", imageWidth, 20512);
// Video
// const image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("./assets/juldem.mp4"));
@@ -273,11 +275,17 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 600,
- y: 400,
+ x: 600 / imageWidth,
+ y: 400 / imageWidth,
},
- isSelftest: false
- });
+ isSelftest: true,
+ selftestItems: [
+ 'rect',
+ 'ellipse',
+ 'text',
+ 'legendText2_2'
+ ]
+ },imageWidth);
image.addChild(point1);
const arrow = new ArrowPrimitive({
@@ -286,14 +294,19 @@ PIXI.Renderer.registerPlugin('bla', bla);
isStatic: false,
positionPoint: point1.model,
rotateWithLine: false,
- rectangle: new PIXI.Rectangle(0, 0, 20, 20),
+ rectangle: new PIXI.Rectangle(
+ 0,
+ 0,
+ 20 / imageWidth,
+ 20 / imageWidth
+ ),
strokeWidth: 1,
options: {
hasLine: false,
hasFill: true,
fillColor: 0xFF0000,
}
- });
+ }, imageWidth);
point1.addChild(arrow);
// Rectangle
@@ -302,11 +315,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 700,
- y: 400,
+ x: 700 / imageWidth,
+ y: 400 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(point2);
const rect = new RectanglePrimitive({
@@ -315,14 +328,19 @@ PIXI.Renderer.registerPlugin('bla', bla);
isStatic: false,
positionPoint: point2.model,
rotateWithLine: false,
- rectangle: new PIXI.Rectangle(0, 0, 20, 20),
+ rectangle: new PIXI.Rectangle(
+ 0,
+ 0,
+ 20 / imageWidth,
+ 20 / imageWidth
+ ),
strokeWidth: 1,
options: {
hasLine: false,
hasFill: true,
fillColor: 0x00FF00,
}
- });
+ }, imageWidth);
point2.addChild(rect);
// Ellipse
@@ -331,11 +349,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 700,
- y: 300,
+ x: 700 / imageWidth,
+ y: 300 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(point3);
const ellipse = new EllipsePrimitive({
@@ -344,14 +362,19 @@ PIXI.Renderer.registerPlugin('bla', bla);
isStatic: false,
positionPoint: point3.model,
rotateWithLine: false,
- ellipse: new PIXI.Ellipse(0, 0, 10, 10),
+ ellipse: new PIXI.Ellipse(
+ 0,
+ 0,
+ 10 / imageWidth,
+ 10 / imageWidth
+ ),
strokeWidth: 1,
options: {
hasLine: false,
hasFill: true,
fillColor: 0x0000FF,
}
- });
+ }, imageWidth);
point3.addChild(ellipse);
// Text
@@ -360,11 +383,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 700,
- y: 200,
+ x: 700 / imageWidth,
+ y: 200 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(point5);
const text = new TextPrimitive({
@@ -375,19 +398,19 @@ PIXI.Renderer.registerPlugin('bla', bla);
rotateWithLine: false,
text: "Hello Text",
rectangle: {
- x: 60,
+ x: 60 / imageWidth,
y: 0,
width: 0,
height: 0,
},
style: {
fill: 0xFFFFFF,
- fontSize: 22,
+ fontSize: 22 / imageWidth,
fontFamily: "proxima_nova_altsemibold",
align: 'left',
wordWrap: false,
}
- });
+ }, imageWidth);
point5.addChild(text);
// Lines
@@ -414,11 +437,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 300,
- y: 400,
+ x: 300 / imageWidth,
+ y: 400 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p1);
const p2 = new PositionPoint({
@@ -426,11 +449,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 200,
- y: 300,
+ x: 200 / imageWidth,
+ y: 300 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p2);
const p3 = new PositionPoint({
@@ -438,11 +461,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 100,
- y: 200,
+ x: 100 / imageWidth,
+ y: 200 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p3);
const p4 = new PositionPoint({
@@ -450,11 +473,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 100,
- y: 400,
+ x: 100 / imageWidth,
+ y: 400 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p4);
const p5 = new PositionPoint({
@@ -462,11 +485,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 400,
- y: 400,
+ x: 400 / imageWidth,
+ y: 400 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p5);
const p6 = new PositionPoint({
@@ -474,11 +497,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 300,
- y: 200,
+ x: 300 / imageWidth,
+ y: 200 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p6);
const p7 = new PositionPoint({
@@ -486,11 +509,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 400,
- y: 200,
+ x: 400 / imageWidth,
+ y: 200 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p7);
const p8 = new PositionPoint({
@@ -498,11 +521,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 500,
- y: 200,
+ x: 500 / imageWidth,
+ y: 200 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p8);
const p9 = new PositionPoint({
@@ -510,11 +533,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 500,
- y: 400,
+ x: 500 / imageWidth,
+ y: 400 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p9);
const p10 = new PositionPoint({
@@ -522,11 +545,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 300,
- y: 300,
+ x: 300 / imageWidth,
+ y: 300 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p10);
const p11 = new PositionPoint({
@@ -534,11 +557,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 400,
- y: 300,
+ x: 400 / imageWidth,
+ y: 300 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p11);
const p12 = new PositionPoint({
@@ -546,11 +569,11 @@ PIXI.Renderer.registerPlugin('bla', bla);
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: 500,
- y: 300,
+ x: 500 / imageWidth,
+ y: 300 / imageWidth,
},
isSelftest: false
- });
+ }, imageWidth);
image.addChild(p12);
@@ -558,183 +581,207 @@ PIXI.Renderer.registerPlugin('bla', bla);
id: 'l1',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p1.model,
- end: p2.model,
+ // @ts-ignore
+ start: p1.model.id,
+ // @ts-ignore
+ end: p2.model.id,
isBezier: false,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
lineColor: 0xFF0000,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l1);
const l2 = new Line({
id: 'l2',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p2.model,
- end: p3.model,
+ // @ts-ignore
+ start: p2.model.id,
+ // @ts-ignore
+ end: p3.model.id,
isBezier: true,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l2);
const l3 = new Line({
id: 'l3',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p2.model,
- end: p4.model,
+ // @ts-ignore
+ start: p2.model.id,
+ // @ts-ignore
+ end: p4.model.id,
isBezier: false,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l3);
const l4 = new Line({
id: 'l4',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p1.model,
- end: p5.model,
+ // @ts-ignore
+ start: p1.model.id,
+ // @ts-ignore
+ end: p5.model.id,
isBezier: false,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l4);
const l5 = new Line({
id: 'l5',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p2.model,
- end: p6.model,
+ // @ts-ignore
+ start: p2.model.id,
+ // @ts-ignore
+ end: p6.model.id,
isBezier: true,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l5);
const l6 = new Line({
id: 'l6',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p6.model,
- end: p7.model,
+ // @ts-ignore
+ start: p6.model.id,
+ // @ts-ignore
+ end: p7.model.id,
isBezier: true,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l6);
const l7 = new Line({
id: 'l7',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p7.model,
- end: p8.model,
+ // @ts-ignore
+ start: p7.model.id,
+ // @ts-ignore
+ end: p8.model.id,
isBezier: true,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l7);
const l8 = new Line({
id: 'l8',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p5.model,
- end: p9.model,
+ // @ts-ignore
+ start: p5.model.id,
+ // @ts-ignore
+ end: p9.model.id,
isBezier: false,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l8);
const l9 = new Line({
id: 'l9',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p2.model,
- end: p10.model,
+ // @ts-ignore
+ start: p2.model.id,
+ // @ts-ignore
+ end: p10.model.id,
isBezier: true,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
lineColor: 0xFF0000,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l9);
const l10 = new Line({
id: 'l10',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p10.model,
- end: p11.model,
+ // @ts-ignore
+ start: p10.model.id,
+ // @ts-ignore
+ end: p11.model.id,
isBezier: true,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l10);
const l11 = new Line({
id: 'l11',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p11.model,
- end: p12.model,
+ // @ts-ignore
+ start: p11.model.id,
+ // @ts-ignore
+ end: p12.model.id,
isBezier: true,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l11);
const l12 = new Line({
id: 'l12',
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: p10.model,
- end: p1.model,
+ // @ts-ignore
+ start: p10.model.id,
+ // @ts-ignore
+ end: p1.model.id,
isBezier: false,
- strokeWidth: 1,
+ strokeWidth: 1 / imageWidth,
options: {
hasLine: true,
lineColor: 0xFF0000,
hasFill: false,
}
- });
+ }, imageWidth);
image.addChild(l12);
@@ -742,25 +789,37 @@ PIXI.Renderer.registerPlugin('bla', bla);
id: 'fill1',
type: Models.ImageObjectType.FILLCOLLECTION,
isStatic: false,
- isInteractive: false,
- lines: [l1.model, l9.model, l12.model],
+ isInteractive: true,
+ lines: [l1.model.id, l9.model.id, l12.model.id],
+ interactiveItems: [
+ 'arrow',
+ 'rect',
+ 'ellipse',
+ 'text',
+ 'legendText1_1'
+ ],
options: {
hasLine: false,
hasFill: true,
fillColor: 0xFF00FF,
}
- });
+ }, imageWidth);
image.addChild(fill1);
const legendCollectionModel: Models.LegendCollection = {
id: 'legend1',
type: Models.ImageObjectType.LEGENDCOLLECTION,
isStatic: false,
- rectangle: new PIXI.Rectangle(200, 100, 300, 100),
+ rectangle: new PIXI.Rectangle(
+ 200 / imageWidth,
+ 100 / imageWidth,
+ 300 / imageWidth,
+ 100 / imageWidth
+ ),
cols: [],
- rowDistance: 14,
- columnDistance: 14,
- indexWidth: 14
+ rowDistance: 14 / imageWidth,
+ columnDistance: 14 / imageWidth,
+ indexWidth: 14 / imageWidth
};
const legendColumn1: Models.LegendColumn = {
@@ -775,7 +834,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
text: 'row1\nrow1',
style: {
fill: 0xFFFFFF,
- fontSize: 22,
+ fontSize: 22 / imageWidth,
fontFamily: 'proxima_nova_altsemibold',
align: 'left',
wordWrap: true,
@@ -789,7 +848,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
text: 'row1',
style: {
fill: 0xFFFFFF,
- fontSize: 22,
+ fontSize: 22 / imageWidth,
fontFamily: 'proxima_nova_altsemibold',
align: 'left',
wordWrap: true,
@@ -803,7 +862,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
text: 'row1',
style: {
fill: 0xFFFFFF,
- fontSize: 22,
+ fontSize: 22 / imageWidth,
fontFamily: 'proxima_nova_altsemibold',
align: 'left',
wordWrap: true,
@@ -824,7 +883,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
text: 'row2',
style: {
fill: 0xFFFFFF,
- fontSize: 22,
+ fontSize: 22 / imageWidth,
fontFamily: 'proxima_nova_altsemibold',
align: 'left',
wordWrap: true,
@@ -838,7 +897,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
text: 'row2',
style: {
fill: 0xFFFFFF,
- fontSize: 22,
+ fontSize: 22 / imageWidth,
fontFamily: 'proxima_nova_altsemibold',
align: 'left',
wordWrap: true,
@@ -859,7 +918,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
text: 'row1',
style: {
fill: 0xFFFFFF,
- fontSize: 22,
+ fontSize: 22 / imageWidth,
fontFamily: 'proxima_nova_altsemibold',
align: 'left',
wordWrap: true,
@@ -873,7 +932,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
text: 'row1',
style: {
fill: 0xFFFFFF,
- fontSize: 22,
+ fontSize: 22 / imageWidth,
fontFamily: 'proxima_nova_altsemibold',
align: 'left',
wordWrap: true,
@@ -883,7 +942,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
legendColumn3.rows.push(...[legendText3_1, legendText3_2]);
legendCollectionModel.cols.push(...[legendColumn1, legendColumn2, legendColumn3]);
- const legend1 = new LegendCollection(legendCollectionModel);
+ const legend1 = new LegendCollection(legendCollectionModel, imageWidth);
legend1.name = "legend1";
image.addChild(legend1);
diff --git a/src/lib/bases/BaseDrawGenerator.ts b/src/lib/bases/BaseDrawGenerator.ts
index 857a7bd9bc7d72e3529d8b701160a89d8c4450f9..08da41cf6e92faf4eaec1b3366f89efffc4e8258 100644
--- a/src/lib/bases/BaseDrawGenerator.ts
+++ b/src/lib/bases/BaseDrawGenerator.ts
@@ -8,16 +8,31 @@ export abstract class BaseDrawGenerator extends BaseGenerator {
/**
* Members
*/
- protected _drawInteraction: DrawInteraction;
+ private _imageWidth: number;
+ private _drawInteraction: DrawInteraction;
/**
* Constructor
+ * @param targetElement
+ * @param imageWidth
+ * @param targetPositionPoint
*/
- protected constructor(targetElement: ImageObject, targetPositionPoint?: PositionPoint) {
+ protected constructor(targetElement: ImageObject, imageWidth: number, targetPositionPoint?: PositionPoint) {
super(targetElement, targetPositionPoint);
+
+ // Setup
+ this._imageWidth = imageWidth;
}
//<editor-fold desc="Getter and Setter">
+ public get imageWidth(): number {
+ return this._imageWidth;
+ }
+
+ public set imageWidth(value: number) {
+ this._imageWidth = value;
+ }
+
public get drawInteraction(): DrawInteraction {
return this._drawInteraction;
}
diff --git a/src/lib/bases/BaseElementContainer.ts b/src/lib/bases/BaseElementContainer.ts
index 8b7624ac5550ff48f9302e7a640d20f43988722c..7438bcaeb6592ecdef4c003fd15e6a8392ecfeb4 100644
--- a/src/lib/bases/BaseElementContainer.ts
+++ b/src/lib/bases/BaseElementContainer.ts
@@ -7,12 +7,14 @@ export abstract class BaseElementContainer<T extends Models.ImageObject> extends
* Members
*/
private _model: T;
+ private _imageWidth: number;
/**
* Constructor
* @param model
+ * @param imageWidth
*/
- protected constructor(model: T) {
+ protected constructor(model: T, imageWidth: number) {
super();
// Defaults
@@ -22,6 +24,7 @@ export abstract class BaseElementContainer<T extends Models.ImageObject> extends
// Setup
this._model = model;
+ this._imageWidth = imageWidth;
// @ts-ignore
this.name = model.id;
}
@@ -35,6 +38,14 @@ export abstract class BaseElementContainer<T extends Models.ImageObject> extends
this._model = value;
}
+ public get imageWidth(): number {
+ return this._imageWidth;
+ }
+
+ public set imageWidth(value: number) {
+ this._imageWidth = value;
+ }
+
/* TODO
public get isStatic(): boolean {
return this.model.isStatic;
diff --git a/src/lib/bases/BaseGenerator.ts b/src/lib/bases/BaseGenerator.ts
index bf104c95f3897f20b1d8a2f6da0a4c3726f6ef8e..24e1944cf5bfd6bce678f7071671e24344b898eb 100644
--- a/src/lib/bases/BaseGenerator.ts
+++ b/src/lib/bases/BaseGenerator.ts
@@ -14,6 +14,8 @@ export abstract class BaseGenerator extends PIXI.utils.EventEmitter {
/**
* Constructor
+ * @param targetElement
+ * @param targetPositionPoint
*/
protected constructor(targetElement: ImageObject, targetPositionPoint?: PositionPoint) {
super();
diff --git a/src/lib/elements/collections/FillCollection.ts b/src/lib/elements/collections/FillCollection.ts
index ed7d09432598c15596b32e306b04d00d49df21d5..f3f019539f273ca7992ecf5b24823ae3b9e66299 100644
--- a/src/lib/elements/collections/FillCollection.ts
+++ b/src/lib/elements/collections/FillCollection.ts
@@ -15,6 +15,10 @@ import {TextPrimitive} from "../primitives/TextPrimitive";
import {ConfigurationElement} from "../interactions/ConfigurationElement";
import {LegendTextPrimitive} from "../primitives/LegendTextPrimitive";
import {InteractiveGenerator} from "../../generators/InteractiveGenerator";
+import {LegendCollection} from "./LegendCollection";
+import {LegendColumnCollection} from "./LegendColumnCollection";
+import DisplayObject = PIXI.DisplayObject;
+import {LegendItem} from "@ascii-dev-user/medsurf-lib/models";
/**
* Fill collection
@@ -29,7 +33,6 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
protected _fillAlpha: number;
/* TODO remove
private _isInteractive: boolean;
- private _interactiveItems: ImageObject[];
protected _color: number;
protected _fillColor: number;
protected _fillAlpha: number;
@@ -70,9 +73,10 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
/**
* Constructor
* @param model
+ * @param imageWidth
*/
- public constructor(model: Models.FillCollection) {
- super(model);
+ public constructor(model: Models.FillCollection, imageWidth: number) {
+ super(model, imageWidth);
// Defaults
if (!this.model.options) {
@@ -93,13 +97,11 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
// Setup
this.zIndex = 99;
- this._interactiveItems = [];
- this._lines = [];
+ this.interactiveItems = [];
+ this.lines = [];
this._fillColor = this.model.options.fillColor;
/* TODO remove
- this._lines = model.lines; // TODO type
this.isInteractive = false;
- this.interactiveItems = [];
this._color = model.options ? model.options.fillColor || 0xFFFFFF : 0xFFFFFF;
this._fillAlpha = this._fillAlphaNormal;
*/
@@ -169,8 +171,8 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
// On added event
this.on("added", (parent: MedsurfSprite) => {
- this._lines = this.model.lines.map((line: Models.Line) => {
- return this.getImage().getChildByName(line.id || 'new') as Line;
+ this.lines = this.model.lines.map((id: string) => {
+ return this.getImage().getChildByName(id) as Line;
});
// Events
@@ -186,7 +188,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
parent.on("itemFillChoosing", this._itemFillChoosing, this);
parent.on("allElementRelease", this._allElementRelease, this);
- this._lines.forEach((line: Line) => {
+ this.lines.forEach((line: Line) => {
line.on("draw", this.draw, this);
line.on("positionPointAdded", this._positionPointAdded, this);
line.on("removed", this._onRemoveButton, this);
@@ -206,7 +208,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
parent.off("itemFillChoosing", this._itemFillChoosing, this);
parent.off("allElementRelease", this._allElementRelease, this);
- this._lines.forEach((line: Line) => {
+ this.lines.forEach((line: Line) => {
line.off("draw", this.draw, this);
line.off("positionPointAdded", this._positionPointAdded, this);
line.off("removed", this._onRemoveButton, this);
@@ -216,14 +218,14 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
//<editor-fold desc="Public functions">
public validate(): boolean {
- if (this._lines.length === 0) {
+ if (this.lines.length === 0) {
return false;
}
// Find positionPoints with an odd count of lines
let positionPointReference: PositionPoint[] = [];
let positionPointReferenceCount: number[] = [];
- this._lines.find((line: Line) => {
+ this.lines.find((line: Line) => {
if (!line.graphicLine.start || !line.graphicLine.end) {
return;
}
@@ -268,7 +270,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
}
// Get first element and moveTo this
- let line: Line = this._lines[0];
+ let line: Line = this.lines[0];
if (!line.graphicLine.start || !line.graphicLine.end) {
return;
}
@@ -284,7 +286,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
}
this._fillElement.moveTo(startPoint.x, startPoint.y);
- for (let i = 0; i < this._lines.length; i++) {
+ for (let i = 0; i < this.lines.length; i++) {
switch (line.graphicLine.type) {
case LineTypes.LINEAR:
this._fillElement.lineTo(endPoint.x, endPoint.y);
@@ -301,7 +303,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
}
// Get next line
- const nextLine = this._lines.find((nextLine: Line) => {
+ const nextLine = this.lines.find((nextLine: Line) => {
return nextLine !== line && (nextLine.graphicLine.start === endPoint || nextLine.graphicLine.end === endPoint);
});
@@ -376,7 +378,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
}
public hasLine(line: Line): boolean {
- return this._lines.some((l: Line) => l === line);
+ return this.lines.some((l: Line) => l === line);
}
public addLine(line: Line): void {
@@ -384,8 +386,9 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
line.on("positionPointAdded", this._positionPointAdded, this);
line.on("removed", this._onRemoveButton, this);
- this.model.lines.push(line.model);
- this._lines.push(line);
+ // @ts-ignore
+ this.model.lines.push(line.model.id);
+ this.lines.push(line);
this.draw();
}
@@ -395,8 +398,8 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
line.off("positionPointAdded", this._positionPointAdded, this);
line.off("removed", this._onRemoveButton, this);
- this.model.lines = this.model.lines.filter((model: Models.Line) => model.id !== line.name);
- this._lines = this._lines.filter((l: Line) => l !== line);
+ this.model.lines = this.model.lines.filter((id: string) => id !== line.name);
+ this.lines = this.lines.filter((l: Line) => l !== line);
this.draw();
}
@@ -419,8 +422,23 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
*/
protected _stageReady(): void {
if (this.model.interactiveItems) {
- this._interactiveItems = this.model.interactiveItems.map((item: Models.ImageObject) => {
- return this.getImage().getChildByName(item.id || 'new') as ImageObject;
+ this.interactiveItems = this.model.interactiveItems.map((id: string) => {
+ let imageObject = this.getImage().getChildByName(id) as ImageObject;
+ if (!imageObject) {
+ imageObject = this.getImage().children
+ .filter((child: ImageObject) => child instanceof PositionPoint)
+ .map((positionPoint: PositionPoint) => positionPoint.getChildByName(id))
+ .filter((result: ImageObject) => result)[0] as ImageObject;
+ }
+ if (!imageObject) {
+ imageObject = this.getImage().children
+ .filter((child: ImageObject) => child instanceof LegendCollection)
+ .map((legendCollection: LegendCollection) => legendCollection.rotateContainer.children.filter((child) => child instanceof LegendColumnCollection))
+ .reduce((cur, acc) => [...cur, ...acc], [])
+ .map((legendColumnCollection: LegendColumnCollection) => legendColumnCollection.rotateContainer.getChildByName(id))
+ .filter((result: ImageObject) => result)[0] as ImageObject;
+ }
+ return imageObject;
});
}
@@ -826,7 +844,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
if (this.model.isInteractive) {
this._configurationElement.addChild(this._interactiveChooseButton);
} else {
- const items = this._interactiveItems;
+ const items = this.interactiveItems;
this.interactiveItems = [];
this.model.interactiveItems = []; // Remove existing items
items.forEach((element: ImageObject) => {
@@ -895,5 +913,9 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
public get lines(): Line[] {
return this._lines;
}
+
+ public set lines(value: Line[]) {
+ this._lines = value;
+ }
//</editor-fold>
}
\ No newline at end of file
diff --git a/src/lib/elements/collections/LegendCollection.ts b/src/lib/elements/collections/LegendCollection.ts
index 415264854a8780342b00c58f4560938f365cdae9..5d22f44ebab12cfe122e3fe979a00ba19bfabe1b 100644
--- a/src/lib/elements/collections/LegendCollection.ts
+++ b/src/lib/elements/collections/LegendCollection.ts
@@ -22,7 +22,7 @@ import {PointElement} from "../interactions/PointElement";
/**
* Legend collection
* TODO Problem with index show -> new item
- * TODO integrate rowDistance, colDistance, indexWidth
+ * TODO integrate rowDistance, colDistance, indexWidth *= positionPointModel.image.dimensions.width;
*/
export class LegendCollection extends BaseElementContainer<Models.LegendCollection> {
/**
@@ -31,7 +31,6 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
protected _columns: LegendColumnCollection[]; // TODO implement this -> add in added
protected _rectangle: PIXI.Rectangle;
/*
- protected _table: LegendItem[][];
private _isSelftest: boolean;
*/
@@ -48,7 +47,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
protected _hitAreaFixElement: PIXI.Graphics;
private _selftestPointElement: PointElement;
- protected _rotateContainer: PIXI.Container;
+ private _rotateContainer: PIXI.Container;
protected _configurationElement: ConfigurationElement;
protected _scaleElement: ScaleElement;
protected _rotateElement: RotateElement;
@@ -77,21 +76,29 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
/**
* Constructor
* @param model
+ * @param imageWidth
*/
- public constructor(model: Models.LegendCollection) {
- super(model);
+ public constructor(model: Models.LegendCollection, imageWidth: number) {
+ super(model, imageWidth);
// Setup
this.zIndex = 300;
this._columns = [];
- this._rectangle = new PIXI.Rectangle(0, 0, this.model.rectangle.width, this.model.rectangle.height);
+ this._rectangle = new PIXI.Rectangle(
+ 0,
+ 0,
+ this.model.rectangle.width * this.imageWidth,
+ this.model.rectangle.height * this.imageWidth
+ );
/* TODO remove
- this._table = this._model.cols; // TODO check correct schema
this._isSelftest = false;
*/
// Position
- this.position.set(this.model.rectangle.x, this.model.rectangle.y);
+ this.position.set(
+ this.model.rectangle.x * this.imageWidth,
+ this.model.rectangle.y * this.imageWidth
+ );
// Events
this.modeInteraction = new ModeInteraction(this);
@@ -134,8 +141,8 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this._hitAreaFixElement = new PIXI.Graphics();
this.addChild(this._hitAreaFixElement);
- this._rotateContainer = new PIXI.Container();
- this.addChild(this._rotateContainer);
+ this.rotateContainer = new PIXI.Container();
+ this.addChild(this.rotateContainer);
this._selftestPointElement = (model.selftestPoint && model.selftestPoint.x && model.selftestPoint.y) ? new PointElement(model.selftestPoint.x, model.selftestPoint.y) : new PointElement(this._rectangle.x, this._rectangle.y);
this._selftestPointElement.on("onMove", this._onSelftestMove, this);
@@ -194,23 +201,21 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
// Init elements
for (let col = 0; col < this.model.cols.length; col++) {
- const container = new LegendColumnCollection(this.model.cols[col], col + "_container", col);
+ const container = new LegendColumnCollection(this.imageWidth, this.model.cols[col], col + "_container", col);
this._columns.push(container);
- this._rotateContainer.addChild(container);
+ this.rotateContainer.addChild(container);
for (let row = 0; row < this.model.cols[col].rows.length; row++) {
const textElement = this._columns[col].rows[row];
textElement.index = row;
textElement.on("onText", this.draw, this);
- // @ts-ignore
- container._rotateContainer.addChild(textElement);
+ container.rotateContainer.addChild(textElement);
// @ts-ignore
const numberElement = this._createNumberElement(textElement._textElement.style);
numberElement.name = col + "_" + row + "_num";
- // @ts-ignore
- container._rotateContainer.addChild(numberElement);
+ container.rotateContainer.addChild(numberElement);
}
}
}
@@ -222,14 +227,13 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
let index: number = 1;
this._rectangle.height = 0;
for (let col = 0; col < this.model.cols.length; col++) {
- const container = this._rotateContainer.getChildByName(col + "_container") as LegendColumnCollection;
+ const container = this.rotateContainer.getChildByName(col + "_container") as LegendColumnCollection;
let previousMaxHeight: number = 0;
let previousTextElement: LegendTextPrimitive | null = null;
for (let row = 0; row < this.model.cols[col].rows.length; row++) {
const textElement = this._columns[col].rows[row];
- // @ts-ignore
- const numberElement = container._rotateContainer.getChildByName(col + "_" + row + "_num") as PIXI.Text;
+ const numberElement = container.rotateContainer.getChildByName(col + "_" + row + "_num") as PIXI.Text;
if (previousTextElement) {
numberElement.position.set(col * colWidth, previousTextElement.y + previousMaxHeight);
@@ -257,7 +261,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
if (previousTextElement && previousMaxHeight && previousTextElement.y + previousMaxHeight > this._rectangle.height) {
this._rectangle.height = previousTextElement.y + previousMaxHeight;
- this._rotateContainer.pivot.y = this._rectangle.height / 2;
+ this.rotateContainer.pivot.y = this._rectangle.height / 2;
}
}
@@ -335,26 +339,24 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
const col = this.model.cols.length - 1;
- const container = new LegendColumnCollection(this.model.cols[col], col + "_container", col);
+ const container = new LegendColumnCollection(this.imageWidth, this.model.cols[col], col + "_container", col);
container.modeInteraction.defaultMode = "author";
this._columns.push(container);
- this._rotateContainer.addChild(container);
+ this.rotateContainer.addChild(container);
for (let row = 0; row < this.model.cols[col].rows.length; row++) {
const textElement = this._columns[col].rows[row];
textElement.modeInteraction.defaultMode = "author";
textElement.index = row;
textElement.on("onText", this.draw, this);
- // @ts-ignore
- container._rotateContainer.addChild(textElement);
+ container.rotateContainer.addChild(textElement);
// @ts-ignore
const numberElement = this._createNumberElement(textElement._textElement.style);
numberElement.visible = true;
numberElement.name = col + "_" + row + "_num";
- // @ts-ignore
- container._rotateContainer.addChild(numberElement);
+ container.rotateContainer.addChild(numberElement);
}
container.modeInteraction.defaultMode = "parent_selected";
@@ -365,29 +367,26 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
public removeColItem(col: number): void {
// Remove col
- const container = this._rotateContainer.getChildByName(col + "_container");
+ const container = this.rotateContainer.getChildByName(col + "_container") as LegendColumnCollection;
for (let row = 0; row < this.model.cols[col].rows.length; row++) {
const textElement = this._columns[col].rows[row];
textElement.off("onText", this.draw, this);
textElement.modeInteraction.changeMode("delete");
- // @ts-ignore
- const numberElement = container._rotateContainer.getChildByName(col + "_" + row + "_num") as PIXI.Text;
- // @ts-ignore
- container._rotateContainer.removeChild(numberElement);
+ const numberElement = container.rotateContainer.getChildByName(col + "_" + row + "_num") as PIXI.Text;
+ container.rotateContainer.removeChild(numberElement);
numberElement.destroy();
}
- this._rotateContainer.removeChild(container);
+ this.rotateContainer.removeChild(container);
// Update right hand names
for (let c = col + 1; c < this.model.cols.length; c++) {
- const container = this._rotateContainer.getChildByName(c + "_container") as LegendColumnCollection;
+ const container = this.rotateContainer.getChildByName(c + "_container") as LegendColumnCollection;
container.index = (c - 1);
container.name = (c - 1) + "_container";
for (let row = 0; row < this.model.cols[c].rows.length; row++) {
- // @ts-ignore
- const numberElement = container._rotateContainer.getChildByName(c + "_" + row + "_num") as PIXI.Text;
+ const numberElement = container.rotateContainer.getChildByName(c + "_" + row + "_num") as PIXI.Text;
numberElement.name = (c - 1) + "_" + row + "_num";
}
}
@@ -413,26 +412,24 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
wordWrap: this._wordWrapDefault,
},
col: this.model.cols[col]
- });
+ }, this.imageWidth);
this.model.cols[col].rows.push(textElement.model);
this._columns[col].rows.push(textElement);
const row = this.model.cols[col].rows.length - 1;
- const container = this._rotateContainer.getChildByName(col + "_container") as LegendColumnCollection;
+ const container = this.rotateContainer.getChildByName(col + "_container") as LegendColumnCollection;
textElement.modeInteraction.defaultMode = "author";
textElement.index = row;
textElement.on("onText", this.draw, this);
- // @ts-ignore
- container._rotateContainer.addChild(textElement);
+ container.rotateContainer.addChild(textElement);
// @ts-ignore
const numberElement = this._createNumberElement(textElement._textElement.style);
numberElement.visible = true;
numberElement.name = col + "_" + row + "_num";
- // @ts-ignore
- container._rotateContainer.addChild(numberElement);
+ container.rotateContainer.addChild(numberElement);
textElement.modeInteraction.defaultMode = "parent_selected";
textElement.modeInteraction.changeMode(textElement.modeInteraction.defaultMode);
@@ -442,16 +439,14 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
public removeRowItem(col: number, row: number): void {
// Remove col
- const container = this._rotateContainer.getChildByName(col + "_container");
+ const container = this.rotateContainer.getChildByName(col + "_container") as LegendColumnCollection;
const textElement = this._columns[col].rows[row];
textElement.off("onText", this.draw, this);
textElement.modeInteraction.changeMode("delete");
- // @ts-ignore
- const numberElement = container._rotateContainer.getChildByName(col + "_" + row + "_num") as PIXI.Text;
- // @ts-ignore
- container._rotateContainer.removeChild(numberElement);
+ const numberElement = container.rotateContainer.getChildByName(col + "_" + row + "_num") as PIXI.Text;
+ container.rotateContainer.removeChild(numberElement);
numberElement.destroy();
// Update lower hand names
@@ -459,8 +454,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
const textElement = this._columns[col].rows[r];
textElement.index = (r - 1);
- // @ts-ignore
- const numberElement = container._rotateContainer.getChildByName(col + "_" + r + "_num") as PIXI.Text;
+ const numberElement = container.rotateContainer.getChildByName(col + "_" + r + "_num") as PIXI.Text;
numberElement.name = col + "_" + (r - 1) + "_num";
}
@@ -478,12 +472,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
public setSelftestPosition(name: string): void {
const numberElementName = /^([0-9]+)_[0-9]+/.exec(name);
if (numberElementName && numberElementName.length === 2) {
- const container = this._rotateContainer.getChildByName(numberElementName[1] + "_container") as LegendColumnCollection;
+ const container = this.rotateContainer.getChildByName(numberElementName[1] + "_container") as LegendColumnCollection;
- // @ts-ignore
- const textElement = container._rotateContainer.getChildByName(name) as LegendTextPrimitive;
- // @ts-ignore
- const numberElement = container._rotateContainer.getChildByName(numberElementName[0] + "_num") as PIXI.Text;
+ const textElement = container.rotateContainer.getChildByName(name) as LegendTextPrimitive;
+ const numberElement = container.rotateContainer.getChildByName(numberElementName[0] + "_num") as PIXI.Text;
const selftestPointPosition = this._selftestPointElement.position;
numberElement.position.set(selftestPointPosition.x, selftestPointPosition.y);
@@ -503,37 +495,37 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.modeInteraction.changeMode(mode);
this.emit("setDefaultMode", mode);
- this._rotateContainer.emit("setDefaultMode", mode);
+ this.rotateContainer.emit("setDefaultMode", mode);
}
protected _stageReady(): void {
this.draw();
this.emit("stage-ready");
- this._rotateContainer.emit("stage-ready");
+ this.rotateContainer.emit("stage-ready");
}
protected _showInteractions(): void {
this._selftestPointElement.draw();
- this._rotateContainer.addChild(this._selftestPointElement);
+ this.rotateContainer.addChild(this._selftestPointElement);
this._configurationElement.draw();
- this._rotateContainer.addChild(this._configurationElement);
+ this.rotateContainer.addChild(this._configurationElement);
this._scaleElement.draw();
- this._rotateContainer.addChild(this._scaleElement);
+ this.rotateContainer.addChild(this._scaleElement);
this._rotateElement.draw();
- this._rotateContainer.addChild(this._rotateElement);
+ this.rotateContainer.addChild(this._rotateElement);
- this._rotateContainer.sortChildren();
+ this.rotateContainer.sortChildren();
this.getImage().sortImageObjects();
}
protected _hideInteractions(): void {
- this._rotateContainer.removeChild(this._selftestPointElement);
- this._rotateContainer.removeChild(this._configurationElement);
- this._rotateContainer.removeChild(this._scaleElement);
- this._rotateContainer.removeChild(this._rotateElement);
+ this.rotateContainer.removeChild(this._selftestPointElement);
+ this.rotateContainer.removeChild(this._configurationElement);
+ this.rotateContainer.removeChild(this._scaleElement);
+ this.rotateContainer.removeChild(this._rotateElement);
this.getImage().sortImageObjects();
}
@@ -622,7 +614,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.emit("pointerover", new PIXI.interaction.InteractionEvent());
- this._rotateContainer.children.forEach((child: DisplayObject) => {
+ this.rotateContainer.children.forEach((child: DisplayObject) => {
if (child instanceof LegendColumnCollection) {
child.modeInteraction.defaultMode = "parent_selected";
child.modeInteraction.changeMode(child.modeInteraction.defaultMode);
@@ -660,7 +652,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.off("startRotate", this._startRotate, this);
this.off("endRotate", this._endRotate, this);
- this._rotateContainer.children.forEach((child: DisplayObject) => {
+ this.rotateContainer.children.forEach((child: DisplayObject) => {
if (child instanceof LegendColumnCollection) {
child.modeInteraction.defaultMode = "author";
child.modeInteraction.changeMode(child.modeInteraction.defaultMode);
@@ -760,8 +752,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
}
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
- this.position.x = this.model.rectangle.x += dX;
- this.position.y = this.model.rectangle.y += dY;
+ this.position.x += dX;
+ this.position.y += dY;
+ this.model.rectangle.x = this.position.x / this.imageWidth;
+ this.model.rectangle.y = this.position.y / this.imageWidth;
}
protected _onSelftestMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
@@ -776,9 +770,9 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
//<editor-fold desc="Scale">
protected _startScale(): void {
- this._rotateContainer.removeChild(this._selftestPointElement);
- this._rotateContainer.removeChild(this._configurationElement);
- this._rotateContainer.removeChild(this._rotateElement);
+ this.rotateContainer.removeChild(this._selftestPointElement);
+ this.rotateContainer.removeChild(this._configurationElement);
+ this.rotateContainer.removeChild(this._rotateElement);
}
protected _onScale(dX: number, dY: number, dW: number, dH: number): void {
@@ -800,14 +794,17 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
}
// Element
- this._rectangle.width = this.model.rectangle.width += dW;
- this._rectangle.height = this.model.rectangle.height += dH;
+ this._rectangle.width += dW;
+ this._rectangle.height += dH;
+ this.model.rectangle.width = this._rectangle.width / this.imageWidth;
+ this.model.rectangle.height = this._rectangle.height / this.imageWidth;
+
// Position TODO not needed ??
// this.position.x += (dX + dW / 2) * Math.cos(this.rotation) - (dY + dH / 2) * Math.sin(this.rotation);
// this.position.y += (dY + dH / 2) * Math.cos(this.rotation) + (dX + dW / 2) * Math.sin(this.rotation);
- this._rotateContainer.pivot.x += dW / 2;
- this._rotateContainer.pivot.y += dH / 2;
+ this.rotateContainer.pivot.x += dW / 2;
+ this.rotateContainer.pivot.y += dH / 2;
this.draw();
this._scaleElement.draw();
@@ -816,45 +813,45 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
protected _endScale(): void {
this._selftestPointElement.draw();
- this._rotateContainer.addChild(this._selftestPointElement);
+ this.rotateContainer.addChild(this._selftestPointElement);
this._configurationElement.draw();
- this._rotateContainer.addChild(this._configurationElement);
+ this.rotateContainer.addChild(this._configurationElement);
this._rotateElement.draw();
- this._rotateContainer.addChild(this._rotateElement);
+ this.rotateContainer.addChild(this._rotateElement);
}
//</editor-fold>
//<editor-fold desc="Rotate">
protected _startRotate(): void {
- this._rotateContainer.removeChild(this._selftestPointElement);
- this._rotateContainer.removeChild(this._configurationElement);
- this._rotateContainer.removeChild(this._scaleElement);
+ this.rotateContainer.removeChild(this._selftestPointElement);
+ this.rotateContainer.removeChild(this._configurationElement);
+ this.rotateContainer.removeChild(this._scaleElement);
this._rotateMeasureElement.draw();
this.addChild(this._rotateMeasureElement);
}
protected _onRotate(dR: number): void {
- this._rotateContainer.rotation += dR;
+ this.rotateContainer.rotation += dR;
}
protected _endRotate(): void {
this._selftestPointElement.draw();
- this._rotateContainer.addChild(this._selftestPointElement);
+ this.rotateContainer.addChild(this._selftestPointElement);
this._configurationElement.draw();
- this._rotateContainer.addChild(this._configurationElement);
+ this.rotateContainer.addChild(this._configurationElement);
this._scaleElement.draw();
- this._rotateContainer.addChild(this._scaleElement);
+ this.rotateContainer.addChild(this._scaleElement);
this.removeChild(this._rotateMeasureElement);
}
protected _lineRotate(r: number): void {
- this._rotateContainer.rotation = r + Math.PI / 2;
+ this.rotateContainer.rotation = r + Math.PI / 2;
}
//</editor-fold>
@@ -881,7 +878,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.modeInteraction.changeMode("blocked", element);
}
this.emit("itemSelected", event, element);
- this._rotateContainer.emit("itemSelected", event, element);
+ this.rotateContainer.emit("itemSelected", event, element);
}
protected _itemSelftest(event: PIXI.interaction.InteractionEvent, element: ImageObject): void {
@@ -889,7 +886,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.selectInteraction.onRelease(event);
}
this.emit("itemSelftest", event);
- this._rotateContainer.emit("itemSelftest", event);
+ this.rotateContainer.emit("itemSelftest", event);
}
protected _itemInteractive(event: PIXI.interaction.InteractionEvent, element: ImageObject): void {
@@ -897,7 +894,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.selectInteraction.onRelease(event);
}
this.emit("itemInteractive", event);
- this._rotateContainer.emit("itemInteractive", event);
+ this.rotateContainer.emit("itemInteractive", event);
}
protected _itemDrawing(event: PIXI.interaction.InteractionEvent, element: ImageObject): void {
@@ -905,7 +902,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.modeInteraction.changeMode("drawing", element);
}
this.emit("itemDrawing", event, element);
- this._rotateContainer.emit("itemDrawing", event, element);
+ this.rotateContainer.emit("itemDrawing", event, element);
}
protected _itemSelftestChoosing(event: PIXI.interaction.InteractionEvent, element: ImageObject): void {
@@ -913,7 +910,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.modeInteraction.changeMode("selftest_choosing", element);
}
this.emit("itemSelftestChoosing", event, element);
- this._rotateContainer.emit("itemSelftestChoosing", event, element);
+ this.rotateContainer.emit("itemSelftestChoosing", event, element);
}
protected _itemInteractiveChoosing(event: PIXI.interaction.InteractionEvent, element: ImageObject): void {
@@ -921,7 +918,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.modeInteraction.changeMode("interactive_choosing", element);
}
this.emit("itemInteractiveChoosing", event, element);
- this._rotateContainer.emit("itemInteractiveChoosing", event, element);
+ this.rotateContainer.emit("itemInteractiveChoosing", event, element);
}
protected _itemFillChoosing(event: PIXI.interaction.InteractionEvent, element: ImageObject): void {
@@ -929,14 +926,14 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.modeInteraction.changeMode("fill_choosing", element);
}
this.emit("itemFillChoosing", event, element);
- this._rotateContainer.emit("itemFillChoosing", event, element);
+ this.rotateContainer.emit("itemFillChoosing", event, element);
}
protected _allElementRelease(event: PIXI.interaction.InteractionEvent): void {
this.selectInteraction.onRelease(event);
this.modeInteraction.changeMode(this.modeInteraction.defaultMode);
this.emit("allElementRelease", event);
- this._rotateContainer.emit("allElementRelease", event);
+ this.rotateContainer.emit("allElementRelease", event);
}
//</editor-fold>
@@ -972,7 +969,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
}
public getRotation(): number {
- return this._rotateContainer.rotation;
+ return this.rotateContainer.rotation;
}
public getRectangle(): PIXI.Rectangle {
@@ -982,7 +979,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
public showItem(): void {
this.renderable = true;
- this._rotateContainer.pivot.set(this._rectangle.width / 2, this._rectangle.height / 2);
+ this.rotateContainer.pivot.set(this._rectangle.width / 2, this._rectangle.height / 2);
// this.pivot.set(0, this._rectangle.height / 2); // TODO pivot for rotation
}
@@ -1039,5 +1036,14 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
public set selftestPointElement(value: PointElement) {
this._selftestPointElement = value;
}
- //</editor-fold>
+
+ public get rotateContainer(): PIXI.Container {
+ return this._rotateContainer;
+ }
+
+ public set rotateContainer(value: PIXI.Container) {
+ this._rotateContainer = value;
+ }
+
+//</editor-fold>
}
\ No newline at end of file
diff --git a/src/lib/elements/collections/LegendColumnCollection.ts b/src/lib/elements/collections/LegendColumnCollection.ts
index 043cf299df63bf312f49b6b371a41107032edc86..e18b1fc1d4022fc0521be9636955688fcc3ee31e 100644
--- a/src/lib/elements/collections/LegendColumnCollection.ts
+++ b/src/lib/elements/collections/LegendColumnCollection.ts
@@ -18,6 +18,7 @@ export class LegendColumnCollection extends BaseContainer {
/**
* Members
*/
+ private _imageWidth: number;
private _model: Models.LegendColumn;
private _rows: LegendTextPrimitive[];
private _index: number;
@@ -30,7 +31,7 @@ export class LegendColumnCollection extends BaseContainer {
/**
* Elements
*/
- protected _rotateContainer: PIXI.Container;
+ private _rotateContainer: PIXI.Container;
protected _configurationElement: ConfigurationElement;
protected _scaleElement: SimpleScaleElement;
@@ -43,15 +44,17 @@ export class LegendColumnCollection extends BaseContainer {
/**
* Constructor
+ * @param imageWidth
* @param model
* @param name
* @param index
*/
- public constructor(model: Models.LegendColumn, name: string, index: number) {
+ public constructor(imageWidth: number, model: Models.LegendColumn, name: string, index: number) {
super();
// Setup
this.zIndex = 300;
+ this.imageWidth = imageWidth;
this.model = model;
this.rows = [];
this.name = name;
@@ -139,7 +142,7 @@ export class LegendColumnCollection extends BaseContainer {
});
for (let row = 0; row < this.model.rows.length; row++) {
- const text = new LegendTextPrimitive(this.model.rows[row]);
+ const text = new LegendTextPrimitive(this.model.rows[row], this.imageWidth);
this._rows.push(text);
}
}
@@ -577,6 +580,14 @@ export class LegendColumnCollection extends BaseContainer {
//</editor-fold>
//<editor-fold desc="Getter and Setter">
+ public get imageWidth(): number {
+ return this._imageWidth;
+ }
+
+ public set imageWidth(value: number) {
+ this._imageWidth = value;
+ }
+
public get model(): Models.LegendColumn {
return this._model;
}
@@ -609,6 +620,14 @@ export class LegendColumnCollection extends BaseContainer {
this._rows = value;
}
+ public get rotateContainer(): PIXI.Container {
+ return this._rotateContainer;
+ }
+
+ public set rotateContainer(value: PIXI.Container) {
+ this._rotateContainer = value;
+ }
+
// TODO better solution for this
public get isStatic(): boolean {
// @ts-ignore
diff --git a/src/lib/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts
index cf818f12c88461c7708f0ba8a7119fc56d0ed240..7a0c7a92f7a4928689167f30b92c33992e8a3a87 100644
--- a/src/lib/elements/connections/Line.ts
+++ b/src/lib/elements/connections/Line.ts
@@ -49,6 +49,7 @@ export class Line extends BaseElementContainer<Models.Line> {
private _graphicLine: GraphicLine;
protected _lineColor: number;
protected _lineAlpha: number;
+ protected _strokeWidth: number;
/**
* Interactions
@@ -75,7 +76,7 @@ export class Line extends BaseElementContainer<Models.Line> {
/**
* Design
*/
- protected readonly _strokeWidth: number = 2;
+ protected readonly _strokeWidthDefault: number = 2;
protected readonly _lineAlphaDefault: number = 1;
protected readonly _lineColorDefault: number = 0xFFFFFF;
protected readonly _lineColorSelected: number = 0x4a90e2;
@@ -92,9 +93,10 @@ export class Line extends BaseElementContainer<Models.Line> {
/**
* Constructor
* @param model
+ * @param imageWidth
*/
- public constructor(model: Models.Line) {
- super(model);
+ public constructor(model: Models.Line, imageWidth: number) {
+ super(model, imageWidth);
// Defaults
if (!this.model.options) {
@@ -125,6 +127,7 @@ export class Line extends BaseElementContainer<Models.Line> {
};
this._lineColor = this.model.options.lineColor;
this._lineAlpha = this.model.options.lineAlpha;
+ this._strokeWidth = this.model.strokeWidth * this.imageWidth;
/* TODO remove
// this._start = start;
@@ -202,12 +205,8 @@ export class Line extends BaseElementContainer<Models.Line> {
// On added event
this.on("added", (parent: MedsurfSprite) => {
- if (!this.model.start.id || !this.model.end.id) {
- throw "PositionPoint don't exists";
- }
-
- this.graphicLine.start = this.getImage().getChildByName(this.model.start.id) as PositionPoint;
- this.graphicLine.end = this.getImage().getChildByName(this.model.end.id) as PositionPoint;
+ this.graphicLine.start = this.getImage().getChildByName(this.model.start) as PositionPoint;
+ this.graphicLine.end = this.getImage().getChildByName(this.model.end) as PositionPoint;
this._positionPointButton.position.x += 20;
this._bezierButton.position.x += this._positionPointButton.position.x + this._positionPointButton.getWidth();
@@ -291,7 +290,7 @@ export class Line extends BaseElementContainer<Models.Line> {
if (startLines.length == 0 && endLines.length == 0) {
// No matching control points
- this._lineElement.lineStyle(this.model.strokeWidth, this._lineColor, this._lineAlpha);
+ this._lineElement.lineStyle(this._strokeWidth, this._lineColor, this._lineAlpha);
this._lineElement.moveTo(this.graphicLine.start.x, this.graphicLine.start.y);
this._lineElement.lineTo(this.graphicLine.end.x, this.graphicLine.end.y);
}
@@ -427,7 +426,7 @@ export class Line extends BaseElementContainer<Models.Line> {
this._controlPointsElement.endFill();
}
- this._lineElement.lineStyle(this.model.strokeWidth, this._lineColor, this._lineAlpha);
+ this._lineElement.lineStyle(this._strokeWidth, this._lineColor, this._lineAlpha);
this._lineElement.moveTo(startPoint.x, startPoint.y);
if (startPoint.x == endPoint.x && endPoint.x == controlPoint.x || startPoint.y == endPoint.y && endPoint.y == controlPoint.y || Math.abs(Math.round((startPoint.x * (endPoint.y - controlPoint.y) + endPoint.x * (controlPoint.y - startPoint.y) + controlPoint.x * (startPoint.y - endPoint.y)) * 100000) / 100000) == 0) {
this._lineElement.lineTo(endPoint.x, endPoint.y);
@@ -571,7 +570,7 @@ export class Line extends BaseElementContainer<Models.Line> {
this._controlPointsElement.endFill();
}
- this._lineElement.lineStyle(this.model.strokeWidth, this._lineColor, this._lineAlpha);
+ this._lineElement.lineStyle(this._strokeWidth, this._lineColor, this._lineAlpha);
this._lineElement.moveTo(this.graphicLine.start.x, this.graphicLine.start.y);
this._lineElement.bezierCurveTo(controlPointsPrevious.c2.x, controlPointsPrevious.c2.y, controlPointsNext.c1.x, controlPointsNext.c1.y, this.graphicLine.end.x, this.graphicLine.end.y);
this.graphicLine.type = LineTypes.BEZIER;
@@ -579,7 +578,7 @@ export class Line extends BaseElementContainer<Models.Line> {
this.graphicLine.controlEnd = controlPointsNext.c1;
}
} else {
- this._lineElement.lineStyle(this.model.strokeWidth, this._lineColor, this._lineAlpha);
+ this._lineElement.lineStyle(this._strokeWidth, this._lineColor, this._lineAlpha);
this._lineElement.moveTo(this.graphicLine.start.x, this.graphicLine.start.y);
this._lineElement.lineTo(this.graphicLine.end.x, this.graphicLine.end.y);
}
@@ -588,10 +587,10 @@ export class Line extends BaseElementContainer<Models.Line> {
// TODO better resolution for circles or better calculation
this._lineCornerElement.clear();
- this._lineCornerElement.lineStyle(this.model.strokeWidth / 2, this._lineColor, this._lineAlpha);
+ this._lineCornerElement.lineStyle(this._strokeWidth / 2, this._lineColor, this._lineAlpha);
this._lineCornerElement.beginFill(this._lineColor, this._lineAlpha);
- this._lineCornerElement.drawCircle(this.graphicLine.start.x, this.graphicLine.start.y, this.model.strokeWidth / 4);
- this._lineCornerElement.drawCircle(this.graphicLine.end.x, this.graphicLine.end.y, this.model.strokeWidth / 4);
+ this._lineCornerElement.drawCircle(this.graphicLine.start.x, this.graphicLine.start.y, this._strokeWidth / 4);
+ this._lineCornerElement.drawCircle(this.graphicLine.end.x, this.graphicLine.end.y, this._strokeWidth / 4);
this._lineCornerElement.endFill();
@@ -1141,7 +1140,7 @@ export class Line extends BaseElementContainer<Models.Line> {
y: posY
},
isSelftest: false
- });
+ }, this.imageWidth);
positionPointNew.modeInteraction.defaultMode = "author";
image.addChild(positionPointNew);
@@ -1149,16 +1148,18 @@ export class Line extends BaseElementContainer<Models.Line> {
const newLineStart = new Line({
type: Models.ImageObjectType.LINE,
isStatic: this.model.isStatic,
- start: this.graphicLine.start.model,
- end: positionPointNew.model,
+ // @ts-ignore
+ start: this.graphicLine.start.model.id,
+ // @ts-ignore
+ end: positionPointNew.model.id,
isBezier: this.model.isBezier,
- strokeWidth: this._strokeWidth,
+ strokeWidth: this._strokeWidthDefault,
options: {
hasLine: true,
lineColor: this.model.options.lineColor,
hasFill: false
}
- });
+ }, this.imageWidth);
newLineStart.modeInteraction.defaultMode = "author";
image.addChild(newLineStart);
@@ -1166,16 +1167,18 @@ export class Line extends BaseElementContainer<Models.Line> {
const newLineEnd = new Line({
type: Models.ImageObjectType.LINE,
isStatic: this.model.isStatic,
- start: positionPointNew.model,
- end: this.graphicLine.end.model,
+ // @ts-ignore
+ start: positionPointNew.model.id,
+ // @ts-ignore
+ end: this.graphicLine.end.model.id,
isBezier: this.model.isBezier,
- strokeWidth: this._strokeWidth,
+ strokeWidth: this._strokeWidthDefault,
options: {
hasLine: true,
lineColor: this.model.options.lineColor,
hasFill: false,
}
- });
+ }, this.imageWidth);
newLineEnd.modeInteraction.defaultMode = "author";
image.addChild(newLineEnd);
diff --git a/src/lib/elements/images/MedsurfSprite.ts b/src/lib/elements/images/MedsurfSprite.ts
index 2a71314b6eae91de441a816ea6843297e5694cef..d7b4f56ff444aa1d8ef22dac9f07d507a9db9c87 100644
--- a/src/lib/elements/images/MedsurfSprite.ts
+++ b/src/lib/elements/images/MedsurfSprite.ts
@@ -20,6 +20,11 @@ import {SelftestGenerator} from "../../generators/SelftestGenerator";
import {FillCollectionGenerator} from "../../generators/FillCollectionGenerator";
import {InteractiveGenerator} from "../../generators/InteractiveGenerator";
+export enum ImageTypes {
+ NORMAL,
+ DEEPZOOM
+}
+
/**
* Medsurf sprite
* Zoom And Pan: https://github.com/anvaka/ngraph/tree/master/examples/pixi.js/03%20-%20Zoom%20And%20Pan
@@ -29,6 +34,8 @@ export class MedsurfSprite extends BaseSprite {
/**
* Members
*/
+ private _imageWidth: number;
+ private _imageType: ImageTypes;
protected _itemSelected: boolean;
private _texture: PIXI.Texture | string;
protected _renderer: PIXI.Renderer | PIXI.CanvasRenderer;
@@ -78,12 +85,15 @@ export class MedsurfSprite extends BaseSprite {
* @param renderer
* @param canvas
* @param texture
+ * @param imageWidth
*/
- constructor(renderer: PIXI.Renderer | PIXI.CanvasRenderer, canvas: HTMLCanvasElement, texture: PIXI.Texture) {
+ constructor(renderer: PIXI.Renderer | PIXI.CanvasRenderer, canvas: HTMLCanvasElement, texture: PIXI.Texture, imageWidth: number) {
super(texture);
// TODO remove this.name = "medsurf-sprite";
// Setup
+ this.imageWidth = imageWidth;
+ this.imageType = ImageTypes.NORMAL;
this.zIndex = 10;
this._itemSelected = false;
this._renderer = renderer;
@@ -614,49 +624,49 @@ export class MedsurfSprite extends BaseSprite {
protected _onArrowButton(event: PIXI.interaction.InteractionEvent): void {
this.removeChild(this._contextElement);
- this.generator = new ArrowPrimitiveGenerator(this, event);
+ this.generator = new ArrowPrimitiveGenerator(this, event, this.imageWidth);
this.modeInteraction.changeMode("draw");
}
protected _onEllipseButton(event: PIXI.interaction.InteractionEvent): void {
this.removeChild(this._contextElement);
- this.generator = new EllipsePrimitiveGenerator(this, event);
+ this.generator = new EllipsePrimitiveGenerator(this, event, this.imageWidth);
this.modeInteraction.changeMode("draw");
}
protected _onRectangleButton(event: PIXI.interaction.InteractionEvent): void {
this.removeChild(this._contextElement);
- this.generator = new RectanglePrimitiveGenerator(this, event);
+ this.generator = new RectanglePrimitiveGenerator(this, event, this.imageWidth);
this.modeInteraction.changeMode("draw");
}
protected _onTextButton(event: PIXI.interaction.InteractionEvent): void {
this.removeChild(this._contextElement);
- this.generator = new TextPrimitiveGenerator(this, event);
+ this.generator = new TextPrimitiveGenerator(this, event, this.imageWidth);
this.modeInteraction.changeMode("draw");
}
protected _onLineButton(event: PIXI.interaction.InteractionEvent): void {
this.removeChild(this._contextElement);
- this.generator = new LineGenerator(this, event);
+ this.generator = new LineGenerator(this, event, this.imageWidth);
this.modeInteraction.changeMode("draw");
}
protected _onPolygonButton(event: PIXI.interaction.InteractionEvent): void {
this.removeChild(this._contextElement);
- this.generator = new PolygonGenerator(this, event);
+ this.generator = new PolygonGenerator(this, event, this.imageWidth);
this.modeInteraction.changeMode("draw");
}
protected _onFillButton(event: PIXI.interaction.InteractionEvent): void {
this.removeChild(this._contextElement);
- this.generator = new FillCollectionGenerator(this, event);
+ this.generator = new FillCollectionGenerator(this, event, this.imageWidth);
this.modeInteraction.changeMode("choose");
}
//</editor-fold>
@@ -763,6 +773,22 @@ export class MedsurfSprite extends BaseSprite {
//</editor-fold>
//<editor-fold desc="Getter and Setter">
+ public get imageWidth(): number {
+ return this._imageWidth;
+ }
+
+ public set imageWidth(value: number) {
+ this._imageWidth = value;
+ }
+
+ public get imageType(): ImageTypes {
+ return this._imageType;
+ }
+
+ public set imageType(value: ImageTypes) {
+ this._imageType = value;
+ }
+
public get generator(): BaseGenerator {
return this._generator;
}
diff --git a/src/lib/elements/images/MedsurfTileSprite.ts b/src/lib/elements/images/MedsurfTileSprite.ts
index 00e23a82edbb7bf7a6b63f26345f7bfe3b29b114..ed74345b05a6be089eb6b45b271d76d68280eb88 100644
--- a/src/lib/elements/images/MedsurfTileSprite.ts
+++ b/src/lib/elements/images/MedsurfTileSprite.ts
@@ -1,5 +1,5 @@
import * as PIXI from "pixi.js-legacy";
-import {MedsurfSprite} from "./MedsurfSprite";
+import {ImageTypes, MedsurfSprite} from "./MedsurfSprite";
import {TileSprite} from "./TileSprite";
import {ImageObject} from "../../bases/BaseModul";
import {PositionPoint} from "../positionings/PositionPoint";
@@ -56,8 +56,10 @@ export class MedsurfTileSprite extends MedsurfSprite {
* @param tileSize
*/
public constructor(renderer: PIXI.Renderer | PIXI.CanvasRenderer, canvas: HTMLCanvasElement, slideId: number, tilesUrl: string, imgWidth: number, imgHeight: number, tileSize: number = 256) {
- super(renderer, canvas, PIXI.Texture.EMPTY);
+ super(renderer, canvas, PIXI.Texture.EMPTY, imgWidth);
+ // Setup
+ this.imageType = ImageTypes.DEEPZOOM;
this._deleted = false;
// TODO use this for better performance this.renderer = renderer;
diff --git a/src/lib/elements/interactions/ImageNavigatorElement.ts b/src/lib/elements/interactions/ImageNavigatorElement.ts
index f4b43c5ca5850b370a00c3d17870d41c9c7ad7df..91e1f4ba125f7cfdb05c13c0402893411ad68c45 100644
--- a/src/lib/elements/interactions/ImageNavigatorElement.ts
+++ b/src/lib/elements/interactions/ImageNavigatorElement.ts
@@ -3,10 +3,9 @@ import {BaseContainer} from "../../bases/BaseModul";
import {ModeInteraction} from "../../interactions/ModeInteraction";
import {MoveInteraction} from "../../interactions/MoveInteraction";
import {ZoomInteraction} from "../../interactions/ZoomInteraction";
-import {MedsurfSprite} from "../images/MedsurfSprite";
+import {ImageTypes, MedsurfSprite} from "../images/MedsurfSprite";
import {ButtonElement} from "../inputs/ButtonElement";
import Rectangle = PIXI.Rectangle;
-import {MedsurfTileSprite} from "../..";
/**
* Image navigator element
@@ -342,7 +341,7 @@ export class ImageNavigatorElement extends BaseContainer {
return;
}
- if (this._image instanceof MedsurfTileSprite) {
+ if (this._image.imageType === ImageTypes.DEEPZOOM) {
this._rectangle.x = -1 * this._spriteElement.width / this._canvas.width * this._image.position.x / this._image.scale.x;
this._rectangle.y = -1 * this._spriteElement.height / this._canvas.height * this._image.position.y / this._image.scale.y;
diff --git a/src/lib/elements/positionings/PositionPoint.ts b/src/lib/elements/positionings/PositionPoint.ts
index b33ee9934e7a68278c6428a43f61ca2aa2391398..f09a1de651e10ae16467e0cd101caea42eff5f7a 100644
--- a/src/lib/elements/positionings/PositionPoint.ts
+++ b/src/lib/elements/positionings/PositionPoint.ts
@@ -21,6 +21,8 @@ import {EllipsePrimitive} from "../primitives/EllipsePrimitive";
import {RectanglePrimitive} from "../primitives/RectanglePrimitive";
import {TextPrimitive} from "../primitives/TextPrimitive";
import {LegendTextPrimitive} from "../primitives/LegendTextPrimitive";
+import {LegendCollection} from "../..";
+import {LegendColumnCollection} from "../collections/LegendColumnCollection";
/**
* Position point
@@ -79,19 +81,23 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
/**
* Constructor
* @param model
+ * @param imageWidth
*/
- public constructor(model: Models.PositionPoint) {
- super(model);
+ public constructor(model: Models.PositionPoint, imageWidth: number) {
+ super(model, imageWidth);
// Setup
this.zIndex = 200;
- this._selftestItems = [];
+ this.selftestItems = [];
this._circle = new PIXI.Circle(0, 0, this._radius);
this._lineColor = this.model.isSelftest ? this._lineColorSelftest : this._lineColorNormal;
this._fillColor = this.model.isSelftest ? this._lineColorSelftest : this._fillColorNormal;
// Position
- this.position.set(this.model.position.x, this.model.position.y);
+ this.position.set(
+ this.model.position.x * this.imageWidth,
+ this.model.position.y * this.imageWidth
+ );
// Events
this.modeInteraction = new ModeInteraction(this);
@@ -322,8 +328,23 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
*/
protected _stageReady(): void {
if (this.model.selftestItems) {
- this._selftestItems = this.model.selftestItems.map((item: Models.ImageObject) => {
- return this.getImage().getChildByName(item.id || 'new') as ImageObject;
+ this.selftestItems = this.model.selftestItems.map((id: string) => {
+ let imageObject: ImageObject = this.getImage().getChildByName(id) as ImageObject;
+ if (!imageObject) {
+ imageObject = this.getImage().children
+ .filter((child: ImageObject) => child instanceof PositionPoint)
+ .map((positionPoint: PositionPoint) => positionPoint.getChildByName(id))
+ .filter((result: ImageObject) => result)[0] as ImageObject;
+ }
+ if (!imageObject) {
+ imageObject = this.getImage().children
+ .filter((child: ImageObject) => child instanceof LegendCollection)
+ .map((legendCollection: LegendCollection) => legendCollection.rotateContainer.children.filter((child) => child instanceof LegendColumnCollection))
+ .reduce((cur, acc) => [...cur, ...acc], [])
+ .map((legendColumnCollection: LegendColumnCollection) => legendColumnCollection.rotateContainer.getChildByName(id))
+ .filter((result: ImageObject) => result)[0] as ImageObject;
+ }
+ return imageObject;
});
}
@@ -560,8 +581,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
}
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number) {
- this.model.position.x = this.position.x += dX; // TODO check
- this.model.position.y = this.position.y += dY; // TODO check
+ this.position.x += dX;
+ this.position.y += dY;
+ this.model.position.x = this.position.x / this.imageWidth;
+ this.model.position.y = this.position.y / this.imageWidth;
}
protected _endMove(event: PIXI.interaction.InteractionEvent): void {
@@ -668,7 +691,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
const image = this.getImage();
- image.generator = new ArrowPrimitiveGenerator(image, event, this);
+ image.generator = new ArrowPrimitiveGenerator(image, event, this.imageWidth, this);
image.modeInteraction.changeMode("draw");
}
@@ -677,7 +700,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
const image = this.getImage();
- image.generator = new EllipsePrimitiveGenerator(image, event, this);
+ image.generator = new EllipsePrimitiveGenerator(image, event, this.imageWidth, this);
image.modeInteraction.changeMode("draw");
}
@@ -686,7 +709,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
const image = this.getImage();
- image.generator = new RectanglePrimitiveGenerator(image, event, this);
+ image.generator = new RectanglePrimitiveGenerator(image, event, this.imageWidth, this);
image.modeInteraction.changeMode("draw");
}
@@ -695,7 +718,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
const image = this.getImage();
- image.generator = new TextPrimitiveGenerator(image, event, this);
+ image.generator = new TextPrimitiveGenerator(image, event, this.imageWidth, this);
image.modeInteraction.changeMode("draw");
}
@@ -707,7 +730,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
// @ts-ignore
const bezierCourve = this.getLines().filter((line: Line) => line._bezierCourve).length > 0;
- image.generator = new LineGenerator(image, event, bezierCourve, this);
+ image.generator = new LineGenerator(image, event, this.imageWidth, bezierCourve, this);
image.modeInteraction.changeMode("draw");
}
@@ -719,7 +742,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
// @ts-ignore
const bezierCourve = this.getLines().filter((line: Line) => line._bezierCourve).length > 0;
- image.generator = new PolygonGenerator(image, event, bezierCourve, this);
+ image.generator = new PolygonGenerator(image, event, this.imageWidth, bezierCourve, this);
image.modeInteraction.changeMode("draw");
}
diff --git a/src/lib/elements/primitives/ArrowPrimitive.ts b/src/lib/elements/primitives/ArrowPrimitive.ts
index 3505ff9579b5891a9c82d4513334d9a53c0f9f69..f99a6cf66294fa14068dcf1eaf35e4cdc8c243e5 100644
--- a/src/lib/elements/primitives/ArrowPrimitive.ts
+++ b/src/lib/elements/primitives/ArrowPrimitive.ts
@@ -33,8 +33,9 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
/**
* Members
*/
- protected _fillColor: number;
protected _rectangle: PIXI.Rectangle;
+ protected _fillColor: number;
+ protected _strokeWidth: number;
/**
* Interactions
@@ -68,6 +69,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
/**
* Design
*/
+ protected readonly _strokeWidthDefault: number = 2;
protected readonly _fillAlphaDefault: number = 1;
protected readonly _fillColorDefault: number = 0xFFFFFF;
protected readonly _fillColorSelftest: number = 0xFFC67B;
@@ -77,11 +79,15 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
/**
* Constructor
* @param model
+ * @param imageWidth
*/
- public constructor(model: Models.ArrowPrimitive) {
- super(model);
+ public constructor(model: Models.ArrowPrimitive, imageWidth: number) {
+ super(model, imageWidth);
// Defaults
+ if (!this.model.strokeWidth) {
+ this.model.strokeWidth = this._strokeWidthDefault;
+ }
if (!this.model.options) {
this.model.options = {
hasLine: false,
@@ -100,15 +106,20 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
// Setup
this.zIndex = 300; // TODO how to implement moveToFront etc...
+ this._rectangle = new PIXI.Rectangle(
+ 0,
+ 0,
+ this.model.rectangle.width * this.imageWidth,
+ this.model.rectangle.height * this.imageWidth
+ );
this._fillColor = this.model.options.fillColor;
- this._rectangle = new PIXI.Rectangle(0, 0, this.model.rectangle.width, this.model.rectangle.height);
- /* TODO remove
- this._rectangle = rectangle;
- this._color = color || 0xFFFFFF;
- */
+ this._strokeWidth = this.model.strokeWidth * this.imageWidth;
// Position
- this.position.set(this.model.rectangle.x, this.model.rectangle.y);
+ this.position.set(
+ this.model.rectangle.x * this.imageWidth,
+ this.model.rectangle.y * this.imageWidth
+ );
// Events
this.modeInteraction = new ModeInteraction(this);
@@ -160,7 +171,15 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
this._arrowElement = new PIXI.Graphics();
this._rotateContainer.addChild(this._arrowElement);
- this._wedgePointElement = this.model.wedgePoint ? new PointElement(this.model.wedgePoint.x, this.model.wedgePoint.y) : new PointElement(this._rectangle.x + this._rectangle.width, this._rectangle.y + this._rectangle.height / 2);
+ this._wedgePointElement = this.model.wedgePoint ?
+ new PointElement(
+ this.model.wedgePoint.x * this.imageWidth,
+ this.model.wedgePoint.y * this.imageWidth
+ ) :
+ new PointElement(
+ this._rectangle.x + this._rectangle.width,
+ this._rectangle.y + this._rectangle.height / 2
+ );
this._wedgePointElement.on("onMove", this._onWedgeMove, this);
this._configurationElement = new ConfigurationElement(this.modeInteraction);
@@ -650,14 +669,21 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
if (Keyboard.isKeyDown("ControlLeft") || Keyboard.isKeyDown("ControlRight")) {
- this.model.rectangle.x = this.position.x += dX;
- this.model.rectangle.y = this.position.y += dY;
+ this.position.x += dX;
+ this.position.y += dY;
+ this.model.rectangle.x = this.position.x / this.imageWidth;
+ this.model.rectangle.y = this.position.y / this.imageWidth;
} else {
this.parent.emit("onMove", event, dX, dY);
}
}
protected _onWedgeMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
+ if (!this.model.wedgePoint) {
+ this.model.wedgePoint = new PIXI.Point();
+ }
+ this.model.wedgePoint.x = this._wedgePointElement.position.x / this.imageWidth;
+ this.model.wedgePoint.y = this._wedgePointElement.position.y / this.imageWidth;
this.draw();
}
@@ -697,8 +723,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
}
// Element
- this.model.rectangle.width = this._rectangle.width += dW;
- this.model.rectangle.height = this._rectangle.height += dH;
+ this._rectangle.width += dW;
+ this._rectangle.height += dH;
+ this.model.rectangle.width = this._rectangle.width / this.imageWidth;
+ this.model.rectangle.height = this._rectangle.height / this.imageWidth;
// Position TODO not needed ??
// this.position.x += (dX + dW / 2) * Math.cos(this.rotation) - (dY + dH / 2) * Math.sin(this.rotation);
diff --git a/src/lib/elements/primitives/EllipsePrimitive.ts b/src/lib/elements/primitives/EllipsePrimitive.ts
index 25ff1cfc8507b9758c1f41dd5a758036973784aa..b82bdf29e70cc12c7c78d0335e39ab05926c2ded 100644
--- a/src/lib/elements/primitives/EllipsePrimitive.ts
+++ b/src/lib/elements/primitives/EllipsePrimitive.ts
@@ -31,8 +31,9 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
/**
* Members
*/
- protected _fillColor: number;
protected _ellipse: PIXI.Ellipse;
+ protected _fillColor: number;
+ protected _strokeWidth: number;
/**
* Interactions
@@ -65,6 +66,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
/**
* Design
*/
+ protected readonly _strokeWidthDefault: number = 2;
protected readonly _fillAlphaDefault: number = 1;
protected readonly _fillColorDefault: number = 0xFFFFFF;
protected readonly _fillColorSelftest: number = 0xFFC67B;
@@ -74,11 +76,15 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
/**
* Constructor
* @param model
+ * @param imageWidth
*/
- public constructor(model: Models.EllipsePrimitive) {
- super(model);
+ public constructor(model: Models.EllipsePrimitive, imageWidth: number) {
+ super(model, imageWidth);
// Defaults
+ if (!this.model.strokeWidth) {
+ this.model.strokeWidth = this._strokeWidthDefault;
+ }
if (!this.model.options) {
this.model.options = {
hasLine: false,
@@ -97,11 +103,21 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
// Setup
this.zIndex = 300; // TODO how to implement moveToFront etc...
+ this._ellipse = new PIXI.Ellipse(
+ 0,
+ 0,
+ this.model.ellipse.width / 2 * this.imageWidth,
+ this.model.ellipse.height / 2 * this.imageWidth
+ );
this._fillColor = this.model.options.fillColor;
- this._ellipse = new PIXI.Ellipse(0, 0, this.model.ellipse.width / 2, this.model.ellipse.height / 2);
+ this._strokeWidth = this.model.strokeWidth * this.imageWidth;
+
// Position
- this.position.set(this.model.ellipse.x, this.model.ellipse.y);
+ this.position.set(
+ this.model.ellipse.x * this.imageWidth,
+ this.model.ellipse.y * this.imageWidth
+ );
// Events
this.modeInteraction = new ModeInteraction(this);
@@ -631,8 +647,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
if (Keyboard.isKeyDown("ControlLeft") || Keyboard.isKeyDown("ControlRight")) {
- this.model.ellipse.x = this.position.x += dX;
- this.model.ellipse.y = this.position.y += dY;
+ this.position.x += dX;
+ this.position.y += dY;
+ this.model.ellipse.x = this.position.x / this.imageWidth;
+ this.model.ellipse.y = this.position.y / this.imageWidth;
} else {
this.parent.emit("onMove", event, dX, dY);
}
@@ -673,8 +691,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
}
// Element
- this.model.ellipse.width = this._ellipse.width += dW;
- this.model.ellipse.height = this._ellipse.height += dH;
+ this._ellipse.width += dW;
+ this._ellipse.height += dH;
+ this.model.ellipse.width = this._ellipse.width / this.imageWidth;
+ this.model.ellipse.height = this._ellipse.height / this.imageWidth;
// Position TODO not needed ??
// this.position.x += dX * Math.cos(this.rotation) - dY * Math.sin(this.rotation);
diff --git a/src/lib/elements/primitives/LegendTextPrimitive.ts b/src/lib/elements/primitives/LegendTextPrimitive.ts
index 89963b68215491db164949c77cc2331ccb1d2329..f61da63ea0e6036fac7e823857d5158de4efe5d5 100644
--- a/src/lib/elements/primitives/LegendTextPrimitive.ts
+++ b/src/lib/elements/primitives/LegendTextPrimitive.ts
@@ -83,13 +83,16 @@ export class LegendTextPrimitive extends BaseElementContainer<Models.LegendItem>
/**
* Constructor
* @param model
+ * @param imageWidth
*/
- public constructor(model: Models.LegendItem) {
- super(model);
+ public constructor(model: Models.LegendItem, imageWidth: number) {
+ super(model, imageWidth);
// Setup
this.zIndex = 300; // TODO how to implement moveToFront etc...
this._style = new PIXI.TextStyle(this.model.style);
+ this._style.fontSize *= this.imageWidth;
+
this._startTextIndex = this.model.text.length;
this._endTextIndex = this.model.text.length;
this._textSelection = false;
diff --git a/src/lib/elements/primitives/RectanglePrimitive.ts b/src/lib/elements/primitives/RectanglePrimitive.ts
index 482c6000faf9ea46fcd1af3d0da06e44f8e62abf..5778d1e2d0487f4e256d513abc14bb5b38272ab8 100644
--- a/src/lib/elements/primitives/RectanglePrimitive.ts
+++ b/src/lib/elements/primitives/RectanglePrimitive.ts
@@ -31,8 +31,9 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
/**
* Members
*/
- protected _fillColor: number;
protected _rectangle: PIXI.Rectangle;
+ protected _fillColor: number;
+ protected _strokeWidth: number;
/**
* Interactions
@@ -65,6 +66,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
/**
* Design
*/
+ protected readonly _strokeWidthDefault: number = 2;
protected readonly _fillAlphaDefault: number = 1;
protected readonly _fillColorDefault: number = 0xFFFFFF;
protected readonly _fillColorSelftest: number = 0xFFC67B;
@@ -74,11 +76,15 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
/**
* Constructor
* @param model
+ * @param imageWidth
*/
- public constructor(model: Models.RectanglePrimitive) {
- super(model);
+ public constructor(model: Models.RectanglePrimitive, imageWidth: number) {
+ super(model, imageWidth);
// Defaults
+ if (!this.model.strokeWidth) {
+ this.model.strokeWidth = this._strokeWidthDefault;
+ }
if (!this.model.options) {
this.model.options = {
hasLine: false,
@@ -97,11 +103,20 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// Setup
this.zIndex = 300; // TODO how to implement moveToFront etc...
+ this._rectangle = new PIXI.Rectangle(
+ 0,
+ 0,
+ this.model.rectangle.width * this.imageWidth,
+ this.model.rectangle.height * this.imageWidth
+ );
this._fillColor = this.model.options.fillColor;
- this._rectangle = new PIXI.Rectangle(0, 0, this.model.rectangle.width, this.model.rectangle.height);
+ this._strokeWidth = this.model.strokeWidth * this.imageWidth;
// Position
- this.position.set(this.model.rectangle.x, this.model.rectangle.y);
+ this.position.set(
+ this.model.rectangle.x * this.imageWidth,
+ this.model.rectangle.y * this.imageWidth
+ );
// Events
this.modeInteraction = new ModeInteraction(this);
@@ -632,8 +647,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
if (Keyboard.isKeyDown("ControlLeft") || Keyboard.isKeyDown("ControlRight")) {
- this.model.rectangle.x = this.position.x += dX;
- this.model.rectangle.y = this.position.y += dY;
+ this.position.x += dX;
+ this.position.y += dY;
+ this.model.rectangle.x = this.position.x / this.imageWidth;
+ this.model.rectangle.y = this.position.y / this.imageWidth;
} else {
this.parent.emit("onMove", event, dX, dY);
}
@@ -674,8 +691,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
}
// Element
- this.model.rectangle.width = this._rectangle.width += dW;
- this.model.rectangle.height = this._rectangle.height += dH;
+ this._rectangle.width += dW;
+ this._rectangle.height += dH;
+ this.model.rectangle.width = this._rectangle.width / this.imageWidth;
+ this.model.rectangle.height = this._rectangle.height / this.imageWidth;
// Position TODO not needed ??
// this.position.x += (dX + dW / 2) * Math.cos(this.rotation) - (dY + dH / 2) * Math.sin(this.rotation);
diff --git a/src/lib/elements/primitives/TextPrimitive.ts b/src/lib/elements/primitives/TextPrimitive.ts
index 469cf74ce6f0a2ec75ae2c9c0bc759865d88a6e6..60402e408bc4b1c835f492d396994fb4fa2c345d 100644
--- a/src/lib/elements/primitives/TextPrimitive.ts
+++ b/src/lib/elements/primitives/TextPrimitive.ts
@@ -37,6 +37,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
*/
protected _style: any | PIXI.TextStyle;
// protected _color: number;
+ protected _strokeWidth: number;
private _startTextIndex: number;
private _endTextIndex: number;
private _textSelection: boolean;
@@ -98,9 +99,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
/**
* Constructor
* @param model
+ * @param imageWidth
*/
- public constructor(model: Models.TextPrimitive) {
- super(model);
+ public constructor(model: Models.TextPrimitive, imageWidth: number) {
+ super(model, imageWidth);
// Defaults
if (!this.model.text) {
@@ -124,8 +126,9 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
// Setup
this.zIndex = 300; // TODO how to implement moveToFront etc...
- // this._color = this.model.style.fill;
this._style = new PIXI.TextStyle(this.model.style);
+ this._style.fontSize *= this.imageWidth;
+
this._startTextIndex = this.model.text.length;
this._endTextIndex = this.model.text.length;
this._textSelection = false;
@@ -134,7 +137,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
*/
// Position
- this.position.set(this.model.rectangle.x, this.model.rectangle.y);
+ this.position.set(
+ this.model.rectangle.x * this.imageWidth,
+ this.model.rectangle.y * this.imageWidth
+ );
// Events
this.modeInteraction = new ModeInteraction(this);
@@ -762,8 +768,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
if (Keyboard.isKeyDown("ControlLeft") || Keyboard.isKeyDown("ControlRight")) {
- this.model.rectangle.x = this.position.x += dX;
- this.model.rectangle.y = this.position.y += dY;
+ this.position.x += dX;
+ this.position.y += dY;
+ this.model.rectangle.x = this.position.x / this.imageWidth;
+ this.model.rectangle.y = this.position.y / this.imageWidth;
} else {
this.parent.emit("onMove", event, dX, dY);
}
diff --git a/src/lib/generators/ArrowPrimitiveGenerator.ts b/src/lib/generators/ArrowPrimitiveGenerator.ts
index 5867999b6a887b50d4e51a115aec5b9af9faae63..d660faca97eb535d87e65075c2a5f5e4a95c1b59 100644
--- a/src/lib/generators/ArrowPrimitiveGenerator.ts
+++ b/src/lib/generators/ArrowPrimitiveGenerator.ts
@@ -21,9 +21,13 @@ export class ArrowPrimitiveGenerator extends BaseDrawGenerator {
/**
* Constructor
+ * @param targetElement
+ * @param event
+ * @param imageWidth
+ * @param targetPositionPoint
*/
- public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, targetPositionPoint?: PositionPoint) {
- super(targetElement, targetPositionPoint);
+ public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, imageWidth: number, targetPositionPoint?: PositionPoint) {
+ super(targetElement, imageWidth, targetPositionPoint);
// Elements
let rotateWithLine: boolean = false;
@@ -37,7 +41,7 @@ export class ArrowPrimitiveGenerator extends BaseDrawGenerator {
y: pos.y
},
isSelftest: false
- });
+ }, this.imageWidth);
this.targetPositionPoint.modeInteraction.defaultMode = "author";
this._targetElement.addChild(this.targetPositionPoint);
} else {
@@ -60,31 +64,31 @@ export class ArrowPrimitiveGenerator extends BaseDrawGenerator {
hasFill: true,
fillColor: this._fillColor,
}
- });
+ }, this.imageWidth);
this._arrowElement.modeInteraction.defaultMode = "author";
this.targetPositionPoint.addChild(this._arrowElement);
this._arrowElement.modeInteraction.changeMode("draw");
// Interactions
- this._drawInteraction = new DrawInteraction(this.targetPositionPoint);
+ this.drawInteraction = new DrawInteraction(this.targetPositionPoint);
if (this.isNew) {
- this._drawInteraction.on("startMove", this._startMove, this);
- this._drawInteraction.on("resetMove", this._resetMove, this);
- this._drawInteraction.on("onMove", this._onMove, this);
- this._drawInteraction.on("endMove", this._endMove, this);
+ this.drawInteraction.on("startMove", this._startMove, this);
+ this.drawInteraction.on("resetMove", this._resetMove, this);
+ this.drawInteraction.on("onMove", this._onMove, this);
+ this.drawInteraction.on("endMove", this._endMove, this);
}
- this._drawInteraction.on("startScale", this._startScale, this);
- this._drawInteraction.on("onScale", this._onScale, this);
- this._drawInteraction.on("endScale", this._endScale, this);
+ this.drawInteraction.on("startScale", this._startScale, this);
+ this.drawInteraction.on("onScale", this._onScale, this);
+ this.drawInteraction.on("endScale", this._endScale, this);
- this._drawInteraction.on("startDraw", this._startDraw, this);
- this._drawInteraction.on("startDrawScale", this._startDrawScale, this);
- this._drawInteraction.on("updatePoint", this._updatePoint, this);
- this._drawInteraction.on("endDraw", this._endDraw, this);
- this._drawInteraction.on("abortDraw", this._abortDraw, this);
+ this.drawInteraction.on("startDraw", this._startDraw, this);
+ this.drawInteraction.on("startDrawScale", this._startDrawScale, this);
+ this.drawInteraction.on("updatePoint", this._updatePoint, this);
+ this.drawInteraction.on("endDraw", this._endDraw, this);
+ this.drawInteraction.on("abortDraw", this._abortDraw, this);
// Start draw
- this._drawInteraction.startDraw(event);
+ this.drawInteraction.startDraw(event);
// Emit line move for element rotation
this.targetPositionPoint.emit("onLineMove", new PIXI.interaction.InteractionEvent());
@@ -92,22 +96,22 @@ export class ArrowPrimitiveGenerator extends BaseDrawGenerator {
//<editor-fold desc="Public functions">
public cleanUp(): void {
- this._drawInteraction.off("startMove", this._startMove, this);
- this._drawInteraction.off("resetMove", this._resetMove, this);
- this._drawInteraction.off("onMove", this._onMove, this);
- this._drawInteraction.off("endMove", this._endMove, this);
-
- this._drawInteraction.off("startScale", this._startScale, this);
- this._drawInteraction.off("onScale", this._onScale, this);
- this._drawInteraction.off("endScale", this._endScale, this);
-
- this._drawInteraction.off("startDraw", this._startDraw, this);
- this._drawInteraction.off("startDrawScale", this._startDrawScale, this);
- this._drawInteraction.off("updatePoint", this._updatePoint, this);
- this._drawInteraction.off("endDraw", this._endDraw, this);
- this._drawInteraction.off("abortDraw", this._abortDraw, this);
-
- delete this._drawInteraction;
+ this.drawInteraction.off("startMove", this._startMove, this);
+ this.drawInteraction.off("resetMove", this._resetMove, this);
+ this.drawInteraction.off("onMove", this._onMove, this);
+ this.drawInteraction.off("endMove", this._endMove, this);
+
+ this.drawInteraction.off("startScale", this._startScale, this);
+ this.drawInteraction.off("onScale", this._onScale, this);
+ this.drawInteraction.off("endScale", this._endScale, this);
+
+ this.drawInteraction.off("startDraw", this._startDraw, this);
+ this.drawInteraction.off("startDrawScale", this._startDrawScale, this);
+ this.drawInteraction.off("updatePoint", this._updatePoint, this);
+ this.drawInteraction.off("endDraw", this._endDraw, this);
+ this.drawInteraction.off("abortDraw", this._abortDraw, this);
+
+ delete this.drawInteraction;
}
public destroy(): void {
diff --git a/src/lib/generators/EllipsePrimitiveGenerator.ts b/src/lib/generators/EllipsePrimitiveGenerator.ts
index 2cc6e4904de483436136fcdc03e9ba6ee16f52cf..29cb3f0e23fb465876544b8f30cceaf35abd194f 100644
--- a/src/lib/generators/EllipsePrimitiveGenerator.ts
+++ b/src/lib/generators/EllipsePrimitiveGenerator.ts
@@ -21,9 +21,13 @@ export class EllipsePrimitiveGenerator extends BaseDrawGenerator {
/**
* Constructor
+ * @param targetElement
+ * @param event
+ * @param imageWidth
+ * @param targetPositionPoint
*/
- public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, targetPositionPoint?: PositionPoint) {
- super(targetElement, targetPositionPoint);
+ public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, imageWidth: number, targetPositionPoint?: PositionPoint) {
+ super(targetElement, imageWidth, targetPositionPoint);
// Elements
if (!this.targetPositionPoint) {
@@ -36,7 +40,7 @@ export class EllipsePrimitiveGenerator extends BaseDrawGenerator {
y: pos.y
},
isSelftest: false
- });
+ }, this.imageWidth);
this.targetPositionPoint.modeInteraction.defaultMode = "author";
this._targetElement.addChild(this.targetPositionPoint);
}
@@ -54,31 +58,31 @@ export class EllipsePrimitiveGenerator extends BaseDrawGenerator {
hasFill: true,
fillColor: this._fillColor,
}
- });
+ }, this.imageWidth);
this._ellipseElement.modeInteraction.defaultMode = "author";
this.targetPositionPoint.addChild(this._ellipseElement);
this._ellipseElement.modeInteraction.changeMode("draw");
// Interactions
- this._drawInteraction = new DrawInteraction(this.targetPositionPoint);
+ this.drawInteraction = new DrawInteraction(this.targetPositionPoint);
if (this.isNew) {
- this._drawInteraction.on("startMove", this._startMove, this);
- this._drawInteraction.on("resetMove", this._resetMove, this);
- this._drawInteraction.on("onMove", this._onMove, this);
- this._drawInteraction.on("endMove", this._endMove, this);
+ this.drawInteraction.on("startMove", this._startMove, this);
+ this.drawInteraction.on("resetMove", this._resetMove, this);
+ this.drawInteraction.on("onMove", this._onMove, this);
+ this.drawInteraction.on("endMove", this._endMove, this);
}
- this._drawInteraction.on("startScale", this._startScale, this);
- this._drawInteraction.on("onScale", this._onScale, this);
- this._drawInteraction.on("endScale", this._endScale, this);
+ this.drawInteraction.on("startScale", this._startScale, this);
+ this.drawInteraction.on("onScale", this._onScale, this);
+ this.drawInteraction.on("endScale", this._endScale, this);
- this._drawInteraction.on("startDraw", this._startDraw, this);
- this._drawInteraction.on("startDrawScale", this._startDrawScale, this);
- this._drawInteraction.on("updatePoint", this._updatePoint, this);
- this._drawInteraction.on("endDraw", this._endDraw, this);
- this._drawInteraction.on("abortDraw", this._abortDraw, this);
+ this.drawInteraction.on("startDraw", this._startDraw, this);
+ this.drawInteraction.on("startDrawScale", this._startDrawScale, this);
+ this.drawInteraction.on("updatePoint", this._updatePoint, this);
+ this.drawInteraction.on("endDraw", this._endDraw, this);
+ this.drawInteraction.on("abortDraw", this._abortDraw, this);
// Start draw
- this._drawInteraction.startDraw(event);
+ this.drawInteraction.startDraw(event);
// Emit line move for element rotation
this.targetPositionPoint.emit("onLineMove", new PIXI.interaction.InteractionEvent());
@@ -86,22 +90,22 @@ export class EllipsePrimitiveGenerator extends BaseDrawGenerator {
//<editor-fold desc="Public functions">
public cleanUp(): void {
- this._drawInteraction.off("startMove", this._startMove, this);
- this._drawInteraction.off("resetMove", this._resetMove, this);
- this._drawInteraction.off("onMove", this._onMove, this);
- this._drawInteraction.off("endMove", this._endMove, this);
-
- this._drawInteraction.off("startScale", this._startScale, this);
- this._drawInteraction.off("onScale", this._onScale, this);
- this._drawInteraction.off("endScale", this._endScale, this);
-
- this._drawInteraction.off("startDraw", this._startDraw, this);
- this._drawInteraction.off("startDrawScale", this._startDrawScale, this);
- this._drawInteraction.off("updatePoint", this._updatePoint, this);
- this._drawInteraction.off("endDraw", this._endDraw, this);
- this._drawInteraction.off("abortDraw", this._abortDraw, this);
-
- delete this._drawInteraction;
+ this.drawInteraction.off("startMove", this._startMove, this);
+ this.drawInteraction.off("resetMove", this._resetMove, this);
+ this.drawInteraction.off("onMove", this._onMove, this);
+ this.drawInteraction.off("endMove", this._endMove, this);
+
+ this.drawInteraction.off("startScale", this._startScale, this);
+ this.drawInteraction.off("onScale", this._onScale, this);
+ this.drawInteraction.off("endScale", this._endScale, this);
+
+ this.drawInteraction.off("startDraw", this._startDraw, this);
+ this.drawInteraction.off("startDrawScale", this._startDrawScale, this);
+ this.drawInteraction.off("updatePoint", this._updatePoint, this);
+ this.drawInteraction.off("endDraw", this._endDraw, this);
+ this.drawInteraction.off("abortDraw", this._abortDraw, this);
+
+ delete this.drawInteraction;
}
public destroy(): void {
diff --git a/src/lib/generators/FillCollectionGenerator.ts b/src/lib/generators/FillCollectionGenerator.ts
index a3b2bce970545b91057221a12ac4920d2775416f..2dc9751a5a646ff4ab2d9ce29517d53383e4392b 100644
--- a/src/lib/generators/FillCollectionGenerator.ts
+++ b/src/lib/generators/FillCollectionGenerator.ts
@@ -25,8 +25,11 @@ export class FillCollectionGenerator extends BaseGenerator {
/**
* Constructor
+ * @param targetElement
+ * @param event
+ * @param imageWidth
*/
- public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent) {
+ public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, imageWidth: number) {
super(targetElement);
// Elements
@@ -40,7 +43,7 @@ export class FillCollectionGenerator extends BaseGenerator {
hasFill: true,
fillColor: this._color
}
- });
+ }, imageWidth);
this._fillElement.modeInteraction.defaultMode = "author";
this._targetElement.addChild(this._fillElement);
this._fillElement.modeInteraction.changeMode("choose");
diff --git a/src/lib/generators/InteractiveGenerator.ts b/src/lib/generators/InteractiveGenerator.ts
index 98026883dff586aebdd1540dadf497f663b39334..a4443aaa2937b6f26f77e98f87c8468f6c553754 100644
--- a/src/lib/generators/InteractiveGenerator.ts
+++ b/src/lib/generators/InteractiveGenerator.ts
@@ -24,6 +24,9 @@ export class InteractiveGenerator extends BaseGenerator {
/**
* Constructor
+ * @param targetElement
+ * @param event
+ * @param targetFill
*/
public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, targetFill: FillCollection) {
super(targetElement);
@@ -64,7 +67,8 @@ export class InteractiveGenerator extends BaseGenerator {
if (!this._targetFill.model.interactiveItems) {
this._targetFill.model.interactiveItems = [];
}
- this._targetFill.model.interactiveItems.push(element.model);
+ // @ts-ignore
+ this._targetFill.model.interactiveItems.push(element.model.id);
this._targetFill.interactiveItems.push(element);
}
diff --git a/src/lib/generators/LineGenerator.ts b/src/lib/generators/LineGenerator.ts
index 38a298b0fc54a70124ffabe42878d63410b34d02..0ab4e9aafd5088111ba8a84d24083262c7dfef4a 100644
--- a/src/lib/generators/LineGenerator.ts
+++ b/src/lib/generators/LineGenerator.ts
@@ -32,15 +32,20 @@ export class LineGenerator extends BaseDrawGenerator {
/**
* Constructor
+ * @param targetElement
+ * @param event
+ * @param imageWidth
+ * @param bezierCourve
+ * @param targetPositionPoint
*/
- public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, bezierCourve: boolean = false, targetPositionPoint?: PositionPoint) {
- super(targetElement);
+ public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, imageWidth: number, bezierCourve: boolean = false, targetPositionPoint?: PositionPoint) {
+ super(targetElement, imageWidth);
// Setup
this._bezierCourve = bezierCourve;
// Generators
- this._positionPointGeneratorStart = new PositionPointGenerator(this._targetElement, event, targetPositionPoint);
+ this._positionPointGeneratorStart = new PositionPointGenerator(this._targetElement, event, this.imageWidth, targetPositionPoint);
if (this._positionPointGeneratorStart.isNew) {
this._positionPointGeneratorStart.on("updatePoint", this._updatePointStart, this);
this._positionPointGeneratorStart.on("endDraw", this._endDrawStart, this);
@@ -82,7 +87,7 @@ export class LineGenerator extends BaseDrawGenerator {
//<editor-fold desc="Private functions">
protected _initEndPositionPointGenerator(event: PIXI.interaction.InteractionEvent): void {
- this._positionPointGeneratorEnd = new PositionPointGenerator(this._targetElement, event);
+ this._positionPointGeneratorEnd = new PositionPointGenerator(this._targetElement, event, this.imageWidth);
this._positionPointGeneratorEnd.targetPositionPoint.on("onMove", this._onMove, this);
this._positionPointGeneratorEnd.on("updatePoint", this._updatePoint, this);
this._positionPointGeneratorEnd.on("endDraw", this._endDraw, this);
@@ -93,8 +98,10 @@ export class LineGenerator extends BaseDrawGenerator {
this._lineElement = new Line({
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: this._positionPointGeneratorStart.targetPositionPoint.model,
- end: this._positionPointGeneratorEnd.targetPositionPoint.model,
+ // @ts-ignore
+ start: this._positionPointGeneratorStart.targetPositionPoint.model.id,
+ // @ts-ignore
+ end: this._positionPointGeneratorEnd.targetPositionPoint.model.id,
isBezier: this._bezierCourve,
strokeWidth: this._strokeWidth,
options: {
@@ -102,7 +109,7 @@ export class LineGenerator extends BaseDrawGenerator {
lineColor: this._lineColor,
hasFill: false,
}
- });
+ }, this.imageWidth);
this._lineElement.modeInteraction.defaultMode = "author";
this._targetElement.addChild(this._lineElement);
this._lineElement.modeInteraction.changeMode("draw");
@@ -131,7 +138,7 @@ export class LineGenerator extends BaseDrawGenerator {
line.emit("draw");
});
- this._positionPointGeneratorStart = new PositionPointGenerator(this._targetElement, event, positionPoint);
+ this._positionPointGeneratorStart = new PositionPointGenerator(this._targetElement, event, this.imageWidth, positionPoint);
this._initEndPositionPointGenerator(event);
// Set draw interaction
@@ -165,8 +172,10 @@ export class LineGenerator extends BaseDrawGenerator {
this._lineElement = new Line({
type: Models.ImageObjectType.LINE,
isStatic: false,
- start: this._positionPointGeneratorStart.targetPositionPoint.model,
- end: positionPoint.model,
+ // @ts-ignore
+ start: this._positionPointGeneratorStart.targetPositionPoint.model.id,
+ // @ts-ignore
+ end: positionPoint.model.id,
isBezier: this._bezierCourve,
strokeWidth: this._strokeWidth,
options: {
@@ -174,7 +183,7 @@ export class LineGenerator extends BaseDrawGenerator {
lineColor: this._lineColor,
hasFill: false,
}
- });
+ }, this.imageWidth);
this._lineElement.modeInteraction.defaultMode = "author";
this._targetElement.addChild(this._lineElement);
this._lineElement.draw();
diff --git a/src/lib/generators/PolygonGenerator.ts b/src/lib/generators/PolygonGenerator.ts
index 5088899114a571097b408ddd58da5973dbb21811..8fe1f8e9011305ca82721eb2d75dfec749aff50e 100644
--- a/src/lib/generators/PolygonGenerator.ts
+++ b/src/lib/generators/PolygonGenerator.ts
@@ -28,15 +28,20 @@ export class PolygonGenerator extends BaseGenerator {
/**
* Constructor
+ * @param targetElement
+ * @param event
+ * @param imageWidth
+ * @param bezierCourve
+ * @param targetPositionPoint
*/
- public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, bezierCourve: boolean = false, targetPositionPoint?: PositionPoint) {
+ public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, imageWidth: number, bezierCourve: boolean = false, targetPositionPoint?: PositionPoint) {
super(targetElement);
// Setup
this._event = event;
// Generators
- this.setupGenerator(targetElement, bezierCourve, targetPositionPoint);
+ this.setupGenerator(targetElement, imageWidth, bezierCourve, targetPositionPoint);
}
//<editor-fold desc="Public functions">
@@ -53,8 +58,8 @@ export class PolygonGenerator extends BaseGenerator {
//</editor-fold>
//<editor-fold desc="Private functions">
- protected setupGenerator(targetElement: ImageObject, bezierCourve: boolean = false, targetPositionPoint?: PositionPoint): void {
- this._lineGenerator = new LineGenerator(targetElement, this._event, bezierCourve, targetPositionPoint);
+ protected setupGenerator(targetElement: ImageObject, imageWidth: number, bezierCourve: boolean = false, targetPositionPoint?: PositionPoint): void {
+ this._lineGenerator = new LineGenerator(targetElement, this._event, imageWidth, bezierCourve, targetPositionPoint);
this._lineGenerator.on("endLine", this._endLine, this);
this._lineGenerator.on("abortDraw", this._abortDraw, this);
}
@@ -62,7 +67,7 @@ export class PolygonGenerator extends BaseGenerator {
protected _endLine(targetPositionPoint: PositionPoint): void {
this.cleanUp();
- this.setupGenerator(this._targetElement, this._lineGenerator.bezierCourve, targetPositionPoint);
+ this.setupGenerator(this._targetElement, this._lineGenerator.imageWidth, this._lineGenerator.bezierCourve, targetPositionPoint);
this._targetElement.modeInteraction.changeMode("draw");
}
diff --git a/src/lib/generators/PositionPointGenerator.ts b/src/lib/generators/PositionPointGenerator.ts
index 9b908cbd5e233694c02128fddfbec9e389b0be33..f59a16053f89e4ac5a904aba09d7f3d0de5b6671 100644
--- a/src/lib/generators/PositionPointGenerator.ts
+++ b/src/lib/generators/PositionPointGenerator.ts
@@ -18,9 +18,13 @@ export class PositionPointGenerator extends BaseDrawGenerator {
/**
* Constructor
+ * @param targetElement
+ * @param event
+ * @param imageWidth
+ * @param targetPositionPoint
*/
- public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, targetPositionPoint?: PositionPoint) {
- super(targetElement, targetPositionPoint);
+ public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, imageWidth: number, targetPositionPoint?: PositionPoint) {
+ super(targetElement, imageWidth, targetPositionPoint);
// Setup
this._isImageMoving = false;
@@ -36,58 +40,58 @@ export class PositionPointGenerator extends BaseDrawGenerator {
y: pos.y
},
isSelftest: false
- });
+ }, this.imageWidth);
this.targetPositionPoint.modeInteraction.defaultMode = "author";
this._targetElement.addChild(this.targetPositionPoint);
}
this.targetPositionPoint.modeInteraction.changeMode("draw");
// Interactions
- this._drawInteraction = new DrawInteraction(this.targetPositionPoint);
+ this.drawInteraction = new DrawInteraction(this.targetPositionPoint);
if (this.isNew) {
- this._drawInteraction.on("startMove", this._startMove, this);
- this._drawInteraction.on("resetMove", this._resetMove, this);
- this._drawInteraction.on("onMove", this._onMove, this);
- this._drawInteraction.on("endMove", this._endMove, this);
+ this.drawInteraction.on("startMove", this._startMove, this);
+ this.drawInteraction.on("resetMove", this._resetMove, this);
+ this.drawInteraction.on("onMove", this._onMove, this);
+ this.drawInteraction.on("endMove", this._endMove, this);
}
- this._drawInteraction.on("startScale", this._startScale, this);
- this._drawInteraction.on("onScale", this._onScale, this);
- this._drawInteraction.on("endScale", this._endScale, this);
+ this.drawInteraction.on("startScale", this._startScale, this);
+ this.drawInteraction.on("onScale", this._onScale, this);
+ this.drawInteraction.on("endScale", this._endScale, this);
- this._drawInteraction.on("startDraw", this._startDraw, this);
- this._drawInteraction.on("startDrawScale", this._startDrawScale, this);
- this._drawInteraction.on("onDraw", this._onDraw, this);
- this._drawInteraction.on("updatePoint", this._updatePoint, this);
- this._drawInteraction.on("endDraw", this._endDraw, this);
- this._drawInteraction.on("abortDraw", this._abortDraw, this);
+ this.drawInteraction.on("startDraw", this._startDraw, this);
+ this.drawInteraction.on("startDrawScale", this._startDrawScale, this);
+ this.drawInteraction.on("onDraw", this._onDraw, this);
+ this.drawInteraction.on("updatePoint", this._updatePoint, this);
+ this.drawInteraction.on("endDraw", this._endDraw, this);
+ this.drawInteraction.on("abortDraw", this._abortDraw, this);
// Start draw
if (this.isNew) {
- this._drawInteraction.startDraw(event);
+ this.drawInteraction.startDraw(event);
} else {
- this._drawInteraction.endDraw(event);
+ this.drawInteraction.endDraw(event);
}
}
//<editor-fold desc="Public functions">
public cleanUp(): void {
- this._drawInteraction.off("startMove", this._startMove, this);
- this._drawInteraction.off("resetMove", this._resetMove, this);
- this._drawInteraction.off("onMove", this._onMove, this);
- this._drawInteraction.off("endMove", this._endMove, this);
-
- this._drawInteraction.off("startScale", this._startScale, this);
- this._drawInteraction.off("onScale", this._onScale, this);
- this._drawInteraction.off("endScale", this._endScale, this);
-
- this._drawInteraction.off("startDraw", this._startDraw, this);
- this._drawInteraction.off("startDrawScale", this._startDrawScale, this);
- this._drawInteraction.off("onDraw", this._onDraw, this);
- this._drawInteraction.off("updatePoint", this._updatePoint, this);
- this._drawInteraction.off("endDraw", this._endDraw, this);
- this._drawInteraction.off("abortDraw", this._abortDraw, this);
-
- delete this._drawInteraction;
+ this.drawInteraction.off("startMove", this._startMove, this);
+ this.drawInteraction.off("resetMove", this._resetMove, this);
+ this.drawInteraction.off("onMove", this._onMove, this);
+ this.drawInteraction.off("endMove", this._endMove, this);
+
+ this.drawInteraction.off("startScale", this._startScale, this);
+ this.drawInteraction.off("onScale", this._onScale, this);
+ this.drawInteraction.off("endScale", this._endScale, this);
+
+ this.drawInteraction.off("startDraw", this._startDraw, this);
+ this.drawInteraction.off("startDrawScale", this._startDrawScale, this);
+ this.drawInteraction.off("onDraw", this._onDraw, this);
+ this.drawInteraction.off("updatePoint", this._updatePoint, this);
+ this.drawInteraction.off("endDraw", this._endDraw, this);
+ this.drawInteraction.off("abortDraw", this._abortDraw, this);
+
+ delete this.drawInteraction;
}
public destroy(): void {
diff --git a/src/lib/generators/RectanglePrimitiveGenerator.ts b/src/lib/generators/RectanglePrimitiveGenerator.ts
index 78669fe08cea30ab6b18e7699cf7e9671cb28547..eaf0567dfccc3b7a4e53de62449511985a5fef34 100644
--- a/src/lib/generators/RectanglePrimitiveGenerator.ts
+++ b/src/lib/generators/RectanglePrimitiveGenerator.ts
@@ -21,9 +21,13 @@ export class RectanglePrimitiveGenerator extends BaseDrawGenerator {
/**
* Constructor
+ * @param targetElement
+ * @param event
+ * @param imageWidth
+ * @param targetPositionPoint
*/
- public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, targetPositionPoint?: PositionPoint) {
- super(targetElement, targetPositionPoint);
+ public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, imageWidth: number, targetPositionPoint?: PositionPoint) {
+ super(targetElement, imageWidth, targetPositionPoint);
// Elements
if (!this.targetPositionPoint) {
@@ -36,7 +40,7 @@ export class RectanglePrimitiveGenerator extends BaseDrawGenerator {
y: pos.y
},
isSelftest: false
- });
+ }, this.imageWidth);
this.targetPositionPoint.modeInteraction.defaultMode = "author";
this._targetElement.addChild(this.targetPositionPoint);
}
@@ -54,31 +58,31 @@ export class RectanglePrimitiveGenerator extends BaseDrawGenerator {
hasFill: true,
fillColor: this._fillColor,
}
- });
+ }, this.imageWidth);
this._rectangleElement.modeInteraction.defaultMode = "author";
this.targetPositionPoint.addChild(this._rectangleElement);
this._rectangleElement.modeInteraction.changeMode("draw");
// Interactions
- this._drawInteraction = new DrawInteraction(this.targetPositionPoint);
+ this.drawInteraction = new DrawInteraction(this.targetPositionPoint);
if (this.isNew) {
- this._drawInteraction.on("startMove", this._startMove, this);
- this._drawInteraction.on("resetMove", this._resetMove, this);
- this._drawInteraction.on("onMove", this._onMove, this);
- this._drawInteraction.on("endMove", this._endMove, this);
+ this.drawInteraction.on("startMove", this._startMove, this);
+ this.drawInteraction.on("resetMove", this._resetMove, this);
+ this.drawInteraction.on("onMove", this._onMove, this);
+ this.drawInteraction.on("endMove", this._endMove, this);
}
- this._drawInteraction.on("startScale", this._startScale, this);
- this._drawInteraction.on("onScale", this._onScale, this);
- this._drawInteraction.on("endScale", this._endScale, this);
+ this.drawInteraction.on("startScale", this._startScale, this);
+ this.drawInteraction.on("onScale", this._onScale, this);
+ this.drawInteraction.on("endScale", this._endScale, this);
- this._drawInteraction.on("startDraw", this._startDraw, this);
- this._drawInteraction.on("startDrawScale", this._startDrawScale, this);
- this._drawInteraction.on("updatePoint", this._updatePoint, this);
- this._drawInteraction.on("endDraw", this._endDraw, this);
- this._drawInteraction.on("abortDraw", this._abortDraw, this);
+ this.drawInteraction.on("startDraw", this._startDraw, this);
+ this.drawInteraction.on("startDrawScale", this._startDrawScale, this);
+ this.drawInteraction.on("updatePoint", this._updatePoint, this);
+ this.drawInteraction.on("endDraw", this._endDraw, this);
+ this.drawInteraction.on("abortDraw", this._abortDraw, this);
// Start draw
- this._drawInteraction.startDraw(event);
+ this.drawInteraction.startDraw(event);
// Emit line move for element rotation
this.targetPositionPoint.emit("onLineMove", new PIXI.interaction.InteractionEvent());
@@ -86,22 +90,22 @@ export class RectanglePrimitiveGenerator extends BaseDrawGenerator {
//<editor-fold desc="Public functions">
public cleanUp(): void {
- this._drawInteraction.off("startMove", this._startMove, this);
- this._drawInteraction.off("resetMove", this._resetMove, this);
- this._drawInteraction.off("onMove", this._onMove, this);
- this._drawInteraction.off("endMove", this._endMove, this);
-
- this._drawInteraction.off("startScale", this._startScale, this);
- this._drawInteraction.off("onScale", this._onScale, this);
- this._drawInteraction.off("endScale", this._endScale, this);
-
- this._drawInteraction.off("startDraw", this._startDraw, this);
- this._drawInteraction.off("startDrawScale", this._startDrawScale, this);
- this._drawInteraction.off("updatePoint", this._updatePoint, this);
- this._drawInteraction.off("endDraw", this._endDraw, this);
- this._drawInteraction.off("abortDraw", this._abortDraw, this);
-
- delete this._drawInteraction;
+ this.drawInteraction.off("startMove", this._startMove, this);
+ this.drawInteraction.off("resetMove", this._resetMove, this);
+ this.drawInteraction.off("onMove", this._onMove, this);
+ this.drawInteraction.off("endMove", this._endMove, this);
+
+ this.drawInteraction.off("startScale", this._startScale, this);
+ this.drawInteraction.off("onScale", this._onScale, this);
+ this.drawInteraction.off("endScale", this._endScale, this);
+
+ this.drawInteraction.off("startDraw", this._startDraw, this);
+ this.drawInteraction.off("startDrawScale", this._startDrawScale, this);
+ this.drawInteraction.off("updatePoint", this._updatePoint, this);
+ this.drawInteraction.off("endDraw", this._endDraw, this);
+ this.drawInteraction.off("abortDraw", this._abortDraw, this);
+
+ delete this.drawInteraction;
}
public destroy(): void {
diff --git a/src/lib/generators/SelftestGenerator.ts b/src/lib/generators/SelftestGenerator.ts
index 7be9445dc4c39e6308703d106b977c27ba94c1c2..79f8ed33e8346a2acf3ddebd877656bcfd6726dc 100644
--- a/src/lib/generators/SelftestGenerator.ts
+++ b/src/lib/generators/SelftestGenerator.ts
@@ -23,6 +23,9 @@ export class SelftestGenerator extends BaseGenerator {
/**
* Constructor
+ * @param targetElement
+ * @param event
+ * @param targetPositionPoint
*/
public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, targetPositionPoint: PositionPoint) {
super(targetElement, targetPositionPoint);
@@ -60,7 +63,8 @@ export class SelftestGenerator extends BaseGenerator {
if (!this.targetPositionPoint.model.selftestItems) {
this.targetPositionPoint.model.selftestItems = [];
}
- this.targetPositionPoint.model.selftestItems.push(element.model);
+ // @ts-ignore
+ this.targetPositionPoint.model.selftestItems.push(element.model.id);
this.targetPositionPoint.selftestItems.push(element);
}
diff --git a/src/lib/generators/TextPrimitiveGenerator.ts b/src/lib/generators/TextPrimitiveGenerator.ts
index 270d8d2f3279d459ae53c31863ac2e7ccbfe5473..66c2cd26a2e8f060fb1ab6c68b9b27efeb0c7565 100644
--- a/src/lib/generators/TextPrimitiveGenerator.ts
+++ b/src/lib/generators/TextPrimitiveGenerator.ts
@@ -27,9 +27,13 @@ export class TextPrimitiveGenerator extends BaseDrawGenerator {
/**
* Constructor
+ * @param targetElement
+ * @param event
+ * @param imageWidth
+ * @param targetPositionPoint
*/
- public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, targetPositionPoint?: PositionPoint) {
- super(targetElement, targetPositionPoint);
+ public constructor(targetElement: ImageObject, event: PIXI.interaction.InteractionEvent, imageWidth: number, targetPositionPoint?: PositionPoint) {
+ super(targetElement, imageWidth, targetPositionPoint);
// Elements
if (!this.targetPositionPoint) {
@@ -42,7 +46,7 @@ export class TextPrimitiveGenerator extends BaseDrawGenerator {
y: pos.y
},
isSelftest: false
- });
+ }, this.imageWidth);
this.targetPositionPoint.modeInteraction.defaultMode = "author";
this._targetElement.addChild(this.targetPositionPoint);
}
@@ -62,31 +66,31 @@ export class TextPrimitiveGenerator extends BaseDrawGenerator {
align: this._alignDefault,
wordWrap: this._wordWrapDefault,
},
- });
+ }, this.imageWidth);
this._textElement.modeInteraction.defaultMode = "author";
this.targetPositionPoint.addChild(this._textElement);
this._textElement.modeInteraction.changeMode("draw");
// Interactions
- this._drawInteraction = new DrawInteraction(this.targetPositionPoint);
+ this.drawInteraction = new DrawInteraction(this.targetPositionPoint);
if (this.isNew) {
- this._drawInteraction.on("startMove", this._startMove, this);
- this._drawInteraction.on("resetMove", this._resetMove, this);
- this._drawInteraction.on("onMove", this._onMove, this);
- this._drawInteraction.on("endMove", this._endMove, this);
+ this.drawInteraction.on("startMove", this._startMove, this);
+ this.drawInteraction.on("resetMove", this._resetMove, this);
+ this.drawInteraction.on("onMove", this._onMove, this);
+ this.drawInteraction.on("endMove", this._endMove, this);
}
- this._drawInteraction.on("startScale", this._startScale, this);
- this._drawInteraction.on("onScale", this._onScale, this);
- this._drawInteraction.on("endScale", this._endScale, this);
+ this.drawInteraction.on("startScale", this._startScale, this);
+ this.drawInteraction.on("onScale", this._onScale, this);
+ this.drawInteraction.on("endScale", this._endScale, this);
- this._drawInteraction.on("startDraw", this._startDraw, this);
- this._drawInteraction.on("startDrawScale", this._startDrawScale, this);
- this._drawInteraction.on("updatePoint", this._updatePoint, this);
- this._drawInteraction.on("endDraw", this._endDraw, this);
- this._drawInteraction.on("abortDraw", this._abortDraw, this);
+ this.drawInteraction.on("startDraw", this._startDraw, this);
+ this.drawInteraction.on("startDrawScale", this._startDrawScale, this);
+ this.drawInteraction.on("updatePoint", this._updatePoint, this);
+ this.drawInteraction.on("endDraw", this._endDraw, this);
+ this.drawInteraction.on("abortDraw", this._abortDraw, this);
// Start draw
- this._drawInteraction.startDraw(event);
+ this.drawInteraction.startDraw(event);
// Emit line move for element rotation
this.targetPositionPoint.emit("onLineMove", new PIXI.interaction.InteractionEvent());
@@ -94,22 +98,22 @@ export class TextPrimitiveGenerator extends BaseDrawGenerator {
//<editor-fold desc="Public functions">
public cleanUp(): void {
- this._drawInteraction.off("startMove", this._startMove, this);
- this._drawInteraction.off("resetMove", this._resetMove, this);
- this._drawInteraction.off("onMove", this._onMove, this);
- this._drawInteraction.off("endMove", this._endMove, this);
-
- this._drawInteraction.off("startScale", this._startScale, this);
- this._drawInteraction.off("onScale", this._onScale, this);
- this._drawInteraction.off("endScale", this._endScale, this);
-
- this._drawInteraction.off("startDraw", this._startDraw, this);
- this._drawInteraction.off("startDrawScale", this._startDrawScale, this);
- this._drawInteraction.off("updatePoint", this._updatePoint, this);
- this._drawInteraction.off("endDraw", this._endDraw, this);
- this._drawInteraction.off("abortDraw", this._abortDraw, this);
-
- delete this._drawInteraction;
+ this.drawInteraction.off("startMove", this._startMove, this);
+ this.drawInteraction.off("resetMove", this._resetMove, this);
+ this.drawInteraction.off("onMove", this._onMove, this);
+ this.drawInteraction.off("endMove", this._endMove, this);
+
+ this.drawInteraction.off("startScale", this._startScale, this);
+ this.drawInteraction.off("onScale", this._onScale, this);
+ this.drawInteraction.off("endScale", this._endScale, this);
+
+ this.drawInteraction.off("startDraw", this._startDraw, this);
+ this.drawInteraction.off("startDrawScale", this._startDrawScale, this);
+ this.drawInteraction.off("updatePoint", this._updatePoint, this);
+ this.drawInteraction.off("endDraw", this._endDraw, this);
+ this.drawInteraction.off("abortDraw", this._abortDraw, this);
+
+ delete this.drawInteraction;
}
public destroy(): void {