fix: font handling & custom font support

apps/demo/src/app.ts

@@ -68,15 +68,25 @@ const age = parseInt(params.get("age") as any); // is the number 18
 
 // other url: 648.170ms
 
-console.time('url');
-for (let i = 0; i < 1_000_000; i++) {
-	const url = new URL('https://example.com/?name=Jonathan%20Smith&age=18');
-}
-console.timeEnd('url');
+// try loading our custom font
 
-const url = new URL('https://example.com/?name=Jonathan%20Smith&age=18');
 
-console.log('canParse', URL.canParse('asdasd'), URL.canParse('https://example.com/?name=Jonathan%20Smith&age=18'));
+const font = nsPath.join(knownFolders.currentApp().path, 'fonts/Creepster-Regular.ttf');
+
+global.CanvasModule.__addFontFamily('creepster', [font]);
+
+
+
+
+// console.time('url');
+// for (let i = 0; i < 1_000_000; i++) {
+// 	const url = new URL('https://example.com/?name=Jonathan%20Smith&age=18');
+// }
+// console.timeEnd('url');
+
+// const url = new URL('https://example.com/?name=Jonathan%20Smith&age=18');
+
+// console.log('canParse', URL.canParse('asdasd'), URL.canParse('https://example.com/?name=Jonathan%20Smith&age=18'));
 
 Application.on('uncaughtError', (args) => {
 	console.log('uncaughtError: error', args.error);

packages/canvas-babylon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-babylon",
-  "version": "2.0.0-alpha.31",
+  "version": "2.0.0-alpha.32",
   "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.31",
+  "version": "2.0.0-alpha.32",
   "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.31",
+  "version": "2.0.0-alpha.32",
   "description": "Canvas media",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-phaser-ce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-phaser-ce",
-  "version": "2.0.0-alpha.31",
+  "version": "2.0.0-alpha.32",
   "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.31",
+  "version": "2.0.0-alpha.32",
   "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.31",
+  "version": "2.0.0-alpha.32",
   "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.31",
+  "version": "2.0.0-alpha.32",
   "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.31",
+  "version": "2.0.0-alpha.32",
   "description": "Utilities for using THREE.js on NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas/Canvas/common.ts

@@ -1046,13 +1046,7 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 				}
 				return value.value || 0;
 			} else if (value.unit === '%') {
-				const orientation = Application.orientation();
-				if (orientation === 'portrait' || orientation === 'landscape') {
-					if (global.isAndroid) {
-						return (measuredSize ?? (type === 'width' ? Screen.mainScreen.widthPixels : Screen.mainScreen.heightPixels)) * value.value ?? 0;
-					}
-					return (measuredSize ?? (type === 'width' ? Screen.mainScreen.widthDIPs : Screen.mainScreen.heightDIPs)) * value.value ?? 0;
-				}
+				return Utils.layout.toDeviceIndependentPixels(measuredSize * value.value ?? 0);
 			}
 		}
 

packages/canvas/Canvas/index.android.ts

@@ -115,6 +115,8 @@ export class Canvas extends CanvasBase {
 			}
 		}
 		return width / Screen.mainScreen.scale;
+
+		//return this._realSize.width;
 	}
 
 	set width(value) {
@@ -136,6 +138,7 @@ export class Canvas extends CanvasBase {
 			}
 		}
 		return height / Screen.mainScreen.scale;
+		//return this._realSize.height;
 	}
 
 	set height(value) {

packages/canvas/Canvas/index.ios.ts

@@ -111,32 +111,33 @@ export class Canvas extends CanvasBase {
 
 	//@ts-ignore
 	get width() {
-		const measuredWidth = this.getMeasuredWidth();
-		if (measuredWidth !== 0) {
-			return measuredWidth / Screen.mainScreen.scale;
-		}
+		// const measuredWidth = this.getMeasuredWidth();
+		// console.log(measuredWidth);
+		// if (measuredWidth !== 0) {
+		// 	return measuredWidth / Screen.mainScreen.scale;
+		// }
 		return this._realSize.width;
 	}
 
 	set width(value) {
 		this.style.width = value;
 		this._didLayout = false;
-		this._layoutNative();
+		this._layoutNative(true);
 	}
 
 	//@ts-ignore
 	get height() {
-		const measuredHeight = this.getMeasuredHeight();
-		if (measuredHeight !== 0) {
-			return measuredHeight / Screen.mainScreen.scale;
-		}
+		// const measuredHeight = this.getMeasuredHeight();
+		// if (measuredHeight !== 0) {
+		// 	return measuredHeight / Screen.mainScreen.scale;
+		// }
 		return this._realSize.height;
 	}
 
 	set height(value) {
 		this.style.height = value;
 		this._didLayout = false;
-		this._layoutNative();
+		this._layoutNative(true);
 	}
 
 	private _iosOverflowSafeArea = false;
@@ -241,27 +242,31 @@ export class Canvas extends CanvasBase {
 		super.disposeNativeView();
 	}
 
-	_layoutNative() {
-		if (!this._isCustom) {
+	_layoutNative(force: boolean = false) {
+		if (!this._isCustom && !force) {
 			return;
 		}
 
-		if (this._didLayout) {
+		if (this._didLayout && !force) {
 			return;
 		}
 
-		if (!this.parent) {
-			if ((typeof this.style.width === 'string' && this.style.width.indexOf('%')) || (typeof this.style.height === 'string' && this.style.height.indexOf('%'))) {
+		if (!this.parent || force) {
+			if (!force || (typeof this.style.width === 'string' && this.style.width.indexOf('%')) || (typeof this.style.height === 'string' && this.style.height.indexOf('%'))) {
 				return;
 			}
 
 			const size = this._realSize;
 
-			/*const width = Utils.layout.toDeviceIndependentPixels(size.width || 1);
-			const height = Utils.layout.toDeviceIndependentPixels(size.height || 1);*/
+			const width = Utils.layout.toDevicePixels(size.width || 1);
+			const height = Utils.layout.toDevicePixels(size.height || 1);
 
 			this._canvas.forceLayout(size.width, size.height);
 
+			if (this._is2D) {
+				this._2dContext.native.__resize(width, height);
+			}
+
 			this._didLayout = true;
 		}
 	}
@@ -384,16 +389,7 @@ export class Canvas extends CanvasBase {
 
 		NSCCanvas.getBoundingClientRect(this._canvas, this._boundingClientRect);
 
-		const ret = new DOMRect(
-			this._boundingClientRect[6],
-			this._boundingClientRect[7],
-			this._boundingClientRect[4],
-			this._boundingClientRect[5],
-			this._boundingClientRect[0],
-			this._boundingClientRect[1],
-			this._boundingClientRect[2],
-			this._boundingClientRect[3],
-		);
+		const ret = new DOMRect(this._boundingClientRect[6], this._boundingClientRect[7], this._boundingClientRect[4], this._boundingClientRect[5], this._boundingClientRect[0], this._boundingClientRect[1], this._boundingClientRect[2], this._boundingClientRect[3]);
 
 		// const ret = {
 		// 	bottom: this._boundingClientRect[2],

packages/canvas/Canvas2D/CanvasRenderingContext2D/index.ts

@@ -160,7 +160,7 @@ export class CanvasRenderingContext2D {
 	}
 
 	set textAlign(alignment: string) {
-		this.context.setTextAlign = alignment;
+		this.context.textAlign = alignment;
 	}
 
 	get globalCompositeOperation() {

packages/canvas/package.json

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

packages/canvas/platforms/ios/CanvasNative.xcframework/ios-arm64/CanvasNative.framework/Headers/canvas_native.h

@@ -203,6 +203,10 @@ typedef struct WebGLSync WebGLSync;
 
 void canvas_native_image_filter_destroy(struct ImageFilter *value);
 
+void canvas_native_font_add_family(const char *alias,
+                                   const char *const *filenames,
+                                   uintptr_t length);
+
 void canvas_native_helper_destroy(struct FileHelper *value);
 
 struct FileHelper *canvas_native_helper_read_file(const char *path);
@@ -655,8 +659,13 @@ void canvas_native_context_fill_rect(struct CanvasRenderingContext2D *context,
 void canvas_native_context_fill_text(struct CanvasRenderingContext2D *context,
                                      const char *text,
                                      float x,
-                                     float y,
-                                     float width);
+                                     float y);
+
+void canvas_native_context_fill_text_width(struct CanvasRenderingContext2D *context,
+                                           const char *text,
+                                           float x,
+                                           float y,
+                                           float width);
 
 struct ImageData *canvas_native_context_get_image_data(struct CanvasRenderingContext2D *context,
                                                        float sx,
@@ -767,8 +776,13 @@ void canvas_native_context_stroke_rect(struct CanvasRenderingContext2D *context,
 void canvas_native_context_stroke_text(struct CanvasRenderingContext2D *context,
                                        const char *text,
                                        float x,
-                                       float y,
-                                       float width);
+                                       float y);
+
+void canvas_native_context_stroke_text_width(struct CanvasRenderingContext2D *context,
+                                             const char *text,
+                                             float x,
+                                             float y,
+                                             float width);
 
 void canvas_native_context_transform(struct CanvasRenderingContext2D *context,
                                      float a,