data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: fix cursor when grabbing in draggable UI (#1432)

Browse source
This commit is contained in:
Nolan Lawson 2019-08-24 21:23:52 -07:00 committed by GitHub
parent 59d26f1a09
commit e79fc8f3bd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/routes/_components/Draggable.html
View file

@ -5,7 +5,7 @@
on:click="onClick(event)" on:click="onClick(event)"
ref:area ref:area
> >
<div class="draggable-indicator {indicatorClassAfterRaf}" <div class="draggable-indicator {computedIndicatorClassAfterRaf}"
style={indicatorStyleAfterRaf} style={indicatorStyleAfterRaf}
on:pointerDown="onPointerDown(event)" on:pointerDown="onPointerDown(event)"
ref:indicator ref:indicator
@ -19,10 +19,14 @@
.draggable-area { .draggable-area {
position: relative; position: relative;
touch-action: none; touch-action: none;
cursor: pointer;
} }
.draggable-indicator { .draggable-indicator {
position: absolute; position: absolute;
cursor: pointer; cursor: grab;
}
.draggable-indicator.grabbing {
cursor: grabbing;
} }
.draggable-indicator-inner { .draggable-indicator-inner {
pointer-events: none; pointer-events: none;
@ -34,6 +38,7 @@
import { throttleTimer } from '../_utils/throttleTimer' import { throttleTimer } from '../_utils/throttleTimer'
import { pointerUp, pointerDown, pointerLeave, pointerMove } from '../_utils/pointerEvents' import { pointerUp, pointerDown, pointerLeave, pointerMove } from '../_utils/pointerEvents'
import { requestPostAnimationFrame } from '../_utils/requestPostAnimationFrame' import { requestPostAnimationFrame } from '../_utils/requestPostAnimationFrame'
import { classname } from '../_utils/classname'
// ensure DOM writes only happen once after a rAF // ensure DOM writes only happen once after a rAF
const updateIndicatorStyle = throttleTimer(requestAnimationFrame) const updateIndicatorStyle = throttleTimer(requestAnimationFrame)
@ -56,19 +61,21 @@
this.fire('change', { x, y }) this.fire('change', { x, y })
} }
}, { init: false }) }, { init: false })
this.observe('indicatorStyle', indicatorStyle => { this.observe('indicatorStyle', () => {
console.log('Draggable indicatorStyle', indicatorStyle)
updateIndicatorStyle(() => { updateIndicatorStyle(() => {
const { indicatorStyle } = this.get()
this.set({ indicatorStyleAfterRaf: indicatorStyle }) this.set({ indicatorStyleAfterRaf: indicatorStyle })
}) })
}) })
this.observe('indicatorClass', indicatorClass => { this.observe('computedIndicatorClass', () => {
updateIndicatorClass(() => { updateIndicatorClass(() => {
this.set(({ indicatorClassAfterRaf: indicatorClass })) const { computedIndicatorClass } = this.get()
this.set(({ computedIndicatorClassAfterRaf: computedIndicatorClass }))
}) })
}) })
this.observe('draggableClass', draggableClass => { this.observe('draggableClass', () => {
updateDraggableClass(() => { updateDraggableClass(() => {
const { draggableClass } = this.get()
this.set({ draggableClassAfterRaf: draggableClass }) this.set({ draggableClassAfterRaf: draggableClass })
}) })
}) })
@ -78,7 +85,7 @@
draggableClass: '', draggableClass: '',
draggableClassAfterRaf: '', draggableClassAfterRaf: '',
indicatorClass: '', indicatorClass: '',
indicatorClassAfterRaf: '', computedIndicatorClassAfterRaf: '',
x: 0, x: 0,
y: 0, y: 0,
indicatorWidth: 0, indicatorWidth: 0,
@ -88,7 +95,8 @@
computed: { computed: {
indicatorStyle: ({ x, y, indicatorWidth, indicatorHeight }) => ( indicatorStyle: ({ x, y, indicatorWidth, indicatorHeight }) => (
`left: calc(${x * 100}% - ${indicatorWidth / 2}px); top: calc(${y * 100}% - ${indicatorHeight / 2}px);` `left: calc(${x * 100}% - ${indicatorWidth / 2}px); top: calc(${y * 100}% - ${indicatorHeight / 2}px);`
) ),
computedIndicatorClass: ({ dragging, indicatorClass }) => classname(dragging && 'grabbing', indicatorClass)
}, },
methods: { methods: {
observe, observe,