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--> <!-- Splitter start-->
<div <div
class="splitpanes-splitter" class="splitpanes-splitter"
@mousedown="onMouseDown" @mousedown="bindEvents"
@touchstart="onMouseDown" @touchstart="bindEvents"
> >
<div <div
:class="[ :class="[
@@ -137,8 +137,25 @@ export default {
}, },
methods: { methods: {
onMouseDown () { bindEvents () {
splitter.bindEvents(this.onMouseMove, this.onMouseUp) // 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) { onMouseMove (event) {
@@ -166,18 +183,17 @@ export default {
this.dragging = false this.dragging = false
} }
splitter.unbindEvents(this.onMouseMove, this.onMouseUp) this.unbindEvents()
}, },
moveSplitter (event) { moveSplitter (event) {
const dragPercentage = splitter const splitterInfo = {
.getCurrentDragPercentage(event, this.container, this.horizontal) container: this.container,
paneBeforeMax: this.paneBefore.max,
const paneBeforeMax = this.paneBefore.max paneAfterMax: this.paneAfter.max,
const paneAfterMax = this.paneAfter.max isHorisontal: this.horizontal
}
// Prevent dragging beyond pane max. const offset = splitter.calculateOffset(event, splitterInfo)
const offset = splitter.calculateOffset(paneBeforeMax, paneAfterMax, dragPercentage)
const dir = this.horizontal ? 'top' : 'left' const dir = this.horizontal ? 'top' : 'left'
this.$set(this.movableSplitter, dir, offset) this.$set(this.movableSplitter, dir, offset)
}, },

26
src/splitter.js
View File

@@ -1,25 +1,4 @@
export default { 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. // Get the cursor position relative to the splitpane container.
getCurrentMouseDrag (event, container) { getCurrentMouseDrag (event, container) {
const rect = container.getBoundingClientRect() const rect = container.getBoundingClientRect()
@@ -40,7 +19,10 @@ export default {
return drag * 100 / containerSize 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 paneBeforeMaxReached = paneBeforeMax < 100 && (dragPercentage >= paneBeforeMax)
const paneAfterMaxReached = paneAfterMax < 100 && (dragPercentage <= 100 - paneAfterMax) const paneAfterMaxReached = paneAfterMax < 100 && (dragPercentage <= 100 - paneAfterMax)