plotboilerplate 1.15.0 → 1.16.0

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

@@ -0,0 +1,98 @@
+/**
+ * A basic IO handler for file drop (Drag-and-drop).
+ *
+ * Example use:
+ * ```javascript
+ *  var body = document.getElememtByTagName("body")[0];
+ *  var fileDrop = new FileDrop(body);
+ *    fileDrop.onFileJSONDropped(function (jsonObject) {
+ *    console.log("jsonObject", jsonObject);
+ *  });
+ * ```
+ *
+ * @author   Ikaros Kappler
+ * @date     2021-10-13
+ * @modified 2022-01-31 (ported from the ngdg project, then generalized)
+ * @version  2.0.0
+ */
+declare type IDroppedCallbackJSON = (jsonData: object) => void;
+declare type IDroppedCallbackText = (textData: string) => void;
+export declare class FileDrop {
+    /**
+     * The 'dropzone' element.
+     * @private
+     * @memberof FileDrop
+     * @member {HTMLElement}
+     */
+    private element;
+    /**
+     * The JSON file drop callback.
+     * @private
+     * @memberof FileDrop
+     * @member {HTMLElement}
+     */
+    private fileDroppedCallbackJSON;
+    /**
+     * The text file drop callback.
+     * @private
+     * @memberof FileDrop
+     * @member {HTMLElement}
+     */
+    private fileDroppedCallbackText;
+    /**
+     * The binary file drop callback.
+     * @private
+     * @memberof FileDrop
+     * @member {HTMLElement}
+     */
+    private fileDroppedCallbackBinary;
+    /**
+     *
+     * @param {HTMLElement} element - The element you wish to operate as the drop zone (like <body/>).
+     */
+    constructor(element: HTMLElement);
+    /**
+     * Install the JSON (MIME type json*) file drop callback. Note than only one callback can be installed
+     * in this implementation. Calling this method multiple times will overwrite previously
+     * installed listeners.
+     *
+     * The callback will receive the dropped file content as an object (parsed JSON).
+     *
+     * @param {(data:object)=>void} callback
+     */
+    onFileJSONDropped(callback: IDroppedCallbackJSON): void;
+    /**
+     * Install the text file (MIME type text/plain) drop callback. Note than only one callback can be installed
+     * in this implementation. Calling this method multiple times will overwrite previously
+     * installed listeners.
+     *
+     * The callback will receive the dropped file content as a string.
+     *
+     * @param {(data:object)=>void} callback
+     */
+    onFileTextDropped(callback: IDroppedCallbackText): void;
+    /**
+     * Internally handle a drop event.
+     *
+     * @param {DragEvent} event
+     * @returns {void}
+     */
+    private handleDropEvent;
+    /**
+     * Toggles the drop sensitive element's opacity to 0.5.
+     *
+     * @param {DragEvent} event - The event.
+     */
+    private handleDragOverEvent;
+    /**
+     * Restored the drop sensitive element's opacity back to 1.0.
+     *
+     * @param {DragEvent} event - The event.
+     */
+    private handleDragLeaveEvent;
+    /**
+     * Removes all listeners (drop, dragover and dragleave).
+     */
+    destroy(): void;
+}
+export {};

package/src/esm/utils/io/FileDrop.js

@@ -0,0 +1,136 @@
+/**
+ * A basic IO handler for file drop (Drag-and-drop).
+ *
+ * Example use:
+ * ```javascript
+ *  var body = document.getElememtByTagName("body")[0];
+ *  var fileDrop = new FileDrop(body);
+ *    fileDrop.onFileJSONDropped(function (jsonObject) {
+ *    console.log("jsonObject", jsonObject);
+ *  });
+ * ```
+ *
+ * @author   Ikaros Kappler
+ * @date     2021-10-13
+ * @modified 2022-01-31 (ported from the ngdg project, then generalized)
+ * @version  2.0.0
+ */
+export class FileDrop {
+    /**
+     *
+     * @param {HTMLElement} element - The element you wish to operate as the drop zone (like <body/>).
+     */
+    constructor(element) {
+        /**
+         * Internally handle a drop event.
+         *
+         * @param {DragEvent} event
+         * @returns {void}
+         */
+        this.handleDropEvent = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.element.style.opacity = "1.0";
+            if (!event.dataTransfer.files || event.dataTransfer.files.length === 0) {
+                // No files were dropped
+                return;
+            }
+            if (event.dataTransfer.files.length > 1) {
+                // Multiple file drop is not nupported
+                return;
+            }
+            if (!this.fileDroppedCallbackJSON) {
+                // No handling callback defined.
+                return;
+            }
+            if (event.dataTransfer.files[0]) {
+                const file = event.dataTransfer.files[0];
+                // console.log("file", file);
+                if (file.type.match(/json.*/) && this.fileDroppedCallbackJSON) {
+                    var reader = new FileReader();
+                    reader.onload = (readEvent) => {
+                        // Finished reading file data.
+                        const jsonObject = JSON.parse(readEvent.target.result);
+                        // TODO: what happens on fail?
+                        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) => {
+                        // Finished reading file data.
+                        this.fileDroppedCallbackText(readEvent.target.result);
+                    };
+                    reader.readAsText(file); // start reading the file data.
+                }
+                else if (this.fileDroppedCallbackBinary) {
+                    var reader = new FileReader();
+                    reader.onload = (readEvent) => {
+                        // Finished reading file data.
+                        this.fileDroppedCallbackBinary(new Blob([readEvent.target.result]), file);
+                    };
+                    reader.readAsBinaryString(file); // start reading the file data.
+                }
+            }
+        };
+        /**
+         * Toggles the drop sensitive element's opacity to 0.5.
+         *
+         * @param {DragEvent} event - The event.
+         */
+        this.handleDragOverEvent = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.element.style.opacity = "0.5";
+        };
+        /**
+         * Restored the drop sensitive element's opacity back to 1.0.
+         *
+         * @param {DragEvent} event - The event.
+         */
+        this.handleDragLeaveEvent = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.element.style.opacity = "1.0";
+        };
+        this.element = element;
+        // Init the drop listeners
+        element.addEventListener("drop", this.handleDropEvent.bind(this));
+        element.addEventListener("dragover", this.handleDragOverEvent.bind(this));
+        element.addEventListener("dragleave", this.handleDragLeaveEvent.bind(this));
+    }
+    /**
+     * Install the JSON (MIME type json*) file drop callback. Note than only one callback can be installed
+     * in this implementation. Calling this method multiple times will overwrite previously
+     * installed listeners.
+     *
+     * The callback will receive the dropped file content as an object (parsed JSON).
+     *
+     * @param {(data:object)=>void} callback
+     */
+    onFileJSONDropped(callback) {
+        this.fileDroppedCallbackJSON = callback;
+    }
+    /**
+     * Install the text file (MIME type text/plain) drop callback. Note than only one callback can be installed
+     * in this implementation. Calling this method multiple times will overwrite previously
+     * installed listeners.
+     *
+     * The callback will receive the dropped file content as a string.
+     *
+     * @param {(data:object)=>void} callback
+     */
+    onFileTextDropped(callback) {
+        this.fileDroppedCallbackText = callback;
+    }
+    /**
+     * Removes all listeners (drop, dragover and dragleave).
+     */
+    destroy() {
+        this.element.removeEventListener("drop", this.handleDropEvent);
+        this.element.removeEventListener("dragover", this.handleDragOverEvent);
+        this.element.removeEventListener("dragleave", this.handleDragLeaveEvent);
+    }
+}
+//# sourceMappingURL=FileDrop.js.map

package/src/esm/utils/io/FileDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../ts/utils/io/FileDrop.ts"],"names":[],"mappings":"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"}

package/src/ts/BezierPath.ts

@@ -20,7 +20,10 @@
  * @modified 2020-07-24 Added the getClosestT(Vertex) function.
  * @modified 2020-12-29 Constructor is now private (no explicit use intended).
  * @modified 2021-05-25 Added BezierPath.fromReducedList( Array<number> ).
- * @version 2.3.1
+ * @modified 2022-01-31 Added `BezierPath.getEvenDistributionVertices(number)`.
+ * @modified 2022-02-02 Added the `destroy` method.
+ * @modified 2022-02-02 Cleared the `toSVGString` function (deprecated). Use `drawutilssvg` instead.
+ * @version 2.5.0
  *
  * @file BezierPath
  * @public
@@ -96,6 +99,14 @@ export class BezierPath implements SVGSerializable {
    */
   bezierCurves: Array<CubicBezierCurve>;
 
+  /**
+   * @member {boolean}
+   * @memberof BezierPath
+   * @type {boolean}
+   * @instance
+   */
+  isDestroyed: boolean;
+
   // +---------------------------------------------------------------------------------
   // | These constants equal the values from CubicBezierCurve.
   // +-------------------------------
@@ -1054,6 +1065,64 @@ export class BezierPath implements SVGSerializable {
     return new Bounds(min, max);
   }
 
+  /**
+   * Get n 'equally' distributed vertices along this Bézier path.
+   *
+   * As the changing curvature of the B slines makes prediction of distances difficult, the
+   * returned vertices' distances are only relatively equal:
+   *  - the distance grows where curvature is large.
+   *  - the distance shrinks where curvature is small.
+   *
+   * Only the distance mean of all consecutive is 1/n-th of the total arc length.
+   *
+   * Usually this approximation is good enough for most use cases.
+   *
+   * @param {number} pointCount - (must be at least 2) The number of desired points (start and end point included).
+   * @return {Array<Vertex>}
+   */
+  getEvenDistributionVertices(pointCount: number): Array<Vertex> {
+    if (pointCount < 2) {
+      throw new Error("pointCount must be larger than one; is " + pointCount + ".");
+    }
+
+    const result: Array<Vertex> = [];
+    if (this.bezierCurves.length === 0) {
+      return result;
+    }
+
+    // Fetch and add the start point from the source polygon
+    var polygonPoint = new Vertex(this.bezierCurves[0].startPoint);
+    result.push(polygonPoint);
+    // if (this.bezierCurves.length === 1) {
+    //   return result;
+    // }
+
+    const perimeter: number = this.totalArcLength;
+    const stepSize: number = perimeter / (pointCount - 1);
+    const n: number = this.bezierCurves.length;
+
+    let curveIndex: number = 0;
+    let segmentLength: number = this.bezierCurves[0].arcLength;
+    let curSegmentU: number = stepSize;
+    let i: number = 1;
+    while (i < pointCount && curveIndex < n) {
+      // Check if next eq point is inside this segment
+      if (curSegmentU < segmentLength) {
+        var newPoint = this.bezierCurves[curveIndex].getPoint(curSegmentU);
+        result.push(newPoint);
+        curSegmentU += stepSize;
+        i++;
+      } else {
+        curveIndex++;
+        curSegmentU = curSegmentU - segmentLength;
+        segmentLength = curveIndex < n ? this.bezierCurves[curveIndex].arcLength : 0;
+      }
+    }
+
+    result.push(new Vertex(this.bezierCurves[n - 1].endPoint));
+    return result;
+  }
+
   /**
    * Clone this BezierPath (deep clone).
    *
@@ -1107,17 +1176,33 @@ export class BezierPath implements SVGSerializable {
    * @return {string} The SVG string.
    **/
   toSVGString(options: { className?: string }): string {
-    options = options || {};
-    var buffer: Array<string> = [];
-    buffer.push("<path");
-    if (options.className) buffer.push(' class="' + options.className + '"');
-    buffer.push(' d="');
-    for (var c = 0; c < this.bezierCurves.length; c++) {
-      if (c > 0) buffer.push(" ");
-      buffer.push(this.bezierCurves[c].toSVGPathData());
+    // options = options || {};
+    // var buffer: Array<string> = [];
+    // buffer.push("<path");
+    // if (options.className) buffer.push(' class="' + options.className + '"');
+    // buffer.push(' d="');
+    // for (var c = 0; c < this.bezierCurves.length; c++) {
+    //   if (c > 0) buffer.push(" ");
+    //   buffer.push(this.bezierCurves[c].toSVGPathData());
+    // }
+    // buffer.push('" />');
+    // return buffer.join("");
+    console.warn(
+      "[Deprecation] Warning: the BezierPath.toSVGString method is deprecated and does not return and valid SVG data any more. Please use `drawutilssvg` instead."
+    );
+    return "";
+  }
+
+  /**
+   * This function should invalidate any installed listeners and invalidate this object.
+   * After calling this function the object might not hold valid data any more and
+   * should not be used.
+   */
+  destroy() {
+    for (var i = 0; i < this.bezierCurves.length; i++) {
+      this.bezierCurves[i].destroy();
     }
-    buffer.push('" />');
-    return buffer.join("");
+    this.isDestroyed = true;
   }
 
   /**