plotboilerplate 1.27.1 → 1.28.0

package/src/esm/utils/helpers/BezierResizeHelper.js

@@ -0,0 +1,314 @@
+/**
+ * A helper to resize bezier paths in horizontal and vertical orientation.
+ *
+ * @requires PlotBoilerplate
+ * @requires BezierPath
+ * @requires Vertex
+ *
+ * @author   Ikaros Kappler
+ * @date     2026-04-04 Copied from the ngdg project, made minor type adaptions.
+ * @version  1.2.0
+ *
+ */
+import { Vertex } from "../../Vertex";
+// A closure to hide helper functions.
+export class BezierResizeHelper {
+    /**
+     * The constructor.
+     *
+     * @param {PlotBoilerplate} pb
+     * @param {BezierPath} bezierPath
+     * @param {function} updateCallback
+     */
+    constructor(pb, bezierPath, updateCallback) {
+        this.pb = pb;
+        this.bezierPath = bezierPath;
+        // @public
+        this.topResizeHandle = new Vertex(0, 0);
+        this.leftResizeHandle = new Vertex(0, 0);
+        this.bottomResizeHandle = new Vertex(0, 0);
+        this.rightResizeHandle = new Vertex(0, 0);
+        // @private
+        this.topHandleDragStartPosition = null;
+        this.leftHandleDragStartPosition = null;
+        this.bottomHandleDragStartPosition = null;
+        this.rightHandleDragStartPosition = null;
+        this.__listeners = this.__installListeners(this, pb, bezierPath, updateCallback);
+        this.updateResizeHandles();
+    }
+    draw(draw, fill) {
+        this.drawHandleLines(draw, fill, "grey");
+        this.drawTriangles(draw, fill, "rgba(0,192,192,1.0)");
+    }
+    /**
+     * Call this method from the outside to see active helper lines for those edges
+     * that are currently dragged.
+     *
+     * @param {DrawLib<any>} draw
+     * @param {DrawLib<any>} fill
+     * @param {string} lineColor
+     */
+    drawHandleLines(draw, fill, lineColor) {
+        // console.log("drawResizeHandleLines", bezierResizer.verticalResizeHandleDragStartPosition);
+        var bounds = this.bezierPath.getBounds();
+        if (this.topHandleDragStartPosition) {
+            draw.line({ x: bounds.min.x, y: this.topResizeHandle.y }, { x: bounds.max.x, y: this.topResizeHandle.y }, lineColor, 1.0, {
+                dashOffset: 0.0,
+                dashArray: [5, 5]
+            });
+        }
+        if (this.leftHandleDragStartPosition) {
+            draw.line({ x: this.leftResizeHandle.x, y: bounds.min.y }, { x: this.leftResizeHandle.x, y: bounds.max.y }, lineColor, 1.0, { dashOffset: 0.0, dashArray: [5, 5] });
+        }
+        if (this.bottomHandleDragStartPosition) {
+            draw.line({ x: bounds.min.x, y: this.bottomResizeHandle.y }, { x: bounds.max.x, y: this.bottomResizeHandle.y }, lineColor, 1.0, {
+                dashOffset: 0.0,
+                dashArray: [5, 5]
+            });
+        }
+        if (this.rightHandleDragStartPosition) {
+            draw.line({ x: this.rightResizeHandle.x, y: bounds.min.y }, { x: this.rightResizeHandle.x, y: bounds.max.y }, lineColor, 1.0, { dashOffset: 0.0, dashArray: [5, 5] });
+        }
+    }
+    drawTriangles(draw, _fill, color) {
+        // this.__drawUpTriangle(draw, this.topResizeHandle, color);
+        // this.__drawDownTriangle(draw, this.bottomResizeHandle, color);
+        // this.__drawLeftTriangle(draw, this.leftResizeHandle, color);
+        // this.__drawRightTriangle(draw, this.rightResizeHandle, color);
+        this.drawTopTriangle(draw, _fill, color);
+        this.drawLeftTriangle(draw, _fill, color);
+        this.drawBottomTriangle(draw, _fill, color);
+        this.drawRightTriangle(draw, _fill, color);
+    }
+    /**
+     * Draws an up-trinangle at the top handle position.
+     *
+     * @param draw
+     * @param position
+     * @param color
+     */
+    drawTopTriangle(draw, _fill, color) {
+        this.__drawUpTriangle(draw, _fill, this.topResizeHandle, color);
+    }
+    /**
+     * Draws an up-trinangle at the top handle position.
+     *
+     * @param draw
+     * @param position
+     * @param color
+     */
+    drawLeftTriangle(draw, _fill, color) {
+        this.__drawLeftTriangle(draw, _fill, this.leftResizeHandle, color);
+    }
+    /**
+     * Draws an up-trinangle at the top handle position.
+     *
+     * @param draw
+     * @param position
+     * @param color
+     */
+    drawBottomTriangle(draw, _fill, color) {
+        this.__drawDownTriangle(draw, _fill, this.bottomResizeHandle, color);
+    }
+    /**
+     * Draws an right-trinangle at the top handle position.
+     *
+     * @param draw
+     * @param position
+     * @param color
+     */
+    drawRightTriangle(draw, _fill, color) {
+        this.__drawRightTriangle(draw, _fill, this.rightResizeHandle, color);
+    }
+    /**
+     * Draws an up-trinangle at the top handle position.
+     *
+     * @param draw
+     * @param position
+     * @param color
+     */
+    __drawUpTriangle(draw, _fill, position, color) {
+        const arrowSize = 6.0;
+        const arrowSizeH = arrowSize / this.pb.config.scaleX;
+        const arrowSizeV = arrowSize / this.pb.config.scaleY;
+        const verts = [
+            { x: position.x - arrowSizeH, y: position.y + arrowSizeV * 0.5 }, // left corner
+            { x: position.x, y: position.y - arrowSizeV }, // up corner
+            { x: position.x + arrowSizeH, y: position.y + arrowSizeV * 0.5 } // right corner
+        ];
+        draw.polyline(verts, false, color, 1.0);
+    }
+    /**
+     * Draws an left-trinangle at the left handle position.
+     *
+     * @param draw
+     * @param position
+     * @param color
+     */
+    __drawLeftTriangle(draw, _fill, position, color) {
+        const arrowSize = 6.0;
+        const arrowSizeH = arrowSize / this.pb.config.scaleX;
+        const arrowSizeV = arrowSize / this.pb.config.scaleY;
+        const verts = [
+            { x: position.x - arrowSizeH, y: position.y }, // left corner
+            { x: position.x + arrowSizeH * 0.5, y: position.y - arrowSizeV }, // up corner
+            { x: position.x + arrowSizeH * 0.5, y: position.y + arrowSizeV } // down corner
+        ];
+        draw.polyline(verts, false, color, 1.0);
+    }
+    /**
+     * Draws a down-trinangle at the top handle position.
+     *
+     * @param draw
+     * @param position
+     * @param color
+     */
+    __drawDownTriangle(draw, _fill, position, color) {
+        const arrowSize = 6.0;
+        const arrowSizeH = arrowSize / this.pb.config.scaleX;
+        const arrowSizeV = arrowSize / this.pb.config.scaleY;
+        const verts = [
+            { x: position.x + arrowSizeH, y: position.y - arrowSizeV * 0.5 }, // right corner
+            { x: position.x, y: position.y + arrowSizeV }, // down corner
+            { x: position.x - arrowSizeH, y: position.y - arrowSizeV * 0.5 } // left corner
+        ];
+        draw.polyline(verts, false, color, 1.0);
+    }
+    /**
+     * Draws an left-trinangle at the left handle position.
+     *
+     * @param draw
+     * @param position
+     * @param color
+     */
+    __drawRightTriangle(draw, _fill, position, color) {
+        const arrowSize = 6.0;
+        const arrowSizeH = arrowSize / this.pb.config.scaleX;
+        const arrowSizeV = arrowSize / this.pb.config.scaleY;
+        const verts = [
+            { x: position.x + arrowSizeH, y: position.y }, // left corner
+            { x: position.x - arrowSizeH * 0.5, y: position.y - arrowSizeV }, // up corner
+            { x: position.x - arrowSizeH * 0.5, y: position.y + arrowSizeV } // down corner
+        ];
+        draw.polyline(verts, false, color, 1.0);
+    }
+    /**
+     * Destroys this helper by removing all previously installed vertex listeners.
+     */
+    destroy() {
+        this.topResizeHandle.listeners.removeDragStartListener(this.__listeners[0]);
+        this.topResizeHandle.listeners.removeDragEndListener(this.__listeners[1]);
+        this.leftResizeHandle.listeners.removeDragStartListener(this.__listeners[2]);
+        this.leftResizeHandle.listeners.removeDragEndListener(this.__listeners[3]);
+        this.bottomResizeHandle.listeners.removeDragStartListener(this.__listeners[4]);
+        this.bottomResizeHandle.listeners.removeDragEndListener(this.__listeners[5]);
+        this.rightResizeHandle.listeners.removeDragStartListener(this.__listeners[6]);
+        this.rightResizeHandle.listeners.removeDragEndListener(this.__listeners[7]);
+    }
+    /**
+     * Install all required drag-start and drag-end listeners.
+     */
+    __installListeners(_self, pb, bezierPath, updateCallback) {
+        var listeners = [];
+        listeners.push(_self.topResizeHandle.listeners.addDragStartListener(function (e) {
+            var relPos = pb.transformMousePosition(e.params.draggedFrom.x, e.params.draggedFrom.y);
+            _self.topHandleDragStartPosition = relPos;
+        }));
+        listeners.push(_self.topResizeHandle.listeners.addDragEndListener(function (e) {
+            var relTargetPos = pb.transformMousePosition(e.params.pos.x, e.params.pos.y);
+            var targetHeightDifference = _self.topHandleDragStartPosition.y - relTargetPos.y;
+            _self.__changePathHeightTop(bezierPath, targetHeightDifference);
+            _self.updateResizeHandles();
+            _self.topHandleDragStartPosition = null;
+            updateCallback();
+        }));
+        listeners.push(_self.leftResizeHandle.listeners.addDragStartListener(function (e) {
+            var relPos = pb.transformMousePosition(e.params.draggedFrom.x, e.params.draggedFrom.y);
+            _self.leftHandleDragStartPosition = relPos;
+        }));
+        listeners.push(_self.leftResizeHandle.listeners.addDragEndListener(function (e) {
+            var relTargetPos = pb.transformMousePosition(e.params.pos.x, e.params.pos.y);
+            var targetWidthDifference = _self.leftHandleDragStartPosition.x - relTargetPos.x;
+            _self.__changePathWidthLeft(bezierPath, targetWidthDifference);
+            _self.updateResizeHandles();
+            _self.leftHandleDragStartPosition = null;
+            updateCallback();
+        }));
+        listeners.push(_self.bottomResizeHandle.listeners.addDragStartListener(function (e) {
+            var relPos = pb.transformMousePosition(e.params.draggedFrom.x, e.params.draggedFrom.y);
+            _self.bottomHandleDragStartPosition = relPos;
+        }));
+        listeners.push(_self.bottomResizeHandle.listeners.addDragEndListener(function (e) {
+            var relTargetPos = pb.transformMousePosition(e.params.pos.x, e.params.pos.y);
+            var targetHeightDifference = relTargetPos.y - _self.bottomHandleDragStartPosition.y;
+            _self.__changePathHeightBottom(bezierPath, targetHeightDifference);
+            _self.updateResizeHandles();
+            _self.bottomHandleDragStartPosition = null;
+            updateCallback();
+        }));
+        listeners.push(_self.rightResizeHandle.listeners.addDragStartListener(function (e) {
+            var relPos = pb.transformMousePosition(e.params.draggedFrom.x, e.params.draggedFrom.y);
+            _self.rightHandleDragStartPosition = relPos;
+        }));
+        listeners.push(_self.rightResizeHandle.listeners.addDragEndListener(function (e) {
+            var relTargetPos = pb.transformMousePosition(e.params.pos.x, e.params.pos.y);
+            var targetWidthDifference = relTargetPos.x - _self.rightHandleDragStartPosition.x;
+            _self.__changePathWidthRight(bezierPath, targetWidthDifference);
+            _self.updateResizeHandles();
+            _self.rightHandleDragStartPosition = null;
+            updateCallback();
+        }));
+        return listeners;
+    }
+    /**
+     * @param {BezierPath} bezierPath - The path to update.
+     * @param {number} heightAmount - The height difference to apply. Can be positive or negative or zero.
+     */
+    __changePathHeightTop(bezierPath, heightAmount) {
+        const bounds = bezierPath.getBounds();
+        const scaleAnchor = bounds.max;
+        const verticalScaleFactor = (bounds.height + heightAmount) / bounds.height;
+        bezierPath.scaleXY({ x: 1.0, y: verticalScaleFactor }, scaleAnchor);
+    }
+    /**
+     * @param {BezierPath} bezierPath - The path to update.
+     * @param {number} widthAmount - The width difference to apply. Can be positive or negative or zero.
+     */
+    __changePathWidthLeft(bezierPath, widthAmount) {
+        const bounds = bezierPath.getBounds();
+        const scaleAnchor = bounds.max;
+        const horizontalScaleFactor = (bounds.width + widthAmount) / bounds.width;
+        bezierPath.scaleXY({ x: horizontalScaleFactor, y: 1.0 }, scaleAnchor);
+    }
+    /**
+     * @param {BezierPath} bezierPath - The path to update.
+     * @param {number} heightAmount - The height difference to apply. Can be positive or negative or zero.
+     */
+    __changePathHeightBottom(bezierPath, heightAmount) {
+        const bounds = bezierPath.getBounds();
+        const scaleAnchor = bounds.min;
+        const verticalScaleFactor = (bounds.height + heightAmount) / bounds.height;
+        bezierPath.scaleXY({ x: 1.0, y: verticalScaleFactor }, scaleAnchor);
+    }
+    /**
+     * @param {BezierPath} bezierPath - The path to update.
+     * @param {number} widthAmount - The width difference to apply. Can be positive or negative or zero.
+     */
+    __changePathWidthRight(bezierPath, widthAmount) {
+        const bounds = bezierPath.getBounds();
+        const scaleAnchor = bounds.min;
+        const horizontalScaleFactor = (bounds.width + widthAmount) / bounds.width;
+        bezierPath.scaleXY({ x: horizontalScaleFactor, y: 1.0 }, scaleAnchor);
+    }
+    /**
+     * Set the handles to the new position after the path was resized.
+     */
+    updateResizeHandles() {
+        const bounds = this.bezierPath.getBounds();
+        this.leftResizeHandle.set(bounds.min.x, bounds.min.y + bounds.height / 2.0);
+        this.topResizeHandle.set(bounds.min.x + bounds.width / 2.0, bounds.min.y);
+        this.rightResizeHandle.set(bounds.max.x, bounds.min.y + bounds.height / 2.0);
+        this.bottomResizeHandle.set(bounds.min.x + bounds.width / 2.0, bounds.max.y);
+    }
+} // END class
+//# sourceMappingURL=BezierResizeHelper.js.map

package/src/esm/utils/helpers/BezierResizeHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BezierResizeHelper.js","sourceRoot":"","sources":["../../../ts/utils/helpers/BezierResizeHelper.ts"],"names":[],"mappings":"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"}

package/src/ts/PlotBoilerplate.ts

@@ -92,8 +92,9 @@
  * @modified 2025-05-07 Moving full vectors now by default when vector point a is moved.
  * @modified 2025-05-20 Applying `lineWith` parameter in the draw routine for vectors (had been missing).
  * @modified 2026-03-13 Changed visibility of `setZoom` and `setOffset` to public. There was no good reason to have the private.
+ * @modified 2026-04-04 Added `isInPanningMode` attribute and `isPanning` method.
  *
- * @version  1.21.2
+ * @version  1.22.0
  *
  * @file PlotBoilerplate
  * @fileoverview The main class.
@@ -320,6 +321,15 @@ export class PlotBoilerplate {
    */
   hooks: IHooks;
 
+  /**
+   * Indicator if the instance is currently in 'panning' mode.
+   * Please use `isPanning()` method to determine value.
+   * @member {boolean}
+   * @memberof PlotBoilerplate
+   * @instance
+   */
+  private isInPanningMode: boolean;
+
   /**
    * A list of content change listeners.
    */
@@ -756,6 +766,10 @@ export class PlotBoilerplate {
     this.updateCSSscale();
   }
 
+  public isPanning(): boolean {
+    return this.isInPanningMode;
+  }
+
   /**
    * Set the current zoom and draw offset to fit the given bounds.
    *
@@ -1714,22 +1728,21 @@ export class PlotBoilerplate {
    **/
   // TODO: this was moved to the DOM utils
   private getAvailableContainerSpace(): XYDimension {
-    const _self: PlotBoilerplate = this;
-    const container: HTMLElement = _self.canvas.parentNode as unknown as HTMLElement; // Element | Document | DocumentFragment;
-    _self.canvas.style.display = "none";
+    const container: HTMLElement = this.canvas.parentNode as unknown as HTMLElement; // Element | Document | DocumentFragment;
+    this.canvas.style.display = "none";
     var padding: number = this.getFProp(container, "padding") || 0,
-      border: number = this.getFProp(_self.canvas, "border-width") || 0,
+      border: number = this.getFProp(this.canvas, "border-width") || 0,
       pl: number = this.getFProp(container, "padding-left") || padding,
       pr: number = this.getFProp(container, "padding-right") || padding,
       pt: number = this.getFProp(container, "padding-top") || padding,
       pb: number = this.getFProp(container, "padding-bottom") || padding,
-      bl: number = this.getFProp(_self.canvas, "border-left-width") || border,
-      br: number = this.getFProp(_self.canvas, "border-right-width") || border,
-      bt: number = this.getFProp(_self.canvas, "border-top-width") || border,
-      bb: number = this.getFProp(_self.canvas, "border-bottom-width") || border;
+      bl: number = this.getFProp(this.canvas, "border-left-width") || border,
+      br: number = this.getFProp(this.canvas, "border-right-width") || border,
+      bt: number = this.getFProp(this.canvas, "border-top-width") || border,
+      bb: number = this.getFProp(this.canvas, "border-bottom-width") || border;
     var w: number = container.clientWidth;
     var h: number = container.clientHeight;
-    _self.canvas.style.display = "block";
+    this.canvas.style.display = "block";
     return { width: w - pl - pr - bl - br, height: h - pt - pb - bt - bb };
   }
 
@@ -1990,7 +2003,8 @@ export class PlotBoilerplate {
     //            not this one. So this tab will never receive any [Ctrl-down] events
     //            until next keypress; the implication is, that [Ctrl] would still
     //            considered to be pressed which is not true.
-    if (this.keyHandler && (this.keyHandler.isDown("alt") || this.keyHandler.isDown("spacebar"))) {
+    // if (this.keyHandler && (this.keyHandler.isDown("alt") || this.keyHandler.isDown("spacebar"))) {
+    if (this.isInPanningMode) {
       if (!this.config.enablePan) {
         return;
       }
@@ -2345,6 +2359,18 @@ export class PlotBoilerplate {
           _self.selectVerticesInPolygon(_self.selectPolygon);
           _self.selectPolygon = null;
           _self.redraw();
+        })
+        .down("alt", function () {
+          _self.isInPanningMode = true;
+        })
+        .up("alt", function () {
+          _self.isInPanningMode = false;
+        })
+        .down("spacebar", function () {
+          _self.isInPanningMode = true;
+        })
+        .up("spacebar", function () {
+          _self.isInPanningMode = false;
         });
     } // END IF enableKeys?
     else {

package/src/ts/VertexListeners.ts

@@ -6,7 +6,8 @@
  * @modified 2020-02-22 Added 'return this' to the add* functions (for chanining).
  * @modified 2020-03-23 Ported to Typescript from JS.
  * @modified 2020-11-17 Added the `click` handler.
- * @version  1.1.0
+ * @modified 2026-04-04 Adding null-listeners will now throw an error.
+ * @version  1.2.0
  *
  * @file VertexListeners
  * @public
@@ -275,6 +276,9 @@ export class VertexListeners {
    * @private
    */
   private static _addListener(listeners: Array<(e: VertEvent) => void>, newListener: (e: VertEvent) => void): boolean {
+    if (!newListener) {
+      throw new Error("Cannot add null listener. This would lead to unpredictable errors during event handling.");
+    }
     for (var i in listeners) {
       if (listeners[i] == newListener) return false;
     }

package/src/ts/draw.ts

@@ -59,13 +59,25 @@
  * @modified 2024-09-13 Remoed the scaling of `lineWidth` in the `polygon` and `polyline` methods. This makes no sense here and doesn't match up with the behavior of other line functions.
  * @modified 2026-01-04 Adding `lineJoin` attribute to the `StrokeOptions`.
  * @modified 2026-03-18 Adding `isOpen` parameter to `cubicBezierPath` draw method.
- * @version  1.14.0
+ * @modified 2026-04-04 Added the method `bounds`.
+ * @modified 2026-04-04 Handling the `lineCap` attribute in the `StrokeOptions`.
+ * @version  1.15.0
  **/
 
 import { CubicBezierCurve } from "./CubicBezierCurve";
 import { Polygon } from "./Polygon";
 import { Vertex } from "./Vertex";
-import { DrawLib, SVGPathParams, XYCoords, UID, DrawLibConfiguration, FontStyle, FontWeight, StrokeOptions } from "./interfaces";
+import {
+  DrawLib,
+  SVGPathParams,
+  XYCoords,
+  UID,
+  DrawLibConfiguration,
+  FontStyle,
+  FontWeight,
+  StrokeOptions,
+  IBounds
+} from "./interfaces";
 import { drawutilssvg } from "./drawutilssvg";
 import { Bounds } from "./Bounds";
 import { Vector } from "./Vector";
@@ -143,6 +155,7 @@ export class drawutils implements DrawLib<void> {
     );
     this.ctx.lineDashOffset = (strokeOptions?.dashOffset ?? 0) * this.scale.x;
     this.ctx.lineJoin = strokeOptions?.lineJoin ?? null;
+    this.ctx.lineCap = strokeOptions?.lineCap ?? null;
   }
 
   // +---------------------------------------------------------------------------------
@@ -590,6 +603,23 @@ export class drawutils implements DrawLib<void> {
     this.ctx.restore();
   }
 
+  /**
+   * Draw a rectangle at the given bounds; and with the specified line width and (CSS-) color.<br>
+   *
+   * @method bounds
+   * @param {IBounds} bounds - The bounds rectangle to be drawn.
+   * @param {string} color - The CSS color to draw the rectangle with.
+   * @param {number=} lineWidth - (optional) The line width to use; default is 1.
+   * @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
+   *
+   * @return {R}
+   * @instance
+   * @memberof DrawLib
+   */
+  bounds(bounds: IBounds, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): void {
+    this.rect(bounds.min, bounds.max.x - bounds.min.x, bounds.max.y - bounds.min.y, color, lineWidth, strokeOptions);
+  }
+
   /**
    * Draw the given (cubic) bézier curve.
    *

package/src/ts/drawgl.ts

@@ -17,12 +17,23 @@
  * @modified 2023-09-29 Added the `cubicBezierArrow(...)` function to the 'DrawLib.arrow()` interface.
  * @modified 2023-09-29 Added the `lineDashes` attribute.
  * @modified 2026-03-18 Adding `isOpen` parameter to `cubicBezierPath` draw method.
- * @version  0.0.10
+ * @modified 2026-04-04 Added the method `bounds`.
+ * @version  0.0.11
  **/
 
 import { Polygon } from "./Polygon";
 import { Vertex } from "./Vertex";
-import { DrawLib, XYCoords, SVGPathParams, UID, DrawLibConfiguration, FontStyle, FontWeight, StrokeOptions } from "./interfaces";
+import {
+  DrawLib,
+  XYCoords,
+  SVGPathParams,
+  UID,
+  DrawLibConfiguration,
+  FontStyle,
+  FontWeight,
+  StrokeOptions,
+  IBounds
+} from "./interfaces";
 import { Bounds } from "./Bounds";
 
 /**
@@ -569,10 +580,34 @@ export class drawutilsgl implements DrawLib<void> {
    * @param {string} color - The color to use.
    * @param {number=1} lineWidth - (optional) The line with to use (default is 1).
    **/
-  rect(position: XYCoords, width: number, height: number, color: string, lineWidth?: number): void {
+  rect(
+    position: XYCoords,
+    width: number,
+    height: number,
+    color: string,
+    lineWidth?: number,
+    strokeOptions?: StrokeOptions
+  ): void {
     // NOT YET IMPLEMENTED
   }
 
+  /**
+   * Draw a rectangle at the given bounds; and with the specified line width and (CSS-) color.<br>
+   *
+   * @method bounds
+   * @param {IBounds} bounds - The bounds rectangle to be drawn.
+   * @param {string} color - The CSS color to draw the rectangle with.
+   * @param {number=} lineWidth - (optional) The line width to use; default is 1.
+   * @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
+   *
+   * @return {R}
+   * @instance
+   * @memberof DrawLib
+   */
+  bounds(bounds: IBounds, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): void {
+    this.rect(bounds.min, bounds.max.x - bounds.min.x, bounds.max.y - bounds.min.y, color, lineWidth, strokeOptions);
+  }
+
   /**
    * Draw a grid of horizontal and vertical lines with the given (CSS-) color.
    *

package/src/ts/drawutilssvg.ts

@@ -51,6 +51,9 @@
  * @modified 2026-01-04 Adding `lineJoin` attribute to the methods' `StrokeOptions` param.
  * @modified 2026-01-04 Fixing missing `strokeOptions` param in the `drawutilssvg.polygon` method.
  * @modified 2026-03-18 Adding `isOpen` parameter to `cubicBezierPath` draw method.
+ * @modified 2026-04-04 Added the method `bounds`.
+ * @modified 2026-04-04 Handling the `stroke-linecap` option now from the `StrokeOptions` interface.
+ * @modified 2026-04-04 Chaning the `copyPathData` method by usind `Array.slice()`.
  * @version  1.7.0
  **/
 
@@ -69,7 +72,8 @@ import {
   DrawLibConfiguration,
   FontStyle,
   FontWeight,
-  StrokeOptions
+  StrokeOptions,
+  IBounds
 } from "./interfaces";
 import { Bounds } from "./Bounds";
 import { UIDGenerator } from "./UIDGenerator";
@@ -681,6 +685,11 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     if (strokeOptions && strokeOptions.lineJoin && drawutilssvg.nodeSupportsLineJoin(node.tagName)) {
       node.setAttribute("stroke-linejoin", strokeOptions.lineJoin);
     }
+
+    // Set lineCap option?
+    if (strokeOptions && strokeOptions.lineCap && drawutilssvg.nodeSupportsLineCap(node.tagName)) {
+      node.setAttribute("stroke-linecap", strokeOptions.lineCap);
+    }
   }
 
   private _x(x: number): number {
@@ -1295,6 +1304,23 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     return this._bindFillDraw(node, "rect", color, lineWidth || 1);
   }
 
+  /**
+   * Draw a rectangle at the given bounds; and with the specified line width and (CSS-) color.<br>
+   *
+   * @method bounds
+   * @param {IBounds} bounds - The bounds rectangle to be drawn.
+   * @param {string} color - The CSS color to draw the rectangle with.
+   * @param {number=} lineWidth - (optional) The line width to use; default is 1.
+   * @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
+   *
+   * @return {R}
+   * @instance
+   * @memberof DrawLib
+   */
+  bounds(bounds: IBounds, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): void {
+    this.rect(bounds.min, bounds.max.x - bounds.min.x, bounds.max.y - bounds.min.y, color, lineWidth, strokeOptions);
+  }
+
   /**
    * Draw a grid of horizontal and vertical lines with the given (CSS-) color.
    *
@@ -1801,11 +1827,8 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    * @memberof drawutilssvg
    */
   static copyPathData(data: SVGPathParams): SVGPathParams {
-    const copy: SVGPathParams = new Array(data.length);
-    for (var i = 0, n = data.length; i < n; i++) {
-      copy[i] = data[i];
-    }
-    return copy;
+    // To create a shallow copy we can just use the `slice` method.
+    return data.slice();
   }
 
   /**
@@ -1983,6 +2006,10 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     return ["line", "path", "circle", "ellipse", "rectangle", "rect"].includes(nodeName);
   }
 
+  private static nodeSupportsLineCap(nodeName: string) {
+    return ["line", "path", "circle", "ellipse", "rectangle", "rect"].includes(nodeName);
+  }
+
   /**
    * Creates a basic <line> node with start and end coordinates. The created node will not
    * be bound to any root node.