From 2d201ee522911c3d44a899d48fe19cd958a8f70b Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Thu, 4 Jun 2026 08:59:47 -0400 Subject: [PATCH] docs: per-tool pages for the vector-canvas toolbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a new "Vector tools" group to the in-app docs sidebar with one page per toolbar tool + one page per supporting panel: Toolbar tools (8): - tool-select.md — Select (V): move/scale/rotate whole layers, multi-select, marquee, dive-into-path - tool-direct-select.md — Direct Selection (A): per-anchor edits, handle break, segment-direct-edit - tool-hand.md — Hand (H): pan + temp-pan via Spacebar, plus zoom controls (which work from any tool) - tool-pen.md — Pen (P): full Illustrator parity — Bézier draw, mid-draw spacebar reposition, Alt handle-break, auto-add/delete anchors, Cmd+J join, Cmd+Alt+J average - tool-pencil.md — Pencil (B): freehand → smoothed Bézier - tool-shape.md — Shape (S): rect/ellipse/polygon/star/line primitives + Shift/Alt modifiers - tool-text.md — Text (T): rich-text layer + Type panel + token notes - tool-eyedropper.md — Eyedropper (I): window.EyeDropper sample + inline ⊙ buttons + browser-support notes Supporting panels (3): - pathfinder.md — Unite/Subtract/Intersect/Exclude via the vendored polygon-clipping - align-distribute.md — six align ops + four distribute ops, with behaviour around locked layers - free-transform.md — multi-layer scale + rotate handles on the selection bbox Plus an overview page (vector-tools.md) with a keyed table of every shortcut, a description of how the toolbar interacts with the Layers panel, and the canvas-level keyboard shortcuts (Shift/Alt/arrow nudges/Cmd+D/etc). All linked into _DOCS_TOPICS as a new "Vector tools" group, ordered after the existing Template-mode layouts section. Co-Authored-By: Claude Opus 4.7 --- src/help/align-distribute.md | 60 +++++++++++++++++++++++++++ src/help/free-transform.md | 47 +++++++++++++++++++++ src/help/pathfinder.md | 45 ++++++++++++++++++++ src/help/tool-direct-select.md | 52 +++++++++++++++++++++++ src/help/tool-eyedropper.md | 41 +++++++++++++++++++ src/help/tool-hand.md | 36 ++++++++++++++++ src/help/tool-pen.md | 75 ++++++++++++++++++++++++++++++++++ src/help/tool-pencil.md | 45 ++++++++++++++++++++ src/help/tool-select.md | 43 +++++++++++++++++++ src/help/tool-shape.md | 44 ++++++++++++++++++++ src/help/tool-text.md | 61 +++++++++++++++++++++++++++ src/help/vector-tools.md | 51 +++++++++++++++++++++++ src/index.html | 12 ++++++ 13 files changed, 612 insertions(+) create mode 100644 src/help/align-distribute.md create mode 100644 src/help/free-transform.md create mode 100644 src/help/pathfinder.md create mode 100644 src/help/tool-direct-select.md create mode 100644 src/help/tool-eyedropper.md create mode 100644 src/help/tool-hand.md create mode 100644 src/help/tool-pen.md create mode 100644 src/help/tool-pencil.md create mode 100644 src/help/tool-select.md create mode 100644 src/help/tool-shape.md create mode 100644 src/help/tool-text.md create mode 100644 src/help/vector-tools.md diff --git a/src/help/align-distribute.md b/src/help/align-distribute.md new file mode 100644 index 0000000..89a1efc --- /dev/null +++ b/src/help/align-distribute.md @@ -0,0 +1,60 @@ +# Align & Distribute + +Lines up multiple selected layers along a shared axis; spaces them +evenly. Lives in the right-side **Align** panel, available whenever +≥2 layers are selected. + +## Align ops + +Six alignment ops, organised in two rows. Each acts on every layer +in the current selection: + +### Horizontal align (uses each layer's left / center / right edge) + +- **Align left** — every layer's left edge sets to the leftmost + selected layer's left. +- **Align horizontal center** — every layer's horizontal center + sets to the midpoint of the selection's combined bounding box. +- **Align right** — every layer's right edge sets to the + rightmost selected layer's right. + +### Vertical align (uses each layer's top / middle / bottom edge) + +- **Align top** — every layer's top sets to the topmost selected + layer's top. +- **Align vertical middle** — every layer's vertical middle sets + to the midpoint of the selection's combined bounding box. +- **Align bottom** — every layer's bottom sets to the bottommost + selected layer's bottom. + +## Distribute ops + +Spread three or more selected layers so their spacing is even. +The outermost two layers stay put; intermediate layers redistribute. + +- **Distribute horizontal centers** — equal horizontal-center + spacing. +- **Distribute vertical centers** — equal vertical-center spacing. +- **Distribute horizontal gap** — equal *gap* between layer + bounding boxes horizontally (different from center-spacing when + layers have different widths). +- **Distribute vertical gap** — equal vertical gap. + +## Behaviour notes + +- A locked layer in the selection is **ignored** by both align and + distribute — it stays put while everything else rearranges + around it. +- The selection's combined bounding box is the reference for the + "center" ops. If you want to align to the canvas centre, select + every layer + the canvas margin first (or use a background-spanning + color layer). + +## Tips + +- For evenly-spaced rows of cards / chapters / icons: layout the + first and last positions, then **Distribute horizontal gap** with + the row of layers selected — the middles snap into place. +- Combine with **Free Transform** to scale + align in two steps: + free-transform-scale to size everything to a common dimension, + then align. diff --git a/src/help/free-transform.md b/src/help/free-transform.md new file mode 100644 index 0000000..f811a76 --- /dev/null +++ b/src/help/free-transform.md @@ -0,0 +1,47 @@ +# Free Transform + +Rotation + scale handles wrapped around the combined bounding box of +the current selection. Lets you transform multiple layers as a group +without flipping tools. + +## When the handles appear + +- Select any layer with the [Select tool](#/help/tool-select) — the + eight bounding-box handles + the small rotation handle appear + automatically. +- Multi-select two or more layers — the handles wrap the combined + bounding box. +- Press the **Free Transform** button (right-side toolbox) explicitly + to refresh the handles after a manual property edit. + +## Handles + +- **Eight bbox handles** — corners scale on both axes; sides scale + on one axis. Hold **Shift** to keep the aspect ratio on a corner + drag. +- **Rotation handle** — small dot above the top edge. Drag to + rotate around the bbox centre. Hold **Shift** to snap to 15° + increments. + +## Multi-layer behaviour + +When two or more layers are selected: + +- Scaling proportionally rescales each layer's `x`, `y`, `w`, `h` + relative to the combined bounding box. Layers far from the + pivoted handle move and resize more than layers near it (the + intuitive result). +- Rotating rotates each layer around the **group** centre. Each + layer's individual `rotate` value increments by the rotation + amount, and its `x/y` recompute to walk the orbit. + +## Tips + +- Free Transform composes well with [Align & Distribute](#/help/align-distribute) — + resize a row of layers to a common size with the scale handles + first, then align them. +- For a single layer, the same handles + behaviour are available + via plain Select. Free Transform's value is the multi-layer + group transform. +- Locked layers in the selection are ignored — they stay put while + the rest of the group transforms around them. diff --git a/src/help/pathfinder.md b/src/help/pathfinder.md new file mode 100644 index 0000000..6322be9 --- /dev/null +++ b/src/help/pathfinder.md @@ -0,0 +1,45 @@ +# Pathfinder + +Boolean combine operations for vector shapes. Lives in the right- +side **Pathfinder** panel, which becomes available when ≥2 vector +shapes are selected. + +## The four ops + +- **Unite** — merges every selected shape into one combined fill + (boolean OR). Outer outlines join; interior overlaps disappear. +- **Subtract** — removes every shape behind the topmost selected + shape from the topmost. Use this to "punch holes". +- **Intersect** — keeps only the area common to every selected + shape (boolean AND). Hairline overlaps result in a hairline + output. +- **Exclude** — XOR. Areas covered by an odd number of shapes + stay filled; even-coverage areas are removed. + +## How it works + +Powered by the vendored **polygon-clipping** library (~29 KB). +Each Bézier shape gets flattened into polygon segments at a +tolerance that keeps curves visually identical, the boolean op +runs in flat-polygon space, and the result re-encodes as a +single path layer. + +## Layer behaviour + +- The result is a new layer that **replaces** the selected shapes — + the originals are removed (use undo if you regret it). +- The new layer inherits the fill / stroke / opacity of the + **frontmost** selected shape (highest z). +- The new layer's position is the bounding box of all inputs, + so re-selection handles cover the combined region. + +## Tips + +- For complex multi-step ops (e.g., "subtract A from B then unite + with C"), do them one pair at a time — pathfinder operates on + the current selection. +- The result is still an editable path. [Direct Selection](#/help/tool-direct-select) + lets you tweak the resulting anchors after the boolean. +- Pathfinder ops on shapes with very dense curves (hundreds of + control points) can take a noticeable beat — large logos with + fine detail are the slow case. diff --git a/src/help/tool-direct-select.md b/src/help/tool-direct-select.md new file mode 100644 index 0000000..b21d7ee --- /dev/null +++ b/src/help/tool-direct-select.md @@ -0,0 +1,52 @@ +# Direct Selection tool (A) + +Edits anchors + Bézier handles on a single vector path. The +counterpart to Select, which moves the whole layer. + +## Engaging a path + +- Switch to the tool (press **A**) and click a vector shape — every + anchor + handle appears. +- Or with Select active, **double-click** the shape to dive in. +- Non-pen primitives (rectangle, ellipse, polygon, star) auto-convert + to an editable path when you enter Direct Selection on them. + +## Single-anchor interactions + +- **Click** an anchor to select it (filled square). +- **Drag** to move just that anchor; the segments connected to it + follow. +- **Shift+click** more anchors to multi-select. +- **Drag the small handle dot** off an anchor to adjust its tangent. + 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. + +## Multi-anchor edits + +- Marquee around the path with empty-space drag — every anchor + inside the marquee selects. +- **Arrow keys** nudge every selected anchor by 1 px. **Shift+Arrow** + by 10 px. +- **Backspace / Delete** removes selected anchors. Adjacent segments + rejoin if the removed anchor was interior; the path opens if the + removed anchor was an endpoint. + +## 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). + +## Tips + +- The tool icon is light blue (vs. the Select tool's black arrow) + so you can tell at a glance which mode you're in. +- Clicking off-canvas (or pressing **Esc**) deselects all anchors + and flips back to Select. +- See also: [Pen tool](#/help/tool-pen) for drawing new paths from + scratch. diff --git a/src/help/tool-eyedropper.md b/src/help/tool-eyedropper.md new file mode 100644 index 0000000..e7d75c7 --- /dev/null +++ b/src/help/tool-eyedropper.md @@ -0,0 +1,41 @@ +# Eyedropper tool (I) + +Samples a colour from anywhere on screen — Artstr canvas, another +browser tab, your desktop wallpaper, anywhere. Uses the browser's +native `window.EyeDropper` API. + +## Behaviour + +- Click the toolbar button (or press **I**) → the cursor changes to + a crosshair and a magnified pixel-grid follows the pointer. +- Click anywhere on screen to sample that pixel's colour. +- The sampled hex value lands in the **currently-active colour + swatch** — whichever fill / stroke / background slot last had + focus (right-side panel). +- Press **Esc** to cancel without sampling. + +## Inline eyedropper buttons + +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. + +## Browser support + +- Chromium-based browsers (Chrome / Edge / Brave / Arc) — full + support. +- Safari / Firefox — `window.EyeDropper` isn't implemented; the + button is disabled with a tooltip explaining the gap. Fall back + to manually entering a hex value or copying one from another tool. + +## Tips + +- The pixel-grid magnifier shows a 3×3 zoomed view around the + pointer so you can land on the exact pixel — useful when + sampling thin lines or anti-aliased edges. +- The eyedropper is the easiest way to colour-match a logo or + branded element on another tab — just pop the source open + next to Artstr and sample directly. diff --git a/src/help/tool-hand.md b/src/help/tool-hand.md new file mode 100644 index 0000000..bcb74db --- /dev/null +++ b/src/help/tool-hand.md @@ -0,0 +1,36 @@ +# Hand tool (H) + +Pans the canvas viewport. Useful for navigating large artboards +when the canvas extends beyond the visible area. + +## Behaviour + +- **Drag** the canvas to pan in any direction. +- The cursor changes to a closed grab while dragging. +- Doesn't select, modify, or create layers. + +## Temp-pan from any tool + +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). + +## Zoom controls + +Zoom isn't tied to the Hand tool — it works from any tool: + +- **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". + +## 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. diff --git a/src/help/tool-pen.md b/src/help/tool-pen.md new file mode 100644 index 0000000..ac97d19 --- /dev/null +++ b/src/help/tool-pen.md @@ -0,0 +1,75 @@ +# Pen tool (P) + +Illustrator-parity Bézier path tool. Click to drop anchors, +click-drag for tangent handles. Outputs a vector `shape` layer +(path kind) — editable later with [Direct Selection](#/help/tool-direct-select). + +## Drawing a new path + +- **Click** to drop a corner anchor. +- **Click-drag** to drop an anchor and pull tangent handles for a + smooth curve. +- **Shift+click** constrains the segment to a 45° angle (horizontal, + vertical, or diagonal). +- **Close the path** by clicking the first anchor (the cursor shows + a small ○ when you're over it). +- **Esc** or switching tools commits the draft as an open path. + +## Modifying mid-draw + +- **Spacebar (hold)** — reposition the anchor you're currently + placing without dropping it. Release to commit. +- **Alt+drag** while pulling a handle — break symmetry so the + outgoing and incoming handles can point in different directions + (corner-with-handles). +- **Click the most recent anchor** before clicking elsewhere to + delete just that handle, switching it from smooth to corner. + +## Editing an existing path + +When the Pen tool's cursor hovers over an existing path of the +selected layer: + +- **Click a segment** between two anchors → adds a new anchor at + that point. +- **Click an anchor** → removes it (auto-rejoin neighbours). +- **Click an endpoint** when the path is open → continues drawing + from that endpoint. + +When hovering an anchor on a path **not** currently selected, the +Pen cursor stays as the normal pen — click only selects the layer. + +## Multi-path operations + +With ≥2 vector shapes selected, the **Pathfinder** panel becomes +available: + +- **Unite** — boolean OR. +- **Subtract** — front minus back. +- **Intersect** — boolean AND. +- **Exclude** — XOR. + +See [Pathfinder](#/help/pathfinder) for the full ops list. + +## Joining and averaging anchors (Cmd+J / Cmd+Alt+J) + +With **multiple anchors selected via the Direct Selection tool**: + +- **Cmd+J** — join the two endpoints into a single anchor (or + bridge two open paths into one). If the two endpoints are + coincident, they merge; otherwise a connecting straight segment + is added. +- **Cmd+Alt+J** — average (move both anchors to the midpoint + between them). Combined with **Cmd+J** afterwards, gives you a + literal Illustrator-style merge. + +## 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. +- 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 new file mode 100644 index 0000000..0e3879e --- /dev/null +++ b/src/help/tool-pencil.md @@ -0,0 +1,45 @@ +# 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. + +## 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. + +## Smoothing + +The pencil applies a default smoothing pass that: + +- 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). + +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. + +## 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. diff --git a/src/help/tool-select.md b/src/help/tool-select.md new file mode 100644 index 0000000..b938223 --- /dev/null +++ b/src/help/tool-select.md @@ -0,0 +1,43 @@ +# Select tool (V) + +The default tool. Moves, scales, and rotates whole layers. + +## Single-layer interactions + +- **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 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. + +## Multi-select + +- **Shift+click** another layer to add it to the selection. +- **Cmd/Ctrl+A** selects every layer on the current surface. +- **Marquee box-select** — click an empty area of the canvas and drag. + Every layer whose bounding box intersects the marquee joins the + selection. + +With ≥2 layers selected, the **Align & Distribute** panel + the +**Pathfinder** ops (for vector shapes) become available. + +## Dive into a path + +- **Double-click** a vector shape with Select active to flip to + Direct Selection on that path. The path's anchors + handles + appear so you can edit them. +- Clicking outside the shape with Direct Selection active deselects + and pops you back to Select. + +## 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). diff --git a/src/help/tool-shape.md b/src/help/tool-shape.md new file mode 100644 index 0000000..c71011e --- /dev/null +++ b/src/help/tool-shape.md @@ -0,0 +1,44 @@ +# 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. + +## Primitives + +- **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. + +## Drag modifiers + +- **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. + +## 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. + +## 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. diff --git a/src/help/tool-text.md b/src/help/tool-text.md new file mode 100644 index 0000000..a34e805 --- /dev/null +++ b/src/help/tool-text.md @@ -0,0 +1,61 @@ +# Text tool (T) + +Drops a text layer. Drag to size the bounding box; the layer is +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. + +## Editing + +A text layer's content is HTML (rich text). Inline marks supported: + +- **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). + +Block formatting: + +- Headings via the right-side type panel. +- Bulleted / numbered lists (Enter continues the list; empty Enter + exits). +- Alignment (left / center / right / justify). + +## Right-side Type panel + +When a text layer is selected: + +- Font family picker (system fonts + a vendored Google Fonts subset). +- Font size + weight + style. +- Colour (with the [Eyedropper](#/help/tool-eyedropper) inline). +- Letter spacing, line height. +- Horizontal + vertical alignment within the box. +- Padding (inset from the box edge). + +## Behaviour notes + +- Text rasterizes via the browser's font engine — what you see is + what the PNG export captures. PDF export emits real PDF text for + fonts on the embeddable allowlist (Times / Helvetica / Courier + families); other fonts fall back to vector paths in the PDF. +- Linked-design and pixel-art layers can sit on top of text without + the text losing its editability. +- For multi-page **books**, place body-text headings via the chapter + editor's markdown (the reflow engine handles pagination there) — + the Text tool is for designed-page captions / titles, not body. + +## Tips + +- A locked layer (lock icon in the Layers panel) refuses clicks — + unlock first if a text box won't activate. +- Token text (`{page-number}` etc) in a **book master** text layer + resolves per-page. Token text in a designed-page text layer stays + literal. diff --git a/src/help/vector-tools.md b/src/help/vector-tools.md new file mode 100644 index 0000000..ca0c16f --- /dev/null +++ b/src/help/vector-tools.md @@ -0,0 +1,51 @@ +# Vector tools — overview + +The left-hand toolbar lives on every canvas-style artboard (Custom Art, +Slide, single deck slide, book pages, book masters). It picks the +active tool — what your pointer does when you click + drag the canvas. + +## The toolbar + +| Key | Tool | What it does | +|-----|------|-------------| +| **V** | [Select](#/help/tool-select) | Move / scale / rotate whole layers. The default. | +| **A** | [Direct Selection](#/help/tool-direct-select) | Edit anchors + handles on a single path. | +| **H** | [Hand](#/help/tool-hand) | Pan the canvas (hold spacebar for a quick temp-pan from any other tool). | +| **P** | [Pen](#/help/tool-pen) | Click to drop anchors, click-drag for Bézier handles. Illustrator-parity behaviour. | +| **B** | [Pencil](#/help/tool-pencil) | Freehand drawing. Smoothed into a Bézier path on release. | +| **S** | [Shape](#/help/tool-shape) | Drop primitives — rectangle / ellipse / polygon / star / line. | +| **T** | [Text](#/help/tool-text) | Drop a text layer. Drag to size, then type. | +| **I** | [Eyedropper](#/help/tool-eyedropper) | Sample a colour from anywhere on screen. | + +## Supporting panels + +These aren't toolbar tools — they're floating panels that operate on +whatever you've selected. + +- [**Pathfinder**](#/help/pathfinder) — Unite / Subtract / Intersect / + Exclude on two or more selected shapes. +- [**Align & Distribute**](#/help/align-distribute) — line up multiple + layers; even-space-distribute. +- [**Free Transform**](#/help/free-transform) — rotate / scale handles + around the selection bbox without flipping tools. + +## How the toolbar interacts with the layer list + +- Selecting a layer in the **Layers** panel acts like clicking it with + the Select tool — handles appear, the canvas selects it. +- Double-clicking a vector shape with Select drops you into Direct + Selection on that path (Illustrator-style "dive in"). Click outside + the shape (or hit Esc) to pop back out. +- The active tool persists per session — switching tabs / modes keeps + your last tool active. + +## 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). diff --git a/src/index.html b/src/index.html index 2d4a13d..d9b2e6e 100644 --- a/src/index.html +++ b/src/index.html @@ -12055,6 +12055,18 @@ { slug: 'deck', title: 'Slide deck', group: 'Template-mode layouts', file: 'help/deck.md' }, { slug: 'pixelart', title: 'Pixel art', group: 'Template-mode layouts', file: 'help/pixelart.md' }, { slug: 'book', title: 'Book', group: 'Template-mode layouts', file: 'help/book.md' }, + { slug: 'vector-tools', title: 'Overview', group: 'Vector tools', file: 'help/vector-tools.md' }, + { slug: 'tool-select', title: 'Select (V)', group: 'Vector tools', file: 'help/tool-select.md' }, + { slug: 'tool-direct-select', title: 'Direct Selection (A)', group: 'Vector tools', file: 'help/tool-direct-select.md' }, + { slug: 'tool-hand', title: 'Hand (H)', group: 'Vector tools', file: 'help/tool-hand.md' }, + { slug: 'tool-pen', title: 'Pen (P)', group: 'Vector tools', file: 'help/tool-pen.md' }, + { slug: 'tool-pencil', title: 'Pencil (B)', group: 'Vector tools', file: 'help/tool-pencil.md' }, + { slug: 'tool-shape', title: 'Shape (S)', group: 'Vector tools', file: 'help/tool-shape.md' }, + { slug: 'tool-text', title: 'Text (T)', group: 'Vector tools', file: 'help/tool-text.md' }, + { slug: 'tool-eyedropper', title: 'Eyedropper (I)', group: 'Vector tools', file: 'help/tool-eyedropper.md' }, + { slug: 'pathfinder', title: 'Pathfinder', group: 'Vector tools', file: 'help/pathfinder.md' }, + { slug: 'align-distribute',title: 'Align & Distribute', group: 'Vector tools', file: 'help/align-distribute.md' }, + { slug: 'free-transform', title: 'Free Transform', group: 'Vector tools', file: 'help/free-transform.md' }, ]; const _docsCache = new Map(); // slug → rendered HTML let _docsActiveSlug = 'index';