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

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "zig.testArgs": [
+        "build",
+        "test",
+        "-Dtest-filter=${filter}"
+    ]
+}

build.zig

@@ -34,7 +34,16 @@ pub fn build(b: *std.Build) void {
     }
 
     const exe_tests = b.addTest(.{
-        .root_module = exe.root_module,
+        .root_module = b.createModule(.{
+            .root_source_file = b.path("src/tests.zig"),
+            .target = target,
+            .optimize = optimize,
+
+            .imports = &.{
+                .{ .name = "dvui", .module = dvui_dep.module("dvui_sdl3") },
+                .{ .name = "sdl-backend", .module = dvui_dep.module("sdl3") },
+            },
+        }),
     });
 
     const run_exe_tests = b.addRunArtifact(exe_tests);

src/Canvas.zig

@@ -1,34 +1,35 @@
 const std = @import("std");
 const builtin = @import("builtin");
 const dvui = @import("dvui");
+const Document = @import("models/Document.zig");
+const RenderEngine = @import("render/RenderEngine.zig").RenderEngine;
+const ImageRect = @import("models/rasterization_models.zig").ImageRect;
 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 },
+document: ?*Document = null,
+render_engine: RenderEngine,
+_visible_rect: ?ImageRect = null,
+_zoom: f32 = 1,
 
-pub fn init(allocator: std.mem.Allocator) Canvas {
+pub fn init(allocator: std.mem.Allocator, engine: RenderEngine) Canvas {
-    return .{ .allocator = allocator };
+    return .{
+        .allocator = allocator,
+        .render_engine = engine,
+    };
 }
 
 pub fn deinit(self: *Canvas) void {
@@ -39,12 +40,10 @@ pub fn deinit(self: *Canvas) void {
 }
 
 /// Заполнить canvas градиентом
-pub fn redrawGradient(self: *Canvas) !void {
+pub fn redrawExample(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 };
+    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| {
@@ -54,68 +53,39 @@ pub fn redrawGradient(self: *Canvas) !void {
         return;
     }
 
-    const width: u32 = vis.w;
+    const new_texture = self.render_engine.example(.{ .w = full.w, .h = full.h }, vis) catch null;
-    const height: u32 = vis.h;
 
-    // Выделить буфер пиксельных данных
+    if (new_texture) |tex| {
-    const pixels = try self.allocator.alloc(Color.PMA, @as(usize, width) * height);
+        // Удалить старую текстуру
-    defer self.allocator.free(pixels);
+        if (self.texture) |old_tex| {
-
+            dvui.Texture.destroyLater(old_tex);
-    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 };
         }
-    }
 
-    // Удалить старую текстуру
+        self.texture = tex;
-    if (self.texture) |tex| {
-        dvui.Texture.destroyLater(tex);
     }
-
-    // Создать новую текстуру из пиксельных данных
-    self.texture = try dvui.textureCreate(pixels, width, height, .nearest);
 }
 
-/// Заполнить canvas случайным градиентом
+// Ресетнуть example изображение в renderEngine
-pub fn fillRandomGradient(self: *Canvas) !void {
+pub fn exampleReset(self: *Canvas) !void {
-    // Сгенерировать случайные цвета градиента
+    self.render_engine.exampleReset();
-    var prng = std.Random.DefaultPrng.init(@intCast(std.time.microTimestamp()));
+    try self.redrawExample();
-    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 setZoom(self: *Canvas, value: f32) void {
+    self._zoom = @max(value, 0.01);
 }
 
 pub fn addZoom(self: *Canvas, value: f32) void {
-    self.zoom += value;
+    self._zoom += value;
-    self.zoom = @max(self.zoom, 0.01);
+    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),
+        .w = @intFromFloat(self.size.w * self._zoom),
-        .h = @intFromFloat(self.size.h * self.zoom),
+        .h = @intFromFloat(self.size.h * self._zoom),
     };
 }
 
@@ -127,76 +97,39 @@ pub fn getScaledImageSize(self: Canvas) ImageRect {
 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| {
+    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;
+    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.redrawGradient();
+        try self.redrawExample();
     }
 }
 
 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_w: u32 = image_rect.w;
-    const img_h_f: f32 = @floatFromInt(image_rect.h);
+    const img_h: u32 = image_rect.h;
 
-    const view_left: f32 = scroll_offset.x;
+    // Видимый размер всегда равен размеру viewport, но не больше холста
-    const view_top: f32 = scroll_offset.y;
+    const vis_w: u32 = @min(@as(u32, @intFromFloat(viewport.w)), img_w);
-    const view_right: f32 = scroll_offset.x + viewport.w;
+    const vis_h: u32 = @min(@as(u32, @intFromFloat(viewport.h)), img_h);
-    const view_bottom: f32 = scroll_offset.y + viewport.h;
 
-    const img_left: f32 = @floatFromInt(image_rect.x);
+    // Вычисляем x и y на основе scroll_offset, clamped чтобы не выходить за границы
-    const img_top: f32 = @floatFromInt(image_rect.y);
+    const raw_x: i64 = @intFromFloat(scroll_offset.x - @as(f32, @floatFromInt(image_rect.x)));
-    const img_right: f32 = img_left + img_w_f;
+    const raw_y: i64 = @intFromFloat(scroll_offset.y - @as(f32, @floatFromInt(image_rect.y)));
-    const img_bottom: f32 = img_top + img_h_f;
 
-    const inter_left: f32 = @max(view_left, img_left);
+    const vis_x: u32 = @intCast(std.math.clamp(raw_x, 0, @as(i64, img_w) - @as(i64, vis_w)));
-    const inter_top: f32 = @max(view_top, img_top);
+    const vis_y: u32 = @intCast(std.math.clamp(raw_y, 0, @as(i64, img_h) - @as(i64, vis_h)));
-    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) {
+    return ImageRect{
-        if (builtin.mode == .Debug) {
+        .x = vis_x,
-            std.debug.print("  -> no intersection, return empty\n", .{});
+        .y = vis_y,
-        }
+        .w = vis_w,
-        return .{ .x = 0, .y = 0, .w = 0, .h = 0 };
+        .h = vis_h,
-    }
-
-    // Переводим из координат контента в локальные координаты картинки
-    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,19 +1,30 @@
 const std = @import("std");
-const dvui = @import("dvui");
 const Canvas = @import("Canvas.zig");
+const CpuRenderEngine = @import("render/CpuRenderEngine.zig");
 
 const WindowContext = @This();
 
 allocator: std.mem.Allocator,
 canvas: Canvas,
+cpu_render: *CpuRenderEngine,
+frame_index: u64,
 
-pub fn init(allocator: std.mem.Allocator) WindowContext {
+pub fn init(allocator: std.mem.Allocator) !WindowContext {
-    return .{
+    var self: WindowContext = undefined;
-        .allocator = allocator,
+    self.allocator = allocator;
-        .canvas = Canvas.init(allocator),
+
-    };
+    self.cpu_render = try allocator.create(CpuRenderEngine);
+    errdefer allocator.destroy(self.cpu_render);
+    self.cpu_render.* = CpuRenderEngine.init(allocator, .Squares);
+
+    self.canvas = Canvas.init(allocator, self.cpu_render.renderEngine());
+
+    self.frame_index = 0;
+
+    return self;
 }
 
 pub fn deinit(self: *WindowContext) void {
     self.canvas.deinit();
+    self.allocator.destroy(self.cpu_render);
 }

src/main.zig

@@ -1,9 +1,10 @@
 const std = @import("std");
 const builtin = @import("builtin");
 const dvui = @import("dvui");
-const dvui_ext = @import("./ui/dvui_ext.zig");
+const dvui_ext = @import("ui/dvui_ext.zig");
 const SDLBackend = @import("sdl-backend");
-const Document = @import("Document.zig");
+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;
@@ -29,11 +30,10 @@ pub fn main() !void {
     });
     defer win.deinit();
 
-    var ctx = WindowContext.init(allocator);
+    var ctx = try WindowContext.init(allocator);
     defer ctx.deinit();
 
     var interrupted = false;
-
     main_loop: while (true) {
         // beginWait coordinates with waitTime below to run frames only when needed
         const nstime = win.beginWait(interrupted);
@@ -89,14 +89,21 @@ fn gui_frame(ctx: *WindowContext) bool {
     var left_panel = dvui.box(@src(), .{ .dir = .vertical }, .{ .expand = .vertical, .min_size_content = .{ .w = 200 }, .background = true });
     {
         dvui.label(@src(), "Tools", .{}, .{});
-        if (dvui.button(@src(), "Fill Random Color", .{}, .{})) {
+        if (dvui.button(@src(), "Fill Random Color", .{}, .{}) or ctx.frame_index == 0) {
-            canvas.fillRandomGradient() catch |err| {
+            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 };
-            canvas.zoom = dvui.windowNaturalScale();
         }
         if (dvui.checkbox(@src(), &canvas.native_scaling, "Scaling", .{})) {}
+        if (dvui.button(@src(), if (ctx.cpu_render.type == .Gradient) "Gradient" else "Squares", .{}, .{})) {
+            if (ctx.cpu_render.type == .Gradient) {
+                ctx.cpu_render.type = .Squares;
+            } else {
+                ctx.cpu_render.type = .Gradient;
+            }
+            canvas.redrawExample() catch {};
+        }
     }
     left_panel.deinit();
 
@@ -164,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) {
@@ -198,7 +223,7 @@ fn gui_frame(ctx: *WindowContext) bool {
                                             switch (action) {
                                                 .wheel_y => |y| {
                                                     canvas.addZoom(y / 1000);
-                                                    canvas.redrawGradient() catch {};
+                                                    canvas.redrawExample() catch {};
                                                 },
                                                 else => {},
                                             }
@@ -222,5 +247,7 @@ fn gui_frame(ctx: *WindowContext) bool {
     }
     back.deinit();
 
+    ctx.frame_index += 1;
+
     return true;
 }

src/models/rasterization_models.zig

@@ -0,0 +1,11 @@
+pub const ImageRect = struct {
+    x: u32,
+    y: u32,
+    w: u32,
+    h: u32,
+};
+
+pub const ImageSize = struct {
+    w: u32,
+    h: u32,
+};

src/render/CpuRenderEngine.zig

@@ -0,0 +1,169 @@
+const std = @import("std");
+const builtin = @import("builtin");
+const dvui = @import("dvui");
+const RenderEngine = @import("RenderEngine.zig").RenderEngine;
+const rast_models = @import("../models/rasterization_models.zig");
+const ImageSize = rast_models.ImageSize;
+const ImageRect = rast_models.ImageRect;
+const Allocator = std.mem.Allocator;
+const Color = dvui.Color;
+
+const CpuRenderEngine = @This();
+const Type = enum {
+    Gradient,
+    Squares,
+};
+
+type: Type,
+_allocator: Allocator,
+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: Allocator, render_type: Type) CpuRenderEngine {
+    return .{
+        ._allocator = allocator,
+        .type = render_type,
+    };
+}
+
+pub fn exampleReset(self: *CpuRenderEngine) 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 };
+}
+
+fn renderGradient(self: CpuRenderEngine, pixels: []Color.PMA, width: u32, height: u32, full_w: u32, full_h: u32, visible_rect: ImageRect) void {
+    var y: u32 = 0;
+    while (y < height) : (y += 1) {
+        var x: u32 = 0;
+        while (x < width) : (x += 1) {
+            const gx: u32 = visible_rect.x + x;
+            const gy: u32 = visible_rect.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 };
+        }
+    }
+}
+
+fn renderSquares(self: CpuRenderEngine, pixels: []Color.PMA, canvas_size: ImageSize, visible_rect: ImageRect) void {
+    _ = self;
+
+    const squares_num = 5;
+    var thikness: u32 = @intFromFloat(@as(f32, @floatFromInt(canvas_size.w + canvas_size.h)) / 2 * 0.03);
+    if (thikness == 0) thikness = 1;
+
+    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) : (y += 1) {
+        const canvas_y = y + visible_rect.y;
+        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;
+
+            // Check if in vertical line
+            var in_vertical_line = false;
+            for (x_pos) |pos| {
+                if (canvas_x >= pos and canvas_x < pos + thikness) {
+                    in_vertical_line = true;
+                    break;
+                }
+            }
+
+            // 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 };
+                }
+            }
+        }
+    }
+}
+
+pub fn example(self: CpuRenderEngine, canvas_size: ImageSize, visible_rect: ImageRect) !?dvui.Texture {
+    const full_w = canvas_size.w;
+    const full_h = canvas_size.h;
+
+    const width = visible_rect.w;
+    const height = visible_rect.h;
+
+    // Выделить буфер пиксельных данных
+    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 });
+
+    switch (self.type) {
+        .Gradient => self.renderGradient(pixels, width, height, full_w, full_h, visible_rect),
+        .Squares => self.renderSquares(pixels, canvas_size, visible_rect),
+    }
+
+    return try dvui.textureCreate(pixels, width, height, .nearest);
+}
+
+pub fn renderEngine(self: *CpuRenderEngine) RenderEngine {
+    return .{ .cpu = self };
+}

src/render/IRenderEngine.zig

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

src/render/RenderEngine.zig

@@ -0,0 +1,20 @@
+// Интерфейс для рендеринга документа
+const dvui = @import("dvui");
+const CpuRenderEngine = @import("CpuRenderEngine.zig");
+const rast_models = @import("../models/rasterization_models.zig");
+
+pub const RenderEngine = union(enum) {
+    cpu: *CpuRenderEngine,
+
+    pub fn exampleReset(self: RenderEngine) void {
+        switch (self) {
+            .cpu => |cpu_r| cpu_r.exampleReset(),
+        }
+    }
+
+    pub fn example(self: RenderEngine, canvas_size: rast_models.ImageSize, visible_rect: rast_models.ImageRect) !?dvui.Texture {
+        return switch (self) {
+            .cpu => |cpu_r| cpu_r.example(canvas_size, visible_rect),
+        };
+    }
+};

src/tests.zig

@@ -0,0 +1,6 @@
+// Test root for `zig build test`.
+// Import modules here to ensure their `test` blocks are discovered.
+
+test "module test discovery" {
+    _ = @import("render/CpuRenderEngine.zig");
+}