статистика времени кадра

src/ui/canvas_view.zig

@@ -7,6 +7,7 @@ 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");
+const RenderStats = @import("../render/RenderStats.zig");
 
 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));
@@ -36,23 +37,27 @@ pub fn canvasView(canvas: *Canvas, selected_object_id: ?u64, content_rect_scale:
             const scroll_parent = dvui.parentGet();
             dvui.parentSet(overlay_parent);
 
+            const vbar = scroll.vbar;
+            const hbar = scroll.hbar;
+            if (vbar != null) {
+
+                // std.debug.print("{any}", .{vbar.?.data()});
+            }
+            if (hbar != null) {
+                // std.debug.print("{any}", .{hbar.?.data()});
+            }
+
             // Тулбар поверх scroll
             var toolbar_box = dvui.box(
                 @src(),
                 .{ .dir = .horizontal },
-                .{
-                    .expand = .none,
-                    .background = false,
-                    .gravity_x = 0.0,
-                    .gravity_y = 0.0,
-                    .margin = dvui.Rect{ .x = 16, .y = 16 },
-                },
+                .{},
             );
             {
                 drawToolbar(canvas);
+                // Сохраняем rect тулбара для следующего кадра — в handleCanvasMouse исключаем из него клики
+                canvas.toolbar_rect_scale = toolbar_box.data().contentRectScale();
             }
-            // Сохраняем rect тулбара для следующего кадра — в handleCanvasMouse исключаем из него клики
-            canvas.toolbar_rect_scale = toolbar_box.data().contentRectScale();
             toolbar_box.deinit();
 
             // Панель свойств поверх scroll (правый верхний угол)
@@ -61,24 +66,20 @@ pub fn canvasView(canvas: *Canvas, selected_object_id: ?u64, content_rect_scale:
                     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();
                     }
-                    // Сохраняем 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 });
+            drawCanvasLabelPanel();
+            if (canvas.show_render_stats)
+                drawStatsPanel(canvas.render_engine.getStats(), canvas.frame_index);
 
             if (canvas.properties_rect_scale) |prs| {
                 for (dvui.events()) |*e| {
@@ -278,6 +279,7 @@ fn drawToolbar(canvas: *Canvas) void {
             .corner_radius = dvui.Rect.all(8),
             .background = true,
             .color_fill = dvui.Color.black.opacity(0.2),
+            .margin = dvui.Rect{ .x = 16, .y = 16 },
         },
     );
     {
@@ -312,6 +314,7 @@ fn drawPropertiesPanel(canvas: *Canvas, selected_object: *Document.Object) void
             .background = true,
             .color_fill = dvui.Color.black.opacity(0.2),
             .min_size_content = .{ .w = 220 },
+            .margin = dvui.Rect{ .w = 32, .y = 16, .h = 100 },
         },
     );
     {
@@ -332,6 +335,47 @@ fn drawPropertiesPanel(canvas: *Canvas, selected_object: *Document.Object) void
     panel.deinit();
 }
 
+fn drawCanvasLabelPanel() void {
+    var panel = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{
+            .gravity_x = 0.5,
+            .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),
+            .margin = dvui.Rect{ .x = 16, .y = 16 },
+        },
+    );
+    {
+        dvui.label(@src(), "Canvas", .{}, .{});
+    }
+    panel.deinit();
+}
+
+fn drawStatsPanel(stats: RenderStats, frame_index: u64) void {
+    var panel = dvui.box(
+        @src(),
+        .{ .dir = .vertical },
+        .{
+            .gravity_x = 0.0,
+            .gravity_y = 1.0,
+            .padding = dvui.Rect.all(8),
+            .corner_radius = dvui.Rect.all(8),
+            .background = true,
+            .color_fill = dvui.Color.black.opacity(0.2),
+            .margin = dvui.Rect{ .x = 16, .h = 16 },
+        },
+    );
+    {
+        dvui.label(@src(), "Frame time: {}ms", .{stats.render_time_ns / std.time.ns_per_ms}, .{});
+        dvui.label(@src(), "Frame index: {}", .{frame_index}, .{});
+    }
+    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/ui/frame.zig

@@ -30,6 +30,5 @@ pub fn guiFrame(ctx: *WindowContext) bool {
     }
     root.deinit();
 
-    ctx.frame_index += 1;
     return true;
 }

src/ui/left_panel.zig

@@ -175,6 +175,7 @@ pub fn leftPanel(ctx: *WindowContext) void {
                 if (dvui.checkbox(@src(), &canvas.draw_document, "Draw document", .{})) {
                     canvas.requestRedraw();
                 }
+                if (dvui.checkbox(@src(), &canvas.show_render_stats, "Show stats", .{})) {}
                 if (!canvas.draw_document) {
                     if (dvui.button(@src(), if (doc.cpu_render.type == .Gradient) "Gradient" else "Squares", .{}, .{})) {
                         if (doc.cpu_render.type == .Gradient) {
@@ -188,6 +189,9 @@ pub fn leftPanel(ctx: *WindowContext) void {
                 if (dvui.button(@src(), "Add random shapes", .{}, .{})) {
                     canvas.addRandomShapes() catch {};
                 }
+                if (dvui.button(@src(), "Request redraw", .{}, .{})) {
+                    canvas.requestRedraw();
+                }
             } else {
                 dvui.label(@src(), "No document", .{}, .{});
             }