chore: updates

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

@@ -136,6 +136,7 @@ pub enum SurfaceEngine {
 }
 
 
+#[derive(Debug, Copy, Clone)]
 pub struct SurfaceData {
     pub(crate) bounds: skia_safe::Rect,
     pub(crate) scale: f32,

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

@@ -35,7 +35,7 @@ impl Context {
         };
 
         let info = ImageInfo::new(
-            ISize::new((width * density).floor() as i32, (height * density).floor() as i32),
+            ISize::new(width as i32, height as i32),
             color_type,
             alpha_type,
             None,
@@ -124,7 +124,7 @@ impl Context {
             return;
         }
         let info = ImageInfo::new(
-            ISize::new((width as f32 * density).floor() as i32, (height as f32 * density).floor() as i32),
+            ISize::new(width as i32, height as i32),
             ColorType::RGBA8888,
             AlphaType::Unknown,
             None,

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

@@ -180,6 +180,7 @@ impl Context {
                 0,
                 frame_buffer,
             );
+
             let surface_props = skia_safe::SurfaceProps::new(
                 skia_safe::SurfacePropsFlags::default(),
                 PixelGeometry::Unknown,
@@ -203,6 +204,7 @@ impl Context {
             surface
         };
 
+
         if let Some(surface) = surface {
             context.direct_context = direct_context;
             context.surface_data.engine = engine;

crates/canvas-android/src/jni_compat/org_nativescript_canvas_NSCCanvas.rs

@@ -298,6 +298,7 @@ pub extern "system" fn nativeUpdateGLSurface(
     unsafe {
         if let Some(window) = NativeWindow::from_surface(env.get_native_interface(), surface) {
             let handle = to_raw_window_handler(&window);
+
             context.gl_context.set_window_surface(
                 &mut context.contextAttributes,
                 window.width(),
@@ -329,8 +330,7 @@ pub extern "system" fn nativeUpdate2DSurface(
         if let Some(window) = NativeWindow::from_surface(env.get_native_interface(), surface) {
             let width = window.width() as f32;
             let height = window.height() as f32;
-            let density = context.get_context().density();
-            context.resize((width / density).floor(), (height / density).floor())
+            context.resize(width, height)
         }
         drop(env);
     }

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

@@ -70,18 +70,21 @@ fn to_data_url(context: &mut CanvasRenderingContext2D, format: &str, quality: u3
 #[cfg(feature = "gl")]
 pub fn resize_gl(context: &mut CanvasRenderingContext2D, width: f32, height: f32) {
     let alpha = context.alpha;
+    let gl = &context.gl_context;
+    context.make_current();
     let context = &mut context.context;
     let density = context.get_surface_data().scale();
     let ppi = context.get_surface_data().ppi();
 
     let mut fb = [0];
 
     unsafe {
+        gl_bindings::Viewport(0, 0, width as i32, height as i32);
         gl_bindings::ClearColor(0., 0., 0., 0.);
         gl_bindings::Clear(gl_bindings::COLOR_BUFFER_BIT);
-        gl_bindings::Viewport(0, 0, (width * density).floor() as i32, (height * density).floor() as i32);
         gl_bindings::GetIntegerv(gl_bindings::FRAMEBUFFER_BINDING, fb.as_mut_ptr());
     }
+    gl.swap_buffers();
 
     Context::resize_gl(context, width, height, density, fb[0], 0, alpha, ppi)
 }
@@ -197,7 +200,6 @@ impl CanvasRenderingContext2D {
     }
 
     pub fn resize(&mut self, width: f32, height: f32) {
-        self.gl_context.make_current();
         resize(self, width, height);
     }
 

crates/canvas-core/src/gl/android.rs

@@ -685,6 +685,7 @@ impl GLContext {
                             NonZeroU32::try_from(height as u32).unwrap(),
                         );
 
+
                     let surface = display
                         .create_window_surface(&config, &surface_attr)
                         .map(SurfaceHelper::Window)

packages/canvas-pixi/index.ts

@@ -9,24 +9,29 @@ class NSCPIXIApplication extends Pixii.Application {
 		let clientWidth = 300;
 		let clientHeight = 150;
 		if (context) {
-			clientWidth = context.canvas.width;
-			clientHeight = context.canvas.height;
-		}
-		if (view) {
-			clientWidth = view.width;
-			clientHeight = view.height;
+			clientWidth = context.canvas.width * Screen.mainScreen.scale;
+			clientHeight = context.canvas.height * Screen.mainScreen.scale;
 		}
 		if (!view) {
 			view = context.canvas.toHTMLCanvas();
 		}
+
+		if (view) {
+			clientWidth = view.clientWidth;
+			clientHeight = view.clientHeight;
+		}
+
+		view.width = view.clientWidth * Screen.mainScreen.scale;
+		view.height = view.clientHeight * Screen.mainScreen.scale;
+
 		const width = props.width || clientWidth;
 		const height = props.height || clientHeight;
 
 		//	PIXI.settings.RESOLUTION = 1;
 
 		super({
 			...props,
-			resolution: 1,
+			resolution: Screen.mainScreen.scale,
 			view,
 			width,
 			height,

packages/canvas-polyfill/DOM/Element.ts

@@ -302,14 +302,14 @@ export class Element extends Node {
 
 	get innerWidth() {
 		if (this.nativeElement) {
-			return this.nativeElement['width'] as never;
+			return this.nativeElement['innerWidth'] ?? (this.nativeElement['width'] as never);
 		}
 		return this['width'];
 	}
 
 	get innerHeight() {
 		if (this.nativeElement) {
-			return this.nativeElement['height'] as never;
+			return this.nativeElement['innerHeight'] ?? (this.nativeElement['height'] as never);
 		}
 		return this['height'];
 	}

packages/canvas-polyfill/DOM/HTMLCanvasElement.ts

@@ -19,14 +19,28 @@ export class HTMLCanvasElement extends HTMLElement {
 		if (!this.nativeElement.__domElement) {
 			this.nativeElement.__domElement = new DOMParser().parseFromString('<canvas></canvas>', 'text/html').documentElement as never;
 		}
-
-		this.style.nativeElement = new WeakRef(this.nativeElement);
 	}
 
 	get _canvas() {
 		return this.nativeElement;
 	}
 
+	get innerWidth() {
+		return this.clientWidth;
+	}
+
+	get innerHeight() {
+		return this.clientHeight;
+	}
+
+	get clientWidth() {
+		return this.nativeElement['clientWidth'] as never;
+	}
+
+	get clientHeight() {
+		return this.nativeElement['clientHeight'] as never;
+	}
+
 	set width(value) {
 		setValue(this.nativeElement, 'width', value);
 	}

packages/canvas-polyfill/DOM/HTMLElement.ts

@@ -21,17 +21,17 @@ export class Style {
 	}
 
 	get width() {
-		return 0;
+		return this._values.get('width');
 	}
 	set width(value) {
-		console.log('style.width', value);
+		this._values.set('width', value);
 	}
 
 	get height() {
-		return 0;
+		return this._values.get('height');
 	}
 	set height(value) {
-		console.log('style.height', value);
+		this._values.set('height', value);
 	}
 }
 
@@ -44,6 +44,9 @@ export class HTMLElement extends Element {
 	}
 
 	get style() {
+		if (this._nativeElement) {
+			return this._nativeElement.style;
+		}
 		return this._style;
 	}
 

packages/canvas/Canvas/common.ts

@@ -1,4 +1,4 @@
-import { CSSType, PercentLength, View, Utils, Property, booleanConverter, CoreTypes, Screen } from '@nativescript/core';
+import { CSSType, PercentLength, View, Utils, Property, booleanConverter, CoreTypes, Screen, CssProperty, Style } from '@nativescript/core';
 import { CanvasRenderingContext } from '../common';
 
 export interface ICanvasBase {
@@ -387,6 +387,7 @@ class Size {
 	}
 }
 
+
 @CSSType('Canvas')
 export abstract class CanvasBase extends View implements ICanvasBase {
 	public static readyEvent = 'ready';

packages/canvas/Canvas/index.android.ts

@@ -63,11 +63,9 @@ export class Canvas extends CanvasBase {
 				this._canvas = new org.nativescript.canvas.NSCCanvas(activity);
 			}
 
-			const textureView = this._canvas.getChildAt(0) as android.view.TextureView;
-
-			const matrix = new android.graphics.Matrix();
-			matrix.setScale(Screen.mainScreen.scale, Screen.mainScreen.scale);
-			//textureView.setTransform(matrix);
+			// default canvas size
+			this._canvas.setSurfaceWidth(300);
+			this._canvas.setSurfaceHeight(150);
 
 			(global as any).__canvasLoaded = true;
 			const ref = new WeakRef(this);
@@ -95,39 +93,61 @@ export class Canvas extends CanvasBase {
 	}
 
 	get clientWidth() {
-		return this.width;
+		return this.getMeasuredWidth() / Screen.mainScreen.scale;
 	}
 
 	get clientHeight() {
-		return this.height;
+		return this.getMeasuredHeight() / Screen.mainScreen.scale;
 	}
 
 	get drawingBufferHeight() {
+		if (this._canvas === undefined || this._canvas === null) {
+			return 0;
+		}
 		return this._canvas.getDrawingBufferHeight();
 	}
 
 	get drawingBufferWidth() {
+		if (this._canvas === undefined || this._canvas === null) {
+			return 0;
+		}
 		return this._canvas.getDrawingBufferWidth();
 	}
 
 	// @ts-ignore
-	get width(): any {
-		return this._logicalSize.width;
+	get width(): number {
+		if (this._canvas === undefined || this._canvas === null) {
+			return 0;
+		}
+		return this._canvas.getSurfaceWidth();
 	}
 
-	set width(value) {
-		this._didLayout = false;
-		this._layoutNative();
+	set width(value: number) {
+		if (this._canvas === undefined || this._canvas === null) {
+			return;
+		}
+		if (typeof value !== 'number') {
+			return;
+		}
+		this._canvas.setSurfaceWidth(value);
 	}
 
 	// @ts-ignore
-	get height(): any {
-		return this._logicalSize.height;
+	get height(): number {
+		if (this._canvas === undefined || this._canvas === null) {
+			return 0;
+		}
+		return this._canvas.getSurfaceHeight();
 	}
 
-	set height(value) {
-		this._didLayout = false;
-		this._layoutNative();
+	set height(value: number) {
+		if (this._canvas === undefined || this._canvas === null) {
+			return;
+		}
+		if (typeof value !== 'number') {
+			return;
+		}
+		this._canvas.setSurfaceHeight(value);
 	}
 
 	static createCustomView() {
@@ -243,13 +263,12 @@ export class Canvas extends CanvasBase {
 			return;
 		}
 
-		const size = this._physicalSize;
-		console.log(size);
-		org.nativescript.canvas.NSCCanvas.layoutView(size.width || 0, size.height || 0, this._canvas);
+		// const size = this._physicalSize;
+		// org.nativescript.canvas.NSCCanvas.layoutView(size.width || 0, size.height || 0, this._canvas);
 
-		if (this._is2D) {
-			this._2dContext.native.__resize(size.width, size.height);
-		}
+		// if (this._is2D) {
+		// 	this._2dContext.native.__resize(size.width, size.height);
+		// }
 
 		this._didLayout = true;
 	}

packages/canvas/WebGPU/GPUDevice.ts

@@ -210,7 +210,7 @@ export class GPUDevice extends EventTarget {
 	}) {
 		descriptor.layout = descriptor?.layout?.[native_];
 		if (Array.isArray(descriptor.entries)) {
-			for (const entry of descriptor.entries) {
+			descriptor.entries = descriptor.entries.map((entry) => {
 				if (entry.resource instanceof GPUTextureView) {
 					entry.resource = entry.resource[native_];
 				} else if (entry.resource instanceof GPUSampler) {
@@ -220,7 +220,10 @@ export class GPUDevice extends EventTarget {
 				} else if (entry?.resource?.buffer && entry?.resource?.buffer instanceof GPUBuffer) {
 					entry.resource.buffer = entry.resource.buffer[native_];
 				}
-			}
+				return entry;
+			});
+
+			console.log(descriptor);
 		}
 
 		const group = this.native.createBindGroup(descriptor);