feat(editor): drag polygon-collision vertices to move them

The per-tile collision polygon editor could only add and delete
vertices, so fine-tuning a shape meant deleting a point and re-clicking
a new one. Vertices now drag to move (live preview, one undo step on
release); a click that doesn't move still deletes, as before. Pointer
capture is best-effort (wrapped) so the gesture is robust.

887 desktop tests pass; tsc clean.

Author: esengine

desktop/src/i18n/messages/tile.ts

@@ -157,8 +157,8 @@ export const tileMessages = defineMessages({
     'tile.pe.title': { en: 'Collision polygon · #{id}', zh: '碰撞多边形 · #{id}' },
     'tile.pe.clear': { en: 'Clear', zh: '清除' },
     'tile.pe.hint': {
-        en: 'Click to add a vertex · click a vertex to delete · takes effect at ≥3 points',
-        zh: '点击添加顶点 · 点击顶点以删除 · ≥3 个顶点时生效',
+        en: 'Click to add a vertex · drag a vertex to move · click it to delete · takes effect at ≥3 points',
+        zh: '点击添加顶点 · 拖动顶点移动 · 点击顶点删除 · ≥3 个顶点时生效',
     },
 
     // — Tileset editor: terrain authoring —

desktop/src/panels/TilesetEditor.tsx

@@ -80,16 +80,25 @@ function PolygonEditor(props: {
   const [pts, setPts] = useState<[number, number][]>(
     existing?.type === 'polygon' ? existing.points.map((p) => [p[0], p[1]] as [number, number]) : [],
   );
+  const ptsRef = useRef(pts);
+  ptsRef.current = pts;
+  const stageRef = useRef<HTMLDivElement>(null);
+  // A vertex drag: which point, and whether it actually moved (so a plain click still
+  // deletes it). Live-updates local state during the drag, commits ONE undo on release.
+  const vdrag = useRef<{ i: number; moved: boolean } | null>(null);
 
   const commit = (next: [number, number][]) => { setPts(next); TilesetCommands.setTilePolygon(tileId, next); };
 
-  const addPoint = (e: ReactMouseEvent) => {
-    const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    const px = Math.round(((e.clientX - r.left) / r.width) * tw);
-    const py = Math.round(((e.clientY - r.top) / r.height) * th);
-    commit([...pts, [Math.max(0, Math.min(tw, px)), Math.max(0, Math.min(th, py))]]);
+  /** Tile-space (0..tw, 0..th) point under the pointer, clamped to the tile. */
+  const pointAt = (clientX: number, clientY: number): [number, number] => {
+    const r = stageRef.current!.getBoundingClientRect();
+    const px = Math.round(((clientX - r.left) / r.width) * tw);
+    const py = Math.round(((clientY - r.top) / r.height) * th);
+    return [Math.max(0, Math.min(tw, px)), Math.max(0, Math.min(th, py))];
   };
 
+  const addPoint = (e: ReactMouseEvent) => { commit([...pts, pointAt(e.clientX, e.clientY)]); };
+
   // Escape closes, like every other transient surface.
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -109,6 +118,7 @@ function PolygonEditor(props: {
           <button type="button" onClick={onClose}>{t('tile.done')}</button>
         </div>
         <div
+          ref={stageRef}
           className="ts-pe-stage"
           style={{
             width: SIZE, height: SIZE,
@@ -125,7 +135,28 @@ function PolygonEditor(props: {
             {pts.map((p, i) => (
               <circle
                 key={i} cx={p[0]} cy={p[1]} r={Math.max(1.2, tw * 0.06)} className="ts-pe-pt"
-                onClick={(e) => { e.stopPropagation(); commit(pts.filter((_, j) => j !== i)); }}
+                // Drag to move the vertex (live), click (no move) to remove it.
+                onPointerDown={(e) => {
+                  e.stopPropagation();
+                  vdrag.current = { i, moved: false };
+                  try { (e.target as Element).setPointerCapture(e.pointerId); } catch { /* capture is optional */ }
+                }}
+                onPointerMove={(e) => {
+                  const d = vdrag.current;
+                  if (!d || d.i !== i) return;
+                  d.moved = true;
+                  const np = pointAt(e.clientX, e.clientY);
+                  setPts((cur) => cur.map((q, j) => (j === i ? np : q)));
+                }}
+                onPointerUp={(e) => {
+                  const d = vdrag.current;
+                  vdrag.current = null;
+                  try { (e.target as Element).releasePointerCapture(e.pointerId); } catch { /* not captured */ }
+                  if (!d) return;
+                  if (d.moved) TilesetCommands.setTilePolygon(tileId, ptsRef.current);
+                  else commit(ptsRef.current.filter((_, j) => j !== i));
+                }}
+                onClick={(e) => e.stopPropagation()}
               />
             ))}
           </svg>

desktop/src/theme/tileset.css

@@ -416,7 +416,8 @@
 }
 .ts-pe-svg { position: absolute; left: 0; top: 0; pointer-events: none; }
 .ts-pe-poly { fill: color-mix(in srgb, var(--gizmo-tile) 30%, transparent); stroke: var(--gizmo-tile); stroke-width: 0.5; }
-.ts-pe-pt { fill: #fff; stroke: var(--gizmo-tile); stroke-width: 0.5; pointer-events: auto; cursor: pointer; }
+.ts-pe-pt { fill: #fff; stroke: var(--gizmo-tile); stroke-width: 0.5; pointer-events: auto; cursor: grab; touch-action: none; }
+.ts-pe-pt:active { cursor: grabbing; }
 .ts-pe-pt:hover { fill: var(--error-hi); }
 .ts-pe-hint { color: var(--text-faint); font-size: var(--fs-xs); text-align: center; }