rails-mermaid_erd 0.4.2 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6f74497263f036ef73eb9cb8d72294040700d589d5f1ce5aa2d7521f2dc7ae4e
-  data.tar.gz: b8ef91443c959d00c30bca24adf8e62d73d3eb827119119ab3dc6b2c033d5295
+  metadata.gz: cce6becd48bcb6564461895181cb51023a6a88618acc1ee65996caa9c9892e5e
+  data.tar.gz: 566638d6ec6644c215aea40b22a28e384a1f1bf74976495fd986c8d0dfd1cd1f
 SHA512:
-  metadata.gz: 621de1f859e6dfc56965016c859fb34d722d8b7c438c8b11b02cf120deb2a6c2eb63deff8c713adc15891f53da69ac20dc612b81946f8cc3bc1257a2189a8931
-  data.tar.gz: 970a6cc600ef093fad0dd5eae21423870bcef5ff8b5d4cbb4b55a17d58fce2f64600cdaf336beae36eb60cebb93fba8d9239db05f1bdcb30e4e08bef859754d3
+  metadata.gz: 8f4b5b920839d132162f6677e6618025cabd1f847f77c8aa009b4fb90ec9a20f56ed71ff2c0a0d73998e85bf71942a56b42f4c853266e7ea19ea0233f5e74e49
+  data.tar.gz: 03a23a3621647de5bfa82576434b1f21da48f7711ab8c7b1d9b3a1a8e68ae4ad42d196312ec3cd2f9e427e1755ec3cb5b50bb96b8312ed8deacd5df1c6935d0b

data/README.md

@@ -48,8 +48,8 @@ This file is not required for Git management, so you can add it to `.gitignore`
 mermaid_erd
 ```
 
-`<app_root>/mermaid_erd/index.html` is single HTML file.
-If you share this file, it can be used by those who do not have Ruby on Rails environment. Or, you can upload the file to a web server and share it with the same URL.
+`<app_root>/mermaid_erd/index.html` is a single HTML file.
+If you share this file, it can be used by those who do not have a Ruby on Rails environment. Or, you can upload the file to a web server and share it with the same URL.
 
 It would be very smart to generate it automatically using CI.
 

data/lib/rails-mermaid_erd/builder.rb

@@ -14,8 +14,10 @@ class RailsMermaidErd::Builder
         next if defined_model.name.include?("HABTM_")
         next if defined_model.table_name.blank?
 
+        table_name = defined_model.table_name
         model = {
-          TableName: defined_model.table_name,
+          TableName: table_name,
+          TableComment: ::ActiveRecord::Base.connection.table_comment(table_name.to_sym) || "",
           ModelName: defined_model.name,
           IsModelExist: true,
           Columns: []
@@ -91,12 +93,12 @@ class RailsMermaidErd::Builder
 
           reverse_relation = result[:Relations].find { |r| r[:RightModelName] == model[:ModelName] && r[:LeftModelName] == reflection_model_name }
           if reverse_relation
-            if (::Rails.application.config.active_record.belongs_to_required_by_default && reflection.options[:optional]) || (!::Rails.application.config.active_record.belongs_to_required_by_default && !reflection.options[:requried])
+            if (::Rails.application.config.active_record.belongs_to_required_by_default && reflection.options[:optional]) || (!::Rails.application.config.active_record.belongs_to_required_by_default && !reflection.options[:required])
               reverse_relation[:LeftValue] = "|o"
             end
             reverse_relation[:Comment] = "#{reverse_relation[:Comment]}, BT:#{reflection.name}"
           else
-            right_value = if (::Rails.application.config.active_record.belongs_to_required_by_default && reflection.options[:optional]) || (!::Rails.application.config.active_record.belongs_to_required_by_default && !reflection.options[:requried])
+            right_value = if (::Rails.application.config.active_record.belongs_to_required_by_default && reflection.options[:optional]) || (!::Rails.application.config.active_record.belongs_to_required_by_default && !reflection.options[:required])
               "o|"
             else
               "||"

data/lib/rails-mermaid_erd/version.rb

@@ -1,3 +1,3 @@
 module RailsMermaidErd
-  VERSION = "0.4.2"
+  VERSION = "0.5.0"
 end

data/lib/templates/index.html.erb

@@ -228,7 +228,27 @@
           <button @click="tab = 'erd'" :class="`text-xs py-1 px-2 rounded hover:bg-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 ${tab === 'erd' ? 'bg-white text-gray-900' : 'bg-gray-400 text-gray-900'}`">{{i18n[language]["tab"]["erd"]}}</button>
           <button @click="tab = 'code'" :class="`text-xs py-1 px-2 rounded hover:bg-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 ${tab === 'code' ? 'bg-white text-gray-900' : 'bg-gray-400 text-gray-900'}`">{{i18n[language]["tab"]["code"]}}</button>
         </div>
-        <div v-show="tab === 'erd'" class="px-4 w-full min-h-[calc(100vh-56px-32px-56px)]" id="preview"></div>
+        <div v-show="tab === 'erd'" class="px-4 w-full min-h-[calc(100vh-56px-32px-56px)] relative overflow-hidden">
+          <div class="absolute inset-0" :style="zoomStyle" ref="zoomArea">
+            <div id="preview"></div>
+          </div>
+
+          <div class="absolute bottom-0 right-0 p-4 space-x-4 flex">
+            <div class="space-x-2 flex items-center">
+              <button class="text-xs py-1 px-2 rounded hover:bg-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 bg-gray-400 text-gray-900" @click="zoomIn">+</button>
+              <button class="text-xs py-1 px-2 rounded hover:bg-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 bg-gray-400 text-gray-900" @click="zoomOut">-</button>
+            </div>
+            <div class="flex items-center space-x-2">
+              <button class="text-xs py-1 px-2 rounded hover:bg-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 bg-gray-400 text-gray-900" @click="moveLeft">←</button>
+              <div class="flex flex-col space-y-8">
+                <button class="text-xs py-1 px-2 rounded hover:bg-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 bg-gray-400 text-gray-900" @click="moveUp">↑</button>
+                <button class="text-xs py-1 px-2 rounded hover:bg-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 bg-gray-400 text-gray-900" @click="moveDown">↓</button>
+              </div>
+              <button class="text-xs py-1 px-2 rounded hover:bg-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 bg-gray-400 text-gray-900" @click="moveRight">→</button>
+            </div>
+          </div>
+
+        </div>
         <textarea v-show="tab === 'code'" class="px-4 bg-gray-900 text-gray-300 font-mono w-full text-xs min-h-[calc(100vh-56px-32px-56px)] border-0 focus:ring-0" readonly v-model="mermaidErd"></textarea>
       </div>
     </div>
@@ -338,6 +358,37 @@
         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)
@@ -427,6 +478,7 @@
 
           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) {
@@ -473,7 +525,7 @@
         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
@@ -597,6 +649,14 @@
           tab,
           updateHash,
           isHideColumns,
+          zoomStyle,
+          zoomArea,
+          zoomIn,
+          zoomOut,
+          moveUp,
+          moveDown,
+          moveLeft,
+          moveRight
         }
       }
     }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-mermaid_erd
 version: !ruby/object:Gem::Version
-  version: 0.4.2
+  version: 0.5.0
 platform: ruby
 authors:
 - 肥溜め
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-22 00:00:00.000000000 Z
+date: 2024-06-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -131,7 +131,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.7
+rubygems_version: 3.4.10
 signing_key:
 specification_version: 4
 summary: Generate Mermaid ERD for Ruby on Rails