chore: updates

packages/canvas-babylon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-babylon",
-  "version": "2.0.0-alpha.32",
+  "version": "2.0.0-alpha.33",
   "description": "",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-chartjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-chartjs",
-  "version": "2.0.0-alpha.32",
+  "version": "2.0.0-alpha.33",
   "description": "ChartJS",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-media/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-media",
-  "version": "2.0.0-alpha.32",
+  "version": "2.0.0-alpha.33",
   "description": "Canvas media",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-media/video/index.ios.ts

@@ -265,7 +265,6 @@ export class Video extends VideoBase {
 			this._asset = AVURLAsset.assetWithURL(url);
 			const keys = ['tracks', 'duration'];
 			this._asset.loadValuesAsynchronouslyForKeysCompletionHandler(keys, () => {
-				console.dir(this._asset.tracksWithMediaType(AVMediaTypeVideo));
 				this._videoSize = this._asset.tracksWithMediaType(AVMediaTypeVideo)?.objectAtIndex(0).naturalSize ?? undefined;
 
 				const fps = this._asset.tracks.firstObject?.nominalFrameRate ?? 30;

packages/canvas-phaser-ce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-phaser-ce",
-  "version": "2.0.0-alpha.32",
+  "version": "2.0.0-alpha.33",
   "description": "Tools for using Phaser-ce to build native 2D games in NativeScript 👾",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-phaser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-phaser",
-  "version": "2.0.0-alpha.32",
+  "version": "2.0.0-alpha.33",
   "description": "Build awesome 2D games with Phaser.js and NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-pixi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-pixi",
-  "version": "2.0.0-alpha.32",
+  "version": "2.0.0-alpha.33",
   "description": "Plugin for using pixi.js in NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-polyfill/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-polyfill",
-  "version": "2.0.0-alpha.32",
+  "version": "2.0.0-alpha.33",
   "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",

packages/canvas-three/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-three",
-  "version": "2.0.0-alpha.32",
+  "version": "2.0.0-alpha.33",
   "description": "Utilities for using THREE.js on NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas/Canvas/common.ts

@@ -532,6 +532,7 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 						movementX: pointer.x - previousEvent.x,
 						movementY: pointer.y - previousEvent.y,
 						isPrimary: pointerId === 0,
+						button: -1
 					});
 
 					for (const callback of this._pointerMoveCallbacks) {
@@ -549,6 +550,7 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 						pageY: pointer.y,
 						movementX: pointer.x - previousEvent.x,
 						movementY: pointer.y - previousEvent.y,
+						button: -1
 					});
 
 					for (const callback of this._mouseMoveCallbacks) {
@@ -828,6 +830,7 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 						pageY: pointer.y,
 						movementX: pointer.x - previousEvent.x,
 						movementY: pointer.y - previousEvent.y,
+						button: -1
 					});
 
 					for (const callback of this._pointerMoveCallbacks) {
@@ -845,6 +848,7 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 						pageY: pointer.y,
 						movementX: pointer.x - previousEvent.x,
 						movementY: pointer.y - previousEvent.y,
+						button: -1
 					});
 
 					for (const callback of this._mouseMoveCallbacks) {

packages/canvas/Canvas/index.android.ts

@@ -40,7 +40,7 @@ export class Canvas extends CanvasBase {
 
 	private _contextType = ContextType.None;
 	private _is2D = false;
-
+	private _isBatch = false;
 	constructor() {
 		super();
 		const activity = Application.android.foregroundActivity || Application.android.startActivity || Utils.android.getApplicationContext();
@@ -149,9 +149,11 @@ export class Canvas extends CanvasBase {
 
 	static createCustomView() {
 		const canvas = new Canvas();
+		canvas._isBatch = true;
 		canvas.width = 300;
 		canvas.height = 150;
 		canvas._isCustom = true;
+		canvas._isBatch = false;
 		canvas._layoutNative();
 		return canvas;
 	}
@@ -270,6 +272,9 @@ export class Canvas extends CanvasBase {
 	}
 
 	_layoutNative() {
+		if (this._isBatch) {
+			return;
+		}
 		if (!this._isCustom) {
 			return;
 		}

packages/canvas/Canvas/index.d.ts

@@ -25,6 +25,7 @@ export declare class Canvas extends CanvasBase {
 	readonly clientHeight: number;
 	private _2dContext;
 	private canvas;
+	native: any;
 
 	constructor();
 

packages/canvas/Canvas/index.ios.ts

@@ -43,7 +43,7 @@ export class Canvas extends CanvasBase {
 
 	private _contextType = ContextType.None;
 	private _is2D = false;
-
+	private _isBatch = false;
 	_didLayout = false;
 
 	constructor() {
@@ -160,9 +160,11 @@ export class Canvas extends CanvasBase {
 
 	static createCustomView() {
 		const canvas = new Canvas();
-		canvas.width = 300;
-		canvas.height = 150;
+		canvas._isBatch = true;
 		canvas._isCustom = true;
+		canvas.style.width = 300;
+		canvas.style.height = 150;
+		canvas._isBatch = false;
 		canvas._layoutNative();
 		return canvas;
 	}
@@ -243,6 +245,10 @@ export class Canvas extends CanvasBase {
 	}
 
 	_layoutNative(force: boolean = false) {
+		if (this._isBatch) {
+			return;
+		}
+
 		if (!this._isCustom && !force) {
 			return;
 		}
@@ -258,6 +264,7 @@ export class Canvas extends CanvasBase {
 
 			const size = this._realSize;
 
+
 			const width = Utils.layout.toDevicePixels(size.width || 1);
 			const height = Utils.layout.toDevicePixels(size.height || 1);
 
@@ -285,6 +292,7 @@ export class Canvas extends CanvasBase {
 					this._layoutNative();
 					const opts = { ...defaultOpts, ...this._handleContextOptions(type, options), 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);
 
 					this._2dContext = new (CanvasRenderingContext2D as any)(ctx);
@@ -295,6 +303,7 @@ export class Canvas extends CanvasBase {
 					this._contextType = ContextType.Canvas;
 					// @ts-ignore
 					this._2dContext._type = '2d';
+					this._is2D = true;
 				}
 
 				return this._2dContext;

packages/canvas/Canvas2D/CanvasRenderingContext2D/index.ts

@@ -107,6 +107,14 @@ export class CanvasRenderingContext2D {
 		this.context.lineDashOffset = offset;
 	}
 
+	get letterSpacing() {
+		return this.context.letterSpacing;
+	}
+
+	set letterSpacing(spacing: string) {
+		this.context.letterSpacing = spacing;
+	}
+
 	get lineJoin() {
 		return this.context.lineJoin;
 	}
@@ -163,6 +171,14 @@ export class CanvasRenderingContext2D {
 		this.context.textAlign = alignment;
 	}
 
+	get textBaseline() {
+		return this.context.textBaseline;
+	}
+
+	set textBaseline(baseline: string) {
+		this.context.textBaseline = baseline;
+	}
+
 	get globalCompositeOperation() {
 		return this.context.globalCompositeOperation;
 	}
@@ -217,6 +233,14 @@ export class CanvasRenderingContext2D {
 		this.context.lineWidth = width;
 	}
 
+	get wordSpacing() {
+		return this.context.wordSpacing;
+	}
+
+	set wordSpacing(spacing: string) {
+		this.context.wordSpacing = spacing;
+	}
+
 	__toDataURL(type: string = 'image/jpg', quality: number = 92) {
 		return this.context.__toDataURL(type, quality);
 	}

packages/canvas/WebGL/WebGLRenderingContext/index.ts

@@ -337,8 +337,6 @@ export class WebGLRenderingContext extends WebGLRenderingContextBase {
 
 	@profile
 	detachShader(program: WebGLProgram, shader: WebGLShader): void {
-		this._glCheckError('detachShader');
-		this._checkArgs('detachShader', arguments);
 		const value = program.native;
 		const value2 = shader.native;
 		this.native.detachShader(value, value2);
@@ -822,9 +820,10 @@ export class WebGLRenderingContext extends WebGLRenderingContextBase {
 
 	@profile
 	texImage2D(target: any, level: any, internalformat: any, width: any, height: any, border: any, format?: any, type?: any, pixels?: any) {
-		if (arguments.length === 9) {
+		const length = arguments.length;
+		if (length === 9) {
 			this.native.texImage2D(target, level, internalformat, width, height, border, format, type ?? internalformat, pixels);
-		} else if (arguments.length === 6) {
+		} else if (length === 6) {
 			if (border && typeof border.tagName === 'string' && (border.tagName === 'VID' || border.tagName === 'VIDEO') && border._video && typeof border._video.getCurrentFrame === 'function') {
 				border._video.getCurrentFrame(this.native, this, target, level, internalformat, width, height);
 			} else if (border && typeof border.getCurrentFrame === 'function') {
@@ -833,11 +832,15 @@ export class WebGLRenderingContext extends WebGLRenderingContextBase {
 				this.native.texImage2D(target, level, internalformat, width, height, border.native);
 			} else if (border instanceof ImageBitmap) {
 				this.native.texImage2D(target, level, internalformat, width, height, border.native);
+			} else if (border instanceof Canvas) {
+				this.native.texImage2D(target, level, internalformat, width, height, border.native);
 			} else if (global.isAndroid && border instanceof android.graphics.Bitmap) {
 				// todo ios
 				this.native.texImage2D(target, level, internalformat, width, height, border);
 			} else if (border instanceof ImageSource) {
-				this.native.texImage2D(target, level, internalformat, width, height, border.android);
+				if (global.isAndroid) {
+					this.native.texImage2D(target, level, internalformat, width, height, border.android);
+				}
 			} else if (border && typeof border.tagName === 'string' && (border.tagName === 'IMG' || border.tagName === 'IMAGE')) {
 				if (border._asset instanceof ImageAsset) {
 					this.native.texImage2D(target, level, internalformat, width, height, border._asset.native);
@@ -847,7 +850,9 @@ export class WebGLRenderingContext extends WebGLRenderingContextBase {
 					//todo ios
 					this.native.texImage2D(target, level, internalformat, width, height, border._image);
 				} else if (typeof border.src === 'string') {
-					this.native.texImage2D(target, level, internalformat, width, height, ImageSource.fromFileSync(border.src).android);
+					if (global.isAndroid) {
+						this.native.texImage2D(target, level, internalformat, width, height, ImageSource.fromFileSync(border.src).android);
+					}
 				}
 			} else if (border && typeof border.tagName === 'string' && border.tagName === 'CANVAS' && border._canvas instanceof Canvas) {
 				this.native.texImage2D(target, level, internalformat, width, height, border._canvas.native);
@@ -871,29 +876,42 @@ export class WebGLRenderingContext extends WebGLRenderingContextBase {
 
 	@profile
 	texSubImage2D(target: any, level: any, xoffset: any, yoffset: any, width: any, height: any, format: any, type?: any, pixels?: any) {
-		if (arguments.length === 9) {
+		const length = arguments.length;
+		if (length === 9) {
 			this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, pixels);
-		} else if (arguments.length === 7) {
+		} else if (length === 7) {
 			if (global.isAndroid && format instanceof android.graphics.Bitmap) {
 				// todo
 				this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format);
 			} else if (format instanceof ImageSource) {
-				this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format.android);
+				if (global.isAndroid) {
+					this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format.android);
+				}
 			} else if (format instanceof ImageAsset) {
 				this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format.native);
+			} else if (format instanceof Canvas) {
+				this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format.native);
 			} else if (format instanceof ImageBitmap) {
 				this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format.native);
 			} else if (format && typeof format.tagName === 'string' && (format.tagName === 'IMG' || format.tagName === 'IMAGE')) {
 				if (format._imageSource instanceof ImageSource) {
-					this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format._imageSource.android);
+					if (global.isAndroid) {
+						this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format._imageSource.android);
+					}
 				} else if (global.isAndroid && format._image instanceof android.graphics.Bitmap) {
 					// todo
 					this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format._image);
 				} else if (format._asset instanceof ImageAsset) {
 					this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format._asset.native);
 				} else if (typeof format.src === 'string') {
 					const result = ImageSource.fromFileSync(format.src);
-					this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, result ? result.android : null);
+					if (global.isAndroid && result.android) {
+						this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, result.android);
+					}
+
+					if (global.isIOS && result.ios) {
+						this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, result.ios);
+					}
 				}
 			} else if (format && typeof format.tagName === 'string' && format.tagName === 'CANVAS' && format._canvas instanceof Canvas) {
 				this.native.texSubImage2D(target, level, xoffset, yoffset, width, height, format._canvas.native);

packages/canvas/WebGL2/WebGL2RenderingContext/index.ts

@@ -396,6 +396,8 @@ export class WebGL2RenderingContext extends WebGL2RenderingContextBase {
 			this.native.texImage3D(target, level, internalformat, width, height, depth, border, format, type, source.android);
 		} else if (source instanceof ImageAsset) {
 			this.native.texImage3D(target, level, internalformat, width, height, depth, border, format, type, source.native);
+		} else if (source instanceof Canvas) {
+			this.native.texImage3D(target, level, internalformat, width, height, depth, border, format, type, source.native);
 		} else if (source instanceof ImageBitmap) {
 			this.native.texImage3D(target, level, internalformat, width, height, depth, border, format, type, source.native);
 		} else if (source && typeof source.tagName === 'string' && (source.tagName === 'IMG' || source.tagName === 'IMAGE')) {
@@ -437,6 +439,8 @@ export class WebGL2RenderingContext extends WebGL2RenderingContextBase {
 			this.native.texSubImage3D(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, srcData.android);
 		} else if (srcData instanceof ImageAsset) {
 			this.native.texSubImage3D(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, srcData.native);
+		} else if (srcData instanceof Canvas) {
+			this.native.texSubImage3D(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, srcData.native);
 		} else if (srcData instanceof ImageBitmap) {
 			this.native.texSubImage3D(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, srcData.native);
 		} else if (srcData && typeof srcData.tagName === 'string' && (srcData.tagName === 'IMG' || srcData.tagName === 'IMAGE')) {
@@ -450,7 +454,7 @@ export class WebGL2RenderingContext extends WebGL2RenderingContextBase {
 				const result = ImageSource.fromFileSync(srcData.src);
 				this.native.texSubImage3D(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, result ? result.android : null);
 			}
-		} else if (srcData && typeof srcData.tagName === 'string' && srcData.tagName === 'CANVAS' && srcData._canvas instanceof TNSCanvas) {
+		} else if (srcData && typeof srcData.tagName === 'string' && srcData.tagName === 'CANVAS' && srcData._canvas instanceof Canvas) {
 			this.native.texSubImage3D(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, srcData._canvas.native);
 		}
 	}

packages/canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas",
-  "version": "2.0.0-alpha.32",
+  "version": "2.0.0-alpha.33",
   "description": "DOM Canvas API for NativeScript",
   "main": "index",
   "typings": "index.d.ts",