feat: add v-model support for Konva components. close #201

Author: lavrton

.gitignore

@@ -6,6 +6,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 coverage/
+.claude
 
 # Editor directories and files
 .idea

src/components/KonvaNode.ts

@@ -10,7 +10,7 @@ import {
   VNode,
 } from 'vue';
 import type { Node } from 'konva/lib/Node';
-import { applyNodeProps, findParentKonva, updatePicture, checkOrder } from '../utils';
+import { applyNodeProps, findParentKonva, updatePicture, checkOrder, syncVModelBindings, VMODEL_NAMESPACE } from '../utils';
 import { KonvaNodeConstructor } from '../types';
 
 const EVENTS_NAMESPACE = '.vue-konva-event';
@@ -78,17 +78,20 @@ export default function (componentName: string, NodeConstructor: KonvaNodeConstr
         if (parentKonvaNode && 'add' in parentKonvaNode)
           (parentKonvaNode as { add: (node: Node) => void }).add(__konvaNode);
         updatePicture(__konvaNode);
+        syncVModelBindings(__konvaNode, instance);
       });
 
       onUnmounted(() => {
         updatePicture(__konvaNode);
         __konvaNode.destroy();
         __konvaNode.off(EVENTS_NAMESPACE);
+        __konvaNode.off(VMODEL_NAMESPACE);
       });
 
       onUpdated(() => {
         uploadKonva();
         checkOrder(instance.subTree, __konvaNode);
+        syncVModelBindings(__konvaNode, instance);
       });
 
       watch(() => props.config, uploadKonva, { deep: true });

src/components/Stage.ts

@@ -12,7 +12,7 @@ import {
 } from 'vue';
 import KonvaModule from 'konva';
 import type { StageConfig } from 'konva/lib/Stage';
-import { applyNodeProps, checkOrder } from '../utils';
+import { applyNodeProps, checkOrder, syncVModelBindings } from '../utils';
 
 const Stage = (KonvaModule as any).default?.Stage || KonvaModule.Stage;
 
@@ -78,11 +78,13 @@ export default defineComponent({
       }
       uploadKonva();
       validateChildren();
+      syncVModelBindings(__konvaNode, instance);
     });
 
     onUpdated(() => {
       uploadKonva();
       checkOrder(instance.subTree, __konvaNode);
+      syncVModelBindings(__konvaNode, instance);
     });
 
     onBeforeUnmount(() => {

src/utils/index.ts

@@ -88,3 +88,4 @@ export function checkOrder(subTree: VNode, konvaNode: Node) {
 }
 
 export { updatePicture, applyNodeProps };
+export { default as syncVModelBindings, VMODEL_NAMESPACE } from './syncVModelBindings';

src/utils/syncVModelBindings.ts

@@ -0,0 +1,22 @@
+import type { ComponentInternalInstance } from 'vue';
+import type { Node } from 'konva/lib/Node';
+
+export const VMODEL_NAMESPACE = '.vue-konva-vmodel';
+const UPDATE_PREFIX = 'onUpdate:';
+
+export default function syncVModelBindings(
+  konvaNode: Node,
+  instance: ComponentInternalInstance,
+) {
+  konvaNode.off(VMODEL_NAMESPACE);
+  const vnodeProps = instance.vnode.props || {};
+  for (const key in vnodeProps) {
+    if (key.startsWith(UPDATE_PREFIX)) {
+      const propName = key.slice(UPDATE_PREFIX.length);
+      const handler = vnodeProps[key];
+      konvaNode.on(`${propName}Change${VMODEL_NAMESPACE}`, () => {
+        handler(konvaNode.getAttr(propName));
+      });
+    }
+  }
+}