Initial project import

tools/v/examples/js_dom_draw/README.md

@@ -0,0 +1,27 @@
+# JS DOM Draw
+
+Drawing with mouse events using the DOM API. Adopted from MDN examples.
+
+## Run with veb
+
+```sh
+cd examples/js_dom_draw
+v run main.v
+```
+
+This starts a `veb` server at `http://localhost:3001/` and compiles `draw.js.v` to
+`draw.js` before serving `index.html`.
+
+You can also run it from the repository root:
+
+```sh
+v run examples/js_dom_draw/main.v
+```
+
+## Compile manually
+
+```sh
+v -b js_browser examples/js_dom_draw/draw.js.v
+```
+
+Then open `index.html` in your favorite browser.

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{})
+}

tools/v/examples/js_dom_draw/index.html

@@ -0,0 +1,7 @@
+<body class="main">
+    <title>Drawing with mouse events</title>
+    <input type="button" id="clearButton" value="Clear canvas">
+    <canvas style="border: 1px solid black;" width="720" height="480" id="canvas"></canvas>
+    <script type="text/javascript" src="draw.js"></script>
+
+</body>

tools/v/examples/js_dom_draw/main.v

@@ -0,0 +1,28 @@
+module main
+
+import os
+import veb
+
+const http_port = 3001
+const vexe = os.quoted_path(os.getenv_opt('VEXE') or { @VEXE })
+
+pub struct Context {
+	veb.Context
+}
+
+pub struct App {
+	veb.StaticHandler
+}
+
+fn main() {
+	os.chdir(os.dir(@FILE))!
+	mut app := &App{}
+	veb.run_at[App, Context](mut app, port: http_port)!
+}
+
+// before_accept_loop builds draw.js before the server starts and registers the static assets.
+pub fn (mut app App) before_accept_loop() {
+	os.execute_or_panic('${vexe} -b js_browser draw.js.v')
+	app.serve_static('/draw.js', 'draw.js') or { panic(err) }
+	app.serve_static('/index.html', 'index.html') or { panic(err) }
+}