Refreshing Konva shape state in Vue component - vue.js

Question

After dragging and releasing a shape I want it to snap to a close by position. To test this I create a shape at {x:100, y:100}, then drag it and it does snap to 0,0, but only the first time Im dragging it. Next time it will ignore me setting x,y.
I might be missing something basic here? Maybe I am not mutating store the right way. In the below code you can see three attempts to set x and y in handleDragend.
<template>
<div>
<v-stage
ref="stage"
:config="configKonva"
#dragstart="handleDragstart"
#dragend="handleDragend"
>
<v-layer ref="layer">
<v-regular-polygon
v-for="item in list"
:key="item.id"
:config="{
x: item.x,
y: item.y,
sides: 6,
rotation: item.rotation,
id: item.id,
radius: 50,
outerRadius: 50,
fill: 'green',
draggable: true,
}"
></v-regular-polygon>
</v-layer>
</v-stage>
</div>
</template>
<script>
const width = window.innerWidth;
const height = window.innerHeight;
export default {
data() {
return {
list: [],
dragItemId: null,
configKonva: {
width: width,
height: height,
}
};
},
methods: {
handleDragstart(e) {
//
},
handleDragend(e) {
let item = this.list.find(i => i.id === e.target.id());
let snapTo = { x: 0, y: 0}
// Attempt 1
Vue.set(this.list, 0, {
...item,
x: snapTo.x,
y: snapTo.y,
})
// Attempt 2
this.list = this.list.map(function(shape) {
if(shape.id === item.id) {
return {
...item,
x: snapTo.x,
y: snapTo.y,
}
}
})
},
},
mounted() {
this.list.push({
id: 1,
x: 100,
y: 100,
});
}
};
</script>

Answer 1

vue-konva updates nodes ONLY when you have changes in your template.
On the first snap, the coordinated in the template (and store) are changed from {100, 100} to {0, 0}.
When you drag the node the second time, the store still keeps {0, 0} in memory. So no changes are triggered and the node is not moved back.
There are two ways to solve the issue:
(1) Update Konva node position manually
handleDragend(e) {
let item = this.list.find(i => i.id === e.target.id());
let snapTo = { x: 0, y: 0 };
e.target.position(snapTo);
e.target.getLayer().batchDraw();
Vue.set(this.list, 0, {
...item,
x: snapTo.x,
y: snapTo.y
});
}
(2) Keep the store in sync with node position
You may need to register all position changes into the store:
handleDragMove(e) {
// do this on every "dragmove"
let item = this.list.find(i => i.id === e.target.id());
Vue.set(this.list, 0, {
...item,
x: e.target.x(),
y: e.target.y()
});
}
Demo: https://codesandbox.io/s/nifty-northcutt-v52ue