@pictor-sdk/ui 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -727,10 +727,16 @@ function hitTestLayerCandidatesUI(x, y, candidates, documentWidth, documentHeigh
   return null;
 }
 
+// src/gestures/selectionTap.ts
+function selectedLayerTapId(hit, wasSelectedAtStart) {
+  if (!hit || hit.locked || !wasSelectedAtStart) return null;
+  return hit.id;
+}
+
 // src/gestures/LayerGestureSurface.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-function LayerGestureSurface({ onSnap }) {
-  const { document, dispatch, profile } = useEditor5();
+function LayerGestureSurface({ onSnap, onSelectedLayerTap }) {
+  const { document, dispatch, profile, selection } = useEditor5();
   const store = useEditorStore2();
   const metrics = useCanvasMetrics4();
   const { setPreview, setLayerDragActive, setOverDeleteTarget, setSnap } = useInteractionState();
@@ -821,10 +827,11 @@ function LayerGestureSurface({ onSnap }) {
       document.size.height
     );
   }, [document.size.width, document.size.height]);
-  const latest = useRef7({ document, metrics, store, dispatch, onSnap, profile });
-  latest.current = { document, metrics, store, dispatch, onSnap, profile };
+  const latest = useRef7({ document, metrics, store, dispatch, onSnap, profile, selection, onSelectedLayerTap });
+  latest.current = { document, metrics, store, dispatch, onSnap, profile, selection, onSelectedLayerTap };
   const grabbedId = useRef7(null);
   const grabbedFrom = useRef7(null);
+  const tapWasSelected = useRef7(false);
   const snapState = useRef7(NO_SNAP2);
   const onGrabLayer = useCallback3((id) => {
     const { document: doc, store: s } = latest.current;
@@ -837,9 +844,23 @@ function LayerGestureSurface({ onSnap }) {
     setPreview({ layerId: hit.id, transform: previewTransform });
     setLayerDragActive(true);
   }, [setPreview, setLayerDragActive, previewTransform]);
+  const snapshotTapAt = useCallback3((xDp, yDp) => {
+    const { document: doc, metrics: m, store: s, selection: selected } = 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)
+    );
+    tapWasSelected.current = Boolean(hit && selected.includes(hit.id));
+  }, []);
   const onSelectAt = useCallback3((xDp, yDp) => {
     const { document: doc, metrics: m, store: s } = latest.current;
     if (!m) return;
+    const wasSelected = tapWasSelected.current;
+    tapWasSelected.current = false;
     const layerInteraction = latest.current.profile.interaction?.layers;
     const hit = hitTestDocument(
       doc,
@@ -848,6 +869,8 @@ function LayerGestureSurface({ onSnap }) {
       (layer, index) => isDirectManipulationLayer(layer, index, layerInteraction)
     );
     s.select(hit && !hit.locked ? [hit.id] : []);
+    const editId = selectedLayerTapId(hit ?? null, wasSelected);
+    if (editId) latest.current.onSelectedLayerTap?.(editId);
   }, []);
   const onSnapChanged = useCallback3(
     (centerX, centerY, rotation) => {
@@ -986,6 +1009,8 @@ function LayerGestureSurface({ onSnap }) {
     const pan = Gesture4.Pan().minPointers(1).maxPointers(2).onTouchesDown((e) => {
       "worklet";
       livePointers.value = e.allTouches.length;
+      const touch = e.changedTouches[0] ?? e.allTouches[0];
+      if (touch) runOnJS4(snapshotTapAt)(touch.x, touch.y);
     }).onTouchesUp((e) => {
       "worklet";
       livePointers.value = Math.max(0, e.allTouches.length - e.changedTouches.length);
@@ -1076,6 +1101,7 @@ function LayerGestureSurface({ onSnap }) {
     deleteTarget,
     aspect,
     onGrabLayer,
+    snapshotTapAt,
     onSelectAt,
     onSnapChanged,
     onHoverChanged,
@@ -1769,8 +1795,9 @@ function Slider({
   const valueRef = useRef9(value);
   valueRef.current = value;
   const onLayout = (e) => {
-    setWidth(e.nativeEvent.layout.width);
-    widthRef.current = e.nativeEvent.layout.width;
+    const next = e.nativeEvent.layout.width;
+    widthRef.current = next;
+    setWidth((previous) => previous === next ? previous : next);
   };
   const handlers = useMemo7(() => {
     const begin = () => {
@@ -3564,7 +3591,8 @@ function fitCanvasRect(container, document) {
   };
 }
 function composerInputBox(request) {
-  const canvas = fitCanvasRect(request.container, request.document);
+  const provided = request.canvas;
+  const canvas = provided && provided.width > 0 && provided.height > 0 ? provided : 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;
@@ -3588,6 +3616,35 @@ function composerInputBox(request) {
     lineHeight
   };
 }
+function sameCaretLine(previous, next) {
+  return previous === next || previous !== null && next !== null && previous.x === next.x && previous.y === next.y && previous.width === next.width && previous.height === next.height;
+}
+var CARET_WIDTH = 2;
+function composerInputOpacity(platform) {
+  return platform === "android" ? 0 : 1;
+}
+function composerCaretBox(box, line) {
+  if (!line || !Number.isFinite(line.x) || !Number.isFinite(line.y) || !Number.isFinite(line.width) || !Number.isFinite(line.height)) {
+    return null;
+  }
+  const height = Math.max(1, line.height || box.lineHeight);
+  return {
+    left: box.left + line.x + line.width - CARET_WIDTH / 2,
+    top: box.top + line.y,
+    width: CARET_WIDTH,
+    height
+  };
+}
+
+// src/composer/tapGesture.ts
+var TAP_SLOP = 8;
+function pressMoved(start, end, slop = TAP_SLOP) {
+  if (!start || !end) return false;
+  if (!Number.isFinite(start.x) || !Number.isFinite(start.y) || !Number.isFinite(end.x) || !Number.isFinite(end.y)) {
+    return false;
+  }
+  return Math.hypot(end.x - start.x, end.y - start.y) > Math.max(0, slop);
+}
 
 // src/composer/useTextSession.ts
 import {
@@ -3730,7 +3787,7 @@ var SHADOWS = [
   { color: "#000000", blur: 0.012, dx: 2e-3, dy: 4e-3 },
   { color: "#000000", blur: 2e-3, dx: 6e-3, dy: 8e-3 }
 ];
-function TextComposer({ session, insets, onDone, onCancel }) {
+function TextComposer({ session, insets, onDone, onCancel, canvas }) {
   const theme = useTheme();
   const store = useEditorStore5();
   const { document } = useEditor22();
@@ -3740,6 +3797,8 @@ function TextComposer({ session, insets, onDone, onCancel }) {
   const [selectionRange, setSelectionRange] = useState10(
     void 0
   );
+  const [focused, setFocused] = useState10(false);
+  const [caretLine, setCaretLine] = useState10(null);
   const data = session.data;
   const span = session.span;
   const layerId = session.layer?.id;
@@ -3749,7 +3808,12 @@ function TextComposer({ session, insets, onDone, onCancel }) {
       setMeasured(null);
       return;
     }
-    const refresh = () => setMeasured(renderer.textMeasures.get(layerId) ?? null);
+    const refresh = () => {
+      const next = renderer.textMeasures.get(layerId) ?? null;
+      setMeasured(
+        (previous) => previous && next && previous.width === next.width && previous.height === next.height ? previous : next
+      );
+    };
     const unsubscribe = renderer.textMeasures.subscribe(refresh);
     refresh();
     return unsubscribe;
@@ -3762,7 +3826,8 @@ function TextComposer({ session, insets, onDone, onCancel }) {
       lineHeight: span?.lineHeight ?? 1.2,
       centerY: session.layer?.transform.y ?? 0.42,
       measured,
-      lines: session.value.split("\n").length
+      lines: session.value.split("\n").length,
+      ...canvas ? { canvas } : {}
     }),
     [
       container,
@@ -3771,20 +3836,41 @@ function TextComposer({ session, insets, onDone, onCancel }) {
       span?.lineHeight,
       session.layer?.transform.y,
       session.value,
-      measured
+      measured,
+      canvas
     ]
   );
   const fonts = useMemo11(() => fontChoices(store.registry.fonts), [store.registry.fonts]);
   useEffect8(() => {
-    const handle = setTimeout(() => input.current?.focus(), 50);
+    const handle = setTimeout(() => {
+      input.current?.focus();
+      if (session.kind === "existing" && session.value.length > 0) {
+        const end = session.value.length;
+        setSelectionRange({ start: end, end });
+        input.current?.setNativeProps({ selection: { start: end, end } });
+      }
+    }, 50);
     return () => clearTimeout(handle);
   }, []);
   const onSelectionChange = useCallback6(
     (event) => {
-      setSelectionRange(event.nativeEvent.selection);
+      const next = event.nativeEvent.selection;
+      setSelectionRange(
+        (previous) => previous && previous.start === next.start && previous.end === next.end ? previous : next
+      );
     },
     []
   );
+  const caretAt = selectionRange?.end ?? session.value.length;
+  const caretSource = session.value.slice(0, Math.max(0, caretAt));
+  const onCaretLayout = useCallback6((event) => {
+    const lines = event.nativeEvent.lines;
+    const last = lines[lines.length - 1];
+    const next = last ? { x: last.x, y: last.y, width: last.width, height: last.height } : null;
+    setCaretLine((previous) => sameCaretLine(previous, next) ? previous : next);
+  }, []);
+  const caret = composerCaretBox(layout, caretLine);
+  const letterSpacing = span?.letterSpacing && span.fontSize > 0 ? span.letterSpacing * layout.fontSize / span.fontSize : void 0;
   const keepFocus = useCallback6(
     (apply) => {
       apply();
@@ -3845,6 +3931,7 @@ function TextComposer({ session, insets, onDone, onCancel }) {
     });
     return () => subscription.remove();
   }, [onCancel, insets.keyboardVisible]);
+  const tapStart = useRef13(null);
   const controlRow = {
     flexDirection: "row",
     alignItems: "center",
@@ -3869,6 +3956,54 @@ function TextComposer({ session, insets, onDone, onCancel }) {
             style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, backgroundColor: "#00000055" }
           }
         ),
+        /* @__PURE__ */ jsx27(
+          Pressable15,
+          {
+            accessible: true,
+            collapsable: false,
+            accessibilityRole: "button",
+            accessibilityLabel: "Finish editing text",
+            onAccessibilityTap: onDone,
+            onPressIn: (event) => {
+              tapStart.current = {
+                x: event.nativeEvent.pageX,
+                y: event.nativeEvent.pageY
+              };
+            },
+            onPress: (event) => {
+              const start = tapStart.current;
+              const end = { x: event.nativeEvent.pageX, y: event.nativeEvent.pageY };
+              if (!pressMoved(start, end)) onDone();
+            },
+            style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsx27(
+          Text18,
+          {
+            accessible: false,
+            importantForAccessibility: "no-hide-descendants",
+            pointerEvents: "none",
+            onTextLayout: onCaretLayout,
+            style: {
+              position: "absolute",
+              left: layout.left,
+              width: layout.width,
+              top: layout.top,
+              height: layout.height,
+              opacity: 0,
+              fontSize: layout.fontSize,
+              lineHeight: layout.lineHeight,
+              fontFamily: span?.fontFamily,
+              fontWeight: span?.fontWeight ? `${span.fontWeight}` : void 0,
+              letterSpacing,
+              textAlign: data?.align ?? "center",
+              padding: 0
+            },
+            children: `${caretSource}\u200B`
+          },
+          `${caretSource}:${caretAt}`
+        ),
         /* @__PURE__ */ jsx27(
           TextInput,
           {
@@ -3876,6 +4011,8 @@ function TextComposer({ session, insets, onDone, onCancel }) {
             value: session.value,
             onChangeText: session.setValue,
             onSelectionChange,
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
             multiline: true,
             submitBehavior: "newline",
             autoCorrect: false,
@@ -3895,6 +4032,7 @@ function TextComposer({ session, insets, onDone, onCancel }) {
               // rgba rather than the 'transparent' keyword because the keyword is
               // not reliably honoured for TextInput colour on Android.
               color: "rgba(0,0,0,0)",
+              opacity: composerInputOpacity(Platform.OS),
               fontSize: layout.fontSize,
               lineHeight: layout.lineHeight,
               textAlign: data?.align ?? "center",
@@ -3905,6 +4043,22 @@ function TextComposer({ session, insets, onDone, onCancel }) {
             cursorColor: theme.colors.accent
           }
         ),
+        focused && caret ? /* @__PURE__ */ jsx27(
+          View18,
+          {
+            pointerEvents: "none",
+            accessible: false,
+            style: {
+              position: "absolute",
+              left: caret.left,
+              top: caret.top,
+              width: caret.width,
+              height: caret.height,
+              borderRadius: caret.width / 2,
+              backgroundColor: theme.colors.accent
+            }
+          }
+        ) : null,
         /* @__PURE__ */ jsxs18(
           View18,
           {
@@ -4104,7 +4258,8 @@ function TextComposer({ session, insets, onDone, onCancel }) {
 }
 function TextComposerHost({
   Composer = TextComposer,
-  safeArea
+  safeArea,
+  canvas
 }) {
   const { setActiveTool } = useEditor22();
   const session = useTextSession();
@@ -4152,7 +4307,8 @@ function TextComposerHost({
       session,
       insets,
       onDone: () => finish(true),
-      onCancel: () => finish(false)
+      onCancel: () => finish(false),
+      ...canvas ? { canvas } : {}
     }
   );
 }