plotboilerplate 1.23.2 → 1.24.0

package/src/ts/utils/helpers/BezierPathInteractionHelper.ts

@@ -22,16 +22,18 @@
  * @modified 2021-03-31 Fixed the issue with the new AlloyFinger (Typescript).
  * @modified 2022-02-03 Changing the element to catch events (eventCatcher instead of canvas).
  * @modified 2024-03-10 Fixing some types for Typescript 5 compatibility.
- * @version  1.1.3
+ * @modified 2025-04-14 Added the `BezierPathInteractionHelper.drawHandleLines` method.
+ * @modified 2025-04-14 Fixing correct event types for touch events in `BezierPathInteractionHelper`.
+ * @modified 2025-04-14 BezierPathInteractionHelper: Changed default value of `HelperOptions.autoAdjustPaths` from `true` to `false`.
+ * @version  1.2.0
  *
  * @file BezierPathInteractionHelper
  * @public
  **/
 
-// import { AlloyFinger } from "alloyfinger"; // node_modules
 // I would like to use AlloyFinger from the node_modules, but it seems
 // AlloyTeam has forgotten to publish their d.ts file.
-import { AlloyFinger } from "../../../../lib/alloy_finger";
+import AlloyFinger from "alloyfinger-typescript";
 import { BezierPath } from "../../BezierPath";
 import { CubicBezierCurve } from "../../CubicBezierCurve";
 import { KeyHandler } from "../../KeyHandler";
@@ -40,7 +42,8 @@ import { PlotBoilerplate } from "../../PlotBoilerplate";
 import { VertListener } from "../../VertexListeners";
 import { Vertex } from "../../Vertex";
 import { XMouseEvent } from "../../MouseHandler";
-import { XYCoords } from "../../interfaces";
+import { DrawLib, XYCoords } from "../../interfaces";
+import { AFTouchEvent } from "alloyfinger-typescript/src/cjs/alloy_finger";
 
 /**
  * Handler type for mouse-pointer-moved listeners.
@@ -153,7 +156,9 @@ export class BezierPathInteractionHelper {
     this.pb = pb;
     this.paths = [];
     this.onPointerMoved =
-      typeof options.onPointerMoved === "function" ? options.onPointerMoved : (i: number, a: Vertex | null, b: Vertex | null, t: number) => {};
+      typeof options.onPointerMoved === "function"
+        ? options.onPointerMoved
+        : (i: number, a: Vertex | null, b: Vertex | null, t: number) => {};
     this.onVertexInserted =
       typeof options.onVertexInserted === "function"
         ? options.onVertexInserted
@@ -163,7 +168,7 @@ export class BezierPathInteractionHelper {
         ? options.onVerticesDeleted
         : (i: number, r: Array<number>, n: BezierPath, o: BezierPath) => {};
     this.onPathRemoved = typeof options.onPathRemoved === "function" ? options.onPathRemoved : (i: number, o: BezierPath) => {};
-    this.autoAdjustPaths = typeof options.autoAdjustPaths === "boolean" ? options.autoAdjustPaths : true;
+    this.autoAdjustPaths = typeof options.autoAdjustPaths === "boolean" ? options.autoAdjustPaths : false; // true;
     this.allowPathRemoval = typeof options.allowPathRemoval === "boolean" ? options.allowPathRemoval : true;
     this.maxDetectDistance = typeof options.maxDetectDistance === "number" ? options.maxDetectDistance : Number.MAX_VALUE;
 
@@ -192,7 +197,9 @@ export class BezierPathInteractionHelper {
     this._keyHandler = this._installKeyListener();
 
     // Paths might have changed by auto-adjustment.
-    if (this.autoAdjustPaths) pb.redraw();
+    if (this.autoAdjustPaths) {
+      pb.redraw();
+    }
   }
 
   /**
@@ -263,6 +270,24 @@ export class BezierPathInteractionHelper {
     this._handleMoveEvent(this.currentB.x, this.currentB.y);
   }
 
+  /**
+   * Draw grey handle lines.
+   *
+   */
+  drawHandleLines() {
+    this.paths.forEach((path: BezierPath) => {
+      path.bezierCurves.forEach((curve: CubicBezierCurve) => {
+        this.pb.draw.line(curve.startPoint, curve.startControlPoint, "rgba(64,192,128,0.333)", 1.0, {
+          dashOffset: 0.0,
+          dashArray: [4, 2]
+        });
+        this.pb.draw.line(curve.endPoint, curve.endControlPoint, "rgba(64,192,128,0.333)", 1.0, {
+          dashOffset: 0.0,
+          dashArray: [4, 2]
+        });
+      });
+    });
+  }
   /**
    * This function should invalidate any installed listeners and invalidate this object.
    * After calling this function the object might not hold valid data any more and
@@ -438,22 +463,31 @@ export class BezierPathInteractionHelper {
     var _self: BezierPathInteractionHelper = this;
     const afProps = {
       // Todo: which event types does AlloyFinger use?
-      touchStart: function (_event: TouchEvent) {
+      // touchStart: function (_event: TouchEvent) {
+      //   _self.mouseIsOver = true;
+      // },
+      // /* TouchMoveEvent , AFTouchEvent<"touchStart"> */
+      touchStart: function (_event: AFTouchEvent<"touchStart">) {
         _self.mouseIsOver = true;
       },
-      touchMove: function (event: TouchEvent) {
+      touchMove: function (event: AFTouchEvent<"touchMove">) {
+        // TouchEvent) {
         if (_self.pb.getDraggedElementCount() == 0 && event.touches.length > 0) {
           // console.log('touchmove');
           _self._handleMoveEvent(event.touches[0].clientX, event.touches[0].clientY);
         }
       },
-      touchEnd: function (_event: TouchEvent) {
+      touchEnd: function (_event: AFTouchEvent<"touchEnd">) {
+        // TouchEvent) {
         _self.mouseIsOver = false;
         _self._clearMoveEvent();
       }
     };
     if (window["createAlloyFinger" as keyof Object]) {
-      return (window["createAlloyFinger" as keyof Object] as any)(this.pb.eventCatcher ? this.pb.eventCatcher : this.pb.eventCatcher, afProps);
+      return (window["createAlloyFinger" as keyof Object] as any)(
+        this.pb.eventCatcher ? this.pb.eventCatcher : this.pb.eventCatcher,
+        afProps
+      );
     } else {
       return new AlloyFinger(this.pb.eventCatcher ? this.pb.eventCatcher : this.pb.eventCatcher, afProps);
     }
@@ -578,24 +612,6 @@ export class BezierPathInteractionHelper {
     path.updateArcLengths();
   }
 
-  /**
-   * A helper function to add drag-start-listener to given vertices.
-   */
-  /* private static _addVertsDragStartListener( verts:Array<Vertex>, dragStartListener:VertListener ) : void {
-	for( var i in verts ) {
-	    verts[i].addDragStartListener( dragStartListener );
-	}
-    }; */
-
-  /**
-   * A helper function to remove drag-start-listener to given vertices.
-   */
-  /* private static _removeVertsDragStartListener( verts:Array<Vertex>, dragEndListener:VertListener ) : void {
-	for( var i in verts ) {
-	    verts[i].removeDragStartListener( dragStartListener );
-	}
-    }; */
-
   /**
    * A helper function to add drag-start listeners to all vertices of the given path.
    *

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);
+  }
+}