فهرست منبع

Fixed and resizable JS window kinda works like expected now.

Karl Zylinski 2 ماه پیش
والد
کامیت
740313fe58
3فایلهای تغییر یافته به همراه134 افزوده شده و 141 حذف شده
  1. 2 2
      examples/build_web_example/web_entry_templates/index_template.html
  2. 1 1
      examples/minimal/minimal.odin
  3. 131 138
      window_js.odin

+ 2 - 2
examples/build_web_example/web_entry_templates/index_template.html

@@ -5,8 +5,8 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>Karl2D Minimal</title>
 	</head>
-	<body id="body" style="height: 100%; padding: 0; margin: 0; overflow: hidden;">
-		<canvas id="webgl-canvas" style="height: 100%; width: 100%;"></canvas>
+	<body id="body" style="height: 100%; padding: 0; margin: 0; overflow: hidden; background-color: black;">
+		<canvas id="webgl-canvas"></canvas>
 	
 		<script type="text/javascript" src="odin.js"></script>
 		<script type="text/javascript">

+ 1 - 1
examples/minimal/minimal.odin

@@ -13,7 +13,7 @@ _ :: mem
 tex: k2.Texture
 
 init :: proc() {
-	k2.init(1080, 1080, "Karl2D Minimal Program", { .Resizable })
+	k2.init(1080, 1080, "Karl2D Minimal Program", {.Resizable})
 	k2.set_window_position(300, 100)
 	tex = k2.load_texture_from_bytes(#load("sixten.jpg"))
 }

+ 131 - 138
window_js.odin

@@ -98,126 +98,6 @@ js_window_event_key_up :: proc(e: js.Event) {
 	})
 }
 
-key_from_js_event :: proc(e: js.Event) -> Keyboard_Key {
-	switch e.key.code {
-	case "Digit1": return .N1
-	case "Digit2": return .N2
-	case "Digit3": return .N3
-	case "Digit4": return .N4
-	case "Digit5": return .N5
-	case "Digit6": return .N6
-	case "Digit7": return .N7
-	case "Digit8": return .N8
-	case "Digit9": return .N9
-	case "Digit0": return .N0
-
-	case "KeyA": return .A
-	case "KeyB": return .B
-	case "KeyC": return .C
-	case "KeyD": return .D
-	case "KeyE": return .E
-	case "KeyF": return .F
-	case "KeyG": return .G
-	case "KeyH": return .H
-	case "KeyI": return .I
-	case "KeyJ": return .J
-	case "KeyK": return .K
-	case "KeyL": return .L
-	case "KeyM": return .M
-	case "KeyN": return .N
-	case "KeyO": return .O
-	case "KeyP": return .P
-	case "KeyQ": return .Q
-	case "KeyR": return .R
-	case "KeyS": return .S
-	case "KeyT": return .T
-	case "KeyU": return .U
-	case "KeyV": return .V
-	case "KeyW": return .W
-	case "KeyX": return .X
-	case "KeyY": return .Y
-	case "KeyZ": return .Z
-
-	case "Quote":         return .Apostrophe
-	case "Comma":         return .Comma
-	case "Minus":         return .Minus
-	case "Period":        return .Period
-	case "Slash":         return .Slash
-	case "Semicolon":     return .Semicolon
-	case "Equal":         return .Equal
-	case "BracketLeft":   return .Left_Bracket
-	case "Backslash":     return .Backslash
-	case "IntlBackslash": return .Backslash
-	case "BracketRight":  return .Right_Bracket
-	case "Backquote":     return .Backtick
-
-	case "Space":       return .Space
-	case "Escape":      return .Escape
-	case "Enter":       return .Enter
-	case "Tab":         return .Tab
-	case "Backspace":   return .Backspace
-	case "Insert":      return .Insert
-	case "Delete":      return .Delete
-	case "ArrowRight":  return .Right
-	case "ArrowLeft":   return .Left
-	case "ArrowDown":   return .Down
-	case "ArrowUp":     return .Up
-	case "PageUp":      return .Page_Up
-	case "PageDown":    return .Page_Down
-	case "Home":        return .Home
-	case "End":         return .End
-	case "CapsLock":    return .Caps_Lock
-	case "ScrollLock":  return .Scroll_Lock
-	case "NumLock":     return .Num_Lock
-	case "PrintScreen": return .Print_Screen
-	case "Pause":       return .Pause
-
-	case "F1":  return .F1
-	case "F2":  return .F2
-	case "F3":  return .F3
-	case "F4":  return .F4
-	case "F5":  return .F5
-	case "F6":  return .F6
-	case "F7":  return .F7
-	case "F8":  return .F8
-	case "F9":  return .F9
-	case "F10": return .F10
-	case "F11": return .F11
-	case "F12": return .F12
-
-	case "ShiftLeft":    return .Left_Shift
-	case "ControlLeft":  return .Left_Control
-	case "AltLeft":      return .Left_Alt
-	case "MetaLeft":     return .Left_Super
-	case "ShiftRight":   return .Right_Shift
-	case "ControlRight": return .Right_Control
-	case "AltRight":     return .Right_Alt
-	case "MetaRight":    return .Right_Super
-	case "ContextMenu":  return .Menu
-
-	case "Numpad0": return .NP_0
-	case "Numpad1": return .NP_1
-	case "Numpad2": return .NP_2
-	case "Numpad3": return .NP_3
-	case "Numpad4": return .NP_4
-	case "Numpad5": return .NP_5
-	case "Numpad6": return .NP_6
-	case "Numpad7": return .NP_7
-	case "Numpad8": return .NP_8
-	case "Numpad9": return .NP_9
-
-	case "NumpadDecimal":  return .NP_Decimal
-	case "NumpadDivide":   return .NP_Divide
-	case "NumpadMultiply": return .NP_Multiply
-	case "NumpadSubtract": return .NP_Subtract
-	case "NumpadAdd":      return .NP_Add
-	case "NumpadEnter":    return .NP_Enter
-	}
-
-	log.errorf("Unhandled key code: %v", e.key.code)
-	return .None
-}
-
 js_window_event_resize :: proc(e: js.Event) {
 	update_canvas_size(s.canvas_id)
 }
@@ -242,17 +122,16 @@ js_window_event_mouse_up :: proc(e: js.Event) {
 }
 
 update_canvas_size :: proc(canvas_id: HTML_Canvas_ID) {
-	rect := js.get_bounding_client_rect(canvas_id)
-	dpi := js.device_pixel_ratio()
+	rect := js.get_bounding_client_rect("body")
 
-	width := f64(rect.width) * dpi
-	height := f64(rect.height) * dpi
+	width := f64(rect.width)
+	height := f64(rect.height) 
 
 	js.set_element_key_f64(canvas_id, "width", width)
 	js.set_element_key_f64(canvas_id, "height", height)
 
-	s.width = int(width)
-	s.height = int(height)
+	s.width = int(rect.width)
+	s.height = int(rect.height)
 
 	append(&s.events, Window_Event_Resize {
 		width = int(width),
@@ -354,16 +233,10 @@ js_set_position :: proc(x: int, y: int) {
 }
 
 js_set_size :: proc(w, h: int) {
-	dpi := js.device_pixel_ratio()
-
-	width := f64(w) * dpi
-	height := f64(h) * dpi
-
-	s.width = int(width)
-	s.height = int(height)
-
-	js.set_element_key_f64(s.canvas_id, "width", width)
-	js.set_element_key_f64(s.canvas_id, "height", height)
+	s.width = w
+	s.height = h
+	js.set_element_key_f64(s.canvas_id, "width", f64(w))
+	js.set_element_key_f64(s.canvas_id, "height", f64(h))
 }
 
 js_get_window_scale :: proc() -> f32 {
@@ -401,6 +274,9 @@ js_set_internal_state :: proc(state: rawptr) {
 	s = (^JS_State)(state)
 }
 
+@(private="package")
+HTML_Canvas_ID :: string
+
 JS_State :: struct {
 	allocator: runtime.Allocator,
 	canvas_id: HTML_Canvas_ID,
@@ -412,5 +288,122 @@ JS_State :: struct {
 
 s: ^JS_State
 
-@(private="package")
-HTML_Canvas_ID :: string
+key_from_js_event :: proc(e: js.Event) -> Keyboard_Key {
+	switch e.key.code {
+	case "Digit1": return .N1
+	case "Digit2": return .N2
+	case "Digit3": return .N3
+	case "Digit4": return .N4
+	case "Digit5": return .N5
+	case "Digit6": return .N6
+	case "Digit7": return .N7
+	case "Digit8": return .N8
+	case "Digit9": return .N9
+	case "Digit0": return .N0
+
+	case "KeyA": return .A
+	case "KeyB": return .B
+	case "KeyC": return .C
+	case "KeyD": return .D
+	case "KeyE": return .E
+	case "KeyF": return .F
+	case "KeyG": return .G
+	case "KeyH": return .H
+	case "KeyI": return .I
+	case "KeyJ": return .J
+	case "KeyK": return .K
+	case "KeyL": return .L
+	case "KeyM": return .M
+	case "KeyN": return .N
+	case "KeyO": return .O
+	case "KeyP": return .P
+	case "KeyQ": return .Q
+	case "KeyR": return .R
+	case "KeyS": return .S
+	case "KeyT": return .T
+	case "KeyU": return .U
+	case "KeyV": return .V
+	case "KeyW": return .W
+	case "KeyX": return .X
+	case "KeyY": return .Y
+	case "KeyZ": return .Z
+
+	case "Quote":         return .Apostrophe
+	case "Comma":         return .Comma
+	case "Minus":         return .Minus
+	case "Period":        return .Period
+	case "Slash":         return .Slash
+	case "Semicolon":     return .Semicolon
+	case "Equal":         return .Equal
+	case "BracketLeft":   return .Left_Bracket
+	case "Backslash":     return .Backslash
+	case "IntlBackslash": return .Backslash
+	case "BracketRight":  return .Right_Bracket
+	case "Backquote":     return .Backtick
+
+	case "Space":       return .Space
+	case "Escape":      return .Escape
+	case "Enter":       return .Enter
+	case "Tab":         return .Tab
+	case "Backspace":   return .Backspace
+	case "Insert":      return .Insert
+	case "Delete":      return .Delete
+	case "ArrowRight":  return .Right
+	case "ArrowLeft":   return .Left
+	case "ArrowDown":   return .Down
+	case "ArrowUp":     return .Up
+	case "PageUp":      return .Page_Up
+	case "PageDown":    return .Page_Down
+	case "Home":        return .Home
+	case "End":         return .End
+	case "CapsLock":    return .Caps_Lock
+	case "ScrollLock":  return .Scroll_Lock
+	case "NumLock":     return .Num_Lock
+	case "PrintScreen": return .Print_Screen
+	case "Pause":       return .Pause
+
+	case "F1":  return .F1
+	case "F2":  return .F2
+	case "F3":  return .F3
+	case "F4":  return .F4
+	case "F5":  return .F5
+	case "F6":  return .F6
+	case "F7":  return .F7
+	case "F8":  return .F8
+	case "F9":  return .F9
+	case "F10": return .F10
+	case "F11": return .F11
+	case "F12": return .F12
+
+	case "ShiftLeft":    return .Left_Shift
+	case "ControlLeft":  return .Left_Control
+	case "AltLeft":      return .Left_Alt
+	case "MetaLeft":     return .Left_Super
+	case "ShiftRight":   return .Right_Shift
+	case "ControlRight": return .Right_Control
+	case "AltRight":     return .Right_Alt
+	case "MetaRight":    return .Right_Super
+	case "ContextMenu":  return .Menu
+
+	case "Numpad0": return .NP_0
+	case "Numpad1": return .NP_1
+	case "Numpad2": return .NP_2
+	case "Numpad3": return .NP_3
+	case "Numpad4": return .NP_4
+	case "Numpad5": return .NP_5
+	case "Numpad6": return .NP_6
+	case "Numpad7": return .NP_7
+	case "Numpad8": return .NP_8
+	case "Numpad9": return .NP_9
+
+	case "NumpadDecimal":  return .NP_Decimal
+	case "NumpadDivide":   return .NP_Divide
+	case "NumpadMultiply": return .NP_Multiply
+	case "NumpadSubtract": return .NP_Subtract
+	case "NumpadAdd":      return .NP_Add
+	case "NumpadEnter":    return .NP_Enter
+	}
+
+	log.errorf("Unhandled key code: %v", e.key.code)
+	return .None
+}