aurum-canvas - npm Package Compare versions

Comparing version 0.0.22 to 0.0.23

package.json

 {
     "name": "aurum-canvas",
-    "version": "0.0.22",
+    "version": "0.0.23",
     "description": "Aurum style scene graph management for rendering in canvas",
@@ -38,4 +38,4 @@ "main": "prebuilt/cjs/aurum-canvas.js",
     "dependencies": {
-        "aurumjs": "0.6.22"
+        "aurumjs": "^0.6.24"
     }
 }

prebuilt/amd/aurum-canvas.d.ts

@@ -125,2 +125,3 @@ declare module "components/common_props" {
         y: number;
+        realWidth?: number;
         width?: number;
@@ -329,3 +330,3 @@ height?: number;
     export function renderRectangle(context: CanvasRenderingContext2D, child: RectangleComponentModel, offsetX: number, offsetY: number): boolean;
-    export function resolveValues(node: ComponentModel, props: string[], offsetX: number, offsetY: number): any;
+    export function resolveValues(node: ComponentModel, props: string[], offsetX: number, offsetY: number, applyOrigin?: boolean): any;
 }
@@ -363,4 +364,4 @@ declare module "components/features" {
         style?: AttributeValue;
-        width?: ReadOnlyDataSource<string | number> | string | number;
-        height?: ReadOnlyDataSource<string | number> | string | number;
+        width?: ReadOnlyDataSource<string | number> | ReadOnlyDataSource<string> | ReadOnlyDataSource<number> | string | number;
+        height?: ReadOnlyDataSource<string | number> | ReadOnlyDataSource<string> | ReadOnlyDataSource<number> | string | number;
         translate?: DataSource<{
@@ -367,0 +368,0 @@ x: number;

prebuilt/amd/aurum-canvas.js

@@ -362,2 +362,3 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
         'y',
+        'realWidth',
         'width',
@@ -543,4 +544,4 @@ 'font',
     function renderText(context, child, offsetX, offsetY) {
-        var _a, _b, _c, _d;
-        const renderedState = resolveValues(child, textKeys, offsetX, offsetY);
+        var _a, _b, _c, _d, _e;
+        const renderedState = resolveValues(child, textKeys, offsetX, offsetY, false);
         let { x, y, idle, fontSize = 16, textBaseline, font, fillColor, strokeColor, opacity, text, fontWeight, width, wrapWidth, lineHeight, originX } = renderedState;
@@ -550,5 +551,8 @@ if (((_a = child.renderedState) === null || _a === void 0 ? void 0 : _a.width) && !renderedState.width) {
         }
-        renderedState.lines = (_b = child.renderedState) === null || _b === void 0 ? void 0 : _b.lines;
+        if (((_b = child.renderedState) === null || _b === void 0 ? void 0 : _b.realWidth) && !renderedState.realWidth) {
+            renderedState.realWidth = child.renderedState.realWidth;
+        }
+        renderedState.lines = (_c = child.renderedState) === null || _c === void 0 ? void 0 : _c.lines;
         child.renderedState = renderedState;
-        child.renderedState.lines = (_c = child.renderedState.lines) !== null && _c !== void 0 ? _c : [];
+        child.renderedState.lines = (_d = child.renderedState.lines) !== null && _d !== void 0 ? _d : [];
         let lines = child.renderedState.lines;
@@ -562,2 +566,3 @@ if (textBaseline) {
             if (wrapWidth) {
+                child.renderedState.realWidth = 0;
                 const pieces = text.split(' ');
@@ -567,2 +572,5 @@ let line = pieces.shift();
                     const measuredWidth = context.measureText(line + ' ' + pieces[0]);
+                    if (measuredWidth.width > child.renderedState.realWidth) {
+                        child.renderedState.realWidth = measuredWidth.width;
+                    }
                     if (measuredWidth <= wrapWidth) {
@@ -580,11 +588,14 @@ line += ' ' + pieces.shift();
                 if (!width) {
-                    child.renderedState.width = context.measureText(text).width;
+                    child.renderedState.realWidth = child.renderedState.width = context.measureText(text).width;
                 }
+                else {
+                    child.renderedState.realWidth = context.measureText(text).width;
+                }
                 lines.push(text);
             }
         }
-        (_d = child.onPreDraw) === null || _d === void 0 ? void 0 : _d.call(child, child.renderedState);
+        (_e = child.onPreDraw) === null || _e === void 0 ? void 0 : _e.call(child, child.renderedState);
         context.globalAlpha = opacity;
         if (originX) {
-            x -= child.renderedState.width * originX;
+            x -= Math.min(child.renderedState.realWidth, child.renderedState.width) * originX;
         }
@@ -630,3 +641,3 @@ for (let i = 0; i < lines.length; i++) {
     exports.renderRectangle = renderRectangle;
-    function resolveValues(node, props, offsetX, offsetY) {
+    function resolveValues(node, props, offsetX, offsetY, applyOrigin = true) {
         var _a;
@@ -662,11 +673,13 @@ const result = {
         result.y += offsetY;
-        //@ts-ignore
-        if (result.originX && result.width) {
+        if (applyOrigin) {
             //@ts-ignore
-            result.x -= result.width * result.originX;
-        }
-        //@ts-ignore
-        if (result.originY && result.height) {
+            if (result.originX && result.width) {
+                //@ts-ignore
+                result.x -= result.width * result.originX;
+            }
             //@ts-ignore
-            result.y -= result.height * result.originY;
+            if (result.originY && result.height) {
+                //@ts-ignore
+                result.y -= result.height * result.originY;
+            }
         }
@@ -729,15 +742,15 @@ if ('tx' in result) {
             if (e.keyCode === props.features.panning.keyboard.leftKeyCode) {
-                moveVector.x = -props.features.panning.keyboard.pixelsPerFrame;
+                moveVector.x = props.features.panning.keyboard.pixelsPerFrame;
                 keyDown.add(e.keyCode);
             }
             if (e.keyCode === props.features.panning.keyboard.downKeyCode) {
-                moveVector.y = props.features.panning.keyboard.pixelsPerFrame;
+                moveVector.y = -props.features.panning.keyboard.pixelsPerFrame;
                 keyDown.add(e.keyCode);
             }
             if (e.keyCode === props.features.panning.keyboard.rightKeyCode) {
-                moveVector.x = props.features.panning.keyboard.pixelsPerFrame;
+                moveVector.x = -props.features.panning.keyboard.pixelsPerFrame;
                 keyDown.add(e.keyCode);
             }
             if (e.keyCode === props.features.panning.keyboard.upKeyCode) {
-                moveVector.y = -props.features.panning.keyboard.pixelsPerFrame;
+                moveVector.y = props.features.panning.keyboard.pixelsPerFrame;
                 keyDown.add(e.keyCode);
@@ -749,4 +762,4 @@ }
                     props.translate.update({
-                        x: props.translate.value.x + moveVector.x / props.scale.value.x,
-                        y: props.translate.value.y + moveVector.y / props.scale.value.x
+                        x: props.translate.value.x + moveVector.x,
+                        y: props.translate.value.y + moveVector.y
                     });
@@ -899,11 +912,15 @@ });
         function isOnTopOf(e, target, context) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             if (!target.renderedState) {
                 return;
             }
-            const x = e.offsetX - ((_b = (_a = props.translate) === null || _a === void 0 ? void 0 : _a.value.x) !== null && _b !== void 0 ? _b : 0);
-            let y = e.offsetY - ((_d = (_c = props.translate) === null || _c === void 0 ? void 0 : _c.value.y) !== null && _d !== void 0 ? _d : 0);
+            let x = e.offsetX - (((_a = props.translate) === null || _a === void 0 ? void 0 : _a.value.x) ? ((_b = props.translate) === null || _b === void 0 ? void 0 : _b.value.x) * ((_e = (_d = (_c = props.scale) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.x) !== null && _e !== void 0 ? _e : 1) : 0);
+            let y = e.offsetY - (((_f = props.translate) === null || _f === void 0 ? void 0 : _f.value.y) ? ((_g = props.translate) === null || _g === void 0 ? void 0 : _g.value.y) * ((_k = (_j = (_h = props.scale) === null || _h === void 0 ? void 0 : _h.value) === null || _j === void 0 ? void 0 : _j.x) !== null && _k !== void 0 ? _k : 1) : 0);
+            if (props.scale) {
+                x /= props.scale.value.x;
+                y /= props.scale.value.y;
+            }
             if (target.type === component_model_9.ComponentType.TEXT) {
                 const label = target;
-                const size = (_e = utilities_2.deref(label.fontSize)) !== null && _e !== void 0 ? _e : 16;
+                const size = (_l = utilities_2.deref(label.fontSize)) !== null && _l !== void 0 ? _l : 16;
                 if (!label.textBaseline) {
@@ -932,4 +949,4 @@ y += size;
                         y >= target.renderedState.y &&
-                        x <= target.renderedState.x + target.renderedState.width * ((_g = (_f = props.scale) === null || _f === void 0 ? void 0 : _f.value.x) !== null && _g !== void 0 ? _g : 1) &&
-                        y <= target.renderedState.y + target.renderedState.height * ((_j = (_h = props.scale) === null || _h === void 0 ? void 0 : _h.value.y) !== null && _j !== void 0 ? _j : 1));
+                        x <= target.renderedState.x + target.renderedState.width * ((_o = (_m = props.scale) === null || _m === void 0 ? void 0 : _m.value.x) !== null && _o !== void 0 ? _o : 1) &&
+                        y <= target.renderedState.y + target.renderedState.height * ((_q = (_p = props.scale) === null || _p === void 0 ? void 0 : _p.value.y) !== null && _q !== void 0 ? _q : 1));
                 case component_model_9.ComponentType.ELIPSE:
@@ -955,2 +972,3 @@ case component_model_9.ComponentType.REGULAR_POLYGON:
                 if (child instanceof aurumjs_11.ArrayDataSource) {
+                    child.listen(() => invalidate(canvas), cancellationToken);
                     const tokenMap = new Map();
@@ -977,2 +995,3 @@ child.listenAndRepeat((change) => {
                 if (child instanceof aurumjs_11.DataSource || child instanceof aurumjs_11.DuplexDataSource) {
+                    child.listen(() => invalidate(canvas), cancellationToken);
                     let bindToken;
@@ -1100,3 +1119,2 @@ let value;
         function render(canvas, components) {
-            var _a, _b;
             const context = canvas.getContext('2d');
@@ -1110,3 +1128,16 @@ if (props.backgroundColor === undefined) {
             }
+            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) {
+            var _a, _b;
+            if (props.scale || props.translate) {
                 context.save();
@@ -1120,8 +1151,2 @@ if ((_a = props.scale) === null || _a === void 0 ? void 0 : _a.value) {
             }
-            for (const child of components) {
-                renderChild(context, child, 0, 0);
-            }
-            if (props.scale || props.translate) {
-                context.restore();
-            }
         }
@@ -1151,3 +1176,2 @@ function renderChild(context, child, offsetX, offsetY) {
                 }
-                child.listen(() => invalidate(context.canvas));
                 return;
@@ -1157,3 +1181,2 @@ }
                 renderChild(context, child.value, offsetX, offsetY);
-                child.listen(() => invalidate(context.canvas));
                 return;
@@ -1160,0 +1183,0 @@ }

prebuilt/cjs/components/canvas.d.ts

@@ -25,4 +25,4 @@ import { AurumElement, DataSource, Renderable, AurumComponentAPI, ReadOnlyDataSource, ClassType, AttributeValue } from 'aurumjs';
     style?: AttributeValue;
-    width?: ReadOnlyDataSource<string | number> | string | number;
-    height?: ReadOnlyDataSource<string | number> | string | number;
+    width?: ReadOnlyDataSource<string | number> | ReadOnlyDataSource<string> | ReadOnlyDataSource<number> | string | number;
+    height?: ReadOnlyDataSource<string | number> | ReadOnlyDataSource<string> | ReadOnlyDataSource<number> | string | number;
     translate?: DataSource<{
@@ -29,0 +29,0 @@ x: number;

prebuilt/cjs/components/canvas.js

@@ -89,11 +89,15 @@ "use strict";
     function isOnTopOf(e, target, context) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         if (!target.renderedState) {
             return;
         }
-        const x = e.offsetX - ((_b = (_a = props.translate) === null || _a === void 0 ? void 0 : _a.value.x) !== null && _b !== void 0 ? _b : 0);
-        let y = e.offsetY - ((_d = (_c = props.translate) === null || _c === void 0 ? void 0 : _c.value.y) !== null && _d !== void 0 ? _d : 0);
+        let x = e.offsetX - (((_a = props.translate) === null || _a === void 0 ? void 0 : _a.value.x) ? ((_b = props.translate) === null || _b === void 0 ? void 0 : _b.value.x) * ((_e = (_d = (_c = props.scale) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.x) !== null && _e !== void 0 ? _e : 1) : 0);
+        let y = e.offsetY - (((_f = props.translate) === null || _f === void 0 ? void 0 : _f.value.y) ? ((_g = props.translate) === null || _g === void 0 ? void 0 : _g.value.y) * ((_k = (_j = (_h = props.scale) === null || _h === void 0 ? void 0 : _h.value) === null || _j === void 0 ? void 0 : _j.x) !== null && _k !== void 0 ? _k : 1) : 0);
+        if (props.scale) {
+            x /= props.scale.value.x;
+            y /= props.scale.value.y;
+        }
         if (target.type === component_model_1.ComponentType.TEXT) {
             const label = target;
-            const size = (_e = utilities_1.deref(label.fontSize)) !== null && _e !== void 0 ? _e : 16;
+            const size = (_l = utilities_1.deref(label.fontSize)) !== null && _l !== void 0 ? _l : 16;
             if (!label.textBaseline) {
@@ -122,4 +126,4 @@ y += size;
                     y >= target.renderedState.y &&
-                    x <= target.renderedState.x + target.renderedState.width * ((_g = (_f = props.scale) === null || _f === void 0 ? void 0 : _f.value.x) !== null && _g !== void 0 ? _g : 1) &&
-                    y <= target.renderedState.y + target.renderedState.height * ((_j = (_h = props.scale) === null || _h === void 0 ? void 0 : _h.value.y) !== null && _j !== void 0 ? _j : 1));
+                    x <= target.renderedState.x + target.renderedState.width * ((_o = (_m = props.scale) === null || _m === void 0 ? void 0 : _m.value.x) !== null && _o !== void 0 ? _o : 1) &&
+                    y <= target.renderedState.y + target.renderedState.height * ((_q = (_p = props.scale) === null || _p === void 0 ? void 0 : _p.value.y) !== null && _q !== void 0 ? _q : 1));
             case component_model_1.ComponentType.ELIPSE:
@@ -145,2 +149,3 @@ case component_model_1.ComponentType.REGULAR_POLYGON:
             if (child instanceof aurumjs_1.ArrayDataSource) {
+                child.listen(() => invalidate(canvas), cancellationToken);
                 const tokenMap = new Map();
@@ -167,2 +172,3 @@ child.listenAndRepeat((change) => {
             if (child instanceof aurumjs_1.DataSource || child instanceof aurumjs_1.DuplexDataSource) {
+                child.listen(() => invalidate(canvas), cancellationToken);
                 let bindToken;
@@ -290,3 +296,2 @@ let value;
     function render(canvas, components) {
-        var _a, _b;
         const context = canvas.getContext('2d');
@@ -300,3 +305,16 @@ if (props.backgroundColor === undefined) {
         }
+        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) {
+        var _a, _b;
+        if (props.scale || props.translate) {
             context.save();
@@ -310,8 +328,2 @@ if ((_a = props.scale) === null || _a === void 0 ? void 0 : _a.value) {
         }
-        for (const child of components) {
-            renderChild(context, child, 0, 0);
-        }
-        if (props.scale || props.translate) {
-            context.restore();
-        }
     }
@@ -341,3 +353,2 @@ function renderChild(context, child, offsetX, offsetY) {
             }
-            child.listen(() => invalidate(context.canvas));
             return;
@@ -347,3 +358,2 @@ }
             renderChild(context, child.value, offsetX, offsetY);
-            child.listen(() => invalidate(context.canvas));
             return;
@@ -350,0 +360,0 @@ }

prebuilt/cjs/components/component_model.d.ts

@@ -23,2 +23,3 @@ import { ReadOnlyDataSource } from 'aurumjs';
     y: number;
+    realWidth?: number;
     width?: number;
@@ -25,0 +26,0 @@ height?: number;

prebuilt/cjs/components/features.js

@@ -28,15 +28,15 @@ "use strict";
         if (e.keyCode === props.features.panning.keyboard.leftKeyCode) {
-            moveVector.x = -props.features.panning.keyboard.pixelsPerFrame;
+            moveVector.x = props.features.panning.keyboard.pixelsPerFrame;
             keyDown.add(e.keyCode);
         }
         if (e.keyCode === props.features.panning.keyboard.downKeyCode) {
-            moveVector.y = props.features.panning.keyboard.pixelsPerFrame;
+            moveVector.y = -props.features.panning.keyboard.pixelsPerFrame;
             keyDown.add(e.keyCode);
         }
         if (e.keyCode === props.features.panning.keyboard.rightKeyCode) {
-            moveVector.x = props.features.panning.keyboard.pixelsPerFrame;
+            moveVector.x = -props.features.panning.keyboard.pixelsPerFrame;
             keyDown.add(e.keyCode);
         }
         if (e.keyCode === props.features.panning.keyboard.upKeyCode) {
-            moveVector.y = -props.features.panning.keyboard.pixelsPerFrame;
+            moveVector.y = props.features.panning.keyboard.pixelsPerFrame;
             keyDown.add(e.keyCode);
@@ -48,4 +48,4 @@ }
                 props.translate.update({
-                    x: props.translate.value.x + moveVector.x / props.scale.value.x,
-                    y: props.translate.value.y + moveVector.y / props.scale.value.x
+                    x: props.translate.value.x + moveVector.x,
+                    y: props.translate.value.y + moveVector.y
                 });
@@ -52,0 +52,0 @@ });

prebuilt/cjs/components/rendering.d.ts

@@ -17,3 +17,3 @@ import { RectangleComponentModel } from './drawables/aurum_rectangle';
 export declare function renderRectangle(context: CanvasRenderingContext2D, child: RectangleComponentModel, offsetX: number, offsetY: number): boolean;
-export declare function resolveValues(node: ComponentModel, props: string[], offsetX: number, offsetY: number): any;
+export declare function resolveValues(node: ComponentModel, props: string[], offsetX: number, offsetY: number, applyOrigin?: boolean): any;
 //# sourceMappingURL=rendering.d.ts.map

prebuilt/cjs/components/rendering.js

@@ -14,2 +14,3 @@ "use strict";
     'y',
+    'realWidth',
     'width',
@@ -195,4 +196,4 @@ 'font',
 function renderText(context, child, offsetX, offsetY) {
-    var _a, _b, _c, _d;
-    const renderedState = resolveValues(child, textKeys, offsetX, offsetY);
+    var _a, _b, _c, _d, _e;
+    const renderedState = resolveValues(child, textKeys, offsetX, offsetY, false);
     let { x, y, idle, fontSize = 16, textBaseline, font, fillColor, strokeColor, opacity, text, fontWeight, width, wrapWidth, lineHeight, originX } = renderedState;
@@ -202,5 +203,8 @@ if (((_a = child.renderedState) === null || _a === void 0 ? void 0 : _a.width) && !renderedState.width) {
     }
-    renderedState.lines = (_b = child.renderedState) === null || _b === void 0 ? void 0 : _b.lines;
+    if (((_b = child.renderedState) === null || _b === void 0 ? void 0 : _b.realWidth) && !renderedState.realWidth) {
+        renderedState.realWidth = child.renderedState.realWidth;
+    }
+    renderedState.lines = (_c = child.renderedState) === null || _c === void 0 ? void 0 : _c.lines;
     child.renderedState = renderedState;
-    child.renderedState.lines = (_c = child.renderedState.lines) !== null && _c !== void 0 ? _c : [];
+    child.renderedState.lines = (_d = child.renderedState.lines) !== null && _d !== void 0 ? _d : [];
     let lines = child.renderedState.lines;
@@ -214,2 +218,3 @@ if (textBaseline) {
         if (wrapWidth) {
+            child.renderedState.realWidth = 0;
             const pieces = text.split(' ');
@@ -219,2 +224,5 @@ let line = pieces.shift();
                 const measuredWidth = context.measureText(line + ' ' + pieces[0]);
+                if (measuredWidth.width > child.renderedState.realWidth) {
+                    child.renderedState.realWidth = measuredWidth.width;
+                }
                 if (measuredWidth <= wrapWidth) {
@@ -232,11 +240,14 @@ line += ' ' + pieces.shift();
             if (!width) {
-                child.renderedState.width = context.measureText(text).width;
+                child.renderedState.realWidth = child.renderedState.width = context.measureText(text).width;
             }
+            else {
+                child.renderedState.realWidth = context.measureText(text).width;
+            }
             lines.push(text);
         }
     }
-    (_d = child.onPreDraw) === null || _d === void 0 ? void 0 : _d.call(child, child.renderedState);
+    (_e = child.onPreDraw) === null || _e === void 0 ? void 0 : _e.call(child, child.renderedState);
     context.globalAlpha = opacity;
     if (originX) {
-        x -= child.renderedState.width * originX;
+        x -= Math.min(child.renderedState.realWidth, child.renderedState.width) * originX;
     }
@@ -282,3 +293,3 @@ for (let i = 0; i < lines.length; i++) {
 exports.renderRectangle = renderRectangle;
-function resolveValues(node, props, offsetX, offsetY) {
+function resolveValues(node, props, offsetX, offsetY, applyOrigin = true) {
     var _a;
@@ -314,11 +325,13 @@ const result = {
     result.y += offsetY;
-    //@ts-ignore
-    if (result.originX && result.width) {
+    if (applyOrigin) {
         //@ts-ignore
-        result.x -= result.width * result.originX;
-    }
-    //@ts-ignore
-    if (result.originY && result.height) {
+        if (result.originX && result.width) {
+            //@ts-ignore
+            result.x -= result.width * result.originX;
+        }
         //@ts-ignore
-        result.y -= result.height * result.originY;
+        if (result.originY && result.height) {
+            //@ts-ignore
+            result.y -= result.height * result.originY;
+        }
     }
@@ -325,0 +338,0 @@ if ('tx' in result) {

prebuilt/esnext/components/canvas.d.ts

@@ -25,4 +25,4 @@ import { AurumElement, DataSource, Renderable, AurumComponentAPI, ReadOnlyDataSource, ClassType, AttributeValue } from 'aurumjs';
     style?: AttributeValue;
-    width?: ReadOnlyDataSource<string | number> | string | number;
-    height?: ReadOnlyDataSource<string | number> | string | number;
+    width?: ReadOnlyDataSource<string | number> | ReadOnlyDataSource<string> | ReadOnlyDataSource<number> | string | number;
+    height?: ReadOnlyDataSource<string | number> | ReadOnlyDataSource<string> | ReadOnlyDataSource<number> | string | number;
     translate?: DataSource<{
@@ -29,0 +29,0 @@ x: number;

prebuilt/esnext/components/canvas.js

@@ -86,4 +86,8 @@ import { Aurum, DataSource, ArrayDataSource, DuplexDataSource, aurumElementModelIdentitiy, CancellationToken, EventEmitter, dsUnique, createLifeCycle, dsMap } from 'aurumjs';
         }
-        const x = e.offsetX - (props.translate?.value.x ?? 0);
-        let y = e.offsetY - (props.translate?.value.y ?? 0);
+        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) {
@@ -137,2 +141,3 @@ const label = target;
             if (child instanceof ArrayDataSource) {
+                child.listen(() => invalidate(canvas), cancellationToken);
                 const tokenMap = new Map();
@@ -159,2 +164,3 @@ child.listenAndRepeat((change) => {
             if (child instanceof DataSource || child instanceof DuplexDataSource) {
+                child.listen(() => invalidate(canvas), cancellationToken);
                 let bindToken;
@@ -290,3 +296,15 @@ let value;
         }
+        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();
@@ -300,8 +318,2 @@ if (props.scale?.value) {
         }
-        for (const child of components) {
-            renderChild(context, child, 0, 0);
-        }
-        if (props.scale || props.translate) {
-            context.restore();
-        }
     }
@@ -331,3 +343,2 @@ function renderChild(context, child, offsetX, offsetY) {
             }
-            child.listen(() => invalidate(context.canvas));
             return;
@@ -337,3 +348,2 @@ }
             renderChild(context, child.value, offsetX, offsetY);
-            child.listen(() => invalidate(context.canvas));
             return;
@@ -340,0 +350,0 @@ }

prebuilt/esnext/components/component_model.d.ts

@@ -23,2 +23,3 @@ import { ReadOnlyDataSource } from 'aurumjs';
     y: number;
+    realWidth?: number;
     width?: number;
@@ -25,0 +26,0 @@ height?: number;

prebuilt/esnext/components/features.js

@@ -25,15 +25,15 @@ import { CancellationToken } from 'aurumjs';
         if (e.keyCode === props.features.panning.keyboard.leftKeyCode) {
-            moveVector.x = -props.features.panning.keyboard.pixelsPerFrame;
+            moveVector.x = props.features.panning.keyboard.pixelsPerFrame;
             keyDown.add(e.keyCode);
         }
         if (e.keyCode === props.features.panning.keyboard.downKeyCode) {
-            moveVector.y = props.features.panning.keyboard.pixelsPerFrame;
+            moveVector.y = -props.features.panning.keyboard.pixelsPerFrame;
             keyDown.add(e.keyCode);
         }
         if (e.keyCode === props.features.panning.keyboard.rightKeyCode) {
-            moveVector.x = props.features.panning.keyboard.pixelsPerFrame;
+            moveVector.x = -props.features.panning.keyboard.pixelsPerFrame;
             keyDown.add(e.keyCode);
         }
         if (e.keyCode === props.features.panning.keyboard.upKeyCode) {
-            moveVector.y = -props.features.panning.keyboard.pixelsPerFrame;
+            moveVector.y = props.features.panning.keyboard.pixelsPerFrame;
             keyDown.add(e.keyCode);
@@ -45,4 +45,4 @@ }
                 props.translate.update({
-                    x: props.translate.value.x + moveVector.x / props.scale.value.x,
-                    y: props.translate.value.y + moveVector.y / props.scale.value.x
+                    x: props.translate.value.x + moveVector.x,
+                    y: props.translate.value.y + moveVector.y
                 });
@@ -49,0 +49,0 @@ });

prebuilt/esnext/components/rendering.d.ts

@@ -17,3 +17,3 @@ import { RectangleComponentModel } from './drawables/aurum_rectangle';
 export declare function renderRectangle(context: CanvasRenderingContext2D, child: RectangleComponentModel, offsetX: number, offsetY: number): boolean;
-export declare function resolveValues(node: ComponentModel, props: string[], offsetX: number, offsetY: number): any;
+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

@@ -11,2 +11,3 @@ import { deref } from './utilities';
     'y',
+    'realWidth',
     'width',
@@ -180,3 +181,3 @@ 'font',
 export function renderText(context, child, offsetX, offsetY) {
-    const renderedState = resolveValues(child, textKeys, offsetX, offsetY);
+    const renderedState = resolveValues(child, textKeys, offsetX, offsetY, false);
     let { x, y, idle, fontSize = 16, textBaseline, font, fillColor, strokeColor, opacity, text, fontWeight, width, wrapWidth, lineHeight, originX } = renderedState;
@@ -186,2 +187,5 @@ if (child.renderedState?.width && !renderedState.width) {
     }
+    if (child.renderedState?.realWidth && !renderedState.realWidth) {
+        renderedState.realWidth = child.renderedState.realWidth;
+    }
     renderedState.lines = child.renderedState?.lines;
@@ -198,2 +202,3 @@ child.renderedState = renderedState;
         if (wrapWidth) {
+            child.renderedState.realWidth = 0;
             const pieces = text.split(' ');
@@ -203,2 +208,5 @@ let line = pieces.shift();
                 const measuredWidth = context.measureText(line + ' ' + pieces[0]);
+                if (measuredWidth.width > child.renderedState.realWidth) {
+                    child.renderedState.realWidth = measuredWidth.width;
+                }
                 if (measuredWidth <= wrapWidth) {
@@ -216,4 +224,7 @@ line += ' ' + pieces.shift();
             if (!width) {
-                child.renderedState.width = context.measureText(text).width;
+                child.renderedState.realWidth = child.renderedState.width = context.measureText(text).width;
             }
+            else {
+                child.renderedState.realWidth = context.measureText(text).width;
+            }
             lines.push(text);
@@ -225,3 +236,3 @@ }
     if (originX) {
-        x -= child.renderedState.width * originX;
+        x -= Math.min(child.renderedState.realWidth, child.renderedState.width) * originX;
     }
@@ -264,3 +275,3 @@ for (let i = 0; i < lines.length; i++) {
 }
-export function resolveValues(node, props, offsetX, offsetY) {
+export function resolveValues(node, props, offsetX, offsetY, applyOrigin = true) {
     const result = {
@@ -295,11 +306,13 @@ idle: true,
     result.y += offsetY;
-    //@ts-ignore
-    if (result.originX && result.width) {
+    if (applyOrigin) {
         //@ts-ignore
-        result.x -= result.width * result.originX;
-    }
-    //@ts-ignore
-    if (result.originY && result.height) {
+        if (result.originX && result.width) {
+            //@ts-ignore
+            result.x -= result.width * result.originX;
+        }
         //@ts-ignore
-        result.y -= result.height * result.originY;
+        if (result.originY && result.height) {
+            //@ts-ignore
+            result.y -= result.height * result.originY;
+        }
     }
@@ -306,0 +319,0 @@ if ('tx' in result) {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

827005

increased by2.03%

Lines of code

6820

increased by1.07%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedaurumjs@0.6.32(transitive)

• - Removedaurumjs@0.6.22(transitive)

• Updatedaurumjs@^0.6.24