microboard-temp 0.13.19 → 0.13.21

package/dist/cjs/browser.js

@@ -54606,6 +54606,7 @@ class ForceGraphEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
+  activeComponents = new Map;
   TICK_MS = 33;
   SYNC_MS = 300;
   SOFTENING_SQ = 100 * 100;
@@ -54613,18 +54614,60 @@ class ForceGraphEngine {
   constructor(board) {
     this.board = board;
   }
-  start() {
-    if (this.tickTimer !== null)
+  enableForGraph(startNodeId) {
+    if (this.isNodeInActiveGraph(startNodeId))
       return;
-    for (const item of this.getNodes()) {
-      const pos = item.transformation.getTranslation();
-      this.lastSyncedPositions.set(item.getId(), { x: pos.x, y: pos.y });
-      this.velocities.set(item.getId(), { vx: 0, vy: 0 });
+    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 });
+      }
+    }
+    this.ensureRunning();
+  }
+  disableForGraph(nodeId) {
+    const compId = this.findComponentId(nodeId);
+    if (!compId)
+      return;
+    this.activeComponents.delete(compId);
+    if (this.activeComponents.size === 0) {
+      this.stopTimers();
+    }
+  }
+  isNodeInActiveGraph(nodeId) {
+    return !!this.findComponentId(nodeId);
+  }
+  hasActiveComponents() {
+    return this.activeComponents.size > 0;
+  }
+  wake() {
+    if (this.activeComponents.size > 0 && this.tickTimer === null) {
+      this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
     }
-    this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
-    this.syncTimer = setInterval(() => this.syncPositions(), this.SYNC_MS);
   }
   stop() {
+    this.stopTimers();
+    this.syncPositions();
+    this.velocities.clear();
+    this.lastSyncedPositions.clear();
+    this.activeComponents.clear();
+  }
+  ensureRunning() {
+    if (this.tickTimer === null) {
+      this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
+    }
+    if (this.syncTimer === null) {
+      this.syncTimer = setInterval(() => this.syncPositions(), this.SYNC_MS);
+    }
+  }
+  stopTimers() {
     if (this.tickTimer !== null) {
       clearInterval(this.tickTimer);
       this.tickTimer = null;
@@ -54633,9 +54676,56 @@ class ForceGraphEngine {
       clearInterval(this.syncTimer);
       this.syncTimer = null;
     }
-    this.syncPositions();
-    this.velocities.clear();
-    this.lastSyncedPositions.clear();
+  }
+  findComponentId(nodeId) {
+    for (const [compId, { nodeIds }] of this.activeComponents) {
+      if (nodeIds.has(nodeId))
+        return compId;
+    }
+    return;
+  }
+  bfsComponent(startNodeId) {
+    const visited = new Set;
+    const queue = [startNodeId];
+    const connectors = this.getConnectors();
+    while (queue.length > 0) {
+      const nodeId = queue.shift();
+      if (visited.has(nodeId))
+        continue;
+      visited.add(nodeId);
+      for (const connector of connectors) {
+        const { startItem, endItem } = connector.getConnectedItems();
+        if (startItem?.getId() === nodeId && endItem && !visited.has(endItem.getId())) {
+          queue.push(endItem.getId());
+        }
+        if (endItem?.getId() === nodeId && startItem && !visited.has(startItem.getId())) {
+          queue.push(startItem.getId());
+        }
+      }
+    }
+    return visited;
+  }
+  calibrateTargetGap(nodeIds) {
+    let totalMaxDim = 0;
+    let count = 0;
+    for (const id of nodeIds) {
+      const item = this.board.items.getById(id);
+      if (!item)
+        continue;
+      const mbr = item.getMbr();
+      totalMaxDim += Math.max(mbr.getWidth(), mbr.getHeight());
+      count++;
+    }
+    const avgMaxDim = count > 0 ? totalMaxDim / count : 100;
+    return avgMaxDim * 0.3 + conf.FG_TARGET_GAP;
+  }
+  getActiveNodeIds() {
+    const all6 = new Set;
+    for (const { nodeIds } of this.activeComponents.values()) {
+      for (const id of nodeIds)
+        all6.add(id);
+    }
+    return all6;
   }
   getNodes() {
     return this.board.items.listAll().filter((item) => !EXCLUDED_TYPES.has(item.itemType) && !item.transformation.isLocked);
@@ -54645,8 +54735,10 @@ class ForceGraphEngine {
   }
   tick() {
     const dt = this.TICK_MS / 1000;
-    const nodes = this.getNodes();
-    if (nodes.length < 2)
+    const activeIds = this.getActiveNodeIds();
+    const allNodes = this.getNodes();
+    const nodes = allNodes.filter((item) => activeIds.has(item.getId()));
+    if (nodes.length < 1)
       return;
     const snapMap = new Map;
     for (const item of nodes) {
@@ -54687,7 +54779,9 @@ class ForceGraphEngine {
       const dx = s2.cx - s1.cx;
       const dy = s2.cy - s1.cy;
       const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
-      const targetDist = (Math.max(s1.w, s1.h) + Math.max(s2.w, s2.h)) * 0.5 + conf.FG_TARGET_GAP;
+      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 stretch = dist - targetDist;
       const forceMag = stretch * conf.FG_SPRING_K;
       const fx = dx / dist * forceMag;
@@ -54705,10 +54799,13 @@ class ForceGraphEngine {
           continue;
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
-        const distSq = dx * dx + dy * dy + this.SOFTENING_SQ;
-        const repMag = conf.FG_REPULSION / distSq;
-        const fx = dx * repMag;
-        const fy = dy * repMag;
+        const centerDist = Math.sqrt(dx * dx + dy * dy) + 0.001;
+        const r1 = Math.max(s1.w, s1.h) * 0.5;
+        const r2 = Math.max(s2.w, s2.h) * 0.5;
+        const edgeDist = Math.max(centerDist - r1 - r2, 1);
+        const repMag = conf.FG_REPULSION / (edgeDist * edgeDist + this.SOFTENING_SQ);
+        const fx = dx / centerDist * repMag;
+        const fy = dy / centerDist * repMag;
         ax.set(s1.id, (ax.get(s1.id) ?? 0) - fx);
         ay.set(s1.id, (ay.get(s1.id) ?? 0) - fy);
         ax.set(s2.id, (ax.get(s2.id) ?? 0) + fx);
@@ -54745,7 +54842,8 @@ class ForceGraphEngine {
     }
   }
   syncPositions() {
-    const nodes = this.getNodes();
+    const activeIds = this.getActiveNodeIds();
+    const nodes = this.getNodes().filter((item) => activeIds.has(item.getId()));
     if (nodes.length === 0)
       return;
     const movedItems = nodes.map((item) => {
@@ -54769,11 +54867,6 @@ class ForceGraphEngine {
     };
     this.board.events.emit(operation);
   }
-  wake() {
-    if (this.tickTimer === null && this.syncTimer !== null) {
-      this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
-    }
-  }
 }
 
 // src/Board.ts
@@ -55849,20 +55942,22 @@ class Board {
     return this.gravity !== null;
   }
   forceGraph = null;
-  enableForceGraph() {
-    if (this.forceGraph)
-      return;
-    this.forceGraph = new ForceGraphEngine(this);
-    this.forceGraph.start();
+  enableForceGraph(nodeId) {
+    if (!this.forceGraph) {
+      this.forceGraph = new ForceGraphEngine(this);
+    }
+    this.forceGraph.enableForGraph(nodeId);
   }
-  disableForceGraph() {
+  disableForceGraph(nodeId) {
     if (!this.forceGraph)
       return;
-    this.forceGraph.stop();
-    this.forceGraph = null;
+    this.forceGraph.disableForGraph(nodeId);
+    if (!this.forceGraph.hasActiveComponents()) {
+      this.forceGraph = null;
+    }
   }
-  isForceGraphEnabled() {
-    return this.forceGraph !== null;
+  isNodeInForceGraph(nodeId) {
+    return this.forceGraph?.isNodeInActiveGraph(nodeId) ?? false;
   }
   wakeForceGraph() {
     this.forceGraph?.wake();

package/dist/cjs/index.js

@@ -54606,6 +54606,7 @@ class ForceGraphEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
+  activeComponents = new Map;
   TICK_MS = 33;
   SYNC_MS = 300;
   SOFTENING_SQ = 100 * 100;
@@ -54613,18 +54614,60 @@ class ForceGraphEngine {
   constructor(board) {
     this.board = board;
   }
-  start() {
-    if (this.tickTimer !== null)
+  enableForGraph(startNodeId) {
+    if (this.isNodeInActiveGraph(startNodeId))
       return;
-    for (const item of this.getNodes()) {
-      const pos = item.transformation.getTranslation();
-      this.lastSyncedPositions.set(item.getId(), { x: pos.x, y: pos.y });
-      this.velocities.set(item.getId(), { vx: 0, vy: 0 });
+    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 });
+      }
+    }
+    this.ensureRunning();
+  }
+  disableForGraph(nodeId) {
+    const compId = this.findComponentId(nodeId);
+    if (!compId)
+      return;
+    this.activeComponents.delete(compId);
+    if (this.activeComponents.size === 0) {
+      this.stopTimers();
+    }
+  }
+  isNodeInActiveGraph(nodeId) {
+    return !!this.findComponentId(nodeId);
+  }
+  hasActiveComponents() {
+    return this.activeComponents.size > 0;
+  }
+  wake() {
+    if (this.activeComponents.size > 0 && this.tickTimer === null) {
+      this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
     }
-    this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
-    this.syncTimer = setInterval(() => this.syncPositions(), this.SYNC_MS);
   }
   stop() {
+    this.stopTimers();
+    this.syncPositions();
+    this.velocities.clear();
+    this.lastSyncedPositions.clear();
+    this.activeComponents.clear();
+  }
+  ensureRunning() {
+    if (this.tickTimer === null) {
+      this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
+    }
+    if (this.syncTimer === null) {
+      this.syncTimer = setInterval(() => this.syncPositions(), this.SYNC_MS);
+    }
+  }
+  stopTimers() {
     if (this.tickTimer !== null) {
       clearInterval(this.tickTimer);
       this.tickTimer = null;
@@ -54633,9 +54676,56 @@ class ForceGraphEngine {
       clearInterval(this.syncTimer);
       this.syncTimer = null;
     }
-    this.syncPositions();
-    this.velocities.clear();
-    this.lastSyncedPositions.clear();
+  }
+  findComponentId(nodeId) {
+    for (const [compId, { nodeIds }] of this.activeComponents) {
+      if (nodeIds.has(nodeId))
+        return compId;
+    }
+    return;
+  }
+  bfsComponent(startNodeId) {
+    const visited = new Set;
+    const queue = [startNodeId];
+    const connectors = this.getConnectors();
+    while (queue.length > 0) {
+      const nodeId = queue.shift();
+      if (visited.has(nodeId))
+        continue;
+      visited.add(nodeId);
+      for (const connector of connectors) {
+        const { startItem, endItem } = connector.getConnectedItems();
+        if (startItem?.getId() === nodeId && endItem && !visited.has(endItem.getId())) {
+          queue.push(endItem.getId());
+        }
+        if (endItem?.getId() === nodeId && startItem && !visited.has(startItem.getId())) {
+          queue.push(startItem.getId());
+        }
+      }
+    }
+    return visited;
+  }
+  calibrateTargetGap(nodeIds) {
+    let totalMaxDim = 0;
+    let count = 0;
+    for (const id of nodeIds) {
+      const item = this.board.items.getById(id);
+      if (!item)
+        continue;
+      const mbr = item.getMbr();
+      totalMaxDim += Math.max(mbr.getWidth(), mbr.getHeight());
+      count++;
+    }
+    const avgMaxDim = count > 0 ? totalMaxDim / count : 100;
+    return avgMaxDim * 0.3 + conf.FG_TARGET_GAP;
+  }
+  getActiveNodeIds() {
+    const all6 = new Set;
+    for (const { nodeIds } of this.activeComponents.values()) {
+      for (const id of nodeIds)
+        all6.add(id);
+    }
+    return all6;
   }
   getNodes() {
     return this.board.items.listAll().filter((item) => !EXCLUDED_TYPES.has(item.itemType) && !item.transformation.isLocked);
@@ -54645,8 +54735,10 @@ class ForceGraphEngine {
   }
   tick() {
     const dt = this.TICK_MS / 1000;
-    const nodes = this.getNodes();
-    if (nodes.length < 2)
+    const activeIds = this.getActiveNodeIds();
+    const allNodes = this.getNodes();
+    const nodes = allNodes.filter((item) => activeIds.has(item.getId()));
+    if (nodes.length < 1)
       return;
     const snapMap = new Map;
     for (const item of nodes) {
@@ -54687,7 +54779,9 @@ class ForceGraphEngine {
       const dx = s2.cx - s1.cx;
       const dy = s2.cy - s1.cy;
       const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
-      const targetDist = (Math.max(s1.w, s1.h) + Math.max(s2.w, s2.h)) * 0.5 + conf.FG_TARGET_GAP;
+      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 stretch = dist - targetDist;
       const forceMag = stretch * conf.FG_SPRING_K;
       const fx = dx / dist * forceMag;
@@ -54705,10 +54799,13 @@ class ForceGraphEngine {
           continue;
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
-        const distSq = dx * dx + dy * dy + this.SOFTENING_SQ;
-        const repMag = conf.FG_REPULSION / distSq;
-        const fx = dx * repMag;
-        const fy = dy * repMag;
+        const centerDist = Math.sqrt(dx * dx + dy * dy) + 0.001;
+        const r1 = Math.max(s1.w, s1.h) * 0.5;
+        const r2 = Math.max(s2.w, s2.h) * 0.5;
+        const edgeDist = Math.max(centerDist - r1 - r2, 1);
+        const repMag = conf.FG_REPULSION / (edgeDist * edgeDist + this.SOFTENING_SQ);
+        const fx = dx / centerDist * repMag;
+        const fy = dy / centerDist * repMag;
         ax.set(s1.id, (ax.get(s1.id) ?? 0) - fx);
         ay.set(s1.id, (ay.get(s1.id) ?? 0) - fy);
         ax.set(s2.id, (ax.get(s2.id) ?? 0) + fx);
@@ -54745,7 +54842,8 @@ class ForceGraphEngine {
     }
   }
   syncPositions() {
-    const nodes = this.getNodes();
+    const activeIds = this.getActiveNodeIds();
+    const nodes = this.getNodes().filter((item) => activeIds.has(item.getId()));
     if (nodes.length === 0)
       return;
     const movedItems = nodes.map((item) => {
@@ -54769,11 +54867,6 @@ class ForceGraphEngine {
     };
     this.board.events.emit(operation);
   }
-  wake() {
-    if (this.tickTimer === null && this.syncTimer !== null) {
-      this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
-    }
-  }
 }
 
 // src/Board.ts
@@ -55849,20 +55942,22 @@ class Board {
     return this.gravity !== null;
   }
   forceGraph = null;
-  enableForceGraph() {
-    if (this.forceGraph)
-      return;
-    this.forceGraph = new ForceGraphEngine(this);
-    this.forceGraph.start();
+  enableForceGraph(nodeId) {
+    if (!this.forceGraph) {
+      this.forceGraph = new ForceGraphEngine(this);
+    }
+    this.forceGraph.enableForGraph(nodeId);
   }
-  disableForceGraph() {
+  disableForceGraph(nodeId) {
     if (!this.forceGraph)
       return;
-    this.forceGraph.stop();
-    this.forceGraph = null;
+    this.forceGraph.disableForGraph(nodeId);
+    if (!this.forceGraph.hasActiveComponents()) {
+      this.forceGraph = null;
+    }
   }
-  isForceGraphEnabled() {
-    return this.forceGraph !== null;
+  isNodeInForceGraph(nodeId) {
+    return this.forceGraph?.isNodeInActiveGraph(nodeId) ?? false;
   }
   wakeForceGraph() {
     this.forceGraph?.wake();