Initial project import

tools/v/examples/js_dom_draw/draw.js.v

@@ -0,0 +1,93 @@
+import js.dom
+
+fn get_canvas(elem JS.HTMLElement) JS.HTMLCanvasElement {
+	match elem {
+		JS.HTMLCanvasElement {
+			return elem
+		}
+		else {
+			panic('Not a canvas')
+		}
+	}
+}
+
+fn draw_line(mut context JS.CanvasRenderingContext2D, x1 int, y1 int, x2 int, y2 int) {
+	context.beginPath()
+	context.strokeStyle = 'black'.str
+	context.lineWidth = JS.Number(1)
+	context.moveTo(JS.Number(x1), JS.Number(y1))
+	context.lineTo(JS.Number(x2), JS.Number(y2))
+	context.stroke()
+	context.closePath()
+}
+
+struct DrawState {
+mut:
+	context JS.CanvasRenderingContext2D
+	drawing bool
+	x       int
+	y       int
+}
+
+fn main() {
+	window := dom.window()
+	document := dom.document
+	clear_btn := document.getElementById('clearButton'.str)?
+	canvas_elem := document.getElementById('canvas'.str)?
+	canvas := get_canvas(canvas_elem)
+	ctx := canvas.getContext('2d'.str, js_undefined())?
+	mut context := JS.CanvasRenderingContext2D{}
+	match ctx {
+		JS.CanvasRenderingContext2D {
+			context = ctx
+		}
+		else {
+			panic('can not get 2d context')
+		}
+	}
+
+	mut state := DrawState{context, false, 0, 0}
+
+	canvas.addEventListener('mousedown'.str, fn [mut state] (event JS.Event) {
+		state.drawing = true
+		match event {
+			JS.MouseEvent {
+				state.x = int(event.offsetX)
+				state.y = int(event.offsetY)
+			}
+			else {}
+		}
+	}, JS.EventListenerOptions{})
+	canvas.addEventListener('mousemove'.str, fn [mut state] (event JS.Event) {
+		if state.drawing {
+			match event {
+				JS.MouseEvent {
+					draw_line(mut state.context, state.x, state.y, int(event.offsetX),
+						int(event.offsetY))
+					state.x = int(event.offsetX)
+					state.y = int(event.offsetY)
+				}
+				else {}
+			}
+		}
+	}, JS.EventListenerOptions{})
+
+	window.addEventListener('mouseup'.str, fn [mut state] (event JS.Event) {
+		if state.drawing {
+			match event {
+				JS.MouseEvent {
+					draw_line(mut state.context, state.x, state.y, int(event.offsetX),
+						int(event.offsetY))
+				}
+				else {}
+			}
+
+			state.x = 0
+			state.y = 0
+			state.drawing = false
+		}
+	}, JS.EventListenerOptions{})
+	clear_btn.addEventListener('click'.str, fn [mut state, canvas] (_ JS.Event) {
+		state.context.clearRect(JS.Number(0), JS.Number(0), canvas.width, canvas.height)
+	}, JS.EventListenerOptions{})
+}