plotboilerplate 1.24.0 → 1.25.0

package/src/esm/utils/dom/components/ColorGradientSelector.d.ts

@@ -0,0 +1,117 @@
+/**
+ * A simple class for rendering color gradient dropdowns.
+ *
+ * As native dropdown do not support custom stylings in the way we need, we will implement
+ * our own dropdown class.
+ *
+ * @author  Ikaros Kappler
+ * @date    2025-08-19
+ * @version 1.0.0
+ */
+import { ColorGradient } from "../../datastructures/ColorGradient";
+export type ColorGradientSelectorChangeListener = (colorGradient: ColorGradient, gradientIndex: number, source: ColorGradientSelector) => void;
+/**
+ * The initial properties to use.
+ */
+export interface ColorGradientSelectorProps {
+    containerID?: string;
+    initialGradients?: Array<ColorGradient>;
+    selectedGradientIndex?: number;
+    isMobileMode?: boolean;
+}
+export declare class ColorGradientSelector {
+    private readonly baseID;
+    private readonly elementID;
+    private container;
+    private containerRef;
+    private mainButtonContainerRef;
+    private positioningContainerRef;
+    private isMobileMode;
+    private isDropdownOpen;
+    private css_buttonWidth;
+    private css_buttonHeight;
+    private css_buttonFontSize;
+    private colorGradients;
+    private colorGradientOptionRefs;
+    private selectedGradientIndex;
+    private readonly installedChangeListeners;
+    static readonly DEFAULT_COLOR_GRADIENTS: Array<ColorGradient>;
+    /**
+     * The constructor: creates a new color gradient picker in the given container.
+     * If no container or ID is given then a new unbound `container` will be created (DIV).
+     *
+     * Pass a container ID or nothing – in the latter case the constructor will create
+     * a new DIV element.
+     *
+     * @param {string?} containerID - (optional) If you want to use an existing container (should be a DIV).
+     */
+    constructor(options?: ColorGradientSelectorProps);
+    setGradients(gradients: Array<ColorGradient>, selectedIndex: number): void;
+    addGradient(gradient: ColorGradient): void;
+    private __removeAllChildNodes;
+    /**
+     * Adds a new color gradient change listener to this ColorGradientPicker.
+     *
+     * @param {ColorGradientChangeListener} listener - The listener to add.
+     * @returns {boolean} True, if the listener was added and did not exist before.
+     */
+    addChangeListener(listener: ColorGradientSelectorChangeListener): boolean;
+    /**
+     *
+     * @param {ColorGradientChangeListener} listener The listener to remove.
+     * @returns {boolean} True, if the listener existed and has been removed.
+     */
+    removeChangeListener(listener: ColorGradientSelectorChangeListener): boolean;
+    getSelectedColorGradient(): ColorGradient;
+    private __fireChangeEvent;
+    /**
+     * Creates a handler for click events on the main button.
+     *
+     * @returns
+     */
+    private __mainButtonClickHandler;
+    /**
+     * Creates a handler for click events on one of the option button in the dropdown.
+     *
+     * @returns
+     */
+    private __optionButtonClickHandler;
+    private __optionButtonDeleteHandler;
+    /**
+     * Once a slider element was added or removed then the following indices must be updated.
+     *
+     * @param {number} startIndex - The slider index to start updating at.
+     */
+    __updateOptionDataSetIndices(startIndex: number): void;
+    private __setSelectedIndex;
+    /**
+     * Sets the backround color of the main button (of this dropdown) element.
+     *
+     * @param {ColorGradient} gradient - The gradient color to display. Must not be null.
+     */
+    private __setMainButtonGradient;
+    /**
+     * Renders a new option button for the dropdown menu.
+     *
+     * @param {ColorGradient} gradient
+     * @returns {JsxElement}
+     */
+    private __renderOptionButton;
+    /**
+     * Creates a new array of option buttons (refs).
+     * @returns
+     */
+    private _renderAllOptionButtons;
+    /**
+     * Init the container contents.
+     *
+     * @private
+     */
+    private _render;
+    /**
+     * Adds custom styles (global STYLE tag).
+     *
+     * @private
+     */
+    private __createCustomStylesElement;
+}

package/src/esm/utils/dom/components/ColorGradientSelector.js

@@ -0,0 +1,332 @@
+/**
+ * A simple class for rendering color gradient dropdowns.
+ *
+ * As native dropdown do not support custom stylings in the way we need, we will implement
+ * our own dropdown class.
+ *
+ * @author  Ikaros Kappler
+ * @date    2025-08-19
+ * @version 1.0.0
+ */
+import * as NoReact from "noreact";
+import { Color } from "../../datastructures/Color";
+import { ColorGradient } from "../../datastructures/ColorGradient";
+export class ColorGradientSelector {
+    /**
+     * The constructor: creates a new color gradient picker in the given container.
+     * If no container or ID is given then a new unbound `container` will be created (DIV).
+     *
+     * Pass a container ID or nothing – in the latter case the constructor will create
+     * a new DIV element.
+     *
+     * @param {string?} containerID - (optional) If you want to use an existing container (should be a DIV).
+     */
+    constructor(options) {
+        this.isDropdownOpen = false;
+        this.css_buttonWidth = "100px";
+        this.css_buttonHeight = "1.8em";
+        this.css_buttonFontSize = "0.725em";
+        this.colorGradients = [];
+        // TODO: this does not really need to be a pair, does it?
+        this.colorGradientOptionRefs = [];
+        this.selectedGradientIndex = -1;
+        this.installedChangeListeners = [];
+        /**
+         * Adds custom styles (global STYLE tag).
+         *
+         * @private
+         */
+        this.__createCustomStylesElement = () => {
+            // Thanks to Ana Tudor
+            //    https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/
+            return (NoReact.createElement("style", null, `
+
+    #${this.elementID} button {
+      border: 0px solid lightgray;
+      padding: 0.25em;
+      background-color: rgba(255,255,255,0.9);
+    }
+
+    #${this.elementID} .main-button:hover {
+      background-color: rgba(216,216,216,0.9);
+    }
+
+    #${this.elementID} .option-gradient-button:hover, #${this.elementID} .option-delete-button:hover {
+      background-color: rgba(216,216,216,0.9);
+    }
+
+    `));
+        };
+        options = options || {};
+        if (options.containerID) {
+            const cont = document.getElementById(options.containerID);
+            if (!cont) {
+                throw "Cannot create ColorGradientPicker. Component ID does not exist.";
+            }
+            this.container = cont;
+        }
+        else {
+            this.container = document.createElement("div");
+        }
+        this.isMobileMode = Boolean(options.isMobileMode);
+        if (this.isMobileMode) {
+            this.css_buttonWidth = "200px";
+            this.css_buttonHeight = "2.5em";
+            this.css_buttonFontSize = "1.25em";
+        }
+        this.baseID = Math.floor(Math.random() * 65535);
+        this.elementID = `color-gradient-selector-${this.baseID}`;
+        this.colorGradients =
+            typeof options.initialGradients === "undefined" ? ColorGradientSelector.DEFAULT_COLOR_GRADIENTS : options.initialGradients;
+        this.selectedGradientIndex = typeof options.selectedGradientIndex === "undefined" ? 0 : options.selectedGradientIndex;
+        document.head.appendChild(this.__createCustomStylesElement());
+        this.container.append(this._render());
+    } // END constructor
+    // TODO: implement this?
+    setGradients(gradients, selectedIndex) {
+        // First empty the container
+        this.__removeAllChildNodes(this.positioningContainerRef.current);
+        this.colorGradients = [];
+        this.colorGradientOptionRefs = [];
+        this.selectedGradientIndex = selectedIndex;
+        // Re-render button array
+        gradients.map((grad) => {
+            this.addGradient(grad);
+        });
+    }
+    addGradient(gradient) {
+        // Render a new button
+        const index = this.colorGradients.length;
+        const refMainContainer = NoReact.useRef();
+        const refActionButton = NoReact.useRef();
+        const refDeleteButton = NoReact.useRef();
+        this.__renderOptionButton(gradient, index, refMainContainer, refActionButton, refDeleteButton);
+        this.colorGradients.push(gradient);
+        this.colorGradientOptionRefs.push({ mainButton: refActionButton, deleteButton: refDeleteButton });
+        // Add to container
+        this.positioningContainerRef.current.appendChild(refMainContainer.current);
+    }
+    // +---------------------------------------------------------------------------------
+    // | A helper function to remove all child nodes.
+    // +-------------------------------
+    __removeAllChildNodes(node) {
+        while (node.lastChild) {
+            node.removeChild(node.lastChild);
+        }
+    }
+    /**
+     * Adds a new color gradient change listener to this ColorGradientPicker.
+     *
+     * @param {ColorGradientChangeListener} listener - The listener to add.
+     * @returns {boolean} True, if the listener was added and did not exist before.
+     */
+    addChangeListener(listener) {
+        for (var i = 0; i < this.installedChangeListeners.length; i++) {
+            if (this.installedChangeListeners[i] === listener) {
+                return false;
+            }
+        }
+        this.installedChangeListeners.push(listener);
+        return true;
+    }
+    /**
+     *
+     * @param {ColorGradientChangeListener} listener The listener to remove.
+     * @returns {boolean} True, if the listener existed and has been removed.
+     */
+    removeChangeListener(listener) {
+        for (var i = 0; i < this.installedChangeListeners.length; i++) {
+            if (this.installedChangeListeners[i] === listener) {
+                this.installedChangeListeners.splice(i, 1);
+                return true;
+            }
+        }
+        return false;
+    }
+    getSelectedColorGradient() {
+        return this.colorGradients[this.selectedGradientIndex];
+    }
+    __fireChangeEvent() {
+        const newColorGradient = this.getSelectedColorGradient();
+        for (var i = 0; i < this.installedChangeListeners.length; i++) {
+            this.installedChangeListeners[i](newColorGradient, this.selectedGradientIndex, this);
+        }
+    }
+    /**
+     * Creates a handler for click events on the main button.
+     *
+     * @returns
+     */
+    __mainButtonClickHandler() {
+        const _self = this;
+        return (_evt) => {
+            // _self.mainButtonContainerRef.current.style.visibility = "hidden";
+            _self.positioningContainerRef.current.style.visibility = _self.isDropdownOpen ? "hidden" : "visible";
+            _self.isDropdownOpen = !_self.isDropdownOpen;
+        };
+    }
+    /**
+     * Creates a handler for click events on one of the option button in the dropdown.
+     *
+     * @returns
+     */
+    __optionButtonClickHandler() {
+        const _self = this;
+        return (evt) => {
+            _self.positioningContainerRef.current.style.visibility = "hidden";
+            _self.isDropdownOpen = false;
+            const targetButton = evt.currentTarget;
+            const clickedIndex_raw = targetButton.dataset["gradientIndex"];
+            const clickedIndex = Number.parseInt(clickedIndex_raw);
+            console.log("clickedIndex", clickedIndex, clickedIndex_raw, targetButton.dataset, targetButton);
+            if (Number.isNaN(clickedIndex)) {
+                // Stop here. This is not what we want.
+                return;
+            }
+            // Find child: and set selected.
+            _self.__setSelectedIndex(clickedIndex);
+            _self.__fireChangeEvent();
+        };
+    }
+    __optionButtonDeleteHandler() {
+        const _self = this;
+        return (evt) => {
+            if (this.colorGradientOptionRefs.length === 1) {
+                // Keep the last record
+                return;
+            }
+            const targetButton = evt.currentTarget;
+            const clickedIndex_raw = targetButton.dataset["gradientIndex"];
+            const clickedIndex = Number.parseInt(clickedIndex_raw);
+            console.log("clickedIndex", clickedIndex, clickedIndex_raw, targetButton.dataset, targetButton);
+            if (Number.isNaN(clickedIndex)) {
+                // Stop here. This is not what we want.
+                return;
+            }
+            // Find child: and remove from DOM
+            console.log("this.colorGradientOptionRefs", this.colorGradientOptionRefs, "clickedIndex", clickedIndex);
+            const refPair = this.colorGradientOptionRefs[clickedIndex];
+            refPair.mainButton.current.parentElement.remove();
+            // Remove from logic
+            // Remove 1 element at the given index
+            this.colorGradients.splice(clickedIndex, 1);
+            this.colorGradientOptionRefs.splice(clickedIndex, 1);
+            // Update all following elements in the list.
+            this.__updateOptionDataSetIndices(clickedIndex);
+            if (this.selectedGradientIndex >= clickedIndex) {
+                // this.selectedGradientIndex--;
+                this.__setSelectedIndex(this.selectedGradientIndex);
+            }
+            console.log("All refs", this.colorGradientOptionRefs);
+        };
+    }
+    /**
+     * Once a slider element was added or removed then the following indices must be updated.
+     *
+     * @param {number} startIndex - The slider index to start updating at.
+     */
+    __updateOptionDataSetIndices(startIndex) {
+        // Update all elements to the right of the new elelemt
+        for (var i = startIndex; i < this.colorGradientOptionRefs.length; i++) {
+            this.colorGradientOptionRefs[i].mainButton.current.dataset["gradientIndex"] = `${i}`;
+            this.colorGradientOptionRefs[i].deleteButton.current.dataset["gradientIndex"] = `${i}`;
+        }
+    }
+    __setSelectedIndex(newSelectedIndex) {
+        for (var i = 0; i < this.colorGradientOptionRefs.length; i++) {
+            const ref = this.colorGradientOptionRefs[i].mainButton;
+            // Find child: and set selected.
+            ref.current.querySelectorAll(".option-gradient-radio-circle")[0].innerHTML = newSelectedIndex === i ? "🞊" : "🞅";
+        }
+        this.selectedGradientIndex = newSelectedIndex;
+        const selectedGradient = this.colorGradients[this.selectedGradientIndex];
+        // Display new gradient in the main button
+        this.__setMainButtonGradient(selectedGradient);
+    }
+    /**
+     * Sets the backround color of the main button (of this dropdown) element.
+     *
+     * @param {ColorGradient} gradient - The gradient color to display. Must not be null.
+     */
+    __setMainButtonGradient(gradient) {
+        const colorDisplay = this.mainButtonContainerRef.current.querySelectorAll(".main-button-gradient-display")[0];
+        colorDisplay.style["background"] = gradient.toColorGradientString();
+    }
+    /**
+     * Renders a new option button for the dropdown menu.
+     *
+     * @param {ColorGradient} gradient
+     * @returns {JsxElement}
+     */
+    __renderOptionButton(gradient, index, refMainContainer, refActionButton, refDelButton) {
+        return (NoReact.createElement("div", { sx: { d: "flex", flexDirection: "row" }, ref: refMainContainer },
+            NoReact.createElement("button", { className: "option-gradient-button", onClick: this.__optionButtonClickHandler(), style: {
+                    d: "flex",
+                    w: "100%",
+                    fontSize: this.css_buttonFontSize,
+                    minHeight: this.css_buttonHeight,
+                    maxHeight: this.css_buttonHeight
+                }, ref: refActionButton, "data-gradientIndex": `${index}` },
+                NoReact.createElement("div", { className: "option-gradient-radio-circle", sx: { w: "2em", flexShrink: 2, alignContent: "center" } }, index === 0 ? "🞊" : "🞅"),
+                NoReact.createElement("div", { sx: { w: "calc( 100% - 2em )", mr: "1em", background: gradient.toColorGradientString() } }, "\u00A0")),
+            NoReact.createElement("button", { classname: "option-delete-button", sx: { fontSize: this.css_buttonFontSize, minHeight: this.css_buttonHeight, maxHeight: this.css_buttonHeight }, onClick: this.__optionButtonDeleteHandler(), "data-gradientIndex": `${index}`, ref: refDelButton },
+                NoReact.createElement("div", { sx: { w: "2em", flexShrink: 2, alignContent: "center" } }, "\uD83D\uDDD1"))));
+    }
+    /**
+     * Creates a new array of option buttons (refs).
+     * @returns
+     */
+    _renderAllOptionButtons() {
+        const _self = this;
+        // First clear all references
+        _self.colorGradientOptionRefs = [];
+        return this.colorGradients.map((colorGradient, index) => {
+            // console.log("num", num, index);
+            const refMainContainer = NoReact.useRef();
+            const refActionButton = NoReact.useRef();
+            const refDelButton = NoReact.useRef();
+            _self.colorGradientOptionRefs.push({ mainButton: refActionButton, deleteButton: refDelButton });
+            return this.__renderOptionButton(colorGradient, index, refMainContainer, refActionButton, refDelButton);
+        });
+    }
+    /**
+     * Init the container contents.
+     *
+     * @private
+     */
+    _render() {
+        const _self = this;
+        // console.log("Rendering ...", NoReact);
+        this.containerRef = NoReact.useRef();
+        this.mainButtonContainerRef = NoReact.useRef();
+        this.positioningContainerRef = NoReact.useRef();
+        const selectedGradient = this.colorGradients[this.selectedGradientIndex];
+        return (NoReact.createElement("div", { id: this.elementID, className: "color-gradient-selector", style: { minWidth: this.css_buttonWidth, maxWidth: this.css_buttonWidth, pos: "relative" }, ref: this.containerRef },
+            NoReact.createElement("button", { className: "main-button", ref: this.mainButtonContainerRef, style: {
+                    d: "flex",
+                    minWidth: this.css_buttonWidth,
+                    maxWidth: this.css_buttonWidth,
+                    minHeight: this.css_buttonHeight,
+                    maxHeight: this.css_buttonHeight
+                }, onClick: this.__mainButtonClickHandler() },
+                NoReact.createElement("div", { className: "main-button-gradient-display", sx: { w: `calc( 100% - ${this.css_buttonFontSize} )`, background: selectedGradient.toColorGradientString() } }, "\u00A0"),
+                NoReact.createElement("div", { sx: { w: this.css_buttonHeight, flexShrink: 2, fontSize: this.css_buttonFontSize } }, "\u25BE")),
+            NoReact.createElement("div", { className: "positioning-container", ref: this.positioningContainerRef, style: {
+                    minWidth: this.css_buttonWidth,
+                    maxHeight: "25vh",
+                    overflowY: "auto",
+                    v: "hidden",
+                    d: "flex",
+                    fd: "column",
+                    pos: "absolute",
+                    l: 0,
+                    zIndex: 999
+                } }, _self._renderAllOptionButtons())));
+    } // END function render()
+}
+ColorGradientSelector.DEFAULT_COLOR_GRADIENTS = [
+    ColorGradient.createDefault(),
+    ColorGradient.createFrom(Color.Red, Color.Green),
+    ColorGradient.createFrom(Color.Blue, Color.Gold)
+];
+//# sourceMappingURL=ColorGradientSelector.js.map

package/src/esm/utils/dom/components/ColorGradientSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorGradientSelector.js","sourceRoot":"","sources":["../../../../ts/utils/dom/components/ColorGradientSelector.tsx"],"names":[],"mappings":"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"}

package/src/esm/utils/dom/components/Test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author  Ikaros Kappler
+ * @date    2025-06-25
+ * @version 1.0.0
+ */
+import { JsxElement } from "typescript";
+export declare const Test: (name: string) => JsxElement;

package/src/esm/utils/dom/components/Test.js

@@ -0,0 +1,26 @@
+/**
+ * @author  Ikaros Kappler
+ * @date    2025-06-25
+ * @version 1.0.0
+ */
+import * as NoReact from "noreact";
+export const Test = (name) => {
+    const click1 = () => {
+        console.log("First clicked");
+    };
+    const click2 = () => {
+        console.log("Second clicked");
+    };
+    const mouseEnter = (event) => {
+        event.target.style["background-color"] = "grey";
+    };
+    const mouseOut = (event) => {
+        event.target.style["background-color"] = "DeepSkyBlue";
+    };
+    return (NoReact.createElement("div", { className: "NoReact-main" },
+        "Hello ",
+        name,
+        NoReact.createElement("div", { className: "NoReact-child-1", onClick: click1 }, "Hello Nested"),
+        NoReact.createElement("div", { className: "NoReact-child-2", onClick: click2, onMouseEnter: mouseEnter, onMouseOut: mouseOut, style: { backgroundColor: "yellow" } }, "Hello Nested 2")));
+};
+//# sourceMappingURL=Test.js.map

package/src/esm/utils/dom/components/Test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Test.js","sourceRoot":"","sources":["../../../../ts/utils/dom/components/Test.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AAGnC,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,IAAY,EAAc,EAAE;IAC/C,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAY,EAAE,EAAE;QACjC,KAAK,CAAC,MAAyB,CAAC,KAAK,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC;IACtE,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;QAC/B,KAAK,CAAC,MAAyB,CAAC,KAAK,CAAC,kBAAkB,CAAC,GAAG,aAAa,CAAC;IAC7E,CAAC,CAAC;IAEF,OAAO,CACL,+BAAK,SAAS,EAAC,cAAc;;QACpB,IAAI;QACX,+BAAK,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,mBAE1C;QACN,+BACE,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,UAAU,EACxB,UAAU,EAAE,QAAQ,EACpB,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,qBAGhC,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/src/esm/utils/dom/guiSizeToggler.js

@@ -21,7 +21,7 @@ const applyGuiSize = (gui, guiDoubleSize, cssProps) => {
         gui.domElement.style["transform-origin"] = "100% 0%";
     }
     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)";
     }

package/src/esm/utils/dom/guiSizeToggler.js.map

@@ -1 +1 @@
-{"version":3,"file":"guiSizeToggler.js","sourceRoot":"","sources":["../../../ts/utils/dom/guiSizeToggler.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAQH;;;;GAIG;AACH,MAAM,YAAY,GAAG,CAAC,GAAQ,EAAE,aAAsB,EAAE,QAAgC,EAAE,EAAE;IAC1F,IAAI,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,CAAC;QAC3D,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,kBAAkB,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACzE,CAAC;SAAM,CAAC;QACN,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC;IACvD,CAAC;IAED,MAAM,SAAS,GAAG,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAEtG,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IACpC,IAAI,aAAa,EAAE,CAAC;QAClB,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,YAAY,CAAC;IAC/D,CAAC;SAAM,CAAC;QACN,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,YAAY,CAAC;IAC/D,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,GAAQ,EAAE,MAAsB,EAAE,QAAgC,EAAE,EAAE;IACnG,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,gBAAgB,CAAC;IACtD,OAAO;QACL,MAAM,EAAE;YACN,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC7D,CAAC;KACF,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"guiSizeToggler.js","sourceRoot":"","sources":["../../../ts/utils/dom/guiSizeToggler.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAQH;;;;GAIG;AACH,MAAM,YAAY,GAAG,CAAC,GAAQ,EAAE,aAAsB,EAAE,QAAgC,EAAE,EAAE;IAC1F,IAAI,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,CAAC;QAC3D,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,kBAAkB,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACzE,CAAC;SAAM,CAAC;QACN,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC;IACvD,CAAC;IAED,MAAM,SAAS,GAAG,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAEtG,uCAAuC;IACvC,IAAI,aAAa,EAAE,CAAC;QAClB,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,YAAY,CAAC;IAC/D,CAAC;SAAM,CAAC;QACN,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,YAAY,CAAC;IAC/D,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,GAAQ,EAAE,MAAsB,EAAE,QAAgC,EAAE,EAAE;IACnG,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,gBAAgB,CAAC;IACtD,OAAO;QACL,MAAM,EAAE;YACN,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC7D,CAAC;KACF,CAAC;AACJ,CAAC,CAAC"}

package/src/esm/utils/helpers/BezierPathInteractionHelper.d.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
@@ -34,6 +37,7 @@ import { BezierPath } from "../../BezierPath";
 import { PlotBoilerplate } from "../../PlotBoilerplate";
 import { VertListener } from "../../VertexListeners";
 import { Vertex } from "../../Vertex";
+import { DrawLib, IShapeInteractionHelper } from "../../interfaces";
 /**
  * Handler type for mouse-pointer-moved listeners.
  */
@@ -73,7 +77,7 @@ interface HelperOptions {
  *
  * @public
  **/
-export declare class BezierPathInteractionHelper {
+export declare class BezierPathInteractionHelper implements IShapeInteractionHelper {
     /**
      * @member {PlotBoilerplate} pb
      * @memberof BezierPathInteractionHelper
@@ -170,8 +174,10 @@ export declare 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(): void;
+    drawHandleLines(draw?: DrawLib<any>, fill?: DrawLib<any>): void;
     /**
      * 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

package/src/esm/utils/helpers/BezierPathInteractionHelper.js

@@ -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
@@ -187,8 +190,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, fill) {
+        draw = draw || this.pb.draw;
+        fill = fill || this.pb.fill;
         this.paths.forEach((path) => {
             path.bezierCurves.forEach((curve) => {
                 this.pb.draw.line(curve.startPoint, curve.startControlPoint, "rgba(64,192,128,0.333)", 1.0, {
@@ -342,6 +349,9 @@ export class BezierPathInteractionHelper {
     // | Touch and mouse events should call this fuction when the pointer was moved.
     // +-------------------------------
     _handleMoveEvent(posX, posY) {
+        const oldA = this.currentA.clone();
+        const oldB = this.currentB.clone();
+        const oldDistance = this.currentDistance;
         const point = this.pb.transformMousePosition(posX, posY);
         this.currentB.set(point);
         this._updateMinDistance();
@@ -352,8 +362,12 @@ 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();
+        }
     }
     // +---------------------------------------------------------------------------------
     // | This is called when the mouse pointer leaves the canvas or
@@ -369,23 +383,15 @@ export class BezierPathInteractionHelper {
     _installTouchListener() {
         var _self = this;
         const afProps = {
-            // Todo: which event types does AlloyFinger use?
-            // touchStart: function (_event: TouchEvent) {
-            //   _self.mouseIsOver = true;
-            // },
-            // /* TouchMoveEvent , AFTouchEvent<"touchStart"> */
             touchStart: function (_event) {
                 _self.mouseIsOver = true;
             },
             touchMove: function (event) {
-                // 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) {
                 _self.mouseIsOver = false;
                 _self._clearMoveEvent();
             }
@@ -472,8 +478,9 @@ export class BezierPathInteractionHelper {
     // | Update the min distance from point `line.b` to the curve. And redraw.
     // +-------------------------------
     _updateMinDistance() {
-        if (this.paths.length == 0)
+        if (this.paths.length == 0) {
             return;
+        }
         let pathIndex = -1;
         let minDist = Number.MAX_VALUE;
         let closestPoint = null;