diff --git a/src/app/index.ts b/src/app/index.ts index 82c4acf160ff397f743b2c8d930d0f0366311016..1ae89d307a14cf5510d739fe3d2831e54882a35c 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 1c02907c16546528b7e943bbd4f1a154ade2be35..0e5e564dfb03448987d6dfcd918fb1cea18d1515 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 ccca3f710c2c4c47202fd03f9cecca3c56ab4615..70036aaab993f73d60f799b7e82cbbfd1aa5b0da 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 1c521a136e62ea66a53ecaf4ff4d482f29e6b3e0..7f117b6161ac54035986cf88036195741bc710f8 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 b02ce68857946952ef5a93803ec23ca916920631..bc00ca0b22b23de3b76ab14642f43badd91a8d55 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 0b0f5d5ab8790b727892f455b57c66a9501e144c..b3ad95d6cdd07f7a8f860aa5ad759ef0abd7c035 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 2ac756207d3774560de86f204cc30998b79cb2db..77e7204525ba94be62419a0f0bb3c0b2a52473b6 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 8f275dbeab0f756ba4080437bf4242e423455a90..b1200d4c2269f1675b0d2fa3c564c54607f82104 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 8a38ebf4f052c78dfce0eb7d99649b9973b9ee83..0990cb7b06babd1abdcf63d437fb8723b950c477 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 15d77266066765e96e62d6de884642a2b664607c..fce522b8a44d7ddf4fc3fcb4c4ed4f767631fd92 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 5be6c1087341d5ea772a1772fe4274dcaed13076..d4369a09a9a9b73b1cdb8ea4a5c7fcdd35857e21 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); }