Skip to content

Commit abd0158

Browse files
thetarnavthetarnav
committed
Center mouse position, improve dom api from getting window pos/size
1 parent f04d1be commit abd0158

File tree

4 files changed

+116
-53
lines changed

4 files changed

+116
-53
lines changed

‎example/main.odin‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package main
22

33
import "core:fmt"
4+
import "core:intrinsics"
45
import glm "core:math/linalg/glsl"
56
import "core:mem"
67
import "core:runtime"
@@ -15,8 +16,8 @@ shader_vertex := #load("shader_vertex.glsl", string)
1516
dpr: f32
1617
res: [2]i32
1718
canvas_pos: [2]f32
18-
canvas_rect: [2]f32
19-
window_rect: [2]f32
19+
canvas_size: [2]f32
20+
window_size: [2]f32
2021
mouse_pos: [2]f32
2122

2223
scale: f32 = 1
@@ -89,24 +90,24 @@ main :: proc() {
8990
colors_buffer = webgl.CreateBuffer()
9091

9192
dpr = f32(dom.device_pixel_ratio())
92-
canvas_rect = {640, 480}
93-
window_rect = canvas_rect + 200
94-
mouse_pos = window_rect / 2
93+
window_size = cast_vec2(f32, dom.get_window_inner_size())
94+
canvas_size = window_size - 200
95+
mouse_pos = window_size / 2
9596
}
9697

9798
on_mouse_move :: proc(e: dom.Event) {
98-
mouse_pos = {f32(e.data.mouse.client.x), f32(e.data.mouse.client.y)}
99+
mouse_pos = cast_vec2(f32, e.data.mouse.client)
99100
}
100101
on_wheel :: proc(e: dom.Event) {
101102
scale += f32(e.data.wheel.delta.y) * 0.001
102103
scale = clamp(scale, scale_min, scale_max)
103104
}
104105
@(export)
105-
on_window_resize :: proc "c" (vw, vh, cw, ch, cx, cy: f32) {
106-
window_rect = {vw, vh}
107-
canvas_rect = {cw, ch}
106+
on_window_resize :: proc "contextless" (vw, vh, cw, ch, cx, cy: f32) {
107+
window_size = {vw, vh}
108+
canvas_size = {cw, ch}
108109
canvas_pos = {cx, cy}
109-
res = {i32(f32(canvas_rect.x) * dpr), i32(f32(canvas_rect.y) * dpr)}
110+
res = cast_vec2(i32, canvas_size * dpr)
110111
}
111112

112113
@(export)
@@ -135,56 +136,58 @@ frame :: proc "c" (delta: i32, ctx: ^runtime.Context) {
135136

136137
webgl.BindBuffer(webgl.ARRAY_BUFFER, positions_buffer)
137138
webgl.BufferDataSlice(webgl.ARRAY_BUFFER, positions[:], webgl.STATIC_DRAW)
138-
139-
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
140139
webgl.VertexAttribPointer(a_position, 2, webgl.FLOAT, false, 0, 0)
141140

142-
// bind, and fill color buffer
143141
webgl.BindBuffer(webgl.ARRAY_BUFFER, colors_buffer)
144142
webgl.BufferDataSlice(webgl.ARRAY_BUFFER, colors[:], webgl.STATIC_DRAW)
145143
webgl.VertexAttribPointer(a_color, 4, webgl.UNSIGNED_BYTE, true, 0, 0)
146144

147-
// set the resolution
148-
webgl.Uniform2f(u_resolution, canvas_rect.x, canvas_rect.y)
145+
webgl.Uniform2f(u_resolution, canvas_size.x, canvas_size.y)
149146

150-
// Tell WebGL how to convert from clip space to pixels
151147
webgl.Viewport(0, 0, res.x, res.y)
152-
153-
// Clear the canvas
154148
webgl.ClearColor(0, 0.01, 0.02, 0)
155149
webgl.Clear(webgl.COLOR_BUFFER_BIT)
156150

157-
rotation += 0.01 * f32(delta) * (window_rect.x / 2 - mouse_pos.x) / window_rect.x
151+
152+
rotation += 0.01 * f32(delta) * (window_size.x / 2 - mouse_pos.x) / window_size.x
158153
mat :=
159154
mat3_translate(mouse_pos - canvas_pos) *
160155
mat3_scale({scale, scale}) *
161156
mat3_rotate(rotation) *
162157
mat3_translate(-box_size / 2)
158+
163159
webgl.UniformMatrix3fv(u_matrix, mat)
164160

165-
// draw
166161
webgl.DrawArrays(webgl.TRIANGLES, 0, 6) // 2 triangles, 6 vertices
167162
}
168163

164+
cast_vec2 :: proc "contextless" (
165+
$To: typeid,
166+
v: [2]$From,
167+
) -> [2]To where intrinsics.type_is_numeric(From) &&
168+
intrinsics.type_is_numeric(To) {
169+
return {To(v.x), To(v.y)}
170+
}
171+
169172
// odinfmt: disable
170173
@(require_results)
171-
mat3_translate :: proc(v: [2]f32) -> glm.mat3 {
174+
mat3_translate :: proc "contextless" (v: [2]f32) -> glm.mat3 {
172175
return {
173176
1, 0, v.x,
174177
0, 1, v.y,
175178
0, 0, 1,
176179
}
177180
}
178181
@(require_results)
179-
mat3_scale :: proc(v: [2]f32) -> glm.mat3 {
182+
mat3_scale :: proc "contextless" (v: [2]f32) -> glm.mat3 {
180183
return {
181184
v.x, 0, 0,
182185
0, v.y, 0,
183186
0, 0, 1,
184187
}
185188
}
186189
@(require_results)
187-
mat3_rotate :: proc(angle: f32) -> glm.mat3 {
190+
mat3_rotate :: proc "contextless" (angle: f32) -> glm.mat3 {
188191
c := glm.cos(angle)
189192
s := glm.sin(angle)
190193
return {

‎wasm/dom/dom.js‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -449,39 +449,56 @@ export function makeOdinDOM(_wasm) {
449449
values[3] = rect.bottom - rect.top
450450
},
451451
/**
452-
* Get window rect
453-
*
454-
* @param {number} rect_ptr pointer to Rect
452+
* @param {number} size_ptr pointer to [2]f64
455453
* @returns {void}
456454
*/
457-
window_get_rect(rect_ptr) {
458-
const values = mem.load_f64_array(wasm.memory.buffer, rect_ptr, 4)
459-
455+
get_window_inner_size(size_ptr) {
456+
const values = mem.load_f64_array(wasm.memory.buffer, size_ptr, 2)
457+
values[0] = window.innerWidth
458+
values[1] = window.innerHeight
459+
},
460+
/**
461+
* @param {number} size_ptr pointer to [2]f64
462+
* @returns {void}
463+
*/
464+
get_window_outer_size(size_ptr) {
465+
const values = mem.load_f64_array(wasm.memory.buffer, size_ptr, 2)
466+
values[0] = window.outerWidth
467+
values[1] = window.outerHeight
468+
},
469+
/**
470+
* @param {number} size_ptr pointer to [2]f64
471+
* @returns {void}
472+
*/
473+
get_screen_size(size_ptr) {
474+
const values = mem.load_f64_array(wasm.memory.buffer, size_ptr, 2)
475+
values[0] = window.screen.width
476+
values[1] = window.screen.height
477+
},
478+
/**
479+
* @param {number} pos_ptr pointer to [2]f64
480+
* @returns {void}
481+
*/
482+
get_window_position(pos_ptr) {
483+
const values = mem.load_f64_array(wasm.memory.buffer, pos_ptr, 2)
460484
values[0] = window.screenX
461485
values[1] = window.screenY
462-
values[2] = window.screen.width
463-
values[3] = window.screen.height
464486
},
465487
/**
466-
* Get window scroll
467-
*
468488
* @param {number} pos_ptr pointer to [2]f64
469489
* @returns {void}
470490
*/
471-
window_get_scroll(pos_ptr) {
491+
get_window_scroll(pos_ptr) {
472492
const values = mem.load_f64_array(wasm.memory.buffer, pos_ptr, 2)
473-
474493
values[0] = window.scrollX
475494
values[1] = window.scrollY
476495
},
477496
/**
478-
* Set window scroll
479-
*
480497
* @param {number} x scroll x
481498
* @param {number} y scroll y
482499
* @returns {void}
483500
*/
484-
window_set_scroll(x, y) {
501+
set_window_scroll(x, y) {
485502
window.scroll(x, y)
486503
},
487504
/**

‎wasm/dom/dom_all_targets.odin‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,27 @@ get_bounding_client_rect :: proc "contextless" (id: string) -> (rect: Rect) {
3232
panic("vendor:wasm/js not supported on non JS targets")
3333
}
3434

35-
window_get_rect :: proc "contextless" () -> (rect: Rect) {
35+
get_window_inner_size :: proc "contextless" () -> (size: [2]f64) {
3636
context = runtime.default_context()
3737
panic("vendor:wasm/js not supported on non JS targets")
3838
}
3939

40-
window_get_scroll :: proc "contextless" () -> (x, y: f64) {
40+
get_window_outer_size :: proc "contextless" () -> (size: [2]f64) {
41+
context = runtime.default_context()
42+
panic("vendor:wasm/js not supported on non JS targets")
43+
}
44+
45+
get_screen_size :: proc "contextless" () -> (size: [2]f64) {
46+
context = runtime.default_context()
47+
panic("vendor:wasm/js not supported on non JS targets")
48+
}
49+
50+
get_window_position :: proc "contextless" () -> (pos: [2]f64) {
51+
context = runtime.default_context()
52+
panic("vendor:wasm/js not supported on non JS targets")
53+
}
54+
55+
get_window_scroll :: proc "contextless" () -> (x, y: f64) {
4156
context = runtime.default_context()
4257
panic("vendor:wasm/js not supported on non JS targets")
4358
}

‎wasm/dom/dom_js.odin‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ foreign dom_lib {
2121

2222
device_pixel_ratio :: proc() -> f64 ---
2323

24-
window_set_scroll :: proc(x, y: f64) ---
24+
set_window_scroll :: proc(x, y: f64) ---
2525
}
2626

2727
get_element_value_string :: proc "contextless" (id: string, buf: []byte) -> string {
@@ -53,32 +53,60 @@ Rect :: struct {
5353
}
5454

5555
get_bounding_client_rect :: proc "contextless" (id: string) -> (rect: Rect) {
56-
@(default_calling_convention = "contextless")
5756
foreign dom_lib {
5857
@(link_name = "get_bounding_client_rect")
59-
_get_bounding_client_rect :: proc(rect: ^Rect, id: string) ---
58+
_get_bounding_client_rect :: proc "contextless" (rect: ^Rect, id: string) ---
6059
}
6160
_get_bounding_client_rect(&rect, id)
6261
return
6362
}
6463

65-
window_get_rect :: proc "contextless" () -> (rect: Rect) {
66-
@(default_calling_convention = "contextless")
64+
// Get `window.innerWidth` and `window.innerHeight`
65+
get_window_inner_size :: proc "contextless" () -> (size: [2]f64) {
6766
foreign dom_lib {
68-
@(link_name = "window_get_rect")
69-
_window_get_rect :: proc(rect: ^Rect) ---
67+
@(link_name = "get_window_inner_size")
68+
_get_window_inner_size :: proc "contextless" (size: ^[2]f64) ---
7069
}
71-
_window_get_rect(&rect)
70+
_get_window_inner_size(&size)
7271
return
7372
}
7473

75-
window_get_scroll :: proc "contextless" () -> (x, y: f64) {
76-
@(default_calling_convention = "contextless")
74+
// Get `window.outerWidth` and `window.outerHeight`
75+
get_window_outer_size :: proc "contextless" () -> (size: [2]f64) {
76+
foreign dom_lib {
77+
@(link_name = "get_window_outer_size")
78+
_get_window_outer_size :: proc "contextless" (size: ^[2]f64) ---
79+
}
80+
_get_window_outer_size(&size)
81+
return
82+
}
83+
84+
// Get `window.screen.width` and `window.screen.height`
85+
get_screen_size :: proc "contextless" () -> (size: [2]f64) {
86+
foreign dom_lib {
87+
@(link_name = "get_screen_size")
88+
_get_screen_size :: proc "contextless" (size: ^[2]f64) ---
89+
}
90+
_get_screen_size(&size)
91+
return
92+
}
93+
94+
// Get `window.screenX` and `window.screenY`
95+
get_window_position :: proc "contextless" () -> (pos: [2]f64) {
96+
foreign dom_lib {
97+
@(link_name = "get_window_position")
98+
_get_window_position :: proc "contextless" (pos: ^[2]f64) ---
99+
}
100+
_get_window_position(&pos)
101+
return
102+
}
103+
104+
get_window_scroll :: proc "contextless" () -> (x, y: f64) {
77105
foreign dom_lib {
78-
@(link_name = "window_get_scroll")
79-
_window_get_scroll :: proc(scroll: ^[2]f64) ---
106+
@(link_name = "get_window_scroll")
107+
_get_window_scroll :: proc "contextless" (scroll: ^[2]f64) ---
80108
}
81109
scroll := [2]f64{x, y}
82-
_window_get_scroll(&scroll)
110+
_get_window_scroll(&scroll)
83111
return
84112
}

0 commit comments

Comments
 (0)