rails-mermaid_erd 0.5.1 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27a3b346f33bfc899475fc0c00f6c512bf8ba1e1e028c3518c24496e5eb3e016
-  data.tar.gz: d0317f33acd321ed8b9a3b2bc5bb818b02593bba6c002925973f629fbfc110c7
+  metadata.gz: 7f3cfe23f8fa1343b2bd8a3ac5d47c1967613ce7a832d65de858b363402db0b1
+  data.tar.gz: 146d83e00452b8c56cbf8c4c6e0aebd62f99b3224e6b7e3062b4889b55bf0723
 SHA512:
-  metadata.gz: '09d7df6654042f5a327a18cf9ddfb7f4c43bb41717ff3ed937cb5dc95aed8d502d983000c2b31970370e2532fba62acda6506d9ff5dd0c073ae1f1db1fc7705c'
-  data.tar.gz: 020f4ba3e58cfbbe8cd77a28414138073ba248eccfdef2ec3a55cf19a068ffa8913f1dc526bc2c5b7a23e35faca7265db4bbce34dee86d4f2e3f78feff737129
+  metadata.gz: 2c68987537096806829a9709f477dd8cc8a0108291387ff670796d2c41c4a900fe0f1a55902381b12d582d4e66d77f2b0421d929dfc72060a10d5b9ed020c4a6
+  data.tar.gz: 04cbecd36399c810f0846e1d4c4275922acfeb1ec2bcf426440f08902db6b4b051368f57ec57a0f8259108d9f727b77d0760ee0f817aee8122e4f3952dcfcc58

data/lib/rails-mermaid_erd/version.rb

@@ -1,3 +1,3 @@
 module RailsMermaidErd
-  VERSION = "0.5.1"
+  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.1
+  version: 0.6.0
 platform: ruby
 authors:
 - 肥溜め
 - "\U0001F4A9"
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-11-24 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.5.22
-signing_key:
+rubygems_version: 3.6.2
 specification_version: 4
 summary: Generate Mermaid ERD for Ruby on Rails
 test_files: []