Draggable tables in schema

git-svn-id: https://adminer.svn.sourceforge.net/svnroot/adminer/trunk@265 7c3ca157-0c34-0410-bff1-cbf682f78f5c

diff --git a/default.css b/default.css
index d75a15cc0119200f971317796ea6e052ad221d33..69b3d81308122489509049ce4c0b2ff93856910c 100644 (file)
--- a/default.css
+++ b/default.css
@@ -1,4 +1,4 @@
-BODY { color: Black; background-color: White; }
+BODY { color: Black; background-color: White; line-height: 1.25em; }
 A { color: Blue; }
 A:visited { color: Navy; }
 H1 { font-size: 150%; margin-top: 0; }
@@ -18,5 +18,5 @@ IMG { vertical-align: middle; }
 #menu { position: absolute; top: 8px; left: 8px; width: 15em; overflow: auto; overflow-y: hidden; white-space: nowrap; }
 #content { margin-left: 16em; }
 #schema { margin-left: 60px; position: relative; }
-#schema DIV { position: absolute; }
-#schema .table { border: 1px solid Silver; line-height: 1.25em; padding: 0 2px; }
+#schema .table { border: 1px solid Silver; padding: 0 2px; cursor: move; position: absolute; }
+#schema .references { position: absolute; }

diff --git a/design.inc.php b/design.inc.php
index 2978fdd9dd910bb664cf9fd353021b28bfacc5c7..32dc563769827e35b65784117566203d615cf287 100644 (file)
--- a/design.inc.php
+++ b/design.inc.php
@@ -25,7 +25,7 @@ function page_header($title, $breadcrumb = array(), $title2 = "") {
 <?php
        if (isset($breadcrumb)) {
                $link = substr(preg_replace('~db=[^&]*&~', '', $SELF), 0, -1);
-               echo '<p><a href="' . (strlen($link) ? htmlspecialchars($link) : ".") . '">' . (isset($_GET["server"]) ? htmlspecialchars($_GET["server"]) : lang('Server')) . '</a> &gt; ';
+               echo '<p id="breadcrumb"><a href="' . (strlen($link) ? htmlspecialchars($link) : ".") . '">' . (isset($_GET["server"]) ? htmlspecialchars($_GET["server"]) : lang('Server')) . '</a> &gt; ';
                if (is_array($breadcrumb)) {
                        if (strlen($_GET["db"])) {
                                echo '<a href="' . substr($SELF, 0, -1) . '">' . htmlspecialchars($_GET["db"]) . '</a> &gt; ';

diff --git a/schema.inc.php b/schema.inc.php
index bd3e1fae6d2839a9593cfaee256fec42c65fb2a6..2e0d19df1d076f5d8100b727371412c4ce4d6e68 100644 (file)
--- a/schema.inc.php
+++ b/schema.inc.php
@@ -1,31 +1,83 @@
 <?php
-page_header(lang('Database schema'), array(), $_GET["db"]);
+page_header(lang('Database schema') . ": " . htmlspecialchars($_GET["db"]));
 
+$table_pos = array();
+$table_pos_js = array();
+preg_match_all('~([^:]+):([-0-9.]+)x([-0-9.]+)(_|$)~', $_COOKIE["schema"], $matches, PREG_SET_ORDER); //! ':' in table name
+foreach ($matches as $i => $match) {
+       $table_pos[$match[1]] = "$match[2]em; left: $match[3]";
+       $table_pos_js[] = "\n\t'" . addcslashes($match[1], "\r\n'\\") . "': [ $match[2], $match[3] ]";
+}
+
+$top = 0;
+$left = -14;
 $schema = array();
+$referenced = array();
 $result = $mysql->query("SHOW TABLE STATUS");
 while ($row = $result->fetch_assoc()) {
        if (!isset($row["Engine"])) { // view
                continue;
        }
-       $schema[$row["Name"]]["fields"] = fields($row["Name"]);
+       $pos = 0;
+       $schema[$row["Name"]]["fields"] = array();
+       foreach (fields($row["Name"]) as $name => $field) {
+               $pos += 1.25;
+               $field["pos"] = $pos;
+               $schema[$row["Name"]]["fields"][$name] = $field;
+       }
+       $schema[$row["Name"]]["pos"] = ($table_pos[$row["Name"]] ? $table_pos[$row["Name"]] : $top);
        if ($row["Engine"] == "InnoDB") {
                foreach (foreign_keys($row["Name"]) as $val) {
                        if (!$val["db"]) {
-                               $schema[$row["Name"]]["references"][$val["table"]][] = array_combine($val["source"], $val["target"]);
+                               $schema[$row["Name"]]["references"][$val["table"]][$left] = array_combine($val["source"], $val["target"]);
+                               $referenced[$val["table"]][$left] = $val["target"];
+                               $left -= 2;
                        }
                }
        }
+       $top = max($top, $schema[$row["Name"]]["pos"] + 2.5 + $pos);
 }
 $result->free();
+
 ?>
-<div id="schema">
+<script type="text/javascript">
+var that, x, y, em;
+var table_pos = {<?php echo implode(",", $table_pos_js) . "\n"; ?>};
+
+function mousedown(el, event) {
+       that = el;
+       em = document.getElementById('breadcrumb').offsetHeight / 1.25;
+       x = event.clientX - el.offsetLeft;
+       y = event.clientY - el.offsetTop;
+}
+function mousemove(event) {
+       if (that !== undefined) {
+               that.style.left = (event.clientX - x) / em + 'em';
+               that.style.top = (event.clientY - y) / em + 'em';
+               //! drag lines
+       }
+}
+function mouseup(event) {
+       if (that !== undefined) {
+               table_pos[that.firstChild.firstChild.firstChild.data] = [ (event.clientY - y) / em, (event.clientX - x) / em ];
+               that = undefined;
+               var date = new Date();
+               date.setMonth(date.getMonth() + 1);
+               var s = '';
+               for (var key in table_pos) {
+                       s += '_' + key + ':' + Math.round(table_pos[key][0] * 10000) / 10000 + 'x' + Math.round(table_pos[key][1] * 10000) / 10000;
+               }
+               document.cookie = 'schema=' + encodeURIComponent(s.substr(1)) + '; expires=' + date + '; path=' + location.pathname + location.search;
+       }
+}
+</script>
+
+<div id="schema" style="height: <?php echo $top; ?>em;" onmousemove="mousemove(event);" onmouseup="mouseup(event);">
 <?php
-$top = 0;
-$positions = array();
 foreach ($schema as $name => $table) {
-       echo "<div class='table' style='top: $top" . "em;'>\n";
+       echo "<div class='table' style='top: $table[pos]em;' onmousedown='mousedown(this, event);'>";
        echo '<a href="' . htmlspecialchars($SELF) . 'table=' . urlencode($name) . '"><strong>' . htmlspecialchars($name) . "</strong></a><br />\n";
-       foreach (fields($name) as $field) {
+       foreach ($table["fields"] as $field) {
                $val = htmlspecialchars($field["field"]);
                if (preg_match('~char|text~', $field["type"])) {
                        $val = "<span class='char'>$val</span>";
@@ -37,31 +89,35 @@ foreach ($schema as $name => $table) {
                        $val = "<span class='enum'>$val</span>";
                }
                echo ($field["primary"] ? "<em>$val</em>" : $val) . "<br />\n";
-               $top += 1.25;
-               $positions[$name][$field["field"]] = $top;
+       }
+       foreach ((array) $table["references"] as $target_name => $refs) {
+               foreach ($refs as $left => $columns) {
+                       foreach ($columns as $source => $target) {
+                               echo "<div class='references' style='left: " . ($left+1) . "px; top: " . $table["fields"][$source]["pos"] . "em; padding-top: .5em;'><div style='border-top: 1px solid Black; width: " . (-$left-2) . "px;'></div></div>\n";
+                       }
+               }
+       }
+       foreach ((array) $referenced[$name] as $left => $columns) {
+               foreach ($columns as $target) {
+                       echo "<div class='references' style='left: " . ($left+1) . "px; top: " . $table["fields"][$target]["pos"] . "em; width: " . (-$left-2) . "px; height: 1.25em; background: url(arrow.gif) no-repeat right center;'><div style='height: .5em; border-bottom: 1px solid Black; width: " . (-$left-14) . "px;'></div></div>\n";
+               }
        }
        echo "</div>\n";
-       $top += 2.5;
 }
-$left = -14;
 foreach ($schema as $name => $table) {
        foreach ((array) $table["references"] as $target_name => $refs) {
-               foreach ($refs as $ref) {
+               foreach ($refs as $left => $ref) {
                        $min_pos = $top;
-                       $max_pos = 0;
+                       $max_pos = -10;
                        foreach ($ref as $source => $target) {
-                               $pos1 = $positions[$name][$source];
-                               $pos2 = $positions[$target_name][$target];
+                               $pos1 = $table["pos"] + $table["fields"][$source]["pos"];
+                               $pos2 = $schema[$target_name]["pos"] + $schema[$target_name]["fields"][$target]["pos"];
                                $min_pos = min($min_pos, $pos1, $pos2);
                                $max_pos = max($max_pos, $pos1, $pos2);
-                               echo "<div style='left: " . ($left+1) . "px; top: $pos1" . "em; padding-top: .5em;'><div style='border-top: 1px solid Black; width: " . (-$left-2) . "px;'></div></div>\n";
-                               echo "<div style='left: " . ($left+1) . "px; top: $pos2" . "em; width: " . (-$left-2) . "px; height: 1.25em; background: url(arrow.gif) no-repeat right center;'><div style='height: .5em; border-bottom: 1px solid Black; width: " . (-$left-14) . "px;'></div></div>\n";
                        }
-                       echo "<div style='left: $left" . "px; top: $min_pos" . "em; padding: .5em 0;' /><div style='border-right: 1px solid Black; height: " . ($max_pos - $min_pos) . "em;'></div></div>\n";
-                       $left -= 2;
+                       echo "<div class='references' style='left: $left" . "px; top: $min_pos" . "em; padding: .5em 0;' /><div style='border-right: 1px solid Black; height: " . ($max_pos - $min_pos) . "em;'></div></div>\n";
                }
        }
 }
-//! JavaScript for dragging tables
 ?>
 </div>