From 582affb8638104a4288f4bd74716829451e7aaab Mon Sep 17 00:00:00 2001
From: Andrea Gottsponer <ago@attr.ch>
Date: Fri, 17 Jan 2020 15:26:37 +0100
Subject: [PATCH] - updates
---
package-lock.json | 2 +-
package.json | 4 +--
src/app/index.ts | 36 +++++++++++++++----
.../elements/collections/LegendCollection.ts | 10 ++++++
src/lib/elements/connections/Line.ts | 16 ++++-----
.../elements/positionings/PositionPoint.ts | 2 +-
src/lib/elements/primitives/ArrowPrimitive.ts | 31 +++++++++-------
.../elements/primitives/EllipsePrimitive.ts | 21 ++++++-----
.../elements/primitives/RectanglePrimitive.ts | 23 +++++++-----
src/lib/elements/primitives/TextPrimitive.ts | 11 ++++--
src/lib/generators/TextPrimitiveGenerator.ts | 9 ++++-
11 files changed, 112 insertions(+), 53 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 7d4a235a..1b059640 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "medsurf-draw",
- "version": "1.0.12",
+ "version": "1.0.13",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 0347f967..e673d78e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "medsurf-draw",
- "version": "1.0.12",
+ "version": "1.0.13",
"description": "Draw annotations on jpg/zoomify images, based on PIXI.js",
"keywords": [
"draw",
@@ -10,7 +10,7 @@
"zoomify",
"marker"
],
- "homepage": "https://iml.unibe.ch",
+ "homepage": "https://www.iml.unibe.ch",
"repository": {
"type": "git",
"url": "https://git-repo.iml.unibe.ch/iml-open-source/medsurf-draw.git"
diff --git a/src/app/index.ts b/src/app/index.ts
index d078907b..d640d2e5 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -374,10 +374,18 @@ PIXI.Renderer.registerPlugin('bla', bla);
positionPoint: point5.model,
rotateWithLine: false,
text: "Hello Text",
+ rectangle: {
+ x: 60,
+ y: 0,
+ width: 0,
+ height: 0,
+ },
style: {
fill: 0xFFFFFF,
fontSize: 22,
fontFamily: "proxima_nova_altsemibold",
+ align: 'left',
+ wordWrap: false,
}
});
point5.addChild(text);
@@ -768,7 +776,9 @@ PIXI.Renderer.registerPlugin('bla', bla);
style: {
fill: 0xFFFFFF,
fontSize: 22,
- fontFamily: 'proxima_nova_altsemibold'
+ fontFamily: 'proxima_nova_altsemibold',
+ align: 'left',
+ wordWrap: true,
},
col: legendColumn1
};
@@ -780,7 +790,9 @@ PIXI.Renderer.registerPlugin('bla', bla);
style: {
fill: 0xFFFFFF,
fontSize: 22,
- fontFamily: 'proxima_nova_altsemibold'
+ fontFamily: 'proxima_nova_altsemibold',
+ align: 'left',
+ wordWrap: true,
},
col: legendColumn1
};
@@ -792,7 +804,9 @@ PIXI.Renderer.registerPlugin('bla', bla);
style: {
fill: 0xFFFFFF,
fontSize: 22,
- fontFamily: 'proxima_nova_altsemibold'
+ fontFamily: 'proxima_nova_altsemibold',
+ align: 'left',
+ wordWrap: true,
},
col: legendColumn1
};
@@ -811,7 +825,9 @@ PIXI.Renderer.registerPlugin('bla', bla);
style: {
fill: 0xFFFFFF,
fontSize: 22,
- fontFamily: 'proxima_nova_altsemibold'
+ fontFamily: 'proxima_nova_altsemibold',
+ align: 'left',
+ wordWrap: true,
},
col: legendColumn2
};
@@ -823,7 +839,9 @@ PIXI.Renderer.registerPlugin('bla', bla);
style: {
fill: 0xFFFFFF,
fontSize: 22,
- fontFamily: 'proxima_nova_altsemibold'
+ fontFamily: 'proxima_nova_altsemibold',
+ align: 'left',
+ wordWrap: true,
},
col: legendColumn2
};
@@ -842,7 +860,9 @@ PIXI.Renderer.registerPlugin('bla', bla);
style: {
fill: 0xFFFFFF,
fontSize: 22,
- fontFamily: 'proxima_nova_altsemibold'
+ fontFamily: 'proxima_nova_altsemibold',
+ align: 'left',
+ wordWrap: true,
},
col: legendColumn3
};
@@ -854,7 +874,9 @@ PIXI.Renderer.registerPlugin('bla', bla);
style: {
fill: 0xFFFFFF,
fontSize: 22,
- fontFamily: 'proxima_nova_altsemibold'
+ fontFamily: 'proxima_nova_altsemibold',
+ align: 'left',
+ wordWrap: true,
},
col: legendColumn3
};
diff --git a/src/lib/elements/collections/LegendCollection.ts b/src/lib/elements/collections/LegendCollection.ts
index 305190f3..41526485 100644
--- a/src/lib/elements/collections/LegendCollection.ts
+++ b/src/lib/elements/collections/LegendCollection.ts
@@ -68,6 +68,8 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
protected readonly _fillColorDefault: number = 0xFFFFFF;
protected readonly _fontSizeDefault: number = 12;
protected readonly _fontFamilyDefault: string = "proxima_nova_altsemibold";
+ protected readonly _alignDefault: string = "left";
+ protected readonly _wordWrapDefault: boolean = false;
// TODO rowDistance std -> 14
// TODO colDistance std -> 14
// TODO indexWidth std -> 14
@@ -239,6 +241,10 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
numberElement.text = index.toString();
+ // @ts-ignore
+ textElement._textElement.style.breakWords = true;
+ // @ts-ignore
+ textElement._textElement.style.wordWrap = true;
// @ts-ignore
textElement._textElement.style.wordWrapWidth = colWidth - this._enumerationPadding;
@@ -319,6 +325,8 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
fill: this._fillColorDefault,
fontSize: this._fontSizeDefault,
fontFamily: this._fontFamilyDefault,
+ align: this._alignDefault,
+ wordWrap: this._wordWrapDefault,
},
col: legendColumn,
};
@@ -401,6 +409,8 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
fill: this._fillColorDefault,
fontSize: this._fontSizeDefault,
fontFamily: this._fontFamilyDefault,
+ align: this._alignDefault,
+ wordWrap: this._wordWrapDefault,
},
col: this.model.cols[col]
});
diff --git a/src/lib/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts
index 0ec084ab..cf818f12 100644
--- a/src/lib/elements/connections/Line.ts
+++ b/src/lib/elements/connections/Line.ts
@@ -76,8 +76,6 @@ export class Line extends BaseElementContainer<Models.Line> {
* Design
*/
protected readonly _strokeWidth: number = 2;
-
- protected readonly _lineWidth: number = 2;
protected readonly _lineAlphaDefault: number = 1;
protected readonly _lineColorDefault: number = 0xFFFFFF;
protected readonly _lineColorSelected: number = 0x4a90e2;
@@ -293,7 +291,7 @@ export class Line extends BaseElementContainer<Models.Line> {
if (startLines.length == 0 && endLines.length == 0) {
// No matching control points
- this._lineElement.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha);
+ this._lineElement.lineStyle(this.model.strokeWidth, this._lineColor, this._lineAlpha);
this._lineElement.moveTo(this.graphicLine.start.x, this.graphicLine.start.y);
this._lineElement.lineTo(this.graphicLine.end.x, this.graphicLine.end.y);
}
@@ -429,7 +427,7 @@ export class Line extends BaseElementContainer<Models.Line> {
this._controlPointsElement.endFill();
}
- this._lineElement.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha);
+ this._lineElement.lineStyle(this.model.strokeWidth, this._lineColor, this._lineAlpha);
this._lineElement.moveTo(startPoint.x, startPoint.y);
if (startPoint.x == endPoint.x && endPoint.x == controlPoint.x || startPoint.y == endPoint.y && endPoint.y == controlPoint.y || Math.abs(Math.round((startPoint.x * (endPoint.y - controlPoint.y) + endPoint.x * (controlPoint.y - startPoint.y) + controlPoint.x * (startPoint.y - endPoint.y)) * 100000) / 100000) == 0) {
this._lineElement.lineTo(endPoint.x, endPoint.y);
@@ -573,7 +571,7 @@ export class Line extends BaseElementContainer<Models.Line> {
this._controlPointsElement.endFill();
}
- this._lineElement.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha);
+ this._lineElement.lineStyle(this.model.strokeWidth, this._lineColor, this._lineAlpha);
this._lineElement.moveTo(this.graphicLine.start.x, this.graphicLine.start.y);
this._lineElement.bezierCurveTo(controlPointsPrevious.c2.x, controlPointsPrevious.c2.y, controlPointsNext.c1.x, controlPointsNext.c1.y, this.graphicLine.end.x, this.graphicLine.end.y);
this.graphicLine.type = LineTypes.BEZIER;
@@ -581,7 +579,7 @@ export class Line extends BaseElementContainer<Models.Line> {
this.graphicLine.controlEnd = controlPointsNext.c1;
}
} else {
- this._lineElement.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha);
+ this._lineElement.lineStyle(this.model.strokeWidth, this._lineColor, this._lineAlpha);
this._lineElement.moveTo(this.graphicLine.start.x, this.graphicLine.start.y);
this._lineElement.lineTo(this.graphicLine.end.x, this.graphicLine.end.y);
}
@@ -590,10 +588,10 @@ export class Line extends BaseElementContainer<Models.Line> {
// TODO better resolution for circles or better calculation
this._lineCornerElement.clear();
- this._lineCornerElement.lineStyle(this._lineWidth / 2, this._lineColor, this._lineAlpha);
+ this._lineCornerElement.lineStyle(this.model.strokeWidth / 2, this._lineColor, this._lineAlpha);
this._lineCornerElement.beginFill(this._lineColor, this._lineAlpha);
- this._lineCornerElement.drawCircle(this.graphicLine.start.x, this.graphicLine.start.y, this._lineWidth / 4);
- this._lineCornerElement.drawCircle(this.graphicLine.end.x, this.graphicLine.end.y, this._lineWidth / 4);
+ this._lineCornerElement.drawCircle(this.graphicLine.start.x, this.graphicLine.start.y, this.model.strokeWidth / 4);
+ this._lineCornerElement.drawCircle(this.graphicLine.end.x, this.graphicLine.end.y, this.model.strokeWidth / 4);
this._lineCornerElement.endFill();
diff --git a/src/lib/elements/positionings/PositionPoint.ts b/src/lib/elements/positionings/PositionPoint.ts
index 17ff9ee4..b33ee993 100644
--- a/src/lib/elements/positionings/PositionPoint.ts
+++ b/src/lib/elements/positionings/PositionPoint.ts
@@ -91,7 +91,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
this._fillColor = this.model.isSelftest ? this._lineColorSelftest : this._fillColorNormal;
// Position
- this.position.set(model.position.x, model.position.y);
+ this.position.set(this.model.position.x, this.model.position.y);
// Events
this.modeInteraction = new ModeInteraction(this);
diff --git a/src/lib/elements/primitives/ArrowPrimitive.ts b/src/lib/elements/primitives/ArrowPrimitive.ts
index 4c4cc008..3505ff95 100644
--- a/src/lib/elements/primitives/ArrowPrimitive.ts
+++ b/src/lib/elements/primitives/ArrowPrimitive.ts
@@ -34,6 +34,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
* Members
*/
protected _fillColor: number;
+ protected _rectangle: PIXI.Rectangle;
/**
* Interactions
@@ -100,11 +101,15 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
// Setup
this.zIndex = 300; // TODO how to implement moveToFront etc...
this._fillColor = this.model.options.fillColor;
+ this._rectangle = new PIXI.Rectangle(0, 0, this.model.rectangle.width, this.model.rectangle.height);
/* TODO remove
this._rectangle = rectangle;
this._color = color || 0xFFFFFF;
*/
+ // Position
+ this.position.set(this.model.rectangle.x, this.model.rectangle.y);
+
// Events
this.modeInteraction = new ModeInteraction(this);
// Viewer
@@ -155,7 +160,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
this._arrowElement = new PIXI.Graphics();
this._rotateContainer.addChild(this._arrowElement);
- this._wedgePointElement = this.model.wedgePoint ? new PointElement(this.model.wedgePoint.x, this.model.wedgePoint.y) : new PointElement(this.model.rectangle.x + this.model.rectangle.width, this.model.rectangle.y + this.model.rectangle.height / 2);
+ this._wedgePointElement = this.model.wedgePoint ? new PointElement(this.model.wedgePoint.x, this.model.wedgePoint.y) : new PointElement(this._rectangle.x + this._rectangle.width, this._rectangle.y + this._rectangle.height / 2);
this._wedgePointElement.on("onMove", this._onWedgeMove, this);
this._configurationElement = new ConfigurationElement(this.modeInteraction);
@@ -248,11 +253,11 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
if (this._fillColor) {
this._arrowElement.beginFill(this._fillColor);
}
- this._arrowElement.moveTo(this.model.rectangle.x, this.model.rectangle.y + this.model.rectangle.height / 2);
- this._arrowElement.lineTo(this.model.rectangle.x + this.model.rectangle.width, this.model.rectangle.y);
+ this._arrowElement.moveTo(this._rectangle.x, this._rectangle.y + this._rectangle.height / 2);
+ this._arrowElement.lineTo(this._rectangle.x + this._rectangle.width, this._rectangle.y);
this._arrowElement.lineTo(this._wedgePointElement.position.x, this._wedgePointElement.position.y);
- this._arrowElement.lineTo(this.model.rectangle.x + this.model.rectangle.width, this.model.rectangle.y + this.model.rectangle.height);
- this._arrowElement.lineTo(this.model.rectangle.x, this.model.rectangle.y + this.model.rectangle.height / 2);
+ this._arrowElement.lineTo(this._rectangle.x + this._rectangle.width, this._rectangle.y + this._rectangle.height);
+ this._arrowElement.lineTo(this._rectangle.x, this._rectangle.y + this._rectangle.height / 2);
this._arrowElement.endFill();
// @ts-ignore
@@ -645,8 +650,8 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
if (Keyboard.isKeyDown("ControlLeft") || Keyboard.isKeyDown("ControlRight")) {
- this.position.x += dX;
- this.position.y += dY;
+ this.model.rectangle.x = this.position.x += dX;
+ this.model.rectangle.y = this.position.y += dY;
} else {
this.parent.emit("onMove", event, dX, dY);
}
@@ -674,7 +679,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
}
protected _onScale(dX: number, dY: number, dW: number, dH: number): void {
- if (this.model.rectangle.width + dW < 1) {
+ if (this._rectangle.width + dW < 1) {
return;
/*
dW = 1 - this._ellipse.width;
@@ -682,7 +687,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
dY = 0;
*/
}
- if (this.model.rectangle.height + dH < 1) {
+ if (this._rectangle.height + dH < 1) {
return;
/*
dH = 1 - this._ellipse.height;
@@ -692,8 +697,8 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
}
// Element
- this.model.rectangle.width += dW;
- this.model.rectangle.height += dH;
+ this.model.rectangle.width = this._rectangle.width += dW;
+ this.model.rectangle.height = this._rectangle.height += dH;
// Position TODO not needed ??
// this.position.x += (dX + dW / 2) * Math.cos(this.rotation) - (dY + dH / 2) * Math.sin(this.rotation);
@@ -831,7 +836,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
//<editor-fold desc="BaseContainer">
public getRectangle(): PIXI.Rectangle {
- return new PIXI.Rectangle(this.model.rectangle.x, this.model.rectangle.y, this.model.rectangle.width, this.model.rectangle.height);
+ return new PIXI.Rectangle(this._rectangle.x, this._rectangle.y, this._rectangle.width, this._rectangle.height);
}
public getRotation(): number {
@@ -841,7 +846,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
public showItem(): void {
this._arrowElement.renderable = true;
- this._rotateContainer.pivot.set(this.model.rectangle.width / 2, this.model.rectangle.height / 2);
+ this._rotateContainer.pivot.set(this._rectangle.width / 2, this._rectangle.height / 2);
// this.pivot.set(0, this._rectangle.height / 2); // TODO pivot for rotation
}
diff --git a/src/lib/elements/primitives/EllipsePrimitive.ts b/src/lib/elements/primitives/EllipsePrimitive.ts
index b6cd9483..25ff1cfc 100644
--- a/src/lib/elements/primitives/EllipsePrimitive.ts
+++ b/src/lib/elements/primitives/EllipsePrimitive.ts
@@ -32,6 +32,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
* Members
*/
protected _fillColor: number;
+ protected _ellipse: PIXI.Ellipse;
/**
* Interactions
@@ -97,6 +98,10 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
// Setup
this.zIndex = 300; // TODO how to implement moveToFront etc...
this._fillColor = this.model.options.fillColor;
+ this._ellipse = new PIXI.Ellipse(0, 0, this.model.ellipse.width / 2, this.model.ellipse.height / 2);
+
+ // Position
+ this.position.set(this.model.ellipse.x, this.model.ellipse.y);
// Events
this.modeInteraction = new ModeInteraction(this);
@@ -238,7 +243,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
if (this._fillColor) {
this._ellipseElement.beginFill(this._fillColor);
}
- this._ellipseElement.drawEllipse(this.model.ellipse.x, this.model.ellipse.y, this.model.ellipse.width, this.model.ellipse.height);
+ this._ellipseElement.drawEllipse(this._ellipse.x, this._ellipse.y, this._ellipse.width, this._ellipse.height);
this._ellipseElement.endFill();
// @ts-ignore
@@ -626,8 +631,8 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
if (Keyboard.isKeyDown("ControlLeft") || Keyboard.isKeyDown("ControlRight")) {
- this.position.x += dX;
- this.position.y += dY;
+ this.model.ellipse.x = this.position.x += dX;
+ this.model.ellipse.y = this.position.y += dY;
} else {
this.parent.emit("onMove", event, dX, dY);
}
@@ -650,7 +655,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
}
protected _onScale(dX: number, dY: number, dW: number, dH: number): void {
- if (this.model.ellipse.width + dW < 1) {
+ if (this._ellipse.width + dW < 1) {
return;
/*
dW = 1 - this._ellipse.width;
@@ -658,7 +663,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
dY = 0;
*/
}
- if (this.model.ellipse.height + dH < 1) {
+ if (this._ellipse.height + dH < 1) {
return;
/*
dH = 1 - this._ellipse.height;
@@ -668,8 +673,8 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
}
// Element
- this.model.ellipse.width += dW;
- this.model.ellipse.height += dH;
+ this.model.ellipse.width = this._ellipse.width += dW;
+ this.model.ellipse.height = this._ellipse.height += dH;
// Position TODO not needed ??
// this.position.x += dX * Math.cos(this.rotation) - dY * Math.sin(this.rotation);
@@ -794,7 +799,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
//<editor-fold desc="BaseContainer">
public getRectangle(): PIXI.Rectangle {
- return new PIXI.Rectangle(this.model.ellipse.x - this.model.ellipse.width, this.model.ellipse.y - this.model.ellipse.height, this.model.ellipse.width * 2, this.model.ellipse.height * 2);
+ return new PIXI.Rectangle(this._ellipse.x - this._ellipse.width, this._ellipse.y - this._ellipse.height, this._ellipse.width * 2, this._ellipse.height * 2);
}
public getRotation(): number {
diff --git a/src/lib/elements/primitives/RectanglePrimitive.ts b/src/lib/elements/primitives/RectanglePrimitive.ts
index bef1e0d2..482c6000 100644
--- a/src/lib/elements/primitives/RectanglePrimitive.ts
+++ b/src/lib/elements/primitives/RectanglePrimitive.ts
@@ -32,6 +32,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
* Members
*/
protected _fillColor: number;
+ protected _rectangle: PIXI.Rectangle;
/**
* Interactions
@@ -97,6 +98,10 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// Setup
this.zIndex = 300; // TODO how to implement moveToFront etc...
this._fillColor = this.model.options.fillColor;
+ this._rectangle = new PIXI.Rectangle(0, 0, this.model.rectangle.width, this.model.rectangle.height);
+
+ // Position
+ this.position.set(this.model.rectangle.x, this.model.rectangle.y);
// Events
this.modeInteraction = new ModeInteraction(this);
@@ -238,7 +243,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
if (this._fillColor) {
this._rectangleElement.beginFill(this._fillColor);
}
- this._rectangleElement.drawRect(this.model.rectangle.x, this.model.rectangle.y, this.model.rectangle.width, this.model.rectangle.height);
+ this._rectangleElement.drawRect(this._rectangle.x, this._rectangle.y, this._rectangle.width, this._rectangle.height);
this._rectangleElement.endFill();
// @ts-ignore
@@ -627,8 +632,8 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
if (Keyboard.isKeyDown("ControlLeft") || Keyboard.isKeyDown("ControlRight")) {
- this.position.x += dX;
- this.position.y += dY;
+ this.model.rectangle.x = this.position.x += dX;
+ this.model.rectangle.y = this.position.y += dY;
} else {
this.parent.emit("onMove", event, dX, dY);
}
@@ -651,7 +656,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
}
protected _onScale(dX: number, dY: number, dW: number, dH: number): void {
- if (this.model.rectangle.width + dW < 1) {
+ if (this._rectangle.width + dW < 1) {
return;
/*
dW = 1 - this._ellipse.width;
@@ -659,7 +664,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
dY = 0;
*/
}
- if (this.model.rectangle.height + dH < 1) {
+ if (this._rectangle.height + dH < 1) {
return;
/*
dH = 1 - this._ellipse.height;
@@ -669,8 +674,8 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
}
// Element
- this.model.rectangle.width += dW;
- this.model.rectangle.height += dH;
+ this.model.rectangle.width = this._rectangle.width += dW;
+ this.model.rectangle.height = this._rectangle.height += dH;
// Position TODO not needed ??
// this.position.x += (dX + dW / 2) * Math.cos(this.rotation) - (dY + dH / 2) * Math.sin(this.rotation);
@@ -797,7 +802,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
//<editor-fold desc="BaseContainer">
public getRectangle(): PIXI.Rectangle {
- return new PIXI.Rectangle(this.model.rectangle.x, this.model.rectangle.y, this.model.rectangle.width, this.model.rectangle.height);
+ return new PIXI.Rectangle(this._rectangle.x, this._rectangle.y, this._rectangle.width, this._rectangle.height);
}
public getRotation(): number {
@@ -807,7 +812,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
public showItem(): void {
this._rectangleElement.renderable = true;
- this._rotateContainer.pivot.set(this.model.rectangle.width / 2, this.model.rectangle.height / 2);
+ this._rotateContainer.pivot.set(this._rectangle.width / 2, this._rectangle.height / 2);
/* TODO remove -> Test for pivot
const test = new PIXI.Graphics();
test.beginFill(0xffffff, 1);
diff --git a/src/lib/elements/primitives/TextPrimitive.ts b/src/lib/elements/primitives/TextPrimitive.ts
index 17e181b0..469cf74c 100644
--- a/src/lib/elements/primitives/TextPrimitive.ts
+++ b/src/lib/elements/primitives/TextPrimitive.ts
@@ -92,6 +92,8 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
protected readonly _fillColorSelftestUnselected: number = 0xF02C6B;
protected readonly _fontSizeDefault: number = 12;
protected readonly _fontFamilyDefault: string = "proxima_nova_altsemibold";
+ protected readonly _alignDefault: string = "left";
+ protected readonly _wordWrapDefault: boolean = false;
/**
* Constructor
@@ -109,6 +111,8 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
fill: this._fillColorDefault,
fontSize: this._fontSizeDefault,
fontFamily: this._fontFamilyDefault,
+ align: this._alignDefault,
+ wordWrap: this._wordWrapDefault,
};
}
if (!this.model.style.fill) {
@@ -129,6 +133,9 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
this._text = text;
*/
+ // Position
+ this.position.set(this.model.rectangle.x, this.model.rectangle.y);
+
// Events
this.modeInteraction = new ModeInteraction(this);
// Viewer
@@ -755,8 +762,8 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
if (Keyboard.isKeyDown("ControlLeft") || Keyboard.isKeyDown("ControlRight")) {
- this.position.x += dX;
- this.position.y += dY;
+ this.model.rectangle.x = this.position.x += dX;
+ this.model.rectangle.y = this.position.y += dY;
} else {
this.parent.emit("onMove", event, dX, dY);
}
diff --git a/src/lib/generators/TextPrimitiveGenerator.ts b/src/lib/generators/TextPrimitiveGenerator.ts
index e7bdd347..270d8d2f 100644
--- a/src/lib/generators/TextPrimitiveGenerator.ts
+++ b/src/lib/generators/TextPrimitiveGenerator.ts
@@ -5,6 +5,7 @@ import {ImageObject} from "../bases/BaseModul";
import {DrawInteraction} from "../interactions/DrawInteraction";
import {TextPrimitive} from "../elements/primitives/TextPrimitive";
import {PositionPoint} from "../elements/positionings/PositionPoint";
+import {Rectangle} from "@ascii-dev-user/medsurf-lib/models";
export class TextPrimitiveGenerator extends BaseDrawGenerator {
/**
@@ -17,9 +18,12 @@ export class TextPrimitiveGenerator extends BaseDrawGenerator {
* Design
*/
protected readonly _text: string = ""; // TODO New Text
+ protected readonly _fillColorDefault: number = 0xFFFFFF;
protected readonly _fontSizeDefault: number = 22;
protected readonly _fontFamilyDefault: string = "proxima_nova_altsemibold";
- protected readonly _fillColorDefault: number = 0xFFFFFF;
+ protected readonly _alignDefault: string = "left";
+ protected readonly _wordWrapDefault: boolean = false;
+ protected readonly _rectangleDefault: Rectangle = {x: 0, y: 0, width: 0, height: 0};
/**
* Constructor
@@ -50,10 +54,13 @@ export class TextPrimitiveGenerator extends BaseDrawGenerator {
positionPoint: this.targetPositionPoint.model,
rotateWithLine: false,
text: this._text,
+ rectangle: this._rectangleDefault,
style: {
fill: this._fillColorDefault,
fontSize: this._fontSizeDefault,
fontFamily: this._fontFamilyDefault,
+ align: this._alignDefault,
+ wordWrap: this._wordWrapDefault,
},
});
this._textElement.modeInteraction.defaultMode = "author";
--
GitLab