plotboilerplate 1.25.0 → 1.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/README.md +1 -0
  2. package/dist/index.esm.js +139 -33
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.esm.min.js +1 -1
  5. package/dist/index.esm.min.js.map +1 -1
  6. package/dist/plotboilerplate.browser.min.js +1 -1
  7. package/dist/plotboilerplate.browser.min.js.map +1 -1
  8. package/dist/plotboilerplate.js +139 -33
  9. package/dist/plotboilerplate.min.js +1 -1
  10. package/package.json +1 -1
  11. package/src/cjs/Bounds.d.ts +79 -25
  12. package/src/cjs/Bounds.js +102 -29
  13. package/src/cjs/Bounds.js.map +1 -1
  14. package/src/cjs/CircleSector.d.ts +3 -0
  15. package/src/cjs/CircleSector.js +28 -1
  16. package/src/cjs/CircleSector.js.map +1 -1
  17. package/src/cjs/drawutilssvg.d.ts +2 -1
  18. package/src/cjs/drawutilssvg.js +9 -3
  19. package/src/cjs/drawutilssvg.js.map +1 -1
  20. package/src/cjs/utils/LissajousFigure.d.ts +34 -0
  21. package/src/cjs/utils/LissajousFigure.js +100 -0
  22. package/src/cjs/utils/LissajousFigure.js.map +1 -0
  23. package/src/cjs/utils/PerlinNoise.d.ts +19 -0
  24. package/src/cjs/utils/PerlinNoise.js +352 -0
  25. package/src/cjs/utils/PerlinNoise.js.map +1 -0
  26. package/src/cjs/utils/SVGPathUtils.d.ts +22 -0
  27. package/src/cjs/utils/SVGPathUtils.js +45 -0
  28. package/src/cjs/utils/SVGPathUtils.js.map +1 -0
  29. package/src/cjs/utils/algorithms/pixelCornersToRoundPaths.d.ts +23 -0
  30. package/src/cjs/utils/algorithms/pixelCornersToRoundPaths.js +270 -0
  31. package/src/cjs/utils/algorithms/pixelCornersToRoundPaths.js.map +1 -0
  32. package/src/cjs/utils/datastructures/DataGrid2d.d.ts +6 -0
  33. package/src/cjs/utils/datastructures/DataGrid2dArrayMatrix.d.ts +88 -0
  34. package/src/cjs/utils/datastructures/DataGrid2dArrayMatrix.js +155 -0
  35. package/src/cjs/utils/datastructures/DataGrid2dArrayMatrix.js.map +1 -0
  36. package/src/cjs/utils/datastructures/DataGrid2dListAdapter.d.ts +1 -7
  37. package/src/cjs/utils/datastructures/DataGrid2dListAdapter.js +3 -3
  38. package/src/cjs/utils/datastructures/DataGrid2dListAdapter.js.map +1 -1
  39. package/src/cjs/utils/datastructures/GeometryMesh.d.ts +49 -0
  40. package/src/cjs/utils/datastructures/GeometryMesh.js +58 -0
  41. package/src/cjs/utils/datastructures/GeometryMesh.js.map +1 -0
  42. package/src/cjs/utils/detectDarkMode.js +16 -7
  43. package/src/cjs/utils/detectDarkMode.js.map +1 -1
  44. package/src/cjs/utils/dom/components/ColorGradientPicker.d.ts +4 -3
  45. package/src/cjs/utils/dom/components/ColorGradientPicker.js +8 -8
  46. package/src/cjs/utils/dom/components/ColorGradientPicker.js.map +1 -1
  47. package/src/cjs/utils/dom/components/ColorGradientSelector.d.ts +1 -0
  48. package/src/cjs/utils/dom/components/ColorGradientSelector.js +4 -2
  49. package/src/cjs/utils/dom/components/ColorGradientSelector.js.map +1 -1
  50. package/src/cjs/utils/parsers/svg/types.d.ts +8 -8
  51. package/src/esm/Bounds.d.ts +79 -25
  52. package/src/esm/Bounds.js +102 -29
  53. package/src/esm/Bounds.js.map +1 -1
  54. package/src/esm/CircleSector.d.ts +3 -0
  55. package/src/esm/CircleSector.js +28 -1
  56. package/src/esm/CircleSector.js.map +1 -1
  57. package/src/esm/drawutilssvg.d.ts +2 -1
  58. package/src/esm/drawutilssvg.js +9 -3
  59. package/src/esm/drawutilssvg.js.map +1 -1
  60. package/src/esm/utils/LissajousFigure.d.ts +34 -0
  61. package/src/esm/utils/LissajousFigure.js +95 -0
  62. package/src/esm/utils/LissajousFigure.js.map +1 -0
  63. package/src/esm/utils/PerlinNoise.d.ts +19 -0
  64. package/src/esm/utils/PerlinNoise.js +346 -0
  65. package/src/esm/utils/PerlinNoise.js.map +1 -0
  66. package/src/esm/utils/SVGPathUtils.d.ts +22 -0
  67. package/src/esm/utils/SVGPathUtils.js +42 -0
  68. package/src/esm/utils/SVGPathUtils.js.map +1 -0
  69. package/src/esm/utils/algorithms/pixelCornersToRoundPaths.d.ts +23 -0
  70. package/src/esm/utils/algorithms/pixelCornersToRoundPaths.js +266 -0
  71. package/src/esm/utils/algorithms/pixelCornersToRoundPaths.js.map +1 -0
  72. package/src/esm/utils/datastructures/DataGrid2d.d.ts +6 -0
  73. package/src/esm/utils/datastructures/DataGrid2dArrayMatrix.d.ts +88 -0
  74. package/src/esm/utils/datastructures/DataGrid2dArrayMatrix.js +150 -0
  75. package/src/esm/utils/datastructures/DataGrid2dArrayMatrix.js.map +1 -0
  76. package/src/esm/utils/datastructures/DataGrid2dListAdapter.d.ts +1 -7
  77. package/src/esm/utils/datastructures/DataGrid2dListAdapter.js +3 -3
  78. package/src/esm/utils/datastructures/DataGrid2dListAdapter.js.map +1 -1
  79. package/src/esm/utils/datastructures/GeometryMesh.d.ts +49 -0
  80. package/src/esm/utils/datastructures/GeometryMesh.js +53 -0
  81. package/src/esm/utils/datastructures/GeometryMesh.js.map +1 -0
  82. package/src/esm/utils/detectDarkMode.js +16 -7
  83. package/src/esm/utils/detectDarkMode.js.map +1 -1
  84. package/src/esm/utils/dom/components/ColorGradientPicker.d.ts +4 -3
  85. package/src/esm/utils/dom/components/ColorGradientPicker.js +18 -7
  86. package/src/esm/utils/dom/components/ColorGradientPicker.js.map +1 -1
  87. package/src/esm/utils/dom/components/ColorGradientSelector.d.ts +1 -0
  88. package/src/esm/utils/dom/components/ColorGradientSelector.js +9 -2
  89. package/src/esm/utils/dom/components/ColorGradientSelector.js.map +1 -1
  90. package/src/esm/utils/parsers/svg/types.d.ts +8 -8
  91. package/src/ts/Bounds.ts +107 -22
  92. package/src/ts/CircleSector.ts +39 -6
  93. package/src/ts/drawutilssvg.ts +8 -3
  94. package/src/ts/utils/LissajousFigure.ts +110 -0
  95. package/src/ts/utils/PerlinNoise.ts +368 -0
  96. package/src/ts/utils/SVGPathUtils.ts +55 -0
  97. package/src/ts/utils/algorithms/pixelCornersToRoundPaths.ts +379 -0
  98. package/src/ts/utils/datastructures/DataGrid2d.ts +7 -0
  99. package/src/ts/utils/datastructures/DataGrid2dArrayMatrix.ts +182 -0
  100. package/src/ts/utils/datastructures/DataGrid2dListAdapter.ts +4 -11
  101. package/src/ts/utils/datastructures/GeometryMesh.ts +79 -0
  102. package/src/ts/utils/detectDarkMode.ts +17 -8
  103. package/src/ts/utils/dom/components/ColorGradientPicker.tsx +18 -6
  104. package/src/ts/utils/dom/components/ColorGradientSelector.tsx +9 -2
  105. package/src/ts/utils/parsers/svg/types.ts +8 -8
package/src/ts/utils/detectDarkMode.ts CHANGED
@@ -9,20 +9,29 @@
9
9
  */
10
10
 
11
11
  export const detectDarkMode = (GUP?: Record<string, string>): boolean => {
12
+ var isDarkmode: boolean = false;
12
13
  // Respect overrides
13
14
  if (typeof GUP !== "undefined" && GUP.hasOwnProperty("darkmode") && GUP["darkmode"]) {
14
15
  // const overrideValue = PlotBoilerplate.utils.fetch.bool(GUP, "darkmode", null);
15
16
  const overrideValue = !!JSON.parse(GUP["darkmode"]);
16
17
  if (overrideValue !== null) {
17
- return overrideValue;
18
+ isDarkmode = overrideValue;
18
19
  }
19
- }
20
- if (globalThis.matchMedia && globalThis.matchMedia("(prefers-color-scheme: dark)").matches) {
20
+ } else if (globalThis.matchMedia && globalThis.matchMedia("(prefers-color-scheme: dark)").matches) {
21
21
  // dark mode by system
22
- return true;
22
+ isDarkmode = true;
23
+ } else {
24
+ // else: dark mode by daytime
25
+ const hours = new Date().getHours();
26
+ const isDayTime = hours > 6 && hours < 18;
27
+ isDarkmode = !isDayTime;
28
+ }
29
+
30
+ // console.log("Adding darkmode to <body>", isDarkmode);
31
+ if (isDarkmode && document.body) {
32
+ // Add darkmode class to <body> tag
33
+ document.body.classList.add("darkmode");
23
34
  }
24
- // else: dark mode by daytime
25
- const hours = new Date().getHours();
26
- const isDayTime = hours > 6 && hours < 18;
27
- return !isDayTime;
35
+
36
+ return isDarkmode;
28
37
  };
package/src/ts/utils/dom/components/ColorGradientPicker.tsx CHANGED
@@ -6,9 +6,10 @@
6
6
  * to get this running: NoReact.
7
7
  *
8
8
  *
9
- * @author Ikaros Kappler
10
- * @date 2025-06-27
11
- * @version 1.0.0
9
+ * @author Ikaros Kappler
10
+ * @date 2025-06-27
11
+ * @modified 2025-09-10 Fixing a color select bug on MacOS.
12
+ * @version 1.0.0
12
13
  */
13
14
 
14
15
  import * as NoReact from "noreact";
@@ -455,7 +456,7 @@ export class ColorGradientPicker {
455
456
  const sliderRef = this._sliderElementRefs[newSliderIndex];
456
457
  leftSlider.after(sliderRef.current);
457
458
  sliderRef.current.dataset.colorValue = newColor.cssRGB();
458
- sliderRef.current.dataset.colorValueHEX = newColor.cssRGB();
459
+ sliderRef.current.dataset.colorValueHEX = newColor.cssHEX();
459
460
  // No visible change, but let's reflect this in the output gradient anyway
460
461
  this.__updateBackgroundGradient();
461
462
  // Highlight the newly added range slider
@@ -751,9 +752,10 @@ export class ColorGradientPicker {
751
752
  >
752
753
  <button
753
754
  id={`color-indicator-button-${this.baseID}`}
755
+ className="color-indicator-button"
754
756
  style={{
755
757
  backgroundColor: "grey",
756
- borderRadius: "10%",
758
+ borderRadius: "50%",
757
759
  border: "1px solid grey",
758
760
  w: this.css_indicatorWidth, // "1em",
759
761
  h: this.css_indicatorHeight, // "1em",
@@ -766,7 +768,6 @@ export class ColorGradientPicker {
766
768
  id={`color-remove-button-${this.baseID}`}
767
769
  className="color-remove-button"
768
770
  style={{
769
- backgroundColor: "grey",
770
771
  borderRadius: "10%",
771
772
  border: "1px solid grey",
772
773
  w: this.css_indicatorWidth, // "1em",
@@ -871,6 +872,17 @@ export class ColorGradientPicker {
871
872
  /* outline: dotted 1px orange; */
872
873
  color: darkorange;
873
874
  }
875
+
876
+ body.darkmode #${this.elementID} .color-remove-button {
877
+ background-color: #1e2937;
878
+ color: grey;
879
+ }
880
+
881
+ body.darkmode #${this.elementID} .color-remove-button:hover,
882
+ body.darkmode #${this.elementID} .color-remove-button:active {
883
+ background-color: rgba(216,216,216,0.9);
884
+ }
885
+
874
886
  `}</style>
875
887
  );
876
888
  };
package/src/ts/utils/dom/components/ColorGradientSelector.tsx CHANGED
@@ -46,6 +46,7 @@ export class ColorGradientSelector {
46
46
  private css_buttonWidth = "100px";
47
47
  private css_buttonHeight = "1.8em";
48
48
  private css_buttonFontSize = "0.725em";
49
+ private css_buttonFontSize_larger = "1.0em";
49
50
 
50
51
  private colorGradients: Array<ColorGradient> = [];
51
52
  // TODO: this does not really need to be a pair, does it?
@@ -88,6 +89,7 @@ export class ColorGradientSelector {
88
89
  this.css_buttonWidth = "200px";
89
90
  this.css_buttonHeight = "2.5em";
90
91
  this.css_buttonFontSize = "1.25em";
92
+ this.css_buttonFontSize_larger = "1.45em";
91
93
  }
92
94
  this.baseID = Math.floor(Math.random() * 65535);
93
95
  this.elementID = `color-gradient-selector-${this.baseID}`;
@@ -391,7 +393,7 @@ export class ColorGradientSelector {
391
393
  >
392
394
  &nbsp;
393
395
  </div>
394
- <div sx={{ w: this.css_buttonHeight, flexShrink: 2, fontSize: this.css_buttonFontSize }}>▾</div>
396
+ <div sx={{ w: this.css_buttonHeight, flexShrink: 2, fontSize: this.css_buttonFontSize_larger }}>▾</div>
395
397
  </button>
396
398
  <div
397
399
  className="positioning-container"
@@ -428,7 +430,11 @@ export class ColorGradientSelector {
428
430
  #${this.elementID} button {
429
431
  border: 0px solid lightgray;
430
432
  padding: 0.25em;
431
- background-color: rgba(255,255,255,0.9);
433
+ /* background-color: rgba(255,255,255,0.9); */
434
+ }
435
+
436
+ #${this.elementID} .positioning-container button {
437
+ border-radius: 0;
432
438
  }
433
439
 
434
440
  #${this.elementID} .main-button:hover {
@@ -439,6 +445,7 @@ export class ColorGradientSelector {
439
445
  background-color: rgba(216,216,216,0.9);
440
446
  }
441
447
 
448
+
442
449
  `}</style>
443
450
  );
444
451
  };
package/src/ts/utils/parsers/svg/types.ts CHANGED
@@ -17,7 +17,7 @@ export type NumericString = `${number}`;
17
17
  export type BooleanString = "0" | "1" | `${boolean}`;
18
18
 
19
19
  // Example: 'M', -10, -7.5,
20
- export type SVGPathMoveToCommand = ["M" | "m", NumericString, NumericString];
20
+ export type SVGPathMoveToCommand = ["M" | "m", NumericString | number, NumericString | number];
21
21
  // Example: 'L', 0, -10,
22
22
  export type SVGPathLineToCommand = ["L" | "l", NumericString, NumericString, ...Array<NumericString>];
23
23
  // Example: 'V', -10,
@@ -42,13 +42,13 @@ export type SVGPathQuadraticCurveToCommand =
42
42
  // Example: 'C', -5, -15, 10, -15, 5, -10,
43
43
  export type SVGPathCubicCurveToCommand = [
44
44
  "C" | "c",
45
- NumericString,
46
- NumericString,
47
- NumericString,
48
- NumericString,
49
- NumericString,
50
- NumericString,
51
- ...Array<NumericString>
45
+ NumericString | number,
46
+ NumericString | number,
47
+ NumericString | number,
48
+ NumericString | number,
49
+ NumericString | number,
50
+ NumericString | number,
51
+ ...Array<NumericString | number>
52
52
  ];
53
53
  // Example: 'S', 15, 0, 10, 0,
54
54
  export type SVGPathShorthandCubicCurveToCommand = [