feat(polyfill): impl URL, expose Element ,update android lib

Author: triniwiz

packages/canvas-polyfill/DOM/HTMLImageElement.ts

@@ -157,16 +157,6 @@ export class HTMLImageElement extends Element {
 			}
 			if (!this.width || !this.height) {
 				this.complete = false;
-				/*ImageSource.fromFile(this.src)
-					.then((asset) => {
-						this._imageSource = asset;
-						this.width = asset.width;
-						this.height = asset.height;
-						this.complete = true;
-					})
-					.catch(e => {
-						this.emitter.emit("error", {target: this});
-					});*/
 				this._asset
 					.loadFileAsync(this.src)
 					.then(() => {
@@ -177,27 +167,6 @@ export class HTMLImageElement extends Element {
 					.catch((e) => {
 						this.emitter.emit('error', { target: this });
 					});
-			} else {
-				/*ImageSource.fromFile(this.src)
-					.then((asset) => {
-						this._imageSource = asset;
-						this.width = asset.width;
-						this.height = asset.height;
-						this.complete = true;
-					})
-					.catch(e => {
-						this.emitter.emit("error", {target: this});
-					});*/
-				/*	this._asset.loadFileAsync(this.src)
-					.then(() => {
-						this.width = this._asset.width;
-						this.height = this._asset.height;
-						this.complete = true;
-					})
-					.catch(e => {
-						this.emitter.emit("error", {target: this});
-					});
-				*/
 			}
 		}
 	}

packages/canvas-polyfill/URL.ts

@@ -0,0 +1,43 @@
+import {knownFolders, File as NSFile, isIOS, path} from '@nativescript/core';
+import {FileManager} from './async/async'
+
+export class URL {
+	public static createObjectURL(object: any): string {
+		if (object instanceof Blob || object instanceof File) {
+			const filePath = path.join(knownFolders.temp().path, this.getUUID() + '.js');
+			const buf = (Blob as any).InternalAccessor.getBuffer(object);
+			if (isIOS) {
+				NSFile.fromPath(filePath).writeSync(NSData.dataWithData(buf));
+			} else {
+				try {
+					const fos = new java.io.FileOutputStream(
+						new java.io.File(filePath)
+					);
+					fos.write(Array.from(buf) as any);
+					fos.flush();
+					fos.close();
+				} catch (e) {
+					return null;
+				}
+			}
+			return filePath;
+		}
+		return null;
+	}
+
+	public static revokeObjectURL(url: string){
+		if(typeof url === 'string'){
+			if(NSFile.exists(url)){
+				const file = NSFile.fromPath(url);
+				file.removeSync()
+			}
+		}
+	}
+
+	private static getUUID() {
+		if (isIOS) {
+			return NSUUID.UUID().UUIDString;
+		}
+		return java.util.UUID.randomUUID().toString()
+	}
+}

packages/canvas-polyfill/async/xhr/TNSXMLHttpRequest.ts

@@ -421,7 +421,7 @@ export class TNSXMLHttpRequest {
 			this.emitEvent('loadstart', startEvent);
 
 			this._updateReadyStateChange(this.LOADING);
-
+		
 			FileManager.readFile(path, {}, (error, data) => {
 				if (error) {
 					const errorEvent = new ProgressEvent(
@@ -456,6 +456,7 @@ export class TNSXMLHttpRequest {
 					this._httpContent = data;
 					this._responseURL = responseURL;
 
+
 					if (this.responseType === XMLHttpRequestResponseType.json) {
 						try {
 							if ((global as any).isAndroid) {
@@ -508,7 +509,6 @@ export class TNSXMLHttpRequest {
 					) {
 						if ((global as any).isIOS) {
 							let code = NSUTF8StringEncoding; // long:4
-
 							let encodedString = NSString.alloc().initWithDataEncoding(
 								data,
 								code
@@ -547,9 +547,8 @@ export class TNSXMLHttpRequest {
 						if ((global as any).isIOS) {
 							buffer = interop.bufferFromData(data);
 						} else {
-							buffer = (ArrayBuffer as any).from(
-								java.nio.ByteBuffer.wrap(data)
-							);
+							const buf = java.nio.ByteBuffer.wrap(data);
+							buffer = (ArrayBuffer as any).from(buf);
 						}
 
 						this._response = new Blob([buffer]);

packages/canvas-polyfill/index.ts

@@ -1,12 +1,18 @@
 require('globals');
 import {TNSXMLHttpRequest, FileReader, Blob} from './async/async';
+import {Element} from './DOM/Element';
 import {Document} from './DOM/Document';
 import './window';
 import './resize';
 import './process';
 import {TextDecoder, TextEncoder} from '@nativescript/canvas';
-
+import {URL} from './URL';
 (global as any).document = (global as any).window.document = (global as any).document || new Document();
+Object.defineProperty(global, 'Element', {
+	value: Element,
+	configurable: true,
+	writable: true,
+});
 Object.defineProperty(global, 'XMLHttpRequest', {
 	value: TNSXMLHttpRequest,
 	configurable: true,
@@ -38,6 +44,14 @@ if (!((global as any).TextEncoder instanceof TextEncoder)) {
 		configurable: true,
 		writable: true,
 	});
-
 }
 
+
+if (!((global as any).URL instanceof URL)) {
+	Object.defineProperty(global, 'URL', {
+		value: URL,
+		configurable: true,
+		writable: true,
+	});
+	(global as any).window.URL = (global as any).URL;
+}

packages/canvas-polyfill/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/canvas-polyfill",
-	"version": "1.0.0-alpha14",
+	"version": "1.0.0-alpha15",
 	"description": "Polyfill for making NativeScript compatible with web libs like pixi.js, three.js, phaser.js, babylon.js, etc....",
 	"main": "index",
 	"typings": "index.d.ts",
@@ -33,7 +33,7 @@
 	"readmeFilename": "README.md",
 	"bootstrapper": "@nativescript/plugin-seed",
 	"peerDependencies": {
-		"@nativescript/canvas": "~0.9.2"
+		"@nativescript/canvas": "~0.9.4"
 	},
 	"dependencies": {
 		"xmldom-qsa": "^1.0.3"

packages/canvas-polyfill/platforms/android/async-release.aar

@@ -11,4 +11,5 @@ dependencies {
     implementation 'com.squareup.okio:okio:2.4.2'
     implementation 'com.squareup.okhttp3:okhttp:3.14.2'
     implementation "androidx.annotation:annotation:$androidxVersion"
+	implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.4.2'
 }

packages/canvas-polyfill/platforms/android/include.gradle

@@ -5,19 +5,20 @@ import {Application} from '@nativescript/core';
 */
 
 const scale = Screen.mainScreen.scale;
-
+const width = Screen.mainScreen.widthPixels;
+const height = Screen.mainScreen.heightPixels;
 (global as any).window.devicePixelRatio = (global as any).devicePixelRatio = 1;
-(global as any).window.innerWidth = (global as any).innerWidth = Screen.mainScreen.widthPixels;
-(global as any).window.clientWidth = (global as any).clientWidth = Screen.mainScreen.widthPixels;
-(global as any).window.innerHeight = (global as any).innerHeight = Screen.mainScreen.heightPixels;
-(global as any).window.clientHeight = (global as any).clientHeight = Screen.mainScreen.heightPixels;
+(global as any).window.innerWidth = (global as any).innerWidth = width;
+(global as any).window.clientWidth = (global as any).clientWidth = width;
+(global as any).window.innerHeight = (global as any).innerHeight = height;
+(global as any).window.clientHeight = (global as any).clientHeight = height;
 (global as any).window.screen = (global as any).screen = (global as any).screen || {};
 (global as any).window.screen.orientation = (global as any).screen.orientation = (global as any).screen.orientation || (global as any).clientWidth < (global as any).clientHeight ? 0 : 90;
 if (!(global as any).__TNS_BROWSER_POLYFILL_RESIZE) {
 	(global as any).__TNS_BROWSER_POLYFILL_RESIZE = true;
 	Application.on(Application.orientationChangedEvent, (args) => {
-		let width = Screen.mainScreen.widthPixels;
-		let height = Screen.mainScreen.heightPixels;
+		const width = Screen.mainScreen.widthPixels;
+		const height = Screen.mainScreen.heightDIPs;
 		(global as any).window.devicePixelRatio = (global as any).devicePixelRatio = 1;
 		(global as any).window.innerWidth = (global as any).innerWidth = width;
 		(global as any).window.clientWidth = (global as any).clientWidth = width;