feat(control): spawn session NPCs and resize tokens in preview

Co-authored-by: Cursor <cursoragent@cursor.com>

app/renderer/shared/playerToken/SceneNpcTokensOverlay.tsx

@@ -7,7 +7,7 @@ import type {
   SceneNpcToken,
   SceneNpcTokensSessionState,
 } from '../../../shared/types';
-import { DEFAULT_NPC_TOKEN_SESSION_SCALE } from '../../../shared/types/appPlayers';
+import { clampSceneNpcTokenSizeN, DEFAULT_NPC_TOKEN_SESSION_SCALE } from '../../../shared/types/appPlayers';
 import {
   normalizeNpcDisposition,
   npcDispositionRingColor,
@@ -16,7 +16,7 @@ import { sceneGridTokenFitFactor } from '../../../shared/types/sceneGrid';
 import { useAssetUrl } from '../useAssetImageUrl';
 
 import { PlayerTokenView } from './PlayerTokenView';
-import { useLiveDragBroadcast } from './useLiveDragBroadcast';
+import { useLiveDragBroadcast, useLiveResizeBroadcast } from './useLiveDragBroadcast';
 import styles from './SceneNpcTokensOverlay.module.css';
 
 type Viewport = { x: number; y: number; w: number; h: number };
@@ -35,6 +35,7 @@ function NpcSprite({
   npc,
   nx,
   ny,
+  sizeN,
   viewport,
   editable,
   dragEnabled,
@@ -43,6 +44,8 @@ function NpcSprite({
   disposition,
   inactive,
   onMove,
+  onResize,
+  resizeTitle,
   onContextMenu,
   snapNorm,
 }: {
@@ -50,6 +53,7 @@ function NpcSprite({
   npc: ProjectNpc;
   nx: number;
   ny: number;
+  sizeN: number;
   viewport: Viewport;
   editable: boolean;
   dragEnabled: boolean;
@@ -58,11 +62,14 @@ function NpcSprite({
   disposition: NpcDisposition;
   inactive: boolean;
   onMove?: (placementId: string, nx: number, ny: number) => void;
+  onResize?: (placementId: string, sizeN: number) => void;
+  resizeTitle?: string;
   onContextMenu?: (e: React.MouseEvent, placement: SceneNpcToken) => void;
   snapNorm?: (nx: number, ny: number) => { nx: number; ny: number };
 }) {
   const imageUrl = useAssetUrl(npc.avatarAssetId);
   const [localPos, setLocalPos] = useState<{ nx: number; ny: number } | null>(null);
+  const [localSize, setLocalSize] = useState<number | null>(null);
   const dragRef = useRef<{
     pointerId: number;
     startNx: number;
@@ -72,15 +79,26 @@ function NpcSprite({
     lastNx: number;
     lastNy: number;
   } | null>(null);
+  const resizeRef = useRef<{
+    pointerId: number;
+    startSize: number;
+    startDist: number;
+    lastSize: number;
+  } | null>(null);
   const { schedule, flush } = useLiveDragBroadcast(onMove, String(placement.id));
+  const { schedule: scheduleResize, flush: flushResize } = useLiveResizeBroadcast(
+    onResize,
+    String(placement.id),
+  );
   const pos = localPos ?? { nx, ny };
+  const shownSizeN = localSize ?? sizeN;
   const minDim = Math.min(viewport.w, viewport.h);
-  const sizePx = Math.max(16, placement.sizeN * gridFit * displayScale * minDim);
+  const sizePx = Math.max(16, shownSizeN * gridFit * displayScale * minDim);
   const canDrag = editable && dragEnabled && onMove !== undefined;
+  const canResize = editable && dragEnabled && onResize !== undefined;
 
-  const point = (e: React.PointerEvent) => {
-    const host = e.currentTarget.parentElement;
-    const rect = host?.getBoundingClientRect();
+  const point = (e: React.PointerEvent, host?: HTMLElement | null) => {
+    const rect = (host ?? e.currentTarget.parentElement)?.getBoundingClientRect();
     return {
       x: Math.max(0, Math.min(1, (e.clientX - ((rect?.left ?? 0) + viewport.x)) / Math.max(1, viewport.w))),
       y: Math.max(0, Math.min(1, (e.clientY - ((rect?.top ?? 0) + viewport.y)) / Math.max(1, viewport.h))),
@@ -95,6 +113,14 @@ function NpcSprite({
     setLocalPos(null);
   };
 
+  const endResize = (e: React.PointerEvent<HTMLDivElement>) => {
+    const d = resizeRef.current;
+    if (d?.pointerId !== e.pointerId) return;
+    resizeRef.current = null;
+    flushResize(d.lastSize);
+    setLocalSize(null);
+  };
+
   return (
     <div
       className={[styles.token, canDrag ? styles.editable : ''].filter(Boolean).join(' ')}
@@ -104,7 +130,7 @@ function NpcSprite({
         top: viewport.y + pos.ny * viewport.h,
         width: sizePx,
         height: sizePx,
-        pointerEvents: canDrag || onContextMenu ? 'auto' : undefined,
+        pointerEvents: canDrag || canResize || onContextMenu ? 'auto' : undefined,
       }}
       onContextMenu={
         onContextMenu
@@ -163,6 +189,41 @@ function NpcSprite({
         sizePx={sizePx}
         inactive={inactive}
       />
+      {canResize ? (
+        <div
+          className={styles.resizeHandle}
+          title={resizeTitle}
+          onPointerDown={(e) => {
+            if (e.button !== 0) return;
+            e.preventDefault();
+            e.stopPropagation();
+            const host = e.currentTarget.closest('[data-token-layer="1"]') as HTMLElement | null;
+            const p = point(e, host);
+            const dist = Math.max(1e-4, Math.hypot(p.x - pos.nx, p.y - pos.ny));
+            resizeRef.current = {
+              pointerId: e.pointerId,
+              startSize: shownSizeN,
+              startDist: dist,
+              lastSize: shownSizeN,
+            };
+            setLocalSize(shownSizeN);
+            e.currentTarget.setPointerCapture(e.pointerId);
+          }}
+          onPointerMove={(e) => {
+            const d = resizeRef.current;
+            if (d?.pointerId !== e.pointerId) return;
+            const host = e.currentTarget.closest('[data-token-layer="1"]') as HTMLElement | null;
+            const p = point(e, host);
+            const dist = Math.max(1e-4, Math.hypot(p.x - pos.nx, p.y - pos.ny));
+            const next = clampSceneNpcTokenSizeN(d.startSize * (dist / d.startDist));
+            d.lastSize = next;
+            setLocalSize(next);
+            scheduleResize(next);
+          }}
+          onPointerUp={endResize}
+          onPointerCancel={endResize}
+        />
+      ) : null}
     </div>
   );
 }
@@ -175,6 +236,8 @@ export function SceneNpcTokensOverlay({
   grid = null,
   editable = false,
   onMove,
+  onResize,
+  resizeTitle,
   onContextMenu,
   snapNorm,
   poseOverrides = null,
@@ -188,6 +251,8 @@ export function SceneNpcTokensOverlay({
   grid?: SceneGrid | null;
   editable?: boolean;
   onMove?: (placementId: string, nx: number, ny: number) => void;
+  onResize?: (placementId: string, sizeN: number) => void;
+  resizeTitle?: string;
   onContextMenu?: (e: React.MouseEvent, placement: SceneNpcToken) => void;
   snapNorm?: (nx: number, ny: number) => { nx: number; ny: number };
   poseOverrides?: Record<string, { nx: number; ny: number }> | null;
@@ -198,7 +263,7 @@ export function SceneNpcTokensOverlay({
   const displayScale = session?.scale ?? DEFAULT_NPC_TOKEN_SESSION_SCALE;
   const gridFit = sceneGridTokenFitFactor(grid);
   return (
-    <div className={styles.layer}>
+    <div className={styles.layer} data-token-layer="1">
       {placements.map((placement) => {
         const npc = byId.get(placement.npcId);
         if (!npc) return null;
@@ -215,6 +280,7 @@ export function SceneNpcTokensOverlay({
             npc={npc}
             nx={pose?.nx ?? override?.nx ?? placement.nx}
             ny={pose?.ny ?? override?.ny ?? placement.ny}
+            sizeN={override?.sizeN ?? placement.sizeN}
             viewport={viewport}
             editable={editable}
             dragEnabled={dragEnabled}
@@ -223,6 +289,8 @@ export function SceneNpcTokensOverlay({
             disposition={disposition}
             inactive={inactive}
             {...(onMove ? { onMove } : {})}
+            {...(onResize ? { onResize } : {})}
+            {...(resizeTitle ? { resizeTitle } : {})}
             {...(onContextMenu ? { onContextMenu } : {})}
             {...(snapNorm ? { snapNorm } : {})}
           />