feat(scenes): add scene darkness reveal and fix project reopen crash

Add darkenScene with Opening brush in presentation, persist reveal strokes per scene during a session, and close projects properly on return to home. Harden dnd asset streaming to avoid Windows main-process crashes when reopening projects. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-02 19:41:26 +08:00
parent d54e9ed02d
commit 4631a1bece
19 changed files with 526 additions and 11 deletions
@@ -0,0 +1,96 @@
+import React, { useEffect, useRef } from 'react';
+
+import type { SceneDarknessRevealStroke, SceneDarknessState } from '../../../shared/types';
+
+export type SceneDarknessOverlayProps = {
+  state: SceneDarknessState | null;
+  viewport?: { x: number; y: number; w: number; h: number };
+  /** 1.0 — полностью чёрный (Presentation); 0.5 — полупрозрачный (Control). */
+  overlayAlpha: number;
+  style?: React.CSSProperties;
+};
+
+function drawRevealStroke(
+  ctx: CanvasRenderingContext2D,
+  stroke: SceneDarknessRevealStroke | { points: { x: number; y: number }[]; radiusN: number },
+  w: number,
+  h: number,
+): void {
+  const pts = stroke.points;
+  if (pts.length === 0) return;
+  const r = stroke.radiusN * Math.min(w, h);
+  if (pts.length === 1) {
+    const p = pts[0];
+    if (!p) return;
+    ctx.beginPath();
+    ctx.arc(p.x * w, p.y * h, r, 0, Math.PI * 2);
+    ctx.fill();
+    return;
+  }
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.lineWidth = r * 2;
+  ctx.strokeStyle = 'rgba(0,0,0,1)';
+  ctx.beginPath();
+  const first = pts[0];
+  if (!first) return;
+  ctx.moveTo(first.x * w, first.y * h);
+  for (let i = 1; i < pts.length; i++) {
+    const p = pts[i];
+    if (!p) continue;
+    ctx.lineTo(p.x * w, p.y * h);
+  }
+  ctx.stroke();
+}
+
+export function SceneDarknessOverlay({
+  state,
+  viewport,
+  overlayAlpha,
+  style,
+}: SceneDarknessOverlayProps) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !state?.enabled || !viewport) return;
+    const w = Math.max(1, Math.round(viewport.w));
+    const h = Math.max(1, Math.round(viewport.h));
+    if (canvas.width !== w) canvas.width = w;
+    if (canvas.height !== h) canvas.height = h;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.fillStyle = '#000000';
+    ctx.fillRect(0, 0, w, h);
+
+    ctx.globalCompositeOperation = 'destination-out';
+    for (const stroke of state.strokes) {
+      drawRevealStroke(ctx, stroke, w, h);
+    }
+    if (state.draft && state.draft.points.length > 0) {
+      drawRevealStroke(ctx, state.draft, w, h);
+    }
+  }, [state, viewport]);
+
+  if (!state?.enabled || !viewport) return null;
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden
+      style={{
+        position: 'absolute',
+        left: viewport.x,
+        top: viewport.y,
+        width: viewport.w,
+        height: viewport.h,
+        opacity: overlayAlpha,
+        pointerEvents: 'none',
+        zIndex: 2,
+        ...style,
+      }}
+    />
+  );
+}