fix: matrix

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

@@ -55,6 +55,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
 }
 
 export class DemoModel extends DemoSharedCanvas {
+	origin = { x: 128, y: 128 };
 	points = [
 		{ x: 128, y: 0 },
 		{ x: 168, y: 80 },

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

@@ -8,9 +8,9 @@
 
   <!-- <ui:Dom rowSpan="2" colSpan="2"> -->
 
-  <!-- <ui:Fill color="#e8f4f8" /> -->
+  <!-- <ui:Fill color="#e8f4f8" />
 
-    <!-- <ui:Rect x="0" y="0" width="256" height="256" color="lightblue"/>
+    <ui:Rect x="0" y="0" width="256" height="256" color="lightblue"/>
     <ui:Path path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z" color="red"/> -->
 
 <!-- <ui:RoundedRect
@@ -52,16 +52,22 @@
       </ui:Group> -->
 
 
-       <!-- <ui:Fill color="#e8f4f8" />
-      <ui:Group
+       <!-- <ui:Fill color="#e8f4f8" /> -->
+      <!-- <ui:Group
         color="lightblue"
-        origin="{x: 128, y: 128 }"
-        transform="[{ skewX: Math.PI / 6 }]"
+        origin="{{origin}}"
+        transform="{{[{ skewX: Math.PI / 6 }]}}"
       >
         <ui:RoundedRect x="64" y="64" width="128" height="128" r="10" /> 
 
-   </ui:Group>
-   -->
+   </ui:Group> -->
+
+
+   <!-- <ui:Circle cx="{{groupR}}" cy="{{groupR}}" r="{{groupR}}" color="#51AFED" />
+      <ui:Group color="lightblue" paintStyle="stroke" strokeWidth="10">
+        <ui:Circle cx="{{groupR}}" cy="{{groupR}}" r="{{ groupR / 2}}" />
+        <ui:Circle cx="{{groupR}}" cy="{{groupR}}" r="{{ groupR / 3}}" color="white" />
+      </ui:Group> -->
 
 
   <!-- <ui:Fill color="white" />
@@ -74,7 +80,7 @@
         x="0"
         y="400"
         text="Hello World"
-        font="bold 100px serif"
+        font="bold 32px serif"
       /> -->
 
 
@@ -83,10 +89,10 @@
         <ui:Shadow dx="12" dy="12" blur="25" color="#93b8c4" />
         <ui:Shadow dx="-12" dy="-12" blur="25" color="#c7f8ff" />
       </ui:RoundedRect>
-
+-->
 
-  </ui:Dom> 
-   -->
+  <!-- </ui:Dom>  -->
+
 
   <!-- <WebView rowSpan="2" colSpan="2" height="100%" width="100%" loaded="loaded"/> -->
 		 <canvas:Canvas rowSpan="2" colSpan="2" width="100%" height="100%" ready="{{ canvasLoaded }}"

packages/canvas-babylon/package.json

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

packages/canvas-chartjs/package.json

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

packages/canvas/Canvas2D/CanvasRenderingContext2D/index.ts

@@ -611,6 +611,11 @@ export class CanvasRenderingContext2D {
 		return this.context.getLineDash();
 	}
 
+
+	getTransform(): DOMMatrix {
+		return new DOMMatrix(this.context.getTransform());
+	}
+
 	isPointInPath(x: number, y: number, fillRule: string): boolean;
 
 	isPointInPath(path: Path2D, x: number, y: number, fillRule: string): boolean;
@@ -716,8 +721,16 @@ export class CanvasRenderingContext2D {
 		this.context.setLineDash(segments);
 	}
 
-	setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void {
-		this.context.setTransform(a, b, c, d, e, f);
+	setTransform(matrix: DOMMatrix): void
+	setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void
+	setTransform(a: number | DOMMatrix, b?: number, c?: number, d?: number, e?: number, f?: number): void {
+		if(typeof a === 'object'){
+			// @ts-ignore
+			this.context.setTransform(a.native);
+		}else {
+			this.context.setTransform(a, b, c, d, e, f);
+		}
+
 	}
 
 	stroke(): void;

packages/canvas/Canvas2D/DOMMatrix/index.ts

@@ -4,14 +4,15 @@ let ctor;
 export class DOMMatrix {
 	static {
 		Helpers.initialize();
-		ctor = global.CanvasModule.DOMMatrix;
 	}
 	_native;
 	constructor(instance?) {
 		if (Array.isArray(instance)) {
-			this._native = new ctor(instance);
+			this._native = new global.CanvasModule.DOMMatrix(instance);
 		} else if (!instance) {
-			this._native = new ctor();
+			this._native = new global.CanvasModule.DOMMatrix();
+		} else {
+			this._native = instance;
 		}
 	}
 

packages/canvas/Dom/Dom.ts

@@ -22,9 +22,15 @@ export class Dom extends LayoutBase {
 	}
 
 	_ready(args: EventData) {
-		this._children.forEach((child) => {
+		console.time('_ready');
+		for (const child of this._children) {
 			child.draw();
-		});
+		}
+
+		// this._children.forEach((child) => {
+		// 	child.draw();
+		// });
+		console.timeEnd('_ready');
 	}
 	_addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean {
 		if (view === this._canvas) {

packages/canvas/Dom/Group.ts

@@ -21,10 +21,11 @@ export const originProperty = new ShorthandProperty<Style, { x: number; y: numbe
 		const type = typeof value;
 		if (type === 'string') {
 			try {
-				const val = JSON.parse(value as any);
+				const val = JSON.parse(JSON.stringify(value as any));
+
 				return [
-					[originXProperty, val.x],
-					[originYProperty, val.y],
+					[originXProperty, val.x ?? 0],
+					[originYProperty, val.y ?? 0],
 				];
 			} catch (error) {}
 		}
@@ -40,7 +41,7 @@ export const originProperty = new ShorthandProperty<Style, { x: number; y: numbe
 	},
 });
 
-export const transformProperty = new Property<Group, any>({
+export const transformProperty = new Property<Group, any[]>({
 	name: 'transform',
 });
 
@@ -75,9 +76,21 @@ M11 = 0,
     M44 = 15,
 */
 
-function parseTransformation(value, transform: DOMMatrix) {
+function parseTransformation(value, _transform: DOMMatrix) {
 	/*
-		{matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}
+		{matrix: number[]},
+		 {perspective: number},
+		  {rotate: string},
+		  {rotateX: string},
+		   {rotateY: string},
+		    {rotateZ: string}, 
+			{scale: number}, 
+			{scaleX: number},
+			 {scaleY: number},
+			  {translateX: number}, 
+			  {translateY: number},
+			   {skewX: string},
+			    {skewY: string}
 		*/
 
 	const matrix = value.matrix;
@@ -150,58 +163,75 @@ function parseTransformation(value, transform: DOMMatrix) {
 
 	const skewX = value.skewX;
 
+	if (typeof skewX === 'number') {
+		_transform.c = skewX;
+	}
+
 	if (typeof skewX === 'string') {
 		return;
 	}
 
-	const skewY = value.translateY;
+	const skewY = value.skewY;
+
+	if (typeof skewY === 'number') {
+		_transform.b = skewY;
+	}
 
 	if (typeof skewY === 'string') {
 		return;
 	}
 }
 
-[{ skewX: Math.PI / 6 }];
-
 export class Group extends Paint {
 	_children: Set<Paint> = new Set();
 
 	_matrix: DOMMatrix;
-	origin: { x: number; y: number };
-	transform;
+	originX: number = 0;
+	originY: number = 0;
+	//origin: { x: number; y: number };
+	transform: any[];
 	constructor() {
 		super();
 	}
 	[transformProperty.setNative](value) {
-		if (typeof value === 'string') {
-			try {
-				const val = JSON.parse(JSON.stringify(value)) as any[];
-
-				const matrix = new DOMMatrix();
+		if (Array.isArray(value)) {
+			const matrix = new DOMMatrix();
+			value.forEach((item) => {
+				parseTransformation(item, matrix);
+			});
+			this._matrix = matrix;
+		}
+	}
 
-				if (Array.isArray(val)) {
-					val.forEach((item) => {
-						parseTransformation(val, matrix);
-					});
-				}
+	set origin(value) {
+		// @ts-ignore
+		this.style.origin = value;
+	}
 
-				this._matrix = matrix;
-			} catch (error) {}
-		}
+	get origin() {
+		// @ts-ignore
+		return this.style.origin;
 	}
+
 	draw() {
 		if (this._children.size > 0) {
 			const context = this._canvas.getContext('2d') as any as CanvasRenderingContext2D;
 			context.save();
-			context.translate(this.originX, this.originY);
+			const origin = this.origin;
+			context.translate(origin.x ?? 0, origin.y ?? 0);
+			if (this._matrix) {
+				context.setTransform(this._matrix);
+			}
+			context.lineWidth = this.strokeWidth;
 			this._children.forEach((child) => {
 				child.draw();
 			});
+
 			context.restore();
 		}
 	}
 
-	_addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean {
+	_addViewToNativeVisualTree(view: ViewBase, _atIndex?: number): boolean {
 		if (view instanceof Paint || view instanceof Image) {
 			view._addCanvas(this._canvas);
 			(view as any)._inGroup = true;

packages/canvas/Dom/Image.ts

@@ -38,9 +38,8 @@ export class Image extends View {
 			return;
 		}
 		const context = this._canvas.getContext('2d') as any;
-		const scale = Screen.mainScreen.scale;
 
-		context.drawImage(this.image as any, this.x * scale, this.y * scale, this.width * scale, this.height * scale);
+		context.drawImage(this.image as any, this.x, this.y, this.width, this.height);
 	}
 }