From 0502d06d70ab69a3283080219ec9a2ffb6947442 Mon Sep 17 00:00:00 2001
From: Andrea Gottsponer <ago@attr.ch>
Date: Wed, 11 Dec 2019 10:45:20 +0100
Subject: [PATCH] - update for legend selftest
---
src/app/index.ts | 2 +-
src/lib/bases/BaseContainer.ts | 8 +++
src/lib/bases/BaseSprite.ts | 8 +++
.../elements/collections/LegendCollection.ts | 61 +++++++++++++++++--
src/lib/elements/connections/Line.ts | 17 +++---
.../interactions/ConfigurationElement.ts | 1 +
.../{WedgePointElement.ts => PointElement.ts} | 2 +-
.../elements/positionings/PositionPoint.ts | 4 +-
src/lib/elements/primitives/ArrowPrimitive.ts | 10 +--
.../primitives/LegendTextPrimitive.ts | 11 ++++
src/lib/interactions/RotateInteraction.ts | 5 +-
11 files changed, 104 insertions(+), 25 deletions(-)
rename src/lib/elements/interactions/{WedgePointElement.ts => PointElement.ts} (98%)
diff --git a/src/app/index.ts b/src/app/index.ts
index 82c4acf1..1ae89d30 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -379,7 +379,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
fill1.name = "fill1";
image.addChild(fill1);
- const legend1 = new LegendCollection(new PIXI.Rectangle(200, 100, 300, 100), [[new LegendItem("row1\nrow1"), new LegendItem("row1"), new LegendItem("row1")], [new LegendItem("row2"), new LegendItem("row2")], [new LegendItem("row3"), new LegendItem("row3")]], false);
+ const legend1 = new LegendCollection(new PIXI.Rectangle(200, 100, 300, 100), [[new LegendItem("row1\nrow1"), new LegendItem("row1"), new LegendItem("row1")], [new LegendItem("row2"), new LegendItem("row2")], [new LegendItem("row3"), new LegendItem("row3")]], undefined, false);
legend1.name = "legend1";
image.addChild(legend1);
diff --git a/src/lib/bases/BaseContainer.ts b/src/lib/bases/BaseContainer.ts
index 1c02907c..0e5e564d 100644
--- a/src/lib/bases/BaseContainer.ts
+++ b/src/lib/bases/BaseContainer.ts
@@ -119,6 +119,14 @@ export abstract class BaseContainer extends PIXI.Container {
public abstract showItem(): void;
public abstract hideItem(): void;
+
+ public showSelftest(): void {
+ this.showItem();
+ }
+
+ public hideSelftest(): void {
+ this.hideItem();
+ }
//</editor-fold>
//<editor-fold desc="Getter and Setter">
diff --git a/src/lib/bases/BaseSprite.ts b/src/lib/bases/BaseSprite.ts
index ccca3f71..70036aaa 100644
--- a/src/lib/bases/BaseSprite.ts
+++ b/src/lib/bases/BaseSprite.ts
@@ -98,6 +98,14 @@ export abstract class BaseSprite extends PIXI.Sprite {
public abstract showItem(): void;
public abstract hideItem(): void;
+
+ public showSelftest(): void {
+ this.showItem();
+ }
+
+ public hideSelftest(): void {
+ this.hideItem();
+ }
//</editor-fold>
//<editor-fold desc="Getter and Setter">
diff --git a/src/lib/elements/collections/LegendCollection.ts b/src/lib/elements/collections/LegendCollection.ts
index 1c521a13..7f117b61 100644
--- a/src/lib/elements/collections/LegendCollection.ts
+++ b/src/lib/elements/collections/LegendCollection.ts
@@ -8,8 +8,7 @@ import {ModeInteraction} from "../../interactions/ModeInteraction";
import {LegendTextPrimitive} from "../primitives/LegendTextPrimitive";
import DisplayObject = PIXI.DisplayObject;
import {SelectInteraction} from "../../interactions/SelectInteraction";
-import {FillCollection} from "./FillCollection";
-import {MOVE_HITTEST_EXTENSION, MoveInteraction} from "../../interactions/MoveInteraction";
+import {MoveInteraction} from "../../interactions/MoveInteraction";
import {ScaleInteraction} from "../../interactions/ScaleInteraction";
import {RotateInteraction} from "../../interactions/RotateInteraction";
import {RotateElement} from "../interactions/RotateElement";
@@ -17,6 +16,7 @@ import {RotateMeasureElement} from "../interactions/RotateMeasureElement";
import {ScaleElement} from "../interactions/ScaleElement";
import {MedsurfSprite} from "../images/MedsurfSprite";
import {LegendColumnCollection} from "./LegendColumnCollection";
+import {PointElement} from "../interactions/PointElement";
export class LegendItem {
textElement: LegendTextPrimitive;
@@ -49,6 +49,7 @@ export class LegendCollection extends BaseContainer {
* Elements
*/
protected _hitAreaFixElement: PIXI.Graphics;
+ private _selftestPointElement: PointElement;
protected _rotateContainer: PIXI.Container;
protected _configurationElement: ConfigurationElement;
protected _scaleElement: ScaleElement;
@@ -71,9 +72,10 @@ export class LegendCollection extends BaseContainer {
* Constructor
* @param rectangle
* @param table
+ * @param selftestPoint
* @param isStatic
*/
- public constructor(rectangle: PIXI.Rectangle, table: LegendItem[][], isStatic: boolean = false) {
+ public constructor(rectangle: PIXI.Rectangle, table: LegendItem[][], selftestPoint: PIXI.Point | undefined = undefined, isStatic: boolean = false) {
super(isStatic);
// Setup
@@ -124,12 +126,14 @@ export class LegendCollection extends BaseContainer {
// Elements
this._hitAreaFixElement = new PIXI.Graphics();
- // TODO this._hitAreaFixElement.visible = false;
this.addChild(this._hitAreaFixElement);
this._rotateContainer = new PIXI.Container();
this.addChild(this._rotateContainer);
+ this._selftestPointElement = selftestPoint ? new PointElement(selftestPoint.x, selftestPoint.y) : new PointElement(this._rectangle.x, this._rectangle.y);
+ this._selftestPointElement.on("onMove", this._onSelftestMove, this);
+
this._configurationElement = new ConfigurationElement(this.modeInteraction);
this._scaleElement = new ScaleElement(this.scaleInteraction);
@@ -433,6 +437,22 @@ export class LegendCollection extends BaseContainer {
this.draw();
}
}
+
+ public setSelftestPosition(name: string): void {
+ const numberElementName = /^([0-9]+)_[0-9]+/.exec(name);
+ if (numberElementName && numberElementName.length === 2) {
+ const container = this._rotateContainer.getChildByName(numberElementName[1] + "_container") as LegendColumnCollection;
+
+ // @ts-ignore
+ const textElement = container._rotateContainer.getChildByName(name) as LegendTextPrimitive;
+ // @ts-ignore
+ const numberElement = container._rotateContainer.getChildByName(numberElementName[0] + "_num") as PIXI.Text;
+
+ const selftestPointPosition = this._selftestPointElement.position;
+ numberElement.position.set(selftestPointPosition.x, selftestPointPosition.y);
+ textElement.position.set(selftestPointPosition.x + this._enumerationPadding, selftestPointPosition.y);
+ }
+ }
//</editor-fold>
//<editor-fold desc="Private functions">
@@ -456,6 +476,9 @@ export class LegendCollection extends BaseContainer {
}
protected _showInteractions(): void {
+ this._selftestPointElement.draw();
+ this._rotateContainer.addChild(this._selftestPointElement);
+
this._configurationElement.draw();
this._rotateContainer.addChild(this._configurationElement);
@@ -465,10 +488,12 @@ export class LegendCollection extends BaseContainer {
this._rotateElement.draw();
this._rotateContainer.addChild(this._rotateElement);
+ this._rotateContainer.sortChildren();
this.getImage().sortImageObjects();
}
protected _hideInteractions(): void {
+ this._rotateContainer.removeChild(this._selftestPointElement);
this._rotateContainer.removeChild(this._configurationElement);
this._rotateContainer.removeChild(this._scaleElement);
this._rotateContainer.removeChild(this._rotateElement);
@@ -702,6 +727,10 @@ export class LegendCollection extends BaseContainer {
this.position.y += dY;
}
+ protected _onSelftestMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
+
+ }
+
protected _endMove(event: PIXI.interaction.InteractionEvent): void {
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.emit("pointerover", event);
@@ -710,6 +739,7 @@ export class LegendCollection extends BaseContainer {
//<editor-fold desc="Scale">
protected _startScale(): void {
+ this._rotateContainer.removeChild(this._selftestPointElement);
this._rotateContainer.removeChild(this._configurationElement);
this._rotateContainer.removeChild(this._rotateElement);
}
@@ -748,6 +778,9 @@ export class LegendCollection extends BaseContainer {
}
protected _endScale(): void {
+ this._selftestPointElement.draw();
+ this._rotateContainer.addChild(this._selftestPointElement);
+
this._configurationElement.draw();
this._rotateContainer.addChild(this._configurationElement);
@@ -758,6 +791,7 @@ export class LegendCollection extends BaseContainer {
//<editor-fold desc="Rotate">
protected _startRotate(): void {
+ this._rotateContainer.removeChild(this._selftestPointElement);
this._rotateContainer.removeChild(this._configurationElement);
this._rotateContainer.removeChild(this._scaleElement);
@@ -770,6 +804,9 @@ export class LegendCollection extends BaseContainer {
}
protected _endRotate(): void {
+ this._selftestPointElement.draw();
+ this._rotateContainer.addChild(this._selftestPointElement);
+
this._configurationElement.draw();
this._rotateContainer.addChild(this._configurationElement);
@@ -915,6 +952,14 @@ export class LegendCollection extends BaseContainer {
public hideItem(): void {
this.renderable = false;
}
+
+ public showSelftest(): void {
+ this.showItem();
+ }
+
+ public hideSelftest(): void {
+ this.hideItem();
+ }
//</editor-fold>
//<editor-fold desc="Getter and Setter">
@@ -949,5 +994,13 @@ export class LegendCollection extends BaseContainer {
public set rotateInteraction(value: RotateInteraction) {
this._rotateInteraction = value;
}
+
+ public get selftestPointElement(): PointElement {
+ return this._selftestPointElement;
+ }
+
+ public set selftestPointElement(value: PointElement) {
+ this._selftestPointElement = value;
+ }
//</editor-fold>
}
\ No newline at end of file
diff --git a/src/lib/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts
index b02ce688..bc00ca0b 100644
--- a/src/lib/elements/connections/Line.ts
+++ b/src/lib/elements/connections/Line.ts
@@ -504,15 +504,14 @@ export class Line extends BaseContainer {
this._lineCornerElement.endFill();
// Ensure geometry points are set
- // TODO remove setTimeout -> emit onDraw -> and put these stuff in there
- // setTimeout(() => {
- // @ts-ignore
- this._lineElement.hitArea = new PIXI.Polygon(this._lineElement.geometry.points);
-
- // Emit event so we can handle primitive rotation according of line
- // this._start.emit("onLineMove", new PIXI.interaction.InteractionEvent());
- // this._end.emit("onLineMove", new PIXI.interaction.InteractionEvent());
- // }, 10);
+ // @ts-ignore
+ this._lineElement.hitArea = new PIXI.Polygon(this._lineElement.geometry.points);
+
+ // Emit event so we can handle primitive rotation according of line
+ setTimeout(() => {
+ this.graphicLine.start.emit("onLineMove", new PIXI.interaction.InteractionEvent());
+ this.graphicLine.end.emit("onLineMove", new PIXI.interaction.InteractionEvent());
+ });
}
public cleanUp(): void {
diff --git a/src/lib/elements/interactions/ConfigurationElement.ts b/src/lib/elements/interactions/ConfigurationElement.ts
index 0b0f5d5a..b3ad95d6 100644
--- a/src/lib/elements/interactions/ConfigurationElement.ts
+++ b/src/lib/elements/interactions/ConfigurationElement.ts
@@ -62,6 +62,7 @@ export class ConfigurationElement extends BaseContainer {
const rectangle = (this._targetInteraction.targetElement as ImageObject).getRectangle();
+ // TODO change this according to rotation
this.position.set(rectangle.x + rectangle.width / 2 + this._configurationDX, rectangle.y - this._configurationDY);
this.children.filter((element) => element instanceof ColorElement).forEach((element: ColorElement) => {
diff --git a/src/lib/elements/interactions/WedgePointElement.ts b/src/lib/elements/interactions/PointElement.ts
similarity index 98%
rename from src/lib/elements/interactions/WedgePointElement.ts
rename to src/lib/elements/interactions/PointElement.ts
index 2ac75620..77e72045 100644
--- a/src/lib/elements/interactions/WedgePointElement.ts
+++ b/src/lib/elements/interactions/PointElement.ts
@@ -7,7 +7,7 @@ import {ArrowPrimitive} from "../primitives/ArrowPrimitive";
/**
* Wedge point element
*/
-export class WedgePointElement extends BaseContainer {
+export class PointElement extends BaseContainer {
/**
* Members
*/
diff --git a/src/lib/elements/positionings/PositionPoint.ts b/src/lib/elements/positionings/PositionPoint.ts
index 8f275dbe..b1200d4c 100644
--- a/src/lib/elements/positionings/PositionPoint.ts
+++ b/src/lib/elements/positionings/PositionPoint.ts
@@ -584,7 +584,7 @@ export class PositionPoint extends BaseContainer {
protected _onSelftest(): void {
this.getImage().itemSelftest(new PIXI.interaction.InteractionEvent(), this);
this.selftestItems.forEach((item: ImageObject) => {
- item.showItem();
+ item.showSelftest();
});
}
@@ -597,7 +597,7 @@ export class PositionPoint extends BaseContainer {
this.draw();
this.selftestItems.forEach((item: ImageObject) => {
- item.hideItem();
+ item.hideSelftest();
});
}
diff --git a/src/lib/elements/primitives/ArrowPrimitive.ts b/src/lib/elements/primitives/ArrowPrimitive.ts
index 8a38ebf4..0990cb7b 100644
--- a/src/lib/elements/primitives/ArrowPrimitive.ts
+++ b/src/lib/elements/primitives/ArrowPrimitive.ts
@@ -21,7 +21,7 @@ import {RectanglePrimitive} from "./RectanglePrimitive";
import {TextPrimitive} from "./TextPrimitive";
import {FillCollection} from "../collections/FillCollection";
import {LegendTextPrimitive} from "./LegendTextPrimitive";
-import {WedgePointElement} from "../interactions/WedgePointElement";
+import {PointElement} from "../interactions/PointElement";
/**
* Arrow primitive
@@ -33,7 +33,6 @@ export class ArrowPrimitive extends BaseContainer {
* Members
*/
protected _rectangle: PIXI.Rectangle;
- protected _wedgePoint: PIXI.Point;
protected _color: number;
protected _fillColor: number;
@@ -44,14 +43,13 @@ export class ArrowPrimitive extends BaseContainer {
private _moveInteraction: MoveInteraction;
private _scaleInteraction: ScaleInteraction;
private _rotateInteraction: RotateInteraction;
- // private _wedgeMoveInteraction: MoveInteraction;
/**
* Elements
*/
protected _rotateContainer: PIXI.Container;
protected _arrowElement: PIXI.Graphics;
- protected _wedgePointElement: WedgePointElement;
+ protected _wedgePointElement: PointElement;
protected _configurationElement: ConfigurationElement;
protected _scaleElement: ScaleElement;
protected _rotateElement: RotateElement;
@@ -88,7 +86,6 @@ export class ArrowPrimitive extends BaseContainer {
// Setup
this.zIndex = 300; // TODO how to implement moveToFront etc...
this._rectangle = rectangle;
- this._wedgePoint = wedgePoint || new PIXI.Point(this._rectangle.x + this._rectangle.width, this._rectangle.y + this._rectangle.height / 2);
this._color = color || 0xFFFFFF;
this._fillColor = this._color;
@@ -142,8 +139,7 @@ export class ArrowPrimitive extends BaseContainer {
this._arrowElement = new PIXI.Graphics();
this._rotateContainer.addChild(this._arrowElement);
- this._wedgePointElement = new WedgePointElement(this._wedgePoint.x, this._wedgePoint.y);
- // this.wedgeMoveInteraction = new MoveInteraction(this._wedgePointElement);
+ this._wedgePointElement = wedgePoint ? new PointElement(wedgePoint.x, 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);
diff --git a/src/lib/elements/primitives/LegendTextPrimitive.ts b/src/lib/elements/primitives/LegendTextPrimitive.ts
index 15d77266..fce522b8 100644
--- a/src/lib/elements/primitives/LegendTextPrimitive.ts
+++ b/src/lib/elements/primitives/LegendTextPrimitive.ts
@@ -21,6 +21,7 @@ import {TextPrimitive} from "./TextPrimitive";
import {MedsurfSprite} from "../images/MedsurfSprite";
import {LegendColumnCollection} from "../collections/LegendColumnCollection";
import {FillCollection} from "../collections/FillCollection";
+import {LegendCollection} from "../collections/LegendCollection";
/**
@@ -757,6 +758,16 @@ export class LegendTextPrimitive extends BaseContainer {
}
});
}
+
+ public showSelftest(): void {
+ this.showItem();
+ (this.parent.parent.parent.parent as LegendCollection).setSelftestPosition(this.name);
+ }
+
+ public hideSelftest(): void {
+ this.hideItem();
+ (this.parent.parent.parent.parent as LegendCollection).draw();
+ }
//</editor-fold>
//<editor-fold desc="Getter and Setter">
diff --git a/src/lib/interactions/RotateInteraction.ts b/src/lib/interactions/RotateInteraction.ts
index 5be6c108..d4369a09 100644
--- a/src/lib/interactions/RotateInteraction.ts
+++ b/src/lib/interactions/RotateInteraction.ts
@@ -123,6 +123,9 @@ export class RotateInteraction extends BaseInteraction {
for (let line of lines) {
// @ts-ignore
const points = line._lineElement.geometry.points;
+ if (points.length === 0) {
+ return;
+ }
// @ts-ignore
if (line.graphicLine.start === parent) {
@@ -144,7 +147,7 @@ export class RotateInteraction extends BaseInteraction {
lineEndX /= lines.length;
lineEndY /= lines.length;
- const degree = Math.atan2(lineEndY - lineStartY, lineEndX - lineStartX);
+ const degree = Math.atan2(lineEndY - lineStartY, lineEndX - lineStartX) || 0;
this.targetElement.emit("lineRotate", degree);
}
--
GitLab