plotboilerplate 1.19.0 → 1.20.1

package/src/esm/utils/parsers/svg/types.js

@@ -0,0 +1,16 @@
+/**
+ * Defining some basic SVG command types.
+ *
+ * As these types do not define all very possible path data strings they should cover the most daily use-cases.
+ *
+ * For more insight see
+ *    https://www.w3.org/TR/SVG/paths.html
+ *
+ *
+ * @author   Ikaros Kappler
+ * @date     2022-12-21 (winter solstice night – yes the days & nights are dark and I have nothing else to do)
+ * @modified 2023-01-17 Added multiple parameter sets.
+ * @version  0.0.2-alpha
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/src/esm/utils/parsers/svg/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../ts/utils/parsers/svg/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG"}

package/src/ts/Bounds.ts

@@ -7,7 +7,8 @@
  * @modified 2021-06-21 (mid-summer) Added `getCenter` method.
  * @modified 2022-02-01 Added the `toString` function.
  * @modified 2022-10-09 Added the `fromDimension` function.
- * @version  1.5.0
+ * @modified 2022-11-28 Added the `clone` method.
+ * @version  1.6.0
  **/
 
 import { Polygon } from "./Polygon";
@@ -114,17 +115,14 @@ export class Bounds implements IBounds, XYDimension {
   /**
    * Clone this bounds object (create a deep clone).
    *
-   * Note: the returned format might change in the future, so please do not
-   * rely on the returned string format.
-   *
    * @method clone
    * @instance
    * @memberof Bounds
-   * @returns {string} Creates a deep clone of this bounds object. The returned object's `min` and `max` instances are `Vertex` instances.
+   * @returns {Bounds} Creates a deep clone of this bounds object.
    */
-  // clone() {
-  //   return new Bounds(new Vertex(this.min.x, this.min.y), new Vertex(this.max.x, this.max.y));
-  // }
+  clone() {
+    return new Bounds({ x: this.min.x, y: this.min.y }, { x: this.max.x, y: this.max.y });
+  }
 
   /**
    * Compute the minimal bounding box for a given set of vertices.

package/src/ts/PlotBoilerplate.ts

@@ -77,7 +77,8 @@
  * @modified 2022-08-01 Added `title` to the params.
  * @modified 2022-10-25 Added the `origin` to the default draw config.
  * @modified 2022-11-06 Adding an XML declaration to the SVG export routine.
- * @version  1.16.0
+ * @modified 2022-11-23 Added the `drawRaster` (default=true) option to the config/drawconfig.
+ * @version  1.17.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -413,6 +414,7 @@ export class PlotBoilerplate {
       offsetX: f.num(config, "offsetX", 0.0),
       offsetY: f.num(config, "offsetY", 0.0),
       rasterGrid: f.bool(config, "rasterGrid", true),
+      drawRaster: f.bool(config, "drawRaster", true),
       rasterScaleX: f.num(config, "rasterScaleX", 1.0),
       rasterScaleY: f.num(config, "rasterScaleY", 1.0),
       rasterAdjustFactor: f.num(config, "rasterAdjustdFactror", 2.0),
@@ -467,6 +469,7 @@ export class PlotBoilerplate {
       drawHandleLines: f.bool(config, "drawHandleLines", true),
       drawHandlePoints: f.bool(config, "drawHandlePoints", true),
       drawGrid: f.bool(config, "drawGrid", true),
+      drawRaster: f.bool(config, "drawRaster", true),
       bezier: {
         color: "#00a822",
         lineWidth: 2,
@@ -1021,7 +1024,7 @@ export class PlotBoilerplate {
    * @return The vertex near the given position or undefined if none was found there.
    **/
   getVertexNear(pixelPosition: XYCoords, pixelTolerance: number): Vertex | undefined {
-    var p: IDraggable | undefined = this.locatePointNear(
+    const p: IDraggable | null = this.locatePointNear(
       this.transformMousePosition(pixelPosition.x, pixelPosition.y),
       pixelTolerance / Math.min(this.config.cssScaleX ?? 1.0, this.config.cssScaleY ?? 1.0)
     );
@@ -1460,8 +1463,12 @@ export class PlotBoilerplate {
    * @return {void}
    **/
   drawAll(renderTime: number, draw: DrawLib<any>, fill: DrawLib<any>) {
-    this.drawGrid(draw);
-    if (this.config.drawOrigin) this.drawOrigin(draw);
+    if (this.config.drawRaster) {
+      this.drawGrid(draw);
+    }
+    if (this.config.drawOrigin) {
+      this.drawOrigin(draw);
+    }
     this.drawDrawables(renderTime, draw, fill);
     this.drawVertices(renderTime, draw);
     this.drawSelectPolygon(draw);

package/src/ts/VEllipseSector.ts

@@ -2,10 +2,11 @@
  * Implementation of elliptic sectors.
  * Note that sectors are constructed in clockwise direction.
  *
- * @author  Ikaros Kappler
- * @date    2021-02-26
+ * @author   Ikaros Kappler
+ * @date     2021-02-26
  * @modified 2022-02-02 Added the `destroy` method.
- * @version 1.1.0
+ * @modified 2022-11-01 Tweaked the `endpointToCenterParameters` function to handle negative values, too, without errors.
+ * @version  1.1.1
  */
 
 import { CubicBezierCurve } from "./CubicBezierCurve";
@@ -139,19 +140,23 @@ export class VEllipseSector {
         curves.push(curve);
       } else {
         // Find intersection
-        let intersection: Vertex | undefined = startTangent.intersection(endTangent);
+        let intersection: Vertex | null = startTangent.intersection(endTangent);
         // What if intersection is undefined?
         // --> This *can* not happen if segmentCount > 2 and height and width of the ellipse are not zero.
 
-        let startDiff: Vertex = startPoint.difference(intersection);
-        let endDiff: Vertex = endPoint.difference(intersection);
-        let curve: CubicBezierCurve = new CubicBezierCurve(
-          startPoint.clone(),
-          endPoint.clone(),
-          startPoint.clone().add(startDiff.scale(threshold)),
-          endPoint.clone().add(endDiff.scale(threshold))
-        );
-        curves.push(curve);
+        if (intersection) {
+          // It's VERY LIKELY hat this ALWAYS happens; it's just a typesave variant.
+          // Intersection cannot be null.
+          let startDiff: Vertex = startPoint.difference(intersection);
+          let endDiff: Vertex = endPoint.difference(intersection);
+          let curve: CubicBezierCurve = new CubicBezierCurve(
+            startPoint.clone(),
+            endPoint.clone(),
+            startPoint.clone().add(startDiff.scale(threshold)),
+            endPoint.clone().add(endDiff.scale(threshold))
+          );
+          curves.push(curve);
+        }
       }
       startPoint = endPoint;
       curAngle = nextAngle;
@@ -268,7 +273,7 @@ export class VEllipseSector {
 
       // Bring all angles into the correct order
       //    Idea: use splice or slice here?
-      var angles = [];
+      var angles: Array<number> = [];
       for (var i = 0; i < ellipseAngles.length; i++) {
         angles.push(ellipseAngles[(startIndex + i) % ellipseAngles.length]);
       }
@@ -355,7 +360,8 @@ export class VEllipseSector {
 
       // Step 2 + 3: compute center
       const sign: number = fa === fs ? -1 : 1;
-      const M: number = sqrt((prx * pry - prx * py - pry * px) / (prx * py + pry * px)) * sign;
+      // const M: number = sqrt((prx * pry - prx * py - pry * px) / (prx * py + pry * px)) * sign;
+      const M: number = sqrt(Math.abs((prx * pry - prx * py - pry * px) / (prx * py + pry * px))) * sign;
 
       const _cx: number = (M * (rx * y)) / ry;
       const _cy: number = (M * (-ry * x)) / rx;
@@ -367,6 +373,7 @@ export class VEllipseSector {
       const center: Vertex = new Vertex(cx, cy);
       const axis: Vertex = center.clone().addXY(rx, ry);
       const ellipse: VEllipse = new VEllipse(center, axis, 0);
+      // console.log("VELLIPSE::::::", ellipse);
       ellipse.rotate(phi);
 
       const startAngle: number = new Line(ellipse.center, new Vertex(x1, y1)).angle();

package/src/ts/Vertex.ts

@@ -28,7 +28,8 @@
  * @modified 2022-01-31 Added `Vertex.utils.arrayToJSON`.
  * @modified 2022-02-02 Added the `destroy` method.
  * @modified 2022-02-02 Cleared the `Vertex.toSVGString` function (deprecated). Use `drawutilssvg` instead.
- * @version  2.7.0
+ * @modified 2022-11-28 Added the `subXY`, `subX` and `subY` methods to the `Vertex` class.
+ * @version  2.8.0
  *
  * @file Vertex
  * @public
@@ -342,6 +343,50 @@ export class Vertex implements XYCoords, SVGSerializable {
     return this;
   }
 
+  /**
+   * Substract the passed amounts from the x- and y- components of this vertex.
+   *
+   * @method subXY
+   * @param {number} x - The amount to substract from x.
+   * @param {number} y - The amount to substract from y.
+   * @return {Vertex} this
+   * @instance
+   * @memberof Vertex
+   **/
+  subXY(amountX: number, amountY: number): Vertex {
+    this.x -= amountX;
+    this.y -= amountY;
+    return this;
+  }
+
+  /**
+   * Substract the passed amounts from the x-component of this vertex.
+   *
+   * @method addX
+   * @param {number} x - The amount to substract from x.
+   * @return {Vertex} this
+   * @instance
+   * @memberof Vertex
+   **/
+  subX(amountX: number): Vertex {
+    this.x -= amountX;
+    return this;
+  }
+
+  /**
+   * Substract the passed amounts from the y-component of this vertex.
+   *
+   * @method subY
+   * @param {number} y - The amount to substract from y.
+   * @return {Vertex} this
+   * @instance
+   * @memberof Vertex
+   **/
+  subY(amountY: number): Vertex {
+    this.y -= amountY;
+    return this;
+  }
+
   /**
    * Check if this vertex equals the passed one.
    * <br>

package/src/ts/drawutilssvg.ts

@@ -34,7 +34,8 @@
  * @modified 2022-03-26 Added the private `nodeDefs` and `bufferedNodeDefs` attributes.
  * @modified 2022-03-26 Added the `texturedPoly` function to draw textures polygons.
  * @modified 2022-07-26 Adding `alpha` to the `image(...)` function.
- * @version  1.6.1
+ * @modified 2022-11-10 Tweaking some type issues.
+ * @version  1.6.2
  **/
 
 import { CircleSector } from "./CircleSector";
@@ -259,7 +260,7 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       "text": "Text"
     };
     // Question: why isn't this working if the svgNode is created dynamically? (nodeStyle.sheet is null)
-    const rules = [];
+    const rules: Array<string> = [];
     for (var k in keys) {
       const className: string = keys[k];
       const drawSettings: DrawSettings | undefined = drawConfig[k];
@@ -1321,10 +1322,10 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     this.curId = curId + "_text";
     const textNode: SVGElement = this.makeNode("text");
     node.appendChild(textNode);
-    textNode.setAttribute("font-family", options.fontFamily); // May be undefined
-    textNode.setAttribute("font-size", options.fontSize ? `${options.fontSize * this.scale.x}` : null);
-    textNode.setAttribute("font-style", options.fontStyle ? `${options.fontStyle}` : null);
-    textNode.setAttribute("font-weight", options.fontWeight ? `${options.fontWeight}` : null);
+    textNode.setAttribute("font-family", options.fontFamily ?? ""); // May be undefined
+    textNode.setAttribute("font-size", options.fontSize ? `${options.fontSize * this.scale.x}` : "");
+    textNode.setAttribute("font-style", options.fontStyle ? `${options.fontStyle}` : "");
+    textNode.setAttribute("font-weight", options.fontWeight ? `${options.fontWeight}` : "");
     textNode.setAttribute("text-anchor", textAlign);
     textNode.setAttribute("transform-origin", "0 0");
     textNode.setAttribute("transform", rotate);
@@ -1488,19 +1489,7 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     const _sy = (index: number): void => {
       data[index] = scale.y * Number(data[index]);
     };
-    const stx = (value: number): number => {
-      return offset.x + scale.x * value;
-    };
-    const sty = (value: number): number => {
-      return offset.y + scale.y * value;
-    };
-    // scale only {x,y}
-    const sx = (value: number): number => {
-      return scale.x * value;
-    };
-    const sy = (value: number): number => {
-      return scale.y * value;
-    };
+
     var i: number = 0;
     var lastPoint: XYCoords = { x: NaN, y: NaN };
     // "save last point"

package/src/ts/interfaces/core.ts

@@ -16,6 +16,7 @@
  * @modified 2021-11-16 Added `text` options to the `DrawConfig`.
  * @modified 2022-08-01 Added `title` param to the `PBParams` interface.
  * @modified 2022-10-25 Added `origin` param to the `DrawConfig` interface.
+ * @modified 2022-11-23 Added `drawRaster` to the `Config` interface.
  **/
 
 import { Vertex } from "../Vertex";
@@ -108,6 +109,7 @@ export interface Config {
   offsetX?: number; // The initial x-offset. Default is 0.0. Note that autoAdjustOffset=true overrides these values.
   offsetY?: number; // The initial y-offset. Default is 0.0. Note that autoAdjustOffset=true overrides these values.
   rasterGrid?: boolean; // If set to true the background grid will be drawn rastered.
+  drawRaster?: boolean; // If set to false, no raster or grid will be drawn at all.
   rasterScaleX?: number; // Define the default horizontal raster scale (default=1.0).
   rasterScaleY?: number; // Define the default vertical raster scale (default=1.0).
   rasterAdjustFactor?: number; // The exponential limit for wrapping down the grid. (2.0 means: halve the grid each 2.0*n zoom step).
@@ -176,6 +178,7 @@ export interface DrawConfig {
   drawHandleLines: boolean;
   drawHandlePoints: boolean;
   drawGrid: boolean;
+  drawRaster: boolean; // If set to false, no raster or grid will be drawn at all.
   bezier: {
     color: string;
     lineWidth: number;

package/src/ts/utils/algorithms/detectPaths.ts

@@ -177,7 +177,7 @@ const detectAdjacentPath = (
  * @param {number=1.0} epsilon - (optional) An epsilon to use to tell if two plane points should be considered 'equal'.
  * @returns {Array<GenericPath>} An array containing all detected path (consisting of adjacent path segments of the original set).
  */
-export const detectPaths = (segments: Array<PathSegment>, epsilon?: number): Array<Path> => {
+export const detectPaths = (segments: Array<PathSegment>, epsilon?: number): Array<GenericPath> => {
   const eps = typeof epsilon === "undefined" || epsilon < 0 ? 1.0 : epsilon;
   const isSegmentVisited: Array<Visitation> = initVisitationArray(segments, eps);
   const resultPaths: Array<GenericPath> = [];

package/src/ts/utils/datastructures/Color.ts

@@ -532,9 +532,13 @@ export class Color {
    * @param {string} str - The string representation to parse.
    * @return {Color} The color instance that's represented by the given string.
    */
-  static parse(str: string): Color {
-    if (typeof str == "undefined") return null;
-    if ((str = str.trim().toLowerCase()).length == 0) return null;
+  static parse(str: string): Color | null {
+    if (typeof str == "undefined") {
+      return null;
+    }
+    if ((str = str.trim().toLowerCase()).length == 0) {
+      return null;
+    }
     if (str.startsWith("#")) return Color.makeHEX(str.substring(1, str.length));
     if (str.startsWith("rgb")) {
       var parts = str.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,?\s*(\d*(?:\.\d+\s*)?)\)$/);
@@ -555,7 +559,7 @@ export class Color {
 
   private static Sanitizer = {
     RGB: function (...args: any[]) {
-      var o = [];
+      var o: number[] = [];
       if (arguments.length == 0) {
         return [];
       }

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

@@ -13,11 +13,13 @@
  * @author   Ikaros Kappler
  * @date     2021-10-13
  * @modified 2022-01-31 (ported from the ngdg project, then generalized)
- * @version  2.0.0
+ * @modified 2023-01-03 Fixing some minor type issues and adding SVG reading capabilities.
+ * @version  2.1.0
  */
 
 type IDroppedCallbackJSON = (jsonData: object) => void;
 type IDroppedCallbackText = (textData: string) => void;
+type IDroppedCallbackSVG = (svgDocument: Document) => void;
 type IDroppedCallbackBinary = (binaryData: Blob, file: File) => void;
 
 export class FileDrop {
@@ -53,6 +55,14 @@ export class FileDrop {
    */
   private fileDroppedCallbackBinary: IDroppedCallbackBinary | null;
 
+  /**
+   * The SVG file drop callback.
+   * @private
+   * @memberof FileDrop
+   * @member {HTMLElement}
+   */
+  private fileDroppedCallbackSVG: IDroppedCallbackSVG | null;
+
   /**
    *
    * @param {HTMLElement} element - The element you wish to operate as the drop zone (like <body/>).
@@ -92,6 +102,10 @@ export class FileDrop {
     this.fileDroppedCallbackText = callback;
   }
 
+  onFileSVGDropped(callback: IDroppedCallbackSVG) {
+    this.fileDroppedCallbackSVG = callback;
+  }
+
   /**
    * Internally handle a drop event.
    *
@@ -103,7 +117,7 @@ export class FileDrop {
     event.stopPropagation();
     this.element.style.opacity = "1.0";
 
-    if (!event.dataTransfer.files || event.dataTransfer.files.length === 0) {
+    if (!event.dataTransfer || !event.dataTransfer.files || event.dataTransfer.files.length === 0) {
       // No files were dropped
       return;
     }
@@ -111,36 +125,63 @@ export class FileDrop {
       // Multiple file drop is not nupported
       return;
     }
-    if (!this.fileDroppedCallbackJSON) {
-      // No handling callback defined.
-      return;
-    }
+    // if (!this.fileDroppedCallbackJSON) {
+    //   // No handling callback defined.
+    //   return;
+    // }
     if (event.dataTransfer.files[0]) {
       const file: File = event.dataTransfer.files[0];
       // console.log("file", file);
-      if (file.type.match(/json.*/) && this.fileDroppedCallbackJSON) {
+      if (file.type.match(/json.*/) && this.fileDroppedCallbackJSON !== null) {
         var reader = new FileReader();
         reader.onload = (readEvent: ProgressEvent<FileReader>) => {
+          if (!readEvent.target) {
+            console.warn("Cannot process JSON ProgressEvent data: target is null.");
+            return;
+          }
           // Finished reading file data.
           const jsonObject: object = JSON.parse(readEvent.target.result as string);
           // TODO: what happens on fail?
-          this.fileDroppedCallbackJSON(jsonObject);
+          this.fileDroppedCallbackJSON && this.fileDroppedCallbackJSON(jsonObject);
         };
         reader.readAsText(file); // start reading the file data.
       } else if (file.type.match(/text\/plain.*/) && this.fileDroppedCallbackText) {
         var reader = new FileReader();
         reader.onload = (readEvent: ProgressEvent<FileReader>) => {
+          if (!readEvent.target) {
+            console.warn("Cannot process Text ProgressEvent data: target is null.");
+            return;
+          }
           // Finished reading file data.
-          this.fileDroppedCallbackText(readEvent.target.result as string);
+          this.fileDroppedCallbackText && this.fileDroppedCallbackText(readEvent.target.result as string);
         };
         reader.readAsText(file); // start reading the file data.
       } else if (this.fileDroppedCallbackBinary) {
         var reader = new FileReader();
         reader.onload = (readEvent: ProgressEvent<FileReader>) => {
+          if (!readEvent.target) {
+            console.warn("Cannot process Binary ProgressEvent data: target is null.");
+            return;
+          }
           // Finished reading file data.
-          this.fileDroppedCallbackBinary(new Blob([readEvent.target.result]), file);
+          this.fileDroppedCallbackBinary &&
+            this.fileDroppedCallbackBinary(new Blob([readEvent.target.result as ArrayBuffer]), file);
         };
         reader.readAsBinaryString(file); // start reading the file data.
+      } else if (this.fileDroppedCallbackSVG) {
+        var reader = new FileReader();
+        reader.onload = (readEvent: ProgressEvent<FileReader>) => {
+          if (!readEvent.target) {
+            console.warn("Cannot process SVG ProgressEvent data: target is null.");
+            return;
+          }
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(readEvent.target.result as string, "image/svg+xml");
+
+          // Finished reading file data.
+          this.fileDroppedCallbackSVG && this.fileDroppedCallbackSVG(doc);
+        };
+        reader.readAsText(file); // start reading the file data.
       }
     }
   };