Larger draggable area

Signed-off-by: Yukai Huang <yukaihuangtw@gmail.com>

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()
   })

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;