microboard-temp 0.13.32 → 0.13.33

package/dist/cjs/node.js

@@ -5712,11 +5712,12 @@ var conf = {
   DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 },
   MAX_CARD_SIZE: 500,
   CONNECTOR_ITEM_OFFSET: 20,
-  FG_SPRING_K: 3,
+  FG_SPRING_K: 0.2,
   FG_TARGET_GAP: 20,
-  FG_REPULSION: 400000,
-  FG_DAMPING: 0.9,
-  FG_SLEEP_THRESHOLD: 10,
+  FG_REPULSION: 100,
+  FG_MIN_DIST_SQ: 100,
+  FG_DAMPING: 0.6,
+  FG_SLEEP_THRESHOLD: 0.5,
   GRAVITY_G: 80,
   GRAVITY_G_CENTER: 120,
   GRAVITY_DAMPING: 0.96,
@@ -23548,14 +23549,14 @@ class SpatialIndex {
     if ("index" in item && item.index) {
       item.removeChildItems(item.index.list());
     }
+    this.itemsArray.splice(this.itemsArray.indexOf(item), 1);
+    this.itemsIndex.remove(item);
     if (item.parent !== "Board") {
       const parentFrame = this.items.getById(item.parent);
       parentFrame?.removeChildItems(item);
       this.subject.publish(this.items);
       return;
     }
-    this.itemsArray.splice(this.itemsArray.indexOf(item), 1);
-    this.itemsIndex.remove(item);
     if (this.itemsArray.length === 0) {
       this.Mbr = new Mbr;
     } else {
@@ -23576,7 +23577,8 @@ class SpatialIndex {
           translateX: worldMatrix.translateX,
           translateY: worldMatrix.translateY,
           scaleX: worldMatrix.scaleX,
-          scaleY: worldMatrix.scaleY
+          scaleY: worldMatrix.scaleY,
+          isLocked: false
         };
       }
       return serialized;
@@ -23936,7 +23938,7 @@ class Items {
       if (item.itemType === "Drawing" && !item.isPointNearLine(this.pointer.point)) {
         return acc;
       }
-      const isItemTransparent = item instanceof Shape && item?.getBackgroundColor() === "none";
+      const isItemTransparent = item instanceof Shape && item.getBackgroundColor() === "none";
       const itemZIndex = this.getZIndex(item);
       const accZIndex = this.getZIndex(acc.nearest);
       if (itemZIndex > accZIndex && (!isItemTransparent || area === acc.area) || area < acc.area) {
@@ -24032,7 +24034,7 @@ class Items {
     });
     const childrenMap = new Map;
     const GroupsHTML = groups.map((group) => {
-      group.getChildrenIds().forEach((childId) => childrenMap.set(childId, group.getId()));
+      group.getChildrenIds()?.forEach((childId) => childrenMap.set(childId, group.getId()));
       const html = group.renderHTML(documentFactory);
       translateElementBy(html, -lowestCoordinates.left, -lowestCoordinates.top);
       return html;
@@ -24048,7 +24050,10 @@ class Items {
         item.setAttribute("data-end-point-x", (endX - lowestCoordinates.left).toString());
         item.setAttribute("data-end-point-y", (endY - lowestCoordinates.top).toString());
       }
-      return translateElementBy(item, -lowestCoordinates.left, -lowestCoordinates.top);
+      if (!childrenMap.get(item.id)) {
+        return translateElementBy(item, -lowestCoordinates.left, -lowestCoordinates.top);
+      }
+      return item;
     });
     for (const item of restHTML) {
       const parentFrameId = childrenMap.get(item.id);
@@ -24706,8 +24711,8 @@ class BaseItem extends Mbr {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    const { translateX, translateY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundColor = "#b2b0c3";
     div.id = this.getId();
     div.style.width = `${this.getWidth()}px`;
@@ -42892,7 +42897,7 @@ class Shape extends BaseItem {
     if (Shapes[this.shapeType].useMbrUnderPointer) {
       return this.mbr.isUnderPoint(point5);
     }
-    if (this.text.isEmpty() && (this.backgroundOpacity === 0 || this.backgroundColor === "none" || this.backgroundColor === "")) {
+    if (this.text.isEmpty() && (this.backgroundOpacity === 0 || this.backgroundColor === "none" || this.backgroundColor === "transparent" || this.backgroundColor === "")) {
       return this.path.isPointOverEdges(point5, tolerance);
     } else {
       return this.textContainer.isUnderPoint(point5) || this.path.isUnderPoint(point5);
@@ -42944,8 +42949,8 @@ class Shape extends BaseItem {
     const pathElement = Shapes[this.shapeType].path.copy().renderHTML(documentFactory);
     const paths = Array.isArray(pathElement) ? pathElement : [pathElement];
     paths.forEach((element3) => {
-      element3.setAttribute("fill", this.backgroundColor);
-      element3.setAttribute("stroke", this.borderColor);
+      element3.setAttribute("fill", resolveColor(this.backgroundColor, conf.theme, "background"));
+      element3.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, "foreground"));
       element3.setAttribute("stroke-dasharray", LinePatterns[this.borderStyle].join(", "));
       element3.setAttribute("stroke-width", this.borderWidth.toString());
       element3.setAttribute("transform-origin", "0 0");
@@ -42960,8 +42965,8 @@ class Shape extends BaseItem {
     div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.position = "absolute";
     div.setAttribute("data-shape-type", this.shapeType);
-    div.setAttribute("fill", this.backgroundColor);
-    div.setAttribute("stroke", this.borderColor);
+    div.setAttribute("fill", resolveColor(this.backgroundColor, conf.theme, "background"));
+    div.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, "foreground"));
     div.setAttribute("data-border-style", this.borderStyle);
     div.setAttribute("stroke-dasharray", LinePatterns[this.borderStyle].join(", "));
     div.setAttribute("stroke-width", this.borderWidth.toString());
@@ -43005,9 +43010,6 @@ class Shape extends BaseItem {
     this.text.updateElement();
   }
   transformPath() {
-    if (conf.isNode()) {
-      return;
-    }
     this.path = Shapes[this.shapeType].createPath(this.mbr);
     this.textContainer = Shapes[this.shapeType].textBounds.copy();
     this.text.setContainer(this.textContainer.copy());
@@ -46315,7 +46317,13 @@ class Group extends BaseItem {
     ctx.restore();
   }
   renderHTML(documentFactory) {
-    return documentFactory.createElement("div");
+    const div = documentFactory.createElement("div");
+    div.id = this.id;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
+    div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.position = "absolute";
+    div.style.transformOrigin = "0 0";
+    return div;
   }
 }
 // src/itemFactories.ts
@@ -57169,7 +57177,6 @@ class ForceGraphEngine {
   activeComponents = new Map;
   TICK_MS = 33;
   SYNC_MS = 300;
-  SOFTENING_SQ = 100 * 100;
   MIN_MOVE_PX = 0.05;
   constructor(board) {
     this.board = board;
@@ -57318,42 +57325,27 @@ class ForceGraphEngine {
     return this.board.items.listAll().filter((item) => item.itemType === "Connector");
   }
   tick() {
-    const dt = this.TICK_MS / 1000;
     const activeIds = this.getActiveNodeIds();
     const draggedIds = this.board.getDraggedItemIds();
     const allNodes = this.getNodes();
-    const nodes = allNodes.filter((item) => {
-      if (!activeIds.has(item.getId()))
-        return false;
-      if (draggedIds.has(item.getId()))
-        return false;
-      if (item.parent !== "Board" && draggedIds.has(item.parent))
-        return false;
-      return true;
-    });
-    if (nodes.length < 1)
-      return;
     const snapMap = new Map;
-    for (const item of nodes) {
+    for (const item of allNodes) {
+      if (!activeIds.has(item.getId()))
+        continue;
       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
-      });
+      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());
+    if (snap.length < 1)
+      return;
     const uf = new UnionFind;
     for (const connector of this.getConnectors()) {
       const { startItem, endItem } = connector.getConnectedItems();
-      if (startItem && endItem) {
+      if (startItem && endItem)
         uf.union(startItem.getId(), endItem.getId());
-      }
     }
     const ax = new Map;
     const ay = new Map;
@@ -57371,14 +57363,13 @@ class ForceGraphEngine {
         continue;
       const dx = s2.cx - s1.cx;
       const dy = s2.cy - s1.cy;
-      const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
+      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 stretch = dist - targetDist;
-      const forceMag = stretch * conf.FG_SPRING_K;
-      const fx = dx / dist * forceMag;
-      const fy = dy / dist * forceMag;
+      const force = (dist - 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);
       ay.set(s1.id, (ay.get(s1.id) ?? 0) + fy);
       ax.set(s2.id, (ax.get(s2.id) ?? 0) - fx);
@@ -57392,35 +57383,35 @@ class ForceGraphEngine {
           continue;
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
-        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);
-        ay.set(s2.id, (ay.get(s2.id) ?? 0) + fy);
+        const distSq = Math.max(dx * dx + dy * dy, conf.FG_MIN_DIST_SQ);
+        const force = conf.FG_REPULSION / 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);
+        ay.set(s2.id, (ay.get(s2.id) ?? 0) + dy * force);
       }
     }
     let totalEnergy = 0;
-    for (const item of nodes) {
+    for (const item of allNodes) {
       const id = item.getId();
-      if (!this.velocities.has(id)) {
+      if (!activeIds.has(id))
+        continue;
+      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) {
+      const isDragged = draggedIds.has(id) || item.parent !== "Board" && draggedIds.has(item.parent);
+      if (isDragged) {
+        vel.vx = 0;
+        vel.vy = 0;
+        continue;
+      }
+      vel.vx = (vel.vx + (ax.get(id) ?? 0)) * conf.FG_DAMPING;
+      vel.vy = (vel.vy + (ay.get(id) ?? 0)) * conf.FG_DAMPING;
+      totalEnergy += Math.abs(vel.vx) + Math.abs(vel.vy);
+      if (Math.abs(vel.vx) >= this.MIN_MOVE_PX || Math.abs(vel.vy) >= this.MIN_MOVE_PX) {
         item.transformation.applyMatrixSilent({
-          translateX: moveX,
-          translateY: moveY,
+          translateX: vel.vx,
+          translateY: vel.vy,
           scaleX: 1,
           scaleY: 1,
           shearX: 0,

package/dist/esm/browser.js

@@ -4495,11 +4495,12 @@ var conf = {
   DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 },
   MAX_CARD_SIZE: 500,
   CONNECTOR_ITEM_OFFSET: 20,
-  FG_SPRING_K: 3,
+  FG_SPRING_K: 0.2,
   FG_TARGET_GAP: 20,
-  FG_REPULSION: 400000,
-  FG_DAMPING: 0.9,
-  FG_SLEEP_THRESHOLD: 10,
+  FG_REPULSION: 100,
+  FG_MIN_DIST_SQ: 100,
+  FG_DAMPING: 0.6,
+  FG_SLEEP_THRESHOLD: 0.5,
   GRAVITY_G: 80,
   GRAVITY_G_CENTER: 120,
   GRAVITY_DAMPING: 0.96,
@@ -20905,14 +20906,14 @@ class SpatialIndex {
     if ("index" in item && item.index) {
       item.removeChildItems(item.index.list());
     }
+    this.itemsArray.splice(this.itemsArray.indexOf(item), 1);
+    this.itemsIndex.remove(item);
     if (item.parent !== "Board") {
       const parentFrame = this.items.getById(item.parent);
       parentFrame?.removeChildItems(item);
       this.subject.publish(this.items);
       return;
     }
-    this.itemsArray.splice(this.itemsArray.indexOf(item), 1);
-    this.itemsIndex.remove(item);
     if (this.itemsArray.length === 0) {
       this.Mbr = new Mbr;
     } else {
@@ -20933,7 +20934,8 @@ class SpatialIndex {
           translateX: worldMatrix.translateX,
           translateY: worldMatrix.translateY,
           scaleX: worldMatrix.scaleX,
-          scaleY: worldMatrix.scaleY
+          scaleY: worldMatrix.scaleY,
+          isLocked: false
         };
       }
       return serialized;
@@ -21293,7 +21295,7 @@ class Items {
       if (item.itemType === "Drawing" && !item.isPointNearLine(this.pointer.point)) {
         return acc;
       }
-      const isItemTransparent = item instanceof Shape && item?.getBackgroundColor() === "none";
+      const isItemTransparent = item instanceof Shape && item.getBackgroundColor() === "none";
       const itemZIndex = this.getZIndex(item);
       const accZIndex = this.getZIndex(acc.nearest);
       if (itemZIndex > accZIndex && (!isItemTransparent || area === acc.area) || area < acc.area) {
@@ -21389,7 +21391,7 @@ class Items {
     });
     const childrenMap = new Map;
     const GroupsHTML = groups.map((group) => {
-      group.getChildrenIds().forEach((childId) => childrenMap.set(childId, group.getId()));
+      group.getChildrenIds()?.forEach((childId) => childrenMap.set(childId, group.getId()));
       const html = group.renderHTML(documentFactory);
       translateElementBy(html, -lowestCoordinates.left, -lowestCoordinates.top);
       return html;
@@ -21405,7 +21407,10 @@ class Items {
         item.setAttribute("data-end-point-x", (endX - lowestCoordinates.left).toString());
         item.setAttribute("data-end-point-y", (endY - lowestCoordinates.top).toString());
       }
-      return translateElementBy(item, -lowestCoordinates.left, -lowestCoordinates.top);
+      if (!childrenMap.get(item.id)) {
+        return translateElementBy(item, -lowestCoordinates.left, -lowestCoordinates.top);
+      }
+      return item;
     });
     for (const item of restHTML) {
       const parentFrameId = childrenMap.get(item.id);
@@ -22063,8 +22068,8 @@ class BaseItem extends Mbr {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    const { translateX, translateY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundColor = "#b2b0c3";
     div.id = this.getId();
     div.style.width = `${this.getWidth()}px`;
@@ -40248,7 +40253,7 @@ class Shape extends BaseItem {
     if (Shapes[this.shapeType].useMbrUnderPointer) {
       return this.mbr.isUnderPoint(point5);
     }
-    if (this.text.isEmpty() && (this.backgroundOpacity === 0 || this.backgroundColor === "none" || this.backgroundColor === "")) {
+    if (this.text.isEmpty() && (this.backgroundOpacity === 0 || this.backgroundColor === "none" || this.backgroundColor === "transparent" || this.backgroundColor === "")) {
       return this.path.isPointOverEdges(point5, tolerance);
     } else {
       return this.textContainer.isUnderPoint(point5) || this.path.isUnderPoint(point5);
@@ -40300,8 +40305,8 @@ class Shape extends BaseItem {
     const pathElement = Shapes[this.shapeType].path.copy().renderHTML(documentFactory);
     const paths = Array.isArray(pathElement) ? pathElement : [pathElement];
     paths.forEach((element4) => {
-      element4.setAttribute("fill", this.backgroundColor);
-      element4.setAttribute("stroke", this.borderColor);
+      element4.setAttribute("fill", resolveColor(this.backgroundColor, conf.theme, "background"));
+      element4.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, "foreground"));
       element4.setAttribute("stroke-dasharray", LinePatterns[this.borderStyle].join(", "));
       element4.setAttribute("stroke-width", this.borderWidth.toString());
       element4.setAttribute("transform-origin", "0 0");
@@ -40316,8 +40321,8 @@ class Shape extends BaseItem {
     div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.position = "absolute";
     div.setAttribute("data-shape-type", this.shapeType);
-    div.setAttribute("fill", this.backgroundColor);
-    div.setAttribute("stroke", this.borderColor);
+    div.setAttribute("fill", resolveColor(this.backgroundColor, conf.theme, "background"));
+    div.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, "foreground"));
     div.setAttribute("data-border-style", this.borderStyle);
     div.setAttribute("stroke-dasharray", LinePatterns[this.borderStyle].join(", "));
     div.setAttribute("stroke-width", this.borderWidth.toString());
@@ -40361,9 +40366,6 @@ class Shape extends BaseItem {
     this.text.updateElement();
   }
   transformPath() {
-    if (conf.isNode()) {
-      return;
-    }
     this.path = Shapes[this.shapeType].createPath(this.mbr);
     this.textContainer = Shapes[this.shapeType].textBounds.copy();
     this.text.setContainer(this.textContainer.copy());
@@ -43671,7 +43673,13 @@ class Group extends BaseItem {
     ctx.restore();
   }
   renderHTML(documentFactory) {
-    return documentFactory.createElement("div");
+    const div = documentFactory.createElement("div");
+    div.id = this.id;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
+    div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.position = "absolute";
+    div.style.transformOrigin = "0 0";
+    return div;
   }
 }
 // src/itemFactories.ts
@@ -54525,7 +54533,6 @@ class ForceGraphEngine {
   activeComponents = new Map;
   TICK_MS = 33;
   SYNC_MS = 300;
-  SOFTENING_SQ = 100 * 100;
   MIN_MOVE_PX = 0.05;
   constructor(board) {
     this.board = board;
@@ -54674,42 +54681,27 @@ class ForceGraphEngine {
     return this.board.items.listAll().filter((item) => item.itemType === "Connector");
   }
   tick() {
-    const dt = this.TICK_MS / 1000;
     const activeIds = this.getActiveNodeIds();
     const draggedIds = this.board.getDraggedItemIds();
     const allNodes = this.getNodes();
-    const nodes = allNodes.filter((item) => {
-      if (!activeIds.has(item.getId()))
-        return false;
-      if (draggedIds.has(item.getId()))
-        return false;
-      if (item.parent !== "Board" && draggedIds.has(item.parent))
-        return false;
-      return true;
-    });
-    if (nodes.length < 1)
-      return;
     const snapMap = new Map;
-    for (const item of nodes) {
+    for (const item of allNodes) {
+      if (!activeIds.has(item.getId()))
+        continue;
       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
-      });
+      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());
+    if (snap.length < 1)
+      return;
     const uf = new UnionFind;
     for (const connector of this.getConnectors()) {
       const { startItem, endItem } = connector.getConnectedItems();
-      if (startItem && endItem) {
+      if (startItem && endItem)
         uf.union(startItem.getId(), endItem.getId());
-      }
     }
     const ax = new Map;
     const ay = new Map;
@@ -54727,14 +54719,13 @@ class ForceGraphEngine {
         continue;
       const dx = s2.cx - s1.cx;
       const dy = s2.cy - s1.cy;
-      const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
+      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 stretch = dist - targetDist;
-      const forceMag = stretch * conf.FG_SPRING_K;
-      const fx = dx / dist * forceMag;
-      const fy = dy / dist * forceMag;
+      const force = (dist - 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);
       ay.set(s1.id, (ay.get(s1.id) ?? 0) + fy);
       ax.set(s2.id, (ax.get(s2.id) ?? 0) - fx);
@@ -54748,35 +54739,35 @@ class ForceGraphEngine {
           continue;
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
-        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);
-        ay.set(s2.id, (ay.get(s2.id) ?? 0) + fy);
+        const distSq = Math.max(dx * dx + dy * dy, conf.FG_MIN_DIST_SQ);
+        const force = conf.FG_REPULSION / 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);
+        ay.set(s2.id, (ay.get(s2.id) ?? 0) + dy * force);
       }
     }
     let totalEnergy = 0;
-    for (const item of nodes) {
+    for (const item of allNodes) {
       const id = item.getId();
-      if (!this.velocities.has(id)) {
+      if (!activeIds.has(id))
+        continue;
+      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) {
+      const isDragged = draggedIds.has(id) || item.parent !== "Board" && draggedIds.has(item.parent);
+      if (isDragged) {
+        vel.vx = 0;
+        vel.vy = 0;
+        continue;
+      }
+      vel.vx = (vel.vx + (ax.get(id) ?? 0)) * conf.FG_DAMPING;
+      vel.vy = (vel.vy + (ay.get(id) ?? 0)) * conf.FG_DAMPING;
+      totalEnergy += Math.abs(vel.vx) + Math.abs(vel.vy);
+      if (Math.abs(vel.vx) >= this.MIN_MOVE_PX || Math.abs(vel.vy) >= this.MIN_MOVE_PX) {
         item.transformation.applyMatrixSilent({
-          translateX: moveX,
-          translateY: moveY,
+          translateX: vel.vx,
+          translateY: vel.vy,
           scaleX: 1,
           scaleY: 1,
           shearX: 0,