chore: updates

Author: triniwiz

crates/canvas-2d/src/context/mod.rs

@@ -560,6 +560,14 @@ impl Context {
         };
     }
 
+    pub fn reset(&mut self) {
+        self.reset_state();
+        self.reset_transform();
+        self.with_canvas_dirty(|canvas| {
+            canvas.clear(Color::TRANSPARENT);
+        });
+    }
+
     pub fn reset_state(&mut self) {
         let direction = self.state.direction;
         self.state = State::default();

crates/canvas-c/src/c2d/context.rs

@@ -2457,6 +2457,14 @@ pub extern "C" fn canvas_native_context_rect(
     context.context.rect(x, y, width, height)
 }
 
+#[no_mangle]
+pub extern "C" fn canvas_native_context_reset(
+    context: *mut CanvasRenderingContext2D
+) {
+    let context = unsafe { &mut *context };
+    context.context.reset()
+}
+
 #[no_mangle]
 pub extern "C" fn canvas_native_context_round_rect(
     context: *mut CanvasRenderingContext2D,

napi/canvas-napi/index.d.ts

@@ -41,9 +41,28 @@ export declare class ImageData {
 	get height(): number;
 	get data(): Buffer;
 }
+export declare class TextMetrics {
+	get width(): number;
+	get actualBoundingBoxLeft(): number;
+	get actualBoundingBoxRight(): number;
+	get actualBoundingBoxAscent(): number;
+	get actualBoundingBoxDescent(): number;
+	get fontBoundingBoxAscent(): number;
+	get fontBoundingBoxDescent(): number;
+	get emHeightAscent(): number;
+	get emHeightDescent(): number;
+	get hangingBaseline(): number;
+	get alphabeticBaseline(): number;
+	get ideographicBaseline(): number;
+}
 export declare class CanvasRenderingContext2D {
 	static withView(view: number, width: number, height: number, density: number, alpha: boolean, fontColor: number, ppi: number, direction: number): CanvasRenderingContext2D;
+	static withMtlViewDeviceQueue(view: number, device: number, queue: number, alpha: boolean, density: number, samples: number, fontColor: number, ppi: number, direction: number): CanvasRenderingContext2D;
+	present(): void;
+	flush(): void;
+	render(): void;
 	static withCpu(width: number, height: number, density: number, alpha: boolean, fontColor: number, ppi: number, direction: number): CanvasRenderingContext2D;
+	toDataURL(format: string, encoderOptions?: number | undefined | null): string;
 	get direction(): string;
 	set direction(direction: string);
 	get fillStyle(): unknown;
@@ -109,19 +128,25 @@ export declare class CanvasRenderingContext2D {
 	createPattern(image: ImageAsset, repetition?: string | undefined | null): CanvasPattern;
 	createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
 	drawFocusIfNeeded(elementPath: object | Path2D, element?: object | undefined | null): void;
+	drawImage(image: ImageAsset, sx?: number | undefined | null, sy?: number | undefined | null, sWidth?: number | undefined | null, sHeight?: number | undefined | null, dx?: number | undefined | null, dy?: number | undefined | null, dWidth?: number | undefined | null, dHeight?: number | undefined | null): void;
 	ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean | undefined | null): void;
 	fill(path?: Path2D | undefined | null, rule?: string | undefined | null): void;
 	fillRect(x: number, y: number, width: number, height: number): void;
 	fillText(text: string, x: number, y: number, maxWidth?: number | undefined | null): void;
 	getImageData(x: number, y: number, width: number, height: number): ImageData;
 	getLineDash(): Array<number>;
 	getTransform(): DOMMatrix;
+	isContextLost(): boolean;
+	isPointInPath(xOrPath: number | Path2D, y?: number | undefined | null, ruleOrY?: number | string | undefined | null, rule?: string | undefined | null): boolean;
+	isPointInStroke(xOrPath: number | Path2D, xOrY?: number | undefined | null, y?: number | undefined | null): boolean;
 	lineTo(x: number, y: number): void;
+	measureText(text: string): TextMetrics;
 	moveTo(x: number, y: number): void;
-	render(): void;
-	toDataURL(format: string, encoderOptions?: number | undefined | null): string;
-	drawImage(image: ImageAsset, sx?: number | undefined | null, sy?: number | undefined | null, sWidth?: number | undefined | null, sHeight?: number | undefined | null, dx?: number | undefined | null, dy?: number | undefined | null, dWidth?: number | undefined | null, dHeight?: number | undefined | null): void;
+	putImageData(imageData: ImageData, dx: number, dy: number, dirtyX?: number | undefined | null, dirtyY?: number | undefined | null, dirtyWidth?: number | undefined | null, dirtyHeight?: number | undefined | null): void;
+	quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
 	rect(x: number, y: number, width: number, height: number): void;
+	reset(): void;
+	resetTransform(): void;
 	restore(): void;
 	rotate(angle: number): void;
 	roundRect(x: number, y: number, width: number, height: number, radii: number | Array<number>): void;

napi/canvas-napi/index.js

@@ -284,13 +284,14 @@ if (!nativeBinding) {
 	throw new Error(`Failed to load native binding`);
 }
 
-const { WebGLRenderingContext, Path2D, CanvasPattern, CanvasGradient, ImageData, CanvasRenderingContext2D, ImageAsset, DomMatrix } = nativeBinding;
+const { WebGLRenderingContext, Path2D, CanvasPattern, CanvasGradient, ImageData, TextMetrics, CanvasRenderingContext2D, ImageAsset, DomMatrix } = nativeBinding;
 
 module.exports.WebGLRenderingContext = WebGLRenderingContext;
 module.exports.Path2D = Path2D;
 module.exports.CanvasPattern = CanvasPattern;
 module.exports.CanvasGradient = CanvasGradient;
 module.exports.ImageData = ImageData;
+module.exports.TextMetrics = TextMetrics;
 module.exports.CanvasRenderingContext2D = CanvasRenderingContext2D;
 module.exports.ImageAsset = ImageAsset;
 module.exports.DomMatrix = DomMatrix;

napi/canvas-napi/main.mjs

@@ -55,6 +55,58 @@ export class NSCMTLView extends NSView {
 	static {
 		NativeClass(this);
 	}
+	_device;
+	_queue;
+	_canvas;
+
+	get queue() {
+		return this._queue;
+	}
+
+	get device() {
+		return this._device;
+	}
+
+	initWithFrame(frameRect) {
+		super.initWithFrame(frameRect);
+		this.wantsLayer = true;
+		const layer = CAMetalLayer.layer();
+		this._device = MTLCreateSystemDefaultDevice();
+		this._queue = this._device.newCommandQueue();
+		layer.device = this._device;
+		layer.presentsWithTransaction = false;
+		layer.framebufferOnly = false;
+		layer.pixelFormat = MTLPixelFormat.BGRA8Unorm;
+
+		this.layer = layer;
+		return this;
+	}
+
+
+	/**
+	 * @return {CGSize}
+	 */
+	get drawableSize() {
+		return this.layer.drawableSize;
+	}
+
+	/**
+	 * @param {CGSize} value
+	 */
+	set drawableSize(value) {
+		this.layer.drawableSize = value;
+	}
+
+
+	present() {
+		this._canvas?.getContext('2d').flush();
+		this._canvas?.getContext('2d').present();
+	}
+
+	static ObjCExposedMethods = {
+		present: { returns: interop.types.void, params: [] }
+	};
+
 }
 
 export class NSCCanvas extends NSView {
@@ -89,6 +141,7 @@ export class CanvasGLView extends NSOpenGLView {
 	}
 }
 
+
 export class ViewController extends NSViewController {
 	static {
 		NativeClass(this);
@@ -105,15 +158,25 @@ export class ViewController extends NSViewController {
 		this.view.addSubview(this.canvas);
 
 		glview.frame = this.view.frame;
+		mtlview.frame = this.view.frame;
+		mtlview.drawableSize = new CGSize({
+			width: this.view.frame.size.width * NSScreen.mainScreen.backingScaleFactor,
+			height: this.view.frame.size.height * NSScreen.mainScreen.backingScaleFactor
+		});
+
+		this.canvas.addSubview(mtlview);
 
-		this.canvas.addSubview(glview);
+		//this.canvas.addSubview(glview);
 
-		glview.wantsLayer = true;
+		// glview.wantsLayer = true;
 	}
 }
 
 const glview = CanvasGLView.alloc().initWithFrame({ x: 0, y: 0, width: 0, height: 0 });
 
+const mtlview = NSCMTLView.alloc().initWithFrame({ x: 0, y: 0, width: 0, height: 0 });
+
+
 let isDoingOrDone = false;
 
 function mdnShadowColor(ctx) {
@@ -399,8 +462,8 @@ function flappyBird(canvas) {
 	}
 
 	function main() {
-		width = canvas.clientWidth * window.devicePixelRatio;
-		height = canvas.clientHeight * window.devicePixelRatio;
+		width = canvas.clientWidth //* window.devicePixelRatio;
+		height = canvas.clientHeight // * window.devicePixelRatio;
 
 		canvas.addEventListener('touchstart', onpress);
 
@@ -981,6 +1044,47 @@ function mdnPattern(canvas) {
 	ctx.fillRect(0, 0, canvas.width, canvas.height);
 }
 
+function mdnPutImageData(canvas) {
+	const ctx = canvas.getContext('2d');
+
+	function putImageData(
+		ctx,
+		imageData,
+		dx,
+		dy,
+		dirtyX,
+		dirtyY,
+		dirtyWidth,
+		dirtyHeight
+	) {
+		const data = imageData.data;
+		const height = imageData.height;
+		const width = imageData.width;
+		dirtyX = dirtyX || 0;
+		dirtyY = dirtyY || 0;
+		dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;
+		dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;
+		const limitBottom = dirtyY + dirtyHeight;
+		const limitRight = dirtyX + dirtyWidth;
+		for (let y = dirtyY; y < limitBottom; y++) {
+			for (let x = dirtyX; x < limitRight; x++) {
+				const pos = y * width + x;
+				ctx.fillStyle = `rgb(${data[pos * 4 + 0]} ${data[pos * 4 + 1]}
+      ${data[pos * 4 + 2]} / ${data[pos * 4 + 3] / 255})`;
+				ctx.fillRect(x + dx, y + dy, 1, 1);
+			}
+		}
+	}
+
+// Draw content onto the canvas
+	ctx.fillRect(0, 0, 100, 100);
+// Create an ImageData object from it
+	const imagedata = ctx.getImageData(0, 0, 100, 100);
+// use the putImageData function that illustrates how putImageData works
+	putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
+	ctx.render();
+}
+
 function mdnRadialGradient(canvas) {
 	const ctx = canvas.getContext('2d');
 
@@ -1028,7 +1132,31 @@ function doTheThing() {
 	// const glContext = WebGLRenderingContext.withView(handle.toNumber(), 1, true, false, false, false, 1, true, false, false, false, false, false);
 	// console.log(glContext, 'drawingBufferWidth', glContext.drawingBufferWidth, 'drawingBufferHeight', glContext.drawingBufferHeight);
 
-	const ctx = CanvasRenderingContext2D.withView(handle.toNumber(), glview.frame.size.width * scale, glview.frame.size.height * scale, 1, true, 0, 90, 1);
+	//const ctx = CanvasRenderingContext2D.withView(handle.toNumber(), glview.frame.size.width * scale, glview.frame.size.height * scale, 1, true, 0, 90, 1);
+
+
+	const mtlViewHandle = interop.handleof(mtlview);
+	const deviceHandle = interop.handleof(mtlview.device);
+	const queueHandle = interop.handleof(mtlview.queue);
+	const ctx = CanvasRenderingContext2D.withMtlViewDeviceQueue(
+		mtlViewHandle.toNumber(), deviceHandle.toNumber(), queueHandle.toNumber(), true, scale, 1, 0, 90, 1
+	);
+
+	const mtlCanvas = {
+		width: mtlview.frame.size.width,
+		height: mtlview.frame.size.height,
+		clientWidth: mtlview.frame.size.width,
+		clientHeight: mtlview.frame.size.height,
+		addEventListener: function() {
+		},
+		getContext: function() {
+			return ctx;
+		},
+		style: {}
+	};
+
+	mtlview._canvas = mtlCanvas;
+
 	ctx.fillStyle = 'white';
 
 	ctx.fillRect(0, 0, 1000, 1000);
@@ -1056,16 +1184,22 @@ function doTheThing() {
 		style: {}
 	};
 
-//	flappyBird(canvas);
+	//flappyBird(mtlCanvas);
 
-	solarSystem(canvas);
+	 solarSystem(canvas);
 
 	// swarm(canvas);
-	//breathe_demo(canvas);
+	// breathe_demo(canvas);
 	//mdnPattern(canvas);
-	//mdnRadialGradient(canvas);
+	// mdnRadialGradient(canvas);
+	//mdnPutImageData(canvas);
+
+	//
+	// ctx.font = '50px serif';
+	// ctx.strokeText('Hello world', 50, 90);
+
 
-//	ctx.render();
+	// ctx.render();
 
 	/*