@pictor-sdk/ui 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pictor-sdk/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Default slot-based editor UI for Pictor, built entirely on the public headless API.",
   "license": "MIT",
   "sideEffects": false,
@@ -33,8 +33,8 @@
     "react-native-gesture-handler": ">=2.20.0",
     "react-native-reanimated": ">=3.16.0",
     "react-native-worklets": ">=0.5.1",
-    "@pictor-sdk/core": "^0.2.0",
-    "@pictor-sdk/skia": "^0.2.0"
+    "@pictor-sdk/skia": "^0.2.1",
+    "@pictor-sdk/core": "^0.2.0"
   },
   "devDependencies": {
     "@shopify/react-native-skia": "^2.0.0",
@@ -45,7 +45,7 @@
     "react-native-reanimated": "^4.1.0",
     "react-native-worklets": "0.5.1",
     "@pictor-sdk/core": "0.2.0",
-    "@pictor-sdk/skia": "0.2.0"
+    "@pictor-sdk/skia": "0.2.1"
   },
   "publishConfig": {
     "access": "public",

package/src/composer/TextComposer.tsx

@@ -21,9 +21,10 @@ import {
 } from 'react-native'
 import { Slider } from '../components/Slider'
 import { useTheme } from '../theme'
+import { useRenderer } from '@pictor-sdk/skia'
 import {
+  composerInputBox,
   composerInsets,
-  fitCanvasRect,
   HIDDEN_KEYBOARD,
   type ComposerInsets,
 } from './keyboardLayout'
@@ -82,6 +83,7 @@ export function TextComposer({ session, insets, onDone, onCancel }: TextComposer
   // Measured rather than taken from `useCanvasMetrics`: that context belongs to
   // EditorCanvas's children, and the composer is its sibling.
   const [container, setContainer] = useState({ width: 0, height: 0 })
+  const renderer = useRenderer()
   const input = useRef<TextInput>(null)
   const [selectionRange, setSelectionRange] = useState<{ start: number; end: number } | undefined>(
     undefined,
@@ -90,30 +92,58 @@ export function TextComposer({ session, insets, onDone, onCancel }: TextComposer
   const data = session.data
   const span = session.span
 
+  /*
+    The drawn text box, republished by the renderer after every scene.
+
+    It lives outside React, so a subscription is how a new measurement reaches
+    the layout — reading it during render would pin the box to whatever was
+    measured when the composer mounted, which for a layer created a frame ago is
+    nothing at all.
+  */
+  const layerId = session.layer?.id
+  const [measured, setMeasured] = useState<{ width: number; height: number } | null>(null)
+  useEffect(() => {
+    if (!layerId) {
+      setMeasured(null)
+      return
+    }
+    const refresh = () => setMeasured(renderer.textMeasures.get(layerId) ?? null)
+    const unsubscribe = renderer.textMeasures.subscribe(refresh)
+    refresh()
+    return unsubscribe
+  }, [renderer, layerId])
+
   /**
    * Lay the input out over the text it is editing.
    *
    * The visible glyphs are the Skia layer; this input is transparent and only
    * carries the caret, the selection handles and the IME. For the caret to land
-   * where the user sees their text, the input's own layout has to match the
-   * layer's: same font size in dp, same alignment, and a box centred on the
-   * layer's normalized y. It will never be glyph-exact — Skia and the platform
-   * measure differently — but it tracks closely enough to edit by.
+   * where the user sees their text, the input's box has to be the *text's* box:
+   * same font size in dp, same alignment, and the same height, sitting on the
+   * layer's normalized centre. It will never be glyph-exact — Skia and the
+   * platform measure differently — but it tracks closely enough to edit by.
    */
-  const layout = useMemo(() => {
-    const canvas = fitCanvasRect(container, document.size)
-    const fontSize = (span?.fontSize ?? 0.08) * canvas.width
-    const centreY = canvas.top + (session.layer?.transform.y ?? 0.42) * canvas.height
-    const height = canvas.height
-    return {
-      fontSize: Math.max(1, fontSize),
-      lineHeight: Math.max(1, fontSize * (span?.lineHeight ?? 1.2)),
-      left: canvas.left,
-      width: Math.max(1, canvas.width),
-      top: Math.max(0, centreY - height / 2),
-      height: Math.max(1, height),
-    }
-  }, [container, document.size, span?.fontSize, span?.lineHeight, session.layer?.transform.y])
+  const layout = useMemo(
+    () =>
+      composerInputBox({
+        container,
+        document: document.size,
+        fontSize: span?.fontSize ?? 0.08,
+        lineHeight: span?.lineHeight ?? 1.2,
+        centerY: session.layer?.transform.y ?? 0.42,
+        measured,
+        lines: session.value.split('\n').length,
+      }),
+    [
+      container,
+      document.size,
+      span?.fontSize,
+      span?.lineHeight,
+      session.layer?.transform.y,
+      session.value,
+      measured,
+    ],
+  )
   const fonts = useMemo(() => fontChoices(store.registry.fonts), [store.registry.fonts])
 
   // Focus once the overlay is up. A frame's delay lets the mount settle so the
@@ -291,13 +321,13 @@ export function TextComposer({ session, insets, onDone, onCancel }: TextComposer
         cursorColor={theme.colors.accent}
       />
 
-      {/* Top bar: Cancel / Done, above the keyboard-independent area. */}
+      {/* Top bar: Cancel / Done, below the status bar and any notch. */}
       <View
         style={{
           position: 'absolute',
           left: 0,
           right: 0,
-          top: 0,
+          top: insets.top,
           height: 56,
           flexDirection: 'row',
           alignItems: 'center',
@@ -479,9 +509,18 @@ export function TextComposer({ session, insets, onDone, onCancel }: TextComposer
  */
 export function TextComposerHost({
   Composer = TextComposer,
+  safeArea,
 }: {
   /** Replace the default composer without replacing the canvas or editor. */
   Composer?: React.ComponentType<TextComposerProps>
+  /**
+   * The app's safe-area insets, in dp.
+   *
+   * Supplied by the host because reading them needs a dependency this package
+   * does not take. Omit it and the composer draws exactly where it always did:
+   * its bar at the very top, which on a device with a notch means under one.
+   */
+  safeArea?: { top?: number; bottom?: number }
 }) {
   const { setActiveTool } = useEditor()
   const session = useTextSession()
@@ -514,7 +553,10 @@ export function TextComposerHost({
     }
   }, [])
 
-  const insets = useMemo(() => composerInsets(frame), [frame])
+  const insets = useMemo(
+    () => composerInsets(frame, safeArea?.bottom ?? 0, safeArea?.top ?? 0),
+    [frame, safeArea?.bottom, safeArea?.top],
+  )
 
   const finish = useCallback(
     (commit: boolean) => {

package/src/composer/keyboardLayout.ts

@@ -21,6 +21,15 @@ export interface KeyboardFrame {
 }
 
 export interface ComposerInsets {
+  /**
+   * Distance from the top of the screen to place the Cancel/Done bar.
+   *
+   * The composer cannot work this out for itself: reading the safe area needs
+   * `react-native-safe-area-context`, and this package takes no dependency the
+   * host has not already chosen. So the host supplies it, and a host that does
+   * not gets 0 — which is what every release before this one drew.
+   */
+  top: number
   /** Distance from the bottom of the screen to place the control bar. */
   bottom: number
   /** True while the keyboard occupies screen space. */
@@ -46,6 +55,7 @@ const FALLBACK_DURATION = 180
 export function composerInsets(
   frame: KeyboardFrame,
   safeAreaBottom = 0,
+  safeAreaTop = 0,
 ): ComposerInsets {
   const height = Number.isFinite(frame.height) ? Math.max(0, frame.height) : 0
   const visible = height > 0
@@ -55,6 +65,9 @@ export function composerInsets(
       ? FALLBACK_DURATION
       : Math.min(MAX_DURATION, raw)
   return {
+    // The keyboard never covers the top, so this one is the safe area and
+    // nothing else.
+    top: Number.isFinite(safeAreaTop) ? Math.max(0, safeAreaTop) : 0,
     bottom: visible ? height : Math.max(0, safeAreaBottom),
     keyboardVisible: visible,
     duration,
@@ -128,3 +141,73 @@ export function fitCanvasRect(container: Box, document: Box): CanvasRect {
     top: (container.height - height) / 2,
   }
 }
+
+export interface InputBoxRequest {
+  /** The composer's own bounds. */
+  container: Box
+  /** Document size, for the canvas fit. */
+  document: Box
+  /** Font size as a fraction of document width, as the layer stores it. */
+  fontSize: number
+  /** Line height as a multiple of the font size. */
+  lineHeight: number
+  /** The layer's normalized vertical centre. */
+  centerY: number
+  /** The drawn text box in document pixels, once the renderer has measured it. */
+  measured?: Box | null
+  /** Lines in the value — the estimate used until a measurement arrives. */
+  lines: number
+}
+
+export interface InputBox extends CanvasRect {
+  fontSize: number
+  lineHeight: number
+}
+
+/**
+ * Where to put the invisible `TextInput` that carries the caret.
+ *
+ * The box has to be **the size of the text**, not the size of the canvas. A
+ * full-height input only looked right on Android, where `textAlignVertical`
+ * pushed its content to the middle; that property does not exist on iOS, so
+ * there the caret sat at the top of the screen while the glyphs it belonged to
+ * were halfway down. Sizing the box to the text puts the first line at the top
+ * of the box on every platform, and the box itself where the glyphs are.
+ *
+ * The renderer's measurement is preferred because it is the box that actually
+ * draws. Before the first measurement arrives — the frame a layer is created —
+ * the line count is the estimate, which is exact until a line wraps.
+ */
+export function composerInputBox(request: InputBoxRequest): InputBox {
+  const canvas = fitCanvasRect(request.container, request.document)
+  const fontSize = Math.max(1, request.fontSize * canvas.width)
+  const lineHeight = Math.max(1, fontSize * request.lineHeight)
+
+  const scale = request.document.width > 0 ? canvas.width / request.document.width : 0
+  const measuredHeight =
+    request.measured && request.measured.height > 0 ? request.measured.height * scale : 0
+  const estimated = lineHeight * Math.max(1, request.lines)
+  // At least one line, never taller than the canvas: a box that overflows the
+  // screen puts the caret off it again, which is the bug this replaced.
+  const height = Math.min(
+    Math.max(lineHeight, measuredHeight > 0 ? measuredHeight : estimated),
+    Math.max(lineHeight, canvas.height),
+  )
+
+  const centre = canvas.top + request.centerY * canvas.height
+  // Keep the box on screen even for a layer dragged to an edge — the caret has
+  // to be reachable, and a few points of drift beats an unreachable caret.
+  const top = Math.min(
+    Math.max(0, centre - height / 2),
+    Math.max(0, request.container.height - height),
+  )
+
+  return {
+    left: canvas.left,
+    width: Math.max(1, canvas.width),
+    top,
+    height: Math.max(1, height),
+    fontSize,
+    lineHeight,
+  }
+}

package/src/gestures/LayerGestureSurface.tsx

@@ -73,10 +73,13 @@ export function LayerGestureSurface({ onSnap }: LayerGestureSurfaceProps) {
   // 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],
-  )
+  useEffect(() => {
+    const refresh = () => setMeasureVersion((v) => v + 1)
+    const unsubscribe = renderer.textMeasures.subscribe(refresh)
+    // The first scene may have committed before this passive effect subscribed.
+    refresh()
+    return unsubscribe
+  }, [renderer])
 
   const hitCandidates = useMemo(
     () =>
@@ -147,6 +150,21 @@ export function LayerGestureSurface({ onSnap }: LayerGestureSurfaceProps) {
   const focalY = useSharedValue(0.5)
   const pointers = useSharedValue(0)
   const active = useSharedValue(false)
+  /*
+    Fingers still on the glass.
+
+    Completion used to belong to the pan's `onFinalize` alone, and on iOS a
+    two-finger twist could leave that one recognizer without a finalize: the
+    layer rotated on screen, the document was never written, and the preview and
+    its guides stayed up for good — what you saw was not what exported.
+
+    The touch stream is the authority instead. It is the one thing no recognizer
+    can withhold: when the last finger leaves, the gesture is over, whatever the
+    recognizers do or do not report. Every finalize still settles too, for the
+    case where a handler is cancelled and stops receiving touches at all —
+    `endIfIdle` is idempotent, so the first of them to arrive wins.
+  */
+  const livePointers = useSharedValue(0)
   const snapCX = useSharedValue(false)
   const snapCY = useSharedValue(false)
   const snapR = useSharedValue(false)
@@ -357,9 +375,30 @@ export function LayerGestureSurface({ onSnap }: LayerGestureSurfaceProps) {
       )
     }
 
+    /** Settle only once every finger has gone; a lone finger left is still a drag. */
+    const releaseIfEmpty = () => {
+      'worklet'
+      if (livePointers.value > 0) return
+      endIfIdle()
+    }
+
     const pan = Gesture.Pan()
       .minPointers(1)
       .maxPointers(2)
+      .onTouchesDown((e) => {
+        'worklet'
+        livePointers.value = e.allTouches.length
+      })
+      .onTouchesUp((e) => {
+        'worklet'
+        livePointers.value = Math.max(0, e.allTouches.length - e.changedTouches.length)
+        releaseIfEmpty()
+      })
+      .onTouchesCancelled(() => {
+        'worklet'
+        livePointers.value = 0
+        releaseIfEmpty()
+      })
       .onBegin((e) => {
         'worklet'
         if (active.value) return
@@ -409,17 +448,22 @@ export function LayerGestureSurface({ onSnap }: LayerGestureSurfaceProps) {
       })
       .onFinalize(() => {
         'worklet'
-        endIfIdle()
+        releaseIfEmpty()
       })
 
-    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 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)
+      })
+      .onFinalize(() => {
+        'worklet'
+        releaseIfEmpty()
+      })
 
     const rotate = Gesture.Rotation()
       .enabled(config.rotationEnabled)
@@ -431,6 +475,10 @@ export function LayerGestureSurface({ onSnap }: LayerGestureSurfaceProps) {
         syncPointers(e.numberOfPointers)
         recompute(false)
       })
+      .onFinalize(() => {
+        'worklet'
+        releaseIfEmpty()
+      })
 
     const tap = Gesture.Tap().onEnd((e) => {
       'worklet'