()
47 | .expect("the_canvas_id was not a HtmlCanvasElement");
48 |
49 | let start_result = eframe::WebRunner::new()
50 | .start(
51 | canvas,
52 | web_options,
53 | Box::new(|_cc| Ok(Box::new(graph_editor::GraphEditorApp::default()))),
54 | )
55 | .await;
56 |
57 | // Remove the loading text and spinner:
58 | if let Some(loading_text) = document.get_element_by_id("loading_text") {
59 | match start_result {
60 | Ok(_) => {
61 | loading_text.remove();
62 | }
63 | Err(e) => {
64 | loading_text.set_inner_html(
65 | " The app has crashed. See the developer console for details.
",
66 | );
67 | panic!("Failed to start eframe: {e:?}");
68 | }
69 | }
70 | }
71 | });
72 | }
73 |
--------------------------------------------------------------------------------
/src/math/affine.rs:
--------------------------------------------------------------------------------
1 | //! 2次元Affine変換
2 | //!
3 | //! 2次元平面上の点の拡大，縮小，平行移動
4 |
5 | #![allow(clippy::needless_range_loop)]
6 |
7 | use std::ops::{Mul, MulAssign};
8 |
9 | use num_traits::One;
10 |
11 | /// 2次元アフィン変換の0元行列
12 | const AFFINE2D_ZERO: [[f32; 3]; 3] = [[0.0; 3]; 3];
13 |
14 | /// 2次元アフィン変換の1元行列
15 | const AFFINE2D_ONE: [[f32; 3]; 3] = [[1.0, 0.0, 0.0], [0.0, 1.0, 0.0], [0.0, 0.0, 1.0]];
16 |
17 | /// アフィン変換
18 | #[derive(Debug, Clone, Copy)]
19 | pub struct Affine2D(pub [[f32; 3]; 3]);
20 |
21 | impl Affine2D {
22 | /// アフィン変換の平行移動
23 | pub fn from_transition(vec2: egui::Vec2) -> Self {
24 | Self([[1.0, 0.0, vec2.x], [0.0, 1.0, vec2.y], [0.0, 0.0, 1.0]])
25 | }
26 |
27 | /// アフィン変換の拡大縮小
28 | /// - `center`: 拡大縮小の中心
29 | /// - `scale`: 拡大縮小の倍率
30 | pub fn from_center_and_scale(center: egui::Pos2, scale: f32) -> Self {
31 | Self([
32 | [scale, 0.0, center.x * (1.0 - scale)],
33 | [0.0, scale, center.y * (1.0 - scale)],
34 | [0.0, 0.0, 1.0],
35 | ])
36 | }
37 |
38 | /// 並行移動成分を取得
39 | pub fn translation(&self) -> egui::Vec2 {
40 | egui::vec2(self.0[0][2], self.0[1][2])
41 | }
42 |
43 | /// スケールを取得
44 | pub fn scale_x(&self) -> f32 {
45 | self.0[0][0]
46 | }
47 |
48 | /// アフィン変換を合成する
49 | /// - scale の最小値，最大値の範囲を超えない操作のみ行う
50 | pub fn try_compose(&self, rhs: &Affine2D, scale_min: f32, scale_max: f32) -> Option {
51 | let composed = *self * *rhs;
52 | let scale = composed.scale_x();
53 |
54 | (scale_min <= scale && scale <= scale_max).then_some(composed)
55 | }
56 |
57 | /// アフィン変換の逆元
58 | pub fn inverse(&self) -> Option {
59 | let (a, b, tx) = (self.0[0][0], self.0[0][1], self.0[0][2]);
60 | let (c, d, ty) = (self.0[1][0], self.0[1][1], self.0[1][2]);
61 |
62 | // 行列式を計算
63 | let det = a * d - b * c;
64 | if det.abs() < 1e-6 {
65 | // 正則でない場合
66 | return None;
67 | }
68 |
69 | let inv_det = 1.0 / det;
70 |
71 | // 線形部分の逆行列
72 | let a_inv = d * inv_det;
73 | let b_inv = -b * inv_det;
74 | let c_inv = -c * inv_det;
75 | let d_inv = a * inv_det;
76 |
77 | // 平行移動の逆変換
78 | let tx_inv = -(a_inv * tx + b_inv * ty);
79 | let ty_inv = -(c_inv * tx + d_inv * ty);
80 |
81 | Some(Self([
82 | [a_inv, b_inv, tx_inv],
83 | [c_inv, d_inv, ty_inv],
84 | [0.0, 0.0, 1.0],
85 | ]))
86 | }
87 | }
88 |
89 | impl Mul for Affine2D {
90 | type Output = Self;
91 | fn mul(self, rhs: Self) -> Self::Output {
92 | let mut res = AFFINE2D_ZERO;
93 | for i in 0..3 {
94 | for j in 0..3 {
95 | for k in 0..3 {
96 | res[i][j] += self.0[i][k] * rhs.0[k][j];
97 | }
98 | }
99 | }
100 | Self(res)
101 | }
102 | }
103 |
104 | impl MulAssign for Affine2D {
105 | fn mul_assign(&mut self, rhs: Self) {
106 | *self = *self * rhs;
107 | }
108 | }
109 |
110 | impl One for Affine2D {
111 | fn one() -> Self {
112 | Self(AFFINE2D_ONE)
113 | }
114 | }
115 |
116 | /// アフィン変換を適用する
117 | pub trait ApplyAffine: Sized {
118 | /// アフィン変換を適用した結果を取得する
119 | fn applied(&self, affine: &Affine2D) -> Self;
120 | /// アフィン変換を適用する
121 | fn apply(&mut self, affine: &Affine2D) {
122 | *self = self.applied(affine);
123 | }
124 | }
125 |
126 | impl ApplyAffine for egui::Vec2 {
127 | fn applied(&self, affine: &Affine2D) -> Self {
128 | let new_x = affine.0[0][0] * self.x + affine.0[0][1] * self.y + affine.0[0][2];
129 | let new_y = affine.0[1][0] * self.x + affine.0[1][1] * self.y + affine.0[1][2];
130 | egui::vec2(new_x, new_y)
131 | }
132 | }
133 |
134 | impl ApplyAffine for egui::Pos2 {
135 | fn applied(&self, affine: &Affine2D) -> Self {
136 | let new_x = affine.0[0][0] * self.x + affine.0[0][1] * self.y + affine.0[0][2];
137 | let new_y = affine.0[1][0] * self.x + affine.0[1][1] * self.y + affine.0[1][2];
138 | egui::pos2(new_x, new_y)
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
/src/math/bezier.rs:
--------------------------------------------------------------------------------
1 | use super::newton::newton_method;
2 |
3 | pub fn calc_bezier_control_point(
4 | start: egui::Pos2,
5 | end: egui::Pos2,
6 | distance: f32,
7 | is_clockwise: bool,
8 | ) -> egui::Pos2 {
9 | let mid = start + (end - start) / 2.0;
10 | let dir = (end - start).normalized().rot90();
11 |
12 | mid + dir * if is_clockwise { distance } else { -distance }
13 | }
14 |
15 | /// ベジェ曲線
16 | pub fn bezier_curve(start: egui::Pos2, control: egui::Pos2, end: egui::Pos2, t: f32) -> egui::Pos2 {
17 | let x = (1.0 - t).powf(2.0) * start.x + 2.0 * t * (1.0 - t) * control.x + t.powf(2.0) * end.x;
18 | let y = (1.0 - t).powf(2.0) * start.y + 2.0 * t * (1.0 - t) * control.y + t.powf(2.0) * end.y;
19 | egui::Pos2::new(x, y)
20 | }
21 |
22 | /// ベジェ曲線のパラメータ`t`における微分
23 | pub fn d_bezier_dt(start: egui::Pos2, control: egui::Pos2, end: egui::Pos2, t: f32) -> egui::Vec2 {
24 | let mt = 1.0 - t;
25 | let dx = 2.0 * mt * (control.x - start.x) + 2.0 * t * (end.x - control.x);
26 | let dy = 2.0 * mt * (control.y - start.y) + 2.0 * t * (end.y - control.y);
27 | egui::Vec2::new(dx, dy)
28 | }
29 |
30 | /// ベジェ曲線の2階微分
31 | pub fn d2_bezier_dt2(start: egui::Pos2, control: egui::Pos2, end: egui::Pos2) -> egui::Vec2 {
32 | control.to_vec2() - 2.0 * start.to_vec2() + end.to_vec2()
33 | }
34 |
35 | /// ベジェ曲線と円の交点を計算
36 | ///
37 | /// ### Parameters
38 | /// - `bezier_start`: ベジェ曲線の始点
39 | /// - `bezier_control`: ベジェ曲線の制御点
40 | /// - `bezier_end`: ベジェ曲線の終点
41 | /// - `circle_center`: 円の中心
42 | /// - `circle_radius`: 円の半径
43 | ///
44 | /// ### Returns
45 | /// 交点が存在する場合はその座標と向き，存在しない場合は `None`
46 | pub fn calc_intersection_of_bezier_and_circle(
47 | bezier_start: egui::Pos2,
48 | bezier_control: egui::Pos2,
49 | bezier_end: egui::Pos2,
50 | circle_center: egui::Pos2,
51 | circle_radius: f32,
52 | ) -> Option<(egui::Pos2, egui::Vec2)> {
53 | let (x0, y0) = (bezier_start.x, bezier_start.y);
54 | let (x1, y1) = (bezier_control.x, bezier_control.y);
55 | let (x2, y2) = (bezier_end.x, bezier_end.y);
56 | let (xc, yc) = (circle_center.x, circle_center.y);
57 | let r = circle_radius;
58 |
59 | let bezier =
60 | |t: f32| -> egui::Pos2 { bezier_curve(bezier_start, bezier_control, bezier_end, t) };
61 |
62 | let f = |t: f32| -> f32 {
63 | let pos = bezier(t);
64 | -r.powf(2.0) + (pos.x - xc).powf(2.0) + (pos.y - yc).powf(2.0)
65 | };
66 |
67 | // df/dt (project://memo/intersection_of_bezier_and_circle.py で導出)
68 | let df = |t: f32| -> f32 {
69 | (-4.0 * t * x1 + 4.0 * t * x2 + 2.0 * x0 * (2.0 * t - 2.0) + 2.0 * x1 * (2.0 - 2.0 * t))
70 | * (t.powf(2.0) * x2 + t * x1 * (2.0 - 2.0 * t) + x0 * (1.0 - t).powf(2.0) - xc)
71 | + (-4.0 * t * y1
72 | + 4.0 * t * y2
73 | + 2.0 * y0 * (2.0 * t - 2.0)
74 | + 2.0 * y1 * (2.0 - 2.0 * t))
75 | * (t.powf(2.0) * y2 + t * y1 * (2.0 - 2.0 * t) + y0 * (1.0 - t).powf(2.0) - yc)
76 | };
77 |
78 | let t = newton_method(f, df, 0.5, 1e-6, 10)?;
79 |
80 | (0.0..1.0).contains(&t).then(|| {
81 | (
82 | bezier(t),
83 | d_bezier_dt(bezier_start, bezier_control, bezier_end, t),
84 | )
85 | })
86 | }
87 |
--------------------------------------------------------------------------------
/src/math/mod.rs:
--------------------------------------------------------------------------------
1 | pub mod affine;
2 | pub mod bezier;
3 | pub mod newton;
4 |
--------------------------------------------------------------------------------
/src/math/newton.rs:
--------------------------------------------------------------------------------
1 | /// ニュートン法で方程式 f(x) = 0 の解を求める
2 | /// f: 関数, df: f の導関数, x0: 初期値, tol: 許容誤差, max_iter: 最大反復回数
3 | pub fn newton_method(
4 | f: impl Fn(f32) -> f32,
5 | df: impl Fn(f32) -> f32,
6 | x0: f32,
7 | tol: f32,
8 | max_iter: usize,
9 | ) -> Option {
10 | let mut x = x0;
11 |
12 | for _ in 0..max_iter {
13 | let fx = f(x);
14 | let dfx = df(x);
15 |
16 | if dfx.abs() < 1e-6 {
17 | // 導関数が 0 に近いときは収束しないため終了
18 | return None;
19 | }
20 |
21 | let x_next = x - fx / dfx;
22 |
23 | if (x_next - x).abs() < tol {
24 | return Some(x_next); // 収束したら解を返す
25 | }
26 |
27 | x = x_next;
28 | }
29 |
30 | None // 最大反復回数に達した場合は解なし
31 | }
32 |
--------------------------------------------------------------------------------
/src/mode.rs:
--------------------------------------------------------------------------------
1 | #[derive(Debug, PartialEq, Clone)]
2 | pub enum EditMode {
3 | Normal,
4 | AddVertex,
5 | AddEdge {
6 | from_vertex: Option,
7 | confirmed: bool,
8 | },
9 | Delete,
10 | }
11 |
12 | impl EditMode {
13 | pub fn default_normal() -> Self {
14 | Self::Normal
15 | }
16 |
17 | pub fn default_add_vertex() -> Self {
18 | Self::AddVertex
19 | }
20 |
21 | pub fn default_add_edge() -> Self {
22 | Self::AddEdge {
23 | from_vertex: None,
24 | confirmed: false,
25 | }
26 | }
27 |
28 | pub fn default_delete() -> Self {
29 | Self::Delete
30 | }
31 |
32 | pub fn is_add_vertex(&self) -> bool {
33 | matches!(self, Self::AddVertex)
34 | }
35 |
36 | pub fn is_add_edge(&self) -> bool {
37 | matches!(self, Self::AddEdge { .. })
38 | }
39 |
40 | pub fn is_delete(&self) -> bool {
41 | matches!(self, Self::Delete)
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/update.rs:
--------------------------------------------------------------------------------
1 | use crate::GraphEditorApp;
2 |
3 | pub fn request_repaint(app: &mut GraphEditorApp, ctx: &egui::Context) {
4 | if app.is_animated {
5 | ctx.request_repaint();
6 | }
7 | }
8 |
--------------------------------------------------------------------------------