jsdom, checker: add more methods for CanvasRenderingContext2D, fix interop check for JS methods (#12372)

examples/js_dom_draw/draw.js.v

@@ -1,11 +1,10 @@
 import jsdom
-import jsdom.ctx
 
-fn get_2dcontext(canvas jsdom.IElement) ?ctx.CanvasRenderingContext2D {
+fn get_2dcontext(canvas jsdom.IElement) ?jsdom.CanvasRenderingContext2D {
 	if canvas is jsdom.HTMLCanvasElement {
 		c := canvas.get_context('2d')
 		match c {
-			ctx.CanvasRenderingContext2D {
+			jsdom.CanvasRenderingContext2D {
 				return c
 			}
 			else {
@@ -17,7 +16,7 @@ fn get_2dcontext(canvas jsdom.IElement) ?ctx.CanvasRenderingContext2D {
 	}
 }
 
-fn draw_line(context ctx.CanvasRenderingContext2D, x1 int, y1 int, x2 int, y2 int) {
+fn draw_line(context jsdom.CanvasRenderingContext2D, x1 int, y1 int, x2 int, y2 int) {
 	context.begin_path()
 	context.set_stroke_style('black')
 	context.set_line_width(1)

vlib/jsdom/context.v

@@ -1,6 +1,6 @@
 // Wrapper around 2d context and WebGL APIs
 
-module ctx
+module jsdom
 
 pub struct ContextAttributes {
 pub:
@@ -30,3 +30,5 @@ pub:
 pub struct NoneContext {}
 
 pub type ContextResult = CanvasRenderingContext2D | NoneContext | WebGLRenderingContext
+
+pub struct JS.CanvasGradient {}

vlib/jsdom/context_2d.js.v

@@ -0,0 +1,159 @@
+module jsdom
+
+struct JS.CanvasRenderingContext2D {
+mut:
+	lineWidth                JS.Number
+	lineCap                  JS.String
+	lineJoin                 JS.String
+	miterLimit               JS.Number
+	lineDashOffset           JS.Number
+	font                     JS.String
+	textAlign                JS.String
+	textBaseline             JS.String
+	direction                JS.String
+	fillStyle                voidptr
+	strokeStyle              voidptr
+	shadowBlur               JS.Number
+	shadowColor              JS.String
+	shadowOffsetX            JS.Number
+	shadowOffsetY            JS.Number
+	globalAlpha              JS.Number
+	globalCompositeOperation JS.String
+}
+
+pub enum LineJoin {
+	bevel
+	round
+	miter
+}
+
+pub struct CanvasRenderingContext2D {
+mut:
+	ctx JS.CanvasRenderingContext2D [noinit]
+}
+
+pub type StrokeStyle = JS.CanvasGradient | string
+
+pub fn (ctx CanvasRenderingContext2D) begin_path() {
+	#ctx.ctx.beginPath();
+}
+
+pub fn (ctx CanvasRenderingContext2D) set_line_join(j LineJoin) {
+	match j {
+		.bevel {
+			#ctx.ctx.lineJoin = 'bevel'.str
+		}
+		.round {
+			#ctx.ctx.lineJoin = 'round'.str
+		}
+		.miter {
+			#ctx.ctx.lineJoin = 'miter'.str
+		}
+	}
+}
+
+pub fn (ctx CanvasRenderingContext2D) set_stroke_style(style StrokeStyle) {
+	#ctx.ctx.strokeStyle = style instanceof string ? style.str : style
+}
+
+pub fn (ctx CanvasRenderingContext2D) set_fill_style(style StrokeStyle) {
+	#ctx.ctx.fillStyle = style instanceof string ? style.str : style
+}
+
+pub fn (ctx CanvasRenderingContext2D) line_width() f64 {
+	res := 0
+	#res.val = ctx.ctx.lineWidth
+
+	return res
+}
+
+pub fn (ctx CanvasRenderingContext2D) font() string {
+	res := ''
+	#res.str = ctx.ctx.font;
+
+	return res
+}
+
+pub fn (ctx CanvasRenderingContext2D) set_font(font string) {
+	#ctx.ctx.font = font.str;
+}
+
+pub fn (ctx CanvasRenderingContext2D) fill_rect(x f64, y f64, width f64, height f64) {
+	#ctx.ctx.fillRect(x.val,y.val,width.val,height.val)
+}
+
+pub fn (ctx CanvasRenderingContext2D) set_line_width(width f64) {
+	#ctx.ctx.lineWidth = width.val
+}
+
+pub fn (ctx CanvasRenderingContext2D) move_to(x f64, y f64) {
+	#ctx.ctx.moveTo(x.val,y.val);
+}
+
+pub fn (ctx CanvasRenderingContext2D) line_to(x f64, y f64) {
+	#ctx.ctx.lineTo(x.val,y.val);
+}
+
+pub fn (ctx CanvasRenderingContext2D) stroke() {
+	#ctx.ctx.stroke();
+}
+
+pub fn (ctx CanvasRenderingContext2D) close_path() {
+	#ctx.ctx.closePath();
+}
+
+pub fn (ctx CanvasRenderingContext2D) stroke_rect(x f64, y f64, width f64, height f64) {
+	#ctx.ctx.strokeRect(x.val,y.val,width.val,height.val);
+}
+
+pub fn (ctx CanvasRenderingContext2D) clear_rect(x f64, y f64, width f64, height f64) {
+	#ctx.ctx.clearRect(x.val,y.val,width.val,height.val);
+}
+
+pub fn (ctx CanvasRenderingContext2D) create_linear_gradient(x0 f64, y0 f64, x1 f64, y1 f64) JS.CanvasGradient {
+	return ctx.ctx.createLinearGradient(x0, y0, x1, y1)
+}
+
+pub fn (ctx CanvasRenderingContext2D) create_conic_gradient(start_angle f64, x f64, y f64) JS.CanvasGradient {
+	return ctx.ctx.createConicGradient(start_angle, x, y)
+}
+
+pub fn (ctx CanvasRenderingContext2D) create_radial_gradient(x0 f64, y0 f64, r0 f64, x1 f64, y1 f64, r1 f64) JS.CanvasGradient {
+	return ctx.ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
+}
+
+pub fn (ctx CanvasRenderingContext2D) bezier_curve_to(cp1x f64, cp1y f64, cp2x f64, cp2y f64, x f64, y f64) {
+	#ctx.ctx.bezierCurveTo(cp1x.val,cp1y.val,cp2x.val,cp2y.val, x.val,y.val);
+}
+
+pub fn (ctx CanvasRenderingContext2D) quadratic_curve_to(cpx f64, cpy f64, x f64, y f64) {
+	#ctx.ctx.quadraticCurveTo(cpx.val,cpy.val,x.val,y.val);
+}
+
+pub fn (ctx CanvasRenderingContext2D) arc(x f64, y f64, radius f64, start_angle f64, end_angle f64, counter_clockwise bool) {
+	#ctx.ctx.arc(x.val,y.val,radius.val,start_angle.val,end_angle.val,counter_clockwise.val)
+}
+
+pub fn (ctx CanvasRenderingContext2D) arc_to(x1 f64, y1 f64, x2 f64, y2 f64, radius f64) {
+	#ctx.ctx.arcTo(x1.val,y1.val,x2.val,y2.val,radius.val);
+}
+
+pub fn (ctx CanvasRenderingContext2D) ellipse(x f64, y f64, radius_x f64, radius_y f64, rotation f64, start_angle f64, end_angle f64, counter_clockwise bool) {
+	#ctx.ctx.ellipse(x.val,y.val,radius_x.val,radius_y.val,rotation.val,start_angle.val,end_angle.val,counter_clockwise.val);
+}
+
+pub fn (ctx CanvasRenderingContext2D) rect(x f64, y f64, width f64, height f64) {
+	#ctx.ctx.rect(x.val,y.val,widht.val,height.val);
+}
+
+pub fn (ctx CanvasRenderingContext2D) draw_focus_if_needed(el IElement) {
+	#ctx.ctx.drawFocusIfNeeded(el.val.node);
+}
+
+fn (ctx JS.CanvasRenderingContext2D) createRadialGradient(x0 f64, y0 f64, r0 f64, x1 f64, y1 f64, r1 f64) JS.CanvasGradient
+
+fn (ctx JS.CanvasRenderingContext2D) createConicGradient(startAngle f64, x f64, y f64) JS.CanvasGradient
+
+fn (ctx JS.CanvasRenderingContext2D) createLinearGradient(x0 f64, y0 f64, x1 f64, y1 f64) JS.CanvasGradient
+
+pub fn (gradient JS.CanvasGradient) addColorStop(x f64, color string)

vlib/jsdom/ctx/context_2d.js.v

@@ -1,67 +0,0 @@
-module ctx
-
-struct JS.CanvasRenderingContext2D {
-mut:
-	lineWidth                JS.Number
-	lineCap                  JS.String
-	lineJoin                 JS.String
-	miterLimit               JS.Number
-	lineDashOffset           JS.Number
-	font                     JS.String
-	textAlign                JS.String
-	textBaseline             JS.String
-	direction                JS.String
-	fillStyle                voidptr
-	strokeStyle              voidptr
-	shadowBlur               JS.Number
-	shadowColor              JS.String
-	shadowOffsetX            JS.Number
-	shadowOffsetY            JS.Number
-	globalAlpha              JS.Number
-	globalCompositeOperation JS.String
-}
-
-pub struct CanvasRenderingContext2D {
-	ctx JS.CanvasRenderingContext2D [noinit]
-}
-
-pub type StrokeStyle = string
-
-pub fn (ctx CanvasRenderingContext2D) begin_path() {
-	#ctx.ctx.beginPath();
-}
-
-pub fn (ctx CanvasRenderingContext2D) set_stroke_style(style StrokeStyle) {
-	#ctx.ctx.strokeStyle = style.str;
-}
-
-pub fn (ctx CanvasRenderingContext2D) line_width() int {
-	res := 0
-	#res.val = ctx.ctx.lineWidth
-
-	return res
-}
-
-pub fn (ctx CanvasRenderingContext2D) set_line_width(width int) {
-	#ctx.ctx.lineWidth = width.val
-}
-
-pub fn (ctx CanvasRenderingContext2D) move_to(x int, y int) {
-	#ctx.ctx.moveTo(x.val,y.val);
-}
-
-pub fn (ctx CanvasRenderingContext2D) line_to(x int, y int) {
-	#ctx.ctx.lineTo(x.val,y.val);
-}
-
-pub fn (ctx CanvasRenderingContext2D) stroke() {
-	#ctx.ctx.stroke();
-}
-
-pub fn (ctx CanvasRenderingContext2D) close_path() {
-	#ctx.ctx.closePath();
-}
-
-pub fn (ctx CanvasRenderingContext2D) clear_rect(x int, y int, width int, height int) {
-	#ctx.ctx.clearRect(x.val,y.val,width.val,height.val);
-}

vlib/jsdom/dom.js.v

@@ -184,3 +184,67 @@ fn init() {
 	#jsdom__document.node = document;
 	#jsdom__window.node = window;
 }
+
+pub struct JS.DOMMatrix {
+pub:
+	is_2d       JS.Boolean [noinit]
+	is_identity JS.Boolean [noinit]
+pub mut:
+	m11 JS.Number [noinit]
+	m12 JS.Number [noinit]
+	m13 JS.Number [noinit]
+	m14 JS.Number [noinit]
+	m21 JS.Number [noinit]
+	m22 JS.Number [noinit]
+	m23 JS.Number [noinit]
+	m24 JS.Number [noinit]
+	m31 JS.Number [noinit]
+	m32 JS.Number [noinit]
+	m33 JS.Number [noinit]
+	m34 JS.Number [noinit]
+	m41 JS.Number [noinit]
+	m42 JS.Number [noinit]
+	m43 JS.Number [noinit]
+	m44 JS.Number [noinit]
+	a   JS.Number [noinit]
+	b   JS.Number [noinit]
+	c   JS.Number [noinit]
+	d   JS.Number [noinit]
+	e   JS.Number [noinit]
+	f   JS.Number [noinit]
+}
+
+pub struct DOMMatrix {
+	matrix JS.DOMMatrix [noinit]
+}
+
+pub fn (matrix DOMMatrix) str() string {
+	fmt := ''
+	#fmt.str = matrix.matrix + ''
+
+	return fmt
+}
+
+pub fn new_matrix(init []f64) DOMMatrix {
+	#let tmp = new Array();
+
+	for val in init {
+		_ := val
+		#tmp.push(val);
+	}
+	mut m := JS.DOMMatrix{}
+	#m = new DOMMatrix(tmp);
+
+	return DOMMatrix{m}
+}
+
+pub fn (m DOMMatrix) invert_self() {
+	#m.matrix.invertSelf();
+}
+
+pub fn (m DOMMatrix) is_2d() bool {
+	res := false
+	#res.val = m.matrix.is2D.val;
+
+	return res
+}

vlib/jsdom/html_canvas_element.js.v

@@ -1,7 +1,5 @@
 module jsdom
 
-import jsdom.ctx
-
 pub struct HTMLCanvasElement {
 	HTMLElement
 }
@@ -31,10 +29,10 @@ pub fn (elem HTMLCanvasElement) add_event_listener(event string, cb EventCallbac
 	#});
 }
 
-pub fn (elem HTMLCanvasElement) get_context(ctx_ string) ctx.ContextResult {
-	mut res := ctx.NoneContext{}
+pub fn (elem HTMLCanvasElement) get_context(ctx_ string) ContextResult {
+	mut res := NoneContext{}
 	#let ctx = elem.node.getContext(ctx_.str);
-	#if (ctx instanceof CanvasRenderingContext2D) { res = new jsdom__ctx__CanvasRenderingContext2D(ctx); res.ctx = ctx; }
+	#if (ctx instanceof CanvasRenderingContext2D) { res = new jsdom__CanvasRenderingContext2D(ctx); res.ctx = ctx; }
 
 	return res
 }

vlib/jsdom/webgl.js.v

@@ -1,3 +1,3 @@
-module ctx
+module jsdom
 
 pub struct WebGLRenderingContext {}

vlib/v/checker/checker.v

@@ -2081,8 +2081,8 @@ pub fn (mut c Checker) method_call(mut node ast.CallExpr) ast.Type {
 		} else {
 			c.fail_if_unreadable(node.left, left_type, 'receiver')
 		}
-		if (!left_type_sym.is_builtin() && method.mod != 'builtin') && method.language == .v
-			&& method.no_body {
+		if left_type_sym.language != .js && (!left_type_sym.is_builtin() && method.mod != 'builtin')
+			&& method.language == .v && method.no_body {
 			c.error('cannot call a method that does not have a body', node.pos)
 		}
 		if method.return_type == ast.void_type && method.is_conditional && method.ctdefine_idx != -1 {