plotboilerplate 1.15.0 → 1.17.1

package/src/ts/interfaces/DrawLib.ts

@@ -15,8 +15,12 @@
  * @modified 2021-11-12 Added `text()` params fontSize, fontFamily, rotation, textAlign.
  * @modified 2021-11-16 Added `text()` params fontWeight and fontStyle.
  * @modified 2021-11-19 Added the `color` param to the `label(...)` function.
+ * @modified 2022-02-03 Added the `lineWidth` param to the `crosshair` function.
+ * @modified 2022-02-03 Added the `cross(...)` function.
+ * @modified 2022-07-26 Adding `alpha` to the `image(...)` function.
  **/
 
+import { Bounds } from "../Bounds";
 import { Polygon } from "../Polygon";
 import { Vertex } from "../Vertex";
 import { SVGPathParams, UID, XYCoords } from "./core";
@@ -121,7 +125,7 @@ export interface DrawLib<R> {
    * @param {number=1} lineWidth? - [optional] The line's width.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    **/
   line: (zA: Vertex, zB: Vertex, color: string, lineWidth?: number) => R;
 
@@ -135,7 +139,7 @@ export interface DrawLib<R> {
    * @param {number=} lineWidth - (optional) The line width to use; default is 1.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    **/
   arrow: (zA: Vertex, zB: Vertex, color: string, lineWidth?: number) => R;
 
@@ -148,11 +152,35 @@ export interface DrawLib<R> {
    * @param {Image} image - The image object to draw.
    * @param {Vertex} position - The position to draw the the upper left corner at.
    * @param {Vertex} size - The x/y-size to draw the image with.
+   * @param {number=1.0} alpha - (optional, default=0.0) The transparency (1.0=opaque, 0.0=transparent).
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    **/
-  image: (image: HTMLImageElement, position: Vertex, size: Vertex) => R;
+  image: (image: HTMLImageElement, position: Vertex, size: Vertex, alpha?: number) => R;
+
+  /**
+   * Draw an image at the given position with the given size.<br>
+   * <br>
+   * Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
+   *
+   * @method texturedPoly
+   * @param {Image} textureImage - The image object to draw.
+   * @param {Bounds} textureSize - The texture size to use; these are the original bounds to map the polygon vertices to.
+   * @param {Polygon} polygon - The polygon to use as clip path.
+   * @param {Vertex} polygonPosition - The polygon's position (relative), measured at the bounding box's center.
+   * @param {number} rotation - The rotation to use for the polygon (and for the texture).
+   * @return {void}
+   * @instance
+   * @memberof DrawLib
+   **/
+  texturedPoly: (
+    textureImage: HTMLImageElement,
+    textureSize: Bounds,
+    polygon: Polygon,
+    polygonPosition: Vertex,
+    rotation: number
+  ) => R;
 
   /**
    * Draw the given (cubic) bézier curve.
@@ -166,7 +194,7 @@ export interface DrawLib<R> {
    * @param {number} lineWidth - (optional) The line width to use.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   cubicBezier: (
     startPoint: Vertex,
@@ -190,7 +218,7 @@ export interface DrawLib<R> {
    * @param {number=1} lineWidth - (optional) The line width to use.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   cubicBezierPath: (path: Array<Vertex>, color: string, lineWidth?: number) => R;
 
@@ -204,7 +232,7 @@ export interface DrawLib<R> {
    * @param {Vertex} endPoint - The end point of the handle.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   handle: (startPoint: Vertex, endPoint: Vertex) => R;
 
@@ -216,7 +244,7 @@ export interface DrawLib<R> {
    * @param {Vertex} endPoint - The end point to draw the handle at.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   handleLine: (startPoint: Vertex, endPoint: Vertex) => R;
 
@@ -228,7 +256,7 @@ export interface DrawLib<R> {
    * @param {string} color - The CSS color to draw the dot with.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   dot: (p: Vertex, color: string) => R;
 
@@ -240,7 +268,7 @@ export interface DrawLib<R> {
    * @param {string} color - The CSS color to draw the point with.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   point: (p: Vertex, color: string) => R;
 
@@ -256,7 +284,7 @@ export interface DrawLib<R> {
    * @param {number=} lineWidth - (optional) The line width to use; default is 1.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   circle: (center: Vertex, radius: number, color: string, lineWidth?: number) => R;
 
@@ -272,7 +300,7 @@ export interface DrawLib<R> {
    * @param {number=} lineWidth - (optional) The line width to use; default is 1.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   circleArc: (center: Vertex, radius: number, startAngle: number, endAngle: number, color: string, lineWidth?: number) => R;
 
@@ -288,7 +316,7 @@ export interface DrawLib<R> {
    * @param {number=} rotation - (optional, default=0) The rotation of the ellipse.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   ellipse: (center: Vertex, radiusX: number, radiusY: number, color: string, lineWidth?: number, rotation?: number) => R;
 
@@ -304,7 +332,7 @@ export interface DrawLib<R> {
    * @param {number=} lineWidth - (optional) The line width to use; default is 1.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   square: (center: XYCoords, size: number, color: string, lineWidth?: number) => R;
 
@@ -319,7 +347,7 @@ export interface DrawLib<R> {
    * @param {number=} lineWidth - (optional) The line width to use; default is 1.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   rect: (upperLeft: XYCoords, width: number, height: number, color: string, lineWidth?: number) => R;
 
@@ -335,7 +363,7 @@ export interface DrawLib<R> {
    * @param {string} color - The CSS color to draw the grid with.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   grid: (center: Vertex, width: number, height: number, sizeX: number, sizeY: number, color: string) => R;
 
@@ -353,7 +381,7 @@ export interface DrawLib<R> {
    * @param {string} color - The CSS color to draw the raster with.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   raster: (center: Vertex, width: number, height: number, sizeX: number, sizeY: number, color: string) => R;
 
@@ -370,7 +398,7 @@ export interface DrawLib<R> {
    * @param {string} color - The CSS color to draw the diamond with.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   diamondHandle: (center: Vertex, size: number, color: string) => R;
 
@@ -387,7 +415,7 @@ export interface DrawLib<R> {
    * @param {string} color - The CSS color to draw the square with.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   squareHandle: (center: Vertex, size: number, color: string) => R;
 
@@ -404,7 +432,7 @@ export interface DrawLib<R> {
    * @param {string} color - The CSS color to draw the circle with.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   circleHandle: (center: Vertex, size: number, color: string) => R;
 
@@ -417,11 +445,28 @@ export interface DrawLib<R> {
    * @param {XYCoords} center - The center of the crosshair.
    * @param {number} radius - The radius of the crosshair.
    * @param {string} color - The CSS color to draw the crosshair with.
+   * @param {number=0.5} lineWidth - (optional, default=0.5) The line width to use.
+   * @return {void}
+   * @instance
+   * @memberof DrawLib
+   */
+  crosshair: (center: XYCoords, radius: number, color: string, lineWidth?: number) => R;
+
+  /**
+   * Draw a cross with diagonal axes with given radius, color and lineWidth at the given position.<br>
+   * <br>
+   * Note that the x's radius will not be affected by scaling.
+   *
+   * @method crosshair
+   * @param {XYCoords} center - The center of the crosshair.
+   * @param {number} radius - The radius of the crosshair.
+   * @param {string} color - The CSS color to draw the crosshair with.
+   * @param {number=1} lineWidth - (optional, default=1.0) The line width to use.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
-  crosshair: (center: XYCoords, radius: number, color: string) => R;
+  cross: (center: XYCoords, radius: number, color: string, lineWidth?: number) => R;
 
   /**
    * Draw a polygon.
@@ -431,7 +476,7 @@ export interface DrawLib<R> {
    * @param {string} color - The CSS color to draw the polygon with.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   polygon: (polygon: Polygon, color: string, lineWidth?: number) => R;
 
@@ -445,7 +490,7 @@ export interface DrawLib<R> {
    * @param {number=} lineWidth - (optional) The line width to use; default is 1.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   polyline: (vertices: Array<Vertex>, isOpen: boolean, color: string, lineWidth?: number) => R;
 
@@ -466,7 +511,7 @@ export interface DrawLib<R> {
    * @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
+   * @memberof DrawLib
    */
   text: (text: string, x: number, y: number, options?: FontOptions) => R;
 
@@ -481,7 +526,7 @@ export interface DrawLib<R> {
    * @param {string="black"} color - The color to use (default is black).
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    */
   label: (text: string, x: number, y: number, rotation?: number, color?: string) => R;
 
@@ -494,7 +539,7 @@ export interface DrawLib<R> {
    * @param {number=1} lineWidth - (optional) the line width to use (default is 1).
    * @param {boolean=false} options.inplace - (optional) If set to true then path transforamtions (scale and translate) will be done in-place in the array. This can boost the performance.
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    * @return {R} An instance representing the drawn path.
    */
   path: (pathData: SVGPathParams, color?: string, lineWidth?: number, options?: { inplace?: boolean }) => R;

package/src/ts/interfaces/core.ts

@@ -14,6 +14,7 @@
  * @modified 2021-05-31 Splitted the large interfaces.ts file into this one and others.
  * @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.
  **/
 
 import { Vertex } from "../Vertex";
@@ -156,8 +157,8 @@ export interface Config {
  * For initialization the constructor needs a mix of config and draw-settings.
  */
 export interface PBParams extends Config {
-  // , DrawConfig {
-  // No additional attributes, just merge two interfaces.
+  title?: string; // Specify any hover tile here. It will be attached as a `title` attribute to the most elevated element.
+  // No more additional attributes, just merge two interfaces.
 }
 
 export interface DrawSettings {
@@ -211,17 +212,6 @@ export interface SVGSerializable {
    * Required to generate proper CSS classes and other class related IDs.
    **/
   readonly className: string;
-
-  /**
-   * Convert this vertex to SVG code.
-   *
-   * @method toSVGString
-   * @param {object=} options - An optional set of options, like 'className'.
-   * @return {string} A string representing the SVG code for this vertex.
-   * @instance
-   * @memberof Vertex
-   **/
-  toSVGString: (options: { className?: string }) => string;
 }
 
 /**

package/src/ts/module.ts

@@ -11,7 +11,7 @@ import { Circle } from "./Circle";
 import { CircleSector } from "./CircleSector";
 import { CubicBezierCurve } from "./CubicBezierCurve";
 import { drawutils } from "./draw";
-import { drawutilsgl } from "./drawgl";
+// import { drawutilsgl } from "./drawgl";
 import { geomutils } from "./geomutils";
 import { Grid } from "./Grid";
 import { KeyHandler } from "./KeyHandler";
@@ -20,7 +20,6 @@ import { MouseHandler } from "./MouseHandler";
 import { PBImage } from "./PBImage";
 import { PlotBoilerplate } from "./PlotBoilerplate";
 import { Polygon } from "./Polygon";
-import { SVGBuilder } from "./SVGBuilder";
 import { Triangle } from "./Triangle";
 import { UIDGenerator } from "./UIDGenerator";
 import { Vector } from "./Vector";
@@ -39,7 +38,7 @@ export {
   CircleSector,
   CubicBezierCurve,
   drawutils,
-  drawutilsgl,
+  // drawutilsgl,
   geomutils,
   Grid,
   // ...interf,
@@ -49,7 +48,6 @@ export {
   PBImage,
   PlotBoilerplate,
   Polygon,
-  SVGBuilder,
   Triangle,
   UIDGenerator,
   Vector,

package/src/ts/utils/datastructures/Color.ts

@@ -14,7 +14,9 @@
  * @modified 2021-11-07 Did the same with `saturate` and `desaturate`.
  * @modified 2021-11-07 Did the same with the `fadein` and `fadeout` functions.
  * @modified 2021-11-07 Added setRed, setGreen, setBlue, setHue, setSaturation, setLiminance functions.
- * @version 0.0.10
+ * @modified 2022-05-11 Modified the `clone` function by just copying the numeric calues, not re-calculating the whole color.
+ * @modified 2022-05-11 Fixed the `interpolate` function.
+ * @version 0.0.11
  **/
 
 /**
@@ -698,7 +700,16 @@ export class Color {
    * @return {Color} A clone of this color (in RGB mode).
    */
   clone(): Color {
-    return Color.makeRGB(this.r, this.g, this.b, this.a);
+    // return Color.makeRGB(this.r, this.g, this.b, this.a);
+    const col = new Color();
+    col.r = this.r;
+    col.g = this.g;
+    col.b = this.b;
+    col.a = this.a;
+    col.h = this.h;
+    col.s = this.s;
+    col.l = this.l;
+    return col;
   }
 
   /**
@@ -712,10 +723,10 @@ export class Color {
    * @return {Color} A clone of this color (in RGB mode).
    */
   interpolate(c: Color, t: number): Color {
-    this.r += (c.r - c.r) * t;
-    this.g += (c.g - c.g) * t;
-    this.b += (c.b - c.b) * t;
-    this.a += (c.a - c.a) * t;
+    this.r += (c.r - this.r) * t;
+    this.g += (c.g - this.g) * t;
+    this.b += (c.b - this.b) * t;
+    this.a += (c.a - this.a) * t;
     return this;
   }
 } // END class