diff --git a/src/app/index.ts b/src/app/index.ts
index 5e1bd8f57c4120823e67e0ca0d9c9e7218fc17ae..720a4d39cecb815cd9fa9981cf7e53ac44a2d183 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -121,37 +121,28 @@ ready(() => {
antialias: true
});
+ // Stop execution when not active
+ window.addEventListener("visibilitychange", () => {
+ if (document.hidden) {
+ app.stop();
+ } else {
+ app.start();
+ }
+ });
+
// TODO Init resize event
- /*
+ /**/
window.addEventListener("resize", (event: UIEvent) => {
- // canvasDiv.style.width = (window.innerWidth * 0.9).toString();
- // canvasDiv.style.height = (window.innerHeight * 0.9).toString();
-
- // console.log("resize", canvas.width / currentWindowSize.width * window.innerWidth, canvas.height / currentWindowSize.height * window.innerHeight);
- // console.log("resize", window.innerWidth * currentCanvasAspect.width, window.innerHeight * currentCanvasAspect.height);
-
- // Setup size
- // app.renderer.resize(canvas.width / currentWindowSize.width * window.innerWidth, canvas.height / currentWindowSize.height* window.innerHeight);
- // app.renderer.resize(window.innerWidth * currentCanvasAspect.width, window.innerHeight * currentCanvasAspect.height);
- app.renderer.resize(canvasDiv.clientWidth * currentCanvasAspect.width, canvasDiv.clientHeight * currentCanvasAspect.height);
+ app.renderer.resize(window.innerWidth * 0.7, window.innerHeight * 0.7);
+ app.stage.emit("resize");
});
window.addEventListener("orientationchange", (event: Event) => {
- // canvasDiv.style.width = (window.innerWidth * 0.9).toString();
- // canvasDiv.style.height = (window.innerHeight * 0.9).toString();
-
- // console.log("orientationchange", canvas.width / currentWindowSize.width * window.innerWidth, canvas.height / currentWindowSize.height * window.innerHeight);
- // console.log("orientationchange", window.innerWidth * currentCanvasAspect.width, window.innerHeight * currentCanvasAspect.height);
-
- // Setup size
- // app.renderer.resize(canvas.width / currentWindowSize.width * window.innerWidth, canvas.height / currentWindowSize.height* window.innerHeight);
- // app.renderer.resize(window.innerWidth * currentCanvasAspect.width, window.innerHeight * currentCanvasAspect.height);
- app.renderer.resize(canvasDiv.clientWidth * currentCanvasAspect.width, canvasDiv.clientHeight * currentCanvasAspect.height);
+ app.renderer.resize(window.innerWidth * 0.7, window.innerHeight * 0.7);
+ app.stage.emit("resize");
});
- */
+ /**/
app.ticker.add(async (delta: number) => {
- // @ts-ignore
- // PIXI.keyboardManager.update();
Keyboard.update();
});
@@ -384,8 +375,8 @@ ready(() => {
image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("https://api.medsurf.iml.unibe.ch/v1/file/slide/2701,2701/image/1800x1800_80.jpeg"), group, loader, 1800, 1800);
// image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("https://api.medsurf.iml.unibe.ch/v1/file/slide/10400/image/1800x1800_80.jpeg"), group, loader, 1800, 1800);
// Tile BaseSprite
- imageWidth = 29512;
- image = new MedsurfTileSprite(app.renderer, canvas, group, loader, 5800, "https://api.medsurf.preview.iml.unibe.ch:443/v1/file/slide/5800/image/", imageWidth, 20512);
+ // imageWidth = 29512;
+ // image = new MedsurfTileSprite(app.renderer, canvas, group, loader, 5800, "https://api.medsurf.preview.iml.unibe.ch:443/v1/file/slide/5800/image/", imageWidth, 20512);
// imageWidth = 20944;
// image = new MedsurfTileSprite(app.renderer, canvas, group, loader, 5901, "https://api.medsurf.iml.unibe.ch/v1/file/slide/5901/image/", imageWidth, 23965);
diff --git a/src/lib/elements/collections/FillCollection.ts b/src/lib/elements/collections/FillCollection.ts
index df591b46de672727184edbe9408e2915a63fb1a7..a572d1d6c3984e295ebcea54c5810874d7d4d140 100644
--- a/src/lib/elements/collections/FillCollection.ts
+++ b/src/lib/elements/collections/FillCollection.ts
@@ -66,7 +66,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
*/
protected readonly _radiusAspect: number = 4;
protected readonly _buttonSizeAspect: number = 24;
- protected readonly _buttonTextAspect: number = 40;
+ protected readonly _buttonTextAspect: number = 2;
protected readonly _fillAlphaDefault: number = 1;
protected readonly _fillAlphaInteractive: number = 0.00000001;
@@ -165,7 +165,7 @@ export class FillCollection extends BaseElementContainer<Models.FillCollection>
// Configurations
const buttonRectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
- const buttonFontSize = Math.round(this.canvasWidth / this._buttonTextAspect);
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._colorPicker = new ColorElement(this.loader, this.model.options.fillColor, this.model.options.fillAlpha, true, buttonRectangle, buttonFontSize);
this._colorPicker.on("color", this._onColor, this);
diff --git a/src/lib/elements/collections/LegendCollection.ts b/src/lib/elements/collections/LegendCollection.ts
index 724135f4b159f381e3f7f84926404b669bc0b396..20303379261d2edea91ab53d5d8c8d123ce3727b 100644
--- a/src/lib/elements/collections/LegendCollection.ts
+++ b/src/lib/elements/collections/LegendCollection.ts
@@ -62,7 +62,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
*/
protected readonly _radiusAspect: number = 4;
protected readonly _buttonSizeAspect: number = 24;
- protected readonly _buttonTextAspect: number = 40;
+ protected readonly _buttonTextAspect: number = 2;
protected readonly _enumerationPadding: number = 30; // TODO remove
protected readonly _fillColorDefault: number = 0xFFFFFF;
protected readonly _fontSizeDefault: number = 12;
@@ -162,7 +162,7 @@ export class LegendCollection extends BaseElementContainer<Models.LegendCollecti
// Configurations
const buttonRectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
- const buttonFontSize = Math.round(this.canvasWidth / this._buttonTextAspect);
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._staticButton = new ButtonElement(this.model.isStatic ? "\uf3c1" : "\uf023", buttonRectangle, buttonFontSize);
this._staticButton.on("button", this._onStaticButton, this);
diff --git a/src/lib/elements/collections/LegendColumnCollection.ts b/src/lib/elements/collections/LegendColumnCollection.ts
index 012e6938d9b8533e4f6635293493176a9cde093e..f5f132cac3621c635b8a4a924980b05a53904aff 100644
--- a/src/lib/elements/collections/LegendColumnCollection.ts
+++ b/src/lib/elements/collections/LegendColumnCollection.ts
@@ -50,7 +50,7 @@ export class LegendColumnCollection extends BaseContainer {
*/
protected readonly _radiusAspect: number = 4;
protected readonly _buttonSizeAspect: number = 24;
- protected readonly _buttonTextAspect: number = 40;
+ protected readonly _buttonTextAspect: number = 2;
/**
* Constructor
@@ -117,7 +117,7 @@ export class LegendColumnCollection extends BaseContainer {
// Configurations
const buttonRectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
- const buttonFontSize = Math.round(this.canvasWidth / this._buttonTextAspect);
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._staticButton = new ButtonElement(this.isStatic ? "\uf3c1" : "\uf023", buttonRectangle, buttonFontSize);
this._staticButton.on("button", this._onStaticButton, this);
diff --git a/src/lib/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts
index 4d8d690d1d3ec3d45c3478e0d441ced7c5ec2a8d..d5b9dd8ac3df668c65c9e4a74725ab1c8dbc468d 100644
--- a/src/lib/elements/connections/Line.ts
+++ b/src/lib/elements/connections/Line.ts
@@ -80,7 +80,7 @@ export class Line extends BaseElementContainer<Models.Line> {
*/
protected readonly _radiusAspect: number = 4;
protected readonly _buttonSizeAspect: number = 24;
- protected readonly _buttonTextAspect: number = 40;
+ protected readonly _buttonTextAspect: number = 2;
protected readonly _strokeWidthDefault: number = 1;
@@ -198,7 +198,7 @@ export class Line extends BaseElementContainer<Models.Line> {
// Configurations
const buttonRectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
- const buttonFontSize = Math.round(this.canvasWidth / this._buttonTextAspect);
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._colorPicker = new ColorElement(this.loader, this.model.options.lineColor, this.model.options.lineAlpha, true, buttonRectangle, buttonFontSize);
this._colorPicker.on("color", this.onColor, this);
diff --git a/src/lib/elements/images/MedsurfSprite.ts b/src/lib/elements/images/MedsurfSprite.ts
index a7f504772dc5afef1574fd350a04c61060920c17..eb17dc8cbd25ac20a21f9424e0ccd74c564a8a1c 100644
--- a/src/lib/elements/images/MedsurfSprite.ts
+++ b/src/lib/elements/images/MedsurfSprite.ts
@@ -96,7 +96,7 @@ export class MedsurfSprite extends BaseSprite {
protected readonly _visibleImageYAspect: number = 10;
protected readonly _radiusAspect: number = 4;
protected readonly _buttonSizeAspect: number = 30;
- protected readonly _buttonTextAspect: number = 56;
+ protected readonly _buttonTextAspect: number = 2;
/**
* Constructor
@@ -153,6 +153,7 @@ export class MedsurfSprite extends BaseSprite {
this.on("endRight", this._endRight, this);
this.moveInteraction = new MoveInteraction(this, true);
+ this.on("startMove", this._onStartMove, this);
this.on("onMove", this._onMove, this);
this.zoomInteraction = new ZoomInteraction(this);
@@ -175,7 +176,7 @@ export class MedsurfSprite extends BaseSprite {
// Configurations
const buttonRectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
- const buttonFontSize = Math.round(this._canvas.width / this._buttonTextAspect);
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._arrowButton = new ButtonElement("\uf2ec", buttonRectangle, buttonFontSize);
this._arrowButton.on("button", this._onArrowButton, this);
@@ -210,6 +211,7 @@ export class MedsurfSprite extends BaseSprite {
this._contextElement.addChild(this._markerButton);
this.on("added", (parent: PIXI.Container) => {
+ parent.on("resize", this._onResize, this);
parent.on("setDefaultMode", this._setDefaultMode, this);
this.on("allElementRelease", this._allElementRelease, this);
@@ -220,6 +222,7 @@ export class MedsurfSprite extends BaseSprite {
// TODO get correct mode from parent ??? or from here ???
});
this.on("removed", (parent: PIXI.Container) => {
+ parent.off("resize", this._onResize, this);
parent.off("setDefaultMode", this._setDefaultMode, this);
this.off("allElementRelease", this._allElementRelease, this);
@@ -267,6 +270,7 @@ export class MedsurfSprite extends BaseSprite {
}
if (this.moveInteraction) {
+ this.off("startMove", this._onStartMove, this);
this.off("onMove", this._onMove, this);
delete this.moveInteraction;
}
@@ -310,6 +314,42 @@ export class MedsurfSprite extends BaseSprite {
}
}
+ protected _onResize(): void {
+ this._setActualValues();
+ this._fitToScreen(this._canvas.width, this._canvas.height);
+
+ // Context menu
+ const buttonSize = this._canvas.width / this._buttonSizeAspect;
+ this._contextElement.setRadius(buttonSize / this._radiusAspect);
+
+ // Configurations
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
+
+ this._arrowButton.setButtonSize(buttonSize, buttonSize);
+ this._arrowButton.setFontSize(buttonFontSize);
+
+ this._ellipseButton.setButtonSize(buttonSize, buttonSize);
+ this._ellipseButton.setFontSize(buttonFontSize);
+
+ this._rectButton.setButtonSize(buttonSize, buttonSize);
+ this._rectButton.setFontSize(buttonFontSize);
+
+ this._textButton.setButtonSize(buttonSize, buttonSize);
+ this._textButton.setFontSize(buttonFontSize);
+
+ this._lineButton.setButtonSize(buttonSize, buttonSize);
+ this._lineButton.setFontSize(buttonFontSize);
+
+ this._polygonButton.setButtonSize(buttonSize, buttonSize);
+ this._polygonButton.setFontSize(buttonFontSize);
+
+ this._fillPolygonButton.setButtonSize(buttonSize, buttonSize);
+ this._fillPolygonButton.setFontSize(buttonFontSize);
+
+ this._markerButton.setButtonSize(buttonSize, buttonSize);
+ this._markerButton.setFontSize(buttonFontSize);
+ }
+
/**
* Set default mode and change to it
* @param mode
@@ -626,6 +666,12 @@ export class MedsurfSprite extends BaseSprite {
//</editor-fold>
//<editor-fold desc="Move">
+ /**/
+ protected _onStartMove(event: PIXI.interaction.InteractionEvent): void {
+ this.allItemReleased(event);
+ }
+ /**/
+
protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
event.stopPropagation();
diff --git a/src/lib/elements/interactions/button/ButtonElement.ts b/src/lib/elements/interactions/button/ButtonElement.ts
index 5a0d513f852b4105b5f788380349a1864481277b..5241b741a0f1abeb4a5af148b56249f1e6941335 100644
--- a/src/lib/elements/interactions/button/ButtonElement.ts
+++ b/src/lib/elements/interactions/button/ButtonElement.ts
@@ -80,6 +80,21 @@ export class ButtonElement extends BaseContainer {
this.cleanUp();
super.destroy(options);
}
+
+ public setButtonSize(width?: number, height?: number): void {
+ if (width) {
+ this._rectangle.width = width;
+ }
+ if (height) {
+ this._rectangle.height = height;
+ }
+ this._iconElement.position.set(this._rectangle.width / 2, this._rectangle.height / 2);
+ this.draw();
+ }
+
+ public setFontSize(fontSize: number): void {
+ this._iconElement.style.fontSize = fontSize;
+ }
//</editor-fold>
//<editor-fold desc="Private functions">
diff --git a/src/lib/elements/interactions/image/ImageNavigatorElement.ts b/src/lib/elements/interactions/image/ImageNavigatorElement.ts
index 3a855e9dca4f2ed102a8f49e9740ebbfdda57c62..d8ab7617163f85c60860bc60e0afe194da0381ef 100644
--- a/src/lib/elements/interactions/image/ImageNavigatorElement.ts
+++ b/src/lib/elements/interactions/image/ImageNavigatorElement.ts
@@ -46,6 +46,9 @@ export class ImageNavigatorElement extends BaseContainer {
/**
* Design
*/
+ protected readonly _buttonSizeAspect: number = 3;
+ protected readonly _buttonTextAspect: number = 2;
+
protected readonly _lineWidth: number = 1;
protected readonly _lineColor: number = 0x000000; // 0x4a90e2;
protected readonly _lineAlpha: number = 1;
@@ -65,7 +68,7 @@ export class ImageNavigatorElement extends BaseContainer {
// Setup
this.zIndex = 100;
this._canvas = canvas;
- this._navigationHeight = Math.round(canvas.height / 6); // TODO
+ this._navigationHeight = Math.round(this._canvas.height / 6); // TODO
this._hidden = false;
// Events
@@ -128,25 +131,25 @@ export class ImageNavigatorElement extends BaseContainer {
this.on("onMove", this._onMove, this);
this.zoomInteraction = new ZoomInteraction(this, false);
- canvas.addEventListener("wheel", this.zoomInteraction.onZoom.bind(this.zoomInteraction));
this.on("onZoom", this._onZoom, this);
// Elements
- const buttonSize = this._navigationHeight / 3;
+ const buttonSize = this._navigationHeight / this._buttonSizeAspect;
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._visibleAreaElement = new PIXI.Graphics();
this._visibleAreaElement.zIndex = 20;
this.addChild(this._visibleAreaElement);
- this._zoomInButtonElement = new ButtonElement("\uf00e", new Rectangle(0, 0, buttonSize, buttonSize), 15);
+ this._zoomInButtonElement = new ButtonElement("\uf00e", new Rectangle(0, 0, buttonSize, buttonSize), buttonFontSize);
this._zoomInButtonElement.on("button", this._onZoomIn, this);
this.addChild(this._zoomInButtonElement);
- this._toggleButtonElement = new ButtonElement(this._hidden ? "\uf06e" : "\uf070", new Rectangle(0, 0, buttonSize, buttonSize), 15); // f06e
+ this._toggleButtonElement = new ButtonElement(this._hidden ? "\uf06e" : "\uf070", new Rectangle(0, 0, buttonSize, buttonSize), buttonFontSize); // f06e
this._toggleButtonElement.on("button", this._onToggle, this);
this.addChild(this._toggleButtonElement);
- this._zoomOutButtonElement = new ButtonElement("\uf010", new Rectangle(0, 0, buttonSize, buttonSize), 15);
+ this._zoomOutButtonElement = new ButtonElement("\uf010", new Rectangle(0, 0, buttonSize, buttonSize), buttonFontSize);
this._zoomOutButtonElement.on("button", this._onZoomOut, this);
this.addChild(this._zoomOutButtonElement);
@@ -162,13 +165,15 @@ export class ImageNavigatorElement extends BaseContainer {
});
*/
- this.on("added", () => {
+ this.on("added", (parent: PIXI.Container) => {
// Events
+ parent.on("resize", this._onResize, this);
this._wheelMethod = this.zoomInteraction.onZoom.bind(this.zoomInteraction);
- canvas.addEventListener("wheel", this._wheelMethod);
+ this._canvas.addEventListener("wheel", this._wheelMethod);
});
- this.on("removed", () => {
- canvas.removeEventListener("wheel", this._wheelMethod);
+ this.on("removed", (parent: PIXI.Container) => {
+ parent.off("resize", this._onResize, this);
+ this._canvas.removeEventListener("wheel", this._wheelMethod);
delete this._wheelMethod;
});
}
@@ -210,7 +215,18 @@ export class ImageNavigatorElement extends BaseContainer {
this._spriteElement.width = this._spriteElement.width / this._spriteElement.height * this._navigationHeight;
this._spriteElement.height = this._navigationHeight;
- const buttonSize = this._navigationHeight / 3;
+ const buttonSize = this._navigationHeight / this._buttonSizeAspect;
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
+
+ this._zoomInButtonElement.setButtonSize(buttonSize, buttonSize);
+ this._zoomInButtonElement.setFontSize(buttonFontSize);
+
+ this._toggleButtonElement.setButtonSize(buttonSize, buttonSize);
+ this._toggleButtonElement.setFontSize(buttonFontSize);
+
+ this._zoomOutButtonElement.setButtonSize(buttonSize, buttonSize);
+ this._zoomOutButtonElement.setFontSize(buttonFontSize);
+
this._zoomInButtonElement.position.set(this._spriteElement.width, 0);
this._toggleButtonElement.position.set(this._spriteElement.width, buttonSize);
this._zoomOutButtonElement.position.set(this._spriteElement.width, 2 * buttonSize);
@@ -219,6 +235,11 @@ export class ImageNavigatorElement extends BaseContainer {
this.draw();
}
+ protected _onResize(): void {
+ this._navigationHeight = Math.round(this._canvas.height / 6); // TODO
+ this._onLoaded();
+ }
+
/**
* On hover
* @param event
diff --git a/src/lib/elements/interactions/image/VirtualPointerElement.ts b/src/lib/elements/interactions/image/VirtualPointerElement.ts
index 13f12052968f16748e538e899077c5d913a433ac..e075015da0c444fded2f13e58ee865cb0d0510ee 100644
--- a/src/lib/elements/interactions/image/VirtualPointerElement.ts
+++ b/src/lib/elements/interactions/image/VirtualPointerElement.ts
@@ -48,12 +48,12 @@ export class VirtualPointerElement extends BaseContainer {
// Setup
this.zIndex = 100;
this._canvas = canvas;
- this._rectangle = new PIXI.Rectangle(0, 0, canvas.width / 10, canvas.width / 14);
+ this._rectangle = new PIXI.Rectangle(0, 0, this._canvas.width / 10, this._canvas.width / 14);
this._hidden = true;
// Position
this.pivot.set(0.5, 0.5);
- this.position.set(canvas.width / 2, canvas.height / 2 - canvas.width / 14);
+ this.position.set(this._canvas.width / 2, this._canvas.height / 2 - this._canvas.width / 14);
this.rotation = 45 * Math.PI / 180;
// Events
@@ -95,8 +95,15 @@ export class VirtualPointerElement extends BaseContainer {
this._arrowElement = new PIXI.Graphics();
this.addChild(this._arrowElement);
- this.on("added", () => {
+ this.on("added", (parent: PIXI.Container) => {
this.draw();
+
+ // Events
+ parent.on("resize", this._onResize, this);
+ });
+ this.on("removed", (parent: PIXI.Container) => {
+ // Events
+ parent.off("resize", this._onResize, this);
});
}
@@ -132,6 +139,11 @@ export class VirtualPointerElement extends BaseContainer {
//</editor-fold>
//<editor-fold desc="Private functions">
+ protected _onResize(): void {
+ this._rectangle = new PIXI.Rectangle(0, 0, this._canvas.width / 10, this._canvas.width / 14);
+ this.draw()
+ }
+
/**
* On move
* @param event
diff --git a/src/lib/elements/interactions/menu/ContextElement.ts b/src/lib/elements/interactions/menu/ContextElement.ts
index 848c4ddf9680289ca304e88fe7d7832f3d199693..21239083bd7cf326f8fdc2d1ad77841ea2e0b715 100644
--- a/src/lib/elements/interactions/menu/ContextElement.ts
+++ b/src/lib/elements/interactions/menu/ContextElement.ts
@@ -61,6 +61,17 @@ export class ContextElement extends BaseContainer {
this._contextElement.drawRect(0, 0, 200, 200);
this._contextElement.endFill();
*/
+
+ const count = this.children.length - 1;
+ const radius = this._radius * count;
+ const angle = this._circle / count;
+ this.children.forEach((child, i) => {
+ if (child instanceof ButtonElement || child instanceof ColorElement) {
+ 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);
+ }
+ });
}
public cleanUp(): void {
@@ -73,6 +84,11 @@ export class ContextElement extends BaseContainer {
super.destroy(options);
}
+ public setRadius(radius: number): void {
+ this._radius = radius;
+ this.draw();
+ }
+
public onZoom(event: PIXI.interaction.InteractionEvent, x: number, y: number, factor: number): void {
this.scale.x *= 1 / factor;
this.scale.y *= 1 / factor;
@@ -81,16 +97,7 @@ export class ContextElement extends BaseContainer {
//<editor-fold desc="Private functions">
protected _itemAdded() {
- const count = this.children.length - 1;
- const radius = this._radius * count;
- const angle = this._circle / count;
- this.children.forEach((child, i) => {
- if (child instanceof ButtonElement || child instanceof ColorElement) {
- 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);
- }
- });
+ this.draw();
/* TODO center stuff
const bounds = this.getLocalBounds();
diff --git a/src/lib/elements/interactions/select/SelectElement.ts b/src/lib/elements/interactions/select/SelectElement.ts
index 79d3726eb120178525fb1c1c6ff4bdcd47681c6a..9a41d8701af82af867d385e7143dd2efa429e709 100644
--- a/src/lib/elements/interactions/select/SelectElement.ts
+++ b/src/lib/elements/interactions/select/SelectElement.ts
@@ -212,6 +212,10 @@ export class SelectElement extends BaseContainer {
public showItem(): void {
this.renderable = true;
+ this._topLineElement.renderable = true;
+ this._rightLineElement.renderable = true;
+ this._bottomLineElement.renderable = true;
+ this._leftLineElement.renderable = true;
// Events
this.interactive = true;
@@ -219,6 +223,10 @@ export class SelectElement extends BaseContainer {
public hideItem(): void {
this.renderable = false;
+ this._topLineElement.renderable = false;
+ this._rightLineElement.renderable = false;
+ this._bottomLineElement.renderable = false;
+ this._leftLineElement.renderable = false;
// Events
this.interactive = false;
diff --git a/src/lib/elements/positionings/PositionPoint.ts b/src/lib/elements/positionings/PositionPoint.ts
index e2b1a7e6f5761bcc34f8bfaa22909332bd329cda..46e8d7f2e96a85dafa646f7a914774ce2a560ec8 100644
--- a/src/lib/elements/positionings/PositionPoint.ts
+++ b/src/lib/elements/positionings/PositionPoint.ts
@@ -66,7 +66,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
*/
protected readonly _radiusAspect: number = 4;
protected readonly _buttonSizeAspect: number = 24;
- protected readonly _buttonTextAspect: number = 40;
+ protected readonly _buttonTextAspect: number = 2;
protected readonly _radius: number = 4;
protected readonly _radiusSelected: number = 2;
@@ -150,7 +150,7 @@ export class PositionPoint extends BaseElementContainer<Models.PositionPoint> {
// Configurations
const buttonRectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
- const buttonFontSize = Math.round(this.canvasWidth / this._buttonTextAspect);
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._selftestButton = new ButtonElement(this.isSelftest ? "\uf4b3" : "\uf075", buttonRectangle, buttonFontSize);
this._selftestButton.on("button", this.onSelftestButton, this);
diff --git a/src/lib/elements/primitives/ArrowPrimitive.ts b/src/lib/elements/primitives/ArrowPrimitive.ts
index a810088a4d368790745eb0c72ef473e78e8f79ff..b863be7d340c2735bdab3a576587161ff5bbad71 100644
--- a/src/lib/elements/primitives/ArrowPrimitive.ts
+++ b/src/lib/elements/primitives/ArrowPrimitive.ts
@@ -77,7 +77,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
*/
protected readonly _radiusAspect: number = 4;
protected readonly _buttonSizeAspect: number = 24;
- protected readonly _buttonTextAspect: number = 40;
+ protected readonly _buttonTextAspect: number = 2;
protected readonly _strokeWidthDefault: number = 2;
@@ -226,7 +226,7 @@ export class ArrowPrimitive extends BaseElementContainer<Models.ArrowPrimitive>
// Configurations
const buttonRectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
- const buttonFontSize = Math.round(this.canvasWidth / this._buttonTextAspect);
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._lineColorPicker = new ColorElement(this.loader, this.model.options.lineColor, this.model.options.lineAlpha, true, buttonRectangle, buttonFontSize);
this._lineColorPicker.on("color", this._onLineColor, this);
diff --git a/src/lib/elements/primitives/EllipsePrimitive.ts b/src/lib/elements/primitives/EllipsePrimitive.ts
index 05a908896b5f4d1cebf21cf1ec0a6e5a27d49e12..eef2c26b9a118a372b0e349c45c29fa0837ada18 100644
--- a/src/lib/elements/primitives/EllipsePrimitive.ts
+++ b/src/lib/elements/primitives/EllipsePrimitive.ts
@@ -74,7 +74,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
*/
protected readonly _radiusAspect: number = 4;
protected readonly _buttonSizeAspect: number = 24;
- protected readonly _buttonTextAspect: number = 40;
+ protected readonly _buttonTextAspect: number = 2;
protected readonly _strokeWidthDefault: number = 2;
@@ -212,7 +212,7 @@ export class EllipsePrimitive extends BaseElementContainer<Models.EllipsePrimiti
// Configurations
const buttonRectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
- const buttonFontSize = Math.round(this.canvasWidth / this._buttonTextAspect);
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._lineColorPicker = new ColorElement(this.loader, this.model.options.lineColor, this.model.options.lineAlpha, true, buttonRectangle, buttonFontSize);
this._lineColorPicker.on("color", this._onLineColor, this);
diff --git a/src/lib/elements/primitives/LegendTextPrimitive.ts b/src/lib/elements/primitives/LegendTextPrimitive.ts
index d511ba61d6c44eb2595023602ee12c5df916f0c1..4dfc3968c2c493e554f9ccbab7e748a530f1592c 100644
--- a/src/lib/elements/primitives/LegendTextPrimitive.ts
+++ b/src/lib/elements/primitives/LegendTextPrimitive.ts
@@ -81,7 +81,7 @@ export class LegendTextPrimitive extends BaseElementContainer<Models.LegendItem>
*/
protected readonly _radiusAspect: number = 4;
protected readonly _buttonSizeAspect: number = 24;
- protected readonly _buttonTextAspect: number = 40;
+ protected readonly _buttonTextAspect: number = 2;
protected readonly _fillColorSelftest: number = 0xFFC67B;
protected readonly _fillColorSelftestSelected: number = 0x4ae29c;
@@ -179,7 +179,7 @@ export class LegendTextPrimitive extends BaseElementContainer<Models.LegendItem>
// Configurations
const buttonRectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
- const buttonFontSize = Math.round(this.canvasWidth / this._buttonTextAspect);
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._colorPicker = new ColorElement(this.loader, this.model.style.fill, undefined, false, buttonRectangle, buttonFontSize);
this._colorPicker.on("color", this._onColor, this);
diff --git a/src/lib/elements/primitives/RectanglePrimitive.ts b/src/lib/elements/primitives/RectanglePrimitive.ts
index dde27b60157ad3a81a7bc9a34b649043a3ef0cd3..cdf64d6b647cd0786c3306c9229e564109bc3cd4 100644
--- a/src/lib/elements/primitives/RectanglePrimitive.ts
+++ b/src/lib/elements/primitives/RectanglePrimitive.ts
@@ -74,7 +74,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
*/
protected readonly _radiusAspect: number = 4;
protected readonly _buttonSizeAspect: number = 24;
- protected readonly _buttonTextAspect: number = 40;
+ protected readonly _buttonTextAspect: number = 2;
protected readonly _strokeWidthDefault: number = 2;
@@ -212,7 +212,7 @@ export class RectanglePrimitive extends BaseElementContainer<Models.RectanglePri
// Configurations
const buttonRectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
- const buttonFontSize = Math.round(this.canvasWidth / this._buttonTextAspect);
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._lineColorPicker = new ColorElement(this.loader, this.model.options.lineColor, this.model.options.lineAlpha, true, buttonRectangle, buttonFontSize);
this._lineColorPicker.on("color", this._onLineColor, this);
diff --git a/src/lib/elements/primitives/TextPrimitive.ts b/src/lib/elements/primitives/TextPrimitive.ts
index 9d2cc7c3a3ffe3ac7847295dd1a5273eb8027956..22eb00c306097cc31e84e958cedb1e4f50b9ecdb 100644
--- a/src/lib/elements/primitives/TextPrimitive.ts
+++ b/src/lib/elements/primitives/TextPrimitive.ts
@@ -87,7 +87,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
*/
protected readonly _radiusAspect: number = 4;
protected readonly _buttonSizeAspect: number = 24;
- protected readonly _buttonTextAspect: number = 40;
+ protected readonly _buttonTextAspect: number = 2;
protected readonly _fillColorDefault: number = 0xFFFFFF;
protected readonly _fillColorSelftest: number = 0xFFC67B;
protected readonly _fillColorSelftestSelected: number = 0x4ae29c;
@@ -230,7 +230,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive> {
// Configurations
const buttonRectangle = new PIXI.Rectangle(0, 0, buttonSize, buttonSize);
- const buttonFontSize = Math.round(this.canvasWidth / this._buttonTextAspect);
+ const buttonFontSize = Math.round(buttonSize / this._buttonTextAspect);
this._colorPicker = new ColorElement(this.loader, this.model.style.fill, undefined, false, buttonRectangle, buttonFontSize);
this._colorPicker.on("color", this._onColor, this);
diff --git a/src/public/index.html b/src/public/index.html
index c908b795147ed4510d951661b81dec786cbdd9e0..4a871dc091be6a47067480550ef39f5a2ac6ac8a 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -354,8 +354,8 @@
</head>
<body>
<!-- <div id="medsurf_canvas_div" style="width: 70vw; height: 70vh;"> -->
- <div id="medsurf_canvas_div" style="width: 70vw; height: 800px;">
- <canvas id="medsurf_canvas" oncontextmenu="return false;" style="width: 100%; height: 100%;"></canvas>
+ <div id="medsurf_canvas_div" style="width: 70vw; height: 70vh;">
+ <canvas id="medsurf_canvas" oncontextmenu="return false;"></canvas>
</div>
<button id="button_default">Default</button>
<button id="button_marker">Marker</button>