Currently, I am utilizing Konvajs for my project. In simple terms, Konvajs provides a canvas for drawing and editing elements such as text nodes that can be manipulated by dragging and dropping. These nodes are organized within groups, which are then added to a containerGroup, and finally placed in a layer. (See example code below)
To enable this functionality, I have integrated Vuex into my setup. I successfully update the data in Vuex, but I encounter an issue when it comes to updating the layers to display the new node on the canvas.
Upon creating a new node, I perform all necessary operations to add it to the group and container. However, after completing these steps, I aim to commit the changes to the layer. Despite my efforts, the component does not reflect the updates when adding a node to 'groupA'.
// Commit layer
store.store.commit('node/setLayer', layer)
// Change state
setLayer(state, payload) {
Vue.set(state.layers, state.activeLayer, payload)
}
Despite researching extensively, common solutions such as Object.assign() and Vue.set() have not resolved my issue. These methods are intended to inform Vue of a mutated state, yet they do not seem to work in my case. Perhaps I am misunderstanding their usage, hence why I seek clarification and guidance for future reference.
If I trigger a different mutation, the layer list reflects the changes, suggesting a possible limitation with reactivity or how it operates in my scenario.
Here is an overview of my object structure:
state: {
layers: {
a: {
groups: {
groupA: {
nodeText1: {
attrs: {
width: 100,
height: 100
}
},
nodeText2: {
attrs: {
width: 100,
height: 100
}
},
...: {}
},
groupB: {
node: {
attrs: {
width: 100,
height: 100
}
}
}
}
},
b: {
groups: {
groupC: {
node: {
attrs: {
width: 100,
height: 100
}
}
}
}
}
}
}
Your assistance on this matter would be greatly appreciated. Thank you in advance.