microboard-temp 0.13.15 → 0.13.17

package/dist/cjs/browser.js

@@ -4675,6 +4675,11 @@ var conf = {
   DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 },
   MAX_CARD_SIZE: 500,
   CONNECTOR_ITEM_OFFSET: 20,
+  FG_SPRING_K: 3,
+  FG_TARGET_GAP: 20,
+  FG_REPULSION: 400000,
+  FG_DAMPING: 0.8,
+  FG_SLEEP_THRESHOLD: 0.5,
   GRAVITY_G: 80,
   GRAVITY_G_CENTER: 120,
   GRAVITY_DAMPING: 0.96,
@@ -54569,6 +54574,208 @@ class GravityEngine {
   }
 }
 
+// src/ForceGraph/ForceGraphEngine.ts
+class UnionFind {
+  parent = new Map;
+  find(id) {
+    if (!this.parent.has(id))
+      this.parent.set(id, id);
+    const root3 = this.parent.get(id);
+    if (root3 !== id) {
+      const canonical = this.find(root3);
+      this.parent.set(id, canonical);
+      return canonical;
+    }
+    return root3;
+  }
+  union(a2, b) {
+    const ra = this.find(a2);
+    const rb = this.find(b);
+    if (ra !== rb)
+      this.parent.set(ra, rb);
+  }
+  sameComponent(a2, b) {
+    return this.find(a2) === this.find(b);
+  }
+}
+var EXCLUDED_TYPES = new Set(["Connector", "Comment"]);
+
+class ForceGraphEngine {
+  board;
+  velocities = new Map;
+  tickTimer = null;
+  syncTimer = null;
+  lastSyncedPositions = new Map;
+  TICK_MS = 33;
+  SYNC_MS = 300;
+  SOFTENING_SQ = 100 * 100;
+  MIN_MOVE_PX = 0.05;
+  constructor(board) {
+    this.board = board;
+  }
+  start() {
+    if (this.tickTimer !== null)
+      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 });
+    }
+    this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
+    this.syncTimer = setInterval(() => this.syncPositions(), this.SYNC_MS);
+  }
+  stop() {
+    if (this.tickTimer !== null) {
+      clearInterval(this.tickTimer);
+      this.tickTimer = null;
+    }
+    if (this.syncTimer !== null) {
+      clearInterval(this.syncTimer);
+      this.syncTimer = null;
+    }
+    this.syncPositions();
+    this.velocities.clear();
+    this.lastSyncedPositions.clear();
+  }
+  getNodes() {
+    return this.board.items.listAll().filter((item) => !EXCLUDED_TYPES.has(item.itemType) && !item.transformation.isLocked);
+  }
+  getConnectors() {
+    return this.board.items.listAll().filter((item) => item.itemType === "Connector");
+  }
+  tick() {
+    const dt = this.TICK_MS / 1000;
+    const nodes = this.getNodes();
+    if (nodes.length < 2)
+      return;
+    const snapMap = new Map;
+    for (const item of nodes) {
+      const pos = item.transformation.getTranslation();
+      const mbr = item.getMbr();
+      const w = Math.max(mbr.getWidth(), 1);
+      const h2 = Math.max(mbr.getHeight(), 1);
+      snapMap.set(item.getId(), {
+        id: item.getId(),
+        cx: pos.x + w * 0.5,
+        cy: pos.y + h2 * 0.5,
+        w,
+        h: h2
+      });
+    }
+    const snap = Array.from(snapMap.values());
+    const uf = new UnionFind;
+    for (const connector of this.getConnectors()) {
+      const { startItem, endItem } = connector.getConnectedItems();
+      if (startItem && endItem) {
+        uf.union(startItem.getId(), endItem.getId());
+      }
+    }
+    const ax = new Map;
+    const ay = new Map;
+    for (const s2 of snap) {
+      ax.set(s2.id, 0);
+      ay.set(s2.id, 0);
+    }
+    for (const connector of this.getConnectors()) {
+      const { startItem, endItem } = connector.getConnectedItems();
+      if (!startItem || !endItem)
+        continue;
+      const s1 = snapMap.get(startItem.getId());
+      const s2 = snapMap.get(endItem.getId());
+      if (!s1 || !s2)
+        continue;
+      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 stretch = dist - targetDist;
+      const forceMag = stretch * conf.FG_SPRING_K;
+      const fx = dx / dist * forceMag;
+      const fy = dy / dist * forceMag;
+      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);
+      ay.set(s2.id, (ay.get(s2.id) ?? 0) - fy);
+    }
+    for (let i = 0;i < snap.length; i++) {
+      for (let j = i + 1;j < snap.length; j++) {
+        const s1 = snap[i];
+        const s2 = snap[j];
+        if (!uf.sameComponent(s1.id, s2.id))
+          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;
+        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);
+        ay.set(s2.id, (ay.get(s2.id) ?? 0) + fy);
+      }
+    }
+    let totalEnergy = 0;
+    for (const item of nodes) {
+      const id = item.getId();
+      if (!this.velocities.has(id)) {
+        this.velocities.set(id, { vx: 0, vy: 0 });
+      }
+      const vel = this.velocities.get(id);
+      vel.vx = (vel.vx + (ax.get(id) ?? 0) * dt) * conf.FG_DAMPING;
+      vel.vy = (vel.vy + (ay.get(id) ?? 0) * dt) * conf.FG_DAMPING;
+      totalEnergy += vel.vx * vel.vx + vel.vy * vel.vy;
+      const moveX = vel.vx * dt;
+      const moveY = vel.vy * dt;
+      if (Math.abs(moveX) >= this.MIN_MOVE_PX || Math.abs(moveY) >= this.MIN_MOVE_PX) {
+        item.transformation.applyMatrixSilent({
+          translateX: moveX,
+          translateY: moveY,
+          scaleX: 1,
+          scaleY: 1,
+          shearX: 0,
+          shearY: 0
+        });
+      }
+    }
+    if (totalEnergy < conf.FG_SLEEP_THRESHOLD && this.tickTimer !== null) {
+      clearInterval(this.tickTimer);
+      this.tickTimer = null;
+      this.syncPositions();
+    }
+  }
+  syncPositions() {
+    const nodes = this.getNodes();
+    if (nodes.length === 0)
+      return;
+    const movedItems = nodes.map((item) => {
+      const id = item.getId();
+      const pos = item.transformation.getTranslation();
+      const last = this.lastSyncedPositions.get(id);
+      const dx = last ? pos.x - last.x : 0;
+      const dy = last ? pos.y - last.y : 0;
+      this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+      return { id, dx, dy };
+    }).filter(({ dx, dy }) => Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5);
+    if (movedItems.length === 0)
+      return;
+    const operation = {
+      class: "Transformation",
+      method: "applyMatrix",
+      items: movedItems.map(({ id, dx, dy }) => ({
+        id,
+        matrix: { translateX: dx, translateY: dy, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
+      }))
+    };
+    this.board.events.emit(operation);
+  }
+  wake() {
+    if (this.tickTimer === null && this.syncTimer !== null) {
+      this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
+    }
+  }
+}
+
 // src/Board.ts
 class Board {
   boardId;
@@ -55641,6 +55848,25 @@ class Board {
   isGravityEnabled() {
     return this.gravity !== null;
   }
+  forceGraph = null;
+  enableForceGraph() {
+    if (this.forceGraph)
+      return;
+    this.forceGraph = new ForceGraphEngine(this);
+    this.forceGraph.start();
+  }
+  disableForceGraph() {
+    if (!this.forceGraph)
+      return;
+    this.forceGraph.stop();
+    this.forceGraph = null;
+  }
+  isForceGraphEnabled() {
+    return this.forceGraph !== null;
+  }
+  wakeForceGraph() {
+    this.forceGraph?.wake();
+  }
 }
 // src/Events/Merge.ts
 var import_slate36 = require("slate");

package/dist/cjs/index.js

@@ -4675,6 +4675,11 @@ var conf = {
   DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 },
   MAX_CARD_SIZE: 500,
   CONNECTOR_ITEM_OFFSET: 20,
+  FG_SPRING_K: 3,
+  FG_TARGET_GAP: 20,
+  FG_REPULSION: 400000,
+  FG_DAMPING: 0.8,
+  FG_SLEEP_THRESHOLD: 0.5,
   GRAVITY_G: 80,
   GRAVITY_G_CENTER: 120,
   GRAVITY_DAMPING: 0.96,
@@ -54569,6 +54574,208 @@ class GravityEngine {
   }
 }
 
+// src/ForceGraph/ForceGraphEngine.ts
+class UnionFind {
+  parent = new Map;
+  find(id) {
+    if (!this.parent.has(id))
+      this.parent.set(id, id);
+    const root3 = this.parent.get(id);
+    if (root3 !== id) {
+      const canonical = this.find(root3);
+      this.parent.set(id, canonical);
+      return canonical;
+    }
+    return root3;
+  }
+  union(a2, b) {
+    const ra = this.find(a2);
+    const rb = this.find(b);
+    if (ra !== rb)
+      this.parent.set(ra, rb);
+  }
+  sameComponent(a2, b) {
+    return this.find(a2) === this.find(b);
+  }
+}
+var EXCLUDED_TYPES = new Set(["Connector", "Comment"]);
+
+class ForceGraphEngine {
+  board;
+  velocities = new Map;
+  tickTimer = null;
+  syncTimer = null;
+  lastSyncedPositions = new Map;
+  TICK_MS = 33;
+  SYNC_MS = 300;
+  SOFTENING_SQ = 100 * 100;
+  MIN_MOVE_PX = 0.05;
+  constructor(board) {
+    this.board = board;
+  }
+  start() {
+    if (this.tickTimer !== null)
+      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 });
+    }
+    this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
+    this.syncTimer = setInterval(() => this.syncPositions(), this.SYNC_MS);
+  }
+  stop() {
+    if (this.tickTimer !== null) {
+      clearInterval(this.tickTimer);
+      this.tickTimer = null;
+    }
+    if (this.syncTimer !== null) {
+      clearInterval(this.syncTimer);
+      this.syncTimer = null;
+    }
+    this.syncPositions();
+    this.velocities.clear();
+    this.lastSyncedPositions.clear();
+  }
+  getNodes() {
+    return this.board.items.listAll().filter((item) => !EXCLUDED_TYPES.has(item.itemType) && !item.transformation.isLocked);
+  }
+  getConnectors() {
+    return this.board.items.listAll().filter((item) => item.itemType === "Connector");
+  }
+  tick() {
+    const dt = this.TICK_MS / 1000;
+    const nodes = this.getNodes();
+    if (nodes.length < 2)
+      return;
+    const snapMap = new Map;
+    for (const item of nodes) {
+      const pos = item.transformation.getTranslation();
+      const mbr = item.getMbr();
+      const w = Math.max(mbr.getWidth(), 1);
+      const h2 = Math.max(mbr.getHeight(), 1);
+      snapMap.set(item.getId(), {
+        id: item.getId(),
+        cx: pos.x + w * 0.5,
+        cy: pos.y + h2 * 0.5,
+        w,
+        h: h2
+      });
+    }
+    const snap = Array.from(snapMap.values());
+    const uf = new UnionFind;
+    for (const connector of this.getConnectors()) {
+      const { startItem, endItem } = connector.getConnectedItems();
+      if (startItem && endItem) {
+        uf.union(startItem.getId(), endItem.getId());
+      }
+    }
+    const ax = new Map;
+    const ay = new Map;
+    for (const s2 of snap) {
+      ax.set(s2.id, 0);
+      ay.set(s2.id, 0);
+    }
+    for (const connector of this.getConnectors()) {
+      const { startItem, endItem } = connector.getConnectedItems();
+      if (!startItem || !endItem)
+        continue;
+      const s1 = snapMap.get(startItem.getId());
+      const s2 = snapMap.get(endItem.getId());
+      if (!s1 || !s2)
+        continue;
+      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 stretch = dist - targetDist;
+      const forceMag = stretch * conf.FG_SPRING_K;
+      const fx = dx / dist * forceMag;
+      const fy = dy / dist * forceMag;
+      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);
+      ay.set(s2.id, (ay.get(s2.id) ?? 0) - fy);
+    }
+    for (let i = 0;i < snap.length; i++) {
+      for (let j = i + 1;j < snap.length; j++) {
+        const s1 = snap[i];
+        const s2 = snap[j];
+        if (!uf.sameComponent(s1.id, s2.id))
+          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;
+        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);
+        ay.set(s2.id, (ay.get(s2.id) ?? 0) + fy);
+      }
+    }
+    let totalEnergy = 0;
+    for (const item of nodes) {
+      const id = item.getId();
+      if (!this.velocities.has(id)) {
+        this.velocities.set(id, { vx: 0, vy: 0 });
+      }
+      const vel = this.velocities.get(id);
+      vel.vx = (vel.vx + (ax.get(id) ?? 0) * dt) * conf.FG_DAMPING;
+      vel.vy = (vel.vy + (ay.get(id) ?? 0) * dt) * conf.FG_DAMPING;
+      totalEnergy += vel.vx * vel.vx + vel.vy * vel.vy;
+      const moveX = vel.vx * dt;
+      const moveY = vel.vy * dt;
+      if (Math.abs(moveX) >= this.MIN_MOVE_PX || Math.abs(moveY) >= this.MIN_MOVE_PX) {
+        item.transformation.applyMatrixSilent({
+          translateX: moveX,
+          translateY: moveY,
+          scaleX: 1,
+          scaleY: 1,
+          shearX: 0,
+          shearY: 0
+        });
+      }
+    }
+    if (totalEnergy < conf.FG_SLEEP_THRESHOLD && this.tickTimer !== null) {
+      clearInterval(this.tickTimer);
+      this.tickTimer = null;
+      this.syncPositions();
+    }
+  }
+  syncPositions() {
+    const nodes = this.getNodes();
+    if (nodes.length === 0)
+      return;
+    const movedItems = nodes.map((item) => {
+      const id = item.getId();
+      const pos = item.transformation.getTranslation();
+      const last = this.lastSyncedPositions.get(id);
+      const dx = last ? pos.x - last.x : 0;
+      const dy = last ? pos.y - last.y : 0;
+      this.lastSyncedPositions.set(id, { x: pos.x, y: pos.y });
+      return { id, dx, dy };
+    }).filter(({ dx, dy }) => Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5);
+    if (movedItems.length === 0)
+      return;
+    const operation = {
+      class: "Transformation",
+      method: "applyMatrix",
+      items: movedItems.map(({ id, dx, dy }) => ({
+        id,
+        matrix: { translateX: dx, translateY: dy, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
+      }))
+    };
+    this.board.events.emit(operation);
+  }
+  wake() {
+    if (this.tickTimer === null && this.syncTimer !== null) {
+      this.tickTimer = setInterval(() => this.tick(), this.TICK_MS);
+    }
+  }
+}
+
 // src/Board.ts
 class Board {
   boardId;
@@ -55641,6 +55848,25 @@ class Board {
   isGravityEnabled() {
     return this.gravity !== null;
   }
+  forceGraph = null;
+  enableForceGraph() {
+    if (this.forceGraph)
+      return;
+    this.forceGraph = new ForceGraphEngine(this);
+    this.forceGraph.start();
+  }
+  disableForceGraph() {
+    if (!this.forceGraph)
+      return;
+    this.forceGraph.stop();
+    this.forceGraph = null;
+  }
+  isForceGraphEnabled() {
+    return this.forceGraph !== null;
+  }
+  wakeForceGraph() {
+    this.forceGraph?.wake();
+  }
 }
 // src/Events/Merge.ts
 var import_slate36 = require("slate");