mirror of
https://github.com/PR0M3TH3AN/Artstr-Studio.git
synced 2026-10-27 08:40:39 +00:00
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:
1 parent
e9f3682bff
commit
ef03f731d1
10 files changed
+141
-140
No files matched your search
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
@@ -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.
|
||||
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
|
||||
|
||||
|
||||
@@ -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.
|
||||
Reference in new issue
Block a user