@dfosco/storyboard-react 4.0.0-beta.8 → 4.0.0

package/src/canvas/useMarqueeSelect.js

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/**
+ * Returns the bounding-box list for all widgets on the canvas.
+ * Each entry: { id, x, y, width, height }
+ */
+function getWidgetBounds(widgets, componentEntries, fallbackSizes) {
+  const bounds = []
+  for (const w of (widgets ?? [])) {
+    const fb = fallbackSizes[w.type] || { width: 200, height: 150 }
+    bounds.push({
+      id: w.id,
+      x: w?.position?.x ?? 0,
+      y: w?.position?.y ?? 0,
+      width: w.props?.width ?? fb.width,
+      height: w.props?.height ?? fb.height,
+    })
+  }
+  for (const entry of componentEntries) {
+    const fb = fallbackSizes['component'] || { width: 200, height: 150 }
+    bounds.push({
+      id: `jsx-${entry.exportName}`,
+      x: entry.sourceData?.position?.x ?? 0,
+      y: entry.sourceData?.position?.y ?? 0,
+      width: entry.sourceData?.width ?? fb.width,
+      height: entry.sourceData?.height ?? fb.height,
+    })
+  }
+  return bounds
+}
+
+/** Test whether two axis-aligned rectangles overlap. */
+function rectsIntersect(a, b) {
+  return a.x < b.x + b.width &&
+    a.x + a.width > b.x &&
+    a.y < b.y + b.height &&
+    a.y + a.height > b.y
+}
+
+/**
+ * Hook that powers marquee (lasso) selection on the canvas.
+ *
+ * @param {Object} opts
+ * @param {React.RefObject} opts.scrollRef    — ref to the scroll container
+ * @param {React.RefObject} opts.zoomRef      — ref holding current zoom (number 25-200)
+ * @param {Function} opts.setSelectedWidgetIds — state setter for selected IDs (Set)
+ * @param {Array} opts.widgets                — current localWidgets array
+ * @param {Array} opts.componentEntries       — current componentEntries array
+ * @param {Object} opts.fallbackSizes         — WIDGET_FALLBACK_SIZES map
+ * @param {boolean} opts.spaceHeld            — whether the space key is pressed (panning)
+ * @param {boolean} opts.isLocalDev           — only enable in local dev
+ *
+ * @returns {{ marqueeScreenRect: {x,y,w,h}|null, handleMarqueeMouseDown: Function }}
+ */
+export default function useMarqueeSelect({
+  scrollRef,
+  zoomRef,
+  setSelectedWidgetIds,
+  widgets,
+  componentEntries,
+  fallbackSizes,
+  spaceHeld,
+  isLocalDev,
+}) {
+  const [marqueeScreenRect, setMarqueeScreenRect] = useState(null)
+  const marqueeState = useRef(null) // { startCanvasX, startCanvasY, startClientX, startClientY }
+
+  /** Convert a client (screen) point to canvas-space coords. */
+  const clientToCanvas = useCallback((clientX, clientY) => {
+    const el = scrollRef.current
+    if (!el) return { x: 0, y: 0 }
+    const rect = el.getBoundingClientRect()
+    const scale = (zoomRef.current ?? 100) / 100
+    return {
+      x: (el.scrollLeft + (clientX - rect.left)) / scale,
+      y: (el.scrollTop + (clientY - rect.top)) / scale,
+    }
+  }, [scrollRef, zoomRef])
+
+  // Ref to track active drag listeners for cleanup on unmount
+  const cleanupRef = useRef(null)
+
+  const handleMarqueeMouseDown = useCallback((e) => {
+    if (!isLocalDev) return
+    if (spaceHeld) return
+    // Only start on direct background click (not on a widget)
+    if (e.button !== 0) return
+    if (e.target.closest('[data-tc-x]')) return
+
+    const canvasStart = clientToCanvas(e.clientX, e.clientY)
+    marqueeState.current = {
+      startCanvasX: canvasStart.x,
+      startCanvasY: canvasStart.y,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
+    }
+
+    // Minimum drag distance before showing the marquee (avoids flicker on clicks)
+    const MIN_DRAG = 4
+
+    function handleMove(ev) {
+      const ms = marqueeState.current
+      if (!ms) return
+
+      const dx = ev.clientX - ms.startClientX
+      const dy = ev.clientY - ms.startClientY
+      if (Math.abs(dx) < MIN_DRAG && Math.abs(dy) < MIN_DRAG) return
+
+      const el = scrollRef.current
+      if (!el) return
+      const containerRect = el.getBoundingClientRect()
+
+      // Content-space rectangle (accounts for scroll offset)
+      const sx = Math.min(ms.startClientX, ev.clientX) - containerRect.left + el.scrollLeft
+      const sy = Math.min(ms.startClientY, ev.clientY) - containerRect.top + el.scrollTop
+      const sw = Math.abs(dx)
+      const sh = Math.abs(dy)
+
+      setMarqueeScreenRect({ x: sx, y: sy, w: sw, h: sh })
+    }
+
+    function removeListeners() {
+      document.removeEventListener('mousemove', handleMove)
+      document.removeEventListener('mouseup', handleUp)
+      window.removeEventListener('blur', handleCancel)
+      cleanupRef.current = null
+    }
+
+    function handleCancel() {
+      removeListeners()
+      marqueeState.current = null
+      setMarqueeScreenRect(null)
+    }
+
+    function handleUp(ev) {
+      removeListeners()
+
+      const ms = marqueeState.current
+      marqueeState.current = null
+      setMarqueeScreenRect(null)
+
+      if (!ms) return
+
+      // If the user barely moved, treat as a deselect click
+      const dx = ev.clientX - ms.startClientX
+      const dy = ev.clientY - ms.startClientY
+      if (Math.abs(dx) < MIN_DRAG && Math.abs(dy) < MIN_DRAG) {
+        setSelectedWidgetIds(new Set())
+        return
+      }
+
+      // Compute the selection rect in canvas space
+      const canvasEnd = clientToCanvas(ev.clientX, ev.clientY)
+      const selRect = {
+        x: Math.min(ms.startCanvasX, canvasEnd.x),
+        y: Math.min(ms.startCanvasY, canvasEnd.y),
+        width: Math.abs(canvasEnd.x - ms.startCanvasX),
+        height: Math.abs(canvasEnd.y - ms.startCanvasY),
+      }
+
+      // Find intersecting widgets
+      const allBounds = getWidgetBounds(widgets, componentEntries, fallbackSizes)
+      const selected = new Set()
+      for (const wb of allBounds) {
+        if (rectsIntersect(selRect, wb)) {
+          selected.add(wb.id)
+        }
+      }
+
+      setSelectedWidgetIds(selected)
+    }
+
+    document.addEventListener('mousemove', handleMove)
+    document.addEventListener('mouseup', handleUp)
+    window.addEventListener('blur', handleCancel)
+    cleanupRef.current = removeListeners
+  }, [isLocalDev, spaceHeld, clientToCanvas, scrollRef, setSelectedWidgetIds, widgets, componentEntries, fallbackSizes])
+
+  // Clean up listeners if component unmounts mid-drag
+  useEffect(() => {
+    return () => { cleanupRef.current?.() }
+  }, [])
+
+  return { marqueeScreenRect, handleMarqueeMouseDown }
+}
+
+export { getWidgetBounds, rectsIntersect }

package/src/canvas/useMarqueeSelect.test.js

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest'
+import { rectsIntersect, getWidgetBounds } from './useMarqueeSelect.js'
+
+describe('rectsIntersect', () => {
+  it('returns true for overlapping rectangles', () => {
+    const a = { x: 0, y: 0, width: 100, height: 100 }
+    const b = { x: 50, y: 50, width: 100, height: 100 }
+    expect(rectsIntersect(a, b)).toBe(true)
+  })
+
+  it('returns false for non-overlapping rectangles', () => {
+    const a = { x: 0, y: 0, width: 100, height: 100 }
+    const b = { x: 200, y: 200, width: 100, height: 100 }
+    expect(rectsIntersect(a, b)).toBe(false)
+  })
+
+  it('returns false for edge-touching rectangles (no overlap)', () => {
+    const a = { x: 0, y: 0, width: 100, height: 100 }
+    const b = { x: 100, y: 0, width: 100, height: 100 }
+    expect(rectsIntersect(a, b)).toBe(false)
+  })
+
+  it('returns true when one rectangle contains the other', () => {
+    const a = { x: 0, y: 0, width: 200, height: 200 }
+    const b = { x: 50, y: 50, width: 50, height: 50 }
+    expect(rectsIntersect(a, b)).toBe(true)
+  })
+
+  it('returns true for partial horizontal overlap', () => {
+    const a = { x: 0, y: 0, width: 100, height: 100 }
+    const b = { x: 50, y: 0, width: 100, height: 50 }
+    expect(rectsIntersect(a, b)).toBe(true)
+  })
+})
+
+describe('getWidgetBounds', () => {
+  const fallbackSizes = {
+    'sticky-note': { width: 270, height: 170 },
+    'component': { width: 200, height: 150 },
+  }
+
+  it('returns bounds for JSON widgets', () => {
+    const widgets = [
+      { id: 'w1', type: 'sticky-note', position: { x: 10, y: 20 }, props: { width: 300, height: 200 } },
+      { id: 'w2', type: 'sticky-note', position: { x: 100, y: 200 }, props: {} },
+    ]
+    const result = getWidgetBounds(widgets, [], fallbackSizes)
+    expect(result).toEqual([
+      { id: 'w1', x: 10, y: 20, width: 300, height: 200 },
+      { id: 'w2', x: 100, y: 200, width: 270, height: 170 },
+    ])
+  })
+
+  it('returns bounds for component entries', () => {
+    const entries = [
+      { exportName: 'MyComp', sourceData: { position: { x: 5, y: 10 }, width: 400, height: 300 } },
+    ]
+    const result = getWidgetBounds([], entries, fallbackSizes)
+    expect(result).toEqual([
+      { id: 'jsx-MyComp', x: 5, y: 10, width: 400, height: 300 },
+    ])
+  })
+
+  it('handles null/missing widget data gracefully', () => {
+    const widgets = [
+      { id: 'w1', type: 'unknown' },
+    ]
+    const result = getWidgetBounds(widgets, [], fallbackSizes)
+    expect(result).toEqual([
+      { id: 'w1', x: 0, y: 0, width: 200, height: 150 },
+    ])
+  })
+
+  it('handles null widgets array', () => {
+    const result = getWidgetBounds(null, [], fallbackSizes)
+    expect(result).toEqual([])
+  })
+})

package/src/canvas/widgets/CodePenEmbed.jsx

@@ -0,0 +1,292 @@
+/**
+ * CodePen embed widget for canvas.
+ *
+ * Behaves like FigmaEmbed: click-to-interact overlay, iframe kept alive
+ * after deselect, expand modal, open-external action. Created via paste
+ * when a CodePen URL is pasted onto the canvas.
+ */
+import { forwardRef, useImperativeHandle, useMemo, useCallback, useState, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetConfig.js'
+import { isCodePenUrl, toCodePenEmbedUrl, getCodePenTitle, fetchCodePenMeta } from './codepenUrl.js'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+import styles from './CodePenEmbed.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+const codepenEmbedSchema = schemas['codepen-embed']
+
+/** Feather Icons codepen icon (stroke-based) */
+function CodePenLogo({ className }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" />
+      <line x1="12" y1="22" x2="12" y2="15.5" />
+      <polyline points="22 8.5 12 15.5 2 8.5" />
+      <polyline points="2 15.5 12 8.5 22 15.5" />
+      <line x1="12" y1="2" x2="12" y2="8.5" />
+    </svg>
+  )
+}
+
+/** Stroke-based code icon for empty state */
+function CodeIcon({ size = 32, className }) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </svg>
+  )
+}
+
+export default forwardRef(function CodePenEmbed({ props, onUpdate, resizable }, ref) {
+  const url = readProp(props, 'url', codepenEmbedSchema)
+  const width = readProp(props, 'width', codepenEmbedSchema)
+  const height = readProp(props, 'height', codepenEmbedSchema)
+
+  const [interactive, setInteractive] = useState(false)
+  const [showIframe, setShowIframe] = useState(true)
+  const [expanded, setExpanded] = useState(false)
+
+  const iframeRef = useRef(null)
+  const embedRef = useRef(null)
+  const inlineContainerRef = useRef(null)
+  const modalContainerRef = useRef(null)
+  const teardownTimerRef = useRef(null)
+  const exitSessionRef = useRef(0)
+
+  const isValid = useMemo(() => isCodePenUrl(url), [url])
+  const embedUrl = useMemo(() => (isValid ? toCodePenEmbedUrl(url) : ''), [url, isValid])
+  const fallbackTitle = useMemo(() => (url ? getCodePenTitle(url) : 'CodePen'), [url])
+
+  // Fetch pen metadata (title + author) from CodePen oEmbed API
+  const [penMeta, setPenMeta] = useState(null)
+  useEffect(() => {
+    if (!url || !isValid) return
+    let cancelled = false
+    fetchCodePenMeta(url).then((meta) => {
+      if (!cancelled && meta) setPenMeta(meta)
+    })
+    return () => { cancelled = true }
+  }, [url, isValid])
+
+  const headerTitle = penMeta?.title
+    ? `${penMeta.title} · ${penMeta.author || fallbackTitle}`
+    : fallbackTitle
+
+  useIframeDevLogs({
+    widget: 'CodePenEmbed',
+    loaded: showIframe && Boolean(embedUrl),
+    src: embedUrl,
+  })
+
+  const enterInteractive = useCallback(() => {
+    exitSessionRef.current++
+    clearTimeout(teardownTimerRef.current)
+    setShowIframe(true)
+    setInteractive(true)
+  }, [])
+
+  // Exit interactive mode on click outside — keep iframe alive for 2 min
+  useEffect(() => {
+    if (!interactive || expanded) return
+    function handlePointerDown(e) {
+      if (embedRef.current && !embedRef.current.contains(e.target)) {
+        setInteractive(false)
+        const session = ++exitSessionRef.current
+        clearTimeout(teardownTimerRef.current)
+        teardownTimerRef.current = setTimeout(() => {
+          if (exitSessionRef.current !== session) return
+          setShowIframe(false)
+        }, 2 * 60 * 1000)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive, expanded])
+
+  useEffect(() => () => clearTimeout(teardownTimerRef.current), [])
+
+  // Close expanded modal on Escape
+  useEffect(() => {
+    if (!expanded) return
+    function handleKeyDown(e) {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        setExpanded(false)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [expanded])
+
+  // Reparent iframe between inline and modal containers
+  useEffect(() => {
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    if (expanded && modalContainerRef.current) {
+      iframe._savedClassName = iframe.className
+      iframe._savedStyle = iframe.getAttribute('style') || ''
+      iframe.className = styles.expandIframe
+      iframe.removeAttribute('style')
+      const target = modalContainerRef.current
+      if (target.moveBefore) {
+        target.moveBefore(iframe, target.firstChild)
+      } else {
+        target.prepend(iframe)
+      }
+    } else if (!expanded && inlineContainerRef.current) {
+      if (iframe._savedClassName !== undefined) {
+        iframe.className = iframe._savedClassName
+        iframe.setAttribute('style', iframe._savedStyle)
+        delete iframe._savedClassName
+        delete iframe._savedStyle
+      }
+      const target = inlineContainerRef.current
+      if (target.moveBefore) {
+        target.moveBefore(iframe, null)
+      } else {
+        target.appendChild(iframe)
+      }
+    }
+  }, [expanded])
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'open-external') {
+        if (url) window.open(url, '_blank', 'noopener')
+      } else if (actionId === 'expand') {
+        setShowIframe(true)
+        setExpanded(true)
+      }
+    },
+  }), [url])
+
+  return (
+    <>
+    <WidgetWrapper>
+      <div ref={embedRef} className={styles.embed} style={{ width, height }}>
+        <div className={styles.header}>
+          <CodePenLogo className={styles.codepenLogo} />
+          <span className={styles.headerTitle}>{headerTitle}</span>
+        </div>
+        {embedUrl ? (
+          <>
+            {showIframe ? (
+              <div
+                ref={inlineContainerRef}
+                className={styles.iframeContainer}
+                style={expanded ? { visibility: 'hidden' } : undefined}
+              >
+                <iframe
+                  ref={iframeRef}
+                  src={embedUrl}
+                  className={styles.iframe}
+                  title={`CodePen: ${headerTitle}`}
+                  allowFullScreen
+                  loading="lazy"
+                />
+              </div>
+            ) : (
+              <div className={styles.iframeContainer} />
+            )}
+            {!interactive && !expanded && (
+              <div
+                className={overlayStyles.interactOverlay}
+                onClick={(e) => {
+                  if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+                  enterInteractive()
+                }}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    enterInteractive()
+                  }
+                }}
+                aria-label="Click to interact with CodePen embed"
+              >
+                <span className={overlayStyles.interactHint}>Click to interact</span>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className={styles.emptyState}>
+            <CodeIcon size={32} className={styles.emptyIcon} />
+            <span className={styles.emptyLabel}>No CodePen URL</span>
+          </div>
+        )}
+      </div>
+      {resizable && (
+        <div
+          className={styles.resizeHandle}
+          onMouseDown={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            const startX = e.clientX
+            const startY = e.clientY
+            const startW = width
+            const startH = height
+            function onMove(ev) {
+              const newW = Math.max(200, startW + ev.clientX - startX)
+              const newH = Math.max(150, startH + ev.clientY - startY)
+              onUpdate?.({ width: newW, height: newH })
+            }
+            function onUp() {
+              document.removeEventListener('mousemove', onMove)
+              document.removeEventListener('mouseup', onUp)
+            }
+            document.addEventListener('mousemove', onMove)
+            document.addEventListener('mouseup', onUp)
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+        />
+      )}
+    </WidgetWrapper>
+    {createPortal(
+      <div
+        className={styles.expandBackdrop}
+        style={expanded && embedUrl ? undefined : { display: 'none' }}
+        onClick={() => setExpanded(false)}
+        onPointerDown={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          e.stopPropagation()
+          if (e.key === 'Escape') setExpanded(false)
+        }}
+        onWheel={(e) => e.stopPropagation()}
+        tabIndex={-1}
+        ref={(el) => { if (el && expanded) el.focus() }}
+      >
+        <div
+          ref={modalContainerRef}
+          className={styles.expandContainer}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            className={styles.expandClose}
+            onClick={() => setExpanded(false)}
+            aria-label="Close expanded view"
+            autoFocus
+          >✕</button>
+        </div>
+      </div>,
+      document.body
+    )}
+    </>
+  )
+})