plotboilerplate 1.23.0 → 1.23.1

package/src/cjs/utils/dat.gui.arrowbounce.polyfill.js

@@ -8,72 +8,73 @@
  * @author   Ikaros Kappler
  * @date     2020-02-13
  * @modified 2020-10-14 Changed 'window' to 'globalthis'.
- * version   1.0.1
+ * @version   1.0.1
+ * @DEPRECATED dat.gui was replaced by lil-gui.
  **/
 
-
-(function() {
-
-    /* dat.GUI copies the prototype of superclass Controller to all other controllers, so it is not enough to add it only to 
+(function () {
+  /* dat.GUI copies the prototype of superclass Controller to all other controllers, so it is not enough to add it only to 
        the super class as the reference is not maintained */
-    var eachController = function(fnc) {   
-	for (var controllerName in dat.controllers) {
-	    if (dat.controllers.hasOwnProperty(controllerName)) {
-		fnc(dat.controllers[controllerName]);
-	    }
-	}
+  var eachController = function (fnc) {
+    for (var controllerName in dat.controllers) {
+      if (dat.controllers.hasOwnProperty(controllerName)) {
+        fnc(dat.controllers[controllerName]);
+      }
     }
+  };
 
-    var setArrowBounce = function(v,options) {
-	options = options || {};
-	if( typeof options.fadeDelay == "undefined" )
-	    options.fadeDelay = 5000;
-	options.fadeDelay = options.fadeDelay/1000;
+  var setArrowBounce = function (v, options) {
+    options = options || {};
+    if (typeof options.fadeDelay == "undefined") options.fadeDelay = 5000;
+    options.fadeDelay = options.fadeDelay / 1000;
 
-	var randomkey = 'arrowbounce-'+Math.round(Math.random()*Math.pow(2,16));
+    var randomkey = "arrowbounce-" + Math.round(Math.random() * Math.pow(2, 16));
 
-	var _self = this;
-	removeElement = function() {
-	    _self.__li.querySelectorAll('.arrowBounce').forEach( function(elem) {
-		elem.parentElement.removeChild(elem);
-	    } );
-	    _self.__li.style.overflow = 'hidden'; // Restore old overflow
-	    _self.__li.style.position = 'static';
-	};
-	
-	// __li is the root dom element of each controller
-	if (v) {
-	    this.__li.style.position = 'relative';
-	    this.__li.style.overflow = 'visible';
-	    //this.__li.style.overflowX = 'visible';
-	    //this.__li.style.overflowY = 'hidden';
-	    var node = document.createElement('div');
-	    node.style.position = 'absolute';
-	    // node.style.lineHeight = '24px';
-	    node.style.left = 0;
-	    node.style.top  = 0;
-	    node.style.transform = 'translateX(-100%)';
-	    node.classList = randomkey + " arrowBounce hideAfterNs" + (typeof options.className != 'undefined' ? ' '+options.className : '');
-	    // BEGIN custom Styling
-	    node.style.paddingRight = '1em';
-	    // node.style.paddingTop = node.style.paddingBottom = '0em';
-	    node.style.color = 'rgb(0,0,0)';
-	    // END custom Styling
-	    
-	    node.innerHTML = '<div class="bounce">' + v + '&nbsp;<span style="margin-left: 3em;">➤</span></div>';
-	    this.__li.prepend(node);
-	    if( typeof options.detachAfter == 'number' )
-		globalThis.setTimeout( function() { removeElement(); }, options.detachAfter );
-	} else {
-	    removeElement();
-	}
+    var _self = this;
+    removeElement = function () {
+      _self.__li.querySelectorAll(".arrowBounce").forEach(function (elem) {
+        elem.parentElement.removeChild(elem);
+      });
+      _self.__li.style.overflow = "hidden"; // Restore old overflow
+      _self.__li.style.position = "static";
+    };
 
-	// --- Unfortunately IE does not support ES6 Template Literals ---
-	// --- So use '§' instead '$' here plus string.replace(...)    ---
-	// Define a dynamic and local CSS class
-	var style = document.createElement('style');
-	style.type = 'text/css';
-	style.innerHTML = `.§{randomkey}.hideAfterNs {  
+    // __li is the root dom element of each controller
+    if (v) {
+      this.__li.style.position = "relative";
+      this.__li.style.overflow = "visible";
+      //this.__li.style.overflowX = 'visible';
+      //this.__li.style.overflowY = 'hidden';
+      var node = document.createElement("div");
+      node.style.position = "absolute";
+      // node.style.lineHeight = '24px';
+      node.style.left = 0;
+      node.style.top = 0;
+      node.style.transform = "translateX(-100%)";
+      node.classList =
+        randomkey + " arrowBounce hideAfterNs" + (typeof options.className != "undefined" ? " " + options.className : "");
+      // BEGIN custom Styling
+      node.style.paddingRight = "1em";
+      // node.style.paddingTop = node.style.paddingBottom = '0em';
+      node.style.color = "rgb(0,0,0)";
+      // END custom Styling
+
+      node.innerHTML = '<div class="bounce">' + v + '&nbsp;<span style="margin-left: 3em;">➤</span></div>';
+      this.__li.prepend(node);
+      if (typeof options.detachAfter == "number")
+        globalThis.setTimeout(function () {
+          removeElement();
+        }, options.detachAfter);
+    } else {
+      removeElement();
+    }
+
+    // --- Unfortunately IE does not support ES6 Template Literals ---
+    // --- So use '§' instead '$' here plus string.replace(...)    ---
+    // Define a dynamic and local CSS class
+    var style = document.createElement("style");
+    style.type = "text/css";
+    style.innerHTML = `.§{randomkey}.hideAfterNs {  
 	  animation: fadeout 0.5s 1;
 	  -webkit-animation: fadeout 0.5s 1;
 	  animation-fill-mode: forwards;
@@ -81,15 +82,15 @@
 	  animation-delay: ${options.fadeDelay}s;
 	  -webkit-animation-delay:§{options.fadeDelay}s; /* Safari and Chrome */
 	  -webkit-animation-fill-mode: forwards;
-	}` .replace(/§\{fadeTime\}/g, (options.fadeDelay/1000).toString());
-	document.getElementsByTagName('head')[0].appendChild(style);
-	return this;
-    };
+	}`.replace(/§\{fadeTime\}/g, (options.fadeDelay / 1000).toString());
+    document.getElementsByTagName("head")[0].appendChild(style);
+    return this;
+  };
 
-    // Define a global CSS class
-    var style = document.createElement('style');
-    style.type = 'text/css';
-    style.innerHTML = `.bounce {
+  // Define a global CSS class
+  var style = document.createElement("style");
+  style.type = "text/css";
+  style.innerHTML = `.bounce {
 	    animation: bounce 2s infinite;
             background: rgba(255,255,255,0.7);
             border-radius: 8px;
@@ -116,12 +117,12 @@
 	   from {opacity :1;}
 	   to {opacity :0;display:none;}
         }`;
-    document.getElementsByTagName('head')[0].appendChild(style);
+  document.getElementsByTagName("head")[0].appendChild(style);
 
-    // Install the new feature
-    eachController(function(controller) {
-	if (!controller.prototype.hasOwnProperty('arrowBounce')) {
-	    controller.prototype.arrowBounce = setArrowBounce;
-	}
-    });
+  // Install the new feature
+  eachController(function (controller) {
+    if (!controller.prototype.hasOwnProperty("arrowBounce")) {
+      controller.prototype.arrowBounce = setArrowBounce;
+    }
+  });
 })();

package/src/cjs/utils/dat.gui.title.polyfill.js

@@ -4,30 +4,32 @@
  * Found at
  *    https://stackoverflow.com/questions/27362914/how-to-add-tooltips-to-dat-gui
  *    Thanks to greginvm
+ *
+ * @DEPRECATED dat.gui was replaced by lil-gui.
  **/
 
 /* dat.GUI copies the prototype of superclass Controller to all other controllers, so it is not enough to add it only to 
 the super class as the reference is not maintained */
-var eachController = function(fnc) {
+var eachController = function (fnc) {
   for (var controllerName in dat.controllers) {
     if (dat.controllers.hasOwnProperty(controllerName)) {
       fnc(dat.controllers[controllerName]);
     }
   }
-}
+};
 
-var setTitle = function(v) {
+var setTitle = function (v) {
   // __li is the root dom element of each controller
   if (v) {
-    this.__li.setAttribute('title', v);
+    this.__li.setAttribute("title", v);
   } else {
-    this.__li.removeAttribute('title')
+    this.__li.removeAttribute("title");
   }
   return this;
 };
 
-eachController(function(controller) {
-  if (!controller.prototype.hasOwnProperty('title')) {
+eachController(function (controller) {
+  if (!controller.prototype.hasOwnProperty("title")) {
     controller.prototype.title = setTitle;
   }
 });

package/src/cjs/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/cjs/utils/dom/guiSizeToggler.js

@@ -0,0 +1,42 @@
+"use strict";
+/**
+ * @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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.guiSizeToggler = void 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.
+ */
+var applyGuiSize = function (gui, guiDoubleSize, cssProps) {
+    if (cssProps && cssProps.hasOwnProperty("transformOrigin")) {
+        gui.domElement.style["transform-origin"] = cssProps["transformOrigin"];
+    }
+    else {
+        gui.domElement.style["transform-origin"] = "100% 0%";
+    }
+    var 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)";
+    }
+};
+var guiSizeToggler /* gst */ = function (gui, config, cssProps) {
+    return {
+        update: function () {
+            applyGuiSize(gui, Boolean(config.guiDoubleSize), cssProps);
+        }
+    };
+};
+exports.guiSizeToggler /* gst */ = guiSizeToggler;
+//# sourceMappingURL=guiSizeToggler.js.map

package/src/cjs/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,IAAM,YAAY,GAAG,UAAC,GAAQ,EAAE,aAAsB,EAAE,QAAgC;IACtF,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,IAAM,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;AAEK,IAAM,cAAc,CAAC,SAAS,GAAG,UAAC,GAAQ,EAAE,MAAsB,EAAE,QAAgC;IACzG,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;AANW,QAAA,cAAc,CAAC,SAAS,kBAMnC"}

package/src/cjs/utils/lil.gui.arrowbounce.polyfill.js

@@ -0,0 +1,133 @@
+/**
+ * This snippet adds an 'arrowBounce' prototype function to all dat.GUI components.
+ *
+ * It's an adaption of the 'title' polyfill found at
+ *    https://stackoverflow.com/questions/27362914/how-to-add-tooltips-to-dat-gui
+ *    by greginvm
+ *
+ * @author   Ikaros Kappler
+ * @date     2024-06-25 Copied from dat.gui and adapted for lil-gui
+ * version   1.0.0
+ **/
+
+(function () {
+  /* lil.GUI copies the prototype of superclass Controller to all other controllers, so it is not enough to add it only to 
+       the super class as the reference is not maintained */
+  var eachController = function (fnc) {
+    fnc(lil.Controller);
+  };
+
+  var setArrowBounce = function (v, options) {
+    options = options || {};
+    if (typeof options.fadeDelay == "undefined") {
+      options.fadeDelay = 5000;
+    }
+    options.fadeDelay = options.fadeDelay / 1000;
+    var randomkey = "arrowbounce-" + Math.round(Math.random() * Math.pow(2, 16));
+
+    var _self = this;
+    removeElement = function () {
+      _self.domElement.querySelectorAll(".arrowBounce").forEach(function (elem) {
+        elem.parentElement.removeChild(elem);
+      });
+      _self.domElement.style.overflow = "hidden"; // Restore old overflow
+      _self.domElement.style.position = "static";
+    };
+
+    // domElement is the root dom element of each controller
+    if (v) {
+      this.domElement.style.position = "relative";
+      this.domElement.style.overflow = "visible";
+      //this.domElement.style.overflowX = 'visible';
+      //this.domElement.style.overflowY = 'hidden';
+      var node = document.createElement("div");
+      node.style.position = "absolute";
+      // node.style.lineHeight = '24px';
+      node.style.left = 0;
+      node.style.top = 0;
+      node.style.transform = "translateX(-100%)";
+      node.style.height = "100%";
+      node.classList =
+        randomkey + " arrowBounce hideAfterNs" + (typeof options.className != "undefined" ? " " + options.className : "");
+      // BEGIN custom Styling
+      node.style.paddingRight = "1em";
+      // node.style.paddingTop = node.style.paddingBottom = '0em';
+      node.style.color = "rgb(0,0,0)";
+      // END custom Styling
+
+      node.innerHTML = '<div class="bounce">' + v + '&nbsp;<span style="margin-left: 3em;">➤</span></div>';
+      this.domElement.prepend(node);
+      if (typeof options.detachAfter == "number")
+        globalThis.setTimeout(function () {
+          removeElement();
+        }, options.detachAfter);
+    } else {
+      removeElement();
+    }
+
+    // --- Unfortunately IE does not support ES6 Template Literals ---
+    // --- So use '§' instead '$' here plus string.replace(...)    ---
+    // Define a dynamic and local CSS class
+    var style = document.createElement("style");
+    style.innerHTML = `.§{randomkey}.hideAfterNs {  
+	  animation: fadeout 0.5s 1;
+	  -webkit-animation: fadeout 0.5s 1;
+	  animation-fill-mode: forwards;
+
+	  animation-delay: ${options.fadeDelay}s;
+	  -webkit-animation-delay:§{options.fadeDelay}s; /* Safari and Chrome */
+	  -webkit-animation-fill-mode: forwards;
+	}`.replace(/§\{fadeTime\}/g, (options.fadeDelay / 1000).toString());
+    document.getElementsByTagName("head")[0].appendChild(style);
+    return this;
+  };
+
+  // Define a global CSS class
+  var style = document.createElement("style");
+  // style.type = "text/css";
+  style.innerHTML = `.bounce {
+      animation: bounce 2s infinite;
+      background: rgba(255,255,255,0.7);
+      border-radius: 8px;
+      padding-left: 1em;
+      padding-right: 1em;
+      display: flex;
+      align-items: center;
+      height: 100%;
+	}
+
+	@keyframes bounce {
+	    0%, 20%, 50%, 80%, 100% {
+		transform: translateX(0);
+	    }
+	    40% {
+		transform: translateX(-30px);
+	    }
+	    60% {
+		transform: translateX(-15px);
+	    }
+	}
+        @keyframes fadeout {
+	   from {opacity :1;}
+	   to {opacity :0; display:none;}
+        }
+        @-webkit-keyframes fadeout {
+	   from {opacity :1;}
+	   to {opacity :0;display:none;}
+        }
+    
+  /* override lil.gui style to make arrowbounce work */
+  .lil-gui .children {
+    overflow-x: visible !important;
+    overflow-y: visible !important;
+  }
+  `;
+  document.getElementsByTagName("head")[0].appendChild(style);
+
+  // Install the new feature
+  eachController(function (controller) {
+    if (!controller.prototype.hasOwnProperty("arrowBounce")) {
+      controller.prototype.arrowBounce = setArrowBounce;
+    }
+  });
+})();

package/src/cjs/utils/lil.gui.title.polyfill.js

@@ -0,0 +1,32 @@
+/* lil.GUI copies the prototype of superclass Controller to all other controllers, so it is not enough to add it only to 
+the super class as the reference is not maintained */
+
+(function () {
+  var eachController = function (fnc) {
+    // Only in super controller required (?)
+    fnc(lil.Controller);
+    fnc(lil.BooleanController);
+    fnc(lil.ColorController);
+    fnc(lil.FunctionController);
+    fnc(lil.OptionController);
+    fnc(lil.NumberController);
+    fnc(lil.StringController);
+  };
+
+  var setTitle = function (v) {
+    // __li is the root dom element of each controller
+    // console.log("Controller", v, this);
+    if (v) {
+      this.domElement.setAttribute("title", v);
+    } else {
+      this.domElement.removeAttribute("title");
+    }
+    return this;
+  };
+
+  eachController(function (controller) {
+    if (!controller.prototype.hasOwnProperty("title")) {
+      controller.prototype.title = setTitle;
+    }
+  });
+})();

package/src/esm/PlotBoilerplate.d.ts

@@ -83,7 +83,9 @@
  * @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.
+ *
+ * @version  1.18.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -95,7 +97,8 @@ import { Bounds } from "./Bounds";
 import { Grid } from "./Grid";
 import { Polygon } from "./Polygon";
 import { Vertex } from "./Vertex";
-import { IDraggable, Config, DrawLib, Drawable, DrawConfig, IHooks, PBParams, XYCoords, XYDimension, DatGuiProps } from "./interfaces";
+import { IDraggable, Config, DrawLib, Drawable, DrawConfig, IHooks, PBParams, XYCoords, XYDimension, DatGuiProps, // DEPRECATED. Please do not use any more.
+LilGuiProps } from "./interfaces";
 /**
  * @classdesc The main class of the PlotBoilerplate.
  *
@@ -263,6 +266,10 @@ export declare class PlotBoilerplate {
      * @private
      */
     private renderTime;
+    /**
+     * A storage variable for retrieving the GUI instance once it was created.
+     */
+    private _gui;
     /**
      * The constructor.
      *
@@ -784,7 +791,13 @@ export declare class PlotBoilerplate {
      * @memberof PlotBoilerplate
      * @return {dat.gui.GUI}
      **/
-    createGUI(props?: DatGuiProps): GUI;
+    createGUI(props?: DatGuiProps | LilGuiProps): GUI;
+    /**
+     * 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;
     /**
      * A set of helper functions.
      **/

package/src/esm/PlotBoilerplate.js

@@ -83,7 +83,9 @@
  * @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.
+ *
+ * @version  1.18.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -217,6 +219,10 @@ export class PlotBoilerplate {
          * @private
          */
         this.renderTime = 0;
+        /**
+         * A storage variable for retrieving the GUI instance once it was created.
+         */
+        this._gui = null;
         // This should be in some static block ...
         VertexAttr.model = {
             bezierAutoAdjust: false,
@@ -1759,7 +1765,8 @@ export class PlotBoilerplate {
                 return { x: pos.x - bounds.left, y: pos.y - bounds.top };
             };
             // Make PB work together with both, AlloyFinger as a esm module or a commonjs function.
-            if (typeof globalThis["AlloyFinger"] === "function" || typeof globalThis["createAlloyFinger"] === "function") {
+            if (typeof globalThis["AlloyFinger"] === "function" ||
+                typeof globalThis["createAlloyFinger"] === "function") {
                 try {
                     var touchMovePos = null;
                     var touchDownPos = null;
@@ -1958,12 +1965,20 @@ export class PlotBoilerplate {
         // 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);
+            return (this._gui = utils.createGUI(this, props));
         }
         else {
-            throw "Cannot create dat.GUI instance; did you load the ./utils/creategui helper function an the dat.GUI library?";
+            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() {
+        return this._gui;
+    }
 } // END class PlotBoilerplate
 /** @constant {number} */
 PlotBoilerplate.DEFAULT_CANVAS_WIDTH = 1024;