microboard-temp 0.13.20 → 0.13.22

package/dist/esm/index.js

@@ -54428,6 +54428,7 @@ class ForceGraphEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
+  activeComponents = new Map;
   TICK_MS = 33;
   SYNC_MS = 300;
   SOFTENING_SQ = 100 * 100;
@@ -54435,18 +54436,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;
@@ -54455,9 +54512,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);
@@ -54467,8 +54571,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) {
@@ -54509,7 +54615,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;
@@ -54570,7 +54678,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) => {
@@ -54594,11 +54703,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
@@ -55674,20 +55778,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/node.js

@@ -56896,6 +56896,7 @@ class ForceGraphEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
+  activeComponents = new Map;
   TICK_MS = 33;
   SYNC_MS = 300;
   SOFTENING_SQ = 100 * 100;
@@ -56903,18 +56904,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;
@@ -56923,9 +56980,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);
@@ -56935,8 +57039,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) {
@@ -56977,7 +57083,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;
@@ -57038,7 +57146,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) => {
@@ -57062,11 +57171,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
@@ -58142,20 +58246,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/types/Board.d.ts

@@ -140,9 +140,16 @@ export declare class Board {
     disableGravity(): void;
     isGravityEnabled(): boolean;
     private forceGraph;
-    enableForceGraph(): void;
-    disableForceGraph(): void;
-    isForceGraphEnabled(): boolean;
+    /** Enable force-directed layout for the connected component containing `nodeId`. */
+    enableForceGraph(nodeId: string): void;
+    /** Disable graph mode for the component containing `nodeId`. */
+    disableForceGraph(nodeId: string): void;
+    /** Returns true if `nodeId` is currently in an active force-directed component. */
+    isNodeInForceGraph(nodeId: string): boolean;
+    /** Get the connector target gap (px) for the component containing `nodeId`. */
+    getForceGraphGap(nodeId: string): number | undefined;
+    /** Set the connector target gap (px) for the component containing `nodeId`. */
+    setForceGraphGap(nodeId: string, gap: number): void;
     /** Call after dragging a node to re-wake the physics engine if it was sleeping. */
     wakeForceGraph(): void;
 }

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

@@ -5,17 +5,49 @@ export declare class ForceGraphEngine {
     private tickTimer;
     private syncTimer;
     private lastSyncedPositions;
+    /** Active components: componentId → { nodeIds, targetGap }
+     *  componentId is the nodeId that was passed to enableForGraph(). */
+    private activeComponents;
     private readonly TICK_MS;
     private readonly SYNC_MS;
     private readonly SOFTENING_SQ;
     private readonly MIN_MOVE_PX;
     constructor(board: Board);
-    start(): void;
+    /**
+     * Enable force-directed layout for the connected component containing `startNodeId`.
+     * BFS walks the connector graph to find all nodes in the component.
+     * `targetGap` is auto-calibrated from the average node size; callers may override via conf.
+     */
+    enableForGraph(startNodeId: string): void;
+    /**
+     * Disable graph mode for the component containing `nodeId`.
+     * Stops the engine entirely if no components remain active.
+     */
+    disableForGraph(nodeId: string): void;
+    isNodeInActiveGraph(nodeId: string): boolean;
+    /** Get the current target gap for the component containing `nodeId`. Returns undefined if not active. */
+    getComponentTargetGap(nodeId: string): number | undefined;
+    /** Update the target gap (connector length) for the component containing `nodeId` and re-wake. */
+    setComponentTargetGap(nodeId: string, gap: number): void;
+    hasActiveComponents(): boolean;
+    /** Re-wake physics after a node is manually dragged. */
+    wake(): void;
+    /** Full stop — called when Board destroys the engine. */
     stop(): void;
+    private ensureRunning;
+    private stopTimers;
+    /** Find the componentId (Map key) for the component containing `nodeId`. */
+    private findComponentId;
+    /** BFS through connector graph starting from `startNodeId`. */
+    private bfsComponent;
+    /**
+     * Auto-calibrate spring target gap from the average max(w, h) of nodes in the component.
+     * Larger nodes → longer springs so items visually breathe.
+     */
+    private calibrateTargetGap;
+    private getActiveNodeIds;
     private getNodes;
     private getConnectors;
     private tick;
     private syncPositions;
-    /** Re-wake the engine after user moves a node (dragging disturbs equilibrium). */
-    wake(): void;
 }

package/package.json

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