Миничистка

.vscode/launch.json

@@ -10,5 +10,12 @@
             "cwd": "${workspaceFolder}",
             "preLaunchTask": "zig: build"
         },
+        {
+            "name": "Zig: Debug (gdb)",
+            "type": "gdb",
+            "request": "launch",
+            "program": "${workspaceFolder}/zig-out/bin/Zivro",
+            "preLaunchTask": "zig: build"
+        },
     ]
 }

.vscode/tasks.json

@@ -10,11 +10,6 @@
                 "isDefault": true
             },
             "problemMatcher": ["$gcc"],
-            "presentation": {
-                "reveal": "always",
-                "panel": "shared",
-                "showReuseMessage": true
-            }
         }
     ]
 }

src/Canvas.zig

@@ -0,0 +1,202 @@
+const std = @import("std");
+const builtin = @import("builtin");
+const dvui = @import("dvui");
+const Size = dvui.Size;
+const Color = dvui.Color;
+
+const Canvas = @This();
+
+pub const ImageRect = struct {
+    x: u32,
+    y: u32,
+    w: u32,
+    h: u32,
+};
+
+allocator: std.mem.Allocator,
+texture: ?dvui.Texture = null,
+visible_rect: ?ImageRect = null,
+size: Size = .{ .w = 800, .h = 600 },
+pos: dvui.Point = dvui.Point{ .x = 0, .y = 0 },
+scroll: dvui.ScrollInfo = .{
+    .vertical = .auto,
+    .horizontal = .auto,
+},
+zoom: f32 = 1,
+native_scaling: bool = false,
+gradient_start: Color.PMA = .{ .r = 0, .g = 0, .b = 0, .a = 255 },
+gradient_end: Color.PMA = .{ .r = 255, .g = 255, .b = 255, .a = 255 },
+
+pub fn init(allocator: std.mem.Allocator) Canvas {
+    return .{ .allocator = allocator };
+}
+
+pub fn deinit(self: *Canvas) void {
+    if (self.texture) |texture| {
+        dvui.Texture.destroyLater(texture);
+        self.texture = null;
+    }
+}
+
+/// Заполнить canvas градиентом
+pub fn redrawGradient(self: *Canvas) !void {
+    const full = self.getScaledImageSize();
+    const full_w: u32 = full.w;
+    const full_h: u32 = full.h;
+
+    const vis: ImageRect = self.visible_rect orelse ImageRect{ .x = 0, .y = 0, .w = 0, .h = 0 };
+
+    if (vis.w == 0 or vis.h == 0) {
+        if (self.texture) |tex| {
+            dvui.Texture.destroyLater(tex);
+            self.texture = null;
+        }
+        return;
+    }
+
+    const width: u32 = vis.w;
+    const height: u32 = vis.h;
+
+    // Выделить буфер пиксельных данных
+    const pixels = try self.allocator.alloc(Color.PMA, @as(usize, width) * height);
+    defer self.allocator.free(pixels);
+
+    var y: u32 = 0;
+    while (y < height) : (y += 1) {
+        var x: u32 = 0;
+        while (x < width) : (x += 1) {
+            const gx: u32 = vis.x + x;
+            const gy: u32 = vis.y + y;
+
+            const denom_x: f32 = if (full_w > 1) @as(f32, @floatFromInt(full_w - 1)) else 1;
+            const denom_y: f32 = if (full_h > 1) @as(f32, @floatFromInt(full_h - 1)) else 1;
+            const fx: f32 = @as(f32, @floatFromInt(gx)) / denom_x;
+            const fy: f32 = @as(f32, @floatFromInt(gy)) / denom_y;
+            const factor: f32 = std.math.clamp((fx + fy) / 2, 0, 1);
+
+            const r_f: f32 = @as(f32, @floatFromInt(self.gradient_start.r)) + factor * (@as(f32, @floatFromInt(self.gradient_end.r)) - @as(f32, @floatFromInt(self.gradient_start.r)));
+            const g_f: f32 = @as(f32, @floatFromInt(self.gradient_start.g)) + factor * (@as(f32, @floatFromInt(self.gradient_end.g)) - @as(f32, @floatFromInt(self.gradient_start.g)));
+            const b_f: f32 = @as(f32, @floatFromInt(self.gradient_start.b)) + factor * (@as(f32, @floatFromInt(self.gradient_end.b)) - @as(f32, @floatFromInt(self.gradient_start.b)));
+
+            const r: u8 = @intFromFloat(std.math.clamp(r_f, 0, 255));
+            const g: u8 = @intFromFloat(std.math.clamp(g_f, 0, 255));
+            const b: u8 = @intFromFloat(std.math.clamp(b_f, 0, 255));
+            pixels[y * width + x] = .{ .r = r, .g = g, .b = b, .a = 255 };
+        }
+    }
+
+    // Удалить старую текстуру
+    if (self.texture) |tex| {
+        dvui.Texture.destroyLater(tex);
+    }
+
+    // Создать новую текстуру из пиксельных данных
+    self.texture = try dvui.textureCreate(pixels, width, height, .nearest);
+}
+
+/// Заполнить canvas случайным градиентом
+pub fn fillRandomGradient(self: *Canvas) !void {
+    // Сгенерировать случайные цвета градиента
+    var prng = std.Random.DefaultPrng.init(@intCast(std.time.microTimestamp()));
+    const random = prng.random();
+    self.gradient_start = Color.PMA{ .r = random.int(u8), .g = random.int(u8), .b = random.int(u8), .a = 255 };
+    self.gradient_end = Color.PMA{ .r = random.int(u8), .g = random.int(u8), .b = random.int(u8), .a = 255 };
+
+    try self.redrawGradient();
+}
+
+pub fn addZoom(self: *Canvas, value: f32) void {
+    self.zoom += value;
+    self.zoom = @max(self.zoom, 0.01);
+}
+
+pub fn getScaledImageSize(self: Canvas) ImageRect {
+    return .{
+        .x = @intFromFloat(self.pos.x),
+        .y = @intFromFloat(self.pos.y),
+        .w = @intFromFloat(self.size.w * self.zoom),
+        .h = @intFromFloat(self.size.h * self.zoom),
+    };
+}
+
+/// Обновить видимую часть изображения (в пикселях холста) и сохранить в `visible_rect`.
+///
+/// `viewport` и `scroll_offset` ожидаются в *physical* пикселях (т.е. уже умноженные на windowNaturalScale).
+///
+/// После обновления (или если текстуры ещё нет) перерисовывает текстуру, чтобы она содержала только видимую часть.
+pub fn updateVisibleImageRect(self: *Canvas, viewport: dvui.Rect, scroll_offset: dvui.Point) !void {
+    const next = computeVisibleImageRect(self.*, viewport, scroll_offset);
+    var changed = false;
+    if (self.visible_rect) |vis| {
+        changed |= next.x != vis.x or next.y != vis.y or next.w != vis.w or next.h != vis.h;
+    }
+    self.visible_rect = next;
+    if (changed or self.texture == null) {
+        try self.redrawGradient();
+    }
+}
+
+fn computeVisibleImageRect(self: Canvas, viewport: dvui.Rect, scroll_offset: dvui.Point) ImageRect {
+    const image_rect = self.getScaledImageSize();
+
+    const img_w_f: f32 = @floatFromInt(image_rect.w);
+    const img_h_f: f32 = @floatFromInt(image_rect.h);
+
+    const view_left: f32 = scroll_offset.x;
+    const view_top: f32 = scroll_offset.y;
+    const view_right: f32 = scroll_offset.x + viewport.w;
+    const view_bottom: f32 = scroll_offset.y + viewport.h;
+
+    const img_left: f32 = @floatFromInt(image_rect.x);
+    const img_top: f32 = @floatFromInt(image_rect.y);
+    const img_right: f32 = img_left + img_w_f;
+    const img_bottom: f32 = img_top + img_h_f;
+
+    const inter_left: f32 = @max(view_left, img_left);
+    const inter_top: f32 = @max(view_top, img_top);
+    const inter_right: f32 = @min(view_right, img_right);
+    const inter_bottom: f32 = @min(view_bottom, img_bottom);
+
+    if (inter_right <= inter_left or inter_bottom <= inter_top) {
+        if (builtin.mode == .Debug) {
+            std.debug.print("  -> no intersection, return empty\n", .{});
+        }
+        return .{ .x = 0, .y = 0, .w = 0, .h = 0 };
+    }
+
+    // Переводим из координат контента в локальные координаты картинки
+    const local_x0: f32 = inter_left - img_left;
+    const local_y0: f32 = inter_top - img_top;
+    const local_x1: f32 = inter_right - img_left;
+    const local_y1: f32 = inter_bottom - img_top;
+
+    // Консервативно округляем до пикселей: начало вниз (floor), конец вверх (ceil)
+    const x0_u32: u32 = floatToClampedU32(@floor(local_x0), image_rect.w);
+    const y0_u32: u32 = floatToClampedU32(@floor(local_y0), image_rect.h);
+    const x1_u32: u32 = floatToClampedU32(@ceil(local_x1), image_rect.w);
+    const y1_u32: u32 = floatToClampedU32(@ceil(local_y1), image_rect.h);
+
+    const out: ImageRect = .{
+        .x = x0_u32,
+        .y = y0_u32,
+        .w = if (x1_u32 > x0_u32) x1_u32 - x0_u32 else 0,
+        .h = if (y1_u32 > y0_u32) y1_u32 - y0_u32 else 0,
+    };
+
+    return out;
+}
+
+fn floatToClampedU32(value: f32, max_inclusive: u32) u32 {
+    if (max_inclusive == 0) return 0;
+    if (value <= 0) return 0;
+    const max_f: f32 = @floatFromInt(max_inclusive);
+    if (value >= max_f) return max_inclusive;
+    return @intFromFloat(value);
+}
+
+/// Отобразить canvas в UI
+pub fn render(self: Canvas, rect: dvui.RectScale) !void {
+    if (self.texture) |texture| {
+        try dvui.renderTexture(texture, rect, .{});
+    }
+}

src/WindowContext.zig

@@ -1,88 +1,19 @@
 const std = @import("std");
 const dvui = @import("dvui");
-const Color = dvui.Color;
+const Canvas = @import("Canvas.zig");
 
 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 },
-},
+canvas: Canvas,
 
 pub fn init(allocator: std.mem.Allocator) WindowContext {
     return .{
         .allocator = allocator,
+        .canvas = Canvas.init(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);
-    }
+    self.canvas.deinit();
 }

src/main.zig

@@ -70,6 +70,9 @@ pub fn main() !void {
 }
 
 fn gui_frame(ctx: *WindowContext) bool {
+    const canvas = &ctx.canvas;
+    const ctrl: bool = dvui.currentWindow().modifiers.control();
+
     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;
@@ -87,11 +90,13 @@ fn gui_frame(ctx: *WindowContext) bool {
     {
         dvui.label(@src(), "Tools", .{}, .{});
         if (dvui.button(@src(), "Fill Random Color", .{}, .{})) {
-            ctx.fillRandomColor() catch |err| {
+            canvas.fillRandomGradient() catch |err| {
                 std.debug.print("Error filling canvas: {}\n", .{err});
             };
-            ctx.canvas_pos = .{ .x = 400, .y = 400 };
+            canvas.pos = .{ .x = 400, .y = 400 };
+            canvas.zoom = dvui.windowNaturalScale();
         }
+        if (dvui.checkbox(@src(), &canvas.native_scaling, "Scaling", .{})) {}
     }
     left_panel.deinit();
 
@@ -102,7 +107,7 @@ fn gui_frame(ctx: *WindowContext) bool {
         .{ .expand = .both, .padding = dvui.Rect.all(12), .background = true },
     );
     {
-        const fill_color = Color.white.opacity(0.5);
+        const fill_color = Color.black.opacity(0.25);
         var right_panel = dvui.box(
             @src(),
             .{ .dir = .vertical },
@@ -117,41 +122,99 @@ fn gui_frame(ctx: *WindowContext) bool {
         {
             var textured = dvui_ext.texturedBox(right_panel.data().contentRectScale(), dvui.Rect.all(20));
             {
-                var canvas_box = dvui.box(
+                var overlay = dvui.overlay(
                     @src(),
-                    .{ .dir = .vertical },
                     .{ .expand = .both },
                 );
                 {
-                    dvui.label(@src(), "Canvas", .{}, .{ .gravity_x = 0.5, .gravity_y = 0.0 });
-
                     var scroll = dvui.scrollArea(
                         @src(),
                         .{
-                            .scroll_info = &ctx.canvas_scroll,
+                            .scroll_info = &canvas.scroll,
                             .vertical_bar = .auto,
                             .horizontal_bar = .auto,
                         },
-                        .{ .expand = .both, .background = false },
+                        .{
+                            .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),
+                        const natural_scale = if (canvas.native_scaling) 1 else dvui.windowNaturalScale();
+                        const img_size = canvas.getScaledImageSize();
+
+                        // Получить viewport и scroll offset
+                        const viewport_rect = scroll.data().contentRect();
+                        const scroll_current = dvui.Point{ .x = canvas.scroll.viewport.x, .y = canvas.scroll.viewport.y };
+
+                        // viewport_rect/scroll_current — в natural единицах.
+                        // Для расчёта видимой области в пикселях изображения переводим в physical.
+                        const viewport_px = dvui.Rect{
+                            .x = viewport_rect.x * natural_scale,
+                            .y = viewport_rect.y * natural_scale,
+                            .w = viewport_rect.w * natural_scale,
+                            .h = viewport_rect.h * natural_scale,
+                        };
+                        const scroll_px = dvui.Point{
+                            .x = scroll_current.x * natural_scale,
+                            .y = scroll_current.y * natural_scale,
+                        };
+
+                        canvas.updateVisibleImageRect(viewport_px, scroll_px) catch |err| {
+                            std.debug.print("updateVisibleImageRect error: {}\n", .{err});
+                        };
+
+                        if (canvas.texture) |tex| {
+                            _ = dvui.image(
+                                @src(),
+                                .{ .source = .{ .texture = tex } },
+                                .{
+                                    .background = false,
+                                    .margin = .{
+                                        .x = @as(f32, @floatFromInt(img_size.x)) / natural_scale,
+                                        .y = @as(f32, @floatFromInt(img_size.y)) / natural_scale,
+                                        .w = @as(f32, @floatFromInt(img_size.x)) / natural_scale,
+                                        .h = @as(f32, @floatFromInt(img_size.y)) / natural_scale,
                                     },
-                            });
+                                    .min_size_content = .{
+                                        .w = @as(f32, @floatFromInt(img_size.w)) / natural_scale,
+                                        .h = @as(f32, @floatFromInt(img_size.h)) / natural_scale,
+                                    },
+                                    .max_size_content = .{
+                                        .w = @as(f32, @floatFromInt(img_size.w)) / natural_scale,
+                                        .h = @as(f32, @floatFromInt(img_size.h)) / natural_scale,
+                                    },
+                                },
+                            );
+                        }
+
+                        // Заблокировать события скролла, если нажат ctrl
+                        if (ctrl) {
+                            for (dvui.events()) |*e| {
+                                switch (e.evt) {
+                                    .mouse => |mouse| {
+                                        const action = mouse.action;
+                                        if (dvui.eventMatchSimple(e, scroll.data()) and (action == .wheel_x or action == .wheel_y)) {
+                                            switch (action) {
+                                                .wheel_y => |y| {
+                                                    canvas.addZoom(y / 1000);
+                                                    canvas.redrawGradient() catch {};
+                                                },
+                                                else => {},
+                                            }
+                                            e.handled = true;
+                                        }
+                                    },
+                                    else => {},
+                                }
+                            }
                         }
                     }
                     scroll.deinit();
+
+                    dvui.label(@src(), "Canvas", .{}, .{ .gravity_x = 0.5, .gravity_y = 0.0 });
                 }
-                canvas_box.deinit();
+                overlay.deinit();
             }
             textured.deinit();
         }