@xom11/whiteboard 0.27.0 → 0.28.0

package/dist/index.js

@@ -2296,9 +2296,11 @@ var init_circle = __esm({
       },
       render: (obj, ctx) => {
         const board = ctx.jxg;
+        const isCenterLabel = (l) => /^[A-Z]['′]?\d*$/u.test(l);
+        const isCenter = isCenterLabel(obj.label);
         const baseOpts = {
           name: obj.label,
-          withLabel: obj.attrs.showLabel ?? false,
+          withLabel: isCenter ? obj.attrs.showLabel ?? false : true,
           strokeColor: obj.attrs.color ?? "#0f172a",
           strokeWidth: obj.attrs.width ?? 2,
           dash: obj.attrs.dash ?? 0,
@@ -2311,22 +2313,37 @@ var init_circle = __esm({
           const p1 = ctx.resolveRef(c.p1);
           const p2 = ctx.resolveRef(c.p2);
           const p3 = ctx.resolveRef(c.p3);
+          if (isCenter) {
+            const center2 = board.create("circumcenter", [p1, p2, p3], {
+              visible: obj.visible,
+              withLabel: true,
+              fixed: true,
+              name: obj.label
+            });
+            const circ = board.create("circumcircle", [p1, p2, p3], { ...baseOpts, withLabel: false });
+            circ.center = circ.center ?? center2;
+            circ._helpers = [center2];
+            return circ;
+          }
           return board.create("circumcircle", [p1, p2, p3], baseOpts);
         }
         if (c?.kind === "incircle") {
           const p1 = ctx.resolveRef(c.p1);
           const p2 = ctx.resolveRef(c.p2);
           const p3 = ctx.resolveRef(c.p3);
-          const center2 = board.create("incenter", [p1, p2, p3], {
-            visible: obj.visible,
-            withLabel: true,
-            fixed: true,
-            name: obj.label
-          });
-          const circ = board.create("incircle", [p1, p2, p3], baseOpts);
-          circ.center = circ.center ?? center2;
-          circ._helpers = [center2];
-          return circ;
+          if (isCenter) {
+            const center2 = board.create("incenter", [p1, p2, p3], {
+              visible: obj.visible,
+              withLabel: true,
+              fixed: true,
+              name: obj.label
+            });
+            const circ = board.create("incircle", [p1, p2, p3], { ...baseOpts, withLabel: false });
+            circ.center = circ.center ?? center2;
+            circ._helpers = [center2];
+            return circ;
+          }
+          return board.create("incircle", [p1, p2, p3], baseOpts);
         }
         if (c?.kind === "excircle") {
           const P = [ctx.resolveRef(c.p1), ctx.resolveRef(c.p2), ctx.resolveRef(c.p3)];
@@ -12552,6 +12569,94 @@ var init_AiFigurePrompt = __esm({
     StopIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) });
   }
 });
+
+// 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;
+}
+var init_draft = __esm({
+  "src/stamps/geometry-2d/draft.ts"() {
+  }
+});
+function useGeometryDraftEmit({
+  store,
+  handleRef,
+  api,
+  showAxis,
+  showGrid,
+  onGeometryDraft,
+  debounceMs = 350
+}) {
+  const seqRef = React19.useRef(0);
+  const seenRef = React19.useRef({ last: null });
+  const timerRef = React19.useRef(null);
+  const cbRef = React19.useRef(onGeometryDraft);
+  cbRef.current = onGeometryDraft;
+  React19.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 init_useGeometryDraftEmit = __esm({
+  "src/stamps/geometry-2d/editor/useGeometryDraftEmit.ts"() {
+    init_serialize();
+    init_render();
+    init_draft();
+  }
+});
 var GeometryEditorPanelInner, GeometryEditorPanel;
 var init_EditorPanel = __esm({
   "src/stamps/geometry-2d/editor/EditorPanel.tsx"() {
@@ -12568,6 +12673,7 @@ var init_EditorPanel = __esm({
     init_constants();
     init_Toast2();
     init_AiFigurePrompt();
+    init_useGeometryDraftEmit();
     GeometryEditorPanelInner = React19.forwardRef(
       function GeometryEditorPanelInner2({
         store,
@@ -12586,7 +12692,9 @@ var init_EditorPanel = __esm({
         canUndo,
         canRedo,
         onSelectionChange,
-        generateGeometryFigure
+        generateGeometryFigure,
+        api,
+        onGeometryDraft
       }, ref) {
         const { showToast } = useToast();
         const handleRef = React19.useRef(null);
@@ -12599,12 +12707,14 @@ var init_EditorPanel = __esm({
         React19.useEffect(() => {
           onSelectionChangeRef.current = onSelectionChange;
         }, [onSelectionChange]);
+        const onGeometryDraftRef = React19.useRef(onGeometryDraft);
+        React19.useEffect(() => {
+          onGeometryDraftRef.current = onGeometryDraft;
+        }, [onGeometryDraft]);
         useEditorState({ store, onHistoryChange });
-        const currentSceneState = React19.useSyncExternalStore(
-          (cb) => store.subscribe(cb),
-          () => store.getState(),
-          () => store.getState()
-        );
+        useGeometryDraftEmit({ store, handleRef, api, showAxis, showGrid, onGeometryDraft });
+        const snap = () => store.getState();
+        const currentSceneState = React19.useSyncExternalStore((cb) => store.subscribe(cb), snap, snap);
         React19.useEffect(() => {
           const sync = () => setHasContent(Object.keys(store.getState().objects).length > 0);
           sync();
@@ -12614,22 +12724,22 @@ var init_EditorPanel = __esm({
           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);
@@ -12637,7 +12747,7 @@ var init_EditorPanel = __esm({
               }
               return;
             }
-            setMultiSelection(snap);
+            setMultiSelection(snap2);
             setPropsPopover(null);
             onSelectionChangeRef.current?.(void 0);
           });
@@ -12681,15 +12791,13 @@ var init_EditorPanel = __esm({
             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 = React19.useCallback(() => {
-          performInsert();
-        }, [performInsert]);
         const loadAiFigure = React19.useCallback((generated) => {
           handleRef.current?.clearSelection();
           setPropsPopover(null);
@@ -12784,7 +12892,7 @@ var init_EditorPanel = __esm({
                     "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",
@@ -12902,7 +13010,7 @@ var init_EditorPanel = __esm({
                   /* @__PURE__ */ jsxRuntime.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",
@@ -13263,7 +13371,7 @@ var init_host = __esm({
     init_useStampStore();
     init_dslRenderRow();
     GeometryStampHost = React19.forwardRef(
-      function GeometryStampHost2({ api, editingElement, onClose, isDark, generateGeometryFigure }, ref) {
+      function GeometryStampHost2({ api, editingElement, onClose, isDark, generateGeometryFigure, onGeometryDraft }, ref) {
         const panelRef = React19.useRef(null);
         const { isMobile } = useIsMobile();
         const [drawerOpen, setDrawerOpen] = React19.useState(false);
@@ -13378,7 +13486,9 @@ var init_host = __esm({
               canUndo,
               canRedo,
               onSelectionChange: setSelectedObjectId,
-              generateGeometryFigure
+              generateGeometryFigure,
+              api,
+              onGeometryDraft
             }
           )
         ] });
@@ -20388,7 +20498,8 @@ function Whiteboard({
   stamps = DEFAULT_STAMPS,
   initialScene,
   initialFiles,
-  generateGeometryFigure
+  generateGeometryFigure,
+  onGeometryDraft
 }) {
   const { api, apiRef, isDark, setApiFromExcalidraw, syncThemeFromAppState } = useExcalidrawApi({ onApi });
   const {
@@ -20561,7 +20672,8 @@ function Whiteboard({
         editingElement,
         onClose: closeStamp,
         isDark,
-        generateGeometryFigure
+        generateGeometryFigure,
+        onGeometryDraft
       }
     )
   ] });