diff --git a/Gemfile.lock b/Gemfile.lock index 23e6f07..04c8e0a 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - rails-mermaid_erd (0.4.2) + rails-mermaid_erd (0.5.0) rails (>= 5.2) GEM @@ -278,6 +278,7 @@ GEM PLATFORMS x86_64-darwin-21 + x86_64-darwin-22 x86_64-linux x86_64-linux-musl diff --git a/docs/example.html b/docs/example.html index 697b3b7..6bca26f 100644 --- a/docs/example.html +++ b/docs/example.html @@ -275,7 +275,27 @@

{{i18n[language]["models"]["title"]}} -
+
+
+
+
+ +
+
+ + +
+
+ +
+ + +
+ +
+
+ +
@@ -283,7 +303,7 @@

{{i18n[language]["models"]["title"]}} @@ -385,6 +405,37 @@

{{i18n[language]["models"]["title"]}} const isShowComment = Vue.ref(false) const isHideColumns = Vue.ref(false) + const scale = Vue.ref(1) + const posX = Vue.ref(0) + const posY = Vue.ref(0) + const zoomArea = Vue.ref(null) + + const zoomStyle = Vue.computed(() => { + return { + transform: `scale(${scale.value}) translate(${posX.value}px, ${posY.value}px)`, + transformOrigin: 'top left' + } + }) + + const zoomIn = () => { + scale.value = Math.min(scale.value + 0.1, 3) + } + + const zoomOut = () => { + scale.value = Math.max(scale.value - 0.1, 0.5) + } + + const move = (dx, dy) => { + const step = 10 / scale.value + posX.value += dx * step + posY.value += dy * step + } + + const moveUp = () => move(0, -10) + const moveDown = () => move(0, 10) + const moveLeft = () => move(-10, 0) + const moveRight = () => move(10, 0) + const restoreFromHash = () => { try { const h = location.hash.substr(1, location.hash.length) @@ -474,6 +525,7 @@

{{i18n[language]["models"]["title"]}} filteredData.value.Models.forEach(model => { lines.push(` %% table name: ${model.TableName}`) + lines.push(` %% table comment: ${model.TableComment}`) lines.push(` ${model.ModelName.replace(/:/g, '-')} {`) if (!isHideColumns.value) { @@ -520,7 +572,7 @@

{{i18n[language]["models"]["title"]}} const filterText = Vue.ref('') const reRender = () => { - mermaid.initialize({theme: 'dark'}) + mermaid.initialize({theme: 'dark', maxTextSize: 99999999}) mermaid.init() graph.value = mermaid.mermaidAPI.render("mermaid-erd", mermaidErd.value); document.getElementById('preview').innerHTML = graph.value @@ -644,6 +696,14 @@

{{i18n[language]["models"]["title"]}} tab, updateHash, isHideColumns, + zoomStyle, + zoomArea, + zoomIn, + zoomOut, + moveUp, + moveDown, + moveLeft, + moveRight } } } diff --git a/docs/screen_shot.png b/docs/screen_shot.png index a5aa820..56cf7cc 100644 Binary files a/docs/screen_shot.png and b/docs/screen_shot.png differ diff --git a/lib/rails-mermaid_erd/version.rb b/lib/rails-mermaid_erd/version.rb index 2b3c887..0777a4e 100644 --- a/lib/rails-mermaid_erd/version.rb +++ b/lib/rails-mermaid_erd/version.rb @@ -1,3 +1,3 @@ module RailsMermaidErd - VERSION = "0.4.2" + VERSION = "0.5.0" end