ПРавильные прямоугольники

src/Canvas.zig

@@ -101,6 +101,9 @@ pub fn updateVisibleImageRect(self: *Canvas, viewport: dvui.Rect, scroll_offset:
         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) {
+        std.debug.print("Visible Image Rect: {{ x: {}, y: {}, w: {}, h: {} }}\n", .{ next.x, next.y, next.w, next.h });
+    }
     if (changed or self.texture == null) {
         try self.redrawExample();
     }
@@ -123,7 +126,7 @@ fn computeVisibleImageRect(self: Canvas, viewport: dvui.Rect, scroll_offset: dvu
     const vis_x: u32 = @intCast(std.math.clamp(raw_x, 0, @as(i64, img_w) - @as(i64, vis_w)));
     const vis_y: u32 = @intCast(std.math.clamp(raw_y, 0, @as(i64, img_h) - @as(i64, vis_h)));
 
-    return .{
+    return ImageRect{
         .x = vis_x,
         .y = vis_y,
         .w = vis_w,

src/main.zig

@@ -4,6 +4,7 @@ const dvui = @import("dvui");
 const dvui_ext = @import("ui/dvui_ext.zig");
 const SDLBackend = @import("sdl-backend");
 const Document = @import("models/Document.zig");
+const ImageRect = @import("models/rasterization_models.zig").ImageRect;
 const WindowContext = @import("WindowContext.zig");
 const sdl_c = SDLBackend.c;
 const Allocator = std.mem.Allocator;
@@ -90,10 +91,9 @@ fn gui_frame(ctx: *WindowContext) bool {
         dvui.label(@src(), "Tools", .{}, .{});
         if (dvui.button(@src(), "Fill Random Color", .{}, .{}) or ctx.frame_index == 0) {
             canvas.exampleReset() catch |err| {
-                std.debug.print("Error filling canvas: {}\n", .{err});
+                std.debug.print("Error reset example: {}\n", .{err});
             };
             canvas.pos = .{ .x = 400, .y = 400 };
-            //ctx.canvas.setZoom(dvui.windowNaturalScale());
         }
         if (dvui.checkbox(@src(), &canvas.native_scaling, "Scaling", .{})) {}
         if (dvui.button(@src(), if (ctx.cpu_render.type == .Gradient) "Gradient" else "Squares", .{}, .{})) {
@@ -171,29 +171,47 @@ fn gui_frame(ctx: *WindowContext) bool {
                             std.debug.print("updateVisibleImageRect error: {}\n", .{err});
                         };
 
-                        if (canvas.texture) |tex| {
+                        // `canvas.texture` contains ONLY the visible part.
-                            _ = dvui.image(
+                        // If we render it inside a widget sized as the full image, dvui will stretch it.
-                                @src(),
+                        // Instead: create a scroll content surface sized like the full image, then place
-                                .{ .source = .{ .texture = tex } },
+                        // the visible texture at the correct offset at 1:1.
-                                .{
+                        const content_w_px: u32 = img_size.x + img_size.w;
-                                    .background = false,
+                        const content_h_px: u32 = img_size.y + img_size.h;
-                                    .margin = .{
+                        const content_w = @as(f32, @floatFromInt(content_w_px)) / natural_scale;
-                                        .x = @as(f32, @floatFromInt(img_size.x)) / natural_scale,
+                        const content_h = @as(f32, @floatFromInt(content_h_px)) / natural_scale;
-                                        .y = @as(f32, @floatFromInt(img_size.y)) / natural_scale,
+
-                                        .w = @as(f32, @floatFromInt(img_size.x)) / natural_scale,
+                        var canvas_layer = dvui.overlay(
-                                        .h = @as(f32, @floatFromInt(img_size.y)) / natural_scale,
+                            @src(),
+                            .{ .min_size_content = .{ .w = content_w, .h = content_h }, .background = false },
+                        );
+                        {
+                            if (canvas.texture) |tex| {
+                                const vis = canvas._visible_rect orelse ImageRect{ .x = 0, .y = 0, .w = 0, .h = 0 };
+                                const left = @as(f32, @floatFromInt(img_size.x + vis.x)) / natural_scale;
+                                const top = @as(f32, @floatFromInt(img_size.y + vis.y)) / natural_scale;
+
+                                _ = dvui.image(
+                                    @src(),
+                                    .{ .source = .{ .texture = tex } },
+                                    .{
+                                        .background = false,
+                                        .expand = .none,
+                                        .gravity_x = 0.0,
+                                        .gravity_y = 0.0,
+                                        .margin = .{ .x = left, .y = top, .w = canvas.pos.x, .h = canvas.pos.y },
+                                        .min_size_content = .{
+                                            .w = @as(f32, @floatFromInt(vis.w)) / natural_scale,
+                                            .h = @as(f32, @floatFromInt(vis.h)) / natural_scale,
+                                        },
+                                        .max_size_content = .{
+                                            .w = @as(f32, @floatFromInt(vis.w)) / natural_scale,
+                                            .h = @as(f32, @floatFromInt(vis.h)) / 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,
-                                    },
-                                },
-                            );
                         }
+                        canvas_layer.deinit();
 
                         // Заблокировать события скролла, если нажат ctrl
                         if (ctrl) {

src/render/CpuRenderEngine.zig

@@ -64,26 +64,82 @@ fn renderSquares(self: CpuRenderEngine, pixels: []Color.PMA, canvas_size: ImageS
     _ = self;
 
     const squares_num = 5;
-    const thikness: u32 = @intFromFloat(@as(f32, @floatFromInt(canvas_size.w + canvas_size.h)) / 2 * 0.03);
+    var thikness: u32 = @intFromFloat(@as(f32, @floatFromInt(canvas_size.w + canvas_size.h)) / 2 * 0.03);
-    const squares_sum_height = canvas_size.h - thikness * (squares_num + 1);
+    if (thikness == 0) thikness = 1;
-    const square_height = squares_sum_height / squares_num;
+
+    const squares_sum_w = canvas_size.w - thikness * (squares_num + 1);
+    const base_w = squares_sum_w / squares_num;
+    const extra_w = squares_sum_w % squares_num;
+    const squares_sum_h = canvas_size.h - thikness * (squares_num + 1);
+    const base_h = squares_sum_h / squares_num;
+    const extra_h = squares_sum_h % squares_num;
+
+    var x_pos: [6]u32 = undefined;
+    x_pos[0] = 0;
+    for (1..squares_num + 1) |i| {
+        const w = base_w + if (i - 1 < extra_w) @as(u32, 1) else 0;
+        x_pos[i] = x_pos[i - 1] + thikness + w;
+    }
+
+    var y_pos: [6]u32 = undefined;
+    y_pos[0] = 0;
+    for (1..squares_num + 1) |i| {
+        const h = base_h + if (i - 1 < extra_h) @as(u32, 1) else 0;
+        y_pos[i] = y_pos[i - 1] + thikness + h;
+    }
 
     var y: u32 = 0;
-    while (y < visible_rect.h) {
+    while (y < visible_rect.h) : (y += 1) {
         const canvas_y = y + visible_rect.y;
-        var start_line_index = canvas_y / square_height;
+        if (canvas_y >= canvas_size.h) continue;
+        var x: u32 = 0;
+        while (x < visible_rect.w) : (x += 1) {
+            const canvas_x = x + visible_rect.x;
+            if (canvas_x >= canvas_size.w) continue;
 
-        start_line_index = start_line_index * square_height + thikness * (if (start_line_index > 0) start_line_index - 1 else 0);
+            // Check if in vertical line
-        const draw_line = canvas_y < start_line_index + thikness and canvas_y >= start_line_index;
+            var in_vertical_line = false;
-        if (draw_line) {
+            for (x_pos) |pos| {
-            var x: u32 = 0;
+                if (canvas_x >= pos and canvas_x < pos + thikness) {
-            while (x < visible_rect.w) {
+                    in_vertical_line = true;
-                pixels[y * visible_rect.w + x] = .{ .r = 255, .b = 0, .g = 0, .a = 255 };
+                    break;
+                }
+            }
 
-                x += 1;
+            // Check if in horizontal line
+            var in_horizontal_line = false;
+            for (y_pos) |pos| {
+                if (canvas_y >= pos and canvas_y < pos + thikness) {
+                    in_horizontal_line = true;
+                    break;
+                }
+            }
+
+            if (in_vertical_line or in_horizontal_line) {
+                pixels[y * visible_rect.w + x] = .{ .r = 255, .g = 0, .b = 0, .a = 255 };
+            } else {
+                // Find square
+                var square_x: u32 = 0;
+                for (0..squares_num) |i| {
+                    if (canvas_x >= x_pos[i] + thikness and canvas_x < x_pos[i + 1]) {
+                        square_x = @intCast(i);
+                        break;
+                    }
+                }
+                var square_y: u32 = 0;
+                for (0..squares_num) |i| {
+                    if (canvas_y >= y_pos[i] + thikness and canvas_y < y_pos[i + 1]) {
+                        square_y = @intCast(i);
+                        break;
+                    }
+                }
+                if (square_x % 2 == square_y % 2) {
+                    pixels[y * visible_rect.w + x] = .{ .r = 255, .g = 255, .b = 255, .a = 255 };
+                } else {
+                    pixels[y * visible_rect.w + x] = .{ .r = 0, .g = 0, .b = 0, .a = 255 };
+                }
             }
         }
-        y += 1;
     }
 }
 
@@ -98,7 +154,7 @@ pub fn example(self: CpuRenderEngine, canvas_size: ImageSize, visible_rect: Imag
     const pixels = try self._allocator.alloc(Color.PMA, @as(usize, width) * height);
     defer self._allocator.free(pixels);
 
-    std.debug.print("w={any}, fw={any};\th={any}, fh={any}\n", .{ width, full_w, height, full_h });
+    // std.debug.print("w={any}, fw={any};\th={any}, fh={any}\n", .{ width, full_w, height, full_h });
 
     switch (self.type) {
         .Gradient => self.renderGradient(pixels, width, height, full_w, full_h, visible_rect),