@pictor-sdk/ui 0.1.0

package/src/gestures/LayerGestureSurface.tsx

@@ -0,0 +1,462 @@
+import {
+  deleteTargetFromProfile,
+  hitTestDocument,
+  isDirectManipulationLayer,
+  isSameTransform,
+  layerNaturalSize,
+  layerGestureConfigFromProfile,
+  NO_SNAP,
+  useEditor,
+  useEditorStore,
+  type DeleteTarget,
+  type LayerSnapState,
+  type Transform,
+} from '@pictor-sdk/core'
+import { preferMeasuredSize, useCanvasMetrics, useRenderer } from '@pictor-sdk/skia'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { StyleSheet } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, { useDerivedValue, useSharedValue } from 'react-native-reanimated'
+import { runOnJS } from 'react-native-worklets'
+import {
+  composeLayerGestureUI,
+  isOverDeleteTargetUI,
+  hitTestLayerCandidatesUI,
+  layerPreviewDeltaUI,
+} from './layerGestureWorklet'
+import { useInteractionState } from './interactionState'
+import { type GestureSnapEvent } from './controller'
+
+/** Overrides for overlay-layer gestures, defaulting to the profile's settings. */
+export interface LayerGestureSurfaceProps {
+  /** Fired once per snap engagement — hook up haptics here if you want them. */
+  onSnap?: (event: GestureSnapEvent) => void
+}
+
+/**
+ * Direct manipulation of overlay layers: grab the top-most layer under the
+ * finger and pan, focal-pinch and rotate it on the UI thread.
+ *
+ * Three things make this feel right, and each is covered by tests:
+ *
+ * - **Focal composition.** Scale and rotation happen about the gesture
+ *   centroid, so the document point under the fingers stays under them.
+ * - **Pointer-count re-basing.** Gesture Handler restarts its cumulative
+ *   translation/scale/rotation when a finger lands or lifts. Every recognizer
+ *   value is read relative to an origin captured at the last re-base, and the
+ *   frame re-bases from the live transform whenever the pointer count changes
+ *   — so two fingers going to one does not jump.
+ * - **One history entry.** The document is written exactly once, when the
+ *   gesture settles, and not at all if nothing actually moved.
+ */
+export function LayerGestureSurface({ onSnap }: LayerGestureSurfaceProps) {
+  const { document, dispatch, profile } = useEditor()
+  const store = useEditorStore()
+  const metrics = useCanvasMetrics()
+  // Destructure the setters: the context value's identity changes on every
+  // interaction state change (including ones this component causes), so
+  // depending on the object would tear down effects mid-gesture. The setters
+  // themselves are stable.
+  const { setPreview, setLayerDragActive, setOverDeleteTarget, setSnap } = useInteractionState()
+
+  const renderer = useRenderer()
+
+  const config = useMemo(
+    () => layerGestureConfigFromProfile(profile.interaction?.layers),
+    [profile],
+  )
+  const deleteTarget = useMemo(
+    () => deleteTargetFromProfile(profile.interaction?.layers),
+    [profile],
+  )
+  const aspect = document.size.height / document.size.width
+  // Rebuild hit geometry when the renderer publishes a new text measurement,
+  // so a layer's touch box tracks the box it actually draws.
+  const [measureVersion, setMeasureVersion] = useState(0)
+  useEffect(
+    () => renderer.textMeasures.subscribe(() => setMeasureVersion((v) => v + 1)),
+    [renderer],
+  )
+
+  const hitCandidates = useMemo(
+    () =>
+      document.layers
+        .map((layer, index) => ({ layer, index }))
+        .filter(
+          ({ layer, index }) =>
+            !layer.hidden &&
+            !layer.locked &&
+            isDirectManipulationLayer(layer, index, profile.interaction?.layers),
+        )
+        .reverse()
+        .map(({ layer }) => {
+          // The renderer's measurement when it has one, core's estimate
+          // otherwise — core cannot lay out text, so its estimate is a
+          // character-count approximation that does not match the drawn box.
+          const natural = preferMeasuredSize(
+            renderer.textMeasures.get(layer.id),
+            layerNaturalSize(layer, store.registry, document),
+          )
+          const anchor = layer.transform.anchor ?? { x: 0.5, y: 0.5 }
+          return {
+            id: layer.id,
+            x: layer.transform.x,
+            y: layer.transform.y,
+            scale: layer.transform.scale,
+            rotation: layer.transform.rotation,
+            width: natural.width,
+            height: natural.height,
+            anchorX: anchor.x,
+            anchorY: anchor.y,
+            flipX: layer.transform.flipX ?? false,
+            flipY: layer.transform.flipY ?? false,
+          }
+        }),
+    // `measureVersion` is deliberate: the measurements live outside React, so
+    // this is how a new one re-derives the hit geometry.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [document, profile, store.registry, renderer, measureVersion],
+  )
+
+  // ── live transform (UI thread) ──
+  const liveX = useSharedValue(0.5)
+  const liveY = useSharedValue(0.5)
+  const liveScale = useSharedValue(1)
+  const liveRotation = useSharedValue(0)
+  // Immutable for the lifetime of a gesture. The renderer preview is always a
+  // delta from the still-committed document transform, never from a frame base.
+  const committedX = useSharedValue(0.5)
+  const committedY = useSharedValue(0.5)
+  const committedScale = useSharedValue(1)
+  const committedRotation = useSharedValue(0)
+  // ── frame base, re-captured on every pointer-count change ──
+  const baseX = useSharedValue(0.5)
+  const baseY = useSharedValue(0.5)
+  const baseScale = useSharedValue(1)
+  const baseRotation = useSharedValue(0)
+  // ── recognizer origins, subtracted so each frame starts from zero ──
+  const originPanX = useSharedValue(0)
+  const originPanY = useSharedValue(0)
+  const originPinch = useSharedValue(1)
+  const originRotate = useSharedValue(0)
+  const rawPanX = useSharedValue(0)
+  const rawPanY = useSharedValue(0)
+  const rawPinch = useSharedValue(1)
+  const rawRotate = useSharedValue(0)
+  const focalX = useSharedValue(0.5)
+  const focalY = useSharedValue(0.5)
+  const pointers = useSharedValue(0)
+  const active = useSharedValue(false)
+  const snapCX = useSharedValue(false)
+  const snapCY = useSharedValue(false)
+  const snapR = useSharedValue(false)
+  const overDelete = useSharedValue(false)
+
+  // ── preview transform: a delta from the committed transform, UI-thread only ──
+  const previewTransform = useDerivedValue(() => {
+    return layerPreviewDeltaUI(
+      {
+        x: committedX.value,
+        y: committedY.value,
+        scale: committedScale.value,
+        rotation: committedRotation.value,
+      },
+      { x: liveX.value, y: liveY.value, scale: liveScale.value, rotation: liveRotation.value },
+      document.size.width,
+      document.size.height,
+    )
+  }, [document.size.width, document.size.height])
+
+  /**
+   * Fresh render state for the JS callbacks below.
+   *
+   * The callbacks themselves must be identity-stable, because a worklet has to
+   * capture them *directly*: Reanimated serialises captured objects, so a
+   * function reached through `someRef.current` arrives on the UI thread as a
+   * plain value and calling it throws "Object is not a function". Stable
+   * callbacks + a mutable snapshot gives both fresh data and a gesture object
+   * that never needs rebuilding.
+   */
+  const latest = useRef({ document, metrics, store, dispatch, onSnap, profile })
+  latest.current = { document, metrics, store, dispatch, onSnap, profile }
+
+  const grabbedId = useRef<string | null>(null)
+  const grabbedFrom = useRef<Transform | null>(null)
+  const snapState = useRef<LayerSnapState>(NO_SNAP)
+
+  const onGrabLayer = useCallback((id: string) => {
+    const { document: doc, store: s } = latest.current
+    const hit = doc.layers.find((layer) => layer.id === id)
+    if (!hit) return
+    const t = hit.transform
+    grabbedId.current = hit.id
+    grabbedFrom.current = { ...t }
+    s.select([hit.id])
+    setPreview({ layerId: hit.id, transform: previewTransform })
+    setLayerDragActive(true)
+  }, [setPreview, setLayerDragActive, previewTransform])
+
+  const onSelectAt = useCallback((xDp: number, yDp: number) => {
+    const { document: doc, metrics: m, store: s } = latest.current
+    if (!m) return
+    const layerInteraction = latest.current.profile.interaction?.layers
+    const hit = hitTestDocument(
+      doc,
+      { x: xDp / m.width, y: yDp / m.height },
+      s.registry,
+      (layer, index) => isDirectManipulationLayer(layer, index, layerInteraction),
+    )
+    s.select(hit && !hit.locked ? [hit.id] : [])
+  }, [])
+
+  const onSnapChanged = useCallback(
+    (centerX: boolean, centerY: boolean, rotation: boolean) => {
+      const previous = snapState.current
+      const next = { centerX, centerY, rotation }
+      snapState.current = next
+      const notify = latest.current.onSnap
+      if (centerX && !previous.centerX) notify?.({ kind: 'centerX' })
+      if (centerY && !previous.centerY) notify?.({ kind: 'centerY' })
+      if (rotation && !previous.rotation) notify?.({ kind: 'rotation' })
+      setSnap(next)
+    },
+    [setSnap],
+  )
+
+  const onHoverChanged = useCallback(
+    (over: boolean) => setOverDeleteTarget(over),
+    [setOverDeleteTarget],
+  )
+
+  const onGestureFinished = useCallback(
+    (t: Transform, deleted: boolean) => {
+      const { dispatch: d, store: s } = latest.current
+      const id = grabbedId.current
+      const from = grabbedFrom.current
+      grabbedId.current = null
+      grabbedFrom.current = null
+      snapState.current = NO_SNAP
+      setLayerDragActive(false)
+      setOverDeleteTarget(false)
+      setSnap(NO_SNAP)
+      setPreview(null)
+      if (!id) return
+      if (deleted) {
+        d({ type: 'layer/remove', id })
+        s.select([])
+        return
+      }
+      // a tap, or a drag that ended where it started, must not create an undo entry
+      if (from && isSameTransform(from, t)) return
+      d({ type: 'layer/transform', id, patch: t })
+    },
+    [setLayerDragActive, setOverDeleteTarget, setSnap, setPreview],
+  )
+
+  useEffect(() => () => setPreview(null), [setPreview])
+
+  const gesture = useMemo(() => {
+    const metricsWidth = metrics?.width ?? 0
+    const metricsHeight = metrics?.height ?? 0
+    const target: DeleteTarget | null = deleteTarget
+    const candidates = hitCandidates
+
+    /** Re-capture the frame base and zero every recognizer origin. */
+    const rebase = () => {
+      'worklet'
+      baseX.value = liveX.value
+      baseY.value = liveY.value
+      baseScale.value = liveScale.value
+      baseRotation.value = liveRotation.value
+      originPanX.value = rawPanX.value
+      originPanY.value = rawPanY.value
+      originPinch.value = rawPinch.value
+      originRotate.value = rawRotate.value
+    }
+
+    const recompute = (settle: boolean) => {
+      'worklet'
+      if (!active.value || metricsWidth === 0 || metricsHeight === 0) return
+      const out = composeLayerGestureUI(
+        {
+          x: baseX.value,
+          y: baseY.value,
+          scale: baseScale.value,
+          rotation: baseRotation.value,
+        },
+        {
+          panX: (rawPanX.value - originPanX.value) / metricsWidth,
+          panY: (rawPanY.value - originPanY.value) / metricsHeight,
+          pinch: rawPinch.value / Math.max(originPinch.value, 1e-9),
+          rotate: rawRotate.value - originRotate.value,
+          focalX: focalX.value,
+          focalY: focalY.value,
+        },
+        aspect,
+        config,
+        { centerX: snapCX.value, centerY: snapCY.value, rotation: snapR.value },
+        settle,
+      )
+      liveX.value = out.x
+      liveY.value = out.y
+      liveScale.value = out.scale
+      liveRotation.value = out.rotation
+
+      if (
+        out.snapCenterX !== snapCX.value ||
+        out.snapCenterY !== snapCY.value ||
+        out.snapRotation !== snapR.value
+      ) {
+        snapCX.value = out.snapCenterX
+        snapCY.value = out.snapCenterY
+        snapR.value = out.snapRotation
+        runOnJS(onSnapChanged)(out.snapCenterX, out.snapCenterY, out.snapRotation)
+      }
+
+      if (target) {
+        const over = isOverDeleteTargetUI(out.x, out.y, target, aspect)
+        if (over !== overDelete.value) {
+          overDelete.value = over
+          runOnJS(onHoverChanged)(over)
+        }
+      }
+    }
+
+    /** Track pointer count and re-base the frame whenever it changes. */
+    const syncPointers = (count: number) => {
+      'worklet'
+      if (active.value && count !== pointers.value) {
+        pointers.value = count
+        rebase()
+      }
+    }
+
+    const endIfIdle = () => {
+      'worklet'
+      if (!active.value) {
+        // an inert gesture (nothing was grabbed) still has to clear UI state
+        runOnJS(onGestureFinished)({ x: 0, y: 0, scale: 1, rotation: 0 }, false)
+        return
+      }
+      recompute(true)
+      active.value = false
+      pointers.value = 0
+      const deleted = overDelete.value
+      overDelete.value = false
+      snapCX.value = false
+      snapCY.value = false
+      snapR.value = false
+      runOnJS(onGestureFinished)(
+        {
+          x: liveX.value,
+          y: liveY.value,
+          scale: liveScale.value,
+          rotation: liveRotation.value,
+        },
+        deleted,
+      )
+    }
+
+    const pan = Gesture.Pan()
+      .minPointers(1)
+      .maxPointers(2)
+      .onBegin((e) => {
+        'worklet'
+        if (active.value) return
+        rawPanX.value = 0
+        rawPanY.value = 0
+        rawPinch.value = 1
+        rawRotate.value = 0
+        originPanX.value = 0
+        originPanY.value = 0
+        originPinch.value = 1
+        originRotate.value = 0
+        pointers.value = e.numberOfPointers
+        const hit = hitTestLayerCandidatesUI(
+          e.x / Math.max(metricsWidth, 1e-9),
+          e.y / Math.max(metricsHeight, 1e-9),
+          candidates,
+          document.size.width,
+          document.size.height,
+        )
+        if (!hit) {
+          active.value = false
+          return
+        }
+        liveX.value = hit.x
+        liveY.value = hit.y
+        liveScale.value = hit.scale
+        liveRotation.value = hit.rotation
+        committedX.value = hit.x
+        committedY.value = hit.y
+        committedScale.value = hit.scale
+        committedRotation.value = hit.rotation
+        baseX.value = hit.x
+        baseY.value = hit.y
+        baseScale.value = hit.scale
+        baseRotation.value = hit.rotation
+        focalX.value = hit.x
+        focalY.value = hit.y
+        active.value = true
+        runOnJS(onGrabLayer)(hit.id)
+      })
+      .onUpdate((e) => {
+        'worklet'
+        rawPanX.value = e.translationX
+        rawPanY.value = e.translationY
+        syncPointers(e.numberOfPointers)
+        recompute(false)
+      })
+      .onFinalize(() => {
+        'worklet'
+        endIfIdle()
+      })
+
+    const pinch = Gesture.Pinch().onUpdate((e) => {
+      'worklet'
+      rawPinch.value = e.scale
+      focalX.value = e.focalX / metricsWidth
+      focalY.value = e.focalY / metricsHeight
+      syncPointers(e.numberOfPointers)
+      recompute(false)
+    })
+
+    const rotate = Gesture.Rotation()
+      .enabled(config.rotationEnabled)
+      .onUpdate((e) => {
+        'worklet'
+        rawRotate.value = e.rotation
+        focalX.value = e.anchorX / metricsWidth
+        focalY.value = e.anchorY / metricsHeight
+        syncPointers(e.numberOfPointers)
+        recompute(false)
+      })
+
+    const tap = Gesture.Tap().onEnd((e) => {
+      'worklet'
+      runOnJS(onSelectAt)(e.x, e.y)
+    })
+
+    return Gesture.Simultaneous(Gesture.Race(pan, tap), pinch, rotate)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    metrics,
+    config,
+    deleteTarget,
+    aspect,
+    onGrabLayer,
+    onSelectAt,
+    onSnapChanged,
+    onHoverChanged,
+    onGestureFinished,
+    hitCandidates,
+    document.size.width,
+    document.size.height,
+  ])
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={StyleSheet.absoluteFill} />
+    </GestureDetector>
+  )
+}