diff --git a/Development.md b/Development.md index 7b57983..79dfb78 100644 --- a/Development.md +++ b/Development.md @@ -18,7 +18,7 @@ php tests/php/accounts.test.php # the API's accoun # has and the web server's container has not (SKIP there) php tests/php/snapshots.test.php # the snapshot store (#231), the same way php tests/php/releases.test.php # the release store (#266), the same way -node tools/seed-e2e.mjs && node tools/e2e.mjs # 1639 editor checks, screenshots in /tmp/gm-e2e-*.png +node tools/seed-e2e.mjs && node tools/e2e.mjs # 1645 editor checks, screenshots in /tmp/gm-e2e-*.png GM_STEPS=20 node tools/e2e.mjs # or 1-12, or 6,20 — a subset while working on one step ./e2e.sh start [GM_STEPS] # the same run detached, see below ./e2e.sh status # live progress, or the last run's result diff --git a/Keyboard.md b/Keyboard.md index cf66c68..4782613 100644 --- a/Keyboard.md +++ b/Keyboard.md @@ -1,6 +1,6 @@ `Ctrl+Z` / `Ctrl+Shift+Z` / `Ctrl+Y` undo/redo (`Cmd` works wherever `Ctrl` does) · `Delete` or `Backspace` remove the selection (objects, nodes, frames, the shapes of a vector art, keys or a row of the Animation tab, a graph group or comment — the box only, its nodes stay, and a band that caught boxes and nodes together removes both in one step; a link or transition picked on its line; an asset asks first) · `Ctrl+G` create -container from the selection · `Ctrl+Enter` play, and pause/resume while playing · `Esc` stop · +container from the selection — on the shapes of a vector drawing it groups them, and `Ctrl+Shift+G` ungroups ([Vector art](Vector-Art#layers-and-groups)) · `Ctrl+Enter` play, and pause/resume while playing · `Esc` stop · `Esc` on a question does what its Cancel does · while the eyedropper of an object variable picks, `Enter` takes the candidate and `Esc` leaves without it, before anything else those keys do ([Behaviors](Behaviors)) · diff --git a/Vector-Art.md b/Vector-Art.md index 1e6c87f..c4bec1b 100644 --- a/Vector-Art.md +++ b/Vector-Art.md @@ -24,8 +24,9 @@ meant to be seen big wants a bigger canvas, not a different setting. ## Shapes and rings -A drawing is a list of **shapes**, drawn in order — the last one lies on top. A shape has a fill -colour, an opacity and, if you want one, an **outline** (colour and width). +A drawing is made of **shapes**, drawn in order — the last one lies on top. A shape has a fill +colour, an opacity and, if you want one, an **outline** (colour and width). The shapes stand on +**layers** and can be put into **groups**, see [Layers and groups](#layers-and-groups). Each shape is built from one or more **rings**. A ring is a chain of points, and it is either **closed** or open: @@ -65,7 +66,9 @@ With **Paint** the Point menu makes way for **Handles**, see [Gradients and text **Select** edits what is there: -- Drag a **point**, a **handle**, or the **whole shape** — by its fill or by its line. +- Drag a **point**, a **handle**, or the **whole shape** — by its fill or by its line. A shape that + stands in a group brings the whole group along, and with several shapes selected a drag on one of + them moves all of them, as one undo step. - A **double-click on a segment** puts a new point there, picked; press it again to drag it. On a curved segment the curve is *split*, not cut: both halves together draw exactly what was drawn before. @@ -73,9 +76,11 @@ With **Paint** the Point menu makes way for **Handles**, see [Gradients and text **right-click** on a point opens; the same menu sets the point's type. A ring left without a point goes with it, a shape left without a ring too. - **Alt** on a straight point makes it symmetric, and a point with handles straight again. -- **Ctrl+click** (Cmd on a Mac) adds a shape to the selection or takes it out again. The shapes - selected alongside show their outline; only the one clicked last shows its points and handles. - A plain click selects that one shape alone. +- **Ctrl+click** (Cmd on a Mac) or **Shift+click** adds a shape to the selection or takes it out + again. With Select, Shift pans the view only beside the shapes; the middle button pans anywhere. + The shapes selected alongside show their outline; only the one clicked last shows its points and handles. + A plain click on a shape outside the selection selects that shape alone, or its group; a click + on a shape of the selection keeps the selection and makes that shape the one with the points. - Without a picked point **Delete** removes the selected shapes, also when they were picked in the list of the inspector. A click inside a shape, on its line or on another shape drops the pick. @@ -104,20 +109,25 @@ than once per mouse event, which is what keeps a fast drag from falling behind t Selecting a shape — in the tab or in the list — gives it its own rows: -- **SHAPES** lists every shape of the asset, each row painted with the shape itself, the whole - canvas scaled into the swatch, so a row also says *where* on the canvas its shape sits. The - **topmost row is drawn last**, the way a layer list reads. +- **LAYERS** lists the layers of the drawing, see [Layers and groups](#layers-and-groups). +- **SHAPES** lists the shapes of the layer that is worked on, each row painted with the shape + itself, the whole canvas scaled into the swatch, so a row also says *where* on the canvas its + shape sits. The **topmost row is drawn last**, the way a layer list reads. A group stands over + what is in it, its rows one step in. Ctrl or Shift on a row adds its shape to the selection, as Ctrl+click does in the tab. -- **Forward / To front / Backward / To back** move the selected shape through that order, and a row - can be **dragged** to another place in the list, also one that was not selected before: it is - selected when the mouse button goes up. A **double-click** on a name edits it right in the row. +- **Forward / To front / Backward / To back** move the selected shape through that order, among the + rows of its own group or layer, and a row can be **dragged** to another place in the list, also + one that was not selected before: it is selected when the mouse button goes up. A + **double-click** on a name edits it right in the row. +- **Group** and **Ungroup** stand under the order buttons. On the row under the pointer and on the selected ones, the **copy mark** (two squares) puts a copy of the shape right above it, on the same spot, and selects the copy; the **✕** removes that shape. The same list is used for the layers of a [tilemap](Tilemaps) and the layers and frames of [pixel art](Pixel-Art); there its header also has a **+** that adds one. Shapes have none, they are drawn with the Pen. - **COMBINE** holds the four boolean operations, see [below](#combining-shapes). -- **VECTOR SHAPE** carries Name, **Fill type** with what that type needs, Opacity and an +- **VECTOR SHAPE** carries Name, **Layer** once the drawing has more than one, **Fill type** with + what that type needs, Opacity and an **Outline** switch; with the switch on, **Line type** and Line width appear. The switch *gives and takes away* the outline rather than hiding it, and a width of zero is no outline, so the row stops at 0.1. @@ -129,6 +139,48 @@ last. A dragged colour or opacity slider is one undo step, not one per pixel of the **asset** instead of a shape shows the same list under the asset's own rows, with nothing selected. +## Layers and groups + +**A layer** is a stack of shapes with a name and an eye. Every drawing has at least one, and the +layers are drawn bottom to top like the shapes on them. + +- **One layer is the one worked on**, marked in the LAYERS list. The Pen and **Add shape** put new + shapes on it, and the SHAPES list shows what is on it. A click on a layer's row picks it; + selecting a shape, in the tab or in the list, picks the layer that shape stands on. +- **The eye** hides a layer. A hidden layer is neither in the tab nor in the picture a sprite wears, + and its shapes cannot be pressed in the tab. The Pen does not draw on a hidden layer; its hint + says so. +- **+** in the header adds a layer right over the one worked on, **✕** on a row removes that layer + with everything on it (the last layer stays), a **double-click** on a name edits it, and a row + is **dragged** to another place in the stack. +- **Layer** in the VECTOR SHAPE rows moves the selected shapes on top of another layer. A group that + is selected as a whole goes as a group. + +**A group** holds shapes and further groups. It is there to keep things together and has no place, +size or style of its own: its shapes stay where they are on the canvas. + +- **Group** (or `Ctrl+G`) puts the selected shapes into a new group, where the topmost of them stood. + A group all of whose shapes are selected goes in as one, so groups nest. Shapes of two layers + cannot share a group. +- **Ungroup** (or `Ctrl+Shift+G`) takes the selected groups away and leaves what was in them in + their place. With no whole group selected it takes the group the selected shape stands in. +- **In the tab** a click on a shape of a group selects the whole outermost group, and a drag moves + it. The clicked shape is the one that shows its points, so it can still be edited in place. + `Ctrl`+click or `Shift`+click adds or takes out single shapes, also of a group. +- **In the list** a click on a group's row selects everything in it; a click on a shape's row + selects that shape alone, which is how one shape of a group is moved or restyled by itself. The + copy mark on a group copies it with all that is in it, the ✕ removes all of it. +- **Dragging a row** moves it within its group, into another one or out. The marker starts where the + row would start, so it shows which group the row joins. At the end of a group the same gap + belongs to the group and to the list around it: drag **right** to stay in the group, **left** to + leave it. +- **A group is never empty.** The group that loses its last shape goes with it. +- The order buttons move a group selected as a whole among its neighbours, and a single shape among + the shapes of its own group. +- Combining shapes works across groups. The result stays where the lowest shape stood. + +A drawing saved before there were layers opens with all its shapes on one layer. + ## Gradients and textures **Fill type** says what the inside of a shape is painted with, **Line type** the same for the @@ -224,8 +276,11 @@ image — the project file holds the shapes, and the picture is rasterised again - **A collider does not follow the drawing.** A sprite wearing vector art collides with its box or with a shape you give it by hand, as with any picture; taking the outline as a collider shape is #188. -- **No SVG import** (#189), **no groups or layers** inside an asset - (#190). +- **No SVG import** (#189). +- **A group has no transformation of its own.** It is moved by dragging; rotating or scaling + a shape or several shapes at once is not there (#291). +- **A group cannot be hidden or locked**, only a layer can be hidden, and a layer has no opacity. +- **The groups of a layer are always shown unfolded.** - The shapes are edited **in the inspector**, not in a panel of their own like the tilemap's (#191). - **No runtime nodes** for drawing at play time. A sprite can still swap its drawing through the