Vector shapes can fill with gradients and textures (#186)

A vector shape could only be filled and outlined with one flat colour.
Shading, glows and patterned surfaces had to be faked with stacks of
shapes. Every shape now has a paint type for its fill and its outline.

- Fill type: solid colour, linear gradient, radial gradient or
  texture. Line type offers the same without texture.
- Colour stops are edited on a bar in the inspector, as agreed in the
  issue. A click on the bar adds a stop in the colour the gradient
  already has there, so adding never changes the picture. At least two
  stops remain.
- The new Paint tool in the tab shows two handles for the selected
  shape: axis start and end, centre and radius, or the corners of one
  texture tile. "Handles: Fill / Outline" picks which paint is edited.
- Moving a whole shape moves its gradients and tile with it. Every
  gesture is one undo step.
- A texture fill always tiles, because Pixi turns a non-repeating
  pattern into a repeating one anyway. When switched on, one tile
  covers the whole shape.
- Only uploaded textures and frames can be a fill, never a drawing.
  A drawing filled with itself would rasterise itself mid-raster.
- The fingerprint of a drawing includes the texture and frame a fill
  points to, so the picture redraws when the image is swapped.

Findings:

- graphics.destroy(true) also destroyed the textures of the fills.
  With a texture fill it deleted the tile slice and the next redraw
  crashed on reading 'scaleMode' of null. It is now destroy().
- The gradient cache destroyed old gradients itself, which gave 20
  Pixi warnings "destroyed while still bound". They are now handed to
  Pixi's texture GC with autoGarbageCollect switched on. The console
  of module 47 is empty again, the last CI log had 0 of them.

Tests:

- ./check.sh: 135 files, 2011 tests, exit 0 (before 134 / 1986)
- npm run build: exit 0
- GM_STEPS=47, freshly seeded: ALL PASSED, 54 checks (before 44),
  0 console warnings
- 25 new unit tests, 10 new e2e checks in block 47i
- Four counter-checks bite, originals restored and verified with cmp
- Check sum 1232 in README and wiki, calculated (1222 + 10)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

tests/editor/shape-rows.test.ts

@@ -5,8 +5,12 @@
  */
 import { beforeAll, describe, expect, it } from 'vitest';
 import { CanvasTextMetrics } from 'pixi.js';
-import { AddVectorShapeCommand, RemoveVectorShapeCommand } from '../../src/core/commands/vectorArtCommands';
-import type { VectorArtAsset } from '../../src/core/model/Asset';
+import {
+  AddVectorShapeCommand,
+  RemoveVectorShapeCommand,
+  SetVectorShapeStyleCommand,
+} from '../../src/core/commands/vectorArtCommands';
+import type { VectorArtAsset, VectorGradient } from '../../src/core/model/Asset';
 import { buildAsset } from '../../src/core/commands/assetCommands';
 import { createEmptyProject, findAssetOf } from '../../src/core/model/Project';
 import {
@@ -25,10 +29,13 @@ import {
   buildShapeListSection,
   buildShapeSection,
   refreshShapeSection,
+  setFillTexture,
+  setPaintKind,
   shapeSignature,
 } from '../../src/editor/inspector/shapeSection';
 import { shapeDropGap, shapeDropMove, shapeRowOrder } from '../../src/editor/vectorart/shapeRows';
 import { EditorState, shapeSelection } from '../../src/editor/state';
+import { PaintCache } from '../../src/viewport/vectorArtPicture';
 
 const ROW = 30;
 
@@ -39,6 +46,8 @@ const ROW = 30;
  */
 beforeAll(() => {
   CanvasTextMetrics.measureText = (() => ({ width: 10, height: 10, lines: [], lineWidths: [] })) as never;
+  // A gradient (#186) paints itself onto a browser canvas too; the rows under test do not need it.
+  PaintCache.prototype.gradient = (() => null) as never;
 });
 
 function makeHost(): InspectorHost {
@@ -126,7 +135,7 @@ describe('shape rows', () => {
   it('shows fill, opacity and an outline switch, and no line rows without an outline', () => {
     const { host, assetId, ids } = withShapes(1);
     buildShapeSection(host, assetId, ids[0]!, [ids[0]!]);
-    expect([...host.fields.keys()]).toEqual(['name', 'fill', 'opacity', 'outline']);
+    expect([...host.fields.keys()]).toEqual(['name', 'fillType', 'fill', 'opacity', 'outline']);
     expect(texts(host)).toContain('Without an outline only the fill is drawn.');
   });
 
@@ -169,9 +178,11 @@ describe('shape rows', () => {
     buildShapeSection(host, assetId, ids[0]!, [ids[0]!]);
     expect([...host.fields.keys()]).toEqual([
       'name',
+      'fillType',
       'fill',
       'opacity',
       'outline',
+      'lineType',
       'strokeColor',
       'strokeWidth',
     ]);
@@ -281,3 +292,84 @@ describe('combining from the inspector (#187)', () => {
     );
   });
 });
+
+describe('fill and line types (#186)', () => {
+  const button = (host: InspectorHost, text: string) => widgets(host, Button).find((b) => b.text === text)!;
+  const rebuild = (host: InspectorHost, assetId: string, shapeId: string) => {
+    host.body.removeChildren();
+    host.fields.clear();
+    buildShapeSection(host, assetId, shapeId, [shapeId]);
+  };
+
+  it('switches the fill to a gradient in one undo step, and the colour row makes way for the stops', () => {
+    const { host, assetId, ids } = withShapes(1);
+    buildShapeSection(host, assetId, ids[0]!, [ids[0]!]);
+    setPaintKind(host.state, assetId, ids[0]!, 'fill', 'linear');
+    expect(shapeOf(host, assetId).paint).toMatchObject({
+      type: 'linear',
+      stops: [{ offset: 0 }, { offset: 1 }],
+    });
+    const signature = shapeSignature(host.state.project, assetId, ids[0]!, [ids[0]!]);
+    expect(signature).toContain('linear/none');
+    rebuild(host, assetId, ids[0]!);
+    expect([...host.fields.keys()]).toEqual([
+      'name',
+      'fillType',
+      'fillStopColor',
+      'fillStopAlpha',
+      'fillStopOffset',
+      'opacity',
+      'outline',
+    ]);
+    host.state.undo();
+    expect(shapeOf(host, assetId).paint).toBeUndefined();
+  });
+
+  it('edits the picked stop, and "Remove stop" only works while three are left', () => {
+    const { host, assetId, ids } = withShapes(1);
+    buildShapeSection(host, assetId, ids[0]!, [ids[0]!]);
+    setPaintKind(host.state, assetId, ids[0]!, 'fill', 'radial');
+    rebuild(host, assetId, ids[0]!);
+    // The stop's colour is the only colour row left; opacity of the stop is the first number row.
+    widgets(host, ColorField)[0]!.onChange!(0xff0000);
+    widgets(host, NumberField)[0]!.onChange!('0.5');
+    const paint = shapeOf(host, assetId).paint as VectorGradient;
+    expect(paint.stops[0]).toEqual({ offset: 0, color: 0xff0000, alpha: 0.5 });
+    expect(button(host, 'Remove stop').eventMode).toBe('none');
+
+    host.state.execute(
+      new SetVectorShapeStyleCommand(assetId, ids[0]!, {
+        paint: { ...paint, stops: [...paint.stops, { offset: 0.5, color: 0, alpha: 1 }] },
+      }),
+    );
+    rebuild(host, assetId, ids[0]!);
+    expect(button(host, 'Remove stop').eventMode).not.toBe('none');
+    button(host, 'Remove stop').onClick!();
+    expect((shapeOf(host, assetId).paint as VectorGradient).stops.map((s) => s.offset)).toEqual([1, 0.5]);
+  });
+
+  it('gives the outline a type of its own, with the line colour as its first stop', () => {
+    const { host, assetId, ids } = withShapes(1);
+    shapeOf(host, assetId).stroke = { color: 0x112233, width: 3 };
+    buildShapeSection(host, assetId, ids[0]!, [ids[0]!]);
+    setPaintKind(host.state, assetId, ids[0]!, 'stroke', 'linear');
+    expect(shapeOf(host, assetId).stroke).toMatchObject({
+      color: 0x112233,
+      width: 3,
+      paint: { type: 'linear' },
+    });
+    expect((shapeOf(host, assetId).stroke!.paint as VectorGradient).stops[0]?.color).toBe(0x112233);
+    setPaintKind(host.state, assetId, ids[0]!, 'stroke', 'solid');
+    expect(shapeOf(host, assetId).stroke).toEqual({ color: 0x112233, width: 3 });
+  });
+
+  it('a texture fill shows the picker, and picking writes the id into the paint', () => {
+    const { host, assetId, ids } = withShapes(1);
+    buildShapeSection(host, assetId, ids[0]!, [ids[0]!]);
+    setPaintKind(host.state, assetId, ids[0]!, 'fill', 'texture');
+    rebuild(host, assetId, ids[0]!);
+    expect(host.fields.has('fillTexture')).toBe(true);
+    setFillTexture(host.state, assetId, ids[0]!, 't1');
+    expect(shapeOf(host, assetId).paint).toMatchObject({ type: 'texture', texture: 't1' });
+  });
+});