Поправлена панель настроек

Переименовал основные геометрические модели (Point, Size, Rect, Scale, Radii), явно разделив их на типы с плавающей точкой (_f) и целочисленные (_i). Обновил использование этих типов во всем проекте для улучшения типобезопасности и ясности.

Ввел новое свойство thickness для объектов и реализовал его применение при отрисовке линий и ломаных. Добавил Point2_i для целочисленных координат буфера в конвейере отрисовки.

.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/settings.json

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

.vscode/tasks.json

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

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

@@ -0,0 +1,180 @@
+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 basic_models = @import("models/basic_models.zig");
+const Rect_i = basic_models.Rect_i;
+const Size_i = basic_models.Size_i;
+const Point2_f = @import("models/basic_models.zig").Point2_f;
+const Color = dvui.Color;
+
+const Canvas = @This();
+
+allocator: std.mem.Allocator,
+document: *Document,
+render_engine: RenderEngine,
+texture: ?dvui.Texture = null,
+pos: dvui.Point = dvui.Point{ .x = 400, .y = 400 },
+scroll: dvui.ScrollInfo = .{
+    .vertical = .auto,
+    .horizontal = .auto,
+},
+native_scaling: bool = true,
+redraw_throttle_ms: u32 = 50,
+_visible_rect: ?Rect_i = null,
+_zoom: f32 = 1,
+_redraw_pending: bool = false,
+_last_redraw_time_ms: i64 = 0,
+cursor_document_point: ?Point2_f = null,
+/// true — рисовать документ (render), false — пример (gradient/squares).
+draw_document: bool = true,
+
+pub fn init(allocator: std.mem.Allocator, document: *Document, engine: RenderEngine) Canvas {
+    return .{
+        .allocator = allocator,
+        .document = document,
+        .render_engine = engine,
+    };
+}
+
+pub fn deinit(self: *Canvas) void {
+    if (self.texture) |texture| {
+        dvui.Texture.destroyLater(texture);
+        self.texture = null;
+    }
+}
+
+fn redraw(self: *Canvas) !void {
+    const full = self.getZoomedImageSize();
+
+    const vis: Rect_i = self._visible_rect orelse Rect_i{ .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 canvas_size: Size_i = .{ .w = full.w, .h = full.h };
+    const new_texture = if (self.draw_document)
+        self.render_engine.render(self.document, canvas_size, vis) catch null
+    else
+        self.render_engine.example(canvas_size, vis) catch null;
+
+    if (new_texture) |tex| {
+        if (self.texture) |old_tex| {
+            dvui.Texture.destroyLater(old_tex);
+        }
+
+        self.texture = tex;
+    }
+    self._last_redraw_time_ms = std.time.milliTimestamp();
+}
+
+pub fn exampleReset(self: *Canvas) !void {
+    self.render_engine.exampleReset();
+    try self.redraw();
+}
+
+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 = @max(self._zoom, 0.01);
+}
+
+pub fn getZoom(self: Canvas) f32 {
+    return self._zoom;
+}
+
+pub fn requestRedraw(self: *Canvas) void {
+    self._redraw_pending = true;
+}
+
+pub fn processPendingRedraw(self: *Canvas) !void {
+    if (!self._redraw_pending) return;
+    if (self.redraw_throttle_ms == 0) {
+        self._redraw_pending = false;
+        try self.redraw();
+        return;
+    }
+    const now_ms = std.time.milliTimestamp();
+    const elapsed: i64 = if (self._last_redraw_time_ms == 0) self.redraw_throttle_ms else now_ms - self._last_redraw_time_ms;
+    if (elapsed < @as(i64, @intCast(self.redraw_throttle_ms))) return;
+    self._redraw_pending = false;
+    try self.redraw();
+}
+
+pub fn getZoomedImageSize(self: Canvas) Rect_i {
+    const doc = self.document;
+    return .{
+        .x = @intFromFloat(self.pos.x),
+        .y = @intFromFloat(self.pos.y),
+        .w = @intFromFloat(doc.size.w * self._zoom),
+        .h = @intFromFloat(doc.size.h * self._zoom),
+    };
+}
+
+/// Возвращает координаты точки контента в координатах документа. Всегда возвращает точку,
+/// даже если она за пределами документа
+pub fn contentPointToDocument(self: Canvas, content_point: dvui.Point, natural_scale: f32) Point2_f {
+    const img = self.getZoomedImageSize();
+    const px_x = content_point.x * natural_scale - @as(f32, @floatFromInt(img.x));
+    const px_y = content_point.y * natural_scale - @as(f32, @floatFromInt(img.y));
+    return .{
+        .x = px_x / self._zoom,
+        .y = px_y / self._zoom,
+    };
+}
+
+/// Возвращает true, если точка контента лежит внутри холста (документа).
+pub fn isContentPointOnDocument(self: Canvas, content_point: dvui.Point, natural_scale: f32) bool {
+    const img = self.getZoomedImageSize();
+    const left_n = @as(f32, @floatFromInt(img.x)) / natural_scale;
+    const top_n = @as(f32, @floatFromInt(img.y)) / natural_scale;
+    const right_n = @as(f32, @floatFromInt(img.x + img.w)) / natural_scale;
+    const bottom_n = @as(f32, @floatFromInt(img.y + img.h)) / natural_scale;
+    return content_point.x >= left_n and content_point.x < right_n and
+        content_point.y >= top_n and content_point.y < bottom_n;
+}
+
+pub fn updateVisibleImageRect(self: *Canvas, viewport: dvui.Rect, scroll_offset: dvui.Point) bool {
+    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) {
+        return true;
+    }
+    return false;
+}
+
+fn computeVisibleImageRect(self: Canvas, viewport: dvui.Rect, scroll_offset: dvui.Point) Rect_i {
+    const image_rect = self.getZoomedImageSize();
+
+    const img_w: u32 = image_rect.w;
+    const img_h: u32 = image_rect.h;
+
+    const vis_w: u32 = @min(@as(u32, @intFromFloat(viewport.w)), img_w);
+    const vis_h: u32 = @min(@as(u32, @intFromFloat(viewport.h)), img_h);
+
+    const raw_x: i64 = @intFromFloat(scroll_offset.x - @as(f32, @floatFromInt(image_rect.x)));
+    const raw_y: i64 = @intFromFloat(scroll_offset.y - @as(f32, @floatFromInt(image_rect.y)));
+
+    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 Rect_i{
+        .x = vis_x,
+        .y = vis_y,
+        .w = vis_w,
+        .h = vis_h,
+    };
+}

src/WindowContext.zig

@@ -0,0 +1,93 @@
+const std = @import("std");
+const Canvas = @import("Canvas.zig");
+const CpuRenderEngine = @import("render/CpuRenderEngine.zig");
+const RenderEngine = @import("render/RenderEngine.zig").RenderEngine;
+const Document = @import("models/Document.zig");
+const random_document = @import("models/random_document.zig");
+const basic_models = @import("models/basic_models.zig");
+
+const WindowContext = @This();
+
+pub const OpenDocument = struct {
+    document: Document,
+    cpu_render: CpuRenderEngine,
+    canvas: Canvas,
+
+    pub fn init(allocator: std.mem.Allocator, self: *OpenDocument) void {
+        const default_size = basic_models.Size_f{ .w = 800, .h = 600 };
+        self.document = Document.init(allocator, default_size);
+        self.cpu_render = CpuRenderEngine.init(allocator, .Squares);
+        self.canvas = Canvas.init(allocator, &self.document, (&self.cpu_render).renderEngine());
+    }
+
+    pub fn deinit(self: *OpenDocument) void {
+        self.document.deinit();
+        self.canvas.deinit();
+    }
+};
+
+allocator: std.mem.Allocator,
+frame_index: u64,
+documents: std.ArrayList(*OpenDocument),
+active_document_index: ?usize,
+
+pub fn init(allocator: std.mem.Allocator) !WindowContext {
+    const frame_index: u64 = 0;
+    const documents = std.ArrayList(*OpenDocument).empty;
+    const active_document_index: ?usize = null;
+    return .{
+        .allocator = allocator,
+        .frame_index = frame_index,
+        .documents = documents,
+        .active_document_index = active_document_index,
+    };
+}
+
+pub fn deinit(self: *WindowContext) void {
+    for (self.documents.items) |ptr| {
+        ptr.deinit();
+        self.allocator.destroy(ptr);
+    }
+    self.documents.deinit(self.allocator);
+}
+
+pub fn activeDocument(self: *WindowContext) ?*OpenDocument {
+    const i = self.active_document_index orelse return null;
+    if (i >= self.documents.items.len) return null;
+    return self.documents.items[i];
+}
+
+pub fn addNewDocument(self: *WindowContext) !void {
+    const ptr = try self.allocator.create(OpenDocument);
+    errdefer self.allocator.destroy(ptr);
+    OpenDocument.init(self.allocator, ptr);
+    try random_document.addRandomShapes(&ptr.document, std.crypto.random);
+    try self.documents.append(self.allocator, ptr);
+    self.active_document_index = self.documents.items.len - 1;
+}
+
+pub fn setActiveDocument(self: *WindowContext, index: usize) void {
+    if (index < self.documents.items.len) {
+        self.active_document_index = index;
+    }
+}
+
+pub fn closeDocument(self: *WindowContext, index: usize) void {
+    if (index >= self.documents.items.len) return;
+    const open_doc = self.documents.items[index];
+    open_doc.deinit();
+    self.allocator.destroy(open_doc);
+    _ = self.documents.orderedRemove(index);
+
+    if (self.active_document_index) |*active| {
+        if (index < active.*) {
+            active.* -= 1;
+        } else if (index == active.*) {
+            if (self.documents.items.len > 0) {
+                active.* = @min(index, self.documents.items.len - 1);
+            } else {
+                self.active_document_index = null;
+            }
+        }
+    }
+}

src/main.zig

@@ -1,215 +1,49 @@
 const std = @import("std");
-const builtin = @import("builtin");
 const dvui = @import("dvui");
 const SDLBackend = @import("sdl-backend");
-
+const WindowContext = @import("WindowContext.zig");
-const WindowContext = struct {
+const ui = @import("ui/frame.zig");
-    backend: SDLBackend,
-    window: dvui.Window,
-    title: [:0]u8,
-    id: usize,
-
-    fn deinit(self: *WindowContext, allocator: std.mem.Allocator, last_backend: bool) void {
-        self.window.deinit();
-
-        if (last_backend) {
-            self.backend.deinit();
-        } else {
-            destroyBackendKeepingSDL(&self.backend);
-        }
-
-        allocator.free(self.title);
-        self.* = undefined;
-    }
-};
 
 pub fn main() !void {
-    if (@import("builtin").os.tag == .windows) {
-        // on windows graphical apps have no console, so output goes to nowhere - attach it manually. related: https://github.com/ziglang/zig/issues/4196
-        dvui.Backend.Common.windowsAttachConsole() catch {};
-    }
-    SDLBackend.enableSDLLogging();
-    std.log.info("SDL version: {f}", .{SDLBackend.getSDLVersion()});
-
     var gpa = std.heap.GeneralPurposeAllocator(.{}){};
-    defer _ = gpa.deinit();
     const allocator = gpa.allocator();
 
-    var windows = try std.ArrayList(*WindowContext).initCapacity(allocator, 0);
+    var backend = try SDLBackend.initWindow(.{
-    defer {
-        for (windows.items, 0..) |ctx, i| {
-            const last = i + 1 == windows.items.len;
-            ctx.deinit(allocator, last);
-            allocator.destroy(ctx);
-        }
-        windows.deinit(allocator);
-    }
-
-    var next_window_id: usize = 1;
-    const first_ctx = try createWindow(allocator, next_window_id);
-    next_window_id += 1;
-    try windows.append(allocator, first_ctx);
-
-    var interrupted = false;
-
-    main_loop: while (true) {
-        if (windows.items.len == 0) break :main_loop;
-
-        const saw_events = try pumpEvents(&windows);
-
-        var min_wait_event_micros: u32 = std.math.maxInt(u32);
-        var idx: usize = 0;
-        while (idx < windows.items.len) {
-            const ctx = windows.items[idx];
-
-            // beginWait coordinates with waitTime below to run frames only when needed
-            const nstime = ctx.window.beginWait(interrupted);
-            // marks the beginning of a frame for dvui, can call dvui functions after this
-            try ctx.window.begin(nstime);
-
-            // if dvui widgets might not cover the whole window, then need to clear
-            // the previous frame's render
-            _ = SDLBackend.c.SDL_SetRenderDrawColor(ctx.backend.renderer, 0, 0, 0, 255);
-            _ = SDLBackend.c.SDL_RenderClear(ctx.backend.renderer);
-
-            const keep_open = try gui_frame(ctx, allocator, &windows, &next_window_id);
-            if (!keep_open) {
-                closeWindow(&windows, allocator, idx);
-                continue;
-            }
-
-            // marks end of dvui frame, don't call dvui functions after this
-            // - sends all dvui stuff to backend for rendering, must be called before renderPresent()
-            const end_micros = try ctx.window.end(.{});
-
-            // cursor management
-            try ctx.backend.setCursor(ctx.window.cursorRequested());
-            try ctx.backend.textInputRect(ctx.window.textInputRequested());
-
-            // render frame to OS
-            try ctx.backend.renderPresent();
-
-            // waitTime and beginWait combine to achieve variable framerates
-            const wait_event_micros = ctx.window.waitTime(end_micros);
-            min_wait_event_micros = @min(min_wait_event_micros, wait_event_micros);
-
-            idx += 1;
-        }
-
-        if (windows.items.len == 0) break :main_loop;
-
-        interrupted = saw_events or try windows.items[0].backend.waitEventTimeout(min_wait_event_micros);
-    }
-}
-
-fn createWindow(allocator: std.mem.Allocator, id: usize) !*WindowContext {
-    var ctx = try allocator.create(WindowContext);
-    errdefer allocator.destroy(ctx);
-
-    ctx.id = id;
-
-    const title_bytes = try std.fmt.allocPrint(allocator, "My DVUI App #{d}", .{id});
-    defer allocator.free(title_bytes);
-
-    ctx.title = try allocator.allocSentinel(u8, title_bytes.len, 0);
-    @memcpy(ctx.title[0..title_bytes.len], title_bytes);
-
-    ctx.backend = try SDLBackend.initWindow(.{
         .allocator = allocator,
         .size = .{ .w = 800.0, .h = 600.0 },
-        .title = ctx.title,
+        .title = "My DVUI App",
         .vsync = true,
     });
-    errdefer destroyBackendKeepingSDL(&ctx.backend);
+    defer backend.deinit();
 
-    const theme = switch (ctx.backend.preferredColorScheme() orelse .light) {
+    var win = try dvui.Window.init(@src(), allocator, backend.backend(), .{
+        .theme = switch (backend.preferredColorScheme() orelse .light) {
             .light => dvui.Theme.builtin.adwaita_light,
             .dark => dvui.Theme.builtin.adwaita_dark,
-    };
+        },
+    });
+    defer win.deinit();
 
-    ctx.window = try dvui.Window.init(@src(), allocator, ctx.backend.backend(), .{ .theme = theme });
+    var ctx = try WindowContext.init(allocator);
-    errdefer ctx.window.deinit();
+    defer ctx.deinit();
 
-    return ctx;
+    var interrupted = false;
-}
+    main_loop: while (true) {
+        const nstime = win.beginWait(interrupted);
+        try win.begin(nstime);
+        try backend.addAllEvents(&win);
 
-fn closeWindow(windows: *std.ArrayList(*WindowContext), allocator: std.mem.Allocator, idx: usize) void {
+        _ = SDLBackend.c.SDL_SetRenderDrawColor(backend.renderer, 0, 0, 0, 255);
-    const last = windows.items.len == 1;
+        _ = SDLBackend.c.SDL_RenderClear(backend.renderer);
-    const ctx = windows.swapRemove(idx);
-    ctx.deinit(allocator, last);
-    allocator.destroy(ctx);
-}
 
-fn destroyBackendKeepingSDL(backend: *SDLBackend) void {
+        if (!ui.guiFrame(&ctx)) break :main_loop;
-    SDLBackend.c.SDL_DestroyRenderer(backend.renderer);
-    SDLBackend.c.SDL_DestroyWindow(backend.window);
-    backend.we_own_window = false;
-    backend.deinit();
-}
 
-fn windowId(ctx: *WindowContext) u32 {
+        const end_micros = try win.end(.{});
-    return @intCast(SDLBackend.c.SDL_GetWindowID(ctx.backend.window));
+        try backend.setCursor(win.cursorRequested());
-}
+        try backend.textInputRect(win.textInputRequested());
+        try backend.renderPresent();
 
-fn eventWindowId(event: SDLBackend.c.SDL_Event) ?u32 {
+        const wait_event_micros = win.waitTime(end_micros);
-    return switch (event.type) {
+        interrupted = try backend.waitEventTimeout(wait_event_micros);
-        if (SDLBackend.sdl3) SDLBackend.c.SDL_EVENT_KEY_DOWN else SDLBackend.c.SDL_KEYDOWN => @intCast(event.key.windowID),
-        if (SDLBackend.sdl3) SDLBackend.c.SDL_EVENT_KEY_UP else SDLBackend.c.SDL_KEYUP => @intCast(event.key.windowID),
-        if (SDLBackend.sdl3) SDLBackend.c.SDL_EVENT_TEXT_INPUT else SDLBackend.c.SDL_TEXTINPUT => @intCast(event.text.windowID),
-        if (SDLBackend.sdl3) SDLBackend.c.SDL_EVENT_TEXT_EDITING else SDLBackend.c.SDL_TEXTEDITING => @intCast(event.edit.windowID),
-        if (SDLBackend.sdl3) SDLBackend.c.SDL_EVENT_MOUSE_MOTION else SDLBackend.c.SDL_MOUSEMOTION => @intCast(event.motion.windowID),
-        if (SDLBackend.sdl3) SDLBackend.c.SDL_EVENT_MOUSE_BUTTON_DOWN else SDLBackend.c.SDL_MOUSEBUTTONDOWN => @intCast(event.button.windowID),
-        if (SDLBackend.sdl3) SDLBackend.c.SDL_EVENT_MOUSE_BUTTON_UP else SDLBackend.c.SDL_MOUSEBUTTONUP => @intCast(event.button.windowID),
-        if (SDLBackend.sdl3) SDLBackend.c.SDL_EVENT_MOUSE_WHEEL else SDLBackend.c.SDL_MOUSEWHEEL => @intCast(event.wheel.windowID),
-        if (SDLBackend.sdl3) SDLBackend.c.SDL_EVENT_WINDOW_CLOSE_REQUESTED else SDLBackend.c.SDL_WINDOWEVENT => @intCast(event.window.windowID),
-        else => null,
-    };
-}
-
-fn pumpEvents(windows: *std.ArrayList(*WindowContext)) !bool {
-    var event: SDLBackend.c.SDL_Event = undefined;
-    const poll_got_event = if (SDLBackend.sdl3) true else 1;
-    var saw_event = false;
-
-    while (SDLBackend.c.SDL_PollEvent(&event) == poll_got_event) {
-        saw_event = true;
-
-        if (eventWindowId(event)) |wid| {
-            for (windows.items) |ctx| {
-                if (windowId(ctx) == wid) {
-                    _ = try ctx.backend.addEvent(&ctx.window, event);
-                    break;
     }
 }
-        } else {
-            // broadcast events without a window target (like SDL_QUIT)
-            for (windows.items) |ctx| {
-                _ = try ctx.backend.addEvent(&ctx.window, event);
-            }
-        }
-    }
-
-    return saw_event;
-}
-
-fn gui_frame(ctx: *WindowContext, allocator: std.mem.Allocator, windows: *std.ArrayList(*WindowContext), next_window_id: *usize) !bool {
-    for (ctx.window.events.items) |*e| {
-        if (e.evt == .window and e.evt.window.action == .close) return false;
-        // Treat SDL_QUIT as a global request; ignore here so other windows keep running.
-    }
-
-    var root = dvui.box(@src(), .{ .dir = .vertical }, .{ .expand = .both, .padding = dvui.Rect.all(12), .background = true, .style = .window });
-    defer root.deinit();
-
-    dvui.label(@src(), "Window #{d}", .{ctx.id}, .{ .font_style = .title_2 });
-    dvui.label(@src(), "Open windows: {d}", .{windows.items.len}, .{});
-
-    if (dvui.button(@src(), "New window", .{}, .{})) {
-        const id = next_window_id.*;
-        next_window_id.* += 1;
-        const new_ctx = try createWindow(allocator, id);
-        try windows.append(allocator, new_ctx);
-    }
-
-    return true;
-}

src/models/Document.zig

@@ -0,0 +1,38 @@
+const std = @import("std");
+const basic_models = @import("basic_models.zig");
+const Size_f = basic_models.Size_f;
+const Document = @This();
+
+pub const Object = @import("Object.zig");
+const shape = @import("shape/shape.zig");
+
+size: Size_f,
+allocator: std.mem.Allocator,
+objects: std.ArrayList(Object),
+
+pub fn init(allocator: std.mem.Allocator, size: Size_f) Document {
+    return .{
+        .size = size,
+        .allocator = allocator,
+        .objects = std.ArrayList(Object).empty,
+    };
+}
+
+pub fn deinit(self: *Document) void {
+    for (self.objects.items) |*obj| obj.deinit(self.allocator);
+    self.objects.deinit(self.allocator);
+}
+
+pub fn addObject(self: *Document, template: Object) !void {
+    const obj = try template.clone(self.allocator);
+    try self.objects.append(self.allocator, obj);
+}
+
+pub fn addShape(self: *Document, parent: ?*Object, shape_kind: Object.ShapeKind) !void {
+    const obj = try shape.createObject(self.allocator, shape_kind);
+    if (parent) |p| {
+        try p.addChild(self.allocator, obj);
+    } else {
+        try self.addObject(obj);
+    }
+}

src/models/Object.zig

@@ -0,0 +1,85 @@
+const std = @import("std");
+const Property = @import("Property.zig").Property;
+const PropertyData = @import("Property.zig").Data;
+const Object = @This();
+
+pub const ShapeKind = enum {
+    line,
+    ellipse,
+    arc,
+    broken,
+};
+
+const default_common_data = [_]PropertyData{
+    .{ .position = .{ .x = 0, .y = 0 } },
+    .{ .angle = 0 },
+    .{ .scale = .{ .scale_x = 1, .scale_y = 1 } },
+    .{ .visible = true },
+    .{ .opacity = 1.0 },
+    .{ .locked = false },
+    .{ .stroke_rgba = 0x000000FF },
+    .{ .thickness = 2.0 },
+};
+
+pub const defaultCommonProperties: [default_common_data.len]Property = blk: {
+    var result: [default_common_data.len]Property = undefined;
+    for (default_common_data, &result) |d, *p| {
+        p.* = .{ .data = d };
+    }
+    break :blk result;
+};
+
+shape: ShapeKind,
+properties: std.ArrayList(Property),
+children: std.ArrayList(Object),
+
+pub fn getProperty(self: Object, tag: std.meta.Tag(PropertyData)) ?*const PropertyData {
+    for (self.properties.items) |*prop| {
+        if (std.meta.activeTag(prop.data) == tag) return &prop.data;
+    }
+    return null;
+}
+
+pub fn setProperty(self: *Object, allocator: std.mem.Allocator, prop: Property) !void {
+    for (self.properties.items, 0..) |*p, i| {
+        if (std.meta.activeTag(p.data) == std.meta.activeTag(prop.data)) {
+            if (p.data == .points) p.data.points.deinit(allocator);
+            self.properties.items[i] = prop;
+            return;
+        }
+    }
+    return error.PropertyNotFound;
+}
+
+pub fn addChild(self: *Object, allocator: std.mem.Allocator, template: Object) !void {
+    const obj = try template.clone(allocator);
+    try self.children.append(allocator, obj);
+}
+
+pub fn clone(self: Object, allocator: std.mem.Allocator) !Object {
+    var properties_list = std.ArrayList(Property).empty;
+    errdefer properties_list.deinit(allocator);
+    for (self.properties.items) |prop| {
+        try properties_list.append(allocator, try prop.clone(allocator));
+    }
+
+    var children_list = std.ArrayList(Object).empty;
+    errdefer children_list.deinit(allocator);
+    for (self.children.items) |child| {
+        try children_list.append(allocator, try child.clone(allocator));
+    }
+
+    return .{
+        .shape = self.shape,
+        .properties = properties_list,
+        .children = children_list,
+    };
+}
+
+pub fn deinit(self: *Object, allocator: std.mem.Allocator) void {
+    for (self.children.items) |*child| child.deinit(allocator);
+    self.children.deinit(allocator);
+    for (self.properties.items) |*prop| prop.deinit(allocator);
+    self.properties.deinit(allocator);
+    self.* = undefined;
+}

src/models/Property.zig

@@ -0,0 +1,49 @@
+const std = @import("std");
+const basic_models = @import("basic_models.zig");
+const Point2_f = basic_models.Point2_f;
+const Scale2_f = basic_models.Scale2_f;
+const Size_f = basic_models.Size_f;
+const Radii_f = basic_models.Radii_f;
+
+pub const Data = union(enum) {
+    position: Point2_f,
+    angle: f32,
+    scale: Scale2_f,
+    visible: bool,
+    opacity: f32,
+    locked: bool,
+
+    size: Size_f,
+    radii: Radii_f,
+    end_point: Point2_f,
+
+    points: std.ArrayList(Point2_f),
+
+    fill_rgba: u32,
+    stroke_rgba: u32,
+
+    thickness: f32,
+};
+
+pub const Property = struct {
+    data: Data,
+
+    pub fn deinit(self: *Property, allocator: std.mem.Allocator) void {
+        switch (self.data) {
+            .points => |*list| list.deinit(allocator),
+            else => {},
+        }
+        self.* = undefined;
+    }
+
+    pub fn clone(self: Property, allocator: std.mem.Allocator) !Property {
+        return switch (self.data) {
+            .points => |list| .{
+                .data = .{
+                    .points = try list.clone(allocator),
+                },
+            },
+            else => .{ .data = self.data },
+        };
+    }
+};

src/models/basic_models.zig

@@ -0,0 +1,45 @@
+pub const Rect_i = struct {
+    x: u32,
+    y: u32,
+    w: u32,
+    h: u32,
+};
+
+pub const Size_i = struct {
+    w: u32,
+    h: u32,
+};
+
+pub const Size_f = struct {
+    w: f32,
+    h: f32,
+};
+
+pub const Point2_f = struct {
+    x: f32 = 0,
+    y: f32 = 0,
+};
+
+/// Целочисленная точка (например, координаты в буфере пикселей).
+pub const Point2_i = struct {
+    x: i32 = 0,
+    y: i32 = 0,
+};
+
+pub const Radii_f = struct {
+    x: f32,
+    y: f32,
+};
+
+pub const Scale2_f = struct {
+    scale_x: f32 = 1,
+    scale_y: f32 = 1,
+};
+
+/// Прямоугольник в координатах документа (f32), например локальные границы объекта.
+pub const Rect_f = struct {
+    x: f32 = 0,
+    y: f32 = 0,
+    w: f32 = 0,
+    h: f32 = 0,
+};

src/models/random_document.zig

@@ -0,0 +1,130 @@
+const std = @import("std");
+const Document = @import("Document.zig");
+const Object = Document.Object;
+const shape = @import("shape/shape.zig");
+const basic_models = @import("basic_models.zig");
+const Size_f = basic_models.Size_f;
+const Point2_f = basic_models.Point2_f;
+const Scale2_f = basic_models.Scale2_f;
+const Radii_f = basic_models.Radii_f;
+
+fn randFloat(rng: std.Random, min: f32, max: f32) f32 {
+    return min + (max - min) * rng.float(f32);
+}
+
+fn randRgba(rng: std.Random) u32 {
+    const r = rng.int(u8);
+    const g = rng.int(u8);
+    const b = rng.int(u8);
+    const a: u8 = @intCast(rng.intRangeLessThan(usize, 128, 256));
+    return r | (@as(u32, g) << 8) | (@as(u32, b) << 16) | (@as(u32, a) << 24);
+}
+
+fn randomShapeKind(rng: std.Random) Object.ShapeKind {
+    const shapes_implemented = [_]Object.ShapeKind{ .line, .ellipse, .broken };
+    return shapes_implemented[rng.intRangeLessThan(usize, 0, shapes_implemented.len)];
+}
+
+/// Случайно заполняет все доступные свойства объекта; позиция — в пределах документа.
+fn randomizeObjectProperties(allocator: std.mem.Allocator, doc_size: *const Size_f, obj: *Object, rng: std.Random) !void {
+    const margin: f32 = 8;
+    const max_x = @max(0, doc_size.w - margin);
+    const max_y = @max(0, doc_size.h - margin);
+
+    try obj.setProperty(allocator, .{ .data = .{
+        .position = .{
+            .x = randFloat(rng, margin, if (max_x > margin) max_x else margin),
+            .y = randFloat(rng, margin, if (max_y > margin) max_y else margin),
+        },
+    } });
+    try obj.setProperty(allocator, .{ .data = .{ .angle = randFloat(rng, 0, 2 * std.math.pi) } });
+    try obj.setProperty(allocator, .{ .data = .{
+        .scale = .{
+            .scale_x = randFloat(rng, 0.25, 2.0),
+            .scale_y = randFloat(rng, 0.25, 2.0),
+        },
+    } });
+    try obj.setProperty(allocator, .{ .data = .{ .visible = true } });
+    try obj.setProperty(allocator, .{ .data = .{ .opacity = randFloat(rng, 0.3, 1.0) } });
+    try obj.setProperty(allocator, .{ .data = .{ .locked = rng.boolean() } });
+
+    const stroke = randRgba(rng);
+    try obj.setProperty(allocator, .{ .data = .{ .stroke_rgba = stroke } });
+    obj.setProperty(allocator, .{ .data = .{ .fill_rgba = randRgba(rng) } }) catch {};
+    const thickness = randFloat(rng, max_x * 0.01, max_x * 0.1);
+    try obj.setProperty(allocator, .{ .data = .{ .thickness = thickness } });
+
+    switch (obj.shape) {
+        .line => {
+            const len = randFloat(rng, 20, @min(doc_size.w, doc_size.h) * 0.5);
+            const angle = randFloat(rng, 0, 2 * std.math.pi);
+            try obj.setProperty(allocator, .{ .data = .{
+                .end_point = .{
+                    .x = std.math.cos(angle) * len,
+                    .y = std.math.sin(angle) * len,
+                },
+            } });
+        },
+        .ellipse => {
+            const max_r = @min(120, @min(doc_size.w / 4, doc_size.h / 4));
+            try obj.setProperty(allocator, .{ .data = .{
+                .radii = .{
+                    .x = randFloat(rng, 8, @max(8, max_r)),
+                    .y = randFloat(rng, 8, @max(8, max_r)),
+                },
+            } });
+        },
+        .broken => {
+            var points = std.ArrayList(Point2_f).empty;
+            const n = rng.intRangeLessThan(usize, 2, 9);
+            var x: f32 = 0;
+            var y: f32 = 0;
+            for (0..n) |_| {
+                try points.append(allocator, .{ .x = x, .y = y });
+                x += randFloat(rng, -40, 80);
+                y += randFloat(rng, -30, 60);
+            }
+            try obj.setProperty(allocator, .{ .data = .{ .points = points } });
+        },
+        .arc => {},
+    }
+}
+
+/// Создаёт в документе случайное количество фигур (в т.ч. вложенных).
+/// У каждой фигуры все доступные свойства задаются случайно; позиция — в пределах документа.
+/// Реализованные типы: line, ellipse, broken.
+pub fn addRandomShapes(doc: *Document, rng: std.Random) !void {
+    const max_total: usize = 80;
+    var total_count: usize = 0;
+    const allocator = doc.allocator;
+
+    const n_root = rng.intRangeLessThan(usize, 6, 15);
+    for (0..n_root) |_| {
+        if (total_count >= max_total) break;
+        var obj = try shape.createObject(allocator, randomShapeKind(rng));
+        try randomizeObjectProperties(allocator, &doc.size, &obj, rng);
+        try doc.addObject(obj);
+        total_count += 1;
+    }
+
+    var stack = std.ArrayList(*Object).empty;
+    defer stack.deinit(allocator);
+    for (doc.objects.items) |*obj| {
+        try stack.append(allocator, obj);
+    }
+    while (stack.pop()) |obj| {
+        if (total_count >= max_total) continue;
+        const n_children = rng.intRangeLessThan(usize, 0, 2);
+        const base_len = obj.children.items.len;
+        for (0..n_children) |_| {
+            if (total_count >= max_total) break;
+            var child = try shape.createObject(allocator, randomShapeKind(rng));
+            try randomizeObjectProperties(allocator, &doc.size, &child, rng);
+            try obj.addChild(allocator, child);
+            total_count += 1;
+        }
+        for (obj.children.items[base_len..]) |*child| {
+            try stack.append(allocator, child);
+        }
+    }
+}

src/models/shape/arc.zig

@@ -0,0 +1,23 @@
+const std = @import("std");
+const Object = @import("../Object.zig");
+const PropertyData = @import("../Property.zig").Data;
+const Rect_f = @import("../basic_models.zig").Rect_f;
+const shape_mod = @import("shape.zig");
+
+/// Теги обязательных свойств (заглушка: arc пока не реализован).
+pub fn getRequiredTags() []const std.meta.Tag(PropertyData) {
+    return &[_]std.meta.Tag(PropertyData){};
+}
+
+/// Добавляет свойства по умолчанию для дуги (заглушка).
+pub fn appendDefaultShapeProperties(allocator: std.mem.Allocator, obj: *Object) !void {
+    _ = allocator;
+    _ = obj;
+    return error.ArcNotImplemented;
+}
+
+/// Локальные границы дуги (заглушка: пока не реализовано).
+pub fn getLocalBounds(obj: *const Object) !Rect_f {
+    try shape_mod.ensure(obj, .arc);
+    return error.ArcNotImplemented;
+}

src/models/shape/broken.zig

@@ -0,0 +1,51 @@
+const std = @import("std");
+const Object = @import("../Object.zig");
+const Property = @import("../Property.zig").Property;
+const PropertyData = @import("../Property.zig").Data;
+const Point2_f = @import("../basic_models.zig").Point2_f;
+const Rect_f = @import("../basic_models.zig").Rect_f;
+const shape_mod = @import("shape.zig");
+
+/// Точки ломаной по умолчанию (для создания).
+pub const default_points = [_]Point2_f{
+    .{ .x = 0, .y = 0 },
+    .{ .x = 80, .y = 0 },
+    .{ .x = 80, .y = 60 },
+};
+
+/// Теги обязательных свойств (у ломаной нет const default_shape_properties, только default_points).
+pub fn getRequiredTags() []const std.meta.Tag(PropertyData) {
+    return &[_]std.meta.Tag(PropertyData){
+        .points,
+    };
+}
+
+/// Добавляет к объекту свойства по умолчанию для ломаной (points из default_points).
+pub fn appendDefaultShapeProperties(allocator: std.mem.Allocator, obj: *Object) !void {
+    var points = std.ArrayList(Point2_f).empty;
+    try points.appendSlice(allocator, &default_points);
+    try obj.properties.append(allocator, .{ .data = .{ .points = points } });
+}
+
+/// Локальные границы ломаной: AABB по всем точкам.
+pub fn getLocalBounds(obj: *const Object) !Rect_f {
+    try shape_mod.ensure(obj, .broken);
+    const p = obj.getProperty(.points).?;
+    if (p.points.items.len == 0) return error.EmptyPoints;
+    var min_x: f32 = p.points.items[0].x;
+    var max_x: f32 = min_x;
+    var min_y: f32 = p.points.items[0].y;
+    var max_y: f32 = min_y;
+    for (p.points.items[1..]) |pt| {
+        min_x = @min(min_x, pt.x);
+        max_x = @max(max_x, pt.x);
+        min_y = @min(min_y, pt.y);
+        max_y = @max(max_y, pt.y);
+    }
+    return .{
+        .x = min_x,
+        .y = min_y,
+        .w = max_x - min_x,
+        .h = max_y - min_y,
+    };
+}

src/models/shape/ellipse.zig

@@ -0,0 +1,33 @@
+const std = @import("std");
+const Object = @import("../Object.zig");
+const Property = @import("../Property.zig").Property;
+const PropertyData = @import("../Property.zig").Data;
+const Rect_f = @import("../basic_models.zig").Rect_f;
+const shape_mod = @import("shape.zig");
+
+/// Свойства фигуры по умолчанию (для создания и проверки типа). Теги для ensure выводятся отсюда.
+pub const default_shape_properties = [_]Property{
+    .{ .data = .{ .radii = .{ .x = 50, .y = 50 } } },
+};
+
+/// Теги обязательных свойств (выводятся из default_shape_properties).
+pub fn getRequiredTags() []const std.meta.Tag(PropertyData) {
+    return &([_]std.meta.Tag(PropertyData){std.meta.activeTag(default_shape_properties[0].data)});
+}
+
+/// Добавляет к объекту свойства по умолчанию для эллипса.
+pub fn appendDefaultShapeProperties(allocator: std.mem.Allocator, obj: *Object) !void {
+    for (default_shape_properties) |prop| try obj.properties.append(allocator, prop);
+}
+
+/// Локальные границы эллипса: [-radii.x, -radii.y] .. [radii.x, radii.y].
+pub fn getLocalBounds(obj: *const Object) !Rect_f {
+    try shape_mod.ensure(obj, .ellipse);
+    const r = obj.getProperty(.radii).?;
+    return .{
+        .x = -r.radii.x,
+        .y = -r.radii.y,
+        .w = 2 * r.radii.x,
+        .h = 2 * r.radii.y,
+    };
+}

src/models/shape/line.zig

@@ -0,0 +1,37 @@
+const std = @import("std");
+const Object = @import("../Object.zig");
+const Property = @import("../Property.zig").Property;
+const PropertyData = @import("../Property.zig").Data;
+const Rect_f = @import("../basic_models.zig").Rect_f;
+const shape_mod = @import("shape.zig");
+
+/// Свойства фигуры по умолчанию (для создания и проверки типа). Теги для ensure выводятся отсюда.
+pub const default_shape_properties = [_]Property{
+    .{ .data = .{ .end_point = .{ .x = 100, .y = 0 } } },
+};
+
+/// Теги обязательных свойств (выводятся из default_shape_properties).
+pub fn getRequiredTags() []const std.meta.Tag(PropertyData) {
+    return &([_]std.meta.Tag(PropertyData){std.meta.activeTag(default_shape_properties[0].data)});
+}
+
+/// Добавляет к объекту свойства по умолчанию для линии.
+pub fn appendDefaultShapeProperties(allocator: std.mem.Allocator, obj: *Object) !void {
+    for (default_shape_properties) |prop| try obj.properties.append(allocator, prop);
+}
+
+/// Локальные границы линии: от (0,0) до end_point.
+pub fn getLocalBounds(obj: *const Object) !Rect_f {
+    try shape_mod.ensure(obj, .line);
+    const ep = obj.getProperty(.end_point).?;
+    const min_x = @min(0, ep.end_point.x);
+    const max_x = @max(0, ep.end_point.x);
+    const min_y = @min(0, ep.end_point.y);
+    const max_y = @max(0, ep.end_point.y);
+    return .{
+        .x = min_x,
+        .y = min_y,
+        .w = max_x - min_x,
+        .h = max_y - min_y,
+    };
+}

src/models/shape/shape.zig

@@ -0,0 +1,95 @@
+const std = @import("std");
+const Object = @import("../Object.zig");
+const Property = @import("../Property.zig").Property;
+const PropertyData = @import("../Property.zig").Data;
+const defaultCommonProperties = Object.defaultCommonProperties;
+const basic_models = @import("../basic_models.zig");
+const line = @import("line.zig");
+const ellipse = @import("ellipse.zig");
+const broken = @import("broken.zig");
+const arc = @import("arc.zig");
+
+pub const Rect = basic_models.Rectf;
+
+/// Создаёт объект с общими свойствами по умолчанию и специфичными для типа фигуры.
+pub fn createObject(allocator: std.mem.Allocator, shape_kind: Object.ShapeKind) !Object {
+    var obj = try createWithCommonProperties(allocator, shape_kind);
+    errdefer obj.deinit(allocator);
+    switch (shape_kind) {
+        .line => try line.appendDefaultShapeProperties(allocator, &obj),
+        .ellipse => try ellipse.appendDefaultShapeProperties(allocator, &obj),
+        .broken => try broken.appendDefaultShapeProperties(allocator, &obj),
+        .arc => try arc.appendDefaultShapeProperties(allocator, &obj),
+    }
+    return obj;
+}
+
+fn createWithCommonProperties(allocator: std.mem.Allocator, shape_kind: Object.ShapeKind) !Object {
+    var properties_list = std.ArrayList(Property).empty;
+    errdefer properties_list.deinit(allocator);
+    for (defaultCommonProperties) |prop| try properties_list.append(allocator, prop);
+    return .{
+        .shape = shape_kind,
+        .properties = properties_list,
+        .children = std.ArrayList(Object).empty,
+    };
+}
+
+/// Проверяет, что объект имеет ожидаемый тип и все требуемые для этого типа свойства.
+pub fn ensure(obj: *const Object, expected_kind: Object.ShapeKind) !void {
+    if (obj.shape != expected_kind) return error.WrongShapeKind;
+    const tags = requiredTagsFor(expected_kind);
+    for (tags) |tag| {
+        if (obj.getProperty(tag) == null) return error.MissingRequiredProperty;
+    }
+}
+
+fn requiredTagsFor(kind: Object.ShapeKind) []const std.meta.Tag(PropertyData) {
+    return switch (kind) {
+        .line => line.getRequiredTags(),
+        .ellipse => ellipse.getRequiredTags(),
+        .broken => broken.getRequiredTags(),
+        .arc => arc.getRequiredTags(),
+    };
+}
+
+/// Локальные границы объекта (AABB в своих координатах).
+pub fn getLocalBounds(obj: *const Object) !Rect {
+    return switch (obj.shape) {
+        .line => line.getLocalBounds(obj),
+        .ellipse => ellipse.getLocalBounds(obj),
+        .broken => broken.getLocalBounds(obj),
+        .arc => arc.getLocalBounds(obj),
+    };
+}
+
+test "getLocalBounds" {
+    const shape = @This();
+    var gpa = std.heap.GeneralPurposeAllocator(.{}){};
+    defer _ = gpa.deinit();
+    const allocator = gpa.allocator();
+
+    var line_obj = try shape.createObject(allocator, .line);
+    defer line_obj.deinit(allocator);
+    const line_bounds = try getLocalBounds(&line_obj);
+    try std.testing.expect(line_bounds.x == 0);
+    try std.testing.expect(line_bounds.y == 0);
+    try std.testing.expect(line_bounds.w == 100);
+    try std.testing.expect(line_bounds.h == 0);
+
+    var ellipse_obj = try shape.createObject(allocator, .ellipse);
+    defer ellipse_obj.deinit(allocator);
+    const ellipse_bounds = try getLocalBounds(&ellipse_obj);
+    try std.testing.expect(ellipse_bounds.x == -50);
+    try std.testing.expect(ellipse_bounds.y == -50);
+    try std.testing.expect(ellipse_bounds.w == 100);
+    try std.testing.expect(ellipse_bounds.h == 100);
+
+    var broken_obj = try shape.createObject(allocator, .broken);
+    defer broken_obj.deinit(allocator);
+    const broken_bounds = try getLocalBounds(&broken_obj);
+    try std.testing.expect(broken_bounds.x == 0);
+    try std.testing.expect(broken_bounds.y == 0);
+    try std.testing.expect(broken_bounds.w == 80);
+    try std.testing.expect(broken_bounds.h == 60);
+}

src/render/CpuRenderEngine.zig

@@ -0,0 +1,188 @@
+const std = @import("std");
+const builtin = @import("builtin");
+const dvui = @import("dvui");
+const RenderEngine = @import("RenderEngine.zig").RenderEngine;
+const Document = @import("../models/Document.zig");
+const basic_models = @import("../models/basic_models.zig");
+const cpu_draw = @import("cpu/draw.zig");
+const Size_i = basic_models.Size_i;
+const Rect_i = basic_models.Rect_i;
+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: Rect_i) 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: Size_i, visible_rect: Rect_i) void {
+    _ = self;
+
+    const colors = [_]Color.PMA{
+        .{ .r = 255, .g = 0, .b = 0, .a = 255 },
+        .{ .r = 255, .g = 165, .b = 0, .a = 255 },
+        .{ .r = 255, .g = 255, .b = 0, .a = 255 },
+        .{ .r = 0, .g = 255, .b = 0, .a = 255 },
+        .{ .r = 0, .g = 255, .b = 255, .a = 255 },
+        .{ .r = 0, .g = 0, .b = 255, .a = 255 },
+    };
+
+    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;
+
+            var vertical_index: ?u32 = null;
+            for (0..x_pos.len) |i| {
+                if (canvas_x >= x_pos[i] and canvas_x < x_pos[i] + thikness) {
+                    vertical_index = @intCast(i);
+                    break;
+                }
+            }
+
+            var horizontal_index: ?u32 = null;
+            for (0..y_pos.len) |i| {
+                if (canvas_y >= y_pos[i] and canvas_y < y_pos[i] + thikness) {
+                    horizontal_index = @intCast(i);
+                    break;
+                }
+            }
+
+            if (vertical_index) |idx| {
+                pixels[y * visible_rect.w + x] = colors[idx];
+            } else if (horizontal_index) |idx| {
+                pixels[y * visible_rect.w + x] = colors[idx];
+            } else {
+                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: Size_i, visible_rect: Rect_i) !?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);
+
+    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 };
+}
+
+/// Растеризует документ: фон + рекурсивная отрисовка фигур через конвейер (трансформ, прозрачность, наложение).
+pub fn renderDocument(self: *CpuRenderEngine, document: *const Document, canvas_size: Size_i, visible_rect: Rect_i) !?dvui.Texture {
+    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);
+
+    for (pixels) |*p| p.* = .{ .r = 255, .g = 255, .b = 255, .a = 255 };
+    cpu_draw.drawDocument(pixels, width, height, visible_rect, document, canvas_size);
+
+    return try dvui.textureCreate(pixels, width, height, .nearest);
+}

src/render/RenderEngine.zig

@@ -0,0 +1,27 @@
+const dvui = @import("dvui");
+const CpuRenderEngine = @import("CpuRenderEngine.zig");
+const Document = @import("../models/Document.zig");
+const basic_models = @import("../models/basic_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: basic_models.Size_i, visible_rect: basic_models.Rect_i) !?dvui.Texture {
+        return switch (self) {
+            .cpu => |cpu_r| cpu_r.example(canvas_size, visible_rect),
+        };
+    }
+
+    /// Растеризует документ в текстуру (размер и видимая область в пикселях холста).
+    pub fn render(self: RenderEngine, document: *const Document, canvas_size: basic_models.Size_i, visible_rect: basic_models.Rect_i) !?dvui.Texture {
+        return switch (self) {
+            .cpu => |cpu_r| cpu_r.renderDocument(document, canvas_size, visible_rect),
+        };
+    }
+};

src/render/cpu/arc.zig

@@ -0,0 +1,8 @@
+const Document = @import("../../models/Document.zig");
+const pipeline = @import("pipeline.zig");
+const DrawContext = pipeline.DrawContext;
+
+const Object = Document.Object;
+
+/// Рисует дугу (заглушка: пока не реализовано).
+pub fn draw(_: *DrawContext, _: *const Object) void {}

src/render/cpu/broken.zig

@@ -0,0 +1,23 @@
+const std = @import("std");
+const Document = @import("../../models/Document.zig");
+const pipeline = @import("pipeline.zig");
+const line = @import("line.zig");
+const DrawContext = pipeline.DrawContext;
+const Color = @import("dvui").Color;
+
+const Object = Document.Object;
+const default_stroke: Color.PMA = .{ .r = 0, .g = 0, .b = 0, .a = 255 };
+const default_thickness: f32 = 2.0;
+
+/// Рисует ломаную по точкам в локальных координатах. Обводка по stroke_rgba.
+pub fn draw(ctx: *DrawContext, obj: *const Object) void {
+    const p_prop = obj.getProperty(.points) orelse return;
+    const pts = p_prop.points.items;
+    if (pts.len < 2) return;
+    const stroke = if (obj.getProperty(.stroke_rgba)) |s| pipeline.rgbaToPma(s.stroke_rgba) else default_stroke;
+    const thickness = if (obj.getProperty(.thickness)) |t| t.thickness else default_thickness;
+    var i: usize = 0;
+    while (i + 1 < pts.len) : (i += 1) {
+        line.drawLine(ctx, pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y, stroke, thickness);
+    }
+}

src/render/cpu/draw.zig

@@ -0,0 +1,77 @@
+const std = @import("std");
+const Document = @import("../../models/Document.zig");
+const pipeline = @import("pipeline.zig");
+const line = @import("line.zig");
+const ellipse = @import("ellipse.zig");
+const broken = @import("broken.zig");
+const arc = @import("arc.zig");
+const basic_models = @import("../../models/basic_models.zig");
+const Rect_i = basic_models.Rect_i;
+const Size_i = basic_models.Size_i;
+
+const Object = Document.Object;
+const DrawContext = pipeline.DrawContext;
+const Transform = pipeline.Transform;
+
+fn getLocalTransform(obj: *const Object) Transform {
+    const pos = if (obj.getProperty(.position)) |p| p.position else basic_models.Point2_f{ .x = 0, .y = 0 };
+    const angle = if (obj.getProperty(.angle)) |p| p.angle else 0;
+    const scale = if (obj.getProperty(.scale)) |p| p.scale else basic_models.Scale2_f{ .scale_x = 1, .scale_y = 1 };
+    const opacity = if (obj.getProperty(.opacity)) |p| p.opacity else 1.0;
+    return .{
+        .position = pos,
+        .angle = angle,
+        .scale = scale,
+        .opacity = opacity,
+    };
+}
+
+fn isVisible(obj: *const Object) bool {
+    return if (obj.getProperty(.visible)) |p| p.visible else true;
+}
+
+fn drawObject(ctx: *DrawContext, obj: *const Object, parent_transform: Transform) void {
+    if (!isVisible(obj)) return;
+    const local = getLocalTransform(obj);
+    const world = Transform.compose(parent_transform, local);
+    ctx.setTransform(world);
+
+    switch (obj.shape) {
+        .line => line.draw(ctx, obj),
+        .ellipse => ellipse.draw(ctx, obj),
+        .broken => broken.draw(ctx, obj),
+        .arc => arc.draw(ctx, obj),
+    }
+
+    for (obj.children.items) |*child| {
+        drawObject(ctx, child, world);
+    }
+}
+
+/// Рекурсивно рисует документ в буфер: сначала корневые объекты по порядку, затем их потомков (каждый следующий поверх предыдущего).
+pub fn drawDocument(
+    pixels: []@import("dvui").Color.PMA,
+    buf_width: u32,
+    buf_height: u32,
+    visible_rect: Rect_i,
+    document: *const Document,
+    canvas_size: Size_i,
+) void {
+    const scale_x: f32 = if (document.size.w > 0) @as(f32, @floatFromInt(canvas_size.w)) / document.size.w else 0;
+    const scale_y: f32 = if (document.size.h > 0) @as(f32, @floatFromInt(canvas_size.h)) / document.size.h else 0;
+
+    var ctx = DrawContext{
+        .pixels = pixels,
+        .buf_width = buf_width,
+        .buf_height = buf_height,
+        .visible_rect = visible_rect,
+        .scale_x = scale_x,
+        .scale_y = scale_y,
+    };
+    // вывести visible_rect
+    std.debug.print("visible_rect: {{ x: {}, y: {}, w: {}, h: {} }}\n", .{ visible_rect.x, visible_rect.y, visible_rect.w, visible_rect.h });
+    const identity = Transform{};
+    for (document.objects.items) |*obj| {
+        drawObject(&ctx, obj, identity);
+    }
+}

src/render/cpu/ellipse.zig

@@ -0,0 +1,59 @@
+const std = @import("std");
+const Document = @import("../../models/Document.zig");
+const pipeline = @import("pipeline.zig");
+const DrawContext = pipeline.DrawContext;
+const Color = @import("dvui").Color;
+
+const Object = Document.Object;
+const default_stroke: Color.PMA = .{ .r = 0, .g = 0, .b = 0, .a = 255 };
+
+/// Рисует эллипс: центр (0,0), полуоси radii. Растеризация в координатах буфера (обводка кольцом).
+pub fn draw(ctx: *DrawContext, obj: *const Object) void {
+    const r_prop = obj.getProperty(.radii) orelse return;
+    const rx = r_prop.radii.x;
+    const ry = r_prop.radii.y;
+    if (rx <= 0 or ry <= 0) return;
+    const stroke = if (obj.getProperty(.stroke_rgba)) |s| pipeline.rgbaToPma(s.stroke_rgba) else default_stroke;
+
+    const corners = [_]struct { x: f32, y: f32 }{
+        .{ .x = -rx, .y = -ry },
+        .{ .x = rx, .y = -ry },
+        .{ .x = rx, .y = ry },
+        .{ .x = -rx, .y = ry },
+    };
+    const w0 = ctx.localToWorld(corners[0].x, corners[0].y);
+    const b0 = ctx.worldToBufferF(w0.x, w0.y);
+    var min_bx: f32 = b0.x;
+    var min_by: f32 = b0.y;
+    var max_bx: f32 = b0.x;
+    var max_by: f32 = b0.y;
+    for (corners[1..]) |c| {
+        const w = ctx.localToWorld(c.x, c.y);
+        const b = ctx.worldToBufferF(w.x, w.y);
+        min_bx = @min(min_bx, b.x);
+        min_by = @min(min_by, b.y);
+        max_bx = @max(max_bx, b.x);
+        max_by = @max(max_by, b.y);
+    }
+    const buf_w: i32 = @intCast(ctx.buf_width);
+    const buf_h: i32 = @intCast(ctx.buf_height);
+    const x0: i32 = @max(0, @as(i32, @intFromFloat(std.math.floor(min_bx))));
+    const y0: i32 = @max(0, @as(i32, @intFromFloat(std.math.floor(min_by))));
+    const x1: i32 = @min(buf_w, @as(i32, @intFromFloat(std.math.ceil(max_bx))) + 1);
+    const y1: i32 = @min(buf_h, @as(i32, @intFromFloat(std.math.ceil(max_by))) + 1);
+
+    var by: i32 = y0;
+    while (by < y1) : (by += 1) {
+        var bx: i32 = x0;
+        while (bx < x1) : (bx += 1) {
+            const w = ctx.bufferToWorld(@as(f32, @floatFromInt(bx)) + 0.5, @as(f32, @floatFromInt(by)) + 0.5);
+            const loc = ctx.worldToLocal(w.x, w.y);
+            const nx = loc.x / rx;
+            const ny = loc.y / ry;
+            const d = nx * nx + ny * ny;
+            if (d >= 0.9 and d <= 1.1) {
+                ctx.blendPixelAtBuffer(@intCast(bx), @intCast(by), stroke);
+            }
+        }
+    }
+}

src/render/cpu/line.zig

@@ -0,0 +1,58 @@
+const Document = @import("../../models/Document.zig");
+const pipeline = @import("pipeline.zig");
+const DrawContext = pipeline.DrawContext;
+const Color = @import("dvui").Color;
+
+const Object = Document.Object;
+const default_stroke: Color.PMA = .{ .r = 0, .g = 0, .b = 0, .a = 255 };
+const default_thickness: f32 = 2.0;
+
+/// Рисует линию в локальных координатах: от (0,0) до end_point. Растеризация в координатах буфера (без пробелов при зуме).
+pub fn draw(ctx: *DrawContext, obj: *const Object) void {
+    const ep_prop = obj.getProperty(.end_point) orelse return;
+    const end_x = ep_prop.end_point.x;
+    const end_y = ep_prop.end_point.y;
+    const stroke = if (obj.getProperty(.stroke_rgba)) |s| pipeline.rgbaToPma(s.stroke_rgba) else default_stroke;
+    const thickness = if (obj.getProperty(.thickness)) |t| t.thickness else default_thickness;
+    drawLine(ctx, 0, 0, end_x, end_y, stroke, thickness);
+}
+
+/// Линия по локальным координатам фигуры: переводит концы в буфер и рисует в пикселях буфера.
+pub fn drawLine(ctx: *DrawContext, x0: f32, y0: f32, x1: f32, y1: f32, color: Color.PMA, thickness: f32) void {
+    const w0 = ctx.localToWorld(x0, y0);
+    const w1 = ctx.localToWorld(x1, y1);
+    const b0 = ctx.worldToBuffer(w0.x, w0.y);
+    const b1 = ctx.worldToBuffer(w1.x, w1.y);
+    drawLineInBuffer(ctx, b0.x, b0.y, b1.x, b1.y, color, thickness);
+}
+
+/// Брезенхем в координатах буфера; пиксели вне [0, buf_width) x [0, buf_height) пропускаются.
+fn drawLineInBuffer(ctx: *DrawContext, bx0: i32, by0: i32, bx1: i32, by1: i32, color: Color.PMA, thickness: f32) void {
+    const bw = ctx.buf_width;
+    const bh = ctx.buf_height;
+    const dx: i32 = @intCast(@abs(bx1 - bx0));
+    const dy: i32 = -@as(i32, @intCast(@abs(by1 - by0)));
+    const sx: i32 = if (bx0 < bx1) 1 else -1;
+    const sy: i32 = if (by0 < by1) 1 else -1;
+    var err = dx + dy;
+    var x = bx0;
+    var y = by0;
+
+    _ = thickness;
+
+    while (true) {
+        if (x >= 0 and x < bw and y >= 0 and y < bh) {
+            ctx.blendPixelAtBuffer(@intCast(x), @intCast(y), color);
+        }
+        if (x == bx1 and y == by1) break;
+        const e2 = 2 * err;
+        if (e2 >= dy) {
+            err += dy;
+            x += sx;
+        }
+        if (e2 <= dx) {
+            err += dx;
+            y += sy;
+        }
+    }
+}

src/render/cpu/pipeline.zig

@@ -0,0 +1,158 @@
+const std = @import("std");
+const dvui = @import("dvui");
+const basic_models = @import("../../models/basic_models.zig");
+const Point2_f = basic_models.Point2_f;
+const Point2_i = basic_models.Point2_i;
+const Scale2_f = basic_models.Scale2_f;
+const Rect_i = basic_models.Rect_i;
+const Color = dvui.Color;
+
+/// Трансформ объекта в мировых координатах документа (позиция, угол, масштаб, непрозрачность).
+pub const Transform = struct {
+    position: Point2_f = .{},
+    angle: f32 = 0,
+    scale: Scale2_f = .{},
+    opacity: f32 = 1.0,
+
+    /// Композиция: мировой трансформ = parent * local (local в пространстве родителя).
+    pub fn compose(parent: Transform, local: Transform) Transform {
+        const cos_a = std.math.cos(parent.angle);
+        const sin_a = std.math.sin(parent.angle);
+        const sx = parent.scale.scale_x * local.scale.scale_x;
+        const sy = parent.scale.scale_y * local.scale.scale_y;
+        const local_px = local.position.x * parent.scale.scale_x;
+        const local_py = local.position.y * parent.scale.scale_y;
+        const rx = cos_a * local_px - sin_a * local_py;
+        const ry = sin_a * local_px + cos_a * local_py;
+        return .{
+            .position = .{
+                .x = parent.position.x + rx,
+                .y = parent.position.y + ry,
+            },
+            .angle = parent.angle + local.angle,
+            .scale = .{ .scale_x = sx, .scale_y = sy },
+            .opacity = parent.opacity * local.opacity,
+        };
+    }
+};
+
+/// Единый конвейер: принимает позицию в локальных координатах фигуры и цвет пикселя,
+/// применяет трансформ (вращение, масштаб, перенос) и непрозрачность, накладывает на буфер.
+pub const DrawContext = struct {
+    pixels: []Color.PMA,
+    buf_width: u32,
+    buf_height: u32,
+    visible_rect: Rect_i,
+    scale_x: f32,
+    scale_y: f32,
+    transform: Transform = .{},
+
+    pub fn setTransform(self: *DrawContext, t: Transform) void {
+        self.transform = t;
+    }
+
+    /// Локальные координаты фигуры -> мировые (документ).
+    pub fn localToWorld(self: *const DrawContext, local_x: f32, local_y: f32) Point2_f {
+        const t = &self.transform;
+        const cos_a = std.math.cos(t.angle);
+        const sin_a = std.math.sin(t.angle);
+        return .{
+            .x = t.position.x + (local_x * t.scale.scale_x) * cos_a - (local_y * t.scale.scale_y) * sin_a,
+            .y = t.position.y + (local_x * t.scale.scale_x) * sin_a + (local_y * t.scale.scale_y) * cos_a,
+        };
+    }
+
+    /// Мировые координаты документа -> координаты в буфере (float; могут быть вне [0, buf_w] x [0, buf_h]).
+    pub fn worldToBufferF(self: *const DrawContext, wx: f32, wy: f32) Point2_f {
+        const canvas_x = wx * self.scale_x;
+        const canvas_y = wy * self.scale_y;
+        const vx = @as(f32, @floatFromInt(self.visible_rect.x));
+        const vy = @as(f32, @floatFromInt(self.visible_rect.y));
+        return .{
+            .x = canvas_x - vx,
+            .y = canvas_y - vy,
+        };
+    }
+
+    /// Мировые координаты документа -> целочисленные координаты в буфере (округление до ближайшего пикселя).
+    pub fn worldToBuffer(self: *const DrawContext, wx: f32, wy: f32) Point2_i {
+        const b = self.worldToBufferF(wx, wy);
+        return .{
+            .x = @intFromFloat(std.math.round(b.x)),
+            .y = @intFromFloat(std.math.round(b.y)),
+        };
+    }
+
+    /// Координаты буфера -> мировые (документ). scale_x/scale_y не должны быть 0.
+    pub fn bufferToWorld(self: *const DrawContext, buf_x: f32, buf_y: f32) Point2_f {
+        const vx = @as(f32, @floatFromInt(self.visible_rect.x));
+        const vy = @as(f32, @floatFromInt(self.visible_rect.y));
+        const canvas_x = buf_x + vx;
+        const canvas_y = buf_y + vy;
+        const sx = if (self.scale_x != 0) self.scale_x else 1.0;
+        const sy = if (self.scale_y != 0) self.scale_y else 1.0;
+        return .{
+            .x = canvas_x / sx,
+            .y = canvas_y / sy,
+        };
+    }
+
+    /// Мировые координаты -> локальные фигуры (обратное к localToWorld).
+    pub fn worldToLocal(self: *const DrawContext, wx: f32, wy: f32) Point2_f {
+        const t = &self.transform;
+        const dx = wx - t.position.x;
+        const dy = wy - t.position.y;
+        const cos_a = std.math.cos(-t.angle);
+        const sin_a = std.math.sin(-t.angle);
+        const sx = if (t.scale.scale_x != 0) t.scale.scale_x else 1.0;
+        const sy = if (t.scale.scale_y != 0) t.scale.scale_y else 1.0;
+        return .{
+            .x = (dx * cos_a - dy * sin_a) / sx,
+            .y = (dx * sin_a + dy * cos_a) / sy,
+        };
+    }
+
+    /// Смешивает цвет в пикселе буфера (bx, by) с учётом opacity текущего трансформа. Bounds не проверяются.
+    pub fn blendPixelAtBuffer(self: *DrawContext, bx: u32, by: u32, color: Color.PMA) void {
+        if (bx >= self.buf_width or by >= self.buf_height) return;
+        const t = &self.transform;
+        const idx = by * self.buf_width + bx;
+        const dst = &self.pixels[idx];
+        const a = @as(f32, @floatFromInt(color.a)) / 255.0 * t.opacity;
+        const src_r = @as(f32, @floatFromInt(color.r)) * a;
+        const src_g = @as(f32, @floatFromInt(color.g)) * a;
+        const src_b = @as(f32, @floatFromInt(color.b)) * a;
+        const inv_a = 1.0 - a;
+        dst.r = @intFromFloat(std.math.clamp(src_r + inv_a * @as(f32, @floatFromInt(dst.r)), 0, 255));
+        dst.g = @intFromFloat(std.math.clamp(src_g + inv_a * @as(f32, @floatFromInt(dst.g)), 0, 255));
+        dst.b = @intFromFloat(std.math.clamp(src_b + inv_a * @as(f32, @floatFromInt(dst.b)), 0, 255));
+        dst.a = @intFromFloat(std.math.clamp(a * 255 + inv_a * @as(f32, @floatFromInt(dst.a)), 0, 255));
+    }
+
+    /// Записывает пиксель в локальных координатах фигуры с учётом трансформа и прозрачности (PMA blend).
+    pub fn blendPixelLocal(self: *DrawContext, local_x: f32, local_y: f32, color: Color.PMA) void {
+        const w = self.localToWorld(local_x, local_y);
+        const b = self.worldToBufferF(w.x, w.y);
+        const bx: i32 = @intFromFloat(b.x);
+        const by: i32 = @intFromFloat(b.y);
+        const vw = @as(i32, @intCast(self.visible_rect.w));
+        const vh = @as(i32, @intCast(self.visible_rect.h));
+        if (bx < 0 or bx >= vw or by < 0 or by >= vh) return;
+        self.blendPixelAtBuffer(@intCast(bx), @intCast(by), color);
+    }
+};
+
+pub fn rgbaToPma(rgba: u32) Color.PMA {
+    const r: u8 = @intCast((rgba >> 0) & 0xFF);
+    const g: u8 = @intCast((rgba >> 8) & 0xFF);
+    const b: u8 = @intCast((rgba >> 16) & 0xFF);
+    const a: u8 = @intCast((rgba >> 24) & 0xFF);
+    if (a == 0) return .{ .r = 0, .g = 0, .b = 0, .a = 0 };
+    const af: f32 = @as(f32, @floatFromInt(a)) / 255.0;
+    return .{
+        .r = @intFromFloat(@as(f32, @floatFromInt(r)) * af),
+        .g = @intFromFloat(@as(f32, @floatFromInt(g)) * af),
+        .b = @intFromFloat(@as(f32, @floatFromInt(b)) * af),
+        .a = a,
+    };
+}

src/tests.zig

@@ -0,0 +1,14 @@
+// Корень для `zig build test`. Тесты из импортированных здесь модулей выполняются (в Zig не подтягиваются из транзитивных импортов).
+// Добавляй сюда _ = @import("path/to/module.zig"); для каждого модуля с test-блоками.
+// Чтобы увидеть список всех тестов: после `zig build test` выполни `./zig-out/bin/test`.
+test "discover tests" {
+    _ = @import("main.zig");
+    _ = @import("models/Property.zig");
+    _ = @import("models/shape/shape.zig");
+}
+
+// Убедиться, что выполнились все ожидаемые тесты: этот тест пройдёт только если до него дошли (т.е. все предыдущие прошли).
+test "all module tests completed" {
+    const std = @import("std");
+    std.debug.print("\n  (все тесты модулей выполнены)\n", .{});
+}

src/ui/canvas_view.zig

@@ -0,0 +1,168 @@
+const std = @import("std");
+const dvui = @import("dvui");
+const dvui_ext = @import("dvui_ext.zig");
+const Canvas = @import("../Canvas.zig");
+const Rect_i = @import("../models/basic_models.zig").Rect_i;
+
+pub fn canvasView(canvas: *Canvas, content_rect_scale: dvui.RectScale) void {
+    var textured = dvui_ext.texturedBox(content_rect_scale, dvui.Rect.all(20));
+    {
+        var overlay = dvui.overlay(@src(), .{ .expand = .both });
+        {
+            var scroll = dvui.scrollArea(
+                @src(),
+                .{
+                    .scroll_info = &canvas.scroll,
+                    .vertical_bar = .auto,
+                    .horizontal_bar = .auto,
+                },
+                .{ .expand = .both, .background = false },
+            );
+            {
+                drawCanvasContent(canvas, scroll);
+                handleCanvasZoom(canvas, scroll);
+                handleCanvasMouse(canvas, scroll);
+            }
+            scroll.deinit();
+
+            dvui.label(@src(), "Canvas", .{}, .{ .gravity_x = 0.5, .gravity_y = 0.0 });
+        }
+        overlay.deinit();
+    }
+    textured.deinit();
+}
+
+fn drawCanvasContent(canvas: *Canvas, scroll: anytype) void {
+    const natural_scale = if (canvas.native_scaling) 1 else dvui.windowNaturalScale();
+    const img_size = canvas.getZoomedImageSize();
+    const viewport_rect = scroll.data().contentRect();
+    const scroll_current = dvui.Point{ .x = canvas.scroll.viewport.x, .y = canvas.scroll.viewport.y };
+
+    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,
+    };
+
+    const changed = canvas.updateVisibleImageRect(viewport_px, scroll_px);
+    if (changed)
+        canvas.requestRedraw();
+    canvas.processPendingRedraw() catch |err| {
+        std.debug.print("processPendingRedraw error: {}\n", .{err});
+    };
+
+    const content_w_px: u32 = img_size.x + img_size.w;
+    const content_h_px: u32 = img_size.y + img_size.h;
+    const content_w = @as(f32, @floatFromInt(content_w_px)) / natural_scale;
+    const content_h = @as(f32, @floatFromInt(content_h_px)) / natural_scale;
+
+    var canvas_layer = dvui.overlay(
+        @src(),
+        .{ .min_size_content = .{ .w = content_w, .h = content_h }, .background = false },
+    );
+    {
+        if (canvas.texture) |tex| {
+            const vis = canvas._visible_rect orelse Rect_i{ .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,
+                    },
+                },
+            );
+        }
+    }
+    canvas_layer.deinit();
+}
+
+fn handleCanvasZoom(canvas: *Canvas, scroll: anytype) void {
+    const ctrl = dvui.currentWindow().modifiers.control();
+    if (!ctrl) return;
+
+    const natural_scale = if (canvas.native_scaling) 1 else dvui.windowNaturalScale();
+
+    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| {
+                            const viewport_pt = scroll.data().contentRectScale().pointFromPhysical(mouse.p);
+                            const content_pt = dvui.Point{
+                                .x = viewport_pt.x + canvas.scroll.viewport.x,
+                                .y = viewport_pt.y + canvas.scroll.viewport.y,
+                            };
+                            const doc_pt = canvas.contentPointToDocument(content_pt, natural_scale);
+
+                            canvas.addZoom(y / 1000);
+                            canvas.requestRedraw();
+
+                            // Сдвигаем viewport так, чтобы точка под курсором (даже вне холста) не уезжала
+                            const new_zoom = canvas.getZoom();
+                            const img = canvas.getZoomedImageSize();
+                            const new_content_x = (@as(f32, @floatFromInt(img.x)) + doc_pt.x * new_zoom) / natural_scale;
+                            const new_content_y = (@as(f32, @floatFromInt(img.y)) + doc_pt.y * new_zoom) / natural_scale;
+                            canvas.scroll.viewport.x = new_content_x - viewport_pt.x;
+                            canvas.scroll.viewport.y = new_content_y - viewport_pt.y;
+                            const viewport_rect = scroll.data().contentRect();
+                            const content_w = @as(f32, @floatFromInt(img.x + img.w)) / natural_scale;
+                            const content_h = @as(f32, @floatFromInt(img.y + img.h)) / natural_scale;
+                            const max_x = @max(0, content_w - viewport_rect.w + canvas.pos.x);
+                            const max_y = @max(0, content_h - viewport_rect.h + canvas.pos.y);
+                            canvas.scroll.viewport.x = std.math.clamp(canvas.scroll.viewport.x, 0, max_x);
+                            canvas.scroll.viewport.y = std.math.clamp(canvas.scroll.viewport.y, 0, max_y);
+                        },
+                        else => {},
+                    }
+                    e.handled = true;
+                }
+            },
+            else => {},
+        }
+    }
+}
+
+fn handleCanvasMouse(canvas: *Canvas, scroll: anytype) void {
+    const natural_scale = if (canvas.native_scaling) 1 else dvui.windowNaturalScale();
+
+    for (dvui.events()) |*e| {
+        switch (e.evt) {
+            .mouse => |*mouse| {
+                if (mouse.action != .press or mouse.button != .left) continue;
+                if (!dvui.eventMatchSimple(e, scroll.data())) continue;
+
+                const viewport_pt = scroll.data().contentRectScale().pointFromPhysical(mouse.p);
+                const content_pt = dvui.Point{
+                    .x = viewport_pt.x + canvas.scroll.viewport.x,
+                    .y = viewport_pt.y + canvas.scroll.viewport.y,
+                };
+                const doc_pt = canvas.contentPointToDocument(content_pt, natural_scale);
+                canvas.cursor_document_point = if (canvas.isContentPointOnDocument(content_pt, natural_scale)) doc_pt else null;
+                if (canvas.cursor_document_point) |point|
+                    std.debug.print("cursor_document_point: {}\n", .{point});
+            },
+            else => {},
+        }
+    }
+}

src/ui/dvui_ext.zig

@@ -0,0 +1,7 @@
+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/frame.zig

@@ -0,0 +1,33 @@
+const dvui = @import("dvui");
+const WindowContext = @import("../WindowContext.zig");
+const tab_bar = @import("tab_bar.zig");
+const left_panel = @import("left_panel.zig");
+const right_panel = @import("right_panel.zig");
+
+pub fn guiFrame(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;
+    }
+
+    var root = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{ .expand = .both, .background = true, .style = .window },
+    );
+    {
+        tab_bar.tabBar(ctx);
+
+        var content_row = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .both });
+        {
+            left_panel.leftPanel(ctx);
+
+            right_panel.rightPanel(ctx);
+        }
+        content_row.deinit();
+    }
+    root.deinit();
+
+    ctx.frame_index += 1;
+    return true;
+}

src/ui/left_panel.zig

@@ -0,0 +1,137 @@
+const dvui = @import("dvui");
+const WindowContext = @import("../WindowContext.zig");
+const Document = @import("../models/Document.zig");
+const Object = Document.Object;
+
+const panel_gap: f32 = 12;
+const panel_padding: f32 = 5;
+const panel_radius: f32 = 24;
+const fill_color = dvui.Color.black.opacity(0.2);
+
+fn shapeLabel(shape: Object.ShapeKind) []const u8 {
+    return switch (shape) {
+        .line => "Line",
+        .ellipse => "Ellipse",
+        .arc => "Arc",
+        .broken => "Broken line",
+    };
+}
+
+fn objectTreeRow(obj: *const Object, depth: u32, row_id: *usize) void {
+    const id = row_id.*;
+    row_id.* += 1;
+    const indent_px = depth * 18;
+    var row = dvui.box(
+        @src(),
+        .{ .dir = .horizontal },
+        .{ .padding = dvui.Rect{ .x = @floatFromInt(indent_px) }, .id_extra = id },
+    );
+    {
+        dvui.labelNoFmt(@src(), shapeLabel(obj.shape), .{}, .{ .id_extra = id });
+    }
+    row.deinit();
+    for (obj.children.items) |*child| {
+        objectTreeRow(child, depth + 1, row_id);
+    }
+}
+
+fn objectTree(ctx: *WindowContext) void {
+    const active_doc = ctx.activeDocument();
+    if (active_doc) |open_doc| {
+        const doc = &open_doc.document;
+        if (doc.objects.items.len == 0) {
+            dvui.label(@src(), "No objects", .{}, .{});
+        } else {
+            var row_id: usize = 0;
+            for (doc.objects.items) |*obj| {
+                objectTreeRow(obj, 0, &row_id);
+            }
+        }
+    } else {
+        dvui.label(@src(), "No document", .{}, .{});
+    }
+}
+
+pub fn leftPanel(ctx: *WindowContext) void {
+    var padding = dvui.Rect.all(panel_gap);
+    padding.w = 0;
+    var panel = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{
+            .expand = .vertical,
+            .min_size_content = .{ .w = 220 },
+            .background = true,
+            .padding = padding,
+        },
+    );
+    {
+
+        // Нижняя часть: настройки
+        var settings_section = dvui.box(
+            @src(),
+            .{ .dir = .vertical },
+            .{
+                .expand = .horizontal,
+                .gravity_y = 1.0,
+                .margin = .{ .y = 5 },
+                .padding = dvui.Rect.all(panel_padding),
+                .corner_radius = dvui.Rect.all(panel_radius),
+                .color_fill = fill_color,
+                .background = true,
+            },
+        );
+        {
+            dvui.label(@src(), "Settings", .{}, .{});
+
+            const active_doc = ctx.activeDocument();
+            if (active_doc) |doc| {
+                const canvas = &doc.canvas;
+                if (dvui.checkbox(@src(), &canvas.native_scaling, "Scaling", .{})) {}
+                if (dvui.checkbox(@src(), &canvas.draw_document, "Draw document", .{})) {
+                    canvas.requestRedraw();
+                }
+                if (!canvas.draw_document) {
+                    if (dvui.button(@src(), if (doc.cpu_render.type == .Gradient) "Gradient" else "Squares", .{}, .{})) {
+                        if (doc.cpu_render.type == .Gradient) {
+                            doc.cpu_render.type = .Squares;
+                        } else {
+                            doc.cpu_render.type = .Gradient;
+                        }
+                        canvas.requestRedraw();
+                    }
+                }
+            } else {
+                dvui.label(@src(), "No document", .{}, .{});
+            }
+        }
+        settings_section.deinit();
+
+        // Верхняя часть: дерево объектов
+        var tree_section = dvui.box(
+            @src(),
+            .{ .dir = .vertical },
+            .{
+                .expand = .both,
+                .padding = dvui.Rect.all(panel_padding),
+                .corner_radius = dvui.Rect.all(panel_radius),
+                .color_fill = fill_color,
+                .background = true,
+            },
+        );
+        {
+            dvui.label(@src(), "Objects", .{}, .{});
+            var scroll = dvui.scrollArea(
+                @src(),
+                .{ .vertical = .auto },
+                .{ .expand = .both, .background = false },
+            );
+            {
+                objectTree(ctx);
+            }
+            scroll.deinit();
+        }
+        tree_section.deinit();
+    }
+    panel.deinit();
+}

src/ui/right_panel.zig

@@ -0,0 +1,68 @@
+const std = @import("std");
+const dvui = @import("dvui");
+const WindowContext = @import("../WindowContext.zig");
+const canvas_view = @import("canvas_view.zig");
+
+pub fn rightPanel(ctx: *WindowContext) void {
+    const fill_color = dvui.Color.black.opacity(0.25);
+    var back = dvui.box(
+        @src(),
+        .{ .dir = .horizontal },
+        .{ .expand = .both, .padding = dvui.Rect.all(12), .background = true },
+    );
+    {
+        var panel = dvui.box(
+            @src(),
+            .{ .dir = .vertical },
+            .{
+                .expand = .both,
+                .background = true,
+                .padding = dvui.Rect.all(5),
+                .corner_radius = dvui.Rect.all(24),
+                .color_fill = fill_color,
+            },
+        );
+        {
+            const active_doc = ctx.activeDocument();
+            if (active_doc) |doc| {
+                const content_rect_scale = panel.data().contentRectScale();
+                canvas_view.canvasView(&doc.canvas, content_rect_scale);
+            } else {
+                noDocView(ctx);
+            }
+        }
+        panel.deinit();
+    }
+    back.deinit();
+}
+
+fn noDocView(ctx: *WindowContext) void {
+    var center = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{
+            .expand = .both,
+            .padding = dvui.Rect.all(20),
+        },
+    );
+    {
+        var box = dvui.box(
+            @src(),
+            .{ .dir = .vertical },
+            .{
+                .gravity_x = 0.5,
+                .gravity_y = 0.5,
+            },
+        );
+        {
+            dvui.label(@src(), "No document open", .{}, .{});
+            if (dvui.button(@src(), "New document", .{}, .{})) {
+                ctx.addNewDocument() catch |err| {
+                    std.debug.print("addNewDocument error: {}\n", .{err});
+                };
+            }
+        }
+        box.deinit();
+    }
+    center.deinit();
+}

src/ui/tab_bar.zig

@@ -0,0 +1,26 @@
+const std = @import("std");
+const dvui = @import("dvui");
+const WindowContext = @import("../WindowContext.zig");
+
+pub fn tabBar(ctx: *WindowContext) void {
+    var bar = dvui.box(
+        @src(),
+        .{ .dir = .horizontal },
+        .{ .expand = .horizontal, .min_size_content = .{ .h = 32 }, .background = true, .padding = dvui.Rect.all(4) },
+    );
+    {
+        for (ctx.documents.items, 0..) |_, i| {
+            var buf: [32]u8 = undefined;
+            const label = std.fmt.bufPrint(&buf, "Doc {d}", .{i + 1}) catch "Doc";
+            if (dvui.button(@src(), label, .{}, .{ .id_extra = i })) {
+                ctx.setActiveDocument(i);
+            }
+        }
+        if (dvui.button(@src(), "+", .{}, .{})) {
+            ctx.addNewDocument() catch |err| {
+                std.debug.print("addNewDocument error: {}\n", .{err});
+            };
+        }
+    }
+    bar.deinit();
+}

src/ui/types/TexturedBox.zig

@@ -0,0 +1,33 @@
+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);
+            dvui.renderTexture(t, self.rs, .{
+                .corner_radius = self.corner_radius,
+            }) catch {};
+        }
+    }
+}