zig/mach
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mach: wasm: Implement fullscreen support for browser platform

Browse source
This commit is contained in:
iddev5 2022-06-11 13:15:28 +05:30 • committed by Stephen Gutekanst
parent 3dc131d4fa
commit 47286508e3
3 changed files with 31 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/platform/mach.js
View file

@ -182,13 +182,12 @@ const mach = {
throw Error(mach.getString(str, len)); throw Error(mach.getString(str, len));
}, },
machCanvasInit(width, height, id) { machCanvasInit(id) {
let canvas = document.createElement("canvas"); let canvas = document.createElement("canvas");
canvas.id = "#mach-canvas-" + mach.canvases.length; canvas.id = "#mach-canvas-" + mach.canvases.length;
canvas.style.width = width + "px"; canvas.style.border = "1px solid";
canvas.style.height = height + "px"; canvas.style.position = "absolute";
canvas.width = Math.floor(width * window.devicePixelRatio); canvas.style.display = "block";
canvas.height = Math.floor(height * window.devicePixelRatio);
canvas.tabIndex = 1; canvas.tabIndex = 1;
mach.observer.observe(canvas, { attributes: true }); mach.observer.observe(canvas, { attributes: true });
@ -250,8 +249,24 @@ const mach = {
if (width > 0 && height > 0) { if (width > 0 && height > 0) {
cv.canvas.style.width = width + "px"; cv.canvas.style.width = width + "px";
cv.canvas.style.height = height + "px"; cv.canvas.style.height = height + "px";
cv.canvas.width = width * window.devicePixelRatio; cv.canvas.width = Math.floor(width * window.devicePixelRatio);
cv.canvas.height = height * window.devicePixelRatio; cv.canvas.height = Math.floor(height * window.devicePixelRatio);
}
},
machCanvasSetFullscreen(canvas, value) {
const cv = mach.canvases[canvas];
if (value) {
cv.canvas.style.border = "0px";
cv.canvas.style.width = "100%";
cv.canvas.style.height = "100%";
cv.canvas.style.top = "0";
cv.canvas.style.left = "0";
cv.canvas.style.margin = "0px";
} else {
cv.canvas.style.border = "1px solid;"
cv.canvas.style.top = "2px";
cv.canvas.style.left = "2px";
} }
}, },

16
src/platform/wasm.zig
View file

@ -5,10 +5,11 @@ const structs = @import("../structs.zig");
const enums = @import("../enums.zig"); const enums = @import("../enums.zig");
const js = struct { const js = struct {
extern fn machCanvasInit(width: u32, height: u32, selector_id: *u8) CanvasId; extern fn machCanvasInit(selector_id: *u8) CanvasId;
extern fn machCanvasDeinit(canvas: CanvasId) void; extern fn machCanvasDeinit(canvas: CanvasId) void;
extern fn machCanvasSetTitle(canvas: CanvasId, title: [*]const u8, len: u32) void; extern fn machCanvasSetTitle(canvas: CanvasId, title: [*]const u8, len: u32) void;
extern fn machCanvasSetSize(canvas: CanvasId, width: u32, height: u32) void; extern fn machCanvasSetSize(canvas: CanvasId, width: u32, height: u32) void;
extern fn machCanvasSetFullscreen(canvas: CanvasId, value: bool) void;
extern fn machCanvasGetWindowWidth(canvas: CanvasId) u32; extern fn machCanvasGetWindowWidth(canvas: CanvasId) u32;
extern fn machCanvasGetWindowHeight(canvas: CanvasId) u32; extern fn machCanvasGetWindowHeight(canvas: CanvasId) u32;
extern fn machCanvasGetFramebufferWidth(canvas: CanvasId) u32; extern fn machCanvasGetFramebufferWidth(canvas: CanvasId) u32;
@ -37,14 +38,10 @@ pub const Platform = struct {
last_framebuffer_size: structs.Size, last_framebuffer_size: structs.Size,
pub fn init(allocator: std.mem.Allocator, eng: *Engine) !Platform { pub fn init(allocator: std.mem.Allocator, eng: *Engine) !Platform {
const options = eng.options;
var selector = [1]u8{0} ** 15; var selector = [1]u8{0} ** 15;
const id = js.machCanvasInit(options.width, options.height, &selector[0]); const id = js.machCanvasInit(&selector[0]);
const title = std.mem.span(options.title); var platform = Platform{
js.machCanvasSetTitle(id, title.ptr, title.len);
return Platform{
.id = id, .id = id,
.selector_id = try allocator.dupe(u8, selector[0 .. selector.len - @as(u32, if (selector[selector.len - 1] == 0) 1 else 0)]), .selector_id = try allocator.dupe(u8, selector[0 .. selector.len - @as(u32, if (selector[selector.len - 1] == 0) 1 else 0)]),
.last_window_size = .{ .last_window_size = .{
@ -56,6 +53,9 @@ pub const Platform = struct {
.height = js.machCanvasGetFramebufferHeight(id), .height = js.machCanvasGetFramebufferHeight(id),
}, },
}; };
try platform.setOptions(eng.options);
return platform;
} }
pub fn setOptions(platform: *Platform, options: structs.Options) !void { pub fn setOptions(platform: *Platform, options: structs.Options) !void {
@ -64,6 +64,8 @@ pub const Platform = struct {
const title = std.mem.span(options.title); const title = std.mem.span(options.title);
js.machCanvasSetTitle(platform.id, title.ptr, title.len); js.machCanvasSetTitle(platform.id, title.ptr, title.len);
js.machCanvasSetFullscreen(platform.id, options.fullscreen);
} }
pub fn setShouldClose(_: *Platform, value: bool) void { pub fn setShouldClose(_: *Platform, value: bool) void {

5
www/template.html
View file

@ -2,11 +2,6 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style>
canvas {{
border: 1px solid;
}}
</style>
</head> </head>
<body> <body>
<script type="module"> <script type="module">