nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add MouseWheel Event to ExtendedImage Component

Browse Source
This commit is contained in:
Maikaze 2019-07-26 13:54:36 +08:00
parent d579c79b09
commit a7800b8bb1
1 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/files/ExtendedImage.vue
View File

@ -8,6 +8,7 @@
@mousedown="mousedownStart" @mousedown="mousedownStart"
@mousemove="mouseMove" @mousemove="mouseMove"
@mouseup="mouseUp" @mouseup="mouseUp"
@wheel="wheelMove"
> >
<img :src="src" class="image-ex-img" ref="imgex" @load="setCenter"> <img :src="src" class="image-ex-img" ref="imgex" @load="setCenter">
</div> </div>
@ -32,9 +33,9 @@ export default {
type: Array, type: Array,
default: () => [] default: () => []
}, },
step: { zoomStep: {
type: Number, type: Number,
default: () => 0.05 default: () => 0.25
}, },
autofill: { autofill: {
type: Boolean, type: Boolean,
@ -53,7 +54,7 @@ export default {
} }
}, },
mounted() { mounted() {
let container = this.$refs.container; let container = this.$refs.container
this.classList.forEach(className => container.classList.add(className)) this.classList.forEach(className => container.classList.add(className))
// set width and height if they are zero // set width and height if they are zero
if (getComputedStyle(container).width === "0px") { if (getComputedStyle(container).width === "0px") {
@ -76,9 +77,10 @@ export default {
rate = 1 rate = 1
} }
// height will be auto set // height will be auto set
img.width = Math.floor(img.clientWidth * rate); img.width = Math.floor(img.clientWidth * rate)
img.style.top = `${Math.floor((container.clientHeight - img.clientHeight) / 2)}px`; img.style.top = `${Math.floor((container.clientHeight - img.clientHeight) / 2)}px`
img.style.left = `${Math.floor((container.clientWidth - img.clientWidth) / 2)}px`; img.style.left = `${Math.floor((container.clientWidth - img.clientWidth) / 2)}px`
document.addEventListener('mouseup', () => this.inDrag = false )
}, },
mousedownStart(event) { mousedownStart(event) {
this.lastX = null this.lastX = null
@ -114,7 +116,7 @@ export default {
this.scale = 1 this.scale = 1
break break
} }
this.$refs.imgex.style.transform = `scale(${this.scale})` this.setZoom()
event.preventDefault() event.preventDefault()
}, },
touchMove(event) { touchMove(event) {
@ -142,12 +144,9 @@ export default {
this.lastTouchDistance = touchDistance this.lastTouchDistance = touchDistance
return return
} }
this.scale = this.scale += (touchDistance - this.lastTouchDistance) / step
this.scale + (touchDistance - this.lastTouchDistance) / step
this.scale = this.scale < this.minScale ? this.minScale : this.scale
this.scale = this.scale > this.maxScale ? this.maxScale : this.scale
this.lastTouchDistance = touchDistance this.lastTouchDistance = touchDistance
this.$refs.imgex.style.transform = `scale(${this.scale})` this.setZoom()
} else if (event.targetTouches.length === 1) { } else if (event.targetTouches.length === 1) {
if (this.moveDisabled) return if (this.moveDisabled) return
let x = event.targetTouches[0].pageX - this.lastX let x = event.targetTouches[0].pageX - this.lastX
@ -163,6 +162,15 @@ export default {
style.left = `${this.pxStringToNumber(style.left) + x}px` style.left = `${this.pxStringToNumber(style.left) + x}px`
style.top = `${this.pxStringToNumber(style.top) + y}px` style.top = `${this.pxStringToNumber(style.top) + y}px`
}, },
wheelMove(event) {
this.scale += (event.wheelDeltaY / 100) * this.zoomStep
this.setZoom()
},
setZoom() {
this.scale = this.scale < this.minScale ? this.minScale : this.scale
this.scale = this.scale > this.maxScale ? this.maxScale : this.scale
this.$refs.imgex.style.transform = `scale(${this.scale})`
},
pxStringToNumber(style) { pxStringToNumber(style) {
return +style.replace("px", "") return +style.replace("px", "")
} }
@ -171,14 +179,15 @@ export default {
</script> </script>
<style> <style>
.image-ex-container { .image-ex-container {
position: relative;
margin: auto; margin: auto;
overflow: hidden; overflow: hidden;
position: relative;
} }
.image-ex-img { .image-ex-img {
position: absolute;
top: 0;
left: 0; left: 0;
top: 0;
position: absolute;
transition: transform 0.1s ease;
} }
</style> </style>