diff --git a/src/lib/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts
index 25086889db89b2733116f7917a9961843e2d2b70..553794770288a35fdac91c1d34ec991e74a1d9bb 100644
--- a/src/lib/elements/connections/Line.ts
+++ b/src/lib/elements/connections/Line.ts
@@ -14,6 +14,7 @@ import {TextPrimitive} from "../primitives/TextPrimitive";
import {ArrowPrimitive} from "../primitives/ArrowPrimitive";
import {FillCollection} from "../collections/FillCollection";
import {LegendTextPrimitive} from "../primitives/LegendTextPrimitive";
+import {NumberElement} from "../interactions/number/NumberElement";
export class controlPoints {
c1: PIXI.IPoint;
@@ -67,8 +68,9 @@ export class Line extends BaseElementContainer<Models.Line> {
/**
* Configurations
*/
- protected _staticButton: ButtonElement;
protected _colorPicker: ColorElement;
+ protected _strokeWidthElement: NumberElement;
+ protected _staticButton: ButtonElement;
protected _positionPointButton: ButtonElement;
protected _bezierButton: ButtonElement;
protected _removeButton: ButtonElement;
@@ -76,7 +78,7 @@ export class Line extends BaseElementContainer<Models.Line> {
/**
* Design
*/
- protected readonly _strokeWidthDefault: number = 2;
+ protected readonly _strokeWidthDefault: number = 1;
protected readonly _lineAlphaDefault: number = 1;
protected readonly _lineColorDefault: number = 0xFFFFFF;
@@ -115,6 +117,7 @@ export class Line extends BaseElementContainer<Models.Line> {
// Setup
this.zIndex = 100;
+
this.graphicLine = {
type: this.model.isBezier ? LineTypes.BEZIER : LineTypes.LINEAR, // TODO from model
start: null,
@@ -123,7 +126,9 @@ export class Line extends BaseElementContainer<Models.Line> {
controlStart: null,
controlEnd: null,
};
- this._strokeWidth = this.model.strokeWidth * this.imageWidth;
+
+ this._strokeWidth = Math.round(this.model.strokeWidth * this.imageWidth * 100) / 100;
+
this._lineColor = this.model.options.lineColor;
this._lineAlpha = this.model.options.lineAlpha;
@@ -185,6 +190,10 @@ export class Line extends BaseElementContainer<Models.Line> {
this._colorPicker.on("color", this._onColor, this);
this._configurationElement.addChild(this._colorPicker);
+ this._strokeWidthElement = new NumberElement(this._strokeWidth, 1, 10, 1);
+ this._strokeWidthElement.on("number", this._onStrokeWidth, this);
+ this._configurationElement.addChild(this._strokeWidthElement);
+
this._staticButton = new ButtonElement(this.model.isStatic ? "\uf3c1" : "\uf023");
this._staticButton.on("button", this._onStaticButton, this);
this._configurationElement.addChild(this._staticButton);
@@ -649,6 +658,7 @@ export class Line extends BaseElementContainer<Models.Line> {
}
this._colorPicker.off("color", this._onColor, this);
+ this._strokeWidthElement.off("number", this._onStrokeWidth, this);
this._positionPointButton.off("button", this._onPositionPointButton, this);
this._bezierButton.off("button", this._onBezierButton, this);
this._removeButton.off("button", this._onRemoveButton, this);
@@ -1116,8 +1126,33 @@ export class Line extends BaseElementContainer<Models.Line> {
//<editor-fold desc="Configurations">
protected _onColor(hasLine: boolean, color: number, alpha: number): void {
this.model.options.hasLine = hasLine;
+
this.model.options.lineColor = color;
+ this._lineColor = this.model.options.lineColor;
+
this.model.options.lineAlpha = alpha;
+ this._lineAlpha = this.model.options.lineAlpha;
+
+ this.draw();
+ }
+
+ protected _onStrokeWidth(value: number): void {
+ this.model.strokeWidth = value / this.imageWidth;
+ this._strokeWidth = Math.round(this.model.strokeWidth * this.imageWidth * 100) / 100;
+
+ this.model.options.hasLine = true;
+
+ if (!this.model.options.lineColor) {
+ this.model.options.lineColor = this._lineColorDefault;
+ this._lineColor = this.model.options.lineColor;
+ }
+ if (!this.model.options.lineAlpha) {
+ this.model.options.lineAlpha = this._lineAlphaDefault;
+ this._lineAlpha = this.model.options.lineAlpha;
+ }
+
+ this._colorPicker.setColor(this._lineColor, this._lineAlpha);
+
this.draw();
}
@@ -1152,8 +1187,8 @@ export class Line extends BaseElementContainer<Models.Line> {
type: Models.ImageObjectType.POSITIONPOINT,
isStatic: false,
position: {
- x: posX,
- y: posY
+ x: posX / this.imageWidth,
+ y: posY / this.imageWidth
},
isSelftest: false
}, this.imageWidth);
@@ -1169,7 +1204,7 @@ export class Line extends BaseElementContainer<Models.Line> {
// @ts-ignore
end: positionPointNew.model.id,
isBezier: this.model.isBezier,
- strokeWidth: this._strokeWidthDefault,
+ strokeWidth: this._strokeWidthDefault / this.imageWidth,
options: {
hasLine: true,
lineColor: this.model.options.lineColor,
@@ -1188,7 +1223,7 @@ export class Line extends BaseElementContainer<Models.Line> {
// @ts-ignore
end: this.graphicLine.end.model.id,
isBezier: this.model.isBezier,
- strokeWidth: this._strokeWidthDefault,
+ strokeWidth: this._strokeWidthDefault / this.imageWidth,
options: {
hasLine: true,
lineColor: this.model.options.lineColor,
diff --git a/src/lib/elements/interactions/color/AlphaSliderElement.ts b/src/lib/elements/interactions/color/AlphaSliderElement.ts
index a6a9efced03e2015d5594de0dc63b44be927adae..fca094369346962a77a47fc3b62b56416f56eed9 100644
--- a/src/lib/elements/interactions/color/AlphaSliderElement.ts
+++ b/src/lib/elements/interactions/color/AlphaSliderElement.ts
@@ -96,7 +96,7 @@ export class AlphaSliderElement extends BaseContainer {
this._sliderElement = new PIXI.Graphics();
this.addChild(this._sliderElement);
- this._createColorGradient(this._color);
+ this._createSliderBackground(this._color);
}
//<editor-fold desc="Public functions">
@@ -129,21 +129,24 @@ export class AlphaSliderElement extends BaseContainer {
super.destroy(options);
}
- public setColor(color: number | undefined): void {
+ public setHue(color: number | undefined): void {
this._color = color;
- this._createColorGradient(this._color);
-
- this._emitAlpha();
+ this._createSliderBackground(this._color);
}
- public setHue(color: number | undefined): void {
+ public setColor(color: number | undefined): void {
this._color = color;
- this._createColorGradient(this._color);
+ this._createSliderBackground(this._color);
+ }
+
+ public setAlpha(alpha: number | undefined): void {
+ this._alpha = alpha || 1;
+ this.draw();
}
//</editor-fold>
//<editor-fold desc="Private functions">
- protected _createColorGradient(color: number | undefined): void {
+ protected _createSliderBackground(color: number | undefined): void {
if (color === undefined) {
color = 0xff0000;
}
diff --git a/src/lib/elements/interactions/color/ColorElement.ts b/src/lib/elements/interactions/color/ColorElement.ts
index da51c577352dba400eb781fb7eca1459c9f4c8f0..dbe20bcc470ed893d85025da7e6cb11cccced5f8 100644
--- a/src/lib/elements/interactions/color/ColorElement.ts
+++ b/src/lib/elements/interactions/color/ColorElement.ts
@@ -23,7 +23,7 @@ export class ColorElement extends BaseContainer {
* Elements
*/
protected _transparentElement: PIXI.TilingSprite;
- protected _colorPickerElement: PIXI.Graphics;
+ protected _backgroundElement: PIXI.Graphics;
protected _colorSliderElement: ColorSliderElement;
protected _colorSquareElement: ColorSquareElement;
protected _alphaSliderElement: AlphaSliderElement;
@@ -36,8 +36,8 @@ export class ColorElement extends BaseContainer {
protected readonly _lineWidth: number = 1;
protected readonly _lineColor: number = 0x4a90e2;
protected readonly _lineAlpha: number = 1;
- protected readonly _buttonWidth: number = 10;
- protected readonly _buttonHeight: number = 10;
+ protected readonly _buttonWidth: number = 20;
+ protected readonly _buttonHeight: number = 20;
/**
* Constructor
@@ -62,32 +62,32 @@ export class ColorElement extends BaseContainer {
this._transparentElement.height = this._buttonHeight;
this.addChild(this._transparentElement);
- this._colorPickerElement = new PIXI.Graphics();
- this._colorPickerElement.cursor = "fill";
- this._colorPickerElement.interactive = true;
- this._colorPickerElement.on("pointerdown", this._onPointerDown, this);
- this._colorPickerElement.on("pointerup", this._onPointerUp, this);
- this.addChild(this._colorPickerElement);
+ this._backgroundElement = new PIXI.Graphics();
+ this._backgroundElement.cursor = "fill";
+ this._backgroundElement.interactive = true;
+ this._backgroundElement.on("pointerdown", this._onPointerDown, this);
+ this._backgroundElement.on("pointerup", this._onPointerUp, this);
+ this.addChild(this._backgroundElement);
this._colorSliderElement = new ColorSliderElement(this._color);
this._colorSliderElement.on("color", this._onSliderColor, this);
- this._colorSliderElement.position.set(175, -2);
+ this._colorSliderElement.position.set(this._buttonWidth + 175, 0);
this._colorSquareElement = new ColorSquareElement(this._color);
this._colorSquareElement.on("color", this._onSquareColor, this);
- this._colorSquareElement.position.set(-2, -2);
+ this._colorSquareElement.position.set(this._buttonWidth, 0);
this._alphaSliderElement = new AlphaSliderElement(this._alpha, this._color);
this._alphaSliderElement.on("alpha", this._onSliderAlpha, this);
- this._alphaSliderElement.position.set(-2, 155);
+ this._alphaSliderElement.position.set(this._buttonWidth, 155);
this._clearButtonElement = new ButtonElement("\uf00d");
this._clearButtonElement.on("button", this._onClearButton, this);
- this._clearButtonElement.position.set(155, 155);
+ this._clearButtonElement.position.set(this._buttonWidth + 155, 155);
this._colorPaletteElement = new ColorPaletteElement();
this._colorPaletteElement.on("color", this._onColorButton, this);
- this._colorPaletteElement.position.set(180, -2);
+ this._colorPaletteElement.position.set(this._buttonWidth + 180, 0);
// On added event
this.on("added", (parent: PositionPoint) => {
@@ -107,20 +107,20 @@ export class ColorElement extends BaseContainer {
//<editor-fold desc="Public functions">
public draw(): void {
- this._colorPickerElement.clear();
- this._colorPickerElement.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha);
+ this._backgroundElement.clear();
+ this._backgroundElement.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha);
if (this._color !== undefined) {
- this._colorPickerElement.beginFill(this._color, this._alpha);
+ this._backgroundElement.beginFill(this._color, this._alpha);
} else {
- this._colorPickerElement.beginFill(this._color, 0.00000001);
+ this._backgroundElement.beginFill(this._color, 0.00000001);
}
- this._colorPickerElement.drawRect(0, 0, 10, 10);
- this._colorPickerElement.endFill();
+ this._backgroundElement.drawRect(0, 0, this._buttonWidth, this._buttonHeight);
+ this._backgroundElement.endFill();
}
public cleanUp(): void {
- this._colorPickerElement.off("pointerdown", this._onPointerDown, this);
- this._colorPickerElement.off("pointerup", this._onPointerUp, this);
+ this._backgroundElement.off("pointerdown", this._onPointerDown, this);
+ this._backgroundElement.off("pointerup", this._onPointerUp, this);
this._colorSliderElement.off("color", this._onSliderColor, this);
this._colorSquareElement.off("color", this._onSquareColor, this);
@@ -134,6 +134,17 @@ export class ColorElement extends BaseContainer {
super.destroy(options);
}
+ public setColor(color: number | undefined, alpha: number | undefined) {
+ this._color = color;
+ this._colorSquareElement.setColor(this._color);
+ if (this._showAlpha) {
+ this._alpha = alpha;
+ this._alphaSliderElement.setColor(this._color);
+ this._alphaSliderElement.setAlpha(this._alpha);
+ }
+ this.draw();
+ }
+
public static colorToHSL(color: number | undefined) {
if (color === undefined) {
color = 0xFF0000;
@@ -186,22 +197,32 @@ export class ColorElement extends BaseContainer {
protected _onPointerUp(event: PIXI.interaction.InteractionEvent): void {
event.stopPropagation();
- this._colorSliderElement.draw();
- this.addChild(this._colorSliderElement);
+ if (this.removeChild(this._colorSliderElement) === null) {
+ this._colorSliderElement.draw();
+ this.addChild(this._colorSliderElement);
+ }
- this._colorSquareElement.draw();
- this.addChild(this._colorSquareElement);
+ if (this.removeChild(this._colorSquareElement) === null) {
+ this._colorSquareElement.draw();
+ this.addChild(this._colorSquareElement);
+ }
if (this._showAlpha) {
- this._alphaSliderElement.draw();
- this.addChild(this._alphaSliderElement);
+ if (this.removeChild(this._alphaSliderElement) === null) {
+ this._alphaSliderElement.draw();
+ this.addChild(this._alphaSliderElement);
+ }
}
- this._clearButtonElement.draw();
- this.addChild(this._clearButtonElement);
+ if (this.removeChild(this._clearButtonElement) === null) {
+ this._clearButtonElement.draw();
+ this.addChild(this._clearButtonElement);
+ }
- this._colorPaletteElement.draw();
- this.addChild(this._colorPaletteElement);
+ if (this.removeChild(this._colorPaletteElement) === null) {
+ this._colorPaletteElement.draw();
+ this.addChild(this._colorPaletteElement);
+ }
this.parent.sortChildren();
}
@@ -235,28 +256,19 @@ export class ColorElement extends BaseContainer {
this._color = undefined;
this._alpha = undefined;
this.emit("color", false, this._color, this._alpha);
- this.getImage().allItemReleased(event);
+ this.draw();
}
protected _onColorButton(event: PIXI.interaction.InteractionEvent, color: number, alpha: number): void {
this._color = color;
+ this._colorSquareElement.setColor(this._color);
+ this._alphaSliderElement.setColor(this._color);
+
if (this._showAlpha) {
this._alpha = alpha;
+ this._alphaSliderElement.setAlpha(this._alpha);
}
this.emit("color", true, this._color, this._alpha);
- this.getImage().allItemReleased(event);
- }
-
- protected _onMove(event: any, color: any): void {
- if (color === null || color === undefined) {
- this._color = undefined;
- this._alpha = 0;
- this.emit("color", false, this._color, this._alpha);
- } else {
- this._color = parseInt(color.toHexString().substr(1, 6), 16);
- this._alpha = color.getAlpha();
- this.emit("color", true, this._color, this._alpha);
- }
this.draw();
}
//</editor-fold>
diff --git a/src/lib/elements/interactions/color/ColorPaletteElement.ts b/src/lib/elements/interactions/color/ColorPaletteElement.ts
index 9fb354cc480f143aad32255aaf3be8210f538970..a644aeebe68e6fef2d35ff823d8ff514c526aac9 100644
--- a/src/lib/elements/interactions/color/ColorPaletteElement.ts
+++ b/src/lib/elements/interactions/color/ColorPaletteElement.ts
@@ -22,7 +22,7 @@ export class ColorPaletteElement extends BaseContainer {
/**
* Design
*/
- protected readonly _maxStoredValues: number = 30;
+ protected readonly _maxStoredValues: number = 15;
protected readonly _buttonCap: number = 5;
protected readonly _presetColors: number[] = [0x000000, 0xffffff, 0x9B9B9B, 0xA00057, 0xFA0202, 0xD56038, 0xF39200, 0xA6CA5E, 0x357E32, 0x169995, 0x1F89CD, 0x210B8A, 0x6E6EBE];
@@ -51,6 +51,7 @@ export class ColorPaletteElement extends BaseContainer {
let dY = 0;
this._presetColors.forEach((color: number) => {
const colorButtonElement = new ColorButtonElement(color, 1);
+ colorButtonElement.on("button", this._onButtonClick, this);
this.addChild(colorButtonElement);
const length = this._presetButtons.length;
@@ -95,13 +96,22 @@ export class ColorPaletteElement extends BaseContainer {
public saveColor(color: number | undefined, alpha: number | undefined) {
if (color !== undefined && alpha !== undefined) {
const selection = ((color >> 16) & 0x0ff) + ',' + ((color >> 8) & 0x0ff) + ',' + ((color) & 0x0ff) + ',' + alpha;
- if (this._selectionPalette.indexOf(selection) === -1) {
+ if (this._selectionPalette.indexOf(selection) === -1 && !(this._presetColors.indexOf(color) > 0 && alpha === 1)) {
this._selectionPalette.push(selection);
this._createButton(selection);
}
}
if (this._selectionPalette.length > this._maxStoredValues) {
+ this._storedButtons.forEach((button) => {
+ this.removeChild(button);
+ button.destroy();
+ });
+ this._storedButtons = [];
+
this._selectionPalette.shift();
+ this._selectionPalette.forEach((selection: string) => {
+ this._createButton(selection);
+ });
}
window.localStorage[this._localStorageKey] = this._selectionPalette.join(";");
}
@@ -118,6 +128,7 @@ export class ColorPaletteElement extends BaseContainer {
const alpha = parseFloat(parts[3]);
const colorButtonElement = new ColorButtonElement(color, alpha);
+ colorButtonElement.name = "selection";
colorButtonElement.on("button", this._onButtonClick, this);
this.addChild(colorButtonElement);
diff --git a/src/lib/elements/interactions/color/ColorSliderElement.ts b/src/lib/elements/interactions/color/ColorSliderElement.ts
index 5e88e287db7f86e3990ceaa6566270af63b41ef9..92b2343e0dfaf08433dc50e409a13accbdfb4fb7 100644
--- a/src/lib/elements/interactions/color/ColorSliderElement.ts
+++ b/src/lib/elements/interactions/color/ColorSliderElement.ts
@@ -88,7 +88,7 @@ export class ColorSliderElement extends BaseContainer {
this._sliderElement = new PIXI.Graphics();
this.addChild(this._sliderElement);
- this._createColorGradient();
+ this._createSliderBackground();
}
//<editor-fold desc="Public functions">
@@ -124,7 +124,7 @@ export class ColorSliderElement extends BaseContainer {
//</editor-fold>
//<editor-fold desc="Private functions">
- protected _createColorGradient(): void {
+ protected _createSliderBackground(): void {
this._canvasContext.clearRect(0, 0, this._qualityWidth, this._qualityHeight);
const grad = this._canvasContext.createLinearGradient(0, 0, this._qualityWidth, 0);
grad.addColorStop(0, '#ff0000');
diff --git a/src/lib/elements/interactions/color/ColorSquareElement.ts b/src/lib/elements/interactions/color/ColorSquareElement.ts
index 851a952d1157b2f65ad1d3a72c67c30cfcd98f74..d5ea7bdf88e2932c4038e303d30647e99c0e72b4 100644
--- a/src/lib/elements/interactions/color/ColorSquareElement.ts
+++ b/src/lib/elements/interactions/color/ColorSquareElement.ts
@@ -91,7 +91,7 @@ export class ColorSquareElement extends BaseContainer {
// TODO move to better place
const hsl = ColorElement.colorToHSL(this.color);
- this._createColorGradient(hsl.h);
+ this._createSliderBackground(hsl.h);
}
//<editor-fold desc="Public functions">
@@ -129,18 +129,21 @@ export class ColorSquareElement extends BaseContainer {
public setHue(color: number): void {
const hsl = ColorElement.colorToHSL(color);
- this._createColorGradient(hsl.h);
+ this._createSliderBackground(hsl.h);
this._emitColor();
}
- public setColor(): void {
+ public setColor(color: number | undefined): void {
+ this._color = color;
+ const hsl = ColorElement.colorToHSL(color);
+ this._createSliderBackground(hsl.h);
}
//</editor-fold>
//<editor-fold desc="Private functions">
- protected _createColorGradient(hue: number): void {
+ protected _createSliderBackground(hue: number): void {
this._canvasContext.clearRect(0, 0, this._qualityWidth, this._qualityHeight);
for (let row = 0; row < this._qualityHeight; row++) {
const grad = this._canvasContext.createLinearGradient(0, 0, this._qualityWidth, 0);
diff --git a/src/lib/elements/interactions/menu/ConfigurationElement.ts b/src/lib/elements/interactions/menu/ConfigurationElement.ts
index 3a78aa65d830ff0f78867f483c004f763f912357..2ba1e29673114128a084760e452ca21f3a459370 100644
--- a/src/lib/elements/interactions/menu/ConfigurationElement.ts
+++ b/src/lib/elements/interactions/menu/ConfigurationElement.ts
@@ -4,6 +4,7 @@ import {ModeInteraction} from "../../../interactions/ModeInteraction";
import {ColorElement} from "../color/ColorElement";
import {ButtonElement} from "../button/ButtonElement";
import {MedsurfSprite} from "../../..";
+import {NumberElement} from "../number/NumberElement";
/**
* Configuration element
@@ -70,6 +71,9 @@ export class ConfigurationElement extends BaseContainer {
this.children.filter((element) => element instanceof ColorElement).forEach((element: ColorElement) => {
element.draw();
});
+ this.children.filter((element) => element instanceof NumberElement).forEach((element: NumberElement) => {
+ element.draw();
+ });
const bounds = this.getLocalBounds();
this.pivot.set(0, bounds.height);
@@ -105,7 +109,7 @@ export class ConfigurationElement extends BaseContainer {
const radius = this._radius * count;
const angle = this._circle / count;
this.children.forEach((child, i) => {
- if (child instanceof ButtonElement || child instanceof ColorElement) {
+ if (child instanceof ButtonElement || child instanceof ColorElement || child instanceof NumberElement) {
const x = radius * Math.cos((this._start - angle * i) * Math.PI / 180);
const y = radius * Math.sin((this._start - angle * i) * Math.PI / 180);
child.position.set(x, y);
diff --git a/src/lib/elements/interactions/number/NumberElement.ts b/src/lib/elements/interactions/number/NumberElement.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6fdf73d0bfa82646be633fd36ebfc97d7d9ebfaa
--- /dev/null
+++ b/src/lib/elements/interactions/number/NumberElement.ts
@@ -0,0 +1,159 @@
+import * as PIXI from "pixi.js-legacy";
+import {BaseContainer} from "../../../bases/BaseModul";
+import {ConfigurationElement} from "../menu/ConfigurationElement";
+import {MedsurfSprite, PositionPoint} from "../../..";
+import {NumberSliderElement} from "./NumberSliderElement";
+
+/**
+ * Number element
+ */
+export class NumberElement extends BaseContainer {
+ /**
+ * Members
+ */
+ protected _value: number | undefined;
+
+ /**
+ * Elements
+ */
+ protected _backgroundElement: PIXI.Graphics;
+ protected _valueElement: PIXI.Text;
+ protected _numberSliderElement: NumberSliderElement;
+
+ /**
+ * Design
+ */
+ protected readonly _lineWidth: number = 1;
+ protected readonly _lineColor: number = 0x4a90e2;
+ protected readonly _lineAlpha: number = 1;
+ protected readonly _fillColor: number = 0xFFFFFF;
+ protected readonly _fillAlpha: number = 1;
+ protected readonly _buttonWidth: number = 20;
+ protected readonly _buttonHeight: number = 20;
+ protected readonly _textFillColor: number = 0x000000;
+ protected readonly _fontSizeDefault: number = 12;
+ protected readonly _fontFamilyDefault: string = "proxima_nova_altsemibold";
+ protected readonly _alignDefault: string = "left";
+ protected readonly _wordWrapDefault: boolean = false;
+
+ /**
+ * Constructor
+ * @param value
+ * @param minValue
+ * @param maxValue
+ * @param gab
+ */
+ public constructor(value: number | undefined, minValue: number, maxValue: number, gab: number) {
+ super();
+
+ // Setup
+ this.zIndex = 501;
+ this._value = value;
+
+ // Pivot TODO not working correctly
+ // this.pivot.set(0.5, 0.5);
+
+ // Elements
+ this._backgroundElement = new PIXI.Graphics();
+ this._backgroundElement.cursor = "select";
+ this._backgroundElement.interactive = true;
+ this._backgroundElement.on("pointerdown", this._onPointerDown, this);
+ this._backgroundElement.on("pointerup", this._onPointerUp, this);
+ this.addChild(this._backgroundElement);
+
+ this._valueElement = new PIXI.Text((value || 'NAN').toString(), { fill: this._textFillColor, fontSize: this._fontSizeDefault, fontFamily: this._fontFamilyDefault, align: this._alignDefault, wordWrap: this._wordWrapDefault });
+ // TODO this._valueElement.pivot.set(0.5, 0.5);
+ // TODO this._valueElement.position.set(this._buttonWidth / 2, 0);
+ this.addChild(this._valueElement);
+
+ this._numberSliderElement = new NumberSliderElement(this._value, minValue, maxValue, gab);
+ this._numberSliderElement.on("number", this._onNumber, this);
+ this._numberSliderElement.position.x = this._buttonWidth;
+
+ // On added event
+ this.on("added", (parent: PositionPoint) => {
+ // Events
+ parent.on("hidden", () => {
+ this.removeChild(this._numberSliderElement);
+ // this._colorPaletteElement.saveColor(this._color, this._alpha);
+ }, this);
+
+ this.draw();
+ });
+ }
+
+ //<editor-fold desc="Public functions">
+ public draw(): void {
+ this._valueElement.resolution = 20;
+
+ this._backgroundElement.clear();
+ this._backgroundElement.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha);
+ this._backgroundElement.beginFill(this._fillColor, this._fillAlpha);
+ this._backgroundElement.drawRect(0, 0, this._buttonWidth, this._buttonHeight);
+ this._backgroundElement.endFill();
+ }
+
+ public cleanUp(): void {
+ this._backgroundElement.off("pointerdown", this._onPointerDown, this);
+ this._backgroundElement.off("pointerup", this._onPointerUp, this);
+
+ this._numberSliderElement.off("number", this._onNumber, this);
+ }
+
+ public destroy(options?: { children?: boolean; texture?: boolean; baseTexture?: boolean }): void {
+ this.cleanUp();
+ super.destroy(options);
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Private functions">
+ protected _onPointerDown(event: PIXI.interaction.InteractionEvent): void {
+ event.stopPropagation();
+ }
+
+ protected _onPointerUp(event: PIXI.interaction.InteractionEvent): void {
+ event.stopPropagation();
+
+ if (this.removeChild(this._numberSliderElement) === null) {
+ this._numberSliderElement.draw();
+ this.addChild(this._numberSliderElement);
+ }
+
+ this.parent.sortChildren();
+ }
+
+ protected _onNumber(value: number): void {
+ this._value = value;
+
+ this._valueElement.text = this._value.toString();
+
+ this.emit("number", this._value);
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="BaseContainer">
+ public getImage(): MedsurfSprite {
+ return (this.parent as ConfigurationElement).getImage();
+ }
+
+ public getImageScale(): PIXI.IPoint {
+ return (this.parent as ConfigurationElement).getImageScale();
+ }
+
+ public getRotation(): number {
+ return (this.parent as ConfigurationElement).getRotation();
+ }
+
+ public getRectangle(): PIXI.Rectangle {
+ return this.getLocalBounds();
+ }
+
+ public showItem(): void {
+ this.renderable = true;
+ }
+
+ public hideItem(): void {
+ this.renderable = false;
+ }
+ //</editor-fold>
+}
\ No newline at end of file
diff --git a/src/lib/elements/interactions/number/NumberSliderElement.ts b/src/lib/elements/interactions/number/NumberSliderElement.ts
new file mode 100644
index 0000000000000000000000000000000000000000..de7a8080aba72431d9e1f5da736af77d868cbae9
--- /dev/null
+++ b/src/lib/elements/interactions/number/NumberSliderElement.ts
@@ -0,0 +1,212 @@
+import * as PIXI from "pixi.js-legacy";
+import {BaseContainer} from "../../../bases/BaseModul";
+import {MoveInteraction} from "../../../interactions/MoveInteraction";
+
+/**
+ * Number slider element
+ */
+export class NumberSliderElement extends BaseContainer {
+ /**
+ * Members
+ */
+ protected _value: number;
+ protected _minValue: number;
+ protected _maxValue: number;
+ protected _gab: number;
+ protected _gabWidth: number;
+ protected _x: number;
+
+ /**
+ * Interactions
+ */
+ private _moveInteraction: MoveInteraction;
+
+ /**
+ * Elements
+ */
+ protected _backgroundElement: PIXI.Graphics;
+ private _sliderElement: PIXI.Graphics;
+
+ /**
+ * Design
+ */
+ protected readonly _squareWidth: number = 150;
+ protected readonly _squareHeight: number = 20;
+ protected readonly _borderLineWidth: number = 1;
+ protected readonly _borderLineColor: number = 0x4a90e2;
+ protected readonly _borderLineAlpha: number = 1;
+ protected readonly _sliderWidth: number = 1;
+ protected readonly _fillColor: number = 0xffffff;
+ protected readonly _fillAlpha: number = 1;
+
+ /**
+ * Constructor
+ * @param value
+ * @param minValue
+ * @param maxValue
+ * @param gab
+ */
+ public constructor(value: number | undefined, minValue: number, maxValue: number, gab: number = 1) {
+ super();
+
+ // Setup
+ this.zIndex = 400;
+ this._value = value || 1;
+ this._minValue = minValue;
+ this._maxValue = maxValue;
+ this._gab = gab;
+ this._gabWidth = this._squareWidth / (maxValue - minValue) / gab;
+
+ // Events
+ this.interactive = true;
+
+ this.moveInteraction = new MoveInteraction(this);
+ this.on("pointerdown", this.moveInteraction.startMove, this.moveInteraction);
+ this.on("pointermove", this.moveInteraction.onMove, this.moveInteraction);
+ this.on("pointerup", this.moveInteraction.endMove, this.moveInteraction);
+ this.on("pointerout", this.moveInteraction.endMove, this.moveInteraction);
+ this.on("startMove", this._onStartMove, this);
+ this.on("onMove", this._onMove, this);
+
+ // Elements
+ this._backgroundElement = new PIXI.Graphics();
+ this.addChild(this._backgroundElement);
+
+ this._sliderElement = new PIXI.Graphics();
+ this.addChild(this._sliderElement);
+
+ this._createSliderBackground(this._minValue, this._maxValue, this._gab);
+ }
+
+ //<editor-fold desc="Public functions">
+ public draw(): void {
+ /*
+ this._borderElement.clear();
+ this._borderElement.lineStyle(this._borderLineWidth, this._borderLineColor, this._borderLineAlpha);
+ this._borderElement.drawRect(0, 0, this._squareWidth, this._squareHeight);
+ this._borderElement.endFill();
+ */
+
+ this._sliderElement.clear();
+ this._sliderElement.beginFill(this._fillColor, this._fillAlpha);
+ // this._sliderElement.moveTo(0, 0);
+ // this._sliderElement.lineTo(this._sliderWidth, this._squareHeight);
+ this._sliderElement.drawRect(0, 0, this._sliderWidth, this._squareHeight);
+ this._sliderElement.endFill();
+
+ // Set position
+ this._x = (this._value - this._minValue) * this._gabWidth;
+ this._sliderElement.position.x = this._x;
+ }
+
+ public cleanUp(): void {
+ this.off("pointerdown", this.moveInteraction.startMove, this.moveInteraction);
+ this.off("pointermove", this.moveInteraction.onMove, this.moveInteraction);
+ this.off("pointerup", this.moveInteraction.endMove, this.moveInteraction);
+ this.off("pointerout", this.moveInteraction.endMove, this.moveInteraction);
+ this.off("startMove", this._onStartMove, this);
+ this.off("onMove", this._onMove, this);
+ }
+
+ public destroy(options?: { children?: boolean; texture?: boolean; baseTexture?: boolean }): void {
+ this.cleanUp();
+ super.destroy(options);
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Private functions">
+ protected _createSliderBackground(minValue: number, maxValue: number, gab: number): void {
+ this._backgroundElement.clear();
+ this._backgroundElement.lineStyle(this._borderLineWidth, this._borderLineColor, this._borderLineAlpha);
+ this._backgroundElement.beginFill(this._borderLineColor, 0.5);
+ this._backgroundElement.drawRect(0, 0, this._squareWidth, this._squareHeight);
+ this._backgroundElement.endFill();
+
+ for (let i = 1; i === i; i) {
+ this._backgroundElement.lineStyle(this._borderLineWidth, this._borderLineColor, this._borderLineAlpha);
+ this._backgroundElement.moveTo(this._gabWidth * i, 0);
+ this._backgroundElement.lineTo(this._gabWidth * i, 4);
+ this._backgroundElement.endFill();
+
+ if (this._gabWidth * ++i > this._squareWidth) {
+ break;
+ }
+ }
+ }
+
+ protected _emitValue(): void {
+ const p = this._sliderElement.position.x / (this._squareWidth - this._sliderWidth);
+ this._value = Math.floor((this._maxValue - this._minValue) * p) + this._minValue;
+ this.emit("number", this._value);
+ }
+
+ //<editor-fold desc="Move">
+ protected _onStartMove(event: PIXI.interaction.InteractionEvent): void {
+ const globalPosition = this.getGlobalPosition();
+ const scale = this.getImageScale();
+
+ this._x = Math.round((event.data.global.x - globalPosition.x) / scale.x);
+ const modX = this._x % this._gabWidth;
+
+ if (modX < this._gabWidth / 2) {
+ this._sliderElement.position.x = this._x - modX;
+ } else {
+ this._sliderElement.position.x = this._x + (this._gabWidth - modX);
+ }
+
+ if (this._sliderElement.position.x < 0) {
+ this._sliderElement.position.x = 0;
+ }
+ if (this._sliderElement.position.x >= this._squareWidth) {
+ this._sliderElement.position.x = this._squareWidth - 1;
+ }
+
+ this._emitValue();
+ }
+
+ protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
+ this._x += dX;
+ const modX = this._x % this._gabWidth;
+
+ if (modX < this._gabWidth / 2) {
+ this._sliderElement.position.x = this._x - modX;
+ } else {
+ this._sliderElement.position.x = this._x + (this._gabWidth - modX);
+ }
+
+ if (this._sliderElement.position.x < 0) {
+ this._sliderElement.position.x = 0;
+ }
+ if (this._sliderElement.position.x >= this._squareWidth) {
+ this._sliderElement.position.x = this._squareWidth - 1;
+ }
+
+ this._emitValue();
+ }
+ //</editor-fold>
+ //</editor-fold>
+
+ //<editor-fold desc="BaseContainer">
+ public getRectangle(): PIXI.Rectangle {
+ return this.getLocalBounds();
+ }
+
+ public showItem(): void {
+ this.renderable = true;
+ }
+
+ public hideItem(): void {
+ this.renderable = false;
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Getter and Setter">
+ public get moveInteraction(): MoveInteraction {
+ return this._moveInteraction;
+ }
+
+ public set moveInteraction(value: MoveInteraction) {
+ this._moveInteraction = value;
+ }
+ //</editor-fold>
+}
\ No newline at end of file
diff --git a/src/lib/elements/primitives/ArrowPrimitive.ts b/src/lib/elements/primitives/ArrowPrimitive.ts
index ef7b4a77eb88f6ec60dbf7469f250c2a44ae8e31..e34354729f47c6f47995fdb7b3afc317a7012cae 100644
--- a/src/lib/elements/primitives/ArrowPrimitive.ts
+++ b/src/lib/elements/primitives/ArrowPrimitive.ts
@@ -23,6 +23,7 @@ import {TextPrimitive} from "./TextPrimitive";
import {FillCollection} from "../collections/FillCollection";
import {LegendTextPrimitive} from "./LegendTextPrimitive";
import {PointElement} from "../interactions/point/PointElement";
+import {NumberElement} from "../interactions/number/NumberElement";
/**
* Arrow primitive
@@ -63,6 +64,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
*/
protected _lineColorPicker: ColorElement;
protected _fillColorPicker: ColorElement;
+ protected _strokeWidthElement: NumberElement;
protected _staticButton: ButtonElement;
protected _selftestButton: ButtonElement;
protected _selftestChooseButton: ButtonElement;
@@ -123,7 +125,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
this.model.rectangle.height * this.imageWidth
);
- this._strokeWidth = this.model.strokeWidth * this.imageWidth;
+ this._strokeWidth = Math.round(this.model.strokeWidth * this.imageWidth * 100) / 100;
this._lineColor = this.model.options.lineColor;
this._lineAlpha = this.model.options.lineAlpha;
@@ -211,11 +213,14 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
this._lineColorPicker.on("color", this._onLineColor, this);
this._configurationElement.addChild(this._lineColorPicker);
- // TODO how to handle empty stuff
this._fillColorPicker = new ColorElement(this.model.options.fillColor, this.model.options.fillAlpha);
this._fillColorPicker.on("color", this._onFillColor, this);
this._configurationElement.addChild(this._fillColorPicker);
+ this._strokeWidthElement = new NumberElement(this._strokeWidth, 1, 10, 1);
+ this._strokeWidthElement.on("number", this._onStrokeWidth, this);
+ this._configurationElement.addChild(this._strokeWidthElement);
+
this._staticButton = new ButtonElement(this.model.isStatic ? "\uf3c1" : "\uf023");
this._staticButton.on("button", this._onStaticButton, this);
this._configurationElement.addChild(this._staticButton);
@@ -296,11 +301,13 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
if (this.model.options.hasFill) {
this._arrowElement.beginFill(this._fillColor, this._fillAlpha);
}
- 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._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.drawPolygon([
+ new PIXI.Point(this._rectangle.x, this._rectangle.y + this._rectangle.height / 2),
+ new PIXI.Point(this._rectangle.x + this._rectangle.width, this._rectangle.y),
+ new PIXI.Point(this._wedgePointElement.position.x, this._wedgePointElement.position.y),
+ new PIXI.Point(this._rectangle.x + this._rectangle.width, this._rectangle.y + this._rectangle.height),
+ new PIXI.Point(this._rectangle.x, this._rectangle.y + this._rectangle.height / 2),
+ ]);
this._arrowElement.endFill();
// @ts-ignore
@@ -367,6 +374,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
this._lineColorPicker.off("color", this._onLineColor, this);
this._fillColorPicker.off("color", this._onFillColor, this);
+ this._strokeWidthElement.off("number", this._onStrokeWidth, this);
this._staticButton.off("button", this._onStaticButton, this);
this._lineArrowButton.off("button", this._onLineArrowButton, this);
this._removeButton.off("button", this._onRemoveButton, this);
@@ -908,6 +916,26 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
this.draw();
}
+ protected _onStrokeWidth(value: number): void {
+ this.model.strokeWidth = value / this.imageWidth;
+ this._strokeWidth = Math.round(this.model.strokeWidth * this.imageWidth * 100) / 100;
+
+ this.model.options.hasLine = true;
+
+ if (!this.model.options.lineColor) {
+ this.model.options.lineColor = this._lineColorDefault;
+ this._lineColor = this.model.options.lineColor;
+ }
+ if (!this.model.options.lineAlpha) {
+ this.model.options.lineAlpha = this._lineAlphaDefault;
+ this._lineAlpha = this.model.options.lineAlpha;
+ }
+
+ this._lineColorPicker.setColor(this._lineColor, this._lineAlpha);
+
+ this.draw();
+ }
+
protected _onStaticButton(): void {
this.model.isStatic = !this.model.isStatic;
this._staticButton.text = this.model.isStatic ? "\uf3c1" : "\uf023";
diff --git a/src/lib/elements/primitives/EllipsePrimitive.ts b/src/lib/elements/primitives/EllipsePrimitive.ts
index 61a5860b7a1b1e5a993b06e830543aa44b215299..b216f3530c559d533f6385ee6b28f78a7ed2f8d5 100644
--- a/src/lib/elements/primitives/EllipsePrimitive.ts
+++ b/src/lib/elements/primitives/EllipsePrimitive.ts
@@ -22,6 +22,7 @@ import {TextPrimitive} from "./TextPrimitive";
import {ArrowPrimitive} from "./ArrowPrimitive";
import {FillCollection} from "../collections/FillCollection";
import {LegendTextPrimitive} from "./LegendTextPrimitive";
+import {NumberElement} from "../interactions/number/NumberElement";
/**
* Ellipse primitive
@@ -60,6 +61,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
*/
protected _lineColorPicker: ColorElement;
protected _fillColorPicker: ColorElement;
+ protected _strokeWidthElement: NumberElement;
protected _staticButton: ButtonElement;
protected _selftestButton: ButtonElement;
protected _selftestChooseButton: ButtonElement;
@@ -120,7 +122,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.model.ellipse.height / 2 * this.imageWidth
);
- this._strokeWidth = this.model.strokeWidth * this.imageWidth;
+ this._strokeWidth = Math.round(this.model.strokeWidth * this.imageWidth * 100) / 100;
this._lineColor = this.model.options.lineColor;
this._lineAlpha = this.model.options.lineAlpha;
@@ -197,11 +199,14 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this._lineColorPicker.on("color", this._onLineColor, this);
this._configurationElement.addChild(this._lineColorPicker);
- // TODO how to handle empty stuff
this._fillColorPicker = new ColorElement(this.model.options.fillColor, this.model.options.fillAlpha);
this._fillColorPicker.on("color", this._onFillColor, this);
this._configurationElement.addChild(this._fillColorPicker);
+ this._strokeWidthElement = new NumberElement(this._strokeWidth, 1, 10, 1);
+ this._strokeWidthElement.on("number", this._onStrokeWidth, this);
+ this._configurationElement.addChild(this._strokeWidthElement);
+
this._staticButton = new ButtonElement(this.model.isStatic ? "\uf3c1" : "\uf023");
this._staticButton.on("button", this._onStaticButton, this);
this._configurationElement.addChild(this._staticButton);
@@ -343,6 +348,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this._lineColorPicker.off("color", this._onLineColor, this);
this._fillColorPicker.off("color", this._onFillColor, this);
+ this._strokeWidthElement.off("number", this._onStrokeWidth, this);
this._staticButton.off("button", this._onStaticButton, this);
this._lineArrowButton.off("button", this._onLineArrowButton, this);
this._removeButton.off("button", this._onRemoveButton, this);
@@ -850,6 +856,26 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
this.draw();
}
+ protected _onStrokeWidth(value: number): void {
+ this.model.strokeWidth = value / this.imageWidth;
+ this._strokeWidth = Math.round(this.model.strokeWidth * this.imageWidth * 100) / 100;
+
+ this.model.options.hasLine = true;
+
+ if (!this.model.options.lineColor) {
+ this.model.options.lineColor = this._lineColorDefault;
+ this._lineColor = this.model.options.lineColor;
+ }
+ if (!this.model.options.lineAlpha) {
+ this.model.options.lineAlpha = this._lineAlphaDefault;
+ this._lineAlpha = this.model.options.lineAlpha;
+ }
+
+ this._lineColorPicker.setColor(this._lineColor, this._lineAlpha);
+
+ this.draw();
+ }
+
protected _onStaticButton(): void {
this.model.isStatic = !this.model.isStatic;
this._staticButton.text = this.model.isStatic ? "\uf3c1" : "\uf023";
diff --git a/src/lib/elements/primitives/LegendTextPrimitive.ts b/src/lib/elements/primitives/LegendTextPrimitive.ts
index 274897c337a39c107dd8cadfd1f722d73f731d59..531412db67704a865428ad5a3b3697b39c7cbb31 100644
--- a/src/lib/elements/primitives/LegendTextPrimitive.ts
+++ b/src/lib/elements/primitives/LegendTextPrimitive.ts
@@ -23,6 +23,7 @@ import {MedsurfSprite} from "../images/MedsurfSprite";
import {LegendColumnCollection} from "../collections/LegendColumnCollection";
import {FillCollection} from "../collections/FillCollection";
import {LegendCollection} from "../collections/LegendCollection";
+import {NumberElement} from "../interactions/number/NumberElement";
/**
@@ -70,6 +71,7 @@ export class LegendTextPrimitive extends BaseElementContainer<Models.LegendItem>
* Configurations
*/
protected _colorPicker: ColorElement;
+ protected _fontSizeElement: NumberElement;
protected _editButton: ButtonElement;
protected _removeButton: ButtonElement;
@@ -170,6 +172,10 @@ export class LegendTextPrimitive extends BaseElementContainer<Models.LegendItem>
this._colorPicker.on("color", this._onColor, this);
this._configurationElement.addChild(this._colorPicker);
+ this._fontSizeElement = new NumberElement(this._style.fontSize, 1, 40, 1);
+ this._fontSizeElement.on("number", this._onFontSize, this);
+ this._configurationElement.addChild(this._fontSizeElement);
+
this._editButton = new ButtonElement("\uf246");
this._editButton.on("button", this._onEditButton, this);
this._configurationElement.addChild(this._editButton);
@@ -283,6 +289,7 @@ export class LegendTextPrimitive extends BaseElementContainer<Models.LegendItem>
}
this._colorPicker.off("color", this._onColor, this);
+ this._fontSizeElement.off("number", this._onFontSize, this);
this._editButton.off("button", this._onEditButton, this);
}
@@ -686,6 +693,16 @@ export class LegendTextPrimitive extends BaseElementContainer<Models.LegendItem>
this.draw();
}
+ protected _onFontSize(value: number): void {
+ this.model.style.fontSize = value / this.imageWidth;
+ this._style.fontSize = Math.round(this.model.style.fontSize * this.imageWidth);
+
+ this._colorPicker.setColor(parseInt(this._style.fill.substr(1), 16), 1);
+ this._scaleElement.draw();
+
+ this.draw();
+ }
+
protected _onEditButton(): void {
this.modeInteraction.changeMode("write");
}
diff --git a/src/lib/elements/primitives/RectanglePrimitive.ts b/src/lib/elements/primitives/RectanglePrimitive.ts
index 1a7d5f2799aa647e4a65c6e3272b082b24cf449b..b7e1185393ddcf1963dac071440afe5aa83f2a40 100644
--- a/src/lib/elements/primitives/RectanglePrimitive.ts
+++ b/src/lib/elements/primitives/RectanglePrimitive.ts
@@ -22,6 +22,7 @@ import {TextPrimitive} from "./TextPrimitive";
import {ArrowPrimitive} from "./ArrowPrimitive";
import {FillCollection} from "../collections/FillCollection";
import {LegendTextPrimitive} from "./LegendTextPrimitive";
+import {NumberElement} from "../interactions/number/NumberElement";
/**
* Rectangle primitive
@@ -60,6 +61,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
*/
protected _lineColorPicker: ColorElement;
protected _fillColorPicker: ColorElement;
+ protected _strokeWidthElement: NumberElement;
protected _staticButton: ButtonElement;
protected _selftestButton: ButtonElement;
protected _selftestChooseButton: ButtonElement;
@@ -120,7 +122,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.model.rectangle.height * this.imageWidth
);
- this._strokeWidth = this.model.strokeWidth * this.imageWidth;
+ this._strokeWidth = Math.round(this.model.strokeWidth * this.imageWidth * 100) / 100;
this._lineColor = this.model.options.lineColor;
this._lineAlpha = this.model.options.lineAlpha;
@@ -197,11 +199,14 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this._lineColorPicker.on("color", this._onLineColor, this);
this._configurationElement.addChild(this._lineColorPicker);
- // TODO how to handle empty stuff
this._fillColorPicker = new ColorElement(this.model.options.fillColor, this.model.options.fillAlpha);
this._fillColorPicker.on("color", this._onFillColor, this);
this._configurationElement.addChild(this._fillColorPicker);
+ this._strokeWidthElement = new NumberElement(this._strokeWidth, 1, 10, 1);
+ this._strokeWidthElement.on("number", this._onStrokeWidth, this);
+ this._configurationElement.addChild(this._strokeWidthElement);
+
this._staticButton = new ButtonElement(this.model.isStatic ? "\uf3c1" : "\uf023");
this._staticButton.on("button", this._onStaticButton, this);
this._configurationElement.addChild(this._staticButton);
@@ -343,6 +348,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this._lineColorPicker.off("color", this._onLineColor, this);
this._fillColorPicker.off("color", this._onFillColor, this);
+ this._strokeWidthElement.off("number", this._onStrokeWidth, this);
this._staticButton.off("button", this._onStaticButton, this);
this._lineArrowButton.off("button", this._onLineArrowButton, this);
this._removeButton.off("button", this._onRemoveButton, this);
@@ -852,6 +858,26 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
this.draw();
}
+ protected _onStrokeWidth(value: number): void {
+ this.model.strokeWidth = value / this.imageWidth;
+ this._strokeWidth = Math.round(this.model.strokeWidth * this.imageWidth * 100) / 100;
+
+ this.model.options.hasLine = true;
+
+ if (!this.model.options.lineColor) {
+ this.model.options.lineColor = this._lineColorDefault;
+ this._lineColor = this.model.options.lineColor;
+ }
+ if (!this.model.options.lineAlpha) {
+ this.model.options.lineAlpha = this._lineAlphaDefault;
+ this._lineAlpha = this.model.options.lineAlpha;
+ }
+
+ this._lineColorPicker.setColor(this._lineColor, this._lineAlpha);
+
+ this.draw();
+ }
+
protected _onStaticButton(): void {
this.model.isStatic = !this.model.isStatic;
this._staticButton.text = this.model.isStatic ? "\uf3c1" : "\uf023";
diff --git a/src/lib/elements/primitives/TextPrimitive.ts b/src/lib/elements/primitives/TextPrimitive.ts
index 5c436ce1266b0d00ba41e3a984b45be00a514382..132fafc59ba8b254963ed3b8c476d2cdb5037612 100644
--- a/src/lib/elements/primitives/TextPrimitive.ts
+++ b/src/lib/elements/primitives/TextPrimitive.ts
@@ -25,6 +25,7 @@ import {RectanglePrimitive} from "./RectanglePrimitive";
import {ArrowPrimitive} from "./ArrowPrimitive";
import {LegendTextPrimitive} from "./LegendTextPrimitive";
import {FillCollection} from "../collections/FillCollection";
+import {NumberElement} from "../interactions/number/NumberElement";
/**
* Text primitive
@@ -72,6 +73,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
* Configurations
*/
protected _colorPicker: ColorElement;
+ protected _fontSizeElement: NumberElement;
protected _staticButton: ButtonElement;
protected _selftestButton: ButtonElement;
protected _selftestChooseButton: ButtonElement;
@@ -222,6 +224,10 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
this._colorPicker.on("color", this._onColor, this);
this._configurationElement.addChild(this._colorPicker);
+ this._fontSizeElement = new NumberElement(this._style.fontSize, 1, 40, 1);
+ this._fontSizeElement.on("number", this._onFontSize, this);
+ this._configurationElement.addChild(this._fontSizeElement);
+
this._staticButton = new ButtonElement(this.model.isStatic ? "\uf3c1" : "\uf023");
this._staticButton.on("button", this._onStaticButton, this);
this._configurationElement.addChild(this._staticButton);
@@ -380,6 +386,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
}
this._colorPicker.off("color", this._onColor, this);
+ this._fontSizeElement.off("number", this._onFontSize, this);
this._staticButton.off("button", this._onStaticButton, this);
this._editButton.off("button", this._onEditButton, this);
this._lineArrowButton.off("button", this._onLineArrowButton, this);
@@ -921,6 +928,16 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
this.draw();
}
+ protected _onFontSize(value: number): void {
+ this.model.style.fontSize = value / this.imageWidth;
+ this._style.fontSize = Math.round(this.model.style.fontSize * this.imageWidth);
+
+ this._colorPicker.setColor(parseInt(this._style.fill.substr(1), 16), 1);
+ this._scaleElement.draw();
+
+ this.draw();
+ }
+
protected _onStaticButton(): void {
this.model.isStatic = !this.model.isStatic;
this._staticButton.text = this.model.isStatic ? "\uf3c1" : "\uf023";