@base-framework/ui 0.0.15 → 0.0.19

package/dist/types/components/organisms/organisms.d.ts

@@ -36,3 +36,4 @@ export * from "./tabs/button-tab.js";
 export * from "./tabs/tab-group.js";
 export * from "./tabs/tab-navigation.js";
 export * from "./tabs/tab.js";
+export * from "./signature/signature.js";

package/dist/types/components/organisms/signature/signature-canvas.d.ts

@@ -0,0 +1,144 @@
+/**
+ * SignatureCanvas
+ *
+ * The underlying canvas component for drawing signatures. Manages
+ * pointer events, drawing, and resizing.
+ *
+ * @class
+ * @extends Component
+ */
+export class SignatureCanvas extends Component {
+    lineWidth: any;
+    lineColor: any;
+    canvas: any;
+    ctx: any;
+    status: string;
+    timer: IntervalTimer;
+    width: any;
+    height: any;
+    signed: boolean;
+    mouse: {
+        x: number;
+        y: number;
+        status: string;
+    };
+    margin: any;
+    targetSize: any;
+    baseLineWidth: any;
+    baseStrokeColor: any;
+    /**
+     * Renders a <canvas> element.
+     *
+     * @returns {object} Layout definition for the canvas.
+     */
+    render(): object;
+    /**
+     * Calculates and saves the current pointer position in canvas coordinates.
+     *
+     * @param {Event} e The event object (mouse or touch).
+     * @returns {void}
+     */
+    getEventPosition(e: Event): void;
+    /**
+     * Called when the pointer goes down on the canvas.
+     * Begins a new path, sets the mouse status, and starts the timer.
+     *
+     * @param {Event} e The event object.
+     * @returns {void}
+     */
+    pointerDown(e: Event): void;
+    /**
+     * Called when the pointer goes up or leaves the canvas area.
+     * Closes the path and stops the drawing timer.
+     *
+     * @param {Event} e The event object.
+     * @returns {void}
+     */
+    pointerUp(e: Event): void;
+    /**
+     * Tracks pointer movement, updates position in real time.
+     *
+     * @param {Event} e The event object.
+     * @returns {void}
+     */
+    pointerPosition(e: Event): void;
+    /**
+     * Resizes the canvas, preserves existing drawing by converting
+     * it to a data URL, then re-drawing.
+     *
+     * @returns {void}
+     */
+    resize(): void;
+    /**
+     * Returns a JPEG data URL of the current canvas content.
+     *
+     * @returns {string} The signature image as a data URL.
+     */
+    getImage(): string;
+    /**
+     * (Deprecated approach) Resize the canvas to the container size
+     * without scaling logic.
+     *
+     * @returns {void}
+     */
+    noScaleResize(): void;
+    /**
+     * Scales the canvas to fit within its container, preserving aspect ratio
+     * relative to this.targetSize.
+     *
+     * @returns {void}
+     */
+    scale(): void;
+    /**
+     * Main drawing loop. If the mouse is down, adds a line
+     * from the last point to the current pointer position.
+     *
+     * @returns {void}
+     */
+    draw(): void;
+    /**
+     * Draws the baseline at the bottom of the canvas.
+     *
+     * @param {CanvasRenderingContext2D} ctx The canvas 2D context.
+     * @returns {void}
+     */
+    drawBottomLine(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Adds a line to the current path, updating the 'signed' status.
+     *
+     * @param {CanvasRenderingContext2D} ctx The canvas context.
+     * @param {number} px The x-coordinate.
+     * @param {number} py The y-coordinate.
+     * @param {string} color The stroke color.
+     * @returns {void}
+     */
+    addLine(ctx: CanvasRenderingContext2D, px: number, py: number, color: string): void;
+    /**
+     * Clears the canvas, sets signed to false, and re-initializes
+     * the background for a fresh signature.
+     *
+     * @returns {void}
+     */
+    reset(): void;
+    /**
+     * Fills the canvas background with white and draws the baseline.
+     *
+     * @param {CanvasRenderingContext2D} ctx The canvas context.
+     * @returns {void}
+     */
+    setupBackground(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Starts the drawing timer so new lines can be added as pointer moves.
+     *
+     * @returns {void}
+     */
+    startTimer(): void;
+    /**
+     * Stops the drawing timer.
+     *
+     * @returns {void}
+     */
+    stopTimer(): void;
+}
+import { Component } from "@base-framework/base";
+import { IntervalTimer } from "@base-framework/organisms";

package/dist/types/components/organisms/signature/signature.d.ts

@@ -0,0 +1,55 @@
+/**
+ * SignaturePanel
+ *
+ * This panel manages a signature canvas and controls. It provides
+ * a hidden input, a button to reset the signature, and a canvas
+ * for drawing signatures.
+ *
+ * @class
+ * @extends Component
+ */
+export class SignaturePanel extends Component {
+    /**
+     * Sets up default properties for the signature panel.
+     *
+     * @returns {void}
+     */
+    setupProps(): void;
+    lineColor: any;
+    lineWidth: any;
+    baseLineWidth: any;
+    baseStrokeColor: any;
+    margin: any;
+    targetSize: any;
+    callBackData: any;
+    pointerUp: any;
+    path: any;
+    canvasLayer: any;
+    /**
+     * Renders the main layout for the signature panel,
+     * including a hidden input and a reset button.
+     *
+     * @returns {object} The layout object for the component.
+     */
+    render(): object;
+    /**
+     * Gets the signature image from the canvas layer, as a data URL.
+     *
+     * @returns {string} The signature image data URL.
+     */
+    getImage(): string;
+    /**
+     * Checks if the user has drawn anything on the signature canvas.
+     *
+     * @returns {boolean} True if the canvas has been signed, otherwise false.
+     */
+    isSigned(): boolean;
+    /**
+     * Resets the signature canvas to a blank state.
+     *
+     * @param {Event} [e] The event object (if called by a click event).
+     * @returns {void}
+     */
+    reset(e?: Event): void;
+}
+import { Component } from "@base-framework/base";

package/dist/types/utils/scaling/image-scaler/element-scaler.d.ts

@@ -0,0 +1,72 @@
+/**
+ * ElementScaler
+ *
+ * Handles scaling and positioning of a DOM element within its container.
+ *
+ * @class
+ */
+export class ElementScaler {
+    /**
+     * Creates an instance of ElementScaler.
+     *
+     * @constructor
+     * @param {HTMLElement} element - The DOM element to scale.
+     */
+    constructor(element: HTMLElement);
+    /** @type {HTMLElement} */
+    element: HTMLElement;
+    /** @type {DOMRect|null} */
+    elementBoundingBox: DOMRect | null;
+    /** @type {HTMLElement|null} */
+    container: HTMLElement | null;
+    /** @type {{width: number, height: number, top: number, left: number}} */
+    containerSize: {
+        width: number;
+        height: number;
+        top: number;
+        left: number;
+    };
+    /**
+     * Initializes the scaling behavior by removing margins
+     * and triggering a resize check.
+     *
+     * @returns {void}
+     */
+    setup(): void;
+    /**
+     * Removes all margin from the element (top/right/bottom/left).
+     *
+     * @returns {void}
+     */
+    removeMargin(): void;
+    /**
+     * Gets the current bounding box of the element.
+     *
+     * @returns {DOMRect|null} The bounding box or null if not set.
+     */
+    getSize(): DOMRect | null;
+    /**
+     * Calculates and caches the bounding client rect for the element.
+     *
+     * @returns {void}
+     */
+    setBoundingBox(): void;
+    /**
+     * Applies translation and scaling (width/height) to the element.
+     *
+     * @param {number} x - The horizontal position (left).
+     * @param {number} y - The vertical position (top).
+     * @param {number} scale - Scale factor (e.g., 1.0 = 100%, 0.5 = 50%).
+     * @returns {{width: number, height: number}} The new width and height after scaling.
+     */
+    transform(x: number, y: number, scale: number): {
+        width: number;
+        height: number;
+    };
+    /**
+     * Updates internal bounding boxes for both the element and its container.
+     *
+     * @returns {void}
+     */
+    resize(): void;
+}

package/dist/types/utils/scaling/image-scaler/event-controller.d.ts

@@ -0,0 +1,204 @@
+/**
+ * EventController
+ *
+ * Manages pointer and gesture events for a given parent controller and container element.
+ *
+ * @class
+ */
+export class EventController {
+    /**
+     * Creates an EventController instance.
+     *
+     * @constructor
+     * @param {object} parent - The parent object (ImageScaler) that handles actions.
+     * @param {HTMLElement} container - The DOM element to attach events to.
+     */
+    constructor(parent: object, container: HTMLElement);
+    /** @type {object} */
+    parent: object;
+    /** @type {HTMLElement} */
+    container: HTMLElement;
+    /** @type {{x: number, y: number, status: string}} */
+    pointer: {
+        x: number;
+        y: number;
+        status: string;
+    };
+    /**
+     * Initializes event setup.
+     *
+     * @returns {void}
+     */
+    setup(): void;
+    /**
+     * Removes all event listeners.
+     *
+     * @returns {void}
+     */
+    remove(): void;
+    /**
+     * Creates and binds all required event listeners.
+     *
+     * @returns {void}
+     */
+    setupEvents(): void;
+    addEvents: () => void;
+    removeEvents: () => void;
+    /**
+     * Handles mouse wheel or pinch events.
+     *
+     * @param {number} delta - The wheel direction (positive or negative).
+     * @param {Event} e - The associated event.
+     * @returns {void}
+     */
+    wheel(delta: number, e: Event): void;
+    /**
+     * Extracts the position from mouse or touch events and updates `this.pointer`.
+     *
+     * @param {Event} e - The event object.
+     * @returns {void}
+     */
+    getEventPosition(e: Event): void;
+    /**
+     * Called when the pointer goes down (mouse/touch).
+     *
+     * @param {Event} e - The associated event.
+     * @returns {void}
+     */
+    pointerDown(e: Event): void;
+    /**
+     * Called when the pointer is released.
+     *
+     * @param {Event} e - The associated event.
+     * @returns {void}
+     */
+    pointerUp(e: Event): void;
+    /**
+     * Handles window resize actions.
+     *
+     * @returns {void}
+     */
+    resize(): void;
+    /**
+     * Tracks and measures distances between touches for pinch gestures.
+     */
+    pinchTracker: {
+        /** @type {number|null} */
+        previousDistance: number | null;
+        /** @type {number|null} */
+        currentDistance: number | null;
+        /**
+         * Calculates Euclidean distance between two points.
+         *
+         * @param {number} x1
+         * @param {number} y1
+         * @param {number} x2
+         * @param {number} y2
+         * @returns {number}
+         */
+        distance(x1: number, y1: number, x2: number, y2: number): number;
+        /**
+         * If currentDistance is set, store it as previousDistance.
+         *
+         * @returns {void}
+         */
+        setPreviousDistance(): void;
+        /**
+         * Sets the current distance between two touch points.
+         *
+         * @param {object} touch1
+         * @param {object} touch2
+         * @returns {void}
+         */
+        setCurrentDistance(touch1: object, touch2: object): void;
+        /**
+         * Updates currentDistance and keeps track of the previous distance.
+         *
+         * @param {object} touch1
+         * @param {object} touch2
+         * @returns {number} The updated current distance.
+         */
+        updateCurrentDistance(touch1: object, touch2: object): number;
+        /**
+         * Determines the scale direction (zoom in/out) based on distance changes.
+         *
+         * @param {object} touch1
+         * @param {object} touch2
+         * @returns {number} 1 for zoom in, -1 for zoom out, 0 if below threshold.
+         */
+        getScale(touch1: object, touch2: object): number;
+        /**
+         * Resets the distance measurements.
+         *
+         * @returns {void}
+         */
+        reset(): void;
+    };
+    /**
+     * Extracts all touches from the event object.
+     *
+     * @param {Event} e - The touch event.
+     * @returns {Array<object>} Array of touch points.
+     */
+    getTouches(e: Event): Array<object>;
+    /**
+     * Calculates the midpoint (center) between two sets of coordinates.
+     *
+     * @param {number} x1
+     * @param {number} y1
+     * @param {number} x2
+     * @param {number} y2
+     * @returns {{x: number, y: number}} The center coordinates.
+     */
+    getCenter(x1: number, y1: number, x2: number, y2: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Attempts a pinch gesture if two touches are present.
+     *
+     * @param {Event} e - The touch event.
+     * @returns {void}
+     */
+    pinch(e: Event): void;
+    /**
+     * Creates a coordinate object from x/y.
+     *
+     * @param {number} eX
+     * @param {number} eY
+     * @returns {{x: number, y: number}}
+     */
+    getPosition(eX: number, eY: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Moves pointer coordinates to the midpoint of two touches for pinch usage.
+     *
+     * @param {Touch} touch1
+     * @param {Touch} touch2
+     * @returns {void}
+     */
+    centerMousePinch(touch1: Touch, touch2: Touch): void;
+    /**
+     * Called on a rotate gesture (currently not used).
+     *
+     * @param {Event} e - The associated event.
+     * @returns {void}
+     */
+    rotate(e: Event): void;
+    /**
+     * Checks if the event is a multi-touch gesture. If yes, performs pinch logic.
+     *
+     * @param {Event} e - The event object.
+     * @returns {boolean} True if it was a gesture (pinch); false otherwise.
+     */
+    isGesture(e: Event): boolean;
+    /**
+     * Called when the pointer moves (mouse/touch) but might also detect pinch.
+     *
+     * @param {Event} e - The associated event.
+     * @returns {void}
+     */
+    pointerMove(e: Event): void;
+}

package/dist/types/utils/scaling/image-scaler/image-scaler.d.ts

@@ -0,0 +1,150 @@
+/**
+ * ImageScaler
+ *
+ * Handles scaling, panning, and zooming for an image using ElementScaler.
+ *
+ * @class
+ */
+export class ImageScaler {
+    /**
+     * Creates an instance of ImageScaler.
+     *
+     * @constructor
+     * @param {HTMLImageElement} element - The image element to scale.
+     */
+    constructor(element: HTMLImageElement);
+    /** @type {ElementScaler} */
+    elementScaler: ElementScaler;
+    /** @type {number} */
+    scale: number;
+    /** @type {boolean} */
+    panning: boolean;
+    /** @type {EventController|null} */
+    events: EventController | null;
+    /** @type {{x: number, y: number}} */
+    start: {
+        x: number;
+        y: number;
+    };
+    /** @type {{x: number, y: number}} */
+    delta: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Initializes event handling and centers the image.
+     *
+     * @returns {void}
+     */
+    setup(): void;
+    /**
+     * Removes all event bindings.
+     *
+     * @returns {void}
+     */
+    remove(): void;
+    /**
+     * Invokes a method on this class by name, passing event/data.
+     *
+     * @param {string} action - The method name to call.
+     * @param {Event} e - The associated event object.
+     * @param {*} [data] - Additional data passed to the method.
+     * @returns {void}
+     */
+    callAction(action: string, e: Event, data?: any): void;
+    /**
+     * Sets up the event controller for the image.
+     *
+     * @returns {void}
+     */
+    setupEvents(): void;
+    /**
+     * Calculates an initial scale based on the element's offsetWidth vs. naturalWidth.
+     *
+     * @param {HTMLImageElement} element - The image element.
+     * @returns {number} The initial scale factor.
+     */
+    getImageScale(element: HTMLImageElement): number;
+    /**
+     * Gets the offset position of the pointer, adjusted by scale and delta.
+     *
+     * @param {Event} e - The associated event object.
+     * @returns {{x: number, y: number}} The pointer offset without scale.
+     */
+    getOffset(e: Event): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Transforms the element (x, y, scale) and then re-centers it if needed.
+     *
+     * @param {number} x - The new left offset.
+     * @param {number} y - The new top offset.
+     * @param {number} scale - The scale factor.
+     * @returns {void}
+     */
+    scaleElement(x: number, y: number, scale: number): void;
+    /**
+     * Attempts to center the scaled element within its container, respecting boundaries.
+     *
+     * @param {number} [width] - Width of the scaled element.
+     * @param {number} [height] - Height of the scaled element.
+     * @returns {void}
+     */
+    center(width?: number, height?: number): void;
+    /** @type {number} Minimum allowed scale factor. */
+    minScale: number;
+    /**
+     * Updates the current scale (zoom) value based on scroll delta.
+     *
+     * @param {number} delta - Positive = zoom in, negative = zoom out.
+     * @returns {number} The updated scale factor.
+     */
+    updateScale(delta: number): number;
+    /**
+     * Returns the pointer position relative to the container.
+     *
+     * @returns {{x: number, y: number}} The pointer coordinates.
+     */
+    getPointerPosition(): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Called when the user presses down on the pointer (mouse/touch).
+     *
+     * @param {Event} e - The associated event object.
+     * @returns {void}
+     */
+    pointerDown(e: Event): void;
+    /**
+     * Called when the user moves the pointer (mouse/touch).
+     *
+     * @param {Event} e - The associated event object.
+     * @returns {void}
+     */
+    pointerMove(e: Event): void;
+    /**
+     * Called when the user releases the pointer (mouse/touch).
+     *
+     * @param {Event} e - The associated event object.
+     * @returns {void}
+     */
+    pointerUp(e: Event): void;
+    /**
+     * Recalculates container/element bounding sizes, e.g., on window resize.
+     *
+     * @returns {void}
+     */
+    resize(): void;
+    /**
+     * Called on pinch gesture (usually from a wheel or multi-touch).
+     *
+     * @param {Event} e - The associated event.
+     * @param {number} delta - Positive = zoom in, negative = zoom out.
+     * @returns {void}
+     */
+    pinch(e: Event, delta: number): void;
+}
+import { ElementScaler } from "./element-scaler.js";
+import { EventController } from "./event-controller.js";

package/dist/utils.es.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "0.0.15",
+	"version": "0.0.19",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {
@@ -68,6 +68,10 @@
 			"import": "./dist/organisms.es.js",
 			"require": "./dist/organisms.cjs"
 		},
+		"./utils": {
+			"import": "./dist/utils.es.js",
+			"require": "./dist/utils.cjs"
+		},
 		"./pages": {
 			"import": "./dist/pages.es.js",
 			"require": "./dist/pages.cjs"

package/dist/style.css

@@ -1 +0,0 @@
-.item{cursor:auto}