@xom11/whiteboard 0.27.0 → 0.28.0

package/dist/{host-HAYCJJ2T.mjs → host-4P766V4J.mjs}

@@ -1,12 +1,12 @@
 "use client";
 import { useChordShortcut } from './chunk-HNQLZIEP.mjs';
 import { useToolStateMachine } from './chunk-NVJ7K3DK.mjs';
-import { safeJsx, initJxgBoard, attachJxgWheelZoom, useToast, ToastHost, STAMP_PANEL_DESKTOP, ToastProvider, useStampStore, StampLeftPanel, ObjectRow } from './chunk-I3L56GVH.mjs';
-import { serializeBoard, renderGeometrySvgFromState, isGeometryCustomData, deserializeBoard } from './chunk-AYJPOHCI.mjs';
+import { safeJsx, initJxgBoard, attachJxgWheelZoom, useToast, ToastHost, STAMP_PANEL_DESKTOP, ToastProvider, useStampStore, StampLeftPanel, ObjectRow } from './chunk-OQIQNKPQ.mjs';
+import { serializeBoard, renderGeometrySvgFromState, isGeometryCustomData, deserializeBoard } from './chunk-H22OZYTW.mjs';
 import { themeLabel, paletteFor, themeAxis, themeGrid } from './chunk-R5FL6S7L.mjs';
 import { JxgRenderer } from './chunk-SZDAS7LK.mjs';
 import './chunk-ICR4CVOE.mjs';
-import { nextLabel, useEditorState, listObjects } from './chunk-D5LWSN2Y.mjs';
+import { nextLabel, useEditorState, listObjects } from './chunk-ZTQBUKLJ.mjs';
 import './chunk-IHUFOV7L.mjs';
 import { validateFile, fileToImagePart, describeDsl, serializeState } from './chunk-AJAHD35N.mjs';
 import { handleExtractProblem } from './chunk-T3SOHYB2.mjs';
@@ -3697,6 +3697,85 @@ function AiFigurePrompt({
     ocrWarning && /* @__PURE__ */ jsx("p", { className: "mt-1 rounded bg-amber-50 px-2 py-1 text-[11px] text-amber-700", children: ocrWarning })
   ] });
 }
+
+// src/stamps/geometry-2d/draft.ts
+function svgIntrinsicSize(svg) {
+  const w = svg.match(/<svg[^>]*\swidth="([\d.]+)"/);
+  const h = svg.match(/<svg[^>]*\sheight="([\d.]+)"/);
+  if (w && h) return { width: parseFloat(w[1]), height: parseFloat(h[1]) };
+  const vb = svg.match(/viewBox="0 0 ([\d.]+) ([\d.]+)"/);
+  if (vb) return { width: parseFloat(vb[1]), height: parseFloat(vb[2]) };
+  return { width: 300, height: 200 };
+}
+function draftFromViewport(svg, appState, seq) {
+  const { width, height } = svgIntrinsicSize(svg);
+  const zoom = appState.zoom?.value ?? 1;
+  const vw = appState.width ?? 800;
+  const vh = appState.height ?? 600;
+  const cx = appState.scrollX + vw / 2 / zoom;
+  const cy = appState.scrollY + vh / 2 / zoom;
+  return { svg, width, height, x: cx - width / 2, y: cy - height / 2, seq };
+}
+function didStateChange(seen, jsonState) {
+  if (seen.last === jsonState) return false;
+  seen.last = jsonState;
+  return true;
+}
+
+// src/stamps/geometry-2d/editor/useGeometryDraftEmit.ts
+function useGeometryDraftEmit({
+  store,
+  handleRef,
+  api,
+  showAxis,
+  showGrid,
+  onGeometryDraft,
+  debounceMs = 350
+}) {
+  const seqRef = useRef(0);
+  const seenRef = useRef({ last: null });
+  const timerRef = useRef(null);
+  const cbRef = useRef(onGeometryDraft);
+  cbRef.current = onGeometryDraft;
+  useEffect(() => {
+    if (!cbRef.current) return;
+    const emit = () => {
+      const h = handleRef.current;
+      if (!h) return;
+      const state = h.getState();
+      if (Object.keys(state.objects).length === 0) {
+        if (seenRef.current.last !== null) {
+          seenRef.current.last = null;
+          cbRef.current?.(null);
+        }
+        return;
+      }
+      const bbox = h.getBbox();
+      const jsonState = serializeBoard(state, { bbox, showAxis, showGrid });
+      if (!didStateChange(seenRef.current, jsonState)) return;
+      void (async () => {
+        try {
+          const svg = await renderGeometrySvgFromState(jsonState);
+          const appState = api?.getAppState?.() ?? { scrollX: 0, scrollY: 0, width: 800, height: 600, zoom: { value: 1 } };
+          seqRef.current += 1;
+          cbRef.current?.(draftFromViewport(svg, appState, seqRef.current));
+        } catch (err) {
+          console.warn("[geometry] draft render failed:", err);
+        }
+      })();
+    };
+    const schedule = () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(emit, debounceMs);
+    };
+    const unsub = store.subscribe(schedule);
+    return () => {
+      unsub();
+      if (timerRef.current) clearTimeout(timerRef.current);
+      cbRef.current?.(null);
+    };
+  }, [store, handleRef, api, showAxis, showGrid, debounceMs]);
+}
 var GeometryEditorPanelInner = forwardRef(
   function GeometryEditorPanelInner2({
     store,
@@ -3715,7 +3794,9 @@ var GeometryEditorPanelInner = forwardRef(
     canUndo,
     canRedo,
     onSelectionChange,
-    generateGeometryFigure
+    generateGeometryFigure,
+    api,
+    onGeometryDraft
   }, ref) {
     const { showToast } = useToast();
     const handleRef = useRef(null);
@@ -3728,12 +3809,14 @@ var GeometryEditorPanelInner = forwardRef(
     useEffect(() => {
       onSelectionChangeRef.current = onSelectionChange;
     }, [onSelectionChange]);
+    const onGeometryDraftRef = useRef(onGeometryDraft);
+    useEffect(() => {
+      onGeometryDraftRef.current = onGeometryDraft;
+    }, [onGeometryDraft]);
     useEditorState({ store, onHistoryChange });
-    const currentSceneState = useSyncExternalStore(
-      (cb) => store.subscribe(cb),
-      () => store.getState(),
-      () => store.getState()
-    );
+    useGeometryDraftEmit({ store, handleRef, api, showAxis, showGrid, onGeometryDraft });
+    const snap = () => store.getState();
+    const currentSceneState = useSyncExternalStore((cb) => store.subscribe(cb), snap, snap);
     useEffect(() => {
       const sync = () => setHasContent(Object.keys(store.getState().objects).length > 0);
       sync();
@@ -3743,22 +3826,22 @@ var GeometryEditorPanelInner = forwardRef(
       const h = handleRef.current;
       if (!h) return;
       setReady(true);
-      h.onSelect((snap) => {
-        setPropsPopover(snap);
+      h.onSelect((snap2) => {
+        setPropsPopover(snap2);
         setMultiSelection(null);
-        onSelectionChangeRef.current?.(snap.id);
+        onSelectionChangeRef.current?.(snap2.id);
       });
       h.onTransformParam((info) => setTransformPopover(info));
-      h.onSelectionState((snap) => {
-        if (!snap || snap.ids.length === 0) {
+      h.onSelectionState((snap2) => {
+        if (!snap2 || snap2.ids.length === 0) {
           setPropsPopover(null);
           setMultiSelection(null);
           onSelectionChangeRef.current?.(void 0);
           return;
         }
-        if (snap.ids.length === 1) {
-          const id = snap.ids[0];
-          const single = buildObjectSnapshot(store.getState(), id, snap.anchor);
+        if (snap2.ids.length === 1) {
+          const id = snap2.ids[0];
+          const single = buildObjectSnapshot(store.getState(), id, snap2.anchor);
           if (single) {
             setPropsPopover(single);
             setMultiSelection(null);
@@ -3766,7 +3849,7 @@ var GeometryEditorPanelInner = forwardRef(
           }
           return;
         }
-        setMultiSelection(snap);
+        setMultiSelection(snap2);
         setPropsPopover(null);
         onSelectionChangeRef.current?.(void 0);
       });
@@ -3810,15 +3893,13 @@ var GeometryEditorPanelInner = forwardRef(
         try {
           const svgString = await renderGeometrySvgFromState(jsonState);
           onInsert(jsonState, svgString);
+          onGeometryDraftRef.current?.(null);
         } catch (err) {
           console.error("Geometry insert failed:", err);
         }
       })();
       return true;
     }, [onInsert, showAxis, showGrid]);
-    const handleInsert = useCallback(() => {
-      performInsert();
-    }, [performInsert]);
     const loadAiFigure = useCallback((generated) => {
       handleRef.current?.clearSelection();
       setPropsPopover(null);
@@ -3913,7 +3994,7 @@ var GeometryEditorPanelInner = forwardRef(
                 "button",
                 {
                   type: "button",
-                  onClick: handleInsert,
+                  onClick: performInsert,
                   disabled: !ready || !hasContent,
                   title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
                   "data-testid": "geometry-insert-btn-mobile",
@@ -4031,7 +4112,7 @@ var GeometryEditorPanelInner = forwardRef(
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: handleInsert,
+                  onClick: performInsert,
                   disabled: !ready || !hasContent,
                   title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
                   "data-testid": "geometry-insert-btn",
@@ -4087,7 +4168,7 @@ function parseInitialState(data) {
   return deserializeBoard(data.jsonState);
 }
 var GeometryStampHost = forwardRef(
-  function GeometryStampHost2({ api, editingElement, onClose, isDark, generateGeometryFigure }, ref) {
+  function GeometryStampHost2({ api, editingElement, onClose, isDark, generateGeometryFigure, onGeometryDraft }, ref) {
     const panelRef = useRef(null);
     const { isMobile } = useIsMobile();
     const [drawerOpen, setDrawerOpen] = useState(false);
@@ -4202,7 +4283,9 @@ var GeometryStampHost = forwardRef(
           canUndo,
           canRedo,
           onSelectionChange: setSelectedObjectId,
-          generateGeometryFigure
+          generateGeometryFigure,
+          api,
+          onGeometryDraft
         }
       )
     ] });
@@ -4210,5 +4293,5 @@ var GeometryStampHost = forwardRef(
 );
 
 export { GeometryStampHost };
-//# sourceMappingURL=host-HAYCJJ2T.mjs.map
-//# sourceMappingURL=host-HAYCJJ2T.mjs.map
+//# sourceMappingURL=host-4P766V4J.mjs.map
+//# sourceMappingURL=host-4P766V4J.mjs.map