feat: drawAtlas

fix: layout

apps/demo/src/app.ts

@@ -3,8 +3,8 @@ Helpers.initialize();
 require('@nativescript/canvas-polyfill');
 */
 const TextDecoderO = TextDecoder;
-require('@nativescript/canvas-polyfill');
-import { Canvas } from '@nativescript/canvas';
+// require('@nativescript/canvas-polyfill');
+// import { Canvas } from '@nativescript/canvas';
 declare const jp, GDPerformanceMonitor;
 let monitor;
 import { Application, path as filePath, knownFolders, Utils, path as nsPath, ImageSource, Trace } from '@nativescript/core';
@@ -71,9 +71,9 @@ const age = parseInt(params.get("age") as any); // is the number 18
 
 // try loading our custom font
 
-const font = nsPath.join(knownFolders.currentApp().path, 'fonts/Creepster-Regular.ttf');
+// const font = nsPath.join(knownFolders.currentApp().path, 'fonts/Creepster-Regular.ttf');
 
-global.CanvasModule.__addFontFamily('creepster', [font]);
+// global.CanvasModule.__addFontFamily('creepster', [font]);
 
 // Canvas.useSurface = true;
 
@@ -169,6 +169,7 @@ Application.on('uncaughtError', (args) => {
 	console.log('uncaughtError: error', args.error);
 	console.log('uncaughtError: platform error', args.android ?? args.ios);
 });
+
 Application.on('launch', (args) => {
 	//require('@nativescript/canvas-polyfill');
 	if (global.isAndroid) {

apps/demo/src/plugin-demos/canvas.ts

@@ -1,7 +1,7 @@
 import { EventData, ImageSource, Page, Screen, View, WebView } from '@nativescript/core';
 import { DemoSharedCanvas } from '@demo/shared';
 import { ImageAsset } from '@nativescript/canvas';
-import { Dom } from '@nativescript/canvas/Dom';
+import { Dom, Group, Rect, drawAsImage } from '@nativescript/canvas/Dom';
 
 export function navigatingTo(args: EventData) {
 	const page = <Page>args.object;
@@ -90,14 +90,71 @@ export class DemoModel extends DemoSharedCanvas {
 	r = (this.width - this.strokeWidth) / 2;
 	groupR = 128;
 	dom: Dom;
+	img;
+	transforms = [];
+	sprites = [];
 	constructor() {
 		super();
-		this.image.fromFileSync('~/assets/file-assets/webgl/svh.jpeg');
-		console.log(this.image.width);
+		this.image.fromFile('~/assets/file-assets/webgl/svh.jpeg');
 	}
 
 	domLoaded(event) {
 		this.dom = event.object;
+		/*const size = { width: 25, height: 11.25 };
+		const strokeWidth = 2;
+		const imageSize = {
+			width: size.width + strokeWidth,
+			height: size.height + strokeWidth,
+		};
+		const group = new Group();
+		const rect1 = new Rect();
+		rect1.x = strokeWidth / 2;
+		rect1.y = strokeWidth / 2;
+		rect1.width = size.width;
+		rect1.height = size.height;
+		rect1.color = 'cyan' as any;
+
+		const rect2 = new Rect();
+
+		rect2.x = strokeWidth / 2;
+		rect2.y = strokeWidth / 2;
+		rect2.width = size.width;
+		rect2.height = size.height;
+
+		rect2.color = 'blue' as any;
+		rect2.paintStyle = 'stroke';
+		rect2.strokeWidth = strokeWidth;
+
+		group.addChild(rect1);
+		group.addChild(rect2);
+
+		const img = drawAsImage([group], imageSize);
+
+		const numberOfBoxes = 150;
+		const pos = { x: 128, y: 128 };
+		const width = 256;
+
+
+		
+		const sprites = new Array(numberOfBoxes).fill(0).map(() => {
+			return { x: 0, y: 0, width: imageSize.width, height: imageSize.height };
+		});
+
+		this.set('sprites', sprites);
+
+		const transforms = new Array(numberOfBoxes).fill(0).map((_, i) => {
+			const tx = 5 + ((i * size.width) % width);
+			const ty = 25 + Math.floor(i / (width / size.width)) * size.width;
+			const r = Math.atan2(pos.y - ty, pos.x - tx);
+			return { scos: Math.cos(r), ssin: Math.sin(r), tx, ty };
+		});
+
+		this.set('transforms', transforms);
+
+		this.set('img', img);
+
+		*/
+
 	}
 
 	rectLoaded(event) {

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

@@ -6,7 +6,7 @@
 
   <GridLayout rows="*" columns="*" loaded="{{ gridLoaded }}" iosOverflowSafeArea="false" width="100%" height="100%">
 
-  <!-- <ui:Dom rowSpan="2" colSpan="2" loaded="{{ domLoaded }}}"> -->
+  <!-- <ui:Dom rowSpan="2" colSpan="2" loaded="{{ domLoaded }}"> -->
 
 
   <!-- <ui:Line
@@ -69,6 +69,9 @@ loaded="{{ rectLoaded }}"
 
 <!-- <ui:Image image="{{image}}" fit="contain" x="0" y="0"  width="256" height="256"/> -->
 
+
+  <!-- <ui:Atlas image="{{img}}" sprites="{{ sprites }}" transforms="{{ transforms }}" /> -->
+
        <!-- <ui:Circle c="{{c}}" r="{{r}}" color="red">
         <ui:Paint color="lightblue" />
         <ui:Paint color="#adbce6" paintStyle="stroke" strokeWidth="{{strokeWidth}}" />

packages/canvas-babylon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-babylon",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.8",
   "description": "",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-media/package.json

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

packages/canvas/Canvas/common.ts

@@ -1060,6 +1060,9 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 	};
 
 	private getSize(value, measuredSize, type): number {
+		if (value === 'auto') {
+			return Utils.layout.toDeviceIndependentPixels(Utils.layout.getMeasureSpecSize(Utils.layout.makeMeasureSpec(measuredSize, Utils.layout.UNSPECIFIED)));
+		}
 		if (typeof value === 'string') {
 			value = PercentLength.parse(value);
 		}

packages/canvas/Canvas/index.ios.ts

@@ -47,7 +47,7 @@ export class Canvas extends CanvasBase {
 	_didLayout = false;
 
 	static useSurface = false;
-	
+
 	constructor(nativeInstance?) {
 		super();
 		if (nativeInstance) {
@@ -120,7 +120,6 @@ export class Canvas extends CanvasBase {
 	//@ts-ignore
 	get width() {
 		// const measuredWidth = this.getMeasuredWidth();
-		// console.log(measuredWidth);
 		// if (measuredWidth !== 0) {
 		// 	return measuredWidth / Screen.mainScreen.scale;
 		// }