juxscript 1.1.30 → 1.1.32

package/index.d.ts

@@ -27,6 +27,7 @@ import { menu } from './lib/components/menu.js';
 import { modal } from './lib/components/modal.js';
 import { nav } from './lib/components/nav.js';
 import { paragraph } from './lib/components/paragraph.js';
+import { pen } from './lib/components/pen.js';
 import { progress } from './lib/components/progress.js';
 import { radio } from './lib/components/radio.js';
 import { script } from './lib/components/script.js';
@@ -74,6 +75,7 @@ export declare const jux: {
     modal: typeof modal;
     nav: typeof nav;
     paragraph: typeof paragraph;
+    pen: typeof pen;
     progress: typeof progress;
     radio: typeof radio;
     req: import("./lib/components/req.js").Req;

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -27,6 +27,7 @@ import { menu } from './lib/components/menu.js';
 import { modal } from './lib/components/modal.js';
 import { nav } from './lib/components/nav.js';
 import { paragraph } from './lib/components/paragraph.js';
+import { pen } from './lib/components/pen.js'; // ✅ Import pen
 import { progress } from './lib/components/progress.js';
 import { radio } from './lib/components/radio.js';
 import { req } from './lib/components/req.js';
@@ -77,6 +78,7 @@ export const jux = {
     modal,
     nav,
     paragraph,
+    pen,
     progress,
     radio,
     req,

package/lib/components/pen.d.ts

@@ -0,0 +1,125 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+export interface PenShape {
+    id: string;
+    type: 'line' | 'rectangle' | 'circle' | 'text';
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    radius?: number;
+    text?: string;
+    color?: string;
+    fillColor?: string;
+    strokeWidth?: number;
+    connectedTo?: string[];
+}
+export interface PenConnection {
+    from: string;
+    to: string;
+    color?: string;
+    strokeWidth?: number;
+    dashed?: boolean;
+}
+export interface PenOptions {
+    width?: number | string;
+    height?: number | string;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    border?: string;
+    text?: string;
+    radius?: number;
+    gridEnabled?: boolean;
+    gridSize?: number;
+    gridColor?: string;
+    style?: string;
+    class?: string;
+}
+type PenState = BaseState & {
+    width: number | string;
+    height: number | string;
+    backgroundColor: string;
+    backgroundImage: string;
+    border: string;
+    text: string;
+    radius: number;
+    gridEnabled: boolean;
+    gridSize: number;
+    gridColor: string;
+    shapes: PenShape[];
+    connections: PenConnection[];
+};
+export declare class Pen extends BaseComponent<PenState> {
+    private _canvas;
+    private _ctx;
+    private _animationFrame?;
+    constructor(id: string, options?: PenOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    update(prop: string, value: any): void;
+    width(value: number | string): this;
+    height(value: number | string): this;
+    backgroundColor(value: string): this;
+    backgroundImage(value: string): this;
+    border(value: string): this;
+    text(value: string): this;
+    radius(value: number): this;
+    grid(enabled: boolean, size?: number, color?: string): this;
+    /**
+     * Add a line shape
+     */
+    drawLine(x1: number, y1: number, x2: number, y2: number, options?: Partial<PenShape>): this;
+    /**
+     * Add a rectangle shape
+     */
+    drawRect(x: number, y: number, width: number, height: number, options?: Partial<PenShape>): this;
+    /**
+     * Add a circle shape
+     */
+    drawCircle(x: number, y: number, radius: number, options?: Partial<PenShape>): this;
+    /**
+     * Add text to canvas
+     */
+    drawText(x: number, y: number, text: string, options?: Partial<PenShape>): this;
+    /**
+     * Connect two shapes with a line
+     */
+    connect(fromId: string, toId: string, options?: Partial<PenConnection>): this;
+    /**
+     * Remove a shape by ID
+     */
+    removeShape(id: string): this;
+    /**
+     * Clear all shapes and connections
+     */
+    clear(): this;
+    /**
+     * Get shape by ID
+     */
+    getShape(id: string): PenShape | undefined;
+    /**
+     * Get all shapes
+     */
+    getShapes(): PenShape[];
+    /**
+     * Export canvas as data URL
+     */
+    toDataURL(type?: string): string;
+    /**
+     * Download canvas as image
+     */
+    download(filename?: string): this;
+    private _updateCanvasSize;
+    private _redraw;
+    private _drawContent;
+    private _drawGrid;
+    private _drawShape;
+    private _drawConnection;
+    render(targetId?: string): this;
+    /**
+     * Cleanup on destroy
+     */
+    destroy(): void;
+}
+export declare function pen(id: string, options?: PenOptions): Pen;
+export {};
+//# sourceMappingURL=pen.d.ts.map

package/lib/components/pen.d.ts.map

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

package/lib/components/pen.js

@@ -0,0 +1,443 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['draw', 'shapeAdd', 'shapeRemove', 'connectionAdd'];
+export class Pen extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            width: options.width ?? '100%',
+            height: options.height ?? 400,
+            backgroundColor: options.backgroundColor ?? '#ffffff',
+            backgroundImage: options.backgroundImage ?? '',
+            border: options.border ?? '1px solid #e5e7eb',
+            text: options.text ?? '',
+            radius: options.radius ?? 0,
+            gridEnabled: options.gridEnabled ?? false,
+            gridSize: options.gridSize ?? 20,
+            gridColor: options.gridColor ?? '#f0f0f0',
+            shapes: [],
+            connections: [],
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        this._canvas = null;
+        this._ctx = null;
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * REACTIVE UPDATE
+     * ═════════════════════════════════════════════════════════════════ */
+    update(prop, value) {
+        super.update(prop, value);
+        if (!this._canvas || !this._ctx)
+            return;
+        switch (prop) {
+            case 'backgroundColor':
+                this._redraw();
+                break;
+            case 'backgroundImage':
+                this._redraw();
+                break;
+            case 'text':
+                this._redraw();
+                break;
+            case 'gridEnabled':
+            case 'gridSize':
+            case 'gridColor':
+                this._redraw();
+                break;
+            case 'shapes':
+            case 'connections':
+                this._redraw();
+                break;
+        }
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    width(value) {
+        this.state.width = value;
+        if (this._canvas) {
+            this._canvas.style.width = typeof value === 'number' ? `${value}px` : value;
+            this._updateCanvasSize();
+        }
+        return this;
+    }
+    height(value) {
+        this.state.height = value;
+        if (this._canvas) {
+            this._canvas.style.height = typeof value === 'number' ? `${value}px` : value;
+            this._updateCanvasSize();
+        }
+        return this;
+    }
+    backgroundColor(value) {
+        this.state.backgroundColor = value;
+        return this;
+    }
+    backgroundImage(value) {
+        this.state.backgroundImage = value;
+        return this;
+    }
+    border(value) {
+        this.state.border = value;
+        if (this._canvas) {
+            this._canvas.style.border = value;
+        }
+        return this;
+    }
+    text(value) {
+        this.state.text = value;
+        return this;
+    }
+    radius(value) {
+        this.state.radius = value;
+        if (this._canvas) {
+            this._canvas.style.borderRadius = `${value}px`;
+        }
+        return this;
+    }
+    grid(enabled, size, color) {
+        this.state.gridEnabled = enabled;
+        if (size !== undefined)
+            this.state.gridSize = size;
+        if (color !== undefined)
+            this.state.gridColor = color;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * DRAWING API
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Add a line shape
+     */
+    drawLine(x1, y1, x2, y2, options = {}) {
+        const shape = {
+            id: options.id || `line-${Date.now()}-${Math.random()}`,
+            type: 'line',
+            x: x1,
+            y: y1,
+            width: x2 - x1,
+            height: y2 - y1,
+            color: options.color || '#000000',
+            strokeWidth: options.strokeWidth || 2,
+            connectedTo: options.connectedTo || []
+        };
+        this.state.shapes = [...this.state.shapes, shape];
+        this._triggerCallback('shapeAdd', shape);
+        return this;
+    }
+    /**
+     * Add a rectangle shape
+     */
+    drawRect(x, y, width, height, options = {}) {
+        const shape = {
+            id: options.id || `rect-${Date.now()}-${Math.random()}`,
+            type: 'rectangle',
+            x,
+            y,
+            width,
+            height,
+            color: options.color || '#000000',
+            fillColor: options.fillColor,
+            strokeWidth: options.strokeWidth || 2,
+            connectedTo: options.connectedTo || []
+        };
+        this.state.shapes = [...this.state.shapes, shape];
+        this._triggerCallback('shapeAdd', shape);
+        return this;
+    }
+    /**
+     * Add a circle shape
+     */
+    drawCircle(x, y, radius, options = {}) {
+        const shape = {
+            id: options.id || `circle-${Date.now()}-${Math.random()}`,
+            type: 'circle',
+            x,
+            y,
+            radius,
+            color: options.color || '#000000',
+            fillColor: options.fillColor,
+            strokeWidth: options.strokeWidth || 2,
+            connectedTo: options.connectedTo || []
+        };
+        this.state.shapes = [...this.state.shapes, shape];
+        this._triggerCallback('shapeAdd', shape);
+        return this;
+    }
+    /**
+     * Add text to canvas
+     */
+    drawText(x, y, text, options = {}) {
+        const shape = {
+            id: options.id || `text-${Date.now()}-${Math.random()}`,
+            type: 'text',
+            x,
+            y,
+            text,
+            color: options.color || '#000000',
+            connectedTo: options.connectedTo || []
+        };
+        this.state.shapes = [...this.state.shapes, shape];
+        this._triggerCallback('shapeAdd', shape);
+        return this;
+    }
+    /**
+     * Connect two shapes with a line
+     */
+    connect(fromId, toId, options = {}) {
+        const connection = {
+            from: fromId,
+            to: toId,
+            color: options.color || '#666666',
+            strokeWidth: options.strokeWidth || 1,
+            dashed: options.dashed || false
+        };
+        this.state.connections = [...this.state.connections, connection];
+        // Update connected shapes
+        const fromShape = this.state.shapes.find(s => s.id === fromId);
+        if (fromShape && !fromShape.connectedTo?.includes(toId)) {
+            fromShape.connectedTo = [...(fromShape.connectedTo || []), toId];
+        }
+        this._triggerCallback('connectionAdd', connection);
+        return this;
+    }
+    /**
+     * Remove a shape by ID
+     */
+    removeShape(id) {
+        this.state.shapes = this.state.shapes.filter(s => s.id !== id);
+        this.state.connections = this.state.connections.filter(c => c.from !== id && c.to !== id);
+        this._triggerCallback('shapeRemove', id);
+        return this;
+    }
+    /**
+     * Clear all shapes and connections
+     */
+    clear() {
+        this.state.shapes = [];
+        this.state.connections = [];
+        return this;
+    }
+    /**
+     * Get shape by ID
+     */
+    getShape(id) {
+        return this.state.shapes.find(s => s.id === id);
+    }
+    /**
+     * Get all shapes
+     */
+    getShapes() {
+        return this.state.shapes;
+    }
+    /**
+     * Export canvas as data URL
+     */
+    toDataURL(type = 'image/png') {
+        return this._canvas?.toDataURL(type) || '';
+    }
+    /**
+     * Download canvas as image
+     */
+    download(filename = 'pen-drawing.png') {
+        const dataURL = this.toDataURL();
+        const link = document.createElement('a');
+        link.download = filename;
+        link.href = dataURL;
+        link.click();
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE RENDERING
+     * ═════════════════════════════════════════════════════════════════ */
+    _updateCanvasSize() {
+        if (!this._canvas)
+            return;
+        const rect = this._canvas.getBoundingClientRect();
+        this._canvas.width = rect.width;
+        this._canvas.height = rect.height;
+        this._redraw();
+    }
+    _redraw() {
+        if (!this._ctx || !this._canvas)
+            return;
+        const { width, height } = this._canvas;
+        // Clear canvas
+        this._ctx.clearRect(0, 0, width, height);
+        // Draw background
+        if (this.state.backgroundColor) {
+            this._ctx.fillStyle = this.state.backgroundColor;
+            this._ctx.fillRect(0, 0, width, height);
+        }
+        // Draw background image
+        if (this.state.backgroundImage) {
+            const img = new Image();
+            img.src = this.state.backgroundImage;
+            img.onload = () => {
+                this._ctx?.drawImage(img, 0, 0, width, height);
+                this._drawContent();
+            };
+        }
+        else {
+            this._drawContent();
+        }
+    }
+    _drawContent() {
+        if (!this._ctx || !this._canvas)
+            return;
+        // Draw grid
+        if (this.state.gridEnabled) {
+            this._drawGrid();
+        }
+        // Draw connections first (under shapes)
+        this.state.connections.forEach(conn => this._drawConnection(conn));
+        // Draw shapes
+        this.state.shapes.forEach(shape => this._drawShape(shape));
+        // Draw text overlay
+        if (this.state.text) {
+            this._ctx.fillStyle = '#000000';
+            this._ctx.font = '16px sans-serif';
+            this._ctx.fillText(this.state.text, 10, 30);
+        }
+        this._triggerCallback('draw', { shapes: this.state.shapes, connections: this.state.connections });
+    }
+    _drawGrid() {
+        if (!this._ctx || !this._canvas)
+            return;
+        const { width, height } = this._canvas;
+        const { gridSize, gridColor } = this.state;
+        this._ctx.strokeStyle = gridColor;
+        this._ctx.lineWidth = 1;
+        // Vertical lines
+        for (let x = 0; x <= width; x += gridSize) {
+            this._ctx.beginPath();
+            this._ctx.moveTo(x, 0);
+            this._ctx.lineTo(x, height);
+            this._ctx.stroke();
+        }
+        // Horizontal lines
+        for (let y = 0; y <= height; y += gridSize) {
+            this._ctx.beginPath();
+            this._ctx.moveTo(0, y);
+            this._ctx.lineTo(width, y);
+            this._ctx.stroke();
+        }
+    }
+    _drawShape(shape) {
+        if (!this._ctx)
+            return;
+        this._ctx.strokeStyle = shape.color || '#000000';
+        this._ctx.lineWidth = shape.strokeWidth || 2;
+        switch (shape.type) {
+            case 'line':
+                this._ctx.beginPath();
+                this._ctx.moveTo(shape.x, shape.y);
+                this._ctx.lineTo(shape.x + (shape.width || 0), shape.y + (shape.height || 0));
+                this._ctx.stroke();
+                break;
+            case 'rectangle':
+                if (shape.fillColor) {
+                    this._ctx.fillStyle = shape.fillColor;
+                    this._ctx.fillRect(shape.x, shape.y, shape.width || 0, shape.height || 0);
+                }
+                this._ctx.strokeRect(shape.x, shape.y, shape.width || 0, shape.height || 0);
+                break;
+            case 'circle':
+                this._ctx.beginPath();
+                this._ctx.arc(shape.x, shape.y, shape.radius || 0, 0, Math.PI * 2);
+                if (shape.fillColor) {
+                    this._ctx.fillStyle = shape.fillColor;
+                    this._ctx.fill();
+                }
+                this._ctx.stroke();
+                break;
+            case 'text':
+                this._ctx.fillStyle = shape.color || '#000000';
+                this._ctx.font = '14px sans-serif';
+                this._ctx.fillText(shape.text || '', shape.x, shape.y);
+                break;
+        }
+    }
+    _drawConnection(conn) {
+        if (!this._ctx)
+            return;
+        const fromShape = this.state.shapes.find(s => s.id === conn.from);
+        const toShape = this.state.shapes.find(s => s.id === conn.to);
+        if (!fromShape || !toShape)
+            return;
+        // Calculate center points
+        const fromX = fromShape.x + (fromShape.width || fromShape.radius || 0) / 2;
+        const fromY = fromShape.y + (fromShape.height || fromShape.radius || 0) / 2;
+        const toX = toShape.x + (toShape.width || toShape.radius || 0) / 2;
+        const toY = toShape.y + (toShape.height || toShape.radius || 0) / 2;
+        this._ctx.strokeStyle = conn.color || '#666666';
+        this._ctx.lineWidth = conn.strokeWidth || 1;
+        if (conn.dashed) {
+            this._ctx.setLineDash([5, 5]);
+        }
+        this._ctx.beginPath();
+        this._ctx.moveTo(fromX, fromY);
+        this._ctx.lineTo(toX, toY);
+        this._ctx.stroke();
+        if (conn.dashed) {
+            this._ctx.setLineDash([]);
+        }
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { width, height, backgroundColor, border, radius, style, class: className } = this.state;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-pen';
+        wrapper.id = `${this._id}-wrapper`;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        const canvas = document.createElement('canvas');
+        canvas.id = this._id;
+        canvas.className = 'jux-pen-canvas';
+        canvas.style.width = typeof width === 'number' ? `${width}px` : width;
+        canvas.style.height = typeof height === 'number' ? `${height}px` : height;
+        canvas.style.backgroundColor = backgroundColor;
+        canvas.style.border = border;
+        canvas.style.borderRadius = `${radius}px`;
+        canvas.style.display = 'block';
+        this._canvas = canvas;
+        this._ctx = canvas.getContext('2d');
+        // Set initial canvas size
+        requestAnimationFrame(() => {
+            this._updateCanvasSize();
+        });
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            this._updateCanvasSize();
+        });
+        this._wireStandardEvents(wrapper);
+        this._wireAllSyncs();
+        wrapper.appendChild(canvas);
+        container.appendChild(wrapper);
+        return this;
+    }
+    /**
+     * Cleanup on destroy
+     */
+    destroy() {
+        if (this._animationFrame) {
+            cancelAnimationFrame(this._animationFrame);
+        }
+        this.remove();
+    }
+}
+export function pen(id, options = {}) {
+    return new Pen(id, options);
+}