Tauri + Leptos App

+ {move || { + if editing.get() { + view! { +

editing.set(false),
+                                    "Enter" if ev.ctrl_key() || ev.meta_key() => commit(),
+                                    _ => {}
+                                }
+                            }
+                        />
+                        <div class="editor-bar">
+                            <label>
+                                <input
+                                    type="checkbox"
+                                    prop:checked=move || draft_md.get()
+                                    on:change=move |ev| draft_md.set(event_target_checked(&ev))
+                                />
+                                " Markdown"
+                            </label>
+                            <button type="button" on:click=move |_| commit()>"Сохранить"</button>
+                            <button type="button" on:click=move |_| editing.set(false)>"Отмена"</button>
+                        </div>
+                    }
+                    .into_any()
+                } else {
+                    label_view(rect.label.get())
+                }
+            }}
+        </div>
+    }
+}
+
+#[component]
+pub fn App() -> impl IntoView {
+    let canvas = NodeRef::<html::Main>::new();
+    let (rects, set_rects) = signal(Vec::<Rect>::new());
+    let next_id = StoredValue::new(0u32);
+    let top_z = StoredValue::new(0u32);
+    let dragging = RwSignal::new(None::<Drag>);
+
+    // Размер холста; пока элемент не смонтирован, ограничений нет.
+    let bounds = move || {
+        canvas
+            .get_untracked()
+            .map(|el| (el.client_width(), el.client_height()))
+            .unwrap_or((i32::MAX, i32::MAX))
+    };
+
+    // Каждый вызов даёт z-index выше всех предыдущих.
+    let bump_z = move || {
+        let z = top_z.get_value() + 1;
+        top_z.set_value(z);
+        z
+    };
+
+    // Нажатие на пустом месте: новый прямоугольник.
+    let add_rect = move |ev: PointerEvent| {
+        if ev.button() != 0 {
+            return;
+        }
+        let id = next_id.get_value();
+        next_id.set_value(id + 1);
+        let rect = Rect::centered_at(id, bump_z(), ev.offset_x(), ev.offset_y(), bounds());
+        set_rects.update(|rects| rects.push(rect));
+    };
+
+    // Нажатие на прямоугольник: поднять наверх и запомнить, откуда начали.
+    let start_drag = move |rect: Rect, ev: PointerEvent| {
+        rect.z.set(bump_z());
+        dragging.set(Some(Drag {
+            rect,
+            start_pointer: (ev.client_x(), ev.client_y()),
+            start_pos: (rect.x.get_untracked(), rect.y.get_untracked()),
+        }));
+    };
+
+    let delete_rect = move |id: u32| {
+        dragging.set(None);
+        set_rects.update(|rects| rects.retain(|r| r.id != id));
+    };
+
+    // Движение и отпускание слушаем на window.
+    window_event_listener(ev::pointermove, move |ev: PointerEvent| {
+        if let Some(d) = dragging.get_untracked() {
+            let (x, y) = clamp_pos(
+                d.start_pos.0 + ev.client_x() - d.start_pointer.0,
+                d.start_pos.1 + ev.client_y() - d.start_pointer.1,
+                bounds(),
+            );
+            d.rect.x.set(x);
+            d.rect.y.set(y);
+        }
+    });
+    window_event_listener(ev::pointerup, move |_| dragging.set(None));
+    window_event_listener(ev::pointercancel, move |_| dragging.set(None));
+
+    view! {
+        <main
+            class="canvas"
+            node_ref=canvas
+            on:pointerdown=add_rect
+            on:contextmenu=move |ev| ev.prevent_default() // без системного меню
+        >
+            <For
+                each=move || rects.get()
+                key=|rect| rect.id
+                children=move |rect| view! {
+                    <RectView
+                        rect=rect
+                        on_grab=Callback::new(move |ev| start_drag(rect, ev))
+                        on_delete=Callback::new(move |_| delete_rect(rect.id))
+                    />
+                }
+            />
+        </main>
+    }
+}
\ No newline at end of file
diff --git a/src/main.rs b/src/main.rs
new file mode 100644
index 0000000..4fcc0ff
--- /dev/null
+++ b/src/main.rs
@@ -0,0 +1,13 @@
+mod app;
+
+use app::*;
+use leptos::prelude::*;
+
+fn main() {
+    console_error_panic_hook::set_once();
+    mount_to_body(|| {
+        view! {
+            <App/>
+        }
+    })
+}
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..55f5cfd
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,220 @@
+.logo.leptos:hover {
+  filter: drop-shadow(0 0 2em #a82e20);
+}
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color: #0f0f0f;
+  background-color: #f6f6f6;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+.container {
+  margin: 0;
+  padding-top: 10vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: 0.75s;
+}
+
+.logo.tauri:hover {
+  filter: drop-shadow(0 0 2em #24c8db);
+}
+
+.row {
+  display: flex;
+  justify-content: center;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+h1 {
+  text-align: center;
+}
+
+input,
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #0f0f0f;
+  background-color: #ffffff;
+  transition: border-color 0.25s;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+button {
+  cursor: pointer;
+}
+
+button:hover {
+  border-color: #396cd8;
+}
+button:active {
+  border-color: #396cd8;
+  background-color: #e8e8e8;
+}
+
+input,
+button {
+  outline: none;
+}
+
+#greet-input {
+  margin-right: 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: #f6f6f6;
+    background-color: #2f2f2f;
+  }
+
+  a:hover {
+    color: #24c8db;
+  }
+
+  input,
+  button {
+    color: #ffffff;
+    background-color: #0f0f0f98;
+  }
+  button:active {
+    background-color: #0f0f0f69;
+  }
+}
+
+.rect {
+  position: absolute;
+  box-sizing: border-box;
+  padding: 6px;
+  border-radius: 6px;
+  cursor: grab;
+  touch-action: none;
+  overflow: auto;
+  color: #111;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+body,
+.canvas,
+.rect {
+  background-color: inherit;
+}
+
+.rect.editing {
+  cursor: default;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow: hidden;
+}
+
+.rect .label p { margin: 0 0 0.4em; }
+.rect .label h1, .rect .label h2, .rect .label h3 { margin: 0 0 0.3em; font-size: 1.1em; }
+.rect .label ul, .rect .label ol { margin: 0 0 0.4em; padding-left: 1.2em; }
+.rect .label.plain { white-space: pre-wrap; }
+
+.rect textarea {
+  flex: 1;
+  min-height: 0;
+  resize: none;
+  font: inherit;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+.editor-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+.editor-bar label { margin-right: auto; }
+html, body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.canvas {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.rect {
+  position: absolute;
+  box-sizing: border-box;
+  padding: 6px;
+  border-radius: 6px;
+  cursor: grab;
+  touch-action: none;
+  overflow: auto;
+  color: #111;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.rect.editing {
+  cursor: default;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow: hidden;
+}
+
+.rect .label p { margin: 0 0 0.4em; }
+.rect .label h1, .rect .label h2, .rect .label h3 { margin: 0 0 0.3em; font-size: 1.1em; }
+.rect .label ul, .rect .label ol { margin: 0 0 0.4em; padding-left: 1.2em; }
+.rect .label.plain { white-space: pre-wrap; }
+
+.rect textarea {
+  flex: 1;
+  min-height: 0;
+  resize: none;
+  font: inherit;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+.editor-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+.editor-bar label { margin-right: auto; }
\ No newline at end of file