From 56446a3d7e0b20639d6e7a811178c3621d9bc6d0 Mon Sep 17 00:00:00 2001
From: mogimogitomato <osakana.yano49@gmail.com>
Date: Wed, 10 Jul 2024 23:52:35 +0900
Subject: [PATCH] Add drag screen

---
 lib/templates/index.html.erb | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/lib/templates/index.html.erb b/lib/templates/index.html.erb
index 9cd2397..33d7219 100644
--- a/lib/templates/index.html.erb
+++ b/lib/templates/index.html.erb
@@ -228,7 +228,7 @@
           <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)] relative overflow-hidden">
+        <div v-show="tab === 'erd'" class="px-4 w-full min-h-[calc(100vh-56px-32px-56px)] relative overflow-hidden" @mousedown="startDrag" @mousemove="doDrag">
           <div class="absolute inset-0" :style="zoomStyle" ref="zoomArea">
             <div id="preview"></div>
           </div>
@@ -357,6 +357,7 @@
         const isShowKey = Vue.ref(false)
         const isShowComment = Vue.ref(false)
         const isHideColumns = Vue.ref(false)
+        const isDragging = Vue.ref(false)
 
         const scale = Vue.ref(1)
         const posX = Vue.ref(0)
@@ -389,6 +390,23 @@
         const moveLeft = () => move(-10, 0)
         const moveRight = () => move(10, 0)
 
+        const startDrag = () => {
+          isDragging.value = true
+        }
+
+        const stopDrag = () => {
+          isDragging.value = false
+          document.onselectstart = () => true
+        }
+
+        const doDrag = (event) => {
+          document.onselectstart = () => false
+          if (!!isDragging.value) {
+            posX.value += event.movementX
+            posY.value += event.movementY
+          }
+        }
+
         const restoreFromHash = () => {
           try {
             const h = location.hash.substr(1, location.hash.length)
@@ -615,6 +633,10 @@
           reRender()
         })
 
+        window.addEventListener('mouseup', () => {
+          stopDrag()
+        }, false);
+
         window.addEventListener('hashchange', () => {
           restoreFromHash()
           reRender()
@@ -653,6 +675,8 @@
           zoomArea,
           zoomIn,
           zoomOut,
+          startDrag,
+          doDrag,
           moveUp,
           moveDown,
           moveLeft,