plotboilerplate 1.15.0 → 1.17.1

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

@@ -20,7 +20,8 @@
  * @modified 2021-01-03 Changed property to `autoAdjustPaths` in the HandlerOptions interface (typo).
  * @modified 2021-01-03 Added following new functions: `addPathVertexDragStartListeners`, `removePathVertexDragStartListeners`, `addPathVertexDragEndListeners` and `removePathVertexDragEndListeners`.
  * @modified 2021-03-31 Fixed the issue with the new AlloyFinger (Typescript).
- * @version  1.1.1
+ * @modified 2022-02-03 Changing the element to catch events (eventCatcher instead of canvas).
+ * @version  1.1.2
  *
  * @file BezierPathInteractionHelper
  * @public
@@ -118,7 +119,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 +178,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 +262,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.eventCatcher.removeEventListener("mouseenter", this._mouseEnterListener);
+    this.pb.eventCatcher.removeEventListener("mouseleave", this._mouseLeaveListener);
+    this._mouseHandler.destroy();
+    this._keyHandler.destroy();
+  }
+
   // +---------------------------------------------------------------------------------
   // | A helper function to locate a given path instance inside the array.
   // |
@@ -335,6 +370,7 @@ export class BezierPathInteractionHelper {
           curStartControl = path.bezierCurves[i + 1].startControlPoint;
         }
       } else {
+        // TODO: remove drag listener from removed vertex!
         deletedVertIndices.push(i);
       }
     }
@@ -361,6 +397,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 +433,37 @@ 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.eventCatcher, afProps);
+    } else {
+      return new AlloyFinger(this.pb.eventCatcher ? this.pb.eventCatcher : this.pb.eventCatcher, 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.eventCatcher)
       .up(function (e: XMouseEvent) {
         if (e.params.wasDragged) return;
         if (_self._keyHandler.isDown("shift")) return;
@@ -464,19 +502,13 @@ export class BezierPathInteractionHelper {
         _self.onVertexInserted(_self.currentPathIndex, leftPath.bezierCurves.length, newPath, oldPath);
       })
       .move(function (e: XMouseEvent) {
-        // console.log('moved');
-        // if( _self.pb.getDraggedElementCount() == 0 )
         _self.mouseIsOver = true;
         _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();
-    });
+    this.pb.eventCatcher.addEventListener("mouseenter", this._mouseEnterListener);
+    this.pb.eventCatcher.addEventListener("mouseleave", this._mouseLeaveListener);
+    return mouseHandler;
   }
 
   // +---------------------------------------------------------------------------------
@@ -491,16 +523,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);
+  }
+}

package/src/ts/SVGBuilder.ts

@@ -1,109 +0,0 @@
-/**
- * Todos:
- *  + use a Drawable interface
- *  + use a SVGSerializable interface
- *
- * @require Vertex
- *
- * @deprecated THIS CLASS IS DEPRECATED. Please use the new `drawutilssvg` instead.
- *
- * @author   Ikaros Kappler
- * @date     2018-12-04
- * @modified 2019-11-07 Added the 'Triangle' style class.
- * @modified 2019-11-13 Added the <?xml ...?> tag.
- * @modified 2020-03-25 Ported this class from vanilla-JS to Typescript.
- * @modified 2020-12-17 Added Circle and CircleSection style classes.
- * @modified 2021-01-26 DEPRECATION
- * @version  1.0.5
- **/
-
-
-import { Vertex } from "./Vertex";
-import { SVGSerializable } from "./interfaces";
-
-
-/**
- * @classdesc A default SVG builder.
- *
- * @requires SVGSerializable
- * @requires Vertex
- */ 
-export class SVGBuilder {
-
-    /**
-     * @constructor
-     **/
-    constructor() {
-	console.warn("THIS CLASS IS DEPRECATED. Please use the new 'drawutilssvg' instead.")
-    };
-
-
-    /**
-     *  Builds the SVG code from the given list of drawables.
-     *
-     * @param {object[]} drawables - The drawable elements (should implement Drawable) to be converted (each must have a toSVGString-function).
-     * @param {object}   options  - { canvasSize, zoom, offset }
-     * @return {string}
-     **/
-    build( drawables:Array<SVGSerializable>,
-	   options:{canvasSize:{width:number,height:number},zoom:Vertex,offset:Vertex}
-	 ) : string {
-	
-	var nl : string = '\n';
-	var indent : string = '  ';
-	var buffer : Array<string> = [];
-	
-	buffer.push( '<?xml version="1.0" encoding="UTF-8"?>' + nl );
-	buffer.push( '<svg width="'+options.canvasSize.width+'" height="'+options.canvasSize.height+'"' );
-	buffer.push( ' viewBox="' );
-	buffer.push( '0' );
-	buffer.push( ' ' );
-	buffer.push( '0' );
-	buffer.push( ' ' );
-	buffer.push( options.canvasSize.width.toString() );
-	buffer.push( ' ' );
-	buffer.push( options.canvasSize.height.toString() );
-	buffer.push( '"' );
-	
-	buffer.push( ' xmlns="http://www.w3.org/2000/svg">' + nl );
-
-	buffer.push( indent + '<defs>' + nl );
-	buffer.push( indent + '<style>' + nl);
-
-	buffer.push( indent + indent + ' .Vertex { fill : blue; stroke : none; } ' + nl );
-	buffer.push( indent + indent + ' .Triangle { fill : none; stroke : turquoise; stroke-width : 1px; } ' + nl );
-	buffer.push( indent + indent + ' .Polygon { fill : none; stroke : green; stroke-width : 2px; } ' + nl );
-	buffer.push( indent + indent + ' .BezierPath { fill : none; stroke : blue; stroke-width : 2px; } ' + nl );
-	buffer.push( indent + indent + ' .VEllipse { fill : none; stroke : black; stroke-width : 1px; } ' + nl );
-	buffer.push( indent + indent + ' .Line { fill : none; stroke : purple; stroke-width : 1px; } ' + nl );
-	buffer.push( indent + indent + ' .Circle { fill : none; stroke : purple; stroke-width : 1px; } ' + nl );
-	buffer.push( indent + indent + ' .CircleSector { fill : none; stroke : purple; stroke-width : 1px; } ' + nl );
-	buffer.push( indent + '</style>' + nl );
-	buffer.push( indent + '</defs>' + nl );
-
-	buffer.push( indent + '<g class="main-g"' );
-	if( options.zoom || options.offset ) {
-	    buffer.push( ' transform="' );
-	    if( options.zoom )
-		buffer.push( 'scale(' + options.zoom.x + ',' + options.zoom.y + ')' );
-	    if( options.offset )
-		buffer.push( ' translate(' + options.offset.x + ',' + options.offset.y + ')' );
-	    buffer.push( '"' ); 
-	}
-	buffer.push( '>' + nl );
-	
-	for( var i in drawables ) {
-	    var d : SVGSerializable = drawables[i];
-	    if( typeof d.toSVGString == 'function' ) {
-		buffer.push( indent + indent );
-		buffer.push( d.toSVGString( { 'className' : d.className } ) );
-		buffer.push( nl );
-	    } else {
-		console.warn( 'Unrecognized drawable type has no toSVGString()-function. Ignoring: ' + d.className );
-	    }
-	}
-	buffer.push( indent + '</g>' + nl );
-	buffer.push( '</svg>' + nl );
-	return buffer.join('');
-    };
-}