@pictor-sdk/ui 0.1.0

package/src/gestures/DrawingSurface.tsx

@@ -0,0 +1,77 @@
+import { useEditor, useEditorStore } from '@pictor-sdk/core'
+import { samplePixelColor, useCanvasMetrics, useRenderer } from '@pictor-sdk/skia'
+import React, { useMemo, useRef } from 'react'
+import { StyleSheet } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated from 'react-native-reanimated'
+import { runOnJS } from 'react-native-worklets'
+import { useUiState } from '../uiState'
+import { createDrawController, type BrushConfig } from './drawController'
+
+/** The brush a drawing session starts with. */
+export const DEFAULT_BRUSH: BrushConfig = { brush: 'pen', color: '#ffffff', width: 0.012 }
+
+/**
+ * Freehand drawing capture, active while the draw tool is open. In
+ * eyedropper mode a tap samples the rendered pixel color into the brush.
+ */
+export function DrawingSurface() {
+  const store = useEditorStore()
+  const { document } = useEditor()
+  const renderer = useRenderer()
+  const metrics = useCanvasMetrics()
+  const metricsRef = useRef(metrics)
+  metricsRef.current = metrics
+  const [brush, setBrush] = useUiState<BrushConfig>('draw.brush', DEFAULT_BRUSH)
+  const [eyedropper, setEyedropper] = useUiState('draw.eyedropper', false)
+  const brushRef = useRef(brush)
+  brushRef.current = brush
+  const stateRef = useRef({ eyedropper, document, setBrush, setEyedropper })
+  stateRef.current = { eyedropper, document, setBrush, setEyedropper }
+
+  const controller = useMemo(
+    () => createDrawController(store, () => metricsRef.current, () => brushRef.current),
+    [store],
+  )
+
+  const gesture = useMemo(() => {
+    const sample = async (x: number, y: number) => {
+      const m = metricsRef.current
+      const s = stateRef.current
+      if (!m || !s.eyedropper) return
+      const color = await samplePixelColor(renderer, s.document, {
+        x: x / m.width,
+        y: y / m.height,
+      })
+      if (color) s.setBrush({ ...brushRef.current, color })
+      s.setEyedropper(false)
+    }
+    const beginOrSample = (x: number, y: number) => {
+      if (stateRef.current.eyedropper) {
+        void sample(x, y)
+      } else {
+        controller.begin(x, y)
+      }
+    }
+    return Gesture.Pan()
+      .minDistance(0)
+      .onStart((e) => {
+        'worklet'
+        runOnJS(beginOrSample)(e.x, e.y)
+      })
+      .onUpdate((e) => {
+        'worklet'
+        runOnJS(controller.move)(e.x, e.y)
+      })
+      .onFinalize(() => {
+        'worklet'
+        runOnJS(controller.end)()
+      })
+  }, [controller, renderer])
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={StyleSheet.absoluteFill} />
+    </GestureDetector>
+  )
+}

package/src/gestures/EditorGestures.tsx

@@ -0,0 +1,97 @@
+import { useEditorStore } from '@pictor-sdk/core'
+import { useCanvasMetrics } from '@pictor-sdk/skia'
+import React, { useMemo, useRef } from 'react'
+import { StyleSheet } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated from 'react-native-reanimated'
+import { runOnJS } from 'react-native-worklets'
+import {
+  createGestureController,
+  type GestureSnapEvent,
+} from './controller'
+
+/** Overrides forwarded to whichever gesture surface the active tool mounts. */
+export interface EditorGesturesProps {
+  /** Optional haptic hook — fired once per snap engagement. */
+  onSnap?: (event: GestureSnapEvent) => void
+}
+
+/**
+ * Invisible gesture surface for <EditorCanvas children={…}/>: tap to select,
+ * pan/pinch/rotate the selected layer. Recognizers run simultaneously on the
+ * UI thread; commits are batched into a single undo step (see controller).
+ */
+export function EditorGestures({ onSnap }: EditorGesturesProps) {
+  const store = useEditorStore()
+  const metrics = useCanvasMetrics()
+  const metricsRef = useRef(metrics)
+  metricsRef.current = metrics
+  const onSnapRef = useRef(onSnap)
+  onSnapRef.current = onSnap
+
+  const controller = useMemo(
+    () =>
+      createGestureController(store, () => metricsRef.current, {
+        onSnap: (e) => onSnapRef.current?.(e),
+      }),
+    // metricsRef/onSnap are read through refs — store identity is the only dep
+    [store],
+  )
+
+  const gesture = useMemo(() => {
+    const tap = Gesture.Tap().onEnd((e) => {
+      'worklet'
+      runOnJS(controller.tap)(e.x, e.y)
+    })
+    const pan = Gesture.Pan()
+      .minPointers(1)
+      .onStart(() => {
+        'worklet'
+        runOnJS(controller.begin)()
+      })
+      .onUpdate((e) => {
+        'worklet'
+        runOnJS(controller.setPan)(e.translationX, e.translationY)
+      })
+      .onFinalize(() => {
+        'worklet'
+        runOnJS(controller.end)()
+      })
+    const pinch = Gesture.Pinch()
+      .onStart(() => {
+        'worklet'
+        runOnJS(controller.begin)()
+      })
+      .onUpdate((e) => {
+        'worklet'
+        runOnJS(controller.setPinch)(e.scale)
+      })
+      .onFinalize(() => {
+        'worklet'
+        runOnJS(controller.end)()
+      })
+    const rotate = Gesture.Rotation()
+      .onStart(() => {
+        'worklet'
+        runOnJS(controller.begin)()
+      })
+      .onUpdate((e) => {
+        'worklet'
+        runOnJS(controller.setRotate)(e.rotation)
+      })
+      .onFinalize(() => {
+        'worklet'
+        runOnJS(controller.end)()
+      })
+    return Gesture.Race(
+      Gesture.Simultaneous(pan, pinch, rotate),
+      tap,
+    )
+  }, [controller])
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={StyleSheet.absoluteFill} />
+    </GestureDetector>
+  )
+}

package/src/gestures/InteractionGuides.tsx

@@ -0,0 +1,161 @@
+import { deleteTargetFromProfile, useEditor } from '@pictor-sdk/core'
+import { useCanvasMetrics } from '@pictor-sdk/skia'
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { useTheme } from '../theme'
+import { useInteractionState } from './interactionState'
+
+/** The centre and rotation guides shown while a layer snaps. */
+export interface InteractionGuidesProps {
+  /** Label shown above the delete target. */
+  deleteLabel?: string
+}
+
+/**
+ * Alignment guides and the drag-to-delete target.
+ *
+ * DECISION: these are plain React Native views layered over `<EditorCanvas>`,
+ * not Skia nodes inside `renderDocument`. Transient interaction chrome then
+ * has no way of reaching an export — stronger than an `isExport` check — and
+ * the single render path (invariant 1) stays untouched.
+ *
+ * Render as a child of `<EditorCanvas>`, which sizes its children to the
+ * fitted document box, so percentage offsets here are document-relative.
+ */
+export function InteractionGuides({ deleteLabel = 'Drag to delete' }: InteractionGuidesProps) {
+  const { profile } = useEditor()
+  const metrics = useCanvasMetrics()
+  const theme = useTheme()
+  const { snap, layerDragActive, overDeleteTarget } = useInteractionState()
+  const target = deleteTargetFromProfile(profile.interaction?.layers)
+
+  if (!metrics) return null
+
+  // radius is in document-WIDTH units, so it maps through the canvas width
+  const radius = target ? target.radius * metrics.width : 0
+  const size = radius * 2
+  const active = overDeleteTarget
+
+  return (
+    <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+      {snap.centerX ? (
+        <View
+          style={{
+            position: 'absolute',
+            left: metrics.width / 2 - 1,
+            top: 0,
+            width: 2,
+            height: metrics.height,
+            backgroundColor: theme.colors.accent,
+          }}
+        />
+      ) : null}
+      {snap.centerY ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: metrics.height / 2 - 1,
+            left: 0,
+            height: 2,
+            width: metrics.width,
+            backgroundColor: theme.colors.accent,
+          }}
+        />
+      ) : null}
+
+      {snap.rotation ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: theme.spacing.md,
+            alignSelf: 'center',
+            backgroundColor: 'rgba(0,0,0,0.6)',
+            borderRadius: theme.radii.lg,
+            paddingHorizontal: theme.spacing.md,
+            paddingVertical: theme.spacing.xs,
+          }}
+        >
+          <Text
+            style={{
+              color: theme.colors.text,
+              fontSize: theme.font.sizeSm,
+              fontWeight: theme.font.weight,
+            }}
+          >
+            Right-angle snap
+          </Text>
+        </View>
+      ) : null}
+
+      {target && layerDragActive ? (
+        <View
+          style={{
+            position: 'absolute',
+            left: target.x * metrics.width - radius,
+            top: target.y * metrics.height - radius,
+            width: size,
+            height: size,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <View
+            style={{
+              width: size,
+              height: size,
+              borderRadius: radius,
+              borderWidth: 2,
+              borderColor: theme.colors.text,
+              // a scrim keeps the target legible over light photos, which a
+              // plain white ring is not
+              backgroundColor: active ? theme.colors.danger : 'rgba(0,0,0,0.45)',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transform: [{ scale: active ? 1.15 : 1 }],
+            }}
+          >
+            <Text
+              style={{
+                color: theme.colors.text,
+                fontSize: radius * 0.7,
+                fontWeight: theme.font.weight,
+              }}
+            >
+              ×
+            </Text>
+          </View>
+        </View>
+      ) : null}
+
+      {/* the label sits in the full-canvas box, not the target-sized one, so a
+          longer or translated string is never clipped by the target diameter */}
+      {target && layerDragActive ? (
+        <View
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: target.y * metrics.height - radius - theme.spacing.lg * 2,
+            alignItems: 'center',
+          }}
+        >
+          <Text
+            style={{
+              color: theme.colors.text,
+              fontSize: theme.font.sizeSm,
+              fontWeight: theme.font.weight,
+              backgroundColor: 'rgba(0,0,0,0.45)',
+              paddingHorizontal: theme.spacing.sm,
+              paddingVertical: theme.spacing.xs,
+              borderRadius: theme.radii.sm,
+              overflow: 'hidden',
+            }}
+            numberOfLines={1}
+          >
+            {deleteLabel}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  )
+}