скругление

src/main.zig

@@ -1,6 +1,7 @@
 const std = @import("std");
 const builtin = @import("builtin");
 const dvui = @import("dvui");
+const dvui_ext = @import("./ui/dvui_ext.zig");
 const SDLBackend = @import("sdl-backend");
 const Document = @import("Document.zig");
 const WindowContext = @import("WindowContext.zig");
@@ -82,10 +83,8 @@ fn gui_frame(ctx: *WindowContext) bool {
     defer root.deinit();
 
     // Левая панель с фиксированной шириной
+    var left_panel = dvui.box(@src(), .{ .dir = .vertical }, .{ .expand = .vertical, .min_size_content = .{ .w = 200 }, .background = true });
     {
-        var left_panel = dvui.box(@src(), .{ .dir = .vertical }, .{ .expand = .vertical, .min_size_content = .{ .w = 200 }, .background = true });
-        defer left_panel.deinit();
-
         dvui.label(@src(), "Tools", .{}, .{});
         if (dvui.button(@src(), "Fill Random Color", .{}, .{})) {
             ctx.fillRandomColor() catch |err| {
@@ -93,51 +92,54 @@ fn gui_frame(ctx: *WindowContext) bool {
             };
         }
     }
+    left_panel.deinit();
 
     // Правая панель - занимает оставшееся пространство
+    const back = dvui.box(
+        @src(),
+        .{ .dir = .horizontal },
+        .{ .expand = .both, .padding = dvui.Rect.all(12), .background = true },
+    );
     {
-        const back = dvui.box(
+        const fill_color = Color.white.opacity(0.5);
+        var right_panel = dvui.box(
             @src(),
-            .{ .dir = .horizontal },
-            .{ .expand = .both, .padding = dvui.Rect.all(12), .background = true },
-        );
-        defer back.deinit();
-
-        {
-            const fill_color = Color.white.opacity(0.5);
-            var right_panel = dvui.box(
-                @src(),
-                .{ .dir = .vertical },
-                .{
-                    .expand = .both,
-                    .background = true,
-                    .corner_radius = dvui.Rect.all(10),
-                    .color_fill = fill_color,
-                },
-            );
-            defer right_panel.deinit();
-
-            const overlay = dvui.overlay(@src(), .{
+            .{ .dir = .vertical },
+            .{
                 .expand = .both,
-            });
-            defer overlay.deinit();
+                .background = true,
+                .padding = dvui.Rect.all(5),
+                .corner_radius = dvui.Rect.all(24),
+                .color_fill = fill_color,
+            },
+        );
+        {
+            var textured = dvui_ext.texturedBox(right_panel.data().contentRectScale(), dvui.Rect.all(20));
+            {
+                const overlay = dvui.overlay(@src(), .{ .expand = .both });
+                {
+                    // Отобразить canvas внутри контейнера
+                    if (ctx.canvas_texture) |texture| {
+                        _ = dvui.image(@src(), .{
+                            .source = .{ .texture = texture },
+                        }, .{
+                            .margin = .{ .x = ctx.canvas_pos.x, .y = ctx.canvas_pos.y },
+                            .min_size_content = .{
+                                .w = @floatFromInt(ctx.canvas_width),
+                                .h = @floatFromInt(ctx.canvas_height),
+                            },
+                        });
+                    }
 
-            // Отобразить canvas внутри контейнера
-            if (ctx.canvas_texture) |texture| {
-                _ = dvui.image(@src(), .{
-                    .source = .{ .texture = texture },
-                }, .{
-                    .expand = .both,
-                    .min_size_content = .{
-                        .w = @floatFromInt(ctx.canvas_width),
-                        .h = @floatFromInt(ctx.canvas_height),
-                    },
-                });
+                    dvui.label(@src(), "Canvas", .{}, .{ .gravity_x = 0.5, .gravity_y = 0.0 });
+                }
+                overlay.deinit();
             }
-
-            dvui.label(@src(), "Canvas", .{}, .{ .gravity_x = 0.5, .gravity_y = 0.0 });
+            textured.deinit();
         }
+        right_panel.deinit();
     }
+    back.deinit();
 
     return true;
 }