plotboilerplate 1.15.0 → 1.16.0

package/src/ts/utils/helpers/BezierPathInteractionHelper.ts

@@ -118,7 +118,11 @@ export class BezierPathInteractionHelper {
   private currentA: Vertex; // Position on the curve
   private currentB: Vertex; // mouse/touch position
 
+  private _mouseHandler: MouseHandler;
+  private _touchHandler: AlloyFinger;
   private _keyHandler: KeyHandler;
+  private _mouseEnterListener: () => void;
+  private _mouseLeaveListener: () => void;
 
   /**
    * Pre: all paths must have been added to the PlotBoilerplate's drawable buffer (use the add(Drawable) function).
@@ -173,8 +177,16 @@ export class BezierPathInteractionHelper {
       this.addPath(paths[i]);
     }
 
-    this._installMouseListener();
-    this._installTouchListener();
+    this._mouseEnterListener = () => {
+      this.mouseIsOver = true;
+    };
+    this._mouseLeaveListener = () => {
+      this.mouseIsOver = false;
+      this._clearMoveEvent();
+    };
+
+    this._mouseHandler = this._installMouseListener();
+    this._touchHandler = this._installTouchListener();
     this._keyHandler = this._installKeyListener();
 
     // Paths might have changed by auto-adjustment.
@@ -249,6 +261,28 @@ export class BezierPathInteractionHelper {
     this._handleMoveEvent(this.currentB.x, this.currentB.y);
   }
 
+  /**
+   * 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 any more.
+   *
+   * @method destroy
+   * @instance
+   * @memberof BezierPathInteractionHelper
+   * @return {void}
+   **/
+  destroy(): void {
+    for (var i = 0; i < this.paths.length; i++) {
+      this._removeDefaultPathListeners(this.paths[i]);
+      // removePathVertexDragStartListeners(this.paths[i], listener);
+    }
+    this.paths = [];
+    this.pb.canvas.removeEventListener("mouseenter", this._mouseEnterListener);
+    this.pb.canvas.removeEventListener("mouseleave", this._mouseLeaveListener);
+    this._mouseHandler.destroy();
+    this._keyHandler.destroy();
+  }
+
   // +---------------------------------------------------------------------------------
   // | A helper function to locate a given path instance inside the array.
   // |
@@ -335,6 +369,7 @@ export class BezierPathInteractionHelper {
           curStartControl = path.bezierCurves[i + 1].startControlPoint;
         }
       } else {
+        // TODO: remove drag listener from removed vertex!
         deletedVertIndices.push(i);
       }
     }
@@ -361,6 +396,7 @@ export class BezierPathInteractionHelper {
   private _replacePathAt(pathIndex: number, newPath: BezierPath): void {
     const oldPath: BezierPath = this.paths[pathIndex];
     this.pb.remove(oldPath, false, true); // Remove with vertices
+    oldPath.destroy();
     this._removeDefaultPathListeners(oldPath);
     BezierPathInteractionHelper.setPathAutoAdjust(newPath);
     this.paths[pathIndex] = newPath;
@@ -396,36 +432,38 @@ export class BezierPathInteractionHelper {
   // +---------------------------------------------------------------------------------
   // | Called once upon initialization.
   // +-------------------------------
-  private _installTouchListener(): void {
+  private _installTouchListener(): AlloyFinger {
     var _self: BezierPathInteractionHelper = this;
     const afProps = {
       // Todo: which event types does AlloyFinger use?
-      touchStart: function (e: TouchEvent) {
+      touchStart: function (_event: TouchEvent) {
         _self.mouseIsOver = true;
       },
-      touchMove: function (e: TouchEvent) {
-        if (_self.pb.getDraggedElementCount() == 0 && e.touches.length > 0) {
+      touchMove: function (event: TouchEvent) {
+        if (_self.pb.getDraggedElementCount() == 0 && event.touches.length > 0) {
           // console.log('touchmove');
-          _self._handleMoveEvent(e.touches[0].clientX, e.touches[0].clientY);
+          _self._handleMoveEvent(event.touches[0].clientX, event.touches[0].clientY);
         }
       },
-      touchEnd: function (e: TouchEvent) {
+      touchEnd: function (_event: TouchEvent) {
         _self.mouseIsOver = false;
         _self._clearMoveEvent();
       }
     };
     // new AlloyFinger(this.pb.canvas, afProps);
-    if (window["createAlloyFinger"])
-      window["createAlloyFinger"](this.pb.eventCatcher ? this.pb.eventCatcher : this.pb.canvas, afProps);
-    else new AlloyFinger(this.pb.eventCatcher ? this.pb.eventCatcher : this.pb.canvas, afProps);
+    if (window["createAlloyFinger"]) {
+      return window["createAlloyFinger"](this.pb.eventCatcher ? this.pb.eventCatcher : this.pb.canvas, afProps);
+    } else {
+      return new AlloyFinger(this.pb.eventCatcher ? this.pb.eventCatcher : this.pb.canvas, afProps);
+    }
   }
 
   // +---------------------------------------------------------------------------------
   // | Called once upon initialization.
   // +-------------------------------
-  private _installMouseListener(): void {
+  private _installMouseListener(): MouseHandler {
     var _self: BezierPathInteractionHelper = this;
-    new MouseHandler(this.pb.canvas)
+    var mouseHandler = new MouseHandler(this.pb.canvas)
       .up(function (e: XMouseEvent) {
         if (e.params.wasDragged) return;
         if (_self._keyHandler.isDown("shift")) return;
@@ -470,13 +508,16 @@ export class BezierPathInteractionHelper {
         _self._handleMoveEvent(e.params.pos.x, e.params.pos.y);
       });
 
-    _self.pb.canvas.addEventListener("mouseenter", function () {
-      _self.mouseIsOver = true;
-    });
-    _self.pb.canvas.addEventListener("mouseleave", function () {
-      _self.mouseIsOver = false;
-      _self._clearMoveEvent();
-    });
+    // _self.pb.canvas.addEventListener("mouseenter", function () {
+    //   _self.mouseIsOver = true;
+    // });
+    // _self.pb.canvas.addEventListener("mouseleave", function () {
+    //   _self.mouseIsOver = false;
+    //   _self._clearMoveEvent();
+    // });
+    this.pb.canvas.addEventListener("mouseenter", this._mouseEnterListener);
+    this.pb.canvas.addEventListener("mouseleave", this._mouseLeaveListener);
+    return mouseHandler;
   }
 
   // +---------------------------------------------------------------------------------
@@ -491,16 +532,6 @@ export class BezierPathInteractionHelper {
     });
   }
 
-  // +---------------------------------------------------------------------------------
-  // | Adds vertex listeners to all path points.
-  // |
-  // | @param {BezierPath} path - The path to add vertex listeners to.
-  // +-------------------------------
-  // TODO: THIS CAN BE REMOVED?
-  // private _addDefaultPathListeners( path:BezierPath ) : void {
-  //	BezierPathInteractionHelper.addPathVertexDragListeners( path, this._updateMinDistance );
-  // };
-
   // +---------------------------------------------------------------------------------
   // | Removes vertex listeners from all path points.
   // |

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

@@ -0,0 +1,178 @@
+/**
+ * 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
+ */
+
+type IDroppedCallbackJSON = (jsonData: object) => void;
+type IDroppedCallbackText = (textData: string) => void;
+type IDroppedCallbackBinary = (binaryData: Blob, file: File) => void;
+
+export class FileDrop {
+  /**
+   * The 'dropzone' element.
+   * @private
+   * @memberof FileDrop
+   * @member {HTMLElement}
+   */
+  private element: HTMLElement;
+
+  /**
+   * The JSON file drop callback.
+   * @private
+   * @memberof FileDrop
+   * @member {HTMLElement}
+   */
+  private fileDroppedCallbackJSON: IDroppedCallbackJSON | null;
+
+  /**
+   * The text file drop callback.
+   * @private
+   * @memberof FileDrop
+   * @member {HTMLElement}
+   */
+  private fileDroppedCallbackText: IDroppedCallbackText | null;
+
+  /**
+   * The binary file drop callback.
+   * @private
+   * @memberof FileDrop
+   * @member {HTMLElement}
+   */
+  private fileDroppedCallbackBinary: IDroppedCallbackBinary | null;
+
+  /**
+   *
+   * @param {HTMLElement} element - The element you wish to operate as the drop zone (like <body/>).
+   */
+  constructor(element: HTMLElement) {
+    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: IDroppedCallbackJSON) {
+    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: IDroppedCallbackText) {
+    this.fileDroppedCallbackText = callback;
+  }
+
+  /**
+   * Internally handle a drop event.
+   *
+   * @param {DragEvent} event
+   * @returns {void}
+   */
+  private handleDropEvent = (event: DragEvent) => {
+    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: File = event.dataTransfer.files[0];
+      // console.log("file", file);
+      if (file.type.match(/json.*/) && this.fileDroppedCallbackJSON) {
+        var reader = new FileReader();
+        reader.onload = (readEvent: ProgressEvent<FileReader>) => {
+          // Finished reading file data.
+          const jsonObject: object = JSON.parse(readEvent.target.result as string);
+          // 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: ProgressEvent<FileReader>) => {
+          // Finished reading file data.
+          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>) => {
+          // 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.
+   */
+  private handleDragOverEvent = (event: DragEvent) => {
+    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.
+   */
+  private handleDragLeaveEvent = (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    this.element.style.opacity = "1.0";
+  };
+
+  /**
+   * 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);
+  }
+}