@nativescript/canvas 2.0.0-alpha.2 → 2.0.0-alpha.21

package/Dom/Fill.d.ts

@@ -0,0 +1,4 @@
+import { Paint } from './Paint';
+export declare class Fill extends Paint {
+    draw(): void;
+}

package/Dom/Fill.js

@@ -0,0 +1,8 @@
+import { Paint } from './Paint';
+export class Fill extends Paint {
+    draw() {
+        const context = this._canvas.getContext('2d');
+        context.drawPaint(this.color.hex);
+    }
+}
+//# sourceMappingURL=Fill.js.map

package/Dom/Fill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fill.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Fill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,OAAO,IAAK,SAAQ,KAAK;IAC9B,IAAI;QACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAQ,CAAC;QACrD,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACnC,CAAC;CACD"}

package/Dom/Group.d.ts

@@ -0,0 +1,21 @@
+import { Property, ShorthandProperty, Style, ViewBase } from '@nativescript/core';
+import { Paint } from './Paint';
+export declare const matrixProperty: Property<Group, DOMMatrix>;
+export declare const originProperty: ShorthandProperty<Style, {
+    x: number;
+    y: number;
+}>;
+export declare const transformProperty: Property<Group, any>;
+export declare class Group extends Paint {
+    _children: Set<Paint>;
+    _matrix: DOMMatrix;
+    origin: {
+        x: number;
+        y: number;
+    };
+    transform: any;
+    constructor();
+    draw(): void;
+    _addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean;
+    _removeViewFromNativeVisualTree(view: ViewBase): void;
+}

package/Dom/Group.js

@@ -0,0 +1,179 @@
+import { Property, ShorthandProperty, Style } from '@nativescript/core';
+import { originXProperty, originYProperty } from '@nativescript/core/ui/core/view';
+import { Image } from './Image';
+import { Paint } from './Paint';
+export const matrixProperty = new Property({
+    name: 'matrix',
+});
+export const originProperty = new ShorthandProperty({
+    name: 'origin',
+    cssName: 'origin',
+    getter: function () {
+        const view = this;
+        return { x: view.originX, y: view.originY };
+    },
+    converter(value) {
+        if (value === null || value === undefined) {
+            return [];
+        }
+        const type = typeof value;
+        if (type === 'string') {
+            try {
+                const val = JSON.parse(value);
+                return [
+                    [originXProperty, val.x],
+                    [originYProperty, val.y],
+                ];
+            }
+            catch (error) { }
+        }
+        if (type === 'object') {
+            return [
+                [originXProperty, value.x],
+                [originYProperty, value.y],
+            ];
+        }
+        return [];
+    },
+});
+export const transformProperty = new Property({
+    name: 'transform',
+});
+/*
+ScaleX = 0,
+    SkewX = 4,
+    TransX = 12,
+    SkewY = 1,
+    ScaleY = 5,
+    TransY = 13,
+    Persp0 = 3,
+    Persp1 = 7,
+    Persp2 = 15,
+*/
+/*
+M11 = 0,
+    M12 = 1,
+    M13 = 2,
+    M14 = 3,
+    M21 = 4,
+    M22 = 5,
+    M23 = 6,
+    M24 = 7,
+    M31 = 8,
+    M32 = 9,
+    M33 = 10,
+    M34 = 11,
+    M41 = 12,
+    M42 = 13,
+    M43 = 14,
+    M44 = 15,
+*/
+function parseTransformation(value, transform) {
+    /*
+        {matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}
+        */
+    const matrix = value.matrix;
+    if (Array.isArray(matrix)) {
+        // todo
+        //const add = new DOMMatrix(matrix);
+        return;
+    }
+    const perspective = value.perspective;
+    if (typeof perspective === 'number') {
+        return;
+    }
+    const rotate = value.rotate;
+    if (typeof rotate === 'string') {
+        return;
+    }
+    const rotateX = value.rotateX;
+    if (typeof rotateX === 'string') {
+        return;
+    }
+    const rotateY = value.rotateY;
+    if (typeof rotateY === 'string') {
+        return;
+    }
+    const rotateZ = value.rotateZ;
+    if (typeof rotateZ === 'string') {
+        return;
+    }
+    const scale = value.scale;
+    if (typeof scale === 'number') {
+        return;
+    }
+    const scaleX = value.scaleX;
+    if (typeof scaleX === 'number') {
+        return;
+    }
+    const scaleY = value.scaleY;
+    if (typeof scaleY === 'number') {
+        return;
+    }
+    const translateX = value.translateX;
+    if (typeof translateX === 'number') {
+        return;
+    }
+    const translateY = value.translateY;
+    if (typeof translateY === 'number') {
+        return;
+    }
+    const skewX = value.skewX;
+    if (typeof skewX === 'string') {
+        return;
+    }
+    const skewY = value.translateY;
+    if (typeof skewY === 'string') {
+        return;
+    }
+}
+[{ skewX: Math.PI / 6 }];
+export class Group extends Paint {
+    constructor() {
+        super();
+        this._children = new Set();
+    }
+    [transformProperty.setNative](value) {
+        if (typeof value === 'string') {
+            try {
+                const val = JSON.parse(JSON.stringify(value));
+                const matrix = new DOMMatrix();
+                if (Array.isArray(val)) {
+                    val.forEach((item) => {
+                        parseTransformation(val, matrix);
+                    });
+                }
+                this._matrix = matrix;
+            }
+            catch (error) { }
+        }
+    }
+    draw() {
+        if (this._children.size > 0) {
+            const context = this._canvas.getContext('2d');
+            context.save();
+            context.translate(this.originX, this.originY);
+            this._children.forEach((child) => {
+                child.draw();
+            });
+            context.restore();
+        }
+    }
+    _addViewToNativeVisualTree(view, atIndex) {
+        if (view instanceof Paint || view instanceof Image) {
+            view._addCanvas(this._canvas);
+            view._inGroup = true;
+            this._children.add(view);
+        }
+        return false;
+    }
+    _removeViewFromNativeVisualTree(view) {
+        view._inGroup = false;
+        this._children.delete(view);
+        super._removeViewFromNativeVisualTree(view);
+    }
+}
+matrixProperty.register(Group);
+originProperty.register(Style);
+transformProperty.register(Group);
+//# sourceMappingURL=Group.js.map

package/Dom/Group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,QAAQ,EAAE,iBAAiB,EAAE,KAAK,EAAY,MAAM,oBAAoB,CAAC;AAC9F,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,QAAQ,CAAmB;IAC5D,IAAI,EAAE,QAAQ;CACd,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,iBAAiB,CAAkC;IACpF,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE;QACP,MAAM,IAAI,GAAG,IAAW,CAAC;QACzB,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;IAC7C,CAAC;IACD,SAAS,CAAC,KAAU;QACnB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;YAC1C,OAAO,EAAE,CAAC;SACV;QACD,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC;QAC1B,IAAI,IAAI,KAAK,QAAQ,EAAE;YACtB,IAAI;gBACH,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAY,CAAC,CAAC;gBACrC,OAAO;oBACN,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC;oBACxB,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC;iBACxB,CAAC;aACF;YAAC,OAAO,KAAK,EAAE,GAAE;SAClB;QAED,IAAI,IAAI,KAAK,QAAQ,EAAE;YACtB,OAAO;gBACN,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;gBAC1B,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;aAC1B,CAAC;SACF;QAED,OAAO,EAAE,CAAC;IACX,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,QAAQ,CAAa;IACzD,IAAI,EAAE,WAAW;CACjB,CAAC,CAAC;AAEH;;;;;;;;;;EAUE;AAEF;;;;;;;;;;;;;;;;;EAiBE;AAEF,SAAS,mBAAmB,CAAC,KAAK,EAAE,SAAoB;IACvD;;UAEG;IAEH,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAE5B,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QAC1B,OAAO;QACP,oCAAoC;QACpC,OAAO;KACP;IAED,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;IAEtC,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE;QACpC,OAAO;KACP;IAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAE5B,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC/B,OAAO;KACP;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAE9B,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QAChC,OAAO;KACP;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAE9B,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QAChC,OAAO;KACP;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAE9B,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QAChC,OAAO;KACP;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;IAE1B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC9B,OAAO;KACP;IAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAE5B,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC/B,OAAO;KACP;IAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAE5B,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC/B,OAAO;KACP;IAED,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;IAEpC,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;QACnC,OAAO;KACP;IAED,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;IAEpC,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;QACnC,OAAO;KACP;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;IAE1B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC9B,OAAO;KACP;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC;IAE/B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC9B,OAAO;KACP;AACF,CAAC;AAED,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AAEzB,MAAM,OAAO,KAAM,SAAQ,KAAK;IAM/B;QACC,KAAK,EAAE,CAAC;QANT,cAAS,GAAe,IAAI,GAAG,EAAE,CAAC;IAOlC,CAAC;IACD,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,KAAK;QAClC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC9B,IAAI;gBACH,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAU,CAAC;gBAEvD,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;gBAE/B,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;oBACvB,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;wBACpB,mBAAmB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;oBAClC,CAAC,CAAC,CAAC;iBACH;gBAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;aACtB;YAAC,OAAO,KAAK,EAAE,GAAE;SAClB;IACF,CAAC;IACD,IAAI;QACH,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,EAAE;YAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAoC,CAAC;YACjF,OAAO,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YAC9C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAChC,KAAK,CAAC,IAAI,EAAE,CAAC;YACd,CAAC,CAAC,CAAC;YACH,OAAO,CAAC,OAAO,EAAE,CAAC;SAClB;IACF,CAAC;IAED,0BAA0B,CAAC,IAAc,EAAE,OAAgB;QAC1D,IAAI,IAAI,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,EAAE;YACnD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC7B,IAAY,CAAC,QAAQ,GAAG,IAAI,CAAC;YAC9B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAW,CAAC,CAAC;SAChC;QACD,OAAO,KAAK,CAAC;IACd,CAAC;IACD,+BAA+B,CAAC,IAAc;QAC5C,IAAY,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAW,CAAC,CAAC;QACnC,KAAK,CAAC,+BAA+B,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;CACD;AAED,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC/B,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC/B,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC"}

package/Dom/Image.d.ts

@@ -0,0 +1,12 @@
+import { View } from '@nativescript/core';
+import { Canvas } from '../Canvas';
+export declare class Image extends View {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    _canvas: Canvas;
+    _addCanvas(canvas: Canvas): void;
+    image: any;
+    draw(): void;
+}

package/Dom/Image.js

@@ -0,0 +1,33 @@
+import { Property, View, Screen } from '@nativescript/core';
+const xProperty = new Property({
+    name: 'x',
+    valueConverter(value) {
+        return parseFloat(value);
+    },
+});
+const yProperty = new Property({
+    name: 'y',
+    valueConverter(value) {
+        return parseFloat(value);
+    },
+});
+const imageProperty = new Property({
+    name: 'image',
+});
+export class Image extends View {
+    _addCanvas(canvas) {
+        this._canvas = canvas;
+    }
+    draw() {
+        if (this.image === undefined) {
+            return;
+        }
+        const context = this._canvas.getContext('2d');
+        const scale = Screen.mainScreen.scale;
+        context.drawImage(this.image, this.x * scale, this.y * scale, this.width * scale, this.height * scale);
+    }
+}
+imageProperty.register(Image);
+xProperty.register(Image);
+yProperty.register(Image);
+//# sourceMappingURL=Image.js.map

package/Dom/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Image.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,QAAQ,EAAE,IAAI,EAAY,MAAM,EAAE,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;QACrD,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;QAEtC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,KAAY,EAAE,IAAI,CAAC,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;IAC/G,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

@@ -0,0 +1,15 @@
+import { LayoutBase, Property } from '@nativescript/core';
+import { Canvas } from '../Canvas';
+export declare const paintStyleProperty: any;
+export declare const strokeWidthProperty: Property<Paint, number>;
+export declare class Paint extends LayoutBase {
+    strokeWidth: number;
+    _canvas: Canvas;
+    _addCanvas(canvas: Canvas): void;
+    paintStyle: 'fill' | 'stroke';
+    _paintStyleDirty: boolean;
+    _inGroup: boolean;
+    _getPaintStyle(): any;
+    _getColor(): any;
+    draw(): void;
+}

package/Dom/Paint.js

@@ -0,0 +1,57 @@
+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 class Paint extends LayoutBase {
+    constructor() {
+        super(...arguments);
+        this._paintStyleDirty = false;
+        this._inGroup = false;
+    }
+    _addCanvas(canvas) {
+        this._canvas = canvas;
+    }
+    [paintStyleProperty.setNative](value) {
+        this._paintStyleDirty = true;
+    }
+    _getPaintStyle() {
+        const paintStyle = this.paintStyle;
+        if (paintStyle !== 'fill') {
+            return paintStyle;
+        }
+        if (this._inGroup) {
+            return this.parent.paintStyle;
+        }
+        return 'fill';
+    }
+    _getColor() {
+        const color = this.color ?? new Color('black');
+        const hex = color.hex;
+        if (color.name !== 'black' || hex !== '#000000') {
+            return hex;
+        }
+        return this.parent?.color?.hex ?? hex;
+    }
+    draw() {
+        const color = this._getColor();
+        const context = this._canvas.getContext('2d');
+        context.lineWidth = this.strokeWidth;
+        const style = this._getPaintStyle();
+        if (style === 'fill') {
+            context.fillStyle = color;
+            context.fill();
+        }
+        else if (style === 'stroke') {
+            context.strokeStyle = color;
+            context.stroke();
+        }
+    }
+}
+paintStyleProperty.register(Paint);
+strokeWidthProperty.register(Paint);
+//# sourceMappingURL=Paint.js.map

package/Dom/Paint.js.map

@@ -0,0 +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,OAAO,KAAM,SAAQ,UAAU;IAArC;;QASC,qBAAgB,GAAG,KAAK,CAAC;QAEzB,aAAQ,GAAG,KAAK,CAAC;IA2ClB,CAAC;IAnDA,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,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,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;QAC/C,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,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;QAErC,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAEpC,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,WAAW,GAAG,KAAK,CAAC;YAC5B,OAAO,CAAC,MAAM,EAAE,CAAC;SACjB;IACF,CAAC;CACD;AAED,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACnC,mBAAmB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC"}

package/Dom/Shadow.d.ts

@@ -0,0 +1,10 @@
+import { Property } from '@nativescript/core';
+import { Paint } from './Paint';
+export declare const dxProperty: Property<Shadow, number>;
+export declare const dyProperty: Property<Shadow, number>;
+export declare const blurProperty: Property<Shadow, number>;
+export declare class Shadow extends Paint {
+    dx: number;
+    dy: number;
+    blur: number;
+}

package/Dom/Shadow.js

@@ -0,0 +1,26 @@
+import { Property } from '@nativescript/core';
+import { Paint } from './Paint';
+export const dxProperty = new Property({
+    name: 'dx',
+    valueConverter(value) {
+        return parseFloat(value);
+    },
+});
+export const dyProperty = new Property({
+    name: 'dy',
+    valueConverter(value) {
+        return parseFloat(value);
+    },
+});
+export const blurProperty = new Property({
+    name: 'blur',
+    valueConverter(value) {
+        return parseFloat(value);
+    },
+});
+export class Shadow extends Paint {
+}
+dxProperty.register(Shadow);
+dyProperty.register(Shadow);
+blurProperty.register(Shadow);
+//# sourceMappingURL=Shadow.js.map

package/Dom/Shadow.js.map

@@ -0,0 +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"}

package/Dom/Text.d.ts

@@ -0,0 +1,9 @@
+import { Paint } from './Paint';
+export declare class Text extends Paint {
+    x: number;
+    y: number;
+    text: string;
+    _font: string;
+    set font(value: any);
+    draw(): void;
+}

package/Dom/Text.js

@@ -0,0 +1,50 @@
+import { Property, Screen } from '@nativescript/core';
+import { Paint } from './Paint';
+const xProperty = new Property({
+    name: 'x',
+    valueConverter(value) {
+        return parseFloat(value);
+    },
+});
+const yProperty = new Property({
+    name: 'y',
+    valueConverter(value) {
+        return parseFloat(value);
+    },
+});
+const textProperty = new Property({
+    name: 'text',
+});
+export class Text extends Paint {
+    set font(value) {
+        this.style.font = value;
+        this._font = value;
+    }
+    draw() {
+        if (typeof this.text !== 'string') {
+            return;
+        }
+        const context = this._canvas.getContext('2d');
+        const scale = Screen.mainScreen.scale;
+        if (typeof this._font === 'string') {
+            context.font = this._font;
+        }
+        const style = this._getPaintStyle();
+        const color = this._getColor();
+        switch (style) {
+            case 'fill':
+                context.fillStyle = color;
+                context.fillText(this.text, this.x * scale, this.y * scale);
+                break;
+            case 'stroke':
+                context.strokeStyle = color;
+                context.lineWidth = this.strokeWidth;
+                context.strokeText(this.text, this.x * scale, this.y * scale);
+                break;
+        }
+    }
+}
+textProperty.register(Text);
+xProperty.register(Text);
+yProperty.register(Text);
+//# sourceMappingURL=Text.js.map

package/Dom/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../../packages/canvas/Dom/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,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;QACrD,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;QAEtC,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,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;gBAC5D,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,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;gBAC9D,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

@@ -0,0 +1,8 @@
+export * from './Image';
+export * from './Dom';
+export * from './shapes';
+export * from './Group';
+export * from './Paint';
+export * from './Fill';
+export * from './Text';
+export * from './Shadow';

package/Dom/index.js

@@ -0,0 +1,9 @@
+export * from './Image';
+export * from './Dom';
+export * from './shapes';
+export * from './Group';
+export * from './Paint';
+export * from './Fill';
+export * from './Text';
+export * from './Shadow';
+//# sourceMappingURL=index.js.map

package/Dom/index.js.map

@@ -0,0 +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"}

package/Dom/shapes/Circle.d.ts

@@ -0,0 +1,21 @@
+import { Property, ViewBase, ShorthandProperty, Style } from '@nativescript/core';
+import { Paint } from '../Paint';
+export declare const cxProperty: Property<Circle, number>;
+export declare const cyProperty: Property<Circle, number>;
+export declare const rProperty: Property<Circle, number>;
+interface Vector {
+    x: number;
+    y: number;
+}
+export declare const cProperty: ShorthandProperty<Style, Vector>;
+export declare class Circle extends Paint {
+    cx: number;
+    cy: number;
+    r: number;
+    _children: Paint[];
+    get c(): any;
+    set c(value: any);
+    draw(): void;
+    _addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean;
+}
+export {};

package/Dom/shapes/Circle.js

@@ -0,0 +1,98 @@
+import { Property, ShorthandProperty, Style } from '@nativescript/core';
+import { Paint } from '../Paint';
+export const cxProperty = new Property({
+    name: 'cx',
+    valueConverter(value) {
+        return parseFloat(value);
+    },
+});
+export const cyProperty = new Property({
+    name: 'cy',
+    valueConverter(value) {
+        return parseFloat(value);
+    },
+});
+export const rProperty = new Property({
+    name: 'r',
+    valueConverter(value) {
+        return parseFloat(value);
+    },
+});
+export const cProperty = new ShorthandProperty({
+    name: 'c',
+    cssName: 'c',
+    getter: function () {
+        return { x: this.cx, y: this.cy };
+    },
+    converter(value) {
+        if (typeof value === 'string') {
+            try {
+                const val = JSON.parse(value);
+                return [
+                    [cxProperty, val.x],
+                    [cyProperty, val.y],
+                ];
+            }
+            catch (error) { }
+        }
+        else {
+            return [
+                [cxProperty, value.x],
+                [cyProperty, value.y],
+            ];
+        }
+        return [];
+    },
+});
+export class Circle extends Paint {
+    constructor() {
+        super(...arguments);
+        this._children = [];
+    }
+    get c() {
+        return this.style.c;
+    }
+    set c(value) {
+        this.style.c = value;
+    }
+    draw() {
+        const context = this._canvas.getContext('2d');
+        const c = this.c;
+        context.arc(c.x ?? this.cx, c.y ?? this.cy, this.r, 0, 2 * Math.PI);
+        if (this._children.length > 0) {
+            this._children.forEach((child) => {
+                const color = child._getColor();
+                const style = child._getPaintStyle();
+                switch (style) {
+                    case 'fill':
+                        context.fillStyle = color;
+                        context.fill();
+                        break;
+                    case 'stroke':
+                        context.strokeStyle = color;
+                        context.lineWidth = child.strokeWidth;
+                        context.stroke();
+                        break;
+                }
+            });
+        }
+        else {
+            super.draw();
+        }
+    }
+    _addViewToNativeVisualTree(view, atIndex) {
+        if (view === this._canvas) {
+            this.nativeView.addView(this._canvas.nativeView);
+            return true;
+        }
+        else if (view instanceof Paint) {
+            this._children.push(view);
+        }
+        return false;
+    }
+}
+cxProperty.register(Circle);
+cyProperty.register(Circle);
+rProperty.register(Circle);
+cProperty.register(Style);
+//# sourceMappingURL=Circle.js.map

package/Dom/shapes/Circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Circle.js","sourceRoot":"","sources":["../../../../../packages/canvas/Dom/shapes/Circle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAA8B,iBAAiB,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEnH,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,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,SAAS,GAAG,IAAI,QAAQ,CAAiB;IACrD,IAAI,EAAE,GAAG;IACT,cAAc,CAAC,KAAK;QACnB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;CACD,CAAC,CAAC;AAOH,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,iBAAiB,CAAgB;IAC7D,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE;QACP,OAAO,EAAE,CAAC,EAAG,IAAY,CAAC,EAAE,EAAE,CAAC,EAAG,IAAY,CAAC,EAAE,EAAE,CAAC;IACrD,CAAC;IACD,SAAS,CAAC,KAAK;QACd,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC9B,IAAI;gBACH,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBAC9B,OAAO;oBACN,CAAC,UAAU,EAAE,GAAG,CAAC,CAAW,CAAC;oBAC7B,CAAC,UAAU,EAAE,GAAG,CAAC,CAAW,CAAC;iBAC7B,CAAC;aACF;YAAC,OAAO,KAAK,EAAE,GAAE;SAClB;aAAM;YACN,OAAO;gBACN,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;gBACrB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;aACrB,CAAC;SACF;QACD,OAAO,EAAE,CAAC;IACX,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,OAAO,MAAO,SAAQ,KAAK;IAAjC;;QAKC,cAAS,GAAY,EAAE,CAAC;IA8CzB,CAAC;IA5CA,IAAI,CAAC;QACJ,OAAQ,IAAI,CAAC,KAAa,CAAC,CAAC,CAAC;IAC9B,CAAC;IAED,IAAI,CAAC,CAAC,KAAK;QACT,IAAI,CAAC,KAAa,CAAC,CAAC,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED,IAAI;QACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAoC,CAAC;QAEjF,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;QAEjB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;QACpE,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAChC,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;gBAChC,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC;gBACrC,QAAQ,KAAK,EAAE;oBACd,KAAK,MAAM;wBACV,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;wBAC1B,OAAO,CAAC,IAAI,EAAE,CAAC;wBACf,MAAM;oBACP,KAAK,QAAQ;wBACZ,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC;wBAC5B,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC;wBACtC,OAAO,CAAC,MAAM,EAAE,CAAC;wBACjB,MAAM;iBACP;YACF,CAAC,CAAC,CAAC;SACH;aAAM;YACN,KAAK,CAAC,IAAI,EAAE,CAAC;SACb;IACF,CAAC;IAED,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,EAAE;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC1B;QACD,OAAO,KAAK,CAAC;IACd,CAAC;CACD;AAED,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC5B,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC5B,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC3B,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC"}

package/Dom/shapes/Line.d.ts

@@ -0,0 +1,9 @@
+import { Property } from '@nativescript/core';
+import { Paint } from '../Paint';
+export declare const p1Property: Property<Line, number>;
+export declare const p2Property: Property<Line, number>;
+export declare class Line extends Paint {
+    p1: number;
+    p2: number;
+    draw(): void;
+}