From 85eecc50aff83dfcfddb8d174e087b419464e9d4 Mon Sep 17 00:00:00 2001 From: Razee4315 Date: Fri, 19 Jun 2026 02:08:22 +0500 Subject: [PATCH 1/2] fix(editor): text editing, inspector timing, welcome card - Inline text editor now uses reactive position/size so it tracks the label when the canvas resizes (the inspector opening was leaving the edit box at stale coords, so typing/selecting appeared broken). Fixes create + double-click to edit, and the missing text/shape bars in the timeline (no text could be made). - Reserve the inspector column while a drawing tool is armed, so picking the Text tool shows the panel immediately and placing an element no longer reflows the canvas (which was jumping the edit box). - Welcome card: same-height Skip + red CTA (no oversized button), simpler copy with the em-dashes removed. --- src/App.css | 24 +++++++++++++++++++- src/App.tsx | 63 ++++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 68 insertions(+), 19 deletions(-) diff --git a/src/App.css b/src/App.css index dda5891..b06deba 100644 --- a/src/App.css +++ b/src/App.css @@ -1766,11 +1766,33 @@ kbd { } .welcome-actions { display: flex; + align-items: center; justify-content: center; gap: var(--sp-10); } +/* Secondary "Skip" — quiet, so it doesn't compete with the CTA. */ +.welcome-skip { + background: transparent; + border-color: var(--line); + color: var(--muted); +} +.welcome-skip:hover { + background: var(--panel-2); + color: var(--text); +} +/* Primary CTA — filled red, but the same height as Skip (no oversized type). */ .welcome-cta { - margin-top: 0; + background: var(--record); + border-color: var(--record); + color: #fff; + font-weight: 600; +} +.welcome-cta:hover { + background: var(--record); + filter: brightness(1.08); +} +.welcome-cta .dot { + background: #fff; } /* Coachmark bubble pointing up at the Record button. */ .coachmark { diff --git a/src/App.tsx b/src/App.tsx index 76d1fe8..77c1104 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1977,8 +1977,12 @@ function App() { /* storage unavailable */ } }; - const inspectorOpen = () => + const somethingSelected = () => !!selected() || selZoom() !== null || selSpeed() !== null || selCut() !== null; + // A drawing tool is armed (not Select). We reserve the inspector column for it so the + // canvas doesn't reflow the moment you place an element (which would jump the editor box). + const drawingToolActive = () => hasClip() && tool() !== "select"; + const inspectorOpen = () => somethingSelected() || drawingToolActive(); const safeName = () => projectName().replace(/[^\w.-]+/g, "-").replace(/^-+|-+$/g, "") || "vuoom"; @@ -2460,21 +2464,29 @@ function App() { {(() => { - const ta = editingTextAnn()!; - const p = px({ x: v2(ta.pos).x, y: v2(ta.pos).y }); - const fs = ta.font_size * stage().h; + const id = editingText()!; + // Reactive accessors so the editor box tracks the label as the canvas + // resizes (e.g. when the inspector opens). The value stays uncontrolled + // (seeded once) so typing never resets the caret. + const live = () => anns().texts.find((t) => t.id === id); + const initial = live()?.text ?? ""; + const p = () => { + const t = live(); + return t ? px({ x: v2(t.pos).x, y: v2(t.pos).y }) : { x: 0, y: 0 }; + }; + const fs = () => (live()?.font_size ?? 0.05) * stage().h; return ( queueMicrotask(() => { el.focus(); el.select(); })} onInput={(e) => editTextLive(e.currentTarget.value)} @@ -2849,6 +2861,21 @@ function App() { + + {/* Tool-context panel: holds the inspector column while a drawing tool is armed + (nothing selected yet) so placing an element never reflows the canvas. */} + + +