plotboilerplate 1.27.1 → 1.28.1

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

@@ -0,0 +1,319 @@
+"use strict";
+/**
+ * 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
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BezierResizeHelper = void 0;
+var Vertex_1 = require("../../Vertex");
+// A closure to hide helper functions.
+var BezierResizeHelper = /** @class */ (function () {
+    /**
+     * The constructor.
+     *
+     * @param {PlotBoilerplate} pb
+     * @param {BezierPath} bezierPath
+     * @param {function} updateCallback
+     */
+    function BezierResizeHelper(pb, bezierPath, updateCallback) {
+        this.pb = pb;
+        this.bezierPath = bezierPath;
+        // @public
+        this.topResizeHandle = new Vertex_1.Vertex(0, 0);
+        this.leftResizeHandle = new Vertex_1.Vertex(0, 0);
+        this.bottomResizeHandle = new Vertex_1.Vertex(0, 0);
+        this.rightResizeHandle = new Vertex_1.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();
+    }
+    BezierResizeHelper.prototype.draw = function (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
+     */
+    BezierResizeHelper.prototype.drawHandleLines = function (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] });
+        }
+    };
+    BezierResizeHelper.prototype.drawTriangles = function (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
+     */
+    BezierResizeHelper.prototype.drawTopTriangle = function (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
+     */
+    BezierResizeHelper.prototype.drawLeftTriangle = function (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
+     */
+    BezierResizeHelper.prototype.drawBottomTriangle = function (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
+     */
+    BezierResizeHelper.prototype.drawRightTriangle = function (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
+     */
+    BezierResizeHelper.prototype.__drawUpTriangle = function (draw, _fill, position, color) {
+        var arrowSize = 6.0;
+        var arrowSizeH = arrowSize / this.pb.config.scaleX;
+        var arrowSizeV = arrowSize / this.pb.config.scaleY;
+        var 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
+     */
+    BezierResizeHelper.prototype.__drawLeftTriangle = function (draw, _fill, position, color) {
+        var arrowSize = 6.0;
+        var arrowSizeH = arrowSize / this.pb.config.scaleX;
+        var arrowSizeV = arrowSize / this.pb.config.scaleY;
+        var 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
+     */
+    BezierResizeHelper.prototype.__drawDownTriangle = function (draw, _fill, position, color) {
+        var arrowSize = 6.0;
+        var arrowSizeH = arrowSize / this.pb.config.scaleX;
+        var arrowSizeV = arrowSize / this.pb.config.scaleY;
+        var 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
+     */
+    BezierResizeHelper.prototype.__drawRightTriangle = function (draw, _fill, position, color) {
+        var arrowSize = 6.0;
+        var arrowSizeH = arrowSize / this.pb.config.scaleX;
+        var arrowSizeV = arrowSize / this.pb.config.scaleY;
+        var 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.
+     */
+    BezierResizeHelper.prototype.destroy = function () {
+        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.
+     */
+    BezierResizeHelper.prototype.__installListeners = function (_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.
+     */
+    BezierResizeHelper.prototype.__changePathHeightTop = function (bezierPath, heightAmount) {
+        var bounds = bezierPath.getBounds();
+        var scaleAnchor = bounds.max;
+        var 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.
+     */
+    BezierResizeHelper.prototype.__changePathWidthLeft = function (bezierPath, widthAmount) {
+        var bounds = bezierPath.getBounds();
+        var scaleAnchor = bounds.max;
+        var 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.
+     */
+    BezierResizeHelper.prototype.__changePathHeightBottom = function (bezierPath, heightAmount) {
+        var bounds = bezierPath.getBounds();
+        var scaleAnchor = bounds.min;
+        var 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.
+     */
+    BezierResizeHelper.prototype.__changePathWidthRight = function (bezierPath, widthAmount) {
+        var bounds = bezierPath.getBounds();
+        var scaleAnchor = bounds.min;
+        var 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.
+     */
+    BezierResizeHelper.prototype.updateResizeHandles = function () {
+        var 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);
+    };
+    return BezierResizeHelper;
+}()); // END class
+exports.BezierResizeHelper = BezierResizeHelper;
+//# sourceMappingURL=BezierResizeHelper.js.map

package/src/cjs/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/esm/PlotBoilerplate.d.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.
@@ -258,6 +259,14 @@ export declare class PlotBoilerplate {
      * @instance
      */
     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;
     /**
      * A list of content change listeners.
      */
@@ -370,6 +379,7 @@ export declare class PlotBoilerplate {
      * @private
      **/
     private _setToRetina;
+    isPanning(): boolean;
     /**
      * Set the current zoom and draw offset to fit the given bounds.
      *

package/src/esm/PlotBoilerplate.js

@@ -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.
@@ -551,6 +552,9 @@ export class PlotBoilerplate {
         this.resizeCanvas();
         this.updateCSSscale();
     }
+    isPanning() {
+        return this.isInPanningMode;
+    }
     /**
      * Set the current zoom and draw offset to fit the given bounds.
      *
@@ -1430,13 +1434,12 @@ export class PlotBoilerplate {
      **/
     // TODO: this was moved to the DOM utils
     getAvailableContainerSpace() {
-        const _self = this;
-        const container = _self.canvas.parentNode; // Element | Document | DocumentFragment;
-        _self.canvas.style.display = "none";
-        var padding = this.getFProp(container, "padding") || 0, border = this.getFProp(_self.canvas, "border-width") || 0, pl = this.getFProp(container, "padding-left") || padding, pr = this.getFProp(container, "padding-right") || padding, pt = this.getFProp(container, "padding-top") || padding, pb = this.getFProp(container, "padding-bottom") || padding, bl = this.getFProp(_self.canvas, "border-left-width") || border, br = this.getFProp(_self.canvas, "border-right-width") || border, bt = this.getFProp(_self.canvas, "border-top-width") || border, bb = this.getFProp(_self.canvas, "border-bottom-width") || border;
+        const container = this.canvas.parentNode; // Element | Document | DocumentFragment;
+        this.canvas.style.display = "none";
+        var padding = this.getFProp(container, "padding") || 0, border = this.getFProp(this.canvas, "border-width") || 0, pl = this.getFProp(container, "padding-left") || padding, pr = this.getFProp(container, "padding-right") || padding, pt = this.getFProp(container, "padding-top") || padding, pb = this.getFProp(container, "padding-bottom") || padding, bl = this.getFProp(this.canvas, "border-left-width") || border, br = this.getFProp(this.canvas, "border-right-width") || border, bt = this.getFProp(this.canvas, "border-top-width") || border, bb = this.getFProp(this.canvas, "border-bottom-width") || border;
         var w = container.clientWidth;
         var h = 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 };
     }
     /**
@@ -1698,7 +1701,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;
             }
@@ -2049,6 +2053,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 {