microboard-temp 0.13.49 → 0.13.51

package/dist/cjs/browser.js

@@ -3957,10 +3957,11 @@ var init_Settings = __esm(() => {
     CONNECTOR_ITEM_OFFSET: 20,
     FG_SPRING_K: 0.2,
     FG_TARGET_GAP: 50,
-    FG_REPULSION: 100,
+    FG_REPULSION: 0.06,
     FG_MIN_DIST_SQ: 100,
     FG_DAMPING: 0.6,
     FG_SLEEP_THRESHOLD: 0.5,
+    FG_TICK_MS: 16,
     GRAVITY_G: 80,
     GRAVITY_G_CENTER: 120,
     GRAVITY_DAMPING: 0.96,
@@ -60683,7 +60684,9 @@ class ForceGraphEngine {
   lastSyncedPositions = new Map;
   activeComponents = new Map;
   isPhysicsEmit = false;
-  TICK_MS = 33;
+  get TICK_MS() {
+    return conf.FG_TICK_MS;
+  }
   SYNC_MS = 300;
   MIN_MOVE_PX = 0.05;
   constructor(board) {
@@ -60709,18 +60712,18 @@ class ForceGraphEngine {
     if (this.isNodeInActiveGraph(startNodeId))
       return;
     const nodeIds = this.bfsComponent(startNodeId);
-    const targetGap = this.calibrateTargetGap(nodeIds);
-    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
-    for (const id of nodeIds) {
-      if (!this.velocities.has(id)) {
-        this.velocities.set(id, { vx: 0, vy: 0 });
-      }
-      const item = this.board.items.getById(id);
-      if (item && !this.lastSyncedPositions.has(id)) {
-        const pos = item.transformation.getTranslation();
-        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+    for (const [, comp] of this.activeComponents) {
+      for (const id of nodeIds) {
+        if (comp.nodeIds.has(id)) {
+          this.initNodes(nodeIds, comp.nodeIds);
+          this.ensureRunning();
+          return;
+        }
       }
     }
+    const targetGap = this.calibrateTargetGap(nodeIds);
+    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
+    this.initNodes(nodeIds);
     this.ensureRunning();
   }
   disableForGraph(nodeId) {
@@ -60775,6 +60778,32 @@ class ForceGraphEngine {
     this.lastSyncedPositions.clear();
     this.activeComponents.clear();
   }
+  initNodes(nodeIds, target) {
+    for (const id of nodeIds) {
+      target?.add(id);
+      if (!this.velocities.has(id)) {
+        this.velocities.set(id, { vx: 0, vy: 0 });
+      }
+      const item = this.board.items.getById(id);
+      if (item && !this.lastSyncedPositions.has(id)) {
+        const pos = item.transformation.getTranslation();
+        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+      }
+    }
+  }
+  refreshComponentTopology() {
+    for (const [compId, comp] of this.activeComponents) {
+      const current = this.bfsComponent(compId);
+      const newIds = new Set;
+      for (const id of current) {
+        if (!comp.nodeIds.has(id))
+          newIds.add(id);
+      }
+      if (newIds.size > 0) {
+        this.initNodes(newIds, comp.nodeIds);
+      }
+    }
+  }
   ensureRunning() {
     if (this.tickTimer === null) {
       this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
@@ -60839,6 +60868,7 @@ class ForceGraphEngine {
     return this.board.items.listAll().filter((item) => item.itemType === "Connector");
   }
   tick() {
+    this.refreshComponentTopology();
     const activeIds = this.getActiveNodeIds();
     const draggedIds = this.board.getDraggedItemIds();
     const allNodes = this.getNodes();
@@ -60878,10 +60908,10 @@ class ForceGraphEngine {
       const dx = s2.cx - s1.cx;
       const dy = s2.cy - s1.cy;
       const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-      const compId = this.findComponentId(s1.id);
-      const targetGap = compId ? this.activeComponents.get(compId)?.targetGap ?? conf.FG_TARGET_GAP : conf.FG_TARGET_GAP;
-      const targetDist = (Math.max(s1.w, s1.h) + Math.max(s2.w, s2.h)) * 0.5 + targetGap;
-      const force = (dist - targetDist) * conf.FG_SPRING_K;
+      const maxDimA = Math.max(s1.w, s1.h);
+      const maxDimB = Math.max(s2.w, s2.h);
+      const targetDist = (maxDimA + maxDimB) * 0.5 + Math.max(maxDimA, maxDimB);
+      const force = (dist - targetDist) / targetDist * conf.FG_SPRING_K;
       const fx = dx / dist * force;
       const fy = dy / dist * force;
       ax.set(s1.id, (ax.get(s1.id) ?? 0) + fx);
@@ -60897,8 +60927,13 @@ class ForceGraphEngine {
           continue;
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
-        const distSq = Math.max(dx * dx + dy * dy, conf.FG_MIN_DIST_SQ);
-        const force = conf.FG_REPULSION / distSq;
+        const refDimA = Math.max(s1.w, s1.h);
+        const refDimB = Math.max(s2.w, s2.h);
+        const refDist = (refDimA + refDimB) * 0.5 + Math.max(refDimA, refDimB);
+        const refDistSq = refDist * refDist;
+        const minDistSq = conf.FG_MIN_DIST_SQ * refDistSq / 1e4;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDistSq / distSq;
         ax.set(s1.id, (ax.get(s1.id) ?? 0) - dx * force);
         ay.set(s1.id, (ay.get(s1.id) ?? 0) - dy * force);
         ax.set(s2.id, (ax.get(s2.id) ?? 0) + dx * force);

package/dist/cjs/index.js

@@ -3957,10 +3957,11 @@ var init_Settings = __esm(() => {
     CONNECTOR_ITEM_OFFSET: 20,
     FG_SPRING_K: 0.2,
     FG_TARGET_GAP: 50,
-    FG_REPULSION: 100,
+    FG_REPULSION: 0.06,
     FG_MIN_DIST_SQ: 100,
     FG_DAMPING: 0.6,
     FG_SLEEP_THRESHOLD: 0.5,
+    FG_TICK_MS: 16,
     GRAVITY_G: 80,
     GRAVITY_G_CENTER: 120,
     GRAVITY_DAMPING: 0.96,
@@ -60683,7 +60684,9 @@ class ForceGraphEngine {
   lastSyncedPositions = new Map;
   activeComponents = new Map;
   isPhysicsEmit = false;
-  TICK_MS = 33;
+  get TICK_MS() {
+    return conf.FG_TICK_MS;
+  }
   SYNC_MS = 300;
   MIN_MOVE_PX = 0.05;
   constructor(board) {
@@ -60709,18 +60712,18 @@ class ForceGraphEngine {
     if (this.isNodeInActiveGraph(startNodeId))
       return;
     const nodeIds = this.bfsComponent(startNodeId);
-    const targetGap = this.calibrateTargetGap(nodeIds);
-    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
-    for (const id of nodeIds) {
-      if (!this.velocities.has(id)) {
-        this.velocities.set(id, { vx: 0, vy: 0 });
-      }
-      const item = this.board.items.getById(id);
-      if (item && !this.lastSyncedPositions.has(id)) {
-        const pos = item.transformation.getTranslation();
-        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+    for (const [, comp] of this.activeComponents) {
+      for (const id of nodeIds) {
+        if (comp.nodeIds.has(id)) {
+          this.initNodes(nodeIds, comp.nodeIds);
+          this.ensureRunning();
+          return;
+        }
       }
     }
+    const targetGap = this.calibrateTargetGap(nodeIds);
+    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
+    this.initNodes(nodeIds);
     this.ensureRunning();
   }
   disableForGraph(nodeId) {
@@ -60775,6 +60778,32 @@ class ForceGraphEngine {
     this.lastSyncedPositions.clear();
     this.activeComponents.clear();
   }
+  initNodes(nodeIds, target) {
+    for (const id of nodeIds) {
+      target?.add(id);
+      if (!this.velocities.has(id)) {
+        this.velocities.set(id, { vx: 0, vy: 0 });
+      }
+      const item = this.board.items.getById(id);
+      if (item && !this.lastSyncedPositions.has(id)) {
+        const pos = item.transformation.getTranslation();
+        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+      }
+    }
+  }
+  refreshComponentTopology() {
+    for (const [compId, comp] of this.activeComponents) {
+      const current = this.bfsComponent(compId);
+      const newIds = new Set;
+      for (const id of current) {
+        if (!comp.nodeIds.has(id))
+          newIds.add(id);
+      }
+      if (newIds.size > 0) {
+        this.initNodes(newIds, comp.nodeIds);
+      }
+    }
+  }
   ensureRunning() {
     if (this.tickTimer === null) {
       this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
@@ -60839,6 +60868,7 @@ class ForceGraphEngine {
     return this.board.items.listAll().filter((item) => item.itemType === "Connector");
   }
   tick() {
+    this.refreshComponentTopology();
     const activeIds = this.getActiveNodeIds();
     const draggedIds = this.board.getDraggedItemIds();
     const allNodes = this.getNodes();
@@ -60878,10 +60908,10 @@ class ForceGraphEngine {
       const dx = s2.cx - s1.cx;
       const dy = s2.cy - s1.cy;
       const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-      const compId = this.findComponentId(s1.id);
-      const targetGap = compId ? this.activeComponents.get(compId)?.targetGap ?? conf.FG_TARGET_GAP : conf.FG_TARGET_GAP;
-      const targetDist = (Math.max(s1.w, s1.h) + Math.max(s2.w, s2.h)) * 0.5 + targetGap;
-      const force = (dist - targetDist) * conf.FG_SPRING_K;
+      const maxDimA = Math.max(s1.w, s1.h);
+      const maxDimB = Math.max(s2.w, s2.h);
+      const targetDist = (maxDimA + maxDimB) * 0.5 + Math.max(maxDimA, maxDimB);
+      const force = (dist - targetDist) / targetDist * conf.FG_SPRING_K;
       const fx = dx / dist * force;
       const fy = dy / dist * force;
       ax.set(s1.id, (ax.get(s1.id) ?? 0) + fx);
@@ -60897,8 +60927,13 @@ class ForceGraphEngine {
           continue;
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
-        const distSq = Math.max(dx * dx + dy * dy, conf.FG_MIN_DIST_SQ);
-        const force = conf.FG_REPULSION / distSq;
+        const refDimA = Math.max(s1.w, s1.h);
+        const refDimB = Math.max(s2.w, s2.h);
+        const refDist = (refDimA + refDimB) * 0.5 + Math.max(refDimA, refDimB);
+        const refDistSq = refDist * refDist;
+        const minDistSq = conf.FG_MIN_DIST_SQ * refDistSq / 1e4;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDistSq / distSq;
         ax.set(s1.id, (ax.get(s1.id) ?? 0) - dx * force);
         ay.set(s1.id, (ay.get(s1.id) ?? 0) - dy * force);
         ax.set(s2.id, (ax.get(s2.id) ?? 0) + dx * force);

package/dist/cjs/node.js

@@ -3957,10 +3957,11 @@ var init_Settings = __esm(() => {
     CONNECTOR_ITEM_OFFSET: 20,
     FG_SPRING_K: 0.2,
     FG_TARGET_GAP: 50,
-    FG_REPULSION: 100,
+    FG_REPULSION: 0.06,
     FG_MIN_DIST_SQ: 100,
     FG_DAMPING: 0.6,
     FG_SLEEP_THRESHOLD: 0.5,
+    FG_TICK_MS: 16,
     GRAVITY_G: 80,
     GRAVITY_G_CENTER: 120,
     GRAVITY_DAMPING: 0.96,
@@ -63158,7 +63159,9 @@ class ForceGraphEngine {
   lastSyncedPositions = new Map;
   activeComponents = new Map;
   isPhysicsEmit = false;
-  TICK_MS = 33;
+  get TICK_MS() {
+    return conf.FG_TICK_MS;
+  }
   SYNC_MS = 300;
   MIN_MOVE_PX = 0.05;
   constructor(board) {
@@ -63184,18 +63187,18 @@ class ForceGraphEngine {
     if (this.isNodeInActiveGraph(startNodeId))
       return;
     const nodeIds = this.bfsComponent(startNodeId);
-    const targetGap = this.calibrateTargetGap(nodeIds);
-    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
-    for (const id of nodeIds) {
-      if (!this.velocities.has(id)) {
-        this.velocities.set(id, { vx: 0, vy: 0 });
-      }
-      const item = this.board.items.getById(id);
-      if (item && !this.lastSyncedPositions.has(id)) {
-        const pos = item.transformation.getTranslation();
-        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+    for (const [, comp] of this.activeComponents) {
+      for (const id of nodeIds) {
+        if (comp.nodeIds.has(id)) {
+          this.initNodes(nodeIds, comp.nodeIds);
+          this.ensureRunning();
+          return;
+        }
       }
     }
+    const targetGap = this.calibrateTargetGap(nodeIds);
+    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
+    this.initNodes(nodeIds);
     this.ensureRunning();
   }
   disableForGraph(nodeId) {
@@ -63250,6 +63253,32 @@ class ForceGraphEngine {
     this.lastSyncedPositions.clear();
     this.activeComponents.clear();
   }
+  initNodes(nodeIds, target) {
+    for (const id of nodeIds) {
+      target?.add(id);
+      if (!this.velocities.has(id)) {
+        this.velocities.set(id, { vx: 0, vy: 0 });
+      }
+      const item = this.board.items.getById(id);
+      if (item && !this.lastSyncedPositions.has(id)) {
+        const pos = item.transformation.getTranslation();
+        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+      }
+    }
+  }
+  refreshComponentTopology() {
+    for (const [compId, comp] of this.activeComponents) {
+      const current = this.bfsComponent(compId);
+      const newIds = new Set;
+      for (const id of current) {
+        if (!comp.nodeIds.has(id))
+          newIds.add(id);
+      }
+      if (newIds.size > 0) {
+        this.initNodes(newIds, comp.nodeIds);
+      }
+    }
+  }
   ensureRunning() {
     if (this.tickTimer === null) {
       this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
@@ -63314,6 +63343,7 @@ class ForceGraphEngine {
     return this.board.items.listAll().filter((item) => item.itemType === "Connector");
   }
   tick() {
+    this.refreshComponentTopology();
     const activeIds = this.getActiveNodeIds();
     const draggedIds = this.board.getDraggedItemIds();
     const allNodes = this.getNodes();
@@ -63353,10 +63383,10 @@ class ForceGraphEngine {
       const dx = s2.cx - s1.cx;
       const dy = s2.cy - s1.cy;
       const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-      const compId = this.findComponentId(s1.id);
-      const targetGap = compId ? this.activeComponents.get(compId)?.targetGap ?? conf.FG_TARGET_GAP : conf.FG_TARGET_GAP;
-      const targetDist = (Math.max(s1.w, s1.h) + Math.max(s2.w, s2.h)) * 0.5 + targetGap;
-      const force = (dist - targetDist) * conf.FG_SPRING_K;
+      const maxDimA = Math.max(s1.w, s1.h);
+      const maxDimB = Math.max(s2.w, s2.h);
+      const targetDist = (maxDimA + maxDimB) * 0.5 + Math.max(maxDimA, maxDimB);
+      const force = (dist - targetDist) / targetDist * conf.FG_SPRING_K;
       const fx = dx / dist * force;
       const fy = dy / dist * force;
       ax.set(s1.id, (ax.get(s1.id) ?? 0) + fx);
@@ -63372,8 +63402,13 @@ class ForceGraphEngine {
           continue;
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
-        const distSq = Math.max(dx * dx + dy * dy, conf.FG_MIN_DIST_SQ);
-        const force = conf.FG_REPULSION / distSq;
+        const refDimA = Math.max(s1.w, s1.h);
+        const refDimB = Math.max(s2.w, s2.h);
+        const refDist = (refDimA + refDimB) * 0.5 + Math.max(refDimA, refDimB);
+        const refDistSq = refDist * refDist;
+        const minDistSq = conf.FG_MIN_DIST_SQ * refDistSq / 1e4;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDistSq / distSq;
         ax.set(s1.id, (ax.get(s1.id) ?? 0) - dx * force);
         ay.set(s1.id, (ay.get(s1.id) ?? 0) - dy * force);
         ax.set(s2.id, (ax.get(s2.id) ?? 0) + dx * force);

package/dist/esm/browser.js

@@ -3964,10 +3964,11 @@ var init_Settings = __esm(() => {
     CONNECTOR_ITEM_OFFSET: 20,
     FG_SPRING_K: 0.2,
     FG_TARGET_GAP: 50,
-    FG_REPULSION: 100,
+    FG_REPULSION: 0.06,
     FG_MIN_DIST_SQ: 100,
     FG_DAMPING: 0.6,
     FG_SLEEP_THRESHOLD: 0.5,
+    FG_TICK_MS: 16,
     GRAVITY_G: 80,
     GRAVITY_G_CENTER: 120,
     GRAVITY_DAMPING: 0.96,
@@ -60426,7 +60427,9 @@ class ForceGraphEngine {
   lastSyncedPositions = new Map;
   activeComponents = new Map;
   isPhysicsEmit = false;
-  TICK_MS = 33;
+  get TICK_MS() {
+    return conf.FG_TICK_MS;
+  }
   SYNC_MS = 300;
   MIN_MOVE_PX = 0.05;
   constructor(board) {
@@ -60452,18 +60455,18 @@ class ForceGraphEngine {
     if (this.isNodeInActiveGraph(startNodeId))
       return;
     const nodeIds = this.bfsComponent(startNodeId);
-    const targetGap = this.calibrateTargetGap(nodeIds);
-    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
-    for (const id of nodeIds) {
-      if (!this.velocities.has(id)) {
-        this.velocities.set(id, { vx: 0, vy: 0 });
-      }
-      const item = this.board.items.getById(id);
-      if (item && !this.lastSyncedPositions.has(id)) {
-        const pos = item.transformation.getTranslation();
-        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+    for (const [, comp] of this.activeComponents) {
+      for (const id of nodeIds) {
+        if (comp.nodeIds.has(id)) {
+          this.initNodes(nodeIds, comp.nodeIds);
+          this.ensureRunning();
+          return;
+        }
       }
     }
+    const targetGap = this.calibrateTargetGap(nodeIds);
+    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
+    this.initNodes(nodeIds);
     this.ensureRunning();
   }
   disableForGraph(nodeId) {
@@ -60518,6 +60521,32 @@ class ForceGraphEngine {
     this.lastSyncedPositions.clear();
     this.activeComponents.clear();
   }
+  initNodes(nodeIds, target) {
+    for (const id of nodeIds) {
+      target?.add(id);
+      if (!this.velocities.has(id)) {
+        this.velocities.set(id, { vx: 0, vy: 0 });
+      }
+      const item = this.board.items.getById(id);
+      if (item && !this.lastSyncedPositions.has(id)) {
+        const pos = item.transformation.getTranslation();
+        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+      }
+    }
+  }
+  refreshComponentTopology() {
+    for (const [compId, comp] of this.activeComponents) {
+      const current = this.bfsComponent(compId);
+      const newIds = new Set;
+      for (const id of current) {
+        if (!comp.nodeIds.has(id))
+          newIds.add(id);
+      }
+      if (newIds.size > 0) {
+        this.initNodes(newIds, comp.nodeIds);
+      }
+    }
+  }
   ensureRunning() {
     if (this.tickTimer === null) {
       this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
@@ -60582,6 +60611,7 @@ class ForceGraphEngine {
     return this.board.items.listAll().filter((item) => item.itemType === "Connector");
   }
   tick() {
+    this.refreshComponentTopology();
     const activeIds = this.getActiveNodeIds();
     const draggedIds = this.board.getDraggedItemIds();
     const allNodes = this.getNodes();
@@ -60621,10 +60651,10 @@ class ForceGraphEngine {
       const dx = s2.cx - s1.cx;
       const dy = s2.cy - s1.cy;
       const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-      const compId = this.findComponentId(s1.id);
-      const targetGap = compId ? this.activeComponents.get(compId)?.targetGap ?? conf.FG_TARGET_GAP : conf.FG_TARGET_GAP;
-      const targetDist = (Math.max(s1.w, s1.h) + Math.max(s2.w, s2.h)) * 0.5 + targetGap;
-      const force = (dist - targetDist) * conf.FG_SPRING_K;
+      const maxDimA = Math.max(s1.w, s1.h);
+      const maxDimB = Math.max(s2.w, s2.h);
+      const targetDist = (maxDimA + maxDimB) * 0.5 + Math.max(maxDimA, maxDimB);
+      const force = (dist - targetDist) / targetDist * conf.FG_SPRING_K;
       const fx = dx / dist * force;
       const fy = dy / dist * force;
       ax.set(s1.id, (ax.get(s1.id) ?? 0) + fx);
@@ -60640,8 +60670,13 @@ class ForceGraphEngine {
           continue;
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
-        const distSq = Math.max(dx * dx + dy * dy, conf.FG_MIN_DIST_SQ);
-        const force = conf.FG_REPULSION / distSq;
+        const refDimA = Math.max(s1.w, s1.h);
+        const refDimB = Math.max(s2.w, s2.h);
+        const refDist = (refDimA + refDimB) * 0.5 + Math.max(refDimA, refDimB);
+        const refDistSq = refDist * refDist;
+        const minDistSq = conf.FG_MIN_DIST_SQ * refDistSq / 1e4;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDistSq / distSq;
         ax.set(s1.id, (ax.get(s1.id) ?? 0) - dx * force);
         ay.set(s1.id, (ay.get(s1.id) ?? 0) - dy * force);
         ax.set(s2.id, (ax.get(s2.id) ?? 0) + dx * force);

package/dist/esm/index.js

@@ -3957,10 +3957,11 @@ var init_Settings = __esm(() => {
     CONNECTOR_ITEM_OFFSET: 20,
     FG_SPRING_K: 0.2,
     FG_TARGET_GAP: 50,
-    FG_REPULSION: 100,
+    FG_REPULSION: 0.06,
     FG_MIN_DIST_SQ: 100,
     FG_DAMPING: 0.6,
     FG_SLEEP_THRESHOLD: 0.5,
+    FG_TICK_MS: 16,
     GRAVITY_G: 80,
     GRAVITY_G_CENTER: 120,
     GRAVITY_DAMPING: 0.96,
@@ -60419,7 +60420,9 @@ class ForceGraphEngine {
   lastSyncedPositions = new Map;
   activeComponents = new Map;
   isPhysicsEmit = false;
-  TICK_MS = 33;
+  get TICK_MS() {
+    return conf.FG_TICK_MS;
+  }
   SYNC_MS = 300;
   MIN_MOVE_PX = 0.05;
   constructor(board) {
@@ -60445,18 +60448,18 @@ class ForceGraphEngine {
     if (this.isNodeInActiveGraph(startNodeId))
       return;
     const nodeIds = this.bfsComponent(startNodeId);
-    const targetGap = this.calibrateTargetGap(nodeIds);
-    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
-    for (const id of nodeIds) {
-      if (!this.velocities.has(id)) {
-        this.velocities.set(id, { vx: 0, vy: 0 });
-      }
-      const item = this.board.items.getById(id);
-      if (item && !this.lastSyncedPositions.has(id)) {
-        const pos = item.transformation.getTranslation();
-        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+    for (const [, comp] of this.activeComponents) {
+      for (const id of nodeIds) {
+        if (comp.nodeIds.has(id)) {
+          this.initNodes(nodeIds, comp.nodeIds);
+          this.ensureRunning();
+          return;
+        }
       }
     }
+    const targetGap = this.calibrateTargetGap(nodeIds);
+    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
+    this.initNodes(nodeIds);
     this.ensureRunning();
   }
   disableForGraph(nodeId) {
@@ -60511,6 +60514,32 @@ class ForceGraphEngine {
     this.lastSyncedPositions.clear();
     this.activeComponents.clear();
   }
+  initNodes(nodeIds, target) {
+    for (const id of nodeIds) {
+      target?.add(id);
+      if (!this.velocities.has(id)) {
+        this.velocities.set(id, { vx: 0, vy: 0 });
+      }
+      const item = this.board.items.getById(id);
+      if (item && !this.lastSyncedPositions.has(id)) {
+        const pos = item.transformation.getTranslation();
+        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+      }
+    }
+  }
+  refreshComponentTopology() {
+    for (const [compId, comp] of this.activeComponents) {
+      const current = this.bfsComponent(compId);
+      const newIds = new Set;
+      for (const id of current) {
+        if (!comp.nodeIds.has(id))
+          newIds.add(id);
+      }
+      if (newIds.size > 0) {
+        this.initNodes(newIds, comp.nodeIds);
+      }
+    }
+  }
   ensureRunning() {
     if (this.tickTimer === null) {
       this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
@@ -60575,6 +60604,7 @@ class ForceGraphEngine {
     return this.board.items.listAll().filter((item) => item.itemType === "Connector");
   }
   tick() {
+    this.refreshComponentTopology();
     const activeIds = this.getActiveNodeIds();
     const draggedIds = this.board.getDraggedItemIds();
     const allNodes = this.getNodes();
@@ -60614,10 +60644,10 @@ class ForceGraphEngine {
       const dx = s2.cx - s1.cx;
       const dy = s2.cy - s1.cy;
       const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-      const compId = this.findComponentId(s1.id);
-      const targetGap = compId ? this.activeComponents.get(compId)?.targetGap ?? conf.FG_TARGET_GAP : conf.FG_TARGET_GAP;
-      const targetDist = (Math.max(s1.w, s1.h) + Math.max(s2.w, s2.h)) * 0.5 + targetGap;
-      const force = (dist - targetDist) * conf.FG_SPRING_K;
+      const maxDimA = Math.max(s1.w, s1.h);
+      const maxDimB = Math.max(s2.w, s2.h);
+      const targetDist = (maxDimA + maxDimB) * 0.5 + Math.max(maxDimA, maxDimB);
+      const force = (dist - targetDist) / targetDist * conf.FG_SPRING_K;
       const fx = dx / dist * force;
       const fy = dy / dist * force;
       ax.set(s1.id, (ax.get(s1.id) ?? 0) + fx);
@@ -60633,8 +60663,13 @@ class ForceGraphEngine {
           continue;
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
-        const distSq = Math.max(dx * dx + dy * dy, conf.FG_MIN_DIST_SQ);
-        const force = conf.FG_REPULSION / distSq;
+        const refDimA = Math.max(s1.w, s1.h);
+        const refDimB = Math.max(s2.w, s2.h);
+        const refDist = (refDimA + refDimB) * 0.5 + Math.max(refDimA, refDimB);
+        const refDistSq = refDist * refDist;
+        const minDistSq = conf.FG_MIN_DIST_SQ * refDistSq / 1e4;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDistSq / distSq;
         ax.set(s1.id, (ax.get(s1.id) ?? 0) - dx * force);
         ay.set(s1.id, (ay.get(s1.id) ?? 0) - dy * force);
         ax.set(s2.id, (ax.get(s2.id) ?? 0) + dx * force);

package/dist/esm/node.js

@@ -3959,10 +3959,11 @@ var init_Settings = __esm(() => {
     CONNECTOR_ITEM_OFFSET: 20,
     FG_SPRING_K: 0.2,
     FG_TARGET_GAP: 50,
-    FG_REPULSION: 100,
+    FG_REPULSION: 0.06,
     FG_MIN_DIST_SQ: 100,
     FG_DAMPING: 0.6,
     FG_SLEEP_THRESHOLD: 0.5,
+    FG_TICK_MS: 16,
     GRAVITY_G: 80,
     GRAVITY_G_CENTER: 120,
     GRAVITY_DAMPING: 0.96,
@@ -62883,7 +62884,9 @@ class ForceGraphEngine {
   lastSyncedPositions = new Map;
   activeComponents = new Map;
   isPhysicsEmit = false;
-  TICK_MS = 33;
+  get TICK_MS() {
+    return conf.FG_TICK_MS;
+  }
   SYNC_MS = 300;
   MIN_MOVE_PX = 0.05;
   constructor(board) {
@@ -62909,18 +62912,18 @@ class ForceGraphEngine {
     if (this.isNodeInActiveGraph(startNodeId))
       return;
     const nodeIds = this.bfsComponent(startNodeId);
-    const targetGap = this.calibrateTargetGap(nodeIds);
-    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
-    for (const id of nodeIds) {
-      if (!this.velocities.has(id)) {
-        this.velocities.set(id, { vx: 0, vy: 0 });
-      }
-      const item = this.board.items.getById(id);
-      if (item && !this.lastSyncedPositions.has(id)) {
-        const pos = item.transformation.getTranslation();
-        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+    for (const [, comp] of this.activeComponents) {
+      for (const id of nodeIds) {
+        if (comp.nodeIds.has(id)) {
+          this.initNodes(nodeIds, comp.nodeIds);
+          this.ensureRunning();
+          return;
+        }
       }
     }
+    const targetGap = this.calibrateTargetGap(nodeIds);
+    this.activeComponents.set(startNodeId, { nodeIds, targetGap });
+    this.initNodes(nodeIds);
     this.ensureRunning();
   }
   disableForGraph(nodeId) {
@@ -62975,6 +62978,32 @@ class ForceGraphEngine {
     this.lastSyncedPositions.clear();
     this.activeComponents.clear();
   }
+  initNodes(nodeIds, target) {
+    for (const id of nodeIds) {
+      target?.add(id);
+      if (!this.velocities.has(id)) {
+        this.velocities.set(id, { vx: 0, vy: 0 });
+      }
+      const item = this.board.items.getById(id);
+      if (item && !this.lastSyncedPositions.has(id)) {
+        const pos = item.transformation.getTranslation();
+        this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+      }
+    }
+  }
+  refreshComponentTopology() {
+    for (const [compId, comp] of this.activeComponents) {
+      const current = this.bfsComponent(compId);
+      const newIds = new Set;
+      for (const id of current) {
+        if (!comp.nodeIds.has(id))
+          newIds.add(id);
+      }
+      if (newIds.size > 0) {
+        this.initNodes(newIds, comp.nodeIds);
+      }
+    }
+  }
   ensureRunning() {
     if (this.tickTimer === null) {
       this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
@@ -63039,6 +63068,7 @@ class ForceGraphEngine {
     return this.board.items.listAll().filter((item) => item.itemType === "Connector");
   }
   tick() {
+    this.refreshComponentTopology();
     const activeIds = this.getActiveNodeIds();
     const draggedIds = this.board.getDraggedItemIds();
     const allNodes = this.getNodes();
@@ -63078,10 +63108,10 @@ class ForceGraphEngine {
       const dx = s2.cx - s1.cx;
       const dy = s2.cy - s1.cy;
       const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-      const compId = this.findComponentId(s1.id);
-      const targetGap = compId ? this.activeComponents.get(compId)?.targetGap ?? conf.FG_TARGET_GAP : conf.FG_TARGET_GAP;
-      const targetDist = (Math.max(s1.w, s1.h) + Math.max(s2.w, s2.h)) * 0.5 + targetGap;
-      const force = (dist - targetDist) * conf.FG_SPRING_K;
+      const maxDimA = Math.max(s1.w, s1.h);
+      const maxDimB = Math.max(s2.w, s2.h);
+      const targetDist = (maxDimA + maxDimB) * 0.5 + Math.max(maxDimA, maxDimB);
+      const force = (dist - targetDist) / targetDist * conf.FG_SPRING_K;
       const fx = dx / dist * force;
       const fy = dy / dist * force;
       ax.set(s1.id, (ax.get(s1.id) ?? 0) + fx);
@@ -63097,8 +63127,13 @@ class ForceGraphEngine {
           continue;
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
-        const distSq = Math.max(dx * dx + dy * dy, conf.FG_MIN_DIST_SQ);
-        const force = conf.FG_REPULSION / distSq;
+        const refDimA = Math.max(s1.w, s1.h);
+        const refDimB = Math.max(s2.w, s2.h);
+        const refDist = (refDimA + refDimB) * 0.5 + Math.max(refDimA, refDimB);
+        const refDistSq = refDist * refDist;
+        const minDistSq = conf.FG_MIN_DIST_SQ * refDistSq / 1e4;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDistSq / distSq;
         ax.set(s1.id, (ax.get(s1.id) ?? 0) - dx * force);
         ay.set(s1.id, (ay.get(s1.id) ?? 0) - dy * force);
         ax.set(s2.id, (ax.get(s2.id) ?? 0) + dx * force);

package/dist/types/ForceGraph/ForceGraphEngine.d.ts

@@ -11,7 +11,7 @@ export declare class ForceGraphEngine {
     /** Set to true while we are emitting a physics sync operation, so the
      *  board-event subscription below doesn't double-update lastSyncedPositions. */
     private isPhysicsEmit;
-    private readonly TICK_MS;
+    private get TICK_MS();
     private readonly SYNC_MS;
     private readonly MIN_MOVE_PX;
     constructor(board: Board);
@@ -46,6 +46,11 @@ export declare class ForceGraphEngine {
     wake(): void;
     /** Full stop — called when Board destroys the engine. */
     stop(): void;
+    /** Initialize velocities and sync baseline for a set of node ids.
+     *  If `target` is provided, new ids are also added into that Set. */
+    private initNodes;
+    /** Re-BFS each active component to pick up nodes/connectors added after enableForGraph. */
+    private refreshComponentTopology;
     private ensureRunning;
     private stopTimers;
     /** Find the componentId (Map key) for the component containing `nodeId`. */

package/dist/types/Settings.d.ts

@@ -259,6 +259,7 @@ export declare const conf: {
     FG_MIN_DIST_SQ: number;
     FG_DAMPING: number;
     FG_SLEEP_THRESHOLD: number;
+    FG_TICK_MS: number;
     GRAVITY_G: number;
     GRAVITY_G_CENTER: number;
     GRAVITY_DAMPING: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-temp",
-  "version": "0.13.49",
+  "version": "0.13.51",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",