Currently, I am developing an application using Vue 3's Composition API with TypeScript.
Within my view, I aim to retrieve the new position of a dragged v-group. To achieve this, I need to obtain a reference to the v-group and remove it from the vue-konva proxy using the getNode() function. Since I am utilizing TypeScript, understanding the type of element obtained from the v-group reference is crucial.
Unfortunately, I have been unable to locate documentation regarding the vue-konva proxy utilized for each konva object.
Here is my existing code snippet:
<template>
<v-stage :config="configKonva">
<v-layer>
<v-group ref="mainGroupProxy" :config="mainGroupConfig" @dragend="groupDragEnd">
<v-rect :config="getPixelConfig" />
</v-group>
</v-layer>
</v-stage>
</template>
<script setup lang="ts">
import Konva from "konva";
import { computed, ref } from "vue";
const configKonva = computed(() => ({
width: 100,
height: 100,
}));
const mainGroupConfig = computed(() => {
return {
x: 0,
y: 0,
draggable: true,
};
});
function getPixelConfig() {
return {
x: 0,
y: 0,
width: 5,
height: 5,
fill: "black",
stroke: "transparent",
};
}
const mainGroupProxy = ref<Konva.Group | null>(null); // Encountering issue here
function groupDragEnd() {
if (mainGroupProxy.value) {
console.log("mainGroupProxy.value: ", mainGroupProxy.value); // returns proxy
const mainGroup = mainGroupProxy.value.getNode(); // necessary to unwrap Konva node from Vue proxy
console.log("X position: " + mainGroup.getX());
}
}
</script>
The current implementation produces the following outcomes upon drag end:
mainGroupProxy.value: Proxy(Object) {__v_skip: true, getStage: ƒ, getNode: ƒ}
X position: 91.00000546773309
However, these results are inaccurate since the type of mainGroup should encompass the vue-konva type as well, like so:
const mainGroupProxy= ref<ProxyOfVueKonva<Konva.Group> | null>(null);
Where ProxyOfVueKonva denotes the specific proxy type. The absence of this type leads to TypeScript errors.