rails-schema 0.1.6 → 0.1.7

data/lib/rails/schema/assets/app.js

@@ -23,6 +23,27 @@
       showThroughEdges = this.checked;
       render();
       if (selectedNode) selectNode(selectedNode);
+      autoSave();
+    });
+  }
+
+  // Freeze layout toggle — when enabled, all simulation forces are removed so
+  // nodes stay wherever they are dropped without being pushed by the simulation.
+  var manualPositioningCheckbox = document.getElementById("manual-positioning");
+  function removeAllForces() {
+    ["link", "charge", "center", "collide", "x", "y", "group"].forEach(function(name) {
+      simulation.force(name, null);
+    });
+  }
+  if (manualPositioningCheckbox) {
+    manualPositioningCheckbox.addEventListener("change", function () {
+      if (this.checked) {
+        removeAllForces();
+      } else {
+        render();
+        if (selectedNode) selectNode(selectedNode);
+      }
+      autoSave();
     });
   }
 
@@ -38,6 +59,113 @@
   var NODE_COLUMN_HEIGHT = 18;
   var NODE_PADDING = 8;
 
+  // Layout persistence
+  function computeFingerprint() {
+    var ids = nodes.map(function(n) { return n.id; }).sort().join(",");
+    var hash = 5381;
+    for (var i = 0; i < ids.length; i++) {
+      hash = ((hash << 5) + hash + ids.charCodeAt(i)) & 0xffffffff;
+    }
+    return hash.toString(16);
+  }
+  var layoutStorageKey = "rails-schema-layout:" + computeFingerprint();
+
+  function serializeLayout() {
+    var positions = {};
+    nodes.forEach(function(n) {
+      if (n.x !== undefined && n.y !== undefined) {
+        positions[n.id] = { x: n.x, y: n.y };
+      }
+    });
+    return {
+      version: 1,
+      schemaFingerprint: computeFingerprint(),
+      nodePositions: positions,
+      visibleModels: Array.from(visibleModels),
+      zoomTransform: { k: zoomTransform.k, x: zoomTransform.x, y: zoomTransform.y },
+      collapsedGroups: Array.from(collapsedGroups),
+      manualPositioning: manualPositioningCheckbox ? manualPositioningCheckbox.checked : false,
+      showThroughEdges: showThroughEdges
+    };
+  }
+
+  function applyLayout(layout) {
+    if (!layout || layout.version !== 1) return;
+
+    var nodeIdSet = new Set(nodes.map(function(n) { return n.id; }));
+
+    // Restore visibility
+    if (layout.visibleModels) {
+      visibleModels.clear();
+      layout.visibleModels.forEach(function(id) {
+        if (nodeIdSet.has(id)) visibleModels.add(id);
+      });
+    }
+
+    // Restore collapsed groups
+    collapsedGroups.clear();
+    if (layout.collapsedGroups) {
+      layout.collapsedGroups.forEach(function(g) { collapsedGroups.add(g); });
+    }
+
+    // Restore through edges
+    if (layout.showThroughEdges !== undefined) {
+      showThroughEdges = layout.showThroughEdges;
+      if (throughCheckbox) throughCheckbox.checked = showThroughEdges;
+    }
+
+    // Rebuild with restored visibility
+    buildSidebar();
+    render();
+
+    var manual = !!layout.manualPositioning;
+
+    // Apply positions AFTER render created the simulation nodes. Pin with fx/fy
+    // only when restoring into manual mode; otherwise seed x/y as initial
+    // conditions and let the simulation evolve from there.
+    if (layout.nodePositions) {
+      nodes.forEach(function(n) {
+        var saved = layout.nodePositions[n.id];
+        if (saved) {
+          n.x = saved.x;
+          n.y = saved.y;
+          if (manual) {
+            n.fx = saved.x;
+            n.fy = saved.y;
+          } else {
+            n.fx = null;
+            n.fy = null;
+          }
+        }
+      });
+    }
+
+    if (manualPositioningCheckbox) {
+      manualPositioningCheckbox.checked = manual;
+    }
+    if (manual) {
+      removeAllForces();
+    }
+
+    // Update display
+    ticked();
+
+    // Restore zoom
+    if (layout.zoomTransform) {
+      var t = layout.zoomTransform;
+      var transform = d3.zoomIdentity.translate(t.x, t.y).scale(t.k);
+      svg.call(zoom.transform, transform);
+    }
+  }
+
+  function autoSave() {
+    try {
+      localStorage.setItem(layoutStorageKey, JSON.stringify(serializeLayout()));
+    } catch (e) {
+      // localStorage full or unavailable — silently ignore
+    }
+  }
+
   // Bezier curve tuning for edge routing
   var MIN_LOOP_OFFSET = 60;      // Minimum control-point distance for same-side (loop) edges
   var LOOP_OFFSET_RATIO = 0.5;   // Proportion of vertical gap used for loop curve spread
@@ -287,7 +415,8 @@
       .force("charge", d3.forceManyBody().strength(-600))
       .force("center", d3.forceCenter(svgEl.clientWidth / 2, svgEl.clientHeight / 2))
       .force("collide", d3.forceCollide().radius(function(d) { return Math.max(NODE_WIDTH, d._height) / 2 + 50; }))
-      .on("tick", ticked);
+      .on("tick", ticked)
+      .on("end", autoSave);
 
     if (config.grouping_enabled) {
       simulation
@@ -491,6 +620,9 @@
     currentSim = setupSimulation();
     renderEdges(currentSim.simEdges);
     renderNodes(currentSim.simNodes);
+    if (manualPositioningCheckbox && manualPositioningCheckbox.checked) {
+      removeAllForces();
+    }
   }
 
   function renderEdges(simEdges) {
@@ -669,8 +801,10 @@
   }
 
   function ticked() {
-    layoutOrphans();
-    layoutSelfRefNodes();
+    if (!manualPositioningCheckbox?.checked) {
+      layoutOrphans();
+      layoutSelfRefNodes();
+    }
     edgeGroup.selectAll(".edge-group").each(function(d) {
       var g = d3.select(this);
       var src = d.source;
@@ -820,8 +954,11 @@
   function dragEnded(event, d) {
     if (isOrphan(d)) return;
     if (!event.active) simulation.alphaTarget(0);
-    d.fx = null;
-    d.fy = null;
+    if (!manualPositioningCheckbox?.checked) {
+      d.fx = null;
+      d.fy = null;
+    }
+    autoSave();
   }
 
   // Zoom
@@ -831,6 +968,7 @@
       zoomTransform = event.transform;
       container.attr("transform", event.transform);
       document.getElementById("zoom-info").textContent = Math.round(event.transform.k * 100) + "%";
+      autoSave();
     });
 
   svg.call(zoom);
@@ -870,6 +1008,7 @@
     render();
     selectNode(nodeId);
     setTimeout(fitToScreen, 100);
+    autoSave();
   }
 
   function deselectNode() {
@@ -979,6 +1118,7 @@
       buildSidebar();
       render();
       setTimeout(fitToScreen, 100);
+      autoSave();
     });
 
     div.addEventListener("click", function(e) {
@@ -1039,6 +1179,7 @@
           buildSidebar();
           render();
           setTimeout(fitToScreen, 100);
+          autoSave();
         });
 
         var clickTimer = null;
@@ -1057,6 +1198,7 @@
             var nowCollapsed = collapsedGroups.has(groupKey);
             content.style.display = nowCollapsed ? "none" : "";
             toggle.innerHTML = nowCollapsed ? "&#9654;" : "&#9660;";
+            autoSave();
           }, 250);
         });
 
@@ -1073,6 +1215,7 @@
           buildSidebar();
           render();
           setTimeout(fitToScreen, 100);
+          autoSave();
         });
 
         return header;
@@ -1180,6 +1323,7 @@
     buildSidebar();
     render();
     setTimeout(fitToScreen, 100);
+    autoSave();
   });
 
   document.getElementById("deselect-all-btn").addEventListener("click", function() {
@@ -1187,6 +1331,7 @@
     buildSidebar();
     render();
     setTimeout(fitToScreen, 100);
+    autoSave();
   });
 
   // Collapse/Expand all groups
@@ -1221,6 +1366,7 @@
       document.querySelectorAll(".group-toggle").forEach(function(el) {
         el.innerHTML = shouldExpand ? "\u25BC" : "\u25B6";
       });
+      autoSave();
     });
   }
 
@@ -1372,13 +1518,64 @@
     triggerDownload(blob, "schema-diagram.mmd");
   }
 
+  // File menu dropdown
+  var fileMenuBtn = document.getElementById("file-menu-btn");
+  var fileMenu = document.getElementById("file-menu");
+  fileMenuBtn.addEventListener("click", function(e) {
+    e.stopPropagation();
+    fileMenu.classList.toggle("open");
+  });
+  document.addEventListener("click", function() {
+    fileMenu.classList.remove("open");
+  });
+
   // Export button listener
   document.getElementById("export-mermaid-btn").addEventListener("click", function() { exportMermaid(); });
 
+  // Save Layout
+  document.getElementById("save-layout-btn").addEventListener("click", function() {
+    var layout = serializeLayout();
+    var blob = new Blob([JSON.stringify(layout, null, 2)], { type: "application/json" });
+    var title = document.title.replace(/[^a-zA-Z0-9]/g, "-").replace(/-+/g, "-");
+    triggerDownload(blob, title + "-layout.json");
+  });
+
+  // Load Layout
+  var loadLayoutInput = document.getElementById("load-layout-input");
+  document.getElementById("load-layout-btn").addEventListener("click", function() {
+    loadLayoutInput.click();
+  });
+  loadLayoutInput.addEventListener("change", function() {
+    var file = this.files[0];
+    if (!file) return;
+    var reader = new FileReader();
+    reader.onload = function(e) {
+      try {
+        var layout = JSON.parse(e.target.result);
+        applyLayout(layout);
+        autoSave();
+      } catch (err) {
+        console.error("Failed to load layout:", err);
+      }
+    };
+    reader.readAsText(file);
+    this.value = "";
+  });
+
   // Init
   buildSidebar();
   render();
 
-  // Fit after simulation settles
-  setTimeout(function() { fitToScreen(); }, 1500);
+  // Restore saved layout or fit to screen
+  var savedLayout = null;
+  try {
+    var stored = localStorage.getItem(layoutStorageKey);
+    if (stored) savedLayout = JSON.parse(stored);
+  } catch (e) { /* ignore */ }
+
+  if (savedLayout) {
+    applyLayout(savedLayout);
+  } else {
+    setTimeout(function() { fitToScreen(); }, 1500);
+  }
 })();

data/lib/rails/schema/assets/style.css

@@ -142,11 +142,65 @@ body {
   margin: 0 4px;
 }
 
+#toolbar label.toolbar-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+#toolbar label.toolbar-label input[type="checkbox"] {
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--accent);
+}
+
 #toolbar .shortcuts-hint {
   font-size: 11px;
   color: var(--text-muted);
 }
 
+.toolbar-dropdown {
+  position: relative;
+}
+
+.toolbar-dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  z-index: 300;
+  min-width: 160px;
+}
+
+.toolbar-dropdown-menu.open {
+  display: flex;
+  flex-direction: column;
+}
+
+.toolbar-dropdown-menu button {
+  border: none;
+  border-radius: 0;
+  text-align: left;
+  padding: 8px 12px;
+}
+
+.toolbar-dropdown-menu button:first-child {
+  border-radius: 6px 6px 0 0;
+}
+
+.toolbar-dropdown-menu button:last-of-type {
+  border-radius: 0 0 6px 6px;
+}
+
 /* Sidebar */
 #sidebar {
   width: var(--sidebar-width);

data/lib/rails/schema/assets/template.html.erb

@@ -42,7 +42,17 @@
       <button id="fit-btn" title="Fit to screen (F)">Fit</button>
       <button id="theme-btn" title="Toggle theme">Theme</button>
       <span class="toolbar-divider"></span>
-      <button id="export-mermaid-btn" title="Export as Mermaid (Markdown)">Export Mermaid</button>
+      <label class="toolbar-label" for="manual-positioning"><input type="checkbox" id="manual-positioning">Manual Positioning</label>
+      <span class="toolbar-divider"></span>
+      <div class="toolbar-dropdown">
+        <button id="file-menu-btn">File &#9660;</button>
+        <div class="toolbar-dropdown-menu" id="file-menu">
+          <button id="export-mermaid-btn">Export Mermaid</button>
+          <button id="save-layout-btn">Save Layout</button>
+          <button id="load-layout-btn">Load Layout</button>
+          <input type="file" id="load-layout-input" accept=".json" style="display:none">
+        </div>
+      </div>
       <span class="shortcuts-hint">/ search · Esc deselect · F fit</span>
     </div>
 

data/lib/rails/schema/version.rb

@@ -2,6 +2,6 @@
 
 module Rails
   module Schema
-    VERSION = "0.1.6"
+    VERSION = "0.1.7"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-schema
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 0.1.7
 platform: ruby
 authors:
 - Andrei Kislichenko