docs: audit pass — fix wrong shortcut + behaviour claims

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
  <input type="color"> 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 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.7 committed 2026-06-04 09:32:11 -04:00
1 parent e9f3682bff
commit ef03f731d1
10 files changed
+141 -140

No files matched your search

+10 -6
View File
@@ -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.
+9 -7
View File
@@ -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
+12 -7
View File
@@ -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
+12 -16
View File
@@ -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.
+7 -5
View File
@@ -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.
+19 -32
View File
@@ -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.
+11 -15
View File
@@ -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.
+31 -30
View File
@@ -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).
+15 -16
View File
@@ -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
+15 -6
View File
@@ -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.