erd 0.6.4 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 614e01232d2efeca93c7bed35a751e25a9ee991e2f51e80e171f918fc7f243ef
-  data.tar.gz: 357077faae8695c34f34fda83f3f4437c95b1725d452c4b262cfbf68648edf28
+  metadata.gz: 35c1ad5ad3318d07d2faeb5836b2ec12e8132088994985d6d0f0342addd7685d
+  data.tar.gz: 77ce179c5b2c8cbe58095320d012e5aab188c3aa0d23d73e9de5036564e2cf1f
 SHA512:
-  metadata.gz: 07a9c92343e1d277fbe84f944f08c8d3adb7ae1e166bd04b59606d7325ed25adb2c60f03aee27696e8bda48fc56ba182fde0a31cb0110aa19ad81a41ea608285
-  data.tar.gz: 15f84992ff7fc3d83cf3df98902afaa22df912ea860345755dd21b06a7521c2d86b2a997d14ebd2cb2d59594ebf211f72271f0375b766c6bc526a58f84518144
+  metadata.gz: c02778a0c99593cd9ae3b8f5c27ccb0ea11f8ad6aa719a023f8de9ad40a51352ac33d17e92035afec8faad65ad7f1944eb032a65c98d9570f4840843121f65d5
+  data.tar.gz: 5f227492c2234358069825ca797188e6ec92e74cab71172de589077c1e52d4e3d104e04eedbd3e3e3b84b54dea911c8e61970893fdf9c7b4cd7ada16a2b98d31

data/app/controllers/erd/erd_controller.rb

@@ -6,62 +6,64 @@ require 'erd/application_controller'
 
 module Erd
   class ErdController < ::Erd::ApplicationController
+    POSITIONS_JSON_FILE = Rails.root.join('tmp/erd_positions.json').freeze
+
     def index
-      plain = generate_plain
-      positions = if (json = Rails.root.join('tmp/erd_positions.json')).exist?
-        ActiveSupport::JSON.decode json.read
-      else
-        {}
-      end
-      @erd = render_plain plain, positions
+      @erd = render_plain generate_plain, saved_positions
+    end
 
+    def edit
+      @erd = render_plain generate_plain, saved_positions, true
       @migrations = Erd::Migrator.status
     end
 
     def update
+      if params[:position_changes].present?
+        position_changes = ActiveSupport::JSON.decode(params[:position_changes])
+        positions = saved_positions
+        positions.merge! position_changes.transform_keys(&:tableize)
+        POSITIONS_JSON_FILE.open('w') {|f| f.write positions.to_json }
+      end
+
       changes = params[:changes].present? ? ActiveSupport::JSON.decode(params[:changes]) : []
       executed_migrations, failed_migrations = [], []
       changes.each do |row|
         begin
           action, model, column, from, to = row['action'], row['model'], row['column'], row['from'], row['to']
-          if action == 'move'
+
+          case action
+          when 'create_model'
+            columns = column.split(' ').compact
+            generated_migration_file = Erd::GenaratorRunner.execute_generate_model model, columns
+          when 'remove_model'
             model = model.tableize
-            json_file = Rails.root.join('tmp', 'erd_positions.json')
-            positions = json_file.exist? ? ActiveSupport::JSON.decode(json_file.read) : {}
-            positions[model] = to
-            json_file.open('w') {|f| f.write positions.to_json}
+            generated_migration_file = Erd::GenaratorRunner.execute_generate_migration "drop_#{model}"
+            gsub_file generated_migration_file, /def (up|change).*  end/m, "def change\n    drop_table :#{model}\n  end"
+          when 'rename_model'
+            _model, from, to = from.tableize, to.tableize, model.tableize
+            generated_migration_file = Erd::GenaratorRunner.execute_generate_migration "rename_#{from}_to_#{to}"
+            gsub_file generated_migration_file, /def (up|change).*  end/m, "def change\n    rename_table :#{from}, :#{to}\n  end"
+          when 'add_column'
+            model = model.tableize
+            name_and_type = column.scan(/(.*)\((.*?)\)/).first
+            name, type = name_and_type[0], name_and_type[1]
+            generated_migration_file = Erd::GenaratorRunner.execute_generate_migration "add_#{name}_to_#{model}", ["#{name}:#{type}"]
+          when 'rename_column'
+            model = model.tableize
+            generated_migration_file = Erd::GenaratorRunner.execute_generate_migration "rename_#{model}_#{from}_to_#{to}"
+            gsub_file generated_migration_file, /def (up|change).*  end/m, "def change\n    rename_column :#{model}, :#{from}, :#{to}\n  end"
+          when 'alter_column'
+            model = model.tableize
+            generated_migration_file = Erd::GenaratorRunner.execute_generate_migration "change_#{model}_#{column}_type_to_#{to}"
+            gsub_file generated_migration_file, /def (up|change).*  end/m, "def change\n    change_column :#{model}, :#{column}, :#{to}\n  end"
+          when 'move'
+            # do nothing
           else
-            case action
-            when 'create_model'
-              columns = column.split(' ').compact
-              generated_migration_file = Erd::GenaratorRunner.execute_generate_model model, columns
-            when 'remove_model'
-              model = model.tableize
-              generated_migration_file = Erd::GenaratorRunner.execute_generate_migration "drop_#{model}"
-              gsub_file generated_migration_file, /def (up|change).*  end/m, "def change\n    drop_table :#{model}\n  end"
-            when 'rename_model'
-              _model, from, to = from.tableize, to.tableize, model.tableize
-              generated_migration_file = Erd::GenaratorRunner.execute_generate_migration "rename_#{from}_to_#{to}"
-              gsub_file generated_migration_file, /def (up|change).*  end/m, "def change\n    rename_table :#{from}, :#{to}\n  end"
-            when 'add_column'
-              model = model.tableize
-              name_and_type = column.scan(/(.*)\((.*?)\)/).first
-              name, type = name_and_type[0], name_and_type[1]
-              generated_migration_file = Erd::GenaratorRunner.execute_generate_migration "add_#{name}_to_#{model}", ["#{name}:#{type}"]
-            when 'rename_column'
-              model = model.tableize
-              generated_migration_file = Erd::GenaratorRunner.execute_generate_migration "rename_#{model}_#{from}_to_#{to}"
-              gsub_file generated_migration_file, /def (up|change).*  end/m, "def change\n    rename_column :#{model}, :#{from}, :#{to}\n  end"
-            when 'alter_column'
-              model = model.tableize
-              generated_migration_file = Erd::GenaratorRunner.execute_generate_migration "change_#{model}_#{column}_type_to_#{to}"
-              gsub_file generated_migration_file, /def (up|change).*  end/m, "def change\n    change_column :#{model}, :#{column}, :#{to}\n  end"
-            else
-              raise "unexpected action: #{action}"
-            end
-            Erd::Migrator.run_migrations :up => generated_migration_file
-            executed_migrations << generated_migration_file
+            raise "unexpected action: #{action}"
           end
+
+          Erd::Migrator.run_migrations :up => generated_migration_file
+          executed_migrations << generated_migration_file
         rescue ::Erd::MigrationError => e
           failed_migrations << e.message
         end
@@ -77,6 +79,10 @@ module Erd
 
     private
 
+    def saved_positions
+      POSITIONS_JSON_FILE.exist? ? ActiveSupport::JSON.decode(POSITIONS_JSON_FILE.read) : {}
+    end
+
     def generate_plain
       if Rails.respond_to?(:autoloaders) && Rails.autoloaders.try(:zeitwerk_enabled?)
         Zeitwerk::Loader.eager_load_all
@@ -115,20 +121,21 @@ module Erd
       g.output('plain' => String)
     end
 
-    def render_plain(plain, positions)
+    def render_plain(plain, positions, edit_mode = false)
       _scale, svg_width, svg_height = plain.scan(/\Agraph ([\d\.]+) ([\d\.]+) ([\d\.]+)$/).first
       # node name x y width height label style shape color fillcolor
-      max_model_x, max_model_y = 0, 0
       models = plain.scan(/^node ([^ ]+) ([\d\.]+) ([\d\.]+) ([\d\.]+) ([\d\.]+) ([^ ]+) [^ ]+ [^ ]+ [^ ]+ [^ ]+\n/m).map {|model_name, x, y, width, height, label|
         columns = label.gsub("\\\n", '').split('|')[1].split('\l').map {|name_and_type| name_and_type.scan(/(.*?)\((.*?)\)/).first }.map {|n, t| {:name => n, :type => t} }
         custom_x, custom_y = positions[model_name.tableize].try(:split, ',')
-        h = {:model => model_name, :x => (custom_x || (BigDecimal(x) * 72).round), :y => (custom_y || (BigDecimal(y) * 72).round), :width => (BigDecimal(width) * 72).round, :height => height, :columns => columns}
-        max_model_x, max_model_y = [h[:x].to_i + h[:width].to_i, max_model_x, 1024].max, [h[:y].to_i + h[:height].to_i, max_model_y, 768].max
-        h
+        {:model => model_name, :x => (custom_x || (BigDecimal(x) * 72).round), :y => (custom_y || (BigDecimal(y) * 72).round), :width => (BigDecimal(width) * 72).round, :height => (BigDecimal(height) * 72).round, :columns => columns}
       }.compact
+      max_model_x = models.map {|m| m[:x].to_f + m[:width].to_f }.max
+      erd_width = [[(BigDecimal(svg_width) * 72).round, max_model_x].min + 150, 1024].max
+      max_model_y = models.map {|m| m[:y].to_f + m[:height].to_f }.max
+      erd_height = [[(BigDecimal(svg_height) * 72).round, max_model_y].min + 150, 768].max
       # edge tail head n x1 y1 .. xn yn [label xl yl] style color
       edges = plain.scan(/^edge ([^ ]+)+ ([^ ]+)/).map {|from, to| {:from => from, :to => to}}
-      render_to_string 'erd/erd/erd', :layout => nil, :locals => {:width => [(BigDecimal(svg_width) * 72).round, max_model_x].max, :height => [(BigDecimal(svg_height) * 72).round, max_model_y].max, :models => models, :edges => edges}
+      render_to_string 'erd/erd/erd', :layout => nil, :locals => {:width => erd_width, :height => erd_height, :models => models, :edges => edges, :edit_mode => edit_mode}
     end
 
     def gsub_file(path, flag, *args, &block)

data/app/views/erd/erd/_column.html.erb

@@ -2,12 +2,16 @@
   <table>
     <tr>
       <td>
-        <span class="column_name_text"><%= column[:name] %></span>
-        <form class="rename_column_form"><span><input name="model" type="hidden" value="<%= model[:model] %>" /><input name="column" type="hidden" value="<%= column[:name] %>" /><input name="to" type="text" /><input type="submit" value="Change" /></span><a href="#!" class="cancel">Cancel</a></form>
+        <span class="column_name_text<%= "#{' edit' if edit_mode}" %>"><%= column[:name] %></span>
+  <% if edit_mode %>
+          <form class="rename_column_form"><span><input name="model" type="hidden" value="<%= model[:model] %>" /><input name="column" type="hidden" value="<%= column[:name] %>" /><input name="to" type="text" /><input type="submit" value="Change" /></span><a href="#!" class="cancel">Cancel</a></form>
+  <% end %>
       </td>
       <td>
-        <span class="column_type_text <%= column[:type] %>"><%= column[:type] %></span>
-        <form class="alter_column_form"><span><input name="model" type="hidden" value="<%= model[:model] %>" /><input name="column" type="hidden" value="<%= column[:name] %>" /><input name="type" type="hidden" value="<%= column[:type] %>" /><input name="to" type="text" /><input type="submit" value="Change" /></span><a href="#!" class="cancel">Cancel</a></form>
+        <span class="column_type_text <%= column[:type] %><%= "#{' edit' if edit_mode}" %>"><%= column[:type] %></span>
+  <% if edit_mode %>
+          <form class="alter_column_form"><span><input name="model" type="hidden" value="<%= model[:model] %>" /><input name="column" type="hidden" value="<%= column[:name] %>" /><input name="type" type="hidden" value="<%= column[:type] %>" /><input name="to" type="text" /><input type="submit" value="Change" /></span><a href="#!" class="cancel">Cancel</a></form>
+  <% end %>
       </td>
     </tr>
   </table>

data/app/views/erd/erd/_model.html.erb

@@ -1,28 +1,34 @@
 <div id="erd-<%= model[:model] %>" class="model" style="top: <%= model[:y] %>px; left: <%= model[:x] %>px;" data-model_name="<%= model[:model] %>">
-  <a href="#!" class="close"><%= image_tag '/erd/close.png' %></a>
-  <div class="model_name">
+  <% if edit_mode %>
+    <a href="#!" class="close"><%= image_tag '/erd/close.png' %></a>
+  <% end %>
+  <div class="model_name<%= "#{' edit' if edit_mode}" %>">
     <div class="model_name_text"><%= model[:model] %></div>
-    <form class="rename_model_form">
-      <table>
-        <tr>
-          <td>
-            <input name="model" type="hidden" value="<%= model[:model] %>"/>
-          </td>
-          <td>
-            <input name="to" type="text" /><input type="submit" value="Change"/>
-          </td>
-        </tr>
-      </table>
-      <a href="#!" class="cancel">Cancel</a>
-    </form>
+    <% if edit_mode %>
+      <form class="rename_model_form">
+        <table>
+          <tr>
+            <td>
+              <input name="model" type="hidden" value="<%= model[:model] %>"/>
+            </td>
+            <td>
+              <input name="to" type="text" /><input type="submit" value="Change"/>
+            </td>
+          </tr>
+        </table>
+        <a href="#!" class="cancel">Cancel</a>
+      </form>
+    <% end %>
   </div>
   <div class="columns">
     <ul>
-      <%= render :partial => 'erd/erd/column', :collection => model[:columns], :locals => {:model => model} -%>
+      <%= render :partial => 'erd/erd/column', :collection => model[:columns], :locals => {:model => model, :edit_mode => edit_mode} -%>
     </ul>
   </div>
   <div class="add_column_box">
-    <a href="#!" class="add_column">add column</a>
+    <% if edit_mode %>
+      <a href="#!" class="add_column">add column</a>
+    <% end %>
     <form class="add_column_form">
       <input name="model" type="hidden" value="<%= model[:model] %>" />
       <table>

data/app/views/erd/erd/edit.html.erb

@@ -0,0 +1,87 @@
+<div id="erd_box">
+  <div id="erd_container">
+    <%=raw @erd %>
+  </div>
+  <div id="open_migration"><%= image_tag '/erd/angle-left.png' %></div>
+  <div id="migration">
+    <div id="close_migration"><%= image_tag '/erd/angle-right.png' %></div>
+    <%- if flash[:executed_migrations].present? -%>
+      <div id="executed">
+        <h2>Successfully executed following <%= flash[:executed_migrations].values.flatten.count %> migrations!</h2>
+        <%- [:up, :down].each do |direction| -%>
+          <%- if flash[:executed_migrations][direction].present? -%>
+            <h3><%= direction %></h3>
+            <ul>
+            <%- flash[:executed_migrations][direction].each do |m| -%>
+              <li><%= File.basename m.to_s %></li>
+            <%- end -%>
+            </ul>
+          <%- end -%>
+        <%- end -%>
+      </div>
+    <%- end -%>
+    <%- if flash[:failed_migrations].present? -%>
+      <div id="failed">
+        <h2>failed migrations</h2>
+        <ul>
+        <%- flash[:failed_migrations].each do |m| -%>
+          <li><%= m %></li>
+        <%- end -%>
+        </ul>
+      </div>
+    <%- end -%>
+    <table id="changes">
+      <caption>schema changes</caption>
+      <thead><tr><th>action</th><th>model</th><th>column</th><th>from</th><th>to</th></tr></thead>
+      <tbody></tbody>
+    </table>
+    <%= form_tag '/erd', :method => :put, :id => 'changes_form' do %>
+      <%= hidden_field_tag 'changes' %>
+      <%= hidden_field_tag 'position_changes' %>
+      <%= submit_tag 'save changes' %>
+    <% end %>
+    <%= form_tag '/erd/migrate', :method => :put, :id => 'migrate_form' do %>
+      <ul id="open_buttons">
+        <li><button id="open_up" type="button">up</button></li>
+        <li><button id="open_down" type="button">down</button></li>
+        <li><button id="close_all" type="button">close</button></li>
+      </ul>
+      <table id="migration_status">
+        <caption>migration status</caption>
+        <thead>
+          <tr><th class="status">status</th><th class="version">version</th><th class="name">name</th></tr>
+          <tr><td colspan="3" class="migrations">
+            <button>UNFOLD ALL</button>
+            <%= @migrations.count %> migrations in total (up: <%= @migrations.count {|m| m[:status] == 'up'} %>, down: <%= @migrations.count {|m| m[:status] == 'down'} %>)
+          </td></tr>
+        </thead>
+        <tbody>
+          <%- @migrations.each do |m| -%>
+            <tr class="<%= m[:status] %>">
+              <td><label><%= check_box_tag (m[:status] == 'up' ? 'down[]' : 'up[]'), m[:filename], false, :id => "check_#{m[:filename]}" %><%= m[:status] %></label></td>
+              <td><%= m[:version] %></td>
+              <td class="migration_file_name"><%= m[:name] %></td>
+            </tr>
+          <%- end -%>
+        </tbody>
+      </table>
+      <%= submit_tag 'run migrations' %>
+    <% end %>
+  </div>
+  <a href="#" id='open_create_model_dialog'%>Create Model</a>
+  <div id="create_model_form">
+    <form>
+      Model Name: <input id="new_model_name" name="new_model_name" type="text" /><br>
+      <table id="create_model_table">
+        <tbody>
+          <tr>
+            <td><input name="new_model_column_name_1" type="text" /></td>
+            <td class="separator">:</td>
+            <td><input name="new_model_column_type_1" type="text" value="string" /></td>
+          </tr>
+        </tbody>
+      </table>
+      <div><a href="#" id="new_model_add_column" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span class="ui-button-text">Add More Column</span></a></div>
+    </form>
+  </div>
+</div>

data/app/views/erd/erd/erd.html.erb

@@ -1,4 +1,4 @@
 <div id="erd" data-svg_width="<%= width %>" data-svg_height="<%= height %>">
-  <%= render :partial => 'erd/erd/model', :collection => models -%>
+  <%= render :partial => 'erd/erd/model', :collection => models, :locals => {:edit_mode => edit_mode} -%>
   <script>window.raw_edges = <%= edges.to_json.html_safe %>;</script>
 </div>

data/app/views/erd/erd/index.html.erb

@@ -2,85 +2,16 @@
   <div id="erd_container">
     <%=raw @erd %>
   </div>
-  <div id="open_migration"><%= image_tag '/erd/angle-left.png' %></div>
-  <div id="migration">
-    <div id="close_migration"><%= image_tag '/erd/angle-right.png' %></div>
-    <%- if flash[:executed_migrations].present? -%>
-      <div id="executed">
-        <h2>Successfully executed following <%= flash[:executed_migrations].values.flatten.count %> migrations!</h2>
-        <%- [:up, :down].each do |direction| -%>
-          <%- if flash[:executed_migrations][direction].present? -%>
-            <h3><%= direction %></h3>
-            <ul>
-            <%- flash[:executed_migrations][direction].each do |m| -%>
-              <li><%= File.basename m.to_s %></li>
-            <%- end -%>
-            </ul>
-          <%- end -%>
-        <%- end -%>
-      </div>
-    <%- end -%>
-    <%- if flash[:failed_migrations].present? -%>
-      <div id="failed">
-        <h2>failed migrations</h2>
-        <ul>
-        <%- flash[:failed_migrations].each do |m| -%>
-          <li><%= m %></li>
-        <%- end -%>
-        </ul>
-      </div>
-    <%- end -%>
-    <table id="changes">
-      <caption>schema changes</caption>
-      <thead><tr><th>action</th><th>model</th><th>column</th><th>from</th><th>to</th></tr></thead>
-      <tbody></tbody>
-    </table>
-    <%= form_tag '/erd', :method => :put, :id => 'changes_form' do %>
-      <%= hidden_field_tag 'changes' %>
-      <%= submit_tag 'save changes' %>
-    <% end %>
-    <%= form_tag '/erd/migrate', :method => :put, :id => 'migrate_form' do %>
-      <ul id="open_buttons">
-        <li><button id="open_up" type="button">up</button></li>
-        <li><button id="open_down" type="button">down</button></li>
-        <li><button id="close_all" type="button">close</button></li>
-      </ul>
-      <table id="migration_status">
-        <caption>migration status</caption>
-        <thead>
-          <tr><th class="status">status</th><th class="version">version</th><th class="name">name</th></tr>
-          <tr><td colspan="3" class="migrations">
-            <button>UNFOLD ALL</button>
-            <%= @migrations.count %> migrations in total (up: <%= @migrations.count {|m| m[:status] == 'up'} %>, down: <%= @migrations.count {|m| m[:status] == 'down'} %>)
-          </td></tr>
-        </thead>
-        <tbody>
-          <%- @migrations.each do |m| -%>
-            <tr class="<%= m[:status] %>">
-              <td><label><%= check_box_tag (m[:status] == 'up' ? 'down[]' : 'up[]'), m[:filename] %><%= m[:status] %></label></td>
-              <td><%= m[:version] %></td>
-              <td class="migration_file_name"><%= m[:name] %></td>
-            </tr>
-          <%- end -%>
-        </tbody>
-      </table>
-      <%= submit_tag 'run migrations' %>
-    <% end %>
-  </div>
-  <a href="#" id='open_create_model_dialog'%>Create Model</a>
-  <div id="create_model_form">
-    <form>
-      Model Name: <input id="new_model_name" name="new_model_name" type="text" /><br>
-      <table id="create_model_table">
-        <tbody>
-          <tr>
-            <td><input name="new_model_column_name_1" type="text" /></td>
-            <td class="separator">:</td>
-            <td><input name="new_model_column_type_1" type="text" value="string" /></td>
-          </tr>
-        </tbody>
-      </table>
-      <div><a href="#" id="new_model_add_column" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span class="ui-button-text">Add More Column</span></a></div>
-    </form>
-  </div>
+  <%= form_tag '/erd', :method => :put, :id => 'changes_form' do %>
+    <%= hidden_field_tag 'position_changes' %>
+  <% end %>
+  <input id="drawer_switch" type="checkbox">
+  <label id="drawer_hide_label" class="drawer_switch_label" for="drawer_switch">&gt;&nbsp;&nbsp;Hide Buttons</label>
+  <label id="drawer_show_label" class="drawer_switch_label" for="drawer_switch">&lt;</label>
+  <nav id="buttons">
+    <ul>
+      <li><a href="#!" id="save_position_changes" class="menu_button">Save Position Changes</a></li>
+      <li><%= link_to 'Edit the Database', :edit, :id => 'link_to_edit', :class => 'menu_button' %></li>
+    </ul>
+  </nav>
 </div>

data/config/routes.rb

@@ -2,6 +2,7 @@
 
 Erd::Engine.routes.draw do
   get '/' => 'erd#index'
+  get 'edit' => 'erd#edit'
   put '/' => 'erd#update'
   put '/migrate' => 'erd#migrate', :as => 'migrate'
   root :to => 'erd#index'

data/lib/erd/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Erd
-  VERSION = '0.6.4'
+  VERSION = '0.7.0'
 end

data/public/erd/erd.css

@@ -219,8 +219,9 @@ li {
       box-shadow: rgba(0, 0, 0, 0.7) 0 2px 2px; }
     #erd .model .model_name {
       border-bottom: 1px #444444 solid;
-      cursor: pointer;
       margin: 1px 5px 0 5px auto; }
+    #erd .model .model_name.edit {
+      cursor: pointer; }
       #erd .model .model_name .model_name_text {
         text-align: center;
         display: block;
@@ -229,10 +230,10 @@ li {
         background: -ms-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
         background: -o-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
         background: linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
-        font-size: 13px;
+        font-size: 15px;
         font-weight: bold;
         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-        line-height: 2.2;
+        line-height: 1.6;
         padding: 0 0.8em; }
         #erd .model .model_name .model_name_text.unsaved {
           background: #fffebe;
@@ -314,7 +315,7 @@ li {
     font-size: small;
     display: block;
     padding: 0 5px;
-    line-height: 2;
+    line-height: 1.6;
     background: #444444;
     color: white;
     text-decoration: none; }
@@ -328,9 +329,9 @@ li {
 
 .columns .column {
   border-bottom: dotted 1px #cccccc;
-  padding: 0 0.8em;
+  padding: 0 0.5em;
   clear: both;
-  line-height: 28px;
+  line-height: 20px;
   font-size: 14px; }
   .columns .column table {
     width: 100%; }
@@ -338,12 +339,12 @@ li {
     background: #f9f9f9; }
   .columns .column:last-child {
     border-bottom: none; }
-  .columns .column .column_name_text,
-  .columns .column .column_type_text {
+  .columns .column .column_name_text.edit,
+  .columns .column .column_type_text.edit {
     cursor: pointer; }
   .columns .column .column_name_text {
     margin: 0 1.4em 0 0; }
-    .columns .column .column_name_text:hover {
+    .columns .column .column_name_text.edit:hover {
       text-decoration: underline; }
   .columns .column.unsaved {
     background: #fffebe;
@@ -377,11 +378,11 @@ li {
   .columns .column .rename_column_form {
     padding: 8px; }
   .columns .column .column_type_text {
-    font-size: 10px;
+    font-size: 13px;
     float: right;
     display: block;
     line-height: 16px;
-    margin: 5px 0 0;
+    margin: 1px 0 0;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
@@ -395,7 +396,7 @@ li {
     background: #f9eee9;
     color: #444444;
     border-style: solid; }
-    .columns .column .column_type_text:hover {
+    .columns .column .column_type_text.edit:hover {
       border-color: #e36c33;
       background: #edd0c2; }
     .columns .column .column_type_text.date, .columns .column .column_type_text.time, .columns .column .column_type_text.timestamp, .columns .column .column_type_text.datetime {
@@ -403,7 +404,7 @@ li {
       background: #f3e2e4;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.date:hover, .columns .column .column_type_text.time:hover, .columns .column .column_type_text.timestamp:hover, .columns .column .column_type_text.datetime:hover {
+      .columns .column .column_type_text.edit.date:hover, .columns .column .column_type_text.edit.time:hover, .columns .column .column_type_text.edit.timestamp:hover, .columns .column .column_type_text.edit.datetime:hover {
         border-color: #d0394d;
         background: #e4bec3; }
     .columns .column .column_type_text.boolean {
@@ -411,7 +412,7 @@ li {
       background: #c7dce6;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.boolean:hover {
+      .columns .column .column_type_text.edit.boolean:hover {
         border-color: #2e87b3;
         background: #a3c6d7; }
     .columns .column .column_type_text.text {
@@ -419,7 +420,7 @@ li {
       background: #efe7d3;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.text:hover {
+      .columns .column .column_type_text.edit.text:hover {
         border-color: #cb9d2b;
         background: #e1d2ae; }
     .columns .column .column_type_text.decimal {
@@ -427,7 +428,7 @@ li {
       background: #dfdf50;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.decimal:hover {
+      .columns .column .column_type_text.edit.decimal:hover {
         border-color: #5e5e05;
         background: #d5d527; }
     .columns .column .column_type_text.float {
@@ -435,7 +436,7 @@ li {
       background: silver;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.float:hover {
+      .columns .column .column_type_text.edit.float:hover {
         border-color: #684b53;
         background: #a6a6a6; }
     .columns .column .column_type_text.integer {
@@ -443,7 +444,7 @@ li {
       background: #dfdfe0;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.integer:hover {
+      .columns .column .column_type_text.edit.integer:hover {
         border-color: #606493;
         background: #c5c5c7; }
     .columns .column .column_type_text.primary_key {
@@ -451,7 +452,7 @@ li {
       background: #f9efe7;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.primary_key:hover {
+      .columns .column .column_type_text.edit.primary_key:hover {
         border-color: #e47e30;
         background: #eed3bf; }
     .columns .column .column_type_text.string {
@@ -459,7 +460,7 @@ li {
       background: #d3e09e;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.string:hover {
+      .columns .column .column_type_text.edit.string:hover {
         border-color: #7f9919;
         background: #c1d477; }
     .columns .column .column_type_text.unsaved {
@@ -510,6 +511,54 @@ li {
 #model_name_changes, #column_name_changes {
   display: none; }
 
+#drawer_switch {
+  display: none; }
+  #drawer_switch:checked ~ #buttons {
+    right: -400px; }
+  #drawer_switch:checked ~ #drawer_hide_label {
+    visibility: hidden; }
+  #drawer_switch:checked ~ #drawer_show_label {
+    visibility: visible; }
+
+#buttons {
+  position: fixed;
+  top: 70px;
+  right: 15px;
+  -webkit-transition: all 0.5s;
+  transition: all 0.5s; }
+
+.drawer_switch_label {
+  position: fixed;
+  right: 15px;
+  top: 10px;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 12px 20px;
+  color: white;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 13px; }
+  .drawer_switch_label:hover {
+    background: rgba(0, 0, 0, 0.8); }
+#drawer_show_label {
+  visibility: hidden; }
+
+.menu_button {
+  position: relative;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 12px 20px;
+  color: white;
+  text-decoration: none;
+  font-size: 13px; }
+  .menu_button:hover {
+    background: rgba(0, 0, 0, 0.8); }
+#save_position_changes {
+  visibility: hidden;
+  top: 70px;
+  background: rgba(191, 0, 0, 0.6); }
+  #save_position_changes:hover {
+    background: rgba(191, 0, 0, 0.8); }
+
 #open_create_model_dialog {
   position: fixed;
   right: 15px;

data/public/erd/erd.js

@@ -19,10 +19,12 @@ class ERD {
     this.handle_new_model_add_column_click = this.handle_new_model_add_column_click.bind(this);
     this.handle_open_migration_click = this.handle_open_migration_click.bind(this);
     this.handle_close_migration_click = this.handle_close_migration_click.bind(this);
+    this.handle_save_position_changes_click = this.handle_save_position_changes_click.bind(this);
     this.name = name;
     this.elem = elem;
     this.edges = edges;
     this.paper = Raphael(this.name, this.elem.data('svg_width'), this.elem.data('svg_height'));
+    this.position_changes = {};
     this.setup_handlers();
     const models = this.elem.find('.model');
     this.models = {};
@@ -122,11 +124,13 @@ class ERD {
     const from = target.data('original_position');
     const to = [target.css('left').replace(/px$/, ''), target.css('top').replace(/px$/, '')].join();
     this.upsert_change('move', model_name, '', '', to);
+    this.position_changes[model_name] = to;
     this.connect_arrows(this.edges.filter(e=> (e.from === model_name) || (e.to === model_name)));
+    document.getElementById("save_position_changes").style.visibility = "visible";
   }
 
   setup_click_handlers() {
-    $('div.model_name_text, span.column_name_text, span.column_type_text').on('click', this.handle_text_elem_click);
+    $('div.model_name_text.edit, span.column_name_text.edit, span.column_type_text.edit').on('click', this.handle_text_elem_click);
     $('div.model a.add_column').on('click', this.handle_add_column_click);
     $('div.model a.cancel').on('click', this.handle_cancel_click);
     $('div.model a.close').on('click', this.handle_remove_model_click);
@@ -134,6 +138,7 @@ class ERD {
     $('div.model a.cancel').on('click', this.handle_cancel_click);
     $('div#open_migration').on('click', this.handle_open_migration_click);
     $('div#close_migration').on('click', this.handle_close_migration_click);
+    $('#save_position_changes').on('click', this.handle_save_position_changes_click);
   }
 
   setup_submit_handlers() {
@@ -165,6 +170,7 @@ class ERD {
       return change;
     }).toArray();
     $('#changes_form').find('input[name=changes]').val(JSON.stringify(changes));
+    $('#changes_form').find('input[name=position_changes]').val(JSON.stringify(this.position_changes));
   }
 
   handle_add_column(ev) {
@@ -359,6 +365,11 @@ class ERD {
       .parent().hide()
       .prev('div').show();
   }
+
+  handle_save_position_changes_click(ev) {
+    $('#changes_form').find('input[name=position_changes]').val(JSON.stringify(this.position_changes));
+    $('#changes_form').submit();
+  }
 }
 
 $(function() {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: erd
 version: !ruby/object:Gem::Version
-  version: 0.6.4
+  version: 0.7.0
 platform: ruby
 authors:
 - Akira Matsuda
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-01-25 00:00:00.000000000 Z
+date: 2020-11-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: ruby-graphviz
@@ -167,6 +167,7 @@ files:
 - app/controllers/erd/erd_controller.rb
 - app/views/erd/erd/_column.html.erb
 - app/views/erd/erd/_model.html.erb
+- app/views/erd/erd/edit.html.erb
 - app/views/erd/erd/erd.html.erb
 - app/views/erd/erd/index.html.erb
 - app/views/layouts/erd/application.html.erb
@@ -210,7 +211,7 @@ homepage: https://github.com/amatsuda/erd
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -225,8 +226,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
-signing_key: 
+rubygems_version: 3.1.4
+signing_key:
 specification_version: 4
 summary: erd engine on Rails
 test_files: