plotboilerplate 1.18.0 → 1.20.0

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/additionals.ts

@@ -0,0 +1,105 @@
+/**
+ * @date 2022-10-17
+ */
+import { Vertex } from "../Vertex";
+
+/**
+ * A common interface for different kinds of path segments.
+ */
+export interface PathSegment {
+  /**
+   * Get the start point of this path segment.
+   *
+   * @method getStartPoint
+   * @memberof PathSegment
+   * @return {Vertex} The start point of this path segment.
+   */
+  getStartPoint(): Vertex;
+
+  /**
+   * Get the end point of this path segment.
+   *
+   * @method getEndPoint
+   * @memberof PathSegment
+   * @return {Vertex} The end point of this path segment.
+   */
+  getEndPoint(): Vertex;
+
+  /**
+   * Get the tangent's end point at the start point of this segment.
+   *
+   * @method getStartTangent
+   * @memberof PathSegment
+   * @return {Vertex} The end point of the starting point's tangent.
+   */
+  getStartTangent(): Vertex;
+
+  /**
+   * Get the tangent's end point at the end point of this segment.
+   *
+   * @method getEndTangent
+   * @memberof PathSegment
+   * @return {Vertex} The end point of the ending point's tangent.
+   */
+  getEndTangent(): Vertex;
+
+  /**
+   * Create a deep clone of this path segment.
+   *
+   * @method clone
+   * @memberof PathSegment
+   * @return {PathSegment} A deep clone/copy of this path segment.
+   */
+  clone: () => PathSegment;
+
+  /**
+   * Revserse this path segment (in-place) and return this same instance (useful for chaining).
+   * The new path segment has start and end point swapped.
+   *
+   * @method reverse
+   * @memberof PathSegment
+   * @return {PathSegment} This path segment instance (for chaining).
+   */
+  reverse: () => PathSegment;
+}
+
+/**
+ * A common interface for general path representations.
+ */
+export interface Path extends PathSegment {
+  /**
+   * Get the number of segments in this path.
+   *
+   * @method getSegmentCount
+   * @memberof Path
+   * @return {number} The number (integer) of path segments.
+   */
+  getSegmentCount: () => number;
+
+  /**
+   * Get the path segment at the given index.
+   *
+   * @method getSegmentAt
+   * @memberof Path
+   * @return {PathSegment} The paths segment at the given index.
+   */
+  getSegmentAt: (index: number) => PathSegment;
+
+  /**
+   * Create a deep clone of this path.
+   *
+   * @method clone
+   * @memberof Path
+   * @return {Path} A deep clone/copy of this path.
+   */
+  clone: () => Path;
+
+  /**
+   * Reverse this path (swap start and end and thus – the direction) in-place.
+   *
+   * @method revert
+   * @memberof Path
+   * @return {PathSegment} This path instance.
+   */
+  reverse: () => Path;
+}

package/src/ts/interfaces/core.ts

@@ -15,6 +15,8 @@
  * @modified 2021-06-21 Added `IBounds.getCenter()`.
  * @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";
@@ -107,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).
@@ -175,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;
@@ -199,6 +203,7 @@ export interface DrawConfig {
     fill?: boolean;
     anchor?: boolean;
   };
+  origin: { color: string };
 }
 
 /** This is a fix for the problem, that the constructor's "name" attribute is not

package/src/ts/interfaces/index.ts

@@ -1,3 +1,4 @@
 export * from "./core";
 export * from "./DrawLib";
 export * from "./externals";
+export * from "./additionals";

package/src/ts/utils/algorithms/arrayShuffle.ts

@@ -0,0 +1,11 @@
+/**
+ * Randomize a given array in-place.
+ *
+ * @author Ikaros Kappler
+ * @date 2022-10-09
+ * @version 1.0.0
+ **/
+
+export const arrayShuffle = (arr: Array<any>): void => {
+  arr.sort(() => Math.random() - 0.5);
+};

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

@@ -0,0 +1,195 @@
+/**
+ * A function to detect connected paths on the plane given by a random set of segments.
+ *
+ * Note that is algorithm operates IN PLACE and will ALTER your INPUT array.
+ *
+ * @author  Ikaros Kappler
+ * @version 1.0.0
+ * @date    2022-10-17
+ */
+
+import { Path, PathSegment } from "../../interfaces";
+import { GenericPath } from "../datastructures/GenericPath";
+
+/**
+ * An interface/datascructure for keeping track of visited path segments.
+ */
+interface Visitation {
+  visited: boolean;
+  hasPredecessor: boolean;
+  hasSuccessor: boolean;
+}
+
+/**
+ * A private helper function that initializes the visitation tracking and reverses
+ * dangling path ends to connect them with preceding paths.
+ *
+ * Note that this function alters those dangling path segments IN PLACE!
+ *
+ * @param segments
+ * @param epsilon
+ * @returns
+ */
+const initVisitationArray = (segments: Array<PathSegment>, epsilon: number): Array<Visitation> => {
+  const result: Array<Visitation> = []; // { visited: false, hasPredecessor: false }
+  for (var i = 0; i < segments.length; i++) {
+    result.push({ visited: false, hasPredecessor: false, hasSuccessor: false });
+    for (var j = 0; j < segments.length; j++) {
+      if (i === j) {
+        continue;
+      }
+      if (
+        segments[i].getStartPoint().distance(segments[j].getEndPoint()) < epsilon ||
+        segments[i].getStartPoint().distance(segments[j].getStartPoint()) < epsilon
+      ) {
+        result[i].hasPredecessor = true;
+      }
+      if (
+        segments[i].getEndPoint().distance(segments[j].getEndPoint()) < epsilon ||
+        segments[i].getEndPoint().distance(segments[j].getStartPoint()) < epsilon
+      ) {
+        result[i].hasSuccessor = true;
+      }
+    }
+  }
+  // After first initialization make sure that no loose path ends are dangling around
+  // if the affected path segment has a predecessor (but nu successor).
+  //
+  // Revert those segments. This makes the actual detection algorithm much easier.
+  for (var i = 0; i < segments.length; i++) {
+    if (!result[i].hasSuccessor && result[i].hasPredecessor) {
+      segments[i] = segments[i].reverse();
+      result[i].hasPredecessor = false;
+      result[i].hasSuccessor = true;
+    }
+  }
+  return result;
+};
+
+/**
+ * Find the next unvisited path segment (private helper function).
+ *
+ * There is a special order: starting path segments (those without any predecessor)
+ * will be preferred. If no more open paths are available (no starting path segments),
+ * then no more unvisited paths are available or all remaining paths are loops (without
+ * determined start/end).
+ *
+ * Doing this keeps us from the need to run a final loop to connect detected sub paths.
+ *
+ * @param {Array<PathSegment>} segments - The path segments to search in.
+ * @param { Array<Visitation>} isSegmentVisited
+ * @returns {number} The index of the next unvisited path segment or -1 if no more are available.
+ */
+const locateUnvisitedSegment = (segments: Array<PathSegment>, isSegmentVisited: Array<Visitation>): number => {
+  // First run: detect beginnings
+  for (var i = 0; i < segments.length; i++) {
+    if (!isSegmentVisited[i].hasPredecessor && !isSegmentVisited[i].visited) {
+      return i;
+    }
+  }
+  // Second run: if no beginnings exist -> use inner path segment
+  for (var i = 0; i < segments.length; i++) {
+    if (!isSegmentVisited[i].visited) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+/**
+ * Get the next adjacent path segment to the given (current) segment. This is a private
+ * helper function.
+ *
+ * Note that the function will revert the adjacent path segment if required, so the next
+ * starting point 'equals' the current ending point.
+ *
+ * The visitation tracker will be updated if the adjacent segment was found.
+ *
+ * @param {Array<PathSegment>} segments - The total set of available path segments (visited and invisited).
+ * @param {Array<Visitation>} isSegmentVisited - A tracker of visited path segments so far.
+ * @param {PathSegment} currentSegment - The current path segment to find the adjacent segment for.
+ * @param {number} epsilon - The epsilon to use to detect 'equal' start/end points. Must be >= 0.
+ * @returns {PathSegment | null} The next adjacent path segment of null if no such exists.
+ */
+const getAdjacentSegment = (
+  segments: Array<PathSegment>,
+  isSegmentVisited: Array<Visitation>,
+  currentSegment: PathSegment,
+  epsilon: number
+): PathSegment | null => {
+  for (var j = 0; j < segments.length; j++) {
+    if (isSegmentVisited[j].visited) {
+      continue;
+    }
+    var nextSegment = segments[j];
+    // [start]---[end] [start]---[end]
+    if (currentSegment.getEndPoint().distance(nextSegment.getStartPoint()) < epsilon) {
+      isSegmentVisited[j].visited = true;
+      return nextSegment;
+    }
+    // [start]---[end] [end]---[start]
+    else if (currentSegment.getEndPoint().distance(nextSegment.getEndPoint()) < epsilon) {
+      isSegmentVisited[j].visited = true;
+      return nextSegment.reverse();
+    }
+  }
+  return null;
+};
+
+/**
+ * A private helper function to find the adjacent full path for the given path segment,
+ * considering the current path segment is a starting segment (or one inside a loop).
+ *
+ * @param {Array<PathSegment>} segments - The total set of available path segments.
+ * @param { Array<Visitation>} isSegmentVisited - A tracker to determine which segments have already been visited.
+ * @param {number} currentSegmentIndex - The index of the current segments to find the containing path for.
+ * @param {number} epsilon - The epsilon to use to determine 'equal' path points. Must be >= 0.
+ * @returns {GenericPath} The dected path which consists at least of the current path segment.
+ */
+const detectAdjacentPath = (
+  segments: Array<PathSegment>,
+  isSegmentVisited: Array<Visitation>,
+  currentSegmentIndex: number,
+  epsilon: number
+): GenericPath => {
+  var currentSegment: PathSegment | null = segments[currentSegmentIndex];
+  isSegmentVisited[currentSegmentIndex].visited = true;
+  const path = new GenericPath(currentSegment); // { segments: [currentSegment], reverse };
+
+  var i: number = 0;
+  // A safety break if something goes wrong
+  while (i < segments.length && currentSegment) {
+    currentSegment = getAdjacentSegment(segments, isSegmentVisited, currentSegment, epsilon);
+    if (currentSegment) {
+      path.segments.push(currentSegment);
+    }
+    i++;
+  }
+  return path;
+};
+
+/**
+ * Run a path detection on the given set of path segments.
+ *
+ * Note that the array and some path segments may be altered (like reversal) IN PLACE.
+ *
+ * @param {Array<PathSegment>} segments - The total set (array) of available path segments.
+ * @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<GenericPath> => {
+  const eps = typeof epsilon === "undefined" || epsilon < 0 ? 1.0 : epsilon;
+  const isSegmentVisited: Array<Visitation> = initVisitationArray(segments, eps);
+  const resultPaths: Array<GenericPath> = [];
+  var nextSegmentIndex: number = -1;
+  var i = 0;
+  while ((nextSegmentIndex = locateUnvisitedSegment(segments, isSegmentVisited)) !== -1 && i < segments.length) {
+    isSegmentVisited[nextSegmentIndex].visited = true;
+    // A safety break (to avoid infinited loops during development).
+    i++;
+    const path = detectAdjacentPath(segments, isSegmentVisited, nextSegmentIndex, eps);
+    i += path.getSegmentCount() - 1;
+    resultPaths.push(path);
+  }
+  return resultPaths;
+};

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/datastructures/GenericPath.ts

@@ -0,0 +1,113 @@
+/**
+ * @author  Ikaros Kappler
+ * @version 1.0.0
+ * @date    2022-10-17
+ */
+
+import { Path, PathSegment } from "../../interfaces/additionals";
+import { Vertex } from "../../Vertex";
+
+export class GenericPath implements Path {
+  segments: Array<PathSegment>;
+
+  constructor(startSegment: PathSegment) {
+    this.segments = [startSegment];
+  }
+
+  /**
+   * Get the number of segments in this path.
+   *
+   * @method getSegmentCount
+   * @memberof Path
+   * @return {number} The number (integer) of path segments.
+   */
+  getSegmentCount(): number {
+    return this.segments.length;
+  }
+
+  /**
+   * Get the path segment at the given index.
+   *
+   * @method getSegmentAt
+   * @memberof Path
+   * @return {PathSegment} The paths segment at the given index.
+   */
+  getSegmentAt(index: number): PathSegment {
+    return this.segments[index];
+  }
+
+  /**
+   * Create a deep clone of this path.
+   *
+   * @method clone
+   * @memberof Path
+   * @return {Path} A deep clone/copy of this path.
+   */
+  clone(): GenericPath {
+    const newPath = new GenericPath(this.segments[this.segments.length - 1].clone().reverse());
+    for (var i = this.segments.length - 2; i >= 0; i--) {
+      newPath.segments.push(this.segments[i].clone().reverse());
+    }
+    return newPath;
+  }
+
+  /**
+   * Reverse this path (swap start and end and thus – the direction) in-place.
+   *
+   * @method reverse
+   * @memberof Path
+   * @return {PathSegment} This path instance.
+   */
+  reverse() {
+    const newSegments: Array<PathSegment> = [];
+    for (var i = this.segments.length - 1; i >= 0; i--) {
+      newSegments.push(this.segments[i].reverse());
+    }
+    this.segments = newSegments;
+    return this;
+  }
+
+  /**
+   * Get the start point of this path segment.
+   *
+   * @method getStartPoint
+   * @memberof PathSegment
+   * @return {Vertex} The start point of this path segment.
+   */
+  getStartPoint(): Vertex {
+    return this.segments[0].getStartPoint();
+  }
+
+  /**
+   * Get the end point of this path segment.
+   *
+   * @method getEndPoint
+   * @memberof PathSegment
+   * @return {Vertex} The end point of this path segment.
+   */
+  getEndPoint(): Vertex {
+    return this.segments[this.segments.length - 1].getEndPoint();
+  }
+
+  /**
+   * Get the tangent's end point at the start point of this segment.
+   *
+   * @method getStartTangent
+   * @memberof PathSegment
+   * @return {Vertex} The end point of the starting point's tangent.
+   */
+  getStartTangent(): Vertex {
+    return this.segments[0].getStartTangent();
+  }
+
+  /**
+   * Get the tangent's end point at the end point of this segment.
+   *
+   * @method getEndTangent
+   * @memberof PathSegment
+   * @return {Vertex} The end point of the ending point's tangent.
+   */
+  getEndTangent(): Vertex {
+    return this.segments[this.segments.length - 1].getEndTangent();
+  }
+}

package/src/ts/utils/datastructures/GirihTile.ts

@@ -319,7 +319,7 @@ export abstract class GirihTile extends Polygon {
    * @param {Polygon} neighbourTile - The polygon (or tile) you want to find adjacency for at the specified edge.
    * @return {Polygon|null} the passed tile itself if adjacency was found, null otherwise.
    */
-  transformTilePositionToAdjacency<P extends Polygon>(baseEdgeIndex: number, neighbourTile: P): P {
+  transformTilePositionToAdjacency<P extends Polygon>(baseEdgeIndex: number, neighbourTile: P): P | null {
     // Find the position for that tile to match (might not exist)
     // { edgeIndex:number, offset:XYCoords }
     var adjacency = this.findAdjacentTilePosition(baseEdgeIndex, neighbourTile);

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.
       }
     }
   };