plotboilerplate 1.23.3 → 1.24.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,129 @@
  * @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 } 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 );
-	}
-
-};
-
-
-
+  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);
+    };
+  }
+
+  /**
+   * 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);
+  }
+}

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

@@ -0,0 +1,113 @@
+/**
+ * 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()`.
+ * @version  1.0.0
+ */
+
+import { Line } from "../../Line";
+import { VEllipse } from "../../VEllipse";
+import { Vertex } from "../../Vertex";
+import { VertEvent, VertListener } from "../../VertexListeners";
+import { DrawLib } from "../../interfaces";
+
+export class VEllipseHelper {
+  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]
+      }
+    );
+  }
+
+  detroy(): void {
+    this.ellipse.center.listeners.removeDragListener(this._centerPointHandler);
+    this.rotationControlPoint.listeners.removeDragListener(this._rotationPointHandler);
+  }
+}

package/src/ts/utils/helpers/VEllipseSectorHelper.ts

@@ -1,60 +1,177 @@
 /**
  * A helper for VEllipseSectors.
  *
- * @author  Ikaros Kappler
- * @date    2021-03-24
- * @version 1.0.0
+ * @author   Ikaros Kappler
+ * @date     2021-03-24
+ * @modified 2025-04-02 Adding `VEllipseSectorHelper.drawHandleLines`.
+ * @modified 2025-04-07 Modifying the calculation of `startAngle` and `endAngle` from the rotation control point: wrapping result into [0,TWO_PI).
+ * @modified 2025-04-09 Adding the `VEllipseSectorHelper.destroy` method.
+ * @version  1.1.0
  */
 
 import { Line } from "../../Line";
 import { VEllipseSector } from "../../VEllipseSector";
 import { Vertex } from "../../Vertex";
-import { VertEvent } from "../../VertexListeners";
+import { VertEvent, VertListener } from "../../VertexListeners";
+import { geomutils } from "../../geomutils";
+import { DrawLib } from "../../interfaces";
 
 export class VEllipseSectorHelper {
+  private sector: VEllipseSector;
+  private startAngleControlPoint: Vertex;
+  private endAngleControlPoint: Vertex;
+  private rotationControlPoint: Vertex;
+
+  private _rotationControlLine: Line;
+  private _startAngleControlLine: Line;
+  private _endAngleControlLine: Line;
+
+  private _centerHandler: VertListener;
+  private _rotationHandler: VertListener;
+  private _startAngleHandler: VertListener;
+  private _endAngleHandler: VertListener;
+
   constructor(
     sector: VEllipseSector,
     startAngleControlPoint: Vertex,
     endAngleControlPoint: Vertex,
     rotationControlPoint: Vertex
   ) {
-    const rotationControlLine: Line = new Line(sector.ellipse.center, rotationControlPoint);
-    const startAngleControlLine: Line = new Line(sector.ellipse.center, startAngleControlPoint);
-    const endAngleControlLine: Line = new Line(sector.ellipse.center, endAngleControlPoint);
+    this.sector = sector;
+    this.startAngleControlPoint = startAngleControlPoint;
+    this.endAngleControlPoint = endAngleControlPoint;
+    this.rotationControlPoint = rotationControlPoint;
+
+    // const rotationControlLine: Line = new Line(sector.ellipse.center, rotationControlPoint);
+    this._rotationControlLine = new Line(sector.ellipse.center, rotationControlPoint);
+    // const startAngleControlLine: Line = new Line(sector.ellipse.center, startAngleControlPoint);
+    this._startAngleControlLine = new Line(sector.ellipse.center, startAngleControlPoint);
+    // const endAngleControlLine: Line = new Line(sector.ellipse.center, endAngleControlPoint);
+    this._endAngleControlLine = new Line(sector.ellipse.center, endAngleControlPoint);
 
     // +---------------------------------------------------------------------
     // | Listen for the center to be moved.
     // +-------------------------------------------
-    sector.ellipse.center.listeners.addDragListener((event: VertEvent) => {
-      startAngleControlPoint.add(event.params.dragAmount);
-      endAngleControlPoint.add(event.params.dragAmount);
-      rotationControlPoint.add(event.params.dragAmount);
-    });
+    sector.ellipse.center.listeners.addDragListener((this._centerHandler = this._handleDragCenterPoint()));
 
     // +---------------------------------------------------------------------
     // | Listen for rotation changes.
     // +-------------------------------------------
-    rotationControlPoint.listeners.addDragListener((event: VertEvent) => {
-      var newRotation = rotationControlLine.angle();
-      var rDiff = newRotation - sector.ellipse.rotation;
-      sector.ellipse.rotation = newRotation;
-      sector.ellipse.axis.rotate(rDiff, sector.ellipse.center);
-      startAngleControlPoint.rotate(rDiff, sector.ellipse.center);
-      endAngleControlPoint.rotate(rDiff, sector.ellipse.center);
-    });
+    rotationControlPoint.listeners.addDragListener((this._rotationHandler = this._handleDragRotationControlPoint()));
 
     // +---------------------------------------------------------------------
     // | Listen for start angle changes.
     // +-------------------------------------------
-    startAngleControlPoint.listeners.addDragListener((event: VertEvent) => {
-      sector.startAngle = startAngleControlLine.angle() - sector.ellipse.rotation;
-    });
+    startAngleControlPoint.listeners.addDragListener((this._startAngleHandler = this._handleDragStartAngleControlPoint()));
 
     // +---------------------------------------------------------------------
     // | Listen for end angle changes.
     // +-------------------------------------------
-    endAngleControlPoint.listeners.addDragListener((event: VertEvent) => {
-      sector.endAngle = endAngleControlLine.angle() - sector.ellipse.rotation;
+    endAngleControlPoint.listeners.addDragListener((this._endAngleHandler = this._handleDragEndAngleControlPoint()));
+  }
+
+  /**
+   * 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 _handleDragCenterPoint(): VertListener {
+    const _self = this;
+    return (event: VertEvent) => {
+      _self.startAngleControlPoint.add(event.params.dragAmount);
+      _self.endAngleControlPoint.add(event.params.dragAmount);
+      _self.rotationControlPoint.add(event.params.dragAmount);
+    };
+  }
+
+  private _handleDragRotationControlPoint(): VertListener {
+    const _self = this;
+    return (event: VertEvent) => {
+      const newRotation: number = _self._rotationControlLine.angle();
+      const rDiff: number = newRotation - _self.sector.ellipse.rotation;
+      _self.sector.ellipse.rotation = newRotation;
+      _self.sector.ellipse.axis.rotate(rDiff, _self.sector.ellipse.center);
+      _self.startAngleControlPoint.rotate(rDiff, _self.sector.ellipse.center);
+      _self.endAngleControlPoint.rotate(rDiff, _self.sector.ellipse.center);
+    };
+  }
+
+  private _handleDragStartAngleControlPoint(): VertListener {
+    const _self = this;
+    return (_event: VertEvent) => {
+      // sector.startAngle = startAngleControlLine.angle() - sector.ellipse.rotation;
+      _self.sector.startAngle = geomutils.mapAngleTo2PI(_self._startAngleControlLine.angle() - _self.sector.ellipse.rotation);
+    };
+  }
+
+  private _handleDragEndAngleControlPoint(): VertListener {
+    const _self = this;
+
+    return (event: VertEvent) => {
+      _self.sector.endAngle = geomutils.mapAngleTo2PI(_self._endAngleControlLine.angle() - _self.sector.ellipse.rotation);
+    };
+  }
+
+  /**
+   * 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.line(this.sector.ellipse.center, this.startAngleControlPoint, "rgba(64,192,128,0.333)", 1.0, {
+      dashOffset: 0.0,
+      dashArray: [4, 2]
+    });
+    draw.line(this.sector.ellipse.center, this.endAngleControlPoint, "rgba(64,192,128,0.333)", 1.0, {
+      dashOffset: 0.0,
+      dashArray: [4, 2]
     });
+    // Draw rotation handle line
+    draw.line(this.sector.ellipse.center, this.rotationControlPoint, "rgba(192,64,128,0.333)", 1.0, {
+      dashOffset: 0.0,
+      dashArray: [4, 2]
+    });
+    // Draw helper box
+    draw.line(
+      this.sector.ellipse.center
+        .clone()
+        .add(0, this.sector.ellipse.signedRadiusV())
+        .rotate(this.sector.ellipse.rotation, this.sector.ellipse.center),
+      this.sector.ellipse.axis,
+      "rgba(64,128,192,0.333)",
+      1.0,
+      {
+        dashOffset: 0.0,
+        dashArray: [4, 2]
+      }
+    );
+    draw.line(
+      this.sector.ellipse.center
+        .clone()
+        .add(this.sector.ellipse.signedRadiusH(), 0)
+        .rotate(this.sector.ellipse.rotation, this.sector.ellipse.center),
+      this.sector.ellipse.axis,
+      "rgba(64,128,192,0.333)",
+      1.0,
+      {
+        dashOffset: 0.0,
+        dashArray: [4, 2]
+      }
+    );
+  } // END drawHandleLines
+
+  /**
+   * Destroy this VEllipseHandler which means: all listeners are being removed.
+   */
+  destroy(): void {
+    this.sector.ellipse.center.listeners.removeDragListener(this._centerHandler);
+    this.rotationControlPoint.listeners.removeDragListener(this._rotationHandler);
+    this.startAngleControlPoint.listeners.removeDragListener(this._startAngleHandler);
+    this.endAngleControlPoint.listeners.removeDragListener(this._endAngleHandler);
   }
 }