Класные таббары

build.zig

@@ -8,7 +8,8 @@ pub fn build(b: *std.Build) void {
 
     const exe = b.addExecutable(.{
         .name = "Zivro",
-        .use_llvm = optimize == .Debug,
+        .use_llvm = true,
+        .use_lld = true,
         .root_module = b.createModule(.{
             .root_source_file = b.path("src/main.zig"),
             .target = target,
@@ -19,7 +20,7 @@ pub fn build(b: *std.Build) void {
             },
         }),
     });
-
+    exe.bundle_compiler_rt = true;
     b.installArtifact(exe);
 
     const run_step = b.step("run", "Run the app");

src/Canvas.zig

@@ -33,6 +33,8 @@ cursor_document_point: ?Point2_f = null,
 draw_document: bool = true,
 /// Rect тулбара (из предыдущего кадра) для исключения кликов по нему из handleCanvasMouse.
 toolbar_rect_scale: ?dvui.RectScale = null,
+/// Rect панели свойств (из предыдущего кадра) для исключения кликов по нему из handleCanvasMouse.
+properties_rect_scale: ?dvui.RectScale = null,
 
 pub fn init(allocator: std.mem.Allocator, document: *Document, engine: RenderEngine) Canvas {
     return .{

src/WindowContext.zig

@@ -12,8 +12,8 @@ pub const OpenDocument = struct {
     document: Document,
     cpu_render: CpuRenderEngine,
     canvas: Canvas,
-    /// Выбранный объект в дереве (указатель, не индекс).
+    /// Выбранный объект в дереве (id объекта).
-    selected_object: ?*Document.Object = null,
+    selected_object_id: ?u64 = null,
 
     pub fn init(allocator: std.mem.Allocator, self: *OpenDocument) void {
         const default_size = basic_models.Size_f{ .w = 800, .h = 600 };
@@ -24,6 +24,7 @@ pub const OpenDocument = struct {
             &self.document,
             (&self.cpu_render).renderEngine(),
         );
+        self.selected_object_id = null;
     }
 
     pub fn deinit(self: *OpenDocument) void {

src/icons.zig

@@ -5,3 +5,5 @@ pub const ellipse = dvui.entypo.circle;
 pub const arc = dvui.entypo.loop;
 pub const broken = dvui.entypo.flow_line;
 pub const trash = dvui.entypo.trash;
+pub const cross = dvui.entypo.cross;
+pub const plus = dvui.entypo.plus;

src/models/Document.zig

@@ -9,12 +9,14 @@ const shape = @import("shape/shape.zig");
 size: Size_f,
 allocator: std.mem.Allocator,
 objects: std.ArrayList(Object),
+next_object_id: u64,
 
 pub fn init(allocator: std.mem.Allocator, size: Size_f) Document {
     return .{
         .size = size,
         .allocator = allocator,
         .objects = std.ArrayList(Object).empty,
+        .next_object_id = 1,
     };
 }
 
@@ -24,14 +26,25 @@ pub fn deinit(self: *Document) void {
 }
 
 pub fn addObject(self: *Document, template: Object) !void {
-    const obj = try template.clone(self.allocator);
+    const obj = try template.clone(self.allocator, &self.next_object_id);
     try self.objects.append(self.allocator, obj);
 }
 
+/// Добавляет объект в документ: как ребёнка родителя (если id найден), иначе в корень.
+pub fn addObjectUnderParentId(self: *Document, parent_id: ?u64, template: Object) !void {
+    if (parent_id) |id| {
+        if (self.findObjectById(id)) |parent| {
+            try parent.addChild(self.allocator, template, &self.next_object_id);
+            return;
+        }
+    }
+    try self.addObject(template);
+}
+
 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);
+        try p.addChild(self.allocator, obj, &self.next_object_id);
     } else {
         try self.addObject(obj);
     }
@@ -50,6 +63,27 @@ pub fn removeObject(self: *Document, obj: *Object) bool {
     return false;
 }
 
+/// Удаляет объект по id. Возвращает true, если объект был найден и удалён.
+pub fn removeObjectById(self: *Document, obj_id: u64) bool {
+    for (self.objects.items, 0..) |*item, i| {
+        if (item.id == obj_id) {
+            var removed = self.objects.orderedRemove(i);
+            removed.deinit(self.allocator);
+            return true;
+        }
+        if (removeFromChildrenById(self.allocator, &item.children, obj_id)) return true;
+    }
+    return false;
+}
+
+pub fn findObjectById(self: *Document, obj_id: u64) ?*Object {
+    for (self.objects.items) |*item| {
+        if (item.id == obj_id) return item;
+        if (findInChildrenById(&item.children, obj_id)) |found| return found;
+    }
+    return null;
+}
+
 fn removeFromChildren(allocator: std.mem.Allocator, children: *std.ArrayList(Object), obj: *Object) bool {
     for (children.items, 0..) |*item, i| {
         if (item == obj) {
@@ -61,3 +95,23 @@ fn removeFromChildren(allocator: std.mem.Allocator, children: *std.ArrayList(Obj
     }
     return false;
 }
+
+fn removeFromChildrenById(allocator: std.mem.Allocator, children: *std.ArrayList(Object), obj_id: u64) bool {
+    for (children.items, 0..) |*item, i| {
+        if (item.id == obj_id) {
+            var removed = children.orderedRemove(i);
+            removed.deinit(allocator);
+            return true;
+        }
+        if (removeFromChildrenById(allocator, &item.children, obj_id)) return true;
+    }
+    return false;
+}
+
+fn findInChildrenById(children: *std.ArrayList(Object), obj_id: u64) ?*Object {
+    for (children.items) |*item| {
+        if (item.id == obj_id) return item;
+        if (findInChildrenById(&item.children, obj_id)) |found| return found;
+    }
+    return null;
+}

src/models/Object.zig

@@ -29,6 +29,7 @@ pub const defaultCommonProperties: [default_common_data.len]Property = blk: {
     break :blk result;
 };
 
+id: u64,
 shape: ShapeKind,
 properties: std.ArrayList(Property),
 children: std.ArrayList(Object),
@@ -51,12 +52,12 @@ pub fn setProperty(self: *Object, allocator: std.mem.Allocator, prop: Property)
     return error.PropertyNotFound;
 }
 
-pub fn addChild(self: *Object, allocator: std.mem.Allocator, template: Object) !void {
+pub fn addChild(self: *Object, allocator: std.mem.Allocator, template: Object, next_id: *u64) !void {
-    const obj = try template.clone(allocator);
+    const obj = try template.clone(allocator, next_id);
     try self.children.append(allocator, obj);
 }
 
-pub fn clone(self: Object, allocator: std.mem.Allocator) !Object {
+pub fn clone(self: Object, allocator: std.mem.Allocator, next_id: *u64) !Object {
     var properties_list = std.ArrayList(Property).empty;
     errdefer properties_list.deinit(allocator);
     for (self.properties.items) |prop| {
@@ -66,16 +67,23 @@ pub fn clone(self: Object, allocator: std.mem.Allocator) !Object {
     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));
+        try children_list.append(allocator, try child.clone(allocator, next_id));
     }
 
     return .{
+        .id = allocId(next_id),
         .shape = self.shape,
         .properties = properties_list,
         .children = children_list,
     };
 }
 
+fn allocId(next_id: *u64) u64 {
+    const id = next_id.*;
+    next_id.* += 1;
+    return id;
+}
+
 pub fn deinit(self: *Object, allocator: std.mem.Allocator) void {
     for (self.children.items) |*child| child.deinit(allocator);
     self.children.deinit(allocator);

src/models/shape/shape.zig

@@ -29,6 +29,7 @@ fn createWithCommonProperties(allocator: std.mem.Allocator, shape_kind: Object.S
     errdefer properties_list.deinit(allocator);
     for (defaultCommonProperties) |prop| try properties_list.append(allocator, prop);
     return .{
+        .id = 0,
         .shape = shape_kind,
         .properties = properties_list,
         .children = std.ArrayList(Object).empty,

src/random_document.zig

@@ -117,7 +117,7 @@ pub fn addRandomShapes(doc: *Document, rng: std.Random) !void {
             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);
+            try obj.addChild(allocator, child, &doc.next_object_id);
             total_count += 1;
         }
         for (obj.children.items[base_len..]) |*child| {

src/render/cpu/draw.zig

@@ -13,19 +13,6 @@ 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;
 }
@@ -37,7 +24,7 @@ fn drawObject(
     allocator: std.mem.Allocator,
 ) !void {
     if (!isVisible(obj)) return;
-    const local = getLocalTransform(obj);
+    const local = Transform.init(obj);
     const world = Transform.compose(parent_transform, local);
     ctx.setTransform(world);
 

src/render/cpu/line.zig

@@ -28,7 +28,8 @@ pub fn drawLine(ctx: *DrawContext, x0: f32, y0: f32, x1: f32, y1: f32, color: Co
     const b1 = ctx.worldToBuffer(w1.x, w1.y);
     const t = &ctx.transform;
     const scale = @sqrt(t.scale.scale_x * ctx.scale_x * t.scale.scale_y * ctx.scale_y);
-    const thickness_px: u32 = @max(@as(u32, 1), @as(u32, @intFromFloat(std.math.round(thickness * scale))));
+    const thickness_px: u32 = @as(u32, @intFromFloat(std.math.round(thickness * scale)));
+    if (thickness_px > 0)
         drawLineInBuffer(ctx, b0.x, b0.y, b1.x, b1.y, color, thickness_px);
 }
 

src/render/cpu/pipeline.zig

@@ -1,6 +1,7 @@
 const std = @import("std");
 const dvui = @import("dvui");
 const basic_models = @import("../../models/basic_models.zig");
+const Document = @import("../../models/Document.zig");
 const Point2_f = basic_models.Point2_f;
 const Point2_i = basic_models.Point2_i;
 const Scale2_f = basic_models.Scale2_f;
@@ -14,6 +15,19 @@ pub const Transform = struct {
     scale: Scale2_f = .{},
     opacity: f32 = 1.0,
 
+    pub fn init(obj: *const Document.Object) Transform {
+        const pos = if (obj.getProperty(.position)) |p| p.position else 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 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,
+        };
+    }
+
     /// Композиция: world = parent * local.
     pub fn compose(parent: Transform, local: Transform) Transform {
         const cos_a = std.math.cos(parent.angle);
@@ -36,6 +50,20 @@ pub const Transform = struct {
     }
 };
 
+/// Мировые -> локальные для заданного трансформа.
+pub fn worldToLocalTransform(t: Transform, wx: f32, wy: f32) Point2_f {
+    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,
+    };
+}
+
 /// Конвейер отрисовки: локальные координаты -> трансформ -> буфер.
 pub const DrawContext = struct {
     pixels: []Color.PMA,
@@ -100,17 +128,7 @@ pub const DrawContext = struct {
 
     /// Мировые -> локальные.
     pub fn worldToLocal(self: *const DrawContext, wx: f32, wy: f32) Point2_f {
-        const t = &self.transform;
+        return worldToLocalTransform(self.transform, wx, wy);
-        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,
-        };
     }
 
     /// Смешивает цвет в пикселе буфера с учётом opacity трансформа. В replace_mode просто перезаписывает пиксель.

src/toolbar/Tool.zig

@@ -1,11 +1,51 @@
-const Point2_f = @import("../models/basic_models.zig").Point2_f;
+const basic_models = @import("../models/basic_models.zig");
+const Point2_f = basic_models.Point2_f;
 const Canvas = @import("../Canvas.zig");
+const Document = @import("../models/Document.zig");
+const pipeline = @import("../render/cpu/pipeline.zig");
+const Transform = pipeline.Transform;
 
 pub const ToolContext = struct {
     canvas: *Canvas,
     document_point: Point2_f,
+    selected_object_id: ?u64,
+
+    pub fn addObject(self: *const ToolContext, template: Document.Object) !void {
+        var obj = template;
+        const local_pos = self.computeLocalPosition();
+        try obj.setProperty(self.canvas.document.allocator, .{ .data = .{ .position = local_pos } });
+        try self.canvas.document.addObjectUnderParentId(self.selected_object_id, obj);
+        self.canvas.requestRedraw();
+    }
+
+    fn computeLocalPosition(self: *const ToolContext) Point2_f {
+        if (self.selected_object_id) |parent_id| {
+            if (findWorldTransformById(self.canvas.document, parent_id)) |parent_world| {
+                return pipeline.worldToLocalTransform(parent_world, self.document_point.x, self.document_point.y);
+            }
+        }
+        return self.document_point;
+    }
 };
 
+fn findWorldTransformById(doc: *Document, target_id: u64) ?Transform {
+    const identity = Transform{};
+    for (doc.objects.items) |*obj| {
+        if (findWorldTransformInTree(obj, identity, target_id)) |t| return t;
+    }
+    return null;
+}
+
+fn findWorldTransformInTree(obj: *const Document.Object, parent: Transform, target_id: u64) ?Transform {
+    const local = Transform.init(obj);
+    const world = Transform.compose(parent, local);
+    if (obj.id == target_id) return world;
+    for (obj.children.items) |*child| {
+        if (findWorldTransformInTree(child, world, target_id)) |t| return t;
+    }
+    return null;
+}
+
 pub const Tool = struct {
     onCanvasClick: *const fn (*const ToolContext) anyerror!void,
 };

src/toolbar/tools/arc.zig

@@ -5,8 +5,6 @@ fn onCanvasClick(ctx: *const Tool.ToolContext) !void {
     const canvas = ctx.canvas;
     var obj = shape.createObject(canvas.document.allocator, .arc) catch return;
     defer obj.deinit(canvas.allocator);
-    try obj.setProperty(canvas.document.allocator, .{ .data = .{ .position = ctx.document_point } });
+    try ctx.addObject(obj);
-    try canvas.document.addObject(obj);
-    canvas.requestRedraw();
 }
 pub const tool = Tool.Tool{ .onCanvasClick = onCanvasClick };

src/toolbar/tools/broken.zig

@@ -5,8 +5,6 @@ fn onCanvasClick(ctx: *const Tool.ToolContext) !void {
     const canvas = ctx.canvas;
     var obj = shape.createObject(canvas.document.allocator, .broken) catch return;
     defer obj.deinit(canvas.allocator);
-    try obj.setProperty(canvas.document.allocator, .{ .data = .{ .position = ctx.document_point } });
+    try ctx.addObject(obj);
-    try canvas.document.addObject(obj);
-    canvas.requestRedraw();
 }
 pub const tool = Tool.Tool{ .onCanvasClick = onCanvasClick };

src/toolbar/tools/ellipse.zig

@@ -5,8 +5,6 @@ fn onCanvasClick(ctx: *const Tool.ToolContext) !void {
     const canvas = ctx.canvas;
     var obj = shape.createObject(canvas.document.allocator, .ellipse) catch return;
     defer obj.deinit(canvas.allocator);
-    try obj.setProperty(canvas.document.allocator, .{ .data = .{ .position = ctx.document_point } });
+    try ctx.addObject(obj);
-    try canvas.document.addObject(obj);
-    canvas.requestRedraw();
 }
 pub const tool = Tool.Tool{ .onCanvasClick = onCanvasClick };

src/toolbar/tools/line.zig

@@ -7,8 +7,6 @@ fn onCanvasClick(ctx: *const Tool.ToolContext) !void {
     const canvas = ctx.canvas;
     var obj = shape.createObject(canvas.document.allocator, .line) catch return;
     defer obj.deinit(canvas.allocator);
-    try obj.setProperty(canvas.document.allocator, .{ .data = .{ .position = ctx.document_point } });
+    try ctx.addObject(obj);
-    try canvas.document.addObject(obj);
-    canvas.requestRedraw();
 }
 pub const tool = Tool.Tool{ .onCanvasClick = onCanvasClick };

src/ui/canvas_view.zig

@@ -2,29 +2,39 @@ const std = @import("std");
 const dvui = @import("dvui");
 const dvui_ext = @import("dvui_ext.zig");
 const Canvas = @import("../Canvas.zig");
+const Document = @import("../models/Document.zig");
+const Property = @import("../models/Property.zig").Property;
+const PropertyData = @import("../models/Property.zig").Data;
 const Rect_i = @import("../models/basic_models.zig").Rect_i;
 const Tool = @import("../toolbar/Tool.zig");
 
-pub fn canvasView(canvas: *Canvas, content_rect_scale: dvui.RectScale) void {
+pub fn canvasView(canvas: *Canvas, selected_object_id: ?u64, 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 });
         {
+            const overlay_parent = dvui.parentGet();
             var scroll = dvui.scrollArea(
                 @src(),
                 .{
                     .scroll_info = &canvas.scroll,
                     .vertical_bar = .auto,
                     .horizontal_bar = .auto,
+                    .process_events_after = false,
+                },
+                .{
+                    .expand = .both,
+                    .background = false,
                 },
-                .{ .expand = .both, .background = false },
             );
             {
                 drawCanvasContent(canvas, scroll);
                 handleCanvasZoom(canvas, scroll);
-                handleCanvasMouse(canvas, scroll);
+                handleCanvasMouse(canvas, scroll, selected_object_id);
             }
-            scroll.deinit();
+
+            const scroll_parent = dvui.parentGet();
+            dvui.parentSet(overlay_parent);
 
             // Тулбар поверх scroll
             var toolbar_box = dvui.box(
@@ -35,7 +45,7 @@ pub fn canvasView(canvas: *Canvas, content_rect_scale: dvui.RectScale) void {
                     .background = false,
                     .gravity_x = 0.0,
                     .gravity_y = 0.0,
-                    .margin = dvui.Rect{ .x = 8, .y = 8 },
+                    .margin = dvui.Rect{ .x = 16, .y = 16 },
                 },
             );
             {
@@ -45,7 +55,54 @@ pub fn canvasView(canvas: *Canvas, content_rect_scale: dvui.RectScale) void {
             canvas.toolbar_rect_scale = toolbar_box.data().contentRectScale();
             toolbar_box.deinit();
 
+            // Панель свойств поверх scroll (правый верхний угол)
+            if (selected_object_id) |obj_id| {
+                if (canvas.document.findObjectById(obj_id)) |obj| {
+                    var properties_box = dvui.box(
+                        @src(),
+                        .{ .dir = .horizontal },
+                        .{
+                            .expand = .none,
+                            .background = false,
+                            .gravity_x = 1.0,
+                            .gravity_y = 0.0,
+                            .margin = dvui.Rect{ .w = 32, .y = 16, .h = 100 },
+                        },
+                    );
+                    {
+                        drawPropertiesPanel(canvas, obj);
+                    }
+                    // Сохраняем rect панели свойств для следующего кадра — в handleCanvasMouse исключаем из него клики
+                    canvas.properties_rect_scale = properties_box.data().contentRectScale();
+                    properties_box.deinit();
+                }
+            }
+
             dvui.label(@src(), "Canvas", .{}, .{ .gravity_x = 0.5, .gravity_y = 0.0 });
+
+            if (canvas.properties_rect_scale) |prs| {
+                for (dvui.events()) |*e| {
+                    if (e.handled) continue;
+                    if (e.evt != .mouse) continue;
+                    const mouse = &e.evt.mouse;
+                    if (mouse.action != .wheel_x and mouse.action != .wheel_y) continue;
+                    const pt = prs.pointFromPhysical(mouse.p);
+                    const r = prs.r;
+                    if (pt.x >= 0 and pt.x * prs.s < r.w and pt.y >= 0 and pt.y * prs.s < r.h) {
+                        e.handled = true;
+                    }
+                }
+            }
+
+            if (!scroll.init_opts.process_events_after) {
+                if (scroll.scroll) |*sc| {
+                    dvui.clipSet(sc.prevClip);
+                    sc.processEventsAfter();
+                }
+            }
+
+            dvui.parentSet(scroll_parent);
+            scroll.deinit();
         }
         overlay.deinit();
     }
@@ -136,23 +193,17 @@ fn handleCanvasZoom(canvas: *Canvas, scroll: anytype) void {
                             const doc_pt = canvas.contentPointToDocument(content_pt, natural_scale);
 
                             // canvas.addZoom(y / 1000);
-                            canvas.multZoom(1 + y / 3000);
+                            canvas.multZoom(1 + y / 2000);
                             canvas.requestRedraw();
 
-                            // Сдвигаем viewport так, чтобы точка под курсором (даже вне холста) не уезжала
+                            const doc_pt_after = canvas.contentPointToDocument(content_pt, natural_scale);
-                            const new_zoom = canvas.getZoom();
+
-                            const img = canvas.getZoomedImageSize();
+                            const zoom = canvas.getZoom();
-                            const new_content_x = (@as(f32, @floatFromInt(img.x)) + doc_pt.x * new_zoom) / natural_scale;
+                            const dx = (doc_pt_after.x - doc_pt.x) * zoom / natural_scale;
-                            const new_content_y = (@as(f32, @floatFromInt(img.y)) + doc_pt.y * new_zoom) / natural_scale;
+                            const dy = (doc_pt_after.y - doc_pt.y) * zoom / natural_scale;
-                            canvas.scroll.viewport.x = new_content_x - viewport_pt.x;
+
-                            canvas.scroll.viewport.y = new_content_y - viewport_pt.y;
+                            canvas.scroll.viewport.x -= dx;
-                            const viewport_rect = scroll.data().contentRect();
+                            canvas.scroll.viewport.y -= dy;
-                            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 => {},
                     }
@@ -164,7 +215,7 @@ fn handleCanvasZoom(canvas: *Canvas, scroll: anytype) void {
     }
 }
 
-fn handleCanvasMouse(canvas: *Canvas, scroll: *dvui.ScrollAreaWidget) void {
+fn handleCanvasMouse(canvas: *Canvas, scroll: *dvui.ScrollAreaWidget, selected_object_id: ?u64) void {
     const natural_scale = if (canvas.native_scaling) 1 else dvui.windowNaturalScale();
     const scroll_data = scroll.data();
 
@@ -181,6 +232,12 @@ fn handleCanvasMouse(canvas: *Canvas, scroll: *dvui.ScrollAreaWidget) void {
                     const r = trs.r;
                     if (pt.x >= 0 and pt.x * trs.s < r.w and pt.y >= 0 and pt.y * trs.s < r.h) continue;
                 }
+                // Не обрабатывать клик, если он попал в область панели свойств (rect с предыдущего кадра).
+                if (canvas.properties_rect_scale) |prs| {
+                    const pt = prs.pointFromPhysical(mouse.p);
+                    const r = prs.r;
+                    if (pt.x >= 0 and pt.x * prs.s < r.w and pt.y >= 0 and pt.y * prs.s < r.h) continue;
+                }
 
                 const viewport_pt = scroll_data.contentRectScale().pointFromPhysical(mouse.p);
                 const content_pt = dvui.Point{
@@ -194,6 +251,7 @@ fn handleCanvasMouse(canvas: *Canvas, scroll: *dvui.ScrollAreaWidget) void {
                         var ctx = Tool.ToolContext{
                             .canvas = canvas,
                             .document_point = point,
+                            .selected_object_id = selected_object_id,
                         };
                         desc.implementation.onCanvasClick(&ctx) catch |err| {
                             std.debug.print("onCanvasClick error: {}\n", .{err});
@@ -216,7 +274,6 @@ fn drawToolbar(canvas: *Canvas) void {
         .{
             .gravity_x = 0.0,
             .gravity_y = 0.0,
-            .margin = dvui.Rect{ .x = 8, .y = 8 },
             .padding = dvui.Rect.all(6),
             .corner_radius = dvui.Rect.all(8),
             .background = true,
@@ -242,3 +299,298 @@ fn drawToolbar(canvas: *Canvas) void {
     }
     bar.deinit();
 }
+
+fn drawPropertiesPanel(canvas: *Canvas, selected_object: *Document.Object) void {
+    var panel = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{
+            .gravity_x = 1.0,
+            .gravity_y = 0.0,
+            .padding = dvui.Rect.all(8),
+            .corner_radius = dvui.Rect.all(8),
+            .background = true,
+            .color_fill = dvui.Color.black.opacity(0.2),
+            .min_size_content = .{ .w = 220 },
+        },
+    );
+    {
+        dvui.label(@src(), "Properties", .{}, .{});
+        var scroll = dvui.scrollArea(@src(), .{
+            .horizontal = .none,
+            .vertical = .auto,
+        }, .{
+            .expand = .both,
+        });
+        {
+            for (selected_object.properties.items, 0..) |*prop, i| {
+                drawPropertyEditor(canvas, selected_object, prop, i);
+            }
+        }
+        scroll.deinit();
+    }
+    panel.deinit();
+}
+
+fn drawPropertyEditor(canvas: *Canvas, obj: *Document.Object, prop: *const Property, row_index: usize) void {
+    const row_id: usize = row_index * 16;
+    var row = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{
+            .id_extra = row_id,
+            .expand = .horizontal,
+            .padding = dvui.Rect{ .y = 2 },
+        },
+    );
+    {
+        const tag = std.meta.activeTag(prop.data);
+        dvui.labelNoFmt(@src(), propertyLabel(tag), .{}, .{});
+
+        switch (prop.data) {
+            .position => |pos| {
+                var next = pos;
+                const doc = canvas.document;
+                const min_x = -doc.size.w;
+                const max_x = doc.size.w;
+                const min_y = -doc.size.h;
+                const max_y = doc.size.h;
+                var changed = false;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "x:", .{}, .{});
+                    const T = @TypeOf(next.x);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.x, .min = @as(T, min_x), .max = @as(T, max_x) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "y:", .{}, .{});
+                    const T = @TypeOf(next.y);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.y, .min = @as(T, min_y), .max = @as(T, max_y) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                if (changed) {
+                    obj.setProperty(canvas.document.allocator, .{ .data = .{ .position = next } }) catch {};
+                    canvas.requestRedraw();
+                }
+            },
+            .angle => |angle| {
+                var next = angle;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "deg:", .{}, .{});
+                    var degrees: f32 = next * 180.0 / std.math.pi;
+                    const res = dvui.textEntryNumber(@src(), f32, .{ .value = &degrees }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    if (res.changed) {
+                        next = degrees * std.math.pi / 180.0;
+                        obj.setProperty(canvas.document.allocator, .{ .data = .{ .angle = next } }) catch {};
+                        canvas.requestRedraw();
+                    }
+                }
+            },
+            .scale => |scale| {
+                var next = scale;
+                var changed = false;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "x:", .{}, .{});
+                    const T = @TypeOf(next.scale_x);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.scale_x, .min = @as(T, 0.0), .max = @as(T, 10.0) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "y:", .{}, .{});
+                    const T = @TypeOf(next.scale_y);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.scale_y, .min = @as(T, 0.0), .max = @as(T, 10.0) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                if (changed) {
+                    obj.setProperty(canvas.document.allocator, .{ .data = .{ .scale = next } }) catch {};
+                    canvas.requestRedraw();
+                }
+            },
+            .visible => |v| {
+                var next = v;
+                if (dvui.checkbox(@src(), &next, "Visible", .{})) {
+                    obj.setProperty(canvas.document.allocator, .{ .data = .{ .visible = next } }) catch {};
+                    canvas.requestRedraw();
+                }
+            },
+            .opacity => |opacity| {
+                var next = opacity;
+                if (dvui.sliderEntry(@src(), "{d:0.2}", .{ .value = &next, .min = 0.0, .max = 1.0, .interval = 0.01 }, .{ .expand = .horizontal })) {
+                    obj.setProperty(canvas.document.allocator, .{ .data = .{ .opacity = next } }) catch {};
+                    canvas.requestRedraw();
+                }
+            },
+            .locked => |v| {
+                var next = v;
+                if (dvui.checkbox(@src(), &next, "Locked", .{})) {
+                    obj.setProperty(canvas.document.allocator, .{ .data = .{ .locked = next } }) catch {};
+                    canvas.requestRedraw();
+                }
+            },
+            .size => |size| {
+                var next = size;
+                const doc = canvas.document;
+                var changed = false;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "w:", .{}, .{});
+                    const T = @TypeOf(next.w);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.w, .min = @as(T, 0.0), .max = @as(T, doc.size.w) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "h:", .{}, .{});
+                    const T = @TypeOf(next.h);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.h, .min = @as(T, 0.0), .max = @as(T, doc.size.h) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                if (changed) {
+                    obj.setProperty(canvas.document.allocator, .{ .data = .{ .size = next } }) catch {};
+                    canvas.requestRedraw();
+                }
+            },
+            .radii => |radii| {
+                var next = radii;
+                const doc = canvas.document;
+                var changed = false;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "x:", .{}, .{});
+                    const T = @TypeOf(next.x);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.x, .min = @as(T, 0.0), .max = @as(T, doc.size.w) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "y:", .{}, .{});
+                    const T = @TypeOf(next.y);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.y, .min = @as(T, 0.0), .max = @as(T, doc.size.h) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                if (changed) {
+                    obj.setProperty(canvas.document.allocator, .{ .data = .{ .radii = next } }) catch {};
+                    canvas.requestRedraw();
+                }
+            },
+            .end_point => |pt| {
+                var next = pt;
+                const doc = canvas.document;
+                const min_x = -doc.size.w;
+                const max_x = doc.size.w;
+                const min_y = -doc.size.h;
+                const max_y = doc.size.h;
+                var changed = false;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "x:", .{}, .{});
+                    const T = @TypeOf(next.x);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.x, .min = @as(T, min_x), .max = @as(T, max_x) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "y:", .{}, .{});
+                    const T = @TypeOf(next.y);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next.y, .min = @as(T, min_y), .max = @as(T, max_y) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    changed = res.changed or changed;
+                }
+                if (changed) {
+                    obj.setProperty(canvas.document.allocator, .{ .data = .{ .end_point = next } }) catch {};
+                    canvas.requestRedraw();
+                }
+            },
+            .points => |points| {
+                dvui.label(@src(), "Points: {d}", .{points.items.len}, .{});
+            },
+            .fill_rgba => |rgba| {
+                drawColorEditor(canvas, obj, rgba, true);
+            },
+            .stroke_rgba => |rgba| {
+                drawColorEditor(canvas, obj, rgba, false);
+            },
+            .thickness => |t| {
+                var next = t;
+                {
+                    var subrow = dvui.box(@src(), .{ .dir = .horizontal }, .{ .expand = .horizontal });
+                    dvui.labelNoFmt(@src(), "thickness:", .{}, .{});
+                    const T = @TypeOf(next);
+                    const res = dvui.textEntryNumber(@src(), T, .{ .value = &next, .min = @as(T, 0.0), .max = @as(T, 100.0) }, .{ .expand = .horizontal });
+                    subrow.deinit();
+                    if (res.changed) {
+                        obj.setProperty(canvas.document.allocator, .{ .data = .{ .thickness = next } }) catch {};
+                        canvas.requestRedraw();
+                    }
+                }
+            },
+        }
+    }
+    row.deinit();
+}
+
+fn drawColorEditor(canvas: *Canvas, obj: *Document.Object, rgba: u32, is_fill: bool) void {
+    var hsv = dvui.Color.HSV.fromColor(rgbaToColor(rgba));
+    if (dvui.colorPicker(
+        @src(),
+        .{ .hsv = &hsv, .dir = .horizontal, .sliders = .rgb, .alpha = true, .hex_text_entry = true },
+        .{ .expand = .horizontal },
+    )) {
+        const next = colorToRgba(hsv.toColor());
+        if (is_fill) {
+            obj.setProperty(canvas.document.allocator, .{ .data = .{ .fill_rgba = next } }) catch {};
+        } else {
+            obj.setProperty(canvas.document.allocator, .{ .data = .{ .stroke_rgba = next } }) catch {};
+        }
+        canvas.requestRedraw();
+    }
+}
+
+fn propertyLabel(tag: std.meta.Tag(PropertyData)) []const u8 {
+    return switch (tag) {
+        .position => "Position",
+        .angle => "Angle",
+        .scale => "Scale",
+        .visible => "Visible",
+        .opacity => "Opacity",
+        .locked => "Locked",
+        .size => "Size",
+        .radii => "Radii",
+        .end_point => "End point",
+        .points => "Points",
+        .fill_rgba => "Fill color",
+        .stroke_rgba => "Stroke color",
+        .thickness => "Thickness",
+    };
+}
+
+fn rgbaToColor(rgba: u32) dvui.Color {
+    return .{
+        .r = @intCast((rgba >> 24) & 0xFF),
+        .g = @intCast((rgba >> 16) & 0xFF),
+        .b = @intCast((rgba >> 8) & 0xFF),
+        .a = @intCast((rgba >> 0) & 0xFF),
+    };
+}
+
+fn colorToRgba(color: dvui.Color) u32 {
+    return (@as(u32, color.r) << 24) |
+        (@as(u32, color.g) << 16) |
+        (@as(u32, color.b) << 8) |
+        (@as(u32, color.a) << 0);
+}

src/ui/left_panel.zig

@@ -11,8 +11,8 @@ const panel_radius: f32 = 24;
 const fill_color = dvui.Color.black.opacity(0.2);
 
 const ObjectTreeCallback = union(enum) {
-    select: *Object,
+    select: u64,
-    delete: *Object,
+    delete: u64,
 };
 
 fn shapeLabel(shape: Object.ShapeKind) []const u8 {
@@ -26,8 +26,8 @@ fn shapeLabel(shape: Object.ShapeKind) []const u8 {
 
 fn objectTreeRow(open_doc: *WindowContext.OpenDocument, obj: *Object, depth: u32, object_callback: *?ObjectTreeCallback) void {
     const indent_px = depth * 18;
-    const is_selected: bool = open_doc.selected_object == obj;
+    const is_selected: bool = open_doc.selected_object_id == obj.id;
-    const row_id = @intFromPtr(obj);
+    const row_id: usize = @intCast(obj.id);
 
     const focus_color = dvui.themeGet().focus;
 
@@ -77,20 +77,20 @@ fn objectTreeRow(open_doc: *WindowContext.OpenDocument, obj: *Object, depth: u32
             if (hovered) {
                 const delete_opts: dvui.Options = .{
                     .id_extra = row_id +% 1,
-                    .margin = dvui.Rect{ .x = 4 },
+                    .margin = dvui.Rect{ .x = 4, .w = 6 },
                     .padding = dvui.Rect.all(2),
                     .gravity_y = 0.5,
                     .gravity_x = 1.0,
                 };
                 if (dvui.buttonIcon(@src(), "Delete object", icons.trash, .{}, .{}, delete_opts)) {
-                    object_callback.* = .{ .delete = obj };
+                    object_callback.* = .{ .delete = obj.id };
                 }
             }
         }
         content.deinit();
 
         if (select_row) {
-            object_callback.* = .{ .select = obj };
+            object_callback.* = .{ .select = obj.id };
         }
     }
     row.deinit();
@@ -113,16 +113,16 @@ fn objectTree(ctx: *WindowContext) void {
         }
         if (object_callback) |callback| {
             switch (callback) {
-                .select => |obj| {
+                .select => |obj_id| {
-                    if (open_doc.selected_object == obj) {
+                    if (open_doc.selected_object_id == obj_id) {
-                        open_doc.selected_object = null;
+                        open_doc.selected_object_id = null;
                     } else {
-                        open_doc.selected_object = obj;
+                        open_doc.selected_object_id = obj_id;
                     }
                 },
-                .delete => |obj| {
+                .delete => |obj_id| {
-                    _ = doc.removeObject(obj);
+                    _ = doc.removeObjectById(obj_id);
-                    open_doc.selected_object = null;
+                    open_doc.selected_object_id = null;
                     open_doc.canvas.requestRedraw();
                 },
             }

src/ui/right_panel.zig

@@ -26,7 +26,7 @@ pub fn rightPanel(ctx: *WindowContext) void {
             const active_doc = ctx.activeDocument();
             if (active_doc) |doc| {
                 const content_rect_scale = panel.data().contentRectScale();
-                canvas_view.canvasView(&doc.canvas, content_rect_scale);
+                canvas_view.canvasView(&doc.canvas, doc.selected_object_id, content_rect_scale);
             } else {
                 noDocView(ctx);
             }

src/ui/tab_bar.zig

@@ -1,22 +1,112 @@
 const std = @import("std");
 const dvui = @import("dvui");
+const icons = @import("../icons.zig");
 const WindowContext = @import("../WindowContext.zig");
 
+const DocCallback = union(enum) {
+    select: usize,
+    close: usize,
+};
+
+fn documentTab(ctx: *WindowContext, index: usize, callback: *?DocCallback) void {
+    const row_id: usize = index;
+    const is_selected = if (ctx.active_document_index) |active| active == index else false;
+    const focus_color = dvui.themeGet().focus;
+
+    var row = dvui.box(
+        @src(),
+        .{ .dir = .horizontal },
+        .{
+            .id_extra = row_id,
+            .expand = .none,
+            .gravity_y = 0.5,
+        },
+    );
+    {
+        var hovered: bool = false;
+        var select_row: bool = false;
+        const row_data = row.data();
+
+        // Ручная обработка hover/click по строке без пометки события как handled,
+        // чтобы кнопка закрытия могла нормально получать свои события.
+        for (dvui.events()) |*e| {
+            switch (e.evt) {
+                .mouse => |*mouse| {
+                    if (!dvui.eventMatchSimple(e, row_data)) continue;
+                    hovered = true;
+                    if (mouse.action == .press and mouse.button == .left) {
+                        select_row = true;
+                    }
+                },
+                else => {},
+            }
+        }
+
+        var overlay = dvui.overlay(@src(), .{
+            .margin = dvui.Rect{ .x = 4, .w = 4 },
+            .padding = dvui.Rect{ .x = 12, .y = 0, .w = 0, .h = 0 },
+            .background = is_selected or hovered,
+            .color_fill = if (is_selected) focus_color.opacity(0.35) else if (hovered) focus_color.opacity(0.18) else null,
+            .corner_radius = dvui.Rect.all(4),
+        });
+        {
+            var buf: [32]u8 = undefined;
+            const label = std.fmt.bufPrint(&buf, "Doc {d}", .{index + 1}) catch "Doc";
+            dvui.labelNoFmt(@src(), label, .{}, .{
+                .gravity_x = 0.5,
+                .gravity_y = 0.5,
+                .margin = .{ .w = 24 },
+            });
+
+            if (hovered) {
+                if (dvui.buttonIcon(@src(), "Close", icons.cross, .{}, .{}, .{
+                    .id_extra = row_id +% 1,
+                    .margin = dvui.Rect{ .x = 8, .w = 6 },
+                    .padding = dvui.Rect.all(2),
+                    .gravity_x = 1,
+                    .gravity_y = 0.5,
+                })) {
+                    callback.* = .{ .close = index };
+                }
+            }
+        }
+        overlay.deinit();
+
+        if (select_row) {
+            callback.* = .{ .select = index };
+        }
+    }
+    row.deinit();
+}
+
 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) },
+        .{
+            .expand = .horizontal,
+            .background = true,
+            .padding = .{
+                .x = 12,
+                .w = 12,
+            },
+        },
     );
     {
+        var callback: ?DocCallback = null;
         for (ctx.documents.items, 0..) |_, i| {
-            var buf: [32]u8 = undefined;
+            documentTab(ctx, i, &callback);
-            const label = std.fmt.bufPrint(&buf, "Doc {d}", .{i + 1}) catch "Doc";
+        }
-            if (dvui.button(@src(), label, .{}, .{ .id_extra = i })) {
+        if (callback) |action| {
-                ctx.setActiveDocument(i);
+            switch (action) {
+                .select => |index| ctx.setActiveDocument(index),
+                .close => |index| ctx.closeDocument(index),
             }
         }
-        if (dvui.button(@src(), "+", .{}, .{})) {
+
+        if (dvui.buttonIcon(@src(), "Create", icons.plus, .{}, .{}, .{
+            .gravity_y = 0,
+        })) {
             ctx.addNewDocument() catch |err| {
                 std.debug.print("addNewDocument error: {}\n", .{err});
             };