какое то скроллирование

src/Document.zig

@@ -0,0 +1 @@
+// Файл векторного документа

src/WindowContext.zig

@@ -0,0 +1,88 @@
+const std = @import("std");
+const dvui = @import("dvui");
+const Color = dvui.Color;
+
+const WindowContext = @This();
+
+allocator: std.mem.Allocator,
+canvas_texture: ?dvui.Texture = null,
+canvas_width: u32 = 400,
+canvas_height: u32 = 300,
+canvas_pos: dvui.Point = dvui.Point{ .x = 0, .y = 0 },
+canvas_scroll: dvui.ScrollInfo = .{
+    .vertical = .given,
+    .horizontal = .given,
+    .virtual_size = .{ .w = 2000, .h = 2000 },
+},
+
+pub fn init(allocator: std.mem.Allocator) WindowContext {
+    return .{
+        .allocator = allocator,
+    };
+}
+
+/// Заполнить canvas случайным цветом на CPU
+pub fn fillRandomColor(self: *WindowContext) !void {
+    var prng = std.Random.DefaultPrng.init(@intCast(std.time.microTimestamp()));
+    const random = prng.random();
+
+    // Выделить буфер пиксельных данных
+    const pixels = try self.allocator.alloc(Color.PMA, @as(usize, self.canvas_width) * self.canvas_height);
+    defer self.allocator.free(pixels);
+
+    // Заполнить случайными цветами
+    const r = random.int(u8);
+    const g = random.int(u8);
+    const b = random.int(u8);
+
+    var prev: dvui.Color.PMA = .{
+        .r = r,
+        .g = g,
+        .b = b,
+        .a = 255,
+    };
+    for (pixels) |*pixel| {
+        const r_delta = random.intRangeAtMost(i16, -1, 1);
+        const g_delta = random.intRangeAtMost(i16, -1, 1);
+        const b_delta = random.intRangeAtMost(i16, -1, 1);
+
+        const r_new: i16 = @as(i16, prev.r) + r_delta;
+        const g_new: i16 = @as(i16, prev.g) + g_delta;
+        const b_new: i16 = @as(i16, prev.b) + b_delta;
+
+        pixel.* = .{
+            .r = @intCast(std.math.clamp(r_new, 0, 255)),
+            .g = @intCast(std.math.clamp(g_new, 0, 255)),
+            .b = @intCast(std.math.clamp(b_new, 0, 255)),
+            .a = 255,
+        };
+        prev = pixel.*;
+    }
+
+    // Удалить старую текстуру
+    if (self.canvas_texture) |tex| {
+        dvui.Texture.destroyLater(tex);
+    }
+
+    // Создать новую текстуру из пиксельных данных
+    self.canvas_texture = try dvui.textureCreate(pixels, self.canvas_width, self.canvas_height, .linear);
+
+    // Дать скроллам ощутимый диапазон сразу (минимум 2000x2000)
+    self.canvas_scroll.virtual_size = .{
+        .w = @max(2000, @as(f32, @floatFromInt(self.canvas_width))),
+        .h = @max(2000, @as(f32, @floatFromInt(self.canvas_height))),
+    };
+}
+
+/// Отобразить canvas в UI
+pub fn render(self: WindowContext, rect: dvui.Rect.Physical) !void {
+    if (self.canvas_texture) |texture| {
+        try dvui.renderTexture(texture, .{ .r = rect }, .{});
+    }
+}
+
+pub fn deinit(self: *WindowContext) void {
+    if (self.canvas_texture) |texture| {
+        dvui.Texture.destroyLater(texture);
+    }
+}

src/main.zig

@@ -1,7 +1,10 @@
 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");
 const sdl_c = SDLBackend.c;
 const Allocator = std.mem.Allocator;
 const Color = dvui.Color;
@@ -24,9 +27,11 @@ pub fn main() !void {
             .dark => dvui.Theme.builtin.adwaita_dark,
         },
     });
-
     defer win.deinit();
 
+    var ctx = WindowContext.init(allocator);
+    defer ctx.deinit();
+
     var interrupted = false;
 
     main_loop: while (true) {
@@ -44,7 +49,7 @@ pub fn main() !void {
         _ = SDLBackend.c.SDL_SetRenderDrawColor(backend.renderer, 0, 0, 0, 255);
         _ = SDLBackend.c.SDL_RenderClear(backend.renderer);
 
-        const keep_running = gui_frame();
+        const keep_running = gui_frame(&ctx);
         if (!keep_running) break :main_loop;
 
         // marks end of dvui frame, don't call dvui functions after this
@@ -64,7 +69,7 @@ pub fn main() !void {
     }
 }
 
-fn gui_frame() bool {
+fn gui_frame(ctx: *WindowContext) bool {
     for (dvui.events()) |*e| {
         if (e.evt == .window and e.evt.window.action == .close) return false;
         if (e.evt == .app and e.evt.app.action == .quit) return false;
@@ -78,23 +83,25 @@ fn gui_frame() bool {
     defer root.deinit();
 
     // Левая панель с фиксированной шириной
-    {
     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", .{}, .{});
-        _ = dvui.button(@src(), "Button", .{}, .{});
+        if (dvui.button(@src(), "Fill Random Color", .{}, .{})) {
+            ctx.fillRandomColor() catch |err| {
+                std.debug.print("Error filling canvas: {}\n", .{err});
+            };
+            ctx.canvas_pos = .{ .x = 400, .y = 400 };
         }
+    }
+    left_panel.deinit();
 
     // Правая панель - занимает оставшееся пространство
-    {
     const back = 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(),
@@ -102,14 +109,55 @@ fn gui_frame() bool {
             .{
                 .expand = .both,
                 .background = true,
-                .corner_radius = dvui.Rect.all(10),
+                .padding = dvui.Rect.all(5),
+                .corner_radius = dvui.Rect.all(24),
                 .color_fill = fill_color,
             },
         );
-        defer right_panel.deinit();
+        {
+            var textured = dvui_ext.texturedBox(right_panel.data().contentRectScale(), dvui.Rect.all(20));
+            {
+                var canvas_box = dvui.box(
+                    @src(),
+                    .{ .dir = .vertical },
+                    .{ .expand = .both },
+                );
+                {
+                    dvui.label(@src(), "Canvas", .{}, .{ .gravity_x = 0.5, .gravity_y = 0.0 });
 
-        dvui.label(@src(), "Canvas", .{}, .{ .gravity_x = 0.5 });
+                    var scroll = dvui.scrollArea(
+                        @src(),
+                        .{
+                            .scroll_info = &ctx.canvas_scroll,
+                            .vertical_bar = .auto,
+                            .horizontal_bar = .auto,
+                        },
+                        .{ .expand = .both, .background = false },
+                    );
+                    {
+                        // Отобразить canvas внутри scroll area.
+                        // ScrollArea сам двигает дочерние виджеты, поэтому margin не нужен.
+                        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),
+                                },
+                            });
                         }
+                    }
+                    scroll.deinit();
+                }
+                canvas_box.deinit();
+            }
+            textured.deinit();
+        }
+        right_panel.deinit();
+    }
+    back.deinit();
 
     return true;
 }

src/render/IRenderEngine.zig

@@ -0,0 +1 @@
+// Интерфейс для рендеринга документа

src/ui/dvui_ext.zig

@@ -0,0 +1,8 @@
+// Расширения для dvui
+const std = @import("std");
+const dvui = @import("dvui");
+const TexturedBox = @import("./types/TexturedBox.zig");
+
+pub fn texturedBox(rs: dvui.RectScale, corner_radius: dvui.Rect) TexturedBox {
+    return TexturedBox.init(rs, corner_radius);
+}

src/ui/types/TexturedBox.zig

@@ -0,0 +1,38 @@
+// Отрисовка дочернего контента как текстуры с параметрами скругления
+const std = @import("std");
+const dvui = @import("dvui");
+const TexturedBox = @This();
+
+parent: dvui.Widget,
+rs: dvui.RectScale,
+pic: ?dvui.Picture,
+corner_radius: dvui.Rect,
+
+pub fn init(rs: dvui.RectScale, corner_radius: dvui.Rect) TexturedBox {
+    const parent = dvui.parentGet();
+    const pic = dvui.Picture.start(rs.r);
+    return .{
+        .parent = parent,
+        .corner_radius = corner_radius,
+        .rs = rs,
+        .pic = pic,
+    };
+}
+
+pub fn deinit(self: *TexturedBox) void {
+    if (self.pic) |*picture| {
+        picture.stop();
+
+        const tex = dvui.textureFromTarget(picture.texture) catch null;
+        if (tex) |t| {
+            dvui.Texture.destroyLater(t);
+            // self.rs.r.y -= 2;
+            // self.rs.r.x -= 2;
+            // self.rs.r.h += 2;
+            // self.rs.r.w += 2;
+            dvui.renderTexture(t, self.rs, .{
+                .corner_radius = self.corner_radius,
+            }) catch {};
+        }
+    }
+}