From 45f7d463d647d6535a685fc72afa8b3f15cebe43 Mon Sep 17 00:00:00 2001
From: Andrea Gottsponer <ago@attr.ch>
Date: Tue, 25 Oct 2022 11:38:58 +0200
Subject: [PATCH] - add back scale for primitive generators - setup correct
behaviour for generators - scale fixes
---
src/app/index.ts | 505 ++++++++++++++++--
src/lib/elements/primitives/ArrowPrimitive.ts | 13 +-
.../elements/primitives/EllipsePrimitive.ts | 11 +-
.../elements/primitives/RectanglePrimitive.ts | 11 +-
src/lib/elements/primitives/TextPrimitive.ts | 1 +
.../generators/combinations/ArrowGenerator.ts | 2 +
.../combinations/EllipseGenerator.ts | 2 +
.../combinations/InteractiveAreaGenerator.ts | 1 +
.../combinations/MarkerGenerator.ts | 1 +
.../combinations/PrimitiveMarkerGenerator.ts | 4 +
.../combinations/RectangleGenerator.ts | 2 +
.../primitives/ArrowPrimitiveGenerator.ts | 71 ++-
.../primitives/EllipsePrimitiveGenerator.ts | 71 ++-
.../primitives/RectanglePrimitiveGenerator.ts | 71 ++-
.../primitives/TextPrimitiveGenerator.ts | 71 ++-
src/lib/interactions/ScaleInteraction.ts | 80 ++-
16 files changed, 705 insertions(+), 212 deletions(-)
diff --git a/src/app/index.ts b/src/app/index.ts
index 999c4d37..0ec157b5 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -317,6 +317,7 @@ async function setupImage() {
layerGroup: layerGroupsArray['sketch'],
image: {},
rotateWithLine: false,
+ withScaling: false,
triggerImmediateEndDraw: true
});
// @ts-ignore
@@ -576,6 +577,7 @@ async function setupImageObjects() {
//</editor-fold>
//<editor-fold desc="Elements">
+ //<editor-fold desc="Tests">
/**/
// -- Arrow point
const arrowPoint = new MedsurfDraw.PositionPoint(image, {
@@ -1096,7 +1098,9 @@ async function setupImageObjects() {
image.addChild(legend);
elementsArray['legend'] = legend;
/**/
+ //</editor-fold>
// TEST LINE
+ //<editor-fold desc="Real Test">
// -- Real Point 1
const realPoint1 = new MedsurfDraw.PositionPoint(image, {
id: 'realPoint1',
@@ -1214,65 +1218,454 @@ async function setupImageObjects() {
realPoint2.model.primitives.push(realText1.model);
realPoint2.addChild(realText1);
//</editor-fold>
-
- // TEST ------------------------------------------------------------------------------------------------------------
- const test = new PIXI.Graphics();
- test.name = "test_menu";
- test.clear();
- test.beginFill(0xff0000, 1);
- test.drawCircle(0, 0, 30);
- test.endFill();
- image.moveInteraction.on("onMove", (event: PIXI.InteractionEvent, dX: number, dY: number): void => {
- /**/
- test.position.x += dX;
- test.position.y += dY;
- /**/
+ // TEST Primitives
+ //<editor-fold desc="Scale Test">
+ //<editor-fold desc="Ellipse Primitive">
+ //<editor-fold desc="Test 1">
+ // -- ellipse Primitive Test Point 1
+ const ellipsePrimitiveTestPoint1 = new MedsurfDraw.PositionPoint(image, {
+ id: 'ellipsePrimitiveTestPoint1',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 800 / image.dimensions.width,
+ y: 100 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
});
- /**/
- 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(imageGlobalPos, imagePos, imagePos, testPos);
- */
-
- /** /
- dX = imagePos.x - testPos.x;
- dY = imagePos.y - testPos.y;
- /** /
- /** /
- test.position.x += imagePos.x - testPos.x + 300;
- test.position.y += imagePos.y - testPos.y + 500;
- /**/
- /* TODO WHY does it zoom the object ??? * /
- console.log(dX, dY);
- if (dX && dY) {
- test.position.x += dX;
- test.position.y += dY;
+ image.addChild(ellipsePrimitiveTestPoint1);
+ // -- ellipse Primitive Test 1
+ const ellipsePrimitiveTest1 = new MedsurfDraw.EllipsePrimitive(image, {
+ id: 'ellipsePrimitiveTest1',
+ type: Models.ImageObjectType.ELLIPSE,
+ isStatic: false,
+ zIndex: 0,
+ positionPoint: ellipsePrimitiveTestPoint1.model,
+ rotateWithLine: false,
+ ellipse: new PIXI.Ellipse(
+ 0,
+ 0,
+ 20 / image.dimensions.width,
+ 20 / image.dimensions.width
+ ),
+ strokeWidth: 1 / image.dimensions.width,
+ options: {
+ hasLine: true,
+ lineColor: 0x000000,
+ hasFill: true,
+ fillColor: 0x00FF00,
+ fillAlpha: 0.6
}
- */
- 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 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(test);
- // TEST ------------------------------------------------------------------------------------------------------------
+ // @ts-ignore
+ ellipsePrimitiveTestPoint1.model.primitives.push(ellipsePrimitiveTest1.model);
+ ellipsePrimitiveTestPoint1.addChild(ellipsePrimitiveTest1);
+ //</editor-fold>
+ //<editor-fold desc="Test 2">
+ // -- ellipse Primitive Test Point 2
+ const ellipsePrimitiveTestPoint2 = new MedsurfDraw.PositionPoint(image, {
+ id: 'ellipsePrimitiveTestPoint2',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 800 / image.dimensions.width,
+ y: 200 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
+ });
+ image.addChild(ellipsePrimitiveTestPoint2);
+ // -- ellipse Primitive Test 2
+ const ellipsePrimitiveTest2 = new MedsurfDraw.EllipsePrimitive(image, {
+ id: 'ellipsePrimitiveTest2',
+ type: Models.ImageObjectType.ELLIPSE,
+ isStatic: false,
+ zIndex: 0,
+ positionPoint: ellipsePrimitiveTestPoint2.model,
+ rotateWithLine: false,
+ ellipse: new PIXI.Ellipse(
+ 0,
+ 0,
+ 20 / image.dimensions.width,
+ 20 / image.dimensions.width
+ ),
+ angle: 0.7853982,
+ strokeWidth: 1 / image.dimensions.width,
+ options: {
+ hasLine: true,
+ lineColor: 0x000000,
+ hasFill: true,
+ fillColor: 0x00FF00,
+ fillAlpha: 0.6
+ }
+ });
+ // @ts-ignore
+ ellipsePrimitiveTestPoint2.model.primitives.push(ellipsePrimitiveTest2.model);
+ ellipsePrimitiveTestPoint2.addChild(ellipsePrimitiveTest2);
+ //</editor-fold>
+ //<editor-fold desc="Test 3">
+ // -- ellipse Primitive Test Point 3
+ const ellipsePrimitiveTestPoint3 = new MedsurfDraw.PositionPoint(image, {
+ id: 'ellipsePrimitiveTestPoint3',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 800 / image.dimensions.width,
+ y: 300 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
+ });
+ image.addChild(ellipsePrimitiveTestPoint3);
+ // -- ellipse Primitive Test 3
+ const ellipsePrimitiveTest3 = new MedsurfDraw.EllipsePrimitive(image, {
+ id: 'ellipsePrimitiveTest3',
+ type: Models.ImageObjectType.ELLIPSE,
+ isStatic: false,
+ zIndex: 0,
+ positionPoint: ellipsePrimitiveTestPoint3.model,
+ rotateWithLine: false,
+ ellipse: new PIXI.Ellipse(
+ 10 / image.dimensions.width,
+ 10 / image.dimensions.width,
+ 20 / image.dimensions.width,
+ 20 / image.dimensions.width
+ ),
+ strokeWidth: 1 / image.dimensions.width,
+ options: {
+ hasLine: true,
+ lineColor: 0x000000,
+ hasFill: true,
+ fillColor: 0x00FF00,
+ fillAlpha: 0.6
+ }
+ });
+ // @ts-ignore
+ ellipsePrimitiveTestPoint3.model.primitives.push(ellipsePrimitiveTest3.model);
+ ellipsePrimitiveTestPoint3.addChild(ellipsePrimitiveTest3);
+ //</editor-fold>
+ //</editor-fold>
+ //<editor-fold desc="Rectangle Primitive">
+ //<editor-fold desc="Test 1">
+ // -- rectangle Primitive Test Point 1
+ const rectanglePrimitiveTestPoint1 = new MedsurfDraw.PositionPoint(image, {
+ id: 'rectanglePrimitiveTestPoint1',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 900 / image.dimensions.width,
+ y: 100 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
+ });
+ image.addChild(rectanglePrimitiveTestPoint1);
+ // -- rectangle Primitive Test 1
+ const rectanglePrimitiveTest1 = new MedsurfDraw.RectanglePrimitive(image, {
+ id: 'rectanglePrimitiveTest1',
+ type: Models.ImageObjectType.RECTANGLE,
+ isStatic: false,
+ zIndex: 0,
+ positionPoint: rectanglePrimitiveTestPoint1.model,
+ rotateWithLine: false,
+ rectangle: new PIXI.Rectangle(
+ 0,
+ 0,
+ 40 / image.dimensions.width,
+ 40 / image.dimensions.width
+ ),
+ strokeWidth: 1 / image.dimensions.width,
+ options: {
+ hasLine: true,
+ lineColor: 0x000000,
+ hasFill: true,
+ fillColor: 0x00FF00,
+ fillAlpha: 0.6
+ }
+ });
+ // @ts-ignore
+ rectanglePrimitiveTestPoint1.model.primitives.push(rectanglePrimitiveTest1.model);
+ rectanglePrimitiveTestPoint1.addChild(rectanglePrimitiveTest1);
+ //</editor-fold>
+ //<editor-fold desc="Test 2">
+ // -- rectangle Primitive Test Point 2
+ const rectanglePrimitiveTestPoint2 = new MedsurfDraw.PositionPoint(image, {
+ id: 'rectanglePrimitiveTestPoint2',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 900 / image.dimensions.width,
+ y: 200 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
+ });
+ image.addChild(rectanglePrimitiveTestPoint2);
+ // -- rectangle Primitive Test 2
+ const rectanglePrimitiveTest2 = new MedsurfDraw.RectanglePrimitive(image, {
+ id: 'rectanglePrimitiveTest2',
+ type: Models.ImageObjectType.RECTANGLE,
+ isStatic: false,
+ zIndex: 0,
+ positionPoint: rectanglePrimitiveTestPoint2.model,
+ rotateWithLine: false,
+ rectangle: new PIXI.Rectangle(
+ 0,
+ 0,
+ 40 / image.dimensions.width,
+ 40 / image.dimensions.width
+ ),
+ angle: 0.7853982,
+ strokeWidth: 1 / image.dimensions.width,
+ options: {
+ hasLine: true,
+ lineColor: 0x000000,
+ hasFill: true,
+ fillColor: 0x00FF00,
+ fillAlpha: 0.6
+ }
+ });
+ // @ts-ignore
+ rectanglePrimitiveTestPoint2.model.primitives.push(rectanglePrimitiveTest2.model);
+ rectanglePrimitiveTestPoint2.addChild(rectanglePrimitiveTest2);
+ //</editor-fold>
+ //<editor-fold desc="Test 3">
+ // -- rectangle Primitive Test Point 3
+ const rectanglePrimitiveTestPoint3 = new MedsurfDraw.PositionPoint(image, {
+ id: 'rectanglePrimitiveTestPoint3',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 900 / image.dimensions.width,
+ y: 300 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
+ });
+ image.addChild(rectanglePrimitiveTestPoint3);
+ // -- rectangle Primitive Test 3
+ const rectanglePrimitiveTest3 = new MedsurfDraw.RectanglePrimitive(image, {
+ id: 'rectanglePrimitiveTest3',
+ type: Models.ImageObjectType.RECTANGLE,
+ isStatic: false,
+ zIndex: 0,
+ positionPoint: rectanglePrimitiveTestPoint3.model,
+ rotateWithLine: false,
+ rectangle: new PIXI.Rectangle(
+ 10 / image.dimensions.width,
+ 10 / image.dimensions.width,
+ 40 / image.dimensions.width,
+ 40 / image.dimensions.width
+ ),
+ strokeWidth: 1 / image.dimensions.width,
+ options: {
+ hasLine: true,
+ lineColor: 0x000000,
+ hasFill: true,
+ fillColor: 0x00FF00,
+ fillAlpha: 0.6
+ }
+ });
+ // @ts-ignore
+ rectanglePrimitiveTestPoint3.model.primitives.push(rectanglePrimitiveTest3.model);
+ rectanglePrimitiveTestPoint3.addChild(rectanglePrimitiveTest3);
+ //</editor-fold>
+ //</editor-fold>
+ //<editor-fold desc="Arrow Primitive">
+ //<editor-fold desc="Test 1">
+ // -- arrow Primitive Test Point 1
+ const arrowPrimitiveTestPoint1 = new MedsurfDraw.PositionPoint(image, {
+ id: 'arrowPrimitiveTestPoint1',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 1000 / image.dimensions.width,
+ y: 100 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
+ });
+ image.addChild(arrowPrimitiveTestPoint1);
+ // -- arrow Primitive Test 1
+ const arrowPrimitiveTest1 = new MedsurfDraw.ArrowPrimitive(image, {
+ id: 'arrowPrimitiveTest1',
+ type: Models.ImageObjectType.ARROW,
+ isStatic: false,
+ zIndex: 0,
+ positionPoint: arrowPrimitiveTestPoint1.model,
+ rotateWithLine: false,
+ rectangle: new PIXI.Rectangle(
+ 0,
+ 0,
+ 40 / image.dimensions.width,
+ 40 / image.dimensions.width
+ ),
+ strokeWidth: 1 / image.dimensions.width,
+ options: {
+ hasLine: true,
+ lineColor: 0x000000,
+ hasFill: true,
+ fillColor: 0x00FF00,
+ fillAlpha: 0.6
+ }
+ });
+ // @ts-ignore
+ arrowPrimitiveTestPoint1.model.primitives.push(arrowPrimitiveTest1.model);
+ arrowPrimitiveTestPoint1.addChild(arrowPrimitiveTest1);
+ //</editor-fold>
+ //<editor-fold desc="Test 2">
+ // -- arrow Primitive Test Point 2
+ const arrowPrimitiveTestPoint2 = new MedsurfDraw.PositionPoint(image, {
+ id: 'arrowPrimitiveTestPoint2',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 1000 / image.dimensions.width,
+ y: 200 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
+ });
+ image.addChild(arrowPrimitiveTestPoint2);
+ // -- arrow Primitive Test 2
+ const arrowPrimitiveTest2 = new MedsurfDraw.ArrowPrimitive(image, {
+ id: 'arrowPrimitiveTest2',
+ type: Models.ImageObjectType.ARROW,
+ isStatic: false,
+ zIndex: 0,
+ positionPoint: arrowPrimitiveTestPoint2.model,
+ rotateWithLine: false,
+ rectangle: new PIXI.Rectangle(
+ 0,
+ 0,
+ 40 / image.dimensions.width,
+ 40 / image.dimensions.width
+ ),
+ angle: 0.7853982,
+ strokeWidth: 1 / image.dimensions.width,
+ options: {
+ hasLine: true,
+ lineColor: 0x000000,
+ hasFill: true,
+ fillColor: 0x00FF00,
+ fillAlpha: 0.6
+ }
+ });
+ // @ts-ignore
+ arrowPrimitiveTestPoint2.model.primitives.push(arrowPrimitiveTest2.model);
+ arrowPrimitiveTestPoint2.addChild(arrowPrimitiveTest2);
+ //</editor-fold>
+ //<editor-fold desc="Test 3">
+ // -- arrow Primitive Test Point 3
+ const arrowPrimitiveTestPoint3 = new MedsurfDraw.PositionPoint(image, {
+ id: 'arrowPrimitiveTestPoint3',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 1000 / image.dimensions.width,
+ y: 300 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
+ });
+ image.addChild(arrowPrimitiveTestPoint3);
+ // -- arrow Primitive Test 3
+ const arrowPrimitiveTest3 = new MedsurfDraw.ArrowPrimitive(image, {
+ id: 'arrowPrimitiveTest3',
+ type: Models.ImageObjectType.ARROW,
+ isStatic: false,
+ zIndex: 0,
+ positionPoint: arrowPrimitiveTestPoint3.model,
+ rotateWithLine: false,
+ rectangle: new PIXI.Rectangle(
+ 10 / image.dimensions.width,
+ 10 / image.dimensions.width,
+ 40 / image.dimensions.width,
+ 40 / image.dimensions.width
+ ),
+ strokeWidth: 1 / image.dimensions.width,
+ options: {
+ hasLine: true,
+ lineColor: 0x000000,
+ hasFill: true,
+ fillColor: 0x00FF00,
+ fillAlpha: 0.6
+ }
+ });
+ // @ts-ignore
+ arrowPrimitiveTestPoint3.model.primitives.push(arrowPrimitiveTest3.model);
+ arrowPrimitiveTestPoint3.addChild(arrowPrimitiveTest3);
+ //</editor-fold>
+ //</editor-fold>
+ //<editor-fold desc="Text Primitive">
+ // -- text Primitive Test Point 1
+ const textPrimitiveTestPoint1 = new MedsurfDraw.PositionPoint(image, {
+ id: 'textPrimitiveTestPoint1',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 1100 / image.dimensions.width,
+ y: 100 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
+ });
+ image.addChild(textPrimitiveTestPoint1);
+ // -- text Primitive Test Point 2
+ const textPrimitiveTestPoint2 = new MedsurfDraw.PositionPoint(image, {
+ id: 'textPrimitiveTestPoint2',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 1100 / image.dimensions.width,
+ y: 200 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
+ });
+ image.addChild(textPrimitiveTestPoint2);
+ // -- text Primitive Test Point 3
+ const textPrimitiveTestPoint3 = new MedsurfDraw.PositionPoint(image, {
+ id: 'textPrimitiveTestPoint3',
+ type: Models.ImageObjectType.POSITIONPOINT,
+ isStatic: false,
+ zIndex: 0,
+ position: {
+ x: 1100 / image.dimensions.width,
+ y: 300 / image.dimensions.width,
+ },
+ isSelftest: true,
+ selftestItems: [],
+ primitives: []
+ });
+ image.addChild(textPrimitiveTestPoint3);
+ //</editor-fold>
+ //</editor-fold>
+
+ //</editor-fold>
image.sortChildren();
app.stage.emit("setDefaultMode", "default");
diff --git a/src/lib/elements/primitives/ArrowPrimitive.ts b/src/lib/elements/primitives/ArrowPrimitive.ts
index 2a15e730..7a2e6134 100644
--- a/src/lib/elements/primitives/ArrowPrimitive.ts
+++ b/src/lib/elements/primitives/ArrowPrimitive.ts
@@ -112,7 +112,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
this.moveInteraction.on("onMove", this.onMove, this);
this.moveInteraction.on("endMove", this.endMove, this);
// -- Scale interaction
- this.scaleInteraction = new MedsurfDraw.ScaleInteraction(this);
+ this.scaleInteraction = new MedsurfDraw.ScaleInteraction(this, true);
this.scaleInteraction.on("onScale", this.onScale, this);
// -- Select interaction
this.selectInteraction = new MedsurfDraw.SelectInteraction(this);
@@ -163,7 +163,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
// Get wedge point
this.wedgePoint = this.model.wedgePoint
? {x: this.model.wedgePoint.x * imageWidth, y: this.model.wedgePoint.y * imageWidth}
- : {x: (this.model.rectangle.x + this.model.rectangle.width) * imageWidth, y: (this.model.rectangle.y + this.model.rectangle.height / 2) * imageWidth};
+ : {x: this.model.rectangle.width * imageWidth, y: this.model.rectangle.height / 2 * imageWidth};
// Position
this.position.set(
@@ -428,6 +428,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
}
// -- Selftest element
if (this._selftestElement) {
+ this.image.parent.removeChild(this._selftestElement);
this._selftestElement.destroy(options);
}
// -- Wedge point element
@@ -1670,14 +1671,6 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive,
* @param dH
*/
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;
/*
diff --git a/src/lib/elements/primitives/EllipsePrimitive.ts b/src/lib/elements/primitives/EllipsePrimitive.ts
index 2459bc4c..04ea6c06 100644
--- a/src/lib/elements/primitives/EllipsePrimitive.ts
+++ b/src/lib/elements/primitives/EllipsePrimitive.ts
@@ -412,6 +412,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
}
// -- Selftest element
if (this._selftestElement) {
+ this.image.parent.removeChild(this._selftestElement);
this._selftestElement.destroy(options);
}
//</editor-fold>
@@ -1592,16 +1593,6 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
* @param dH
*/
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;
/*
diff --git a/src/lib/elements/primitives/RectanglePrimitive.ts b/src/lib/elements/primitives/RectanglePrimitive.ts
index e3ce55a4..6bbcfe6f 100644
--- a/src/lib/elements/primitives/RectanglePrimitive.ts
+++ b/src/lib/elements/primitives/RectanglePrimitive.ts
@@ -112,7 +112,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.moveInteraction.on("onMove", this.onMove, this);
this.moveInteraction.on("endMove", this.endMove, this);
// -- Scale interaction
- this.scaleInteraction = new MedsurfDraw.ScaleInteraction(this);
+ this.scaleInteraction = new MedsurfDraw.ScaleInteraction(this, true);
this.scaleInteraction.on("onScale", this.onScale, this);
// -- Select interaction
this.selectInteraction = new MedsurfDraw.SelectInteraction(this);
@@ -413,6 +413,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
}
// -- Selftest element
if (this._selftestElement) {
+ this.image.parent.removeChild(this._selftestElement);
this._selftestElement.destroy(options);
}
//</editor-fold>
@@ -1593,14 +1594,6 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
* @param dH
*/
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;
/*
diff --git a/src/lib/elements/primitives/TextPrimitive.ts b/src/lib/elements/primitives/TextPrimitive.ts
index c7d33369..5d7f3d59 100644
--- a/src/lib/elements/primitives/TextPrimitive.ts
+++ b/src/lib/elements/primitives/TextPrimitive.ts
@@ -438,6 +438,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
}
// -- Selftest element
if (this._selftestElement) {
+ this.image.parent.removeChild(this._selftestElement);
this._selftestElement.destroy(options);
}
//</editor-fold>
diff --git a/src/lib/generators/combinations/ArrowGenerator.ts b/src/lib/generators/combinations/ArrowGenerator.ts
index ce149080..b01562e9 100644
--- a/src/lib/generators/combinations/ArrowGenerator.ts
+++ b/src/lib/generators/combinations/ArrowGenerator.ts
@@ -166,6 +166,7 @@ export class ArrowGenerator extends BaseGenerator<MedsurfDraw.Image, ArrowGenera
startElement: positionPoint,
hasWedgePoint: this.data.hasWedgePoint,
rotateWithLine: true,
+ withScaling: true,
triggerImmediateEndDraw: true
});
this._arrowPrimitiveGenerator.once("startGenerator", this.start, this);
@@ -181,6 +182,7 @@ export class ArrowGenerator extends BaseGenerator<MedsurfDraw.Image, ArrowGenera
stickMode: MedsurfDraw.StickMode.NOELEMENTS,
startElement: positionPoint,
rotateWithLine: false,
+ withScaling: false,
triggerImmediateEndDraw: true
});
this._textPrimitiveGenerator.once("startGenerator", this.startTextPrimitiveGenerator, this);
diff --git a/src/lib/generators/combinations/EllipseGenerator.ts b/src/lib/generators/combinations/EllipseGenerator.ts
index 2a3cc745..3d84c808 100644
--- a/src/lib/generators/combinations/EllipseGenerator.ts
+++ b/src/lib/generators/combinations/EllipseGenerator.ts
@@ -164,6 +164,7 @@ export class EllipseGenerator extends BaseGenerator<MedsurfDraw.Image, EllipseGe
stickMode: MedsurfDraw.StickMode.NOELEMENTS,
startElement: positionPoint,
rotateWithLine: false,
+ withScaling: true,
triggerImmediateEndDraw: true
});
this._ellipsePrimitiveGenerator.once("startGenerator", this.start, this);
@@ -179,6 +180,7 @@ export class EllipseGenerator extends BaseGenerator<MedsurfDraw.Image, EllipseGe
stickMode: MedsurfDraw.StickMode.NOELEMENTS,
startElement: positionPoint,
rotateWithLine: false,
+ withScaling: false,
triggerImmediateEndDraw: true
});
this._textPrimitiveGenerator.once("startGenerator", this.startTextPrimitiveGenerator, this);
diff --git a/src/lib/generators/combinations/InteractiveAreaGenerator.ts b/src/lib/generators/combinations/InteractiveAreaGenerator.ts
index 50328a90..a7859c84 100644
--- a/src/lib/generators/combinations/InteractiveAreaGenerator.ts
+++ b/src/lib/generators/combinations/InteractiveAreaGenerator.ts
@@ -176,6 +176,7 @@ export class InteractiveAreaGenerator extends BaseGenerator<MedsurfDraw.Image, I
stickMode: MedsurfDraw.StickMode.NOELEMENTS,
startElement: positionPoint,
rotateWithLine: false,
+ withScaling: false,
triggerImmediateEndDraw: true
});
this._textPrimitiveGenerator.once("startGenerator", this.startTextPrimitiveGenerator, this);
diff --git a/src/lib/generators/combinations/MarkerGenerator.ts b/src/lib/generators/combinations/MarkerGenerator.ts
index 11266a2b..7354b75e 100644
--- a/src/lib/generators/combinations/MarkerGenerator.ts
+++ b/src/lib/generators/combinations/MarkerGenerator.ts
@@ -203,6 +203,7 @@ export class MarkerGenerator extends BaseGenerator<MedsurfDraw.Image, MarkerGene
stickMode: MedsurfDraw.StickMode.NOELEMENTS,
startElement: positionPoint,
rotateWithLine: false,
+ withScaling: false,
triggerImmediateEndDraw: false
});
this._textPrimitiveGenerator.once("endGenerator", this.endTextPrimitiveGenerator, this);
diff --git a/src/lib/generators/combinations/PrimitiveMarkerGenerator.ts b/src/lib/generators/combinations/PrimitiveMarkerGenerator.ts
index b3abac94..87be60cf 100644
--- a/src/lib/generators/combinations/PrimitiveMarkerGenerator.ts
+++ b/src/lib/generators/combinations/PrimitiveMarkerGenerator.ts
@@ -189,6 +189,7 @@ export class PrimitiveMarkerGenerator extends BaseGenerator<MedsurfDraw.Image, P
startElement: positionPoint,
hasWedgePoint: (this.data as ArrowMarkerGeneratorModel).hasWedgePoint,
rotateWithLine: this.data.rotateWithLine,
+ withScaling: false,
triggerImmediateEndDraw: true
});
break;
@@ -200,6 +201,7 @@ export class PrimitiveMarkerGenerator extends BaseGenerator<MedsurfDraw.Image, P
stickMode: MedsurfDraw.StickMode.NOELEMENTS,
startElement: positionPoint,
rotateWithLine: this.data.rotateWithLine,
+ withScaling: false,
triggerImmediateEndDraw: true
});
break;
@@ -211,6 +213,7 @@ export class PrimitiveMarkerGenerator extends BaseGenerator<MedsurfDraw.Image, P
stickMode: MedsurfDraw.StickMode.NOELEMENTS,
startElement: positionPoint,
rotateWithLine: this.data.rotateWithLine,
+ withScaling: false,
triggerImmediateEndDraw: true
});
break;
@@ -222,6 +225,7 @@ export class PrimitiveMarkerGenerator extends BaseGenerator<MedsurfDraw.Image, P
stickMode: MedsurfDraw.StickMode.NOELEMENTS,
startElement: positionPoint,
rotateWithLine: this.data.rotateWithLine,
+ withScaling: false,
triggerImmediateEndDraw: true
});
break;
diff --git a/src/lib/generators/combinations/RectangleGenerator.ts b/src/lib/generators/combinations/RectangleGenerator.ts
index 31122794..89b3a6fd 100644
--- a/src/lib/generators/combinations/RectangleGenerator.ts
+++ b/src/lib/generators/combinations/RectangleGenerator.ts
@@ -164,6 +164,7 @@ export class RectangleGenerator extends BaseGenerator<MedsurfDraw.Image, Rectang
stickMode: MedsurfDraw.StickMode.NOELEMENTS,
startElement: positionPoint,
rotateWithLine: false,
+ withScaling: true,
triggerImmediateEndDraw: true
});
this._rectanglePrimitiveGenerator.once("startGenerator", this.start, this);
@@ -179,6 +180,7 @@ export class RectangleGenerator extends BaseGenerator<MedsurfDraw.Image, Rectang
stickMode: MedsurfDraw.StickMode.NOELEMENTS,
startElement: positionPoint,
rotateWithLine: false,
+ withScaling: false,
triggerImmediateEndDraw: true
});
this._textPrimitiveGenerator.once("startGenerator", this.startTextPrimitiveGenerator, this);
diff --git a/src/lib/generators/primitives/ArrowPrimitiveGenerator.ts b/src/lib/generators/primitives/ArrowPrimitiveGenerator.ts
index af33841e..91d4ec5e 100644
--- a/src/lib/generators/primitives/ArrowPrimitiveGenerator.ts
+++ b/src/lib/generators/primitives/ArrowPrimitiveGenerator.ts
@@ -10,6 +10,7 @@ export class ArrowPrimitiveGeneratorModel extends PositionPointGeneratorModel {
startElement?: MedsurfDraw.PositionPoint;
hasWedgePoint: boolean;
rotateWithLine: boolean;
+ withScaling: boolean;
triggerImmediateEndDraw: boolean;
}
@@ -57,31 +58,35 @@ export class ArrowPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Ar
this._positionPointGenerator.once("startGenerator", this.start, this);
this._positionPointGenerator.once("startGenerator", this.startPositionPointGenerator, this);
this._positionPointGenerator.once("updatePoint", this.updatePositionPointGenerator, this);
- // TODO uncommend when scale needed: this._positionPointGenerator.once("endGenerator", this.endPositionPointGeneratorScale, this);
- // TODO uncommend when scale needed: this._positionPointGenerator.once("endGenerator", this.startScale, this);
- this._positionPointGenerator.once("endGenerator", this.endPositionPointGenerator, this); // TODO commend when scale needed
+ if (this.withScaling) {
+ this._positionPointGenerator.once("endGenerator", this.endPositionPointGeneratorScale, this);
+ this._positionPointGenerator.once("endGenerator", this.startScale, this);
+ } else {
+ this._positionPointGenerator.once("endGenerator", this.endPositionPointGenerator, this);
+ }
this._positionPointGenerator.once("abortGenerator", this.abortPositionPointGenerator, this);
} else {
// Setup arrow primitive
this.startPositionPointGenerator();
// Start arrow primitive scale
- // TODO uncommend when scale needed: this.endPositionPointGeneratorScale();
- this.endPositionPointGenerator();
-
- /* TODO uncommend when scale needed:
- // Check pointerover
- // -- Check if mouse is in image
- const globalPoint = this.target.renderer.plugins.interaction.mouse.global;
- const hitTest = this.target.renderer.plugins.interaction.hitTest(globalPoint, this.target);
- if (!hitTest) {
- // -- Not hit test result -> mouse outside image
- this.target.once("pointerover", this.startScale, this);
+ if (this.withScaling) {
+ this.endPositionPointGeneratorScale();
+
+ // Check pointerover
+ // -- Check if mouse is in image
+ const globalPoint = this.target.renderer.plugins.interaction.mouse.global;
+ const hitTest = this.target.renderer.plugins.interaction.hitTest(globalPoint, this.target);
+ if (!hitTest) {
+ // -- Not hit test result -> mouse outside image
+ this.target.once("pointerover", this.startScale, this);
+ } else {
+ // -- Hit rest result -> mouse inside image
+ this.startScale();
+ }
} else {
- // -- Hit rest result -> mouse inside image
- this.startScale();
+ this.endPositionPointGenerator();
}
- */
}
//</editor-fold>
}
@@ -209,13 +214,14 @@ export class ArrowPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Ar
this.startPositionPointGenerator();
// End generator
- // TODO uncommend when scale needed: this.endPositionPointGeneratorScale();
- this.endPositionPointGenerator();
+ if (this.withScaling) {
+ this.endPositionPointGeneratorScale();
- /* TODO uncommend when scale needed:
- // Start scale
- this.startScale();
- */
+ // Start scale
+ this.startScale();
+ } else {
+ this.endPositionPointGenerator();
+ }
}
/**
@@ -228,7 +234,7 @@ export class ArrowPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Ar
}
this.positionPointElement.model.primitives.push(this.arrowPrimitiveElement.model as any);
- if (this.triggerImmediateEndDraw) {
+ if (!this.withScaling && this.triggerImmediateEndDraw) {
this.endArrowPrimitiveDraw()
} else {
//<editor-fold desc="Events">
@@ -258,7 +264,7 @@ export class ArrowPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Ar
}
this.positionPointElement.model.primitives.push(this.arrowPrimitiveElement.model as any);
- if (this.triggerImmediateEndDraw) {
+ if (!this.withScaling && this.triggerImmediateEndDraw) {
this.endArrowPrimitiveDraw();
} else {
//<editor-fold desc="Events">
@@ -403,6 +409,21 @@ export class ArrowPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Ar
this.data.rotateWithLine = value;
}
+ /**
+ * Get with scaling
+ */
+ public get withScaling(): boolean {
+ return this.data.withScaling;
+ }
+
+ /**
+ * Set with scaling
+ * @param value
+ */
+ public set withScaling(value: boolean) {
+ this.data.withScaling = value;
+ }
+
/**
* Get trigger immediate end draw
*/
diff --git a/src/lib/generators/primitives/EllipsePrimitiveGenerator.ts b/src/lib/generators/primitives/EllipsePrimitiveGenerator.ts
index a205aa0c..8c017112 100644
--- a/src/lib/generators/primitives/EllipsePrimitiveGenerator.ts
+++ b/src/lib/generators/primitives/EllipsePrimitiveGenerator.ts
@@ -9,6 +9,7 @@ import {PositionPointGeneratorModel} from "../positionings/PositionPointGenerato
export class EllipsePrimitiveGeneratorModel extends PositionPointGeneratorModel {
startElement?: MedsurfDraw.PositionPoint;
rotateWithLine: boolean;
+ withScaling: boolean;
triggerImmediateEndDraw: boolean;
}
@@ -56,31 +57,35 @@ export class EllipsePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image,
this._positionPointGenerator.once("startGenerator", this.start, this);
this._positionPointGenerator.once("startGenerator", this.startPositionPointGenerator, this);
this._positionPointGenerator.once("updatePoint", this.updatePositionPointGenerator, this);
- // TODO uncommend when scale needed: this._positionPointGenerator.once("endGenerator", this.endPositionPointGeneratorScale, this);
- // TODO uncommend when scale needed: this._positionPointGenerator.once("endGenerator", this.startScale, this);
- this._positionPointGenerator.once("endGenerator", this.endPositionPointGenerator, this); // TODO commend when scale needed
+ if (this.withScaling) {
+ this._positionPointGenerator.once("endGenerator", this.endPositionPointGeneratorScale, this);
+ this._positionPointGenerator.once("endGenerator", this.startScale, this);
+ } else {
+ this._positionPointGenerator.once("endGenerator", this.endPositionPointGenerator, this);
+ }
this._positionPointGenerator.once("abortGenerator", this.abortPositionPointGenerator, this);
} else {
// Setup ellipse primitive
this.startPositionPointGenerator();
// Start ellipse primitive scale
- // TODO uncommend when scale needed: this.endPositionPointGeneratorScale();
- this.endPositionPointGenerator();
-
- /* TODO uncommend when scale needed:
- // Check pointerover
- // -- Check if mouse is in image
- const globalPoint = this.target.renderer.plugins.interaction.mouse.global;
- const hitTest = this.target.renderer.plugins.interaction.hitTest(globalPoint, this.target);
- if (!hitTest) {
- // -- Not hit test result -> mouse outside image
- this.target.once("pointerover", this.startScale, this);
+ if (this.withScaling) {
+ this.endPositionPointGeneratorScale();
+
+ // Check pointerover
+ // -- Check if mouse is in image
+ const globalPoint = this.target.renderer.plugins.interaction.mouse.global;
+ const hitTest = this.target.renderer.plugins.interaction.hitTest(globalPoint, this.target);
+ if (!hitTest) {
+ // -- Not hit test result -> mouse outside image
+ this.target.once("pointerover", this.startScale, this);
+ } else {
+ // -- Hit rest result -> mouse inside image
+ this.startScale();
+ }
} else {
- // -- Hit rest result -> mouse inside image
- this.startScale();
+ this.endPositionPointGenerator();
}
- */
}
//</editor-fold>
}
@@ -208,13 +213,14 @@ export class EllipsePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image,
this.startPositionPointGenerator();
// End generator
- // TODO uncommend when scale needed: this.endPositionPointGeneratorScale();
- this.endPositionPointGenerator();
+ if (this.withScaling) {
+ this.endPositionPointGeneratorScale();
- /* TODO uncommend when scale needed:
- // Start scale
- this.startScale();
- */
+ // Start scale
+ this.startScale();
+ } else {
+ this.endPositionPointGenerator();
+ }
}
/**
@@ -227,7 +233,7 @@ export class EllipsePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image,
}
this.positionPointElement.model.primitives.push(this.ellipsePrimitiveElement.model as any);
- if (this.triggerImmediateEndDraw) {
+ if (!this.withScaling && this.triggerImmediateEndDraw) {
this.endEllipsePrimitiveDraw();
} else {
//<editor-fold desc="Events">
@@ -257,7 +263,7 @@ export class EllipsePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image,
}
this.positionPointElement.model.primitives.push(this.ellipsePrimitiveElement.model as any);
- if (this.triggerImmediateEndDraw) {
+ if (!this.withScaling && this.triggerImmediateEndDraw) {
this.endEllipsePrimitiveDraw();
} else {
//<editor-fold desc="Events">
@@ -387,6 +393,21 @@ export class EllipsePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image,
this.data.rotateWithLine = value;
}
+ /**
+ * Get with scaling
+ */
+ public get withScaling(): boolean {
+ return this.data.withScaling;
+ }
+
+ /**
+ * Set with scaling
+ * @param value
+ */
+ public set withScaling(value: boolean) {
+ this.data.withScaling = value;
+ }
+
/**
* Get trigger immediate end draw
*/
diff --git a/src/lib/generators/primitives/RectanglePrimitiveGenerator.ts b/src/lib/generators/primitives/RectanglePrimitiveGenerator.ts
index 7fcaa208..8bb7e979 100644
--- a/src/lib/generators/primitives/RectanglePrimitiveGenerator.ts
+++ b/src/lib/generators/primitives/RectanglePrimitiveGenerator.ts
@@ -9,6 +9,7 @@ import {PositionPointGeneratorModel} from "../positionings/PositionPointGenerato
export class RectanglePrimitiveGeneratorModel extends PositionPointGeneratorModel {
startElement?: MedsurfDraw.PositionPoint;
rotateWithLine: boolean;
+ withScaling: boolean;
triggerImmediateEndDraw: boolean;
}
@@ -56,31 +57,35 @@ export class RectanglePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image
this._positionPointGenerator.once("startGenerator", this.start, this);
this._positionPointGenerator.once("startGenerator", this.startPositionPointGenerator, this);
this._positionPointGenerator.once("updatePoint", this.updatePositionPointGenerator, this);
- // TODO uncommend when scale needed: this._positionPointGenerator.once("endGenerator", this.endPositionPointGeneratorScale, this);
- // TODO uncommend when scale needed: this._positionPointGenerator.once("endGenerator", this.startScale, this);
- this._positionPointGenerator.once("endGenerator", this.endPositionPointGenerator, this); // TODO commend when scale needed
+ if (this.withScaling) {
+ this._positionPointGenerator.once("endGenerator", this.endPositionPointGeneratorScale, this);
+ this._positionPointGenerator.once("endGenerator", this.startScale, this);
+ } else {
+ this._positionPointGenerator.once("endGenerator", this.endPositionPointGenerator, this);
+ }
this._positionPointGenerator.once("abortGenerator", this.abortPositionPointGenerator, this);
} else {
// Setup rectangle primitive
this.startPositionPointGenerator();
// Start rectangle primitive scale
- // TODO uncommend when scale needed: this.endPositionPointGeneratorScale();
- this.endPositionPointGenerator();
-
- /* TODO uncommend when scale needed:
- // Check pointerover
- // -- Check if mouse is in image
- const globalPoint = this.target.renderer.plugins.interaction.mouse.global;
- const hitTest = this.target.renderer.plugins.interaction.hitTest(globalPoint, this.target);
- if (!hitTest) {
- // -- Not hit test result -> mouse outside image
- this.target.once("pointerover", this.startScale, this);
+ if (this.withScaling) {
+ this.endPositionPointGeneratorScale();
+
+ // Check pointerover
+ // -- Check if mouse is in image
+ const globalPoint = this.target.renderer.plugins.interaction.mouse.global;
+ const hitTest = this.target.renderer.plugins.interaction.hitTest(globalPoint, this.target);
+ if (!hitTest) {
+ // -- Not hit test result -> mouse outside image
+ this.target.once("pointerover", this.startScale, this);
+ } else {
+ // -- Hit rest result -> mouse inside image
+ this.startScale();
+ }
} else {
- // -- Hit rest result -> mouse inside image
- this.startScale();
+ this.endPositionPointGenerator();
}
- */
}
//</editor-fold>
}
@@ -207,13 +212,14 @@ export class RectanglePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image
this.startPositionPointGenerator();
// End generator
- // TODO uncommend when scale needed: this.endPositionPointGeneratorScale();
- this.endPositionPointGenerator();
+ if (this.withScaling) {
+ this.endPositionPointGeneratorScale();
- /* TODO uncommend when scale needed:
- // Start scale
- this.startScale();
- */
+ // Start scale
+ this.startScale();
+ } else {
+ this.endPositionPointGenerator();
+ }
}
/**
@@ -226,7 +232,7 @@ export class RectanglePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image
}
this.positionPointElement.model.primitives.push(this.rectanglePrimitiveElement.model as any);
- if (this.triggerImmediateEndDraw) {
+ if (!this.withScaling && this.triggerImmediateEndDraw) {
this.endRectanglePrimitiveDraw();
} else {
//<editor-fold desc="Events">
@@ -256,7 +262,7 @@ export class RectanglePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image
}
this.positionPointElement.model.primitives.push(this.rectanglePrimitiveElement.model as any);
- if (this.triggerImmediateEndDraw) {
+ if (!this.withScaling && this.triggerImmediateEndDraw) {
this.endRectanglePrimitiveDraw();
} else {
//<editor-fold desc="Events">
@@ -386,6 +392,21 @@ export class RectanglePrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image
this.data.rotateWithLine = value;
}
+ /**
+ * Get with scaling
+ */
+ public get withScaling(): boolean {
+ return this.data.withScaling;
+ }
+
+ /**
+ * Set with scaling
+ * @param value
+ */
+ public set withScaling(value: boolean) {
+ this.data.withScaling = value;
+ }
+
/**
* Get trigger immediate end draw
*/
diff --git a/src/lib/generators/primitives/TextPrimitiveGenerator.ts b/src/lib/generators/primitives/TextPrimitiveGenerator.ts
index 725c4494..ed05b9dd 100644
--- a/src/lib/generators/primitives/TextPrimitiveGenerator.ts
+++ b/src/lib/generators/primitives/TextPrimitiveGenerator.ts
@@ -9,6 +9,7 @@ import {PositionPointGeneratorModel} from "../positionings/PositionPointGenerato
export class TextPrimitiveGeneratorModel extends PositionPointGeneratorModel {
startElement?: MedsurfDraw.PositionPoint;
rotateWithLine: boolean;
+ withScaling: boolean;
triggerImmediateEndDraw: boolean;
}
@@ -56,31 +57,35 @@ export class TextPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Tex
this._positionPointGenerator.once("startGenerator", this.start, this);
this._positionPointGenerator.once("startGenerator", this.startPositionPointGenerator, this);
this._positionPointGenerator.once("updatePoint", this.updatePositionPointGenerator, this);
- // TODO uncommend when scale needed: this._positionPointGenerator.once("endGenerator", this.endPositionPointGeneratorScale, this);
- // TODO uncommend when scale needed: this._positionPointGenerator.once("endGenerator", this.startScale, this);
- this._positionPointGenerator.once("endGenerator", this.endPositionPointGenerator, this); // TODO commend when scale needed
+ if (this.withScaling) {
+ this._positionPointGenerator.once("endGenerator", this.endPositionPointGeneratorScale, this);
+ this._positionPointGenerator.once("endGenerator", this.startScale, this);
+ } else {
+ this._positionPointGenerator.once("endGenerator", this.endPositionPointGenerator, this);
+ }
this._positionPointGenerator.once("abortGenerator", this.abortPositionPointGenerator, this);
} else {
// Setup text primitive
this.startPositionPointGenerator();
// Start text primitive scale
- // TODO uncommend when scale needed: this.endPositionPointGeneratorScale();
- this.endPositionPointGenerator();
-
- /* TODO uncommend when scale needed:
- // Check pointerover
- // -- Check if mouse is in image
- const globalPoint = this.target.renderer.plugins.interaction.mouse.global;
- const hitTest = this.target.renderer.plugins.interaction.hitTest(globalPoint, this.target);
- if (!hitTest) {
- // -- Not hit test result -> mouse outside image
- this.target.once("pointerover", this.startScale, this);
+ if (this.withScaling) {
+ this.endPositionPointGeneratorScale();
+
+ // Check pointerover
+ // -- Check if mouse is in image
+ const globalPoint = this.target.renderer.plugins.interaction.mouse.global;
+ const hitTest = this.target.renderer.plugins.interaction.hitTest(globalPoint, this.target);
+ if (!hitTest) {
+ // -- Not hit test result -> mouse outside image
+ this.target.once("pointerover", this.startScale, this);
+ } else {
+ // -- Hit rest result -> mouse inside image
+ this.startScale();
+ }
} else {
- // -- Hit rest result -> mouse inside image
- this.startScale();
+ this.endPositionPointGenerator();
}
- */
}
//</editor-fold>
}
@@ -207,13 +212,14 @@ export class TextPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Tex
this.startPositionPointGenerator();
// End generator
- // TODO uncommend when scale needed: this.endPositionPointGeneratorScale();
- this.endPositionPointGenerator();
+ if (this.withScaling) {
+ this.endPositionPointGeneratorScale();
- /* TODO uncommend when scale needed:
- // Start scale
- this.startScale();
- */
+ // Start scale
+ this.startScale();
+ } else {
+ this.endPositionPointGenerator();
+ }
}
/**
@@ -226,7 +232,7 @@ export class TextPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Tex
}
this.positionPointElement.model.primitives.push(this.textPrimitiveElement.model as any);
- if (this.triggerImmediateEndDraw) {
+ if (!this.withScaling && this.triggerImmediateEndDraw) {
this.endTextPrimitiveDraw()
} else {
//<editor-fold desc="Events">
@@ -257,7 +263,7 @@ export class TextPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Tex
this.positionPointElement.model.primitives.push(this.textPrimitiveElement.model as any);
// Check for trigger var
- if (this.triggerImmediateEndDraw) {
+ if (!this.withScaling && this.triggerImmediateEndDraw) {
this.endTextPrimitiveDraw()
} else {
//<editor-fold desc="Events">
@@ -387,6 +393,21 @@ export class TextPrimitiveGenerator extends BaseGenerator<MedsurfDraw.Image, Tex
this.data.rotateWithLine = value;
}
+ /**
+ * Get with scaling
+ */
+ public get withScaling(): boolean {
+ return this.data.withScaling;
+ }
+
+ /**
+ * Set with scaling
+ * @param value
+ */
+ public set withScaling(value: boolean) {
+ this.data.withScaling = value;
+ }
+
/**
* Get trigger immediate end draw
*/
diff --git a/src/lib/interactions/ScaleInteraction.ts b/src/lib/interactions/ScaleInteraction.ts
index 58117196..6e91efbb 100644
--- a/src/lib/interactions/ScaleInteraction.ts
+++ b/src/lib/interactions/ScaleInteraction.ts
@@ -23,6 +23,7 @@ export class ScaleInteraction<TElement extends MedsurfDraw.ImageObject> extends
/**
* Members
*/
+ protected _pivotCenter: boolean;
protected _scaleX: number;
protected _scaleY: number;
protected _isScaling: boolean;
@@ -31,10 +32,14 @@ export class ScaleInteraction<TElement extends MedsurfDraw.ImageObject> extends
/**
* Constructor
* @param element
+ * @param pivotCenter
*/
- public constructor(element: TElement) {
+ public constructor(element: TElement, pivotCenter: boolean = false) {
// Parent constructor
super(element);
+
+ // Members
+ this._pivotCenter = pivotCenter;
}
//<editor-fold desc="Public functions">
@@ -91,58 +96,79 @@ export class ScaleInteraction<TElement extends MedsurfDraw.ImageObject> extends
let dW: number = 0;
let dH: number = 0;
- // TODO
- // Use rotation here -> otherwise not working
+ let pW = 1;
+ let pH = 1;
+ if (this._pivotCenter) {
+ pW = 2;
+ pH = 2;
+ }
+
+ /*
+ const scaleDirection = Math.atan2(event.data.global.y / scale.y - this._scaleY, event.data.global.x / scale.x - this._scaleX);
+ if (scaleDirection + 0.2 > Math.PI && scaleDirection - 0.2 < Math.PI) {
+ return;
+ }
+ const scaleDirection = 1 - 1 / Math.atan2(event.data.global.y / scale.y - this._scaleY, event.data.global.x / scale.x - this._scaleX);
+ if ((scaleDirection - 0.2) > this.element.rotation && (scaleDirection + 0.2) < this.element.rotation) {
+ return;
+ }
+ */
+
+ /* TODO only scale in correct way
+ console.log(event.data.global.x / scale.x, this._scaleX);
+ console.log(event.data.global.y / scale.y, this._scaleY);
+ console.log("answer:", Math.atan2(event.data.global.y / scale.y - this._scaleY, event.data.global.x / scale.x - this._scaleX));
+ */
+
+ let cosR = Math.cos(this.element.rotation);
+ if (cosR === 0)
+ cosR = 1;
+
+ let sinR = Math.sin(this.element.rotation);
+ if (sinR === 0)
+ sinR = 1;
+
+ /*
+ console.log(cosR);
+ console.log(sinR);
+ console.log("answer:", 1 - 1 / Math.atan2(event.data.global.y / scale.y - this._scaleY, event.data.global.x / scale.x - this._scaleX));
+ */
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;
+ dX = (event.data.global.x / scale.x - this._scaleX) / cosR;
+ dW = -1 * dX * pW;
this._scaleX = event.data.global.x / scale.x;
}
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;
+ dY = (event.data.global.y / scale.y - this._scaleY) / sinR;
+ dH = -1 * dY * pH;
this._scaleY = event.data.global.y / scale.y;
}
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") {
- dX = dW;
- }
- */
+ dW = (event.data.global.x / scale.x - this._scaleX) * pW / cosR;
this._scaleX = event.data.global.x / scale.x;
}
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") {
- dY = dH;
- }
- */
+ dH = (event.data.global.y / scale.y - this._scaleY) * pH / sinR;
this._scaleY = event.data.global.y / scale.y;
}
// 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 (!(MedsurfDraw.Keyboard.isKeyDown("ShiftLeft") || MedsurfDraw.Keyboard.isKeyDown("ShiftRight"))) {
const rectangle = this.element.getRectangle();
- if (dW > dH) {
+ if (this._scaleSide == ScaleSideTypes.X_Y || this._scaleSide == ScaleSideTypes.WIDTH_Y) {
dH = rectangle.height / rectangle.width * dW;
- } else {
+ }
+ if (this._scaleSide == ScaleSideTypes.X_HEIGHT || this._scaleSide == ScaleSideTypes.WIDTH_HEIGHT) {
dW = rectangle.width / rectangle.height * dH;
}
}
- // TODO (parent.parent.parent as Primitives).scaleAnnotation(dX, dY, dW, dH);
-
this.emit("onScale", this._scaleSide, dX, dY, dW, dH);
}
--
GitLab