erd 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89e699a699726399895a401998276b6b36a6b38b120c2e14c973de7c13fbe8f4
-  data.tar.gz: d4a9db8626fbc276f33dd1ed7f820e854a9cef33c41cd4146bc6b6ffe040de13
+  metadata.gz: a9d85fe99c1f99f980306af0ec58827c2259b1669055460c5af1181ba344970a
+  data.tar.gz: 39522c53587e660e2445c39a2931f167db10c09429e8a8c020d5e6e371fdf9b3
 SHA512:
-  metadata.gz: 61a3938da621aaf9e2f8deb520535744a10b34564649adcdbb6dd2e6e871e8832837f1e8f30030b7e2b67058d11cf093af93e400ef2e9ae513d059582d877cb3
-  data.tar.gz: 1e33ceaabcbc8d5bb750d1fa4a100667f2275e09faa901eabfb291a53befe408c73e5e0d410999d87cdfc4a20bb376b7ab1b769c2f4dee3dda005eb8ac09567a
+  metadata.gz: c2116ff57af688e72b0de8acd82c2b3aa107762cffb576323b79eb002cb895e103dda3286e34e23b3959e88106de7199d120a798ab3ee99495836caf00cf4fca
+  data.tar.gz: 1b57a5dbe064649cbb4891bb079814faec9641d5fa1f2f7c37918895e0d36dfadd61e70dfff0cb441b13c3022ca66843a114e5ead333d785bbe8f5e36ab38046

data/README.rdoc

@@ -5,7 +5,7 @@ A Rails engine for drawing your app's ER diagram and operating migrations
 
 == Requirements
 
-* Rails 5.0, 4.2, 4.1, 4.0, 3.2, or 3.1
+* Rails 5.2, 5.1, 5.0, 4.2, 4.1, 4.0, 3.2, or 3.1
 
 * Graphviz
 

data/app/assets/javascripts/erd/application.js

@@ -10,7 +10,5 @@
 // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
 // GO AFTER THE REQUIRES BELOW.
 //
-//= require jquery
-//= require jquery-ui.min
 //= require raphael-min
 //= require_tree .

data/app/assets/javascripts/erd/erd.js.js

@@ -0,0 +1,420 @@
+/*
+ * decaffeinate suggestions:
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+class ERD {
+  constructor(name, elem, edges) {
+    this.connect_arrows = this.connect_arrows.bind(this);
+    this.handle_drag = this.handle_drag.bind(this);
+    this.handle_save = this.handle_save.bind(this);
+    this.handle_add_column = this.handle_add_column.bind(this);
+    this.handle_change_column_type = this.handle_change_column_type.bind(this);
+    this.handle_rename_column = this.handle_rename_column.bind(this);
+    this.handle_rename_model = this.handle_rename_model.bind(this);
+    this.handle_add_column_click = this.handle_add_column_click.bind(this);
+    this.handle_cancel_click = this.handle_cancel_click.bind(this);
+    this.handle_text_elem_click = this.handle_text_elem_click.bind(this);
+    this.handle_remove_model_click = this.handle_remove_model_click.bind(this);
+    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.name = name;
+    this.elem = elem;
+    this.edges = edges;
+    this.paper = Raphael(this.name, this.elem.data('svg_width'), this.elem.data('svg_height'));
+    this.setup_handlers();
+    const models = this.elem.find('.model');
+    this.models = {};
+    for (let model of models) {
+      this.models[$(model).data('model_name')] = model;
+    }
+    this.connect_arrows(this.edges);
+  }
+
+  upsert_change(action, model, column, from, to) {
+    const rows = ($('#changes > tbody > tr').map((tr) => $(tr).find('td')));
+    let existing = null;
+    $(rows).each(function(i, row) {
+      if ((action === $(row[0]).html()) && (model === $(row[1]).html()) && (column === $(row[2]).html())) { return existing = row; }
+    });
+    if (existing === null) {
+      $('#changes > tbody').append(`\
+<tr>
+  <td data-name="action">${action}</td>
+  <td data-name="model">${model}</td>
+  <td data-name="column">${column}</td>
+  <td data-name="from">${from}</td>
+  <td data-name="to">${to}</td>
+</tr>\
+`);
+    } else {
+      $(existing[3]).text(from);
+      $(existing[4]).text(to);
+    }
+    $('#changes').show();
+  }
+
+  positions(div) {
+    const [left, width, top, height] = [parseFloat(div.css('left')), parseFloat(div.css('width')), parseFloat(div.css('top')), parseFloat(div.css('height'))];
+    return {left, right: left + width, top, bottom: top + height, center: {x: (left + left + width) / 2, y: (top + top + height) / 2}, vertex: {}};
+  }
+
+  connect_arrows(edges) {
+    $.each(edges, (i, edge) => {
+      this.connect_arrow(edge, $(this.models[edge.from]), $(this.models[edge.to]));
+    });
+  }
+
+  connect_arrow(edge, from_elem, to_elem) {
+    //TODO handle self referential associations
+    let path;
+    if (from_elem.attr('id') === to_elem.attr('id')) { return; }
+
+    if (edge.path != null) { edge.path.remove(); }
+
+    const from = this.positions(from_elem);
+    const to = this.positions(to_elem);
+    //FIXME terrible code
+    const a = (to.center.y - from.center.y) / (to.center.x - from.center.x);
+    const b = from.center.y - (from.center.x * a);
+
+    const x2y = x => (a * x) + b;
+    const y2x = y => (y - b) / a;
+
+    if (from.center.x > to.center.x) {
+      [from.vertex.x, from.vertex.y] = [from.left, x2y(from.left)];
+      [to.vertex.x, to.vertex.y] = [to.right, x2y(to.right)];
+    } else {
+      [from.vertex.x, from.vertex.y] = [from.right, x2y(from.right)];
+      [to.vertex.x, to.vertex.y] = [to.left, x2y(to.left)];
+    }
+    for (let rect of [from, to]) {
+      if (rect.vertex.y < rect.top) {
+        [rect.vertex.x, rect.vertex.y, rect.vertex.direction] = [y2x(rect.top), rect.top, 'v'];
+      } else if (rect.vertex.y > rect.bottom) {
+        [rect.vertex.x, rect.vertex.y, rect.vertex.direction] = [y2x(rect.bottom), rect.bottom, 'v'];
+      } else {
+        from.vertex.direction = 'h';
+      }
+    }
+
+    if (from.vertex.direction === 'h') {
+      path = `M${Math.floor(from.vertex.x)} ${Math.floor(from.vertex.y)}H${Math.floor((from.vertex.x + to.vertex.x) / 2)} V${Math.floor(to.vertex.y)} H${Math.floor(to.vertex.x)}`;
+    } else {
+      path = `M${Math.floor(from.vertex.x)} ${Math.floor(from.vertex.y)}V${Math.floor((from.vertex.y + to.vertex.y) / 2)} H${Math.floor(to.vertex.x)} V${Math.floor(to.vertex.y)}`;
+    }
+
+    edge.path = this.paper.path(path).attr({'stroke-width': 2, opacity: 0.5, 'arrow-end': 'classic-wide-long'});
+  }
+
+  setup_handlers() {
+    this.setup_click_handlers();
+    this.setup_submit_handlers();
+    this.setup_migration_event_handlers();
+    $('div.model').draggable({drag: this.handle_drag});
+  }
+
+  handle_drag(ev, ui) {
+    const target = $(ev.target);
+    target.addClass('noclick');
+    const model_name = target.data('model_name');
+    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.connect_arrows(this.edges.filter(e=> (e.from === model_name) || (e.to === model_name)));
+  }
+
+  setup_click_handlers() {
+    $('div.model_name_text, span.column_name_text, span.column_type_text').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);
+    $('#new_model_add_column').on('click', this.handle_new_model_add_column_click);
+    $('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);
+  }
+
+  setup_submit_handlers() {
+    $('form.rename_model_form').on('submit', this.handle_rename_model);
+    $('form.rename_column_form').on('submit', this.handle_rename_column);
+    $('form.alter_column_form').on('submit', this.handle_change_column_type);
+    $('form.add_column_form').on('submit', this.handle_add_column);
+    $('#changes_form').on('submit', this.handle_save);
+  }
+
+  setup_migration_event_handlers() {
+    $('#migration_status tr input').on('click', function() {
+      $(this).parents('tr').toggleClass('active');
+    });
+    $('#migration_status thead td button').on('click', function(ev) {
+      ev.preventDefault();
+      $('#migration_status').toggleClass('show_all_migrations');
+    });
+  }
+
+  handle_save(ev) {
+    const changes = $('#changes > tbody > tr').map(function() {
+      const change = {};
+      $(this).find('td').each(function() {
+        const name = $(this).data('name');
+        const value = $(this).html();
+        change[name] = value;
+      });
+      return change;
+    }).toArray();
+    $('#changes_form').find('input[name=changes]').val(JSON.stringify(changes));
+  }
+
+  handle_add_column(ev) {
+    ev.preventDefault();
+    const target = $(ev.target);
+    const name = target.find('input[name=name]').val();
+    if (name === '') { return; }
+
+    const model = target.find('input[name=model]').val();
+    const type  = target.find('input[name=type]').val();
+    this.upsert_change('add_column', model, `${name}(${type})`, '', '');
+
+    const name_span = $("<span/>", {class: 'column_name_text'})
+      .append(name);
+
+    const type_span = $("<span/>", {class: 'column_type_text unsaved'})
+      .append(type);
+
+    const li_node = $("<li/>", {class: 'column unsaved'}).append(name_span).append("&nbsp;").append(type_span);
+
+    target.hide()
+      .parent()
+      .siblings('.columns')
+      .find('ul').append(li_node).end()
+      .end()
+      .find('a.add_column').show();
+  }
+
+  handle_change_column_type(ev) {
+    ev.preventDefault();
+    const target = $(ev.target);
+    const to = target.find('input[name=to]').val();
+    if (to === '') { return; }
+
+    const model  = target.find('input[name=model]').val();
+    const column = target.find('input[name=column]').val();
+    const type   = target.find('input[name=type]').val();
+    if (to !== type) {
+      this.upsert_change('alter_column', model, column, type, to);
+    }
+
+    target.hide()
+      .siblings('.column_type_text').text(to).show().addClass('unsaved')
+      .parents('.column').addClass('unsaved');
+  }
+
+  handle_rename_column(ev) {
+    ev.preventDefault();
+    const target = $(ev.target);
+    const to = target.find('input[name=to]').val();
+    if (to === '') { return; }
+
+    const model = target.find('input[name=model]').val();
+    const column = target.find('input[name=column]').val();
+    if (to !== column) {
+      this.upsert_change('rename_column', model, column, column, to);
+    }
+
+    target.hide()
+      .siblings('.column_name_text').text(to).show()
+      .parents('.column').addClass('unsaved');
+  }
+
+  handle_rename_model(ev) {
+    ev.preventDefault();
+    const target = $(ev.target);
+    const to = target.find('input[name=to]').val();
+    if (to === '') { return; }
+
+    const model = target.find('input[name=model]').val();
+    if (to !== model) {
+      this.upsert_change('rename_model', model, '', model, to);
+    }
+
+    target.hide()
+      .siblings('.model_name_text').text(to).show().addClass('unsaved');
+  }
+
+  handle_add_column_click(ev) {
+    ev.preventDefault();
+    const target = $(ev.currentTarget);
+
+    const m = target.parents('div.model');
+    if (m.hasClass('noclick')) {
+      m.removeClass('noclick');
+      return false;
+    }
+
+    target.hide()
+      .next('form').show()
+      .find('a.cancel').show().end()
+      .find('input[name=type]').val('string').end()
+      .find('input[name=name]').val('').focus();
+  }
+
+  handle_cancel_click(ev) {
+    ev.preventDefault();
+    const target = $(ev.currentTarget);
+
+    const m = target.parents('div.model');
+    if (m.hasClass('noclick')) {
+      m.removeClass('noclick');
+      return false;
+    }
+
+    target.hide()
+      .parent('form').hide()
+      .prev('a.add_column, span, div').show();
+  }
+
+
+  handle_text_elem_click(ev) {
+    const target = $(ev.currentTarget);
+    const text = target.text();
+
+    const m = target.parents('div.model');
+    if (m.hasClass('noclick')) {
+      m.removeClass('noclick');
+      return false;
+    }
+
+    target.hide()
+      .next('form').show()
+      .find('a.cancel').show().end()
+      .find('input[name=to]').val(text).focus();
+  }
+
+  handle_remove_model_click(ev) {
+    ev.preventDefault();
+
+    const target = $(ev.target);
+    const parent = target.parent();
+
+    const m = target.parents('div.model');
+    if (m.hasClass('noclick')) {
+      m.removeClass('noclick');
+      return false;
+    }
+
+    if (!confirm('remove this table?')) { return; }
+
+    const model_name = m.data('model_name');
+    window.erd.upsert_change('remove_model', model_name, '', '', '');
+    parent.hide();
+
+    $.each(this.edges, (i, edge) => {
+      if ((edge.from === model_name) || (edge.to === model_name)) { this.edges.splice(i, 1); }
+    });
+    this.paper.clear();
+    this.connect_arrows(this.edges);
+  }
+
+  handle_new_model_add_column_click(ev) {
+    ev.preventDefault();
+    const target = $(ev.currentTarget);
+
+    target.parent().siblings('table').append('<tr><td><input type="text" /></td><td class="separator">:</td><td><input type="text" value="string" /></td></tr>').find('tr:last > td > input:first').focus();
+  }
+
+
+  handle_open_migration_click(ev) {
+    ev.preventDefault();
+
+    const target = $(ev.currentTarget);
+    const text = target.text();
+
+    const m = target.parents('div.model');
+    if (m.hasClass('noclick')) {
+      m.removeClass('noclick');
+      return false;
+    }
+
+    target.hide()
+      .next('div').show()
+      .find('#close_migration').show();
+  }
+
+
+  handle_close_migration_click(ev) {
+    ev.preventDefault();
+
+    const target = $(ev.currentTarget);
+    const text = target.text();
+
+    const m = target.parents('div.model');
+    if (m.hasClass('noclick')) {
+      m.removeClass('noclick');
+      return false;
+    }
+
+    target.hide()
+      .parent().hide()
+      .prev('div').show();
+  }
+}
+
+$(function() {
+  window.erd = new ERD('erd', $('#erd'), window.raw_edges);
+
+  $('#erd').css('height', window.innerHeight);
+  $(window).on('resize', () => $('#erd').css('height', window.innerHeight));
+
+  $("#open_migration").click(function() {
+    $('#close_migration, #open_create_model_dialog').css('right', ($('#migration').width() + ($(this).width() / 2)) - 5);
+  });
+
+  $("#close_migration").click(() => $('#open_create_model_dialog').css('right', 15));
+
+  $('#open_up').click(function() {
+    $('#migration_status .up').addClass('open');
+    $('#migration_status .down').removeClass('open');
+  });
+
+  $('#open_down').click(function() {
+    $('#migration_status .down').addClass('open');
+    $('#migration_status .up').removeClass('open');
+  });
+
+  $('#close_all').click(() => $('#migration_status tr').removeClass('open'));
+
+  $('#create_model_form').dialog({
+    autoOpen: false,
+    height: 450,
+    width: 450,
+    modal: true,
+    buttons: {
+      'Create Model'() {
+        const model = $('#new_model_name').val();
+        let columns = '';
+        $('#create_model_table > tbody > tr').each(function(i, row) {
+          const [name, type] = $(row).find('input').map((v) => $(v).val());
+          if (name) { columns += `${name}${type ? `:${type}` : ''} `; }
+        });
+        window.erd.upsert_change('create_model', model, columns, '', '');
+        $(this).find('table > tbody > tr').each(function(i, row) {
+          if (i >= 1) { row.remove(); }
+        });
+        $(this).find('input').val('');
+        $(this).find('input[name=new_model_column_type_1]').val('string');
+
+        $(this).dialog('close');
+      },
+      Cancel() {
+        $(this).dialog('close');
+      }
+    }
+  });
+
+  $('#open_create_model_dialog').click(function(ev) {
+    ev.preventDefault();
+    $('#create_model_form').dialog('open');
+  });
+});

data/app/assets/stylesheets/erd/application.css

@@ -9,6 +9,5 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
- *= require jquery-ui
  *= require_tree .
 */