rails-mermaid_erd 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cce6becd48bcb6564461895181cb51023a6a88618acc1ee65996caa9c9892e5e
-  data.tar.gz: 566638d6ec6644c215aea40b22a28e384a1f1bf74976495fd986c8d0dfd1cd1f
+  metadata.gz: 7f3cfe23f8fa1343b2bd8a3ac5d47c1967613ce7a832d65de858b363402db0b1
+  data.tar.gz: 146d83e00452b8c56cbf8c4c6e0aebd62f99b3224e6b7e3062b4889b55bf0723
 SHA512:
-  metadata.gz: 8f4b5b920839d132162f6677e6618025cabd1f847f77c8aa009b4fb90ec9a20f56ed71ff2c0a0d73998e85bf71942a56b42f4c853266e7ea19ea0233f5e74e49
-  data.tar.gz: 03a23a3621647de5bfa82576434b1f21da48f7711ab8c7b1d9b3a1a8e68ae4ad42d196312ec3cd2f9e427e1755ec3cb5b50bb96b8312ed8deacd5df1c6935d0b
+  metadata.gz: 2c68987537096806829a9709f477dd8cc8a0108291387ff670796d2c41c4a900fe0f1a55902381b12d582d4e66d77f2b0421d929dfc72060a10d5b9ed020c4a6
+  data.tar.gz: 04cbecd36399c810f0846e1d4c4275922acfeb1ec2bcf426440f08902db6b4b051368f57ec57a0f8259108d9f727b77d0760ee0f817aee8122e4f3952dcfcc58

data/README.md

@@ -21,7 +21,7 @@ The editor is a single HTML file, so the entire editor can be shared.
 Add this line to your application's Gemfile:
 
 ```ruby
-gem "rails-mermaid_erd", group: :development
+gem "rails-mermaid_erd", group: :development, require: false
 ```
 
 And then execute:
@@ -30,6 +30,16 @@ And then execute:
 $ bundle install
 ```
 
+Add this line to your application's Rakefile:
+
+```ruby
+begin
+  require "rails-mermaid_erd"
+rescue LoadError
+  # Do nothing.
+end
+```
+
 ## Usage
 
 Run rake task `mermaid_erd` will generate `<app_root>/mermaid_erd/index.html`.

data/lib/rails-mermaid_erd/version.rb

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

data/lib/templates/index.html.erb

@@ -230,7 +230,20 @@
         </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 id="preview" :class="{ 'cursor-grab': isSpacePressed, 'cursor-grabbing': isDragging }"></div>
+          </div>
+
+          <div class="absolute bottom-0 left-1/2 -translate-x-1/2 p-4">
+            <div class="bg-gray-800 text-white text-[10px] px-3 py-1.5 rounded inline-flex items-center space-x-6">
+              <div class="inline-flex items-center">
+                <span class="font-medium">{{i18n[language]["controls"]["movement"]}}:</span>
+                <span class="ml-1 text-white/60">{{i18n[language]["controls"]["space_drag"]}} / {{i18n[language]["controls"]["middle_drag"]}}</span>
+              </div>
+              <div class="inline-flex items-center">
+                <span class="font-medium">{{i18n[language]["controls"]["zoom"]}}:</span>
+                <span class="ml-1 text-white/60">{{i18n[language]["controls"]["mouse_wheel"]}} / {{i18n[language]["controls"]["pinch"]}}</span>
+              </div>
+            </div>
           </div>
 
           <div class="absolute bottom-0 right-0 p-4 space-x-4 flex">
@@ -247,7 +260,6 @@
               <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>
@@ -302,6 +314,14 @@
           erd: 'ERD',
           code: 'Code',
         },
+        controls: {
+          movement: 'Movement',
+          zoom: 'Zoom',
+          space_drag: 'Space + Mouse Drag',
+          middle_drag: 'Middle Click + Drag',
+          mouse_wheel: 'Mouse Wheel',
+          pinch: 'Pinch In/Out',
+        }
       },
       ja: {
         actions: {
@@ -336,6 +356,14 @@
           erd: 'ER図',
           code: 'コード',
         },
+        controls: {
+          movement: '移動方法',
+          zoom: '拡大/縮小',
+          space_drag: 'スペースキー + マウスドラッグ',
+          middle_drag: '中クリック + ドラッグ',
+          mouse_wheel: 'マウスホイール',
+          pinch: 'ピンチイン/アウト',
+        }
       }
     }
   </script>
@@ -362,6 +390,155 @@
         const posX = Vue.ref(0)
         const posY = Vue.ref(0)
         const zoomArea = Vue.ref(null)
+        // Manage space key press state
+        const isSpacePressed = Vue.ref(false)
+        // Manage dragging state
+        const isDragging = Vue.ref(false)
+        let startX = 0
+        let startY = 0
+        // Record distance between two touch points
+        let lastTouchDistance = 0
+        // Record mouse position
+        let lastMouseX = 0
+        let lastMouseY = 0
+
+        // Calculate distance between two touch points
+        const getDistance = (touches) => {
+          return Math.hypot(
+            touches[0].clientX - touches[1].clientX,
+            touches[0].clientY - touches[1].clientY
+          )
+        }
+
+        // Calculate center point of two touch positions
+        const getTouchCenter = (touches) => {
+          return {
+            x: (touches[0].clientX + touches[1].clientX) / 2,
+            y: (touches[0].clientY + touches[1].clientY) / 2
+          }
+        }
+
+        // Handle touch start
+        const handleTouchStart = (e) => {
+          if (e.touches.length === 2) {
+            e.preventDefault()
+            lastTouchDistance = getDistance(e.touches)
+          }
+        }
+
+        // Handle touch move (pinch in/out for zoom)
+        const handleTouchMove = (e) => {
+          if (e.touches.length === 2) {
+            e.preventDefault()
+            const preview = document.getElementById('preview')
+            if (!preview.contains(e.target)) {
+              return
+            }
+
+            const newDistance = getDistance(e.touches)
+            const delta = (newDistance - lastTouchDistance) * 0.01
+            lastTouchDistance = newDistance
+
+            const center = getTouchCenter(e.touches)
+            const rect = preview.getBoundingClientRect()
+            const touchX = center.x - rect.left
+            const touchY = center.y - rect.top
+
+            const x = touchX / scale.value - posX.value
+            const y = touchY / scale.value - posY.value
+
+            const newScale = Math.min(Math.max(scale.value + delta, 0.5), 3)
+            if (newScale === scale.value) return
+
+            posX.value = touchX / newScale - x
+            posY.value = touchY / newScale - y
+            scale.value = newScale
+          }
+        }
+
+        // Handle touch end
+        const handleTouchEnd = (e) => {
+          if (e.touches.length < 2) {
+            lastTouchDistance = 0
+          }
+        }
+
+        // Handle key down (space key for drag mode toggle)
+        const handleKeyDown = (e) => {
+          if (e.code === 'Space' && !isSpacePressed.value) {
+            if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
+              return
+            }
+            isSpacePressed.value = true
+            e.preventDefault()
+          }
+        }
+
+        // Handle key up
+        const handleKeyUp = (e) => {
+          if (e.code === 'Space') {
+            isSpacePressed.value = false
+            isDragging.value = false
+          }
+        }
+
+        // Handle mouse down (start dragging)
+        const handleMouseDown = (e) => {
+          if (isSpacePressed.value || e.button === 1) {
+            isDragging.value = true
+            lastMouseX = e.clientX
+            lastMouseY = e.clientY
+            e.preventDefault()
+          }
+        }
+
+        // Handle mouse move (movement while dragging)
+        const handleMouseMove = (e) => {
+          if (isDragging.value) {
+            const dx = (e.clientX - lastMouseX) / scale.value
+            const dy = (e.clientY - lastMouseY) / scale.value
+            posX.value += dx
+            posY.value += dy
+            lastMouseX = e.clientX
+            lastMouseY = e.clientY
+            e.preventDefault()
+          }
+        }
+
+        // Handle mouse up (end dragging)
+        const handleMouseUp = (e) => {
+          if (e.button === 1) {
+            e.preventDefault()
+          }
+          isDragging.value = false
+        }
+
+        // Handle mouse wheel (zoom)
+        const handleWheel = (e) => {
+          const preview = document.getElementById('preview')
+          if (!preview.contains(e.target)) {
+            return
+          }
+
+          e.preventDefault()
+
+          const rect = preview.getBoundingClientRect()
+          const mouseX = e.clientX - rect.left
+          const mouseY = e.clientY - rect.top
+
+          // Calculate relative coordinates based on mouse position
+          const x = mouseX / scale.value - posX.value
+          const y = mouseY / scale.value - posY.value
+
+          // Change scale
+          const delta = e.deltaY < 0 ? 0.1 : -0.1
+          const newScale = Math.min(Math.max(scale.value + delta, 0.5), 3)
+
+          // Calculate new position with new scale
+          posX.value = mouseX / newScale - x
+          posY.value = mouseY / newScale - y
+          scale.value = newScale
+        }
 
         const zoomStyle = Vue.computed(() => {
           return {
@@ -613,6 +790,28 @@
           setLanguage(window.navigator.language)
           restoreFromHash()
           reRender()
+
+          window.addEventListener('keydown', handleKeyDown)
+          window.addEventListener('keyup', handleKeyUp)
+          window.addEventListener('mousedown', handleMouseDown)
+          window.addEventListener('mousemove', handleMouseMove)
+          window.addEventListener('mouseup', handleMouseUp)
+          window.addEventListener('wheel', handleWheel, { passive: false })
+          window.addEventListener('touchstart', handleTouchStart, { passive: false })
+          window.addEventListener('touchmove', handleTouchMove, { passive: false })
+          window.addEventListener('touchend', handleTouchEnd)
+        })
+
+        Vue.onUnmounted(() => {
+          window.removeEventListener('keydown', handleKeyDown)
+          window.removeEventListener('keyup', handleKeyUp)
+          window.removeEventListener('mousedown', handleMouseDown)
+          window.removeEventListener('mousemove', handleMouseMove)
+          window.removeEventListener('mouseup', handleMouseUp)
+          window.removeEventListener('wheel', handleWheel)
+          window.removeEventListener('touchstart', handleTouchStart)
+          window.removeEventListener('touchmove', handleTouchMove)
+          window.removeEventListener('touchend', handleTouchEnd)
         })
 
         window.addEventListener('hashchange', () => {
@@ -656,7 +855,9 @@
           moveUp,
           moveDown,
           moveLeft,
-          moveRight
+          moveRight,
+          isSpacePressed,
+          isDragging
         }
       }
     }

metadata

@@ -1,15 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails-mermaid_erd
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors:
 - 肥溜め
 - "\U0001F4A9"
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-25 00:00:00.000000000 Z
+date: 2024-12-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -95,7 +94,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description:
 email: []
 executables: []
 extensions: []
@@ -116,7 +114,6 @@ licenses:
 metadata:
   homepage_uri: https://github.com/koedame/rails-mermaid_erd
   source_code_uri: https://github.com/koedame/rails-mermaid_erd
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -131,8 +128,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
-signing_key:
+rubygems_version: 3.6.2
 specification_version: 4
 summary: Generate Mermaid ERD for Ruby on Rails
 test_files: []