Vector Art: scaling, turning and mirroring (#291)

A new section on the frame round the selection, its keys on the Keyboard page, and the sum of e2e checks (1664).

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                 # 1660 editor checks, screenshots in /tmp/gm-e2e-*.png
+node tools/seed-e2e.mjs && node tools/e2e.mjs                 # 1664 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

@@ -19,4 +19,4 @@ milliseconds, the index and count ports of list and text nodes) set `NumberField
 `decimals: 0` and round to whole numbers · viewport: wheel zooms in whole steps (1/8, 1/4, 1/2,
 then 1 to 6, 8, 12, 16, 24 screen pixels per world pixel; see [Scene editing](Scene-editing)),
 middle-drag or `Shift`+drag pans, drag on empty space rubber-bands, `Ctrl`/`Shift`-click toggles an
-object in the selection (hierarchy rows too) · tilemap panel: holding `Alt` switches to Pick — a click takes that cell's tile from the active layer — and releasing it brings back the tool before ([Tilemaps](Tilemaps)) · Vector art tab: `Alt`-click a point to make it symmetric and straight again, `Esc` ends the line the Pen is drawing, `Delete` removes the selected shapes, picked on the canvas or in the list ([Vector art](Vector-Art)) · wherever points are edited (Curve tab, Vector art tab, a polygon collider in the scene view, a frame's collision outline in the Texture tab): a double-click on the line puts a point there, a click picks one, and with a point picked `Delete` takes that point instead of the selection; a right-click on a point opens its menu.
+object in the selection (hierarchy rows too) · tilemap panel: holding `Alt` switches to Pick — a click takes that cell's tile from the active layer — and releasing it brings back the tool before ([Tilemaps](Tilemaps)) · Vector art tab: `Alt`-click a point to make it symmetric and straight again, `Esc` ends the line the Pen is drawing, `Delete` removes the selected shapes, picked on the canvas or in the list, and on the frame round the selection `Shift` keeps the proportions while a square is pulled, `Alt` scales about the middle and `Shift` on the knob turns in steps of 15 degrees ([Vector art](Vector-Art#scaling-turning-and-mirroring)) · wherever points are edited (Curve tab, Vector art tab, a polygon collider in the scene view, a frame's collision outline in the Texture tab): a double-click on the line puts a point there, a click picks one, and with a point picked `Delete` takes that point instead of the selection; a right-click on a point opens its menu.

Vector-Art.md

@@ -69,6 +69,8 @@ With **Paint** the Point menu makes way for **Handles**, see [Gradients and text
 - 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.
+- The selection stands in a **frame** with eight squares and a knob: the squares scale it, the knob
+  turns it, see [Scaling, turning and mirroring](#scaling-turning-and-mirroring).
 - 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.
@@ -125,6 +127,8 @@ Selecting a shape — in the tab or in the list — gives it its own rows:
   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.
+- **TRANSFORM** shows where the frame of the selection stands and how big it is, turns it by a
+  number and mirrors it, see [Scaling, turning and mirroring](#scaling-turning-and-mirroring).
 - **COMBINE** holds the four boolean operations, see [below](#combining-shapes).
 - **VECTOR SHAPE** carries Name, **Layer** once the drawing has more than one, **Fill type** with
   what that type needs, Opacity and an
@@ -181,6 +185,40 @@ size or style of its own: its shapes stay where they are on the canvas.
 
 A drawing saved before there were layers opens with all its shapes on one layer.
 
+## Scaling, turning and mirroring
+
+With **Select**, whatever is selected stands in a frame: one shape, several shapes, a group. The
+frame is the same selection a drag moves, so what goes together when dragged is also scaled,
+turned and mirrored together. A shape of a group picked by its row in the list has a frame of its own.
+
+- **The eight squares scale.** A corner scales both directions with the opposite corner staying
+  where it is, a square on an edge only the direction it stands on.
+  **Shift** keeps the proportions, **Alt** scales about the middle of the frame instead.
+- **The knob over the frame turns** the selection round the middle of the frame. **Shift** turns in
+  steps of 15 degrees.
+- **The frame stands a little off the shapes**, so its squares never cover a point: a point or a
+  handle of the shape under the pointer is always the one that is taken.
+- **TRANSFORM** in the inspector does the same by number: **X** and **Y** are the left and top edge
+  of the frame, **Width** and **Height** its size, and **Rotate by** turns it by the degrees typed
+  in. A number can be typed or dragged. **Flip horizontal** and **Flip vertical** mirror the
+  selection about the middle of its frame.
+- **One pull, one typed number, one flip is one undo step**, however many shapes it took along.
+- The magnet puts a pulled square on the grid.
+
+**Nothing of this is stored as a transformation.** The points and handles of the shapes are
+rewritten, so a scaled or turned shape is an ordinary shape again:
+
+- After a turn the frame is upright again, and **Rotate by** reads 0. To take a turn back, undo it
+  or turn by the same degrees the other way.
+- Coordinates are kept to a thousandth of a canvas pixel.
+- **The outline keeps its width.** A line of two pixels is two pixels at every size of its shape.
+- **Gradients go along**: both ends of a gradient are moved, scaled and turned with the shape. A
+  gradient squeezed in one direction keeps its bands square to its axis.
+- **A picture fill** is scaled and mirrored with the shape. Turned, its tile stays upright and takes
+  the room the turned tile reaches over: the picture itself does not turn.
+- A frame cannot be pulled thinner than one canvas pixel, and not through its opposite side.
+  Mirroring is what the two Flip buttons are for.
+
 ## Gradients and textures
 
 **Fill type** says what the inside of a shape is painted with, **Line type** the same for the
@@ -219,8 +257,8 @@ toolbar says whose: the fill's or the outline's. A click on another shape shows
 - **A texture always repeats.** When it is switched on, one tile covers the whole shape, so the
   picture fills it exactly once; a smaller tile repeats it across the shape. Dragging the round
   handle past the square one mirrors the picture.
-- Dragging a **whole shape** with Select takes its gradients and its tile along. Dragging a single
-  point does not.
+- Dragging a **whole shape** with Select takes its gradients and its tile along, and so does
+  scaling, turning or mirroring it. Dragging a single point does not.
 - Each handle dragged is one undo step, and the magnet snaps the handles too.
 
 ## Combining shapes
@@ -277,8 +315,11 @@ image — the project file holds the shapes, and the picture is rasterised again
   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).
-- **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 has no transformation of its own**, and neither has a shape: scaling and turning
+  rewrite the points, and no angle or scale is remembered afterwards.
+- **A turned picture fill does not turn its picture**, and an outline is never scaled.
+- **The knob can lie outside the tab** when the frame touches the upper edge of the view. Pan or
+  zoom out to reach it, or use **Rotate by**.
 - **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