aurum-canvas - npm Package Compare versions

Comparing version 0.0.51 to 0.0.52

package.json

 {
   "name": "aurum-canvas",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "main": "prebuilt/esnext/aurum-canvas.js",
@@ -13,6 +13,6 @@ "type": "module",
     "type": "git",
-    "url": "git+https://github.com/CyberPhoenix90/aurum-canvas"
+    "url": "git+https://github.com/CyberPhoenix90/aurum"
   },
   "dependencies": {
-    "aurumjs": "^0.9.40"
+    "aurumjs": "^0.9.50"
   },
@@ -30,3 +30,3 @@ "workspaces": [
     "prettier": "^2.2.1",
-    "typescript": "^4.3.2",
+    "typescript": "^5.6.2",
     "requirejs": "^2.3.6",
@@ -33,0 +33,0 @@ "sinon": "^9.0.3"

prebuilt/esnext/aurum-canvas.d.ts

@@ -11,2 +11,3 @@ export * from './components/canvas.js';
 export * from './components/drawables/aurum_regular_polygon.js';
+export * from './components/drawables/large_content_box.js';
 //# sourceMappingURL=aurum-canvas.d.ts.map

prebuilt/esnext/aurum-canvas.js

@@ -11,2 +11,3 @@ export * from './components/canvas.js';
 export * from './components/drawables/aurum_regular_polygon.js';
+export * from './components/drawables/large_content_box.js';
 //# sourceMappingURL=aurum-canvas.js.map

prebuilt/esnext/components/canvas.d.ts

@@ -1,20 +0,4 @@
-import { AurumElement, DataSource, Renderable, AurumComponentAPI, ReadOnlyDataSource, ClassType } from 'aurumjs';
+import { AurumComponentAPI, AurumElement, ClassType, DataSource, ReadOnlyDataSource, Renderable } from 'aurumjs';
 import { StyleType } from 'aurumjs/prebuilt/esnext/utilities/common.js';
-export interface AurumnCanvasFeatures {
-    mouseWheelZoom?: {
-        zoomIncrements: number;
-        maxZoom: number;
-        minZoom: number;
-    };
-    panning?: {
-        mouse: boolean;
-        keyboard?: {
-            upKeyCode: number;
-            rightKeyCode: number;
-            leftKeyCode: number;
-            downKeyCode: number;
-            pixelsPerFrame: number;
-        };
-    };
-}
+import { AurumnCanvasFeatures } from './canvas_feature_model.js';
 export interface AurumCanvasProps {
@@ -21,0 +5,0 @@ backgroundColor?: DataSource<string> | string;

prebuilt/esnext/components/canvas.js

@@ -1,17 +0,14 @@
-import { Aurum, DataSource, ArrayDataSource, DuplexDataSource, aurumElementModelIdentitiy, CancellationToken, EventEmitter, dsUnique, createLifeCycle, dsMap } from 'aurumjs';
-import { ComponentType } from './component_model.js';
-import { stateSymbol } from './drawables/state.js';
-import { deref } from './utilities.js';
-import { renderPath, renderRectangle, renderText, renderLine, renderQuadraticCurve, renderBezierCurve, renderElipse, renderRegularPolygon } from './rendering.js';
-import { initializeKeyboardPanningFeature, initializeMousePanningFeature, initializeZoomFeature } from './features.js';
-const renderCache = new WeakMap();
+import { Aurum, DataSource, EventEmitter, createLifeCycle, dsMap, dsUnique } from 'aurumjs';
+import { AurumOffscreenCanvas } from './offscreen_canvas.js';
 export function AurumCanvas(props, children, api) {
     const lc = createLifeCycle();
     api.synchronizeLifeCycle(lc);
-    const components = api.prerender(children, lc);
-    let pendingRerender;
-    const cancellationToken = new CancellationToken();
-    let onMouseMove = new EventEmitter();
-    let onMouseUp = new EventEmitter();
-    let onMouseDown = new EventEmitter();
+    const onMouseMove = new EventEmitter();
+    const onMouseUp = new EventEmitter();
+    const onMouseDown = new EventEmitter();
+    const onMouseClick = new EventEmitter();
+    const onKeyDown = new EventEmitter();
+    const onKeyUp = new EventEmitter();
+    const onWheel = new EventEmitter();
+    const invalidate = new EventEmitter();
     return (Aurum.factory("canvas", { onAttach: (canvas) => {
@@ -37,3 +34,3 @@ // Auto sync resolution to css size
                     if (dirty) {
-                        invalidate(canvas);
+                        invalidate.fire();
                     }
@@ -46,22 +43,5 @@ };
             }
-            if (props.features) {
-                if (!props.scale) {
-                    props.scale = new DataSource({ x: 1, y: 1 });
-                }
-                if (!props.translate) {
-                    props.translate = new DataSource({ x: 0, y: 0 });
-                }
-                if (props.features.mouseWheelZoom) {
-                    initializeZoomFeature(props, canvas);
-                }
-                if (props.features.panning?.mouse) {
-                    initializeMousePanningFeature(props, canvas);
-                }
-                if (props.features.panning?.keyboard) {
-                    initializeKeyboardPanningFeature(props, canvas);
-                }
-            }
             if (props.width instanceof DataSource) {
                 props.width.listen(() => {
-                    invalidate(canvas);
+                    invalidate.fire();
                 }, api.cancellationToken);
@@ -71,3 +51,3 @@ }
                 props.backgroundColor.listen(() => {
-                    invalidate(canvas);
+                    invalidate.fire();
                 }, api.cancellationToken);
@@ -77,10 +57,9 @@ }
                 props.height.listen(() => {
-                    invalidate(canvas);
+                    invalidate.fire();
                 }, api.cancellationToken);
             }
-            bindCanvas(canvas, components, cancellationToken);
-            render(canvas, components);
+            bindCanvas(canvas);
             if (props.translate) {
                 props.translate.transform(dsUnique(), api.cancellationToken).listen((v) => {
-                    invalidate(canvas);
+                    invalidate.fire();
                 });
@@ -90,3 +69,3 @@ }
                 props.scale.transform(dsUnique(), api.cancellationToken).listen((v) => {
-                    invalidate(canvas);
+                    invalidate.fire();
                 });
@@ -96,3 +75,2 @@ }
         }, onDetach: () => {
-            cancellationToken.cancel();
             props.onDetach?.();
@@ -104,328 +82,40 @@ }, style: props.style, class: props.class, width: typeof props.width !== 'object'
             : props.height.transform(dsMap((v) => v.toString())) }));
-    function bindCanvas(canvas, components, cancellationToken) {
-        cancellationToken.registerDomEvent(canvas, 'mouseleave', (e) => {
+    function bindCanvas(canvas) {
+        api.cancellationToken.registerDomEvent(canvas, 'mouseleave', (e) => {
             onMouseMove.fire(e);
         });
-        cancellationToken.registerDomEvent(canvas, 'mousemove', (e) => {
+        api.cancellationToken.registerDomEvent(canvas, 'mousemove', (e) => {
             onMouseMove.fire(e);
         });
-        cancellationToken.registerDomEvent(canvas, 'mousedown', (e) => {
+        api.cancellationToken.registerDomEvent(canvas, 'mousedown', (e) => {
             onMouseDown.fire(e);
         });
-        cancellationToken.registerDomEvent(canvas, 'mouseup', (e) => {
-            onMouseUp.fire(e);
+        api.cancellationToken.registerDomEvent(canvas, 'mouseup', (e) => {
+            onMouseClick.fire(e);
         });
-        bind(canvas, components, undefined, cancellationToken);
+        api.cancellationToken.registerDomEvent(window, 'keydown', (e) => {
+            onKeyDown.fire(e);
+        });
+        api.cancellationToken.registerDomEvent(window, 'keyup', (e) => {
+            onKeyUp.fire(e);
+        });
+        api.cancellationToken.registerDomEvent(canvas, 'wheel', (e) => {
+            onWheel.fire(e);
+        });
+        AurumOffscreenCanvas({
+            canvas: canvas,
+            onMouseMove,
+            onMouseDown,
+            onMouseUp,
+            onKeyDown,
+            onMouseClick,
+            onKeyUp,
+            onWheel,
+            translate: props.translate,
+            scale: props.scale,
+            features: props.features,
+            invalidate
+        }, children, api);
     }
-    function isOnTopOf(e, target, context) {
-        if (!target.renderedState) {
-            return false;
-        }
-        let x = e.offsetX - (props.translate?.value.x ? props.translate?.value.x * (props.scale?.value?.x ?? 1) : 0);
-        let y = e.offsetY - (props.translate?.value.y ? props.translate?.value.y * (props.scale?.value?.x ?? 1) : 0);
-        if (props.scale) {
-            x /= props.scale.value.x;
-            y /= props.scale.value.y;
-        }
-        if (target.type === ComponentType.TEXT) {
-            const label = target;
-            const size = deref(label.fontSize) ?? 16;
-            if (!label.textBaseline) {
-                y += size;
-            }
-            else {
-                switch (label.textBaseline) {
-                    case 'bottom':
-                        y += size;
-                        break;
-                    case 'middle':
-                        y += size / 2;
-                        break;
-                    case 'alphabetic':
-                        y += size;
-                        break;
-                }
-            }
-        }
-        switch (target.type) {
-            case ComponentType.IMAGE:
-            case ComponentType.RECTANGLE:
-            case ComponentType.TEXT:
-                return (x >= target.renderedState.x &&
-                    y >= target.renderedState.y &&
-                    x <= target.renderedState.x + target.renderedState.width * (props.scale?.value.x ?? 1) &&
-                    y <= target.renderedState.y + target.renderedState.height * (props.scale?.value.y ?? 1));
-            case ComponentType.ELIPSE:
-            case ComponentType.REGULAR_POLYGON:
-                if (!target.renderedState.path) {
-                    return false;
-                }
-                else {
-                    return context.isPointInPath(target.renderedState.path, x, y);
-                }
-            default:
-                if (!target.renderedState.path) {
-                    return false;
-                }
-                else {
-                    return context.isPointInPath(target.renderedState.path, x - target.renderedState.x, y - target.renderedState.y);
-                }
-        }
-    }
-    function bind(canvas, children, parent, cancellationToken) {
-        for (const child of children) {
-            if (child instanceof ArrayDataSource) {
-                child.listen(() => invalidate(canvas), cancellationToken);
-                const tokenMap = new Map();
-                child.listenAndRepeat((change) => {
-                    switch (change.operation) {
-                        case 'add':
-                            for (const item of change.items) {
-                                tokenMap.set(item, new CancellationToken());
-                                bindDynamicEntity(item, child, tokenMap.get(item));
-                            }
-                            break;
-                        case 'remove':
-                            for (const item of change.items) {
-                                tokenMap.get(item).cancel();
-                                tokenMap.delete(item);
-                            }
-                            break;
-                        case 'replace':
-                            tokenMap.get(change.target).cancel();
-                            tokenMap.delete(change.target);
-                            tokenMap.set(change.items[0], new CancellationToken());
-                            bindDynamicEntity(change.items[0], child, tokenMap.get(change.items[0]));
-                            break;
-                        case 'swap':
-                            break;
-                        case 'merge':
-                            throw new Error('Operation not supported');
-                    }
-                });
-                continue;
-            }
-            if (child instanceof DataSource || child instanceof DuplexDataSource) {
-                child.listen(() => invalidate(canvas), cancellationToken);
-                let bindToken;
-                let value;
-                child.listenAndRepeat((newValue) => {
-                    if (value !== newValue) {
-                        value = newValue;
-                        if (bindToken) {
-                            bindToken.cancel();
-                        }
-                        bindToken = new CancellationToken();
-                        bindDynamicEntity(value, child, bindToken);
-                    }
-                });
-                continue;
-            }
-            if (child[stateSymbol]) {
-                if (!parent) {
-                    throw new Error('Cannot use <State> nodes at root level');
-                }
-                parent.animations.push(child);
-                continue;
-            }
-            if ('onMouseEnter' in child || 'onMouseLeave' in child) {
-                let isInside = false;
-                onMouseMove.subscribe((e) => {
-                    if (isOnTopOf(e, child, canvas.getContext('2d'))) {
-                        if (!isInside && child.onMouseEnter) {
-                            child.onMouseEnter(e, child);
-                        }
-                        isInside = true;
-                    }
-                    else {
-                        if (isInside && child.onMouseLeave) {
-                            child.onMouseLeave(e, child);
-                        }
-                        isInside = false;
-                    }
-                }, cancellationToken);
-            }
-            for (const key in child) {
-                if (key === 'onMouseUp') {
-                    onMouseUp.subscribe((e) => {
-                        if (isOnTopOf(e, child, canvas.getContext('2d'))) {
-                            child.onMouseUp(e, child);
-                        }
-                    }, cancellationToken);
-                    continue;
-                }
-                if (key === 'onMouseDown') {
-                    onMouseUp.subscribe((e) => {
-                        if (isOnTopOf(e, child, canvas.getContext('2d'))) {
-                            child.onMouseUp(e, child);
-                        }
-                    }, cancellationToken);
-                    continue;
-                }
-                if (key === 'onMouseClick') {
-                    onMouseUp.subscribe((e) => {
-                        if (isOnTopOf(e, child, canvas.getContext('2d'))) {
-                            child.onMouseClick(e, child);
-                        }
-                    }, cancellationToken);
-                    continue;
-                }
-                if (child[key] instanceof DataSource) {
-                    let value = child[key].value;
-                    let lastState;
-                    if (key === 'state') {
-                        const value = deref(child[key]);
-                        lastState = value;
-                        child.animationStates = child.animations.filter((e) => e.id === value);
-                        child.animationTime = Date.now();
-                    }
-                    child[key].listen((newValue) => {
-                        if (value !== newValue) {
-                            value = newValue;
-                            if (key === 'state') {
-                                if (lastState !== newValue) {
-                                    lastState = newValue;
-                                    child.animationStates = child.animations.filter((e) => e.id === newValue);
-                                    child.animationTime = Date.now();
-                                    invalidate(canvas);
-                                }
-                            }
-                            else {
-                                invalidate(canvas);
-                            }
-                        }
-                    }, cancellationToken);
-                }
-            }
-            bind(canvas, child.children, child, cancellationToken);
-        }
-        function bindDynamicEntity(value, parent, bindToken) {
-            const arrayedValue = Array.isArray(value) ? value : [value];
-            const lc = createLifeCycle();
-            const renderResult = [];
-            for (const piece of arrayedValue) {
-                if (!piece) {
-                    continue;
-                }
-                if (!renderCache.has(piece)) {
-                    renderCache.set(piece, api.prerender(piece, lc));
-                }
-                renderResult.push(renderCache.get(piece));
-            }
-            bind(canvas, renderResult, parent, bindToken);
-            lc.onAttach();
-            bindToken.addCancellable(() => lc.onDetach());
-            invalidate(canvas);
-        }
-    }
-    function invalidate(canvas) {
-        if (!pendingRerender) {
-            pendingRerender = requestAnimationFrame(() => {
-                pendingRerender = undefined;
-                if (canvas.isConnected) {
-                    render(canvas, components);
-                }
-            });
-        }
-    }
-    function render(canvas, components) {
-        const context = canvas.getContext('2d');
-        if (props.backgroundColor === undefined) {
-            context.clearRect(0, 0, canvas.width, canvas.height);
-        }
-        else {
-            context.fillStyle = deref(props.backgroundColor);
-            context.fillRect(0, 0, canvas.width, canvas.height);
-        }
-        applyContextTransformation(context);
-        for (const child of components) {
-            renderChild(context, child, 0, 0);
-        }
-        unapplyContextTransformation(context);
-    }
-    function unapplyContextTransformation(context) {
-        if (props.scale || props.translate) {
-            context.restore();
-        }
-    }
-    function applyContextTransformation(context) {
-        if (props.scale || props.translate) {
-            context.save();
-            if (props.scale?.value) {
-                context.scale(props.scale.value.x, props.scale.value.y);
-            }
-            if (props.translate?.value) {
-                context.translate(props.translate.value.x, props.translate.value.y);
-            }
-        }
-    }
-    function renderChild(context, child, offsetX, offsetY) {
-        if (child === undefined || child === null) {
-            return;
-        }
-        if (Array.isArray(child)) {
-            for (const item of child) {
-                renderChild(context, item, offsetX, offsetY);
-            }
-            return;
-        }
-        if (child[stateSymbol]) {
-            return;
-        }
-        if (child[aurumElementModelIdentitiy]) {
-            if (!renderCache.has(child)) {
-                throw new Error('illegal state: unrendered aurum element made it into the canvas render phase');
-            }
-            child = renderCache.get(child);
-        }
-        if (child instanceof ArrayDataSource) {
-            for (const node of child.getData()) {
-                renderChild(context, node, offsetX, offsetY);
-            }
-            return;
-        }
-        if (child instanceof DataSource || child instanceof DuplexDataSource) {
-            renderChild(context, child.value, offsetX, offsetY);
-            return;
-        }
-        context.save();
-        let idle;
-        switch (child.type) {
-            case ComponentType.PATH:
-                idle = renderPath(context, child, offsetX, offsetY);
-                break;
-            case ComponentType.REGULAR_POLYGON:
-                idle = renderRegularPolygon(context, child, offsetX, offsetY);
-                break;
-            case ComponentType.RECTANGLE:
-                idle = renderRectangle(context, child, offsetX, offsetY);
-                break;
-            case ComponentType.TEXT:
-                idle = renderText(context, child, offsetX, offsetY);
-                break;
-            case ComponentType.LINE:
-                idle = renderLine(context, child, offsetX, offsetY);
-                break;
-            case ComponentType.QUADRATIC_CURVE:
-                idle = renderQuadraticCurve(context, child, offsetX, offsetY);
-                break;
-            case ComponentType.BEZIER_CURVE:
-                idle = renderBezierCurve(context, child, offsetX, offsetY);
-                break;
-            case ComponentType.ELIPSE:
-                idle = renderElipse(context, child, offsetX, offsetY);
-                break;
-            case ComponentType.GROUP:
-                idle = true;
-                break;
-        }
-        if (!idle) {
-            invalidate(context.canvas);
-        }
-        for (const subChild of child.children) {
-            renderChild(context, subChild, deref(child.x) + offsetX, deref(child.y) + offsetY);
-        }
-        context.restore();
-    }
 }
 //# sourceMappingURL=canvas.js.map

prebuilt/esnext/components/common_props.d.ts

@@ -50,9 +50,18 @@ import { DataSource, ReadOnlyDataSource } from 'aurumjs';
 export interface InteractionProps {
-    onMouseEnter?(e: MouseEvent, target: ComponentModel): void;
-    onMouseLeave?(e: MouseEvent, target: ComponentModel): void;
-    onMouseDown?(e: MouseEvent, target: ComponentModel): void;
-    onMouseUp?(e: MouseEvent, target: ComponentModel): void;
-    onMouseClick?(e: MouseEvent, target: ComponentModel): void;
-    onMouseMove?(e: MouseEvent, target: ComponentModel): void;
+    onMouseEnter?(e: SimplifiedMouseEvent, target: ComponentModel): void;
+    onMouseLeave?(e: SimplifiedMouseEvent, target: ComponentModel): void;
+    onMouseDown?(e: SimplifiedMouseEvent, target: ComponentModel): void;
+    onMouseUp?(e: SimplifiedMouseEvent, target: ComponentModel): void;
+    onMouseClick?(e: SimplifiedMouseEvent, target: ComponentModel): void;
+    onMouseMove?(e: SimplifiedMouseEvent, target: ComponentModel): void;
 }
+export interface SimplifiedMouseEvent {
+    clientX: number;
+    clientY: number;
+    offsetX: number;
+    offsetY: number;
+}
+export interface SimplifiedWheelEvent extends SimplifiedMouseEvent {
+    deltaY: number;
+}
 //# sourceMappingURL=common_props.d.ts.map

prebuilt/esnext/components/component_model.d.ts

@@ -53,4 +53,5 @@ import { DataSource, ReadOnlyDataSource } from 'aurumjs';
     BEZIER_CURVE = 9,
-    REGULAR_POLYGON = 10
+    REGULAR_POLYGON = 10,
+    LARGE_CONTENT_BOX = 11
 }
 //# sourceMappingURL=component_model.d.ts.map

prebuilt/esnext/components/component_model.js

@@ -14,3 +14,4 @@ export var ComponentType;
     ComponentType[ComponentType["REGULAR_POLYGON"] = 10] = "REGULAR_POLYGON";
+    ComponentType[ComponentType["LARGE_CONTENT_BOX"] = 11] = "LARGE_CONTENT_BOX";
 })(ComponentType || (ComponentType = {}));
 //# sourceMappingURL=component_model.js.map

prebuilt/esnext/components/features.d.ts

@@ -0,5 +1,23 @@
+import { CancellationToken, EventEmitter } from 'aurumjs';
 import { AurumCanvasProps } from './canvas.js';
-export declare function initializeKeyboardPanningFeature(props: AurumCanvasProps, canvas: HTMLCanvasElement): void;
-export declare function initializeMousePanningFeature(props: AurumCanvasProps, canvas: HTMLCanvasElement): void;
-export declare function initializeZoomFeature(props: AurumCanvasProps, canvas: HTMLCanvasElement): void;
+export declare function initializeKeyboardPanningFeature(props: AurumCanvasProps, onKeyUp: EventEmitter<{
+    keyCode: number;
+}>, onKeyDown: EventEmitter<{
+    keyCode: number;
+}>, token: CancellationToken): void;
+export declare function initializeMousePanningFeature(props: AurumCanvasProps, onMouseDown: EventEmitter<{
+    clientX: number;
+    clientY: number;
+}>, onMouseMove: EventEmitter<{
+    clientX: number;
+    clientY: number;
+}>, onMouseUp: EventEmitter<{
+    clientX: number;
+    clientY: number;
+}>, token: CancellationToken): void;
+export declare function initializeZoomFeature(props: AurumCanvasProps, onWheel: EventEmitter<{
+    offsetX: number;
+    offsetY: number;
+    deltaY: number;
+}>, token: CancellationToken): void;
 //# sourceMappingURL=features.d.ts.map

prebuilt/esnext/components/features.js

 import { CancellationToken } from 'aurumjs';
-export function initializeKeyboardPanningFeature(props, canvas) {
+export function initializeKeyboardPanningFeature(props, onKeyUp, onKeyDown, token) {
     let moveToken;
@@ -9,3 +9,3 @@ const keyDown = new Set();
     };
-    window.addEventListener('keyup', (e) => {
+    onKeyUp.subscribe((e) => {
         if (e.keyCode === props.features.panning.keyboard.leftKeyCode || e.keyCode === props.features.panning.keyboard.rightKeyCode) {
@@ -23,4 +23,4 @@ moveVector.x = 0;
         }
-    });
-    window.addEventListener('keydown', (e) => {
+    }, token);
+    onKeyDown.subscribe((e) => {
         if (e.keyCode === props.features.panning.keyboard.leftKeyCode) {
@@ -51,5 +51,5 @@ moveVector.x = props.features.panning.keyboard.pixelsPerFrame;
         }
-    });
+    }, token);
 }
-export function initializeMousePanningFeature(props, canvas) {
+export function initializeMousePanningFeature(props, onMouseDown, onMouseMove, onMouseUp, token) {
     let downX;
@@ -60,3 +60,3 @@ let downY;
     let down = false;
-    canvas.addEventListener('mousedown', (e) => {
+    onMouseDown.subscribe((e) => {
         downX = e.clientX;
@@ -67,4 +67,4 @@ downY = e.clientY;
         down = true;
-    });
-    document.addEventListener('mousemove', (e) => {
+    }, token);
+    onMouseMove.subscribe((e) => {
         if (down) {
@@ -76,9 +76,9 @@ props.translate.update({
         }
-    });
-    document.addEventListener('mouseup', (e) => {
+    }, token);
+    onMouseUp.subscribe((e) => {
         down = false;
-    });
+    }, token);
 }
-export function initializeZoomFeature(props, canvas) {
-    canvas.addEventListener('wheel', (e) => {
+export function initializeZoomFeature(props, onWheel, token) {
+    onWheel.subscribe((e) => {
         if (e.deltaY > 0) {
@@ -110,4 +110,4 @@ if (props.scale.value.x < props.features.mouseWheelZoom.minZoom) {
         }
-    });
+    }, token);
 }
 //# sourceMappingURL=features.js.map

prebuilt/esnext/components/rendering.d.ts

@@ -9,11 +9,11 @@ import { RectangleComponentModel } from './drawables/aurum_rectangle.js';
 import { ComponentModel } from './component_model.js';
-export declare function renderElipse(context: CanvasRenderingContext2D, child: ElipseComponentModel, offsetX: number, offsetY: number): boolean;
-export declare function renderLine(context: CanvasRenderingContext2D, child: LineComponentModel, offsetX: number, offsetY: number): boolean;
-export declare function renderQuadraticCurve(context: CanvasRenderingContext2D, child: QuadraticCurveComponentModel, offsetX: number, offsetY: number): boolean;
-export declare function renderBezierCurve(context: CanvasRenderingContext2D, child: BezierCurveComponentModel, offsetX: number, offsetY: number): boolean;
-export declare function renderPath(context: CanvasRenderingContext2D, child: PathComponentModel, offsetX: number, offsetY: number): boolean;
-export declare function renderRegularPolygon(context: CanvasRenderingContext2D, child: PathComponentModel, offsetX: number, offsetY: number): boolean;
-export declare function renderText(context: CanvasRenderingContext2D, child: TextComponentModel, offsetX: number, offsetY: number): boolean;
-export declare function renderRectangle(context: CanvasRenderingContext2D, child: RectangleComponentModel, offsetX: number, offsetY: number): boolean;
+export declare function renderElipse(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, child: ElipseComponentModel, offsetX: number, offsetY: number): boolean;
+export declare function renderLine(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, child: LineComponentModel, offsetX: number, offsetY: number): boolean;
+export declare function renderQuadraticCurve(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, child: QuadraticCurveComponentModel, offsetX: number, offsetY: number): boolean;
+export declare function renderBezierCurve(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, child: BezierCurveComponentModel, offsetX: number, offsetY: number): boolean;
+export declare function renderPath(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, child: PathComponentModel, offsetX: number, offsetY: number): boolean;
+export declare function renderRegularPolygon(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, child: PathComponentModel, offsetX: number, offsetY: number): boolean;
+export declare function renderText(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, child: TextComponentModel, offsetX: number, offsetY: number): boolean;
+export declare function renderRectangle(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, child: RectangleComponentModel, offsetX: number, offsetY: number): boolean;
 export declare function resolveValues(node: ComponentModel, props: string[], offsetX: number, offsetY: number, applyOrigin?: boolean): any;
 //# sourceMappingURL=rendering.d.ts.map

prebuilt/esnext/components/rendering.js

 import { deref } from './utilities.js';
+import { measureText } from './measure_text.js';
 const regularPolygonKeys = ['x', 'y', 'opacity', 'strokeColor', 'fillColor', 'path', 'sides', 'radius', 'originX', 'originY'];
@@ -204,37 +205,36 @@ const pathKeys = ['x', 'y', 'opacity', 'strokeColor', 'fillColor', 'path', 'lineWidth', 'originX', 'originY'];
     if (lines.length === 0) {
-        if (wrapWidth) {
-            child.renderedState.realWidth = 0;
-            const pieces = text.split(' ');
-            let line = pieces.shift();
-            while (pieces.length) {
-                const measuredWidth = context.measureText(line + ' ' + pieces[0]);
-                if (measuredWidth.width <= wrapWidth) {
-                    if (measuredWidth.width > child.renderedState.realWidth) {
-                        child.renderedState.realWidth = measuredWidth.width;
+        let longestMeasuredWidth = 0;
+        const inputLines = text.split('\n');
+        for (const inputLine of inputLines) {
+            if (wrapWidth) {
+                child.renderedState.realWidth = 0;
+                const pieces = inputLine.split(' ');
+                let line = pieces.shift();
+                while (pieces.length) {
+                    const measuredWidth = measureText(context, line + ' ' + pieces[0]);
+                    if (measuredWidth.width <= wrapWidth) {
+                        longestMeasuredWidth = Math.max(longestMeasuredWidth, measuredWidth.width);
+                        line += ' ' + pieces.shift();
                     }
-                    line += ' ' + pieces.shift();
-                }
-                else {
-                    const measuredWidth = context.measureText(line);
-                    if (measuredWidth.width > child.renderedState.realWidth) {
-                        child.renderedState.realWidth = measuredWidth.width;
+                    else {
+                        const measuredWidth = measureText(context, line);
+                        longestMeasuredWidth = Math.max(longestMeasuredWidth, measuredWidth.width);
+                        lines.push(line);
+                        line = pieces.shift();
                     }
-                    lines.push(line);
-                    line = pieces.shift();
                 }
+                const measuredWidth = measureText(context, line);
+                longestMeasuredWidth = Math.max(longestMeasuredWidth, measuredWidth.width);
+                lines.push(line);
             }
-            const measuredWidth = context.measureText(line);
-            if (measuredWidth.width > child.renderedState.realWidth) {
-                child.renderedState.realWidth = measuredWidth.width;
+            else {
+                longestMeasuredWidth = Math.max(longestMeasuredWidth, measureText(context, inputLine).width);
+                lines.push(inputLine);
             }
-            lines.push(line);
         }
+        if (!width) {
+            child.renderedState.realWidth = child.renderedState.width = longestMeasuredWidth;
+        }
         else {
-            if (!width) {
-                child.renderedState.realWidth = child.renderedState.width = context.measureText(text).width;
-            }
-            else {
-                child.renderedState.realWidth = context.measureText(text).width;
-            }
-            lines.push(text);
+            child.renderedState.realWidth = longestMeasuredWidth;
         }
@@ -241,0 +241,0 @@ }

src/aurum-canvas.ts

@@ -11,1 +11,2 @@ export * from './components/canvas.js';
 export * from './components/drawables/aurum_regular_polygon.js';
+export * from './components/drawables/large_content_box.js';

src/components/common_props.ts

@@ -53,8 +53,18 @@ import { DataSource, ReadOnlyDataSource } from 'aurumjs';
 export interface InteractionProps {
-    onMouseEnter?(e: MouseEvent, target: ComponentModel): void;
-    onMouseLeave?(e: MouseEvent, target: ComponentModel): void;
-    onMouseDown?(e: MouseEvent, target: ComponentModel): void;
-    onMouseUp?(e: MouseEvent, target: ComponentModel): void;
-    onMouseClick?(e: MouseEvent, target: ComponentModel): void;
-    onMouseMove?(e: MouseEvent, target: ComponentModel): void;
+    onMouseEnter?(e: SimplifiedMouseEvent, target: ComponentModel): void;
+    onMouseLeave?(e: SimplifiedMouseEvent, target: ComponentModel): void;
+    onMouseDown?(e: SimplifiedMouseEvent, target: ComponentModel): void;
+    onMouseUp?(e: SimplifiedMouseEvent, target: ComponentModel): void;
+    onMouseClick?(e: SimplifiedMouseEvent, target: ComponentModel): void;
+    onMouseMove?(e: SimplifiedMouseEvent, target: ComponentModel): void;
 }
+
+export interface SimplifiedMouseEvent {
+    clientX: number;
+    clientY: number;
+    offsetX: number;
+    offsetY: number;
+}
+export interface SimplifiedWheelEvent extends SimplifiedMouseEvent {
+    deltaY: number;
+}

src/components/component_model.ts

@@ -56,3 +56,4 @@ import { DataSource, ReadOnlyDataSource } from 'aurumjs';
     BEZIER_CURVE,
-    REGULAR_POLYGON
+    REGULAR_POLYGON,
+    LARGE_CONTENT_BOX
 }

src/components/features.ts

@@ -1,5 +0,10 @@
-import { CancellationToken } from 'aurumjs';
+import { CancellationToken, EventEmitter } from 'aurumjs';
 import { AurumCanvasProps } from './canvas.js';
 
-export function initializeKeyboardPanningFeature(props: AurumCanvasProps, canvas: HTMLCanvasElement): void {
+export function initializeKeyboardPanningFeature(
+    props: AurumCanvasProps,
+    onKeyUp: EventEmitter<{ keyCode: number }>,
+    onKeyDown: EventEmitter<{ keyCode: number }>,
+    token: CancellationToken
+): void {
     let moveToken: CancellationToken;
@@ -12,3 +17,3 @@ const keyDown = new Set();
 
-    window.addEventListener('keyup', (e) => {
+    onKeyUp.subscribe((e) => {
         if (e.keyCode === props.features.panning.keyboard.leftKeyCode || e.keyCode === props.features.panning.keyboard.rightKeyCode) {
@@ -28,5 +33,5 @@ moveVector.x = 0;
         }
-    });
+    }, token);
 
-    window.addEventListener('keydown', (e) => {
+    onKeyDown.subscribe((e) => {
         if (e.keyCode === props.features.panning.keyboard.leftKeyCode) {
@@ -61,6 +66,12 @@ moveVector.x = props.features.panning.keyboard.pixelsPerFrame;
         }
-    });
+    }, token);
 }
 
-export function initializeMousePanningFeature(props: AurumCanvasProps, canvas: HTMLCanvasElement): void {
+export function initializeMousePanningFeature(
+    props: AurumCanvasProps,
+    onMouseDown: EventEmitter<{ clientX: number; clientY: number }>,
+    onMouseMove: EventEmitter<{ clientX: number; clientY: number }>,
+    onMouseUp: EventEmitter<{ clientX: number; clientY: number }>,
+    token: CancellationToken
+): void {
     let downX: number;
@@ -72,3 +83,3 @@ let downY: number;
 
-    canvas.addEventListener('mousedown', (e) => {
+    onMouseDown.subscribe((e) => {
         downX = e.clientX;
@@ -79,5 +90,5 @@ downY = e.clientY;
         down = true;
-    });
+    }, token);
 
-    document.addEventListener('mousemove', (e) => {
+    onMouseMove.subscribe((e) => {
         if (down) {
@@ -89,11 +100,15 @@ props.translate.update({
         }
-    });
+    }, token);
 
-    document.addEventListener('mouseup', (e) => {
+    onMouseUp.subscribe((e) => {
         down = false;
-    });
+    }, token);
 }
 
-export function initializeZoomFeature(props: AurumCanvasProps, canvas: HTMLCanvasElement): void {
-    canvas.addEventListener('wheel', (e) => {
+export function initializeZoomFeature(
+    props: AurumCanvasProps,
+    onWheel: EventEmitter<{ offsetX: number; offsetY: number; deltaY: number }>,
+    token: CancellationToken
+): void {
+    onWheel.subscribe((e) => {
         if (e.deltaY > 0) {
@@ -126,3 +141,3 @@ if (props.scale.value.x < props.features.mouseWheelZoom.minZoom) {
         }
-    });
+    }, token);
 }

src/components/rendering.ts

@@ -11,2 +11,3 @@ import { RectangleComponentModel } from './drawables/aurum_rectangle.js';
 import { CommonProps } from './common_props.js';
+import { measureText } from './measure_text.js';
 
@@ -39,3 +40,8 @@ const regularPolygonKeys = ['x', 'y', 'opacity', 'strokeColor', 'fillColor', 'path', 'sides', 'radius', 'originX', 'originY'];
 
-export function renderElipse(context: CanvasRenderingContext2D, child: ElipseComponentModel, offsetX: number, offsetY: number): boolean {
+export function renderElipse(
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    child: ElipseComponentModel,
+    offsetX: number,
+    offsetY: number
+): boolean {
     const renderedState = resolveValues(child, elipseKeys, offsetX, offsetY);
@@ -63,3 +69,8 @@ const { x, y, idle, fillColor, strokeColor, opacity, rx, ry, rotation, startAngle, endAngle } = renderedState;
 
-export function renderLine(context: CanvasRenderingContext2D, child: LineComponentModel, offsetX: number, offsetY: number): boolean {
+export function renderLine(
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    child: LineComponentModel,
+    offsetX: number,
+    offsetY: number
+): boolean {
     const renderedState = resolveValues(child, lineKeys, offsetX, offsetY);
@@ -88,3 +99,8 @@ const { x, y, idle, fillColor, strokeColor, opacity, tx, ty, lineWidth } = renderedState;
 
-export function renderQuadraticCurve(context: CanvasRenderingContext2D, child: QuadraticCurveComponentModel, offsetX: number, offsetY: number): boolean {
+export function renderQuadraticCurve(
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    child: QuadraticCurveComponentModel,
+    offsetX: number,
+    offsetY: number
+): boolean {
     const renderedState = resolveValues(child, quadraticCurveKeys, offsetX, offsetY);
@@ -111,3 +127,8 @@ const { x, y, cx, cy, idle, fillColor, strokeColor, opacity, tx, ty, lineWidth } = renderedState;
 
-export function renderBezierCurve(context: CanvasRenderingContext2D, child: BezierCurveComponentModel, offsetX: number, offsetY: number): boolean {
+export function renderBezierCurve(
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    child: BezierCurveComponentModel,
+    offsetX: number,
+    offsetY: number
+): boolean {
     const renderedState = resolveValues(child, bezierCurveKeys, offsetX, offsetY);
@@ -134,3 +155,9 @@ const { x, y, cx, cy, c2x, c2y, idle, fillColor, strokeColor, opacity, tx, ty, lineWidth } = renderedState;
 
-function drawCanvasPath(child: CommonProps, context: CanvasRenderingContext2D, path2d: Path2D, fillColor: any, strokeColor: any) {
+function drawCanvasPath(
+    child: CommonProps,
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    path2d: Path2D,
+    fillColor: any,
+    strokeColor: any
+) {
     if (child.fillColor) {
@@ -150,3 +177,8 @@ context.fillStyle = fillColor;
 
-export function renderPath(context: CanvasRenderingContext2D, child: PathComponentModel, offsetX: number, offsetY: number): boolean {
+export function renderPath(
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    child: PathComponentModel,
+    offsetX: number,
+    offsetY: number
+): boolean {
     const renderedState = resolveValues(child, pathKeys, offsetX, offsetY);
@@ -189,3 +221,8 @@ const { x, y, idle, fillColor, strokeColor, opacity, path, lineWidth } = renderedState;
 
-export function renderRegularPolygon(context: CanvasRenderingContext2D, child: PathComponentModel, offsetX: number, offsetY: number): boolean {
+export function renderRegularPolygon(
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    child: PathComponentModel,
+    offsetX: number,
+    offsetY: number
+): boolean {
     const renderedState = resolveValues(child, regularPolygonKeys, offsetX, offsetY);
@@ -229,3 +266,8 @@ const { x, y, idle, fillColor, strokeColor, opacity, sides, radius } = renderedState;
 
-export function renderText(context: CanvasRenderingContext2D, child: TextComponentModel, offsetX: number, offsetY: number): boolean {
+export function renderText(
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    child: TextComponentModel,
+    offsetX: number,
+    offsetY: number
+): boolean {
     const renderedState = resolveValues(child, textKeys, offsetX, offsetY, false);
@@ -270,35 +312,35 @@ let {
     if (lines.length === 0) {
-        if (wrapWidth) {
-            child.renderedState.realWidth = 0;
-            const pieces: string[] = text.split(' ');
-            let line = pieces.shift();
-            while (pieces.length) {
-                const measuredWidth = context.measureText(line + ' ' + pieces[0]);
-                if (measuredWidth.width <= wrapWidth) {
-                    if (measuredWidth.width > child.renderedState.realWidth) {
-                        child.renderedState.realWidth = measuredWidth.width;
+        let longestMeasuredWidth = 0;
+        const inputLines = text.split('\n');
+        for (const inputLine of inputLines) {
+            if (wrapWidth) {
+                child.renderedState.realWidth = 0;
+                const pieces: string[] = inputLine.split(' ');
+                let line = pieces.shift();
+                while (pieces.length) {
+                    const measuredWidth = measureText(context, line + ' ' + pieces[0]);
+                    if (measuredWidth.width <= wrapWidth) {
+                        longestMeasuredWidth = Math.max(longestMeasuredWidth, measuredWidth.width);
+                        line += ' ' + pieces.shift();
+                    } else {
+                        const measuredWidth = measureText(context, line);
+                        longestMeasuredWidth = Math.max(longestMeasuredWidth, measuredWidth.width);
+                        lines.push(line);
+                        line = pieces.shift();
                     }
-                    line += ' ' + pieces.shift();
-                } else {
-                    const measuredWidth = context.measureText(line);
-                    if (measuredWidth.width > child.renderedState.realWidth) {
-                        child.renderedState.realWidth = measuredWidth.width;
-                    }
-                    lines.push(line);
-                    line = pieces.shift();
                 }
-            }
-            const measuredWidth = context.measureText(line);
-            if (measuredWidth.width > child.renderedState.realWidth) {
-                child.renderedState.realWidth = measuredWidth.width;
-            }
-            lines.push(line);
-        } else {
-            if (!width) {
-                child.renderedState.realWidth = child.renderedState.width = context.measureText(text).width;
+                const measuredWidth = measureText(context, line);
+                longestMeasuredWidth = Math.max(longestMeasuredWidth, measuredWidth.width);
+                lines.push(line);
             } else {
-                child.renderedState.realWidth = context.measureText(text).width;
+                longestMeasuredWidth = Math.max(longestMeasuredWidth, measureText(context, inputLine).width);
+
+                lines.push(inputLine);
             }
-            lines.push(text);
         }
+        if (!width) {
+            child.renderedState.realWidth = child.renderedState.width = longestMeasuredWidth;
+        } else {
+            child.renderedState.realWidth = longestMeasuredWidth;
+        }
     }
@@ -330,3 +372,8 @@
 
-export function renderRectangle(context: CanvasRenderingContext2D, child: RectangleComponentModel, offsetX: number, offsetY: number): boolean {
+export function renderRectangle(
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    child: RectangleComponentModel,
+    offsetX: number,
+    offsetY: number
+): boolean {
     const renderedState = resolveValues(child, rectangleKeys, offsetX, offsetY);
@@ -333,0 +380,0 @@ const { x, y, width, height, idle, fillColor, strokeColor, opacity } = renderedState;

No alert changes

Improved metrics

Total package byte prevSize

338684

increased by9.65%

Number of package files

116

increased by19.59%

Lines of code

3695

increased by10.76%

Dependency changes

• Updatedaurumjs@^0.9.50