@nativescript/canvas 0.9.22-v6 → 1.0.0-alpha.10

package/README.md

@@ -1,16 +1,18 @@
 # NativeScript Canvas
 
 **Powered by**
-* [CanvasNative](src-native/canvas-native) - Rust
-* [CanvasNative](src-native/canvas-ios) - IOS
-* [CanvasNative](src-native/canvas-android) - Android
+
+- [CanvasNative](src-native/canvas-native) - Rust
+- [CanvasNative](src-native/canvas-ios) - IOS
+- [CanvasNative](src-native/canvas-android) - Android
+
 ## Installation
 
 ```bash
 ns plugin add @nativescript/canvas
 ```
 
-_Note_ min ios support 10 | min android support 17
+_Note_ min ios support 11 | min android support 17
 
 IMPORTANT: ensure you include xmlns:canvas="@nativescript/canvas" on the Page element for core {N}
 
@@ -21,43 +23,40 @@ IMPORTANT: ensure you include xmlns:canvas="@nativescript/canvas" on the Page el
 ```
 
 ### 2D
+
 ```typescript
 let ctx;
 let canvas;
 export function canvasReady(args) {
-  console.log('canvas ready');
-  canvas = args.object;
-  console.log(canvas);
-  ctx = canvas.getContext('2d');
-  ctx.fillStyle = 'green';
-  ctx.fillRect(10, 10, 150, 100);
+	console.log('canvas ready');
+	canvas = args.object;
+	console.log(canvas);
+	ctx = canvas.getContext('2d');
+	ctx.fillStyle = 'green';
+	ctx.fillRect(10, 10, 150, 100);
 }
 ```
 
-
-
 ### WEBGL
+
 ```typescript
 let gl;
 let canvas;
 export function canvasReady(args) {
-  console.log('canvas ready');
-  canvas = args.object;
-  gl = canvas.getContext('webgl'); // 'webgl' || 'webgl2'
-  gl.viewport(0, 0,
-  gl.drawingBufferWidth, gl.drawingBufferHeight);
-  // Set the clear color to darkish green.
-  gl.clearColor(0.0, 0.5, 0.0, 1.0);
-  // Clear the context with the newly set color. This is
-  // the function call that actually does the drawing.
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  canvas.flush(); // must be called to draw on screen
+	console.log('canvas ready');
+	canvas = args.object;
+	gl = canvas.getContext('webgl'); // 'webgl' || 'webgl2'
+	gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+	// Set the clear color to darkish green.
+	gl.clearColor(0.0, 0.5, 0.0, 1.0);
+	// Clear the context with the newly set color. This is
+	// the function call that actually does the drawing.
+	gl.clear(gl.COLOR_BUFFER_BIT);
 }
 ```
 
 ## API
 
- - 2D Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
- - WebGL Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)
- - WebGL2 Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext)
-
+- 2D Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
+- WebGL Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)
+- WebGL2 Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext)

package/SVG/Circle.d.ts

@@ -1,5 +1,5 @@
-import { SVGItem } from "./SVGItem";
-import { Property } from "@nativescript/core/ui/core/properties";
+import { Property } from '@nativescript/core';
+import { SVGItem } from './SVGItem';
 export declare const cxProperty: Property<Circle, any>;
 export declare const cyProperty: Property<Circle, any>;
 export declare const rProperty: Property<Circle, any>;
@@ -7,5 +7,5 @@ export declare class Circle extends SVGItem {
     cx: any;
     cy: any;
     r: any;
-    handleValues(canvas?: any): void;
+    constructor();
 }

package/SVG/Circle.js

@@ -1,94 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var SVGItem_1 = require("./SVGItem");
-var Canvas2D_1 = require("../Canvas2D");
-var properties_1 = require("@nativescript/core/ui/core/properties");
-exports.cxProperty = new properties_1.Property({
-    name: 'cx'
+import { Property } from '@nativescript/core';
+import { SVGItem } from './SVGItem';
+import { DOMParser } from 'xmldom';
+export const cxProperty = new Property({
+    name: 'cx',
 });
-exports.cyProperty = new properties_1.Property({
-    name: 'cy'
+export const cyProperty = new Property({
+    name: 'cy',
 });
-exports.rProperty = new properties_1.Property({
-    name: 'r'
+export const rProperty = new Property({
+    name: 'r',
 });
-var Circle = /** @class */ (function (_super) {
-    __extends(Circle, _super);
-    function Circle() {
-        return _super !== null && _super.apply(this, arguments) || this;
+export class Circle extends SVGItem {
+    constructor() {
+        super();
+        this._dom = new DOMParser().parseFromString('<circle></circle>');
     }
-    Circle.prototype.handleValues = function (canvas) {
-        var ctx;
-        if (canvas) {
-            ctx = canvas.getContext('2d');
-        }
-        else {
-            ctx = this._canvas.getContext('2d');
-        }
-        var circle = new Canvas2D_1.Path2D();
-        circle.arc(this.cx, this.cy, this.r, 0, 2 * Math.PI);
-        ctx.save();
-        ctx.lineWidth = this.strokeWidth;
-        ctx.globalAlpha = this._realOpacity;
-        var lastOpacity;
-        if (this._doFillOpacity()) {
-            lastOpacity = ctx.globalAlpha;
-            ctx.globalAlpha = this._realFillOpacity;
-        }
-        if (this._doFill()) {
-            if (this.fill !== undefined && this.fill !== 'none') {
-                if (this.fill && this.fill.indexOf('url') > -1) {
-                    var fill = this._getViewById(this.fill);
-                    if (fill) {
-                        var style = fill._getFillOrStrokeStyle();
-                        if (style instanceof Canvas2D_1.CanvasGradient) {
-                            if (typeof fill.gradientTransform === 'string' && fill.gradientTransform.indexOf('rotate')) {
-                                var rotation = parseInt(fill.gradientTransform.replace('rotate(', '').replace(')', ''));
-                                if (!isNaN(rotation)) {
-                                    ctx.rotate(rotation);
-                                }
-                            }
-                            ctx.fillStyle = style;
-                        }
-                        else {
-                            ctx.fillStyle = ctx.createPattern(style, 'repeat');
-                        }
-                    }
-                }
-                else {
-                    ctx.fillStyle = this.fill;
-                }
-            }
-            ctx.fill(circle);
-        }
-        if (lastOpacity !== undefined) {
-            ctx.globalAlpha = lastOpacity;
-        }
-        if (this._doStroke()) {
-            if (this.stroke !== undefined && this.stroke !== 'none') {
-                if (this.stroke && this.stroke.indexOf('url') > -1) {
-                    var stroke = this._getViewById(this.stroke);
-                    if (stroke) {
-                        var style = stroke._getFillOrStrokeStyle();
-                        if (stroke instanceof Canvas2D_1.CanvasGradient) {
-                            ctx.strokeStyle = style;
-                        }
-                        else {
-                            ctx.strokeStyle = ctx.createPattern(style, 'repeat');
-                        }
-                    }
-                }
-                else {
-                    ctx.strokeStyle = this.stroke;
-                }
-            }
-            ctx.stroke(circle);
-        }
-        ctx.restore();
-    };
-    return Circle;
-}(SVGItem_1.SVGItem));
-exports.Circle = Circle;
-exports.cxProperty.register(Circle);
-exports.cyProperty.register(Circle);
+}
+cxProperty.register(Circle);
+cyProperty.register(Circle);
 //# sourceMappingURL=Circle.js.map

package/SVG/Circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.js","sourceRoot":"","sources":["../../../packages/canvas/SVG/Circle.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Circle.js","sourceRoot":"","sources":["../../../../packages/canvas/SVG/Circle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,QAAQ,CAAc;IACnD,IAAI,EAAE,IAAI;CACV,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,QAAQ,CAAc;IACnD,IAAI,EAAE,IAAI;CACV,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,QAAQ,CAAc;IAClD,IAAI,EAAE,GAAG;CACT,CAAC,CAAC;AAEH,MAAM,OAAO,MAAO,SAAQ,OAAO;IAIlC;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,mBAAmB,CAAC,CAAC;IAClE,CAAC;CACD;AAED,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC5B,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC"}

package/SVG/ClipPath.d.ts

@@ -1,3 +1,4 @@
 import { SVGItem } from "./SVGItem";
 export declare class ClipPath extends SVGItem {
+    constructor();
 }

package/SVG/ClipPath.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var SVGItem_1 = require("./SVGItem");
-var ClipPath = /** @class */ (function (_super) {
-    __extends(ClipPath, _super);
-    function ClipPath() {
-        return _super !== null && _super.apply(this, arguments) || this;
+import { SVGItem } from "./SVGItem";
+import { DOMParser } from 'xmldom';
+export class ClipPath extends SVGItem {
+    constructor() {
+        super();
+        this._dom = new DOMParser().parseFromString('<clip-path></clip-path>');
     }
-    return ClipPath;
-}(SVGItem_1.SVGItem));
-exports.ClipPath = ClipPath;
+}
 //# sourceMappingURL=ClipPath.js.map

package/SVG/ClipPath.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClipPath.js","sourceRoot":"","sources":["../../../packages/canvas/SVG/ClipPath.ts"],"names":[],"mappings":";;AAAA,qCAAkC;AAElC;IAA8B,4BAAO;IAArC;;IACA,CAAC;IAAD,eAAC;AAAD,CAAC,AADD,CAA8B,iBAAO,GACpC;AADY,4BAAQ"}
+{"version":3,"file":"ClipPath.js","sourceRoot":"","sources":["../../../../packages/canvas/SVG/ClipPath.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,MAAM,OAAO,QAAS,SAAQ,OAAO;IACjC;QACF,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,yBAAyB,CAAC,CAAC;IACxE,CAAC;CACD"}

package/SVG/Defs.d.ts

@@ -1,7 +1,4 @@
 import { SVGItem } from "./SVGItem";
-import { AddChildFromBuilder } from "@nativescript/core/ui/core/view";
-export declare class Defs extends SVGItem implements AddChildFromBuilder {
-    _views: any[];
+export declare class Defs extends SVGItem {
     constructor();
-    _addChildFromBuilder(name: string, value: any): void;
 }

package/SVG/Defs.js

@@ -1,20 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var SVGItem_1 = require("./SVGItem");
-var Defs = /** @class */ (function (_super) {
-    __extends(Defs, _super);
-    function Defs() {
-        var _this = _super.call(this) || this;
-        _this._views = [];
-        return _this;
+import { SVGItem } from "./SVGItem";
+import { DOMParser } from 'xmldom';
+export class Defs extends SVGItem {
+    constructor() {
+        super();
+        this._dom = new DOMParser().parseFromString('<def></defs>');
     }
-    Defs.prototype._addChildFromBuilder = function (name, value) {
-        value.parent = this;
-        value._canvas = this._canvas;
-        this._views.push(value);
-        this._appendChild(value.id || value._domId, value);
-    };
-    return Defs;
-}(SVGItem_1.SVGItem));
-exports.Defs = Defs;
+}
 //# sourceMappingURL=Defs.js.map

package/SVG/Defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Defs.js","sourceRoot":"","sources":["../../../packages/canvas/SVG/Defs.ts"],"names":[],"mappings":";;AAAA,qCAAkC;AAGlC;IAA0B,wBAAO;IAGhC;QAAA,YACC,iBAAO,SAEP;QADA,KAAI,CAAC,MAAM,GAAG,EAAE,CAAC;;IAClB,CAAC;IAED,mCAAoB,GAApB,UAAqB,IAAY,EAAE,KAAU;QAC5C,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;QACpB,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACpD,CAAC;IACF,WAAC;AAAD,CAAC,AAdD,CAA0B,iBAAO,GAchC;AAdY,oBAAI"}
+{"version":3,"file":"Defs.js","sourceRoot":"","sources":["../../../../packages/canvas/SVG/Defs.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,MAAM,OAAO,IAAK,SAAQ,OAAO;IAC7B;QACF,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;IAC7D,CAAC;CACD"}

package/SVG/Ellipse.d.ts

@@ -1,4 +1,4 @@
-import { Property } from "@nativescript/core/ui/core/properties";
+import { Property } from "@nativescript/core";
 import { SVGItem } from "./SVGItem";
 export declare const cxProperty: Property<Ellipse, any>;
 export declare const cyProperty: Property<Ellipse, any>;
@@ -10,5 +10,4 @@ export declare class Ellipse extends SVGItem {
     rx: any;
     ry: any;
     constructor();
-    handleValues(canvas?: any): void;
 }

package/SVG/Ellipse.js

@@ -1,53 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var properties_1 = require("@nativescript/core/ui/core/properties");
-var Canvas2D_1 = require("../Canvas2D");
-var SVGItem_1 = require("./SVGItem");
-exports.cxProperty = new properties_1.Property({
+import { Property } from "@nativescript/core";
+import { SVGItem } from "./SVGItem";
+export const cxProperty = new Property({
     name: 'cx'
 });
-exports.cyProperty = new properties_1.Property({
+export const cyProperty = new Property({
     name: 'cy'
 });
-exports.rxProperty = new properties_1.Property({
+export const rxProperty = new Property({
     name: 'rx'
 });
-exports.ryProperty = new properties_1.Property({
+export const ryProperty = new Property({
     name: 'ry'
 });
-var Ellipse = /** @class */ (function (_super) {
-    __extends(Ellipse, _super);
-    function Ellipse() {
-        var _this = _super.call(this) || this;
-        _this.stroke = 'transparent';
-        return _this;
+import { DOMParser } from 'xmldom';
+export class Ellipse extends SVGItem {
+    constructor() {
+        super();
+        this._dom = new DOMParser().parseFromString('<ellipse></ellipse>');
     }
-    Ellipse.prototype.handleValues = function (canvas) {
-        var ctx;
-        if (canvas) {
-            ctx = canvas.getContext('2d');
-        }
-        else {
-            ctx = this._canvas.getContext('2d');
-        }
-        var ellipse = new Canvas2D_1.Path2D();
-        ellipse.ellipse(this.cx, this.cy, this.rx, this.ry, 0, 0, 2 * Math.PI);
-        ctx.save();
-        if (this._doFill()) {
-            ctx.fillStyle = this._realFill;
-            ctx.stroke(ellipse);
-        }
-        if (this._doStroke()) {
-            ctx.strokeStyle = this._realStroke;
-            ctx.fill(ellipse);
-        }
-        ctx.restore();
-    };
-    return Ellipse;
-}(SVGItem_1.SVGItem));
-exports.Ellipse = Ellipse;
-exports.cxProperty.register(Ellipse);
-exports.cyProperty.register(Ellipse);
-exports.rxProperty.register(Ellipse);
-exports.ryProperty.register(Ellipse);
+}
+cxProperty.register(Ellipse);
+cyProperty.register(Ellipse);
+rxProperty.register(Ellipse);
+ryProperty.register(Ellipse);
 //# sourceMappingURL=Ellipse.js.map

package/SVG/Ellipse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ellipse.js","sourceRoot":"","sources":["../../../packages/canvas/SVG/Ellipse.ts"],"names":[],"mappings":";;AAAA,oEAA+D;AAC/D,wCAAmC;AACnC,qCAAkC;AAErB,QAAA,UAAU,GAAG,IAAI,qBAAQ,CAAe;IACpD,IAAI,EAAE,IAAI;CACV,CAAC,CAAC;AACU,QAAA,UAAU,GAAG,IAAI,qBAAQ,CAAe;IACpD,IAAI,EAAE,IAAI;CACV,CAAC,CAAC;AACU,QAAA,UAAU,GAAG,IAAI,qBAAQ,CAAe;IACpD,IAAI,EAAE,IAAI;CACV,CAAC,CAAC;AACU,QAAA,UAAU,GAAG,IAAI,qBAAQ,CAAe;IACpD,IAAI,EAAE,IAAI;CACV,CAAC,CAAC;AAEH;IAA6B,2BAAO;IAMnC;QAAA,YACC,iBAAO,SAEP;QADA,KAAI,CAAC,MAAM,GAAG,aAAa,CAAC;;IAC7B,CAAC;IAED,8BAAY,GAAZ,UAAa,MAAO;QACnB,IAAI,GAAQ,CAAC;QACb,IAAI,MAAM,EAAE;YACX,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;SAC9B;aAAM;YACN,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAQ,CAAC;SAC3C;QACD,IAAM,OAAO,GAAG,IAAI,iBAAM,EAAE,CAAC;QAC7B,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;QACvE,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YACnB,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC/B,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;SACpB;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACrB,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YACnC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAClB;QACD,GAAG,CAAC,OAAO,EAAE,CAAC;IACf,CAAC;IACF,cAAC;AAAD,CAAC,AAhCD,CAA6B,iBAAO,GAgCnC;AAhCY,0BAAO;AAkCpB,kBAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC7B,kBAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC7B,kBAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC7B,kBAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"Ellipse.js","sourceRoot":"","sources":["../../../../packages/canvas/SVG/Ellipse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,QAAQ,CAAe;IACpD,IAAI,EAAE,IAAI;CACV,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,QAAQ,CAAe;IACpD,IAAI,EAAE,IAAI;CACV,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,QAAQ,CAAe;IACpD,IAAI,EAAE,IAAI;CACV,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,QAAQ,CAAe;IACpD,IAAI,EAAE,IAAI;CACV,CAAC,CAAC;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,MAAM,OAAO,OAAQ,SAAQ,OAAO;IAMnC;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;IACpE,CAAC;CACD;AAED,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC7B,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC7B,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC7B,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC"}

package/SVG/G.d.ts

@@ -1,13 +1,7 @@
-import { Canvas } from "../Canvas";
 import { SVGItem } from "./SVGItem";
-import { AddChildFromBuilder } from "@nativescript/core/ui/core/view";
-export declare class G extends SVGItem implements AddChildFromBuilder {
-    _canvas: Canvas;
-    _views: any[];
+export declare class G extends SVGItem {
     transform: string;
     x: any;
     y: any;
     constructor();
-    _addChildFromBuilder(name: string, value: any): void;
-    handleValues(): void;
 }

package/SVG/G.js

@@ -1,66 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var SVGItem_1 = require("./SVGItem");
-var G = /** @class */ (function (_super) {
-    __extends(G, _super);
-    function G() {
-        var _this = _super.call(this) || this;
-        _this._views = [];
-        return _this;
+import { SVGItem } from "./SVGItem";
+import { DOMParser } from 'xmldom';
+export class G extends SVGItem {
+    constructor() {
+        super();
+        this._dom = new DOMParser().parseFromString('<g></g>');
     }
-    G.prototype._addChildFromBuilder = function (name, value) {
-        value._canvas = this._canvas;
-        value.parent = this;
-        this._views.push(value);
-        this._appendChild(value.id || value._domId, value);
-    };
-    G.prototype.handleValues = function () {
-        var _this = this;
-        var ctx = this._canvas.getContext('2d');
-        ctx.save();
-        if (typeof this.transform === 'string') {
-            // TODO use regex
-            var matrix = this.transform.replace('matrix(', '')
-                .replace('(', '')
-                .split(',')
-                .map(function (value) {
-                var val = parseFloat(value);
-                if (isNaN(val)) {
-                    return 0;
-                }
-                return val;
-            });
-            ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
-        }
-        var updateColors = function () {
-            if (_this._doStroke()) {
-                ctx.strokeStyle = _this.stroke;
-            }
-            if (_this._doFill()) {
-                if (_this.fill === undefined) {
-                    ctx.fillStyle = 'black';
-                }
-                else {
-                    ctx.fillStyle = _this.fill;
-                }
-            }
-        };
-        this._views.forEach(function (view) {
-            if (typeof view.handleValues === 'function') {
-                updateColors();
-                ctx.globalAlpha = _this.opacity;
-                view.handleValues();
-            }
-            else if (view instanceof G) {
-                view._views.forEach(function (view) {
-                    updateColors();
-                    view.handleValues();
-                });
-            }
-        });
-        ctx.restore();
-    };
-    return G;
-}(SVGItem_1.SVGItem));
-exports.G = G;
+}
 //# sourceMappingURL=G.js.map

package/SVG/G.js.map

@@ -1 +1 @@
-{"version":3,"file":"G.js","sourceRoot":"","sources":["../../../packages/canvas/SVG/G.ts"],"names":[],"mappings":";;AACA,qCAAkC;AAGlC;IAAuB,qBAAO;IAO1B;QAAA,YACI,iBAAO,SAEV;QADG,KAAI,CAAC,MAAM,GAAG,EAAE,CAAC;;IACrB,CAAC;IAED,gCAAoB,GAApB,UAAqB,IAAY,EAAE,KAAU;QACzC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACvD,CAAC;IAED,wBAAY,GAAZ;QAAA,iBA2CC;QA1CG,IAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAQ,CAAC;QACjD,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,IAAI,OAAO,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE;YACpC,iBAAiB;YACjB,IAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC;iBAC/C,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;iBAChB,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,UAAA,KAAK;gBACN,IAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;gBAC9B,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE;oBACZ,OAAO,CAAC,CAAC;iBACZ;gBACD,OAAO,GAAG,CAAC;YACf,CAAC,CAAC,CAAC;YACP,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;SACnF;QAED,IAAM,YAAY,GAAG;YACjB,IAAI,KAAI,CAAC,SAAS,EAAE,EAAE;gBAClB,GAAG,CAAC,WAAW,GAAG,KAAI,CAAC,MAAM,CAAC;aACjC;YACD,IAAI,KAAI,CAAC,OAAO,EAAE,EAAE;gBAChB,IAAI,KAAI,CAAC,IAAI,KAAK,SAAS,EAAE;oBACzB,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC;iBAC3B;qBAAM;oBACH,GAAG,CAAC,SAAS,GAAG,KAAI,CAAC,IAAI,CAAC;iBAC7B;aACJ;QACL,CAAC,CAAC;QACF,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,UAAA,IAAI;YACpB,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,UAAU,EAAE;gBACzC,YAAY,EAAE,CAAC;gBACf,GAAG,CAAC,WAAW,GAAG,KAAI,CAAC,OAAO,CAAC;gBAC/B,IAAI,CAAC,YAAY,EAAE,CAAC;aACvB;iBAAM,IAAI,IAAI,YAAY,CAAC,EAAE;gBAC1B,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,UAAC,IAAI;oBACrB,YAAY,EAAE,CAAC;oBACf,IAAI,CAAC,YAAY,EAAE,CAAC;gBACxB,CAAC,CAAC,CAAC;aACN;QACL,CAAC,CAAC,CAAC;QACH,GAAG,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IACL,QAAC;AAAD,CAAC,AA/DD,CAAuB,iBAAO,GA+D7B;AA/DY,cAAC"}
+{"version":3,"file":"G.js","sourceRoot":"","sources":["../../../../packages/canvas/SVG/G.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,MAAM,OAAO,CAAE,SAAQ,OAAO;IAK1B;QACF,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IACxD,CAAC;CACD"}

package/SVG/Image.d.ts

@@ -1,10 +1,11 @@
-import { SVGItem } from './SVGItem';
+import { SVGItem } from "./SVGItem";
 export declare class Image extends SVGItem {
+    #private;
     xlink: {
         href?: string;
     };
     href: string;
-    handleValues(canvas?: any): void;
-    isBase64(src: any): boolean;
-    loadSrc(src: any): globalAndroid.graphics.Bitmap | UIImage;
+    x: any;
+    y: any;
+    constructor();
 }

package/SVG/Image.js

@@ -1,86 +1,40 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var SVGItem_1 = require("./SVGItem");
-var core_1 = require("@nativescript/core");
-var b64Extensions = {
-    '/': 'jpg',
-    i: 'png',
-    R: 'gif',
-    U: 'webp',
+var _Image_loadedSrc, _Image_asset;
+import { ImageAsset } from "@nativescript/canvas";
+import { SVGItem } from "./SVGItem";
+const b64Extensions = {
+    "/": "jpg",
+    i: "png",
+    R: "gif",
+    U: "webp",
 };
 function b64WithoutPrefix(b64) {
-    return b64.split(',')[1];
+    return b64.split(",")[1];
 }
 function getMIMEforBase64String(b64) {
-    var input = b64;
-    if (b64.includes(',')) {
+    let input = b64;
+    if (b64.includes(",")) {
         input = b64WithoutPrefix(b64);
     }
-    var first = input.charAt(0);
-    var mime = b64Extensions[first];
+    const first = input.charAt(0);
+    const mime = b64Extensions[first];
     if (!mime) {
-        throw new Error('Unknown Base64 MIME type: ' + b64);
+        throw new Error("Unknown Base64 MIME type: " + b64);
     }
     return mime;
 }
-var Image = /** @class */ (function (_super) {
-    __extends(Image, _super);
-    function Image() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.xlink = {};
-        return _this;
+import { DOMParser } from 'xmldom';
+export class Image extends SVGItem {
+    constructor() {
+        super();
+        this.xlink = {};
+        this.x = 0;
+        this.y = 0;
+        // @ts-ignore
+        _Image_loadedSrc.set(this, void 0);
+        // @ts-ignore
+        _Image_asset.set(this, new ImageAsset());
+        this._dom = new DOMParser().parseFromString('<image></image>');
     }
-    Image.prototype.handleValues = function (canvas) {
-        var ctx;
-        if (canvas) {
-            ctx = canvas.getContext('2d');
-        }
-        else {
-            ctx = this._canvas.getContext('2d');
-        }
-        var src;
-        if (this.xlink && this.xlink.href) {
-            src = this.xlink.href;
-        }
-        if (this.href) {
-            src = this.href;
-        }
-        ctx.save();
-        if (typeof src === 'string') {
-            if (this.isBase64(src)) {
-                var nativeImage = this.loadSrc(src);
-                if (nativeImage) {
-                    ctx.drawImage(nativeImage, 0, 0, this.width, this.height);
-                }
-            }
-        }
-        ctx.restore();
-    };
-    Image.prototype.isBase64 = function (src) {
-        return typeof src === 'string' && src.startsWith && src.startsWith('data:');
-    };
-    Image.prototype.loadSrc = function (src) {
-        if (typeof src === 'string' && src.startsWith && src.startsWith('data:')) {
-            var base64result = src.split(',')[1];
-            if (!base64result) {
-                return null;
-            }
-            try {
-                if (core_1.isIOS) {
-                    return UIImage.imageWithData(NSData.alloc().initWithBase64EncodedStringOptions(base64result, 0));
-                }
-                else {
-                    var bytes = android.util.Base64.decode(base64result, android.util.Base64.DEFAULT);
-                    return android.graphics.BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
-                }
-            }
-            catch (error) {
-                return null;
-            }
-        }
-        return null;
-    };
-    return Image;
-}(SVGItem_1.SVGItem));
-exports.Image = Image;
+}
+_Image_loadedSrc = new WeakMap(), _Image_asset = new WeakMap();
 //# sourceMappingURL=Image.js.map