microboard-temp 0.13.50 → 0.13.52

package/dist/cjs/browser.js

@@ -3957,7 +3957,7 @@ 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,
@@ -60712,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) {
@@ -60778,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);
@@ -60842,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();
@@ -60881,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);
@@ -60900,8 +60927,12 @@ 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 minDistSq = refDist * refDist / 100;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDist / 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,7 +3957,7 @@ 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,
@@ -60712,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) {
@@ -60778,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);
@@ -60842,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();
@@ -60881,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);
@@ -60900,8 +60927,12 @@ 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 minDistSq = refDist * refDist / 100;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDist / 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,7 +3957,7 @@ 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,
@@ -63187,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) {
@@ -63253,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);
@@ -63317,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();
@@ -63356,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);
@@ -63375,8 +63402,12 @@ 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 minDistSq = refDist * refDist / 100;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDist / 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,7 +3964,7 @@ 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,
@@ -60455,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) {
@@ -60521,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);
@@ -60585,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();
@@ -60624,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);
@@ -60643,8 +60670,12 @@ 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 minDistSq = refDist * refDist / 100;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDist / 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,7 +3957,7 @@ 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,
@@ -60448,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) {
@@ -60514,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);
@@ -60578,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();
@@ -60617,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);
@@ -60636,8 +60663,12 @@ 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 minDistSq = refDist * refDist / 100;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDist / 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,7 +3959,7 @@ 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,
@@ -62912,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) {
@@ -62978,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);
@@ -63042,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();
@@ -63081,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);
@@ -63100,8 +63127,12 @@ 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 minDistSq = refDist * refDist / 100;
+        const distSq = Math.max(dx * dx + dy * dy, minDistSq);
+        const force = conf.FG_REPULSION * refDist / 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

@@ -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/package.json

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