diff --git a/src/app/index.ts b/src/app/index.ts
index 085999fcb2c2a5483321ec0879382ccfd19f01ae..999c4d3753917bb87d4c06973bf3e26ad2271d87 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -578,7 +578,7 @@ async function setupImageObjects() {
//<editor-fold desc="Elements">
/**/
// -- Arrow point
- const arrowPoint = new MedsurfDraw.PositionPoint({
+ const arrowPoint = new MedsurfDraw.PositionPoint(image, {
id: 'arrowPoint',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
@@ -593,7 +593,7 @@ async function setupImageObjects() {
});
image.addChild(arrowPoint);
// -- Rectangle point
- const rectanglePoint = new MedsurfDraw.PositionPoint({
+ const rectanglePoint = new MedsurfDraw.PositionPoint(image, {
id: 'rectanglePoint',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
@@ -608,7 +608,7 @@ async function setupImageObjects() {
});
image.addChild(rectanglePoint);
// -- Ellipse point
- const ellipsePoint = new MedsurfDraw.PositionPoint({
+ const ellipsePoint = new MedsurfDraw.PositionPoint(image, {
id: 'ellipsePoint',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
@@ -623,7 +623,7 @@ async function setupImageObjects() {
});
image.addChild(ellipsePoint);
// -- Text point
- const textPoint = new MedsurfDraw.PositionPoint({
+ const textPoint = new MedsurfDraw.PositionPoint(image, {
id: 'textPoint',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
@@ -639,7 +639,7 @@ async function setupImageObjects() {
image.addChild(textPoint);
elementsArray['textPoint'] = textPoint;
// -- Test point
- const testPoint = new MedsurfDraw.PositionPoint({
+ const testPoint = new MedsurfDraw.PositionPoint(image, {
id: 'testPoint',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
@@ -654,7 +654,7 @@ async function setupImageObjects() {
});
image.addChild(testPoint);
// -- Test 2 point
- const test2Point = new MedsurfDraw.PositionPoint({
+ const test2Point = new MedsurfDraw.PositionPoint(image, {
id: 'test2Point',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
@@ -669,7 +669,7 @@ async function setupImageObjects() {
});
image.addChild(test2Point);
// -- Test 3 point
- const test3Point = new MedsurfDraw.PositionPoint({
+ const test3Point = new MedsurfDraw.PositionPoint(image, {
id: 'test3Point',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
@@ -684,7 +684,7 @@ async function setupImageObjects() {
});
image.addChild(test3Point);
// -- Test point
- const test17Point = new MedsurfDraw.PositionPoint({
+ const test17Point = new MedsurfDraw.PositionPoint(image, {
id: 'test17Point',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
@@ -701,7 +701,7 @@ async function setupImageObjects() {
/**/
/**/
// -- Line1
- const line1 = new MedsurfDraw.Line({
+ const line1 = new MedsurfDraw.Line(image, {
id: 'line1',
type: Models.ImageObjectType.LINE,
isStatic: false,
@@ -720,7 +720,7 @@ async function setupImageObjects() {
image.addChild(line1);
elementsArray['line1'] = line1;
// -- Line2
- const line2 = new MedsurfDraw.Line({
+ const line2 = new MedsurfDraw.Line(image, {
id: 'line2',
type: Models.ImageObjectType.LINE,
isStatic: false,
@@ -739,7 +739,7 @@ async function setupImageObjects() {
image.addChild(line2);
elementsArray['line2'] = line2;
// -- Line3
- const line3 = new MedsurfDraw.Line({
+ const line3 = new MedsurfDraw.Line(image, {
id: 'line3',
type: Models.ImageObjectType.LINE,
isStatic: false,
@@ -758,7 +758,7 @@ async function setupImageObjects() {
image.addChild(line3);
elementsArray['line3'] = line3;
// -- Line4
- const line4 = new MedsurfDraw.Line({
+ const line4 = new MedsurfDraw.Line(image, {
id: 'line4',
type: Models.ImageObjectType.LINE,
isStatic: false,
@@ -777,7 +777,7 @@ async function setupImageObjects() {
image.addChild(line4);
elementsArray['line4'] = line4;
// -- Line5
- const line5 = new MedsurfDraw.Line({
+ const line5 = new MedsurfDraw.Line(image, {
id: 'line5',
type: Models.ImageObjectType.LINE,
isStatic: false,
@@ -796,7 +796,7 @@ async function setupImageObjects() {
image.addChild(line5);
elementsArray['line5'] = line5;
// -- Arrow
- const arrow = new MedsurfDraw.ArrowPrimitive({
+ const arrow = new MedsurfDraw.ArrowPrimitive(image, {
id: 'arrow',
type: Models.ImageObjectType.ARROW,
isStatic: false,
@@ -825,7 +825,7 @@ async function setupImageObjects() {
arrowPoint.model.primitives.push(arrow.model);
arrowPoint.addChild(arrow);
// -- Rectangle
- const rect = new MedsurfDraw.RectanglePrimitive({
+ const rect = new MedsurfDraw.RectanglePrimitive(image, {
id: 'rect',
type: Models.ImageObjectType.RECTANGLE,
isStatic: false,
@@ -853,7 +853,7 @@ async function setupImageObjects() {
rectanglePoint.model.primitives.push(rect.model);
rectanglePoint.addChild(rect);
// -- Ellipse
- const ellipse = new MedsurfDraw.EllipsePrimitive({
+ const ellipse = new MedsurfDraw.EllipsePrimitive(image, {
id: 'ellipse',
type: Models.ImageObjectType.ELLIPSE,
isStatic: false,
@@ -880,7 +880,7 @@ async function setupImageObjects() {
ellipsePoint.model.primitives.push(ellipse.model);
ellipsePoint.addChild(ellipse);
// -- Text
- const text = new MedsurfDraw.TextPrimitive({
+ const text = new MedsurfDraw.TextPrimitive(image, {
id: 'text',
type: Models.ImageObjectType.TEXT,
isStatic: false,
@@ -908,7 +908,7 @@ async function setupImageObjects() {
textPoint.addChild(text);
elementsArray['text'] = text;
// -- Background Rectangle
- const backgroundRectangle = new MedsurfDraw.BackgroundRectanglePrimitive({
+ const backgroundRectangle = new MedsurfDraw.BackgroundRectanglePrimitive(image, {
id: 'backgroundRectangle',
type: Models.ImageObjectType.BACKGROUNDRECTANGLE,
isStatic: false,
@@ -931,7 +931,7 @@ async function setupImageObjects() {
textPoint.addChild(backgroundRectangle);
elementsArray['backgroundRectangle'] = backgroundRectangle;
// -- Fill
- const fill1 = new MedsurfDraw.FillCollection({
+ const fill1 = new MedsurfDraw.FillCollection(image, {
id: 'fill1',
type: Models.ImageObjectType.FILLCOLLECTION,
isStatic: false,
@@ -949,7 +949,7 @@ async function setupImageObjects() {
image.addChild(fill1);
elementsArray['fill1'] = fill1;
// -- FillLine
- const fillLine = new MedsurfDraw.Line({
+ const fillLine = new MedsurfDraw.Line(image, {
id: 'fillLine',
type: Models.ImageObjectType.LINE,
isStatic: false,
@@ -968,7 +968,7 @@ async function setupImageObjects() {
image.addChild(fillLine);
elementsArray['fillLine'] = fillLine;
// -- FillLine2
- const fillLine2 = new MedsurfDraw.Line({
+ const fillLine2 = new MedsurfDraw.Line(image, {
id: 'fillLine2',
type: Models.ImageObjectType.LINE,
isStatic: false,
@@ -1092,13 +1092,13 @@ async function setupImageObjects() {
};
legendColumn2Model.rows.push(legendText2_2Model);
// Legend
- const legend = new MedsurfDraw.LegendCollection(legendCollectionModel);
+ const legend = new MedsurfDraw.LegendCollection(image, legendCollectionModel);
image.addChild(legend);
elementsArray['legend'] = legend;
/**/
// TEST LINE
// -- Real Point 1
- const realPoint1 = new MedsurfDraw.PositionPoint({
+ const realPoint1 = new MedsurfDraw.PositionPoint(image, {
id: 'realPoint1',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
@@ -1113,7 +1113,7 @@ async function setupImageObjects() {
});
image.addChild(realPoint1);
// -- Real Point 2
- const realPoint2 = new MedsurfDraw.PositionPoint({
+ const realPoint2 = new MedsurfDraw.PositionPoint(image, {
id: 'realPoint2',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
@@ -1128,7 +1128,7 @@ async function setupImageObjects() {
});
image.addChild(realPoint2);
// -- Real Point 3
- const realPoint3 = new MedsurfDraw.PositionPoint({
+ const realPoint3 = new MedsurfDraw.PositionPoint(image, {
id: 'realPoint3',
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
@@ -1143,7 +1143,7 @@ async function setupImageObjects() {
});
image.addChild(realPoint3);
// -- Real Line 1
- const realLine1 = new MedsurfDraw.Line({
+ const realLine1 = new MedsurfDraw.Line(image, {
id: 'realLine1',
type: Models.ImageObjectType.LINE,
isStatic: false,
@@ -1162,7 +1162,7 @@ async function setupImageObjects() {
image.addChild(realLine1);
elementsArray['realLine1'] = realLine1;
// -- Real Ellipse 1
- const realEllipse1 = new MedsurfDraw.EllipsePrimitive({
+ const realEllipse1 = new MedsurfDraw.EllipsePrimitive(image, {
id: 'realEllipse1',
type: Models.ImageObjectType.ELLIPSE,
isStatic: false,
@@ -1188,7 +1188,7 @@ async function setupImageObjects() {
realPoint1.model.primitives.push(realEllipse1.model);
realPoint1.addChild(realEllipse1);
// -- Real Text 1
- const realText1 = new MedsurfDraw.TextPrimitive({
+ const realText1 = new MedsurfDraw.TextPrimitive(image, {
id: 'realText1',
type: Models.ImageObjectType.TEXT,
isStatic: false,
@@ -1222,19 +1222,23 @@ async function setupImageObjects() {
test.beginFill(0xff0000, 1);
test.drawCircle(0, 0, 30);
test.endFill();
- test.position.set(300, 500);
image.moveInteraction.on("onMove", (event: PIXI.InteractionEvent, dX: number, dY: number): void => {
/**/
- container.position.x += dX;
- container.position.y += dY;
+ test.position.x += dX;
+ test.position.y += dY;
/**/
});
- /*
+ /**/
image.zoomInteraction.on('onZoom', (dX: number, dY: number): void => {
+ /*
console.log(test.name, test.parent);
+ const imageGlobalPos = image.getGlobalPosition();
+ // const bla = image.getGlobalPosition(new PIXI.Point(300, 500));
const imagePos = image.position;
+ const imageScale = image.scale;
const testPos = test.position;
- console.log(imagePos, testPos);
+ console.log(imageGlobalPos, imagePos, imagePos, testPos);
+ */
/** /
dX = imagePos.x - testPos.x;
@@ -1250,19 +1254,24 @@ async function setupImageObjects() {
test.position.x += dX;
test.position.y += dY;
}
- /** /
- // container.position.set(image.position.x - 300, image.position.y - 500);
- console.log(test.getBounds());
- console.log(test.scale);
- console.log(app.stage.scale);
+ */
+ test.position.set(imagePos.x + 300 * imageScale.x, imagePos.y + 500 * imageScale.y);
+ // container.position.set(imagePos.x, imagePos.y);
+ /**/
+ // test.position.set(image.position.x - 300, image.position.y - 500);
+ /**/
});
- */
+ /**/
// container
- const container = new PIXI.Container();
- container.position.set(image.position.x, image.position.y);
- container.addChild(test);
+ const imageGlobalPos = image.getGlobalPosition();
+ const imagePos = image.position;
+ const imageScale = image.scale;
+ // const container = new PIXI.Container();
+ test.position.set(imagePos.x + 300 * imageScale.x, imagePos.y + 500 * imageScale.x);
+ // container.position.set(imageGlobalPos.x, imageGlobalPos.y);
+ // container.addChild(test);
// stage
- app.stage.addChild(container);
+ app.stage.addChild(test);
// TEST ------------------------------------------------------------------------------------------------------------
image.sortChildren();
@@ -1542,35 +1551,9 @@ buttonVirtualPointer.addEventListener("click", () => {
virtualPointer.toggleItem();
});
buttonTest.addEventListener("click", () => {
- // TEST Fill
- const test = new PIXI.Graphics();
- test.name = "test_fill";
- test.clear();
- test.beginFill(0xff0000, 0.3);
- test.drawCircle(0, 0, 30);
- test.endFill();
- test.position.set(300, 500);
- // container
- /*
- const container = new PIXI.Container();
- container.position.set(image.position.x, image.position.y);
- container.addChild(test);
- */
- // stage
- app.stage.addChild(test);
-
- /* Fill polygon test
- const test = new PIXI.Graphics();
-
- test.lineStyle(1, 0xffffff, 1);
- test.drawPolygon([100, 100, 107.16581074474149, 93.83305489669469, 114.97047240007768, 88.9560224214893, 123.3293745522215, 85.35006137190423, 132.15790678738588, 82.99633054545986, 141.37145869178374, 81.87598873967652, 150.88541985162811, 81.97019475207463, 160.61517985313188, 83.26010738017457, 170.47612828250803, 85.72688542149672, 180.38365472596945, 89.3516876735614, 190.2531487697291, 94.11567293388903, 200, 100, 200.56348610067616, 105.52216378662658, 202.02854996243425, 112.7723516153268, 204.0570999248685, 121.41247182569496, 206.31104432757323, 131.1044327573253, 208.4522915101427, 141.51014274981213, 210.1427498121713, 152.29151014274981, 211.04432757325318, 163.11044327573254, 210.81893313298275, 173.6288504883546, 209.12847483095416, 183.50864012021037, 205.6348610067618, 192.41172051089404, 200, 200, 192.59954921111944, 206.198347107438, 184.18482344102176, 211.1570247933884, 174.98121712997747, 214.87603305785123, 165.21412471825693, 217.3553719008264, 155.1089406461307, 218.595041322314, 144.89105935386925, 218.59504132231405, 134.78587528174305, 217.35537190082644, 125.01878287002253, 214.87603305785126, 115.81517655897821, 211.15702479338842, 107.40045078888053, 206.198347107438, 100, 200, 93.80165289256198, 192.59954921111944, 88.84297520661156, 184.18482344102176, 85.12396694214875, 174.98121712997747, 82.64462809917356, 165.21412471825693, 81.40495867768593, 155.1089406461307, 81.40495867768595, 144.89105935386925, 82.64462809917354, 134.78587528174305, 85.12396694214877, 125.01878287002253, 88.84297520661158, 115.81517655897821, 93.80165289256198, 107.40045078888053, 100, 100]);
-
- image.addChild(test);
- */
-
// Add Middle point
// line1-5; fillLine; realLine1
- // (elementsArray['line1'] as MedsurfDraw.Line).onButtonAddMiddlePoint(image, layerGroupsArray['layerGroupModel1']);
+ (elementsArray['line1'] as MedsurfDraw.Line).onButtonAddMiddlePoint(image, layerGroupsArray['layerGroupModel1']);
// (elementsArray['fillLine'] as MedsurfDraw.Line).onButtonAddMiddlePoint(image);
// (elementsArray['realLine1'] as MedsurfDraw.Line).onButtonAddMiddlePoint(image, layerGroupsArray['realLayerGroup1']);
diff --git a/src/lib/bases/elements/BaseContainer.ts b/src/lib/bases/elements/BaseContainer.ts
index 90d1b9b3a05b805b555ddf6cb921f0d21a0145f2..bbcfe5ac5b39a00a772beb918cb55b6c26bc590f 100644
--- a/src/lib/bases/elements/BaseContainer.ts
+++ b/src/lib/bases/elements/BaseContainer.ts
@@ -10,16 +10,23 @@ import { debounce } from 'debounce';
export class BaseContainerModel {
}
+/**
+ * Base container image model
+ */
+export class BaseContainerImageModel extends BaseContainerModel {
+ image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage;
+}
+
/**
* Base container
* Override default behaviour of pixi container
*/
-export abstract class BaseContainer<TData extends BaseContainerModel> extends PIXI.Container {
+export abstract class BaseContainer<TData extends BaseContainerModel | BaseContainerImageModel> extends PIXI.Container {
/**
* Members
*/
- private _data: TData;
- private _modeInteraction: ModeInteraction<ImageObject>;
+ protected _data: TData;
+ protected _modeInteraction: ModeInteraction<ImageObject>;
/**
* Methods
@@ -53,13 +60,22 @@ export abstract class BaseContainer<TData extends BaseContainerModel> extends PI
//<editor-fold desc="Events">
// -- Added
this.on("added", (parent: MedsurfDraw.ImageObject) => {
- parent.on('imageZoom', this.onImageZoom, this);
// Events
- // -- Mode
- if (this instanceof MedsurfDraw.Image || this instanceof MedsurfDraw.NavigatorElement || this instanceof MedsurfDraw.VirtualPointerElement) {
+ if (this instanceof MedsurfDraw.Image || this instanceof MedsurfDraw.NavigatorElement
+ || this instanceof MedsurfDraw.VirtualPointerElement) {
+ // -- Mode
parent.on("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
parent.on("setMode", this.modeInteraction.setMode, this.modeInteraction);
+ } else if (this instanceof MedsurfDraw.MenuElement || this instanceof MedsurfDraw.SelftestPoint/* || this instanceof MedsurfDraw.ScaleElement*/) {
+ // -- Zoom
+ this.image.on('imageZoom', this.onImageZoom, this);
+ // -- Mode
+ this.image.modeInteraction.on("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
+ this.image.modeInteraction.on("setMode", this.modeInteraction.setMode, this.modeInteraction);
} else {
+ // -- Zoom
+ this.image.on('imageZoom', this.onImageZoom, this);
+ // -- Mode
parent.modeInteraction.on("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
parent.modeInteraction.on("setMode", this.modeInteraction.setMode, this.modeInteraction);
}
@@ -69,13 +85,21 @@ export abstract class BaseContainer<TData extends BaseContainerModel> extends PI
});
// -- Removed
this.on("removed", (parent: MedsurfDraw.ImageObject) => {
- parent.off('imageZoom', this.onImageZoom, this);
// Events
- // -- Mode
if (this instanceof MedsurfDraw.Image || this instanceof MedsurfDraw.NavigatorElement || this instanceof MedsurfDraw.VirtualPointerElement) {
+ // -- Mode
parent.off("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
parent.off("setMode", this.modeInteraction.setMode, this.modeInteraction);
+ } else if (this instanceof MedsurfDraw.MenuElement || this instanceof MedsurfDraw.SelftestPoint/* || this instanceof MedsurfDraw.ScaleElement*/) {
+ // -- Zoom
+ this.image.off('imageZoom', this.onImageZoom, this);
+ // -- Mode
+ this.image.modeInteraction.off("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
+ this.image.modeInteraction.off("setMode", this.modeInteraction.setMode, this.modeInteraction);
} else {
+ // -- Zoom
+ this.image.off('imageZoom', this.onImageZoom, this);
+ // -- Mode
parent.modeInteraction.off("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
parent.modeInteraction.off("setMode", this.modeInteraction.setMode, this.modeInteraction);
}
@@ -154,37 +178,6 @@ export abstract class BaseContainer<TData extends BaseContainerModel> extends PI
return this.getRectangle();
}
- /**
- * Get canvas
- */
- public getCanvas(): HTMLCanvasElement {
- return (this.parent as ImageObject).getCanvas();
- }
-
- /**
- * Get image
- */
- public getImage(): MedsurfDraw.Image {
- return (this.parent as ImageObject).getImage();
- }
-
- /**
- * Get image scale
- */
- public getImageScale(): PIXI.IPoint {
- if (!this.parent) {
- return new PIXI.Point(0, 0);
- }
- return (this.parent as ImageObject).getImageScale();
- }
-
- /**
- * Get image dimensions
- */
- public getImageDimensions(): MedsurfDraw.Dimensions {
- return (this.parent as ImageObject).getImageDimensions();
- }
-
/**
* Get rotation
*/
@@ -222,9 +215,10 @@ export abstract class BaseContainer<TData extends BaseContainerModel> extends PI
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- this.emit("imageZoom");
+ public onImageZoom(scaleX: number, scaleY: number): void {
}
//</editor-fold>
@@ -244,6 +238,50 @@ export abstract class BaseContainer<TData extends BaseContainerModel> extends PI
this._data = value;
}
+ /**
+ * Get image
+ */
+ public get image(): MedsurfDraw.Image | MedsurfDraw.DeepZoomImage {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseContainerImageModel).image;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image canvas
+ */
+ public get imageCanvas(): HTMLCanvasElement {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseContainerImageModel).image.canvas;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image scale
+ */
+ public get imageScale(): PIXI.IPoint {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseContainerImageModel).image.imageScale;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image dimensions
+ */
+ public get imageDimensions(): MedsurfDraw.Dimensions {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseContainerImageModel).image.imageDimensions;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
/**
* Get mode interaction
*/
diff --git a/src/lib/bases/elements/BaseElementContainer.ts b/src/lib/bases/elements/BaseElementContainer.ts
index 3d06ae1485aa9ca8da29fa849e27afc33fe393ad..7293630132ff0242c95ea4c50dd8ad47ab109f1b 100644
--- a/src/lib/bases/elements/BaseElementContainer.ts
+++ b/src/lib/bases/elements/BaseElementContainer.ts
@@ -1,7 +1,7 @@
import * as MedsurfDraw from "../../public-api";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
import { v4 as uuidv4 } from 'uuid';
-import {BaseContainer, BaseContainerModel} from "./BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "./BaseContainer";
import {Design} from "../../config/design";
/**
@@ -29,7 +29,7 @@ export enum NumberMode {
/**
* Base element container model
*/
-export class BaseElementContainerModel<TModel extends Models.ImageObject> extends BaseContainerModel {
+export class BaseElementContainerModel<TModel extends Models.ImageObject> extends BaseContainerImageModel {
model: TModel
}
diff --git a/src/lib/bases/elements/BaseGraphics.ts b/src/lib/bases/elements/BaseGraphics.ts
index e046adaa48c194787336ae8dad771ca0530d8cd8..c17aed622e3ce50a4605373f4cd61ef8f01d5e0e 100644
--- a/src/lib/bases/elements/BaseGraphics.ts
+++ b/src/lib/bases/elements/BaseGraphics.ts
@@ -10,16 +10,23 @@ import { debounce } from 'debounce';
export class BaseGraphicsModel {
}
+/**
+ * Base graphics image model
+ */
+export class BaseGraphicsImageModel extends BaseGraphicsModel {
+ image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage;
+}
+
/**
* Base graphic
* Override default behaviour of pixi graphics
*/
-export class BaseGraphics<TData extends BaseGraphicsModel> extends PIXI.Graphics {
+export class BaseGraphics<TData extends BaseGraphicsModel | BaseGraphicsImageModel> extends PIXI.Graphics {
/**
* Members
*/
- private _data: TData;
- private _modeInteraction: ModeInteraction<ImageObject>;
+ protected _data: TData;
+ protected _modeInteraction: ModeInteraction<ImageObject>;
/**
* Methods
@@ -49,36 +56,12 @@ export class BaseGraphics<TData extends BaseGraphicsModel> extends PIXI.Graphics
// Events
// -- Added
- this.on("added", (parent: MedsurfDraw.ImageObject) => {
- parent.on('imageZoom', this.onImageZoom, this);
- // Events
- // -- Mode
- if (this instanceof MedsurfDraw.SelectGroupElement) {
- // @ts-ignore
- parent.on("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
- // @ts-ignore
- parent.on("setMode", this.modeInteraction.setMode, this.modeInteraction);
- } else {
- parent.modeInteraction.on("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
- parent.modeInteraction.on("setMode", this.modeInteraction.setMode, this.modeInteraction);
- }
+ this.on("added", () => {
// -- Debounce
this.on("debounceDraw", this._debounceDrawMethod);
});
// -- Removed
- this.on("removed", (parent: MedsurfDraw.ImageObject) => {
- parent.off('imageZoom', this.onImageZoom, this);
- // Events
- // -- Mode
- if (this instanceof MedsurfDraw.SelectGroupElement) {
- // @ts-ignore
- parent.off("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
- // @ts-ignore
- parent.off("setMode", this.modeInteraction.setMode, this.modeInteraction);
- } else {
- parent.modeInteraction.off("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
- parent.modeInteraction.off("setMode", this.modeInteraction.setMode, this.modeInteraction);
- }
+ this.on("removed", () => {
// -- Debounce
this.off("debounceDraw", this._debounceDrawMethod);
});
@@ -134,37 +117,6 @@ export class BaseGraphics<TData extends BaseGraphicsModel> extends PIXI.Graphics
return this.getRectangle();
}
- /**
- * Get canvas
- */
- public getCanvas(): HTMLCanvasElement {
- return (this.parent as ImageObject).getCanvas();
- }
-
- /**
- * Get image
- */
- public getImage(): MedsurfDraw.Image {
- return (this.parent as ImageObject).getImage();
- }
-
- /**
- * Get image scale
- */
- public getImageScale(): PIXI.IPoint {
- if (!this.parent) {
- return new PIXI.Point(0, 0);
- }
- return (this.parent as ImageObject).getImageScale();
- }
-
- /**
- * Get image dimensions
- */
- public getImageDimensions(): MedsurfDraw.Dimensions {
- return (this.parent as ImageObject).getImageDimensions();
- }
-
/**
* Get rotation
*/
@@ -202,9 +154,10 @@ export class BaseGraphics<TData extends BaseGraphicsModel> extends PIXI.Graphics
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- this.emit("imageZoom");
+ public onImageZoom(scaleX: number, scaleY: number): void {
}
//</editor-fold>
@@ -224,6 +177,50 @@ export class BaseGraphics<TData extends BaseGraphicsModel> extends PIXI.Graphics
this._data = value;
}
+ /**
+ * Get image
+ */
+ public get image(): MedsurfDraw.Image | MedsurfDraw.DeepZoomImage {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseGraphicsImageModel).image;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image canvas
+ */
+ public get imageCanvas(): HTMLCanvasElement {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseGraphicsImageModel).image.canvas;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image scale
+ */
+ public get imageScale(): PIXI.IPoint {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseGraphicsImageModel).image.imageScale;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image dimensions
+ */
+ public get imageDimensions(): MedsurfDraw.Dimensions {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseGraphicsImageModel).image.imageDimensions;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
/**
* Get mode interaction
*/
diff --git a/src/lib/bases/elements/BaseSprite.ts b/src/lib/bases/elements/BaseSprite.ts
index a4cb04a15dbe692d17543083439659b2f78d8bc3..e382d2da7167b2feade6b11c84bc5b5645567f4d 100644
--- a/src/lib/bases/elements/BaseSprite.ts
+++ b/src/lib/bases/elements/BaseSprite.ts
@@ -10,16 +10,23 @@ export class BaseSpriteModel {
texture: PIXI.Texture;
}
+/**
+ * Base sprite image model
+ */
+export class BaseSpriteImageModel extends BaseSpriteModel {
+ image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage;
+}
+
/**
* Base sprite
* Override default behaviour of pixi sprite
*/
-export class BaseSprite<TData extends BaseSpriteModel> extends PIXI.Sprite {
+export class BaseSprite<TData extends BaseSpriteModel | BaseSpriteImageModel> extends PIXI.Sprite {
/**
* Members
*/
- private _data: TData;
- private _modeInteraction: ModeInteraction<ImageObject>;
+ protected _data: TData;
+ protected _modeInteraction: ModeInteraction<ImageObject>;
/**
* Constructor
@@ -37,22 +44,6 @@ export class BaseSprite<TData extends BaseSpriteModel> extends PIXI.Sprite {
this.modeInteraction = new MedsurfDraw.ModeInteraction(this);
this.modeInteraction.on("init", this.init, this);
//</editor-fold>
-
- // Events
- // -- Added
- this.on("added", (parent: MedsurfDraw.ImageObject) => {
- parent.on('imageZoom', this.onImageZoom, this);
- // Events
- parent.modeInteraction.on("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
- parent.modeInteraction.on("setMode", this.modeInteraction.setMode, this.modeInteraction);
- });
- // -- Removed
- this.on("removed", (parent: MedsurfDraw.ImageObject) => {
- parent.off('imageZoom', this.onImageZoom, this);
- // Events
- parent.modeInteraction.off("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
- parent.modeInteraction.off("setMode", this.modeInteraction.setMode, this.modeInteraction);
- });
}
/**
@@ -98,37 +89,6 @@ export class BaseSprite<TData extends BaseSpriteModel> extends PIXI.Sprite {
return this.getRectangle();
}
- /**
- * Get canvas
- */
- public getCanvas(): HTMLCanvasElement {
- return (this.parent as ImageObject).getCanvas();
- }
-
- /**
- * Get image
- */
- public getImage(): MedsurfDraw.Image {
- return (this.parent as ImageObject).getImage();
- }
-
- /**
- * Get image scale
- */
- public getImageScale(): PIXI.IPoint {
- if (!this.parent) {
- return new PIXI.Point(0, 0);
- }
- return (this.parent as ImageObject).getImageScale();
- }
-
- /**
- * Get image dimensions
- */
- public getImageDimensions(): MedsurfDraw.Dimensions {
- return (this.parent as ImageObject).getImageDimensions();
- }
-
/**
* Get rotation
*/
@@ -161,9 +121,10 @@ export class BaseSprite<TData extends BaseSpriteModel> extends PIXI.Sprite {
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- this.emit("imageZoom");
+ public onImageZoom(scaleX: number, scaleY: number): void {
}
//</editor-fold>
@@ -183,6 +144,50 @@ export class BaseSprite<TData extends BaseSpriteModel> extends PIXI.Sprite {
this._data = value;
}
+ /**
+ * Get image
+ */
+ public get image(): MedsurfDraw.Image | MedsurfDraw.DeepZoomImage {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseSpriteImageModel).image;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image canvas
+ */
+ public get imageCanvas(): HTMLCanvasElement {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseSpriteImageModel).image.canvas;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image scale
+ */
+ public get imageScale(): PIXI.IPoint {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseSpriteImageModel).image.imageScale;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image dimensions
+ */
+ public get imageDimensions(): MedsurfDraw.Dimensions {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseSpriteImageModel).image.imageDimensions;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
/**
* Get mode interaction
*/
diff --git a/src/lib/bases/elements/BaseText.ts b/src/lib/bases/elements/BaseText.ts
index 3cd282ccd84a07093776c3a5b92dac3648cbb46a..1bb16c738d6226bcb0c3803cd2dce1e105300f15 100644
--- a/src/lib/bases/elements/BaseText.ts
+++ b/src/lib/bases/elements/BaseText.ts
@@ -12,16 +12,23 @@ export class BaseTextModel {
canvas?: HTMLCanvasElement;
}
+/**
+ * Base text image model
+ */
+export class BaseTextImageModel extends BaseTextModel {
+ image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage;
+}
+
/**
* Base text
* Override default behaviour of pixi text
*/
-export abstract class BaseText<TData extends BaseTextModel> extends PIXI.Text {
+export abstract class BaseText<TData extends BaseTextModel | BaseTextImageModel> extends PIXI.Text {
/**
* Members
*/
- private _data: TData;
- private _modeInteraction: ModeInteraction<ImageObject>;
+ protected _data: TData;
+ protected _modeInteraction: ModeInteraction<ImageObject>;
/**
* Constructor
@@ -38,22 +45,6 @@ export abstract class BaseText<TData extends BaseTextModel> extends PIXI.Text {
// -- Mode interaction
this.modeInteraction = new MedsurfDraw.ModeInteraction(this);
this.modeInteraction.on("init", this.init, this);
-
- // Events
- // -- Added
- this.on("added", (parent: MedsurfDraw.ImageObject) => {
- parent.on('imageZoom', this.onImageZoom, this);
- // Events
- parent.modeInteraction.on("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
- parent.modeInteraction.on("setMode", this.modeInteraction.setMode, this.modeInteraction);
- });
- // -- Removed
- this.on("removed", (parent: MedsurfDraw.ImageObject) => {
- parent.off('imageZoom', this.onImageZoom, this);
- // Events
- parent.modeInteraction.off("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
- parent.modeInteraction.off("setMode", this.modeInteraction.setMode, this.modeInteraction);
- });
}
/**
@@ -97,37 +88,6 @@ export abstract class BaseText<TData extends BaseTextModel> extends PIXI.Text {
return this.getRectangle();
}
- /**
- * Get canvas
- */
- public getCanvas(): HTMLCanvasElement {
- return (this.parent as ImageObject).getCanvas();
- }
-
- /**
- * Get image
- */
- public getImage(): MedsurfDraw.Image {
- return (this.parent as ImageObject).getImage();
- }
-
- /**
- * Get image scale
- */
- public getImageScale(): PIXI.IPoint {
- if (!this.parent) {
- return new PIXI.Point(0, 0);
- }
- return (this.parent as ImageObject).getImageScale();
- }
-
- /**
- * Get image dimensions
- */
- public getImageDimensions(): MedsurfDraw.Dimensions {
- return (this.parent as ImageObject).getImageDimensions();
- }
-
/**
* Get rotation
*/
@@ -160,9 +120,10 @@ export abstract class BaseText<TData extends BaseTextModel> extends PIXI.Text {
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- this.emit("imageZoom");
+ public onImageZoom(scaleX: number, scaleY: number): void {
}
//</editor-fold>
@@ -182,6 +143,50 @@ export abstract class BaseText<TData extends BaseTextModel> extends PIXI.Text {
this._data = value;
}
+ /**
+ * Get image
+ */
+ public get image(): MedsurfDraw.Image | MedsurfDraw.DeepZoomImage {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseTextImageModel).image;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image canvas
+ */
+ public get imageCanvas(): HTMLCanvasElement {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseTextImageModel).image.canvas;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image scale
+ */
+ public get imageScale(): PIXI.IPoint {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseTextImageModel).image.imageScale;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image dimensions
+ */
+ public get imageDimensions(): MedsurfDraw.Dimensions {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseTextImageModel).image.imageDimensions;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
/**
* Get mode interaction
*/
diff --git a/src/lib/bases/elements/BaseTilingSprite.ts b/src/lib/bases/elements/BaseTilingSprite.ts
index 7c052fb70b526d31be3ad6508bccb1d350218432..322c0e90b2db605321d3500ef297e550148c136a 100644
--- a/src/lib/bases/elements/BaseTilingSprite.ts
+++ b/src/lib/bases/elements/BaseTilingSprite.ts
@@ -10,16 +10,24 @@ export class BaseTilingSpriteModel {
texture: PIXI.Texture;
}
+/**
+ * Base tiling sprite image model
+ */
+export class BaseTilingSpriteImageModel extends BaseTilingSpriteModel {
+ image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage;
+ texture: PIXI.Texture;
+}
+
/**
* Base tiling sprite
* Override default behaviour of pixi sprite
*/
-export class BaseTilingSprite<TData extends BaseTilingSpriteModel> extends PIXI.TilingSprite {
+export class BaseTilingSprite<TData extends BaseTilingSpriteModel | BaseTilingSpriteImageModel> extends PIXI.TilingSprite {
/**
* Members
*/
- private _data: TData;
- private _modeInteraction: ModeInteraction<ImageObject>;
+ protected _data: TData;
+ protected _modeInteraction: ModeInteraction<ImageObject>;
/**
* Constructor
@@ -36,22 +44,6 @@ export class BaseTilingSprite<TData extends BaseTilingSpriteModel> extends PIXI.
// -- Mode interaction
this.modeInteraction = new MedsurfDraw.ModeInteraction(this);
this.modeInteraction.on("init", this.init, this);
-
- // Events
- // -- Added
- this.on("added", (parent: MedsurfDraw.ImageObject) => {
- parent.on('imageZoom', this.onImageZoom, this);
- // Events
- parent.modeInteraction.on("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
- parent.modeInteraction.on("setMode", this.modeInteraction.setMode, this.modeInteraction);
- });
- // -- Removed
- this.on("removed", (parent: MedsurfDraw.ImageObject) => {
- parent.off('imageZoom', this.onImageZoom, this);
- // Events
- parent.modeInteraction.off("setDefaultMode", this.modeInteraction.setDefaultMode, this.modeInteraction);
- parent.modeInteraction.off("setMode", this.modeInteraction.setMode, this.modeInteraction);
- });
}
/**
@@ -97,37 +89,6 @@ export class BaseTilingSprite<TData extends BaseTilingSpriteModel> extends PIXI.
return this.getRectangle();
}
- /**
- * Get canvas
- */
- public getCanvas(): HTMLCanvasElement {
- return (this.parent as ImageObject).getCanvas();
- }
-
- /**
- * Get image
- */
- public getImage(): MedsurfDraw.Image {
- return (this.parent as ImageObject).getImage();
- }
-
- /**
- * Get image scale
- */
- public getImageScale(): PIXI.IPoint {
- if (!this.parent) {
- return new PIXI.Point(0, 0);
- }
- return (this.parent as ImageObject).getImageScale();
- }
-
- /**
- * Get image dimensions
- */
- public getImageDimensions(): MedsurfDraw.Dimensions {
- return (this.parent as ImageObject).getImageDimensions();
- }
-
/**
* Get rotation
*/
@@ -160,9 +121,10 @@ export class BaseTilingSprite<TData extends BaseTilingSpriteModel> extends PIXI.
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- this.emit("imageZoom");
+ public onImageZoom(scaleX: number, scaleY: number): void {
}
//</editor-fold>
@@ -182,6 +144,50 @@ export class BaseTilingSprite<TData extends BaseTilingSpriteModel> extends PIXI.
this._data = value;
}
+ /**
+ * Get image
+ */
+ public get image(): MedsurfDraw.Image | MedsurfDraw.DeepZoomImage {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseTilingSpriteImageModel).image;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image canvas
+ */
+ public get imageCanvas(): HTMLCanvasElement {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseTilingSpriteImageModel).image.canvas;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image scale
+ */
+ public get imageScale(): PIXI.IPoint {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseTilingSpriteImageModel).image.imageScale;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
+ /**
+ * Get image dimensions
+ */
+ public get imageDimensions(): MedsurfDraw.Dimensions {
+ if (this.data.hasOwnProperty("image")) {
+ return (this.data as BaseTilingSpriteImageModel).image.imageDimensions;
+ }
+ debugger;
+ throw 'Not implemented';
+ }
+
/**
* Get mode interaction
*/
diff --git a/src/lib/bases/elements/ImageObject.ts b/src/lib/bases/elements/ImageObject.ts
index c5b85f5c890a6ad0b5cd68c32fbd0a180a52f066..ffd7c02007769aee4a2f247754589912e7470ebd 100644
--- a/src/lib/bases/elements/ImageObject.ts
+++ b/src/lib/bases/elements/ImageObject.ts
@@ -1,4 +1,4 @@
-import {BaseContainer, BaseContainerModel} from "./BaseContainer";
+import { BaseContainer, BaseContainerModel } from './BaseContainer';
import {BaseGraphics, BaseGraphicsModel} from "./BaseGraphics";
import {BaseSprite, BaseSpriteModel} from "./BaseSprite";
import {BaseText, BaseTextModel} from "./BaseText";
diff --git a/src/lib/config/design.ts b/src/lib/config/design.ts
index 398f9a692f3f84fbfd80e62a9bb4dde81eb497fb..c89530428639c036517d24506849f0f03863b0a8 100644
--- a/src/lib/config/design.ts
+++ b/src/lib/config/design.ts
@@ -29,8 +29,8 @@ export const Design = {
fillColorUnselect: 0xF02C6B,
fillAlpha: 0.8,
pad: 2,
- selftestRadius: 4,
- selftestRadiusSelected: 2,
+ selftestRadius: 8,
+ selftestRadiusSelected: 4,
},
// Elements
image: {
@@ -353,9 +353,9 @@ export const Design = {
},
menu: {
zIndex: 6001,
- scaleAspect: 0.3,
- radius: 26,
- fontSize: 6,
+ // scaleAspect: 0.3,
+ radius: 124,
+ fontSize: 32,
minFontSize: 4,
// buttonWidth: 20,
// fontSize: 12,
@@ -369,19 +369,20 @@ export const Design = {
},
subMenu: {
zIndex: 501,
- scaleAspect: 0.4,
- buttonRadius: 8,
+ // scaleAspect: 0.4,
+ buttonRadius: 40,
// buttonWidth: 8,
- fontSize: 8,
+ fontSize: 32,
+ descriptionFontSize: 32,
fontColor: 0xffffff,
buttonGab: 5
},
subMenuItems: {
zIndex: 502,
- scaleAspect: 0.4,
- buttonRadius: 6,
+ // scaleAspect: 0.4,
+ buttonRadius: 20,
// buttonWidth: 8,
- fontSize: 6,
+ fontSize: 32,
fontColor: 0xffffff,
buttonGab: 5
},
diff --git a/src/lib/elements/basics/Arc.ts b/src/lib/elements/basics/Arc.ts
index bce7a8a8b7f776cdc14f5f38ede189b2b76f4614..098485da8074a739af2884cdde8d91a2bd5c7b34 100644
--- a/src/lib/elements/basics/Arc.ts
+++ b/src/lib/elements/basics/Arc.ts
@@ -1,12 +1,12 @@
import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
-import {BaseGraphics} from "../../bases/elements/BaseGraphics";
-import {debounce} from "debounce";
+import { BaseGraphics, BaseGraphicsModel } from '../../bases/elements/BaseGraphics';
+import { debounce } from "debounce";
/**
* Arc model
*/
-export class ArcModel {
+export class ArcModel extends BaseGraphicsModel {
center: PIXI.IPoint;
radius: number;
options: Models.ElementOptions;
diff --git a/src/lib/elements/basics/Arrow.ts b/src/lib/elements/basics/Arrow.ts
index 93e5a54d11d759806187fcebbe5bcc5d75221d90..6729c02d0dc3c613e433662cf8591a81305aa895 100644
--- a/src/lib/elements/basics/Arrow.ts
+++ b/src/lib/elements/basics/Arrow.ts
@@ -1,6 +1,6 @@
import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
-import {BaseGraphics, BaseGraphicsModel} from "../../bases/elements/BaseGraphics";
+import { BaseGraphics, BaseGraphicsModel } from "../../bases/elements/BaseGraphics";
/**
* Arrow model
diff --git a/src/lib/elements/basics/BezierLine.ts b/src/lib/elements/basics/BezierLine.ts
index c70354a0d447098afb818ac96a5a61ff40c8d77c..60e26c7b5dbf91de4749c00ff04819f8d925c8b6 100644
--- a/src/lib/elements/basics/BezierLine.ts
+++ b/src/lib/elements/basics/BezierLine.ts
@@ -1,9 +1,9 @@
import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
-import {BaseGraphics} from "../../bases/elements/BaseGraphics";
-import {ControlPointsModel, StraightLinePointsModel} from "./StraightLine";
-import {Design} from "../../config/design";
-import {debounce} from "debounce";
+import { BaseGraphics, BaseGraphicsModel } from '../../bases/elements/BaseGraphics';
+import { ControlPointsModel, StraightLinePointsModel } from "./StraightLine";
+import { Design } from "../../config/design";
+import { debounce } from "debounce";
/**
* Bezier line points model
@@ -16,7 +16,7 @@ export class BezierLinePointsModel extends StraightLinePointsModel {
/**
* Bezier line model
*/
-export class BezierLineModel {
+export class BezierLineModel extends BaseGraphicsModel {
points: BezierLinePointsModel;
options: Models.ElementOptions;
lineWidth: number;
diff --git a/src/lib/elements/basics/Circle.ts b/src/lib/elements/basics/Circle.ts
index 2bc6ce3430bf35df3f65f4bd6cf0a1aa77dcd008..e0cd5ccda8e36a46a14232824115bc29102da6fe 100644
--- a/src/lib/elements/basics/Circle.ts
+++ b/src/lib/elements/basics/Circle.ts
@@ -1,11 +1,11 @@
import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
-import {BaseGraphics, BaseGraphicsModel} from "../../bases/elements/BaseGraphics";
+import { BaseGraphics, BaseGraphicsModel } from "../../bases/elements/BaseGraphics";
/**
* Circle model
*/
-export class CircleModel extends BaseGraphicsModel{
+export class CircleModel extends BaseGraphicsModel {
circle: PIXI.Circle;
options: Models.ElementOptions = {hasLine: true, lineColor: 0xFFFFFF, lineAlpha: 1, hasFill: false};
lineWidth: number | undefined = 1;
diff --git a/src/lib/elements/basics/Container.ts b/src/lib/elements/basics/Container.ts
index 4a14e4b1c567683270b2b1574856d35abc90084f..581e819496b4a243b4480ca6d06fd06611611e44 100644
--- a/src/lib/elements/basics/Container.ts
+++ b/src/lib/elements/basics/Container.ts
@@ -1,4 +1,4 @@
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import { BaseContainer, BaseContainerModel } from "../../bases/elements/BaseContainer";
/**
* Container
diff --git a/src/lib/elements/basics/EditableText.ts b/src/lib/elements/basics/EditableText.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9fe369edc43361879ca43731875f61695698728b
--- /dev/null
+++ b/src/lib/elements/basics/EditableText.ts
@@ -0,0 +1,322 @@
+import * as PIXI from "pixi.js-legacy";
+import * as MedsurfDraw from "../../public-api";
+import { BaseText, BaseTextImageModel } from "../../bases/elements/BaseText";
+import { Design } from "../../config/design";
+
+/**
+ * Editable Text model
+ */
+export class EditableTextModel extends BaseTextImageModel {
+ text: string;
+ style: PIXI.TextStyle;
+}
+
+/**
+ * Editable text
+ */
+export class EditableText extends BaseText<EditableTextModel> {
+ /**
+ * Members
+ */
+ private _startTextIndex: number;
+ private _endTextIndex: number;
+ private _textSelection: boolean;
+
+ /**
+ * Interactions
+ */
+ private _writeInteraction: MedsurfDraw.WriteInteraction<EditableText>;
+
+ /**
+ * Methods
+ */
+ protected _copyMethod: any;
+ protected _cutMethod: any;
+ protected _pasteMethod: any;
+
+ /**
+ * Constructor
+ * @param model
+ */
+ public constructor(model: EditableTextModel) {
+ // Parent constructor
+ super(model);
+
+ // Members
+ this.startTextIndex = this.data.text.length;
+ this.endTextIndex = this.data.text.length;
+ this.textSelection = false;
+
+ //<editor-fold desc="Interactions">
+ // -- Mode interaction
+ this.modeInteraction.on('select_item', this._modeSelectItem, this);
+ this.modeInteraction.on("remove-select_item", this._removeModeSelectItem, this);
+ // -- Write interaction
+ this.writeInteraction = new MedsurfDraw.WriteInteraction(this);
+ this.writeInteraction.on("onText", this.onText, this);
+ this.writeInteraction.on("endText", this.endText, this);
+ //</editor-fold>
+ }
+
+ /**
+ * Init
+ */
+ public init(): void {
+ // Methods
+ this._copyMethod = this.writeInteraction.onCopy.bind(this.writeInteraction);
+ this._cutMethod = this.writeInteraction.onCut.bind(this.writeInteraction);
+ this._pasteMethod = this.writeInteraction.onPaste.bind(this.writeInteraction);
+
+ // Sort items
+ this.sortChildren();
+
+ // On image zoom
+ this.onImageZoom(this.imageScale.x, this.imageScale.y);
+ }
+
+ /**
+ * Destroy
+ * @param options
+ */
+ public destroy(options?: { children?: boolean; texture?: boolean; baseTexture?: boolean }): void {
+ //<editor-fold desc="Interactions">
+ // -- Mode interaction
+ if (this.modeInteraction) {
+ this.modeInteraction.off('select_item', this._modeSelectItem, this);
+ this.modeInteraction.off("remove-select_item", this._removeModeSelectItem, this);
+ }
+ // -- Write interaction
+ if (this.writeInteraction) {
+ this.writeInteraction.off("onText", this.onText, this);
+ this.writeInteraction.off("endText", this.endText, this);
+ // TODO remove delete this.writeInteraction;
+ }
+ //</editor-fold>
+
+ // Parent destroy
+ super.destroy(options);
+ }
+
+ //<editor-fold desc="Mode">
+ /**
+ * Mode select item
+ * @private
+ */
+ protected _modeSelectItem(): void {
+ // Setup
+ this.interactive = true;
+
+ // Events
+ // -- Keyboards
+ MedsurfDraw.Keyboard.events.on("down", "onTextPrimitiveKeyDown", this.writeInteraction.onKeyDown.bind(this.writeInteraction));
+ MedsurfDraw.Keyboard.events.on("pressed", "onTextPrimitiveKeyPress", this.writeInteraction.onKeyPressed.bind(this.writeInteraction));
+ MedsurfDraw.Keyboard.events.on("released", "onTextPrimitiveKeyUp", this.writeInteraction.onKeyReleased.bind(this.writeInteraction));
+ // -- Methods
+ document.addEventListener("copy", this._copyMethod);
+ document.addEventListener("cut", this._cutMethod);
+ document.addEventListener("paste", this._pasteMethod);
+
+ // Control update elements
+ this.image.controlUpdateElements();
+
+ // Show item
+ this.showItem();
+
+ // Emit
+ this.emit("pointerover", new PIXI.InteractionEvent());
+ }
+
+ /**
+ * Remove mode select item
+ * @param parent
+ * @param mode
+ * @private
+ */
+ protected _removeModeSelectItem(parent: MedsurfDraw.ImageObject, mode: string): void {
+ // Setup
+ this.interactive = false;
+
+ // Events
+ // -- Keyboards
+ MedsurfDraw.Keyboard.events.remove("down", "onTextPrimitiveKeyDown");
+ MedsurfDraw.Keyboard.events.remove("pressed", "onTextPrimitiveKeyPress");
+ MedsurfDraw.Keyboard.events.remove("released", "onTextPrimitiveKeyUp");
+ // -- Methods
+ document.removeEventListener("copy", this._copyMethod);
+ document.removeEventListener("cut", this._cutMethod);
+ document.removeEventListener("paste", this._pasteMethod);
+
+ if (mode !== 'select_child' && !mode.startsWith('select_item') && mode !== 'delete') {
+ // Set select layer
+ if (this.parent instanceof MedsurfDraw.TextPrimitive || this.parent instanceof MedsurfDraw.LegendRow) {
+ parent.emit("debounceControlSelectItem");
+ }
+ }
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Control">
+ /**
+ * Control select item
+ */
+ public controlSelectItem(): void {
+ // Set default mode for image children
+ this.image.getImageObjects()
+ .filter((imageObject) => imageObject !== this.parent.parent)
+ .forEach((imageObject) => {
+ imageObject.modeInteraction.setMode('blocked_item');
+ });
+
+ // Set default mode for parent
+ if (this.parent instanceof MedsurfDraw.TextPrimitive) {
+ this.parent.modeInteraction.setModeItem('select_child');
+ }
+ if (this.parent instanceof MedsurfDraw.LegendRow) {
+ this.parent.modeInteraction.setModeItem('select_child')
+ }
+
+ // Set children mode
+ this.modeInteraction.setModeChildren('select_parent');
+
+ // Set select item
+ this.modeInteraction.setModeItem('select_item');
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Public function">
+ /**
+ * Select all text
+ */
+ public selectAllText(): void {
+ this.writeInteraction.selectAllText();
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Text">
+ /**
+ * On text
+ * @param text
+ */
+ public onText(text: string): void {
+ this.emit("onText", text);
+ }
+
+ /**
+ * End text
+ */
+ public endText(): void {
+ this.emit("endText");
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="ImageZoom">
+ /**
+ * On image zoom
+ * @param scaleX
+ * @param scaleY
+ */
+ public onImageZoom(scaleX: number, scaleY: number): void {
+ // Update resolution
+ let resolution = Math.round(scaleX);
+ if (resolution < Design.text.minResolution) {
+ resolution = Design.text.minResolution;
+ }
+ if (resolution > Design.text.maxResolution) {
+ resolution = Design.text.maxResolution;
+ }
+ this.resolution = resolution;
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="BaseContainer">
+ /**
+ * Get rectangle
+ */
+ public getRectangle(): PIXI.Rectangle {
+ try {
+ if (this.parent instanceof MedsurfDraw.TextPrimitive || this.parent instanceof MedsurfDraw.LegendRow) {
+ return this.parent.getRectangle();
+ }
+ return super.getRectangle();
+ } catch (e) {
+ // TODO what to do with this ???
+ // console.warn(e);
+ return new PIXI.Rectangle(this.position.x, this.position.y, 1, 1);
+ }
+ }
+
+ /**
+ * Get rotation
+ */
+ public getRotation(): number {
+ if (this.parent instanceof MedsurfDraw.TextPrimitive || this.parent instanceof MedsurfDraw.LegendRow) {
+ return this.parent.rotation;
+ }
+ return this.rotation;
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Getter and Setter">
+
+
+ /**
+ * Get start text index
+ */
+ public get startTextIndex(): number {
+ return this._startTextIndex;
+ }
+
+ /**
+ * Set start text index
+ * @param value
+ */
+ public set startTextIndex(value: number) {
+ this._startTextIndex = value;
+ }
+
+ /**
+ * Get end text index
+ */
+ public get endTextIndex(): number {
+ return this._endTextIndex;
+ }
+
+ /**
+ * Set end text index
+ * @param value
+ */
+ public set endTextIndex(value: number) {
+ this._endTextIndex = value;
+ }
+
+ /**
+ * Get text selection
+ */
+ public get textSelection(): boolean {
+ return this._textSelection;
+ }
+
+ /**
+ * Set text selection
+ * @param value
+ */
+ public set textSelection(value: boolean) {
+ this._textSelection = value;
+ }
+
+ /**
+ * Get write interaction
+ */
+ public get writeInteraction(): MedsurfDraw.WriteInteraction<EditableText> {
+ return this._writeInteraction;
+ }
+
+ /**
+ * Set write interaction
+ * @param value
+ */
+ public set writeInteraction(value: MedsurfDraw.WriteInteraction<EditableText>) {
+ this._writeInteraction = value;
+ }
+ //</editor-fold>
+}
\ No newline at end of file
diff --git a/src/lib/elements/basics/Ellipse.ts b/src/lib/elements/basics/Ellipse.ts
index 29731d2bd2a43cd70081b10d247574c083fbe8bb..a9759bd871208beef2ec3b4919e07f6aef89765c 100644
--- a/src/lib/elements/basics/Ellipse.ts
+++ b/src/lib/elements/basics/Ellipse.ts
@@ -1,6 +1,6 @@
import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
-import {BaseGraphics, BaseGraphicsModel} from "../../bases/elements/BaseGraphics";
+import { BaseGraphics, BaseGraphicsModel } from "../../bases/elements/BaseGraphics";
/**
* Ellipse model
diff --git a/src/lib/elements/basics/Killbox.ts b/src/lib/elements/basics/Killbox.ts
index b583251836f87fd8da3672cdb16c28e261a93811..1cc530603b8be121226c15ca35fbc70c77c5c250 100644
--- a/src/lib/elements/basics/Killbox.ts
+++ b/src/lib/elements/basics/Killbox.ts
@@ -1,6 +1,6 @@
import * as PIXI from "pixi.js-legacy";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
-import {Design} from "../../config/design";
+import { BaseContainer, BaseContainerModel } from "../../bases/elements/BaseContainer";
+import { Design } from "../../config/design";
export class KillboxModel extends BaseContainerModel {
rectangle: PIXI.Rectangle;
diff --git a/src/lib/elements/basics/LineObject.ts b/src/lib/elements/basics/LineObject.ts
index 07f231849c4d30e35e57dd8ab045af0a2ade7f10..b21fc55b5313a4e417d55839bf7bc27812590bfb 100644
--- a/src/lib/elements/basics/LineObject.ts
+++ b/src/lib/elements/basics/LineObject.ts
@@ -1,5 +1,5 @@
-import {StraightLine} from "./StraightLine";
-import {QuadraticCurve} from "./QuadraticCurve";
-import {BezierLine} from "./BezierLine";
+import { StraightLine } from "./StraightLine";
+import { QuadraticCurve } from "./QuadraticCurve";
+import { BezierLine } from "./BezierLine";
export type LineObject = StraightLine | QuadraticCurve | BezierLine;
diff --git a/src/lib/elements/basics/QuadraticCurve.ts b/src/lib/elements/basics/QuadraticCurve.ts
index 2b0a0bb4b6c5522d347b6f45a3b72573c2792992..bd22c9ca70614d99a87d79a472923e15e7a8de9b 100644
--- a/src/lib/elements/basics/QuadraticCurve.ts
+++ b/src/lib/elements/basics/QuadraticCurve.ts
@@ -1,9 +1,9 @@
import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
-import {BaseGraphics} from "../../bases/elements/BaseGraphics";
-import {ControlPointsModel, StraightLinePointsModel} from "./StraightLine";
-import {Design} from "../../config/design";
-import {debounce} from "debounce";
+import { BaseGraphics, BaseGraphicsModel } from '../../bases/elements/BaseGraphics';
+import { ControlPointsModel, StraightLinePointsModel } from "./StraightLine";
+import { Design } from "../../config/design";
+import { debounce } from "debounce";
/**
* Quadratic curve points model
@@ -16,7 +16,7 @@ export class QuadraticCurvePointsModel extends StraightLinePointsModel {
/**
* Quadratic curve model
*/
-export class QuadraticCurveModel {
+export class QuadraticCurveModel extends BaseGraphicsModel {
points: QuadraticCurvePointsModel;
options: Models.ElementOptions;
lineWidth: number;
diff --git a/src/lib/elements/basics/Rectangle.ts b/src/lib/elements/basics/Rectangle.ts
index 60e6a3d8189bda3cd340b2adc5d2655360899b50..4db9d87653755bc6d053cd878a388d0d5e6f75f0 100644
--- a/src/lib/elements/basics/Rectangle.ts
+++ b/src/lib/elements/basics/Rectangle.ts
@@ -1,6 +1,6 @@
import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
-import {BaseGraphics, BaseGraphicsModel} from "../../bases/elements/BaseGraphics";
+import { BaseGraphics, BaseGraphicsModel } from "../../bases/elements/BaseGraphics";
/**
* Rectangle model
@@ -44,7 +44,7 @@ export class Rectangle extends BaseGraphics<RectangleModel> {
return;
}
- this.cacheAsBitmap = false;
+ // this.cacheAsBitmap = false;
this.clear();
@@ -58,7 +58,7 @@ export class Rectangle extends BaseGraphics<RectangleModel> {
this.drawRect(this.rectangle.x, this.rectangle.y, this.rectangle.width, this.rectangle.height);
this.endFill();
- this.cacheAsBitmap = true;
+ // this.cacheAsBitmap = true;
}
//<editor-fold desc="Getter and Setter">
diff --git a/src/lib/elements/basics/Sprite.ts b/src/lib/elements/basics/Sprite.ts
index 18f1b88d746452d6356042451edebe689846084b..1ad3c08cb65aae1c1c27676656242fb45b127da6 100644
--- a/src/lib/elements/basics/Sprite.ts
+++ b/src/lib/elements/basics/Sprite.ts
@@ -1,4 +1,4 @@
-import {BaseSprite, BaseSpriteModel} from "../../bases/elements/BaseSprite";
+import { BaseSprite, BaseSpriteModel } from "../../bases/elements/BaseSprite";
import { debounce } from 'debounce';
/**
diff --git a/src/lib/elements/basics/StraightLine.ts b/src/lib/elements/basics/StraightLine.ts
index b14a913874efc3031dfbecc7afceec93b2fd1ae1..b775ada25b31bf750b89ca78f7f61f5adadbbd10 100644
--- a/src/lib/elements/basics/StraightLine.ts
+++ b/src/lib/elements/basics/StraightLine.ts
@@ -1,8 +1,8 @@
import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
-import {BaseGraphics} from "../../bases/elements/BaseGraphics";
-import {Design} from "../../config/design";
-import {debounce} from "debounce";
+import { BaseGraphics, BaseGraphicsModel } from '../../bases/elements/BaseGraphics';
+import { Design } from "../../config/design";
+import { debounce } from "debounce";
/**
* Control points model
@@ -25,7 +25,7 @@ export class StraightLinePointsModel {
/**
* Straight line model
*/
-export class StraightLineModel {
+export class StraightLineModel extends BaseGraphicsModel {
points: StraightLinePointsModel;
options: Models.ElementOptions;
lineWidth: number;
@@ -102,7 +102,7 @@ export class StraightLine extends BaseGraphics<StraightLineModel> {
// TODO remove this.endFill();
// Hit area update
- /* TODO find better solution for this * /
+ /* TODO find better solution for this */
this.lineStyle(this.lineWidth + Design.line.hitboxLineWidthAddition, this.options.lineColor, 0.00000001);
this.moveTo(this.points.start.x, this.points.start.y);
this.lineTo(this.points.end.x, this.points.end.y);
@@ -120,6 +120,8 @@ export class StraightLine extends BaseGraphics<StraightLineModel> {
*/
public updateHitArea(): void {
if (!this._destroyed && this.geometry.graphicsData.length > 0) {
+ // @ts-ignore
+ // this.hitArea = new PIXI.Polygon(this.geometry.graphicsData[0].shape.points);
// @ts-ignore
this.hitArea = this.lineToPolygon(this.lineWidth * Design.line.hitboxLineWidthAddition, this.geometry.graphicsData[0].shape.points)
}
diff --git a/src/lib/elements/basics/Text.ts b/src/lib/elements/basics/Text.ts
index 76e01db8e58b262c815d8d8ad5b38d99390ddb3f..126c8188c9b7acca3c162452b4c93f3d2b0780f8 100644
--- a/src/lib/elements/basics/Text.ts
+++ b/src/lib/elements/basics/Text.ts
@@ -1,7 +1,7 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
-import {Design} from "../../config/design";
-import {BaseText, BaseTextModel} from "../../bases/elements/BaseText";
+import { BaseText, BaseTextModel } from "../../bases/elements/BaseText";
+import { Design } from "../../config/design";
/**
* Text model
@@ -15,25 +15,6 @@ export class TextModel extends BaseTextModel {
* Text
*/
export class Text extends BaseText<TextModel> {
- /**
- * Members
- */
- private _startTextIndex: number;
- private _endTextIndex: number;
- private _textSelection: boolean;
-
- /**
- * Interactions
- */
- private _writeInteraction: MedsurfDraw.WriteInteraction<Text>;
-
- /**
- * Methods
- */
- protected _copyMethod: any;
- protected _cutMethod: any;
- protected _pasteMethod: any;
-
/**
* Constructor
* @param model
@@ -41,184 +22,28 @@ export class Text extends BaseText<TextModel> {
public constructor(model: TextModel) {
// Parent constructor
super(model);
-
- // Members
- this.startTextIndex = this.data.text.length;
- this.endTextIndex = this.data.text.length;
- this.textSelection = false;
-
- //<editor-fold desc="Interactions">
- // -- Mode interaction
- this.modeInteraction.on('select_item', this._modeSelectItem, this);
- this.modeInteraction.on("remove-select_item", this._removeModeSelectItem, this);
- // -- Write interaction
- this.writeInteraction = new MedsurfDraw.WriteInteraction(this);
- this.writeInteraction.on("onText", this.onText, this);
- this.writeInteraction.on("endText", this.endText, this);
- //</editor-fold>
}
/**
* Init
*/
public init(): void {
- // Methods
- this._copyMethod = this.writeInteraction.onCopy.bind(this.writeInteraction);
- this._cutMethod = this.writeInteraction.onCut.bind(this.writeInteraction);
- this._pasteMethod = this.writeInteraction.onPaste.bind(this.writeInteraction);
-
// Sort items
this.sortChildren();
// On image zoom
- this.onImageZoom();
+ this.onImageZoom(1, 1);
}
- /**
- * Destroy
- * @param options
- */
- public destroy(options?: { children?: boolean; texture?: boolean; baseTexture?: boolean }): void {
- //<editor-fold desc="Interactions">
- // -- Mode interaction
- if (this.modeInteraction) {
- this.modeInteraction.off('select_item', this._modeSelectItem, this);
- this.modeInteraction.off("remove-select_item", this._removeModeSelectItem, this);
- }
- // -- Write interaction
- if (this.writeInteraction) {
- this.writeInteraction.off("onText", this.onText, this);
- this.writeInteraction.off("endText", this.endText, this);
- // TODO remove delete this.writeInteraction;
- }
- //</editor-fold>
-
- // Parent destroy
- super.destroy(options);
- }
-
- //<editor-fold desc="Mode">
- /**
- * Mode select item
- * @private
- */
- protected _modeSelectItem(): void {
- // Setup
- this.interactive = true;
-
- // Events
- // -- Keyboards
- MedsurfDraw.Keyboard.events.on("down", "onTextPrimitiveKeyDown", this.writeInteraction.onKeyDown.bind(this.writeInteraction));
- MedsurfDraw.Keyboard.events.on("pressed", "onTextPrimitiveKeyPress", this.writeInteraction.onKeyPressed.bind(this.writeInteraction));
- MedsurfDraw.Keyboard.events.on("released", "onTextPrimitiveKeyUp", this.writeInteraction.onKeyReleased.bind(this.writeInteraction));
- // -- Methods
- document.addEventListener("copy", this._copyMethod);
- document.addEventListener("cut", this._cutMethod);
- document.addEventListener("paste", this._pasteMethod);
-
- // Control update elements
- this.getImage().controlUpdateElements();
-
- // Show item
- this.showItem();
-
- // Emit
- this.emit("pointerover", new PIXI.InteractionEvent());
- }
-
- /**
- * Remove mode select item
- * @param parent
- * @param mode
- * @private
- */
- protected _removeModeSelectItem(parent: MedsurfDraw.ImageObject, mode: string): void {
- // Setup
- this.interactive = false;
-
- // Events
- // -- Keyboards
- MedsurfDraw.Keyboard.events.remove("down", "onTextPrimitiveKeyDown");
- MedsurfDraw.Keyboard.events.remove("pressed", "onTextPrimitiveKeyPress");
- MedsurfDraw.Keyboard.events.remove("released", "onTextPrimitiveKeyUp");
- // -- Methods
- document.removeEventListener("copy", this._copyMethod);
- document.removeEventListener("cut", this._cutMethod);
- document.removeEventListener("paste", this._pasteMethod);
-
- if (mode !== 'select_child' && !mode.startsWith('select_item') && mode !== 'delete') {
- // Set select layer
- if (this.parent instanceof MedsurfDraw.TextPrimitive || this.parent instanceof MedsurfDraw.LegendRow) {
- parent.emit("debounceControlSelectItem");
- }
- }
- }
- //</editor-fold>
-
- //<editor-fold desc="Control">
- /**
- * Control select item
- */
- public controlSelectItem(): void {
- // Set default mode for image children
- this.getImage().getImageObjects()
- .filter((imageObject) => imageObject !== this.parent.parent)
- .forEach((imageObject) => {
- imageObject.modeInteraction.setMode('blocked_item');
- });
-
- // Set default mode for parent
- if (this.parent instanceof MedsurfDraw.TextPrimitive) {
- this.parent.modeInteraction.setModeItem('select_child');
- }
- if (this.parent instanceof MedsurfDraw.LegendRow) {
- this.parent.modeInteraction.setModeItem('select_child')
- }
-
- // Set children mode
- this.modeInteraction.setModeChildren('select_parent');
-
- // Set select item
- this.modeInteraction.setModeItem('select_item');
- }
- //</editor-fold>
-
- //<editor-fold desc="Public function">
- /**
- * Select all text
- */
- public selectAllText(): void {
- this.writeInteraction.selectAllText();
- }
- //</editor-fold>
-
- //<editor-fold desc="Text">
- /**
- * On text
- * @param text
- */
- public onText(text: string): void {
- this.emit("onText", text);
- }
-
- /**
- * End text
- */
- public endText(): void {
- this.emit("endText");
- }
- //</editor-fold>
-
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Update resolution
- let resolution = Math.round(this.getImageScale().x);
+ let resolution = Math.round(scaleX);
if (resolution < Design.text.minResolution) {
resolution = Design.text.minResolution;
}
@@ -256,68 +81,4 @@ export class Text extends BaseText<TextModel> {
return this.rotation;
}
//</editor-fold>
-
- //<editor-fold desc="Getter and Setter">
-
-
- /**
- * Get start text index
- */
- public get startTextIndex(): number {
- return this._startTextIndex;
- }
-
- /**
- * Set start text index
- * @param value
- */
- public set startTextIndex(value: number) {
- this._startTextIndex = value;
- }
-
- /**
- * Get end text index
- */
- public get endTextIndex(): number {
- return this._endTextIndex;
- }
-
- /**
- * Set end text index
- * @param value
- */
- public set endTextIndex(value: number) {
- this._endTextIndex = value;
- }
-
- /**
- * Get text selection
- */
- public get textSelection(): boolean {
- return this._textSelection;
- }
-
- /**
- * Set text selection
- * @param value
- */
- public set textSelection(value: boolean) {
- this._textSelection = value;
- }
-
- /**
- * Get write interaction
- */
- public get writeInteraction(): MedsurfDraw.WriteInteraction<Text> {
- return this._writeInteraction;
- }
-
- /**
- * Set write interaction
- * @param value
- */
- public set writeInteraction(value: MedsurfDraw.WriteInteraction<Text>) {
- this._writeInteraction = value;
- }
- //</editor-fold>
}
\ No newline at end of file
diff --git a/src/lib/elements/basics/public-api.ts b/src/lib/elements/basics/public-api.ts
index 5c3b52a1d0a7652cd3176c8d32ba2a0e7ee1c56c..d4bd74c5c3b9d2ff1b78a28bb153c7f17509e4b2 100644
--- a/src/lib/elements/basics/public-api.ts
+++ b/src/lib/elements/basics/public-api.ts
@@ -3,6 +3,7 @@ export * from "./Arrow";
export * from "./BezierLine";
export * from "./Circle";
export * from "./Container";
+export * from "./EditableText";
export * from "./Ellipse";
export * from "./Killbox";
export * from "./LineObject";
diff --git a/src/lib/elements/buttons/ButtonElement.ts b/src/lib/elements/buttons/ButtonElement.ts
index f24717592da45484f14fbef492f1817b8f02a4b6..0716b9516f382246b980080ba9aa28600adb196e 100644
--- a/src/lib/elements/buttons/ButtonElement.ts
+++ b/src/lib/elements/buttons/ButtonElement.ts
@@ -2,12 +2,12 @@ import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
/**
* Button element model
*/
-export class ButtonElementModel extends BaseContainerModel {
+export class ButtonElementModel extends BaseContainerImageModel {
text: string;
description: string;
descriptionFontSize: number;
@@ -59,9 +59,6 @@ export class ButtonElement extends BaseContainer<ButtonElementModel> {
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onSelect, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onRelease, this.selectInteraction);
-
- // Update image zoom
- this.onImageZoom();
});
// -- Removed
this.on("removed", () => {
@@ -80,19 +77,21 @@ export class ButtonElement extends BaseContainer<ButtonElementModel> {
// Setup
this.interactive = true;
- let scale = this.getImageScale().x * Design.subMenu.scaleAspect;
+ /*
+ let scale = this.imageScale.x * Design.subMenu.scaleAspect;
let buttonWidth = this.rectangle.width;
let buttonHeight = this.rectangle.height;
buttonWidth = Math.floor(buttonWidth / scale);
buttonHeight = Math.floor(buttonHeight / scale);
- let fontSize = Math.floor(this.fontSize / scale);
+ */
+ let fontSize = this.fontSize;
if (fontSize < 1) {
fontSize = 1;
}
//<editor-fold desc="Elements">
// -- Rectangle element
this._rectangleElement = new MedsurfDraw.Rectangle({
- rectangle: new PIXI.Rectangle(0, 0, buttonWidth, buttonHeight),
+ rectangle: new PIXI.Rectangle(0, 0, this.rectangle.width, this.rectangle.height),
options: {hasLine: true, lineColor: Design.button.lineColor, lineAlpha: Design.button.lineAlpha, hasFill: true, fillColor: Design.button.fillColor, fillAlpha: Design.button.fillAlpha},
lineWidth: Design.button.lineWidth
});
@@ -118,18 +117,20 @@ export class ButtonElement extends BaseContainer<ButtonElementModel> {
* Draw
*/
public draw(): void {
- let scale = this.getImageScale().x * Design.subMenu.scaleAspect;
+ /*
+ let scale = this.imageScale.x * Design.subMenu.scaleAspect;
let buttonWidth = this.rectangle.width;
let buttonHeight = this.rectangle.height;
buttonWidth = Math.floor(buttonWidth / scale);
buttonHeight = Math.floor(buttonHeight / scale);
- let fontSize = Math.floor(this.fontSize / scale);
+ */
+ let fontSize = this.fontSize;
if (fontSize < 1) {
fontSize = 1;
}
//<editor-fold desc="Elements">
// -- Rectangle element
- this._rectangleElement.rectangle = new PIXI.Rectangle(0, 0, buttonWidth, buttonHeight);
+ this._rectangleElement.rectangle = new PIXI.Rectangle(0, 0, this.rectangle.width, this.rectangle.height);
this._rectangleElement.draw();
// -- Icon element
this._iconElement.style.fontSize = fontSize;
diff --git a/src/lib/elements/buttons/ColorButtonElement.ts b/src/lib/elements/buttons/ColorButtonElement.ts
index 36e8eb6ac54e99e239724ebe6f8baa60a1074e55..cc1f28c4d95f7e95fcf1a8e38f9a00725f9f0aee 100644
--- a/src/lib/elements/buttons/ColorButtonElement.ts
+++ b/src/lib/elements/buttons/ColorButtonElement.ts
@@ -1,13 +1,13 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
-import {BaseTilingSprite, BaseTilingSpriteModel} from "../../bases/elements/BaseTilingSprite";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
+import {BaseTilingSprite, BaseTilingSpriteImageModel} from "../../bases/elements/BaseTilingSprite";
/**
* Color button element model
*/
-export class ColorButtonElementModel extends BaseContainerModel {
+export class ColorButtonElementModel extends BaseContainerImageModel {
description: string;
descriptionFontSize: number;
loader: PIXI.Loader;
@@ -29,7 +29,7 @@ export class ColorButtonElement extends BaseContainer<ColorButtonElementModel> {
/**
* Elements
*/
- protected _transparentElement: BaseTilingSprite<BaseTilingSpriteModel>;
+ protected _transparentElement: BaseTilingSprite<BaseTilingSpriteImageModel>;
protected _colorElement: MedsurfDraw.Rectangle;
/**
@@ -86,7 +86,7 @@ export class ColorButtonElement extends BaseContainer<ColorButtonElementModel> {
//<editor-fold desc="Elements">
// -- Transparent element
- this._transparentElement = new BaseTilingSprite({texture});
+ this._transparentElement = new BaseTilingSprite({image: this.image, texture});
this._transparentElement.width = this.rectangle.width;
this._transparentElement.height = this.rectangle.height;
this.addChild(this._transparentElement);
diff --git a/src/lib/elements/buttons/IndexedRoundButtonElement.ts b/src/lib/elements/buttons/IndexedRoundButtonElement.ts
index a96872b5824997406190eaf8cbbcf2ca50ef1c44..acd78719d0d97506177d376a3f9c2cc9f82fdd3d 100644
--- a/src/lib/elements/buttons/IndexedRoundButtonElement.ts
+++ b/src/lib/elements/buttons/IndexedRoundButtonElement.ts
@@ -2,12 +2,12 @@ import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
/**
* Indexed Round button element model
*/
-export class IndexedRoundButtonElementModel extends BaseContainerModel {
+export class IndexedRoundButtonElementModel extends BaseContainerImageModel {
text: string;
description: string;
descriptionFontSize: number;
@@ -87,14 +87,16 @@ export class IndexedRoundButtonElement extends BaseContainer<IndexedRoundButtonE
// Setup
this.interactive = true;
- let scale = this.getImageScale().x * Design.roundButton.scaleAspect;
+ /*
+ let scale = this.imageScale.x * Design.roundButton.scaleAspect;
let buttonRadius = this.circle.radius;
buttonRadius = Math.floor(buttonRadius / scale);
- let lineWidth = Math.floor(Design.roundButton.lineWidth / scale);
+ */
+ let lineWidth = Design.roundButton.lineWidth;
if (lineWidth < Design.roundButton.minLineWidth) {
lineWidth = Design.roundButton.minLineWidth;
}
- let fontSize = Math.floor(this.fontSize / scale);
+ let fontSize = this.fontSize;
if (fontSize < Design.roundButton.minFontSize) {
fontSize = Design.roundButton.minFontSize;
}
@@ -115,7 +117,7 @@ export class IndexedRoundButtonElement extends BaseContainer<IndexedRoundButtonE
*/
// -- Circle element
this._circleElement = new MedsurfDraw.Circle({
- circle: new PIXI.Circle(0, 0, buttonRadius),
+ circle: new PIXI.Circle(0, 0, this.circle.radius),
options: this.options,
lineWidth: lineWidth
});
@@ -138,6 +140,7 @@ export class IndexedRoundButtonElement extends BaseContainer<IndexedRoundButtonE
this._circleElement.addChild(this._indexElement);
// -- Icon text mask element
this._iconTextMaskElement = new MedsurfDraw.IndexedRoundButtonMaskElement({
+ image: this.image,
textRectangle: this._textElement.getRectangle(),
indexRectangle: this._indexElement.getRectangle(),
});
@@ -156,14 +159,16 @@ export class IndexedRoundButtonElement extends BaseContainer<IndexedRoundButtonE
* Draw
*/
public draw(): void {
- let scale = this.getImageScale().x * Design.roundButton.scaleAspect;
+ /*
+ let scale = this.imageScale.x * Design.roundButton.scaleAspect;
let buttonRadius = this.circle.radius;
buttonRadius = Math.floor(buttonRadius / scale);
- let lineWidth = Math.floor(Design.roundButton.lineWidth / scale);
+ */
+ let lineWidth = Design.roundButton.lineWidth;
if (lineWidth < Design.roundButton.minLineWidth) {
lineWidth = Design.roundButton.minLineWidth;
}
- let fontSize = Math.floor(this.fontSize / scale);
+ let fontSize = this.fontSize;
if (fontSize < Design.roundButton.minFontSize) {
fontSize = Design.roundButton.minFontSize;
}
@@ -175,7 +180,7 @@ export class IndexedRoundButtonElement extends BaseContainer<IndexedRoundButtonE
this._blurElement.draw();
*/
// -- Circle element
- this._circleElement.circle = new PIXI.Circle(0, 0, buttonRadius);
+ this._circleElement.circle = new PIXI.Circle(0, 0, this.circle.radius);
this._circleElement.lineWidth = lineWidth;
this._circleElement.draw();
// -- Icon element
@@ -297,19 +302,6 @@ export class IndexedRoundButtonElement extends BaseContainer<IndexedRoundButtonE
}
//</editor-fold>
- //<editor-fold desc="ImageZoom">
- /**
- * On image zoom
- */
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
- // Draw
- this.emit("debounceDraw");
- }
- //</editor-fold>
-
//<editor-fold desc="Getter and Setter">
/**
* Get text
diff --git a/src/lib/elements/buttons/IndexedRoundButtonMaskElement.ts b/src/lib/elements/buttons/IndexedRoundButtonMaskElement.ts
index 82e6eb2c572b51acde056aa1251bba7e9ecec5bc..413fe2acfb19de6184a83a76822d4629af20fb99 100644
--- a/src/lib/elements/buttons/IndexedRoundButtonMaskElement.ts
+++ b/src/lib/elements/buttons/IndexedRoundButtonMaskElement.ts
@@ -1,12 +1,12 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseGraphics, BaseGraphicsModel} from "../../bases/elements/BaseGraphics";
+import {BaseGraphics, BaseGraphicsImageModel} from "../../bases/elements/BaseGraphics";
/**
* Indexed Round button mask element model
*/
-export class IndexedRoundButtonMaskElementModel extends BaseGraphicsModel {
+export class IndexedRoundButtonMaskElementModel extends BaseGraphicsImageModel {
textRectangle: PIXI.Rectangle;
indexRectangle: PIXI.Rectangle;
}
@@ -89,11 +89,10 @@ export class IndexedRoundButtonMaskElement extends BaseGraphics<IndexedRoundButt
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Draw
this.emit("debounceDraw");
}
diff --git a/src/lib/elements/buttons/RoundButtonElement.ts b/src/lib/elements/buttons/RoundButtonElement.ts
index a1594b936975a8f2c00d89d4dba7ab90784034ab..f4329a7494c6e8f6f64339fad2c9a73836674de7 100644
--- a/src/lib/elements/buttons/RoundButtonElement.ts
+++ b/src/lib/elements/buttons/RoundButtonElement.ts
@@ -2,12 +2,12 @@ import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
/**
* Round button element model
*/
-export class RoundButtonElementModel extends BaseContainerModel {
+export class RoundButtonElementModel extends BaseContainerImageModel {
text: string;
description: string;
descriptionFontSize: number;
@@ -84,14 +84,16 @@ export class RoundButtonElement extends BaseContainer<RoundButtonElementModel> {
// Setup
this.interactive = true;
- let scale = this.getImageScale().x * Design.roundButton.scaleAspect;
+ /*
+ let scale = this.imageScale.x * Design.roundButton.scaleAspect;
let buttonRadius = this.circle.radius;
buttonRadius = Math.floor(buttonRadius / scale);
- let lineWidth = Math.floor(Design.roundButton.lineWidth / scale);
+ */
+ let lineWidth = Design.roundButton.lineWidth;
if (lineWidth < Design.roundButton.minLineWidth) {
lineWidth = Design.roundButton.minLineWidth;
}
- let fontSize = Math.floor(this.fontSize / scale);
+ let fontSize = this.fontSize
if (fontSize < Design.roundButton.minFontSize) {
fontSize = Design.roundButton.minFontSize;
}
@@ -112,7 +114,7 @@ export class RoundButtonElement extends BaseContainer<RoundButtonElementModel> {
*/
// -- Circle element
this._circleElement = new MedsurfDraw.Circle({
- circle: new PIXI.Circle(0, 0, buttonRadius),
+ circle: new PIXI.Circle(0, 0, this.circle.radius),
options: this.options,
lineWidth: lineWidth
});
@@ -138,14 +140,16 @@ export class RoundButtonElement extends BaseContainer<RoundButtonElementModel> {
* Draw
*/
public draw(): void {
- let scale = this.getImageScale().x * Design.roundButton.scaleAspect;
+ /*
+ let scale = this.imageScale.x * Design.roundButton.scaleAspect;
let buttonRadius = this.circle.radius;
buttonRadius = Math.floor(buttonRadius / scale);
- let lineWidth = Math.floor(Design.roundButton.lineWidth / scale);
+ */
+ let lineWidth = Design.roundButton.lineWidth;
if (lineWidth < Design.roundButton.minLineWidth) {
lineWidth = Design.roundButton.minLineWidth;
}
- let fontSize = Math.floor(this.fontSize / scale);
+ let fontSize = this.fontSize;
if (fontSize < Design.roundButton.minFontSize) {
fontSize = Design.roundButton.minFontSize;
}
@@ -157,7 +161,7 @@ export class RoundButtonElement extends BaseContainer<RoundButtonElementModel> {
this._blurElement.draw();
*/
// -- Circle element
- this._circleElement.circle = new PIXI.Circle(0, 0, buttonRadius);
+ this._circleElement.circle = new PIXI.Circle(0, 0, this.circle.radius);
this._circleElement.lineWidth = lineWidth;
this._circleElement.draw();
// -- Icon element
@@ -262,19 +266,6 @@ export class RoundButtonElement extends BaseContainer<RoundButtonElementModel> {
}
//</editor-fold>
- //<editor-fold desc="ImageZoom">
- /**
- * On image zoom
- */
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
- // Draw
- this.emit("debounceDraw");
- }
- //</editor-fold>
-
//<editor-fold desc="Getter and Setter">
/**
* Get text
diff --git a/src/lib/elements/buttons/RoundButtonIndicatorElement.ts b/src/lib/elements/buttons/RoundButtonIndicatorElement.ts
index a2d3dff0c4fc436e325234918fcc807f9a65dfe1..b2d22f114bb6aa64346937e18d9aa4ae9422b26e 100644
--- a/src/lib/elements/buttons/RoundButtonIndicatorElement.ts
+++ b/src/lib/elements/buttons/RoundButtonIndicatorElement.ts
@@ -2,12 +2,12 @@ import * as PIXI from "pixi.js-legacy";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
/**
* Round button indicator element model
*/
-export class RoundButtonIndicatorElementModel extends BaseContainerModel {
+export class RoundButtonIndicatorElementModel extends BaseContainerImageModel {
circle?: PIXI.Circle;
options?: Models.ElementOptions;
lineWidth?: number;
@@ -44,10 +44,12 @@ export class RoundButtonIndicatorElement extends BaseContainer<RoundButtonIndica
// Setup
this.interactive = true;
- let scale = this.getImageScale().x * Design.roundButtonIndicatorElement.scaleAspect;
+ /*
+ let scale = this.imageScale.x * Design.roundButtonIndicatorElement.scaleAspect;
let buttonRadius = this.circle.radius;
buttonRadius = Math.floor(buttonRadius / scale);
- let lineWidth = Math.floor(this.lineWidth / scale);
+ */
+ let lineWidth = this.lineWidth;
if (lineWidth < Design.roundButtonIndicatorElement.minLineWidth) {
lineWidth = Design.roundButtonIndicatorElement.minLineWidth;
}
@@ -56,7 +58,7 @@ export class RoundButtonIndicatorElement extends BaseContainer<RoundButtonIndica
this._arcElement = new MedsurfDraw.Arc({
center: new PIXI.Point(0, 0),
options: this.options,
- radius: buttonRadius,
+ radius: this.circle.radius,
lineWidth: lineWidth,
});
this._arcElement.angle = 225;
@@ -74,16 +76,18 @@ export class RoundButtonIndicatorElement extends BaseContainer<RoundButtonIndica
* Draw
*/
public draw(): void {
- let scale = this.getImageScale().x * Design.roundButtonIndicatorElement.scaleAspect;
+ /*
+ let scale = this.imageScale.x * Design.roundButtonIndicatorElement.scaleAspect;
let buttonRadius = this.circle.radius;
buttonRadius = Math.floor(buttonRadius / scale);
- let lineWidth = Math.floor(this.lineWidth / scale);
+ */
+ let lineWidth = this.lineWidth;
if (lineWidth < Design.roundButtonIndicatorElement.minLineWidth) {
lineWidth = Design.roundButtonIndicatorElement.minLineWidth;
}
//<editor-fold desc="Elements">
// -- Arc element
- this._arcElement.radius = buttonRadius;
+ this._arcElement.radius = this.circle.radius;
this._arcElement.lineWidth = lineWidth;
this._arcElement.draw();
//</editor-fold>
@@ -105,19 +109,6 @@ export class RoundButtonIndicatorElement extends BaseContainer<RoundButtonIndica
super.destroy(options);
}
- //<editor-fold desc="ImageZoom">
- /**
- * On image zoom
- */
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
- // Draw
- this.emit("debounceDraw");
- }
- //</editor-fold>
-
//<editor-fold desc="Getter and Setter">
/**
* Get circle
diff --git a/src/lib/elements/colors/AlphaSliderElement.ts b/src/lib/elements/colors/AlphaSliderElement.ts
index 2758997e2ed924deb59eb5c416aae981784a6b75..2ddab220d613874af4b2e32a47e656cf3e7b3cb5 100644
--- a/src/lib/elements/colors/AlphaSliderElement.ts
+++ b/src/lib/elements/colors/AlphaSliderElement.ts
@@ -1,11 +1,10 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
-import {BaseTilingSprite, BaseTilingSpriteModel} from "../../bases/elements/BaseTilingSprite";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
+import {BaseTilingSprite, BaseTilingSpriteImageModel} from "../../bases/elements/BaseTilingSprite";
-export class AlphaSliderElementModel extends BaseContainerModel {
- loader: PIXI.Loader;
+export class AlphaSliderElementModel extends BaseContainerImageModel {
color: number | undefined;
colorAlpha: number | undefined;
squareWidth: number = 20;
@@ -30,7 +29,7 @@ export class AlphaSliderElement extends BaseContainer<AlphaSliderElementModel> {
/**
* Elements
*/
- protected _transparentElement: BaseTilingSprite<BaseTilingSpriteModel>;
+ protected _transparentElement: BaseTilingSprite<BaseTilingSpriteImageModel>;
protected _backgroundElement: PIXI.Sprite;
protected _borderElement: MedsurfDraw.Rectangle;
protected _sliderElement: MedsurfDraw.Rectangle;
@@ -85,7 +84,7 @@ export class AlphaSliderElement extends BaseContainer<AlphaSliderElementModel> {
//<editor-fold desc="Elements">
// -- Transparent element
- this._transparentElement = new BaseTilingSprite({texture});
+ this._transparentElement = new BaseTilingSprite({image: this.image, texture});
this._transparentElement.width = this.squareWidth;
this._transparentElement.height = this.squareHeight;
this.addChild(this._transparentElement);
@@ -219,7 +218,7 @@ export class AlphaSliderElement extends BaseContainer<AlphaSliderElementModel> {
public onStartMove(event: PIXI.InteractionEvent): void {
const globalPosition = this.getGlobalPosition();
- this._sliderElement.position.x = Math.floor(event.data.global.x - globalPosition.x) / this.getImageScale().x;
+ this._sliderElement.position.x = Math.floor(event.data.global.x - globalPosition.x) / this.imageScale.x;
if (this._sliderElement.position.x < 0) {
this._sliderElement.position.x = 0;
}
@@ -254,15 +253,7 @@ export class AlphaSliderElement extends BaseContainer<AlphaSliderElementModel> {
* Get loader
*/
public get loader(): PIXI.Loader {
- return this.data.loader;
- }
-
- /**
- * Set loader
- * @param value
- */
- public set loader(value: PIXI.Loader) {
- this.data.loader = value;
+ return this.image.loader;
}
/**
diff --git a/src/lib/elements/colors/ColorElement.ts b/src/lib/elements/colors/ColorElement.ts
index 1b1f94606e7c9842036a3e0670c52c640b1337b1..98c7205f9f4ccec3ccd299ffa827f005bda75b1e 100644
--- a/src/lib/elements/colors/ColorElement.ts
+++ b/src/lib/elements/colors/ColorElement.ts
@@ -1,12 +1,12 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
/**
* Color element model
*/
-export class ColorElementModel extends BaseContainerModel {
+export class ColorElementModel extends BaseContainerImageModel {
rectangle: PIXI.Rectangle = new PIXI.Rectangle(0, 0, 20, 20);
color: number | undefined;
colorAlpha: number | undefined;
@@ -48,6 +48,7 @@ export class ColorElement extends BaseContainer<ColorElementModel> {
//<editor-fold desc="Elements">
// -- Color square element
this._colorSquareElement = new MedsurfDraw.ColorSquareElement({
+ image: this.image,
color: 0x000000,
squareWidth: Design.colorElement.buttonWidth * Design.colorSquareElement.squareWidthAspect,
squareHeight: Design.colorElement.buttonWidth * Design.colorSquareElement.squareWidthAspect
@@ -56,7 +57,7 @@ export class ColorElement extends BaseContainer<ColorElementModel> {
this.addChild(this._colorSquareElement);
// -- Alpha slider element
this._alphaSliderElement = new MedsurfDraw.AlphaSliderElement({
- loader: this.getImage().loader,
+ image: this.image,
color: 0x000000,
colorAlpha: 0,
squareWidth: Design.colorElement.buttonWidth * Design.alphaSliderElement.squareWidthAspect,
@@ -66,6 +67,7 @@ export class ColorElement extends BaseContainer<ColorElementModel> {
this.addChild(this._alphaSliderElement);
// -- Color clear button element
this._colorClearButtonElement = new MedsurfDraw.ButtonElement({
+ image: this.image,
text: '\uf5c7',
description: "Farbe löschen",
descriptionFontSize: 6,
@@ -76,6 +78,7 @@ export class ColorElement extends BaseContainer<ColorElementModel> {
this.addChild(this._colorClearButtonElement);
// -- Color slider element
this._colorSliderElement = new MedsurfDraw.ColorSliderElement({
+ image: this.image,
color: 0x000000,
squareWidth: Design.colorElement.buttonWidth * Design.colorSliderElement.squareWidthAspect,
squareHeight: Design.colorElement.buttonWidth,
@@ -84,9 +87,9 @@ export class ColorElement extends BaseContainer<ColorElementModel> {
this.addChild(this._colorSliderElement);
// -- Color palette element
this._colorPaletteElement = new MedsurfDraw.ColorPaletteElement({
+ image: this.image,
description: "Farbe wählen",
descriptionFontSize: 6,
- loader: this.getImage().loader,
localStorageKey: 'medsurf'
});
this._colorPaletteElement.on("color", this.onPaletteColor, this);
diff --git a/src/lib/elements/colors/ColorPaletteElement.ts b/src/lib/elements/colors/ColorPaletteElement.ts
index 294ea2b24156dc3a60d98c2f851b764afc50521e..eb101a908182b1e341f830d97a433db176e3d702 100644
--- a/src/lib/elements/colors/ColorPaletteElement.ts
+++ b/src/lib/elements/colors/ColorPaletteElement.ts
@@ -1,12 +1,11 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
-export class ColorPaletteElementModel extends BaseContainerModel {
+export class ColorPaletteElementModel extends BaseContainerImageModel {
description: string;
descriptionFontSize: number;
- loader: PIXI.Loader;
localStorageKey: string;
}
@@ -57,6 +56,7 @@ export class ColorPaletteElement extends BaseContainer<ColorPaletteElementModel>
this._presetButtons = [];
Design.colorPaletteElement.presetColors.forEach((color: number) => {
const colorButtonElement = new MedsurfDraw.ColorButtonElement({
+ image: this.image,
description: this.description,
descriptionFontSize: this.descriptionFontSize,
loader: this.loader,
@@ -162,6 +162,7 @@ export class ColorPaletteElement extends BaseContainer<ColorPaletteElementModel>
const colorAlpha = parseFloat(parts[3]);
const colorButtonElement = new MedsurfDraw.ColorButtonElement({
+ image: this.image,
description: this.description,
descriptionFontSize: this.descriptionFontSize,
loader: this.loader,
@@ -233,15 +234,7 @@ export class ColorPaletteElement extends BaseContainer<ColorPaletteElementModel>
* Get loader
*/
public get loader(): PIXI.Loader {
- return this.data.loader;
- }
-
- /**
- * Set loader
- * @param value
- */
- public set loader(value: PIXI.Loader) {
- this.data.loader = value;
+ return this.image.loader;
}
/**
diff --git a/src/lib/elements/colors/ColorSliderElement.ts b/src/lib/elements/colors/ColorSliderElement.ts
index 25817078060456646db8b45e4ad3a09e0bc26e7d..4cf4295192e3de0a05b637e72d4cf0b9169759fa 100644
--- a/src/lib/elements/colors/ColorSliderElement.ts
+++ b/src/lib/elements/colors/ColorSliderElement.ts
@@ -1,12 +1,12 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
/**
* Color slider element model
*/
-export class ColorSliderElementModel extends BaseContainerModel {
+export class ColorSliderElementModel extends BaseContainerImageModel {
color: number | undefined;
squareWidth: number = 20;
squareHeight: number = 20;
@@ -211,7 +211,7 @@ export class ColorSliderElement extends BaseContainer<ColorSliderElementModel> {
// @ts-ignore TODO ignore
const globalPosition = this.getGlobalPosition();
- this._sliderElement.position.x = Math.floor(event.data.global.y - globalPosition.y) / this.getImageScale().x;
+ this._sliderElement.position.x = Math.floor(event.data.global.y - globalPosition.y) / this.imageScale.x;
// Elements
// -- Slider element
if (this._sliderElement.position.x < 0) {
@@ -232,9 +232,9 @@ export class ColorSliderElement extends BaseContainer<ColorSliderElementModel> {
* @param dY
*/
public onMove(event: PIXI.InteractionEvent, dX: number, dY: number): void {
- const scale = this.getImageScale();
+ const scale = this.imageScale;
- this._sliderElement.position.x += dY * scale.x / this.getImageScale().x;
+ this._sliderElement.position.x += dY * scale.x / this.imageScale.x;
if (this._sliderElement.position.x < 0) {
this._sliderElement.position.x = 0;
}
diff --git a/src/lib/elements/colors/ColorSquareElement.ts b/src/lib/elements/colors/ColorSquareElement.ts
index ed9b7a7c1fabf69bea795638c7812a2192d380c8..f8b191843a31c548bc219d50ca9121a3e5cfe4b1 100644
--- a/src/lib/elements/colors/ColorSquareElement.ts
+++ b/src/lib/elements/colors/ColorSquareElement.ts
@@ -1,9 +1,9 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
-export class ColorSquareElementModel extends BaseContainerModel {
+export class ColorSquareElementModel extends BaseContainerImageModel {
color: number | undefined;
squareWidth: number = 20;
squareHeight: number = 20;
@@ -200,7 +200,7 @@ export class ColorSquareElement extends BaseContainer<ColorSquareElementModel> {
// @ts-ignore TODO ignore
const globalPosition = this.getGlobalPosition();
- this._pointElement.position.x = Math.floor(event.data.global.x - globalPosition.x) / this.getImageScale().x;
+ this._pointElement.position.x = Math.floor(event.data.global.x - globalPosition.x) / this.imageScale.x;
if (this._pointElement.position.x < 0) {
this._pointElement.position.x = 0;
}
@@ -208,7 +208,7 @@ export class ColorSquareElement extends BaseContainer<ColorSquareElementModel> {
this._pointElement.position.x = this.squareWidth - 1;
}
- this._pointElement.position.y = Math.floor(event.data.global.y - globalPosition.y) / this.getImageScale().x;
+ this._pointElement.position.y = Math.floor(event.data.global.y - globalPosition.y) / this.imageScale.x;
if (this._pointElement.position.y < 0) {
this._pointElement.position.y = 0;
}
@@ -226,7 +226,7 @@ export class ColorSquareElement extends BaseContainer<ColorSquareElementModel> {
* @param dY
*/
public onMove(event: PIXI.InteractionEvent, dX: number, dY: number): void {
- const scale = this.getImageScale();
+ const scale = this.imageScale;
this._pointElement.position.x += dX; // * scale.x / this.getImageScale().x;
if (this._pointElement.position.x < 0) {
diff --git a/src/lib/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts
index 0672513cb43127a65545ca3c07d409ac33b82205..8a250ae8bd326a8a32e2b4b1aad6047f9b3bf0ca 100644
--- a/src/lib/elements/connections/Line.ts
+++ b/src/lib/elements/connections/Line.ts
@@ -104,11 +104,12 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
/**
* Constructor
+ * @param image
* @param model
*/
- public constructor(model: Models.Line) {
+ public constructor(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.Line) {
// Parent constructor
- super({model});
+ super({image, model});
// Members
this.start = null;
@@ -199,7 +200,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
*/
public init(): void {
// Get image
- const image = this.getImage();
+ const image = this.image;
// Members
this.start = image.getChildByName(this.model.start) as BaseElementContainer<Models.ImageObject, BaseElementContainerModel<Models.ImageObject>>;
@@ -233,13 +234,15 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
//<editor-fold desc="Elements">
// -- Line corner element
this._lineCornerElement = new MedsurfDraw.LineCorner({
+ image: this.image,
points: undefined,
options: Object.assign({}, this.model.options),
- lineWidth: Math.round(this.model.strokeWidth * this.getImageDimensions().width * 100) / 100,
+ lineWidth: Math.round(this.model.strokeWidth * this.imageDimensions.width * 100) / 100,
});
this.addChild(this._lineCornerElement);
// -- Line control point element
this._lineControlPointElement = new MedsurfDraw.LineControlPoint({
+ image: this.image,
points: undefined,
options: {
hasLine: true,
@@ -260,9 +263,10 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -278,9 +282,10 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -288,9 +293,10 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -310,9 +316,10 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -328,9 +335,10 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -346,9 +354,10 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -364,9 +373,10 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -528,7 +538,8 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
}
}
catch (e) {
- this.emit("debounceDraw");
+ // Stop drawing with 2 sec selfheal
+ this.stopDrawing(2000);
}
}
// -- Line corner element
@@ -654,15 +665,17 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
//<editor-fold desc="Static functions">
/**
* Get instance
+ * @param image
* @param startPositionPoint
* @param endPositionPoint
* @param bezierCourve
* @param imageWidth
*/
- public static getInstance(startPositionPoint: string, endPositionPoint: string, bezierCourve: boolean, imageWidth: number): Line {
+ public static getInstance(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, startPositionPoint: string,
+ endPositionPoint: string, bezierCourve: boolean, imageWidth: number): Line {
// Element
// -- Line
- return new Line({
+ return new Line(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.LINE,
@@ -701,7 +714,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
const model = {
points: points,
options: Object.assign({}, this.model.options),
- lineWidth: Math.round(this.model.strokeWidth * this.getImageDimensions().width * 100) / 100,
+ lineWidth: Math.round(this.model.strokeWidth * this.imageDimensions.width * 100) / 100,
};
switch (this.type) {
case LineTypes.LINEAR:
@@ -733,7 +746,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
// Prevent error when positionPoint was deleted
if (!this.start.destroyed && !this.end.destroyed) {
// Send an error to the nav
- this.getImage().sendError(e);
+ this.image.sendError(e);
}
// TODO delete when no start or end ???
@@ -749,7 +762,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.controlEnd = null;
if (this.model.isBezier) {
- const image = this.getImage();
+ const image = this.image;
let startLines: MedsurfDraw.Line[] = [];
if (this.start instanceof MedsurfDraw.PositionPoint) {
@@ -1391,7 +1404,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
}
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -1433,7 +1446,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
// TODO remove console.log("line _removeModeSelectItem", mode);
if (mode === 'author') {
- this.emit("debounceControlUnselectItem", this.getImage());
+ this.emit("debounceControlUnselectItem", this.image);
// this.controlUnselectItem();
}
/* TODO remove
@@ -1596,7 +1609,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
* @private
*/
protected _modeDelete(): void {
- const image = this.getImage();
+ const image = this.image;
if (image) {
// Select layer group
@@ -1648,7 +1661,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editImageObject(this.model);
+ this.image.editImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -1660,10 +1673,10 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.model.zIndex++;
this.zIndex = Design.line.zIndexDefault + this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
/**
@@ -1674,10 +1687,10 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.model.zIndex--;
this.zIndex = Design.line.zIndexDefault + this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Delete">
@@ -1705,10 +1718,10 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().degroupLayerGroupImageObject(this.model);
+ this.image.degroupLayerGroupImageObject(this.model);
if (unselectElement) {
- this.getImage().unselectLayerGroup();
- this.getImage().selectImageObject(this.model);
+ this.image.unselectLayerGroup();
+ this.image.selectImageObject(this.model);
}
}
//</editor-fold>
@@ -1721,7 +1734,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.collapseAllMenus(new PIXI.InteractionEvent());
// Copy image object
- this.getImage().copyImageObject(this.model);
+ this.image.copyImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Clipboard">
@@ -1733,7 +1746,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.collapseAllMenus(new PIXI.InteractionEvent());
// Clipboard image object
- this.getImage().clipboardImageObject(this.model);
+ this.image.clipboardImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Bezier">
@@ -1748,7 +1761,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.emit("debounceDraw");
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Color">
@@ -1776,7 +1789,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.emit("debounceDraw");
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
}
//</editor-fold>
@@ -1789,12 +1802,12 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
public onNumber(mode: NumberMode, number: number): void {
if (mode === NumberMode.WIDTH) {
// Update model
- this.model.strokeWidth = number / this.getImageDimensions().width;
+ this.model.strokeWidth = number / this.imageDimensions.width;
// Elements
// -- Line element
if (this._lineElement) {
- this._lineElement.lineWidth = Math.round(this.model.strokeWidth * this.getImageDimensions().width * 100) / 100;
+ this._lineElement.lineWidth = Math.round(this.model.strokeWidth * this.imageDimensions.width * 100) / 100;
}
// Draw
@@ -1802,7 +1815,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
// Emits
this.emit("onBackgroundNumber");
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
}
//</editor-fold>
@@ -1818,7 +1831,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.emit("debounceDraw");
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Static">
@@ -1833,7 +1846,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.emit("debounceDraw");
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Middle point">
@@ -1909,20 +1922,20 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
}
// Get image
- const img = this.getImage();
+ const img = this.image;
// Get image width
- const imageWidth = img.getImageDimensions().width;
+ const imageWidth = img.imageDimensions.width;
// Create new position point
- const positionPoint = MedsurfDraw.PositionPoint.getInstance();
+ const positionPoint = MedsurfDraw.PositionPoint.getInstance(this.image);
positionPoint.model.position.x = posX / imageWidth;
positionPoint.model.position.y = posY / imageWidth;
img.addChild(positionPoint);
positionPoint.modeInteraction.setDefaultMode("author");
// Create new start line
- const startLine = MedsurfDraw.Line.getInstance(this.start.model.id as string, positionPoint.model.id as string, this.model.isBezier, imageWidth);
+ const startLine = MedsurfDraw.Line.getInstance(img, this.start.model.id as string, positionPoint.model.id as string, this.model.isBezier, imageWidth);
startLine.model.isStatic = this.model.isStatic;
startLine.model.interactWithLines = this.model.interactWithLines;
startLine.model.strokeWidth = this.model.strokeWidth;
@@ -1932,7 +1945,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
startLine.modeInteraction.setDefaultMode("author");
// Create new end line
- const endLine = MedsurfDraw.Line.getInstance(positionPoint.model.id as string, this.end.model.id as string, this.model.isBezier, imageWidth);
+ const endLine = MedsurfDraw.Line.getInstance(img, positionPoint.model.id as string, this.end.model.id as string, this.model.isBezier, imageWidth);
endLine.model.isStatic = this.model.isStatic;
endLine.model.interactWithLines = this.model.interactWithLines;
endLine.model.strokeWidth = this.model.strokeWidth;
@@ -1988,7 +2001,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
}
// Update fill collections
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((child: MedsurfDraw.ImageObject) => child instanceof MedsurfDraw.FillCollection)
.forEach((child) => {
let fillCollection = child as MedsurfDraw.FillCollection;
@@ -2000,7 +2013,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
});
// Remove and add selftest items
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((child: MedsurfDraw.ImageObject) => child instanceof MedsurfDraw.PositionPoint
|| child instanceof MedsurfDraw.FillCollection || child instanceof MedsurfDraw.LegendCollection)
.forEach((imageObject) => {
@@ -2046,7 +2059,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
})
// Emits
- this.getImage().deleteImageObject(this.model);
+ this.image.deleteImageObject(this.model);
// Cleanup current line
this.onButtonDelete(new PIXI.InteractionEvent());
@@ -2063,7 +2076,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
*/
public controlSelectItem(): void {
// Emits
- this.getImage().selectImageObject(this.model);
+ this.image.selectImageObject(this.model);
// Select item
this.externControlSelectItem();
@@ -2089,7 +2102,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
*/
public externControlSelectItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this)
.forEach((imageObject) => {
imageObject.modeInteraction.setMode('blocked_item');
@@ -2126,7 +2139,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
*/
public controlUnselectLayerGroup(): void {
// Emits
- this.getImage().unselectLayerGroup();
+ this.image.unselectLayerGroup();
}
/**
@@ -2146,7 +2159,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
*/
public controlCloneItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this && !imageObject.modeInteraction.lastMode.startsWith('clone'))
.forEach((imageObject) => {
imageObject.modeInteraction.setMode('blocked_item');
@@ -2188,7 +2201,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
*/
public startMove(): void {
// Emit startMove for connected lines
- const image = this.getImage();
+ const image = this.image;
// Get start lines
let startLines: Line[] = [];
@@ -2221,7 +2234,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
this.onPointUpdate();
// Emit onPointUpdate for connected lines
- const image = this.getImage();
+ const image = this.image;
// Get start lines
let startLines: Line[] = [];
if (this.start instanceof MedsurfDraw.PositionPoint) {
@@ -2246,7 +2259,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
*/
public endMove(): void {
// Emit endMove for connected lines
- const image = this.getImage();
+ const image = this.image;
// Get start lines
let startLines: Line[] = [];
if (this.start instanceof MedsurfDraw.PositionPoint) {
@@ -2346,7 +2359,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
if (lastMode === 'select_layer_group') {
this.controlSelectItem();
} else {
- if (!this.controlSelectLayerGroup(this.getImage()) && !preventSelectItem) {
+ if (!this.controlSelectLayerGroup(this.image) && !preventSelectItem) {
this.controlSelectItem();
}
}
diff --git a/src/lib/elements/connections/LineControlPoint.ts b/src/lib/elements/connections/LineControlPoint.ts
index 376c1ac85bf6cb72474867f3bdfa2f216ed026d9..f24cfaa7371e3408f1e5348e81f3bbd9cdc590a1 100644
--- a/src/lib/elements/connections/LineControlPoint.ts
+++ b/src/lib/elements/connections/LineControlPoint.ts
@@ -1,11 +1,11 @@
import * as Models from "@ascii-dev-user/medsurf-lib/models";
-import {BaseGraphics, BaseGraphicsModel} from "../../bases/elements/BaseGraphics";
+import {BaseGraphics, BaseGraphicsImageModel} from "../../bases/elements/BaseGraphics";
import {StraightLinePointsModel, BezierLinePointsModel, QuadraticCurvePointsModel} from "../../public-api";
/**
* Line control point model
*/
-export class LineControlPointModel extends BaseGraphicsModel {
+export class LineControlPointModel extends BaseGraphicsImageModel {
points: StraightLinePointsModel | QuadraticCurvePointsModel | BezierLinePointsModel | undefined;
options: Models.ElementOptions;
lineWidth: number;
diff --git a/src/lib/elements/connections/LineCorner.ts b/src/lib/elements/connections/LineCorner.ts
index d1bae3dac48f3bf602e5392b4711fca5bc4f3607..204989f173cf96a2fdf782d62aa9d4746bfbc01e 100644
--- a/src/lib/elements/connections/LineCorner.ts
+++ b/src/lib/elements/connections/LineCorner.ts
@@ -1,11 +1,11 @@
import * as Models from "@ascii-dev-user/medsurf-lib/models";
import * as MedsurfDraw from "../../public-api";
-import {BaseGraphics, BaseGraphicsModel} from "../../bases/elements/BaseGraphics";
+import {BaseGraphics, BaseGraphicsImageModel} from "../../bases/elements/BaseGraphics";
/**
* Line corner model
*/
-export class LineCornerModel extends BaseGraphicsModel {
+export class LineCornerModel extends BaseGraphicsImageModel {
points: MedsurfDraw.StraightLinePointsModel | MedsurfDraw.QuadraticCurvePointsModel | MedsurfDraw.BezierLinePointsModel | undefined;
options: Models.ElementOptions;
lineWidth: number
diff --git a/src/lib/elements/controls/MultiSelectItemElement.ts b/src/lib/elements/controls/MultiSelectItemElement.ts
index 768cce08ab13e8b1124eba09fb679741dcfc053d..09d0e0c1ce612230312bb453d9e377a925ce153e 100644
--- a/src/lib/elements/controls/MultiSelectItemElement.ts
+++ b/src/lib/elements/controls/MultiSelectItemElement.ts
@@ -1,13 +1,12 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
import {Design} from "../../config/design";
/**
* Multi select item model
*/
-export class MultiSelectItemModel extends BaseContainerModel {
- image: MedsurfDraw.Image
+export class MultiSelectItemModel extends BaseContainerImageModel {
}
/**
@@ -18,7 +17,6 @@ export class MultiSelectItemElement extends BaseContainer<MultiSelectItemModel>
/**
* Members
*/
- private _image: MedsurfDraw.Image;
private _displayObjects: MedsurfDraw.ImageObject[];
/**
@@ -36,7 +34,6 @@ export class MultiSelectItemElement extends BaseContainer<MultiSelectItemModel>
super(model);
// Members
- this.image = this.data.image;
this.displayObjects = [];
// Setup
@@ -299,55 +296,7 @@ export class MultiSelectItemElement extends BaseContainer<MultiSelectItemModel>
}
//</editor-fold>
- //<editor-fold desc="BaseContrainer">
- /**
- * Get canvas
- */
- public getCanvas(): HTMLCanvasElement {
- return this.image.getCanvas();
- }
-
- /**
- * Get image
- */
- public getImage(): MedsurfDraw.Image {
- return this.image.getImage();
- }
-
- /**
- * Get image scale
- */
- public getImageScale(): PIXI.IPoint {
- if (!this.image) {
- return new PIXI.Point(0, 0);
- }
- return this.image.getImageScale();
- }
-
- /**
- * Get image dimensions
- */
- public getImageDimensions(): MedsurfDraw.Dimensions {
- return this.image.getImageDimensions();
- }
- //</editor-fold>
-
//<editor-fold desc="Getter and Setter">
- /**
- * Get imgae
- */
- public get image(): MedsurfDraw.Image {
- return this._image;
- }
-
- /**
- * Set image
- * @param value
- */
- public set image(value: MedsurfDraw.Image) {
- this._image = value;
- }
-
/**
* Get display objects
*/
diff --git a/src/lib/elements/controls/SelectGroupElement.ts b/src/lib/elements/controls/SelectGroupElement.ts
index 089f64fa0d9c001785d11d38397aa99f4f460bb7..65e53da50143c9fd10bf66e8f2aa747263fa2e3c 100644
--- a/src/lib/elements/controls/SelectGroupElement.ts
+++ b/src/lib/elements/controls/SelectGroupElement.ts
@@ -1,7 +1,7 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import * as Models from '@ascii-dev-user/medsurf-lib/models';
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
import {Design} from "../../config/design";
import { debounce } from 'debounce';
@@ -16,8 +16,7 @@ export enum SelectGroupType {
/**
* Select group model
*/
-export class SelectGroupModel extends BaseContainerModel {
- image: MedsurfDraw.Image
+export class SelectGroupModel extends BaseContainerImageModel {
}
/**
@@ -27,7 +26,6 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
/**
* Members
*/
- protected _image: MedsurfDraw.Image;
protected _type: SelectGroupType;
protected _layerGroup: Models.LayerGroup;
protected _grouping: Models.Grouping;
@@ -90,7 +88,6 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
super(model);
// Members
- this.image = this.data.image;
this.displayObjects = [];
this.imageObjectMenu = [];
this.groupingMenu = []
@@ -172,23 +169,26 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
this.addChild(this._selectElement);
// -- Image object menu element
this._imageObjectMenuElement = new MedsurfDraw.MenuElement({
+ image: this.image,
menuElements: undefined
});
- this.addChild(this._imageObjectMenuElement);
+ this.image.parent.addChild(this._imageObjectMenuElement);
// -- Grouping menu element
this._groupingMenuElement = new MedsurfDraw.MenuElement({
+ image: this.image,
menuElements: undefined
});
- this.addChild(this._groupingMenuElement);
+ this.image.parent.addChild(this._groupingMenuElement);
//</editor-fold>
//<editor-fold desc="Image object menu elements">
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -204,9 +204,10 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -214,9 +215,10 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -236,9 +238,10 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -254,9 +257,10 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -272,9 +276,10 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -290,9 +295,10 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -312,9 +318,10 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//<editor-fold desc="Interactive Grouping">
// -- Interactive grouping button element
this._interactiveGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf277',
description: 'Interactive Gruppe',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -330,9 +337,10 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//<editor-fold desc="Poi Grouping">
// -- Poi grouping button element
this._poiGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf649',
description: 'POI Gruppe',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -348,9 +356,10 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//<editor-fold desc="Text Grouping">
// -- Text grouping button element
this._textGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf53f',
description: 'Text Gruppe',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -366,9 +375,10 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//<editor-fold desc="Legend Grouping">
// -- Legend grouping button element
this._legendGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0cb',
description: 'Legenden Gruppe',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -587,7 +597,7 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
this.interactive = true;
// Sort children
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Set display objects
this.displayObjects = displayObjects as MedsurfDraw.ImageObject[];
@@ -595,9 +605,9 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
// Emits
if (this.interactive) { // Check is ever shown
if (this._type === SelectGroupType.GROUPING) {
- this.getImage().emit("debouncedUnselectGrouping");
+ this.image.emit("debouncedUnselectGrouping");
} else {
- this.getImage().emit("debouncedUnselectLayerGroup");
+ this.image.emit("debouncedUnselectLayerGroup");
}
}
@@ -768,7 +778,11 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
* Display menu
*/
public displayMenu(): void {
- const point = this.getImage().getMousePosition();
+ if (!this.visible) {
+ return;
+ }
+
+ const point = this.image.getMousePosition();
// Setup
this._menuShown = true;
@@ -776,23 +790,23 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
// Elements
if (MedsurfDraw.Keyboard.isKeyDown("KeyG")) {
// -- Grouping menu element
- this._groupingMenuElement.position.set(point.x, point.y);
+ this._groupingMenuElement.setMousePosition(point);
this._groupingMenuElement.showItem();
} else {
// -- Image object menu element
- this._imageObjectMenuElement.position.set(point.x - this.position.x, point.y - this.position.y);
+ this._imageObjectMenuElement.setMousePosition(point);
this._imageObjectMenuElement.showItem();
}
// Hide menu
- this.getImage().moveInteraction.once("startMove", () => {
+ this.image.moveInteraction.once("startMove", () => {
// Elements
// -- Menu element
this._imageObjectMenuElement.hideItem();
// -- Grouping menu element
this._groupingMenuElement.hideItem();
});
- this.getImage().moveInteraction.once("endMove", () => {
+ this.image.moveInteraction.once("endMove", () => {
// Setup
this._menuShown = false;
});
@@ -826,7 +840,7 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editImageObjectGrouping();
+ this.image.editImageObjectGrouping();
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -902,7 +916,7 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
// Copy image object
switch (this._type) {
case SelectGroupType.LAYERGROUP:
- this.getImage().copyLayerGroup(this._layerGroup);
+ this.image.copyLayerGroup(this._layerGroup);
break;
default:
throw new Error("Not implemented");
@@ -920,7 +934,7 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
// Clipboard image object
switch (this._type) {
case SelectGroupType.LAYERGROUP:
- this.getImage().clipboardLayerGroup(this._layerGroup);
+ this.image.clipboardLayerGroup(this._layerGroup);
break;
default:
throw new Error("Not implemented");
@@ -938,7 +952,7 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//</editor-fold>
// Create interative grouping
- this.getImage().createInteractiveGrouping(this.layerGroup);
+ this.image.createInteractiveGrouping(this.layerGroup);
}
//</editor-fold>
//<editor-fold desc="Poi Grouping">
@@ -952,7 +966,7 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//</editor-fold>
// Create poi grouping
- this.getImage().createPoiGrouping(this.layerGroup);
+ this.image.createPoiGrouping(this.layerGroup);
}
//</editor-fold>
//<editor-fold desc="Text Grouping">
@@ -966,7 +980,7 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//</editor-fold>
// Create text grouping
- this.getImage().createTextGrouping(this.layerGroup);
+ this.image.createTextGrouping(this.layerGroup);
}
//</editor-fold>
//<editor-fold desc="Legend Grouping">
@@ -981,7 +995,7 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
//</editor-fold>
// Create legend grouping
- this.getImage().createLegendGrouping(this.layerGroup);
+ this.image.createLegendGrouping(this.layerGroup);
}
//</editor-fold>
//</editor-fold>
@@ -1076,55 +1090,7 @@ export class SelectGroupElement extends BaseContainer<SelectGroupModel> {
}
//</editor-fold>
- //<editor-fold desc="BaseContrainer">
- /**
- * Get canvas
- */
- public getCanvas(): HTMLCanvasElement {
- return this.image.getCanvas();
- }
-
- /**
- * Get image
- */
- public getImage(): MedsurfDraw.Image {
- return this.image.getImage();
- }
-
- /**
- * Get image scale
- */
- public getImageScale(): PIXI.IPoint {
- if (!this.image) {
- return new PIXI.Point(0, 0);
- }
- return this.image.getImageScale();
- }
-
- /**
- * Get image dimensions
- */
- public getImageDimensions(): MedsurfDraw.Dimensions {
- return this.image.getImageDimensions();
- }
- //</editor-fold>
-
//<editor-fold desc="Getter and Setter">
- /**
- * Get imgae
- */
- public get image(): MedsurfDraw.Image {
- return this._image;
- }
-
- /**
- * Set image
- * @param value
- */
- public set image(value: MedsurfDraw.Image) {
- this._image = value;
- }
-
/**
* Get grouping
*/
diff --git a/src/lib/elements/controls/SelectItemElement.ts b/src/lib/elements/controls/SelectItemElement.ts
index 342a959e8bbaf0122487d0357cf09544933e7dc1..82b8cbd2be8ea5408ac499a7a87f440277f87fe7 100644
--- a/src/lib/elements/controls/SelectItemElement.ts
+++ b/src/lib/elements/controls/SelectItemElement.ts
@@ -1,7 +1,7 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
import {BaseElementContainer, BaseElementContainerModel} from "../../bases/elements/BaseElementContainer";
import {Design} from "../../config/design";
import {debounce} from "debounce";
@@ -9,8 +9,7 @@ import {debounce} from "debounce";
/**
* Select model
*/
-export class SelectImageObjectElementModel extends BaseContainerModel {
- image: MedsurfDraw.Image
+export class SelectImageObjectElementModel extends BaseContainerImageModel {
}
/**
@@ -20,7 +19,6 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
/**
* Members
*/
- protected _image: MedsurfDraw.Image;
protected _displayObject: BaseElementContainer<Models.ImageObject, BaseElementContainerModel<Models.ImageObject>> | MedsurfDraw.Text | MedsurfDraw.Image | undefined;
protected _menuShown: boolean = false;
@@ -51,7 +49,6 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
super(model);
// Members
- this.image = this.data.image;
this.displayObject = undefined;
// Setup
@@ -106,6 +103,7 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
//<editor-fold desc="Elements">
// -- Scale element
this._scaleElement = new MedsurfDraw.ScaleElement({
+ image: this.image,
type: MedsurfDraw.ScaleElementType.NOT_SCALEABLE,
rectangle: new PIXI.Rectangle(0, 0, 0, 0)
});
@@ -115,6 +113,7 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
this.addChild(this._scaleElement);
// -- Rotate element
this._rotateElement = new MedsurfDraw.RotateElement({
+ image: this.image,
rectangle: new PIXI.Rectangle(0, 0, 0, 0)
});
this._rotateElement.rotateInteraction.on("startRotate", this.startRotate, this);
@@ -123,27 +122,32 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
this.addChild(this._rotateElement);
// -- Rotate scale element
this._rotateScaleElement = new MedsurfDraw.RotateScaleElement({
+ image: this.image,
rotateElement: this._rotateElement
});
this._rotateScaleElement.hideItem();
this.addChild(this._rotateScaleElement);
// -- Caret element
this._caretElement = new MedsurfDraw.CaretElement({
+ image: this.image,
textElement: undefined
});
this.addChild(this._caretElement);
// -- Selection element
this._selectionElement = new MedsurfDraw.SelectionElement({
+ image: this.image,
textElement: undefined
});
this.addChild(this._selectionElement);
// -- Menu Element
this._menuElement = new MedsurfDraw.MenuElement({
+ image: this.image,
menuElements: undefined
});
- this.addChild(this._menuElement);
+ this.image.parent.addChild(this._menuElement);
// -- Clear color button element
this._colorElement = new MedsurfDraw.ColorElement({
+ image: this.image,
rectangle: new PIXI.Rectangle(0, 0, 0, 0),
color: 0x000000,
colorAlpha: 0,
@@ -153,6 +157,7 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
this.addChild(this._colorElement);
// -- Number element
this._numberElement = new MedsurfDraw.NumberElement({
+ image: this.image,
rectangle: new PIXI.Rectangle(0, 0, 0, 0),
value: 1,
minValue: 0,
@@ -438,7 +443,7 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
* @private
*/
protected _setEventsForDisplayObjects(displayObject: BaseElementContainer<Models.ImageObject, BaseElementContainerModel<Models.ImageObject>> | MedsurfDraw.Text | MedsurfDraw.Image | undefined): void {
- if (displayObject instanceof MedsurfDraw.Text) {
+ if (displayObject instanceof MedsurfDraw.EditableText) {
displayObject.writeInteraction.on("onCaret", this._caretElement.onCaret, this._caretElement);
displayObject.writeInteraction.on("onSelection", this._selectionElement.onSelection, this._selectionElement);
}
@@ -462,7 +467,7 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
* @private
*/
protected _unsetEventsForDisplayObjects(displayObject: BaseElementContainer<Models.ImageObject, BaseElementContainerModel<Models.ImageObject>> | MedsurfDraw.Text | MedsurfDraw.Image | undefined): void {
- if (displayObject instanceof MedsurfDraw.Text) {
+ if (displayObject instanceof MedsurfDraw.EditableText) {
displayObject.writeInteraction.off("onCaret", this._caretElement.onCaret, this._caretElement);
displayObject.writeInteraction.off("onSelection", this._selectionElement.onSelection, this._selectionElement);
}
@@ -520,6 +525,10 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
* @param event
*/
public displayMenu(event: MouseEvent): void {
+ if (!this.visible) {
+ return;
+ }
+
event.stopPropagation();
// Setup
@@ -527,23 +536,30 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
// Elements
// -- Menu element
- const point = this.getImage().getMousePosition();
- this._menuElement.position.set(point.x - this.position.x, point.y - this.position.y);
+ const point = this.image.getMousePosition();
+ this._menuElement.setMousePosition(point);
this._menuElement.showItem();
// Hide menu
- this.getImage().moveInteraction.once("startMove", () => {
+ /* TODO */
+ this.image.moveInteraction.once("startMove", () => {
// Elements
// -- Menu element
this._menuElement.hideItem();
});
- this.getImage().moveInteraction.once("endMove", () => {
+ /*
+ this.image.moveInteraction.once("endMove", () => {
+ // Setup
+ this._menuElement.showItem();
+ });
+ */
+ this.image.moveInteraction.once("endMoveLock", () => {
// Setup
this._menuShown = false;
});
/* TODO remove
// Image -> remove unselect behaviour and reset it after one click on the image
- const image = this.getImage();
+ const image = this.image;
image.moveInteraction.off("endMove", image.endMove, image);
image.moveInteraction.once("endMove", () => {
// Elements
@@ -691,65 +707,16 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Adjust rectangle
this.emit("debounceUpdateRectangle");
}
//</editor-fold>
- //<editor-fold desc="BaseContrainer">
- /**
- * Get canvas
- */
- public getCanvas(): HTMLCanvasElement {
- return this.image.getCanvas();
- }
-
- /**
- * Get image
- */
- public getImage(): MedsurfDraw.Image {
- return this.image.getImage();
- }
-
- /**
- * Get image scale
- */
- public getImageScale(): PIXI.IPoint {
- if (!this.image) {
- return new PIXI.Point(0, 0);
- }
- return this.image.getImageScale();
- }
-
- /**
- * Get image dimensions
- */
- public getImageDimensions(): MedsurfDraw.Dimensions {
- return this.image.getImageDimensions();
- }
- //</editor-fold>
-
//<editor-fold desc="Getter and Setter">
- /**
- * Get imgae
- */
- public get image(): MedsurfDraw.Image {
- return this._image;
- }
-
- /**
- * Set image
- * @param value
- */
- public set image(value: MedsurfDraw.Image) {
- this._image = value;
- }
-
/**
* Get display objects
*/
@@ -804,7 +771,7 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
}
}
// -- Caret element
- if (this.displayObject instanceof MedsurfDraw.Text) {
+ if (this.displayObject instanceof MedsurfDraw.EditableText) {
this._caretElement.textElement = this.displayObject;
this._caretElement.onCaret();
this._caretElement.showItem();
@@ -812,7 +779,7 @@ export class SelectItemElement extends BaseContainer<SelectImageObjectElementMod
this._caretElement.hideItem();
}
// -- Selection element
- if (this.displayObject instanceof MedsurfDraw.Text) {
+ if (this.displayObject instanceof MedsurfDraw.EditableText) {
this._selectionElement.textElement = this.displayObject;
this._selectionElement.showItem();
} else {
diff --git a/src/lib/elements/fills/FillCollection.ts b/src/lib/elements/fills/FillCollection.ts
index 2481cf886901abfc6d87ccba73e16a85d594b5fe..a74e27f9985166e31d14be285290e7659c60e707 100644
--- a/src/lib/elements/fills/FillCollection.ts
+++ b/src/lib/elements/fills/FillCollection.ts
@@ -59,11 +59,12 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
/**
* Constructor
+ * @param image
* @param model
*/
- public constructor(model: Models.FillCollection) {
+ public constructor(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.FillCollection) {
// Parent constructor
- super({model});
+ super({image, model});
// Members
this.lines = [];
@@ -149,13 +150,13 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
public init(): void {
// Members
this.lines = this.model.lines.map((id: string) => {
- return this.getImage().getChildByName(id) as MedsurfDraw.Line;
+ return this.image.getChildByName(id) as MedsurfDraw.Line;
// TODO: return this.getImage().children.find((c) => c.name === id) as MedsurfDraw.Line;
});
//<editor-fold desc="Elements">
// -- Fill element
- this._fillElement = new BaseGraphics({});
+ this._fillElement = new BaseGraphics({image: this.image});
this.addChild(this._fillElement);
//</editor-fold>
@@ -163,9 +164,10 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -181,9 +183,10 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -191,9 +194,10 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -213,9 +217,10 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -231,9 +236,10 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -249,9 +255,10 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -267,9 +274,10 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -497,12 +505,13 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
//<editor-fold desc="Static functions">
/**
* Get instance
+ * @param image
* @param ids
*/
- public static getInstance(ids: string[]): FillCollection {
+ public static getInstance(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, ids: string[]): FillCollection {
// Element
// -- Fill collection
- return new FillCollection({
+ return new FillCollection(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.FILLCOLLECTION,
@@ -549,7 +558,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
// TODO
// Send an error to the nav
- this.getImage().sendError(e);
+ this.image.sendError(e);
// Set mode
// this.modeInteraction.setMode("delete");
@@ -597,6 +606,11 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
return false;
}
+ /* TODO use this
+ console.log("contains", this._fillElement.containsPoint(point));
+ return this._fillElement.containsPoint(point);
+ */
+
// Get polygon
// @ts-ignore
const polygon = this._fillElement.geometry.graphicsData[0].shape.points.slice(0, -2);
@@ -1129,7 +1143,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
MedsurfDraw.Keyboard.events.on("released_ArrowLeft", "onPositionPointMoveLeftEnd", this.moveInteraction.moveRelease.bind(this.moveInteraction));
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -1176,7 +1190,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
// TODO remove console.log("fill _removeModeSelectItem", mode);
if (mode === 'author') {
- this.emit("debounceControlUnselectItem", this.getImage());
+ this.emit("debounceControlUnselectItem", this.image);
// this.controlUnselectItem();
}
/* TODO remove
@@ -1333,7 +1347,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
* @private
*/
protected _modeDelete(): void {
- const image = this.getImage();
+ const image = this.image;
if (image) {
// Select layer group
@@ -1373,7 +1387,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editImageObject(this.model);
+ this.image.editImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -1385,10 +1399,10 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this.model.zIndex++;
this.zIndex = Design.fillCollection.zIndexDefault + this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
/**
@@ -1399,10 +1413,10 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this.model.zIndex--;
this.zIndex = Design.fillCollection.zIndexDefault + this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Delete">
@@ -1430,10 +1444,10 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().degroupLayerGroupImageObject(this.model);
+ this.image.degroupLayerGroupImageObject(this.model);
if (unselectElement) {
- this.getImage().unselectLayerGroup();
- this.getImage().selectImageObject(this.model);
+ this.image.unselectLayerGroup();
+ this.image.selectImageObject(this.model);
}
}
//</editor-fold>
@@ -1446,7 +1460,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this.collapseAllMenus(new PIXI.InteractionEvent());
// Copy image object
- this.getImage().copyImageObject(this.model);
+ this.image.copyImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Clipboard">
@@ -1458,7 +1472,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this.collapseAllMenus(new PIXI.InteractionEvent());
// Clipboard image object
- this.getImage().clipboardImageObject(this.model);
+ this.image.clipboardImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Interactive">
@@ -1482,7 +1496,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this._selftestContainerElement.draw();
*/
} else {
- const imageObjects = this.getImage().getImageObjects();
+ const imageObjects = this.image.getImageObjects();
const items = this.model.interactiveItems;
this.model.interactiveItems = []; // Remove existing items
if (items) {
@@ -1501,7 +1515,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
// Update
// TODO not needed this.emit("interactiveChanged");
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Bezier">
@@ -1512,7 +1526,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this.emit("debounceDraw");
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
}
//</editor-fold>
//<editor-fold desc="Color">
@@ -1541,7 +1555,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this.emit("debounceDraw");
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
}
//</editor-fold>
@@ -1567,7 +1581,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this.emit("debounceDraw");
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
//</editor-fold>
@@ -1578,7 +1592,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
*/
public controlSelectItem(): void {
// Emits
- this.getImage().selectImageObject(this.model);
+ this.image.selectImageObject(this.model);
// Select item
this.externControlSelectItem();
@@ -1604,7 +1618,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
*/
public externControlSelectItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this)
.forEach((imageObject) => {
if (this.model.interactiveItems && this.model.interactiveItems.indexOf(imageObject.name as string) > -1) {
@@ -1656,7 +1670,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
*/
public controlUnselectLayerGroup(): void {
// Emits
- this.getImage().unselectLayerGroup();
+ this.image.unselectLayerGroup();
}
/**
@@ -1675,7 +1689,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
*/
public controlChooseItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this)
.forEach((imageObject) => {
if (this.model.interactiveItems && this.model.interactiveItems.indexOf(imageObject.name as string) > -1) {
@@ -1708,7 +1722,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
*/
public controlCloneItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this && !imageObject.modeInteraction.lastMode.startsWith('clone'))
.forEach((imageObject) => {
imageObject.modeInteraction.setMode('blocked_item');
@@ -1780,7 +1794,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
if (lastMode === 'select_layer_group') {
this.controlSelectItem();
} else {
- if (!this.controlSelectLayerGroup(this.getImage()) && !preventSelectItem) {
+ if (!this.controlSelectLayerGroup(this.image) && !preventSelectItem) {
this.controlSelectItem();
}
}
@@ -1792,7 +1806,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
*/
public onInteractive(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this)
.forEach((imageObject) => {
if (this.model.interactiveItems) {
@@ -1834,8 +1848,8 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection,
this.selectInteraction.onRelease(event);
// Set default mode for image children
- const defaultMode = this.getImage().modeInteraction.defaultMode;
- this.getImage().getImageObjects()
+ const defaultMode = this.image.modeInteraction.defaultMode;
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this)
.forEach((imageObject) => {
imageObject.modeInteraction.setMode(defaultMode);
diff --git a/src/lib/elements/images/DeepZoomImage.ts b/src/lib/elements/images/DeepZoomImage.ts
index f545a1b4015a29799c6fc1ce5490f2f9a6f841e8..2513ed62a56ff0ab46828590f9486dd69bf131c3 100644
--- a/src/lib/elements/images/DeepZoomImage.ts
+++ b/src/lib/elements/images/DeepZoomImage.ts
@@ -1,8 +1,8 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
-import {Design} from "../../config/design";
-import {debounce} from "debounce";
-import {Image} from "./Image";
+import { Image } from "./Image";
+import { Design } from "../../config/design";
+import { debounce } from "debounce";
/**
* Deep zoom image
@@ -176,7 +176,7 @@ export class DeepZoomImage extends Image {
protected _modeRemoveInit(): void {
//<editor-fold desc="Elements">
// -- Tile container
- this._tileContainer = new MedsurfDraw.Container({});
+ this._tileContainer = new MedsurfDraw.Container({image: this});
this.addChild(this._tileContainer);
//</editor-fold>
diff --git a/src/lib/elements/images/Image.ts b/src/lib/elements/images/Image.ts
index d903ecd041c7eab4f98c1cdab8bbb9146770f5c9..34f36143983deb545a220d87bc367c883977a6b0 100644
--- a/src/lib/elements/images/Image.ts
+++ b/src/lib/elements/images/Image.ts
@@ -1,9 +1,9 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import * as Models from '@ascii-dev-user/medsurf-lib/models';
-import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
-import {debounce} from "debounce";
+import { BaseContainer, BaseContainerModel } from "../../bases/elements/BaseContainer";
+import { Design } from "../../config/design";
+import { debounce } from "debounce";
/**
* Image types
@@ -56,18 +56,12 @@ export class Image extends BaseContainer<ImageModel> {
*/
protected _scaleX: number;
protected _scaleY: number;
- protected _moveLock: boolean = false;
- private _control: ControlModel[]; // TODO
private _imageObjectMenu: MedsurfDraw.MenuEntryModel[];
private _groupingMenu: MedsurfDraw.MenuEntryModel[];
private _actualWidth: number;
private _actualHeight: number;
private _imageType: ImageTypes;
private _layerGroups: Models.LayerGroup[];
- private _groupings: Models.Grouping[]; // TODO
- private _selectedLayerGroup: Models.LayerGroup | null;
- private _selectedGrouping: Models.Grouping | null;
- // TODO private _imageObjects: Image
/**
* Interactions
@@ -186,6 +180,7 @@ export class Image extends BaseContainer<ImageModel> {
this.moveInteraction.on("startMove", this.startMove, this);
this.moveInteraction.on("onMove", this.onMove, this);
this.moveInteraction.on("endMove", this.endMove, this);
+ this.moveInteraction.on("endMoveLock", this.endMoveLock, this);
// -- Zoom interaction
this.zoomInteraction = new MedsurfDraw.ZoomInteraction(this);
this.zoomInteraction.on("onZoom", this.onZoom, this);
@@ -254,15 +249,16 @@ export class Image extends BaseContainer<ImageModel> {
this.addChild(this._selectItemElement);
// -- Image object menu element
this._imageObjectMenuElement = new MedsurfDraw.MenuElement({
+ image: this,
menuElements: undefined
});
- // TODO oho
- this.addChild(this._imageObjectMenuElement);
+ this.parent.addChild(this._imageObjectMenuElement);
// -- Grouping menu element
this._groupingMenuElement = new MedsurfDraw.MenuElement({
+ image: this,
menuElements: undefined
});
- this.addChild(this._groupingMenuElement);
+ this.parent.addChild(this._groupingMenuElement);
//</editor-fold>
//<editor-fold desc="Image object menu elements">
@@ -270,9 +266,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this,
text: '\uf0ea',
description: 'Kopieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -293,9 +290,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Interactive Area / Polygon">
// -- Interactive area button element
this._interactiveAreaButtonElement = new MedsurfDraw.IndexedRoundButtonElement({
+ image: this,
text: '\uf304',
description: 'Interactive\nFläche',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
index: '\uf277',
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
@@ -304,9 +302,10 @@ export class Image extends BaseContainer<ImageModel> {
this._interactiveAreaButtonElement.on("button", this.onButtonInteractiveArea, this);
// -- Polygon button element
this._polygonButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this,
text: '\uf304',
description: 'Polygon',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._interactiveAreaButtonElement,
@@ -327,9 +326,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Text">
// -- Legend button
this._legendButtonElement = new MedsurfDraw.IndexedRoundButtonElement({
+ image: this,
text: '\uf893',
description: 'Legende',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
index: '\uf0cb',
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
@@ -338,9 +338,10 @@ export class Image extends BaseContainer<ImageModel> {
this._legendButtonElement.on("button", this.onButtonLegendGrouping, this);
// -- Text button element
this._textButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this,
text: '\uf893',
description: 'Text',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._legendButtonElement,
@@ -361,9 +362,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Arrow">
// -- Arrow text grouping button element
this._arrowTextGroupingButtonElement = new MedsurfDraw.IndexedRoundButtonElement({
+ image: this,
text: '\uf124',
description: 'Spickel in\nText Gruppe',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
index: '\uf53f',
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
@@ -372,9 +374,10 @@ export class Image extends BaseContainer<ImageModel> {
this._arrowTextGroupingButtonElement.on("button", this.onButtonArrowTextGrouping, this);
// -- Arrow button elemnt
this._arrowButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this,
text: '\uf124',
description: 'Spickel',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._arrowTextGroupingButtonElement,
@@ -395,9 +398,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Ellipse">
// -- Ellipse interactive grouping button element
this._ellipseInteractiveGroupingButtonElement = new MedsurfDraw.IndexedRoundButtonElement({
+ image: this,
text: '\uf5ed',
description: 'Ellipse in\ninteractiver\nGruppe',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
index: '\uf277',
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
@@ -406,9 +410,10 @@ export class Image extends BaseContainer<ImageModel> {
this._ellipseInteractiveGroupingButtonElement.on("button", this.onButtonEllipseInteractiveGrouping, this);
// -- Ellipse button elemnt
this._ellipseButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this,
text: '\uf5ed',
description: 'Ellipse',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._ellipseInteractiveGroupingButtonElement,
@@ -429,9 +434,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Rectangle">
// -- Rectangle interactive grouping button element
this._rectangleInteractiveGroupingButtonElement = new MedsurfDraw.IndexedRoundButtonElement({
+ image: this,
text: '\uf5ef',
description: 'Rechteck in\ninteractiver\nGruppe',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
index: '\uf277',
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
@@ -440,9 +446,10 @@ export class Image extends BaseContainer<ImageModel> {
this._rectangleInteractiveGroupingButtonElement.on("button", this.onButtonRectangleInteractiveGrouping, this);
// -- Rectangle button elemnt
this._rectangleButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this,
text: '\uf5ef',
description: 'Rechteck',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._rectangleInteractiveGroupingButtonElement,
@@ -463,9 +470,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Arrow Marker">
// -- Arrow marker button element
this._arrowMarkerButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this,
text: '\uf30a',
description: 'Pfeil\nMarker',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor,
@@ -481,9 +489,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Ellipse Marker">
// -- Ellipse marker button element
this._ellipseMarkerButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this,
text: '\uf276',
description: 'Ellipse\nMarker',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -503,9 +512,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Interactive Grouping">
// -- Interactive grouping button element
this._interactiveGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this,
text: '\uf277',
description: 'Interactive\nGruppe',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -521,9 +531,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Poi Grouping">
// -- Poi grouping button element
this._poiGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this,
text: '\uf649',
description: 'POI Gruppe',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -539,9 +550,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Text Grouping">
// -- Text grouping button element
this._textGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this,
text: '\uf53f',
description: 'Text Gruppe',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -557,9 +569,10 @@ export class Image extends BaseContainer<ImageModel> {
//<editor-fold desc="Legend Grouping">
// -- Legend grouping button element
this._legendGroupingButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this,
text: '\uf0cb',
description: 'Legenden\nGruppe',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -943,7 +956,7 @@ export class Image extends BaseContainer<ImageModel> {
);
// Emit
- debounce(this.emit.bind(this, "imageZoom"), 50)();
+ debounce(this.emit.bind(this, "imageZoom", this.scale.x, this.scale.y), 50)();
// Promise
return Promise.resolve();
@@ -1136,28 +1149,22 @@ export class Image extends BaseContainer<ImageModel> {
return;
}
- const point = this.getImage().getMousePosition();
+ const point = this.image.getMousePosition();
+ const scale = this.imageScale;
// Elements
if (MedsurfDraw.Keyboard.isKeyDown("KeyG")) {
// -- Grouping menu element
- this._groupingMenuElement.position.set(point.x, point.y);
+ this._groupingMenuElement.setMousePosition(point);
this._groupingMenuElement.showItem();
} else {
// -- Image Object menu element
- this._imageObjectMenuElement.position.set(point.x, point.y);
+ this._imageObjectMenuElement.setMousePosition(point);
this._imageObjectMenuElement.showItem();
}
// Image -> remove unselect behaviour and reset it after one click on the image
- const image = this.getImage();
- image.moveInteraction.off("endMove", image.endMove, image);
- image.moveInteraction.once("endMove", () => {
- // Elements
- this.controlHideMenu();
-
- // Image
- image.moveInteraction.on("endMove", image.endMove, image);
- });
+ this.image.moveInteraction.off("endMoveLock", this.image.endMoveLock, this.image);
+ this.image.moveInteraction.once("endMoveLock", this.image.endMoveMenu, this.image);
}
//<editor-fold desc="Defaults">
public collapseAllMenus(event: PIXI.InteractionEvent): void {
@@ -1638,7 +1645,7 @@ export class Image extends BaseContainer<ImageModel> {
* Degroup group image layer groups
*/
public degroupGroupImageLayerGroups(): void {
- const groupImage = this.getImage().getGroupImageFromGrouping(this._selectGroupElement.grouping);
+ const groupImage = this.image.getGroupImageFromGrouping(this._selectGroupElement.grouping);
if (groupImage) {
this.emit("degroupGroupImageLayerGroups", groupImage);
}
@@ -1664,8 +1671,8 @@ export class Image extends BaseContainer<ImageModel> {
* @param layerGroup
*/
public selectLayerGroup(layerGroup: Models.LayerGroup): void {
- // Emit
- this.moveInteraction.emit("endMove", new PIXI.InteractionEvent());
+ // Hide menu
+ this.endMoveMenu();
// Emit
this.emit("selectLayerGroup", layerGroup);
@@ -1676,7 +1683,7 @@ export class Image extends BaseContainer<ImageModel> {
*/
public selectLayerGroupByImageObject(imageObject: Models.ImageObject): void {
// Hide menu
- this.moveInteraction.emit("endMove", new PIXI.InteractionEvent());
+ this.endMoveMenu();
// Emit
this.emit("selectLayerGroupByImageObject", imageObject);
@@ -1759,7 +1766,7 @@ export class Image extends BaseContainer<ImageModel> {
*/
public selectImageObject(imageObject: Models.ImageObject): void {
// Hide menu
- this.moveInteraction.emit("endMove", new PIXI.InteractionEvent());
+ this.endMoveMenu();
// Emit
this.emit("selectImageObject", imageObject);
@@ -1831,7 +1838,7 @@ export class Image extends BaseContainer<ImageModel> {
*/
public selectPrimitive(primitive: Models.ArrowPrimitive | Models.BackgroundRectanglePrimitive | Models.EllipsePrimitive | Models.RectanglePrimitive | Models.TextPrimitive, positionPoint: Models.PositionPoint): void {
// Hide menu
- this.moveInteraction.emit("endMove", new PIXI.InteractionEvent());
+ this.endMoveMenu();
// Emit
this.emit("selectPrimitive", primitive, positionPoint);
@@ -1877,7 +1884,7 @@ export class Image extends BaseContainer<ImageModel> {
*/
public selectLegendColumn(legendColumn: Models.LegendColumn, legend: Models.LegendCollection): void {
// Hide menu
- this.moveInteraction.emit("endMove", new PIXI.InteractionEvent());
+ this.endMoveMenu();
// Emit
this.emit("selectLegendColumn", legendColumn, legend);
@@ -1925,7 +1932,7 @@ export class Image extends BaseContainer<ImageModel> {
*/
public selectLegendRow(legendRow: Models.LegendRow, legendColumn: Models.LegendColumn, legend: Models.LegendCollection): void {
// Hide menu
- this.moveInteraction.emit("endMove", new PIXI.InteractionEvent());
+ this.endMoveMenu();
// Emit
this.emit("selectLegendRow", legendRow, legendColumn, legend);
@@ -2333,9 +2340,6 @@ export class Image extends BaseContainer<ImageModel> {
public onMove(event: PIXI.InteractionEvent, dX: number, dY: number): void {
event.stopPropagation();
- // Move lock
- this._moveLock = true;
-
const bounds = this.getBounds();
const visibleImageX = this.actualWidth / Design.image.visibleImageXAspect;
@@ -2399,14 +2403,30 @@ export class Image extends BaseContainer<ImageModel> {
cursor.rotation = 0;
};
this.renderer.plugins.interaction.setCursorMode("default");
+ }
+ /**
+ * End move lock
+ * @param event
+ */
+ public endMoveLock(event: PIXI.InteractionEvent): void {
if (!this._selectGroupElement.menuShown && !this._selectItemElement.menuShown) {
// Reset selection
- if (['drawing', 'choosing', 'cloning'].indexOf(this.modeInteraction.lastMode) === -1 && !this._moveLock) {
+ if (['drawing', 'choosing', 'cloning'].indexOf(this.modeInteraction.lastMode) === -1) {
this.controlSetDefaultMode(event);
}
}
- this._moveLock = false;
+ }
+
+ /**
+ * End move menu
+ */
+ public endMoveMenu(): void {
+ // Elements
+ this.controlHideMenu();
+
+ // Events
+ this.image.moveInteraction.on("endMoveLock", this.image.endMoveLock, this.image);
}
//</editor-fold>
@@ -2441,44 +2461,38 @@ export class Image extends BaseContainer<ImageModel> {
this.resetGenerator();
// Emit
- debounce(this.emit.bind(this, "imageZoom"), 100)();
+ debounce(this.emit.bind(this, "imageZoom", this.scale.x, this.scale.y), 20)();
}
//</editor-fold>
- //<editor-fold desc="BaseSprite">
+ //<editor-fold desc="Getter and Setter">
/**
- * Get canvas
+ * Get image
*/
- public getCanvas(): HTMLCanvasElement {
- return this.canvas;
+ public get image(): MedsurfDraw.Image | MedsurfDraw.DeepZoomImage {
+ return this;
}
/**
- * Get image
+ * Get image canvas
*/
- public getImage(): Image {
- return this;
+ public get imageCanvas(): HTMLCanvasElement {
+ return this.canvas;
}
/**
* Get image scale
*/
- public getImageScale(): PIXI.IPoint {
- if (!this) {
- return new PIXI.Point(0, 0);
- }
+ public get imageScale(): PIXI.IPoint {
return this.scale;
}
/**
* Get image dimensions
*/
- public getImageDimensions(): MedsurfDraw.Dimensions {
- return this.dimensions
+ public get imageDimensions(): MedsurfDraw.Dimensions {
+ return this.dimensions;
}
- //</editor-fold>
-
- //<editor-fold desc="Getter and Setter">
/**
* Get control
*/
diff --git a/src/lib/elements/indications/VirtualPointerElement.ts b/src/lib/elements/indications/VirtualPointerElement.ts
index a6b5951411044dc80e656af8e743f8a5b9c54611..82db19b547b55f1e48d1b74b70219675e57c60a3 100644
--- a/src/lib/elements/indications/VirtualPointerElement.ts
+++ b/src/lib/elements/indications/VirtualPointerElement.ts
@@ -1,7 +1,7 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
-import {Design} from "../../config/design";
+import { BaseContainer, BaseContainerModel } from "../../bases/elements/BaseContainer";
+import { Design } from "../../config/design";
export class VirtualPointerElementModel extends BaseContainerModel {
rectangle: PIXI.Rectangle;
diff --git a/src/lib/elements/inputs/CaretElement.ts b/src/lib/elements/inputs/CaretElement.ts
index 61e9b0052c13984e5a2667f68417bb150a7f449e..b000a038c257b6b3cbaf14ee706f880880b487a5 100644
--- a/src/lib/elements/inputs/CaretElement.ts
+++ b/src/lib/elements/inputs/CaretElement.ts
@@ -1,13 +1,13 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
/**
* Caret element model
*/
-export class CaretElementModel extends BaseContainerModel {
- textElement: MedsurfDraw.Text | undefined;
+export class CaretElementModel extends BaseContainerImageModel {
+ textElement: MedsurfDraw.EditableText | undefined;
}
/**
@@ -166,7 +166,7 @@ export class CaretElement extends BaseContainer<CaretElementModel> {
/**
* Get text element
*/
- public get textElement(): MedsurfDraw.Text | undefined {
+ public get textElement(): MedsurfDraw.EditableText | undefined {
return this.data.textElement;
}
@@ -174,7 +174,7 @@ export class CaretElement extends BaseContainer<CaretElementModel> {
* Set text element
* @param value
*/
- public set textElement(value: MedsurfDraw.Text | undefined) {
+ public set textElement(value: MedsurfDraw.EditableText | undefined) {
this.data.textElement = value;
if (this.textElement) {
diff --git a/src/lib/elements/inputs/SelectionElement.ts b/src/lib/elements/inputs/SelectionElement.ts
index 893994cc92dcac540b2518cba8f2b31b7e111ed9..9d4ac6f3538860527ecf2bdeb68e2a951138a051 100644
--- a/src/lib/elements/inputs/SelectionElement.ts
+++ b/src/lib/elements/inputs/SelectionElement.ts
@@ -1,13 +1,13 @@
import * as MedsurfDraw from "../../public-api";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
-import {BaseGraphics, BaseGraphicsModel} from "../../bases/elements/BaseGraphics";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
+import {BaseGraphics, BaseGraphicsImageModel} from "../../bases/elements/BaseGraphics";
import {Design} from "../../config/design";
/**
* Selection element model
*/
-export class SelectionElementModel extends BaseContainerModel {
- textElement: MedsurfDraw.Text | undefined;
+export class SelectionElementModel extends BaseContainerImageModel {
+ textElement: MedsurfDraw.EditableText | undefined;
}
/**
@@ -17,7 +17,7 @@ export class SelectionElement extends BaseContainer<SelectionElementModel> {
/**
* Elements
*/
- protected _selectionElement: BaseGraphics<BaseGraphicsModel>;
+ protected _selectionElement: BaseGraphics<BaseGraphicsImageModel>;
/**
* Constructor
@@ -37,7 +37,7 @@ export class SelectionElement extends BaseContainer<SelectionElementModel> {
public init(): void {
//<editor-fold desc="Elements">
// -- Selection element
- this._selectionElement = new BaseGraphics({});
+ this._selectionElement = new BaseGraphics({image: this.image});
this.addChild(this._selectionElement);
//</editor-fold>
@@ -146,7 +146,7 @@ export class SelectionElement extends BaseContainer<SelectionElementModel> {
/**
* Get text element
*/
- public get textElement(): MedsurfDraw.Text | undefined {
+ public get textElement(): MedsurfDraw.EditableText | undefined {
return this.data.textElement;
}
@@ -154,7 +154,7 @@ export class SelectionElement extends BaseContainer<SelectionElementModel> {
* Set text element
* @param value
*/
- public set textElement(value: MedsurfDraw.Text | undefined) {
+ public set textElement(value: MedsurfDraw.EditableText | undefined) {
this.data.textElement = value;
}
//</editor-fold>
diff --git a/src/lib/elements/legends/LegendCollection.ts b/src/lib/elements/legends/LegendCollection.ts
index dc333433744eec63f8c8c76841d64865636f8549..58e3cd10749037cf2d6d5f7994ece0cde24c9e5f 100644
--- a/src/lib/elements/legends/LegendCollection.ts
+++ b/src/lib/elements/legends/LegendCollection.ts
@@ -52,11 +52,12 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
/**
* Constructor
+ * @param image
* @param model
*/
- public constructor(model: Models.LegendCollection) {
+ public constructor(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.LegendCollection) {
// Parent constructor
- super({model});
+ super({image, model});
// Members
this.legendColumns = [];
@@ -145,7 +146,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public init(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Get selftest point
const selftestPoint: Models.Point = this.model.selftestPoint
@@ -161,6 +162,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
//<editor-fold desc="Elements">
// -- Selftest element
this._selftestElement = new MedsurfDraw.WedgePoint({
+ image: this.image,
wedgePoint: selftestPoint
});
this._selftestElement.moveInteraction.on("onMove", this.onSelftestMove, this);
@@ -168,7 +170,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.addChild(this._selftestElement);
// -- Legend columns
for (let col = 0; col < this.model.cols.length; col++) {
- const legendColumn = new MedsurfDraw.LegendColumn(this.model.cols[col]);
+ const legendColumn = new MedsurfDraw.LegendColumn(this.image, this.model.cols[col]);
this.addChild(legendColumn);
// Push to array
this.legendColumns.push(legendColumn);
@@ -179,9 +181,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -197,9 +200,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -207,9 +211,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -229,9 +234,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -247,9 +253,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -265,9 +272,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -283,9 +291,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -312,7 +321,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public draw(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Get col width
const colWidth = this.model.rectangle.width * imageWidth / this.model.cols.length;
@@ -448,9 +457,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
//<editor-fold desc="Static functions">
/**
* Get instance
+ * @param image
* @param imageWidth
*/
- public static getInstance(imageWidth: number): LegendCollection {
+ public static getInstance(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, imageWidth: number): LegendCollection {
// -- Legend model
const legendCollectionModel: Models.LegendCollection = {
id: uuidv4(),
@@ -498,7 +508,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
// Element
// -- Legend primitive
- return new LegendCollection(legendCollectionModel);
+ return new LegendCollection(image, legendCollectionModel);
}
//</editor-fold>
@@ -508,7 +518,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public addLegendColumn(): void {
// Create new legend column
- const legendColumn = MedsurfDraw.LegendColumn.getInstance(this.model);
+ const legendColumn = MedsurfDraw.LegendColumn.getInstance(this.image, this.model);
this.addChild(legendColumn);
legendColumn.modeInteraction.setDefaultMode("author");
// Push to array
@@ -525,7 +535,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.model.cols.push(legendColumn.model);
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
// Select legend column
legendColumn.controlSelectItem();
@@ -556,7 +566,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.model.cols.splice(legendColumnIndex, 1);
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
/**
@@ -564,7 +574,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public getSelftestPosition(): Models.Point {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Get selftest point
const selftestPoint: Models.Point = this.model.selftestPoint
@@ -695,7 +705,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.on("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -738,7 +748,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.on("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -795,7 +805,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
MedsurfDraw.Keyboard.events.on("released_ArrowLeft", "onPositionPointMoveLeftEnd", this.moveInteraction.moveRelease.bind(this.moveInteraction));
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -842,7 +852,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
// TODO remove console.log("legend _removeModeSelectItem", mode);
if (mode === 'author') {
- this.emit("debounceControlUnselectItem", this.getImage());
+ this.emit("debounceControlUnselectItem", this.image);
// this.controlUnselectItem();
}
/* TODO remove
@@ -941,7 +951,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
* @private
*/
protected _modeDelete(): void {
- const image = this.getImage();
+ const image = this.image;
if (image) {
// Select layer group
@@ -981,7 +991,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editImageObject(this.model);
+ this.image.editImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -993,10 +1003,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.model.zIndex++;
this.zIndex = Design.legendCollection.zIndexDefault + this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
/**
@@ -1007,10 +1017,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.model.zIndex--;
this.zIndex = Design.legendCollection.zIndexDefault + this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Delete">
@@ -1038,10 +1048,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().degroupLayerGroupImageObject(this.model);
+ this.image.degroupLayerGroupImageObject(this.model);
if (unselectElement) {
- this.getImage().unselectLayerGroup();
- this.getImage().selectImageObject(this.model);
+ this.image.unselectLayerGroup();
+ this.image.selectImageObject(this.model);
}
}
//</editor-fold>
@@ -1054,7 +1064,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.collapseAllMenus(new PIXI.InteractionEvent());
// Copy image object
- this.getImage().copyImageObject(this.model);
+ this.image.copyImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Clipboard">
@@ -1066,7 +1076,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.collapseAllMenus(new PIXI.InteractionEvent());
// Clipboard image object
- this.getImage().clipboardImageObject(this.model);
+ this.image.clipboardImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Selftest">
@@ -1127,7 +1137,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
this.emit("debounceDraw");
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Legend column">
@@ -1143,7 +1153,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public controlSelectItem(): void {
// Emits
- this.getImage().selectImageObject(this.model);
+ this.image.selectImageObject(this.model);
// Select item
this.externControlSelectItem();
@@ -1169,7 +1179,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public externControlSelectItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this)
.forEach((imageObject) => {
imageObject.modeInteraction.setMode('blocked_item');
@@ -1206,7 +1216,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public controlUnselectLayerGroup(): void {
// Emits
- this.getImage().unselectLayerGroup();
+ this.image.unselectLayerGroup();
}
/**
@@ -1215,7 +1225,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public controlDrawItem(isNew: boolean): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this && !imageObject.modeInteraction.lastMode.startsWith('draw'))
.forEach((imageObject) => {
imageObject.modeInteraction.setMode('blocked_item');
@@ -1233,7 +1243,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public controlCloneItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this && !imageObject.modeInteraction.lastMode.startsWith('clone'))
.forEach((imageObject) => {
imageObject.modeInteraction.setMode('blocked_item');
@@ -1272,7 +1282,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public onMove(event: PIXI.InteractionEvent, dX: number, dY: number) {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Position
this.position.x += dX;
@@ -1298,7 +1308,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
// Emits
this.emit("pointerover", event);
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
/**
@@ -1316,7 +1326,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public onSelftestMove(event: PIXI.InteractionEvent, dX: number, dY: number): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Position
this._selftestElement.wedgePoint.x += dX;
@@ -1335,7 +1345,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
public onSelftestEndMove(): void {
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
@@ -1383,7 +1393,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
if (lastMode === 'select_layer_group') {
this.controlSelectItem();
} else {
- if (!this.controlSelectLayerGroup(this.getImage()) && !preventSelectItem) {
+ if (!this.controlSelectLayerGroup(this.image) && !preventSelectItem) {
this.controlSelectItem();
}
}
@@ -1429,14 +1439,15 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
/**
* On scale
+ * @param scaleSide
* @param dX
* @param dY
* @param dW
* @param dH
*/
- public onScale(dX: number, dY: number, dW: number, dH: number): void {
+ public onScale(scaleSide: MedsurfDraw.ScaleSideTypes, dX: number, dY: number, dW: number, dH: number): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
if (this.model.rectangle.width * imageWidth + dW < 1) {
return;
@@ -1502,7 +1513,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
diff --git a/src/lib/elements/legends/LegendColumn.ts b/src/lib/elements/legends/LegendColumn.ts
index e01134426d19960cdb0b5ef30e3c2554f029111d..cd35c842f4ceb8cd8a96096cf45e18f759c032c3 100644
--- a/src/lib/elements/legends/LegendColumn.ts
+++ b/src/lib/elements/legends/LegendColumn.ts
@@ -40,11 +40,12 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
/**
* Constructor
+ * @param image
* @param model
*/
- public constructor(model: Models.LegendColumn) {
+ public constructor(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.LegendColumn) {
// Parent constructor
- super({model});
+ super({image, model});
// Members
this.legendRows = [];
@@ -89,12 +90,12 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
*/
public init(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
//<editor-fold desc="Elements">
// -- Legend rows
for (let row = 0; row < this.model.rows.length; row++) {
- const legendRow = new MedsurfDraw.LegendRow(this.model.rows[row]);
+ const legendRow = new MedsurfDraw.LegendRow(this.image, this.model.rows[row]);
this.addChild(legendRow);
// Push to array
this.legendRows.push(legendRow);
@@ -105,9 +106,10 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -123,9 +125,10 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -133,9 +136,10 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -155,6 +159,7 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
descriptionFontSize: 6,
@@ -173,6 +178,7 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
descriptionFontSize: 6,
@@ -191,6 +197,7 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
descriptionFontSize: 6,
@@ -209,6 +216,7 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
descriptionFontSize: 6,
@@ -301,12 +309,13 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
//<editor-fold desc="Static functions">
/**
* Get instance
+ * @param image
* @param model
*/
- public static getInstance(model: Models.LegendCollection): LegendColumn {
+ public static getInstance(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.LegendCollection): LegendColumn {
// Element
// -- Legend column
- return new LegendColumn({
+ return new LegendColumn(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.LEGENDCOLUMN,
@@ -325,10 +334,10 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
*/
public addLegendRow(model: Models.LegendColumn): void {
// Get image width
- const imageWidth = this.getImage().getImageDimensions().width;
+ const imageWidth = this.image.imageDimensions.width;
// Create new legend row
- const legendRow = MedsurfDraw.LegendRow.getInstance(model, imageWidth);
+ const legendRow = MedsurfDraw.LegendRow.getInstance(this.image, model, imageWidth);
this.addChild(legendRow);
// Push to array
this.legendRows.push(legendRow);
@@ -341,7 +350,7 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
this.model.rows.push(legendRow.model);
// Emits
- this.getImage().updateLegendColumn(this.model);
+ this.image.updateLegendColumn(this.model);
// Select legend row
legendRow.controlSelectItem();
@@ -372,7 +381,7 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
this.model.rows.splice(legendRowIndex, 1);
// Emits
- this.getImage().updateLegendColumn(this.model);
+ this.image.updateLegendColumn(this.model);
}
//</editor-fold>
@@ -426,7 +435,7 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
// Events
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -500,7 +509,7 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editLegendColumn(this.model, (this.parent as MedsurfDraw.LegendCollection).model);
+ this.image.editLegendColumn(this.model, (this.parent as MedsurfDraw.LegendCollection).model);
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -512,10 +521,10 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
this.model.zIndex++;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateLegendColumn(this.model);
+ this.image.updateLegendColumn(this.model);
}
/**
@@ -526,10 +535,10 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
this.model.zIndex--;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateLegendColumn(this.model);
+ this.image.updateLegendColumn(this.model);
}
//</editor-fold>
//<editor-fold desc="Delete">
@@ -600,7 +609,7 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
*/
public controlSelectItem(): void {
// Emits
- this.getImage().selectLegendColumn(this.model, (this.parent as MedsurfDraw.LegendCollection).model);
+ this.image.selectLegendColumn(this.model, (this.parent as MedsurfDraw.LegendCollection).model);
// Select item
this.externControlSelectItem();
@@ -611,7 +620,7 @@ export class LegendColumn extends BaseElementContainer<Models.LegendColumn, Base
*/
public externControlSelectItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this.parent)
.forEach((imageObject) => {
imageObject.modeInteraction.setMode('blocked_item');
diff --git a/src/lib/elements/legends/LegendRow.ts b/src/lib/elements/legends/LegendRow.ts
index 9859ac511129d4ab9762771fe4e22d820bbe60a8..8af8e074208f6099ae28e6ce3845641eccfcde96 100644
--- a/src/lib/elements/legends/LegendRow.ts
+++ b/src/lib/elements/legends/LegendRow.ts
@@ -50,11 +50,12 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
/**
* Constructor
+ * @param image
* @param model
*/
- public constructor(model: Models.LegendRow) {
+ public constructor(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.LegendRow) {
// Parent constructor
- super({model});
+ super({image, model});
//<editor-fold desc="Interactions">
// -- Mode interaction
@@ -123,9 +124,10 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -141,9 +143,10 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -151,9 +154,10 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -173,6 +177,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
descriptionFontSize: 6,
@@ -191,6 +196,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
descriptionFontSize: 6,
@@ -209,6 +215,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
descriptionFontSize: 6,
@@ -227,6 +234,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
descriptionFontSize: 6,
@@ -313,13 +321,15 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
//<editor-fold desc="Static functions">
/**
* Get instance
+ * @param image
* @param model
* @param imageWidth
*/
- public static getInstance(model: Models.LegendColumn, imageWidth: number): LegendRow {
+ public static getInstance(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.LegendColumn,
+ imageWidth: number): LegendRow {
// Element
// -- Legend row
- return new LegendRow({
+ return new LegendRow(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.LEGENDROW,
@@ -403,7 +413,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
*/
private _getCorrectStyle(): PIXI.TextStyle {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Defaults
let fontSize: number = 1;
@@ -435,7 +445,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
protected _modeDefault(): void {
// Elements
// -- Text element
- this._textElement.onImageZoom();
+ this._textElement.onImageZoom(this.imageScale.x, this.imageScale.y);
// Show item
this.showItem();
@@ -506,7 +516,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
// Events
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -589,7 +599,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
*/
protected _removeModeChooseSelect(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Defaults
const style = Object.assign({}, this.model.style);
@@ -638,7 +648,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
*/
protected _removeModeChooseUnselect(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Defaults
const style = Object.assign({}, this.model.style);
@@ -678,7 +688,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editLegendRow(this.model, (this.parent as MedsurfDraw.LegendColumn).model, (this.parent.parent as MedsurfDraw.LegendCollection).model);
+ this.image.editLegendRow(this.model, (this.parent as MedsurfDraw.LegendColumn).model, (this.parent.parent as MedsurfDraw.LegendCollection).model);
// TODO remove this.editText();
}
@@ -692,10 +702,10 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
this.model.zIndex++;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateLegendRow(this.model);
+ this.image.updateLegendRow(this.model);
}
/**
@@ -706,10 +716,10 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
this.model.zIndex--;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateLegendRow(this.model);
+ this.image.updateLegendRow(this.model);
}
//</editor-fold>
//<editor-fold desc="Delete">
@@ -792,7 +802,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
this.emit("debounceDraw");
// Emits
- this.getImage().updateLegendRow(this.model);
+ this.image.updateLegendRow(this.model);
}
}
//</editor-fold>
@@ -808,7 +818,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
number = Math.round(number);
// Update model
- this.model.style.fontSize = number / this.getImageDimensions().width;
+ this.model.style.fontSize = number / this.imageDimensions.width;
// Elements
// -- Text element
@@ -819,7 +829,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
// Emits
this.emit("onBackgroundNumber");
- this.getImage().updateLegendRow(this.model);
+ this.image.updateLegendRow(this.model);
}
}
//</editor-fold>
@@ -831,7 +841,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
this.emit("debounceDraw");
// Emits
- this.getImage().updateLegendRow(this.model);
+ this.image.updateLegendRow(this.model);
}
//</editor-fold>
//</editor-fold>
@@ -842,7 +852,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
*/
public controlSelectItem(): void {
// Emits
- this.getImage().selectLegendRow(this.model, (this.parent as MedsurfDraw.LegendColumn).model, (this.parent.parent as MedsurfDraw.LegendCollection).model);
+ this.image.selectLegendRow(this.model, (this.parent as MedsurfDraw.LegendColumn).model, (this.parent.parent as MedsurfDraw.LegendCollection).model);
// Select item
this.externControlSelectItem();
@@ -853,7 +863,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
*/
public externControlSelectItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this.parent.parent)
.forEach((imageObject) => {
imageObject.modeInteraction.setMode('blocked_item');
@@ -884,7 +894,7 @@ export class LegendRow extends BaseElementContainer<Models.LegendRow, BaseElemen
*/
public controlChooseItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this)
.forEach((imageObject) => {
/* TODO selftest
diff --git a/src/lib/elements/menu/MenuElement.ts b/src/lib/elements/menu/MenuElement.ts
index 6938d76a166b9847358458968240e00b4fbb42f3..b251bf817fdbb60790702db5fbe0405d792e63c3 100644
--- a/src/lib/elements/menu/MenuElement.ts
+++ b/src/lib/elements/menu/MenuElement.ts
@@ -1,7 +1,7 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
/**
* Menu entry model
@@ -14,7 +14,7 @@ export class MenuEntryModel {
/**
* Menu element model
*/
-export class MenuElementModel extends BaseContainerModel {
+export class MenuElementModel extends BaseContainerImageModel {
menuElements: MenuEntryModel[] | undefined;
circle?: PIXI.Circle;
}
@@ -26,7 +26,7 @@ export class MenuElement extends BaseContainer<MenuElementModel> {
/**
* Members
*/
- protected _fontSize: number;
+ protected _point: PIXI.IPoint;
/**
* Elements
@@ -41,11 +41,27 @@ export class MenuElement extends BaseContainer<MenuElementModel> {
// Parent constructor
super(model);
- // Members
- this._fontSize = Design.menu.fontSize;
-
// Setup
this.zIndex = Design.menu.zIndex;
+
+ //<editor-fold desc="Events">
+ // -- Added
+ this.on("added", () => {
+ // Events
+ // -- Move
+ this.image.moveInteraction.on("onMove", this.onMove, this);
+ // -- Zoom
+ this.image.zoomInteraction.on("onZoom", this.onZoom, this);
+ });
+ // -- Removed
+ this.on("removed", () => {
+ // Events
+ // -- Move
+ this.image.moveInteraction.off("onMove", this.onMove, this);
+ // -- Zoom
+ this.image.zoomInteraction.off("onZoom", this.onZoom, this);
+ });
+ //</editor-fold>
}
/**
@@ -57,7 +73,7 @@ export class MenuElement extends BaseContainer<MenuElementModel> {
this._buttonTextElement = new MedsurfDraw.Text({
text: "",
style: new PIXI.TextStyle({
- fontSize: this._fontSize,
+ fontSize: Design.menu.fontSize,
fill: 0xffffff,
align: 'center',
breakWords: true,
@@ -80,24 +96,14 @@ export class MenuElement extends BaseContainer<MenuElementModel> {
* Draw
*/
public draw(): void {
- let scale = this.getImageScale().x * Design.menu.scaleAspect;
- let radius = this.circle.radius;
- radius = Math.floor(radius / scale);
- let fontSize = Math.floor(this._fontSize / scale);
- if (fontSize < Design.menu.minFontSize) {
- this._buttonTextElement.hideItem();
- } else {
- // -- Button text element
- this._buttonTextElement.style.fontSize = fontSize;
- }
//<editor-fold desc="Elements">
// -- Menu elements
if (this.menuElements) {
this.menuElements.forEach((menuElement: MenuEntryModel) => {
// Set position
const angle = Design.menu.anglePositions[menuElement.order];
- const x = radius * Math.cos(angle * Math.PI / 180);
- const y = radius * Math.sin(angle * Math.PI / 180);
+ const x = this.circle.radius * Math.cos(angle * Math.PI / 180);
+ const y = this.circle.radius * Math.sin(angle * Math.PI / 180);
menuElement.element.position.set(x, y);
if (menuElement.element instanceof MedsurfDraw.IndexedRoundButtonElement
@@ -121,9 +127,7 @@ export class MenuElement extends BaseContainer<MenuElementModel> {
//<editor-fold desc="Elements">
// -- Menu elements
if (this.menuElements && this.menuElements.length > 0) {
- this.menuElements.forEach((menuElement: MenuEntryModel) => {
- this.removeChild(menuElement.element);
- });
+ this._unsetMenu(this.menuElements);
}
//</editor-fold>
@@ -131,7 +135,24 @@ export class MenuElement extends BaseContainer<MenuElementModel> {
super.destroy(options);
}
- //<editor-fold desc="Private functions">
+ //<editor-fold desc="Public functions">
+ /**
+ * Set mouse position
+ * @param point
+ */
+ public setMousePosition(point: PIXI.IPoint): void {
+ // Member
+ this._point = point;
+
+ // Position
+ this.position.set(
+ this.image.position.x + point.x * this.imageScale.x,
+ this.image.position.y + point.y * this.imageScale.y
+ );
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Menu">
/**
* Set menu
* @param menuElements
@@ -195,15 +216,14 @@ export class MenuElement extends BaseContainer<MenuElementModel> {
// @ts-ignore
this._buttonTextElement.text = text;
- // Members
- this._fontSize = fontSize;
-
// Elements
// -- Button text element
- this._buttonTextElement.showItem();
-
- // Draw
- this.draw();
+ if (fontSize < Design.menu.minFontSize) {
+ this._buttonTextElement.hideItem();
+ } else {
+ this._buttonTextElement.style.fontSize = fontSize;
+ this._buttonTextElement.showItem();
+ }
}
/**
@@ -217,16 +237,40 @@ export class MenuElement extends BaseContainer<MenuElementModel> {
}
//</editor-fold>
- //<editor-fold desc="ImageZoom">
+ //<editor-fold desc="Move">
/**
- * On image zoom
+ * On move
+ * @param event
+ * @param dX
+ * @param dY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
+ public onMove(event: PIXI.InteractionEvent, dX: number, dY: number): void {
+ if (!this._point) {
+ return;
+ }
- // Draw
- this.emit("debounceDraw");
+ // Position
+ this.position.set(
+ this.image.position.x + this._point.x * this.imageScale.x,
+ this.image.position.y + this._point.y * this.imageScale.y
+ );
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Zoom">
+ /**
+ * On zoom
+ */
+ public onZoom(): void {
+ if (!this._point) {
+ return;
+ }
+
+ // Position
+ this.position.set(
+ this.image.position.x + this._point.x * this.imageScale.x,
+ this.image.position.y + this._point.y * this.imageScale.y
+ );
}
//</editor-fold>
@@ -256,6 +300,9 @@ export class MenuElement extends BaseContainer<MenuElementModel> {
*/
public set circle(value: PIXI.Circle) {
this.data.circle = value;
+
+ // Draw
+ this.emit("debounceDraw");
}
/**
diff --git a/src/lib/elements/menu/RoundSubMenuElement.ts b/src/lib/elements/menu/RoundSubMenuElement.ts
index 90475909cfacd09e8bb69ff91a351355087a5f72..fe7c75efc823463f97632f2b89ce51d67e858d62 100644
--- a/src/lib/elements/menu/RoundSubMenuElement.ts
+++ b/src/lib/elements/menu/RoundSubMenuElement.ts
@@ -1,7 +1,7 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
/**
* Round sub menu entry model
@@ -14,7 +14,7 @@ export class RoundSubMenuEntryModel {
/**
* Round sub menu element model
*/
-export class RoundSubMenuElementModel extends BaseContainerModel {
+export class RoundSubMenuElementModel extends BaseContainerImageModel {
text: string;
description: string;
descriptionFontSize: number;
@@ -54,6 +54,7 @@ export class RoundSubMenuElement extends BaseContainer<RoundSubMenuElementModel>
//<editor-fold desc="Elements">
// -- Button element
this._buttonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: this.text,
description: this.description,
descriptionFontSize: this.descriptionFontSize,
@@ -67,12 +68,13 @@ export class RoundSubMenuElement extends BaseContainer<RoundSubMenuElementModel>
this.addChild(this._buttonElement);
// -- Button indicator element
this._buttonIndicatorElement = new MedsurfDraw.RoundButtonIndicatorElement({
+ image: this.image,
circle: new PIXI.Circle(0, 0, this.circle.radius),
});
this._buttonIndicatorElement.angle += 90;
this.addChild(this._buttonIndicatorElement);
// -- Container element
- this._containerElement = new MedsurfDraw.Container({});
+ this._containerElement = new MedsurfDraw.Container({image: this.image});
this._containerElement.position.x = this._buttonElement.width + Design.subMenu.buttonGab;
this._containerElement.hideItem();
this.addChild(this._containerElement);
@@ -247,11 +249,10 @@ export class RoundSubMenuElement extends BaseContainer<RoundSubMenuElementModel>
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Draw
this.emit("debounceDraw");
}
diff --git a/src/lib/elements/menu/SubMenuElement.ts b/src/lib/elements/menu/SubMenuElement.ts
index ea639bd8cf86aae172bc7addf311d4cbf9177e62..4f3cd37e22d27a4226198a85c3c7669d9302d2bf 100644
--- a/src/lib/elements/menu/SubMenuElement.ts
+++ b/src/lib/elements/menu/SubMenuElement.ts
@@ -1,7 +1,7 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
import {debounce} from "debounce";
import {RoundSubMenuEntryModel} from "../../public-api";
@@ -16,7 +16,7 @@ export class SubMenuEntryModel {
/**
* Sub menu element model
*/
-export class SubMenuElementModel extends BaseContainerModel {
+export class SubMenuElementModel extends BaseContainerImageModel {
text: string;
description: string;
descriptionFontSize: number;
@@ -79,6 +79,7 @@ export class SubMenuElement extends BaseContainer<SubMenuElementModel> {
//<editor-fold desc="Elements">
// -- Button element
this._buttonElement = new MedsurfDraw.ButtonElement({
+ image: this.image,
text: this.text,
description: this.description,
descriptionFontSize: this.descriptionFontSize,
@@ -90,7 +91,7 @@ export class SubMenuElement extends BaseContainer<SubMenuElementModel> {
this._buttonElement.on('button', this._emitButtonEvent, this);
this.addChild(this._buttonElement);
// -- Container element
- this._containerElement = new MedsurfDraw.Container({});
+ this._containerElement = new MedsurfDraw.Container({image: this.image});
this._containerElement.position.x = this._buttonElement.width + Design.subMenu.buttonGab;
this._containerElement.hideItem();
this.addChild(this._containerElement);
@@ -225,11 +226,10 @@ export class SubMenuElement extends BaseContainer<SubMenuElementModel> {
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Draw
this.emit("debounceDraw");
}
diff --git a/src/lib/elements/navigators/NavigatorElement.ts b/src/lib/elements/navigators/NavigatorElement.ts
index 9eb94271eab59b8e3d1b756a34d6c641f4733d07..78141515327c3aba7572b5186e5ae0cda702d0be 100644
--- a/src/lib/elements/navigators/NavigatorElement.ts
+++ b/src/lib/elements/navigators/NavigatorElement.ts
@@ -1,17 +1,15 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
-import {gsap} from "gsap";
-import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
-import {BaseSprite, BaseSpriteModel} from "../../bases/elements/BaseSprite";
+import { BaseContainer, BaseContainerImageModel } from "../../bases/elements/BaseContainer";
+import { BaseSprite, BaseSpriteImageModel } from "../../bases/elements/BaseSprite";
+import { Design } from "../../config/design";
/**
* Navigator element model
*/
-export class NavigatorElementModel extends BaseContainerModel {
+export class NavigatorElementModel extends BaseContainerImageModel {
renderer: PIXI.Renderer | PIXI.CanvasRenderer;
canvas: HTMLCanvasElement;
- image: MedsurfDraw.Image;
app: PIXI.Application;
}
@@ -48,7 +46,7 @@ export class NavigatorElement extends BaseContainer<NavigatorElementModel> {
* Elements
*/
protected _backgroundElement: MedsurfDraw.Rectangle;
- protected _spriteElement: BaseSprite<BaseSpriteModel>;
+ protected _spriteElement: BaseSprite<BaseSpriteImageModel>;
protected _visibleAreaElement: MedsurfDraw.Rectangle;
protected _toggleButtonElement: MedsurfDraw.ButtonElement;
protected _zoomInButtonElement: MedsurfDraw.ButtonElement;
@@ -134,6 +132,7 @@ export class NavigatorElement extends BaseContainer<NavigatorElementModel> {
this.addChild(this._backgroundElement);
// -- Image Element
this._spriteElement = new BaseSprite({
+ image: this.image,
texture: this._texture
});
this._spriteElement.interactive = true;
@@ -150,6 +149,7 @@ export class NavigatorElement extends BaseContainer<NavigatorElementModel> {
this.addChild(this._visibleAreaElement);
// -- Zoom in button element
this._zoomInButtonElement = new MedsurfDraw.ButtonElement({
+ image: this.image,
text: "\uf00e",
description: "Hineinzoomen",
descriptionFontSize: 6,
@@ -160,6 +160,7 @@ export class NavigatorElement extends BaseContainer<NavigatorElementModel> {
this.addChild(this._zoomInButtonElement);
// -- Toggle button element
this._toggleButtonElement = new MedsurfDraw.ButtonElement({
+ image: this.image,
text: this._spriteElement.visible ? "\uf070" : "\uf06e",
description: "Sichtbar",
descriptionFontSize: 6,
@@ -170,6 +171,7 @@ export class NavigatorElement extends BaseContainer<NavigatorElementModel> {
this.addChild(this._toggleButtonElement);
// -- Zoom out button element
this._zoomOutButtonElement = new MedsurfDraw.ButtonElement({
+ image: this.image,
text: "\uf010",
description: "Herrauszoomen",
descriptionFontSize: 6,
@@ -419,7 +421,7 @@ export class NavigatorElement extends BaseContainer<NavigatorElementModel> {
protected _onMove(event: PIXI.InteractionEvent, dX: number, dY: number): void {
event.stopPropagation();
- const scale = this.getImageScale();
+ const scale = this.imageScale;
const scaledX = -1 * dX / this._spriteElement.width * this.canvas.width * scale.x;
const scaledY = -1 * dY / this._spriteElement.height * this.canvas.height * scale.y;
@@ -442,7 +444,7 @@ export class NavigatorElement extends BaseContainer<NavigatorElementModel> {
// TODO console.log((x - this.position.x) / this._spriteElement.width * this.canvas.width);
// TODO console.log(y / this._spriteElement.height * this.canvas.height);
- const scale = this.getImageScale();
+ const scale = this.imageScale;
const scaledX = (x - this.position.x) / this._spriteElement.width * this.canvas.width / scale.x;
const scaledY = y / this._spriteElement.height * this.canvas.height / scale.y;
@@ -530,8 +532,8 @@ export class NavigatorElement extends BaseContainer<NavigatorElementModel> {
this._visibleAreaElement.rectangle.height = this._spriteElement.height * (this.canvas.height / this.image.actualHeight / scale.y);
*/
} else {
- const scaleX = 1 + this._scale.x - this.image.scale.x;
- const scaleY = 1 + this._scale.y - this.image.scale.y;
+ const scaleX = 1 + this._scale.x - this.imageScale.x;
+ const scaleY = 1 + this._scale.y - this.imageScale.y;
const widthAspect = this._backgroundElement.width / this.canvas.width;
const heightAspect = this._backgroundElement.height / this.canvas.height;
this._visibleAreaElement.rectangle = new PIXI.Rectangle(
@@ -569,39 +571,6 @@ export class NavigatorElement extends BaseContainer<NavigatorElementModel> {
}
//</editor-fold>
- //<editor-fold desc="BaseContainer">
- /**
- * Get canvas
- */
- public getCanvas(): HTMLCanvasElement {
- return this.canvas;
- }
-
- /**
- * Get image
- */
- public getImage(): MedsurfDraw.Image {
- return this.image.getImage();
- }
-
- /**
- * Get rectangle
- */
- public getImageScale(): PIXI.IPoint {
- if (!this.image) {
- return new PIXI.Point(0, 0);
- }
- return this.image.getImageScale();
- }
-
- /**
- * Get image dimensions
- */
- public getImageDimensions(): MedsurfDraw.Dimensions {
- return this.image.getImageDimensions();
- }
- //</editor-fold>
-
//<editor-fold desc="Getter and Setter">
/**
* Get move interaction
diff --git a/src/lib/elements/number/NumberElement.ts b/src/lib/elements/number/NumberElement.ts
index e079403aa125c7278aff67f77b2737c3be91bc00..af9838b4b1e6ce57ed1f9b4984b476e6383df903 100644
--- a/src/lib/elements/number/NumberElement.ts
+++ b/src/lib/elements/number/NumberElement.ts
@@ -1,9 +1,9 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
-export class NumberElementModel extends BaseContainerModel {
+export class NumberElementModel extends BaseContainerImageModel {
rectangle: PIXI.Rectangle = new PIXI.Rectangle(0, 0, 20, 20);
value: number | undefined;
minValue: number;
@@ -58,6 +58,7 @@ export class NumberElement extends BaseContainer<NumberElementModel> {
this.addChild(this._valueElement);
// -- Number slider element
this._numberSliderElement = new MedsurfDraw.NumberSliderElement({
+ image: this.image,
value: this.value,
minValue: this.minValue,
maxValue: this.maxValue,
diff --git a/src/lib/elements/number/NumberSliderElement.ts b/src/lib/elements/number/NumberSliderElement.ts
index cee78bfc4694e44cdb5a4ff1016be209dda3dd4f..11fa32961a51fd0398c4a048479ce497edbf9535 100644
--- a/src/lib/elements/number/NumberSliderElement.ts
+++ b/src/lib/elements/number/NumberSliderElement.ts
@@ -1,9 +1,9 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
-export class NumberSliderElementModel extends BaseContainerModel {
+export class NumberSliderElementModel extends BaseContainerImageModel {
value: number | undefined;
minValue: number;
maxValue: number;
@@ -172,7 +172,7 @@ export class NumberSliderElement extends BaseContainer<NumberSliderElementModel>
// @ts-ignore TODO ignore
const globalPosition = this.getGlobalPosition();
- this._x = Math.round(event.data.global.x - globalPosition.x) / this.getImageScale().x;
+ this._x = Math.round(event.data.global.x - globalPosition.x) / this.imageScale.x;
const modX = this._x % this._gabWidth;
// Get correct posX
diff --git a/src/lib/elements/positionings/PositionPoint.ts b/src/lib/elements/positionings/PositionPoint.ts
index 81342907b88613ac1c40aca0c530d07097fcd7a9..b56d41ecade3daba8234eebce6a0397c0d7fedc7 100644
--- a/src/lib/elements/positionings/PositionPoint.ts
+++ b/src/lib/elements/positionings/PositionPoint.ts
@@ -50,11 +50,12 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
/**
* Constructor
+ * @param image
* @param model
*/
- public constructor(model: Models.PositionPoint) {
+ public constructor(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.PositionPoint) {
// Parent constructor
- super({model});
+ super({image, model});
// Setup
this.zIndex = Design.positionPoint.zIndexDefault + this.model.zIndex || 0;
@@ -152,7 +153,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
public init(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Position
this.position.set(
@@ -192,9 +193,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -210,9 +212,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -220,9 +223,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -242,9 +246,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -260,9 +265,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -278,9 +284,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -296,9 +303,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -325,7 +333,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
public draw(): void {
// Elements
- let scale = this.getImageScale().x * Design.positionPoint.scaleAspect;
+ let scale = this.imageScale.x * Design.positionPoint.scaleAspect;
let lineWidth = Math.floor(Design.positionPoint.lineWidth || 1 / scale);
if (lineWidth < 1) {
lineWidth = 1;
@@ -451,11 +459,12 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
//<editor-fold desc="Static functions">
/**
* Get instance
+ * @param image
*/
- public static getInstance(): PositionPoint {
+ public static getInstance(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage): PositionPoint {
// Element
// -- Position point
- return new PositionPoint({
+ return new PositionPoint(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.POSITIONPOINT,
@@ -475,7 +484,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
* Get lines
*/
public getLines(): MedsurfDraw.Line[] {
- return this.getImage().getLinesByPositionPoint(this);
+ return this.image.getLinesByPositionPoint(this);
}
//</editor-fold>
@@ -651,7 +660,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this.on("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -694,7 +703,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this.on("mouseup", this.selectInteraction.onSelect, this.selectInteraction);
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -752,7 +761,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
MedsurfDraw.Keyboard.events.on("released_ArrowLeft", "onPositionPointMoveLeftEnd", this.moveInteraction.moveRelease.bind(this.moveInteraction));
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -799,7 +808,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
// TODO remove console.log("pp _removeModeSelectItem", mode);
if (mode === 'author') {
- this.emit("debounceControlUnselectItem", this.getImage());
+ this.emit("debounceControlUnselectItem", this.image);
}
/* TODO remove
if (!mode.startsWith('select_child') && !mode.startsWith('select_item') && !mode.startsWith('choose_item')
@@ -1091,7 +1100,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
* @private
*/
protected _modeDelete(): void {
- const image = this.getImage();
+ const image = this.image;
if (image) {
// Select layer group
@@ -1131,7 +1140,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editImageObject(this.model);
+ this.image.editImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -1143,10 +1152,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this.model.zIndex++;
this.zIndex = Design.positionPoint.zIndexDefault + this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
/**
@@ -1157,10 +1166,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this.model.zIndex--;
this.zIndex = Design.positionPoint.zIndexDefault + this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Delete">
@@ -1188,10 +1197,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().degroupLayerGroupImageObject(this.model);
+ this.image.degroupLayerGroupImageObject(this.model);
if (unselectElement) {
- this.getImage().unselectLayerGroup();
- this.getImage().selectImageObject(this.model);
+ this.image.unselectLayerGroup();
+ this.image.selectImageObject(this.model);
}
}
//</editor-fold>
@@ -1204,7 +1213,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this.collapseAllMenus(new PIXI.InteractionEvent());
// Copy image object
- this.getImage().copyImageObject(this.model);
+ this.image.copyImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Clipboard">
@@ -1216,7 +1225,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this.collapseAllMenus(new PIXI.InteractionEvent());
// Clipboard image object
- this.getImage().clipboardImageObject(this.model);
+ this.image.clipboardImageObject(this.model);
}
//</editor-fold>
//<editor-fold desc="Selftest">
@@ -1239,7 +1248,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this._selftestContainerElement.draw();
*/
} else {
- const imageObjects = this.getImage().getImageObjects();
+ const imageObjects = this.image.getImageObjects();
const items = this.model.selftestItems;
this.model.selftestItems = []; // Remove existing items
if (items) {
@@ -1258,7 +1267,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
// Emits
// TODO not needed this.emit("selftestChanged");
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
}
//</editor-fold>
//</editor-fold>
@@ -1269,7 +1278,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
public controlSelectItem(): void {
// Emits
- this.getImage().selectImageObject(this.model);
+ this.image.selectImageObject(this.model);
// Select item
this.externControlSelectItem();
@@ -1295,7 +1304,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
public externControlSelectItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this)
.forEach((imageObject) => {
if (this.model.selftestItems && this.model.selftestItems.indexOf(imageObject.name as string) > -1) {
@@ -1347,7 +1356,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
public controlUnselectLayerGroup(): void {
// Emits
- this.getImage().unselectLayerGroup();
+ this.image.unselectLayerGroup();
}
/**
@@ -1356,7 +1365,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
public controlDrawItem(isNew: boolean): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this && !imageObject.modeInteraction.lastMode.startsWith('draw'))
.forEach((imageObject) => {
imageObject.modeInteraction.setMode('blocked_item');
@@ -1374,7 +1383,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
public controlChooseItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this)
.forEach((imageObject) => {
if (this.model.selftestItems && this.model.selftestItems.indexOf(imageObject.name as string) > -1) {
@@ -1407,7 +1416,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
public controlCloneItem(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this && !imageObject.modeInteraction.lastMode.startsWith('clone'))
.forEach((imageObject) => {
imageObject.modeInteraction.setMode('blocked_item');
@@ -1446,7 +1455,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
public onMove(event: PIXI.InteractionEvent, dX: number, dY: number) {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Position
this.position.x += dX;
@@ -1484,7 +1493,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
// Emits
this.emit("pointerover", event);
- this.getImage().updateImageObject(this.model);
+ this.image.updateImageObject(this.model);
+
+ // Emit end position point move
+ this.emit("endPositionPointMove");
}
/**
@@ -1537,7 +1549,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
if (lastMode === 'select_layer_group') {
this.controlSelectItem();
} else {
- if (!this.controlSelectLayerGroup(this.getImage()) && !preventSelectItem) {
+ if (!this.controlSelectLayerGroup(this.image) && !preventSelectItem) {
this.controlSelectItem();
}
}
@@ -1549,7 +1561,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
public onSelftest(): void {
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.forEach((imageObject) => {
if (imageObject === this
|| (this.model.selftestItems
@@ -1606,7 +1618,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
});
// Get image
- const image = this.getImage();
+ const image = this.image;
// Release event
image.parent.once('pointerup', this.onSelftestRelease, this);
@@ -1621,8 +1633,8 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
this.selectInteraction.onRelease(event);
// Set default mode for image children
- const defaultMode = this.getImage().modeInteraction.defaultMode;
- this.getImage().getImageObjects()
+ const defaultMode = this.image.modeInteraction.defaultMode;
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== this)
.forEach((imageObject) => {
imageObject.modeInteraction.setMode(defaultMode);
@@ -1640,7 +1652,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
// Get image
- const image = this.getImage();
+ const image = this.image;
// Prevent Image move
image.moveInteraction.endMove(new PIXI.InteractionEvent());
@@ -1723,11 +1735,10 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Draw
// TODO
// if (this.modeInteraction.lastMode === 'select' || this.modeInteraction.lastMode === 'selftest') {
@@ -1742,7 +1753,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint, Ba
*/
public getElementRectangle(): PIXI.Rectangle {
// Elements
- let scale = this.getImageScale().x * Design.positionPoint.scaleAspect;
+ let scale = this.imageScale.x * Design.positionPoint.scaleAspect;
let radius = Design.positionPoint.radius;
// TODO if (this.modeInteraction.lastMode === 'select' || this.modeInteraction.lastMode === 'selftest') {
radius = Math.floor(radius / scale);
diff --git a/src/lib/elements/positionings/SelftestPoint.ts b/src/lib/elements/positionings/SelftestPoint.ts
new file mode 100644
index 0000000000000000000000000000000000000000..db76dff141f180ac9d9f2d9cc71e4ea598a2d68a
--- /dev/null
+++ b/src/lib/elements/positionings/SelftestPoint.ts
@@ -0,0 +1,323 @@
+import * as PIXI from "pixi.js-legacy";
+import * as MedsurfDraw from "../../public-api";
+import * as Models from '@ascii-dev-user/medsurf-lib/models';
+import {Design} from "../../config/design";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
+
+/**
+ * Selftest point model
+ */
+export class SelftestPointModel extends BaseContainerImageModel {
+ selftestPoint: Models.Point;
+ options: Models.ElementOptions = {hasLine: true, lineColor: 0xFFFFFF, lineAlpha: 1, hasFill: false};
+}
+
+/**
+ * Selftest point
+ */
+export class SelftestPoint extends BaseContainer<SelftestPointModel> {
+ /**
+ * Interactions
+ */
+ private _selectInteraction: MedsurfDraw.SelectInteraction<SelftestPoint>;
+
+ /**
+ * Elements
+ */
+ protected _selftestPointElement: MedsurfDraw.Circle;
+
+ /**
+ * Constructor
+ * @param model
+ */
+ public constructor(model: SelftestPointModel) {
+ // Parent constructor
+ super(model);
+
+ // Setup
+ this.zIndex = Design.wedgePoint.zIndex;
+
+ //<editor-fold desc="Interactions">
+ // -- Mode interaction
+ this.modeInteraction.on("default", this._modeDefault, this);
+ this.modeInteraction.on("remove-default", this._removeModeDefault, this);
+ this.modeInteraction.on("selftest", this._modeSelftest, this);
+ this.modeInteraction.on("remove-selftest", this._removeModeSelftest, this);
+ // -- Select interaction
+ this.selectInteraction = new MedsurfDraw.SelectInteraction(this);
+ this.selectInteraction.on("onHover", this.onHover, this);
+ this.selectInteraction.on("onOut", this.onOut, this);
+ this.selectInteraction.on("onSelftest", this.onSelftest, this);
+ //</editor-fold>
+
+ //<editor-fold desc="Events">
+ // -- Added
+ this.on("added", () => {
+ // Events
+ // -- Move
+ this.image.moveInteraction.on("onMove", this.onMove, this);
+ // -- Zoom
+ this.image.zoomInteraction.on("onZoom", this.onZoom, this);
+ });
+ // -- Removed
+ this.on("removed", () => {
+ // Events
+ // -- Move
+ this.image.moveInteraction.off("onMove", this.onMove, this);
+ // -- Zoom
+ this.image.zoomInteraction.off("onZoom", this.onZoom, this);
+ });
+ //</editor-fold>
+ }
+
+ /**
+ * Init
+ */
+ public init(): void {
+ // Position
+ this.position.set(
+ this.image.position.x + this.selftestPoint.x * this.imageScale.x,
+ this.image.position.y + this.selftestPoint.y * this.imageScale.y
+ );
+
+ //<editor-fold desc="Elements">
+ // -- Selftest point element
+ this._selftestPointElement = new MedsurfDraw.Circle({
+ circle: new PIXI.Circle(0, 0, Design.selftest.selftestRadius),
+ options: Object.assign({}, this.options),
+ lineWidth: Design.selftest.lineWidth
+ });
+ this.addChild(this._selftestPointElement);
+ //</editor-fold>
+
+ // Sort items
+ this.sortChildren();
+
+ // Draw
+ this.emit("debounceDraw");
+ }
+
+ /**
+ * Draw
+ */
+ public draw(): void {
+ //<editor-fold desc="Elements">
+ // -- Selftest point element
+ this._selftestPointElement.draw();
+ //</editor-fold>
+ }
+
+ /**
+ * Destroy
+ * @param options
+ */
+ public destroy(options?: { children?: boolean; texture?: boolean; baseTexture?: boolean }): void {
+ //<editor-fold desc="Elements">
+ // -- Selftest point element
+ if (this._selftestPointElement) {
+ this._selftestPointElement.destroy(options);
+ }
+ //</editor-fold>
+
+ // Parent destroy
+ super.destroy(options);
+ }
+
+ //<editor-fold desc="Mode">
+ /**
+ * Mode default
+ * @private
+ */
+ protected _modeDefault(): void {
+ // Hide item
+ this.hideItem();
+ }
+
+ /**
+ * Remove mode default
+ * @private
+ */
+ protected _removeModeDefault(): void {
+ }
+
+ /**
+ * Mode selftest
+ * @private
+ */
+ protected _modeSelftest(): void {
+ // Setup
+ this.interactive = true;
+ this.cursor = "select";
+
+ // Events
+ this.selectInteraction.reset();
+ this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+
+ // Show item
+ this.showItem();
+ }
+
+ /**
+ * Remove mode selftest
+ * @param parent
+ * @param mode
+ * @protected
+ */
+ protected _removeModeSelftest(parent: MedsurfDraw.ImageObject, mode: string): void {
+ // Setup
+ this.interactive = false;
+
+ // Events
+ this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
+ this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
+ this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
+ this.off("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+
+
+ if (mode !== 'selftest') {
+ //<editor-fold desc="Elements">
+ // -- Selftest ppint element
+ this._selftestPointElement.circle.radius = Design.selftest.selftestRadius;
+ //</editor-fold>
+ }
+
+ // Hide item
+ this.hideItem();
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Move">
+ /**
+ * On move
+ */
+ public onMove(): void {
+ if (!this.selftestPoint) {
+ return;
+ }
+
+ // Position
+ this.position.set(
+ this.image.position.x + this.selftestPoint.x * this.imageScale.x,
+ this.image.position.y + this.selftestPoint.y * this.imageScale.y
+ );
+ }
+
+ /**
+ * On selftest
+ * @private
+ */
+ public onSelftest(): void {
+ //<editor-fold desc="Elements">
+ // -- Selftest ppint element
+ this._selftestPointElement.circle.radius = Design.selftest.selftestRadiusSelected;
+ //</editor-fold>
+
+ // Draw
+ this.emit("debounceDraw");
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Zoom">
+ /**
+ * On zoom
+ */
+ public onZoom(): void {
+ if (!this.selftestPoint) {
+ return;
+ }
+
+ // Position
+ this.position.set(
+ this.image.position.x + this.selftestPoint.x * this.imageScale.x,
+ this.image.position.y + this.selftestPoint.y * this.imageScale.y
+ );
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Select">
+ /**
+ * On hover
+ */
+ public onHover(): void {
+ // Setup
+ this._selftestPointElement.options.lineColor = Design.primitive.lineColorHover;
+ this._selftestPointElement.options.fillColor = Design.primitive.fillColorHover;
+
+ // Draw
+ this.emit("debounceDraw");
+ }
+
+ /**
+ * On out
+ */
+ public onOut(): void {
+ // Setup
+ this._selftestPointElement.options = Object.assign({}, this.options);
+
+ // Draw
+ this.emit("debounceDraw");
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Getter and Setter">
+ /**
+ * Get selftest point
+ */
+ public get selftestPoint(): Models.Point {
+ return this.data.selftestPoint;
+ }
+
+ /**
+ * Set selftest point
+ * @param value
+ */
+ public set selftestPoint(value: Models.Point) {
+ this.data.selftestPoint = value;
+
+ // Position
+ this.position.set(
+ this.image.position.x + this.selftestPoint.x * this.imageScale.x,
+ this.image.position.y + this.selftestPoint.y * this.imageScale.y
+ );
+ }
+
+ /**
+ * Get options
+ */
+ public get options(): Models.ElementOptions {
+ return this.data.options;
+ }
+
+ /**
+ * Set options
+ * @param value
+ */
+ public set options(value: Models.ElementOptions) {
+ this.data.options = value;
+
+ // Elements
+ this._selftestPointElement.options = Object.assign({}, this.data.options);
+
+ // Draw
+ this.emit("debounceDraw");
+ }
+
+ /**
+ * Get select interaction
+ */
+ public get selectInteraction(): MedsurfDraw.SelectInteraction<SelftestPoint> {
+ return this._selectInteraction;
+ }
+
+ /**
+ * Set select interaction
+ * @param value
+ */
+ public set selectInteraction(value: MedsurfDraw.SelectInteraction<SelftestPoint>) {
+ this._selectInteraction = value;
+ }
+ //</editor-fold>
+}
\ No newline at end of file
diff --git a/src/lib/elements/positionings/WedgePoint.ts b/src/lib/elements/positionings/WedgePoint.ts
index 1ab69607531440e1a5dbc33eea929c94eb194122..3ead9e0650e66163a6f663df277f35f584ec33dc 100644
--- a/src/lib/elements/positionings/WedgePoint.ts
+++ b/src/lib/elements/positionings/WedgePoint.ts
@@ -2,12 +2,12 @@ import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import * as Models from '@ascii-dev-user/medsurf-lib/models';
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
/**
* Wedge point model
*/
-export class WedgePointModel extends BaseContainerModel {
+export class WedgePointModel extends BaseContainerImageModel {
wedgePoint: Models.Point;
}
@@ -60,10 +60,7 @@ export class WedgePoint extends BaseContainer<WedgePointModel> {
*/
public init(): void {
// Position
- this.position.set(
- this.wedgePoint.x,
- this.wedgePoint.y
- );
+ this.position.set(this.wedgePoint.x, this.wedgePoint.y);
//<editor-fold desc="Elements">
// -- Wedge point element
@@ -87,13 +84,10 @@ export class WedgePoint extends BaseContainer<WedgePointModel> {
*/
public draw(): void {
// Position
- this.position.set(
- this.wedgePoint.x,
- this.wedgePoint.y
- );
+ this.position.set(this.wedgePoint.x, this.wedgePoint.y);
// Elements
- let scale = this.getImageScale().x * Design.wedgePoint.scaleAspect;
+ let scale = this.imageScale.x * Design.wedgePoint.scaleAspect;
let radius = Design.wedgePoint.radius;
// TODO if (this.modeInteraction.lastMode === 'select' || this.modeInteraction.lastMode === 'selftest') {
radius = Math.floor(radius / scale);
@@ -127,7 +121,7 @@ export class WedgePoint extends BaseContainer<WedgePointModel> {
//</editor-fold>
// Elements
- // -- Caret element
+ // -- Wedge point element
if (this._wedgePointElement) {
this._wedgePointElement.destroy(options);
}
@@ -230,11 +224,10 @@ export class WedgePoint extends BaseContainer<WedgePointModel> {
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Draw
this.emit("debounceDraw");
}
diff --git a/src/lib/elements/positionings/public-api.ts b/src/lib/elements/positionings/public-api.ts
index 95594cc74b4d3b56f72c5afd2e3f9b194da9beb8..66bec0cfda969bf91ae3c96c5d8cea09698f34a2 100644
--- a/src/lib/elements/positionings/public-api.ts
+++ b/src/lib/elements/positionings/public-api.ts
@@ -1,2 +1,3 @@
export * from "./PositionPoint";
+export * from "./SelftestPoint";
export * from "./WedgePoint";
\ No newline at end of file
diff --git a/src/lib/elements/primitives/ArrowPrimitive.ts b/src/lib/elements/primitives/ArrowPrimitive.ts
index bc3dfb2c3d4469dd36dcfdf58ef8387ef110e1a2..2a15e73012c9abdfeed6d7d741e6296707a889e5 100644
--- a/src/lib/elements/primitives/ArrowPrimitive.ts
+++ b/src/lib/elements/primitives/ArrowPrimitive.ts
@@ -38,7 +38,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
* Elements
*/
protected _arrowElement: MedsurfDraw.Arrow;
- protected _selftestElement: MedsurfDraw.Circle;
+ protected _selftestElement: MedsurfDraw.SelftestPoint;
// protected _wedgePointElement: MedsurfDraw.WedgePoint;
/**
@@ -63,11 +63,12 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
/**
* Constructor
+ * @param image
* @param model
*/
- public constructor(model: Models.ArrowPrimitive) {
+ public constructor(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.ArrowPrimitive) {
// Parent constructor
- super({model});
+ super({image, model});
// Setup
this.zIndex = Design.arrowPrimitive.zIndexDefault + this.model.zIndex;
@@ -128,18 +129,26 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
//<editor-fold desc="Events">
// -- Added
- this.on("added", () => {
+ this.on("added", (parent: MedsurfDraw.PositionPoint) => {
// Events
// -- Debounce
this.on("debounceControlSelectItem", this._debounceControlSelectItemMethod);
this.on("debounceControlUnselectItem", this._debounceControlUnselectItemMethod);
+ // -- Move
+ parent.on("endPositionPointMove", this.endPositionPointMove, this);
+ // -- Selftest
+ this._selftestElement.selectInteraction.on("onSelftest", this.onSelftest, this);
});
// -- Removed
- this.on("removed", () => {
+ this.on("removed", (parent: MedsurfDraw.PositionPoint) => {
// Events
// -- Debounce
this.off("debounceControlSelectItem", this._debounceControlSelectItemMethod);
this.off("debounceControlUnselectItem", this._debounceControlUnselectItemMethod);
+ // -- Move
+ parent.off("endPositionPointMove", this.endPositionPointMove, this);
+ // -- Selftest
+ this._selftestElement.selectInteraction.off("onSelftest", this.onSelftest, this);
});
//</editor-fold>
}
@@ -149,7 +158,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
*/
public init(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Get wedge point
this.wedgePoint = this.model.wedgePoint
@@ -172,14 +181,15 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
});
this.addChild(this._arrowElement);
// -- Selftest element
- this._selftestElement = new MedsurfDraw.Circle({
- circle: new PIXI.Circle(0, 0, Design.selftest.selftestRadius),
- options: Object.assign({}, this.model.options),
- lineWidth: Design.selftest.lineWidth
+ this._selftestElement = new MedsurfDraw.SelftestPoint({
+ image: this.image,
+ selftestPoint: new PIXI.Point(
+ this.parent.x + this.model.rectangle.x * imageWidth,
+ this.parent.y + this.model.rectangle.y * imageWidth
+ ),
+ options: Object.assign({}, this.model.options),
});
- this._selftestElement.zIndex = Design.selftest.zIndex;
- this._selftestElement.hideItem();
- this.addChild(this._selftestElement);
+ this.image.parent.addChild(this._selftestElement);
// -- Wedge point element
/* TODO remove
this._wedgePointElement = new MedsurfDraw.WedgePoint({
@@ -195,9 +205,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -213,9 +224,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -223,9 +235,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -246,9 +259,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -264,9 +278,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -282,9 +297,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
//<editor-fold desc="Mirror">
// -- Horizontal mirror button element
this._horizontalMirrorButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf89c',
description: 'Horizontal\nspiegeln',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -292,9 +308,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this._horizontalMirrorButtonElement.on("button", this.onButtonHorizontalMirror, this);
// -- Vertical mirror button element
this._verticalMirrorButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf89d',
description: 'Vertikal\nspiegeln',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._horizontalMirrorButtonElement,
@@ -315,9 +332,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -333,9 +351,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -371,25 +390,6 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
// -- Arrow element
this._arrowElement.draw();
this._arrowElement.pivot.set(this._arrowElement.rectangle.width / 2, this._arrowElement.rectangle.height / 2);
- // -- Selftest element
- if (this._selftestElement.visible) {
- let scale = this.getImageScale().x * Design.selftest.scaleAspect;
- let lineWidth = Math.floor(Design.selftest.lineWidth || 1 / scale);
- if (lineWidth < 1) {
- lineWidth = 1;
- }
- console.log(this._selftestElement);
- let radius = this._selftestSelected ? Design.selftest.selftestRadiusSelected : Design.selftest.selftestRadius;
- radius = Math.floor(radius / scale);
- this._selftestElement.circle.radius = radius;
- this._selftestElement.lineWidth = lineWidth;
- this._selftestElement.draw();
- }
- // -- Wedge point element
- /* TODO remove
- this._wedgePointElement.draw();
- this._wedgePointElement.pivot.set(this._arrowElement.rectangle.width / 2, this._arrowElement.rectangle.height / 2);
- */
//</editor-fold>
}
@@ -500,14 +500,16 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
//<editor-fold desc="Static functions">
/**
* Get instance
+ * @param image
* @param hasWedgePoint
* @param rotateWithLine
* @param imageWidth
*/
- public static getInstance(hasWedgePoint: boolean, rotateWithLine: boolean, imageWidth: number): ArrowPrimitive {
+ public static getInstance(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, hasWedgePoint: boolean,
+ rotateWithLine: boolean, imageWidth: number): ArrowPrimitive {
// Element
// -- Arrow primitive
- return new ArrowPrimitive({
+ return new ArrowPrimitive(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.ARROW,
@@ -594,11 +596,13 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.cursor = "select";
// Events
+ /* TODO remove
this.selectInteraction.reset();
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
// Show item
this.showItem();
@@ -612,15 +616,15 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
// -- Arrow element
this._arrowElement.hideItem();
- // -- Selftest element
- this._selftestElement.showItem()
// Events
+ /* TODO remove
this.selectInteraction.reset();
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
// Show item
this.showItem();
@@ -644,14 +648,14 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
// Elements
// -- Arrow element
this._arrowElement.showItem();
- // -- Selftest element
- this._selftestElement.hideItem();
// Events
+ /* TODO remove
this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.off("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
}
/**
@@ -800,7 +804,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
MedsurfDraw.Keyboard.events.on("released_ArrowLeft", "onPositionPointMoveLeftEnd", this.moveInteraction.moveRelease.bind(this.moveInteraction));
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -869,7 +873,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.onOut();
// Control Update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -886,7 +890,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
*/
protected _removeModeSelectItemColorLine(parent: MedsurfDraw.ImageObject, mode: string): void {
// Control save color line
- this.getImage().controlSaveColor(this.model.options.lineColor, this.model.options.lineAlpha);
+ this.image.controlSaveColor(this.model.options.lineColor, this.model.options.lineAlpha);
// Remove mode select item color
this._removeModeSelectItemColor(parent, mode);
@@ -900,7 +904,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
*/
protected _removeModeSelectItemColorFill(parent: MedsurfDraw.ImageObject, mode: string): void {
// Control save color fill
- this.getImage().controlSaveColor(this.model.options.fillColor, this.model.options.fillAlpha);
+ this.image.controlSaveColor(this.model.options.fillColor, this.model.options.fillAlpha);
// Remove mode select item color
this._removeModeSelectItemColor(parent, mode);
@@ -927,7 +931,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.onOut();
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -1085,7 +1089,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
// Setup parent
if (parent) {
// Get image
- const image = parent.getImage();
+ const image = parent.image;
if (parent.model.primitives) {
let index = parent.model.primitives.findIndex((primitive: any) => primitive.id === this.model.id);
@@ -1135,7 +1139,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editPrimitive(this.model);
+ this.image.editPrimitive(this.model);
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -1147,10 +1151,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.model.zIndex++;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1161,10 +1165,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.model.zIndex--;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1207,8 +1211,8 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
// Emit
if (unselectElement) {
- this.getImage().unselectLayerGroup();
- this.getImage().selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
+ this.image.unselectLayerGroup();
+ this.image.selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
}
}
//</editor-fold>
@@ -1233,10 +1237,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.model.angle = this.rotation;
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1259,10 +1263,10 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.model.angle = this.rotation;
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1318,12 +1322,14 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
// Elements
// -- Arrow element
this._arrowElement.options = Object.assign({}, this.model.options);
+ // -- Selftest element
+ this._selftestElement.options = Object.assign({}, this.model.options);
// Draw
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
} else if (mode === ColorMode.FILL) {
// Update model
this.model.options.hasFill = has;
@@ -1333,12 +1339,14 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
// Elements
// -- Arrow element
this._arrowElement.options = Object.assign({}, this.model.options);
+ // -- Selftest element
+ this._selftestElement.options = Object.assign({}, this.model.options);
// Draw
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
}
//</editor-fold>
@@ -1351,18 +1359,18 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
public onNumber(mode: NumberMode, number: number): void {
if (mode === NumberMode.WIDTH) {
// Update model
- this.model.strokeWidth = number / this.getImageDimensions().width;
+ this.model.strokeWidth = number / this.imageDimensions.width;
// Elements
// -- Arrow element
- this._arrowElement.lineWidth = this.model.strokeWidth ? Math.round(this.model.strokeWidth * this.getImageDimensions().width * 100) / 100 : undefined;
+ this._arrowElement.lineWidth = this.model.strokeWidth ? Math.round(this.model.strokeWidth * this.imageDimensions.width * 100) / 100 : undefined;
// Draw
this.emit("debounceDraw");
// Emits
this.emit("onBackgroundNumber");
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
}
//</editor-fold>
@@ -1381,7 +1389,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
}
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
//<editor-fold desc="Static">
@@ -1392,7 +1400,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
//</editor-fold>
@@ -1403,7 +1411,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
*/
public controlSelectItem(): void {
// Emits
- this.getImage().selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
+ this.image.selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
// Select item
this.externControlSelectItem();
@@ -1415,7 +1423,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
*/
public controlUnselectItem(parent: MedsurfDraw.PositionPoint): void {
// Get image
- const image = parent.getImage();
+ const image = parent.image;
// Set select layer
if(!parent.controlSelectLayerGroup(image)) {
@@ -1435,7 +1443,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
const parent = this.parent as MedsurfDraw.PositionPoint;
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== parent)
.forEach((imageObject) => {
if (parent.model.selftestItems && parent.model.selftestItems.indexOf(imageObject.name as string) > -1) {
@@ -1495,7 +1503,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
*/
public onMove(event: PIXI.InteractionEvent, dX: number, dY: number): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Check if "Ctrl"-Key pressed
if (MedsurfDraw.Keyboard.isKeyDown("ControlLeft") || MedsurfDraw.Keyboard.isKeyDown("ControlRight")) {
@@ -1504,6 +1512,13 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.model.rectangle.x = this.position.x / imageWidth;
this.model.rectangle.y = this.position.y / imageWidth;
+ // Elements
+ // -- Selftest element
+ this._selftestElement.selftestPoint = new PIXI.Point(
+ this.parent.x + this.model.rectangle.x * this.imageDimensions.width,
+ this.parent.y + this.model.rectangle.y * this.imageDimensions.width
+ );
+
this.parent.emit("childMove", event);
} else {
(this.parent as MedsurfDraw.PositionPoint).moveInteraction.emit("onMove", event, dX, dY);
@@ -1519,6 +1534,16 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
(this.parent as MedsurfDraw.PositionPoint).moveInteraction.emit("endMove", event);
}
+ /**
+ * End position point move
+ */
+ public endPositionPointMove(): void {
+ this._selftestElement.selftestPoint = new PIXI.Point(
+ this.parent.x + this.model.rectangle.x * this.imageDimensions.width,
+ this.parent.y + this.model.rectangle.y * this.imageDimensions.width
+ );
+ }
+
/**
* On wedge move
* @param event
@@ -1560,7 +1585,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
*/
protected _onWedgeEndMove(event: PIXI.InteractionEvent): void {
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
@@ -1570,14 +1595,8 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
*/
public onHover(): void {
// Setup
- if (this.modeInteraction.lastMode !== 'selftest') {
- this._arrowElement.options.lineColor = Design.primitive.lineColorHover;
- this._arrowElement.options.fillColor = Design.primitive.fillColorHover;
- } else {
- this._selftestElement.options.lineColor = Design.primitive.lineColorHover;
- this._selftestElement.options.fillColor = Design.primitive.fillColorHover;
- }
-
+ this._arrowElement.options.lineColor = Design.primitive.lineColorHover;
+ this._arrowElement.options.fillColor = Design.primitive.fillColorHover;
// Draw
this.emit("debounceDraw");
@@ -1589,7 +1608,6 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
public onOut(): void {
// Setup
this._arrowElement.options = Object.assign({}, this.model.options);
- this._selftestElement.options = Object.assign({}, this.model.options);
// Draw
this.emit("debounceDraw");
@@ -1610,7 +1628,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
if (lastMode === 'select_layer_group' || lastMode === 'select_parent') {
this.controlSelectItem();
} else {
- if (!(this.parent as MedsurfDraw.PositionPoint).controlSelectLayerGroup(this.getImage()) && !preventSelectItem) {
+ if (!(this.parent as MedsurfDraw.PositionPoint).controlSelectLayerGroup(this.image) && !preventSelectItem) {
this.controlSelectItem();
}
}
@@ -1633,6 +1651,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
* TODO remove
*/
public startScale(): void {
+ this.interactive = false;
/*
this._rotateContainer.removeChild(this._wedgePointElement);
// TODO better implementation: this._rotateElement.hideItem();
@@ -1644,12 +1663,21 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
/**
* On scale
+ * @param scaleSide
* @param dX
* @param dY
* @param dW
* @param dH
*/
- public onScale(dX: number, dY: number, dW: number, dH: number): void {
+ public onScale(scaleSide: MedsurfDraw.ScaleSideTypes, dX: number, dY: number, dW: number, dH: number): void {
+ if ([MedsurfDraw.ScaleSideTypes.X, MedsurfDraw.ScaleSideTypes.Y, MedsurfDraw.ScaleSideTypes.WIDTH,
+ MedsurfDraw.ScaleSideTypes.HEIGHT].indexOf(scaleSide) > -1) {
+ console.log("ok");
+ // Fix for pivot 0.5, 0.5
+ dW *= 2;
+ dH *= 2;
+ }
+
if (this._arrowElement.rectangle.width + dW < 1) {
return;
/*
@@ -1668,7 +1696,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
}
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Calc wedge adjust
/* TODO remove
@@ -1725,6 +1753,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
* TODO remove
*/
public endScale(): void {
+ this.interactive = true;
/*
this._rotateContainer.addChild(this._wedgePointElement);
this._wedgePointElement.draw();
@@ -1741,7 +1770,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
*/
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
@@ -1762,7 +1791,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.model.angle = this.rotation;
// Emit on background rotate
- this.emit("onBackgroundRotate", this.rotation);
+ this.emit("onBackgroundRotate", degree);
}
/**
@@ -1770,7 +1799,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
*/
public endRotate(): void {
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1823,18 +1852,17 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.model.angle = this.rotation;
// Emit on background rotate
- this.emit("onBackgroundRotate", this.rotation);
+ this.emit("onBackgroundRotate", degree);
}
//</editor-fold>
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Draw
this.emit("debounceDraw");
}
diff --git a/src/lib/elements/primitives/BackgroundRectanglePrimitive.ts b/src/lib/elements/primitives/BackgroundRectanglePrimitive.ts
index d7a42313f5110c4dde93b9c33390838d2107c107..f1809800b087b46c9ba86d348775d7fa1b0eef4c 100644
--- a/src/lib/elements/primitives/BackgroundRectanglePrimitive.ts
+++ b/src/lib/elements/primitives/BackgroundRectanglePrimitive.ts
@@ -58,11 +58,13 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
/**
* Constructor
+ * @param image
* @param model
*/
- public constructor(model: Models.BackgroundRectanglePrimitive) {
+ public constructor(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage,
+ model: Models.BackgroundRectanglePrimitive) {
// Parent constructor
- super({model});
+ super({image, model});
// Members
this.primitive = null;
@@ -138,10 +140,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
*/
public init(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Get primitive
- this.primitive = this.getImage().getImageObjects()
+ this.primitive = this.image.getImageObjects()
.filter((child: MedsurfDraw.ImageObject) => child instanceof MedsurfDraw.PositionPoint)
.map((positionPoint) => (positionPoint as MedsurfDraw.PositionPoint).getChildByName(this.model.primitiveId))
// TODO: .map((positionPoint: MedsurfDraw.PositionPoint) => positionPoint.children.find((c) => c.name === this.model.primitiveId))
@@ -164,9 +166,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -182,9 +185,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -192,9 +196,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -215,9 +220,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -233,9 +239,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -251,9 +258,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
//<editor-fold desc="Mirror">
// -- Horizontal mirror button element
this._horizontalMirrorButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf89c',
description: 'Horizontal\nspiegeln',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -261,9 +269,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this._horizontalMirrorButtonElement.on("button", this.onButtonHorizontalMirror, this);
// -- Vertical mirror button element
this._verticalMirrorButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf89d',
description: 'Vertikal\nspiegeln',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._horizontalMirrorButtonElement,
@@ -284,9 +293,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -302,9 +312,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -439,14 +450,16 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
//<editor-fold desc="Static functions">
/**
* Get instance
+ * @param image
* @param primitiveId
* @param rotateWithLine
* @param imageWidth
*/
- public static getInstance(primitiveId: string, rotateWithLine: boolean, imageWidth: number): BackgroundRectanglePrimitive {
+ public static getInstance(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, primitiveId: string,
+ rotateWithLine: boolean, imageWidth: number): BackgroundRectanglePrimitive {
// Element
// -- Background rectangle primitive
- return new BackgroundRectanglePrimitive({
+ return new BackgroundRectanglePrimitive(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.BACKGROUNDRECTANGLE,
@@ -479,7 +492,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
}
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Get pad
const pad = this.model.pad ? Math.round(this.model.pad * imageWidth * 100) / 100 : Design.backgroundRectangleElement.padDefault;
@@ -729,7 +742,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
// TODO this.on("onRelease", this._onRelease, this);
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -782,7 +795,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.onOut();
// Control Update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -799,7 +812,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
*/
protected _removeModeSelectItemColorLine(parent: MedsurfDraw.ImageObject, mode: string): void {
// Control save color line
- this.getImage().controlSaveColor(this.model.options.lineColor, this.model.options.lineAlpha);
+ this.image.controlSaveColor(this.model.options.lineColor, this.model.options.lineAlpha);
// Remove mode select item color
this._removeModeSelectItemColor(parent, mode);
@@ -813,7 +826,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
*/
protected _removeModeSelectItemColorFill(parent: MedsurfDraw.ImageObject, mode: string): void {
// Control save color fill
- this.getImage().controlSaveColor(this.model.options.fillColor, this.model.options.fillAlpha);
+ this.image.controlSaveColor(this.model.options.fillColor, this.model.options.fillAlpha);
// Remove mode select item color
this._removeModeSelectItemColor(parent, mode);
@@ -840,7 +853,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.onOut();
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -983,7 +996,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
// Setup parent
if (parent) {
// Get image
- const image = parent.getImage();
+ const image = parent.image;
if (parent.model.primitives) {
let index = parent.model.primitives.findIndex((primitive: any) => primitive.id === this.model.id);
@@ -1030,7 +1043,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editPrimitive(this.model);
+ this.image.editPrimitive(this.model);
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -1042,10 +1055,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.model.zIndex++;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1056,10 +1069,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.model.zIndex--;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1102,8 +1115,8 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
// Emit
if (unselectElement) {
- this.getImage().unselectLayerGroup();
- this.getImage().selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
+ this.image.unselectLayerGroup();
+ this.image.selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
}
}
//</editor-fold>
@@ -1128,10 +1141,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.model.angle = this.rotation;
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1154,10 +1167,10 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.model.angle = this.rotation;
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1218,7 +1231,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
} else if (mode === ColorMode.FILL) {
// Update model
this.model.options.hasFill = has;
@@ -1233,7 +1246,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
}
//</editor-fold>
@@ -1246,17 +1259,17 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
public onNumber(mode: NumberMode, number: number): void {
if (mode === NumberMode.WIDTH) {
// Update model
- this.model.strokeWidth = number / this.getImageDimensions().width;
+ this.model.strokeWidth = number / this.imageDimensions.width;
// Elements
// -- Rectangle element
- this._rectangleElement.lineWidth = this.model.strokeWidth ? Math.round(this.model.strokeWidth * this.getImageDimensions().width * 100) / 100 : undefined;
+ this._rectangleElement.lineWidth = this.model.strokeWidth ? Math.round(this.model.strokeWidth * this.imageDimensions.width * 100) / 100 : undefined;
// Draw
this.emit("debounceDraw");
} else if (mode === NumberMode.PAD) {
// Update model
- this.model.pad = number / this.getImageDimensions().width;
+ this.model.pad = number / this.imageDimensions.width;
// Elements
// -- Rectangle element
@@ -1282,7 +1295,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
}
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
//<editor-fold desc="Static">
@@ -1293,7 +1306,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
//</editor-fold>
@@ -1304,7 +1317,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
*/
public controlSelectItem(): void {
// Emits
- this.getImage().selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
+ this.image.selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
// Select item
this.externControlSelectItem();
@@ -1316,7 +1329,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
*/
public controlUnselectItem(parent: MedsurfDraw.PositionPoint): void {
// Get image
- const image = parent.getImage();
+ const image = parent.image;
// Set select layer
if(!parent.controlSelectLayerGroup(image)) {
@@ -1336,7 +1349,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
const parent = this.parent as MedsurfDraw.PositionPoint;
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== parent)
.forEach((imageObject) => {
if (parent.model.selftestItems && parent.model.selftestItems.indexOf(imageObject.name as string) > -1) {
@@ -1471,7 +1484,7 @@ export class BackgroundRectanglePrimitive extends BaseElementContainer<Models.Ba
this.model.angle = this.rotation;
// Emit on background rotate
- this.emit("onBackgroundRotate", this.rotation);
+ this.emit("onBackgroundRotate", degree);
}
//</editor-fold>
diff --git a/src/lib/elements/primitives/EllipsePrimitive.ts b/src/lib/elements/primitives/EllipsePrimitive.ts
index 707ebd4eced84be9ffd9c6c8c92424e16cecd625..2459bc4c6625755c26ff947d580797fe5a889a2b 100644
--- a/src/lib/elements/primitives/EllipsePrimitive.ts
+++ b/src/lib/elements/primitives/EllipsePrimitive.ts
@@ -37,7 +37,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
* Elements
*/
protected _ellipseElement: MedsurfDraw.Ellipse;
- protected _selftestElement: MedsurfDraw.Circle;
+ protected _selftestElement: MedsurfDraw.SelftestPoint;
/**
* Menu elements
@@ -61,11 +61,12 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
/**
* Constructor
+ * @param image
* @param model
*/
- public constructor(model: Models.EllipsePrimitive) {
+ public constructor(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.EllipsePrimitive) {
// Parent constructor
- super({model});
+ super({image, model});
// Members
@@ -128,18 +129,26 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
//<editor-fold desc="Events">
// -- Added
- this.on("added", () => {
+ this.on("added", (parent: MedsurfDraw.PositionPoint) => {
// Events
// -- Debounce
this.on("debounceControlSelectItem", this._debounceControlSelectItemMethod);
this.on("debounceControlUnselectItem", this._debounceControlUnselectItemMethod);
+ // -- Move
+ parent.on("endPositionPointMove", this.endPositionPointMove, this);
+ // -- Selftest
+ this._selftestElement.selectInteraction.on("onSelftest", this.onSelftest, this);
});
// -- Removed
- this.on("removed", () => {
+ this.on("removed", (parent: MedsurfDraw.PositionPoint) => {
// Events
// -- Debounce
this.off("debounceControlSelectItem", this._debounceControlSelectItemMethod);
this.off("debounceControlUnselectItem", this._debounceControlUnselectItemMethod);
+ // -- Move
+ parent.off("endPositionPointMove", this.endPositionPointMove, this);
+ // -- Selftest
+ this._selftestElement.selectInteraction.off("onSelftest", this.onSelftest, this);
});
//</editor-fold>
}
@@ -149,7 +158,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
*/
public init(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Position
this.position.set(
@@ -166,23 +175,25 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
});
this.addChild(this._ellipseElement);
// -- Selftest element
- this._selftestElement = new MedsurfDraw.Circle({
- circle: new PIXI.Circle(0, 0, Design.selftest.selftestRadius),
- options: Object.assign({}, this.model.options),
- lineWidth: Design.selftest.lineWidth
+ this._selftestElement = new MedsurfDraw.SelftestPoint({
+ image: this.image,
+ selftestPoint: new PIXI.Point(
+ this.parent.x + this.model.ellipse.x * imageWidth,
+ this.parent.y + this.model.ellipse.y * imageWidth
+ ),
+ options: Object.assign({}, this.model.options),
});
- this._selftestElement.zIndex = Design.selftest.zIndex;
- this._selftestElement.hideItem();
- this.addChild(this._selftestElement);
+ this.image.parent.addChild(this._selftestElement);
//</editor-fold>
//<editor-fold desc="Menu elements">
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -198,9 +209,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -208,9 +220,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -231,9 +244,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -249,9 +263,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -267,9 +282,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
//<editor-fold desc="Mirror">
// -- Horizontal mirror button element
this._horizontalMirrorButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf89c',
description: 'Horizontal\nspiegeln',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -277,9 +293,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this._horizontalMirrorButtonElement.on("button", this.onButtonHorizontalMirror, this);
// -- Vertical mirror button element
this._verticalMirrorButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf89d',
description: 'Vertikal\nspiegeln',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._horizontalMirrorButtonElement,
@@ -300,9 +317,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -318,9 +336,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -355,19 +374,6 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
//<editor-fold desc="Elements">
// -- Ellipse element
this._ellipseElement.draw();
- // -- Selftest element
- if (this._selftestElement.visible) {
- let scale = this.getImageScale().x * Design.selftest.scaleAspect;
- let lineWidth = Math.floor(Design.selftest.lineWidth || 1 / scale);
- if (lineWidth < 1) {
- lineWidth = 1;
- }
- let radius = this._selftestSelected ? Design.selftest.selftestRadiusSelected : Design.selftest.selftestRadius;
- radius = Math.floor(radius / scale);
- this._selftestElement.circle.radius = radius;
- this._selftestElement.lineWidth = lineWidth;
- this._selftestElement.draw();
- }
//</editor-fold>
}
@@ -470,13 +476,15 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
//<editor-fold desc="Static functions">
/**
* Get instance
+ * @param image
* @param rotateWithLine
* @param imageWidth
*/
- public static getInstance(rotateWithLine: boolean, imageWidth: number): EllipsePrimitive {
+ public static getInstance(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, rotateWithLine: boolean,
+ imageWidth: number): EllipsePrimitive {
// Element
// -- Ellipse primitive
- return new EllipsePrimitive({
+ return new EllipsePrimitive(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.ELLIPSE,
@@ -562,11 +570,13 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.cursor = "select";
// Events
+ /* TODO remove
this.selectInteraction.reset();
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
// Show item
this.showItem();
@@ -580,15 +590,15 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
// -- Ellipse element
this._ellipseElement.hideItem();
- // -- Selftest element
- this._selftestElement.showItem()
// Events
+ /* TODO remove
this.selectInteraction.reset();
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
// Show item
this.showItem();
@@ -612,14 +622,14 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
// Elements
// -- Ellipse element
this._ellipseElement.showItem();
- // -- Selftest element
- this._selftestElement.hideItem();
// Events
+ /* TODO remove
this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.off("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
}
/**
@@ -762,7 +772,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
MedsurfDraw.Keyboard.events.on("released_ArrowLeft", "onPositionPointMoveLeftEnd", this.moveInteraction.moveRelease.bind(this.moveInteraction));
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -829,7 +839,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.onOut();
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -846,7 +856,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
*/
protected _removeModeSelectItemColorLine(parent: MedsurfDraw.ImageObject, mode: string): void {
// Control save color line
- this.getImage().controlSaveColor(this.model.options.lineColor, this.model.options.lineAlpha);
+ this.image.controlSaveColor(this.model.options.lineColor, this.model.options.lineAlpha);
// Remove mode select item color
this._removeModeSelectItemColor(parent, mode);
@@ -860,7 +870,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
*/
protected _removeModeSelectItemColorFill(parent: MedsurfDraw.ImageObject, mode: string): void {
// Control save color fill
- this.getImage().controlSaveColor(this.model.options.fillColor, this.model.options.fillAlpha);
+ this.image.controlSaveColor(this.model.options.fillColor, this.model.options.fillAlpha);
// Remove mode select item color
this._removeModeSelectItemColor(parent, mode);
@@ -887,7 +897,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.onOut();
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -1045,7 +1055,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
// Setup parent
if (parent) {
// Get image
- const image = parent.getImage();
+ const image = parent.image;
if (parent.model.primitives) {
let index = parent.model.primitives.findIndex((primitive: any) => primitive.id === this.model.id);
@@ -1095,7 +1105,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editPrimitive(this.model);
+ this.image.editPrimitive(this.model);
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -1107,10 +1117,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.model.zIndex++;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1121,10 +1131,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.model.zIndex--;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1167,8 +1177,8 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
// Emit
if (unselectElement) {
- this.getImage().unselectLayerGroup();
- this.getImage().selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
+ this.image.unselectLayerGroup();
+ this.image.selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
}
}
//</editor-fold>
@@ -1193,10 +1203,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.model.angle = this.rotation;
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1219,10 +1229,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.model.angle = this.rotation;
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1278,12 +1288,14 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
// Elements
// -- Ellipse element
this._ellipseElement.options = Object.assign({}, this.model.options);
+ // -- Selftest element
+ this._selftestElement.options = Object.assign({}, this.model.options);
// Draw
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
} else if (mode === ColorMode.FILL) {
// Update model
this.model.options.hasFill = has;
@@ -1293,12 +1305,14 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
// Elements
// -- Ellipse element
this._ellipseElement.options = Object.assign({}, this.model.options);
+ // -- Selftest element
+ this._selftestElement.options = Object.assign({}, this.model.options);
// Draw
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
}
//</editor-fold>
@@ -1311,18 +1325,18 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
public onNumber(mode: NumberMode, number: number): void {
if (mode === NumberMode.WIDTH) {
// Update model
- this.model.strokeWidth = number / this.getImageDimensions().width;
+ this.model.strokeWidth = number / this.imageDimensions.width;
// Elements
// -- Ellipse element
- this._ellipseElement.lineWidth = this.model.strokeWidth ? Math.round(this.model.strokeWidth * this.getImageDimensions().width * 100) / 100 : undefined;
+ this._ellipseElement.lineWidth = this.model.strokeWidth ? Math.round(this.model.strokeWidth * this.imageDimensions.width * 100) / 100 : undefined;
// Draw
this.emit("debounceDraw");
// Emits
this.emit("onBackgroundNumber");
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
}
//</editor-fold>
@@ -1341,7 +1355,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
}
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
//<editor-fold desc="Static">
@@ -1352,7 +1366,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
//</editor-fold>
@@ -1363,7 +1377,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
*/
public controlSelectItem(): void {
// Emits
- this.getImage().selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
+ this.image.selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
// Select item
this.externControlSelectItem();
@@ -1375,7 +1389,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
*/
public controlUnselectItem(parent: MedsurfDraw.PositionPoint): void {
// Get image
- const image = parent.getImage();
+ const image = parent.image;
// Set select layer
if(!parent.controlSelectLayerGroup(image)) {
@@ -1395,7 +1409,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
const parent = this.parent as MedsurfDraw.PositionPoint;
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== parent)
.forEach((imageObject) => {
if (parent.model.selftestItems && parent.model.selftestItems.indexOf(imageObject.name as string) > -1) {
@@ -1455,7 +1469,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
*/
public onMove(event: PIXI.InteractionEvent, dX: number, dY: number): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Check if "Ctrl"-Key pressed
if (MedsurfDraw.Keyboard.isKeyDown("ControlLeft") || MedsurfDraw.Keyboard.isKeyDown("ControlRight")) {
@@ -1464,6 +1478,13 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.model.ellipse.x = this.position.x / imageWidth;
this.model.ellipse.y = this.position.y / imageWidth;
+ // Elements
+ // -- Selftest element
+ this._selftestElement.selftestPoint = new PIXI.Point(
+ this.parent.x + this.model.ellipse.x * this.imageDimensions.width,
+ this.parent.y + this.model.ellipse.y * this.imageDimensions.width
+ );
+
this.parent.emit("childMove", event);
} else {
(this.parent as MedsurfDraw.PositionPoint).moveInteraction.emit("onMove", event, dX, dY);
@@ -1478,6 +1499,16 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
// Emits
(this.parent as MedsurfDraw.PositionPoint).moveInteraction.emit("endMove", event);
}
+
+ /**
+ * End position point move
+ */
+ public endPositionPointMove(): void {
+ this._selftestElement.selftestPoint = new PIXI.Point(
+ this.parent.x + this.model.ellipse.x * this.imageDimensions.width,
+ this.parent.y + this.model.ellipse.y * this.imageDimensions.width
+ );
+ }
//</editor-fold>
//<editor-fold desc="Select">
@@ -1486,14 +1517,8 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
*/
public onHover(): void {
// Setup
- if (this.modeInteraction.lastMode !== 'selftest') {
- this._ellipseElement.options.lineColor = Design.primitive.lineColorHover;
- this._ellipseElement.options.fillColor = Design.primitive.fillColorHover;
- } else {
- this._selftestElement.options.lineColor = Design.primitive.lineColorHover;
- this._selftestElement.options.fillColor = Design.primitive.fillColorHover;
- }
-
+ this._ellipseElement.options.lineColor = Design.primitive.lineColorHover;
+ this._ellipseElement.options.fillColor = Design.primitive.fillColorHover;
// Draw
this.emit("debounceDraw");
@@ -1505,7 +1530,6 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
public onOut(): void {
// Setup
this._ellipseElement.options = Object.assign({}, this.model.options);
- this._selftestElement.options = Object.assign({}, this.model.options);
// Draw
this.emit("debounceDraw");
@@ -1526,7 +1550,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
if (lastMode === 'select_layer_group' || lastMode === 'select_parent') {
this.controlSelectItem();
} else {
- if (!(this.parent as MedsurfDraw.PositionPoint).controlSelectLayerGroup(this.getImage()) && !preventSelectItem) {
+ if (!(this.parent as MedsurfDraw.PositionPoint).controlSelectLayerGroup(this.image) && !preventSelectItem) {
this.controlSelectItem();
}
}
@@ -1549,6 +1573,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
* TODO remove
*/
public startScale(): void {
+ this.interactive = false;
/*
this._rotateContainer.removeChild(this._wedgePointElement);
// TODO better implementation: this._rotateElement.hideItem();
@@ -1560,12 +1585,23 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
/**
* On scale
+ * @param scaleSide
* @param dX
* @param dY
* @param dW
* @param dH
*/
- public onScale(dX: number, dY: number, dW: number, dH: number): void {
+ public onScale(scaleSide: MedsurfDraw.ScaleSideTypes, dX: number, dY: number, dW: number, dH: number): void {
+ // TODO not working
+ if ([MedsurfDraw.ScaleSideTypes.X_Y, MedsurfDraw.ScaleSideTypes.X_HEIGHT, MedsurfDraw.ScaleSideTypes.WIDTH_Y,
+ MedsurfDraw.ScaleSideTypes.WIDTH_HEIGHT].indexOf(scaleSide) > -1
+ // && !(MedsurfDraw.Keyboard.isKeyDown("ShiftLeft") || MedsurfDraw.Keyboard.isKeyDown("ShiftRight"))
+ ) {
+ // Fix for pivot 0.5, 0.5
+ // dW /= 2;
+ // dH /= 2;
+ }
+
if (this._ellipseElement.ellipse.width + dW < 1) {
return;
/*
@@ -1584,7 +1620,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
}
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Element
// -- Arrow element
@@ -1607,6 +1643,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
* TODO remove
*/
public endScale(): void {
+ this.interactive = true;
/*
this._rotateContainer.addChild(this._wedgePointElement);
this._wedgePointElement.draw();
@@ -1623,7 +1660,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
*/
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
@@ -1644,7 +1681,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.model.angle = this.rotation;
// Emit on background rotate
- this.emit("onBackgroundRotate", this.rotation);
+ this.emit("onBackgroundRotate", degree);
}
/**
@@ -1652,7 +1689,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
*/
public endRotate(): void {
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1705,18 +1742,17 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.model.angle = this.rotation;
// Emit on background rotate
- this.emit("onBackgroundRotate", this.rotation);
+ this.emit("onBackgroundRotate", degree);
}
//</editor-fold>
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Draw
this.emit("debounceDraw");
}
diff --git a/src/lib/elements/primitives/RectanglePrimitive.ts b/src/lib/elements/primitives/RectanglePrimitive.ts
index c941ba6391f660a4a321092b343328c30e127107..e3ce55a4496225e6d2b9abdfb738c5c30edd3070 100644
--- a/src/lib/elements/primitives/RectanglePrimitive.ts
+++ b/src/lib/elements/primitives/RectanglePrimitive.ts
@@ -37,7 +37,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
* Elements
*/
protected _rectangleElement: MedsurfDraw.Rectangle;
- protected _selftestElement: MedsurfDraw.Circle;
+ protected _selftestElement: MedsurfDraw.SelftestPoint;
/**
* Menu elements
@@ -61,11 +61,12 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
/**
* Constructor
+ * @param image
* @param model
*/
- public constructor(model: Models.RectanglePrimitive) {
+ public constructor(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.RectanglePrimitive) {
// Parent constructor
- super({model});
+ super({image, model});
// Members
@@ -128,18 +129,26 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
//<editor-fold desc="Events">
// -- Added
- this.on("added", () => {
+ this.on("added", (parent: MedsurfDraw.PositionPoint) => {
// Events
// -- Debounce
this.on("debounceControlSelectItem", this._debounceControlSelectItemMethod);
this.on("debounceControlUnselectItem", this._debounceControlUnselectItemMethod);
+ // -- Move
+ parent.on("endPositionPointMove", this.endPositionPointMove, this);
+ // -- Selftest
+ this._selftestElement.selectInteraction.on("onSelftest", this.onSelftest, this);
});
// -- Removed
- this.on("removed", () => {
+ this.on("removed", (parent: MedsurfDraw.PositionPoint) => {
// Events
// -- Debounce
this.off("debounceControlSelectItem", this._debounceControlSelectItemMethod);
this.off("debounceControlUnselectItem", this._debounceControlUnselectItemMethod);
+ // -- Move
+ parent.off("endPositionPointMove", this.endPositionPointMove, this);
+ // -- Selftest
+ this._selftestElement.selectInteraction.off("onSelftest", this.onSelftest, this);
});
//</editor-fold>
}
@@ -149,7 +158,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
*/
public init(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Position
this.position.set(
@@ -166,23 +175,25 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
});
this.addChild(this._rectangleElement);
// -- Selftest element
- this._selftestElement = new MedsurfDraw.Circle({
- circle: new PIXI.Circle(0, 0, Design.selftest.selftestRadius),
- options: Object.assign({}, this.model.options),
- lineWidth: Design.selftest.lineWidth
+ this._selftestElement = new MedsurfDraw.SelftestPoint({
+ image: this.image,
+ selftestPoint: new PIXI.Point(
+ this.parent.x + this.model.rectangle.x * imageWidth,
+ this.parent.y + this.model.rectangle.y * imageWidth
+ ),
+ options: Object.assign({}, this.model.options),
});
- this._selftestElement.zIndex = Design.selftest.zIndex;
- this._selftestElement.hideItem();
- this.addChild(this._selftestElement);
+ this.image.parent.addChild(this._selftestElement);
//</editor-fold>
//<editor-fold desc="Menu elements">
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -198,9 +209,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -208,9 +220,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -231,9 +244,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -249,9 +263,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -267,9 +282,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
//<editor-fold desc="Mirror">
// -- Horizontal mirror button element
this._horizontalMirrorButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf89c',
description: 'Horizontal\nspiegeln',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -277,9 +293,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this._horizontalMirrorButtonElement.on("button", this.onButtonHorizontalMirror, this);
// -- Vertical mirror button element
this._verticalMirrorButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf89d',
description: 'Vertikal\nspiegeln',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._horizontalMirrorButtonElement,
@@ -300,9 +317,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -318,9 +336,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -356,19 +375,6 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// -- Rectangle element
this._rectangleElement.draw();
this._rectangleElement.pivot.set(this._rectangleElement.rectangle.width / 2, this._rectangleElement.rectangle.height / 2);
- // -- Selftest element
- if (this._selftestElement.visible) {
- let scale = this.getImageScale().x * Design.selftest.scaleAspect;
- let lineWidth = Math.floor(Design.selftest.lineWidth || 1 / scale);
- if (lineWidth < 1) {
- lineWidth = 1;
- }
- let radius = this._selftestSelected ? Design.selftest.selftestRadiusSelected : Design.selftest.selftestRadius;
- radius = Math.floor(radius / scale);
- this._selftestElement.circle.radius = radius;
- this._selftestElement.lineWidth = lineWidth;
- this._selftestElement.draw();
- }
//</editor-fold>
}
@@ -471,13 +477,15 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
//<editor-fold desc="Static functions">
/**
* Get instance
+ * @param image
* @param rotateWithLine
* @param imageWidth
*/
- public static getInstance(rotateWithLine: boolean, imageWidth: number): RectanglePrimitive {
+ public static getInstance(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, rotateWithLine: boolean,
+ imageWidth: number): RectanglePrimitive {
// Element
// -- Rectangle primitive
- return new RectanglePrimitive({
+ return new RectanglePrimitive(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.RECTANGLE,
@@ -563,11 +571,13 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.cursor = "select";
// Events
+ /* TODO remove
this.selectInteraction.reset();
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
// Show item
this.showItem();
@@ -581,15 +591,15 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// -- Rectangle element
this._rectangleElement.hideItem();
- // -- Selftest element
- this._selftestElement.showItem();
// Events
+ /* TODO remove
this.selectInteraction.reset();
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
// Show item
this.showItem();
@@ -613,14 +623,14 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// Elements
// -- Rectangle element
this._rectangleElement.showItem();
- // -- Selftest element
- this._selftestElement.hideItem();
// Events
+ /* TODO remove
this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.off("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
}
/**
@@ -763,7 +773,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
MedsurfDraw.Keyboard.events.on("released_ArrowLeft", "onPositionPointMoveLeftEnd", this.moveInteraction.moveRelease.bind(this.moveInteraction));
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -830,7 +840,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.onOut();
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -847,7 +857,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
*/
protected _removeModeSelectItemColorLine(parent: MedsurfDraw.ImageObject, mode: string): void {
// Control save color line
- this.getImage().controlSaveColor(this.model.options.lineColor, this.model.options.lineAlpha);
+ this.image.controlSaveColor(this.model.options.lineColor, this.model.options.lineAlpha);
// Remove mode select item color
this._removeModeSelectItemColor(parent, mode);
@@ -861,7 +871,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
*/
protected _removeModeSelectItemColorFill(parent: MedsurfDraw.ImageObject, mode: string): void {
// Control save color fill
- this.getImage().controlSaveColor(this.model.options.fillColor, this.model.options.fillAlpha);
+ this.image.controlSaveColor(this.model.options.fillColor, this.model.options.fillAlpha);
// Remove mode select item color
this._removeModeSelectItemColor(parent, mode);
@@ -888,7 +898,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.onOut();
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -1046,7 +1056,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// Setup parent
if (parent) {
// Get image
- const image = parent.getImage();
+ const image = parent.image;
if (parent.model.primitives) {
let index = parent.model.primitives.findIndex((primitive: any) => primitive.id === this.model.id);
@@ -1096,7 +1106,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editPrimitive(this.model);
+ this.image.editPrimitive(this.model);
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -1108,10 +1118,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.model.zIndex++;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1122,10 +1132,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.model.zIndex--;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1168,8 +1178,8 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// Emit
if (unselectElement) {
- this.getImage().unselectLayerGroup();
- this.getImage().selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
+ this.image.unselectLayerGroup();
+ this.image.selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
}
}
//</editor-fold>
@@ -1194,10 +1204,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.model.angle = this.rotation;
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1220,10 +1230,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.model.angle = this.rotation;
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1279,12 +1289,14 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// Elements
// -- Rectangle element
this._rectangleElement.options = Object.assign({}, this.model.options);
+ // -- Selftest element
+ this._selftestElement.options = Object.assign({}, this.model.options);
// Draw
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
} else if (mode === ColorMode.FILL) {
// Update model
this.model.options.hasFill = has;
@@ -1294,12 +1306,14 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// Elements
// -- Rectangle element
this._rectangleElement.options = Object.assign({}, this.model.options);
+ // -- Selftest element
+ this._selftestElement.options = Object.assign({}, this.model.options);
// Draw
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
}
//</editor-fold>
@@ -1312,18 +1326,18 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
public onNumber(mode: NumberMode, number: number): void {
if (mode === NumberMode.WIDTH) {
// Update model
- this.model.strokeWidth = number / this.getImageDimensions().width;
+ this.model.strokeWidth = number / this.imageDimensions.width;
// Elements
// -- Rectangle element
- this._rectangleElement.lineWidth = this.model.strokeWidth ? Math.round(this.model.strokeWidth * this.getImageDimensions().width * 100) / 100 : undefined;
+ this._rectangleElement.lineWidth = this.model.strokeWidth ? Math.round(this.model.strokeWidth * this.imageDimensions.width * 100) / 100 : undefined;
// Draw
this.emit("debounceDraw");
// Emits
this.emit("onBackgroundNumber");
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
}
//</editor-fold>
@@ -1342,7 +1356,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
}
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
//<editor-fold desc="Static">
@@ -1353,7 +1367,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
//</editor-fold>
@@ -1364,7 +1378,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
*/
public controlSelectItem(): void {
// Emits
- this.getImage().selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
+ this.image.selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
// Select item
this.externControlSelectItem();
@@ -1376,7 +1390,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
*/
public controlUnselectItem(parent: MedsurfDraw.PositionPoint): void {
// Get image
- const image = parent.getImage();
+ const image = parent.image;
// Set select layer
if(!parent.controlSelectLayerGroup(image)) {
@@ -1396,7 +1410,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
const parent = this.parent as MedsurfDraw.PositionPoint;
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== parent)
.forEach((imageObject) => {
if (parent.model.selftestItems && parent.model.selftestItems.indexOf(imageObject.name as string) > -1) {
@@ -1456,7 +1470,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
*/
public onMove(event: PIXI.InteractionEvent, dX: number, dY: number): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Check if "Ctrl"-Key pressed
if (MedsurfDraw.Keyboard.isKeyDown("ControlLeft") || MedsurfDraw.Keyboard.isKeyDown("ControlRight")) {
@@ -1465,6 +1479,13 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.model.rectangle.x = this.position.x / imageWidth;
this.model.rectangle.y = this.position.y / imageWidth;
+ // Elements
+ // -- Selftest element
+ this._selftestElement.selftestPoint = new PIXI.Point(
+ this.parent.x + this.model.rectangle.x * this.imageDimensions.width,
+ this.parent.y + this.model.rectangle.y * this.imageDimensions.width
+ );
+
this.parent.emit("childMove", event);
} else {
(this.parent as MedsurfDraw.PositionPoint).moveInteraction.emit("onMove", event, dX, dY);
@@ -1479,6 +1500,16 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// Emits
(this.parent as MedsurfDraw.PositionPoint).moveInteraction.emit("endMove", event);
}
+
+ /**
+ * End position point move
+ */
+ public endPositionPointMove(): void {
+ this._selftestElement.selftestPoint = new PIXI.Point(
+ this.parent.x + this.model.rectangle.x * this.imageDimensions.width,
+ this.parent.y + this.model.rectangle.y * this.imageDimensions.width
+ );
+ }
//</editor-fold>
//<editor-fold desc="Select">
@@ -1487,13 +1518,8 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
*/
public onHover(): void {
// Setup
- if (this.modeInteraction.lastMode !== 'selftest') {
- this._rectangleElement.options.lineColor = Design.primitive.lineColorHover;
- this._rectangleElement.options.fillColor = Design.primitive.fillColorHover;
- } else {
- this._selftestElement.options.lineColor = Design.primitive.lineColorHover;
- this._selftestElement.options.fillColor = Design.primitive.fillColorHover;
- }
+ this._rectangleElement.options.lineColor = Design.primitive.lineColorHover;
+ this._rectangleElement.options.fillColor = Design.primitive.fillColorHover;
// Draw
this.emit("debounceDraw");
@@ -1502,10 +1528,9 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
/**
* On out
*/
- public onOut(): void {;
+ public onOut(): void {
// Setup
this._rectangleElement.options = Object.assign({}, this.model.options);
- this._selftestElement.options = Object.assign({}, this.model.options);
// Draw
this.emit("debounceDraw");
@@ -1526,7 +1551,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
if (lastMode === 'select_layer_group' || lastMode === 'select_parent') {
this.controlSelectItem();
} else {
- if (!(this.parent as MedsurfDraw.PositionPoint).controlSelectLayerGroup(this.getImage()) && !preventSelectItem) {
+ if (!(this.parent as MedsurfDraw.PositionPoint).controlSelectLayerGroup(this.image) && !preventSelectItem) {
this.controlSelectItem();
}
}
@@ -1549,6 +1574,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
* TODO remove
*/
public startScale(): void {
+ this.interactive = false;
/*
this._rotateContainer.removeChild(this._wedgePointElement);
// TODO better implementation: this._rotateElement.hideItem();
@@ -1560,12 +1586,21 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
/**
* On scale
+ * @param scaleSide
* @param dX
* @param dY
* @param dW
* @param dH
*/
- public onScale(dX: number, dY: number, dW: number, dH: number): void {
+ public onScale(scaleSide: MedsurfDraw.ScaleSideTypes, dX: number, dY: number, dW: number, dH: number): void {
+ console.log(this.interactive);
+ if ([MedsurfDraw.ScaleSideTypes.X, MedsurfDraw.ScaleSideTypes.Y, MedsurfDraw.ScaleSideTypes.WIDTH,
+ MedsurfDraw.ScaleSideTypes.HEIGHT].indexOf(scaleSide) > -1) {
+ // Fix for pivot 0.5, 0.5
+ dW *= 2;
+ dH *= 2;
+ }
+
if (this._rectangleElement.rectangle.width + dW < 1) {
return;
/*
@@ -1584,7 +1619,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
}
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Element
// -- Arrow element
@@ -1607,6 +1642,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
* TODO remove
*/
public endScale(): void {
+ this.interactive = true;
/*
this._rotateContainer.addChild(this._wedgePointElement);
this._wedgePointElement.draw();
@@ -1623,7 +1659,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
*/
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
@@ -1644,7 +1680,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.model.angle = this.rotation;
// Emit on background rotate
- this.emit("onBackgroundRotate", this.rotation);
+ this.emit("onBackgroundRotate", degree);
}
/**
@@ -1652,7 +1688,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
*/
public endRotate(): void {
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1705,18 +1741,17 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.model.angle = this.rotation;
// Emit on background rotate
- this.emit("onBackgroundRotate", this.rotation);
+ this.emit("onBackgroundRotate", degree);
}
//</editor-fold>
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Draw
this.emit("debounceDraw");
}
diff --git a/src/lib/elements/primitives/TextPrimitive.ts b/src/lib/elements/primitives/TextPrimitive.ts
index 6124f7ed3ef6c0ea30b2e964e786d1e8a47b0fd1..c7d33369a59bfaf82a9f2fe53a086765ca094a00 100644
--- a/src/lib/elements/primitives/TextPrimitive.ts
+++ b/src/lib/elements/primitives/TextPrimitive.ts
@@ -37,8 +37,8 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
/**
* Elements
*/
- protected _textElement: MedsurfDraw.Text;
- protected _selftestElement: MedsurfDraw.Circle;
+ protected _textElement: MedsurfDraw.EditableText;
+ protected _selftestElement: MedsurfDraw.SelftestPoint;
/**
* Menu elements
@@ -62,11 +62,12 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
/**
* Constructor
+ * @param image
* @param model
*/
- public constructor(model: Models.TextPrimitive) {
+ public constructor(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, model: Models.TextPrimitive) {
// Parent constructor
- super({model});
+ super({image, model});
// Members
@@ -129,20 +130,28 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
//<editor-fold desc="Events">
// -- Added
- this.on("added", () => {
+ this.on("added", (parent: MedsurfDraw.PositionPoint) => {
// Events
// -- Debounce
this.on("debounceEditNewText", this._debounceEditNewTextMethod);
this.on("debounceControlSelectItem", this._debounceControlSelectItemMethod);
this.on("debounceControlUnselectItem", this._debounceControlUnselectItemMethod);
+ // -- Move
+ parent.on("endPositionPointMove", this.endPositionPointMove, this);
+ // -- Selftest
+ this._selftestElement.selectInteraction.on("onSelftest", this.onSelftest, this);
});
// -- Removed
- this.on("removed", () => {
+ this.on("removed", (parent: MedsurfDraw.PositionPoint) => {
// Events
// -- Debounce
this.off("debounceEditNewText", this._debounceEditNewTextMethod);
this.off("debounceControlSelectItem", this._debounceControlSelectItemMethod);
this.off("debounceControlUnselectItem", this._debounceControlUnselectItemMethod);
+ // -- Move
+ parent.off("endPositionPointMove", this.endPositionPointMove, this);
+ // -- Selftest
+ this._selftestElement.selectInteraction.off("onSelftest", this.onSelftest, this);
});
//</editor-fold>
}
@@ -152,7 +161,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
public init(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Defaults
const style = Object.assign({}, this.model.style);
@@ -171,7 +180,8 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
//<editor-fold desc="Elements">
// -- Text element
- this._textElement = new MedsurfDraw.Text({
+ this._textElement = new MedsurfDraw.EditableText({
+ image: this.image,
text: this.model.text,
// @ts-ignore TODO ignore
style: new PIXI.TextStyle(style)
@@ -180,23 +190,25 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this._textElement.on("endText", this.endText, this);
this.addChild(this._textElement);
// -- Selftest element
- this._selftestElement = new MedsurfDraw.Circle({
- circle: new PIXI.Circle(0, 0, Design.selftest.selftestRadius),
+ this._selftestElement = new MedsurfDraw.SelftestPoint({
+ image: this.image,
+ selftestPoint: new PIXI.Point(
+ this.parent.x + this.model.rectangle.x * imageWidth,
+ this.parent.y + this.model.rectangle.y * imageWidth
+ ),
options: {hasLine: true, lineColor: style.fill, lineAlpha: 1, hasFill: true, fillColor: style.fill, fillAlpha: 1},
- lineWidth: Design.selftest.lineWidth
});
- this._selftestElement.zIndex = Design.selftest.zIndex;
- this._selftestElement.hideItem();
- this.addChild(this._selftestElement);
+ this.image.parent.addChild(this._selftestElement);
//</editor-fold>
//<editor-fold desc="Menu elements">
//<editor-fold desc="Edit">
// -- Edit button element
this._editButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf3f0',
description: 'Editieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -212,9 +224,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
//<editor-fold desc="Layer">
// -- Move to back button element
this._moveToBackButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf87f',
description: 'In den\nHintergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -222,9 +235,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this._moveToBackButtonElement.on("button", this.onButtonMoveToBack, this);
// -- Move to front button element
this._moveToFrontButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf856',
description: 'In den\nVordergrund',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._moveToBackButtonElement,
@@ -245,9 +259,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
//<editor-fold desc="Delete">
// -- Delete button element
this._deleteButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf1f8',
description: 'Löschen',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -263,9 +278,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
//<editor-fold desc="Degroup">
// -- Degroup button element
this._degroupButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf248',
description: 'Ungruppieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -281,9 +297,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
//<editor-fold desc="Mirror">
// -- Horizontal mirror button element
this._horizontalMirrorButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf89c',
description: 'Horizontal\nspiegeln',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -291,9 +308,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this._horizontalMirrorButtonElement.on("button", this.onButtonHorizontalMirror, this);
// -- Vertical mirror button element
this._verticalMirrorButtonElement = new MedsurfDraw.RoundSubMenuElement({
+ image: this.image,
text: '\uf89d',
description: 'Vertikal\nspiegeln',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
menuElements: [
{
element: this._horizontalMirrorButtonElement,
@@ -314,9 +332,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
//<editor-fold desc="Duplicate">
// -- Duplicate button element
this._duplicateButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf24d',
description: 'Duplizieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -332,9 +351,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
//<editor-fold desc="Clipboard">
// -- Clipboard button element
this._clipboardButtonElement = new MedsurfDraw.RoundButtonElement({
+ image: this.image,
text: '\uf0c5',
description: 'Kopieren',
- descriptionFontSize: 6,
+ descriptionFontSize: Design.subMenu.descriptionFontSize,
circle: new PIXI.Circle(0, 0, Design.subMenu.buttonRadius),
fontSize: Design.subMenu.fontSize,
fontColor: Design.subMenu.fontColor
@@ -379,21 +399,6 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Pivot
this.pivot.set(this._textElement.width / 2, this._textElement.height / 2);
-
- // Elements
- // -- Selftest element
- if (this._selftestElement.visible) {
- let scale = this.getImageScale().x * Design.selftest.scaleAspect;
- let lineWidth = Math.floor(Design.selftest.lineWidth || 1 / scale);
- if (lineWidth < 1) {
- lineWidth = 1;
- }
- let radius = this._selftestSelected ? Design.selftest.selftestRadiusSelected : Design.selftest.selftestRadius;
- radius = Math.floor(radius / scale);
- this._selftestElement.circle.radius = radius;
- this._selftestElement.lineWidth = lineWidth;
- this._selftestElement.draw();
- }
}
/**
@@ -497,13 +502,15 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
//<editor-fold desc="Static functions">
/**
* Get instance
+ * @param image
* @param rotateWithLine
* @param imageWidth
*/
- public static getInstance(rotateWithLine: boolean, imageWidth: number): TextPrimitive {
+ public static getInstance(image: MedsurfDraw.Image | MedsurfDraw.DeepZoomImage, rotateWithLine: boolean,
+ imageWidth: number): TextPrimitive {
// Element
// -- Text primitive
- return new TextPrimitive({
+ return new TextPrimitive(image, {
dirty: true,
id: uuidv4(),
type: Models.ImageObjectType.TEXT,
@@ -564,9 +571,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Elements
// -- Text element
- this._textElement.onImageZoom();
- // -- Selfteest element
- this._selftestElement.onImageZoom();
+ this._textElement.onImageZoom(this.imageScale.x, this.imageScale.y);
if (this.model.isStatic) {
// Show item
@@ -617,11 +622,13 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.cursor = "select";
// Events
+ /* TODO remove
this.selectInteraction.reset();
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
// Show item
this.showItem();
@@ -635,15 +642,15 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// -- Text element
this._textElement.hideItem();
- // -- Selftest element
- this._selftestElement.showItem();
// Events
+ /* TODO remove
this.selectInteraction.reset();
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.on("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.on("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.on("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
// Show item
this.showItem();
@@ -667,14 +674,14 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Elements
// -- Text element
this._textElement.showItem();
- // -- Selftest element
- this._selftestElement.hideItem();
// Events
+ /* TODO remove
this.off("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.off("pointerout", this.selectInteraction.onOut, this.selectInteraction);
this.off("mousedown", this.selectInteraction.onPointerDown, this.selectInteraction);
this.off("mouseup", this.selectInteraction.onSelftest, this.selectInteraction);
+ */
}
/**
@@ -817,7 +824,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
MedsurfDraw.Keyboard.events.on("released_ArrowLeft", "onPositionPointMoveLeftEnd", this.moveInteraction.moveRelease.bind(this.moveInteraction));
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -881,7 +888,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
protected _removeModeSelectChild(): void {
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
@@ -893,7 +900,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.onOut();
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -910,7 +917,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
protected _removeModeSelectItemColor(parent: MedsurfDraw.ImageObject, mode: string): void {
// Control save color line
- this.getImage().controlSaveColor(this.model.style.fill, 1);
+ this.image.controlSaveColor(this.model.style.fill, 1);
if (mode !== 'select_child' && !mode.startsWith('select_item_color')) {
// Set select item
@@ -926,7 +933,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.onOut();
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Show item
this.showItem();
@@ -1025,7 +1032,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
protected _removeModeChooseSelect(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Defaults
const style = Object.assign({}, this.model.style);
@@ -1068,7 +1075,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
protected _removeModeChooseUnselect(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Defaults
const style = Object.assign({}, this.model.style);
@@ -1099,7 +1106,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Setup parent
if (parent) {
// Get image
- const image = parent.getImage();
+ const image = parent.image;
if (parent.model.primitives) {
let index = parent.model.primitives.findIndex((primitive: any) => primitive.id === this.model.id);
@@ -1149,7 +1156,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.collapseAllMenus(new PIXI.InteractionEvent());
// Emits
- this.getImage().editPrimitive(this.model);
+ this.image.editPrimitive(this.model);
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -1161,10 +1168,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.model.zIndex++;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1175,10 +1182,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.model.zIndex--;
this.zIndex = this.model.zIndex;
- this.getImage().sortChildren();
+ this.image.sortChildren();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1221,8 +1228,8 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Emit
if (unselectElement) {
- this.getImage().unselectLayerGroup();
- this.getImage().selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
+ this.image.unselectLayerGroup();
+ this.image.selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
}
}
//</editor-fold>
@@ -1247,10 +1254,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.model.angle = this.rotation;
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1273,10 +1280,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.model.angle = this.rotation;
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1334,12 +1341,15 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Elements
// -- Text element
this._textElement.style.fill = color;
+ // -- Selftest element
+ this._selftestElement.options = {hasLine: true, lineColor: color, lineAlpha: 1,
+ hasFill: true, fillColor: color, fillAlpha: 1};
// Draw
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/* TODO remove check if no errors show up when this is not active
@@ -1380,7 +1390,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
number = Math.round(number);
// Update model
- this.model.style.fontSize = number / this.getImageDimensions().width;
+ this.model.style.fontSize = number / this.imageDimensions.width;
// Elements
// -- Text element
@@ -1391,7 +1401,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Emits
this.emit("onBackgroundNumber");
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/* TODO remove check if no errors show up when this is not active
@@ -1436,7 +1446,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
}
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
//<editor-fold desc="Static">
@@ -1447,7 +1457,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.emit("debounceDraw");
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
//<editor-fold desc="Text">
@@ -1467,7 +1477,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.draw();
// Control update elements
- this.getImage().controlUpdateElements();
+ this.image.controlUpdateElements();
// Emit on background text
this.emit("onBackgroundText");
@@ -1484,16 +1494,16 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
//<editor-fold desc="Background rectangle">
public onButtonAddBackgroundRectangle(): void {
// Get image
- const image = this.getImage();
+ const image = this.image;
// Get image width
- const imageWidth = image.getImageDimensions().width;
+ const imageWidth = image.imageDimensions.width;
// Get parent
const parent = this.parent as MedsurfDraw.PositionPoint;
// Create new background rectangle
- const backgroundRectangle = MedsurfDraw.BackgroundRectanglePrimitive.getInstance(this.model.id as string, this.model.rotateWithLine, imageWidth);
+ const backgroundRectangle = MedsurfDraw.BackgroundRectanglePrimitive.getInstance(this.image, this.model.id as string, this.model.rotateWithLine, imageWidth);
parent.addChild(backgroundRectangle);
backgroundRectangle.modeInteraction.setDefaultMode("author");
@@ -1512,7 +1522,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
parent.model.primitives.push(backgroundRectangle.model);
// Emits
- this.getImage().updateImageObject(parent.model);
+ this.image.updateImageObject(parent.model);
// Select background rectangle
backgroundRectangle.controlSelectItem();
@@ -1526,7 +1536,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
public controlSelectItem(): void {
// Emits
- this.getImage().selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
+ this.image.selectPrimitive(this.model, (this.parent as MedsurfDraw.PositionPoint).model);
// Select item
this.externControlSelectItem();
@@ -1538,7 +1548,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
public controlUnselectItem(parent: MedsurfDraw.PositionPoint): void {
// Get image
- const image = parent.getImage();
+ const image = parent.image;
// Set select layer
if(!parent.controlSelectLayerGroup(image)) {
@@ -1558,7 +1568,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
const parent = this.parent as MedsurfDraw.PositionPoint;
// Set default mode for image children
- this.getImage().getImageObjects()
+ this.image.getImageObjects()
.filter((imageObject) => imageObject !== parent)
.forEach((imageObject) => {
if (parent.model.selftestItems && parent.model.selftestItems.indexOf(imageObject.name as string) > -1) {
@@ -1618,7 +1628,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
public onMove(event: PIXI.InteractionEvent, dX: number, dY: number): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Check if "Ctrl"-Key pressed
if (MedsurfDraw.Keyboard.isKeyDown("ControlLeft") || MedsurfDraw.Keyboard.isKeyDown("ControlRight")) {
@@ -1627,6 +1637,13 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.model.rectangle.x = this.position.x / imageWidth;
this.model.rectangle.y = this.position.y / imageWidth;
+ // Elements
+ // -- Selftest element
+ this._selftestElement.selftestPoint = new PIXI.Point(
+ this.parent.x + this.model.rectangle.x * this.imageDimensions.width,
+ this.parent.y + this.model.rectangle.y * this.imageDimensions.width
+ );
+
this.parent.emit("childMove", event);
} else {
(this.parent as MedsurfDraw.PositionPoint).moveInteraction.emit("onMove", event, dX, dY);
@@ -1641,6 +1658,16 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Emits
(this.parent as MedsurfDraw.PositionPoint).moveInteraction.emit("endMove", event);
}
+
+ /**
+ * End position point move
+ */
+ public endPositionPointMove(): void {
+ this._selftestElement.selftestPoint = new PIXI.Point(
+ this.parent.x + this.model.rectangle.x * this.imageDimensions.width,
+ this.parent.y + this.model.rectangle.y * this.imageDimensions.width
+ );
+ }
//</editor-fold>
//<editor-fold desc="Select">
@@ -1649,12 +1676,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
public onHover(): void {
// Setup
- if (this.modeInteraction.lastMode !== 'selftest') {
- this._textElement.style.fill = Design.primitive.lineColorHover;
- } else {
- this._selftestElement.options.lineColor = Design.primitive.lineColorHover;
- this._selftestElement.options.fillColor = Design.primitive.fillColorHover;
- }
+ this._textElement.style.fill = Design.primitive.lineColorHover;
// Draw
this.emit("debounceDraw");
@@ -1665,7 +1687,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
public onOut(): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
// Defaults
const style = Object.assign({}, this.model.style);
@@ -1679,8 +1701,6 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Setup
// @ts-ignore TODO ignore
this._textElement.style = new PIXI.TextStyle(style);
- this._selftestElement.options = {hasLine: true, lineColor: style.fill, lineAlpha: 1,
- hasFill: true, fillColor: style.fill, fillAlpha: 1};
// Draw
this.emit("debounceDraw");
@@ -1701,7 +1721,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
if (lastMode === 'select_layer_group' || lastMode === 'select_parent') {
this.controlSelectItem();
} else {
- if (!(this.parent as MedsurfDraw.PositionPoint).controlSelectLayerGroup(this.getImage()) && !preventSelectItem) {
+ if (!(this.parent as MedsurfDraw.PositionPoint).controlSelectLayerGroup(this.image) && !preventSelectItem) {
this.controlSelectItem();
}
}
@@ -1735,14 +1755,15 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
/**
* On scale
+ * @param scaleSide
* @param dX
* @param dY
* @param dW
* @param dH
*/
- public onScale(dX: number, dY: number, dW: number, dH: number): void {
+ public onScale(scaleSide: MedsurfDraw.ScaleSideTypes, dX: number, dY: number, dW: number, dH: number): void {
// Get image width
- const imageWidth = this.getImageDimensions().width;
+ const imageWidth = this.imageDimensions.width;
if (dW != 0) {
const width = this._textElement.width + dW;
@@ -1765,9 +1786,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Elements
// -- Text element
- this._textElement.onImageZoom();
- // -- Selfteest element
- this._selftestElement.onImageZoom();
+ this._textElement.onImageZoom(this.imageScale.x, this.imageScale.y);
// Draw
this.draw();
@@ -1797,7 +1816,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
//</editor-fold>
@@ -1818,7 +1837,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.model.angle = this.rotation;
// Emit on background rotate
- this.emit("onBackgroundRotate", this.rotation);
+ this.emit("onBackgroundRotate", degree);
}
/**
@@ -1826,7 +1845,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
*/
public endRotate(): void {
// Emits
- this.getImage().updatePrimitive(this.model);
+ this.image.updatePrimitive(this.model);
}
/**
@@ -1879,18 +1898,17 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
this.model.angle = this.rotation;
// Emit on background rotate
- this.emit("onBackgroundRotate", this.rotation);
+ this.emit("onBackgroundRotate", degree);
}
//</editor-fold>
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Draw
this.emit("debounceDraw");
}
diff --git a/src/lib/elements/rotatings/RotateElement.ts b/src/lib/elements/rotatings/RotateElement.ts
index 9775aa14a8085188d49a6ef8916eee399f110b4a..bd264b551a3340db9568ee673dadbbb47a88b3fa 100644
--- a/src/lib/elements/rotatings/RotateElement.ts
+++ b/src/lib/elements/rotatings/RotateElement.ts
@@ -1,12 +1,12 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
/**
* Rotate element model
*/
-export class RotateElementModel extends BaseContainerModel {
+export class RotateElementModel extends BaseContainerImageModel {
rectangle: PIXI.Rectangle;
}
@@ -45,7 +45,7 @@ export class RotateElement extends BaseContainer<RotateElementModel> {
* Init
*/
public init(): void {
- let scale = this.getImageScale().x * Design.positionPoint.scaleAspect;
+ let scale = this.imageScale.x * Design.positionPoint.scaleAspect;
let radius = Design.positionPoint.radius;
// TODO if (this.modeInteraction.lastMode === 'select' || this.modeInteraction.lastMode === 'selftest') {
radius = Math.floor(radius / scale);
@@ -83,7 +83,7 @@ export class RotateElement extends BaseContainer<RotateElementModel> {
* Draw
*/
public draw(): void {
- let scale = this.getImageScale().x * Design.rotate.scaleAspect;
+ let scale = this.imageScale.x * Design.rotate.scaleAspect;
if (scale > 1) {
scale = 1;
}
@@ -131,11 +131,10 @@ export class RotateElement extends BaseContainer<RotateElementModel> {
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Draw
this.emit("debounceDraw");
}
diff --git a/src/lib/elements/rotatings/RotateScaleElement.ts b/src/lib/elements/rotatings/RotateScaleElement.ts
index 356d54ddde121f453f9b1e9125375c878b70e27a..6ac05ea5893a94e763266c64da33ed5f35f4fb2c 100644
--- a/src/lib/elements/rotatings/RotateScaleElement.ts
+++ b/src/lib/elements/rotatings/RotateScaleElement.ts
@@ -2,19 +2,19 @@ import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import * as Models from "@ascii-dev-user/medsurf-lib/models";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
-import {BaseGraphics, BaseGraphicsModel} from "../../bases/elements/BaseGraphics";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
+import {BaseGraphics, BaseGraphicsImageModel} from "../../bases/elements/BaseGraphics";
/**
* Degree element model
*/
-export class DegreeElementModel extends BaseGraphicsModel {
+export class DegreeElementModel extends BaseGraphicsImageModel {
rectangle: PIXI.Rectangle;
options: Models.ElementOptions = {hasLine: true, lineColor: 0xFFFFFF, lineAlpha: 1, hasFill: false};
lineWidth: number | undefined = 1;
}
-export class RotateScaleElementModel extends BaseContainerModel {
+export class RotateScaleElementModel extends BaseContainerImageModel {
rotateElement: MedsurfDraw.RotateElement;
}
@@ -47,6 +47,7 @@ export class RotateScaleElement extends BaseContainer<RotateScaleElementModel> {
//<editor-fold desc="Elements">
// -- Degree element
this._degreeGraphicElement = new BaseGraphics<DegreeElementModel>({
+ image: this.image,
rectangle: this.rotateElement.rectangle,
options: { hasLine: true, lineColor: 0xFFFFAA, lineAlpha: 1, hasFill: false},
lineWidth: 15
@@ -80,7 +81,7 @@ export class RotateScaleElement extends BaseContainer<RotateScaleElementModel> {
* Draw
*/
public draw(): void {
- let scale = this.getImageScale().x * Design.rotateScale.scaleAspect;
+ let scale = this.imageScale.x * Design.rotateScale.scaleAspect;
if (scale > 1) {
scale = 1;
}
@@ -199,11 +200,10 @@ export class RotateScaleElement extends BaseContainer<RotateScaleElementModel> {
//<editor-fold desc="ImageZoom">
/**
* On image zoom
+ * @param scaleX
+ * @param scaleY
*/
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
+ public onImageZoom(scaleX: number, scaleY: number): void {
// Draw
this.emit("debounceDraw");
}
diff --git a/src/lib/elements/scalings/ScaleElement.ts b/src/lib/elements/scalings/ScaleElement.ts
index 3b9b6b51688e53346e2e127b425ba6f7cebe9568..43db0f96866507c7ec16f4eb07408e617dd6fb0a 100644
--- a/src/lib/elements/scalings/ScaleElement.ts
+++ b/src/lib/elements/scalings/ScaleElement.ts
@@ -1,7 +1,7 @@
import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
-import {BaseContainer, BaseContainerModel} from "../../bases/elements/BaseContainer";
+import {BaseContainer, BaseContainerImageModel} from "../../bases/elements/BaseContainer";
import {debounce} from "debounce";
/**
@@ -16,7 +16,7 @@ export enum ScaleElementType {
/**
* Scale element model
*/
-export class ScaleElementModel extends BaseContainerModel {
+export class ScaleElementModel extends BaseContainerImageModel {
type: ScaleElementType;
rectangle: PIXI.Rectangle
}
@@ -78,17 +78,6 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
* Init
*/
public init(): void {
- let scale = this.getImageScale().x * Design.scale.scaleAspect;
- let radius = Design.positionPoint.radius;
- // TODO if (this.modeInteraction.lastMode === 'select' || this.modeInteraction.lastMode === 'selftest') {
- radius = Math.floor(radius / scale);
- /* TODO } else if (scale < 1) {
- scale = 1;
- }*/
- const lineWidth = Design.scale.lineWidth / scale;
- const cornerRadius = Design.scale.cornerRadius / scale / 2;
- // const rotationDY = Design.scale.rotationDY / scale;
-
//<editor-fold desc="Elements">
// -- Rectangle element
this._rectangleElement = new MedsurfDraw.Rectangle({
@@ -99,9 +88,9 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
this.addChild(this._rectangleElement);
// -- Top left point element
this._topLeftCircleElement = new MedsurfDraw.Circle({
- circle: new PIXI.Circle(0, 0, cornerRadius),
+ circle: new PIXI.Circle(0, 0, Design.scale.cornerRadius),
options: { hasLine: true, lineColor: Design.scale.lineColorNormal, lineAlpha: Design.scale.lineAlpha, hasFill: true, fillColor: Design.scale.fillColorNormal, fillAlpha: Design.scale.fillAlpha},
- lineWidth: lineWidth
+ lineWidth: Design.scale.lineWidth
});
this._topLeftCircleElement.interactive = true;
this._topLeftCircleElement.cursor = "scale-nwse";
@@ -113,9 +102,9 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
this.addChild(this._topLeftCircleElement);
// -- Top right point element
this._topRightCircleElement = new MedsurfDraw.Circle({
- circle: new PIXI.Circle(0, 0, cornerRadius),
+ circle: new PIXI.Circle(0, 0, Design.scale.cornerRadius),
options: { hasLine: true, lineColor: Design.scale.lineColorNormal, lineAlpha: Design.scale.lineAlpha, hasFill: true, fillColor: Design.scale.fillColorNormal, fillAlpha: Design.scale.fillAlpha},
- lineWidth: lineWidth
+ lineWidth: Design.scale.lineWidth
});
this._topRightCircleElement.interactive = true;
this._topRightCircleElement.cursor = "scale-nesw";
@@ -127,9 +116,9 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
this.addChild(this._topRightCircleElement);
// -- Bottom right point element
this._bottomRightCircleElement = new MedsurfDraw.Circle({
- circle: new PIXI.Circle(0, 0, cornerRadius),
+ circle: new PIXI.Circle(0, 0, Design.scale.cornerRadius),
options: { hasLine: true, lineColor: Design.scale.lineColorNormal, lineAlpha: Design.scale.lineAlpha, hasFill: true, fillColor: Design.scale.fillColorNormal, fillAlpha: Design.scale.fillAlpha},
- lineWidth: lineWidth
+ lineWidth: Design.scale.lineWidth
});
this._bottomRightCircleElement.interactive = true;
this._bottomRightCircleElement.cursor = "scale-nwse";
@@ -141,9 +130,9 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
this.addChild(this._bottomRightCircleElement);
// -- Bottom left point element
this._bottomLeftCircleElement = new MedsurfDraw.Circle({
- circle: new PIXI.Circle(0, 0, cornerRadius),
+ circle: new PIXI.Circle(0, 0, Design.scale.cornerRadius),
options: { hasLine: true, lineColor: Design.scale.lineColorNormal, lineAlpha: Design.scale.lineAlpha, hasFill: true, fillColor: Design.scale.fillColorNormal, fillAlpha: Design.scale.fillAlpha},
- lineWidth: lineWidth
+ lineWidth: Design.scale.lineWidth
});
this._bottomLeftCircleElement.interactive = true;
this._bottomLeftCircleElement.cursor = "scale-nesw";
@@ -160,7 +149,7 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
end: new PIXI.Point(0, 0),
},
options: { hasLine: true, lineColor: Design.scale.lineColorNormal, lineAlpha: Design.scale.lineAlpha, hasFill: true, fillColor: Design.scale.fillColorNormal, fillAlpha: Design.scale.fillAlpha},
- lineWidth: lineWidth,
+ lineWidth: Design.scale.lineWidth,
});
this._topLineElement.interactive = true;
this._topLineElement.cursor = "scale-v";
@@ -177,7 +166,7 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
end: new PIXI.Point(0, 0),
},
options: { hasLine: true, lineColor: Design.scale.lineColorNormal, lineAlpha: Design.scale.lineAlpha, hasFill: true, fillColor: Design.scale.fillColorNormal, fillAlpha: Design.scale.fillAlpha},
- lineWidth: lineWidth,
+ lineWidth: Design.scale.lineWidth,
});
this._rightLineElement.interactive = true;
this._rightLineElement.cursor = "scale-h";
@@ -194,7 +183,7 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
end: new PIXI.Point(0, 0),
},
options: { hasLine: true, lineColor: Design.scale.lineColorNormal, lineAlpha: Design.scale.lineAlpha, hasFill: true, fillColor: Design.scale.fillColorNormal, fillAlpha: Design.scale.fillAlpha},
- lineWidth: lineWidth,
+ lineWidth: Design.scale.lineWidth,
});
this._bottomLineElement.interactive = true;
this._bottomLineElement.cursor = "scale-v";
@@ -211,7 +200,7 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
end: new PIXI.Point(0, 0),
},
options: { hasLine: true, lineColor: Design.scale.lineColorNormal, lineAlpha: Design.scale.lineAlpha, hasFill: true, fillColor: Design.scale.fillColorNormal, fillAlpha: Design.scale.fillAlpha},
- lineWidth: lineWidth,
+ lineWidth: Design.scale.lineWidth,
});
this._leftLineElement.interactive = true;
this._leftLineElement.cursor = "scale-h";
@@ -223,9 +212,6 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
this.addChild(this._leftLineElement);
//</editor-fold>
- // Check for type
- this._typeChanged();
-
// Sort items
this.sortChildren();
@@ -237,85 +223,63 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
* Draw
*/
public draw(): void {
- let scale = this.getImageScale().x * Design.scale.scaleAspect;
- if (scale > 1) {
- scale = 1;
- }
- // TODO rectangle.pad(this._pad, this._pad);
- const lineWidth = Design.scale.lineWidth / scale;
- const cornerRadius = Design.scale.cornerRadius / scale / 2;
- // const rotationDY = Design.rotate.rotationDY / scale;
-
//<editor-fold desc="Elements">
// -- Rectangle element
if (this._rectangleElement) {
this._rectangleElement.position.set(this.rectangle.x, this.rectangle.y);
this._rectangleElement.rectangle = new PIXI.Rectangle(0, 0, this.rectangle.width, this.rectangle.height);
- this._rectangleElement.lineWidth = lineWidth;
this._rectangleElement.draw();
}
// -- Top left point element
if (this._topLeftCircleElement) {
this._topLeftCircleElement.position.set(this.rectangle.x, this.rectangle.y);
- this._topLeftCircleElement.circle.radius = cornerRadius;
- this._topLeftCircleElement.lineWidth = lineWidth;
this._topLeftCircleElement.draw();
}
// -- Top right point element
if (this._topRightCircleElement) {
this._topRightCircleElement.position.set(this.rectangle.x + this.rectangle.width, this.rectangle.y);
- this._topRightCircleElement.circle.radius = cornerRadius;
- this._topRightCircleElement.lineWidth = lineWidth;
this._topRightCircleElement.draw();
}
// -- Bottom right point element
if (this._bottomRightCircleElement) {
this._bottomRightCircleElement.position.set(this.rectangle.x + this.rectangle.width, this.rectangle.y + this.rectangle.height);
- this._bottomRightCircleElement.circle.radius = cornerRadius;
- this._bottomRightCircleElement.lineWidth = lineWidth;
this._bottomRightCircleElement.draw();
}
// -- Bottom left point element
if (this._bottomLeftCircleElement) {
this._bottomLeftCircleElement.position.set(this.rectangle.x, this.rectangle.y + this.rectangle.height);
- this._bottomLeftCircleElement.circle.radius = cornerRadius;
- this._bottomLeftCircleElement.lineWidth = lineWidth;
this._bottomLeftCircleElement.draw();
}
// -- Top line element
if (this._topLineElement) {
this._topLineElement.points = {
- start: new PIXI.Point(this._topLeftCircleElement.position.x + cornerRadius, this._topLeftCircleElement.position.y),
- end: new PIXI.Point(this._topRightCircleElement.position.x - cornerRadius, this._topRightCircleElement.position.y),
+ start: new PIXI.Point(this._topLeftCircleElement.position.x + Design.scale.cornerRadius, this._topLeftCircleElement.position.y),
+ end: new PIXI.Point(this._topRightCircleElement.position.x - Design.scale.cornerRadius, this._topRightCircleElement.position.y),
};
- this._topLineElement.lineWidth = lineWidth;
this._topLineElement.draw();
}
// -- Right line element
if (this._rightLineElement) {
this._rightLineElement.points = {
- start: new PIXI.Point(this._topRightCircleElement.position.x, this._topRightCircleElement.position.y + cornerRadius),
- end: new PIXI.Point(this._bottomRightCircleElement.position.x, this._bottomRightCircleElement.position.y - cornerRadius),
+ start: new PIXI.Point(this._topRightCircleElement.position.x, this._topRightCircleElement.position.y + Design.scale.cornerRadius),
+ end: new PIXI.Point(this._bottomRightCircleElement.position.x, this._bottomRightCircleElement.position.y - Design.scale.cornerRadius),
};
- this._rightLineElement.lineWidth = lineWidth;
this._rightLineElement.draw();
}
// -- Bottom line element
if (this._bottomLineElement) {
this._bottomLineElement.points = {
- start: new PIXI.Point(this._bottomRightCircleElement.position.x - cornerRadius, this._bottomRightCircleElement.position.y),
- end: new PIXI.Point(this._bottomLeftCircleElement.position.x + cornerRadius, this._bottomLeftCircleElement.position.y),
+ start: new PIXI.Point(this._bottomRightCircleElement.position.x - Design.scale.cornerRadius, this._bottomRightCircleElement.position.y),
+ end: new PIXI.Point(this._bottomLeftCircleElement.position.x + Design.scale.cornerRadius, this._bottomLeftCircleElement.position.y),
};
- this._bottomLineElement.lineWidth = lineWidth;
this._bottomLineElement.draw();
}
// -- Left line element
if (this._leftLineElement) {
this._leftLineElement.points = {
- start: new PIXI.Point(this._bottomLeftCircleElement.position.x, this._bottomLeftCircleElement.position.y - cornerRadius),
- end: new PIXI.Point(this._topLeftCircleElement.position.x, this._topLeftCircleElement.position.y + cornerRadius),
+ start: new PIXI.Point(this._bottomLeftCircleElement.position.x, this._bottomLeftCircleElement.position.y - Design.scale.cornerRadius),
+ end: new PIXI.Point(this._topLeftCircleElement.position.x, this._topLeftCircleElement.position.y + Design.scale.cornerRadius),
};
- this._leftLineElement.lineWidth = lineWidth;
this._leftLineElement.draw();
}
//</editor-fold>
@@ -336,74 +300,34 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
}
// -- Top left point element
if (this._topLeftCircleElement) {
- this._topLeftCircleElement.off("pointerover", this.onPointerOver, this);
- this._topLeftCircleElement.off("mousedown", this.onPointerDownXY, this);
- this._topLeftCircleElement.off("pointermove", this.onScale, this);
- this._topLeftCircleElement.off("mouseup", this.endScale, this);
- this._topLeftCircleElement.off("pointerupoutside", this.endScale, this);
this._topLeftCircleElement.destroy(options);
}
// -- Top right point element
if (this._topRightCircleElement) {
- this._topRightCircleElement.off("pointerover", this.onPointerOver, this);
- this._topRightCircleElement.off("mousedown", this.onPointerDownWidthY, this);
- this._topRightCircleElement.off("pointermove", this.onScale, this);
- this._topRightCircleElement.off("mouseup", this.endScale, this);
- this._topRightCircleElement.off("pointerupoutside", this.endScale, this);
this._topRightCircleElement.destroy(options);
}
// -- Bottom right point element
if (this._bottomRightCircleElement) {
- this._bottomRightCircleElement.off("pointerover", this.onPointerOver, this);
- this._bottomRightCircleElement.off("mousedown", this.onPointerDownWidthHeight, this);
- this._bottomRightCircleElement.off("pointermove", this.onScale, this);
- this._bottomRightCircleElement.off("mouseup", this.endScale, this);
- this._bottomRightCircleElement.off("pointerupoutside", this.endScale, this);
this._bottomRightCircleElement.destroy(options);
}
// -- Bottom left point element
if (this._bottomLeftCircleElement) {
- this._bottomLeftCircleElement.off("pointerover", this.onPointerOver, this);
- this._bottomLeftCircleElement.off("mousedown", this.onPointerDownXHeight, this);
- this._bottomLeftCircleElement.off("pointermove", this.onScale, this);
- this._bottomLeftCircleElement.off("mouseup", this.endScale, this);
- this._bottomLeftCircleElement.off("pointerupoutside", this.endScale, this);
this._bottomLeftCircleElement.destroy(options);
}
// -- Top line element
if (this._topLineElement) {
- this._topLineElement.off("pointerover", this.onPointerOver, this);
- this._topLineElement.off("mousedown", this.onPointerDownY, this);
- this._topLineElement.off("pointermove", this.onScale, this);
- this._topLineElement.off("mouseup", this.endScale, this);
- this._topLineElement.off("pointerupoutside", this.endScale, this);
this._topLineElement.destroy(options);
}
// -- Right line element
if (this._rightLineElement) {
- this._rightLineElement.off("pointerover", this.onPointerOver, this);
- this._rightLineElement.off("mousedown", this.onPointerDownWidth, this);
- this._rightLineElement.off("pointermove", this.onScale, this);
- this._rightLineElement.off("mouseup", this.endScale, this);
- this._rightLineElement.off("pointerupoutside", this.endScale, this);
this._rightLineElement.destroy(options);
}
// -- Bottom line element
if (this._bottomLineElement) {
- this._bottomLineElement.off("pointerover", this.onPointerOver, this);
- this._bottomLineElement.off("mousedown", this.onPointerDownHeight, this);
- this._bottomLineElement.off("pointermove", this.onScale, this);
- this._bottomLineElement.off("mouseup", this.endScale, this);
- this._bottomLineElement.off("pointerupoutside", this.endScale, this);
this._bottomLineElement.destroy(options);
}
// -- Left line element
if (this._leftLineElement) {
- this._leftLineElement.off("pointerover", this.onPointerOver, this);
- this._leftLineElement.off("mousedown", this.onPointerDownX, this);
- this._leftLineElement.off("pointermove", this.onScale, this);
- this._leftLineElement.off("mouseup", this.endScale, this);
- this._leftLineElement.off("pointerupoutside", this.endScale, this);
this._leftLineElement.destroy(options);
}
//</editor-fold>
@@ -746,39 +670,7 @@ export class ScaleElement extends BaseContainer<ScaleElementModel> {
}
//</editor-fold>
- //<editor-fold desc="ImageZoom">
- /**
- * On image zoom
- */
- public onImageZoom(): void {
- // Parent event
- super.onImageZoom();
-
- // Draw
- this.emit("debounceDraw");
- }
- //</editor-fold>
-
//<editor-fold desc="Getter and Setter">
- /**
- * Get scale interaction
- */
- /*
- public get scaleInteraction(): MedsurfDraw.ScaleInteraction<ScaleElement> {
- return this._scaleInteraction;
- }
- */
-
- /**
- * Set scale interaction
- * @param value
- */
- /*
- public set scaleInteraction(value: MedsurfDraw.ScaleInteraction<ScaleElement>) {
- this._scaleInteraction = value;
- }
- */
-
/**
* Get type
*/
diff --git a/src/lib/generators/combinations/ArrowGenerator.ts b/src/lib/generators/combinations/ArrowGenerator.ts
index eaa676a0b01df0fa7bd718320d2b183de3417710..ce149080cb8f1267208b8711ee627961cf166487 100644
--- a/src/lib/generators/combinations/ArrowGenerator.ts
+++ b/src/lib/generators/combinations/ArrowGenerator.ts
@@ -248,7 +248,10 @@ export class ArrowGenerator extends BaseGenerator<MedsurfDraw.Image, ArrowGenera
public startTextPrimitiveGenerator(): void {
//<editor-fold desc="Elements">
// -- Line element
- this._lineElement = MedsurfDraw.Line.getInstance(this._arrowPrimitiveGenerator.positionPointElement.name as string, this._textPrimitiveGenerator.positionPointElement.name as string, false, this.target.dimensions.width);
+ this._lineElement = MedsurfDraw.Line.getInstance(this.target,
+ this._arrowPrimitiveGenerator.positionPointElement.name as string,
+ this._textPrimitiveGenerator.positionPointElement.name as string, false,
+ this.target.dimensions.width);
this.target.addChild(this._lineElement);
this._lineElement.controlDrawItem(true);
this._lineElement.showItem();
diff --git a/src/lib/generators/combinations/EllipseGenerator.ts b/src/lib/generators/combinations/EllipseGenerator.ts
index 625ddb9a2b3c98df036aedc413228a3e4eeab731..2a3cc7452ea5e54ecfefd2c874da22ead80b445e 100644
--- a/src/lib/generators/combinations/EllipseGenerator.ts
+++ b/src/lib/generators/combinations/EllipseGenerator.ts
@@ -246,7 +246,10 @@ export class EllipseGenerator extends BaseGenerator<MedsurfDraw.Image, EllipseGe
public startTextPrimitiveGenerator(): void {
//<editor-fold desc="Elements">
// -- Line element
- this._lineElement = MedsurfDraw.Line.getInstance(this._ellipsePrimitiveGenerator.positionPointElement.name as string, this._textPrimitiveGenerator.positionPointElement.name as string, false, this.target.dimensions.width);
+ this._lineElement = MedsurfDraw.Line.getInstance(this.target,
+ this._ellipsePrimitiveGenerator.positionPointElement.name as string,
+ this._textPrimitiveGenerator.positionPointElement.name as string, false,
+ this.target.dimensions.width);
this.target.addChild(this._lineElement);
this._lineElement.controlDrawItem(true);
this._lineElement.showItem();
diff --git a/src/lib/generators/combinations/InteractiveAreaGenerator.ts b/src/lib/generators/combinations/InteractiveAreaGenerator.ts
index 2180c24a4872b0bcecba7803f739ecf6abdc12ed..50328a906125b60e741a96eeeca5fa13d7ee9a88 100644
--- a/src/lib/generators/combinations/InteractiveAreaGenerator.ts
+++ b/src/lib/generators/combinations/InteractiveAreaGenerator.ts
@@ -176,7 +176,7 @@ export class InteractiveAreaGenerator extends BaseGenerator<MedsurfDraw.Image, I
stickMode: MedsurfDraw.StickMode.NOELEMENTS,
startElement: positionPoint,
rotateWithLine: false,
- triggerImmediateEndDraw: false
+ triggerImmediateEndDraw: true
});
this._textPrimitiveGenerator.once("startGenerator", this.startTextPrimitiveGenerator, this);
this._textPrimitiveGenerator.once("endGenerator", this.endTextPrimitiveGenerator, this);
@@ -243,7 +243,10 @@ export class InteractiveAreaGenerator extends BaseGenerator<MedsurfDraw.Image, I
public startTextPrimitiveGenerator(): void {
//<editor-fold desc="Elements">
// -- Line element
- this._lineElement = MedsurfDraw.Line.getInstance(this._fillGenerator.fillCollectionElement.name as string, this._textPrimitiveGenerator.positionPointElement.name as string, false, this.target.dimensions.width);
+ this._lineElement = MedsurfDraw.Line.getInstance(this.target,
+ this._fillGenerator.fillCollectionElement.name as string,
+ this._textPrimitiveGenerator.positionPointElement.name as string, false,
+ this.target.dimensions.width);
this.target.addChild(this._lineElement);
this._lineElement.controlDrawItem(true);
this._lineElement.showItem();
diff --git a/src/lib/generators/combinations/RectangleGenerator.ts b/src/lib/generators/combinations/RectangleGenerator.ts
index 50a3e4fe4de6c52de7ea52323902c488aa7f5cb3..311227949f82f8226bf08b9d7041c30dda3def8a 100644
--- a/src/lib/generators/combinations/RectangleGenerator.ts
+++ b/src/lib/generators/combinations/RectangleGenerator.ts
@@ -246,7 +246,10 @@ export class RectangleGenerator extends BaseGenerator<MedsurfDraw.Image, Rectang
public startTextPrimitiveGenerator(): void {
//<editor-fold desc="Elements">
// -- Line element
- this._lineElement = MedsurfDraw.Line.getInstance(this._rectanglePrimitiveGenerator.positionPointElement.name as string, this._textPrimitiveGenerator.positionPointElement.name as string, false, this.target.dimensions.width);
+ this._lineElement = MedsurfDraw.Line.getInstance(this.target,
+ this._rectanglePrimitiveGenerator.positionPointElement.name as string,
+ this._textPrimitiveGenerator.positionPointElement.name as string, false,
+ this.target.dimensions.width);
this.target.addChild(this._lineElement);
this._lineElement.controlDrawItem(true);
this._lineElement.showItem();
diff --git a/src/lib/generators/connections/LineGenerator.ts b/src/lib/generators/connections/LineGenerator.ts
index ded40ebb046047e7c5930c416078f7dc2e96aa5c..7fd706b18f0d4d342217667a714ab5fe006d4607 100644
--- a/src/lib/generators/connections/LineGenerator.ts
+++ b/src/lib/generators/connections/LineGenerator.ts
@@ -284,7 +284,8 @@ export class LineGenerator extends BaseGenerator<MedsurfDraw.Image, LineGenerato
} else {
// Elements
// -- Line element
- this._lineElement = MedsurfDraw.Line.getInstance(startElement.name as string, this.endPositionPointElement.name as string, this.bezierCourve, this.target.dimensions.width);
+ this._lineElement = MedsurfDraw.Line.getInstance(this.target, startElement.name as string,
+ this.endPositionPointElement.name as string, this.bezierCourve, this.target.dimensions.width);
this.target.addChild(this.lineElement);
this.lineElement.controlDrawItem(true);
diff --git a/src/lib/generators/copies/CloneItemGenerator.ts b/src/lib/generators/copies/CloneItemGenerator.ts
index 7188c4fe870ce61d7a484ebf35e4fe365f152a61..66b5cfd1c2a6b6ee6a48ad97591de93c1527c24d 100644
--- a/src/lib/generators/copies/CloneItemGenerator.ts
+++ b/src/lib/generators/copies/CloneItemGenerator.ts
@@ -434,7 +434,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
protected _positionPointOnReset(model: Models.PositionPoint,
positionPoint: MedsurfDraw.PositionPoint,
relativePoint: Models.Point): void {
- const imageWidth = this.target.getImageDimensions().width;
+ const imageWidth = this.target.imageDimensions.width;
const pos = this.target.renderer.plugins.interaction.mouse.global;
const rect = this.target.getRectangle();
positionPoint.position.x = (model.position.x - relativePoint.x) * imageWidth + (pos.x - rect.x) / this.target.scale.x;
@@ -460,7 +460,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
protected _positionPointOnZoom(model: Models.PositionPoint,
positionPoint: MedsurfDraw.PositionPoint,
relativePoint: Models.Point): void {
- const imageWidth = this.target.getImageDimensions().width;
+ const imageWidth = this.target.imageDimensions.width;
const pos = this.target.renderer.plugins.interaction.mouse.global;
const rect = this.target.getRectangle();
positionPoint.position.x = (model.position.x - relativePoint.x) * imageWidth + (pos.x - rect.x) / this.target.scale.x;
@@ -486,7 +486,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
protected _legendCollectionOnZoom(model: Models.LegendCollection,
legendCollection: MedsurfDraw.LegendCollection,
relativePoint: Models.Point): void {
- const imageWidth = this.target.getImageDimensions().width;
+ const imageWidth = this.target.imageDimensions.width;
const pos = this.target.renderer.plugins.interaction.mouse.global;
const rect = this.target.getRectangle();
legendCollection.position.x = (model.rectangle.x - relativePoint.x) * imageWidth + (pos.x - rect.x) / this.target.scale.x;
@@ -511,7 +511,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
const positionPointModel = this.createPositionPointModel(model, relativePoint);
// Create new instance
- const positionPoint = new MedsurfDraw.PositionPoint(positionPointModel);
+ const positionPoint = new MedsurfDraw.PositionPoint(this.target, positionPointModel);
// TODO remove positionPoint.hideItem();
// Add Model
@@ -612,7 +612,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
const lineModel = this.createLineModel(model, start, end);
// Create new instance
- const line = new MedsurfDraw.Line(lineModel);
+ const line = new MedsurfDraw.Line(this.target, lineModel);
// TODO remove line.hideItem();
// Add Model
@@ -646,7 +646,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
const fillCollectionModel = this.createFillCollectionModel(model, lines);
// Create new instance
- const fillCollection = new MedsurfDraw.FillCollection(fillCollectionModel);
+ const fillCollection = new MedsurfDraw.FillCollection(this.target, fillCollectionModel);
// TODO remove fillCollection.hideItem();
// Add Model
@@ -693,7 +693,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
}
// Create new instance
- const legendCollection = new MedsurfDraw.LegendCollection(legendCollectionModel);
+ const legendCollection = new MedsurfDraw.LegendCollection(this.target, legendCollectionModel);
// TODO remove legendCollection.hideItem();
// Add Model
@@ -739,7 +739,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
const arrowPrimitiveModel = this.createArrowPrimitiveModel(model, positionPoint);
// Create new instance
- const arrowPrimitive = new MedsurfDraw.ArrowPrimitive(arrowPrimitiveModel);
+ const arrowPrimitive = new MedsurfDraw.ArrowPrimitive(this.target, arrowPrimitiveModel);
// Create mapping
this.data.imageObjectMappings.push({
@@ -765,7 +765,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
const ellipsePrimitiveModel = this.createEllipsePrimitiveModel(model, positionPoint);
// Create new instance
- const ellipsePrimitive = new MedsurfDraw.EllipsePrimitive(ellipsePrimitiveModel);
+ const ellipsePrimitive = new MedsurfDraw.EllipsePrimitive(this.target, ellipsePrimitiveModel);
// Create mapping
this.data.imageObjectMappings.push({
@@ -791,7 +791,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
const rectanglePrimitiveModel = this.createRectanglePrimitiveModel(model, positionPoint);
// Create new instance
- const rectanglePrimitive = new MedsurfDraw.RectanglePrimitive(rectanglePrimitiveModel);
+ const rectanglePrimitive = new MedsurfDraw.RectanglePrimitive(this.target, rectanglePrimitiveModel);
// Create mapping
this.data.imageObjectMappings.push({
@@ -817,7 +817,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
const textPrimitiveModel = this.createTextPrimitiveModel(model, positionPoint);
// Create new instance
- const textPrimitive = new MedsurfDraw.TextPrimitive(textPrimitiveModel);
+ const textPrimitive = new MedsurfDraw.TextPrimitive(this.target, textPrimitiveModel);
// Create mapping
this.data.imageObjectMappings.push({
@@ -965,7 +965,7 @@ export class CloneItemGenerator extends BaseGenerator<MedsurfDraw.Image, CloneIt
public createLegendRowModel(model: Models.LegendRow,
legendColumn: Models.LegendColumn): Models.LegendRow {
// Get image width
- const imageWidth = this.target.getImageDimensions().width;
+ const imageWidth = this.target.imageDimensions.width;
const legendRowModel = {
dirty: true,
diff --git a/src/lib/generators/fills/FillGenerator.ts b/src/lib/generators/fills/FillGenerator.ts
index 42e19059e512b8711a5d8733c1b8aa94eb8e7a68..822007be3994b7214c8a1721723a9012285a351b 100644
--- a/src/lib/generators/fills/FillGenerator.ts
+++ b/src/lib/generators/fills/FillGenerator.ts
@@ -151,7 +151,7 @@ export class FillGenerator extends BaseGenerator<MedsurfDraw.Image, FillGenerato
public startLineGenerator(): void {
//<editor-fold desc="Elements">
// -- Fill collection element
- this._fillCollectionElement = MedsurfDraw.FillCollection.getInstance([]);
+ this._fillCollectionElement = MedsurfDraw.FillCollection.getInstance(this.target, []);
this.target.addChild(this._fillCollectionElement);
this.fillCollectionElement.controlDrawItem();
//</editor-fold>
diff --git a/src/lib/generators/legends/LegendGenerator.ts b/src/lib/generators/legends/LegendGenerator.ts
index ea7b6508aa17416ab31b02b1061d43c0028beaa7..dc220668cbaefb84ff6d01a0c0feefbf2dabd597 100644
--- a/src/lib/generators/legends/LegendGenerator.ts
+++ b/src/lib/generators/legends/LegendGenerator.ts
@@ -45,7 +45,7 @@ export class LegendGenerator extends BaseGenerator<MedsurfDraw.Image, LegendGene
// -- Image
this.target.modeInteraction.setModeItem("drawing");
// -- legend element
- this._legendElement = MedsurfDraw.LegendCollection.getInstance(this.target.dimensions.width);
+ this._legendElement = MedsurfDraw.LegendCollection.getInstance(this.target, this.target.dimensions.width);
this.legendElement.hideItem();
this.target.addChild(this.legendElement);
this.legendElement.controlDrawItem(true);
diff --git a/src/lib/generators/positionings/PositionPointGenerator.ts b/src/lib/generators/positionings/PositionPointGenerator.ts
index e525b11bfb7768a31c9cd2052007b785bc73f1e3..efd5b58eebc62a7eb1ac0aa9dcc112ebea034889 100644
--- a/src/lib/generators/positionings/PositionPointGenerator.ts
+++ b/src/lib/generators/positionings/PositionPointGenerator.ts
@@ -46,7 +46,7 @@ export class PositionPointGenerator extends BaseGenerator<MedsurfDraw.Image, Pos
// -- Image
this.target.modeInteraction.setModeItem("drawing");
// -- Position point element
- this._positionPointElement = MedsurfDraw.PositionPoint.getInstance();
+ this._positionPointElement = MedsurfDraw.PositionPoint.getInstance(this.target);
this.positionPointElement.hideItem();
this.target.addChild(this.positionPointElement);
this.positionPointElement.controlDrawItem(true);
diff --git a/src/lib/generators/primitives/ArrowPrimitiveGenerator.ts b/src/lib/generators/primitives/ArrowPrimitiveGenerator.ts
index fa9664611ef17fe735fb5f5a16c16825cea4fc4a..af33841ed6136098eedc1d6658934317b316e940 100644
--- a/src/lib/generators/primitives/ArrowPrimitiveGenerator.ts
+++ b/src/lib/generators/primitives/ArrowPrimitiveGenerator.ts
@@ -189,7 +189,7 @@ export class ArrowPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Ar
public startPositionPointGenerator(): void {
//<editor-fold desc="Elements">
// -- Arrow primitive element
- this._arrowPrimitiveElement = MedsurfDraw.ArrowPrimitive.getInstance(this.hasWedgePoint, this.rotateWithLine, this.target.dimensions.width);
+ this._arrowPrimitiveElement = MedsurfDraw.ArrowPrimitive.getInstance(this.target, this.hasWedgePoint, this.rotateWithLine, this.target.dimensions.width);
this.positionPointElement.addChild(this.arrowPrimitiveElement);
this.arrowPrimitiveElement.controlDrawItem();
this.arrowPrimitiveElement.showItem();
diff --git a/src/lib/generators/primitives/EllipsePrimitiveGenerator.ts b/src/lib/generators/primitives/EllipsePrimitiveGenerator.ts
index 2a7ab9deccc015f1fdff0a9deff3f258f267ce7d..a205aa0cdd660aed6d46f823822de41763a55a15 100644
--- a/src/lib/generators/primitives/EllipsePrimitiveGenerator.ts
+++ b/src/lib/generators/primitives/EllipsePrimitiveGenerator.ts
@@ -188,7 +188,7 @@ export class EllipsePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image,
public startPositionPointGenerator(): void {
//<editor-fold desc="Elements">
// -- Ellipse primitive element
- this._ellipsePrimitiveElement = MedsurfDraw.EllipsePrimitive.getInstance(this.rotateWithLine, this.target.dimensions.width);
+ this._ellipsePrimitiveElement = MedsurfDraw.EllipsePrimitive.getInstance(this.target, this.rotateWithLine, this.target.dimensions.width);
this.positionPointElement.addChild(this.ellipsePrimitiveElement);
this.ellipsePrimitiveElement.controlDrawItem();
this.ellipsePrimitiveElement.showItem();
diff --git a/src/lib/generators/primitives/RectanglePrimitiveGenerator.ts b/src/lib/generators/primitives/RectanglePrimitiveGenerator.ts
index 805946c366cd078f60240886386d9b4ae63ee3ff..7fcaa20816bf5ad976abbb5ac904f2bc9f9d7aa1 100644
--- a/src/lib/generators/primitives/RectanglePrimitiveGenerator.ts
+++ b/src/lib/generators/primitives/RectanglePrimitiveGenerator.ts
@@ -187,7 +187,7 @@ export class RectanglePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image
public startPositionPointGenerator(): void {
//<editor-fold desc="Elements">
// -- Rectangle primitive element
- this._rectanglePrimitiveElement = MedsurfDraw.RectanglePrimitive.getInstance(this.rotateWithLine, this.target.dimensions.width);
+ this._rectanglePrimitiveElement = MedsurfDraw.RectanglePrimitive.getInstance(this.target, this.rotateWithLine, this.target.dimensions.width);
this.positionPointElement.addChild(this.rectanglePrimitiveElement);
this.rectanglePrimitiveElement.controlDrawItem();
this.rectanglePrimitiveElement.showItem();
diff --git a/src/lib/generators/primitives/TextPrimitiveGenerator.ts b/src/lib/generators/primitives/TextPrimitiveGenerator.ts
index 37cae996dbf2fdff4af852daf5ff4985a17db0da..725c449458be52290006198765d23acd309c5968 100644
--- a/src/lib/generators/primitives/TextPrimitiveGenerator.ts
+++ b/src/lib/generators/primitives/TextPrimitiveGenerator.ts
@@ -187,7 +187,7 @@ export class TextPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Tex
public startPositionPointGenerator(): void {
//<editor-fold desc="Elements">
// -- Text primitive element
- this._textPrimitiveElement = MedsurfDraw.TextPrimitive.getInstance(this.rotateWithLine, this.target.dimensions.width);
+ this._textPrimitiveElement = MedsurfDraw.TextPrimitive.getInstance(this.target, this.rotateWithLine, this.target.dimensions.width);
this.positionPointElement.addChild(this.textPrimitiveElement);
this.textPrimitiveElement.controlDrawItem();
this.textPrimitiveElement.showItem();
diff --git a/src/lib/interactions/ChooseInteraction.ts b/src/lib/interactions/ChooseInteraction.ts
index 30cdac748df02e8b8d352e3ea15af2cdfb6068e4..95bdc2937defcf6c9a08b651a060e6eecfb53a70 100644
--- a/src/lib/interactions/ChooseInteraction.ts
+++ b/src/lib/interactions/ChooseInteraction.ts
@@ -89,7 +89,7 @@ export class ChooseInteraction<TElement extends MedsurfDraw.DrawableObject> exte
}
// Check for elements
- const image = this.element.getImage();
+ const image = this.element.image;
const renderer = image.renderer;
if (renderer) {
const globalPoint = renderer.plugins.interaction.mouse.global;
diff --git a/src/lib/interactions/DrawInteraction.ts b/src/lib/interactions/DrawInteraction.ts
index 730e0eb0a7cbea25479ecfc514441928fbac9713..a9f24e8cbdd60dafa65d15102f1fbf189bc269ea 100644
--- a/src/lib/interactions/DrawInteraction.ts
+++ b/src/lib/interactions/DrawInteraction.ts
@@ -136,10 +136,10 @@ export class DrawInteraction<TElement extends MedsurfDraw.DrawableObject> extend
}
// Check for other elements
- const renderer = this.element.getImage().renderer;
+ const renderer = this.element.image.renderer;
if (renderer) {
const globalPoint = renderer.plugins.interaction.mouse.global;
- const element = renderer.plugins.interaction.hitTest(globalPoint, this.element.getImage());
+ const element = renderer.plugins.interaction.hitTest(globalPoint, this.element.image);
if ((this.stickMode === StickMode.POSITIONPOINTS || this.stickMode === StickMode.POSITIONPOINTS_FILLCOLLECTIONS) && element instanceof MedsurfDraw.PositionPoint) {
if (element.modeInteraction.lastMode.startsWith('draw')) {
this.emit("updatePoint", event, element);
diff --git a/src/lib/interactions/MoveInteraction.ts b/src/lib/interactions/MoveInteraction.ts
index 88da487a6db5e74312c106c0d3bc8807b5683614..194958fbcd7548a1a0b4ffe261646a88d4b3e4f0 100644
--- a/src/lib/interactions/MoveInteraction.ts
+++ b/src/lib/interactions/MoveInteraction.ts
@@ -12,7 +12,8 @@ export class MoveInteraction<TElement extends MedsurfDraw.ImageObject> extends B
/**
* Members
*/
- private _isMoving: boolean;
+ protected _isMoving: boolean;
+ protected _isMoveLock: boolean;
protected _isImage: boolean;
protected _moveX: number;
protected _moveY: number;
@@ -36,6 +37,7 @@ export class MoveInteraction<TElement extends MedsurfDraw.ImageObject> extends B
// Members
this._isMoving = false;
+ this._isMoveLock = false;
this._isImage = isImage;
this._moveDeltaScaleCounter = 0;
this._moveDeltaScale = 1;
@@ -49,6 +51,7 @@ export class MoveInteraction<TElement extends MedsurfDraw.ImageObject> extends B
this._moveX = 0;
this._moveY = 0;
this._isMoving = false;
+ this._isMoveLock = false;
}
//</editor-fold>
@@ -76,12 +79,13 @@ export class MoveInteraction<TElement extends MedsurfDraw.ImageObject> extends B
return;
}
- const scale = (this._isImage) ? {x: 1, y: 1} : this.element.getImageScale();
+ const scale = (this._isImage) ? {x: 1, y: 1} : this.element.imageScale;
this._moveX = event.data.global.x / scale.x;
this._moveY = event.data.global.y / scale.y;
this._isMoving = true;
+ this._isMoveLock = false;
this.emit("startMove", event);
}
@@ -99,7 +103,7 @@ export class MoveInteraction<TElement extends MedsurfDraw.ImageObject> extends B
return;
}
- const scale = (this._isImage) ? {x: 1, y: 1} : this.element.getImageScale();
+ const scale = (this._isImage) ? {x: 1, y: 1} : this.element.imageScale;
this._moveX = event.data.global.x / scale.x;
this._moveY = event.data.global.y / scale.y;
@@ -116,7 +120,9 @@ export class MoveInteraction<TElement extends MedsurfDraw.ImageObject> extends B
return;
}
- const scale = (this._isImage) ? {x: 1, y: 1} : this.element.getImageScale();
+ this._isMoveLock = true;
+
+ const scale = (this._isImage) ? {x: 1, y: 1} : this.element.imageScale;
let dX = event.data.global.x / scale.x - this._moveX;
let dY = event.data.global.y / scale.y - this._moveY;
@@ -143,6 +149,12 @@ export class MoveInteraction<TElement extends MedsurfDraw.ImageObject> extends B
this._isMoving = false;
this.emit("endMove", event);
+
+ if (!this._isMoveLock) {
+ this.emit("endMoveLock", event);
+ } else {
+ this._isMoveLock = false;
+ }
}
/**
diff --git a/src/lib/interactions/RotateInteraction.ts b/src/lib/interactions/RotateInteraction.ts
index 51632a0bae3402e2c7067f2276d2f4243ef454d8..7a4e5d2fd6d08eff3cb2530a715df0dd1432f259 100644
--- a/src/lib/interactions/RotateInteraction.ts
+++ b/src/lib/interactions/RotateInteraction.ts
@@ -50,7 +50,7 @@ export class RotateInteraction<TElement extends MedsurfDraw.ImageObject> extends
return;
}
- const scale = this.element.getImageScale();
+ const scale = this.element.imageScale;
this._rotateX = event.data.global.x / scale.x;
// TODO remove this._rotateY = event.data.global.x / scale.y;
@@ -69,7 +69,7 @@ export class RotateInteraction<TElement extends MedsurfDraw.ImageObject> extends
return;
}
- const scale = this.element.getImageScale();
+ const scale = this.element.imageScale;
let dR = (event.data.global.x / scale.x - this._rotateX);
this._rotateX = event.data.global.x / scale.x;
diff --git a/src/lib/interactions/ScaleInteraction.ts b/src/lib/interactions/ScaleInteraction.ts
index 939c55fe5f264bf858c8266c26183eb85f59c0f0..581171969a734a88b72d617fe76e44ad9a12b860 100644
--- a/src/lib/interactions/ScaleInteraction.ts
+++ b/src/lib/interactions/ScaleInteraction.ts
@@ -65,7 +65,7 @@ export class ScaleInteraction<TElement extends MedsurfDraw.ImageObject> extends
this._scaleSide = scaleSide;
- const scale = this.element.getImageScale();
+ const scale = this.element.imageScale;
this._scaleX = event.data.global.x / scale.x;
this._scaleY = event.data.global.y / scale.y;
@@ -84,24 +84,30 @@ export class ScaleInteraction<TElement extends MedsurfDraw.ImageObject> extends
return;
}
- const scale = this.element.getImageScale();
+ const scale = this.element.imageScale;
let dX: number = 0;
let dY: number = 0;
let dW: number = 0;
let dH: number = 0;
- if (this._scaleSide == ScaleSideTypes.X || this._scaleSide == ScaleSideTypes.X_Y || this._scaleSide == ScaleSideTypes.X_HEIGHT) {
+ // TODO
+ // Use rotation here -> otherwise not working
+
+ if (this._scaleSide == ScaleSideTypes.X || this._scaleSide == ScaleSideTypes.X_Y
+ || this._scaleSide == ScaleSideTypes.X_HEIGHT) {
dX = (event.data.global.x / scale.x - this._scaleX);
dW = -1 * dX;
this._scaleX = event.data.global.x / scale.x;
}
- if (this._scaleSide == ScaleSideTypes.Y || this._scaleSide == ScaleSideTypes.X_Y || this._scaleSide == ScaleSideTypes.WIDTH_Y) {
+ if (this._scaleSide == ScaleSideTypes.Y || this._scaleSide == ScaleSideTypes.X_Y
+ || this._scaleSide == ScaleSideTypes.WIDTH_Y) {
dY = (event.data.global.y / scale.y - this._scaleY);
dH = -1 * dY;
this._scaleY = event.data.global.y / scale.y;
}
- if (this._scaleSide == ScaleSideTypes.WIDTH || this._scaleSide == ScaleSideTypes.WIDTH_Y || this._scaleSide == ScaleSideTypes.WIDTH_HEIGHT) {
+ if (this._scaleSide == ScaleSideTypes.WIDTH || this._scaleSide == ScaleSideTypes.WIDTH_Y
+ || this._scaleSide == ScaleSideTypes.WIDTH_HEIGHT) {
dW = (event.data.global.x / scale.x - this._scaleX);
/* TODO
if ((parent.parent.parent as Primitives).type === "ellipse") {
@@ -110,7 +116,8 @@ export class ScaleInteraction<TElement extends MedsurfDraw.ImageObject> extends
*/
this._scaleX = event.data.global.x / scale.x;
}
- if (this._scaleSide == ScaleSideTypes.HEIGHT || this._scaleSide == ScaleSideTypes.X_HEIGHT || this._scaleSide == ScaleSideTypes.WIDTH_HEIGHT) {
+ if (this._scaleSide == ScaleSideTypes.HEIGHT || this._scaleSide == ScaleSideTypes.X_HEIGHT
+ || this._scaleSide == ScaleSideTypes.WIDTH_HEIGHT) {
dH = (event.data.global.y / scale.y - this._scaleY);
/* TODO
if ((parent.parent.parent as Primitives).type === "ellipse") {
@@ -122,7 +129,9 @@ export class ScaleInteraction<TElement extends MedsurfDraw.ImageObject> extends
// Keep aspect ratio
// TODO up / down scaling not consistent
- if ((this._scaleSide == ScaleSideTypes.X_Y || this._scaleSide == ScaleSideTypes.X_HEIGHT || this._scaleSide == ScaleSideTypes.WIDTH_Y || this._scaleSide == ScaleSideTypes.WIDTH_HEIGHT) && !(MedsurfDraw.Keyboard.isKeyDown("ShiftLeft") || MedsurfDraw.Keyboard.isKeyDown("ShiftRight"))) {
+ if ((this._scaleSide == ScaleSideTypes.X_Y || this._scaleSide == ScaleSideTypes.X_HEIGHT
+ || this._scaleSide == ScaleSideTypes.WIDTH_Y || this._scaleSide == ScaleSideTypes.WIDTH_HEIGHT)
+ && !(MedsurfDraw.Keyboard.isKeyDown("ShiftLeft") || MedsurfDraw.Keyboard.isKeyDown("ShiftRight"))) {
const rectangle = this.element.getRectangle();
if (dW > dH) {
@@ -134,7 +143,7 @@ export class ScaleInteraction<TElement extends MedsurfDraw.ImageObject> extends
// TODO (parent.parent.parent as Primitives).scaleAnnotation(dX, dY, dW, dH);
- this.emit("onScale", dX, dY, dW, dH);
+ this.emit("onScale", this._scaleSide, dX, dY, dW, dH);
}
/**
diff --git a/src/lib/interactions/WriteInteraction.ts b/src/lib/interactions/WriteInteraction.ts
index 4aecd5a09c3afcc1c7ec6bdf94fdea19ede14606..4c8ee9432e461e3c7fbab1b6c75c489e76891f39 100644
--- a/src/lib/interactions/WriteInteraction.ts
+++ b/src/lib/interactions/WriteInteraction.ts
@@ -1,12 +1,12 @@
import * as MedsurfDraw from "../public-api";
-import {BaseElementInteraction} from "../bases/interactions/BaseElementInteraction";
+import { BaseElementInteraction } from "../bases/interactions/BaseElementInteraction";
/**
* Write interaction
* from: https://github.com/limikael/PixiTextInput/blob/master/src/PixiTextInput.js#L417
* with: https://www.npmjs.com/package/pixi.js-keyboard
*/
-export class WriteInteraction<TElement extends MedsurfDraw.Text> extends BaseElementInteraction<TElement> {
+export class WriteInteraction<TElement extends MedsurfDraw.EditableText> extends BaseElementInteraction<TElement> {
/**
* Constructor
* @param element
diff --git a/src/public/index.html b/src/public/index.html
index 83c9e1361a8b3d2f168df31a702fe41189ea90cd..1fcc253cd86f15972ccf2f04e440426c7fa41f08 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -397,7 +397,7 @@
}
</style>
</head>
- <body>
+ <body style="background-color: black">
<div style="top: 1vh; left:1vw; width:98vw; height: 3vh; position: absolute">
<button id="button_default">Default</button>
<button id="button_marker">Marker</button>