Skip to content
Permalink
Browse files

ffix(QScrollArea): sane state management; panning gets interrupted if…

… no movement within timer
  • Loading branch information
rstoenescu committed Feb 11, 2020
1 parent b89c320 commit cb825ec11a6c435434b939346df3f202b76230a0
@@ -5,4 +5,3 @@
yarn.lock
debug.log
package-lock.json
.vscode/settings.json
@@ -16,7 +16,7 @@ div.relative
)
q-badge.absolute(
v-show="copied"
style="top: 12px; right: 58px;"
style="top: 8px; right: 58px;"
) Copied to clipboard
</template>

@@ -3,7 +3,7 @@
<q-scroll-area
horizontal
style="height: 210px; width: 230px;"
class="bg-grey-1"
class="bg-grey-1 rounded-borders"
>
<div class="row no-wrap">
<div v-for="n in 10" :key="n" style="width: 150px" class="q-pa-sm">
@@ -40,30 +40,31 @@ export default Vue.extend({

data () {
return {
active: false,
hover: this.visible === true,
// state management
tempShowing: false,
panning: false,
hover: false,

// other...
containerWidth: 0,
containerHeight: 0,
scrollPosition: 0,
scrollSize: 0
}
},

watch: {
visible (val) {
this.hover = val === true
}
},

computed: {
classes () {
return 'q-scrollarea' +
(this.isDark === true ? ' q-scrollarea--dark' : '')
},

thumbHidden () {
return this.scrollSize <= this.containerSize ||
(this.active === false && this.hover === false)
return (
(this.visible === null ? this.hover : this.visible) !== true &&
this.tempShowing === false &&
this.panning === false
) || this.scrollSize <= this.containerSize
},

thumbSize () {
@@ -151,56 +152,62 @@ export default Vue.extend({
},

__updateContainer ({ height, width }) {
let change = false

if (this.containerWidth !== width) {
this.containerWidth = width
this.__setActive(true, true)
change = true
}

if (this.containerHeight !== height) {
this.containerHeight = height
this.__setActive(true, true)
change = true
}

change === true && this.__startTimer()
},

__updateScroll ({ position }) {
if (this.scrollPosition !== position) {
this.scrollPosition = position
this.__setActive(true, true)
this.__startTimer()
}
},

__updateScrollSize ({ height, width }) {
if (this.horizontal) {
if (this.scrollSize !== width) {
this.scrollSize = width
this.__setActive(true, true)
this.__startTimer()
}
}
else {
if (this.scrollSize !== height) {
this.scrollSize = height
this.__setActive(true, true)
}
else if (this.scrollSize !== height) {
this.scrollSize = height
this.__startTimer()
}
},

__panThumb (e) {
if (this.thumbHidden === true) {
return
}

if (e.isFirst === true) {
if (this.thumbHidden === true) {
return
}

this.refPos = this.scrollPosition
this.__setActive(true, true)
this.panning = true
}
else if (this.panning !== true) {
return
}

if (e.isFinal === true) {
this.__setActive(false)
this.panning = false
}

const multiplier = (this.scrollSize - this.containerSize) / (this.containerSize - this.thumbSize)
const distance = this.horizontal ? e.distance.x : e.distance.y
const pos = this.refPos + (e.direction === this.direction ? 1 : -1) * distance * multiplier

this.__setScroll(pos)
},

@@ -216,34 +223,19 @@ export default Vue.extend({
}
},

__setActive (active, timer) {
clearTimeout(this.timer)
__startTimer () {
if (this.tempShowing === true) {
clearTimeout(this.timer)

if (active === this.active) {
if (active && this.timer) {
this.__startTimer()
}
return
}

if (active) {
this.active = true
if (timer) {
this.__startTimer()
}
this.timer = setTimeout(() => {
this.tempShowing = false
}, this.delay)
}
else {
this.active = false
this.tempShowing = true
}
},

__startTimer () {
this.timer = setTimeout(() => {
this.active = false
this.timer = null
}, this.delay)
},

__setScroll (offset) {
this.$refs.target[this.dirProps] = offset
}
@@ -252,12 +244,10 @@ export default Vue.extend({
render (h) {
return h('div', {
class: this.classes,
on: this.visible === null
? cache(this, 'desk', {
mouseenter: () => { this.hover = true },
mouseleave: () => { this.hover = false }
})
: null
on: cache(this, 'desk', {
mouseenter: () => { this.hover = true },
mouseleave: () => { this.hover = false }
})
}, [
h('div', {
ref: 'target',

0 comments on commit cb825ec

Please sign in to comment.
You can’t perform that action at this time.