@xom11/whiteboard 0.30.0 → 0.31.0

package/dist/geometry-3d.mjs

@@ -1,10 +1,10 @@
 "use client";
-export { geometry3dStamp } from './chunk-5JM35CXV.mjs';
-import './chunk-BU5KLO3P.mjs';
+export { geometry3dStamp } from './chunk-TMRFSOM7.mjs';
+import './chunk-T3N4BSJV.mjs';
 import './chunk-R5FL6S7L.mjs';
 import './chunk-ICR4CVOE.mjs';
-import './chunk-ZTQBUKLJ.mjs';
-import './chunk-IHUFOV7L.mjs';
+import './chunk-JJ4FPCBE.mjs';
+import './chunk-CH6SFONH.mjs';
 import './chunk-73Q7ADVL.mjs';
 import './chunk-B4NJJZFR.mjs';
 import './chunk-5UTGXHLJ.mjs';

package/dist/graph-2d.d.mts

@@ -1,4 +1,4 @@
-import { B as BaseStampCustomData, S as StampType } from './types-C3FjpoUi.mjs';
+import { B as BaseStampCustomData, S as StampType } from './types-tePd94vW.mjs';
 import 'react';
 import '@excalidraw/excalidraw/element/types';
 

package/dist/graph-2d.d.ts

@@ -1,4 +1,4 @@
-import { B as BaseStampCustomData, S as StampType } from './types-C3FjpoUi.js';
+import { B as BaseStampCustomData, S as StampType } from './types-tePd94vW.js';
 import 'react';
 import '@excalidraw/excalidraw/element/types';
 

package/dist/graph-2d.js

@@ -392,6 +392,22 @@ var init_parser = __esm({
   }
 });
 
+// src/core/scene/kinds/_label.ts
+function labelOpts(labelOffset, dflt) {
+  const offset = labelOffset ?? dflt;
+  return { label: { fixed: false, ...offset ? { offset } : {} } };
+}
+function readLabelOffset(label) {
+  const off = label.evalVisProp?.("offset") ?? label.visProp?.offset;
+  const rel = label.relativeCoords?.scrCoords;
+  if (!off || !rel || off.length < 2 || rel.length < 3) return null;
+  return [Math.round(off[0] + rel[1]), Math.round(off[1] - rel[2])];
+}
+var init_label = __esm({
+  "src/core/scene/kinds/_label.ts"() {
+  }
+});
+
 // src/core/scene/render/JxgRenderer.ts
 var JxgRenderer;
 var init_JxgRenderer = __esm({
@@ -399,6 +415,7 @@ var init_JxgRenderer = __esm({
     init_registry();
     init_types2d();
     init_parser();
+    init_label();
     JxgRenderer = class {
       constructor(store, board, options = {}) {
         this.elements = /* @__PURE__ */ new Map();
@@ -467,6 +484,7 @@ var init_JxgRenderer = __esm({
           this.elements.set(obj.id, el);
           this.attachFreePointDragSync(obj, el);
           this.attachGliderDragSync(obj, el);
+          this.attachLabelDragSync(obj, el);
         } catch (err) {
           console.warn(`[scene/render/2d] kh\xF4ng render \u0111\u01B0\u1EE3c ${obj.kind} id="${obj.id}":`, err);
         }
@@ -581,6 +599,54 @@ var init_JxgRenderer = __esm({
           });
         });
       }
+      /**
+       * Cho phép kéo NHÃN của bất kỳ object nào có label (point/line/segment/
+       * circle...). Khi user kéo nhãn, JSXGraph cộng dồn vào label.relativeCoords
+       * (drag-delta screen px) nhưng KHÔNG đổi attribute offset → vị trí cuối =
+       * offset + relativeCoords. Ta gộp lại thành offset thuần (readLabelOffset),
+       * zero relativeCoords để khỏi double-count khi update-hook/recreate áp lại
+       * offset, rồi dispatch UPDATE_ATTRS { labelOffset }. Right-click → reset.
+       */
+      attachLabelDragSync(obj, el) {
+        const label = el?.label;
+        if (!label || typeof label.on !== "function") return;
+        const sceneId = obj.id;
+        label.on("up", () => {
+          if (this.disposed) return;
+          const off = readLabelOffset(label);
+          if (!off) return;
+          const cur = this.store.getState().objects[sceneId];
+          if (!cur) return;
+          const prev = cur.attrs.labelOffset;
+          if (prev && prev[0] === off[0] && prev[1] === off[1]) return;
+          try {
+            label.setAttribute({ offset: off });
+            if (label.relativeCoords?.scrCoords) {
+              label.relativeCoords.scrCoords[1] = 0;
+              label.relativeCoords.scrCoords[2] = 0;
+            }
+          } catch {
+          }
+          this.store.dispatch({
+            type: "UPDATE_ATTRS",
+            payload: { id: sceneId, patch: { labelOffset: off } }
+          });
+        });
+        const node = label.rendNode;
+        if (node?.addEventListener) {
+          node.addEventListener("contextmenu", (ev) => {
+            if (this.disposed) return;
+            ev.preventDefault();
+            const c = this.store.getState().objects[sceneId];
+            if (!c) return;
+            if (c.attrs.labelOffset === void 0) return;
+            this.store.dispatch({
+              type: "UPDATE_ATTRS",
+              payload: { id: sceneId, patch: { labelOffset: void 0 } }
+            });
+          });
+        }
+      }
       remove(id) {
         this.removeHalo(id);
         this.selectedIds.delete(id);
@@ -717,88 +783,89 @@ var init_JxgRenderer = __esm({
           layer: 4,
           needsRegularUpdate: true
         };
+        const elementClass = el.elementClass;
+        const elType = el.elType;
+        const isPointLike = elementClass === 1 || elType === "point" || elType === "glider" || elType === "intersection";
+        const isPolygonLike = Array.isArray(el.vertices) && el.vertices.length >= 3;
+        const isCircleLike = elementClass === 3 || elType === "circle" || elType === "circumcircle" || elType === "incircle";
+        const isSegment = elType === "segment";
+        const isLineLike = elementClass === 2 || elType === "line" || elType === "arrow" || elType === "ray" || elType === "vector" || elType === "tangent" || elType === "normal" || elType === "parallel" || elType === "perpendicular" || elType === "bisector";
         const halos = [];
         try {
-          switch (el.elType) {
-            case "point":
-            case "glider":
-            case "intersection": {
-              const baseSize = el.getAttribute?.("size") ?? 4;
-              const halo = board.create("point", [
-                () => el.X?.() ?? 0,
-                () => el.Y?.() ?? 0
-              ], {
-                ...haloBase,
-                size: baseSize + 6,
-                face: "o",
-                strokeWidth: 2,
-                strokeOpacity: 0.75,
-                fillOpacity: 0.25
-              });
-              halos.push(halo);
-              break;
-            }
-            case "segment": {
-              if (el.point1 && el.point2) {
-                const halo = board.create("segment", [el.point1, el.point2], {
-                  ...haloBase,
-                  strokeWidth: 9,
-                  straightFirst: false,
-                  straightLast: false
-                });
-                halos.push(halo);
-              }
-              break;
-            }
-            case "line":
-            case "arrow":
-            case "ray":
-            case "vector":
-            case "tangent":
-            case "normal":
-            case "parallel":
-            case "perpendicular":
-            case "bisector": {
-              if (el.point1 && el.point2) {
-                const halo = board.create("line", [el.point1, el.point2], {
-                  ...haloBase,
-                  strokeWidth: 9
-                });
-                halos.push(halo);
-              }
-              break;
-            }
-            case "circle": {
-              if (el.center && typeof el.Radius === "function") {
-                const halo = board.create("circle", [el.center, () => el.Radius?.() ?? 0], {
-                  ...haloBase,
-                  strokeWidth: 9,
-                  fillOpacity: 0
-                });
-                halos.push(halo);
-              }
-              break;
-            }
-            case "polygon": {
-              if (Array.isArray(el.vertices) && el.vertices.length >= 3) {
-                const last = el.vertices.length - 1;
-                const verts = el.vertices[last] === el.vertices[0] ? el.vertices.slice(0, last) : el.vertices.slice();
-                const halo = board.create("polygon", verts, {
-                  ...haloBase,
-                  fillOpacity: 0.2,
-                  borders: {
-                    strokeColor: SEL_STROKE,
-                    strokeWidth: 7,
-                    strokeOpacity: 0.55,
-                    highlight: false
-                  }
-                });
-                halos.push(halo);
+          if (isPointLike) {
+            const baseSize = el.getAttribute?.("size") ?? 4;
+            const halo = board.create("point", [
+              () => el.X?.() ?? 0,
+              () => el.Y?.() ?? 0
+            ], {
+              ...haloBase,
+              size: baseSize + 6,
+              face: "o",
+              strokeWidth: 2,
+              strokeOpacity: 0.75,
+              fillOpacity: 0.25
+            });
+            halos.push(halo);
+          } else if (isPolygonLike) {
+            const verts = el.vertices;
+            const last = verts.length - 1;
+            const trimmed = verts[last] === verts[0] ? verts.slice(0, last) : verts.slice();
+            const halo = board.create("polygon", trimmed, {
+              ...haloBase,
+              fillOpacity: 0.2,
+              borders: {
+                strokeColor: SEL_STROKE,
+                strokeWidth: 7,
+                strokeOpacity: 0.55,
+                highlight: false
               }
-              break;
+            });
+            halos.push(halo);
+          } else if (isCircleLike && el.center && typeof el.Radius === "function") {
+            const halo = board.create("circle", [el.center, () => el.Radius?.() ?? 0], {
+              ...haloBase,
+              strokeWidth: 9,
+              fillOpacity: 0
+            });
+            halos.push(halo);
+          } else if (isSegment && el.point1 && el.point2) {
+            const halo = board.create("segment", [el.point1, el.point2], {
+              ...haloBase,
+              strokeWidth: 9,
+              straightFirst: false,
+              straightLast: false
+            });
+            halos.push(halo);
+          } else if (isLineLike && el.point1 && el.point2) {
+            const halo = board.create("line", [el.point1, el.point2], {
+              ...haloBase,
+              strokeWidth: 9
+            });
+            halos.push(halo);
+          } else if (el.center && (el.radiuspoint ?? el.radiusPoint) && (el.anglepoint ?? el.anglePoint) && (elType === "arc" || elType === "semicircle" || elType === "circumcirclearc" || elType === "sector" || elType === "angle")) {
+            const rp = el.radiuspoint ?? el.radiusPoint;
+            const ap = el.anglepoint ?? el.anglePoint;
+            if (elType === "sector") {
+              halos.push(board.create("sector", [el.center, rp, ap], {
+                ...haloBase,
+                strokeWidth: 7,
+                fillOpacity: 0.2
+              }));
+            } else if (elType === "angle") {
+              halos.push(board.create("angle", [rp, el.center, ap], {
+                ...haloBase,
+                strokeWidth: 7,
+                fillOpacity: 0.2,
+                radius: el.getAttribute?.("radius") ?? 1
+              }));
+            } else {
+              halos.push(board.create("arc", [el.center, rp, ap], {
+                ...haloBase,
+                strokeWidth: 9,
+                fillColor: "none",
+                fillOpacity: 0
+              }));
             }
-            default:
-              break;
           }
         } catch (err) {
           console.warn("[scene/render/2d] halo create fail:", err);
@@ -1647,8 +1714,12 @@ function constraintRefs2D(c) {
       return [c.line, c.circle, c.other];
     case "tangencyPoint":
       return [c.circle, c.onLine];
-    case "arcMidpoint":
-      return [c.circle, c.a, c.b, c.notContaining];
+    case "arcMidpoint": {
+      const containment = c.notContaining ?? c.containing;
+      return containment ? [c.circle, c.a, c.b, containment] : [c.circle, c.a, c.b];
+    }
+    case "mixtilinearPoint":
+      return [c.vertices[0], c.vertices[1], c.vertices[2]];
     case "pointAtDistance": {
       const d = c.distance;
       const extra = d.kind === "circleRadius" ? [d.circle] : d.kind === "segmentLength" ? [d.p1, d.p2] : [];
@@ -1935,7 +2006,7 @@ function dist(p, q) {
 function sideOf(a, b, p) {
   return (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]);
 }
-function arcMidpoint(center, radius, a, b, notContaining) {
+function arcMidpoint(center, radius, a, b, reference, sameSide = false) {
   const mcx = (a[0] + b[0]) / 2;
   const mcy = (a[1] + b[1]) / 2;
   let ux = mcx - center[0];
@@ -1950,12 +2021,18 @@ function arcMidpoint(center, radius, a, b, notContaining) {
   uy /= len;
   const cand1 = [center[0] + radius * ux, center[1] + radius * uy];
   const cand2 = [center[0] - radius * ux, center[1] - radius * uy];
+  if (!reference) return cand1[1] >= cand2[1] ? cand1 : cand2;
+  const notContaining = reference;
   const sN = sideOf(a, b, notContaining);
   if (Math.abs(sN) < 1e-9) {
-    return dist(cand1, notContaining) >= dist(cand2, notContaining) ? cand1 : cand2;
+    const far = dist(cand1, notContaining) >= dist(cand2, notContaining) ? cand1 : cand2;
+    const near = far === cand1 ? cand2 : cand1;
+    return sameSide ? near : far;
   }
   const s1 = sideOf(a, b, cand1);
-  return s1 * sN < 0 ? cand1 : cand2;
+  const opp = s1 * sN < 0 ? cand1 : cand2;
+  const same = opp === cand1 ? cand2 : cand1;
+  return sameSide ? same : opp;
 }
 function excenter(vertices, oppositeIndex) {
   const [A, B, C] = vertices;
@@ -1971,6 +2048,35 @@ function excenter(vertices, oppositeIndex) {
     (w[0] * A[1] + w[1] * B[1] + w[2] * C[1]) / sum
   ];
 }
+function circumcenterXY(a, b, c) {
+  const ax = a[0], ay = a[1], bx = b[0], by = b[1], cx = c[0], cy = c[1];
+  const d = 2 * (ax * (by - cy) + bx * (cy - ay) + cx * (ay - by));
+  if (Math.abs(d) < 1e-12) return [(ax + bx + cx) / 3, (ay + by + cy) / 3];
+  const ux = ((ax * ax + ay * ay) * (by - cy) + (bx * bx + by * by) * (cy - ay) + (cx * cx + cy * cy) * (ay - by)) / d;
+  const uy = ((ax * ax + ay * ay) * (cx - bx) + (bx * bx + by * by) * (ax - cx) + (cx * cx + cy * cy) * (bx - ax)) / d;
+  return [ux, uy];
+}
+function mixtilinearPoint(a, b, c, which) {
+  const O = circumcenterXY(a, b, c);
+  const R = Math.hypot(O[0] - a[0], O[1] - a[1]);
+  const ux1 = (b[0] - a[0]) / (Math.hypot(b[0] - a[0], b[1] - a[1]) || 1);
+  const uy1 = (b[1] - a[1]) / (Math.hypot(b[0] - a[0], b[1] - a[1]) || 1);
+  const ux2 = (c[0] - a[0]) / (Math.hypot(c[0] - a[0], c[1] - a[1]) || 1);
+  const uy2 = (c[1] - a[1]) / (Math.hypot(c[0] - a[0], c[1] - a[1]) || 1);
+  let bx = ux1 + ux2, by = uy1 + uy2;
+  const bl = Math.hypot(bx, by) || 1;
+  bx /= bl;
+  by /= bl;
+  const cosA = ux1 * ux2 + uy1 * uy2;
+  const sinHalf = Math.sqrt(Math.max(0, (1 - cosA) / 2));
+  const cos2Half = Math.max(1e-9, (1 + cosA) / 2);
+  const dotAO = bx * (O[0] - a[0]) + by * (O[1] - a[1]);
+  const d = 2 * (dotAO - R * sinHalf) / cos2Half;
+  const K = [a[0] + d * bx, a[1] + d * by];
+  if (which === "center") return K;
+  const kl = Math.hypot(K[0] - O[0], K[1] - O[1]) || 1;
+  return [O[0] + R * (K[0] - O[0]) / kl, O[1] + R * (K[1] - O[1]) / kl];
+}
 function pointAtDistanceCoord(from, through, d) {
   const dx = through[0] - from[0];
   const dy = through[1] - from[1];
@@ -1998,29 +2104,38 @@ var init_arcMidpoint = __esm({
     arcMidpointConstraint = definePointConstraint({
       kind: "arcMidpoint",
       validate: (c) => {
-        if (!c.circle || !c.a || !c.b || !c.notContaining) {
-          throw new Error("point.arcMidpoint: circle, a, b, notContaining b\u1EAFt bu\u1ED9c");
+        if (!c.circle || !c.a || !c.b) {
+          throw new Error("point.arcMidpoint: circle, a, b b\u1EAFt bu\u1ED9c");
+        }
+        if (c.notContaining && c.containing) {
+          throw new Error("point.arcMidpoint: kh\xF4ng th\u1EC3 v\u1EEBa notContaining v\u1EEBa containing");
         }
       },
       describe: (obj, state, c) => {
         const al = state?.objects[c.a]?.label ?? c.a;
         const bl = state?.objects[c.b]?.label ?? c.b;
-        const nl = state?.objects[c.notContaining]?.label ?? c.notContaining;
-        return `${obj.label} = trung \u0111i\u1EC3m cung ${al}${bl} (kh\xF4ng ch\u1EE9a ${nl})`;
+        const ref = c.containing ?? c.notContaining;
+        if (!ref) return `${obj.label} = trung \u0111i\u1EC3m cung ${al}${bl}`;
+        const rl = state?.objects[ref]?.label ?? ref;
+        const rel = c.containing ? "ch\u1EE9a" : "kh\xF4ng ch\u1EE9a";
+        return `${obj.label} = trung \u0111i\u1EC3m cung ${al}${bl} (${rel} ${rl})`;
       },
       render: (obj, ctx, c, opts) => {
         const board = ctx.jxg;
         const circle = ctx.resolveRef(c.circle);
         const A = ctx.resolveRef(c.a);
         const B = ctx.resolveRef(c.b);
-        const N = ctx.resolveRef(c.notContaining);
+        const refName = c.containing ?? c.notContaining;
+        const ref = refName ? ctx.resolveRef(refName) : void 0;
+        const sameSide = !!c.containing;
         const O = circle?.center ?? circle?.midpoint ?? circle;
         const am = () => arcMidpoint(
           [O.X(), O.Y()],
           circle.Radius(),
           [A.X(), A.Y()],
           [B.X(), B.Y()],
-          [N.X(), N.Y()]
+          ref ? [ref.X(), ref.Y()] : void 0,
+          sameSide
         );
         return board.create("point", [() => am()[0], () => am()[1]], opts);
       }
@@ -2070,6 +2185,43 @@ var init_excenter = __esm({
   }
 });
 
+// src/core/scene/kinds/point-constraints/mixtilinearPoint.ts
+var mixtilinearPointConstraint;
+var init_mixtilinearPoint = __esm({
+  "src/core/scene/kinds/point-constraints/mixtilinearPoint.ts"() {
+    init_pointConstructions();
+    init_types3();
+    mixtilinearPointConstraint = definePointConstraint({
+      kind: "mixtilinearPoint",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3 || !c.vertices.every(Boolean)) {
+          throw new Error("point.mixtilinearPoint: vertices ph\u1EA3i l\xE0 tuple 3 id non-empty");
+        }
+        if (c.which !== "center" && c.which !== "touch") {
+          throw new Error("point.mixtilinearPoint: which ph\u1EA3i 'center' | 'touch'");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        return c.which === "center" ? `${obj.label} = t\xE2m \u0111\u01B0\u1EDDng tr\xF2n mixtilinear \u0394${labels}` : `${obj.label} = ti\u1EBFp \u0111i\u1EC3m mixtilinear \u0394${labels} v\u1EDBi (O)`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const d = ctx.resolveRef(c.vertices[2]);
+        const mp = () => mixtilinearPoint(
+          [a.X(), a.Y()],
+          [b.X(), b.Y()],
+          [d.X(), d.Y()],
+          c.which
+        );
+        return board.create("point", [() => mp()[0], () => mp()[1]], opts);
+      }
+    });
+  }
+});
+
 // src/core/scene/kinds/point-constraints/shared.ts
 function buildJxgTransforms(board, ctx, t) {
   switch (t.kind) {
@@ -2121,11 +2273,13 @@ function buildPointOpts(obj) {
     strokeColor: obj.attrs.color ?? "#1e40af",
     fillColor: obj.attrs.color ?? "#1e40af",
     face: obj.attrs.face ?? "o",
-    size: obj.attrs.size ?? 4
+    size: obj.attrs.size ?? 4,
+    ...labelOpts(obj.attrs.labelOffset, [10, 10])
   };
 }
 var init_shared = __esm({
   "src/core/scene/kinds/point-constraints/shared.ts"() {
+    init_label();
   }
 });
 
@@ -2434,6 +2588,7 @@ var init_registry2 = __esm({
     init_centroid();
     init_arcMidpoint();
     init_excenter();
+    init_mixtilinearPoint();
     init_pointAtDistance();
     init_circleIntersection();
     init_circleSecondIntersection();
@@ -2459,6 +2614,7 @@ var init_registry2 = __esm({
       centroidConstraint,
       arcMidpointConstraint,
       excenterConstraint,
+      mixtilinearPointConstraint,
       pointAtDistanceConstraint,
       circleIntersectionConstraint,
       circleSecondIntersectionConstraint,
@@ -2483,6 +2639,7 @@ var init_point = __esm({
     init_d_constraint2();
     init_registry2();
     init_shared();
+    init_label();
     def3 = {
       type: "point",
       schemaVersion: 1,
@@ -2550,7 +2707,8 @@ var init_point = __esm({
                 strokeColor: obj.attrs.color ?? "#1e40af",
                 fillColor: obj.attrs.color ?? "#1e40af",
                 face: obj.attrs.face ?? "o",
-                size: obj.attrs.size ?? 4
+                size: obj.attrs.size ?? 4,
+                ...labelOpts(obj.attrs.labelOffset, [10, 10])
               });
             } catch {
             }
@@ -2570,6 +2728,7 @@ var init_segment = __esm({
   "src/core/scene/kinds/segment.ts"() {
     init_registry();
     init_labelOf();
+    init_label();
     def4 = {
       type: "segment",
       schemaVersion: 1,
@@ -2601,7 +2760,8 @@ var init_segment = __esm({
           strokeWidth: obj.attrs.width ?? 2,
           dash: obj.attrs.dash ?? 0,
           visible: obj.visible,
-          fixed: obj.locked
+          fixed: obj.locked,
+          ...labelOpts(obj.attrs.labelOffset)
         });
       }
     };
@@ -2638,6 +2798,7 @@ var init_line = __esm({
   "src/core/scene/kinds/line.ts"() {
     init_registry();
     init_labelOf();
+    init_label();
     init_pointConstructions();
     def5 = {
       type: "line",
@@ -2680,7 +2841,8 @@ var init_line = __esm({
           strokeWidth: obj.attrs.width ?? 2,
           dash: obj.attrs.dash ?? 0,
           visible: obj.visible,
-          fixed: obj.locked
+          fixed: obj.locked,
+          ...labelOpts(obj.attrs.labelOffset)
         };
         const c = obj.attrs.construction;
         if (!c) {
@@ -2936,6 +3098,7 @@ var init_circle = __esm({
   "src/core/scene/kinds/circle.ts"() {
     init_registry();
     init_labelOf();
+    init_label();
     init_pointConstructions();
     def8 = {
       type: "circle",
@@ -2997,15 +3160,17 @@ var init_circle = __esm({
         const board = ctx.jxg;
         const isCenterLabel = (l) => /^[A-Z]['′]?\d*$/u.test(l);
         const isCenter = isCenterLabel(obj.label);
+        const isRenamedCircle = /_c$/.test(obj.label);
         const baseOpts = {
           name: obj.label,
-          withLabel: isCenter ? obj.attrs.showLabel ?? false : true,
+          withLabel: isCenter ? obj.attrs.showLabel ?? false : isRenamedCircle ? false : true,
           strokeColor: obj.attrs.color ?? "#0f172a",
           strokeWidth: obj.attrs.width ?? 2,
           dash: obj.attrs.dash ?? 0,
           fillColor: "none",
           visible: obj.visible,
-          fixed: obj.locked
+          fixed: obj.locked,
+          ...labelOpts(obj.attrs.labelOffset)
         };
         const c = asConstruction(obj.attrs);
         if (c?.kind === "circumscribed") {
@@ -3490,8 +3655,11 @@ var init_intersection = __esm({
         const opts = {
           name: obj.label,
           withLabel: true,
-          strokeColor: obj.attrs.color ?? "#dc2626",
-          fillColor: obj.attrs.color ?? "#dc2626",
+          // Cùng màu xanh với mọi điểm khác (buildPointOpts dùng '#1e40af').
+          // Trước đây điểm giao tô đỏ '#dc2626' → tách biệt thị giác nhưng gây
+          // khó hiểu ("vì sao điểm này khác màu?"). Giữ chung một màu.
+          strokeColor: obj.attrs.color ?? "#1e40af",
+          fillColor: obj.attrs.color ?? "#1e40af",
           visible: obj.visible,
           fixed: obj.locked
         };
@@ -3500,6 +3668,38 @@ var init_intersection = __esm({
         }
         const branch = obj.attrs.branch ?? 0;
         return board.create("intersection", [a, b, branch], opts);
+      },
+      /**
+       * Cập nhật TẠI CHỖ các thuộc tính "trang trí" (tên/màu/ẩn-hiện/khoá) qua
+       * setAttribute — giữ nguyên JxgObj identity nên các object phụ thuộc điểm
+       * giao (đường thẳng qua nó, …) KHÔNG bị stale parent ref. Mô phỏng update
+       * hook của point.ts.
+       *
+       * Nếu định nghĩa hình học đổi (kind/ref1/ref2/branch) thì throw → renderer
+       * fallback remove + create để JSXGraph dựng lại phép giao đúng.
+       */
+      update: (obj, prev, ctx, existing) => {
+        const a = obj.attrs;
+        const p = prev.attrs;
+        const branchA = a.branch;
+        const branchP = p.branch;
+        if (a.kind !== p.kind || a.ref1 !== p.ref1 || a.ref2 !== p.ref2 || branchA !== branchP) {
+          throw new Error("intersection: \u0111\u1ECBnh ngh\u0129a h\xECnh h\u1ECDc \u0111\u1ED5i \u2014 recreate");
+        }
+        const el = existing;
+        if (typeof el.setAttribute === "function") {
+          try {
+            el.setAttribute({
+              name: obj.label,
+              withLabel: true,
+              strokeColor: a.color ?? "#1e40af",
+              fillColor: a.color ?? "#1e40af",
+              visible: obj.visible,
+              fixed: obj.locked
+            });
+          } catch {
+          }
+        }
       }
     };
     registerKind(def12);
@@ -6258,11 +6458,17 @@ async function insertStampImage(api, opts) {
   const elements = api.getSceneElements();
   const editingId = opts.editingElementId ?? null;
   if (editingId) {
+    const old = elements.find((e) => e.id === editingId) ;
+    const oldLongest = old ? Math.max(old.width ?? 0, old.height ?? 0) : 0;
+    const newLongest = Math.max(width, height);
+    const scale = oldLongest > 0 && newLongest > 0 ? oldLongest / newLongest : 1;
+    const w = width * scale;
+    const h = height * scale;
     const updated = elements.map(
-      (e) => e.id === editingId ? { ...e, fileId, customData, width, height } : e
+      (e) => e.id === editingId ? { ...e, fileId, customData, width: w, height: h } : e
     );
     api.updateScene({ elements: updated, appState: clearAppStateAfterInsert() });
-    return { fileId, width, height, elementId: editingId };
+    return { fileId, width: w, height: h, elementId: editingId };
   }
   const newElement = buildStampImageElement(
     api,
@@ -6736,7 +6942,8 @@ var init_host = __esm({
                   version: 2,
                   jsonState
                 }),
-                editingElementId: editingElement?.id ?? null
+                editingElementId: editingElement?.id ?? null,
+                preserveExistingSize: true
               });
             } catch (err) {
               console.error("Graph2D insert failed:", err);