can now scroll
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
const std = @import("std");
|
const std = @import("std");
|
||||||
const rl = @import("rl");
|
const rl = @import("rl");
|
||||||
const shoots = @import("shoots");
|
const shoots = @import("root.zig");
|
||||||
|
|
||||||
fn getTextWidth(string: []const u8, font: rl.Font) shoots.Real {
|
fn getTextWidth(string: []const u8, font: rl.Font) shoots.Real {
|
||||||
var width: c_int = 0;
|
var width: c_int = 0;
|
||||||
@@ -117,6 +117,8 @@ pub fn main() anyerror!void {
|
|||||||
std.debug.print("shoots version :{s}\n", .{shoots.VERSION});
|
std.debug.print("shoots version :{s}\n", .{shoots.VERSION});
|
||||||
std.debug.print("raylib time : {}\n", .{@divTrunc(timer.lap(), std.time.ns_per_ms)});
|
std.debug.print("raylib time : {}\n", .{@divTrunc(timer.lap(), std.time.ns_per_ms)});
|
||||||
|
|
||||||
|
var scroll_offset: shoots.Pos = .{};
|
||||||
|
|
||||||
const child = &[_]UI.Node{
|
const child = &[_]UI.Node{
|
||||||
sideBar(),
|
sideBar(),
|
||||||
button(),
|
button(),
|
||||||
@@ -153,178 +155,193 @@ pub fn main() anyerror!void {
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
|
||||||
// UI.Element(.{
|
UI.Element(.{
|
||||||
// .name = "child",
|
.name = "child",
|
||||||
// .style = .{ .background_colour = .{
|
.style = .{ .background_colour = .{
|
||||||
// .b = 255,
|
.b = 255,
|
||||||
// }, .padding = .{ .bottom = 5 } },
|
}, .padding = .{ .bottom = 5 } },
|
||||||
// .children = &[_]UI.Node{
|
.children = &[_]UI.Node{
|
||||||
// UI.Element(.{
|
UI.Element(.{
|
||||||
// .name = "branch1",
|
.name = "branch1",
|
||||||
// // .rect = .{ .w = 200 },
|
// .rect = .{ .w = 200 },
|
||||||
// .style = .{
|
.style = .{
|
||||||
// .size_x = .grow,
|
.size_x = .grow,
|
||||||
// .padding = .{
|
.padding = .{
|
||||||
// .bottom = 5,
|
.bottom = 5,
|
||||||
// .left = 5,
|
.left = 5,
|
||||||
// .top = 5,
|
.top = 5,
|
||||||
// .right = 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,
|
// .layout = .right_to_left,
|
||||||
// .child_gap = 4,
|
.child_gap = 5,
|
||||||
// .padding = .{
|
},
|
||||||
// .left = 10,
|
.children = &[_]UI.Node{
|
||||||
// .bottom = 10,
|
UI.Element(.{
|
||||||
// .right = 10,
|
.name = "branch11",
|
||||||
// .top = 10,
|
.style = .{
|
||||||
// },
|
.background_colour = .{
|
||||||
// },
|
.g = 128,
|
||||||
// .children = &[_]UI.Node{
|
.b = 128,
|
||||||
// UI.Element(.{
|
.r = 128,
|
||||||
// .name = "branch21",
|
},
|
||||||
// .rect = .{
|
.size_x = .grow,
|
||||||
// .h = 30,
|
},
|
||||||
// .w = 30,
|
.rect = .{
|
||||||
// },
|
.h = 40,
|
||||||
// .style = .{
|
.w = 40,
|
||||||
// .rounded = 40,
|
},
|
||||||
// .background_colour = .{
|
}),
|
||||||
// .r = 255,
|
UI.Element(.{
|
||||||
// .b = 150,
|
.name = "branch12",
|
||||||
// },
|
.style = .{
|
||||||
// },
|
.background_colour = .{
|
||||||
// }),
|
.g = 128,
|
||||||
// UI.Element(.{
|
.r = 128,
|
||||||
// .name = "branch22",
|
},
|
||||||
// .rect = .{
|
.size_x = .grow,
|
||||||
// .h = 30,
|
},
|
||||||
// .w = 30,
|
.rect = .{
|
||||||
// },
|
.h = 40,
|
||||||
// .style = .{
|
.w = 40,
|
||||||
// .rounded = 40,
|
},
|
||||||
// .background_colour = .{
|
}),
|
||||||
// .r = 90,
|
UI.Element(.{
|
||||||
// .b = 150,
|
.name = "branch13",
|
||||||
// },
|
.rect = .{
|
||||||
// },
|
.h = 40,
|
||||||
// }),
|
.w = 40,
|
||||||
// UI.Element(.{
|
},
|
||||||
// .name = "branch21",
|
.style = .{
|
||||||
// .rect = .{
|
.background_colour = .{
|
||||||
// .h = 30,
|
.g = 90,
|
||||||
// .w = 30,
|
.b = 150,
|
||||||
// },
|
},
|
||||||
// .style = .{
|
},
|
||||||
// .rounded = 40,
|
}),
|
||||||
// .background_colour = .{
|
},
|
||||||
// .r = 255,
|
}),
|
||||||
// .b = 150,
|
UI.Element(.{
|
||||||
// },
|
.name = "branch2",
|
||||||
// },
|
.style = .{
|
||||||
// }),
|
.background_colour = .{
|
||||||
// UI.Element(.{
|
.r = 255,
|
||||||
// .name = "branch22",
|
.g = 128,
|
||||||
// .rect = .{
|
},
|
||||||
// .h = 30,
|
.layout = .right_to_left,
|
||||||
// .w = 30,
|
.child_gap = 4,
|
||||||
// },
|
.padding = .{
|
||||||
// .style = .{
|
.left = 10,
|
||||||
// .rounded = 40,
|
.bottom = 10,
|
||||||
// .background_colour = .{
|
.right = 10,
|
||||||
// .r = 90,
|
.top = 10,
|
||||||
// .b = 150,
|
},
|
||||||
// },
|
},
|
||||||
// },
|
.children = &[_]UI.Node{
|
||||||
// }),
|
UI.Element(.{
|
||||||
// UI.Element(.{
|
.name = "branch21",
|
||||||
// .name = "branch21",
|
.rect = .{
|
||||||
// .rect = .{
|
.h = 30,
|
||||||
// .h = 30,
|
.w = 30,
|
||||||
// .w = 30,
|
},
|
||||||
// },
|
.style = .{
|
||||||
// .style = .{
|
.rounded = 40,
|
||||||
// .rounded = 40,
|
.background_colour = .{
|
||||||
// .background_colour = .{
|
.r = 255,
|
||||||
// .r = 255,
|
.b = 150,
|
||||||
// .b = 150,
|
},
|
||||||
// },
|
},
|
||||||
// },
|
}),
|
||||||
// }),
|
UI.Element(.{
|
||||||
// UI.Element(.{
|
.name = "branch22",
|
||||||
// .name = "branch22",
|
.rect = .{
|
||||||
// .rect = .{
|
.h = 30,
|
||||||
// .h = 30,
|
.w = 30,
|
||||||
// .w = 30,
|
},
|
||||||
// },
|
.style = .{
|
||||||
// .style = .{
|
.rounded = 40,
|
||||||
// .rounded = 40,
|
.background_colour = .{
|
||||||
// .background_colour = .{
|
.r = 90,
|
||||||
// .r = 90,
|
.b = 150,
|
||||||
// .b = 150,
|
},
|
||||||
// },
|
},
|
||||||
// },
|
}),
|
||||||
// }),
|
UI.Element(.{
|
||||||
// },
|
.name = "branch21",
|
||||||
// }),
|
.rect = .{
|
||||||
// },
|
.h = 30,
|
||||||
// }),
|
.w = 30,
|
||||||
button(),
|
},
|
||||||
button(),
|
.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 = "scrollable",
|
||||||
|
.scrollable = .{
|
||||||
|
.dir = .y,
|
||||||
|
.offset = &scroll_offset,
|
||||||
|
},
|
||||||
|
.rect = .{ .h = 250 },
|
||||||
|
.children = &[_]UI.Node{
|
||||||
|
UI.Element(
|
||||||
|
.{
|
||||||
|
.style = .{
|
||||||
|
.background_colour = .{
|
||||||
|
.r = 255,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
.children = &[_]UI.Node{
|
||||||
UI.Image(.{
|
UI.Image(.{
|
||||||
.texture = image_texture,
|
.texture = image_texture,
|
||||||
.rect = .{
|
.rect = .{
|
||||||
@@ -332,6 +349,13 @@ pub fn main() anyerror!void {
|
|||||||
.w = @floatFromInt(image_texture.width),
|
.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)).NodeTypes
|
||||||
@@ -391,16 +415,21 @@ pub fn main() anyerror!void {
|
|||||||
.left = rl.isMouseButtonDown(.left),
|
.left = rl.isMouseButtonDown(.left),
|
||||||
.middle = rl.isMouseButtonDown(.middle),
|
.middle = rl.isMouseButtonDown(.middle),
|
||||||
.right = rl.isMouseButtonDown(.right),
|
.right = rl.isMouseButtonDown(.right),
|
||||||
|
.scroll_delta = .{
|
||||||
|
.y = rl.getMouseWheelMoveV().y,
|
||||||
|
.x = rl.getMouseWheelMoveV().x,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const commands = try UI.getRenderCommands(sized, al.allocator());
|
const commands = try UI.getRenderCommands(sized, al.allocator());
|
||||||
std.debug.print("{f}\n", .{sized});
|
// std.debug.print("{f}\n", .{sized});
|
||||||
// std.debug.print("layout time : {}ms\n", .{
|
std.debug.print("layout time : {}ms\n", .{
|
||||||
// @as(f32, @floatFromInt(timer.lap())) / @as(f32, @floatFromInt(std.time.ns_per_ms)),
|
@as(f32, @floatFromInt(timer.lap())) / @as(f32, @floatFromInt(std.time.ns_per_ms)),
|
||||||
// });
|
});
|
||||||
|
|
||||||
for (commands.items) |command| {
|
for (commands.items) |command| {
|
||||||
// std.debug.print("command : {any}\n", .{command});
|
// std.debug.print("command : {any}\n", .{command});
|
||||||
|
rl.clearBackground(.white);
|
||||||
switch (command) {
|
switch (command) {
|
||||||
.rect => |r| {
|
.rect => |r| {
|
||||||
if (r.rounding) |rounding| {
|
if (r.rounding) |rounding| {
|
||||||
@@ -436,15 +465,22 @@ pub fn main() anyerror!void {
|
|||||||
},
|
},
|
||||||
.text => |t| {
|
.text => |t| {
|
||||||
const string = @as([:0]const u8, @ptrCast(t.text.string));
|
const string = @as([:0]const u8, @ptrCast(t.text.string));
|
||||||
rl.drawText(string, @as(i32, @intFromFloat(t.pos.x)), @as(i32, @intFromFloat(t.pos.y)), @as(i32, @intFromFloat(t.text.getTextHeight())), rl.Color.init(
|
rl.drawText(
|
||||||
|
string,
|
||||||
|
@as(i32, @intFromFloat(t.pos.x)),
|
||||||
|
@as(i32, @intFromFloat(t.pos.y)),
|
||||||
|
@as(i32, @intFromFloat(t.text.getTextHeight())),
|
||||||
|
rl.Color.init(
|
||||||
t.text.colour.r,
|
t.text.colour.r,
|
||||||
t.text.colour.g,
|
t.text.colour.g,
|
||||||
t.text.colour.b,
|
t.text.colour.b,
|
||||||
t.text.colour.a,
|
t.text.colour.a,
|
||||||
));
|
),
|
||||||
|
);
|
||||||
},
|
},
|
||||||
.texture => |tex| {
|
.texture => |tex| {
|
||||||
// std.debug.print("{}\n", .{tex.texture.texture});
|
// std.debug.print("{}\n", .{tex.texture.texture});
|
||||||
|
// std.debug.print("texture {}\n", .{tex});
|
||||||
rl.drawTexture(
|
rl.drawTexture(
|
||||||
tex.texture.texture,
|
tex.texture.texture,
|
||||||
@as(i32, @intFromFloat(tex.pos.x)),
|
@as(i32, @intFromFloat(tex.pos.x)),
|
||||||
@@ -452,10 +488,28 @@ pub fn main() anyerror!void {
|
|||||||
.white,
|
.white,
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
.clip_start => |clip| {
|
||||||
|
// std.debug.print("clip {}\n", .{clip});
|
||||||
|
rl.beginScissorMode(
|
||||||
|
@as(i32, @intFromFloat(clip.pos.x)),
|
||||||
|
@as(i32, @intFromFloat(clip.pos.y)),
|
||||||
|
@as(i32, @intFromFloat(clip.rect.w)),
|
||||||
|
@as(i32, @intFromFloat(clip.rect.h)),
|
||||||
|
);
|
||||||
|
|
||||||
|
// rl.drawRectangleRec(rl.Rectangle.init(
|
||||||
|
// clip.pos.x,
|
||||||
|
// clip.pos.y,
|
||||||
|
// clip.rect.w,
|
||||||
|
// clip.rect.h,
|
||||||
|
// ), .blue);
|
||||||
|
},
|
||||||
|
.clip_end => |_| {
|
||||||
|
rl.endScissorMode();
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
rl.clearBackground(.white);
|
|
||||||
_ = al.reset(.retain_capacity);
|
_ = al.reset(.retain_capacity);
|
||||||
// rl.drawRectangle(0, 0, 200, 100, .blue);
|
// rl.drawRectangle(0, 0, 200, 100, .blue);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user