# Resizing

> Eight handles around a thing: which edges each moves, about the middle or in proportion, never inside out.

Things on a plane — a shape, a picture, a frame, a group of them — are resized
by handles: small marks at the corners and sides of whatever is selected, each
of which moves the edges it sits on.

## Best practices

**Offer eight handles.** One at each corner, moving two edges, and one in the
middle of each side, moving one. A side's handle changes one dimension however
the pointer wanders.

**Hold the opposite edges still.** Dragging a handle moves its own edges and
leaves the others where they are, so that people can set one edge against
something without disturbing the rest.

**Resize about the middle on request.** With Alt (Option) held, the opposite
edges move the other way by as much, and the middle stays where it is.

**Keep the proportion on request.** With Shift held, width and height change
together. At a corner, whichever side has been asked to grow more leads, so the
pointer never ends up outside the thing; at a side, the other dimension grows
about its middle.

**Never turn a thing inside out.** An edge dragged past the one opposite stops
at a smallest size. A thing that flips when a hand overshoots is rarely what
was meant; flipping is its own command.

**Resize several things as one.** A selection of several shows one frame around
them all. Resizing the frame places each thing within the new one as it lay in
the old, and stops where the smallest of them would become too small.

**Make handles a size on the screen.** A handle looks the same, and is as easy
to take, at any zoom. On something too small on the screen to carry all eight,
leave out the sides' handles before the corners'.

**Give a finger a larger target than it sees.** A handle's target is at least
44 pixels across under a finger, while the mark stays small. Let the target
reach no more than a quarter of the way into the thing and put the rest of it
outside, so that a small thing can still be taken by its middle and moved.

**Snap edges, and show it.** An edge being moved comes to rest on the lines
around it, as a thing being moved does, and shows the line; see
[Snapping](https://ui.publictheta.com/foundations/snap.md).

**Offer the keyboard an exact way.** Command with the arrow keys moves the
right and bottom edges by one unit, and by ten with Shift. Say the new size to
people who cannot see it.

## Conventions

| Intent              | Pointer                  | Keyboard                            | Touch         |
| ------------------- | ------------------------ | ----------------------------------- | ------------- |
| Resize              | Drag a handle            | Command with an arrow key           | Drag a handle |
| About the middle    | Drag a handle with Alt   | —                                   | —             |
| Keep the proportion | Drag a handle with Shift | —                                   | —             |
| By a larger step    | —                        | Command and Shift with an arrow key | —             |

Command is ⌘ on Apple platforms and Ctrl elsewhere.

See also [Dragging](https://ui.publictheta.com/foundations/drag.md).

## Behaviour

Each statement is verified by a test in Chromium, Chromium (touch), Firefox, WebKit, WebKit (touch), unless it names the environments it applies to or is marked open.

### Handles

- There are eight: one at each corner and one in the middle of each side.
- A corner's handle moves two edges, a side's moves one.

### Dragging a handle

- The edges the handle sits on follow the drag.
- A side's handle changes one dimension, however the pointer wanders.
- The opposite edges stay where they are.
- A drag of no distance changes nothing, and gives back the same rectangle.

### From the centre

- The opposite edges move the other way by as much, and the middle stays still.

### Keeping the proportion

- Width and height change by one factor.
- At a corner, the side asked to grow more leads.
- At a side, the other dimension grows about its middle.
- A rectangle with no width or no height has no proportion to keep, and resizes freely.

### The smallest size

- An edge dragged past the one opposite stops at the minimum: the rectangle does not turn inside out.
- Whatever minimum is given, or none, a size is never less than nothing.
- Keeping the proportion, neither side goes below its minimum.

### Several as one

- Each keeps its place within the rectangle around them, in proportion.
- Resized there and back, each returns to where it was.
- A rectangle around them with no width leaves widths as they are.

### Hit targets

- On a large rectangle a target is centred on its handle.
- A target never reaches more than a quarter of the way into the rectangle: the rest lies outside.
- A side carries a handle in its middle only when it is two targets long.

## Reference implementation

React: `npx shadcn@latest add https://ui.publictheta.com/r/resize.json`