plotboilerplate 1.25.0 → 1.27.0

package/src/ts/utils/datastructures/GeometryMesh.ts

@@ -0,0 +1,79 @@
+/**
+ * Adapted from the 3D geometry datastuctured from demo-33 (depth mesh).
+ *
+ * Refactored the strucure into a class.
+ *
+ * @author   Ikaros Kappler
+ * @date     2025-11-14
+ * @modified 2025-11-17 Moved `getBounds` and `normalizeGeometry` from helper functions to this class.
+ * @version  1.0.0
+ */
+
+export type Vertex2 = { x: number; y: number };
+export type Vertex3 = { x: number; y: number; z: number };
+
+export class GeometryMesh<T extends Vertex2 | Vertex3> {
+  /**
+   * A set (array) of vertices (points) used in this mesh. Can be 2d or 3d.
+   *
+   * @member {Array<T>}
+   * @memberof GeometryMesh
+   * @type {Array<T>}
+   * @instance
+   */
+  vertices: Array<T>;
+
+  /**
+   * A set (array) of edges used in this mesh.
+   * Each edge consist of two indices indicating the vertex position.
+   *
+   * @member {Array<T>}
+   * @memberof GeometryMesh
+   * @type {Array<T>}
+   * @instance
+   */
+  edges: Array<[number, number]>;
+
+  constructor(vertices?: Array<T>, edges?: Array<[number, number]>) {
+    this.vertices = vertices || [];
+    this.edges = edges || [];
+  }
+
+  normalize() {
+    // Desired bounds is a max bounding box. The object will be scaled keeping aspect ratio
+    // in that way that the largest axis size touches the desired bounds.
+    var desiredBounds = { min: { x: -1, y: -1, z: -1 }, max: { x: 1, y: 1, z: 1 } };
+    var bounds = this.getGeometryBounds();
+    var sizeX = bounds.max.x - bounds.min.x;
+    var sizeY = bounds.max.y - bounds.min.y;
+    var sizeZ = bounds.max.z - bounds.min.z;
+    // Scale uniform so the dimension with the max expansion fits into [-1,1]
+    var maxDimension = Math.max(sizeX, sizeY, sizeZ);
+    var desiredSizeX = (desiredBounds.max.x - desiredBounds.min.x) / maxDimension;
+    var desiredSizeY = (desiredBounds.max.y - desiredBounds.min.y) / maxDimension;
+    var desiredSizeZ = (desiredBounds.max.z - desiredBounds.min.z) / maxDimension;
+    for (var i in this.vertices) {
+      var vert = this.vertices[i] as Vertex3; // TODO: Check if this is safe
+      vert.x = desiredBounds.min.x + (bounds.max.x - vert.x) * desiredSizeX;
+      vert.y = desiredBounds.min.y + (bounds.max.y - vert.y) * desiredSizeY;
+      vert.z = desiredBounds.min.z + (bounds.max.z - vert.z) * desiredSizeZ;
+    }
+  }
+
+  getGeometryBounds(): { min: Vertex3; max: Vertex3; width: number; height: number; depth: number } {
+    // var min = new Vert3(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE);
+    // var max = new Vert3(Number.MIN_VALUE, Number.MIN_VALUE, Number.MIN_VALUE);
+    var min = { x: Number.MAX_VALUE, y: Number.MAX_VALUE, z: Number.MAX_VALUE };
+    var max = { x: Number.MIN_VALUE, y: Number.MIN_VALUE, z: Number.MIN_VALUE };
+    for (var i in this.vertices) {
+      var vert = this.vertices[i] as Vertex3;
+      min.x = Math.min(vert.x, min.x);
+      min.y = Math.min(vert.y, min.y);
+      min.z = Math.min(vert.z, min.z);
+      max.x = Math.max(vert.x, max.x);
+      max.y = Math.max(vert.y, max.y);
+      max.z = Math.max(vert.z, max.z);
+    }
+    return { min: min, max: max, width: max.x - min.x, height: max.y - min.y, depth: max.z - min.z };
+  }
+}

package/src/ts/utils/datastructures/Girih.ts

@@ -3,7 +3,10 @@
  * @date     2020-11-24
  * @modified 2020-11-25 Ported to TypeScript from vanilla JS.
  * @modified 2024-03-10 Fixed some types for Typescript 5 compatibility.
- * @version  1.0.2
+ * @modified 2026-01-06 Added method `Girih.locateContainingTileAndEdge` to locate tile/edge pairs.
+ * @modified 2026-01-12 Added method `Girih.getTileByCenter` to locate tiles by position.
+ * @modified 2026-01-18 Added method `Girih.removeAllTiles`.
+ * @version  1.1.0
  * @file     Girih
  **/
 
@@ -15,6 +18,7 @@ import { GirihHexagon } from "./GirihHexagon";
 import { GirihPenroseRhombus } from "./GirihPenroseRhombus";
 import { GirihPentagon } from "./GirihPentagon";
 import { GirihRhombus } from "./GirihRhombus";
+import { XYCoords } from "../../interfaces";
 
 /**
  * @classdesc The Girih datastructure for generating patterns.
@@ -135,6 +139,19 @@ export class Girih {
   }
 
   /**
+   * Remove all tiles.
+   *
+   * @name removeAllTiles
+   * @memberof Girih
+   * @instance
+   * @return {void}
+   */
+  removeAllTiles(): void {
+    this.tiles.splice(0, this.tiles.length);
+  }
+
+  /**
+   * Replace all current tiles with the given ones.
    *
    * @param tiles
    */
@@ -145,6 +162,25 @@ export class Girih {
     }
   }
 
+  /**
+   * Find the tile with the given center.
+   *
+   * @name getTileByCenter
+   * @memberof Girih
+   * @instance
+   * @param {XYCoords} center - The center point to look for.
+   * @return {GirihTile} The tile or null if not found.
+   */
+  getTileByCenter(center: XYCoords): GirihTile {
+    for (var i = 0; i < this.tiles.length; i++) {
+      const pos = this.tiles[i].position;
+      if (pos === center || (pos.x == center.x && pos.y == center.y)) {
+        return this.tiles[i];
+      }
+    }
+    return null;
+  }
+
   /**
    * Find that tile (index) which contains the given position. First match will be returned.
    *
@@ -161,6 +197,47 @@ export class Girih {
     return -1;
   }
 
+  /**
+   * Find find a tile-edge-pair (indices) that contain the given position. First match will be returned.
+   *
+   * @name locateContainingTileAndEdge
+   * @memberof Girih
+   * @instance
+   * @param {Vertex} position
+   * @return {{ tileIndex: number; edgeIndex: number }} The index of the containing tile and edge or null if none was found.
+   **/
+  locateContainingTileAndEdge(position): { tileIndex: number; edgeIndex: number } {
+    var containedTileIndex = this.locateConatiningTile(position);
+
+    // Reset currently highlighted tile/edge (if re-detected nothing changed in the end)
+    var hoverTileIndex = -1;
+    var hoverEdgeIndex = -1;
+
+    // Find Girih edge nearby ...
+    if (containedTileIndex == -1) {
+      return null;
+    }
+    var i = containedTileIndex;
+    do {
+      var tile = this.tiles[i];
+      // May be -1
+      hoverEdgeIndex = tile.locateEdgeAtPoint(position, this.edgeLength / 2);
+      if (hoverEdgeIndex != -1) {
+        hoverTileIndex = i;
+      }
+      i++;
+    } while (i < this.tiles.length && containedTileIndex == -1 && hoverEdgeIndex == -1);
+    if (hoverTileIndex == -1) {
+      hoverTileIndex = containedTileIndex;
+    }
+
+    // Find the next possible tile to place?
+    if (hoverTileIndex == -1 || hoverEdgeIndex == -1) {
+      return null;
+    }
+    return { tileIndex: hoverTileIndex, edgeIndex: hoverEdgeIndex };
+  }
+
   /**
    * Turn the tile the mouse is hovering over.
    * The turnCount is ab abstract number: -1 for one turn left, +1 for one turn right.

package/src/ts/utils/datastructures/interfaces.ts

@@ -6,11 +6,11 @@
  * @version 1.0.0
  **/
 
-export type Interval = [ number, number ];
+export type Interval = [number, number];
 
 export type IndexPair = {
-    i : number;
-    j : number;
-}
+  i: number;
+  j: number;
+};
 
 export type Matrix<T> = Array<Array<T>>;

package/src/ts/utils/detectDarkMode.ts

@@ -9,20 +9,29 @@
  */
 
 export const detectDarkMode = (GUP?: Record<string, string>): boolean => {
+  var isDarkmode: boolean = false;
   // Respect overrides
   if (typeof GUP !== "undefined" && GUP.hasOwnProperty("darkmode") && GUP["darkmode"]) {
     // const overrideValue = PlotBoilerplate.utils.fetch.bool(GUP, "darkmode", null);
     const overrideValue = !!JSON.parse(GUP["darkmode"]);
     if (overrideValue !== null) {
-      return overrideValue;
+      isDarkmode = overrideValue;
     }
-  }
-  if (globalThis.matchMedia && globalThis.matchMedia("(prefers-color-scheme: dark)").matches) {
+  } else if (globalThis.matchMedia && globalThis.matchMedia("(prefers-color-scheme: dark)").matches) {
     // dark mode by system
-    return true;
+    isDarkmode = true;
+  } else {
+    // else: dark mode by daytime
+    const hours = new Date().getHours();
+    const isDayTime = hours > 6 && hours < 18;
+    isDarkmode = !isDayTime;
+  }
+
+  // console.log("Adding darkmode to <body>", isDarkmode);
+  if (isDarkmode && document.body) {
+    // Add darkmode class to <body> tag
+    document.body.classList.add("darkmode");
   }
-  // else: dark mode by daytime
-  const hours = new Date().getHours();
-  const isDayTime = hours > 6 && hours < 18;
-  return !isDayTime;
+
+  return isDarkmode;
 };

package/src/ts/utils/dom/components/ColorGradientPicker.tsx

@@ -6,9 +6,10 @@
  * to get this running: NoReact.
  *
  *
- * @author  Ikaros Kappler
- * @date    2025-06-27
- * @version 1.0.0
+ * @author   Ikaros Kappler
+ * @date     2025-06-27
+ * @modified 2025-09-10 Fixing a color select bug on MacOS.
+ * @version  1.0.0
  */
 
 import * as NoReact from "noreact";
@@ -455,7 +456,7 @@ export class ColorGradientPicker {
     const sliderRef = this._sliderElementRefs[newSliderIndex];
     leftSlider.after(sliderRef.current);
     sliderRef.current.dataset.colorValue = newColor.cssRGB();
-    sliderRef.current.dataset.colorValueHEX = newColor.cssRGB();
+    sliderRef.current.dataset.colorValueHEX = newColor.cssHEX();
     // No visible change, but let's reflect this in the output gradient anyway
     this.__updateBackgroundGradient();
     // Highlight the newly added range slider
@@ -751,9 +752,10 @@ export class ColorGradientPicker {
           >
             <button
               id={`color-indicator-button-${this.baseID}`}
+              className="color-indicator-button"
               style={{
                 backgroundColor: "grey",
-                borderRadius: "10%",
+                borderRadius: "50%",
                 border: "1px solid grey",
                 w: this.css_indicatorWidth, // "1em",
                 h: this.css_indicatorHeight, // "1em",
@@ -766,7 +768,6 @@ export class ColorGradientPicker {
               id={`color-remove-button-${this.baseID}`}
               className="color-remove-button"
               style={{
-                backgroundColor: "grey",
                 borderRadius: "10%",
                 border: "1px solid grey",
                 w: this.css_indicatorWidth, // "1em",
@@ -871,6 +872,17 @@ export class ColorGradientPicker {
         /* outline: dotted 1px orange; */
         color: darkorange;
     }
+
+    body.darkmode #${this.elementID} .color-remove-button {    
+      background-color: #1e2937;
+      color: grey;
+    }
+
+    body.darkmode #${this.elementID} .color-remove-button:hover,
+    body.darkmode #${this.elementID} .color-remove-button:active {    
+      background-color: rgba(216,216,216,0.9);
+    }
+
     `}</style>
     );
   };

package/src/ts/utils/dom/components/ColorGradientSelector.tsx

@@ -46,6 +46,7 @@ export class ColorGradientSelector {
   private css_buttonWidth = "100px";
   private css_buttonHeight = "1.8em";
   private css_buttonFontSize = "0.725em";
+  private css_buttonFontSize_larger = "1.0em";
 
   private colorGradients: Array<ColorGradient> = [];
   // TODO: this does not really need to be a pair, does it?
@@ -88,6 +89,7 @@ export class ColorGradientSelector {
       this.css_buttonWidth = "200px";
       this.css_buttonHeight = "2.5em";
       this.css_buttonFontSize = "1.25em";
+      this.css_buttonFontSize_larger = "1.45em";
     }
     this.baseID = Math.floor(Math.random() * 65535);
     this.elementID = `color-gradient-selector-${this.baseID}`;
@@ -391,7 +393,7 @@ export class ColorGradientSelector {
           >
             &nbsp;
           </div>
-          <div sx={{ w: this.css_buttonHeight, flexShrink: 2, fontSize: this.css_buttonFontSize }}>▾</div>
+          <div sx={{ w: this.css_buttonHeight, flexShrink: 2, fontSize: this.css_buttonFontSize_larger }}>▾</div>
         </button>
         <div
           className="positioning-container"
@@ -428,7 +430,11 @@ export class ColorGradientSelector {
     #${this.elementID} button {
       border: 0px solid lightgray;
       padding: 0.25em;
-      background-color: rgba(255,255,255,0.9);
+      /* background-color: rgba(255,255,255,0.9); */
+    }
+
+    #${this.elementID} .positioning-container button {
+      border-radius: 0;
     }
 
     #${this.elementID} .main-button:hover {
@@ -439,6 +445,7 @@ export class ColorGradientSelector {
       background-color: rgba(216,216,216,0.9);
     }
 
+
     `}</style>
     );
   };

package/src/ts/utils/io/FileDrop.ts

@@ -102,10 +102,15 @@ export class FileDrop {
     this.fileDroppedCallbackText = callback;
   }
 
+  // TODO: docs
   onFileSVGDropped(callback: IDroppedCallbackSVG) {
     this.fileDroppedCallbackSVG = callback;
   }
 
+  onFileBinaryDropped(callback: IDroppedCallbackBinary) {
+    this.fileDroppedCallbackBinary = callback;
+  }
+
   /**
    * Internally handle a drop event.
    *

package/src/ts/utils/parsers/svg/types.ts

@@ -17,7 +17,7 @@ export type NumericString = `${number}`;
 export type BooleanString = "0" | "1" | `${boolean}`;
 
 // Example: 'M', -10, -7.5,
-export type SVGPathMoveToCommand = ["M" | "m", NumericString, NumericString];
+export type SVGPathMoveToCommand = ["M" | "m", NumericString | number, NumericString | number];
 // Example: 'L', 0, -10,
 export type SVGPathLineToCommand = ["L" | "l", NumericString, NumericString, ...Array<NumericString>];
 // Example: 'V', -10,
@@ -42,13 +42,13 @@ export type SVGPathQuadraticCurveToCommand =
 // Example: 'C', -5, -15, 10, -15, 5, -10,
 export type SVGPathCubicCurveToCommand = [
   "C" | "c",
-  NumericString,
-  NumericString,
-  NumericString,
-  NumericString,
-  NumericString,
-  NumericString,
-  ...Array<NumericString>
+  NumericString | number,
+  NumericString | number,
+  NumericString | number,
+  NumericString | number,
+  NumericString | number,
+  NumericString | number,
+  ...Array<NumericString | number>
 ];
 // Example: 'S', 15, 0, 10, 0,
 export type SVGPathShorthandCubicCurveToCommand = [