Compare commits

...

13 Commits

9 changed files with 439 additions and 7 deletions

7
.vscode/launch.json vendored
View File

@@ -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"
},
]
}

5
.vscode/tasks.json vendored
View File

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

202
src/Canvas.zig Normal file
View File

@@ -0,0 +1,202 @@
const std = @import("std");
const builtin = @import("builtin");
const dvui = @import("dvui");
const Size = dvui.Size;
const Color = dvui.Color;
const Canvas = @This();
pub const ImageRect = struct {
x: u32,
y: u32,
w: u32,
h: u32,
};
allocator: std.mem.Allocator,
texture: ?dvui.Texture = null,
visible_rect: ?ImageRect = null,
size: Size = .{ .w = 800, .h = 600 },
pos: dvui.Point = dvui.Point{ .x = 0, .y = 0 },
scroll: dvui.ScrollInfo = .{
.vertical = .auto,
.horizontal = .auto,
},
zoom: f32 = 1,
native_scaling: bool = false,
gradient_start: Color.PMA = .{ .r = 0, .g = 0, .b = 0, .a = 255 },
gradient_end: Color.PMA = .{ .r = 255, .g = 255, .b = 255, .a = 255 },
pub fn init(allocator: std.mem.Allocator) Canvas {
return .{ .allocator = allocator };
}
pub fn deinit(self: *Canvas) void {
if (self.texture) |texture| {
dvui.Texture.destroyLater(texture);
self.texture = null;
}
}
/// Заполнить canvas градиентом
pub fn redrawGradient(self: *Canvas) !void {
const full = self.getScaledImageSize();
const full_w: u32 = full.w;
const full_h: u32 = full.h;
const vis: ImageRect = self.visible_rect orelse ImageRect{ .x = 0, .y = 0, .w = 0, .h = 0 };
if (vis.w == 0 or vis.h == 0) {
if (self.texture) |tex| {
dvui.Texture.destroyLater(tex);
self.texture = null;
}
return;
}
const width: u32 = vis.w;
const height: u32 = vis.h;
// Выделить буфер пиксельных данных
const pixels = try self.allocator.alloc(Color.PMA, @as(usize, width) * height);
defer self.allocator.free(pixels);
var y: u32 = 0;
while (y < height) : (y += 1) {
var x: u32 = 0;
while (x < width) : (x += 1) {
const gx: u32 = vis.x + x;
const gy: u32 = vis.y + y;
const denom_x: f32 = if (full_w > 1) @as(f32, @floatFromInt(full_w - 1)) else 1;
const denom_y: f32 = if (full_h > 1) @as(f32, @floatFromInt(full_h - 1)) else 1;
const fx: f32 = @as(f32, @floatFromInt(gx)) / denom_x;
const fy: f32 = @as(f32, @floatFromInt(gy)) / denom_y;
const factor: f32 = std.math.clamp((fx + fy) / 2, 0, 1);
const r_f: f32 = @as(f32, @floatFromInt(self.gradient_start.r)) + factor * (@as(f32, @floatFromInt(self.gradient_end.r)) - @as(f32, @floatFromInt(self.gradient_start.r)));
const g_f: f32 = @as(f32, @floatFromInt(self.gradient_start.g)) + factor * (@as(f32, @floatFromInt(self.gradient_end.g)) - @as(f32, @floatFromInt(self.gradient_start.g)));
const b_f: f32 = @as(f32, @floatFromInt(self.gradient_start.b)) + factor * (@as(f32, @floatFromInt(self.gradient_end.b)) - @as(f32, @floatFromInt(self.gradient_start.b)));
const r: u8 = @intFromFloat(std.math.clamp(r_f, 0, 255));
const g: u8 = @intFromFloat(std.math.clamp(g_f, 0, 255));
const b: u8 = @intFromFloat(std.math.clamp(b_f, 0, 255));
pixels[y * width + x] = .{ .r = r, .g = g, .b = b, .a = 255 };
}
}
// Удалить старую текстуру
if (self.texture) |tex| {
dvui.Texture.destroyLater(tex);
}
// Создать новую текстуру из пиксельных данных
self.texture = try dvui.textureCreate(pixels, width, height, .nearest);
}
/// Заполнить canvas случайным градиентом
pub fn fillRandomGradient(self: *Canvas) !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 };
try self.redrawGradient();
}
pub fn addZoom(self: *Canvas, value: f32) void {
self.zoom += value;
self.zoom = @max(self.zoom, 0.01);
}
pub fn getScaledImageSize(self: Canvas) ImageRect {
return .{
.x = @intFromFloat(self.pos.x),
.y = @intFromFloat(self.pos.y),
.w = @intFromFloat(self.size.w * self.zoom),
.h = @intFromFloat(self.size.h * self.zoom),
};
}
/// Обновить видимую часть изображения (в пикселях холста) и сохранить в `visible_rect`.
///
/// `viewport` и `scroll_offset` ожидаются в *physical* пикселях (т.е. уже умноженные на windowNaturalScale).
///
/// После обновления (или если текстуры ещё нет) перерисовывает текстуру, чтобы она содержала только видимую часть.
pub fn updateVisibleImageRect(self: *Canvas, viewport: dvui.Rect, scroll_offset: dvui.Point) !void {
const next = computeVisibleImageRect(self.*, viewport, scroll_offset);
var changed = false;
if (self.visible_rect) |vis| {
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) {
try self.redrawGradient();
}
}
fn computeVisibleImageRect(self: Canvas, viewport: dvui.Rect, scroll_offset: dvui.Point) ImageRect {
const image_rect = self.getScaledImageSize();
const img_w_f: f32 = @floatFromInt(image_rect.w);
const img_h_f: f32 = @floatFromInt(image_rect.h);
const view_left: f32 = scroll_offset.x;
const view_top: f32 = scroll_offset.y;
const view_right: f32 = scroll_offset.x + viewport.w;
const view_bottom: f32 = scroll_offset.y + viewport.h;
const img_left: f32 = @floatFromInt(image_rect.x);
const img_top: f32 = @floatFromInt(image_rect.y);
const img_right: f32 = img_left + img_w_f;
const img_bottom: f32 = img_top + img_h_f;
const inter_left: f32 = @max(view_left, img_left);
const inter_top: f32 = @max(view_top, img_top);
const inter_right: f32 = @min(view_right, img_right);
const inter_bottom: f32 = @min(view_bottom, img_bottom);
if (inter_right <= inter_left or inter_bottom <= inter_top) {
if (builtin.mode == .Debug) {
std.debug.print(" -> no intersection, return empty\n", .{});
}
return .{ .x = 0, .y = 0, .w = 0, .h = 0 };
}
// Переводим из координат контента в локальные координаты картинки
const local_x0: f32 = inter_left - img_left;
const local_y0: f32 = inter_top - img_top;
const local_x1: f32 = inter_right - img_left;
const local_y1: f32 = inter_bottom - img_top;
// Консервативно округляем до пикселей: начало вниз (floor), конец вверх (ceil)
const x0_u32: u32 = floatToClampedU32(@floor(local_x0), image_rect.w);
const y0_u32: u32 = floatToClampedU32(@floor(local_y0), image_rect.h);
const x1_u32: u32 = floatToClampedU32(@ceil(local_x1), image_rect.w);
const y1_u32: u32 = floatToClampedU32(@ceil(local_y1), image_rect.h);
const out: ImageRect = .{
.x = x0_u32,
.y = y0_u32,
.w = if (x1_u32 > x0_u32) x1_u32 - x0_u32 else 0,
.h = if (y1_u32 > y0_u32) y1_u32 - y0_u32 else 0,
};
return out;
}
fn floatToClampedU32(value: f32, max_inclusive: u32) u32 {
if (max_inclusive == 0) return 0;
if (value <= 0) return 0;
const max_f: f32 = @floatFromInt(max_inclusive);
if (value >= max_f) return max_inclusive;
return @intFromFloat(value);
}
/// Отобразить canvas в UI
pub fn render(self: Canvas, rect: dvui.RectScale) !void {
if (self.texture) |texture| {
try dvui.renderTexture(texture, rect, .{});
}
}

1
src/Document.zig Normal file
View File

@@ -0,0 +1 @@
// Файл векторного документа

19
src/WindowContext.zig Normal file
View File

@@ -0,0 +1,19 @@
const std = @import("std");
const dvui = @import("dvui");
const Canvas = @import("Canvas.zig");
const WindowContext = @This();
allocator: std.mem.Allocator,
canvas: Canvas,
pub fn init(allocator: std.mem.Allocator) WindowContext {
return .{
.allocator = allocator,
.canvas = Canvas.init(allocator),
};
}
pub fn deinit(self: *WindowContext) void {
self.canvas.deinit();
}

View File

@@ -1,7 +1,13 @@
const std = @import("std");
const builtin = @import("builtin");
const dvui = @import("dvui");
const dvui_ext = @import("./ui/dvui_ext.zig");
const SDLBackend = @import("sdl-backend");
const Document = @import("Document.zig");
const WindowContext = @import("WindowContext.zig");
const sdl_c = SDLBackend.c;
const Allocator = std.mem.Allocator;
const Color = dvui.Color;
pub fn main() !void {
var gpa = std.heap.GeneralPurposeAllocator(.{}){};
@@ -23,6 +29,9 @@ pub fn main() !void {
});
defer win.deinit();
var ctx = WindowContext.init(allocator);
defer ctx.deinit();
var interrupted = false;
main_loop: while (true) {
@@ -40,7 +49,7 @@ pub fn main() !void {
_ = SDLBackend.c.SDL_SetRenderDrawColor(backend.renderer, 0, 0, 0, 255);
_ = SDLBackend.c.SDL_RenderClear(backend.renderer);
const keep_running = gui_frame();
const keep_running = gui_frame(&ctx);
if (!keep_running) break :main_loop;
// marks end of dvui frame, don't call dvui functions after this
@@ -60,6 +69,158 @@ pub fn main() !void {
}
}
fn gui_frame() bool {
fn gui_frame(ctx: *WindowContext) bool {
const canvas = &ctx.canvas;
const ctrl: bool = dvui.currentWindow().modifiers.control();
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;
}
const root = dvui.box(
@src(),
.{ .dir = .horizontal },
.{ .expand = .both, .background = true, .style = .window },
);
defer root.deinit();
// Левая панель с фиксированной шириной
var left_panel = dvui.box(@src(), .{ .dir = .vertical }, .{ .expand = .vertical, .min_size_content = .{ .w = 200 }, .background = true });
{
dvui.label(@src(), "Tools", .{}, .{});
if (dvui.button(@src(), "Fill Random Color", .{}, .{})) {
canvas.fillRandomGradient() catch |err| {
std.debug.print("Error filling canvas: {}\n", .{err});
};
canvas.pos = .{ .x = 400, .y = 400 };
canvas.zoom = dvui.windowNaturalScale();
}
if (dvui.checkbox(@src(), &canvas.native_scaling, "Scaling", .{})) {}
}
left_panel.deinit();
// Правая панель - занимает оставшееся пространство
const back = dvui.box(
@src(),
.{ .dir = .horizontal },
.{ .expand = .both, .padding = dvui.Rect.all(12), .background = true },
);
{
const fill_color = Color.black.opacity(0.25);
var right_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,
},
);
{
var textured = dvui_ext.texturedBox(right_panel.data().contentRectScale(), 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,
},
);
{
const natural_scale = if (canvas.native_scaling) 1 else dvui.windowNaturalScale();
const img_size = canvas.getScaledImageSize();
// Получить viewport и scroll offset
const viewport_rect = scroll.data().contentRect();
const scroll_current = dvui.Point{ .x = canvas.scroll.viewport.x, .y = canvas.scroll.viewport.y };
// viewport_rect/scroll_current — в natural единицах.
// Для расчёта видимой области в пикселях изображения переводим в physical.
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,
};
canvas.updateVisibleImageRect(viewport_px, scroll_px) catch |err| {
std.debug.print("updateVisibleImageRect error: {}\n", .{err});
};
if (canvas.texture) |tex| {
_ = dvui.image(
@src(),
.{ .source = .{ .texture = tex } },
.{
.background = false,
.margin = .{
.x = @as(f32, @floatFromInt(img_size.x)) / natural_scale,
.y = @as(f32, @floatFromInt(img_size.y)) / natural_scale,
.w = @as(f32, @floatFromInt(img_size.x)) / natural_scale,
.h = @as(f32, @floatFromInt(img_size.y)) / natural_scale,
},
.min_size_content = .{
.w = @as(f32, @floatFromInt(img_size.w)) / natural_scale,
.h = @as(f32, @floatFromInt(img_size.h)) / natural_scale,
},
.max_size_content = .{
.w = @as(f32, @floatFromInt(img_size.w)) / natural_scale,
.h = @as(f32, @floatFromInt(img_size.h)) / natural_scale,
},
},
);
}
// Заблокировать события скролла, если нажат ctrl
if (ctrl) {
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| {
canvas.addZoom(y / 1000);
canvas.redrawGradient() catch {};
},
else => {},
}
e.handled = true;
}
},
else => {},
}
}
}
}
scroll.deinit();
dvui.label(@src(), "Canvas", .{}, .{ .gravity_x = 0.5, .gravity_y = 0.0 });
}
overlay.deinit();
}
textured.deinit();
}
right_panel.deinit();
}
back.deinit();
return true;
}

View File

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

8
src/ui/dvui_ext.zig Normal file
View File

@@ -0,0 +1,8 @@
// Расширения для dvui
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);
}

View File

@@ -0,0 +1,38 @@
// Отрисовка дочернего контента как текстуры с параметрами скругления
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);
// self.rs.r.y -= 2;
// self.rs.r.x -= 2;
// self.rs.r.h += 2;
// self.rs.r.w += 2;
dvui.renderTexture(t, self.rs, .{
.corner_radius = self.corner_radius,
}) catch {};
}
}
}