plotboilerplate 1.23.1 → 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

@@ -24,3 +24,33 @@ export interface LilGuiProps {
     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.js

@@ -11,6 +11,10 @@ export class InitializationObserver {
         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.");
             }
@@ -18,6 +22,9 @@ export class InitializationObserver {
         }, timeout);
     }
     accept(value) {
+        if (this._isInitialized) {
+            return;
+        }
         this._isInitialized = true;
         this._initializedValue = value;
         this._fireAccept(value);

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

@@ -1 +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,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,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"}
+{"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/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

@@ -84,8 +84,9 @@
  * @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).
  * @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.18.0
+ * @version  1.19.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -469,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
 
     /**

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

@@ -30,3 +30,37 @@ export interface LilGuiProps {
   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
+}

package/src/ts/utils/InitializationObserver.ts

@@ -22,6 +22,10 @@ export class InitializationObserver<T, E> {
     this._timeoutMessage = timeoutMessage ?? null;
 
     globalThis.setTimeout(() => {
+      if (this._isInitialized) {
+        return; // NOOP
+      }
+      // else
       if (!this._timeoutMessage) {
         console.warn("Failed to initialize object. Reason unknown.");
       }
@@ -30,6 +34,9 @@ export class InitializationObserver<T, E> {
   }
 
   public accept(value: T): void {
+    if (this._isInitialized) {
+      return;
+    }
     this._isInitialized = true;
     this._initializedValue = value;
     this._fireAccept(value);

package/src/ts/utils/Params.ts

@@ -2,9 +2,10 @@
  * 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 {
@@ -14,6 +15,10 @@ export class Params {
     this.baseParams = baseParams;
   }
 
+  hasParam(name: string): boolean {
+    return this.baseParams.hasOwnProperty(name);
+  }
+
   getString(name: string, fallback: string): string {
     let value = this.baseParams[name];
     if (typeof value === "undefined" || !value || (value = value.trim()).length === 0) {

package/src/ts/utils/gup.ts

@@ -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.
@@ -19,7 +20,8 @@
 export const gup = (): Record<string, string> => {
   const vars: Record<string, string> = {};
   globalThis.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, (_m: string, key: string, value: string): string => {
-    return (vars[key as keyof Object] = value);
+    const keyName: string = key as keyof Object;
+    return (vars[decodeURIComponent(keyName)] = value);
   });
   return vars;
 };