plotboilerplate 1.12.10 → 1.16.0

package/src/ts/VertexListeners.ts

@@ -16,300 +16,282 @@ import { Vertex } from "./Vertex";
 import { XMouseParams, XMouseEvent } from "./MouseHandler";
 
 export interface VertEventParams extends XMouseParams {
-    vertex : Vertex;
+  vertex: Vertex;
 }
 
 export interface VertEvent {
-    params : VertEventParams;
+  params: VertEventParams;
 }
 
-export type VertListener = (e:VertEvent) => void;
-
+export type VertListener = (e: VertEvent) => void;
 
 /**
- * @classdesc An event listeners wrapper. This is just a set of three listener 
+ * @classdesc An event listeners wrapper. This is just a set of three listener
  *              queues (drag, dragStart, dragEnd) and their respective firing
  *              functions.
  *
  */
 export class VertexListeners {
+  private click: Array<VertListener>;
+  private drag: Array<VertListener>;
+  private dragStart: Array<VertListener>;
+  private dragEnd: Array<VertListener>;
 
-    private click:Array<VertListener>;
-    private drag:Array<VertListener>;
-    private dragStart:Array<VertListener>;
-    private dragEnd:Array<VertListener>;
-    
-    private vertex:Vertex;
-    
-    
-    /**
-     * The constructor.
-     *
-     * @constructor
-     * @name VertexListeners
-     * @param {Vertex} vertex - The vertex to use these listeners on (just a backward reference).
-     **/
-    constructor( vertex:Vertex ) {
-	this.click = [];
-	this.drag = [];
-	this.dragStart = [];
-	this.dragEnd = [];
-	this.vertex = vertex;
-    };
-
-
-    /**
-     * Add a click listener.
-     *
-     * @method addClickListener
-     * @param {VertexListeners~dragListener} listener - The click listener to add (a callback).
-     * @return {VertexListeners} this (for chaining)
-     * @instance
-     * @memberof VertexListeners
-     **/
-    addClickListener( listener:VertListener ) : VertexListeners {
-	VertexListeners._addListener( this.click, listener );
-	return this;
-    };
-    /**
-     * The click listener is a function with a single drag event param.
-     * @callback VertexListeners~clickListener
-     * @param {Event} e - The (extended) click event.
-     */
-    
+  private vertex: Vertex;
 
-    /**
-     * Remove a drag listener.
-     *
-     * @method removeDragListener
-     * @param {VertexListeners~dragListener} listener - The drag listener to remove (a callback).
-     * @return {VertexListeners} this (for chaining)
-     * @instance
-     * @memberof VertexListeners
-     **/
-    removeClickListener( listener:VertListener ) : VertexListeners {
-	this.click = VertexListeners._removeListener( this.click, listener );
-	return this;
-    };
-    /**
-     * The click listener is a function with a single drag event param.
-     * @callback VertexListeners~clickListener
-     * @param {Event} e - The (extended) click event.
-     */
-    
+  /**
+   * The constructor.
+   *
+   * @constructor
+   * @name VertexListeners
+   * @param {Vertex} vertex - The vertex to use these listeners on (just a backward reference).
+   **/
+  constructor(vertex: Vertex) {
+    this.click = [];
+    this.drag = [];
+    this.dragStart = [];
+    this.dragEnd = [];
+    this.vertex = vertex;
+  }
 
-    /**
-     * Add a drag listener.
-     *
-     * @method addDragListener
-     * @param {VertexListeners~dragListener} listener - The drag listener to add (a callback).
-     * @return {VertexListeners} this (for chaining)
-     * @instance
-     * @memberof VertexListeners
-     **/
-    addDragListener( listener:VertListener ) : VertexListeners {
-	VertexListeners._addListener( this.drag, listener );
-	return this;
-    };
-    /**
-     * The drag listener is a function with a single drag event param.
-     * @callback VertexListeners~dragListener
-     * @param {Event} e - The (extended) drag event.
-     */
-    
+  /**
+   * Add a click listener.
+   *
+   * @method addClickListener
+   * @param {VertexListeners~dragListener} listener - The click listener to add (a callback).
+   * @return {VertexListeners} this (for chaining)
+   * @instance
+   * @memberof VertexListeners
+   **/
+  addClickListener(listener: VertListener): VertexListeners {
+    VertexListeners._addListener(this.click, listener);
+    return this;
+  }
+  /**
+   * The click listener is a function with a single drag event param.
+   * @callback VertexListeners~clickListener
+   * @param {Event} e - The (extended) click event.
+   */
 
-    /**
-     * Remove a drag listener.
-     *
-     * @method removeDragListener
-     * @param {VertexListeners~dragListener} listener - The drag listener to remove (a callback).
-     * @return {VertexListeners} this (for chaining)
-     * @instance
-     * @memberof VertexListeners
-     **/
-    removeDragListener( listener:VertListener ) : VertexListeners {
-	this.drag = VertexListeners._removeListener( this.drag, listener );
-	return this;
-    };
-    
-    
-    /**
-     * Add a dragStart listener.
-     *
-     * @method addDragListener
-     * @param {VertexListeners~dragStartListener} listener - The drag-start listener to add (a callback).
-     * @return {VertexListeners} this (for chaining)
-     * @instance
-     * @memberof VertexListeners
-     **/
-    addDragStartListener( listener:VertListener) : VertexListeners {
-	VertexListeners._addListener( this.dragStart, listener );
-	return this;
-    };
-    /**
-     * The drag-start listener is a function with a single drag event param.
-     * @callback VertexListeners~dragStartListener
-     * @param {Event} e - The (extended) drag event.
-     */
+  /**
+   * Remove a drag listener.
+   *
+   * @method removeDragListener
+   * @param {VertexListeners~dragListener} listener - The drag listener to remove (a callback).
+   * @return {VertexListeners} this (for chaining)
+   * @instance
+   * @memberof VertexListeners
+   **/
+  removeClickListener(listener: VertListener): VertexListeners {
+    this.click = VertexListeners._removeListener(this.click, listener);
+    return this;
+  }
+  /**
+   * The click listener is a function with a single drag event param.
+   * @callback VertexListeners~clickListener
+   * @param {Event} e - The (extended) click event.
+   */
 
+  /**
+   * Add a drag listener.
+   *
+   * @method addDragListener
+   * @param {VertexListeners~dragListener} listener - The drag listener to add (a callback).
+   * @return {VertexListeners} this (for chaining)
+   * @instance
+   * @memberof VertexListeners
+   **/
+  addDragListener(listener: VertListener): VertexListeners {
+    VertexListeners._addListener(this.drag, listener);
+    return this;
+  }
+  /**
+   * The drag listener is a function with a single drag event param.
+   * @callback VertexListeners~dragListener
+   * @param {Event} e - The (extended) drag event.
+   */
 
-    /**
-     * Remove a dragStart listener.
-     *
-     * @method addDragStartListener
-     * @param {VertexListeners~dragListener} listener - The drag listener to remove (a callback).
-     * @return {VertexListeners} this (for chaining)
-     * @instance
-     * @memberof VertexListeners
-     **/
-    removeDragStartListener( listener:VertListener ) : VertexListeners {
-	this.dragStart= VertexListeners._removeListener( this.dragStart, listener );
-	return this;
-    };
-    
- 
-    /**
-     * Add a dragEnd listener.
-     *
-     * @method addDragListener
-     * @param {VertexListeners~dragEndListener} listener - The drag-end listener to add (a callback).
-     * @return {VertexListeners} this (for chaining)
-     * @instance
-     * @memberof VertexListeners
-     **/
-    addDragEndListener( listener:(e:VertEvent)=>void ) : VertexListeners {
-	// this.dragEnd.push( listener );
-	VertexListeners._addListener( this.dragEnd, listener );
-	return this;
-    };
-    /**
-     * The drag-end listener is a function with a single drag event param.
-     * @callback VertexListeners~dragEndListener
-     * @param {Event} e - The (extended) drag event.
-     */
+  /**
+   * Remove a drag listener.
+   *
+   * @method removeDragListener
+   * @param {VertexListeners~dragListener} listener - The drag listener to remove (a callback).
+   * @return {VertexListeners} this (for chaining)
+   * @instance
+   * @memberof VertexListeners
+   **/
+  removeDragListener(listener: VertListener): VertexListeners {
+    this.drag = VertexListeners._removeListener(this.drag, listener);
+    return this;
+  }
 
+  /**
+   * Add a dragStart listener.
+   *
+   * @method addDragListener
+   * @param {VertexListeners~dragStartListener} listener - The drag-start listener to add (a callback).
+   * @return {VertexListeners} this (for chaining)
+   * @instance
+   * @memberof VertexListeners
+   **/
+  addDragStartListener(listener: VertListener): VertexListeners {
+    VertexListeners._addListener(this.dragStart, listener);
+    return this;
+  }
+  /**
+   * The drag-start listener is a function with a single drag event param.
+   * @callback VertexListeners~dragStartListener
+   * @param {Event} e - The (extended) drag event.
+   */
 
-     /**
-     * Remove a drag listener.
-     *
-     * @method removeDragEndListener
-     * @param {VertexListeners~clickListener} listener - The drag listener to remove (a callback).
-     * @return {VertexListeners} this (for chaining)
-     * @instance
-     * @memberof VertexListeners
-     **/
-    removeDragEndListener( listener:(e:VertEvent)=>void ) : VertexListeners {
-	// this.drag.push( listener );
-	this.dragEnd = VertexListeners._removeListener( this.dragEnd, listener );
-	return this;
-    };
+  /**
+   * Remove a dragStart listener.
+   *
+   * @method addDragStartListener
+   * @param {VertexListeners~dragListener} listener - The drag listener to remove (a callback).
+   * @return {VertexListeners} this (for chaining)
+   * @instance
+   * @memberof VertexListeners
+   **/
+  removeDragStartListener(listener: VertListener): VertexListeners {
+    this.dragStart = VertexListeners._removeListener(this.dragStart, listener);
+    return this;
+  }
 
-    
-     
-    /**
-     * Fire a click event with the given event instance to all
-     * installed click listeners.
-     *
-     * @method fireClickEvent
-     * @param {VertEvent|XMouseEvent} e - The click event itself to be fired to all installed drag listeners.
-     * @return {void}
-     * @instance
-     * @memberof VertexListeners
-     **/
-    fireClickEvent( e:VertEvent|XMouseEvent ) {
-	VertexListeners._fireEvent(this,this.click,e);
-    };
+  /**
+   * Add a dragEnd listener.
+   *
+   * @method addDragListener
+   * @param {VertexListeners~dragEndListener} listener - The drag-end listener to add (a callback).
+   * @return {VertexListeners} this (for chaining)
+   * @instance
+   * @memberof VertexListeners
+   **/
+  addDragEndListener(listener: (e: VertEvent) => void): VertexListeners {
+    // this.dragEnd.push( listener );
+    VertexListeners._addListener(this.dragEnd, listener);
+    return this;
+  }
+  /**
+   * The drag-end listener is a function with a single drag event param.
+   * @callback VertexListeners~dragEndListener
+   * @param {Event} e - The (extended) drag event.
+   */
 
- 
-    /**
-     * Fire a drag event with the given event instance to all
-     * installed drag listeners.
-     *
-     * @method fireDragEvent
-     * @param {VertEvent|XMouseEvent} e - The drag event itself to be fired to all installed drag listeners.
-     * @return {void}
-     * @instance
-     * @memberof VertexListeners
-     **/
-    fireDragEvent( e:VertEvent|XMouseEvent ) {
-	VertexListeners._fireEvent(this,this.drag,e);
-    };
+  /**
+   * Remove a drag listener.
+   *
+   * @method removeDragEndListener
+   * @param {VertexListeners~clickListener} listener - The drag listener to remove (a callback).
+   * @return {VertexListeners} this (for chaining)
+   * @instance
+   * @memberof VertexListeners
+   **/
+  removeDragEndListener(listener: (e: VertEvent) => void): VertexListeners {
+    // this.drag.push( listener );
+    this.dragEnd = VertexListeners._removeListener(this.dragEnd, listener);
+    return this;
+  }
 
+  /**
+   * Fire a click event with the given event instance to all
+   * installed click listeners.
+   *
+   * @method fireClickEvent
+   * @param {VertEvent|XMouseEvent} e - The click event itself to be fired to all installed drag listeners.
+   * @return {void}
+   * @instance
+   * @memberof VertexListeners
+   **/
+  fireClickEvent(e: VertEvent | XMouseEvent) {
+    VertexListeners._fireEvent(this, this.click, e);
+  }
 
-    
-    /**
-     * Fire a dragStart event with the given event instance to all
-     * installed drag-start listeners.
-     *
-     * @method fireDragStartEvent
-     * @param {VertEvent|XMouseEvent} e - The drag-start event itself to be fired to all installed dragStart listeners.
-     * @return {void}
-     * @instance
-     * @memberof VertexListeners
-     **/
-    fireDragStartEvent( e:VertEvent|XMouseEvent ) {
-	VertexListeners._fireEvent(this,this.dragStart,e);
-    };
+  /**
+   * Fire a drag event with the given event instance to all
+   * installed drag listeners.
+   *
+   * @method fireDragEvent
+   * @param {VertEvent|XMouseEvent} e - The drag event itself to be fired to all installed drag listeners.
+   * @return {void}
+   * @instance
+   * @memberof VertexListeners
+   **/
+  fireDragEvent(e: VertEvent | XMouseEvent) {
+    VertexListeners._fireEvent(this, this.drag, e);
+  }
 
+  /**
+   * Fire a dragStart event with the given event instance to all
+   * installed drag-start listeners.
+   *
+   * @method fireDragStartEvent
+   * @param {VertEvent|XMouseEvent} e - The drag-start event itself to be fired to all installed dragStart listeners.
+   * @return {void}
+   * @instance
+   * @memberof VertexListeners
+   **/
+  fireDragStartEvent(e: VertEvent | XMouseEvent) {
+    VertexListeners._fireEvent(this, this.dragStart, e);
+  }
 
-    
-    /**
-     * Fire a dragEnd event with the given event instance to all
-     * installed drag-end listeners.
-     *
-     * @method fireDragEndEvent
-     * @param {VertEvent|XMouseEvent} e - The drag-end event itself to be fired to all installed dragEnd listeners.
-     * @return {void}
-     * @instance
-     * @memberof VertexListeners
-     **/
-    fireDragEndEvent( e:VertEvent|XMouseEvent ) {
-	VertexListeners._fireEvent(this,this.dragEnd,e);
-    };
+  /**
+   * Fire a dragEnd event with the given event instance to all
+   * installed drag-end listeners.
+   *
+   * @method fireDragEndEvent
+   * @param {VertEvent|XMouseEvent} e - The drag-end event itself to be fired to all installed dragEnd listeners.
+   * @return {void}
+   * @instance
+   * @memberof VertexListeners
+   **/
+  fireDragEndEvent(e: VertEvent | XMouseEvent) {
+    VertexListeners._fireEvent(this, this.dragEnd, e);
+  }
 
+  /**
+   * Removes all listeners from this listeners object.
+   */
+  removeAllListeners() {
+    this.click = [];
+    this.drag = [];
+    this.dragStart = [];
+    this.dragEnd = [];
+  }
 
-    
-    /**
-     * @private
-     **/
-    private static _fireEvent( _self:VertexListeners,
-			       listeners:Array<(e:VertEvent)=>void>,
-			       e:VertEvent|XMouseEvent
-			     ) : void {
-	const ve : VertEvent = (e as unknown) as VertEvent;
-	if( typeof ve.params == 'undefined' )
-	    ve.params = ({ vertex : _self.vertex } as unknown) as VertEventParams;
-	else
-	    ve.params.vertex = _self.vertex; 
-	for( var i in listeners ) {
-	    listeners[i]( ve );
-	}
-    };
+  /**
+   * @private
+   **/
+  private static _fireEvent(_self: VertexListeners, listeners: Array<(e: VertEvent) => void>, e: VertEvent | XMouseEvent): void {
+    const ve: VertEvent = e as unknown as VertEvent;
+    if (typeof ve.params == "undefined") ve.params = { vertex: _self.vertex } as unknown as VertEventParams;
+    else ve.params.vertex = _self.vertex;
+    for (var i in listeners) {
+      listeners[i](ve);
+    }
+  }
 
-    /**
-     * @private
-     */
-    private static _addListener( listeners:Array<(e:VertEvent)=>void>,
-				 newListener:(e:VertEvent)=>void
-			       ) : boolean {
-	for( var i in listeners ) {
-	    if( listeners[i] == newListener )
-		return false;
-	}
-	listeners.push( newListener );
-	return true;
-    };
+  /**
+   * @private
+   */
+  private static _addListener(listeners: Array<(e: VertEvent) => void>, newListener: (e: VertEvent) => void): boolean {
+    for (var i in listeners) {
+      if (listeners[i] == newListener) return false;
+    }
+    listeners.push(newListener);
+    return true;
+  }
 
-    /**
-     * @private
-     */
-    private static _removeListener( listeners:Array<(e:VertEvent)=>void>,
-				    oldListener:(e:VertEvent)=>void
-			       ) : Array<(e:VertEvent)=>void> {
-	for( var i = 0; i < listeners.length; i++ ) {
-	    if( listeners[i] == oldListener )
-		return listeners.splice( i, 1 );
-	}
-	return listeners;
-    };
+  /**
+   * @private
+   */
+  private static _removeListener(
+    listeners: Array<(e: VertEvent) => void>,
+    oldListener: (e: VertEvent) => void
+  ): Array<(e: VertEvent) => void> {
+    for (var i = 0; i < listeners.length; i++) {
+      if (listeners[i] == oldListener) return listeners.splice(i, 1);
+    }
+    return listeners;
+  }
 }

package/src/ts/draw.ts

@@ -37,13 +37,15 @@
  * @modified 2021-02-22 Added the `path` drawing function to draw SVG path data.
  * @modified 2021-03-31 Added the `endDrawCycle` function from `DrawLib`.
  * @modified 2021-05-31 Added the `setConfiguration` function from `DrawLib`.
- * @version  1.9.0
+ * @modified 2021-11-12 Adding more parameters tot the `text()` function: fontSize, textAlign, fontFamily, lineHeight.
+ * @modified 2021-11-19 Added the `color` param to the `label(...)` function.
+ * @version  1.10.0
  **/
 
 import { CubicBezierCurve } from "./CubicBezierCurve";
 import { Polygon } from "./Polygon";
 import { Vertex } from "./Vertex";
-import { DrawLib, SVGPathParams, XYCoords, UID, DrawLibConfiguration } from "./interfaces";
+import { DrawLib, SVGPathParams, XYCoords, UID, DrawLibConfiguration, FontStyle, FontWeight } from "./interfaces";
 import { drawutilssvg } from "./drawutilssvg";
 
 // Todo: rename this class to Drawutils?
@@ -845,19 +847,77 @@ export class drawutils implements DrawLib<void> {
     this.ctx.restore();
   }
 
-  text(text: string, x: number, y: number, options?: { color?: string }) {
+  /**
+   * Draw a text at the given relative position.
+   *
+   * @method text
+   * @param {string} text - The text to draw.
+   * @param {number} x - The x-position to draw the text at.
+   * @param {number} y - The y-position to draw the text at.
+   * @param {string=} options.color - The Color to use.
+   * @param {string=} options.fontFamily - The font family to use.
+   * @param {number=} options.fontSize - The font size (in pixels) to use.
+   * @param {FontStyle=} options.fontStyle - The font style to use.
+   * @param {FontWeight=} options.fontWeight - The font weight to use.
+   * @param {number=} options.lineHeight - The line height (in pixels) to use.
+   * @param {number=} options.rotation - The (optional) rotation in radians.
+   * @param {string=} options.textAlign - The text align to use. According to the specifiactions (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) valid values are `"left" || "right" || "center" || "start" || "end"`.
+   * @return {void}
+   * @instance
+   * @memberof drawutils
+   */
+  text(
+    text: string,
+    x: number,
+    y: number,
+    options?: {
+      color?: string;
+      fontFamily?: string;
+      fontSize?: number;
+      fontStyle?: FontStyle;
+      fontWeight?: FontWeight;
+      lineHeight?: number;
+      textAlign?: CanvasRenderingContext2D["textAlign"];
+      rotation?: number;
+    }
+  ) {
+    // See https://stackoverflow.com/a/23523697
+
     options = options || {};
     this.ctx.save();
-    x = this.offset.x + x * this.scale.x;
-    y = this.offset.y + y * this.scale.y;
+    let relX = this.offset.x + x * this.scale.x;
+    let relY = this.offset.y + y * this.scale.y;
     const color: string = options.color || "black";
+    if (options.fontSize || options.fontFamily) {
+      // Scaling of text only works in uniform mode
+      this.ctx.font =
+        (options.fontWeight ? options.fontWeight + " " : "") +
+        (options.fontStyle ? options.fontStyle + " " : "") +
+        (options.fontSize ? options.fontSize * this.scale.x + "px " : " ") +
+        (options.fontFamily
+          ? options.fontFamily.indexOf(" ") === -1
+            ? options.fontFamily
+            : `"${options.fontFamily}"`
+          : "Arial");
+    }
+    if (options.textAlign) {
+      this.ctx.textAlign = options.textAlign;
+    }
+
+    const rotation = options.rotation ?? 0.0;
+    const lineHeight = (options.lineHeight ?? options.fontSize ?? 0) * this.scale.x;
+    this.ctx.translate(relX, relY);
+    this.ctx.rotate(rotation);
+
     if (this.fillShapes) {
       this.ctx.fillStyle = color;
-      this.ctx.fillText(text, x, y);
+      this.ctx.fillText(text, 0, lineHeight / 2);
     } else {
       this.ctx.strokeStyle = color;
-      this.ctx.strokeText(text, x, y);
+      this.ctx.strokeText(text, 0, lineHeight / 2);
     }
+    // this.ctx.translate(-relX, -relY);
+    // this.ctx.rotate(-rotation); // is this necessary before 'restore()'?
     this.ctx.restore();
   }
 
@@ -878,8 +938,11 @@ export class drawutils implements DrawLib<void> {
    */
   label(text: string, x: number, y: number, rotation?: number, color?: string) {
     this.ctx.save();
+
+    this.ctx.font = "lighter 9pt Arial";
+
     this.ctx.translate(x, y);
-    if (typeof rotation != "undefined") this.ctx.rotate(rotation);
+    if (typeof rotation !== "undefined") this.ctx.rotate(rotation);
     this.ctx.fillStyle = color || "black";
     if (this.fillShapes) {
       this.ctx.fillText(text, 0, 0);