@nativescript/canvas 2.0.0-beta.2 → 2.0.0-beta.20

package/Canvas2D/Path2D/index.js

@@ -19,7 +19,6 @@ export class Path2D {
         return this._native;
     }
     addPath(path, transform) {
-        //const addPath = this._getMethod('addPath');
         if (transform) {
             this.native.addPath(path.native, transform.native);
         }
@@ -28,47 +27,39 @@ export class Path2D {
         }
     }
     arc(x, y, radius, startAngle, endAngle, anticlockwise = false) {
-        //const arc = this._getMethod('arc');
         this.native.arc(x, y, radius, startAngle, endAngle, anticlockwise ?? false);
     }
     arcTo(x1, y1, x2, y2, radius) {
-        //const arcTo = this._getMethod('arcTo');
         this.native.arcTo(x1, y1, x2, y2, radius);
     }
     bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-        //const bezierCurveTo = this._getMethod('bezierCurveTo');
         this.native.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
     }
     closePath() {
-        //const closePath = this._getMethod('closePath');
         this.native.closePath();
     }
     ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise = false) {
-        //const ellipse = this._getMethod('ellipse');
         this.native.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise ?? false);
     }
     lineTo(x, y) {
-        //const lineTo = this._getMethod('lineTo');
         this.native.lineTo(x, y);
     }
     moveTo(x, y) {
-        //const moveTo = this._getMethod('moveTo');
         this.native.moveTo(x, y);
     }
     quadraticCurveTo(cpx, cpy, x, y) {
-        //const quadraticCurveTo = this._getMethod('quadraticCurveTo');
         this.native.quadraticCurveTo(cpx, cpy, x, y);
     }
     rect(x, y, width, height) {
-        //const rect = this._getMethod('rect');
         this.native.rect(x, y, width, height);
     }
     roundRect(x, y, width, height, radii) {
-        //const roundRect = this._getMethod('roundRect');
         this.native.roundRect(x, y, width, height, radii);
     }
+    trim(start, end) {
+        this.native.trim(start, end);
+    }
     __toSVG() {
-        //const __toSVG = this._getMethod('__toSVG');
         return this.native.__toSVG();
     }
 }

package/Canvas2D/Path2D/index.js.map

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

package/Dom/Dom.d.ts

@@ -1,10 +1,29 @@
 import { EventData, LayoutBase, ViewBase } from '@nativescript/core';
+import { Canvas } from '../Canvas';
+declare enum State {
+    None = 0,
+    Pending = 1,
+    Invalidating = 2
+}
 export declare class Dom extends LayoutBase {
-    _canvas: any;
+    _canvas: Canvas;
     _children: any[];
+    _raf: any;
+    _state: State;
+    _isReady: boolean;
+    _onFrameCallback?: (frame: number) => void;
     constructor();
     createNativeView(): Object;
     initNativeView(): void;
+    onLoaded(): void;
+    onUnloaded(): void;
+    onLayout(left: number, top: number, right: number, bottom: number): void;
+    onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void;
+    set onFrameCallback(value: (frame: number) => void | null);
     _ready(args: EventData): void;
+    _draw(ts: any): void;
+    _bindRaf(): void;
+    _dirty(): void;
     _addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean;
 }
+export {};

package/Dom/Dom.js

@@ -1,34 +1,102 @@
-import { LayoutBase } from '@nativescript/core';
+import { LayoutBase, Utils, View } from '@nativescript/core';
 import { Canvas } from '../Canvas';
 import { Image } from './Image';
 import { Paint } from './Paint';
+var State;
+(function (State) {
+    State[State["None"] = 0] = "None";
+    State[State["Pending"] = 1] = "Pending";
+    State[State["Invalidating"] = 2] = "Invalidating";
+})(State || (State = {}));
 export class Dom extends LayoutBase {
     constructor() {
         super();
         this._children = [];
+        this._state = State.None;
+        this._isReady = false;
+        this._onFrameCallback = null;
         this._canvas = new Canvas();
         this._canvas.on('ready', this._ready.bind(this));
     }
     createNativeView() {
-        return new android.widget.LinearLayout(this._context);
+        if (global.isIOS) {
+            return UIView.new();
+        }
+        if (global.isAndroid) {
+            return new android.widget.LinearLayout(this._context);
+        }
+        return null;
     }
     initNativeView() {
         super.initNativeView();
         this._addView(this._canvas);
     }
+    onLoaded() {
+        super.onLoaded();
+        if (this._ready) {
+            this._bindRaf();
+        }
+    }
+    onUnloaded() {
+        if (this._raf) {
+            cancelAnimationFrame(this._raf);
+            this._raf = undefined;
+            this._state = State.Pending;
+        }
+        super.onUnloaded();
+    }
+    onLayout(left, top, right, bottom) {
+        super.onLayout(left, top, right, bottom);
+        View.layoutChild(this, this._canvas, left, top, right, bottom);
+    }
+    onMeasure(widthMeasureSpec, heightMeasureSpec) {
+        const nativeView = this.nativeView;
+        if (nativeView) {
+            const width = Utils.layout.getMeasureSpecSize(widthMeasureSpec);
+            const height = Utils.layout.getMeasureSpecSize(heightMeasureSpec);
+            View.measureChild(this, this._canvas, width, height);
+            this.setMeasuredDimension(width, height);
+        }
+    }
+    set onFrameCallback(value) {
+        this._onFrameCallback = value;
+    }
     _ready(args) {
-        console.time('_ready');
-        for (const child of this._children) {
-            child.draw();
+        this._isReady = true;
+        this._dirty();
+        this._draw(null);
+    }
+    _draw(ts) {
+        const state = this._state & State.Pending;
+        if (state === State.Pending) {
+            const ctx = this._canvas.getContext('2d');
+            this._state = State.Invalidating;
+            ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+            for (const child of this._children) {
+                child.draw();
+            }
+            this._state = State.None;
         }
-        // this._children.forEach((child) => {
-        // 	child.draw();
-        // });
-        console.timeEnd('_ready');
+        this._onFrameCallback?.(ts);
+        this._bindRaf();
+    }
+    _bindRaf() {
+        if (!this._isReady) {
+            return;
+        }
+        this._raf = requestAnimationFrame(this._draw.bind(this));
+    }
+    _dirty() {
+        this._state = this._state | State.Pending;
     }
     _addViewToNativeVisualTree(view, atIndex) {
         if (view === this._canvas) {
-            this.nativeView.addView(this._canvas.nativeView);
+            if (global.isIOS) {
+                this.nativeView.addSubview(this._canvas.nativeView);
+            }
+            if (global.isAndroid) {
+                this.nativeView.addView(this._canvas.nativeView);
+            }
             return true;
         }
         else if (view instanceof Paint || view instanceof Image) {

package/Dom/Dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dom.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAY,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,MAAM,OAAO,GAAI,SAAQ,UAAU;IAIlC;QACC,KAAK,EAAE,CAAC;QAHT,cAAS,GAAG,EAAE,CAAC;QAId,IAAI,CAAC,OAAO,GAAG,IAAI,MAAM,EAAE,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,gBAAgB;QACf,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvD,CAAC;IAED,cAAc;QACb,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM,CAAC,IAAe;QACrB,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACvB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,SAAS,EAAE;YACnC,KAAK,CAAC,IAAI,EAAE,CAAC;SACb;QAED,sCAAsC;QACtC,iBAAiB;QACjB,MAAM;QACN,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC;IACD,0BAA0B,CAAC,IAAc,EAAE,OAAgB;QAC1D,IAAI,IAAI,KAAK,IAAI,CAAC,OAAO,EAAE;YAC1B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YACjD,OAAO,IAAI,CAAC;SACZ;aAAM,IAAI,IAAI,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,EAAE;YAC1D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC1B;QACD,OAAO,KAAK,CAAC;IACd,CAAC;CACD"}
+{"version":3,"file":"Dom.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Dom.ts"],"names":[],"mappings":"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"}

package/Dom/Group.d.ts

@@ -1,5 +1,8 @@
 import { Property, ShorthandProperty, Style, ViewBase } from '@nativescript/core';
+import { View } from '@nativescript/core/ui/core/view';
 import { Paint } from './Paint';
+import { DOMMatrix } from '../Canvas2D/DOMMatrix';
+import { Canvas } from '../Canvas';
 export declare const matrixProperty: Property<Group, DOMMatrix>;
 export declare const originProperty: ShorthandProperty<Style, {
     x: number;
@@ -15,6 +18,8 @@ export declare class Group extends Paint {
     constructor();
     set origin(value: any);
     get origin(): any;
+    _addCanvas(canvas: Canvas): void;
+    addChild(view: View): void;
     draw(): void;
     _addViewToNativeVisualTree(view: ViewBase, _atIndex?: number): boolean;
     _removeViewFromNativeVisualTree(view: ViewBase): void;

package/Dom/Group.js

@@ -2,6 +2,7 @@ import { Property, ShorthandProperty, Style } from '@nativescript/core';
 import { originXProperty, originYProperty } from '@nativescript/core/ui/core/view';
 import { Image } from './Image';
 import { Paint } from './Paint';
+import { DOMMatrix } from '../Canvas2D/DOMMatrix';
 export const matrixProperty = new Property({
     name: 'matrix',
 });
@@ -159,6 +160,7 @@ export class Group extends Paint {
                 parseTransformation(item, matrix);
             });
             this._matrix = matrix;
+            this.invalidate();
         }
     }
     set origin(value) {
@@ -169,6 +171,19 @@ export class Group extends Paint {
         // @ts-ignore
         return this.style.origin;
     }
+    _addCanvas(canvas) {
+        this._canvas = canvas;
+        for (const child of this._children) {
+            child._addCanvas(canvas);
+        }
+    }
+    addChild(view) {
+        if (view instanceof Paint || view instanceof Image) {
+            view._addCanvas(this._canvas);
+            view._inGroup = true;
+            this._children.add(view);
+        }
+    }
     draw() {
         if (this._children.size > 0) {
             const context = this._canvas.getContext('2d');

package/Dom/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Group.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Group.ts"],"names":[],"mappings":"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"}

package/Dom/Image.d.ts

@@ -8,5 +8,6 @@ export declare class Image extends View {
     _canvas: Canvas;
     _addCanvas(canvas: Canvas): void;
     image: any;
+    invalidate(): void;
     draw(): void;
 }

package/Dom/Image.js

@@ -1,23 +1,43 @@
 import { Property, View } from '@nativescript/core';
+import { Dom } from './Dom';
+import { Paint } from './Paint';
 const xProperty = new Property({
     name: 'x',
     valueConverter(value) {
         return parseFloat(value);
     },
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
 });
 const yProperty = new Property({
     name: 'y',
     valueConverter(value) {
         return parseFloat(value);
     },
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
 });
 const imageProperty = new Property({
     name: 'image',
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
 });
 export class Image extends View {
     _addCanvas(canvas) {
         this._canvas = canvas;
     }
+    invalidate() {
+        const parent = this.parent;
+        if (parent instanceof Dom) {
+            parent._dirty?.();
+        }
+        else if (parent instanceof Paint) {
+            parent.invalidate();
+        }
+    }
     draw() {
         if (this.image === undefined) {
             return;

package/Dom/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Image.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,QAAQ,EAAE,IAAI,EAAoB,MAAM,oBAAoB,CAAC;AAI/F,MAAM,SAAS,GAAG,IAAI,QAAQ,CAAgB;IAC7C,IAAI,EAAE,GAAG;IACT,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,IAAI,QAAQ,CAAgB;IAC7C,IAAI,EAAE,GAAG;IACT,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,IAAI,QAAQ,CAAa;IAC9C,IAAI,EAAE,OAAO;CACb,CAAC,CAAC;AAEH,MAAM,OAAO,KAAM,SAAQ,IAAI;IAO9B,UAAU,CAAC,MAAc;QACxB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IACvB,CAAC;IAID,IAAI;QACH,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC7B,OAAO;SACP;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAQ,CAAC;QAErD,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,KAAY,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/E,CAAC;CACD;AAED,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC9B,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC1B,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC"}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Image.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,QAAQ,EAAE,IAAI,EAAoB,MAAM,oBAAoB,CAAC;AAG/F,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,SAAS,GAAG,IAAI,QAAQ,CAAgB;IAC7C,IAAI,EAAE,GAAG;IACT,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IACD,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ;QACtC,MAAM,CAAC,UAAU,EAAE,CAAC;IACrB,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,IAAI,QAAQ,CAAgB;IAC7C,IAAI,EAAE,GAAG;IACT,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IACD,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ;QACtC,MAAM,CAAC,UAAU,EAAE,CAAC;IACrB,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,IAAI,QAAQ,CAAa;IAC9C,IAAI,EAAE,OAAO;IACb,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ;QACtC,MAAM,CAAC,UAAU,EAAE,CAAC;IACrB,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,OAAO,KAAM,SAAQ,IAAI;IAO9B,UAAU,CAAC,MAAc;QACxB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IACvB,CAAC;IAID,UAAU;QACT,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,MAAM,YAAY,GAAG,EAAE;YAC1B,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC;SAClB;aAAM,IAAI,MAAM,YAAY,KAAK,EAAE;YACnC,MAAM,CAAC,UAAU,EAAE,CAAC;SACpB;IACF,CAAC;IAED,IAAI;QACH,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC7B,OAAO;SACP;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAQ,CAAC;QAErD,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,KAAY,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/E,CAAC;CACD;AAED,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC9B,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC1B,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC"}

package/Dom/Paint.d.ts

@@ -2,13 +2,17 @@ import { LayoutBase, Property } from '@nativescript/core';
 import { Canvas } from '../Canvas';
 export declare const paintStyleProperty: any;
 export declare const strokeWidthProperty: Property<Paint, number>;
+export declare const strokeJoinProperty: Property<Paint, "bevel" | "miter" | "round">;
 export declare class Paint extends LayoutBase {
     strokeWidth: number;
+    strokeJoin: 'bevel' | 'miter' | 'round';
     _canvas: Canvas;
     _addCanvas(canvas: Canvas): void;
     paintStyle: 'fill' | 'stroke';
     _paintStyleDirty: boolean;
     _inGroup: boolean;
+    invalidate(): void;
+    _getStrokeJoin(): any;
     _getStrokeWidth(): any;
     _getPaintStyle(): any;
     _getColor(): any;

package/Dom/Paint.js

@@ -1,11 +1,12 @@
 import { Color, LayoutBase, Property } from '@nativescript/core';
 export const paintStyleProperty = new Property({
     name: 'paintStyle',
-    defaultValue: 'fill',
 });
 export const strokeWidthProperty = new Property({
     name: 'strokeWidth',
-    defaultValue: 1,
+});
+export const strokeJoinProperty = new Property({
+    name: 'strokeJoin',
 });
 const defaultColor = new Color('black');
 export class Paint extends LayoutBase {
@@ -20,16 +21,25 @@ export class Paint extends LayoutBase {
     [paintStyleProperty.setNative](value) {
         this._paintStyleDirty = true;
     }
+    invalidate() {
+        const parent = this.parent;
+        if (parent != null) {
+            parent._dirty?.();
+        }
+    }
+    _getStrokeJoin() {
+        return this.parent?.strokeJoin ?? this.strokeJoin ?? 'miter';
+    }
     _getStrokeWidth() {
-        return this.parent?.strokeWidth ?? this.strokeWidth;
+        return this.parent?.strokeWidth ?? this.strokeWidth ?? 1;
     }
     _getPaintStyle() {
         const paintStyle = this.paintStyle;
-        if (paintStyle !== 'fill') {
+        if (paintStyle === 'stroke') {
             return paintStyle;
         }
         if (this._inGroup) {
-            return this.parent.paintStyle;
+            return this.parent?._getPaintStyle?.();
         }
         return 'fill';
     }
@@ -45,7 +55,8 @@ export class Paint extends LayoutBase {
         const color = this._getColor();
         const context = this._canvas.getContext('2d');
         const style = this._getPaintStyle();
-        context.closePath();
+        //context.closePath();
+        context.globalAlpha = this.opacity;
         if (style === 'fill') {
             context.fillStyle = color;
             context.fill();
@@ -55,9 +66,10 @@ export class Paint extends LayoutBase {
             context.strokeStyle = color;
             context.stroke();
         }
-        context.beginPath();
+        //context.beginPath();
     }
 }
 paintStyleProperty.register(Paint);
 strokeWidthProperty.register(Paint);
+strokeJoinProperty.register(Paint);
 //# sourceMappingURL=Paint.js.map

package/Dom/Paint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paint.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Paint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGjE,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,QAAQ,CAA2B;IACxE,IAAI,EAAE,YAAY;IAClB,YAAY,EAAE,MAAM;CACpB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,QAAQ,CAAgB;IAC9D,IAAI,EAAE,aAAa;IACnB,YAAY,EAAE,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;AACxC,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QASC,qBAAgB,GAAG,KAAK,CAAC;QAEzB,aAAQ,GAAG,KAAK,CAAC;IAiDlB,CAAC;IAzDA,UAAU,CAAC,MAAc;QACxB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IACvB,CAAC;IAQD,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,KAAK;QACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAC9B,CAAC;IAED,eAAe;QACd,OAAQ,IAAI,CAAC,MAAc,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC;IAC9D,CAAC;IACD,cAAc;QACb,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,UAAU,KAAK,MAAM,EAAE;YAC1B,OAAO,UAAU,CAAC;SAClB;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAQ,IAAI,CAAC,MAAc,CAAC,UAAU,CAAC;SACvC;QACD,OAAO,MAAM,CAAC;IACf,CAAC;IAED,SAAS;QACR,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,YAAY,CAAC;QACzC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;QACtB,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,KAAK,SAAS,EAAE;YAChD,OAAO,GAAG,CAAC;SACX;QACD,OAAQ,IAAI,CAAC,MAAc,EAAE,KAAK,EAAE,GAAG,IAAI,GAAG,CAAC;IAChD,CAAC;IAED,IAAI;QACH,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAE/B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAoC,CAAC;QAEjF,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAEpC,OAAO,CAAC,SAAS,EAAE,CAAC;QAEpB,IAAI,KAAK,KAAK,MAAM,EAAE;YACrB,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;YAC1B,OAAO,CAAC,IAAI,EAAE,CAAC;SACf;aAAM,IAAI,KAAK,KAAK,QAAQ,EAAE;YAC9B,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YAC3C,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC;YAC5B,OAAO,CAAC,MAAM,EAAE,CAAC;SACjB;QAED,OAAO,CAAC,SAAS,EAAE,CAAC;IACrB,CAAC;CACD;AAED,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACnC,mBAAmB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC"}
+{"version":3,"file":"Paint.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Paint.ts"],"names":[],"mappings":"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"}

package/Dom/Shadow.js

@@ -5,18 +5,27 @@ export const dxProperty = new Property({
     valueConverter(value) {
         return parseFloat(value);
     },
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
 });
 export const dyProperty = new Property({
     name: 'dy',
     valueConverter(value) {
         return parseFloat(value);
     },
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
 });
 export const blurProperty = new Property({
     name: 'blur',
     valueConverter(value) {
         return parseFloat(value);
     },
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
 });
 export class Shadow extends Paint {
 }

package/Dom/Shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Shadow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,QAAQ,CAAiB;IACtD,IAAI,EAAE,IAAI;IACV,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,QAAQ,CAAiB;IACtD,IAAI,EAAE,IAAI;IACV,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,QAAQ,CAAiB;IACxD,IAAI,EAAE,MAAM;IACZ,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,OAAO,MAAO,SAAQ,KAAK;CAIhC;AAED,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC5B,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Shadow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,QAAQ,CAAiB;IACtD,IAAI,EAAE,IAAI;IACV,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IACD,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ;QACtC,MAAM,CAAC,UAAU,EAAE,CAAC;IACrB,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,QAAQ,CAAiB;IACtD,IAAI,EAAE,IAAI;IACV,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IACD,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ;QACtC,MAAM,CAAC,UAAU,EAAE,CAAC;IACrB,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,QAAQ,CAAiB;IACxD,IAAI,EAAE,MAAM;IACZ,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IACD,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ;QACtC,MAAM,CAAC,UAAU,EAAE,CAAC;IACrB,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,OAAO,MAAO,SAAQ,KAAK;CAIhC;AAED,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC5B,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC"}

package/Dom/Text.js

@@ -5,15 +5,24 @@ const xProperty = new Property({
     valueConverter(value) {
         return parseFloat(value);
     },
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
 });
 const yProperty = new Property({
     name: 'y',
     valueConverter(value) {
         return parseFloat(value);
     },
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
 });
 const textProperty = new Property({
     name: 'text',
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
 });
 export class Text extends Paint {
     set font(value) {
@@ -37,7 +46,8 @@ export class Text extends Paint {
                 break;
             case 'stroke':
                 context.strokeStyle = color;
-                context.lineWidth = this.strokeWidth;
+                context.lineWidth = this._getStrokeWidth();
+                context.lineJoin = this._getStrokeJoin();
                 context.strokeText(this.text, this.x, this.y);
                 break;
         }

package/Dom/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAU,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,SAAS,GAAG,IAAI,QAAQ,CAAe;IAC5C,IAAI,EAAE,GAAG;IACT,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,IAAI,QAAQ,CAAe;IAC5C,IAAI,EAAE,GAAG;IACT,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,IAAI,QAAQ,CAAe;IAC/C,IAAI,EAAE,MAAM;CACZ,CAAC,CAAC;AAEH,MAAM,OAAO,IAAK,SAAQ,KAAK;IAK9B,IAAI,IAAI,CAAC,KAAK;QACb,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,IAAI;QACH,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAClC,OAAO;SACP;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAQ,CAAC;QAErD,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YACnC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;SAC1B;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACpC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC/B,QAAQ,KAAK,EAAE;YACd,KAAK,MAAM;gBACV,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;gBAC1B,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;gBAC5C,MAAM;YACP,KAAK,QAAQ;gBACZ,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC;gBAC5B,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;gBACrC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;gBAC9C,MAAM;SACP;IACF,CAAC;CACD;AAED,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC5B,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AACzB,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAU,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,SAAS,GAAG,IAAI,QAAQ,CAAe;IAC5C,IAAI,EAAE,GAAG;IACT,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IACD,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ;QACtC,MAAM,CAAC,UAAU,EAAE,CAAC;IACrB,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,IAAI,QAAQ,CAAe;IAC5C,IAAI,EAAE,GAAG;IACT,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IACD,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ;QACtC,MAAM,CAAC,UAAU,EAAE,CAAC;IACrB,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,IAAI,QAAQ,CAAe;IAC/C,IAAI,EAAE,MAAM;IACZ,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ;QACtC,MAAM,CAAC,UAAU,EAAE,CAAC;IACrB,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,OAAO,IAAK,SAAQ,KAAK;IAK9B,IAAI,IAAI,CAAC,KAAK;QACb,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,IAAI;QACH,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAClC,OAAO;SACP;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAQ,CAAC;QAErD,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YACnC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;SAC1B;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACpC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC/B,QAAQ,KAAK,EAAE;YACd,KAAK,MAAM;gBACV,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;gBAC1B,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;gBAC5C,MAAM;YACP,KAAK,QAAQ;gBACZ,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC;gBAC5B,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC3C,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;gBACzC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;gBAC9C,MAAM;SACP;IACF,CAAC;CACD;AAED,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC5B,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AACzB,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC"}

package/Dom/index.d.ts

@@ -6,3 +6,4 @@ export * from './Paint';
 export * from './Fill';
 export * from './Text';
 export * from './Shadow';
+export * from './shaders';

package/Dom/index.js

@@ -6,4 +6,5 @@ export * from './Paint';
 export * from './Fill';
 export * from './Text';
 export * from './Shadow';
+export * from './shaders';
 //# sourceMappingURL=index.js.map

package/Dom/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}

package/Dom/shaders/Gradients.d.ts

@@ -0,0 +1,3 @@
+import { Paint } from '../Paint';
+export declare class Gradients extends Paint {
+}

package/Dom/shaders/Gradients.js

@@ -0,0 +1,4 @@
+import { Paint } from '../Paint';
+export class Gradients extends Paint {
+}
+//# sourceMappingURL=Gradients.js.map

package/Dom/shaders/Gradients.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gradients.js","sourceRoot":"","sources":["../../../../../packages/canvas/Dom/shaders/Gradients.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,OAAO,SAAU,SAAQ,KAAK;CAAG"}

package/Dom/shaders/LinearGradient.d.ts

@@ -0,0 +1,14 @@
+import { Gradients } from './Gradients';
+export declare class LinearGradient extends Gradients {
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+    colors: string[];
+    _getColor(): import("../..").CanvasGradient;
+    draw(): void;
+}

package/Dom/shaders/LinearGradient.js

@@ -0,0 +1,44 @@
+import { Property } from '@nativescript/core';
+import { Gradients } from './Gradients';
+const startProperty = new Property({
+    name: 'start',
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
+});
+const endProperty = new Property({
+    name: 'end',
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
+});
+const colorsProperty = new Property({
+    name: 'colors',
+    valueChanged(target, oldValue, newValue) {
+        target.invalidate();
+    },
+});
+export class LinearGradient extends Gradients {
+    _getColor() {
+        const ctx = this._canvas.getContext('2d');
+        const gradient = ctx.createLinearGradient(this.start.x, this.start.y, this.end.x, this.end.y);
+        for (let i = 0; i < this.colors.length; i++) {
+            gradient.addColorStop(i, this.colors[i]);
+        }
+        return gradient;
+    }
+    draw() {
+        const ctx = this._canvas.getContext('2d');
+        const gradient = this._getColor();
+        if (this._getPaintStyle() === 'stroke') {
+            ctx.strokeStyle = gradient;
+        }
+        else {
+            ctx.fillStyle = gradient;
+        }
+    }
+}
+startProperty.register(LinearGradient);
+endProperty.register(LinearGradient);
+colorsProperty.register(LinearGradient);
+//# sourceMappingURL=LinearGradient.js.map