Случайное дерево объектов

src/ui/left_panel.zig

@@ -1,30 +1,130 @@
 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 = 200 }, .background = true },
+        .{
+            .expand = .vertical,
+            .min_size_content = .{ .w = 220 },
+            .background = true,
+            .padding = padding,
+        },
     );
     {
-        dvui.label(@src(), "Tools", .{}, .{});
-
-        const active_doc = ctx.activeDocument();
-        if (active_doc) |doc| {
-            const canvas = &doc.canvas;
-            if (dvui.checkbox(@src(), &canvas.native_scaling, "Scaling", .{})) {}
-            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.redrawExample() catch {};
+        // Верхняя часть: дерево объектов
+        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 = .vertical, .background = false },
+            );
+            {
+                objectTree(ctx);
             }
-        } else {
-            dvui.label(@src(), "No document", .{}, .{});
+            scroll.deinit();
         }
+        tree_section.deinit();
+
+        // Нижняя часть: настройки
+        var settings_section = dvui.box(
+            @src(),
+            .{ .dir = .vertical },
+            .{
+                .expand = .horizontal,
+                .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.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.redrawExample() catch {};
+                }
+            } else {
+                dvui.label(@src(), "No document", .{}, .{});
+            }
+        }
+        settings_section.deinit();
     }
     panel.deinit();
 }