From e3a6669c7e9ecb4cc2fc59f03c38f981bf7c5f5d Mon Sep 17 00:00:00 2001
From: Yukai Huang <yukaihuangtw@gmail.com>
Date: Tue, 21 Apr 2020 00:26:03 +0800
Subject: [PATCH] Larger draggable area

Signed-off-by: Yukai Huang <yukaihuangtw@gmail.com>
---
 public/js/lib/renderer/lightbox/index.js     | 27 +++++++++++++-------
 public/js/lib/renderer/lightbox/lightbox.css | 23 +++++++++++++++++
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/public/js/lib/renderer/lightbox/index.js b/public/js/lib/renderer/lightbox/index.js
index 84636e0f..3619e0ae 100644
--- a/public/js/lib/renderer/lightbox/index.js
+++ b/public/js/lib/renderer/lightbox/index.js
@@ -131,7 +131,11 @@ function addImageZoomListener (container) {
 function addImageDragListener (image) {
   let moved = false
   let pos = []
-  image.addEventListener('mousedown', (evt) => {
+
+  const container = findOrCreateLightboxContainer()
+  const inner = container.querySelector('.lightbox-inner')
+
+  const onMouseDown = (evt) => {
     moved = true
 
     const { left, top } = image.getBoundingClientRect()
@@ -140,9 +144,11 @@ function addImageDragListener (image) {
       evt.pageX - left,
       evt.pageY - top
     ]
-  }, true)
+  }
+  image.addEventListener('mousedown', onMouseDown)
+  inner.addEventListener('mousedown', onMouseDown)
 
-  image.addEventListener('mousemove', (evt) => {
+  const onMouseMove = (evt) => {
     if (!moved) {
       return
     }
@@ -150,17 +156,20 @@ function addImageDragListener (image) {
     image.style.left = `${evt.pageX - pos[0]}px`
     image.style.top = `${evt.pageY - pos[1]}px`
     image.style.position = 'absolute'
-  }, true)
+  }
+  image.addEventListener('mousemove', onMouseMove)
+  inner.addEventListener('mousemove', onMouseMove)
 
-  image.addEventListener('mouseup', () => {
+  const onMouseUp = () => {
     moved = false
     pos = []
-  }, true)
+  }
+  image.addEventListener('mouseup', onMouseUp)
+  inner.addEventListener('mouseup', onMouseUp)
 
-  image.addEventListener('mouseout', () => {
-    moved = false
+  inner.addEventListener('click', (e) => {
+    e.stopPropagation()
   })
-
   image.addEventListener('click', (e) => {
     e.stopPropagation()
   })
diff --git a/public/js/lib/renderer/lightbox/lightbox.css b/public/js/lib/renderer/lightbox/lightbox.css
index c8fe1438..54ff6948 100644
--- a/public/js/lib/renderer/lightbox/lightbox.css
+++ b/public/js/lib/renderer/lightbox/lightbox.css
@@ -72,6 +72,29 @@
   right: 10px;
 }
 
+.lightbox-container .lightbox-inner {
+  width: 100%;
+  height: 100%;
+  cursor: move;
+
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+     -moz-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+     -moz-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
 .lightbox-container .lightbox-inner img {
   max-width: 100%;
   cursor: move;