microboard-temp 0.13.20 → 0.13.22

package/dist/cjs/node.js

@@ -57079,6 +57079,7 @@ class ForceGraphEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
+  activeComponents = new Map;
   TICK_MS = 33;
   SYNC_MS = 300;
   SOFTENING_SQ = 100 * 100;
@@ -57086,18 +57087,74 @@ 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);
+  }
+  getComponentTargetGap(nodeId) {
+    const compId = this.findComponentId(nodeId);
+    return compId ? this.activeComponents.get(compId)?.targetGap : undefined;
+  }
+  setComponentTargetGap(nodeId, gap) {
+    const compId = this.findComponentId(nodeId);
+    if (!compId)
+      return;
+    const comp = this.activeComponents.get(compId);
+    if (!comp)
+      return;
+    comp.targetGap = gap;
+    this.wake();
+  }
+  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;
@@ -57106,9 +57163,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 * 1.5;
+  }
+  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);
@@ -57118,8 +57222,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) {
@@ -57160,7 +57266,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;
@@ -57221,7 +57329,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) => {
@@ -57245,11 +57354,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
@@ -58325,20 +58429,28 @@ 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;
+    }
+  }
+  isNodeInForceGraph(nodeId) {
+    return this.forceGraph?.isNodeInActiveGraph(nodeId) ?? false;
+  }
+  getForceGraphGap(nodeId) {
+    return this.forceGraph?.getComponentTargetGap(nodeId);
   }
-  isForceGraphEnabled() {
-    return this.forceGraph !== null;
+  setForceGraphGap(nodeId, gap) {
+    this.forceGraph?.setComponentTargetGap(nodeId, gap);
   }
   wakeForceGraph() {
     this.forceGraph?.wake();

package/dist/esm/browser.js

@@ -54435,6 +54435,7 @@ class ForceGraphEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
+  activeComponents = new Map;
   TICK_MS = 33;
   SYNC_MS = 300;
   SOFTENING_SQ = 100 * 100;
@@ -54442,18 +54443,74 @@ 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);
+  }
+  getComponentTargetGap(nodeId) {
+    const compId = this.findComponentId(nodeId);
+    return compId ? this.activeComponents.get(compId)?.targetGap : undefined;
+  }
+  setComponentTargetGap(nodeId, gap) {
+    const compId = this.findComponentId(nodeId);
+    if (!compId)
+      return;
+    const comp = this.activeComponents.get(compId);
+    if (!comp)
+      return;
+    comp.targetGap = gap;
+    this.wake();
+  }
+  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;
@@ -54462,9 +54519,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 * 1.5;
+  }
+  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);
@@ -54474,8 +54578,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) {
@@ -54516,7 +54622,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;
@@ -54577,7 +54685,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) => {
@@ -54601,11 +54710,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
@@ -55681,20 +55785,28 @@ 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;
+    }
+  }
+  isNodeInForceGraph(nodeId) {
+    return this.forceGraph?.isNodeInActiveGraph(nodeId) ?? false;
+  }
+  getForceGraphGap(nodeId) {
+    return this.forceGraph?.getComponentTargetGap(nodeId);
   }
-  isForceGraphEnabled() {
-    return this.forceGraph !== null;
+  setForceGraphGap(nodeId, gap) {
+    this.forceGraph?.setComponentTargetGap(nodeId, gap);
   }
   wakeForceGraph() {
     this.forceGraph?.wake();