plotboilerplate 1.16.0 → 1.17.0

package/src/ts/drawutilssvg.ts

@@ -29,7 +29,11 @@
  * @modified 2021-11-15 Adding more parameters tot the `text()` function: fontSize, textAlign, fontFamily, lineHeight.
  * @modified 2021-11-19 Fixing the `label(text,x,y)` position.
  * @modified 2021-11-19 Added the `color` param to the `label(...)` function.
- * @version  1.4.0
+ * @modified 2022-02-03 Added the `lineWidth` param to the `crosshair` function.
+ * @modified 2022-02-03 Added the `cross(...)` function.
+ * @modified 2022-03-26 Added the private `nodeDefs` and `bufferedNodeDefs` attributes.
+ * @modified 2022-03-26 Added the `texturedPoly` function to draw textures polygons.
+ * @version  1.6.0
  **/
 
 import { CircleSector } from "./CircleSector";
@@ -48,6 +52,8 @@ import {
   FontStyle,
   FontWeight
 } from "./interfaces";
+import { Bounds } from "./Bounds";
+import { UIDGenerator } from "./UIDGenerator";
 
 const RAD_TO_DEG = 180 / Math.PI;
 
@@ -98,6 +104,24 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    */
   private nodeStyle: SVGStyleElement;
 
+  /**
+   * A style node of type `<defs>`.
+   * @member {SVGGelement}
+   * @memberof drawutilssvg
+   * @instance
+   * @private
+   */
+  private nodeDefs: SVGDefsElement;
+
+  /**
+   * The buffered nodeDefs.
+   * @member {SVGGelement}
+   * @memberof drawutilssvg
+   * @instance
+   * @private
+   */
+  private bufferedNodeDefs: SVGDefsElement;
+
   /**
    * @member {Vertex}
    * @memberof drawutilssvg
@@ -181,7 +205,9 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     drawConfig: DrawConfig,
     isSecondary?: boolean,
     gNode?: SVGGElement,
-    bufferGNode?: SVGGElement
+    bufferGNode?: SVGGElement,
+    nodeDefs?: SVGDefsElement,
+    bufferNodeDefs?: SVGDefsElement
   ) {
     this.svgNode = svgNode;
     this.offset = new Vertex(0, 0).set(offset);
@@ -195,14 +221,23 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     if (isSecondary) {
       this.gNode = gNode;
       this.bufferGNode = bufferGNode;
+      this.nodeDefs = nodeDefs;
+      this.bufferedNodeDefs = bufferNodeDefs;
     } else {
       this.addStyleDefs(drawConfig);
+      this.addDefsNode();
       this.gNode = this.createSVGNode("g") as SVGGElement;
       this.bufferGNode = this.createSVGNode("g") as SVGGElement;
       this.svgNode.appendChild(this.gNode);
     }
   }
 
+  /**
+   * Adds a default style defintion based on the passed DrawConfig.
+   * Twaek the draw config to change default colors or line thicknesses.
+   *
+   * @param {DrawConfig} drawConfig
+   */
   private addStyleDefs(drawConfig: DrawConfig) {
     this.nodeStyle = this.createSVGNode("style") as SVGStyleElement;
     this.svgNode.appendChild(this.nodeStyle);
@@ -236,6 +271,16 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     this.nodeStyle.innerHTML = rules.join("\n");
   }
 
+  /**
+   * Adds the internal <defs> node.
+   */
+  private addDefsNode() {
+    this.nodeDefs = this.createSVGNode("defs") as SVGDefsElement;
+    // this.svgNode.appendChild(this.nodeDefs);
+    this.bufferedNodeDefs = this.createSVGNode("defs") as SVGDefsElement;
+    this.svgNode.appendChild(this.nodeDefs);
+  }
+
   /**
    * This is a simple way to include custom CSS class mappings to the style defs of the generated SVG.
    *
@@ -386,7 +431,9 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       null, // no DrawConfig
       true, // isSecondary
       this.gNode,
-      this.bufferGNode
+      this.bufferGNode,
+      this.nodeDefs,
+      this.bufferedNodeDefs
     );
     return copy;
   }
@@ -470,11 +517,16 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       // layout updates.
       // Replace the old <g>-node with the buffer node.
       //   https://stackoverflow.com/questions/27442464/how-to-update-a-svg-image-without-seeing-a-blinking
+      this.svgNode.replaceChild(this.bufferedNodeDefs, this.nodeDefs);
       this.svgNode.replaceChild(this.bufferGNode, this.gNode);
     }
-    let tmp: SVGGElement = this.gNode;
+    const tmpGNode: SVGGElement = this.gNode;
     this.gNode = this.bufferGNode;
-    this.bufferGNode = tmp;
+    this.bufferGNode = tmpGNode;
+
+    const tmpDefsNode: SVGDefsElement = this.nodeDefs;
+    this.nodeDefs = this.bufferedNodeDefs;
+    this.bufferedNodeDefs = tmpDefsNode;
   }
 
   private _x(x: number): number {
@@ -574,6 +626,90 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     return this._bindFillDraw(node, "image", null, null);
   }
 
+  /**
+   * 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 drawutilssvg
+   **/
+  texturedPoly(
+    textureImage: HTMLImageElement,
+    textureSize: Bounds,
+    polygon: Polygon,
+    polygonPosition: Vertex,
+    rotation: number
+  ): SVGElement {
+    const basePolygonBounds: Bounds = polygon.getBounds();
+    const rotatedScalingOrigin = new Vertex(textureSize.min).clone().rotate(rotation, polygonPosition);
+    const rotationCenter = polygonPosition.clone().add(rotatedScalingOrigin.difference(textureSize.min).inv());
+    // Create something like this
+    // ...
+    //    <defs>
+    //       <clipPath id="shape">
+    //         <path fill="none" d="..."/>
+    //       </clipPath>
+    //    </defs>
+    //    ...
+    //    <g clip-path="url(#shape)">
+    //       <g transform="scale(...)">
+    //          <image width="643" height="643" transform="rotate(...)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
+    //       </g>
+    //    </g>
+    //    </image>
+    // ...
+    const clipPathNode: SVGClipPathElement = this.makeNode("clipPath") as SVGClipPathElement;
+    const clipPathId: string = `clippath_${UIDGenerator.next()}`; // TODO: use a better UUID generator here?
+    clipPathNode.setAttribute("id", clipPathId);
+
+    const gNode = this.makeNode("g") as SVGGElement;
+    const imageNode: SVGImageElement = this.makeNode("image") as SVGImageElement;
+    imageNode.setAttribute("x", `${this._x(rotatedScalingOrigin.x)}`);
+    imageNode.setAttribute("y", `${this._y(rotatedScalingOrigin.y)}`);
+    imageNode.setAttribute("width", `${textureSize.width}`);
+    imageNode.setAttribute("height", `${textureSize.height}`);
+    imageNode.setAttribute("href", textureImage.src);
+    // imageNode.setAttribute("opacity", "0.5");
+    // SVG rotations in degrees
+    imageNode.setAttribute(
+      "transform",
+      `rotate(${rotation * RAD_TO_DEG}, ${this._x(rotatedScalingOrigin.x)}, ${this._y(rotatedScalingOrigin.y)})`
+    );
+    const pathNode: SVGPathElement = this.makeNode("path") as SVGPathElement;
+    const pathData: string[] = [];
+    if (polygon.vertices.length > 0) {
+      const self = this;
+      pathData.push("M", `${this._x(polygon.vertices[0].x)}`, `${this._y(polygon.vertices[0].y)}`);
+      for (var i = 1; i < polygon.vertices.length; i++) {
+        pathData.push("L", `${this._x(polygon.vertices[i].x)}`, `${this._y(polygon.vertices[i].y)}`);
+      }
+    }
+
+    pathNode.setAttribute("d", pathData.join(" "));
+    clipPathNode.appendChild(pathNode);
+    this.bufferedNodeDefs.appendChild(clipPathNode);
+
+    gNode.appendChild(imageNode);
+    gNode.setAttribute("transform-origin", `${this._x(rotatedScalingOrigin.x)} ${this._y(rotatedScalingOrigin.y)}`);
+    gNode.setAttribute("transform", `scale(${this.scale.x}, ${this.scale.y})`);
+
+    const clipNode: SVGGElement = this.makeNode("g") as SVGGElement;
+    clipNode.appendChild(gNode);
+    clipNode.setAttribute("clip-path", `url(#${clipPathId})`);
+
+    // TODO: check if the image class is correct here or if we should use a 'clippedImage' class here
+    this._bindFillDraw(clipNode, "image", null, null); // No color, no lineWidth
+    return clipNode;
+  }
+
   /**
    * Draw the given (cubic) bézier curve.
    *
@@ -1020,11 +1156,12 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    * @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 drawutilssvg
    */
-  crosshair(center: XYCoords, radius: number, color: string) {
+  crosshair(center: XYCoords, radius: number, color: string, lineWidth?: number) {
     const node: SVGElement = this.makeNode("path");
     const d: SVGPathParams = [
       "M",
@@ -1041,7 +1178,41 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       this._y(center.y) + radius
     ];
     node.setAttribute("d", d.join(" "));
-    return this._bindFillDraw(node, "crosshair", color, 0.5);
+    return this._bindFillDraw(node, "crosshair", color, lineWidth || 0.5);
+  }
+
+  /**
+   * 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
+   */
+  cross(center: XYCoords, radius: number, color: string, lineWidth?: number) {
+    const node: SVGElement = this.makeNode("path");
+    const d: SVGPathParams = [
+      "M",
+      this._x(center.x) - radius,
+      this._y(center.y) - radius,
+      "L",
+      this._x(center.x) + radius,
+      this._y(center.y) + radius,
+      "M",
+      this._x(center.x) - radius,
+      this._y(center.y) + radius,
+      "L",
+      this._x(center.x) + radius,
+      this._y(center.y) - radius
+    ];
+    node.setAttribute("d", d.join(" "));
+    return this._bindFillDraw(node, "cross", color, lineWidth || 1.0);
   }
 
   /**
@@ -1226,14 +1397,6 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     if (this.isSecondary) {
       return;
     }
-    // // Clearing an SVG is equivalent to removing all its child elements.
-    // for (var i = 0; i < this.gNode.childNodes.length; i++) {
-    //   // Hide all nodes here. Don't throw them away.
-    //   // We can probably re-use them in the next draw cycle.
-    //   var child: SVGElement = this.gNode.childNodes[i] as SVGElement;
-    //   this.cache.set(child.getAttribute("id"), child);
-    // }
-    // this.removeAllChildNodes();
 
     // Add a covering rect with the given background color
     this.curId = "background";
@@ -1262,6 +1425,9 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     while (this.bufferGNode.lastChild) {
       this.bufferGNode.removeChild(this.bufferGNode.lastChild);
     }
+    while (this.bufferedNodeDefs.lastChild) {
+      this.bufferedNodeDefs.removeChild(this.bufferedNodeDefs.lastChild);
+    }
   }
 
   /**

package/src/ts/index.ts

@@ -16,7 +16,6 @@ export * from "./PBImage";
 export * from "./PBText";
 export * from "./PlotBoilerplate";
 export * from "./Polygon";
-export * from "./SVGBuilder";
 export * from "./Triangle";
 export * from "./UIDGenerator";
 export * from "./Vector";

package/src/ts/interfaces/DrawLib.ts

@@ -15,8 +15,11 @@
  * @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.
  **/
 
+import { Bounds } from "../Bounds";
 import { Polygon } from "../Polygon";
 import { Vertex } from "../Vertex";
 import { SVGPathParams, UID, XYCoords } from "./core";
@@ -121,7 +124,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 +138,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;
 
@@ -150,10 +153,33 @@ export interface DrawLib<R> {
    * @param {Vertex} size - The x/y-size to draw the image with.
    * @return {void}
    * @instance
-   * @memberof drawutils
+   * @memberof DrawLib
    **/
   image: (image: HTMLImageElement, position: Vertex, size: Vertex) => 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 +192,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 +216,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 +230,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 +242,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 +254,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 +266,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 +282,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 +298,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 +314,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 +330,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 +345,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 +361,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 +379,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 +396,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 +413,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 +430,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 +443,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 +474,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 +488,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 +509,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 +524,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 +537,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

@@ -211,17 +211,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,