feat: dom shaders

packages/canvas/Dom/index.ts

@@ -6,3 +6,4 @@ export * from './Paint';
 export * from './Fill';
 export * from './Text';
 export * from './Shadow';
+export * from './shaders';

packages/canvas/Dom/shaders/Gradients.ts

@@ -0,0 +1,3 @@
+import { Paint } from '../Paint';
+
+export class Gradients extends Paint {}

packages/canvas/Dom/shaders/LinearGradient.ts

@@ -0,0 +1,45 @@
+import { Property } from '@nativescript/core';
+import { Gradients } from './Gradients';
+
+const startProperty = new Property<LinearGradient, { x: number; y: number }>({
+	name: 'start',
+});
+
+const endProperty = new Property<LinearGradient, { x: number; y: number }>({
+	name: 'end',
+});
+
+const colorsProperty = new Property<LinearGradient, string[]>({
+	name: 'colors',
+});
+
+export class LinearGradient extends Gradients {
+	start: { x: number; y: number };
+	end: { x: number; y: number };
+	colors: string[];
+
+	_getColor() {
+		const ctx = this._canvas.getContext('2d');
+		const gradient = ctx.createLinearGradient(this.start.x, this.start.y, this.end.x, this.end.y);
+
+		for (let i = 0; i < this.colors.length; i++) {
+			gradient.addColorStop(i, this.colors[i]);
+		}
+
+		return gradient;
+	}
+
+	draw(): void {
+		const ctx = this._canvas.getContext('2d');
+		const gradient = this._getColor();
+		if (this._getPaintStyle() === 'stroke') {
+			ctx.strokeStyle = gradient;
+		} else {
+			ctx.fillStyle = gradient;
+		}
+	}
+}
+
+startProperty.register(LinearGradient);
+endProperty.register(LinearGradient);
+colorsProperty.register(LinearGradient);

packages/canvas/Dom/shaders/TwoPointConicalGradient.ts

@@ -0,0 +1,59 @@
+import { Property } from '@nativescript/core';
+import { Gradients } from './Gradients';
+
+const startProperty = new Property<TwoPointConicalGradient, { x: number; y: number }>({
+	name: 'start',
+});
+
+const startRProperty = new Property<TwoPointConicalGradient, number>({
+	name: 'startR',
+	valueConverter: parseFloat
+});
+
+const endProperty = new Property<TwoPointConicalGradient, { x: number; y: number }>({
+	name: 'end',
+});
+
+const endRProperty = new Property<TwoPointConicalGradient, number>({
+	name: 'endR',
+	valueConverter: parseFloat
+});
+
+const colorsProperty = new Property<TwoPointConicalGradient, string[]>({
+	name: 'colors',
+});
+
+export class TwoPointConicalGradient extends Gradients {
+	start: { x: number; y: number };
+	end: { x: number; y: number };
+	colors: string[];
+	startR: number;
+	endR: number;
+
+	_getColor() {
+		const ctx = this._canvas.getContext('2d');
+		const gradient = ctx.createRadialGradient(this.start.x, this.start.y, this.startR, this.end.x, this.end.y, this.endR);
+
+		for (let i = 0; i < this.colors.length; i++) {
+			gradient.addColorStop(i, this.colors[i]);
+		}
+
+		return gradient;
+	}
+
+	draw(): void {
+		const ctx = this._canvas.getContext('2d');
+		const gradient = this._getColor();
+		if (this._getPaintStyle() === 'stroke') {
+			ctx.strokeStyle = gradient;
+		} else {
+			ctx.fillStyle = gradient;
+		}
+	}
+}
+
+startProperty.register(TwoPointConicalGradient);
+endProperty.register(TwoPointConicalGradient);
+colorsProperty.register(TwoPointConicalGradient);
+startRProperty.register(TwoPointConicalGradient);
+endRProperty.register(TwoPointConicalGradient);

packages/canvas/Dom/shaders/index.ts

@@ -0,0 +1,2 @@
+export * from './LinearGradient';
+export * from './TwoPointConicalGradient';

packages/canvas/Dom/shapes/Circle.ts

@@ -100,6 +100,7 @@ export class Circle extends Paint {
 			this.nativeView.addView(this._canvas.nativeView);
 			return true;
 		} else if (view instanceof Paint) {
+			view._canvas = this._canvas;
 			this._children.push(view);
 		}
 		return false;

packages/canvas/Dom/shapes/Line.ts

@@ -28,12 +28,14 @@ export class Line extends Paint {
 		const context = this._canvas.getContext('2d') as any as CanvasRenderingContext2D;
 		const line = new Path2D();
 		line.lineTo(this.p1, this.p2);
-		const style = this.paintStyle;
+		const color = this._getColor();
+		const style = this._getPaintStyle();
+
 		if (style === 'fill') {
-			context.fillStyle = this.color.hex;
+			context.fillStyle = color;
 			context.fill(line);
 		} else if (style === 'stroke') {
-			context.strokeStyle = this.color.hex;
+			context.strokeStyle = color;
 			context.stroke(line);
 		}
 	}

packages/canvas/Dom/shapes/Rect.ts

@@ -43,14 +43,16 @@ export class Rect extends Paint {
 		context.rect(this.x, this.y, this.width, this.height);
 		if (this._children.length > 0) {
 			for (const child of this._children) {
-				switch (child.paintStyle) {
+				const color = child._getColor();
+				const style = child._getPaintStyle();
+				switch (style) {
 					case 'fill':
-						context.fillStyle = child.color.hex;
+						context.fillStyle = color;
 						context.fill();
 						break;
 					case 'stroke':
-						context.strokeStyle = child.color.hex;
-						context.lineWidth = child.strokeWidth;
+						context.strokeStyle = color;
+						context.lineWidth = child._getStrokeWidth();
 						context.stroke();
 						break;
 				}
@@ -61,7 +63,11 @@ export class Rect extends Paint {
 	}
 
 	_addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean {
-		if (view instanceof Paint) {
+		if (view === this._canvas) {
+			this.nativeView.addView(this._canvas.nativeView);
+			return true;
+		} else if (view instanceof Paint) {
+			view._canvas = this._canvas;
 			this._children.push(view);
 		}
 		return false;