fix: c2d scaling

fix: c2d to webgl drawing chore: replace image asset lib
NativeScript · Mar 8, 2024 · c71d6f7 · c71d6f7
1 parent e3ee5e7
commit c71d6f7
Show file tree

Hide file tree

Showing 180 changed files with 10,401 additions and 9,647 deletions.
diff --git a/apps/demo/project.json b/apps/demo/project.json
@@ -12,7 +12,7 @@
 				"production": true,
 				"uglify": true,
 				"release": true,
-				"forDevice": true,
+				"forDevice": true
 			},
 			"dependsOn": [
 				{
@@ -25,7 +25,8 @@
 			"executor": "@nativescript/nx:build",
 			"options": {
 				"platform": "ios",
-				"noHmr": true
+				"noHmr": true,
+				"flags": "--env.watchNodeModules"
 			},
 			"dependsOn": [
 				{

diff --git a/apps/demo/src/app.ts b/apps/demo/src/app.ts
@@ -5,13 +5,16 @@ require('@nativescript/canvas-polyfill');
 const TextDecoderO = TextDecoder;
 // require('@nativescript/canvas-polyfill');
 // import { Canvas } from '@nativescript/canvas';
-declare const jp, GDPerformanceMonitor;
+declare const jp, GDPerformanceMonitor, android, java;
 let monitor;
 import { Application, path as filePath, knownFolders, Utils, path as nsPath, ImageSource, Trace } from '@nativescript/core';
 
 Application.on('discardedError', (args) => {
 	console.log(args.error);
 });
+global.process = {} as any;
+global.process.env = {} as any;
+
 
 // 0.253ms 1
 // 0.438ms 10

diff --git a/apps/demo/src/plugin-demos/canvas-pixi.ts b/apps/demo/src/plugin-demos/canvas-pixi.ts
@@ -1,6 +1,5 @@
 import { Observable, EventData, Page } from '@nativescript/core';
 import { DemoSharedCanvasPixi } from '@demo/shared';
-import {} from '@nativescript/canvas-pixi';
 
 export function navigatingTo(args: EventData) {
 	const page = <Page>args.object;

diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
 		"ng-packagr": "^15.0.0",
 		"phaser": "^3.55.2",
 		"phaser-ce": "^2.20.0",
-		"pixi.js": "^7.3.1",
+		"pixi.js": "~7.3.1",
 		"playcanvas": "^1.66.1",
 		"query-selector": "2.0.0",
 		"react-nativescript": "^4.0.0",
@@ -67,7 +67,10 @@
 		"vexflow": "^4.2.3",
 		"xmldom": "~0.6.0",
 		"zen-3d": "0.0.3",
-		"zone.js": "~0.13.0"
+		"zone.js": "~0.13.0",
+		"util": "~0.12.5",
+		"pixi-filters": "~5.3.0",
+		"pixi.js-legacy": "~7.3.1"
 	},
 	"lint-staged": {
 		"**/*.{js,ts,scss,json,html}": [

diff --git a/packages/canvas-babylon/package.json b/packages/canvas-babylon/package.json
@@ -33,7 +33,7 @@
   "readmeFilename": "README.md",
   "bootstrapper": "@nativescript/plugin-seed",
   "dependencies": {
-    "@nativescript/canvas-polyfill": "alpha",
+    "@nativescript/canvas-polyfill": "beta",
     "babylonjs": "~6.24.0"
   }
 }
diff --git a/packages/canvas-chartjs/package.json b/packages/canvas-chartjs/package.json
@@ -33,7 +33,7 @@
   "readmeFilename": "README.md",
   "bootstrapper": "@nativescript/plugin-seed",
   "dependencies": {
-    "@nativescript/canvas-polyfill": "alpha",
+    "@nativescript/canvas-polyfill": "beta",
     "chart.js": "~4.4.0"
   }
 }
diff --git a/packages/canvas-media/platforms/android/canvas_media.aar b/packages/canvas-media/platforms/android/canvas_media.aar
diff --git a/packages/canvas-phaser-ce/package.json b/packages/canvas-phaser-ce/package.json
@@ -33,7 +33,7 @@
   "readmeFilename": "README.md",
   "bootstrapper": "@nativescript/plugin-seed",
   "dependencies": {
-    "@nativescript/canvas-polyfill": "alpha",
+    "@nativescript/canvas-polyfill": "beta",
     "phaser-ce": "2.20.0"
   }
 }
diff --git a/packages/canvas-phaser/package.json b/packages/canvas-phaser/package.json
@@ -33,7 +33,7 @@
   "readmeFilename": "README.md",
   "bootstrapper": "@nativescript/plugin-seed",
   "dependencies": {
-    "@nativescript/canvas-polyfill": "alpha",
+    "@nativescript/canvas-polyfill": "beta",
     "phaser": "~3.60.0"
   }
 }
diff --git a/packages/canvas-pixi/index.ts b/packages/canvas-pixi/index.ts
@@ -1,14 +1,48 @@
 require('@nativescript/canvas-polyfill');
 import * as Pixii from 'pixi.js';
 
-export class TNSPIXIApplication extends Pixii.Application {
-	constructor({ canvas, ...props }) {
-		(global as any).PIXI = (global as any).window.PIXI = (global as any).PIXI || Pixii;
+let PIXI = Pixii;
+import {Screen} from '@nativescript/core';
+
+// import * as filters from 'pixi-filters';
+// PIXI.filters = { ...(PIXI.filters || {}), ...filters };
+
+
+(global as any).PIXI = (global as any).window.PIXI = (global as any).PIXI || PIXI;
+
+class NSCPIXIApplication extends Pixii.Application {
+	constructor({ context, view, ...props }) {
+		let clientWidth = 300;
+		let clientHeight = 150;
+		if (context) {
+			clientWidth = context.canvas.clientWidth;
+			clientHeight = context.canvas.clientHeight;
+		}
+		if (view) {
+			clientWidth = view.clientWidth;
+			clientHeight = view.clientHeight;
+		}
+		const width = props.width || clientWidth;
+		const height = props.height || clientHeight;
+
+
 		super({
-			view: canvas,
-			width: canvas.width || undefined,
-			height: canvas.height || undefined,
 			...props,
+			resolution: Screen.mainScreen.scale,
+			context,
+			view,
+			width, 
+			height
 		});
 	}
 }
+
+if (!(PIXI.Application instanceof NSCPIXIApplication)) {
+	PIXI.Assets.setPreferences({ preferWorkers: false });
+	PIXI = {
+		...PIXI,
+		Application: NSCPIXIApplication as never,
+	};
+}
+
+export default PIXI;
diff --git a/packages/canvas-pixi/package.json b/packages/canvas-pixi/package.json
@@ -33,7 +33,9 @@
   "readmeFilename": "README.md",
   "bootstrapper": "nativescript-plugin-seed",
   "dependencies": {
-    "@nativescript/canvas-polyfill": "alpha",
-    "pixi.js": "~7.3.1"
+    "@nativescript/canvas-polyfill": "beta",
+    "pixi.js": "~7.3.1",
+    "pixi.js-legacy": "~7.3.1",
+    "pixi-filters": "~5.3.0"
   }
 }
diff --git a/packages/canvas-polyfill/DOM/Document.ts b/packages/canvas-polyfill/DOM/Document.ts
@@ -2,7 +2,7 @@ import { Element } from './Element';
 import { HTMLVideoElement } from './HTMLVideoElement';
 import { HTMLImageElement } from './HTMLImageElement';
 import { HTMLCanvasElement } from './HTMLCanvasElement';
-import { SVGElement, SVGCircleElement, SVGRectElement , SVGGElement, SVGPathElement} from './svg';
+import { SVGElement, SVGCircleElement, SVGRectElement, SVGGElement, SVGPathElement } from './svg';
 import { Text } from './Text';
 import { Canvas } from '@nativescript/canvas';
 import { Frame } from '@nativescript/core';

diff --git a/packages/canvas-polyfill/DOM/Element.ts b/packages/canvas-polyfill/DOM/Element.ts
@@ -41,14 +41,14 @@ export class Element extends Node {
 	}
 
 	removeAttribute(key, value) {
-		console.log(this.className, 'removeAttribute', key, value);
+		this._instance?.removeAttribute?.(key, value);
 	}
 
 	setAttributeNS() {}
 
 	removeAttributeNS() {}
 
-	get attributes(){
+	get attributes() {
 		return this._instance?.attributes ?? [];
 	}
 

diff --git a/packages/canvas-polyfill/DOM/HTMLCanvasElement.ts b/packages/canvas-polyfill/DOM/HTMLCanvasElement.ts
@@ -18,11 +18,6 @@ export class HTMLCanvasElement extends Element {
 	}
 
 	set width(value) {
-		// if (global.isIOS) {
-		// 	this._canvas.width = value / Screen.mainScreen.scale;
-		// } else {
-		// 	this._canvas.width = value;
-		// }
 		this._canvas.width = value;
 	}
 
@@ -31,11 +26,6 @@ export class HTMLCanvasElement extends Element {
 	}
 
 	set height(value) {
-		// if (global.isIOS) {
-		// 	this._canvas.height = value / Screen.mainScreen.scale;
-		// } else {
-		// 	this._canvas.height = value;
-		// }
 		this._canvas.height = value;
 	}
 

diff --git a/packages/canvas-polyfill/DOM/HTMLImageElement.ts b/packages/canvas-polyfill/DOM/HTMLImageElement.ts
@@ -7,7 +7,7 @@ const b64Extensions = {
 	'/': 'jpg',
 	i: 'png',
 	R: 'gif',
-	U: 'webp',
+//	U: 'webp',
 };
 
 function b64WithoutPrefix(b64) {
@@ -37,6 +37,7 @@ function getUUID() {
 export class HTMLImageElement extends Element {
 	private localUri: any;
 	private _onload: any;
+	private _onerror: any;
 	private _complete: any;
 	private _base64: string;
 	_asset;
@@ -62,6 +63,14 @@ export class HTMLImageElement extends Element {
 		this._onload = value;
 	}
 
+	get onerror() {
+		return this._onerror;
+	}
+
+	set onerror(value) {
+		this._onerror = value;
+	}
+
 	get complete() {
 		return this._complete;
 	}
@@ -73,6 +82,7 @@ export class HTMLImageElement extends Element {
 			this.onload();
 		}
 	}
+
 
 	constructor(props?) {
 		super('img');
@@ -107,6 +117,7 @@ export class HTMLImageElement extends Element {
 										console.log(`nativescript-browser-polyfill: Error:`, error.message);
 									}
 									this.emitter.emit('error', { target: this, error });
+									this._onerror?.();
 								} else {
 									this.localUri = localUri;
 									this._load();
@@ -122,6 +133,7 @@ export class HTMLImageElement extends Element {
 									success(response) {
 										const owner = ref.get();
 										if (owner) {
+											console.log(response.toString());
 											owner.localUri = response.toString();
 											owner._load();
 										}
@@ -133,16 +145,19 @@ export class HTMLImageElement extends Element {
 										const owner = ref.get();
 										if (owner) {
 											owner.emitter.emit('error', { target: ref.get(), message });
+											owner._onerror?.();
 										}
 									},
 								})
 							);
 						}
 					} catch (error) {
+						this.emitter.emit('loading', { target: this });
 						if ((global as any).__debug_browser_polyfill_image) {
 							console.log(`nativescript-browser-polyfill: Error:`, error.message);
 						}
 						this.emitter.emit('error', { target: this, error });
+						this._onerror?.();
 					}
 				})();
 				return;
@@ -158,8 +173,10 @@ export class HTMLImageElement extends Element {
 							this.width = this._asset.width;
 							this.height = this._asset.height;
 							this.complete = true;
+							this._onload?.();
 						} else {
 							this.emitter.emit('error', { target: this });
+							this._onerror?.();
 						}
 					} else {
 						this._asset
@@ -168,9 +185,11 @@ export class HTMLImageElement extends Element {
 								this.width = this._asset.width;
 								this.height = this._asset.height;
 								this.complete = true;
+								this._onload?.();
 							})
 							.catch((e) => {
 								this.emitter.emit('error', { target: this });
+								this._onerror?.();
 							});
 					}
 				} else {
@@ -182,8 +201,10 @@ export class HTMLImageElement extends Element {
 								this.width = this._asset.width;
 								this.height = this._asset.height;
 								this.complete = true;
+								this._onload?.();
 							} else {
 								this.emitter.emit('error', { target: this });
+								this._onerror?.();
 							}
 						} else {
 							this._asset
@@ -192,9 +213,11 @@ export class HTMLImageElement extends Element {
 									this.width = this._asset.width;
 									this.height = this._asset.height;
 									this.complete = true;
+									this._onload?.();
 								})
 								.catch((e) => {
 									this.emitter.emit('error', { target: this });
+									this._onerror?.();
 								});
 						}
 					}

diff --git a/packages/canvas-polyfill/DOM/HTMLVideoElement.ts b/packages/canvas-polyfill/DOM/HTMLVideoElement.ts
@@ -16,6 +16,17 @@ export class HTMLVideoElement extends Element {
 		}
 	}
 
+	canPlayType(type): '' | 'probably' | 'maybe' {
+		// "video/webm"
+		switch (type) {
+			case 'video/mp4':
+			case 'video/ogg':
+				return 'probably';
+			default:
+				return '';
+		}
+	}
+
 	addEventListener(type: string, listener: Function, useCapture: boolean | any) {
 		this._video?.addEventListener(type, listener, useCapture);
 	}