From ef03f731d112a3fd3ea2f5948fa75a87d2d4f3d6 Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Thu, 4 Jun 2026 09:32:11 -0400 Subject: [PATCH] =?UTF-8?q?docs:=20audit=20pass=20=E2=80=94=20fix=20wrong?= =?UTF-8?q?=20shortcut=20+=20behaviour=20claims?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Swept the help pages against the actual code paths and removed / corrected claims that didn't ship. vector-tools.md - Removed: spacebar temp-pan, Alt duplicate-as-you-drag, generic Shift-constrain. - Added: verified shortcuts (Cmd+Z/Y/D/C/X/V/G, Cmd+]/[ with Shift modifier, Cmd+J / Cmd+Alt+J in Pen edit mode, Delete/Backspace for layers + anchors). tool-select.md - Removed Cmd+A (not wired), Alt-drag-duplicate (not wired), Shift-constrain-axis drag (not wired), Cmd-click stack-walk (not wired). Kept the verified marquee + multi-select. tool-direct-select.md - Re-wrote anchor / handle interactions to match the actual hit- test branches (Alt-click anchor toggles kind in one click; Alt- drag a handle breaks symmetry; Alt-click segment inserts an anchor; plain drag of a segment bows it). Removed the "click an endpoint to continue drawing" claim — that's a Pen-only flow. tool-hand.md - Removed every fictional zoom shortcut (Cmd+wheel, Cmd+0, Cmd+= / Cmd+-). Documented the real zoom controls (−/+/Fit buttons + dropdown in the canvas toolbar). Spacebar reposition scoped correctly to the Pen tool only. tool-pen.md - Clarified that the Pen options pane has its own Fill / Stroke inputs (separate from any "Stroke panel" that doesn't actually exist). tool-pencil.md - Removed every claim that wasn't true: smoothing slider, Alt-drag append, auto-close. Pencil writes a plain polyline (M…L L L…), one layer per stroke. Tool options pane has only colour + width. tool-shape.md - Filled in the missing primitives (rounded-rect / circle / triangle — total 8, not 5). Removed Shift / Alt drag modifiers that aren't checked in startShapeDrag / commitShapeFromDrag. Added the small-drag → default-size fallback that the code does do. tool-text.md - Replaced the "drag a rectangle to size" claim with the actual click-to-place behaviour (placeTextWithTool drops a fixed-size box at the cursor + auto-flips to Select with the box focused). Softened the Cmd+B/I/U claims to "browser native rich-text shortcuts" since they're not wired in the app code. tool-eyedropper.md - Replaced the fictional "inline ⊙ buttons next to colour fields" with the real OS-colour-picker eyedropper that Chrome's native shows. panel-layers.md - Removed Cmd+A select-all (not wired). Added Shift modifier to Cmd+]/[ for bring-to-front / send-to-back. Clarified that position units are inches in print modes, pixels in Custom Art / Slide / Deck (matches the unit toggle behaviour). Co-Authored-By: Claude Opus 4.7 --- src/help/panel-layers.md | 16 +++++---- src/help/tool-direct-select.md | 16 +++++---- src/help/tool-eyedropper.md | 19 +++++++---- src/help/tool-hand.md | 28 +++++++--------- src/help/tool-pen.md | 12 ++++--- src/help/tool-pencil.md | 51 +++++++++++----------------- src/help/tool-select.md | 26 ++++++--------- src/help/tool-shape.md | 61 +++++++++++++++++----------------- src/help/tool-text.md | 31 +++++++++-------- src/help/vector-tools.md | 21 ++++++++---- 10 files changed, 141 insertions(+), 140 deletions(-) diff --git a/src/help/panel-layers.md b/src/help/panel-layers.md index d3fac2e..667270f 100644 --- a/src/help/panel-layers.md +++ b/src/help/panel-layers.md @@ -40,11 +40,14 @@ Each row in the layer list shows: - **Drag** rows to reorder. Z-order on the canvas follows the list order (top of the list = top of the stack). - **Cmd/Ctrl + ]** / **Cmd/Ctrl + [** sends selected layers - forward / backward. -- **Shift+click** to multi-select; then drag a contiguous block. + forward / backward. Add **Shift** for bring-to-front / send-to- + back. +- **Shift+click** (or Cmd / Ctrl + click) to multi-select rows. - **Group** — select multiple rows + click the Group button (or - Cmd/Ctrl + G) to collapse them under a single expandable row. - Groups have their own visibility / lock toggles that cascade. + press **Cmd/Ctrl + G**) to collapse them under a single + expandable row. Groups have their own visibility / lock toggles + that cascade. +- **Ungroup** — click an active group's Ungroup button. ## Layer options (the per-layer right-side pane) @@ -52,8 +55,9 @@ Clicking a layer in the list (or selecting it on the canvas) populates a contextual options block in the right-side floating pane. Common controls: -- **Position** — x / y / w / h in inches (or px in screen-DPI - modes). Aspect-ratio lock keeps width + height proportional. +- **Position** — x / y / w / h in canvas units (inches for print + modes; pixels for Custom Art / Slide / Deck). The 🔒 button + toggles aspect-ratio lock so changing w updates h proportionally. - **Rotation** — 0–360°. - **Opacity** — 0–1. - **Fit** — for image layers: cover / contain / fill / none. diff --git a/src/help/tool-direct-select.md b/src/help/tool-direct-select.md index b21d7ee..444eca2 100644 --- a/src/help/tool-direct-select.md +++ b/src/help/tool-direct-select.md @@ -21,8 +21,8 @@ counterpart to Select, which moves the whole layer. By default both handles move symmetrically (smooth point). - **Alt+drag** a handle to break symmetry — corner point with independent handles per side. -- **Click an anchor without dragging, then Alt+click** to flip - between smooth point and corner point. +- **Alt+click an anchor** toggles between smooth point and corner + point. ## Multi-anchor edits @@ -36,11 +36,13 @@ counterpart to Select, which moves the whole layer. ## Segment edits -- **Drag a segment** between two anchors to bow it without moving - the anchors themselves (curve-direct-edit). -- **Click an endpoint** when the path is open to continue drawing - from it (auto-flips you to the Pen tool with the path's last - anchor pre-selected). +- **Drag a segment** between two anchors to bow it (curve-direct- + edit) without moving the anchors themselves. +- **Alt+click a segment** to insert a new anchor at the click point + and drag it. +- To continue drawing from an open endpoint, switch to the **Pen + tool** and click the endpoint — Direct Selection alone won't + extend the path. ## Tips diff --git a/src/help/tool-eyedropper.md b/src/help/tool-eyedropper.md index e7d75c7..9744ffb 100644 --- a/src/help/tool-eyedropper.md +++ b/src/help/tool-eyedropper.md @@ -14,14 +14,19 @@ native `window.EyeDropper` API. focus (right-side panel). - Press **Esc** to cancel without sampling. -## Inline eyedropper buttons +## OS colour picker eyedropper -You don't need the toolbar tool to use the eyedropper — many -colour-input fields in the right-side panels have a small ⊙ button -next to them that triggers a one-shot sample directly into that -specific field. Use that when you want to sample a colour for a -specific property (e.g., stroke colour) without affecting the -"active" slot. +The browser's native colour picker (which opens when you click any +colour field in the right-side panels) also includes its own +eyedropper button in Chromium-based browsers — useful when you +want to sample a colour directly into a specific field instead of +the active slot. Behaviour differs by browser: + +- **Chromium-based** (Chrome / Edge / Brave) — the native colour + picker has an eyedropper inside. +- **Safari / Firefox** — no built-in eyedropper. Type a hex value + by hand or use the dedicated toolbar tool to sample into the + active swatch. ## Browser support diff --git a/src/help/tool-hand.md b/src/help/tool-hand.md index bcb74db..a4da63d 100644 --- a/src/help/tool-hand.md +++ b/src/help/tool-hand.md @@ -9,28 +9,24 @@ when the canvas extends beyond the visible area. - The cursor changes to a closed grab while dragging. - Doesn't select, modify, or create layers. -## Temp-pan from any tool +## Pen-mode Spacebar reposition -You rarely need to switch to the Hand tool explicitly: - -- **Hold Spacebar** with any other tool active to temp-pan. The - cursor switches to the grab cursor; release the spacebar to pop - back to the previous tool. Works mid-stroke for the Pen + Pencil - tools (the in-progress draft stays put). +A specific case: while mid-draw with the **Pen tool**, holding +**Spacebar** repositions the anchor you're currently placing (and +slides its handles with it). This is a Pen-tool-only behaviour, not +a global "temp-pan". Release to commit the anchor. ## Zoom controls -Zoom isn't tied to the Hand tool — it works from any tool: +Zoom isn't tied to the Hand tool — it works from any tool via the +canvas toolbar at the top of the canvas: -- **Cmd/Ctrl + scroll wheel** zooms toward the cursor. -- **Cmd/Ctrl + + / -** zoom in / out by one preset step. -- **Cmd/Ctrl + 0** fits the artboard to the viewport. -- The **Zoom** select at the top of the canvas chooses a preset - level (25% → 400%) or "Fit". +- **− / +** buttons step by 10 % each. +- **Zoom dropdown** chooses a preset level. +- **Fit** button auto-fits the artboard to the viewport. ## Tips -- The temp-pan modifier is essentially the only reason to flip to - the Hand tool deliberately — it gives you a momentary pan without - losing your active tool's modal state. - A trackpad two-finger swipe also pans without a tool change. +- For pixel-precise alignment, zoom in via the **+** button until + pixel boundaries are visible, then pan with the Hand tool. diff --git a/src/help/tool-pen.md b/src/help/tool-pen.md index ac97d19..e9543d0 100644 --- a/src/help/tool-pen.md +++ b/src/help/tool-pen.md @@ -65,11 +65,13 @@ With **multiple anchors selected via the Direct Selection tool**: ## Tips -- The stroke thickness while drawing matches what's set in the - right-side **Stroke** panel — set width + colour before you start - if you want immediate visual feedback. +- The Pen tool's options pane has its own **Fill colour**, **Stroke + colour**, and **Stroke width** inputs — set them before you start + drawing for immediate visual feedback. They're separate from any + layer's existing stroke settings. +- The **Fill closed path** checkbox in the options pane controls + whether a closed path renders with its fill colour or stays + outline-only. - Pen and Pencil store the same underlying path data, so a Pencil sketch can be opened with Direct Selection + edited with the Pen ops without conversion. -- The canvas grid + snap settings (right-side panel) help with - precise vector placement. diff --git a/src/help/tool-pencil.md b/src/help/tool-pencil.md index 0e3879e..97ce001 100644 --- a/src/help/tool-pencil.md +++ b/src/help/tool-pencil.md @@ -1,45 +1,32 @@ # Pencil tool (B) -Freehand drawing. Your pointer's path is recorded as a sequence of -points then smoothed into a Bézier path on release. +Freehand drawing. Your pointer's path is sampled as a polyline of +line segments — each stroke becomes its own `shape` (path) layer. ## Drawing - **Click + drag** to draw. Release to commit. -- The resulting layer is a vector `shape` (path kind) — identical - data model to a path drawn with the Pen tool, so you can edit it - with [Direct Selection](#/help/tool-direct-select) afterwards. +- The resulting layer is a vector `shape` (path kind) — same + underlying data model as a Pen path, so you can edit it with + [Direct Selection](#/help/tool-direct-select) afterwards (drag + individual anchors, bow segments, etc). -## Smoothing +## Tool options -The pencil applies a default smoothing pass that: +The right-side **Tool options** pane has two inputs: -- Drops every Nth point to reduce noise. -- Fits Bézier handles to the remaining points using a curvature- - preserving algorithm. -- Closes the path automatically if your release point is within a - short distance of the start (configurable threshold). +- **Stroke colour** — the line colour. +- **Stroke width** — in pixels. -The right-side **Tool options** pane has a smoothing slider — drop -it to 0 to get every raw input point preserved; crank it up for -sketch-style smoothed strokes. - -## Modifiers - -- **Alt+drag** — add to the currently-selected path (extends it - from the closest endpoint). -- **Shift+click** an endpoint of the currently-selected path to - continue from that endpoint with a single straight segment. - -## Stroke + fill - -Like the Pen, the active **Stroke** panel + **Fill** panel apply at -draw time. A pencil layer with a fill becomes a closed-shape fill; -with stroke only it stays a single drawn line. +Both apply at draw time. They're separate from any selected +layer's stroke settings. ## Tips -- Trackpad input gives you nicer curves than a mouse — natural - micro-jitter feeds the smoother better. -- For a pixel-perfect path, switch to the **Pen** tool instead — - Pencil is for organic strokes, Pen for deliberate Bézier work. +- Pencil strokes are stored as line-to segments (no smoothing in + v1). For a smoothed curve, draw with the **Pen tool** instead and + pull tangent handles where you want curves. +- Each release creates a new layer — for multi-stroke sketches you + can group the layers later via the Layers panel. +- Trackpad input gives you smoother visual motion than a mouse, but + the underlying path stays a polyline either way. diff --git a/src/help/tool-select.md b/src/help/tool-select.md index b938223..f9c7629 100644 --- a/src/help/tool-select.md +++ b/src/help/tool-select.md @@ -6,22 +6,20 @@ The default tool. Moves, scales, and rotates whole layers. - **Click** a layer to select it. Eight handles appear around the bounding box. -- **Drag** to move. Hold **Shift** to constrain to the nearest 45° - axis (horizontal, vertical, or diagonal). -- **Drag a corner handle** to scale. Hold **Shift** to keep the - aspect ratio. +- **Drag** the layer body to move it. +- **Drag a corner handle** to scale on both axes. - **Drag a side handle** to scale on one axis. -- **Drag the small rotate handle** above the top edge to rotate. Hold - **Shift** to snap to 15° increments. -- **Hold Alt while dragging** to duplicate the layer in place. +- **Drag the rotate handle** above the top edge to rotate. +- **Cmd/Ctrl + D** duplicates the selected layer. ## Multi-select -- **Shift+click** another layer to add it to the selection. -- **Cmd/Ctrl+A** selects every layer on the current surface. +- **Shift+click** (or Cmd / Ctrl + click) another layer to add it to + the selection. - **Marquee box-select** — click an empty area of the canvas and drag. Every layer whose bounding box intersects the marquee joins the - selection. + selection. Hold **Shift / Cmd / Ctrl** while marqueeing to add to + the existing selection instead of replacing it. With ≥2 layers selected, the **Align & Distribute** panel + the **Pathfinder** ops (for vector shapes) become available. @@ -36,8 +34,6 @@ With ≥2 layers selected, the **Align & Distribute** panel + the ## Tips -- The Select tool ignores the per-layer visibility / lock state set - in the Layers panel. A locked layer still highlights on hover but - refuses drag input. -- Hold **Cmd/Ctrl** while clicking to pick up a layer that's behind - another layer at the click point (z-stack walk). +- A locked layer (lock icon in the Layers panel) refuses drag input + on the canvas; the row in the list still highlights on hover. +- Hidden layers (eye icon off) don't intercept canvas clicks at all. diff --git a/src/help/tool-shape.md b/src/help/tool-shape.md index c71011e..881b420 100644 --- a/src/help/tool-shape.md +++ b/src/help/tool-shape.md @@ -1,44 +1,45 @@ # Shape tool (S) -Drops vector primitives — rectangle, ellipse, polygon, star, line. -The right-side **Tool options** pane picks the primitive + per-shape -parameters before you drag. +Drops vector primitives by drag-creating a bounding box on the +canvas. The right-side **Tool options** pane picks which primitive + +its fill / stroke before you drag. ## Primitives +The options pane's **Shape** dropdown: + - **Rectangle** — drag a bounding box. -- **Ellipse** — drag a bounding box; the ellipse inscribes it. -- **Polygon** — N-sided regular polygon. The options pane sets the - side count (3 – 32) before you drag. -- **Star** — M-pointed star. Options pane sets points + inner-radius - ratio. -- **Line** — drag from start to end. +- **Rounded rectangle** — same but with a configurable corner radius. +- **Circle** — perfect circle inscribed in the drag bbox. +- **Ellipse** — ellipse inscribing the drag bbox. +- **Triangle** — equilateral-ish triangle inscribed in the bbox. +- **Polygon** — N-sided regular polygon. +- **Star** — M-pointed star. +- **Line** — line from drag start to drag end. -## Drag modifiers +## Tool options -- **Shift** — constrain to a perfect square / circle, snap polygon - rotation to 15°, lock line to 45° angles. -- **Alt** — draw from the centre outward instead of corner-to-corner. +- **Shape** — the dropdown above. +- **Fill** checkbox — toggle whether the new shape gets a solid fill. +- **Fill colour** — picker when Fill is on. +- **Stroke colour** + **Stroke width** — applies as the new shape's + stroke. Setting Stroke width to 0 + Fill on = filled-only. ## Why these are vector -Every shape is stored as a Bézier path under the hood. Switching to -**Direct Selection** on any of them auto-converts the primitive into -an editable anchors-plus-handles path. You can then add / remove / -modify anchors like any other path. - -## Fill + stroke - -The right-side **Fill** and **Stroke** panels apply at draw time: - -- Solid colour, gradient, or "none". -- Stroke width, dash pattern, line cap. -- The active settings render live in the preview while you drag. +Every primitive stores an internal `shape.kind` plus parameter data +(point count, inner radius, corner radius, etc). You can tweak those +parameters later from the layer-options pane. Switching to **Direct +Selection** on a primitive auto-converts it into an editable +anchors-plus-handles path, after which the primitive parameters are +replaced by the raw path data. ## Tips -- For non-rectangular text containers, draw a shape, then add a text - layer on top + use the layer's **Clip** option to clip the text - to the shape. -- The **line** primitive's endpoints are anchors — they show up under - Direct Selection and can be moved independently. +- For non-rectangular text containers: draw a shape, then add a text + layer on top + use the text layer's **Clip** option (in the layer- + options pane) to clip the text to the shape. +- The **line** primitive's endpoints are anchors — switching to + Direct Selection lets you move each endpoint independently. +- A drag shorter than ~0.08 in drops a default-sized shape at the + cursor (so a click without dragging still creates something). diff --git a/src/help/tool-text.md b/src/help/tool-text.md index a34e805..fa12597 100644 --- a/src/help/tool-text.md +++ b/src/help/tool-text.md @@ -5,29 +5,28 @@ created with `contentEditable` set so you can type immediately. ## Creating -- **Drag** a rectangle on the canvas to size the text box. -- The cursor lands inside the box at the end of the drag — start - typing. -- **Click + release without dragging** drops a default-sized text - box at the click point. +- **Click** the canvas. A default-sized text box drops at the click + point, the tool auto-flips back to Select, and the box's + contentEditable area gains focus so you can start typing + immediately. The placeholder text is pre-selected so your first + keystroke replaces it. ## Editing -A text layer's content is HTML (rich text). Inline marks supported: +A text layer's content is HTML (rich text). Inline marks are +applied via the text-layer-options inline buttons (or the browser's +native rich-text shortcuts when the contenteditable area has focus +— browser behaviour differs): -- **Bold** (`**bold**` or **Cmd/Ctrl + B**) -- *Italic* (`*italic*` or **Cmd/Ctrl + I**) -- Underline (toolbar button or **Cmd/Ctrl + U**) -- Strikethrough -- Inline link (paste a URL while text is selected; or use the link - button in the **Type** panel). +- **Bold**, *italic*, underline, strikethrough — via the inline + toolbar buttons that appear with a text layer selected. +- Inline link — use the link button in the layer-options pane to + add a URL to selected text. Block formatting: -- Headings via the right-side type panel. -- Bulleted / numbered lists (Enter continues the list; empty Enter - exits). -- Alignment (left / center / right / justify). +- Alignment (left / center / right) via the **Alignment** dropdown. +- Font, size, colour via the **Type** options pane. ## Right-side Type panel diff --git a/src/help/vector-tools.md b/src/help/vector-tools.md index ca0c16f..9eff8f5 100644 --- a/src/help/vector-tools.md +++ b/src/help/vector-tools.md @@ -42,10 +42,19 @@ whatever you've selected. ## Keyboard shortcuts (canvas focus) - **V / A / H / P / B / S / T / I** — switch tools. -- **Shift** while drawing — constrain (square / circle / 45° angles). -- **Alt** — duplicate-as-you-drag for a selected layer. -- **Arrow keys** — nudge selection by 1 px; **Shift+Arrow** by 10 px. -- **Cmd/Ctrl + D** — duplicate selected. - **Cmd/Ctrl + Z** / **Cmd/Ctrl + Shift + Z** — undo / redo. -- **Delete / Backspace** — remove selected. -- **Spacebar** — hold to temp-pan (releases back to the previous tool). +- **Cmd/Ctrl + Y** — redo (alternate). +- **Cmd/Ctrl + D** — duplicate selected layer. +- **Cmd/Ctrl + C / X / V** — copy / cut / paste layer(s). +- **Cmd/Ctrl + G** — group selected layers. +- **Cmd/Ctrl + ] / [** — bring forward / send backward; add **Shift** + for bring-to-front / send-to-back. +- **Cmd/Ctrl + J** — close path / join two selected endpoints + (Pen / Direct Selection edit mode only). +- **Cmd/Ctrl + Alt + J** — average selected anchors to their centroid + (Pen / Direct Selection edit mode only). +- **Delete / Backspace** — remove selected layer; remove selected + anchor in Pen / Direct Selection edit mode. +- **Shift + click** (or Cmd / Ctrl + click) — additive multi-select. +- **Shift while drawing with the Pen tool** — constrain the next + anchor to a 45° angle from the previous one.