@nativescript/canvas-polyfill 2.0.0-beta.9 → 2.0.0-rc.1

package/DOM/HTMLCanvasElement.js

@@ -1,51 +1,78 @@
 import { Canvas } from '@nativescript/canvas';
-import { Element } from './Element';
-export class HTMLCanvasElement extends Element {
-    constructor() {
+import { HTMLElement } from './HTMLElement';
+import setValue from 'set-value';
+import { DOMParser } from '@xmldom/xmldom';
+export class HTMLCanvasElement extends HTMLElement {
+    constructor(canvas) {
         super('canvas');
-        let canvas = undefined;
-        if (arguments.length > 1) {
-            canvas = arguments[1];
+        this._htmlCanvas = true;
+        if (arguments.length > 0) {
+            canvas = arguments[0];
         }
         if (canvas instanceof Canvas) {
-            this._canvas = canvas;
+            this.nativeElement = canvas;
         }
         else {
-            this._canvas = Canvas.createCustomView(true);
+            this.nativeElement = Canvas.createCustomView();
         }
+        if (!this.nativeElement.__domElement) {
+            this.nativeElement.__domElement = new DOMParser().parseFromString('<canvas></canvas>', 'text/html').documentElement;
+        }
+        if (this.nativeElement && '__target' in this.nativeElement) {
+            this.nativeElement.__target = this;
+        }
+    }
+    static [Symbol.hasInstance](obj) {
+        return obj?._htmlCanvas || obj instanceof Canvas;
+    }
+    get _canvas() {
+        return this.nativeElement;
+    }
+    get innerWidth() {
+        return this.clientWidth;
+    }
+    get innerHeight() {
+        return this.clientHeight;
+    }
+    get clientWidth() {
+        return this.nativeElement['clientWidth'];
+    }
+    get clientHeight() {
+        return this.nativeElement['clientHeight'];
     }
     set width(value) {
-        // if (global.isIOS) {
-        // 	this._canvas.width = value / Screen.mainScreen.scale;
-        // } else {
-        // 	this._canvas.width = value;
-        // }
-        this._canvas.width = value;
+        setValue(this.nativeElement, 'width', value);
     }
     get width() {
-        return this._canvas.width;
+        return this.nativeElement['width'];
     }
     set height(value) {
-        // if (global.isIOS) {
-        // 	this._canvas.height = value / Screen.mainScreen.scale;
-        // } else {
-        // 	this._canvas.height = value;
-        // }
-        this._canvas.height = value;
+        setValue(this.nativeElement, 'height', value);
     }
     get height() {
-        return this._canvas.height;
+        return this.nativeElement['height'];
     }
-    toDataURL(type, encoderOptions) {
-        return this._canvas.toDataURL(type, encoderOptions);
+    toDataURL(type, encoderOptions = 0.92) {
+        const nativeElement = this.nativeElement;
+        if (nativeElement) {
+            return nativeElement.toDataURL?.(type, encoderOptions);
+        }
+        return 'data:,';
     }
     getContext(contextType, contextOptions) {
-        return this._canvas.getContext(contextType, contextOptions);
+        const nativeElement = this.nativeElement;
+        if (nativeElement) {
+            return nativeElement.getContext(contextType, contextOptions);
+        }
+        return null;
     }
     setPointerCapture(id) { }
     releasePointerCapture(id) { }
-    getBoundingClientRect() {
-        return this._canvas.getBoundingClientRect();
+    getRootNode() {
+        return this;
     }
 }
+Canvas.prototype.toHTMLCanvas = function () {
+    return new HTMLCanvasElement(this);
+};
 //# sourceMappingURL=HTMLCanvasElement.js.map

package/DOM/HTMLCanvasElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"HTMLCanvasElement.js","sourceRoot":"","sources":["../../../../packages/canvas-polyfill/DOM/HTMLCanvasElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,OAAO,iBAAkB,SAAQ,OAAO;IAC7C;QACC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAChB,IAAI,MAAM,GAAG,SAAS,CAAC;QACvB,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;YACzB,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;SACtB;QAED,IAAI,MAAM,YAAY,MAAM,EAAE;YAC7B,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;SACtB;aAAM;YACN,IAAI,CAAC,OAAO,GAAI,MAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;SACtD;IACF,CAAC;IAED,IAAI,KAAK,CAAC,KAAK;QACd,sBAAsB;QACtB,yDAAyD;QACzD,WAAW;QACX,+BAA+B;QAC/B,IAAI;QACJ,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;IAC5B,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAC3B,CAAC;IAED,IAAI,MAAM,CAAC,KAAK;QACf,sBAAsB;QACtB,0DAA0D;QAC1D,WAAW;QACX,gCAAgC;QAChC,IAAI;QACJ,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED,IAAI,MAAM;QACT,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;IAC5B,CAAC;IAED,SAAS,CAAC,IAAI,EAAE,cAAc;QAC7B,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IACrD,CAAC;IAED,UAAU,CAAC,WAAW,EAAE,cAAc;QACrC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;IAC7D,CAAC;IAED,iBAAiB,CAAC,EAAE,IAAG,CAAC;IAExB,qBAAqB,CAAC,EAAE,IAAG,CAAC;IAE5B,qBAAqB;QACpB,OAAO,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC7C,CAAC;CACD"}
+{"version":3,"file":"HTMLCanvasElement.js","sourceRoot":"","sources":["../../../../packages/canvas-polyfill/DOM/HTMLCanvasElement.ts"],"names":[],"mappings":"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"}

package/DOM/HTMLCollection.d.ts

@@ -0,0 +1,4 @@
+export declare class HTMLCollection extends Array {
+    item(index: number): any;
+    namedItem(nameOrId: string): any;
+}

package/DOM/HTMLCollection.js

@@ -0,0 +1,10 @@
+export class HTMLCollection extends Array {
+    item(index) {
+        return this[index];
+    }
+    namedItem(nameOrId) {
+        // todo
+        return null;
+    }
+}
+//# sourceMappingURL=HTMLCollection.js.map

package/DOM/HTMLCollection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTMLCollection.js","sourceRoot":"","sources":["../../../../packages/canvas-polyfill/DOM/HTMLCollection.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,cAAe,SAAQ,KAAK;IACxC,IAAI,CAAC,KAAa;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,SAAS,CAAC,QAAgB;QACzB,OAAO;QACP,OAAO,IAAI,CAAC;IACb,CAAC;CACD"}

package/DOM/HTMLDivElement.d.ts

@@ -0,0 +1,6 @@
+import { HTMLElement } from './HTMLElement';
+export declare class HTMLDivElement extends HTMLElement {
+    constructor();
+    get innerHTML(): any;
+    set innerHTML(value: any);
+}

package/DOM/HTMLDivElement.js

@@ -0,0 +1,27 @@
+import { HTMLElement } from './HTMLElement';
+import { StackLayout } from '@nativescript/core';
+export class HTMLDivElement extends HTMLElement {
+    constructor() {
+        super('div');
+        const div = arguments[0];
+        // using StackLayout for now
+        if (!(div instanceof StackLayout)) {
+            this.nativeElement = new StackLayout();
+        }
+        else {
+            this.nativeElement = arguments[0];
+        }
+        if (!this.nativeElement.__domElement) {
+            this.nativeElement.__domElement = new DOMParser().parseFromString('<div></div>', 'text/html').documentElement;
+        }
+    }
+    get innerHTML() {
+        return this.nativeElement?.__domElement?.children[1]?.children[0]?.innerHTML;
+    }
+    set innerHTML(value) {
+        if (typeof value === 'string') {
+            this.nativeElement.__domElement = new DOMParser().parseFromString(`<div>${value}</div>`, 'text/html').documentElement;
+        }
+    }
+}
+//# sourceMappingURL=HTMLDivElement.js.map

package/DOM/HTMLDivElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTMLDivElement.js","sourceRoot":"","sources":["../../../../packages/canvas-polyfill/DOM/HTMLDivElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,OAAO,cAAe,SAAQ,WAAW;IAC9C;QACC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;QAEzB,4BAA4B;QAC5B,IAAI,CAAC,CAAC,GAAG,YAAY,WAAW,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,aAAa,GAAG,IAAI,WAAW,EAAE,CAAC;QACxC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,CAAC;YACtC,IAAI,CAAC,aAAa,CAAC,YAAY,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,eAAwB,CAAC;QACxH,CAAC;IACF,CAAC;IAED,IAAI,SAAS;QACZ,OAAa,IAAI,CAAC,aAAc,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;IACrF,CAAC;IAED,IAAI,SAAS,CAAC,KAAK;QAClB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,YAAY,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,QAAQ,KAAK,QAAQ,EAAE,WAAW,CAAC,CAAC,eAAwB,CAAC;QAChI,CAAC;IACF,CAAC;CACD"}

package/DOM/HTMLElement.d.ts

@@ -0,0 +1,26 @@
+import { Element } from './Element';
+import { ViewBase } from '@nativescript/core';
+export declare class Style {
+    private _values;
+    nativeElement: WeakRef<ViewBase>;
+    constructor();
+    private _nativeElement;
+    get width(): any;
+    set width(value: any);
+    get height(): any;
+    set height(value: any);
+}
+export declare class HTMLElement extends Element {
+    private _style;
+    constructor(tagName?: string);
+    get style(): Style | import("@nativescript/core").Style;
+    set nativeElement(value: import("@nativescript/core").View & {
+        __domElement?: Element;
+        isConnected?: boolean;
+    });
+    get nativeElement(): import("@nativescript/core").View & {
+        __domElement?: Element;
+        isConnected?: boolean;
+    };
+    get isConnected(): boolean;
+}

package/DOM/HTMLElement.js

@@ -0,0 +1,57 @@
+import { Element } from './Element';
+export class Style {
+    constructor() {
+        this._values = new Map();
+    }
+    _nativeElement() {
+        if (__ANDROID__) {
+            return this.nativeElement?.get?.();
+        }
+        if (__IOS__) {
+            return this.nativeElement?.deref?.();
+        }
+        return undefined;
+    }
+    get width() {
+        return this._values.get('width');
+    }
+    set width(value) {
+        this._values.set('width', value);
+    }
+    get height() {
+        return this._values.get('height');
+    }
+    set height(value) {
+        this._values.set('height', value);
+    }
+}
+export class HTMLElement extends Element {
+    constructor(tagName = '') {
+        super(tagName ?? '');
+        this._style = new Style();
+    }
+    get style() {
+        if (this._nativeElement) {
+            return this._nativeElement.style;
+        }
+        return this._style;
+    }
+    set nativeElement(value) {
+        this._nativeElement = value;
+        if (value) {
+            this._emitter = new WeakRef(value);
+            this._style.nativeElement = new WeakRef(value);
+        }
+        else {
+            this._emitter = value;
+            this._style.nativeElement = value;
+        }
+    }
+    get nativeElement() {
+        return this._nativeElement;
+    }
+    get isConnected() {
+        return this.nativeElement?.isConnected ?? !!this.nativeElement?.parent ?? false;
+    }
+}
+//# sourceMappingURL=HTMLElement.js.map

package/DOM/HTMLElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTMLElement.js","sourceRoot":"","sources":["../../../../packages/canvas-polyfill/DOM/HTMLElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIpC,MAAM,OAAO,KAAK;IAIjB;QACC,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC;IAC1B,CAAC;IAEO,cAAc;QACrB,IAAI,WAAW,EAAE,CAAC;YACjB,OAAO,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,EAAE,CAAC;QACpC,CAAC;QACD,IAAI,OAAO,EAAE,CAAC;YACb,OAAO,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,CAAC;QACtC,CAAC;QACD,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IACD,IAAI,KAAK,CAAC,KAAK;QACd,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,MAAM;QACT,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IACD,IAAI,MAAM,CAAC,KAAK;QACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;CACD;AAED,MAAM,OAAO,WAAY,SAAQ,OAAO;IAGvC,YAAY,UAAkB,EAAE;QAC/B,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;IAC3B,CAAC;IAED,IAAI,KAAK;QACR,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;QAClC,CAAC;QACD,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IAED,IAAI,aAAa,CAAC,KAAK;QACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,KAAK,EAAE,CAAC;YACX,IAAI,CAAC,QAAQ,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;YACnC,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;QAChD,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,QAAQ,GAAG,KAAc,CAAC;YAC/B,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,KAAc,CAAC;QAC5C,CAAC;IACF,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,aAAa,EAAE,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,MAAM,IAAI,KAAK,CAAC;IACjF,CAAC;CACD"}

package/DOM/HTMLImageElement.d.ts

@@ -1,19 +1,32 @@
-import { Element } from './Element';
-export declare class HTMLImageElement extends Element {
+import { ImageAsset } from '@nativescript/canvas';
+import { HTMLElement } from './HTMLElement';
+export declare class HTMLImageElement extends HTMLElement {
     private localUri;
     private _onload;
+    private _onerror;
     private _complete;
     private _base64;
-    _asset: any;
-    _imageSource: any;
+    width: number;
+    height: number;
+    _asset: ImageAsset;
+    _svg: any;
     __id: any;
     decoding: string;
+    private _loading;
+    private _decodingQueue;
     get src(): any;
+    get naturalWidth(): number;
+    get naturalHeight(): number;
     set src(value: any);
     get onload(): any;
     set onload(value: any);
+    get onerror(): any;
+    set onerror(value: any);
     get complete(): any;
     set complete(value: any);
+    private _dispatchDecode;
+    decode(): Promise<void>;
+    static _fromSvg(svg: any): HTMLImageElement;
     constructor(props?: any);
-    _load(): void;
+    _load(): Promise<void>;
 }