chore: updates

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

@@ -10,13 +10,25 @@
 
 
   <!-- <ui:Line
-        p1="{{({x: 0, y: 0})}}"
+
+        p1="{{({x: 10, y: 10})}}"
         p2="{{({x: 256, y: 256})}}"
         color="lightblue"
         paintStyle="stroke"
-        strokeWidth="4"
+        strokeWidth="8"
+      />
+
+        <ui:Points
+        points="{{ points }}"
+        mode="points"
+        color="lightblue"
+        paintStyle="stroke"
+        strokeWidth="1"
       /> -->
 
+
+       <!-- <ui:Oval x="64" y="0" width="128" height="256" color="lightblue" /> -->
+
   <!-- <ui:Fill color="#e8f4f8" />
 
     <ui:Rect x="0" y="0" width="256" height="256" color="lightblue"/>

packages/canvas-babylon/package.json

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

packages/canvas/Canvas2D/Path2D/index.ts

@@ -2,13 +2,12 @@ import { DOMMatrix } from '../DOMMatrix';
 
 import { Helpers } from '../../helpers';
 
-
 export class Path2D {
 	static {
 		Helpers.initialize();
 	}
 
-	_native;
+	private _native;
 	constructor(instance?: any) {
 		let nativeInstance;
 		if (!instance) {
@@ -28,9 +27,7 @@ export class Path2D {
 		return this._native;
 	}
 
-
 	addPath(path: Path2D, transform?: DOMMatrix): void {
-		//const addPath = this._getMethod('addPath');
 		if (transform) {
 			this.native.addPath(path.native, transform.native);
 		} else {
@@ -39,59 +36,52 @@ export class Path2D {
 	}
 
 	arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean = false): void {
-		//const arc = this._getMethod('arc');
 		this.native.arc(x, y, radius, startAngle, endAngle, anticlockwise ?? false);
 	}
 
 	arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void {
-		//const arcTo = this._getMethod('arcTo');
 		this.native.arcTo(x1, y1, x2, y2, radius);
 	}
 
 	bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void {
-		//const bezierCurveTo = this._getMethod('bezierCurveTo');
 		this.native.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
 	}
 
 	closePath(): void {
-		//const closePath = this._getMethod('closePath');
 		this.native.closePath();
 	}
 
 	ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean = false): void {
-		//const ellipse = this._getMethod('ellipse');
 		this.native.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise ?? false);
 	}
 
 	lineTo(x: number, y: number): void {
-		//const lineTo = this._getMethod('lineTo');
 		this.native.lineTo(x, y);
 	}
 
 	moveTo(x: number, y: number): void {
-		//const moveTo = this._getMethod('moveTo');
 		this.native.moveTo(x, y);
 	}
 
 	quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void {
-		//const quadraticCurveTo = this._getMethod('quadraticCurveTo');
 		this.native.quadraticCurveTo(cpx, cpy, x, y);
 	}
 
 	rect(x: number, y: number, width: number, height: number): void {
-		//const rect = this._getMethod('rect');
 		this.native.rect(x, y, width, height);
 	}
 
 	public roundRect(x: number, y: number, width: number, height: number, radii: number): void;
 	public roundRect(x: number, y: number, width: number, height: number, radii: number[]): void;
 	public roundRect(x: unknown, y: unknown, width: unknown, height: unknown, radii: unknown): void {
-		//const roundRect = this._getMethod('roundRect');
 		this.native.roundRect(x, y, width, height, radii);
 	}
 
+	trim(start: number, end: number): void {
+		this.native.trim(start, end);
+	}
+
 	__toSVG() {
-		//const __toSVG = this._getMethod('__toSVG');
 		return this.native.__toSVG();
 	}
 }

packages/canvas/Dom/Text.ts

@@ -57,7 +57,8 @@ export class Text extends Paint {
 				break;
 			case 'stroke':
 				context.strokeStyle = color;
-				context.lineWidth = this.strokeWidth;
+				context.lineWidth = this._getStrokeWidth();
+				context.lineJoin = this._getStrokeJoin();
 				context.strokeText(this.text, this.x, this.y);
 				break;
 		}

packages/canvas/Dom/shapes/Circle.ts

@@ -95,6 +95,7 @@ export class Circle extends Paint {
 					case 'stroke':
 						context.strokeStyle = color;
 						context.lineWidth = child._getStrokeWidth();
+						context.lineJoin = child._getStrokeJoin();
 						context.stroke();
 						break;
 				}

packages/canvas/Dom/shapes/Line.ts

@@ -27,7 +27,7 @@ export class Line extends Paint {
 		const override_color = (this.parent as any)._overrideColor;
 		const context = this._canvas.getContext('2d') as any as CanvasRenderingContext2D;
 		const line = new Path2D();
-		line.lineTo(this.p1.x, this.p1.y);
+		line.moveTo(this.p1.x, this.p1.y);
 		line.lineTo(this.p2.x, this.p2.y);
 		const color = this._getColor();
 		const style = this._getPaintStyle();
@@ -38,6 +38,7 @@ export class Line extends Paint {
 		} else if (style === 'stroke') {
 			context.strokeStyle = color;
 			context.lineWidth = this._getStrokeWidth();
+			context.lineJoin = this._getStrokeJoin();
 			context.stroke(line);
 		}
 	}

packages/canvas/Dom/shapes/Oval.ts

@@ -0,0 +1,99 @@
+import { colorProperty, Property, booleanConverter, ViewBase, Screen } from '@nativescript/core';
+import { Group } from '../Group';
+import { Paint } from '../Paint';
+import { Shadow } from '../Shadow';
+import { Rect } from './Rect';
+
+export class Oval extends Rect {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+
+	_children: Paint[] = [];
+
+	draw() {
+		const context = this._canvas.getContext('2d') as any;
+		const color = this._getColor();
+		if (this._children.length > 0) {
+			this._children.forEach((child) => {
+				const child_color = child._getColor();
+				const paintStyle = child._getPaintStyle();
+				switch (paintStyle) {
+					case 'fill':
+						context.fillStyle = color;
+						if (child instanceof Shadow) {
+							const dx = context.shadowOffsetX;
+							const dy = context.shadowOffsetY;
+							const blur = context.shadowBlur;
+							const shadowColor = context.shadowColor;
+
+							context.shadowOffsetX = child.dx;
+							context.shadowOffsetY = child.dy;
+							context.shadowBlur = child.blur;
+							context.shadowColor = child_color;
+
+							context.fillOval(this.x, this.y, this.width, this.height);
+
+							context.shadowOffsetX = dx;
+							context.shadowOffsetY = dy;
+							context.shadowBlur = blur;
+							context.shadowColor = shadowColor;
+						} else {
+							context.fillOval(this.x, this.y, this.width, this.height);
+						}
+
+						break;
+					case 'stroke':
+						context.strokeStyle = color;
+						context.lineWidth = child._getStrokeWidth();
+						context.lineJoin = child._getStrokeJoin();
+
+						if (child instanceof Shadow) {
+							const dx = context.shadowOffsetX;
+							const dy = context.shadowOffsetY;
+							const blur = context.shadowBlur;
+							const shadowColor = context.shadowColor;
+
+							context.shadowOffsetX = child.dx;
+							context.shadowOffsetY = child.dy;
+							context.shadowBlur = child.blur;
+							context.shadowColor = child_color;
+
+							context.strokeOval(this.x, this.y, this.width, this.height);
+
+							context.shadowOffsetX = dx;
+							context.shadowOffsetY = dy;
+							context.shadowBlur = blur;
+							context.shadowColor = shadowColor;
+						} else {
+							context.strokeOval(this.x, this.y, this.width, this.height);
+						}
+
+						break;
+				}
+			});
+		} else {
+			const paintStyle = this._getPaintStyle();
+			switch (paintStyle) {
+				case 'fill':
+					context.fillStyle = color;
+					context.fillOval(this.x, this.y, this.width, this.height);
+					break;
+				case 'stroke':
+					context.strokeStyle = color;
+					context.lineWidth = this._getStrokeWidth();
+					context.lineJoin = this._getStrokeJoin();
+					context.strokeOval(this.x, this.y, this.width, this.height);
+					break;
+			}
+		}
+	}
+
+	_addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean {
+		if (view instanceof Paint) {
+			this._children.push(view);
+		}
+		return false;
+	}
+}