diff --git a/src/routes/_components/Draggable.html b/src/routes/_components/Draggable.html
index 59f6eff2..4b5c3f37 100644
--- a/src/routes/_components/Draggable.html
+++ b/src/routes/_components/Draggable.html
@@ -5,7 +5,7 @@
on:click="onClick(event)"
ref:area
>
-
{
- console.log('Draggable indicatorStyle', indicatorStyle)
+ this.observe('indicatorStyle', () => {
updateIndicatorStyle(() => {
+ const { indicatorStyle } = this.get()
this.set({ indicatorStyleAfterRaf: indicatorStyle })
})
})
- this.observe('indicatorClass', indicatorClass => {
+ this.observe('computedIndicatorClass', () => {
updateIndicatorClass(() => {
- this.set(({ indicatorClassAfterRaf: indicatorClass }))
+ const { computedIndicatorClass } = this.get()
+ this.set(({ computedIndicatorClassAfterRaf: computedIndicatorClass }))
})
})
- this.observe('draggableClass', draggableClass => {
+ this.observe('draggableClass', () => {
updateDraggableClass(() => {
+ const { draggableClass } = this.get()
this.set({ draggableClassAfterRaf: draggableClass })
})
})
@@ -78,7 +85,7 @@
draggableClass: '',
draggableClassAfterRaf: '',
indicatorClass: '',
- indicatorClassAfterRaf: '',
+ computedIndicatorClassAfterRaf: '',
x: 0,
y: 0,
indicatorWidth: 0,
@@ -88,7 +95,8 @@
computed: {
indicatorStyle: ({ x, y, indicatorWidth, indicatorHeight }) => (
`left: calc(${x * 100}% - ${indicatorWidth / 2}px); top: calc(${y * 100}% - ${indicatorHeight / 2}px);`
- )
+ ),
+ computedIndicatorClass: ({ dragging, indicatorClass }) => classname(dragging && 'grabbing', indicatorClass)
},
methods: {
observe,