@dfosco/storyboard-react 4.2.0-beta.4 → 4.2.1

package/src/canvas/widgets/CropOverlay.jsx

@@ -0,0 +1,219 @@
+/**
+ * CropOverlay — interactive crop selection over an image.
+ *
+ * Renders:
+ * - A crop region with drag handles (corners + edges)
+ * - Dark overlay on excluded area (via box-shadow)
+ * - Rule-of-thirds grid
+ * - A floating bar anchored to the crop region with Save / Undo / Cancel + dimensions
+ *
+ * Props:
+ *   containerWidth / containerHeight — pixel dimensions of the image container
+ *   naturalWidth / naturalHeight — natural image dimensions
+ *   onSave(cropRect) — called with { x, y, width, height } in natural pixels
+ *   onCancel() — exit crop mode without saving
+ *   onUndo() — revert to previous image (only when canUndo is true)
+ *   canUndo — whether undo is available
+ */
+import { useState, useRef, useCallback, useEffect } from 'react'
+import styles from './CropOverlay.module.css'
+
+const MIN_CROP = 20
+
+function clamp(v, min, max) { return Math.min(Math.max(v, min), max) }
+
+const HANDLES = ['NW', 'NE', 'SW', 'SE', 'N', 'S', 'W', 'E']
+
+/* SVG micro-icons */
+function CheckIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" />
+    </svg>
+  )
+}
+
+function UndoIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M1.22 6.28a.749.749 0 0 1 0-1.06l3.5-3.5a.749.749 0 1 1 1.06 1.06L3.56 5h7.19a5.25 5.25 0 0 1 0 10.5H9.25a.75.75 0 0 1 0-1.5h1.5a3.75 3.75 0 0 0 0-7.5H3.56l2.22 2.22a.749.749 0 1 1-1.06 1.06Z" />
+    </svg>
+  )
+}
+
+function XIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z" />
+    </svg>
+  )
+}
+
+export default function CropOverlay({
+  containerWidth,
+  containerHeight,
+  naturalWidth,
+  naturalHeight,
+  onSave,
+  onCancel,
+  onUndo,
+  canUndo,
+}) {
+  const cw = containerWidth || 400
+  const ch = containerHeight || 300
+
+  const [cropRect, setCropRect] = useState({
+    x: Math.round(cw * 0.05),
+    y: Math.round(ch * 0.05),
+    width: Math.round(cw * 0.9),
+    height: Math.round(ch * 0.9),
+  })
+
+  const dragging = useRef(null)
+
+  // Escape key cancels crop
+  useEffect(() => {
+    const handleKey = (e) => { if (e.key === 'Escape') onCancel?.() }
+    window.addEventListener('keydown', handleKey)
+    return () => window.removeEventListener('keydown', handleKey)
+  }, [onCancel])
+
+  const startDrag = useCallback((handleId, e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dragging.current = {
+      handle: handleId,
+      startX: e.clientX,
+      startY: e.clientY,
+      startCrop: { ...cropRect },
+    }
+
+    const onMove = (me) => {
+      if (!dragging.current) return
+      const { handle, startX, startY, startCrop } = dragging.current
+      const dx = me.clientX - startX
+      const dy = me.clientY - startY
+
+      let { x, y, width, height } = startCrop
+
+      if (handle === 'move') {
+        x = clamp(startCrop.x + dx, 0, cw - width)
+        y = clamp(startCrop.y + dy, 0, ch - height)
+      } else {
+        if (handle.includes('W') || handle === 'W') {
+          const newX = clamp(startCrop.x + dx, 0, startCrop.x + startCrop.width - MIN_CROP)
+          width = startCrop.width - (newX - startCrop.x)
+          x = newX
+        }
+        if (handle.includes('E') || handle === 'E') {
+          width = clamp(startCrop.width + dx, MIN_CROP, cw - startCrop.x)
+        }
+        if (handle.includes('N') || handle === 'N') {
+          const newY = clamp(startCrop.y + dy, 0, startCrop.y + startCrop.height - MIN_CROP)
+          height = startCrop.height - (newY - startCrop.y)
+          y = newY
+        }
+        if (handle.includes('S') || handle === 'S') {
+          height = clamp(startCrop.height + dy, MIN_CROP, ch - startCrop.y)
+        }
+      }
+
+      setCropRect({ x, y, width, height })
+    }
+
+    const onUp = () => {
+      dragging.current = null
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }, [cropRect, cw, ch])
+
+  const handleSave = useCallback(() => {
+    const scaleX = (naturalWidth || cw) / cw
+    const scaleY = (naturalHeight || ch) / ch
+    onSave?.({
+      x: Math.round(cropRect.x * scaleX),
+      y: Math.round(cropRect.y * scaleY),
+      width: Math.round(cropRect.width * scaleX),
+      height: Math.round(cropRect.height * scaleY),
+    })
+  }, [cropRect, cw, ch, naturalWidth, naturalHeight, onSave])
+
+  const cropW = Math.round(((naturalWidth || cw) / cw) * cropRect.width)
+  const cropH = Math.round(((naturalHeight || ch) / ch) * cropRect.height)
+
+  return (
+    <div
+      className={styles.overlay}
+      onPointerDown={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <div
+        className={styles.cropRegion}
+        style={{
+          left: cropRect.x,
+          top: cropRect.y,
+          width: cropRect.width,
+          height: cropRect.height,
+        }}
+        onPointerDown={(e) => startDrag('move', e)}
+      >
+        {HANDLES.map((h) => (
+          <div
+            key={h}
+            className={`${styles.handle} ${styles[`handle${h}`]}`}
+            onPointerDown={(e) => startDrag(h, e)}
+          />
+        ))}
+      </div>
+
+      <FloatingCropBar
+        cropRect={cropRect}
+        containerWidth={cw}
+        cropW={cropW}
+        cropH={cropH}
+        onSave={handleSave}
+        onUndo={onUndo}
+        onCancel={onCancel}
+        canUndo={canUndo}
+      />
+    </div>
+  )
+}
+
+function FloatingCropBar({ cropRect, containerWidth, cropW, cropH, onSave, onUndo, onCancel, canUndo }) {
+  const barHeight = 36
+  const gap = 10
+  const centerX = cropRect.x + cropRect.width / 2
+  const aboveY = cropRect.y - barHeight - gap
+  const belowY = cropRect.y + cropRect.height + gap
+
+  const anchorBelow = aboveY < 0
+  const barTop = anchorBelow ? belowY : aboveY
+  const barLeft = clamp(centerX, 80, containerWidth - 80)
+
+  return (
+    <div
+      className={`${styles.floatingBar} ${anchorBelow ? styles.floatingBarBelow : ''}`}
+      style={{ top: barTop, left: barLeft }}
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      <span className={styles.dimensions}>{cropW} × {cropH}</span>
+      <span className={styles.separator} />
+      <button className={`${styles.floatingBtn} ${styles.floatingBtnSave}`} onClick={onSave}>
+        <CheckIcon /> Save
+      </button>
+      {canUndo && (
+        <button className={styles.floatingBtn} onClick={onUndo}>
+          <UndoIcon /> Undo
+        </button>
+      )}
+      <button className={`${styles.floatingBtn} ${styles.floatingBtnCancel}`} onClick={onCancel}>
+        <XIcon />
+      </button>
+    </div>
+  )
+}

package/src/canvas/widgets/CropOverlay.module.css

@@ -0,0 +1,118 @@
+/* ── Crop overlay ─────────────────────────────────────────── */
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  cursor: default;
+}
+
+.cropRegion {
+  position: absolute;
+  border: 2px solid #ffffff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 0 9999px rgba(0, 0, 0, 0.5);
+  cursor: move;
+  z-index: 11;
+}
+
+/* Rule-of-thirds grid */
+.cropRegion::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(to right, rgba(255,255,255,0.3) 1px, transparent 1px) 33.33% 0 / 33.34% 100%,
+    linear-gradient(to bottom, rgba(255,255,255,0.3) 1px, transparent 1px) 0 33.33% / 100% 33.34%;
+  pointer-events: none;
+}
+
+/* ── Drag handles ─────────────────────────────────────────── */
+
+.handle {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #ffffff;
+  border: 2px solid var(--fgColor-accent, #0969da);
+  border-radius: 2px;
+  z-index: 12;
+}
+
+.handleNW { top: -6px; left: -6px; cursor: nw-resize; }
+.handleNE { top: -6px; right: -6px; cursor: ne-resize; }
+.handleSW { bottom: -6px; left: -6px; cursor: sw-resize; }
+.handleSE { bottom: -6px; right: -6px; cursor: se-resize; }
+.handleN  { top: -6px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
+.handleS  { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
+.handleW  { left: -6px; top: 50%; transform: translateY(-50%); cursor: w-resize; }
+.handleE  { right: -6px; top: 50%; transform: translateY(-50%); cursor: e-resize; }
+
+/* ── Floating crop bar ────────────────────────────────────── */
+
+.floatingBar {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  z-index: 20;
+  transform: translateX(-50%);
+  transition: top 80ms ease-out, left 80ms ease-out;
+  pointer-events: auto;
+  white-space: nowrap;
+}
+
+.floatingBtn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #ffffff;
+  transition: background 100ms;
+}
+
+.floatingBtn:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.floatingBtnSave {
+  background: var(--bgColor-success-emphasis, #1a7f37);
+  color: #ffffff;
+}
+
+.floatingBtnSave:hover {
+  background: var(--bgColor-success-emphasis, #2da44e);
+}
+
+.floatingBtnCancel {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.floatingBtnCancel:hover {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.dimensions {
+  font-size: 11px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.6);
+  padding: 0 4px;
+  font-variant-numeric: tabular-nums;
+}
+
+.separator {
+  width: 1px;
+  height: 16px;
+  background: rgba(255, 255, 255, 0.2);
+}