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>
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:
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
});
}
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()
});
}