Support for v-model

[chojnicki]

Is there a way to use v-model with nodes props?

Let's say I have two inputs with X and Y coordinates, binded like this:

<v-rect
  ref="rect"
  :width="200"
  :height="100"
  :x="x"
  :y="y"
  :draggable="true"
  @dragend="handleDragend"
/>

Problem is, this will of course only work one way. So when I change ref x/y rect will move, but when I move rect directly in Konva thank's to draggable, ref values will not update itself. In Konva default way to achieve this is dragend event:

<v-rect
  ...
  @dragend="handleDragend"
/>

const handleDragend = () => {
  const rectNode = rect.value.getNode()
  x.value = rectNode.x()
  y.value = rectNode.y()
}

Sure, it works, but it's annoying and with a lot of boilerplate when there are many props and nodes.

In Vue it's natural to use v-model for two-way binding, like so:

<v-rect
  v-model:x="x"
  v-model:y="y"
/>

But this does not work. I checked component source and I cannot find anything responsible for sending events. So I guess it was never intended to work this way 😥

But this is Vue package, so I think it should support Vue way of coding. V-model support would be awesome, instead relying on standard JS/Konva DOM events.

I could try to make pull request, but problem is that I do not have much experience with Konva itself and because of that I'm not sure how to properly listen to node config changes made in Konva itself (if it's even possible) and then pass it to as vue events. Maybe it could listen to specific events like draggable, compare it to vue props and then send as v-model event.

Any thoughts?

[lavrton]

I think working in "vue-way" is a good approach and direction for vue-konva library.

I don't know Vue deep enough to implement that. But I am ok to review the Pull Request.

There are just two events that you need to listen: dragmove and transform. And only these props can be changed by user (via dragging or transforming): x, y, scaleX, scaleY, skewX, skewY, rotation.

Other attributes are changed via props. So, I don't think model of them is useful.

[chojnicki]

Thanks for info. So I will try to find a moment for this and prepare this feature then.

[DavidVaness]

This is a great idea! any progress @chojnicki?