plotboilerplate 1.23.2 → 1.24.0

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