@pascal-app/editor 0.7.0 → 0.9.1

package/src/components/editor/snapshot-capture-overlay.tsx

@@ -0,0 +1,539 @@
+'use client'
+
+import { emitter } from '@pascal-app/core'
+import { Camera, Check, Crop, Loader2, Maximize2, Monitor, X } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useIsMobile } from '../../hooks/use-mobile'
+import { triggerSFX } from '../../lib/sfx-bus'
+import useEditor from '../../store/use-editor'
+
+// Local crop-mode enum — distinct from `useEditor.captureMode` (which
+// describes *why* a capture is happening, e.g. `preset`). This one says
+// HOW the captured pixels are cropped: full-frame 16:9 (`standard`),
+// raw canvas viewport, or user-dragged area.
+type CropMode = 'standard' | 'viewport' | 'area'
+type CaptureState = 'idle' | 'capturing' | 'saved'
+
+interface DragPoint {
+  x: number
+  y: number
+}
+
+interface Drag {
+  start: DragPoint
+  end: DragPoint
+}
+
+function getResolution(
+  mode: CropMode,
+  overlayEl: HTMLDivElement | null,
+  drag: Drag | null,
+): { w: number; h: number } | null {
+  if (mode === 'standard') return { w: 1920, h: 1080 }
+
+  if (!overlayEl) return null
+  const rect = overlayEl.getBoundingClientRect()
+  const dpr = Math.min(window.devicePixelRatio, 1.5)
+
+  if (mode === 'viewport') {
+    return { w: Math.round(rect.width * dpr), h: Math.round(rect.height * dpr) }
+  }
+
+  if (mode === 'area' && drag) {
+    const w = Math.abs(drag.end.x - drag.start.x)
+    const h = Math.abs(drag.end.y - drag.start.y)
+    if (w < 4 || h < 4) return null
+    return { w: Math.round(w * dpr), h: Math.round(h * dpr) }
+  }
+
+  return null
+}
+
+export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
+  const isCaptureMode = useEditor((s) => s.isCaptureMode)
+  const captureMode = useEditor((s) => s.captureMode)
+  const setCaptureMode = useEditor((s) => s.setCaptureMode)
+  const isMobile = useIsMobile()
+  // `preset` capture mode locks the overlay to a square area crop with
+  // a transparent background — the user picks framing but not the
+  // crop shape. Matches the unified preset-thumbnail capture flow.
+  const isPreset = captureMode.mode === 'preset'
+
+  const [mode, setMode] = useState<CropMode>('standard')
+  const [drag, setDrag] = useState<Drag | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const [captureState, setCaptureState] = useState<CaptureState>('idle')
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  // Dismiss on Esc
+  useEffect(() => {
+    if (!isCaptureMode) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setCaptureMode(false)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [isCaptureMode, setCaptureMode])
+
+  // Reset local state when entering capture mode. Preset mode also
+  // auto-stages a centered square crop sized to ~75% of the shorter
+  // viewport dimension so the user can capture immediately — the
+  // overlay's pan/move/resize handles still apply if they want to
+  // tweak the framing, but they don't have to draw the rect first.
+  useEffect(() => {
+    if (!isCaptureMode) return
+    setMode(isPreset ? 'area' : 'standard')
+    setIsDragging(false)
+    setCaptureState('idle')
+    if (isPreset && overlayRef.current) {
+      const rect = overlayRef.current.getBoundingClientRect()
+      const side = Math.min(rect.width, rect.height) * 0.75
+      const cx = rect.width / 2
+      const cy = rect.height / 2
+      setDrag({
+        start: { x: cx - side / 2, y: cy - side / 2 },
+        end: { x: cx + side / 2, y: cy + side / 2 },
+      })
+    } else {
+      setDrag(null)
+    }
+  }, [isCaptureMode, isPreset])
+
+  // Listen for snapshot saved to show feedback then exit
+  useEffect(() => {
+    const handler = () => {
+      setCaptureState('saved')
+      setTimeout(() => {
+        setCaptureMode(false)
+        setCaptureState('idle')
+      }, 1500)
+    }
+    emitter.on('snapshot:saved', handler)
+    return () => emitter.off('snapshot:saved', handler)
+  }, [setCaptureMode])
+
+  const dismiss = useCallback(() => setCaptureMode(false), [setCaptureMode])
+
+  // Tracks whether the active drag is a "move entire rect" gesture
+  const moveStartRef = useRef<{ pt: DragPoint; drag: Drag } | null>(null)
+
+  // Area drag handlers — relative to the overlay container
+  const onPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (mode !== 'area' || captureState !== 'idle') return
+      e.preventDefault()
+      const rect = overlayRef.current!.getBoundingClientRect()
+      const pt = { x: e.clientX - rect.left, y: e.clientY - rect.top }
+
+      // If clicking inside an existing selection → move mode
+      if (drag) {
+        const x0 = Math.min(drag.start.x, drag.end.x)
+        const y0 = Math.min(drag.start.y, drag.end.y)
+        const x1 = Math.max(drag.start.x, drag.end.x)
+        const y1 = Math.max(drag.start.y, drag.end.y)
+        if (pt.x >= x0 && pt.x <= x1 && pt.y >= y0 && pt.y <= y1) {
+          moveStartRef.current = { pt, drag }
+          setIsDragging(true)
+          ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+          return
+        }
+      }
+
+      // Outside / no selection → start new drag
+      moveStartRef.current = null
+      setDrag({ start: pt, end: pt })
+      setIsDragging(true)
+      ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+    },
+    [mode, captureState, drag],
+  )
+
+  const onPointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!isDragging) return
+      const rect = overlayRef.current!.getBoundingClientRect()
+      const pt = {
+        x: Math.max(0, Math.min(e.clientX - rect.left, rect.width)),
+        y: Math.max(0, Math.min(e.clientY - rect.top, rect.height)),
+      }
+      if (moveStartRef.current) {
+        // Move mode: translate the whole rect by the delta
+        const { pt: origin, drag: snapshot } = moveStartRef.current
+        const dx = pt.x - origin.x
+        const dy = pt.y - origin.y
+        setDrag({
+          start: { x: snapshot.start.x + dx, y: snapshot.start.y + dy },
+          end: { x: snapshot.end.x + dx, y: snapshot.end.y + dy },
+        })
+      } else if (isPreset) {
+        // Preset mode locks the rect to a square — use the smaller
+        // axis to keep the drag predictable, sign-correct so the user
+        // can still drag in any quadrant.
+        setDrag((d) => {
+          if (!d) return null
+          const dx = pt.x - d.start.x
+          const dy = pt.y - d.start.y
+          const side = Math.min(Math.abs(dx), Math.abs(dy))
+          return {
+            start: d.start,
+            end: {
+              x: d.start.x + Math.sign(dx || 1) * side,
+              y: d.start.y + Math.sign(dy || 1) * side,
+            },
+          }
+        })
+      } else {
+        setDrag((d) => (d ? { start: d.start, end: pt } : null))
+      }
+    },
+    [isDragging, isPreset],
+  )
+
+  const onPointerUp = useCallback(() => {
+    const wasMoving = moveStartRef.current !== null
+    setIsDragging(false)
+    moveStartRef.current = null
+    // Clear the rect if the user just clicked without drawing (not a move gesture)
+    if (!wasMoving) {
+      setDrag((d) => {
+        if (!d) return null
+        const w = Math.abs(d.end.x - d.start.x)
+        const h = Math.abs(d.end.y - d.start.y)
+        return w < 4 && h < 4 ? null : d
+      })
+    }
+  }, [])
+
+  // Corner-handle resize: re-anchor to the opposite corner then reuse the same drag machinery
+  const onCornerPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>, cornerIndex: number) => {
+      if (captureState !== 'idle' || !drag) return
+      e.stopPropagation()
+      e.preventDefault()
+      moveStartRef.current = null
+      const x0 = Math.min(drag.start.x, drag.end.x)
+      const y0 = Math.min(drag.start.y, drag.end.y)
+      const x1 = Math.max(drag.start.x, drag.end.x)
+      const y1 = Math.max(drag.start.y, drag.end.y)
+      // anchor = opposite corner; dragged = current corner
+      const corners: [DragPoint, DragPoint][] = [
+        [
+          { x: x1, y: y1 },
+          { x: x0, y: y0 },
+        ], // TL → anchor BR
+        [
+          { x: x0, y: y1 },
+          { x: x1, y: y0 },
+        ], // TR → anchor BL
+        [
+          { x: x1, y: y0 },
+          { x: x0, y: y1 },
+        ], // BL → anchor TR
+        [
+          { x: x0, y: y0 },
+          { x: x1, y: y1 },
+        ], // BR → anchor TL
+      ]
+      const [anchor, current] = corners[cornerIndex]!
+      setDrag({ start: anchor, end: current })
+      setIsDragging(true)
+    },
+    [captureState, drag],
+  )
+
+  const handleCapture = useCallback(() => {
+    if (captureState !== 'idle') return
+
+    let cropRegion: { x: number; y: number; width: number; height: number } | undefined
+    if (mode === 'area' && drag && overlayRef.current) {
+      const rect = overlayRef.current.getBoundingClientRect()
+      const x0 = Math.min(drag.start.x, drag.end.x)
+      const y0 = Math.min(drag.start.y, drag.end.y)
+      const w = Math.abs(drag.end.x - drag.start.x)
+      const h = Math.abs(drag.end.y - drag.start.y)
+      cropRegion = {
+        x: x0 / rect.width,
+        y: y0 / rect.height,
+        width: w / rect.width,
+        height: h / rect.height,
+      }
+    }
+
+    setCaptureState('capturing')
+    triggerSFX('sfx:snapshot-capture')
+    emitter.emit('camera-controls:generate-thumbnail', {
+      projectId,
+      captureMode: mode,
+      cropRegion,
+      // In preset mode, the ThumbnailGenerator should keep the alpha
+      // channel transparent so the saved preset thumbnail composes
+      // cleanly onto any palette background.
+      transparent: isPreset,
+    })
+  }, [captureState, mode, drag, projectId, isPreset])
+
+  if (!isCaptureMode) return null
+
+  const resolution = getResolution(mode, overlayRef.current, drag)
+
+  // Area selection rect (CSS px, relative to overlay)
+  const selectionStyle =
+    mode === 'area' && drag
+      ? {
+          left: Math.min(drag.start.x, drag.end.x),
+          top: Math.min(drag.start.y, drag.end.y),
+          width: Math.abs(drag.end.x - drag.start.x),
+          height: Math.abs(drag.end.y - drag.start.y),
+        }
+      : null
+
+  const hasSelection =
+    selectionStyle != null && selectionStyle.width > 3 && selectionStyle.height > 3
+
+  const captureDisabled = captureState !== 'idle' || (mode === 'area' && !hasSelection)
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-40" ref={overlayRef}>
+      {/* Area mode: dim layer + crosshair cursor + drag-to-select.
+       *
+       * Preset mode reuses the same DOM but stays click-through: the
+       * crop frame is auto-staged and locked, so the user adjusts the
+       * camera (orbit / pan / zoom) instead of dragging the rect. The
+       * dim letterbox + dashed border still render via the inline
+       * `box-shadow` on the selection rect — they're cosmetic. */}
+      {mode === 'area' && (
+        <div
+          className={
+            isPreset
+              ? 'pointer-events-none absolute inset-0'
+              : 'pointer-events-auto absolute inset-0 bg-black/30'
+          }
+          onPointerDown={isPreset ? undefined : onPointerDown}
+          onPointerMove={
+            isPreset
+              ? undefined
+              : (e) => {
+                  onPointerMove(e)
+                  // Update cursor: 'move' when hovering inside an existing selection
+                  if (!isDragging && drag && overlayRef.current) {
+                    const rect = overlayRef.current.getBoundingClientRect()
+                    const px = e.clientX - rect.left
+                    const py = e.clientY - rect.top
+                    const x0 = Math.min(drag.start.x, drag.end.x)
+                    const y0 = Math.min(drag.start.y, drag.end.y)
+                    const x1 = Math.max(drag.start.x, drag.end.x)
+                    const y1 = Math.max(drag.start.y, drag.end.y)
+                    e.currentTarget.style.cursor =
+                      px >= x0 && px <= x1 && py >= y0 && py <= y1 ? 'move' : 'crosshair'
+                  }
+                }
+          }
+          onPointerUp={isPreset ? undefined : onPointerUp}
+          style={isPreset ? undefined : { cursor: 'crosshair' }}
+        >
+          {/* "No selection" hint — only when the user has to draw the
+              area themselves (`standard` capture). Preset mode always
+              has a pre-staged square, so we never show it there. */}
+          {!selectionStyle && !isPreset && (
+            <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+              <span className="rounded-full bg-black/40 px-4 py-2 text-sm text-white backdrop-blur-sm">
+                Drag the area you want to capture
+              </span>
+            </div>
+          )}
+
+          {/* Selection rect */}
+          {selectionStyle && (
+            <div
+              style={{
+                position: 'absolute',
+                left: selectionStyle.left,
+                top: selectionStyle.top,
+                width: selectionStyle.width,
+                height: selectionStyle.height,
+                pointerEvents: 'none',
+                boxShadow: '0 0 0 9999px rgba(0,0,0,0.35)',
+                border: '2px dashed rgba(255,255,255,0.85)',
+                background: 'rgba(255,255,255,0.04)',
+              }}
+            >
+              {/* Corner handles — preset mode locks the frame to the
+                  auto-staged centered square; the user adjusts the
+                  camera instead. */}
+              {!isPreset &&
+                (
+                  [
+                    { pos: { top: -5, left: -5 }, cursor: 'nwse-resize' },
+                    { pos: { top: -5, right: -5 }, cursor: 'nesw-resize' },
+                    { pos: { bottom: -5, left: -5 }, cursor: 'nesw-resize' },
+                    { pos: { bottom: -5, right: -5 }, cursor: 'nwse-resize' },
+                  ] as const
+                ).map(({ pos, cursor }, i) => (
+                  <div
+                    key={i}
+                    onPointerDown={(e) => onCornerPointerDown(e, i)}
+                    style={{
+                      position: 'absolute',
+                      width: 10,
+                      height: 10,
+                      borderRadius: '50%',
+                      background: 'white',
+                      boxShadow: '0 1px 4px rgba(0,0,0,0.4)',
+                      pointerEvents: 'auto',
+                      cursor,
+                      ...pos,
+                    }}
+                  />
+                ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Top-right dismiss button (icon-only on mobile) */}
+      <div className="pointer-events-auto absolute top-4 right-4">
+        <button
+          aria-label="Close capture mode"
+          className="flex items-center gap-1.5 rounded-full border border-white/20 bg-black/60 px-3 py-1.5 text-white/80 text-xs backdrop-blur-sm transition-colors hover:bg-black/80 hover:text-white"
+          onClick={dismiss}
+          type="button"
+        >
+          <X className="h-3 w-3" />
+          {!isMobile && 'Esc to cancel'}
+        </button>
+      </div>
+
+      {/* Bottom-center mode toolbar */}
+      <div className="pointer-events-auto absolute bottom-6 left-1/2 -translate-x-1/2">
+        {(() => {
+          // Preset capture mode locks both the crop shape (square) and
+          // the transparent-background output — hide the per-shape
+          // mode buttons so the user has nothing to second-guess.
+          const modeButtons = isPreset ? null : (
+            <>
+              <ModeButton
+                active={mode === 'standard'}
+                badge="16:9"
+                icon={<Monitor className="h-3.5 w-3.5" />}
+                label="Standard"
+                onClick={() => {
+                  setMode('standard')
+                  setDrag(null)
+                }}
+              />
+              <ModeButton
+                active={mode === 'viewport'}
+                icon={<Maximize2 className="h-3.5 w-3.5" />}
+                label="Viewport"
+                onClick={() => {
+                  setMode('viewport')
+                  setDrag(null)
+                }}
+              />
+              <ModeButton
+                active={mode === 'area'}
+                icon={<Crop className="h-3.5 w-3.5" />}
+                label="Area"
+                onClick={() => setMode('area')}
+              />
+            </>
+          )
+
+          const resolutionDisplay = (
+            <span className="min-w-[80px] text-center text-white/50 text-xs tabular-nums">
+              {resolution ? `${resolution.w} × ${resolution.h}` : '—'}
+            </span>
+          )
+
+          const captureButton = (
+            <button
+              className="flex items-center gap-1.5 rounded-full bg-primary px-4 py-1.5 font-medium text-primary-foreground text-xs transition-opacity disabled:opacity-50"
+              disabled={captureDisabled}
+              onClick={handleCapture}
+              type="button"
+            >
+              {captureState === 'capturing' ? (
+                <>
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  Capturing
+                </>
+              ) : captureState === 'saved' ? (
+                <>
+                  <Check className="h-3.5 w-3.5" />
+                  Saved
+                </>
+              ) : (
+                <>
+                  <Camera className="h-3.5 w-3.5" />
+                  Capture
+                </>
+              )}
+            </button>
+          )
+
+          if (isMobile) {
+            return (
+              <div className="flex flex-col items-stretch gap-2 rounded-2xl border border-white/10 bg-neutral-900/95 px-2 py-2 shadow-xl backdrop-blur-md">
+                {modeButtons && (
+                  <div className="flex items-center justify-center gap-1">{modeButtons}</div>
+                )}
+                <div
+                  className={
+                    modeButtons
+                      ? 'flex items-center justify-center gap-2 border-white/10 border-t pt-2'
+                      : 'flex items-center justify-center gap-2'
+                  }
+                >
+                  {resolutionDisplay}
+                  {captureButton}
+                </div>
+              </div>
+            )
+          }
+
+          return (
+            <div className="flex items-center gap-1 rounded-full border border-white/10 bg-neutral-900/95 px-2 py-2 shadow-xl backdrop-blur-md">
+              {modeButtons}
+              {modeButtons && <div className="mx-1 h-4 w-px bg-white/10" />}
+              {resolutionDisplay}
+              <div className="mx-1 h-4 w-px bg-white/10" />
+              {captureButton}
+            </div>
+          )
+        })()}
+      </div>
+    </div>
+  )
+}
+
+function ModeButton({
+  active,
+  icon,
+  label,
+  badge,
+  onClick,
+}: {
+  active: boolean
+  icon: React.ReactNode
+  label: string
+  badge?: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      className={`flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs transition-colors ${
+        active ? 'bg-white/15 text-white ring-1 ring-white/20' : 'text-white/50 hover:text-white/90'
+      }`}
+      onClick={onClick}
+      type="button"
+    >
+      {icon}
+      {label}
+      {badge && (
+        <span className="rounded-sm bg-white/10 px-1 py-0.5 font-medium text-[10px] text-white/40 leading-none">
+          {badge}
+        </span>
+      )}
+    </button>
+  )
+}