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.