@xom11/whiteboard 0.9.1 → 0.10.1

package/dist/geometry-2d.js

@@ -116,7 +116,17 @@ function deserializeIntoBoard(board, serialized, options = {}) {
   const palette = options.palette ?? paletteFor(false);
   const idMap = /* @__PURE__ */ new Map();
   const resolve = (a) => {
-    if (typeof a === "string" && idMap.has(a)) return idMap.get(a);
+    if (typeof a === "string") {
+      if (idMap.has(a)) return idMap.get(a);
+      const m = /^(.+):border:(\d+)$/.exec(a);
+      if (m) {
+        const poly = idMap.get(m[1]);
+        const idx = parseInt(m[2], 10);
+        if (poly && Array.isArray(poly.borders) && poly.borders[idx]) {
+          return poly.borders[idx];
+        }
+      }
+    }
     if (Array.isArray(a)) return a.map(resolve);
     return a;
   };
@@ -164,6 +174,29 @@ var init_safeJsx = __esm({
 });
 
 // src/stamps/geometry-2d/render.ts
+function containerDimsForBbox(bbox) {
+  const [xmin, ymax, xmax, ymin] = bbox;
+  const w = Math.abs(xmax - xmin);
+  const h = Math.abs(ymax - ymin);
+  if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
+    return { width: FALLBACK_W, height: FALLBACK_H };
+  }
+  let width = w * PIXELS_PER_UNIT;
+  let height = h * PIXELS_PER_UNIT;
+  const maxAxis = Math.max(width, height);
+  if (maxAxis > MAX_DIM) {
+    const ratio = MAX_DIM / maxAxis;
+    width *= ratio;
+    height *= ratio;
+  }
+  const minAxis = Math.min(width, height);
+  if (minAxis < MIN_DIM) {
+    const ratio = MIN_DIM / minAxis;
+    width *= ratio;
+    height *= ratio;
+  }
+  return { width: Math.round(width), height: Math.round(height) };
+}
 async function renderGeometrySvgFromState(jsonState) {
   const parsed = JSON.parse(jsonState);
   const palette = paletteFor(false);
@@ -186,10 +219,11 @@ async function renderGeometrySvgFromState(jsonState) {
       opts.grid.strokeColor = palette.grid;
     }
   });
+  const { width, height } = containerDimsForBbox(parsed.bbox);
   const container = document.createElement("div");
   const containerId = "jxg_offscreen_" + Date.now() + "_" + Math.random().toString(36).slice(2, 8);
   container.id = containerId;
-  container.style.cssText = "position:absolute;top:-99999px;left:-99999px;width:400px;height:300px;visibility:hidden;pointer-events:none;";
+  container.style.cssText = `position:absolute;top:-99999px;left:-99999px;width:${width}px;height:${height}px;visibility:hidden;pointer-events:none;`;
   document.body.appendChild(container);
   let board = null;
   try {
@@ -199,7 +233,7 @@ async function renderGeometrySvgFromState(jsonState) {
       grid: !!parsed.showGrid,
       showCopyright: false,
       showNavigation: false,
-      keepAspectRatio: false
+      keepAspectRatio: true
     });
     deserializeIntoBoard(board, parsed, { palette });
     board.update();
@@ -211,12 +245,18 @@ async function renderGeometrySvgFromState(jsonState) {
     if (container.parentNode) container.parentNode.removeChild(container);
   }
 }
+var PIXELS_PER_UNIT, MIN_DIM, MAX_DIM, FALLBACK_W, FALLBACK_H;
 var init_render = __esm({
   "src/stamps/geometry-2d/render.ts"() {
     init_renderInline();
     init_serialize();
     init_theme();
     init_safeJsx();
+    PIXELS_PER_UNIT = 20;
+    MIN_DIM = 100;
+    MAX_DIM = 1200;
+    FALLBACK_W = 400;
+    FALLBACK_H = 300;
   }
 });
 
@@ -313,8 +353,12 @@ function letterForGroup(g) {
 }
 function objKind(obj) {
   if (!obj) return "other";
+  const ec = typeof obj.elementClass === "number" ? obj.elementClass : null;
+  if (ec === 1) return "point";
+  if (ec === 2) return "line";
+  if (ec === 3) return "circle";
   const e = (obj.elType || obj.type || "").toString().toLowerCase();
-  if (e === "point" || e === "glider" || e === "midpoint") return "point";
+  if (e === "point" || e === "glider" || e === "midpoint" || e === "intersection" || e === "otherintersection" || e === "reflection" || e === "mirrorpoint" || e === "mirrorelement" || e === "orthogonalprojection" || e === "parallelpoint") return "point";
   if (e === "line" || e === "segment" || e === "arrow" || e === "axis" || e === "normal" || e === "parallel" || e === "perpendicular" || e === "tangent" || e === "bisector" || e === "perpendicularsegment") return "line";
   if (e === "circle" || e === "circumcircle") return "circle";
   return "other";
@@ -514,7 +558,7 @@ function handleDown(ctx, e) {
     if (!sc) return;
     const [sx, sy] = sc;
     const hits2 = ctx.objectsAt(e).map(ctx.promoteLabel).filter((o) => o !== ctx.axisObjsRef.current.x && o !== ctx.axisObjsRef.current.y);
-    const obj = hits2.find((o) => objKind(o) === "point") ?? hits2[0] ?? ctx.findNearestPoint(e, 12);
+    const obj = hits2.find((o) => objKind(o) === "point") ?? ctx.findNearestPoint(e, 12) ?? hits2[0];
     if (obj) {
       const shift = !!(e.shiftKey || e.altKey);
       ctx.toggleSelect(obj, shift);
@@ -757,7 +801,7 @@ function handleUp(ctx, e) {
   const moved = Math.hypot(sx - start.sx, sy - start.sy);
   if (moved > 4) return;
   const hits = ctx.objectsAt(e).map(ctx.promoteLabel).filter((o) => o !== ctx.axisObjsRef.current.x && o !== ctx.axisObjsRef.current.y);
-  const best = hits.find((o) => objKind(o) === "point") ?? hits[0] ?? ctx.findNearestPoint(e, 12);
+  const best = hits.find((o) => objKind(o) === "point") ?? ctx.findNearestPoint(e, 12) ?? hits[0];
   if (!best) {
     ctx.lastMoveClickRef.current = { obj: null, time: 0 };
     return;
@@ -896,8 +940,16 @@ var init_MiniBoard = __esm({
       const nextLocalId = react.useCallback(() => "j" + creationLogRef.current.length, []);
       const resolveArgs = react.useCallback((args) => {
         return args.map((a) => {
-          if (typeof a === "string" && objMapRef.current.has(a)) {
-            return objMapRef.current.get(a);
+          if (typeof a === "string") {
+            if (objMapRef.current.has(a)) return objMapRef.current.get(a);
+            const m = /^(.+):border:(\d+)$/.exec(a);
+            if (m) {
+              const poly = objMapRef.current.get(m[1]);
+              const idx = parseInt(m[2], 10);
+              if (poly && Array.isArray(poly.borders) && poly.borders[idx]) {
+                return poly.borders[idx];
+              }
+            }
           }
           return a;
         });
@@ -927,15 +979,27 @@ var init_MiniBoard = __esm({
         [nextLocalId, resolveArgs, pushLog]
       );
       const localIdOf = react.useCallback((obj) => {
+        if (!obj) return null;
         for (const [id, o] of objMapRef.current.entries()) {
           if (o === obj) return id;
         }
+        for (const [id, o] of objMapRef.current.entries()) {
+          const borders = o?.borders;
+          if (Array.isArray(borders)) {
+            const idx = borders.indexOf(obj);
+            if (idx >= 0) return `${id}:border:${idx}`;
+          }
+        }
         return null;
       }, []);
       const snapshotObject = react.useCallback((obj, anchorScreen) => {
         const o = obj;
         const k = objKind(o);
         if (k !== "point" && k !== "line" && k !== "circle") return null;
+        for (const owner of objMapRef.current.values()) {
+          const borders = owner?.borders;
+          if (Array.isArray(borders) && borders.indexOf(o) >= 0) return null;
+        }
         const v = o.visProp ?? {};
         const showLabel = v.withlabel !== false;
         const showValue = valueLabelsRef.current.has(o);
@@ -1454,7 +1518,22 @@ var init_MiniBoard = __esm({
         const board = boardRef.current;
         if (!board) return false;
         const idMap = objMapRef.current;
-        const resolved = el.args.map((a) => typeof a === "string" && idMap.has(a) ? idMap.get(a) : a);
+        const resolve = (a) => {
+          if (typeof a === "string") {
+            if (idMap.has(a)) return idMap.get(a);
+            const m = /^(.+):border:(\d+)$/.exec(a);
+            if (m) {
+              const poly = idMap.get(m[1]);
+              const idx = parseInt(m[2], 10);
+              if (poly && Array.isArray(poly.borders) && poly.borders[idx]) {
+                return poly.borders[idx];
+              }
+            }
+          }
+          if (Array.isArray(a)) return a.map(resolve);
+          return a;
+        };
+        const resolved = el.args.map(resolve);
         try {
           if (el.type === "valueLabel") {
             const target = resolved[0];
@@ -2200,15 +2279,15 @@ function CloseIcon() {
   ] });
 }
 function UndoIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 7 3 13 9 13" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.51 13a9 9 0 1 0 2.13-9.36L3 7" })
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10 L8 5 L8 8 L15 8 A5 5 0 0 1 20 13 L20 16" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10 L8 15 L8 12" })
   ] });
 }
 function RedoIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 7 21 13 15 13" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.49 13a9 9 0 1 1-2.13-9.36L21 7" })
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 10 L16 5 L16 8 L9 8 A5 5 0 0 0 4 13 L4 16" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 10 L16 15 L16 12" })
   ] });
 }
 function AxisIcon() {
@@ -2968,6 +3047,7 @@ var init_EditorPanel = __esm({
       function GeometryEditorPanel2({ initialState, onInsert, onClose, withLeftPanel = false, onStateChange, isDark, isMobile = false, onOpenDrawer, onUndo, onRedo, canUndo, canRedo }, ref) {
         const handleRef = react.useRef(null);
         const [ready, setReady] = react.useState(false);
+        const [hasContent, setHasContent] = react.useState(false);
         const [propsPopover, setPropsPopover] = react.useState(null);
         const [transformPopover, setTransformPopover] = react.useState(null);
         const onStateChangeRef = react.useRef(onStateChange);
@@ -2976,8 +3056,10 @@ var init_EditorPanel = __esm({
         }, [onStateChange]);
         const emitState = react.useCallback(() => {
           const h = handleRef.current;
+          if (!h) return;
+          setHasContent(h.getCreationLog().length > 0);
           const cb = onStateChangeRef.current;
-          if (!h || !cb) return;
+          if (!cb) return;
           cb({
             tool: h.getTool(),
             showAxis: h.getShowAxis(),
@@ -3107,7 +3189,8 @@ var init_EditorPanel = __esm({
                     {
                       type: "button",
                       onClick: handleInsert,
-                      disabled: !ready,
+                      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",
                       className: "rounded bg-white/15 px-3 py-1.5 text-xs font-semibold transition hover:bg-white/25 disabled:opacity-50",
                       children: "Ch\xE8n"
@@ -3207,7 +3290,8 @@ var init_EditorPanel = __esm({
                     "button",
                     {
                       onClick: handleInsert,
-                      disabled: !ready,
+                      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",
                       className: "rounded bg-emerald-600 px-3 py-1 text-xs font-medium text-white transition hover:bg-emerald-700 disabled:opacity-50",
                       children: "Ch\xE8n"