plotboilerplate 1.23.0 → 1.23.2

package/src/esm/interfaces/core.d.ts

@@ -19,6 +19,7 @@
  * @modified 2022-11-23 Added `drawRaster` to the `Config` interface.
  * @modified 2023-02-10 All non-function attributes of the `Config` interface are now mandatory.
  * @modified 2023-09-29 Added the `randomPoint(...)` function declaration to the IBounds interface.
+ * @modified 2024-08-25 Added the `CSSBackdropFilterParams` params to the global params (all optional).
  **/
 import { Vertex } from "../Vertex";
 import { Vector } from "../Vector";
@@ -34,6 +35,7 @@ import { Line } from "../Line";
 import { PlotBoilerplate } from "../PlotBoilerplate";
 import { DrawLib } from "./DrawLib";
 import { PBText } from "../PBText";
+import { CSSBackdropFilterParams } from "./externals";
 /**
  * @classdesc Coordinates (x,y) on the plane.
  *
@@ -93,7 +95,7 @@ export interface CanvasWrapper {
 /**
  * The config that's used by PB.
  */
-export interface Config extends Record<string, boolean | number | string | Function | HTMLCanvasElement | SVGElement | undefined> {
+export interface Config extends Record<string, boolean | number | string | Function | HTMLCanvasElement | SVGElement | undefined>, Pick<CSSBackdropFilterParams, "isBackdropFiltersEnabled"> {
     canvas: HTMLCanvasElement | SVGElement | string;
     fullSize: boolean;
     fitToParent: boolean;
@@ -137,7 +139,7 @@ export interface Config extends Record<string, boolean | number | string | Funct
 /**
  * For initialization the constructor needs a mix of config and draw-settings.
  */
-export interface PBParams extends Config {
+export interface PBParams extends Config, CSSBackdropFilterParams {
     title?: string;
 }
 export interface DrawSettings {

package/src/esm/interfaces/core.js

@@ -19,6 +19,7 @@
  * @modified 2022-11-23 Added `drawRaster` to the `Config` interface.
  * @modified 2023-02-10 All non-function attributes of the `Config` interface are now mandatory.
  * @modified 2023-09-29 Added the `randomPoint(...)` function declaration to the IBounds interface.
+ * @modified 2024-08-25 Added the `CSSBackdropFilterParams` params to the global params (all optional).
  **/
 export {};
 //# sourceMappingURL=core.js.map

package/src/esm/interfaces/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","sourceRoot":"","sources":["../../ts/interfaces/core.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;IAqBI"}
+{"version":3,"file":"core.js","sourceRoot":"","sources":["../../ts/interfaces/core.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;IAsBI"}

package/src/esm/interfaces/externals.d.ts

@@ -12,3 +12,45 @@ export interface DatGuiProps {
     closed?: boolean;
     closeOnTop?: boolean;
 }
+export interface GUI {
+    domElement: HTMLElement;
+}
+export interface LilGuiProps {
+    name?: string;
+    load?: object;
+    parent?: dat.GUI;
+    autoPlace?: boolean;
+    hideable?: boolean;
+    closed?: boolean;
+    closeOnTop?: boolean;
+}
+/**
+ * This is just for the backdrop-filter vaules (CSS after effects filters). They are not directly
+ * used by PB but can be passed through by the config/params.
+ */
+export interface CSSBackdropFilterParams {
+    isBackdropFiltersEnabled?: boolean;
+    effectFilterColor?: string;
+    isEffectsColorEnabled?: boolean;
+    opacity?: number;
+    isOpacityEnabled?: boolean;
+    invert?: number;
+    isInvertEnabled?: boolean;
+    sepia?: number;
+    isSepiaEnabled?: boolean;
+    blur?: number;
+    isBlurEnabled?: boolean;
+    brightness?: number;
+    isBrightnessEnabled?: boolean;
+    contrast?: number;
+    isContrastEnabled?: boolean;
+    dropShadow?: number;
+    dropShadowColor?: string;
+    isDropShadowEnabled?: boolean;
+    grayscale?: number;
+    isGrayscaleEnabled?: boolean;
+    hueRotate?: number;
+    isHueRotateEnabled?: boolean;
+    saturate?: number;
+    isSaturateEnabled?: boolean;
+}

package/src/esm/utils/InitializationObserver.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Approach to observe objects from other scripts to be initialized.
+ *
+ * @author  Ikaros Kappler
+ * @date    2024-07-08
+ * @version 1.0.0
+ */
+export declare class InitializationObserver<T, E> {
+    private _acceptRejectPairs;
+    private _timeoutMessage;
+    private _initializedValue;
+    private _isInitialized;
+    constructor(timeout: number, timeoutMessage?: E);
+    accept(value: T): void;
+    private _fireAccept;
+    private _fireReject;
+    waitForInitialized(): Promise<T>;
+}

package/src/esm/utils/InitializationObserver.js

@@ -0,0 +1,57 @@
+/**
+ * Approach to observe objects from other scripts to be initialized.
+ *
+ * @author  Ikaros Kappler
+ * @date    2024-07-08
+ * @version 1.0.0
+ */
+export class InitializationObserver {
+    constructor(timeout, timeoutMessage) {
+        this._acceptRejectPairs = [];
+        this._timeoutMessage = timeoutMessage !== null && timeoutMessage !== void 0 ? timeoutMessage : null;
+        globalThis.setTimeout(() => {
+            var _a;
+            if (this._isInitialized) {
+                return; // NOOP
+            }
+            // else
+            if (!this._timeoutMessage) {
+                console.warn("Failed to initialize object. Reason unknown.");
+            }
+            this._fireReject((_a = this._timeoutMessage) !== null && _a !== void 0 ? _a : null);
+        }, timeout);
+    }
+    accept(value) {
+        if (this._isInitialized) {
+            return;
+        }
+        this._isInitialized = true;
+        this._initializedValue = value;
+        this._fireAccept(value);
+    }
+    _fireAccept(value) {
+        this._acceptRejectPairs.forEach(pair => {
+            pair.accept(value);
+        });
+    }
+    _fireReject(error) {
+        this._acceptRejectPairs.forEach(pair => {
+            pair.reject(error);
+        });
+    }
+    waitForInitialized() {
+        const _self = this;
+        // If the value is already present, then accept immediately
+        if (_self._isInitialized) {
+            return new Promise((accept, reject) => {
+                accept(_self._initializedValue);
+            });
+        }
+        else {
+            return new Promise((accept, reject) => {
+                _self._acceptRejectPairs.push({ accept, reject });
+            });
+        }
+    }
+}
+//# sourceMappingURL=InitializationObserver.js.map

package/src/esm/utils/InitializationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InitializationObserver.js","sourceRoot":"","sources":["../../ts/utils/InitializationObserver.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAOH,MAAM,OAAO,sBAAsB;IAMjC,YAAY,OAAe,EAAE,cAAkB;QAC7C,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;QAC7B,IAAI,CAAC,eAAe,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,IAAI,CAAC;QAE9C,UAAU,CAAC,UAAU,CAAC,GAAG,EAAE;;YACzB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,OAAO,CAAC,OAAO;YACjB,CAAC;YACD,OAAO;YACP,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC1B,OAAO,CAAC,IAAI,CAAC,8CAA8C,CAAC,CAAC;YAC/D,CAAC;YACD,IAAI,CAAC,WAAW,CAAC,MAAA,IAAI,CAAC,eAAe,mCAAI,IAAI,CAAC,CAAC;QACjD,CAAC,EAAE,OAAO,CAAC,CAAC;IACd,CAAC;IAEM,MAAM,CAAC,KAAQ;QACpB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAEO,WAAW,CAAC,KAAQ;QAC1B,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACrC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,KAAe;QACjC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACrC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,kBAAkB;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC;QACnB,2DAA2D;QAC3D,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,IAAI,OAAO,CAAI,CAAC,MAA0B,EAAE,MAAiC,EAAE,EAAE;gBACtF,MAAM,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;YAClC,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,OAAO,CAAI,CAAC,MAA0B,EAAE,MAAiC,EAAE,EAAE;gBACtF,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;YACpD,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;CACF"}

package/src/esm/utils/Params.d.ts

@@ -2,13 +2,15 @@
  * Wraps a Record<string,string> and adds type conversion methods (developed this in
  * some other project) and added this here (2023-10-28).
  *
- * @author  Ikars Kappler
- * @version 1.0.0
- * @date    2023-03-13
+ * @author   Ikars Kappler
+ * @version  1.0.0
+ * @date     2023-03-13
+ * @modified 2024-08-26 Added the `hasParam` method.
  */
 export declare class Params {
     baseParams: Record<string, string>;
     constructor(baseParams: Record<string, string>);
+    hasParam(name: string): boolean;
     getString(name: string, fallback: string): string;
     getNumber(name: string, fallback: number): number;
     getBoolean(name: string, fallback: boolean): boolean;

package/src/esm/utils/Params.js

@@ -2,14 +2,18 @@
  * Wraps a Record<string,string> and adds type conversion methods (developed this in
  * some other project) and added this here (2023-10-28).
  *
- * @author  Ikars Kappler
- * @version 1.0.0
- * @date    2023-03-13
+ * @author   Ikars Kappler
+ * @version  1.0.0
+ * @date     2023-03-13
+ * @modified 2024-08-26 Added the `hasParam` method.
  */
 export class Params {
     constructor(baseParams) {
         this.baseParams = baseParams;
     }
+    hasParam(name) {
+        return this.baseParams.hasOwnProperty(name);
+    }
     getString(name, fallback) {
         let value = this.baseParams[name];
         if (typeof value === "undefined" || !value || (value = value.trim()).length === 0) {

package/src/esm/utils/Params.js.map

@@ -1 +1 @@
-{"version":3,"file":"Params.js","sourceRoot":"","sources":["../../ts/utils/Params.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,OAAO,MAAM;IAGjB,YAAY,UAAkC;QAC5C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,SAAS,CAAC,IAAY,EAAE,QAAgB;QACtC,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClF,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,SAAS,CAAC,IAAY,EAAE,QAAgB;QACtC,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClF,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAED,UAAU,CAAC,IAAY,EAAE,QAAiB;QACxC,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClF,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,KAAK,GAAG,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAClC,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;YAC7G,OAAO,IAAI,CAAC;QACd,CAAC;aAAM,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC;YACnH,OAAO,KAAK,CAAC;QACf,CAAC;aAAM,CAAC;YACN,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;CACF"}
+{"version":3,"file":"Params.js","sourceRoot":"","sources":["../../ts/utils/Params.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,OAAO,MAAM;IAGjB,YAAY,UAAkC;QAC5C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,QAAQ,CAAC,IAAY;QACnB,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,SAAS,CAAC,IAAY,EAAE,QAAgB;QACtC,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClF,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,SAAS,CAAC,IAAY,EAAE,QAAgB;QACtC,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClF,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAED,UAAU,CAAC,IAAY,EAAE,QAAiB;QACxC,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClF,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,KAAK,GAAG,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAClC,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;YAC7G,OAAO,IAAI,CAAC;QACd,CAAC;aAAM,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC;YACnH,OAAO,KAAK,CAAC;QACf,CAAC;aAAM,CAAC;YACN,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;CACF"}

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

@@ -0,0 +1,17 @@
+/**
+ * @requires lil-gui
+ *
+ * @author   Ikaros Kappler
+ * @date     2021-12-13
+ * @modified 2022-01-10
+ * @modified 2024-06-25 Ported to typescript and moved to utils/dom (was located inside demos before).
+ * @version  1.1.0
+ */
+import { GUI } from "../../interfaces/externals";
+interface ITogglerConfig {
+    guiDoubleSize?: boolean;
+}
+export declare const guiSizeToggler: (gui: GUI, config: ITogglerConfig, cssProps: Record<string, string>) => {
+    update: () => void;
+};
+export {};

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

@@ -0,0 +1,38 @@
+/**
+ * @requires lil-gui
+ *
+ * @author   Ikaros Kappler
+ * @date     2021-12-13
+ * @modified 2022-01-10
+ * @modified 2024-06-25 Ported to typescript and moved to utils/dom (was located inside demos before).
+ * @version  1.1.0
+ */
+/**
+ * @param {GUI} gui - The GUI (compatible with dat.gui and lil-gui).
+ * @param {boolean} guiDoubleSize - True or false.
+ * @param {Record<string,string>} cssProps - The CSS props to use.
+ */
+const applyGuiSize = (gui, guiDoubleSize, cssProps) => {
+    if (cssProps && cssProps.hasOwnProperty("transformOrigin")) {
+        gui.domElement.style["transform-origin"] = cssProps["transformOrigin"];
+    }
+    else {
+        gui.domElement.style["transform-origin"] = "100% 0%";
+    }
+    const transform = cssProps && cssProps.hasOwnProperty("transform") ? cssProps["transform"] + " " : "";
+    console.log("transform", transform);
+    if (guiDoubleSize) {
+        gui.domElement.style["transform"] = transform + "scale(2.0)";
+    }
+    else {
+        gui.domElement.style["transform"] = transform + "scale(1.0)";
+    }
+};
+export const guiSizeToggler /* gst */ = (gui, config, cssProps) => {
+    return {
+        update: function () {
+            applyGuiSize(gui, Boolean(config.guiDoubleSize), cssProps);
+        }
+    };
+};
+//# sourceMappingURL=guiSizeToggler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"guiSizeToggler.js","sourceRoot":"","sources":["../../../ts/utils/dom/guiSizeToggler.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;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,CAAC,SAAS,GAAG,CAAC,GAAQ,EAAE,MAAsB,EAAE,QAAgC,EAAE,EAAE;IAC7G,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/gup.d.ts

@@ -9,5 +9,6 @@
  * Ported to typescript.
  * @date 2021-05-21
  * @modified 2024-03-10 Fixed some type for Typescript 5 compatibility.
+ * @modified 2024-08-26 Decoding URI components in GET params.
  */
 export declare const gup: () => Record<string, string>;

package/src/esm/utils/gup.js

@@ -9,6 +9,7 @@
  * Ported to typescript.
  * @date 2021-05-21
  * @modified 2024-03-10 Fixed some type for Typescript 5 compatibility.
+ * @modified 2024-08-26 Decoding URI components in GET params.
  */
 // Get the URI GET params as an assoc.
 //
@@ -18,7 +19,8 @@
 export const gup = () => {
     const vars = {};
     globalThis.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, (_m, key, value) => {
-        return (vars[key] = value);
+        const keyName = key;
+        return (vars[decodeURIComponent(keyName)] = value);
     });
     return vars;
 };

package/src/esm/utils/gup.js.map

@@ -1 +1 @@
-{"version":3,"file":"gup.js","sourceRoot":"","sources":["../../ts/utils/gup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,sCAAsC;AACtC,EAAE;AACF,6BAA6B;AAC7B,WAAW;AACX,sKAAsK;AACtK,MAAM,CAAC,MAAM,GAAG,GAAG,GAA2B,EAAE;IAC9C,MAAM,IAAI,GAA2B,EAAE,CAAC;IACxC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,yBAAyB,EAAE,CAAC,EAAU,EAAE,GAAW,EAAE,KAAa,EAAU,EAAE;QAC7G,OAAO,CAAC,IAAI,CAAC,GAAmB,CAAC,GAAG,KAAK,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IACH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}
+{"version":3,"file":"gup.js","sourceRoot":"","sources":["../../ts/utils/gup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,sCAAsC;AACtC,EAAE;AACF,6BAA6B;AAC7B,WAAW;AACX,sKAAsK;AACtK,MAAM,CAAC,MAAM,GAAG,GAAG,GAA2B,EAAE;IAC9C,MAAM,IAAI,GAA2B,EAAE,CAAC;IACxC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,yBAAyB,EAAE,CAAC,EAAU,EAAE,GAAW,EAAE,KAAa,EAAU,EAAE;QAC7G,MAAM,OAAO,GAAW,GAAmB,CAAC;QAC5C,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IACH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/src/index-gl.js

@@ -15,6 +15,8 @@
 
   // Fetch the GET params
   let GUP = gup();
+  var isDarkmode = detectDarkMode(GUP);
+  var isDarkmode = detectDarkMode(GUP);
 
   window.addEventListener("load", function () {
     // All config params are optional.
@@ -40,7 +42,7 @@
           autoAdjustOffset: true,
           offsetAdjustXPercent: 50,
           offsetAdjustYPercent: 50,
-          backgroundColor: "#ffffff",
+          backgroundColor: isDarkmode ? "#000000" : "#ffffff",
           enableMouse: true,
           enableTouch: true,
           enableKeys: true,

package/src/index.js

@@ -23,6 +23,7 @@
     window.pbInitialized = true;
     // Fetch the GET params
     let GUP = gup();
+    var isDarkmode = detectDarkMode(GUP);
     var isInitialized = false;
 
     // All config params are optional.
@@ -49,7 +50,7 @@
           offsetAdjustXPercent: 50,
           offsetAdjustYPercent: 50,
           autoDetectRetina: false,
-          backgroundColor: "#ffffff",
+          backgroundColor: isDarkmode ? "#000000" : "#ffffff",
           enableMouse: true,
           enableTouch: true,
           enableKeys: true,

package/src/ts/PlotBoilerplate.ts

@@ -83,7 +83,10 @@
  * @modified 2023-02-10 Cleaning up most type errors in the main class (mostly null checks).
  * @modified 2023-02-10 Adding `enableZoom` and `enablePan` (both default true) to have the option to disable these functions.
  * @modified 2023-09-29 Adding proper dicionary key and value types to the params of `PlotBoilerplate.utils.safeMergeByKeys` (was `object` before).
- * @version  1.17.3
+ * @modified 2024-07-08 Adding `PlotBoilerplate.getGUI()` to retrieve the GUI instance.
+ * @modified 2024-08-25 Extending main class `PlotBoilerplate` optional param `isBackdropFiltersEnabled`.
+ *
+ * @version  1.19.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -126,7 +129,8 @@ import {
   SVGPathParams,
   XYCoords,
   XYDimension,
-  DatGuiProps
+  DatGuiProps, // DEPRECATED. Please do not use any more.
+  LilGuiProps
 } from "./interfaces";
 import { PBText } from "./PBText";
 import { AlloyFingerOptions } from "alloyfinger-typescript/src/cjs/alloy_finger";
@@ -326,6 +330,11 @@ export class PlotBoilerplate {
    */
   private renderTime: number = 0;
 
+  /**
+   * A storage variable for retrieving the GUI instance once it was created.
+   */
+  private _gui: GUI | null = null;
+
   /**
    * The constructor.
    *
@@ -461,7 +470,9 @@ export class PlotBoilerplate {
       enablePan: f.bool(config, "enablePan", true), // default=true
 
       // Experimental (and unfinished)
-      enableGL: f.bool(config, "enableGL", false)
+      enableGL: f.bool(config, "enableGL", false),
+
+      isBackdropFiltersEnabled: f.bool(config, "isBackdropFiltersEnabled", true)
     }; // END confog
 
     /**
@@ -706,7 +717,10 @@ export class PlotBoilerplate {
     if (typeof globalThis["saveAs" as keyof Object] !== "function") {
       throw "Cannot save file; did you load the ./utils/savefile helper function and the eligrey/SaveFile library?";
     }
-    var _saveAs : (blob:Blob, filename:string) => void = globalThis["saveAs" as keyof Object] as (blob:Blob, filename:string) => void;
+    var _saveAs: (blob: Blob, filename: string) => void = globalThis["saveAs" as keyof Object] as (
+      blob: Blob,
+      filename: string
+    ) => void;
     _saveAs(blob, "plotboilerplate.svg");
   }
 
@@ -2024,7 +2038,10 @@ export class PlotBoilerplate {
       };
 
       // Make PB work together with both, AlloyFinger as a esm module or a commonjs function.
-      if (typeof globalThis["AlloyFinger" as keyof Object] === "function" || typeof globalThis["createAlloyFinger" as keyof Object] === "function") {
+      if (
+        typeof globalThis["AlloyFinger" as keyof Object] === "function" ||
+        typeof globalThis["createAlloyFinger" as keyof Object] === "function"
+      ) {
         try {
           var touchMovePos: Vertex | undefined | null = null;
           var touchDownPos: Vertex | undefined | null = null;
@@ -2162,7 +2179,10 @@ export class PlotBoilerplate {
           } as unknown as AlloyFingerOptions; // END afProps
           if (window["createAlloyFinger" as keyof Object]) {
             // window["createAlloyFinger"](this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
-            const createAlloyFinger = window["createAlloyFinger" as keyof Object] as (elem:HTMLElement|SVGElement, afProps:AlloyFingerOptions ) => void;
+            const createAlloyFinger = window["createAlloyFinger" as keyof Object] as (
+              elem: HTMLElement | SVGElement,
+              afProps: AlloyFingerOptions
+            ) => void;
             createAlloyFinger(this.eventCatcher ? this.eventCatcher : this.canvas, afProps);
           } else {
             /* tslint:disable-next-line */
@@ -2214,19 +2234,30 @@ export class PlotBoilerplate {
    * @memberof PlotBoilerplate
    * @return {dat.gui.GUI}
    **/
-  createGUI(props?: DatGuiProps): GUI {
+  createGUI(props?: DatGuiProps | LilGuiProps): GUI {
     // This function moved to the helper utils.
     // We do not want to include the whole dat.GUI package.
-    const utils: {createGUI? : (pb:PlotBoilerplate,props:DatGuiProps|undefined)=>GUI } | undefined = globalThis["utils" as keyof Object] as any as {createGUI? : (pb:PlotBoilerplate,props:DatGuiProps|undefined)=>GUI } | undefined;
+    const utils: { createGUI?: (pb: PlotBoilerplate, props: DatGuiProps | undefined) => GUI } | undefined = globalThis[
+      "utils" as keyof Object
+    ] as any as { createGUI?: (pb: PlotBoilerplate, props: DatGuiProps | undefined) => GUI } | undefined;
     // if (globalThis["utils"] && typeof globalThis["utils"].createGUI == "function") {
     //   return (globalThis["utils" as keyof Object] as any as ({createGUI : (pb:PlotBoilerplate,props:DatGuiProps|undefined)=>GUI })).createGUI(this, props);
     if (utils && typeof utils.createGUI === "function") {
-      return utils.createGUI(this, props);
-    } else { 
-      throw "Cannot create dat.GUI instance; did you load the ./utils/creategui helper function an the dat.GUI library?";
+      return (this._gui = utils.createGUI(this, props));
+    } else {
+      throw "Cannot create dat.GUI or lil-gui instance; did you load the ./utils/creategui helper function an the dat.GUI/lil-gui library?";
     }
   }
 
+  /**
+   * Retriebe the GUI once it was created. If the `createGUI` method was not called or failed to create any
+   * GUI then null is returned.
+   * @returns {GUI | null}
+   */
+  getGUI(): GUI | null {
+    return this._gui;
+  }
+
   /**
    * A set of helper functions.
    **/

package/src/ts/drawutilssvg.ts

@@ -46,7 +46,8 @@
  * @modified 2023-10-04 Adding `strokeOptions` param to these draw function: line, arrow, cubicBezierArrow, cubicBezier, cubicBezierPath, circle, circleArc, ellipse, square, rect, polygon, polyline.
  * @modified 2024-01-30 Fixing an issue with immutable style sets; changes to the global draw config did not reflect here (do now).
  * @modified 2024-03-10 Fixing some types for Typescript 5 compatibility.
- * @version  1.6.9
+ * @modified 2024-07-24 Caching custom style defs in a private buffer variable.
+ * @version  1.6.10
  **/
 
 import { CircleSector } from "./CircleSector";
@@ -202,6 +203,11 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    */
   private drawConfig: DrawConfig;
 
+  /**
+   * A buffer element for custom style defs (will be re-generated on each draw cycle).
+   */
+  private customStyleDefs: Map<string, string>;
+
   /**
    * Passed from primary to secondary instance.
    */
@@ -312,6 +318,15 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
         console.warn(`Warning: your draw config is missing the key '${k}' which is required.`);
       }
     }
+
+    if (this.customStyleDefs) {
+      rules.push("\n/* Custom styles */\n");
+      this.customStyleDefs.forEach((value: string, key: string) => {
+        rules.push(key + " { " + value + " }");
+      });
+      // this.nodeStyle.innerHTML += "\n/* Custom styles */\n" + rules.join("\n");
+    }
+
     this.nodeStyle.innerHTML = rules.join("\n");
   }
 
@@ -337,11 +352,7 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    * @param {Map<string,string>} defs
    */
   addCustomStyleDefs(defs: Map<string, string>) {
-    const buffer: string[] = [];
-    defs.forEach((value: string, key: string) => {
-      buffer.push(key + " { " + value + " }");
-    });
-    this.nodeStyle.innerHTML += "\n/* Custom styles */\n" + buffer.join("\n");
+    this.customStyleDefs = defs;
   }
 
   /**

package/src/ts/interfaces/core.ts

@@ -19,6 +19,7 @@
  * @modified 2022-11-23 Added `drawRaster` to the `Config` interface.
  * @modified 2023-02-10 All non-function attributes of the `Config` interface are now mandatory.
  * @modified 2023-09-29 Added the `randomPoint(...)` function declaration to the IBounds interface.
+ * @modified 2024-08-25 Added the `CSSBackdropFilterParams` params to the global params (all optional).
  **/
 
 import { Vertex } from "../Vertex";
@@ -35,6 +36,7 @@ import { Line } from "../Line";
 import { PlotBoilerplate } from "../PlotBoilerplate";
 import { DrawLib } from "./DrawLib";
 import { PBText } from "../PBText";
+import { CSSBackdropFilterParams } from "./externals";
 
 /**
  * @classdesc Coordinates (x,y) on the plane.
@@ -113,7 +115,8 @@ export interface CanvasWrapper {
  * The config that's used by PB.
  */
 export interface Config
-  extends Record<string, boolean | number | string | Function | HTMLCanvasElement | SVGElement | undefined> {
+  extends Record<string, boolean | number | string | Function | HTMLCanvasElement | SVGElement | undefined>,
+    Pick<CSSBackdropFilterParams, "isBackdropFiltersEnabled"> {
   canvas: HTMLCanvasElement | SVGElement | string; //  Your canvas element in the DOM (required).
   fullSize: boolean; // If set to true the canvas will gain full window size.
   fitToParent: boolean; // If set to true the canvas will gain the size of its parent container (overrides fullSize).
@@ -174,7 +177,7 @@ export interface Config
 /**
  * For initialization the constructor needs a mix of config and draw-settings.
  */
-export interface PBParams extends Config {
+export interface PBParams extends Config, CSSBackdropFilterParams {
   title?: string; // Specify any hover tile here. It will be attached as a `title` attribute to the most elevated element.
   // No more additional attributes, just merge two interfaces.
 }

package/src/ts/interfaces/externals.ts

@@ -5,6 +5,7 @@
  */
 
 // https://www.npmjs.com/package/@types/dat.gui
+// @DEPRECATED Dat.GUI is replaced by lil-gui.
 export interface DatGuiProps {
   name?: string;
   load?: object;
@@ -14,3 +15,52 @@ export interface DatGuiProps {
   closed?: boolean;
   closeOnTop?: boolean;
 }
+
+// Compatible with dat.gui and lil-gui.
+export interface GUI {
+  domElement: HTMLElement;
+}
+
+export interface LilGuiProps {
+  name?: string;
+  load?: object;
+  parent?: dat.GUI;
+  autoPlace?: boolean;
+  hideable?: boolean;
+  closed?: boolean;
+  closeOnTop?: boolean;
+}
+
+/**
+ * This is just for the backdrop-filter vaules (CSS after effects filters). They are not directly
+ * used by PB but can be passed through by the config/params.
+ */
+export interface CSSBackdropFilterParams {
+  // A global switch to enable/disable all filters
+  isBackdropFiltersEnabled?: boolean;
+  // This is just for the global effect color
+  effectFilterColor?: string; // "#204a87",
+  isEffectsColorEnabled?: boolean;
+  // These are real filter values
+  opacity?: number; // 0.5,
+  isOpacityEnabled?: boolean; // false,
+  invert?: number; // 0.8,
+  isInvertEnabled?: boolean; // false,
+  sepia?: number; // 0.9,
+  isSepiaEnabled?: boolean; // false,
+  blur?: number; // 2, // px
+  isBlurEnabled?: boolean; // false,
+  brightness?: number; // 0.6,
+  isBrightnessEnabled?: boolean; // false,
+  contrast?: number; // 0.9,
+  isContrastEnabled?: boolean; // false,
+  dropShadow?: number; // 4, // px
+  dropShadowColor?: string; // "#00ffff",
+  isDropShadowEnabled?: boolean; // false,
+  grayscale?: number; // 0.3,
+  isGrayscaleEnabled?: boolean; // false,
+  hueRotate?: number; // 120, // deg
+  isHueRotateEnabled?: boolean; // false,
+  saturate?: number; // 2.0,
+  isSaturateEnabled?: boolean; // false
+}