1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
//! Built-in zoom / fit-view control buttons.
use dioxus::prelude::*;
use crate::state::{use_overlay_inset, FlowCore};
use crate::types::Side;
/// Zoom-in, zoom-out and fit-view buttons. Render as a child of
/// [`crate::Flow`]; add extra buttons as children.
#[component]
pub fn Controls(class: Option<String>, children: Element) -> Element {
let core = use_context::<FlowCore>();
// Panel footprint (3 × 28px buttons + borders + 14px offset) plus
// breathing room, so fit-view keeps nodes clear of the controls.
use_overlay_inset(Side::Bottom, 112.0);
let class = format!(
"df-controls{}",
class
.as_deref()
.map(|c| format!(" {c}"))
.unwrap_or_default()
);
rsx! {
div {
class,
// Keep pane gestures from starting on the controls.
onpointerdown: move |evt| evt.stop_propagation(),
button {
class: "df-control-btn",
r#type: "button",
title: "Zoom in",
aria_label: "Zoom in",
onclick: move |_| core.zoom_in(200),
svg {
view_box: "0 0 16 16",
path { d: "M8 3.5v9M3.5 8h9", stroke: "currentColor", stroke_width: "1.6", stroke_linecap: "round", fill: "none" }
}
}
button {
class: "df-control-btn",
r#type: "button",
title: "Zoom out",
aria_label: "Zoom out",
onclick: move |_| core.zoom_out(200),
svg {
view_box: "0 0 16 16",
path { d: "M3.5 8h9", stroke: "currentColor", stroke_width: "1.6", stroke_linecap: "round", fill: "none" }
}
}
button {
class: "df-control-btn",
r#type: "button",
title: "Fit view",
aria_label: "Fit view",
onclick: move |_| core.fit_view(400),
svg {
view_box: "0 0 16 16",
path {
d: "M2.5 6V2.5H6M10 2.5h3.5V6M13.5 10v3.5H10M6 13.5H2.5V10",
stroke: "currentColor",
stroke_width: "1.6",
stroke_linecap: "round",
stroke_linejoin: "round",
fill: "none",
}
}
}
{children}
}
}
}