plotboilerplate 1.24.0 → 1.26.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

@@ -25,7 +25,10 @@
  * @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
+ * @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
@@ -42,7 +45,7 @@ import { PlotBoilerplate } from "../../PlotBoilerplate";
 import { VertListener } from "../../VertexListeners";
 import { Vertex } from "../../Vertex";
 import { XMouseEvent } from "../../MouseHandler";
-import { DrawLib, XYCoords } from "../../interfaces";
+import { DrawLib, IShapeInteractionHelper, XYCoords } from "../../interfaces";
 import { AFTouchEvent } from "alloyfinger-typescript/src/cjs/alloy_finger";
 
 /**
@@ -91,7 +94,7 @@ interface HelperOptions {
  *
  * @public
  **/
-export class BezierPathInteractionHelper {
+export class BezierPathInteractionHelper implements IShapeInteractionHelper {
   /**
    * @member {PlotBoilerplate} pb
    * @memberof BezierPathInteractionHelper
@@ -273,8 +276,12 @@ export class BezierPathInteractionHelper {
   /**
    * 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() {
+  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, {
@@ -434,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();
@@ -443,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();
+    }
   }
 
   // +---------------------------------------------------------------------------------
@@ -462,23 +478,15 @@ export class BezierPathInteractionHelper {
   private _installTouchListener(): AlloyFinger {
     var _self: BezierPathInteractionHelper = this;
     const afProps = {
-      // Todo: which event types does AlloyFinger use?
-      // touchStart: function (_event: TouchEvent) {
-      //   _self.mouseIsOver = true;
-      // },
-      // /* TouchMoveEvent , AFTouchEvent<"touchStart"> */
       touchStart: function (_event: AFTouchEvent<"touchStart">) {
         _self.mouseIsOver = true;
       },
       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: AFTouchEvent<"touchEnd">) {
-        // TouchEvent) {
         _self.mouseIsOver = false;
         _self._clearMoveEvent();
       }
@@ -571,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;

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.

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

@@ -22,12 +22,12 @@ import { CircleSector } from "../../CircleSector";
 import { PlotBoilerplate } from "../../PlotBoilerplate";
 import { VertEvent, VertListener } from "../../VertexListeners";
 import { Vertex } from "../../Vertex";
-import { DrawLib } from "../../interfaces";
+import { DrawLib, IShapeInteractionHelper } from "../../interfaces";
 
 /**
  * @classdesc A helper for handling circles with an additional radius-control-point.
  */
-export class CircleSectorHelper {
+export class CircleSectorHelper implements IShapeInteractionHelper {
   private circleSector: CircleSector;
   private controlPointStart: Vertex;
   private controlPointEnd: Vertex;
@@ -109,6 +109,7 @@ export class CircleSectorHelper {
     };
   }
 
+  //--- BEGIN --- Implement IShapeInteractionHelper ---
   /**
    * Draw grey handle lines.
    *
@@ -139,4 +140,5 @@ export class CircleSectorHelper {
     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);
+    };
+  }
+}