plotboilerplate 1.23.3 → 1.25.0

package/src/ts/utils/helpers/CircleSectorHelper.ts

@@ -4,7 +4,6 @@
  * @version  1.0.0
  */
 
-
 /**
  * Easily handle circle sectors (mouse or touch) with this circle sector helper.
  *
@@ -15,138 +14,131 @@
  * @date     2021-01-22
  * @modified 2021-01-26 Moving control points with center points
  * @modified 2024-03-10 Adding the `destory` method for properly removing installed listeners.
- * @version  1.1.0
+ * @modified 2025-04-02 Adding `CircleSectorHelper.drawHandleLines()`,
+ * @version  1.2.0
  **/
 
 import { CircleSector } from "../../CircleSector";
 import { PlotBoilerplate } from "../../PlotBoilerplate";
 import { VertEvent, VertListener } from "../../VertexListeners";
 import { Vertex } from "../../Vertex";
-
+import { DrawLib, IShapeInteractionHelper } from "../../interfaces";
 
 /**
  * @classdesc A helper for handling circles with an additional radius-control-point.
  */
-export class CircleSectorHelper {
-
-	private circleSector: CircleSector;
-	private controlPointStart: Vertex;
-	private controlPointEnd: Vertex;
-
-	private centerListener: VertListener;
-	private radiusStartListener : VertListener;
-	private radiusEndListener : VertListener;
-
-    /**
-     * The constructor.
-     *
-     * @constructor
-     * @name CircleSectorHelper
-     * @param {CircleSector} circleSector - The circle sector to handle.
-     * @param {Vertex} controlPointStart - A point to define the radius and start angle (distance and angle from center).
-     * @param {Vertex} controlPointEnd - A point to define the radius and end angle (distance and angle from center).
-     * @param {PlotBoilerplate} pb - The PlotBoilerplate which contains the circle sector and both points.
-     **/
-    constructor( circleSector:CircleSector,
-		 controlPointStart:Vertex,
-		 controlPointEnd:Vertex,
-		 pb:PlotBoilerplate
-	       ) {
-
-			this.circleSector = circleSector;
-			this.controlPointStart = controlPointStart;
-			this.controlPointEnd = controlPointEnd;
-
-			this.circleSector.circle.center.listeners.addDragListener( this.centerListener = this._handleDragCenter() );
-			this.controlPointStart.listeners.addDragListener( this.radiusStartListener = this._handleDragStartControlPoint() );
-			this.controlPointEnd.listeners.addDragListener( this.radiusEndListener = this._handleDragEndControlPoint() );
-	// circleSector.circle.center.listeners.addDragListener( (e:VertEvent) => {
-	//     controlPointStart.add( e.params.dragAmount );
-	//     controlPointEnd.add( e.params.dragAmount );
-	// } );
-	
-	// controlPointStart.listeners.addDragListener( (e:VertEvent) => {
-	//     circleSector.circle.radius = circleSector.circle.center.distance(controlPointStart);
-	//     controlPointEnd.set( circleSector.circle.vertAt(circleSector.endAngle) );
-	//     circleSector.startAngle = circleSector.circle.center.angle( controlPointStart );
-	// } );
-
-	// controlPointEnd.listeners.addDragListener( (e:VertEvent) => {
-	//     circleSector.circle.radius = circleSector.circle.center.distance(controlPointEnd);
-	//     controlPointStart.set( circleSector.circle.vertAt(circleSector.startAngle) );
-	//     circleSector.endAngle = circleSector.circle.center.angle( controlPointEnd );
-	// } );
-	
-    }
-
-	/**
-	 * Creates a new drag handler for the circle sector's center point.
-	 *
-	 * @private
-	 * @method handleDragCenter
-	 * @instance
-	 * @memberof CircleSectorHelper
-	 * @returns A new event handler.
-	 */
-	private _handleDragCenter() : VertListener {
-		const _self = this;
-		return (e:VertEvent) => {
-			_self.controlPointStart.add( e.params.dragAmount );
-			_self.controlPointEnd.add( e.params.dragAmount );
-		} ;
-	}
-	
-	/**
-	 * Creates a new drag handler for the circle sector's start control point.
-	 *
-	 * @private
-	 * @method _handleDragStartControlPoint
-	 * @instance
-	 * @memberof CircleSectorHelper
-	 * @returns A new event handler.
-	 */
-	private _handleDragStartControlPoint() : VertListener{
-		const _self = this;
-		return (e:VertEvent) => {
-			_self.circleSector.circle.radius = _self.circleSector.circle.center.distance(_self.controlPointStart);
-			_self.controlPointEnd.set( _self.circleSector.circle.vertAt(_self.circleSector.endAngle) );
-			_self.circleSector.startAngle = _self.circleSector.circle.center.angle( _self.controlPointStart );
-		} 
-	};
-
-	/**
-	 * Creates a new drag handler for the circle sector's end control point.
-	 *
-	 * @private
-	 * @method _handleDragEndControlPoint
-	 * @instance
-	 * @memberof CircleSectorHelper
-	 * @returns A new event handler.
-	 */
-	private _handleDragEndControlPoint() : VertListener {
-		const _self = this;
-		return (e:VertEvent) => {
-			_self.circleSector.circle.radius = _self.circleSector.circle.center.distance(_self.controlPointEnd);
-	    	_self.controlPointStart.set( _self.circleSector.circle.vertAt(_self.circleSector.startAngle) );
-	    	_self.circleSector.endAngle = _self.circleSector.circle.center.angle( _self.controlPointEnd );
-		} 
-	};
-
-  	/**
-	 * Destroy this circle helper.
-	 * The listeners will be removed from the circle sector's points.
-	 *
-	 * @method destroy
-	 * @instance
-	 * @memberof CircleSectorHelper
-	 */
-	public destroy() : void {
-		this.circleSector.circle.center.listeners.removeDragListener( this.centerListener );
-		this.controlPointStart.listeners.removeDragListener( this.radiusStartListener );
-		this.controlPointEnd.listeners.removeDragListener( this.radiusEndListener );
-	}
-
-};
-
-
-
+export class CircleSectorHelper implements IShapeInteractionHelper {
+  private circleSector: CircleSector;
+  private controlPointStart: Vertex;
+  private controlPointEnd: Vertex;
+
+  private centerListener: VertListener;
+  private radiusStartListener: VertListener;
+  private radiusEndListener: VertListener;
+
+  /**
+   * The constructor.
+   *
+   * @constructor
+   * @name CircleSectorHelper
+   * @param {CircleSector} circleSector - The circle sector to handle.
+   * @param {Vertex} controlPointStart - A point to define the radius and start angle (distance and angle from center).
+   * @param {Vertex} controlPointEnd - A point to define the radius and end angle (distance and angle from center).
+   * @param {PlotBoilerplate} pb - The PlotBoilerplate which contains the circle sector and both points.
+   **/
+  constructor(circleSector: CircleSector, controlPointStart: Vertex, controlPointEnd: Vertex, pb: PlotBoilerplate) {
+    this.circleSector = circleSector;
+    this.controlPointStart = controlPointStart;
+    this.controlPointEnd = controlPointEnd;
+
+    this.circleSector.circle.center.listeners.addDragListener((this.centerListener = this._handleDragCenter()));
+    this.controlPointStart.listeners.addDragListener((this.radiusStartListener = this._handleDragStartControlPoint()));
+    this.controlPointEnd.listeners.addDragListener((this.radiusEndListener = this._handleDragEndControlPoint()));
+  }
+
+  /**
+   * Creates a new drag handler for the circle sector's center point.
+   *
+   * @private
+   * @method handleDragCenter
+   * @instance
+   * @memberof CircleSectorHelper
+   * @returns A new event handler.
+   */
+  private _handleDragCenter(): VertListener {
+    const _self = this;
+    return (e: VertEvent) => {
+      _self.controlPointStart.add(e.params.dragAmount);
+      _self.controlPointEnd.add(e.params.dragAmount);
+    };
+  }
+
+  /**
+   * Creates a new drag handler for the circle sector's start control point.
+   *
+   * @private
+   * @method _handleDragStartControlPoint
+   * @instance
+   * @memberof CircleSectorHelper
+   * @returns A new event handler.
+   */
+  private _handleDragStartControlPoint(): VertListener {
+    const _self = this;
+    return (e: VertEvent) => {
+      _self.circleSector.circle.radius = _self.circleSector.circle.center.distance(_self.controlPointStart);
+      _self.controlPointEnd.set(_self.circleSector.circle.vertAt(_self.circleSector.endAngle));
+      _self.circleSector.startAngle = _self.circleSector.circle.center.angle(_self.controlPointStart);
+    };
+  }
+
+  /**
+   * Creates a new drag handler for the circle sector's end control point.
+   *
+   * @private
+   * @method _handleDragEndControlPoint
+   * @instance
+   * @memberof CircleSectorHelper
+   * @returns A new event handler.
+   */
+  private _handleDragEndControlPoint(): VertListener {
+    const _self = this;
+    return (e: VertEvent) => {
+      _self.circleSector.circle.radius = _self.circleSector.circle.center.distance(_self.controlPointEnd);
+      _self.controlPointStart.set(_self.circleSector.circle.vertAt(_self.circleSector.startAngle));
+      _self.circleSector.endAngle = _self.circleSector.circle.center.angle(_self.controlPointEnd);
+    };
+  }
+
+  //--- BEGIN --- Implement IShapeInteractionHelper ---
+  /**
+   * Draw grey handle lines.
+   *
+   * @param {DrawLib<any>} draw - The draw library instance to use.
+   * @param {DrawLib<any>} fill - The fill library instance to use.
+   */
+  public drawHandleLines(draw: DrawLib<any>, fill: DrawLib<any>) {
+    draw.line(this.circleSector.circle.center, this.controlPointStart, "rgba(64,192,128,0.333)", 1.0, {
+      dashOffset: 0.0,
+      dashArray: [4, 2]
+    });
+    draw.line(this.circleSector.circle.center, this.controlPointEnd, "rgba(64,192,128,0.333)", 1.0, {
+      dashOffset: 0.0,
+      dashArray: [4, 2]
+    });
+  }
+
+  /**
+   * Destroy this circle helper.
+   * The listeners will be removed from the circle sector's points.
+   *
+   * @method destroy
+   * @instance
+   * @memberof CircleSectorHelper
+   */
+  public destroy(): void {
+    this.circleSector.circle.center.listeners.removeDragListener(this.centerListener);
+    this.controlPointStart.listeners.removeDragListener(this.radiusStartListener);
+    this.controlPointEnd.listeners.removeDragListener(this.radiusEndListener);
+  }
+  //--- END --- Implement IShapeInteractionHelper ---
+}

package/src/ts/utils/helpers/TriangleHelper.ts

@@ -0,0 +1,102 @@
+/**
+ * Easily handle triangles with this triangle interaction helper: always keep your
+ * triangles equilateral.
+ *
+ * @author   Ikaros Kappler
+ * @date     2025-05-05
+ * @version  1.0.0
+ **/
+
+import { VertEvent, VertListener } from "../../VertexListeners";
+import { Vertex } from "../../Vertex";
+import { IShapeInteractionHelper } from "../../interfaces/core";
+import { DrawLib } from "../../interfaces/DrawLib";
+import { Triangle } from "../../Triangle";
+import { Vector } from "../../Vector";
+
+/**
+ * @classdesc A helper for handling circles with an additional radius-control-point.
+ */
+export class TriangleHelper implements IShapeInteractionHelper {
+  triangle: Triangle;
+  radiusPoint: Vertex;
+
+  private handlerA: VertListener;
+  private handlerB: VertListener;
+  private handlerC: VertListener;
+
+  /**
+   * The constructor.
+   *
+   * @constructor
+   * @name TriangleHelper
+   * @param {Triangle} triangle - The triangle to handle.
+   * @param {Vertex} radiusPoint - A point to define the radius (distance from center).
+   * @param {PlotBoilerplate} pb - The PlotBoilerplate which contains the circle and point.
+   **/
+  constructor(triangle: Triangle, setInitiallyEquilateral?: boolean) {
+    this.triangle = triangle;
+
+    triangle.a.listeners.addDragListener(
+      (this.handlerA = this._handleTrianglePoint(this.triangle.a, this.triangle.b, this.triangle.c))
+    );
+    triangle.b.listeners.addDragListener(
+      (this.handlerB = this._handleTrianglePoint(this.triangle.b, this.triangle.c, this.triangle.a))
+    );
+    triangle.c.listeners.addDragListener(
+      (this.handlerC = this._handleTrianglePoint(this.triangle.c, this.triangle.a, this.triangle.b))
+    );
+
+    // Trigger to set equilateral
+    if (setInitiallyEquilateral) {
+      this.handlerC(null as any as VertEvent); // We know by construction that _here_ the param is optional!
+    }
+  }
+
+  //--- BEGIN --- Implement ISHapeInteractionHelper ---
+  /**
+   * Let this shape helper draw it's handle lines. It's up to the helper what they look like.
+   * @param {DrawLib<any>} draw - The draw library to use.
+   * @param {DrawLib<any>} fill - The fill library to use.
+   */
+  drawHandleLines(_draw: DrawLib<any>, _fill: DrawLib<any>): void {
+    // NOOP
+  }
+
+  /**
+   * Destroy this circle helper.
+   * The listeners will be removed from the circle points.
+   *
+   * @method destroy
+   * @instance
+   * @memberof TriangleHelper
+   */
+  destroy() {
+    this.triangle.a.listeners.removeDragListener(this.handlerA);
+    this.triangle.b.listeners.removeDragListener(this.handlerB);
+    this.triangle.c.listeners.removeDragListener(this.handlerC);
+  }
+  //--- END --- Implement ISHapeInteractionHelper ---
+
+  /**
+   * Creates a new drag handler for the circle's radius control point.
+   *
+   * @private
+   * @method _handleDragCenter
+   * @instance
+   * @memberof TriangleHelper
+   * @returns A new event handler.
+   */
+  private _handleTrianglePoint(vertex1: Vertex, vertex2: Vertex, vertex3: Vertex): VertListener {
+    const _self = this;
+    return (_evt: VertEvent) => {
+      //   _self.circle.radius = _self.circle.center.distance(_self.radiusPoint);
+      // Calculate new side length: set equialateral
+      const vec = new Vector(vertex1, vertex2);
+      const mid = vec.vertAt(0.5);
+      const perp = vec.perp().add(mid).sub(vec.a);
+      perp.setLength((vec.length() * Math.sqrt(3)) / 2); // The height of a equilateral triangle
+      vertex3.set(perp.b);
+    };
+  }
+}

package/src/ts/utils/helpers/VEllipseHelper.ts

@@ -0,0 +1,115 @@
+/**
+ * A helper for VEllipses.
+ *
+ * @author   Ikaros Kappler
+ * @date     2025-03-31
+ * @modified 2025-04-02 Adding `VEllipseHelper.drawHandleLines()`.
+ * @modified 2025-04-09 Adding `VEllipseHelper.destroy()`.
+ * @modified 2025-05-05 Fixed a typo in the `VEllipseHelper.destroy` method (was named `detroy`).
+ * @modified 2025-05-05 `VEllipseHelper` is now implementing `IShapeInteractionHelper`.
+ * @version  1.0.1
+ */
+
+import { Line } from "../../Line";
+import { VEllipse } from "../../VEllipse";
+import { Vertex } from "../../Vertex";
+import { VertEvent, VertListener } from "../../VertexListeners";
+import { DrawLib, IShapeInteractionHelper } from "../../interfaces";
+
+export class VEllipseHelper implements IShapeInteractionHelper {
+  private readonly ellipse: VEllipse;
+  private readonly rotationControlPoint: Vertex;
+
+  private _rotationControlLine: Line;
+
+  private _centerPointHandler: VertListener;
+  private _rotationPointHandler: VertListener;
+
+  constructor(ellipse: VEllipse, rotationControlPoint: Vertex) {
+    this.ellipse = ellipse;
+    this.rotationControlPoint = rotationControlPoint;
+
+    // const rotationControlLine: Line = new Line(ellipse.center, rotationControlPoint);
+    this._rotationControlLine = new Line(ellipse.center, rotationControlPoint);
+
+    // +---------------------------------------------------------------------
+    // | Listen for the center to be moved.
+    // +-------------------------------------------
+    // ellipse.center.listeners.addDragListener((event: VertEvent) => {
+    //   rotationControlPoint.add(event.params.dragAmount);
+    // });
+    ellipse.center.listeners.addDragListener((this._centerPointHandler = this._handleDragCenterPoint()));
+
+    // +---------------------------------------------------------------------
+    // | Listen for rotation changes.
+    // +-------------------------------------------
+    // rotationControlPoint.listeners.addDragListener((_event: VertEvent) => {
+    //   var newRotation = rotationControlLine.angle();
+    //   var rDiff = newRotation - ellipse.rotation;
+    //   ellipse.rotation = newRotation;
+    //   ellipse.axis.rotate(rDiff, ellipse.center);
+    // });
+    rotationControlPoint.listeners.addDragListener((this._rotationPointHandler = this._handleRotationCenterPoint()));
+  }
+
+  private _handleDragCenterPoint(): VertListener {
+    const _self = this;
+    return (event: VertEvent) => {
+      _self.rotationControlPoint.add(event.params.dragAmount);
+    };
+  }
+
+  private _handleRotationCenterPoint(): VertListener {
+    const _self = this;
+    return (_event: VertEvent) => {
+      var newRotation = _self._rotationControlLine.angle();
+      var rDiff = newRotation - _self.ellipse.rotation;
+      _self.ellipse.rotation = newRotation;
+      _self.ellipse.axis.rotate(rDiff, _self.ellipse.center);
+    };
+  }
+
+  /**
+   * Draw grey handle lines.
+   *
+   * @param {DrawLib<any>} draw - The draw library instance to use.
+   * @param {DrawLib<any>} fill - The fill library instance to use.
+   */
+  drawHandleLines(draw: DrawLib<any>, fill: DrawLib<any>) {
+    // Draw rotation handle line
+    draw.line(this.ellipse.center, this.rotationControlPoint, "rgba(192,64,128,0.333)", 1.0, {
+      dashOffset: 0.0,
+      dashArray: [4, 2]
+    });
+    // Draw helper box
+    draw.setCurrentId(`${this.ellipse.uid}_e0`);
+    draw.setCurrentClassName(`${this.ellipse.className}-v-line`);
+    draw.line(
+      this.ellipse.center.clone().add(0, this.ellipse.signedRadiusV()).rotate(this.ellipse.rotation, this.ellipse.center),
+      this.ellipse.axis,
+      "rgba(64,128,192,0.333)",
+      1.0,
+      {
+        dashOffset: 0.0,
+        dashArray: [4, 2]
+      }
+    );
+    draw.setCurrentId(`${this.ellipse.uid}_e1`);
+    draw.setCurrentClassName(`${this.ellipse.className}-h-line`);
+    draw.line(
+      this.ellipse.center.clone().add(this.ellipse.signedRadiusH(), 0).rotate(this.ellipse.rotation, this.ellipse.center),
+      this.ellipse.axis,
+      "rgba(64,128,192,0.333)",
+      1.0,
+      {
+        dashOffset: 0.0,
+        dashArray: [4, 2]
+      }
+    );
+  }
+
+  destroy(): void {
+    this.ellipse.center.listeners.removeDragListener(this._centerPointHandler);
+    this.rotationControlPoint.listeners.removeDragListener(this._rotationPointHandler);
+  }
+}