plotboilerplate 1.23.3 → 1.25.0

package/src/ts/utils/dom/components/_ColorGradientPicker_raw.ts_

@@ -0,0 +1,392 @@
+/**
+ * @author  Ikaros Kappler
+ * @date    2025-06-07
+ * @version 1.0.0
+ */
+
+export class ColorGradientPicker {
+  private baseID: number;
+
+  private container: HTMLElement;
+  private sliderElements: Array<HTMLInputElement>;
+  private colorInput: HTMLInputElement;
+  private indicatorContainer: HTMLDivElement;
+  private colorIndicatorButton: HTMLButtonElement;
+  private sliderMin: number = 0;
+  private sliderMax: number = 100;
+  private indicatorWidth_num = 1.0;
+  private indicatorWidth = "1em";
+  private indicatorWidth_half = "0.5em";
+  private indicatorHeight = "1em";
+
+  private COLORSET: Array<string> = ["red", "orange", "yellow", "green", "blue", "purple"];
+
+  /**
+   * The constructor.
+   *
+   * Pass a container ID or nothing – in the latter case the constructor will create
+   * a new DIV element.
+   *
+   * @param {string?} containerID
+   */
+  constructor(containerID?: string) {
+    if (containerID) {
+      const cont = document.getElementById(containerID);
+      if (!cont) {
+        throw "Cannot create ColorGradientPicker. Component ID does not exist.";
+      }
+      this.container = cont;
+    } else {
+      this.container = document.createElement("div");
+    }
+    // console.log("created", this.container);
+    this.baseID = Math.floor(Math.random() * 65535);
+
+    this.__init();
+    this.__updateBackgroundGradient();
+  }
+
+  /**
+   * Init the container contents.
+   *
+   * @private
+   */
+  private __init() {
+    this.__addCustomStyles();
+    this.__setContainerLayout();
+    console.log("Init");
+    const stepCount: number = 6;
+    this.sliderElements = [];
+    for (var i = 0; i < stepCount; i++) {
+      this.__createRangeSlider((100 / (stepCount - 1)) * i, i);
+    }
+    this.__createColorIndicator();
+  }
+
+  /**
+   * Apply style settings to the main container.
+   *
+   * @private
+   */
+  private __setContainerLayout() {
+    this.container.style.display = "flex";
+    this.container.style.flexDirection = "column";
+    this.container.style.width = "100%";
+    this.container.style.height = "32px";
+    this.container.style.position = "relative";
+  }
+
+  /**
+   * Create a new range slider for this color gradient picker.
+   *
+   * @param {number} initialValue
+   * @param {number} index
+   */
+  private __createRangeSlider(initialValue: number, index: number) {
+    const initialColor: string = this.COLORSET[index % this.COLORSET.length];
+
+    const rangeSlider = document.createElement("input");
+    rangeSlider.setAttribute("id", `rage-slider-${this.baseID}-${index}`);
+    rangeSlider.setAttribute("type", "range");
+    rangeSlider.setAttribute("min", `${this.sliderMin}`);
+    rangeSlider.setAttribute("max", `${this.sliderMax}`);
+    rangeSlider.setAttribute("value", `${initialValue}`);
+    this.container.appendChild(rangeSlider);
+    this.sliderElements.push(rangeSlider);
+
+    rangeSlider.style.position = "absolute";
+    rangeSlider.style.left = "0";
+    rangeSlider.style.top = "0";
+    rangeSlider.style.width = "100%";
+
+    rangeSlider.dataset["rangeSliderIndex"] = `${index}`;
+    rangeSlider.dataset["colorValue"] = initialColor;
+    const sliderHandler = this.__createSliderChangeHandler();
+    // rangeSlider.addEventListener("change", this.__createSliderChangeHandler());
+    rangeSlider.addEventListener("change", sliderHandler);
+    rangeSlider.addEventListener("click", sliderHandler);
+  }
+
+  private __createColorIndicator() {
+    this.indicatorContainer = document.createElement("div");
+    this.indicatorContainer.style["width"] = "100%";
+    // this.indicatorContainer.style["position"] = "100%";
+
+    this.colorIndicatorButton = document.createElement("button");
+    this.colorIndicatorButton.style["position"] = "absolute";
+    this.colorIndicatorButton.style["bottom"] = "0";
+    this.colorIndicatorButton.style["left"] = "0%";
+    this.colorIndicatorButton.style["background-color"] = "grey";
+    this.colorIndicatorButton.style["border-radius"] = "3px";
+    this.colorIndicatorButton.style["border"] = "1px solid grey";
+    this.colorIndicatorButton.style["width"] = this.indicatorWidth;
+    this.colorIndicatorButton.style["height"] = this.indicatorHeight;
+    this.colorIndicatorButton.style["transform"] = "translate(-50%,100%)";
+
+    this.colorInput = document.createElement("input");
+    this.colorInput.setAttribute("type", "color");
+    this.colorInput.style["visibility"] = "hidden";
+    this.colorInput.dataset["activeSliderIndex"] = "";
+    this.colorInput.addEventListener("input", this.__colorChangeHandler());
+
+    const _self = this;
+    this.colorIndicatorButton.addEventListener("click", () => {
+      console.log("clicked");
+      // _self.colorInput.dispatchEvent(new Event("input"));
+      _self.colorInput.click();
+    });
+
+    this.indicatorContainer.appendChild(this.colorIndicatorButton);
+    this.container.appendChild(this.indicatorContainer);
+    this.container.appendChild(this.colorInput);
+  }
+
+  /**
+   * Get a color gradient CSS value string from the current editor settings.
+   *
+   * @instance
+   * @memberof ColorGradientPicker
+   * @returns {string}
+   */
+  public getColorGradient(): string {
+    // Example:
+    //    linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 38%, rgba(161, 210, 108, 1) 68%, rgba(237, 221, 83, 1) 100%)
+    const buffer: Array<string | undefined> = ["linear-gradient( 90deg, "];
+    for (var i = 0; i < this.sliderElements.length; i++) {
+      if (i > 0) {
+        buffer.push(",");
+      }
+      const colorValue: string = this.__getSliderColor(i, "black");
+      buffer.push(colorValue);
+      // const sliderValue: number = this.__getSliderValue(i, 0.0);
+      // const percentage: number = (this.sliderMin + sliderValue) / (this.sliderMax - this.sliderMin);
+      const percentage = this.__getSliderPercentage(i);
+      buffer.push(`${percentage * 100}%`);
+    }
+    buffer.push(")");
+
+    return buffer.join(" ");
+  }
+
+  /**
+   * Creates a callback function for range slider.
+   *
+   * @returns
+   */
+  private __createSliderChangeHandler(): (e: Event) => boolean {
+    const _self = this;
+    return (e: Event): boolean => {
+      const targetSlider: HTMLInputElement = e.target as HTMLInputElement;
+      console.log("Clicked", targetSlider ? targetSlider.getAttribute("id") : null);
+      if (!targetSlider) {
+        return false;
+      }
+      const currentSliderValue: number = Number.parseFloat(targetSlider.value);
+      const rangeSliderIndexRaw: string | undefined = targetSlider.dataset["rangeSliderIndex"];
+      if (!rangeSliderIndexRaw) {
+        return false;
+      }
+      const rangeSliderIndex: number = Number.parseInt(rangeSliderIndexRaw);
+      var leftSliderValue = this.__getSliderValue(rangeSliderIndex - 1, _self.sliderMin);
+      var rightSliderValue = this.__getSliderValue(rangeSliderIndex + 1, _self.sliderMax);
+      if (leftSliderValue >= currentSliderValue) {
+        targetSlider.value = `${leftSliderValue}`;
+        _self.__updateBackgroundGradient();
+        _self.__updateColorIndicator(rangeSliderIndex);
+        return false;
+      } else if (rightSliderValue <= currentSliderValue) {
+        targetSlider.value = `${rightSliderValue}`;
+        _self.__updateBackgroundGradient();
+        _self.__updateColorIndicator(rangeSliderIndex);
+
+        return false;
+      } else {
+        _self.__updateBackgroundGradient();
+        _self.__updateColorIndicator(rangeSliderIndex);
+        return true;
+      }
+    };
+  }
+
+  private __colorChangeHandler(): (_evt: Event) => boolean {
+    const _self = this;
+    return (_evt: Event): boolean => {
+      // const colorInput : HTMLInputElement | null = evt.target;
+      const activeSliderIndex_raw = this.colorInput.dataset["activeSliderIndex"];
+      if (!activeSliderIndex_raw) {
+        console.warn("Cannot update color indicator; no active range slider set.");
+        return false;
+      }
+      const activeSliderIndex = Number.parseInt(activeSliderIndex_raw);
+      if (Number.isNaN(activeSliderIndex) || activeSliderIndex < 0 || activeSliderIndex >= _self.sliderElements.length) {
+        console.warn("Cannot update color indicator; active index invalid or out of bounds.", activeSliderIndex);
+        return false;
+      }
+
+      const newColor: string = _self.colorInput.value;
+      const rangeSlider: HTMLInputElement = _self.sliderElements[activeSliderIndex];
+      rangeSlider.dataset["colorValue"] = newColor;
+      // rangeSlider.dataset["colorValue"] = newColor;
+      this.colorIndicatorButton.style["background-color"] = newColor;
+      _self.__updateBackgroundGradient();
+
+      return true;
+    };
+  }
+
+  /**
+   * Updates the container's background to display the configured color gradient.
+   *
+   * @private
+   */
+  private __updateBackgroundGradient() {
+    const colorGradient = this.getColorGradient();
+    console.log(colorGradient);
+    this.container.style["background"] = colorGradient;
+    console.log(this.container);
+    // document.body.style["background-color"] = colorGradient;
+  }
+
+  private __updateColorIndicator(rangeSliderIndex: number) {
+    const colorValue = this.__getSliderColor(rangeSliderIndex, "grey");
+    const ratio = this.__getSliderPercentage(rangeSliderIndex);
+    this.colorIndicatorButton.style["left"] = `calc( ${ratio * 100}% + ${(1.0 - ratio) * this.indicatorWidth_num * 0.5}em - ${
+      ratio * this.indicatorWidth_num * 0.5
+    }em)`;
+
+    this.colorIndicatorButton.style["background-color"] = colorValue;
+    this.colorInput.value = colorValue;
+    this.colorInput.dataset["activeSliderIndex"] = `${rangeSliderIndex}`;
+  }
+
+  /**
+   * Get the value of the n-th rangel slider.
+   *
+   * @param {number} sliderIndex
+   * @param {number} fallback
+   * @returns
+   */
+  private __getSliderValue(sliderIndex: number, fallback: number): number {
+    if (sliderIndex < 0 || sliderIndex >= this.sliderElements.length) {
+      return fallback;
+    }
+    return Number.parseFloat(this.sliderElements[sliderIndex].value);
+  }
+
+  /**
+   * Get the slider's value in a mapped range of 0.0 ... 1.0.
+   *
+   * @param sliderIndex
+   * @returns
+   */
+  private __getSliderPercentage(sliderIndex): number {
+    const sliderValue: number = this.__getSliderValue(sliderIndex, 0.0);
+    const percentage: number = (this.sliderMin + sliderValue) / (this.sliderMax - this.sliderMin);
+    return percentage;
+  }
+
+  /**
+   * Get the configured color value of the n-th rangel slider.
+   *
+   * @param {number} sliderIndex
+   * @param {string} fallback
+   * @returns
+   */
+  private __getSliderColor(sliderIndex: number, fallback: string): string {
+    if (sliderIndex < 0 || sliderIndex >= this.sliderElements.length) {
+      return fallback;
+    }
+    const colorValue = this.sliderElements[sliderIndex].dataset["colorValue"];
+    return colorValue ? colorValue : fallback;
+  }
+
+  /**
+   * Adds custom styles (global STYLE tag).
+   *
+   * @private
+   */
+  private __addCustomStyles() {
+    const headElements = document.querySelector("head");
+    if (headElements) {
+      const thumbWidth = "0.5em";
+      const thumbHeight = "1.333em";
+      const styleElement = document.createElement("style");
+      // Thanks to Ana Tudor
+      //    https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/
+      styleElement.innerHTML = `
+      input[type='range'] {
+
+        -webkit-appearance: none;
+
+        grid-column: 1;
+        grid-row: 2;
+        
+        /* same as before */
+        background: none; /* get rid of white Chrome background */
+        color: #000;
+        font: inherit; /* fix too small font-size in both Chrome & Firefox */
+        margin: 0;
+        pointer-events: none; /* let clicks pass through */
+      }
+
+      input[type='range']::-webkit-slider-runnable-track {
+        -webkit-appearance: none;
+
+        background: none; /* get rid of Firefox track background */
+        height: 100%;
+        width: 100%;
+
+        pointer-events: none;
+      }
+
+      input[type='range']::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        background: currentcolor;
+        border: none; /* get rid of Firefox thumb border */
+        border-radius: 6px; /* get rid of Firefox corner rounding */
+        pointer-events: auto; /* catch clicks */
+        width: ${thumbWidth}; 
+        height: ${thumbHeight};
+      }
+
+      input[type='range']:focus::-webkit-slider-thumb {
+        border: 2px solid white;
+      }
+
+      input[type='range']::-moz-range-track {
+        -webkit-appearance: none;
+        background: none; /* get rid of Firefox track background */
+        height: 100%;
+        width: 100%;
+        pointer-events: none;
+      }
+
+      input[type='range']::-moz-range-thumb {
+        /* -webkit-appearance: none; */
+        background: currentcolor;
+        border: none; /* get rid of Firefox thumb border */
+        border-radius: 6px; /* get rid of Firefox corner rounding */
+        pointer-events: auto; /* catch clicks */
+        width: ${thumbWidth}; 
+        height: ${thumbHeight};
+      }
+
+      input[type='range']:focus::-moz-range-thumb {
+        border: 2px solid white;
+      }
+
+      input[type='range'] {
+        /* same as before */
+        z-index: 1;
+      }
+      
+      input[type='range']:focus {
+          z-index: 2;
+          outline: dotted 1px orange;
+          color: darkorange;
+      }
+      `;
+      headElements.appendChild(styleElement);
+    }
+  }
+}

package/src/ts/utils/dom/guiSizeToggler.ts

@@ -29,7 +29,7 @@ const applyGuiSize = (gui: GUI, guiDoubleSize: boolean, cssProps: Record<string,
 
   const transform = cssProps && cssProps.hasOwnProperty("transform") ? cssProps["transform"] + " " : "";
 
-  console.log("transform", transform);
+  // console.log("transform", transform);
   if (guiDoubleSize) {
     gui.domElement.style["transform"] = transform + "scale(2.0)";
   } else {

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

@@ -22,16 +22,21 @@
  * @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`.
+ * @modified 2025-05-05 Added optional params `draw` and `fill` to BezierPathInteractionHelper.drawHandleLines` method.
+ * @modified 2025-05-05 Class `BezierPathInteractionHelper` now implementing `IShapeInteractionHelper`.
+ * @modified 2025-05-07 Tweaking performance of `BezierPathInteractionHelper`: only triggering redraw now when mouse move within given detect range.
+ * @version  1.2.1
  *
  * @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 +45,8 @@ import { PlotBoilerplate } from "../../PlotBoilerplate";
 import { VertListener } from "../../VertexListeners";
 import { Vertex } from "../../Vertex";
 import { XMouseEvent } from "../../MouseHandler";
-import { XYCoords } from "../../interfaces";
+import { DrawLib, IShapeInteractionHelper, XYCoords } from "../../interfaces";
+import { AFTouchEvent } from "alloyfinger-typescript/src/cjs/alloy_finger";
 
 /**
  * Handler type for mouse-pointer-moved listeners.
@@ -88,7 +94,7 @@ interface HelperOptions {
  *
  * @public
  **/
-export class BezierPathInteractionHelper {
+export class BezierPathInteractionHelper implements IShapeInteractionHelper {
   /**
    * @member {PlotBoilerplate} pb
    * @memberof BezierPathInteractionHelper
@@ -153,7 +159,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 +171,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 +200,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 +273,28 @@ export class BezierPathInteractionHelper {
     this._handleMoveEvent(this.currentB.x, this.currentB.y);
   }
 
+  /**
+   * Draw grey handle lines.
+   *
+   * @param {DrawLib<any>} draw - (optional) The draw library to use. If not provided then `pb.draw` will be used.
+   * @param {DrawLib<any>} fill - (optional) The fill library to use. If not provided then `pb.fill` will be used.
+   */
+  drawHandleLines(draw?: DrawLib<any>, fill?: DrawLib<any>) {
+    draw = draw || this.pb.draw;
+    fill = fill || this.pb.fill;
+    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
@@ -409,6 +441,9 @@ export class BezierPathInteractionHelper {
   // | Touch and mouse events should call this fuction when the pointer was moved.
   // +-------------------------------
   private _handleMoveEvent(posX: number, posY: number): void {
+    const oldA = this.currentA.clone();
+    const oldB = this.currentB.clone();
+    const oldDistance = this.currentDistance;
     const point: XYCoords = this.pb.transformMousePosition(posX, posY);
     this.currentB.set(point);
     this._updateMinDistance();
@@ -418,8 +453,14 @@ export class BezierPathInteractionHelper {
     } else {
       this.onPointerMoved(-1, null, null, 0.0);
     }
-    // Always redraw even when moving outside the detection distance?
-    this.pb.redraw();
+    // Only redraw when moving inside the detection distance
+    if (
+      (this.currentDistance <= this.maxDetectDistance ||
+        (this.currentDistance > this.maxDetectDistance && oldDistance <= this.maxDetectDistance)) &&
+      (!oldA.equals(this.currentA) || !oldB.equals(this.currentB))
+    ) {
+      this.pb.redraw();
+    }
   }
 
   // +---------------------------------------------------------------------------------
@@ -437,23 +478,24 @@ export class BezierPathInteractionHelper {
   private _installTouchListener(): AlloyFinger {
     var _self: BezierPathInteractionHelper = this;
     const afProps = {
-      // Todo: which event types does AlloyFinger use?
-      touchStart: function (_event: TouchEvent) {
+      touchStart: function (_event: AFTouchEvent<"touchStart">) {
         _self.mouseIsOver = true;
       },
-      touchMove: function (event: TouchEvent) {
+      touchMove: function (event: AFTouchEvent<"touchMove">) {
         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">) {
         _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);
     }
@@ -537,7 +579,9 @@ export class BezierPathInteractionHelper {
   // | Update the min distance from point `line.b` to the curve. And redraw.
   // +-------------------------------
   private _updateMinDistance(): void {
-    if (this.paths.length == 0) return;
+    if (this.paths.length == 0) {
+      return;
+    }
     let pathIndex: number = -1;
     let minDist: number = Number.MAX_VALUE;
     let closestPoint: Vertex | null = null;
@@ -578,24 +622,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/CircleHelper.ts

@@ -10,17 +10,20 @@
  * @modified 2024-02-26 Removed the constructor param `pb` (unused).
  * @modified 2024-02-25 Added `circle` and `radiusPoint` attributes.
  * @modified 2024-03-10 Fixed some issues in the `destroy` method; listeners were not properly removed.
+ * @modified 2025-05-05 Class `BezierPathInteractionHelper` now implementing `IShapeInteractionHelper`.
  * @version  1.2.1
  **/
 
 import { Circle } from "../../Circle";
 import { VertEvent, VertListener } from "../../VertexListeners";
 import { Vertex } from "../../Vertex";
+import { IShapeInteractionHelper } from "../../interfaces/core";
+import { DrawLib } from "../../interfaces/DrawLib";
 
 /**
  * @classdesc A helper for handling circles with an additional radius-control-point.
  */
-export class CircleHelper {
+export class CircleHelper implements IShapeInteractionHelper {
   circle: Circle;
   radiusPoint: Vertex;
 
@@ -40,8 +43,18 @@ export class CircleHelper {
     this.circle = circle;
     this.radiusPoint = radiusPoint;
 
-    circle.center.listeners.addDragListener( this.centerHandler = this._handleDragCenter());
-    radiusPoint.listeners.addDragListener(this.radiusHandler = this._handleDragRadiusPoint());
+    circle.center.listeners.addDragListener((this.centerHandler = this._handleDragCenter()));
+    radiusPoint.listeners.addDragListener((this.radiusHandler = this._handleDragRadiusPoint()));
+  }
+
+  //--- 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
   }
 
   /**
@@ -56,6 +69,7 @@ export class CircleHelper {
     this.circle.center.listeners.removeDragListener(this.centerHandler);
     this.radiusPoint.listeners.removeDragListener(this.radiusHandler);
   }
+  //--- END --- Implement ISHapeInteractionHelper ---
 
   /**
    * Creates a new drag handler for the circle's center point.