chore: updates

apps/demo/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@nativescript/android": "8.6.2",
-    "@nativescript/ios": "8.6.4",
+    "@nativescript/ios": "8.7.0",
     "@nativescript/visionos": "8.6.0"
   }
 }

apps/demo/src/plugin-demos/canvas-pixi.xml

@@ -5,7 +5,7 @@
 		</ActionBar>
 	</Page.actionBar>
 	<GridLayout width="100%" height="100%">
-		<canvas:Canvas width="100%" height="100%" id="canvas" ready="{{canvasLoaded}}" loaded="{{loaded}}"
+		<canvas:Canvas width="100%" height="100%" id="canvas" layoutChanged="{{canvasLoaded}}" loaded="{{loaded}}"
 									 unloaded="{{unloaded}}"/>
 	</GridLayout>
 </Page>

packages/canvas-pixi/index.ts

@@ -1,6 +1,6 @@
 require('@nativescript/canvas-polyfill');
 import * as Pixii from 'pixi.js';
-
+import { Screen } from '@nativescript/core';
 let PIXI = Pixii;
 
 // import * as filters from 'pixi-filters';
@@ -20,16 +20,19 @@ class NSCPIXIApplication extends Pixii.Application {
 			view = document.createElement('canvas');
 			view.nativeElement = context.canvas;
 		}
-		const width = props.width || clientWidth;
-		const height = props.height || clientHeight;
+		const width = props.width || clientWidth //* Screen.mainScreen.scale;
+		const height = props.height || clientHeight //* Screen.mainScreen.scale;
+
+		PIXI.settings.RESOLUTION = 1;
+
 
+		console.log(width, height, Screen.mainScreen.widthDIPs,  Screen.mainScreen.heightDIPs, Screen.mainScreen.widthPixels,  Screen.mainScreen.heightPixels,)
 		super({
-			resolution: global.isAndroid ? window.devicePixelRatio : 1,
 			...props,
-			context,
+			resolution: 1,
 			view,
 			width,
-			height
+			height,
 		});
 	}
 }

packages/canvas-polyfill/index.ts

@@ -16,8 +16,7 @@ import './process';
 import './localStorage';
 import { TextDecoder, TextEncoder, ImageBitmap } from '@nativescript/canvas';
 import { URL } from './URL';
-import { getPixelsPerInchForCurrentDevice } from './utils';
-console.log('ppi', getPixelsPerInchForCurrentDevice());
+
 (global as any).document = (global as any).window.document = (global as any).document || new Document();
 
 (global as any).window.createImageBitmap = (global as any).createImageBitmap = (...args) => {
@@ -97,7 +96,7 @@ if (!((global as any).TextEncoder instanceof TextEncoder)) {
 	});
 }
 
-if (!((global as any).URL instanceof URL)) {
+if (typeof global?.URL?.createObjectURL !== 'function') {
 	Object.defineProperty(global, 'URL', {
 		value: URL,
 		configurable: true,

packages/canvas/Canvas/index.android.ts

@@ -55,7 +55,7 @@ export class Canvas extends CanvasBase {
 		} else {
 			const activity = Application.android.foregroundActivity || Application.android.startActivity || Utils.android.getApplicationContext();
 			if (Canvas.useSurface) {
-				this._canvas = new org.nativescript.canvas.NSCCanvas(activity);
+				this._canvas = new org.nativescript.canvas.NSCCanvas(activity, org.nativescript.canvas.NSCCanvas.SurfaceType.Surface);
 			} else {
 				this._canvas = new org.nativescript.canvas.NSCCanvas(activity);
 			}
@@ -93,14 +93,12 @@ export class Canvas extends CanvasBase {
 		return this.height;
 	}
 
-	_drawingBufferHeight = 0;
 	get drawingBufferHeight() {
-		return this._drawingBufferHeight;
+		return this._canvas.getDrawingBufferHeight();
 	}
 
-	_drawingBufferWidth = 0;
 	get drawingBufferWidth() {
-		return this._drawingBufferWidth;
+		return this._canvas.getDrawingBufferWidth();
 	}
 
 	// @ts-ignore
@@ -203,47 +201,21 @@ export class Canvas extends CanvasBase {
 						owner._readyEvent();
 					}
 				},
-				surfaceResize(width, height) {
-					// if(this._webglContext || this._webgl2Context){
-					// 	(this._webglContext || this._webgl2Context)?.resize();
-					// }
-
-					const owner = ref.get() as any;
-					if (owner) {
-						owner._drawingBufferWidth = width / Screen.mainScreen.scale;
-						owner._drawingBufferHeight = height / Screen.mainScreen.scale;
-					}
-				},
+				surfaceResize(width, height) {},
 			})
 		);
 	}
 
-	onUnloaded() {
-		this._didPause = true;
-		// if (this._canvas) {
-		// 	this._canvas.onPause();
-		// }
-		super.onUnloaded();
-	}
-
-	@profile
-	onLoaded() {
-		super.onLoaded();
-		if (this._didPause) {
-			this._didPause = false;
-			// if (this._canvas) {
-			// 	this._canvas.onResume();
-			// }
-		}
-	}
-
 	disposeNativeView(): void {
 		this._canvas.setListener(null);
 		this._canvas = undefined;
 		super.disposeNativeView();
 	}
 
 	toDataURL(type = 'image/png', encoderOptions = 0.92) {
+		if (this.width === 0 || this.height === 0) {
+			return 'data:,';
+		}
 		return this.native.__toDataURL(type, encoderOptions);
 	}
 
@@ -275,11 +247,10 @@ export class Canvas extends CanvasBase {
 		const size = this._physicalSize;
 		org.nativescript.canvas.NSCCanvas.layoutView(size.width || 0, size.height || 0, this._canvas);
 
-		//	this._drawingBufferWidth = size.width || 1;
-		//	this._drawingBufferHeight = size.height || 1;
 		if (this._is2D) {
 			this._2dContext.native.__resize(size.width, size.height);
 		}
+
 		this._didLayout = true;
 	}
 
@@ -312,12 +283,17 @@ export class Canvas extends CanvasBase {
 					return null;
 				}
 
+				this._isBatch = true;
+				this.width = 500;
+				this.height = 500;
+				this._isBatch = false;
+
 				if (!this._2dContext) {
 					this._layoutNative();
 					const opts = {
 						...defaultOpts,
 						...this._handleContextOptions(type, options),
-						fontColor: this.parent?.style?.color?.android || -16777216,
+						fontColor: this.parent?.style?.color?.android ?? -16777216,
 					};
 
 					const ctx = this._canvas.create2DContext(opts.alpha, opts.antialias, opts.depth, opts.failIfMajorPerformanceCaveat, opts.powerPreference, opts.premultipliedAlpha, opts.preserveDrawingBuffer, opts.stencil, opts.desynchronized, opts.xrCompatible, opts.fontColor);

packages/canvas/Canvas/index.ios.ts

@@ -120,7 +120,7 @@ export class Canvas extends CanvasBase {
 	}
 
 	set width(value) {
-		this.style.width = value;
+		this.style.width = value ?? 0;
 		this._didLayout = false;
 		this._layoutNative(true);
 	}
@@ -239,25 +239,6 @@ export class Canvas extends CanvasBase {
 		return this._canvas;
 	}
 
-	initNativeView() {
-		super.initNativeView();
-	}
-
-	onUnloaded() {
-		//	this.ios.pause();
-		this._didPause = true;
-		super.onUnloaded();
-	}
-
-	@profile
-	onLoaded() {
-		super.onLoaded();
-		if (this._didPause) {
-			//	this.ios.resume();
-			this._didPause = false;
-		}
-	}
-
 	disposeNativeView(): void {
 		this._canvas?.setListener?.(null);
 		this._readyListener = undefined;
@@ -289,16 +270,11 @@ export class Canvas extends CanvasBase {
 
 			const size = this._logicalSize;
 
-			// todo revisit
-
-		//	const width = Utils.layout.toDevicePixels(size.width || 1);
-		//	const height = Utils.layout.toDevicePixels(size.height || 1);
-
-			this._canvas.forceLayout(size.width, size.height);
+			// this._canvas.forceLayout(size.width, size.height);
 
-			// if (this._is2D) {
-			// 	this._2dContext?.native?.__resize?.(width, height);
-			// }
+			if (this._is2D) {
+				this._2dContext?.native?.__resize?.(size.width, size.height);
+			}
 
 			this._didLayout = true;
 		}
@@ -389,6 +365,9 @@ export class Canvas extends CanvasBase {
 	}
 
 	toDataURL(type = 'image/png', encoderOptions = 0.92) {
+		if (this.width === 0 || this.height === 0) {
+			return 'data:,';
+		}
 		return this.native?.__toDataURL?.(type, encoderOptions);
 	}