zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

Splitpanes refactoring

Browse Source
This commit is contained in:
lana-k
2021-02-25 18:42:57 +01:00
parent 3b34f81d56
commit 869da1da74
2 changed files with 33 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Splitpanes.vue
View File

@@ -20,8 +20,8 @@
<!-- Splitter start-->
<div
class="splitpanes-splitter"
@mousedown="onMouseDown"
@touchstart="onMouseDown"
@mousedown="bindEvents"
@touchstart="bindEvents"
>
<div
:class="[
@@ -137,8 +137,25 @@ export default {
},
methods: {
onMouseDown () {
splitter.bindEvents(this.onMouseMove, this.onMouseUp)
bindEvents () {
// Passive: false to prevent scrolling while touch dragging.
document.addEventListener('mousemove', this.onMouseMove, { passive: false })
document.addEventListener('mouseup', this.onMouseUp)
if ('ontouchstart' in window) {
document.addEventListener('touchmove', this.onMouseMove, { passive: false })
document.addEventListener('touchend', this.onMouseUp)
}
},
unbindEvents () {
document.removeEventListener('mousemove', this.onMouseMove, { passive: false })
document.removeEventListener('mouseup', this.onMouseUp)
if ('ontouchstart' in window) {
document.removeEventListener('touchmove', this.onMouseMove, { passive: false })
document.removeEventListener('touchend', this.onMouseUp)
}
},
onMouseMove (event) {
@@ -166,18 +183,17 @@ export default {
this.dragging = false
}
splitter.unbindEvents(this.onMouseMove, this.onMouseUp)
this.unbindEvents()
},
moveSplitter (event) {
const dragPercentage = splitter
.getCurrentDragPercentage(event, this.container, this.horizontal)
const paneBeforeMax = this.paneBefore.max
const paneAfterMax = this.paneAfter.max
// Prevent dragging beyond pane max.
const offset = splitter.calculateOffset(paneBeforeMax, paneAfterMax, dragPercentage)
const splitterInfo = {
container: this.container,
paneBeforeMax: this.paneBefore.max,
paneAfterMax: this.paneAfter.max,
isHorisontal: this.horizontal
}
const offset = splitter.calculateOffset(event, splitterInfo)
const dir = this.horizontal ? 'top' : 'left'
this.$set(this.movableSplitter, dir, offset)
},

26
src/splitter.js
View File

@@ -1,25 +1,4 @@
export default {
bindEvents (onMouseMove, onMouseUp) {
// Passive: false to prevent scrolling while touch dragging.
document.addEventListener('mousemove', onMouseMove, { passive: false })
document.addEventListener('mouseup', onMouseUp)
if ('ontouchstart' in window) {
document.addEventListener('touchmove', onMouseMove, { passive: false })
document.addEventListener('touchend', onMouseUp)
}
},
unbindEvents (onMouseMove, onMouseUp) {
document.removeEventListener('mousemove', onMouseMove, { passive: false })
document.removeEventListener('mouseup', onMouseUp)
if ('ontouchstart' in window) {
document.removeEventListener('touchmove', onMouseMove, { passive: false })
document.removeEventListener('touchend', onMouseUp)
}
},
// Get the cursor position relative to the splitpane container.
getCurrentMouseDrag (event, container) {
const rect = container.getBoundingClientRect()
@@ -40,7 +19,10 @@ export default {
return drag * 100 / containerSize
},
calculateOffset (paneBeforeMax, paneAfterMax, dragPercentage) {
// Returns the new position in percents.
calculateOffset (event, { container, isHorisontal, paneBeforeMax, paneAfterMax }) {
const dragPercentage = this.getCurrentDragPercentage(event, container, isHorisontal)
const paneBeforeMaxReached = paneBeforeMax < 100 && (dragPercentage >= paneBeforeMax)
const paneAfterMaxReached = paneAfterMax < 100 && (dragPercentage <= 100 - paneAfterMax)