Vector art points have four types and the pen draws whole curves (#195)

The pen only pulled out the outgoing handle of a new point, because
the opposite handle was mirrored only if it already existed. The
first segment of every dragged point was therefore half a curve.
Beyond that bug, a point had no way to say how its handles relate.

- A vector point has an optional mode: straight, corner, smooth or
  symmetric. Missing means corner. The mode is not part of the
  fingerprint, because it changes no pixel, only the next drag.
- Dragging a handle follows the mode. Corner leaves the other handle
  alone, smooth turns it along and keeps its length, symmetric
  mirrors it exactly.
- The pen pulls out both handles mirrored and marks the point
  symmetric. A plain click still sets a point without handles.
- The tab header has a "Point: ..." menu for the last clicked or set
  point. That point is drawn filled. Changing its type is one undo
  step. Text instead of four icons, because the UI kit has no
  tooltips.
- Switching a point without handles to a curved type first grows
  handles along its neighbours. Smooth and symmetric line the
  handles up and keep the rough direction of the curve.
- A point inserted on a curve is smooth. Symmetric neighbours become
  smooth, because the split shortens one of their handles.
- Alt-click still toggles between straight and symmetric.

Found on the way: the old Alt rounding took the point at the other
end of an open line as a neighbour, so its handles came out skewed.
Fixed and held by a unit test.

Existing points with handles now count as corner. Before, every drag
mirrored. No pixel changes, only the next drag behaves differently.

Tests:
- ./check.sh: 129 files, 1917 tests, exit 0 (before 1903)
- GM_STEPS=47, freshly seeded: ALL PASSED, 39 checks (before 32)
- Check sum 1195 in README and wiki is computed (1188 + 7), CI
  measures it
- Counter-checks: pen without 'symmetric' fails 3 checks, no smooth
  branch fails 1 unit test and 1 e2e check

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

tests/core/vectorart.test.ts

@@ -121,6 +121,12 @@ describe('the revision', () => {
     f.stack.execute(new RenameVectorShapeCommand(f.assetId, add.shapeId, 'Body'));
     expect(vectorArtRevision(f.art())).toBe(first);
 
+    // A point's type only says what the next drag does to its handles (#195).
+    const typed = square();
+    typed.points[0] = { ...typed.points[0]!, mode: 'smooth' };
+    f.stack.execute(new SetVectorShapeRingsCommand(f.assetId, add.shapeId, [typed]));
+    expect(vectorArtRevision(f.art())).toBe(first);
+
     f.stack.execute(new SetVectorShapeStyleCommand(f.assetId, add.shapeId, { fill: 0xff0000 }));
     const coloured = vectorArtRevision(f.art());
     expect(coloured).not.toBe(first);
@@ -316,8 +322,8 @@ describe('what a project file may say', () => {
         closed: true,
         points: [
           { x: 10, y: 10, out: { x: 4, y: 0 } },
-          { x: 90, y: 10 },
-          { x: 50, y: 80 },
+          { x: 90, y: 10, in: { x: -3, y: 0 }, out: { x: 6, y: 0 }, mode: 'smooth' },
+          { x: 50, y: 80, in: { x: -2, y: 1 }, out: { x: 2, y: -1 }, mode: 'symmetric' },
         ],
       },
       {
@@ -350,7 +356,7 @@ describe('what a project file may say', () => {
           {
             closed: true,
             points: [
-              { x: 10, y: 10, in: { x: 'left', y: 2 }, out: { x: 1, y: 2 } },
+              { x: 10, y: 10, in: { x: 'left', y: 2 }, out: { x: 1, y: 2 }, mode: 'wobbly' },
               { x: 'far', y: 10 },
               { x: 30, y: 30 },
               { x: 50 },
@@ -370,7 +376,8 @@ describe('what a project file may say', () => {
     const loaded = f.art(roundTrip(f.project));
     expect(loaded.shapes).toHaveLength(1);
     const shape = loaded.shapes[0]!;
-    // The broken handle falls away and leaves a corner; the broken points fall away entirely.
+    // The broken handle falls away and leaves a corner, and so does a point type nobody knows (#195);
+    // the broken points fall away entirely.
     expect(shape.rings[0]!.points).toEqual([
       { x: 10, y: 10, out: { x: 1, y: 2 } },
       { x: 30, y: 30 },

tests/editor/ring-edit.test.ts

@@ -4,10 +4,11 @@
  * line does to the line.
  */
 import { describe, expect, it } from 'vitest';
-import type { VectorRing } from '../../src/core/model/Asset';
+import type { VectorPointMode, VectorRing } from '../../src/core/model/Asset';
 import {
   insideRing,
   nearestOnSegment,
+  pointKind,
   pointOnSegment,
   ringGripAt,
   ringMoved,
@@ -15,6 +16,7 @@ import {
   ringSegments,
   withHandleMoved,
   withoutPoint,
+  withPointKind,
   withPointMoved,
   withPointOnSegment,
   withSmoothToggled,
@@ -44,6 +46,11 @@ function arc(): VectorRing {
   };
 }
 
+/** One point at (50, 50) with a handle 10 to either side, in the given mode. */
+function handled(mode: VectorPointMode): VectorRing {
+  return { closed: false, points: [{ x: 50, y: 50, in: { x: -10, y: 0 }, out: { x: 10, y: 0 }, mode }] };
+}
+
 describe('what the pointer grabs', () => {
   it('takes the nearest point', () => {
     expect(ringGripAt(square(), { x: 98, y: 3 }, 8)).toEqual({ kind: 'point', index: 1 });
@@ -92,21 +99,44 @@ describe('dragging', () => {
     expect(moved.points[0]).toEqual({ x: 10, y: 10, out: { x: 0, y: -40 } });
   });
 
-  it('writes a handle as an offset and mirrors the other one', () => {
-    const ring: VectorRing = {
-      closed: false,
-      points: [{ x: 50, y: 50, in: { x: -10, y: 0 }, out: { x: 10, y: 0 } }],
-    };
-    const bent = withHandleMoved(ring, 0, 'out', { x: 70, y: 60 });
+  it('writes a handle as an offset and mirrors the other one on a symmetric point', () => {
+    const bent = withHandleMoved(handled('symmetric'), 0, 'out', { x: 70, y: 60 });
     expect(bent.points[0]!.out).toEqual({ x: 20, y: 10 });
     expect(bent.points[0]!.in).toEqual({ x: -20, y: -10 });
   });
 
+  it('leaves the other handle alone on a corner (#195)', () => {
+    const bent = withHandleMoved(handled('corner'), 0, 'out', { x: 50, y: 20 });
+    expect(bent.points[0]!.out).toEqual({ x: 0, y: -30 });
+    expect(bent.points[0]!.in).toEqual({ x: -10, y: 0 });
+  });
+
+  it('turns the other handle round at its own length on a smooth point (#195)', () => {
+    // `in` is 10 long; `out` is pulled 30 up, so `in` has to point 10 down.
+    const bent = withHandleMoved(handled('smooth'), 0, 'out', { x: 50, y: 20 });
+    expect(bent.points[0]!.out).toEqual({ x: 0, y: -30 });
+    expect(bent.points[0]!.in!.x).toBeCloseTo(0, 9);
+    expect(bent.points[0]!.in!.y).toBeCloseTo(10, 9);
+  });
+
+  it('grows the mirrored handle the pen asks for, so a pen curve has two (#195)', () => {
+    const fresh: VectorRing = { closed: false, points: [{ x: 50, y: 50 }] };
+    const pulled = withHandleMoved(fresh, 0, 'out', { x: 70, y: 50 }, 'symmetric');
+    const point = pulled.points[0]!;
+    expect(point.mode).toBe('symmetric');
+    expect([point.out!.x, point.out!.y, point.in!.x, point.in!.y].map((v) => v + 0)).toEqual([20, 0, -20, 0]);
+  });
+
   it('takes a handle away when it is dropped on its own point', () => {
     const straightened = withHandleMoved(arc(), 0, 'out', { x: 0, y: 0 });
     expect(straightened.points[0]!.out).toBeUndefined();
   });
 
+  it('takes the mirror along on a symmetric point, which leaves it straight', () => {
+    const straightened = withHandleMoved(handled('symmetric'), 0, 'out', { x: 50, y: 50 });
+    expect(straightened.points[0]).toEqual({ x: 50, y: 50 });
+  });
+
   it('moves a whole ring', () => {
     const moved = ringMoved(square(), 10, -5);
     expect(moved.points.map((p) => [p.x, p.y])).toEqual([
@@ -154,6 +184,94 @@ describe('adding and taking away', () => {
   });
 });
 
+describe('the four point types (#195)', () => {
+  it('reads a point without handles as straight and one without a mode as a corner', () => {
+    expect(pointKind({ x: 0, y: 0 })).toBe('straight');
+    expect(pointKind({ x: 0, y: 0, mode: 'smooth' })).toBe('straight');
+    expect(pointKind(arc().points[0]!)).toBe('corner');
+    expect(pointKind(handled('symmetric').points[0]!)).toBe('symmetric');
+  });
+
+  it('makes a point straight by taking both handles and the mode away', () => {
+    expect(withPointKind(handled('smooth'), 0, 'straight').points[0]).toEqual({ x: 50, y: 50 });
+  });
+
+  it('grows handles on a straight point that becomes smooth', () => {
+    const smooth = withPointKind(square(), 1, 'smooth').points[1]!;
+    expect(smooth.mode).toBe('smooth');
+    expect(smooth.out).toEqual({ x: 100 / 3, y: 100 / 3 });
+    expect(smooth.in).toEqual({ x: -100 / 3, y: -100 / 3 });
+  });
+
+  it('keeps a corner’s handles where they are', () => {
+    const bent: VectorRing = {
+      closed: false,
+      points: [{ x: 0, y: 0, in: { x: -10, y: 0 }, out: { x: 0, y: -20 } }],
+    };
+    expect(withPointKind(bent, 0, 'corner').points[0]).toEqual(bent.points[0]);
+  });
+
+  it('lines the handles up for smooth and keeps each length', () => {
+    // `in` points left (10 long), `out` up (20 long): the bisector runs up and to the right.
+    const bent: VectorRing = {
+      closed: false,
+      points: [{ x: 0, y: 0, in: { x: -10, y: 0 }, out: { x: 0, y: -20 } }],
+    };
+    const point = withPointKind(bent, 0, 'smooth').points[0]!;
+    const s = Math.SQRT1_2;
+    expect(point.out!.x).toBeCloseTo(20 * s, 9);
+    expect(point.out!.y).toBeCloseTo(-20 * s, 9);
+    expect(point.in!.x).toBeCloseTo(-10 * s, 9);
+    expect(point.in!.y).toBeCloseTo(10 * s, 9);
+  });
+
+  it('gives both handles their mean length for symmetric', () => {
+    const bent: VectorRing = {
+      closed: false,
+      points: [{ x: 0, y: 0, in: { x: -10, y: 0 }, out: { x: 30, y: 0 } }],
+    };
+    const point = withPointKind(bent, 0, 'symmetric').points[0]!;
+    expect(point.mode).toBe('symmetric');
+    expect([point.in!.x, point.in!.y, point.out!.x, point.out!.y].map((v) => v + 0)).toEqual([-20, 0, 20, 0]);
+  });
+
+  it('grows the missing second handle opposite the first', () => {
+    const point = withPointKind(arc(), 0, 'smooth').points[0]!;
+    expect(point.out).toEqual({ x: 0, y: -40 });
+    expect(point.in!.x).toBeCloseTo(0, 9);
+    expect(point.in!.y).toBeCloseTo(40, 9);
+  });
+
+  it('does not reach round an open line for the neighbour of its end', () => {
+    // The first point of an open L has one neighbour; wrapping to the last would tilt its handles.
+    const line: VectorRing = {
+      closed: false,
+      points: [
+        { x: 0, y: 0 },
+        { x: 90, y: 0 },
+        { x: 90, y: 90 },
+      ],
+    };
+    expect(withPointKind(line, 0, 'smooth').points[0]!.out).toEqual({ x: 30, y: 0 });
+  });
+
+  it('splits a symmetric curve into smooth points – the halves are no longer the same length', () => {
+    const curve: VectorRing = {
+      closed: false,
+      points: [
+        { x: 0, y: 0, in: { x: 0, y: 30 }, out: { x: 0, y: -30 }, mode: 'symmetric' },
+        { x: 100, y: 0, in: { x: 0, y: -30 }, out: { x: 0, y: 30 }, mode: 'symmetric' },
+      ],
+    };
+    const split = withPointOnSegment(curve, 0, 0.25);
+    expect(split.points.map((p) => p.mode)).toEqual(['smooth', 'smooth', 'smooth']);
+  });
+
+  it('keeps a straight point on a straight segment free of a mode', () => {
+    expect(withPointOnSegment(square(), 0, 0.5).points[1]).toEqual({ x: 50, y: 0 });
+  });
+});
+
 describe('the inside of a ring', () => {
   it('holds what lies in it and not what lies beside it', () => {
     expect(insideRing(square(), { x: 50, y: 50 })).toBe(true);