From ae8ddb34eadf40b11b2e36cf193dc2645fc4246a Mon Sep 17 00:00:00 2001
From: Andrea Gottsponer <ago@attr.ch>
Date: Tue, 10 Dec 2019 18:02:26 +0100
Subject: [PATCH] - add wegde point to arrow
---
src/app/index.ts | 2 +-
.../interactions/WedgePointElement.ts | 144 ++++++++++++++++++
src/lib/elements/primitives/ArrowPrimitive.ts | 35 ++++-
src/lib/generators/ArrowPrimitiveGenerator.ts | 2 +-
src/lib/interactions/RotateInteraction.ts | 19 +--
5 files changed, 184 insertions(+), 18 deletions(-)
create mode 100644 src/lib/elements/interactions/WedgePointElement.ts
diff --git a/src/app/index.ts b/src/app/index.ts
index 1a2ff597..82c4acf1 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -247,7 +247,7 @@ PIXI.Renderer.registerPlugin('bla', bla);
const point1 = new PositionPoint(600, 400);
image.addChild(point1);
- const arrow = new ArrowPrimitive(new PIXI.Rectangle(0, 0, 20, 20), false, 0xFF0000);
+ const arrow = new ArrowPrimitive(new PIXI.Rectangle(0, 0, 20, 20), undefined, false, 0xFF0000);
point1.addChild(arrow);
// Rectangle
diff --git a/src/lib/elements/interactions/WedgePointElement.ts b/src/lib/elements/interactions/WedgePointElement.ts
new file mode 100644
index 00000000..2ac75620
--- /dev/null
+++ b/src/lib/elements/interactions/WedgePointElement.ts
@@ -0,0 +1,144 @@
+import * as PIXI from "pixi.js-legacy";
+import * as Keyboard from "pixi.js-keyboard";
+import {BaseContainer, ImageObject} from "../../bases/BaseModul";
+import {MoveInteraction} from "../../interactions/MoveInteraction";
+import {ArrowPrimitive} from "../primitives/ArrowPrimitive";
+
+/**
+ * Wedge point element
+ */
+export class WedgePointElement extends BaseContainer {
+ /**
+ * Members
+ */
+ protected _circle: PIXI.Circle;
+
+ /**
+ * Interactions
+ */
+ private _moveInteraction: MoveInteraction;
+
+ /**
+ * Elements
+ */
+ protected _wedgeElement: PIXI.Graphics;
+
+ /**
+ * Design
+ */
+ protected readonly _radius: number = 4;
+ protected readonly _radiusSelected: number = 2;
+ protected readonly _lineWidth: number = 1;
+ protected readonly _lineColor: number = 0x25303D;
+ protected readonly _lineAlpha: number = 1;
+ protected readonly _fillColor: number = 0x25303D;
+ protected readonly _fillAlpha: number = 0.5;
+
+ /**
+ * Constructor
+ */
+ public constructor(x: number, y: number) {
+ super();
+
+ // Setup
+ this.zIndex = 401;
+ this._circle = new PIXI.Circle(0, 0, this._radius);
+
+ // Position
+ this.position.set(x, y);
+
+ // Events
+ this.interactive = true;
+
+ this.moveInteraction = new MoveInteraction(this);
+ this.on("pointerover", this.moveInteraction.onMoveHover, this.moveInteraction);
+ 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("onMove", this._onMove, this);
+
+ // Elements
+ this._wedgeElement = new PIXI.Graphics();
+ this.addChild(this._wedgeElement);
+ }
+
+ //<editor-fold desc="Public functions">
+ public draw(): void {
+ this._wedgeElement.clear();
+ this._wedgeElement.lineStyle(this._lineWidth, this._lineColor, this._lineAlpha);
+ this._wedgeElement.beginFill(this._fillColor, this._fillAlpha);
+ this._wedgeElement.drawCircle(this._circle.x, this._circle.y, this._circle.radius);
+ this._wedgeElement.endFill();
+
+ this._wedgeElement.hitArea = this._circle;
+ }
+
+ public show(): void {
+ /*
+ if (this._caretFlashInterval) {
+ clearInterval(this._caretFlashInterval);
+ this._caretFlashInterval = null;
+ }
+
+ this.draw();
+ this.visible = true;
+
+ // @ts-ignore
+ this._caretFlashInterval = setInterval(this._onCaretFlashInterval.bind(this), 500);
+ */
+ }
+
+ public hide(): void {
+ /*
+ if (this._caretFlashInterval) {
+ clearInterval(this._caretFlashInterval);
+ this._caretFlashInterval = null;
+ }
+
+ this.visible = false;
+ */
+ }
+ //</editor-fold>
+
+ //<editor-fold desc="Private functions">
+ //<editor-fold desc="Move">
+ protected _onMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
+ this.position.x += dX;
+ this.position.y += dY;
+ }
+ //</editor-fold>
+ //</editor-fold>
+
+ //<editor-fold desc="BaseContainer">
+ public getImageScale(): PIXI.IPoint {
+ return (this.parent.parent as ArrowPrimitive).getImageScale();
+ }
+
+ public getRotation(): number {
+ return (this.parent.parent as ArrowPrimitive).getRotation();
+ }
+
+ 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 1f2d9c62..8a38ebf4 100644
--- a/src/lib/elements/primitives/ArrowPrimitive.ts
+++ b/src/lib/elements/primitives/ArrowPrimitive.ts
@@ -21,6 +21,7 @@ import {RectanglePrimitive} from "./RectanglePrimitive";
import {TextPrimitive} from "./TextPrimitive";
import {FillCollection} from "../collections/FillCollection";
import {LegendTextPrimitive} from "./LegendTextPrimitive";
+import {WedgePointElement} from "../interactions/WedgePointElement";
/**
* Arrow primitive
@@ -32,6 +33,7 @@ export class ArrowPrimitive extends BaseContainer {
* Members
*/
protected _rectangle: PIXI.Rectangle;
+ protected _wedgePoint: PIXI.Point;
protected _color: number;
protected _fillColor: number;
@@ -42,12 +44,14 @@ 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 _configurationElement: ConfigurationElement;
protected _scaleElement: ScaleElement;
protected _rotateElement: RotateElement;
@@ -73,16 +77,18 @@ export class ArrowPrimitive extends BaseContainer {
/**
* Constructor
* @param rectangle
+ * @param wedgePoint
* @param isStatic
* @param color
* @param rotateWithLine
*/
- public constructor(rectangle: PIXI.Rectangle, isStatic: boolean = false, color?: number, rotateWithLine?: boolean) {
+ public constructor(rectangle: PIXI.Rectangle, wedgePoint: PIXI.Point | undefined = undefined, isStatic: boolean = false, color?: number, rotateWithLine?: boolean) {
super(isStatic);
// 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;
@@ -136,6 +142,10 @@ 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.on("onMove", this._onWedgeMove, this);
+
this._configurationElement = new ConfigurationElement(this.modeInteraction);
this._scaleElement = new ScaleElement(this.scaleInteraction);
@@ -228,7 +238,7 @@ export class ArrowPrimitive extends BaseContainer {
}
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);
- // TODO use this for Spickel: this._arrowElement.lineTo(this._rectangle.x + this._rectangle.width, this._rectangle.y + this._rectangle.height / 2);
+ 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.endFill();
@@ -321,6 +331,9 @@ export class ArrowPrimitive extends BaseContainer {
}
protected _showInteractions(): void {
+ this._wedgePointElement.draw();
+ this._rotateContainer.addChild(this._wedgePointElement);
+
this._configurationElement.draw();
this._rotateContainer.addChild(this._configurationElement);
@@ -330,10 +343,12 @@ export class ArrowPrimitive extends BaseContainer {
this._rotateElement.draw();
this._rotateContainer.addChild(this._rotateElement);
+ this._rotateContainer.sortChildren();
this.getImage().sortImageObjects();
}
protected _hideInteractions(): void {
+ this._rotateContainer.removeChild(this._wedgePointElement);
this._rotateContainer.removeChild(this._configurationElement);
this._rotateContainer.removeChild(this._scaleElement);
this._rotateContainer.removeChild(this._rotateElement);
@@ -625,6 +640,10 @@ export class ArrowPrimitive extends BaseContainer {
}
}
+ protected _onWedgeMove(event: PIXI.interaction.InteractionEvent, dX: number, dY: number): void {
+ this.draw();
+ }
+
protected _endMove(event: PIXI.interaction.InteractionEvent): void {
this.on("pointerover", this.selectInteraction.onHover, this.selectInteraction);
this.emit("pointerover", event);
@@ -637,6 +656,7 @@ export class ArrowPrimitive extends BaseContainer {
//<editor-fold desc="Scale">
protected _startScale(): void {
+ this._rotateContainer.removeChild(this._wedgePointElement);
this._rotateContainer.removeChild(this._configurationElement);
this._rotateContainer.removeChild(this._rotateElement);
}
@@ -675,16 +695,22 @@ export class ArrowPrimitive extends BaseContainer {
}
protected _endScale(): void {
+ this._wedgePointElement.draw();
+ this._rotateContainer.addChild(this._wedgePointElement);
+
this._configurationElement.draw();
this._rotateContainer.addChild(this._configurationElement);
this._rotateElement.draw();
this._rotateContainer.addChild(this._rotateElement);
+
+ this._rotateContainer.sortChildren();
}
//</editor-fold>
//<editor-fold desc="Rotate">
protected _startRotate(): void {
+ this._rotateContainer.removeChild(this._wedgePointElement);
this._rotateContainer.removeChild(this._configurationElement);
this._rotateContainer.removeChild(this._scaleElement);
@@ -697,6 +723,9 @@ export class ArrowPrimitive extends BaseContainer {
}
protected _endRotate(): void {
+ this._wedgePointElement.draw();
+ this._rotateContainer.addChild(this._wedgePointElement);
+
this._configurationElement.draw();
this._rotateContainer.addChild(this._configurationElement);
@@ -704,6 +733,8 @@ export class ArrowPrimitive extends BaseContainer {
this._rotateContainer.addChild(this._scaleElement);
this.removeChild(this._rotateMeasureElement);
+
+ this._rotateContainer.sortChildren();
}
protected _lineRotate(r: number): void {
diff --git a/src/lib/generators/ArrowPrimitiveGenerator.ts b/src/lib/generators/ArrowPrimitiveGenerator.ts
index 8bed8a57..e14ba6c3 100644
--- a/src/lib/generators/ArrowPrimitiveGenerator.ts
+++ b/src/lib/generators/ArrowPrimitiveGenerator.ts
@@ -39,7 +39,7 @@ export class ArrowPrimitiveGenerator extends BaseDrawGenerator {
}
this.targetPositionPoint.modeInteraction.changeMode("draw");
- this._arrowElement = new ArrowPrimitive(new PIXI.Rectangle(0, 0, 20, 20), false, this._color, rotateWithLine);
+ this._arrowElement = new ArrowPrimitive(new PIXI.Rectangle(0, 0, 20, 20), undefined, false, this._color, rotateWithLine);
this._arrowElement.modeInteraction.defaultMode = "author";
this.targetPositionPoint.addChild(this._arrowElement);
this._arrowElement.modeInteraction.changeMode("draw");
diff --git a/src/lib/interactions/RotateInteraction.ts b/src/lib/interactions/RotateInteraction.ts
index 983cde28..5be6c108 100644
--- a/src/lib/interactions/RotateInteraction.ts
+++ b/src/lib/interactions/RotateInteraction.ts
@@ -125,25 +125,16 @@ export class RotateInteraction extends BaseInteraction {
const points = line._lineElement.geometry.points;
// @ts-ignore
- if (line._start === parent) {
- // @ts-ignore
- lineStartX += line._start.x; // points[0]
- // @ts-ignore
- lineStartY += line._start.y; // points[1]
- // @ts-ignore
+ if (line.graphicLine.start === parent) {
+ lineStartX += line.graphicLine.start.x; // points[0]
+ lineStartY += line.graphicLine.start.y; // points[1]
lineEndX += points[2];
- // @ts-ignore
lineEndY += points[3];
} else {
- // @ts-ignore
const length = points.length;
- // @ts-ignore
- lineStartX += line._end.x; // points[length - 2]
- // @ts-ignore
- lineStartY += line._end.y; // points[length - 1]
- // @ts-ignore
+ lineStartX += line.graphicLine.end.x; // points[length - 2]
+ lineStartY += line.graphicLine.end.y; // points[length - 1]
lineEndX += points[length - 4];
- // @ts-ignore
lineEndY += points[length - 3];
}
}
--
GitLab