Vector art: layers and groups, Shift+click selects (#190)

Vector Art gets a section Layers and groups, the inspector lists and the selection rules are brought up to date, and the limits name #291 for rotating and scaling. Keyboard names Ctrl+G and Ctrl+Shift+G on shapes. Development carries the sum of 1645 e2e checks.

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

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)) ·

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