Compare commits
3 Commits
df53fb0d8d
...
de7ca42f7a
| Author | SHA1 | Date | |
|---|---|---|---|
| de7ca42f7a | |||
| f2190fb781 | |||
| f5236a9148 |
5
TODO.md
5
TODO.md
@@ -6,4 +6,7 @@
|
||||
- percentage
|
||||
- [ ] allow text rendering to support new lines
|
||||
- [ ] possibly allow a more dearimgui approch to rendering
|
||||
- [ ] min and max width
|
||||
- [ ] min and max width
|
||||
- [ ] scrollable Node
|
||||
- [ ] add ui logic to allow most of it to be hidden
|
||||
- [ ] add text input fields
|
||||
BIN
examples/raylib-example/res/image.png
Normal file
BIN
examples/raylib-example/res/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
@@ -109,6 +109,8 @@ pub fn main() anyerror!void {
|
||||
rl.initWindow(screenWidth, screenHeight, "raylib-zig [core] example - basic window");
|
||||
defer rl.closeWindow(); // Close window and OpenGL context
|
||||
|
||||
const image = try rl.loadImage("res/image.png");
|
||||
const image_texture = try rl.Texture.fromImage(image);
|
||||
rl.setTargetFPS(60); // Set our game to run at 60 frames-per-second
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
@@ -151,180 +153,189 @@ pub fn main() anyerror!void {
|
||||
},
|
||||
}),
|
||||
|
||||
UI.Element(.{
|
||||
.name = "child",
|
||||
.style = .{ .background_colour = .{
|
||||
.b = 255,
|
||||
}, .padding = .{ .bottom = 5 } },
|
||||
.children = &[_]UI.Node{
|
||||
UI.Element(.{
|
||||
.name = "branch1",
|
||||
// .rect = .{ .w = 200 },
|
||||
.style = .{
|
||||
.size_x = .grow,
|
||||
.padding = .{
|
||||
.bottom = 5,
|
||||
.left = 5,
|
||||
.top = 5,
|
||||
.right = 5,
|
||||
},
|
||||
// .layout = .right_to_left,
|
||||
.child_gap = 5,
|
||||
},
|
||||
.children = &[_]UI.Node{
|
||||
UI.Element(.{
|
||||
.name = "branch11",
|
||||
.style = .{
|
||||
.background_colour = .{
|
||||
.g = 128,
|
||||
.b = 128,
|
||||
.r = 128,
|
||||
},
|
||||
.size_x = .grow,
|
||||
},
|
||||
.rect = .{
|
||||
.h = 40,
|
||||
.w = 40,
|
||||
},
|
||||
}),
|
||||
UI.Element(.{
|
||||
.name = "branch12",
|
||||
.style = .{
|
||||
.background_colour = .{
|
||||
.g = 128,
|
||||
.r = 128,
|
||||
},
|
||||
.size_x = .grow,
|
||||
},
|
||||
.rect = .{
|
||||
.h = 40,
|
||||
.w = 40,
|
||||
},
|
||||
}),
|
||||
UI.Element(.{
|
||||
.name = "branch13",
|
||||
.rect = .{
|
||||
.h = 40,
|
||||
.w = 40,
|
||||
},
|
||||
.style = .{
|
||||
.background_colour = .{
|
||||
.g = 90,
|
||||
.b = 150,
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
UI.Element(.{
|
||||
.name = "branch2",
|
||||
.style = .{
|
||||
.background_colour = .{
|
||||
.r = 255,
|
||||
.g = 128,
|
||||
},
|
||||
.layout = .right_to_left,
|
||||
.child_gap = 4,
|
||||
.padding = .{
|
||||
.left = 10,
|
||||
.bottom = 10,
|
||||
.right = 10,
|
||||
.top = 10,
|
||||
},
|
||||
},
|
||||
.children = &[_]UI.Node{
|
||||
UI.Element(.{
|
||||
.name = "branch21",
|
||||
.rect = .{
|
||||
.h = 30,
|
||||
.w = 30,
|
||||
},
|
||||
.style = .{
|
||||
.rounded = 40,
|
||||
.background_colour = .{
|
||||
.r = 255,
|
||||
.b = 150,
|
||||
},
|
||||
},
|
||||
}),
|
||||
UI.Element(.{
|
||||
.name = "branch22",
|
||||
.rect = .{
|
||||
.h = 30,
|
||||
.w = 30,
|
||||
},
|
||||
.style = .{
|
||||
.rounded = 40,
|
||||
.background_colour = .{
|
||||
.r = 90,
|
||||
.b = 150,
|
||||
},
|
||||
},
|
||||
}),
|
||||
UI.Element(.{
|
||||
.name = "branch21",
|
||||
.rect = .{
|
||||
.h = 30,
|
||||
.w = 30,
|
||||
},
|
||||
.style = .{
|
||||
.rounded = 40,
|
||||
.background_colour = .{
|
||||
.r = 255,
|
||||
.b = 150,
|
||||
},
|
||||
},
|
||||
}),
|
||||
UI.Element(.{
|
||||
.name = "branch22",
|
||||
.rect = .{
|
||||
.h = 30,
|
||||
.w = 30,
|
||||
},
|
||||
.style = .{
|
||||
.rounded = 40,
|
||||
.background_colour = .{
|
||||
.r = 90,
|
||||
.b = 150,
|
||||
},
|
||||
},
|
||||
}),
|
||||
UI.Element(.{
|
||||
.name = "branch21",
|
||||
.rect = .{
|
||||
.h = 30,
|
||||
.w = 30,
|
||||
},
|
||||
.style = .{
|
||||
.rounded = 40,
|
||||
.background_colour = .{
|
||||
.r = 255,
|
||||
.b = 150,
|
||||
},
|
||||
},
|
||||
}),
|
||||
UI.Element(.{
|
||||
.name = "branch22",
|
||||
.rect = .{
|
||||
.h = 30,
|
||||
.w = 30,
|
||||
},
|
||||
.style = .{
|
||||
.rounded = 40,
|
||||
.background_colour = .{
|
||||
.r = 90,
|
||||
.b = 150,
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
// UI.Element(.{
|
||||
// .name = "child",
|
||||
// .style = .{ .background_colour = .{
|
||||
// .b = 255,
|
||||
// }, .padding = .{ .bottom = 5 } },
|
||||
// .children = &[_]UI.Node{
|
||||
// UI.Element(.{
|
||||
// .name = "branch1",
|
||||
// // .rect = .{ .w = 200 },
|
||||
// .style = .{
|
||||
// .size_x = .grow,
|
||||
// .padding = .{
|
||||
// .bottom = 5,
|
||||
// .left = 5,
|
||||
// .top = 5,
|
||||
// .right = 5,
|
||||
// },
|
||||
// // .layout = .right_to_left,
|
||||
// .child_gap = 5,
|
||||
// },
|
||||
// .children = &[_]UI.Node{
|
||||
// UI.Element(.{
|
||||
// .name = "branch11",
|
||||
// .style = .{
|
||||
// .background_colour = .{
|
||||
// .g = 128,
|
||||
// .b = 128,
|
||||
// .r = 128,
|
||||
// },
|
||||
// .size_x = .grow,
|
||||
// },
|
||||
// .rect = .{
|
||||
// .h = 40,
|
||||
// .w = 40,
|
||||
// },
|
||||
// }),
|
||||
// UI.Element(.{
|
||||
// .name = "branch12",
|
||||
// .style = .{
|
||||
// .background_colour = .{
|
||||
// .g = 128,
|
||||
// .r = 128,
|
||||
// },
|
||||
// .size_x = .grow,
|
||||
// },
|
||||
// .rect = .{
|
||||
// .h = 40,
|
||||
// .w = 40,
|
||||
// },
|
||||
// }),
|
||||
// UI.Element(.{
|
||||
// .name = "branch13",
|
||||
// .rect = .{
|
||||
// .h = 40,
|
||||
// .w = 40,
|
||||
// },
|
||||
// .style = .{
|
||||
// .background_colour = .{
|
||||
// .g = 90,
|
||||
// .b = 150,
|
||||
// },
|
||||
// },
|
||||
// }),
|
||||
// },
|
||||
// }),
|
||||
// UI.Element(.{
|
||||
// .name = "branch2",
|
||||
// .style = .{
|
||||
// .background_colour = .{
|
||||
// .r = 255,
|
||||
// .g = 128,
|
||||
// },
|
||||
// .layout = .right_to_left,
|
||||
// .child_gap = 4,
|
||||
// .padding = .{
|
||||
// .left = 10,
|
||||
// .bottom = 10,
|
||||
// .right = 10,
|
||||
// .top = 10,
|
||||
// },
|
||||
// },
|
||||
// .children = &[_]UI.Node{
|
||||
// UI.Element(.{
|
||||
// .name = "branch21",
|
||||
// .rect = .{
|
||||
// .h = 30,
|
||||
// .w = 30,
|
||||
// },
|
||||
// .style = .{
|
||||
// .rounded = 40,
|
||||
// .background_colour = .{
|
||||
// .r = 255,
|
||||
// .b = 150,
|
||||
// },
|
||||
// },
|
||||
// }),
|
||||
// UI.Element(.{
|
||||
// .name = "branch22",
|
||||
// .rect = .{
|
||||
// .h = 30,
|
||||
// .w = 30,
|
||||
// },
|
||||
// .style = .{
|
||||
// .rounded = 40,
|
||||
// .background_colour = .{
|
||||
// .r = 90,
|
||||
// .b = 150,
|
||||
// },
|
||||
// },
|
||||
// }),
|
||||
// UI.Element(.{
|
||||
// .name = "branch21",
|
||||
// .rect = .{
|
||||
// .h = 30,
|
||||
// .w = 30,
|
||||
// },
|
||||
// .style = .{
|
||||
// .rounded = 40,
|
||||
// .background_colour = .{
|
||||
// .r = 255,
|
||||
// .b = 150,
|
||||
// },
|
||||
// },
|
||||
// }),
|
||||
// UI.Element(.{
|
||||
// .name = "branch22",
|
||||
// .rect = .{
|
||||
// .h = 30,
|
||||
// .w = 30,
|
||||
// },
|
||||
// .style = .{
|
||||
// .rounded = 40,
|
||||
// .background_colour = .{
|
||||
// .r = 90,
|
||||
// .b = 150,
|
||||
// },
|
||||
// },
|
||||
// }),
|
||||
// UI.Element(.{
|
||||
// .name = "branch21",
|
||||
// .rect = .{
|
||||
// .h = 30,
|
||||
// .w = 30,
|
||||
// },
|
||||
// .style = .{
|
||||
// .rounded = 40,
|
||||
// .background_colour = .{
|
||||
// .r = 255,
|
||||
// .b = 150,
|
||||
// },
|
||||
// },
|
||||
// }),
|
||||
// UI.Element(.{
|
||||
// .name = "branch22",
|
||||
// .rect = .{
|
||||
// .h = 30,
|
||||
// .w = 30,
|
||||
// },
|
||||
// .style = .{
|
||||
// .rounded = 40,
|
||||
// .background_colour = .{
|
||||
// .r = 90,
|
||||
// .b = 150,
|
||||
// },
|
||||
// },
|
||||
// }),
|
||||
// },
|
||||
// }),
|
||||
// },
|
||||
// }),
|
||||
button(),
|
||||
button(),
|
||||
UI.Image(.{
|
||||
.texture = image_texture,
|
||||
.rect = .{
|
||||
.h = @floatFromInt(image_texture.height),
|
||||
.w = @floatFromInt(image_texture.width),
|
||||
},
|
||||
}),
|
||||
button(),
|
||||
button(),
|
||||
};
|
||||
|
||||
// root.Shoots(root.TextType(raylib.Font,(function 'getTextWidth'),(function 'getTextheight')),root.TextureType(raylib.Texture)).NodeTypes
|
||||
// root.Shoots(root.TextType(raylib.Font,(function 'getTextWidth'),(function 'getTextheight')),root.TextureType(raylib.Texture)).Node
|
||||
const root = UI.Element(.{
|
||||
.name = "root",
|
||||
.pos = .{
|
||||
@@ -383,6 +394,7 @@ pub fn main() anyerror!void {
|
||||
});
|
||||
|
||||
const commands = try UI.getRenderCommands(sized, al.allocator());
|
||||
std.debug.print("{f}\n", .{sized});
|
||||
// std.debug.print("layout time : {}ms\n", .{
|
||||
// @as(f32, @floatFromInt(timer.lap())) / @as(f32, @floatFromInt(std.time.ns_per_ms)),
|
||||
// });
|
||||
@@ -431,7 +443,15 @@ pub fn main() anyerror!void {
|
||||
t.text.colour.a,
|
||||
));
|
||||
},
|
||||
.texture => continue,
|
||||
.texture => |tex| {
|
||||
// std.debug.print("{}\n", .{tex.texture.texture});
|
||||
rl.drawTexture(
|
||||
tex.texture.texture,
|
||||
@as(i32, @intFromFloat(tex.pos.x)),
|
||||
@as(i32, @intFromFloat(tex.pos.y)),
|
||||
.white,
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
66
src/root.zig
66
src/root.zig
@@ -176,6 +176,16 @@ pub const Colour = struct {
|
||||
a: u8 = 255,
|
||||
};
|
||||
|
||||
const Dir = enum {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
|
||||
pub const Scrollable = struct {
|
||||
offset: *Real,
|
||||
dir: Dir,
|
||||
};
|
||||
|
||||
pub const MouseState = struct {
|
||||
pos: Pos,
|
||||
left: bool,
|
||||
@@ -229,6 +239,11 @@ pub fn Shoots(
|
||||
try printWithLevel(writer, level + 1, "on_click : {?},\n", .{node.element.on_click});
|
||||
try printWithLevel(writer, level + 1, "rect : {any},\n", .{node.element.rect});
|
||||
try printWithLevel(writer, level + 1, "style : .{{\n", .{});
|
||||
try printWithLevel(writer, level + 1, "on_click : {any},\n", .{node.element.on_click});
|
||||
try printWithLevel(writer, level + 1, "allow_on_click_when_occluded : {any},\n", .{node.element.allow_on_click_when_occluded});
|
||||
try printWithLevel(writer, level + 1, "on_hover : {any},\n", .{node.element.on_hover});
|
||||
try printWithLevel(writer, level + 1, "allow_on_hover_when_occluded : {any},\n", .{node.element.allow_on_hover_when_occluded});
|
||||
try printWithLevel(writer, level + 1, "scrollable : {?},\n", .{node.element.scrollable});
|
||||
try node.element.style.printStyle(writer, level + 1);
|
||||
try printWithLevel(writer, level + 1, "children : {{\n", .{});
|
||||
for (node.element.children, 0..) |_, i| {
|
||||
@@ -272,6 +287,8 @@ pub fn Shoots(
|
||||
// the on hover call back will be ran
|
||||
allow_on_hover_when_occluded: bool = true,
|
||||
allow_on_click_when_occluded: bool = false,
|
||||
|
||||
scrollable: ?Scrollable = null,
|
||||
};
|
||||
|
||||
pub const Interact = struct {
|
||||
@@ -284,6 +301,8 @@ pub fn Shoots(
|
||||
rect,
|
||||
text,
|
||||
texture,
|
||||
// clip_start,
|
||||
// clip_end,
|
||||
};
|
||||
|
||||
pub const RenderCommand = union(RenderCommandType) {
|
||||
@@ -301,20 +320,18 @@ pub fn Shoots(
|
||||
},
|
||||
texture: struct {
|
||||
texture: Texture,
|
||||
pos: Pos,
|
||||
z_index: usize = 0,
|
||||
pos: Pos,
|
||||
},
|
||||
// clip_start: struct {
|
||||
// pos: Pos,
|
||||
// z_index: usize = 0,
|
||||
// rect: Rect,
|
||||
// rounding: ?Real,
|
||||
// },
|
||||
// clip_end: struct {},
|
||||
};
|
||||
|
||||
// focused: *Node,
|
||||
|
||||
// /// highly suggested that you use an area for the alloc
|
||||
// pub fn init() Self {
|
||||
// return Self{
|
||||
// .alloc = alloc,
|
||||
// };
|
||||
// }
|
||||
|
||||
pub inline fn ElementWborder(
|
||||
boarder_width: Padding,
|
||||
boarder_colour: Colour,
|
||||
@@ -358,6 +375,16 @@ pub fn Shoots(
|
||||
);
|
||||
}
|
||||
|
||||
pub inline fn Image(texture: Texture) Node {
|
||||
return Element(
|
||||
.{
|
||||
.children = &[_]Node{.{
|
||||
.texture = texture,
|
||||
}},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
pub fn closeElement(node: *Node, parent: *Node) void {
|
||||
switch (node.*) {
|
||||
.element => {
|
||||
@@ -392,7 +419,12 @@ pub fn Shoots(
|
||||
parent.element.rect.w += node.text.getTextWidth();
|
||||
// std.debug.print("parent.element.rect.w : {}\n", .{parent.element.rect.w});
|
||||
},
|
||||
.texture => return,
|
||||
.texture => {
|
||||
std.debug.print("before {any}\n", .{parent.element.rect});
|
||||
parent.element.rect.h += node.texture.rect.h;
|
||||
parent.element.rect.w += node.texture.rect.w;
|
||||
std.debug.print("after {any}\n", .{parent.element.rect});
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -459,11 +491,13 @@ pub fn Shoots(
|
||||
.text = text,
|
||||
.z_index = node.element.z_index,
|
||||
} }),
|
||||
.texture => |texture| try command_list.append(alloc, .{ .texture = .{
|
||||
.pos = node.element.pos,
|
||||
.texture = texture,
|
||||
.z_index = node.element.z_index,
|
||||
} }),
|
||||
.texture => |texture| try command_list.append(alloc, .{
|
||||
.texture = .{
|
||||
.pos = node.element.pos,
|
||||
.texture = texture,
|
||||
.z_index = node.element.z_index,
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user