diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte
index 34a0ac5fb..73b4e6f49 100644
--- a/packages/web/src/designer/Designer.svelte
+++ b/packages/web/src/designer/Designer.svelte
@@ -442,6 +442,8 @@
       nodes[table.designerId] = node;
       node.width = rect.right - rect.left;
       node.height = rect.bottom - rect.top;
+      node.initX = (rect.right + rect.left) / 2;
+      node.initY = (rect.bottom + rect.top) / 2;
       // console.log('RECT', rect);
     }
 
diff --git a/packages/web/src/designer/SpringyAlg.ts b/packages/web/src/designer/SpringyAlg.ts
index 778c02815..d417a979c 100644
--- a/packages/web/src/designer/SpringyAlg.ts
+++ b/packages/web/src/designer/SpringyAlg.ts
@@ -65,9 +65,10 @@ class Vector {
 }
 
 class Node {
-  // must be set by renderer
   width: number = 0;
   height: number = 0;
+  initX: number = null;
+  initY: number = null;
 
   constructor(public id: number, public data: {}) {}
 }
@@ -196,7 +197,11 @@ export class ForceDirectedLayout {
   point(node) {
     if (!(node.id in this.nodePoints)) {
       var mass = node.data.mass !== undefined ? node.data.mass : MASS;
-      this.nodePoints[node.id] = new ForceDirectedPoint(Vector.random(), mass, node);
+      this.nodePoints[node.id] = new ForceDirectedPoint(
+        node.initX && node.initY ? new Vector(node.initX, node.initY) : Vector.random(),
+        mass,
+        node
+      );
     }
 
     return this.nodePoints[node.id];