Add Listener and bring back WASM in some shape or form

zenith391 · zenith391 · commit 6448ebf44833 · 2023-10-23T18:20:58.000+02:00
While unsatisfactory and causing performance issues because Zig async is missing,
WebAssembly is nonetheless being brought back at the expense of having to change the
entire event loop architecture of Capy.

This is at best a temporary solution
diff --git a/build_capy.zig b/build_capy.zig
@@ -92,19 +92,32 @@ const WebServerStep = struct {
                 content_type = "application/wasm";
             }
 
-            var file = try std.fs.openFileAbsolute(file_path, .{ .mode = .read_only });
-            defer file.close();
-            const content = try file.readToEndAlloc(req_allocator, std.math.maxInt(usize));
+            std.log.info("{s}", .{path});
+            const file: ?std.fs.File = std.fs.cwd().openFile(file_path, .{ .mode = .read_only }) catch |err| blk: {
+                switch (err) {
+                    error.FileNotFound => break :blk null,
+                    else => return err,
+                }
+            };
+            const content = blk: {
+                if (file) |f| {
+                    defer f.close();
+                    break :blk try f.readToEndAlloc(req_allocator, std.math.maxInt(usize));
+                } else {
+                    break :blk "404 Not Found";
+                }
+            };
 
             res.transfer_encoding = .{ .content_length = content.len };
-            try res.headers.append("Connection", res.request.headers.getFirstValue("Connection") orelse "close");
+            // try res.headers.append("Connection", res.request.headers.getFirstValue("Connection") orelse "close");
+            try res.headers.append("Connection", "close");
             try res.headers.append("Content-Type", content_type);
 
             try res.do();
             try res.writer().writeAll(content);
             try res.finish();
 
-            if (res.connection.closing) break;
+            if (res.connection.closing or true) break;
         }
     }
 };
@@ -277,6 +290,7 @@ pub fn install(step: *std.Build.CompileStep, options: CapyBuildOptions) !*std.Bu
                 // Things like the image reader require more stack than given by default
                 // TODO: remove once ziglang/zig#12589 is merged
                 step.stack_size = @max(step.stack_size orelse 0, 256 * 1024);
+                step.export_symbol_names = &.{ "_start", "_capyStep" };
                 if (step.optimize == .ReleaseSmall) {
                     step.strip = true;
                 }
diff --git a/examples/colors.zig b/examples/colors.zig
@@ -15,7 +15,7 @@ pub fn animateRandomColor(button_: *anyopaque) !void {
     rect.color.animate(capy.Easings.InOut, randomColor, 1000);
 }
 
-pub fn main() !void {
+pub fn start() !void {
     try capy.init();
     var window = try capy.Window.init();
     prng = std.rand.DefaultPrng.init(@as(u64, @bitCast(std.time.milliTimestamp())));
@@ -28,5 +28,5 @@ pub fn main() !void {
         }),
     }));
     window.show();
-    capy.runEventLoop();
+    // capy.runEventLoop();
 }
diff --git a/src/backends/macos/backend.zig b/src/backends/macos/backend.zig
@@ -160,7 +160,7 @@ pub const Window = struct {
 
     pub fn show(self: *Window) void {
         std.log.info("show window", .{});
-        objc.msgSendByName(void, self.peer, "setIsVisible:", .{ @as(objc.id, self.peer), @as(u8, @intFromBool(true))}) catch unreachable;
+        objc.msgSendByName(void, self.peer, "setIsVisible:", .{ @as(objc.id, self.peer), @as(u8, @intFromBool(true)) }) catch unreachable;
         objc.msgSendByName(void, self.peer, "makeKeyAndOrderFront:", .{@as(objc.id, self.peer)}) catch unreachable;
         std.log.info("showed window", .{});
         _ = activeWindows.fetchAdd(1, .Release);
diff --git a/src/backends/wasm/backend.zig b/src/backends/wasm/backend.zig
@@ -22,10 +22,15 @@ const GuiWidget = struct {
     element: js.ElementId = 0,
 
     processEventFn: *const fn (object: ?*anyopaque, event: js.EventId) void,
+    children: std.ArrayList(*GuiWidget),
 
     pub fn init(comptime T: type, allocator: std.mem.Allocator, name: []const u8, typeName: []const u8) !*GuiWidget {
         const self = try allocator.create(GuiWidget);
-        self.* = .{ .processEventFn = T.processEvent, .element = js.createElement(name, typeName) };
+        self.* = .{
+            .processEventFn = T.processEvent,
+            .element = js.createElement(name, typeName),
+            .children = std.ArrayList(*GuiWidget).init(allocator),
+        };
         return self;
     }
 };
@@ -46,11 +51,16 @@ pub fn init() !void {
 var globalWindow: ?*Window = null;
 
 pub const Window = struct {
+    peer: *GuiWidget,
     child: ?PeerType = null,
     scale: f32 = 1.0,
 
+    pub usingnamespace Events(Window);
+
     pub fn create() !Window {
-        return Window{};
+        return Window{
+            .peer = try GuiWidget.init(Window, lasting_allocator, "div", "window"),
+        };
     }
 
     pub fn show(self: *Window) void {
@@ -106,6 +116,7 @@ pub fn Events(comptime T: type) type {
         }
 
         pub inline fn setCallback(self: *T, comptime eType: EventType, cb: anytype) !void {
+            self.peer.object = self;
             switch (eType) {
                 .Click => self.peer.user.clickHandler = cb,
                 .Draw => self.peer.user.drawHandler = cb,
@@ -119,6 +130,7 @@ pub fn Events(comptime T: type) type {
                 },
                 .KeyType => self.peer.user.keyTypeHandler = cb,
                 .KeyPress => self.peer.user.keyPressHandler = cb,
+                .PropertyChange => self.peer.user.propertyChangeHandler = cb,
             }
         }
 
@@ -181,18 +193,18 @@ pub fn Events(comptime T: type) type {
                     },
                 }
             } else if (T == Container) { // if we're a container, iterate over our children to propagate the event
-                for (self.children.items) |child| {
+                for (self.peer.children.items) |child| {
                     child.processEventFn(child.object, event);
                 }
             }
         }
 
         pub fn getWidth(self: *const T) c_int {
-            return std.math.max(10, js.getWidth(self.peer.element));
+            return @max(10, js.getWidth(self.peer.element));
         }
 
         pub fn getHeight(self: *const T) c_int {
-            return std.math.max(10, js.getHeight(self.peer.element));
+            return @max(10, js.getHeight(self.peer.element));
         }
 
         pub fn getPreferredSize(self: *const T) lib.Size {
@@ -241,7 +253,7 @@ pub const TextField = struct {
 pub const Label = struct {
     peer: *GuiWidget,
     /// The text returned by getText(), it's invalidated everytime setText is called
-    temp_text: ?[:0]const u8 = null,
+    temp_text: ?[]const u8 = null,
 
     pub usingnamespace Events(Label);
 
@@ -375,6 +387,11 @@ pub const Canvas = struct {
             js.rectPath(self.ctx, x, y, w, h);
         }
 
+        pub fn roundedRectangleEx(self: *DrawContext, x: i32, y: i32, w: u32, h: u32, corner_radiuses: [4]f32) void {
+            _ = corner_radiuses;
+            js.rectPath(self.ctx, x, y, w, h);
+        }
+
         pub fn text(self: *DrawContext, x: i32, y: i32, layout: TextLayout, str: []const u8) void {
             // TODO: layout
             _ = layout;
@@ -447,20 +464,28 @@ pub const ImageData = struct {
 
 pub const Container = struct {
     peer: *GuiWidget,
-    children: std.ArrayList(*GuiWidget),
 
     pub usingnamespace Events(Container);
 
     pub fn create() !Container {
         return Container{
             .peer = try GuiWidget.init(Container, lasting_allocator, "div", "container"),
-            .children = std.ArrayList(*GuiWidget).init(lasting_allocator),
         };
     }
 
     pub fn add(self: *Container, peer: PeerType) void {
         js.appendElement(self.peer.element, peer.element);
-        self.children.append(peer) catch unreachable;
+        self.peer.children.append(peer) catch unreachable;
+    }
+
+    pub fn remove(self: *const Container, peer: PeerType) void {
+        _ = peer;
+        _ = self;
+    }
+
+    pub fn setTabOrder(self: *Container, peers: []const PeerType) void {
+        _ = peers;
+        _ = self;
     }
 
     pub fn move(self: *const Container, peer: PeerType, x: u32, y: u32) void {
@@ -498,22 +523,28 @@ pub const HttpResponse = struct {
 
 // Execution
 
-fn executeMain() callconv(.Async) void {
-    const mainFn = @import("root").main;
-    const ReturnType = @typeInfo(@TypeOf(mainFn)).Fn.return_type.?;
+fn executeStart() void {
+    const startFn = @import("root").start;
+    const ReturnType = @typeInfo(@TypeOf(startFn)).Fn.return_type.?;
     if (ReturnType == void) {
-        mainFn();
+        startFn();
     } else {
-        mainFn() catch |err| @panic(@errorName(err));
+        startFn() catch |err| @panic(@errorName(err));
     }
-    js.stopExecution();
 }
 
-var frame: @Frame(executeMain) = undefined;
-var result: void = {};
-var suspending: bool = false;
-
-var resumePtr: anyframe = undefined;
+fn executeStep() void {
+    // Check for events
+    while (js.hasEvent()) {
+        const eventId = js.popEvent();
+        if (globalWindow) |window| {
+            if (window.child) |child| {
+                child.processEventFn(child.object, eventId);
+            }
+        }
+    }
+    lib.eventStep.callListeners();
+}
 
 fn milliTimestamp() i64 {
     return @as(i64, @intFromFloat(js.now()));
@@ -556,10 +587,11 @@ pub const backendExport = struct {
 
                 const start = milliTimestamp();
                 while (milliTimestamp() < start + @as(i64, @intCast(duration))) {
-                    suspending = true;
-                    suspend {
-                        resumePtr = @frame();
-                    }
+                    // TODO: when zig async is restored, use suspend here
+                    // suspending = true;
+                    // suspend {
+                    //     resumePtr = @frame();
+                    // }
                 }
                 return 0;
             }
@@ -596,41 +628,35 @@ pub const backendExport = struct {
     }
 
     pub fn panic(msg: []const u8, _: ?*std.builtin.StackTrace, _: ?usize) noreturn {
+        @setRuntimeSafety(false);
         js.print(msg);
 
         //@breakpoint();
         js.stopExecution();
     }
 
     pub export fn _start() callconv(.C) void {
-        _ = @asyncCall(&frame, &result, executeMain, .{});
+        executeStart();
     }
 
-    pub export fn _zgtContinue() callconv(.C) void {
-        if (suspending) {
-            suspending = false;
-            resume resumePtr;
-        }
+    pub export fn _capyStep() callconv(.C) void {
+        executeStep();
     }
 };
 
-pub fn runStep(step: shared.EventLoopStep) callconv(.Async) bool {
-    _ = step;
-    while (js.hasEvent()) {
-        const eventId = js.popEvent();
-        switch (js.getEventType(eventId)) {
-            else => {
-                if (globalWindow) |window| {
-                    if (window.child) |child| {
-                        child.processEventFn(child.object, eventId);
-                    }
-                }
-            },
-        }
-    }
-    suspending = true;
-    suspend {
-        resumePtr = @frame();
-    }
-    return true;
-}
+// pub fn runStep(step: shared.EventLoopStep) callconv(.Async) bool {
+//     _ = step;
+//     while (js.hasEvent()) {
+//         const eventId = js.popEvent();
+//         switch (js.getEventType(eventId)) {
+//             else => {
+//                 if (globalWindow) |window| {
+//                     if (window.child) |child| {
+//                         child.processEventFn(child.object, eventId);
+//                     }
+//                 }
+//             },
+//         }
+//     }
+//     return true;
+// }
diff --git a/src/backends/wasm/capy.js b/src/backends/wasm/capy.js
@@ -37,10 +37,12 @@ const importObj = {
 			elem.style.position = "absolute";
 			elem.classList.add("capy-" + readString(elementType, elementTypeLen));
 			elem.addEventListener("click", function(e) {
-				pushEvent({
-					type: 1,
-					target: idx
-				});
+				if (elem.nodeName == "BUTTON") {
+					pushEvent({
+						type: 1,
+						target: idx
+					});
+				}
 			});
 			elem.addEventListener("change", function(e) {
 				pushEvent({
@@ -340,7 +342,7 @@ const importObj = {
 	// TODO: when we're in blocking mode, avoid updating so often
 	function update() {
 		if (executeProgram) {
-			obj.instance.exports._zgtContinue();
+			obj.instance.exports._capyStep();
 			requestAnimationFrame(update);
 		}
 	}
diff --git a/src/data.zig b/src/data.zig
@@ -103,6 +103,7 @@ pub var _animatedAtoms = std.ArrayList(struct {
     fnPtr: *const fn (data: *anyopaque) bool,
     userdata: *anyopaque,
 }).init(lasting_allocator);
+pub var _animatedAtomsLength = Atom(usize).of(0);
 pub var _animatedAtomsMutex = std.Thread.Mutex{};
 
 fn isAnimableType(comptime T: type) bool {
@@ -296,6 +297,7 @@ pub fn Atom(comptime T: type) type {
             }
             if (!contains) {
                 _animatedAtoms.append(.{ .fnPtr = @as(*const fn (*anyopaque) bool, @ptrCast(&Self.update)), .userdata = self }) catch {};
+                _animatedAtomsLength.set(_animatedAtoms.items.len);
             }
         }
 
@@ -847,6 +849,7 @@ test "animated atom" {
     var animated = try Atom(i32).animated(&original, Easings.Linear, 1000);
     defer animated.deinit();
     defer _animatedAtoms.clearAndFree();
+    _animatedAtomsLength.set(0);
 
     original.set(1000);
     try std.testing.expect(animated.hasAnimation());
diff --git a/src/listener.zig b/src/listener.zig
diff --git a/src/main.zig b/src/main.zig

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ pub fn animateRandomColor(button_: *anyopaque) !void {`
`15`	`15`	`rect.color.animate(capy.Easings.InOut, randomColor, 1000);`
`16`	`16`	`}`
`17`	`17`
`18`		`-pub fn main() !void {`
	`18`	`+pub fn start() !void {`
`19`	`19`	`try capy.init();`
`20`	`20`	`var window = try capy.Window.init();`
`21`	`21`	`prng = std.rand.DefaultPrng.init(@as(u64, @bitCast(std.time.milliTimestamp())));`
`@@ -28,5 +28,5 @@ pub fn main() !void {`
`28`	`28`	`}),`
`29`	`29`	`}));`
`30`	`30`	`window.show();`
`31`		`- capy.runEventLoop();`
	`31`	`+ // capy.runEventLoop();`
`32`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -103,6 +103,7 @@ pub var _animatedAtoms = std.ArrayList(struct {`
`103`	`103`	`fnPtr: const fn (data: anyopaque) bool,`
`104`	`104`	`userdata: *anyopaque,`
`105`	`105`	`}).init(lasting_allocator);`
	`106`	`+pub var _animatedAtomsLength = Atom(usize).of(0);`
`106`	`107`	`pub var _animatedAtomsMutex = std.Thread.Mutex{};`
`107`	`108`
`108`	`109`	`fn isAnimableType(comptime T: type) bool {`
`@@ -296,6 +297,7 @@ pub fn Atom(comptime T: type) type {`
`296`	`297`	`}`
`297`	`298`	`if (!contains) {`
`298`	`299`	`_animatedAtoms.append(.{ .fnPtr = @as(const fn (anyopaque) bool, @ptrCast(&Self.update)), .userdata = self }) catch {};`
	`300`	`+ _animatedAtomsLength.set(_animatedAtoms.items.len);`
`299`	`301`	`}`
`300`	`302`	`}`
`301`	`303`
`@@ -847,6 +849,7 @@ test "animated atom" {`
`847`	`849`	`var animated = try Atom(i32).animated(&original, Easings.Linear, 1000);`
`848`	`850`	`defer animated.deinit();`
`849`	`851`	`defer _animatedAtoms.clearAndFree();`
	`852`	`+ _animatedAtomsLength.set(0);`
`850`	`853`
`851`	`854`	`original.set(1000);`
`852`	`855`	`try std.testing.expect(animated.hasAnimation());`