-
-
Notifications
You must be signed in to change notification settings - Fork 44
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How can I listen to the event of click on label(both node label and edge label)? #72
Comments
@dash14 Hi, is this possible to implement? |
Hi @LuoXin-s, The following is an example of handling a click event with the current version of the <!-- App.vue -->
<script setup lang="ts">
import data from "./data";
function onClickNodeLabel(nodeId: string) {
console.log("Clicked node label:", nodeId);
}
function onClickEdgeLabel(edgeId: string) {
console.log("Clicked edge label:", edgeId);
}
</script>
<template>
<v-network-graph
:nodes="data.nodes"
:edges="data.edges"
:layouts="data.layouts"
>
<template
#override-node-label="{
nodeId,
scale,
text,
x,
y,
config,
textAnchor,
dominantBaseline,
}"
>
<!-- Since the label is part of the node area, the pointerdown event
is also stopped to avoid detection as a node click. -->
<text
class="custom-node-label"
:x="x"
:y="y"
:font-size="config.fontSize * scale"
:text-anchor="textAnchor"
:dominant-baseline="dominantBaseline"
:fill="config.color"
@pointerdown.stop=""
@click.prevent="onClickNodeLabel(nodeId)"
>{{ text }}</text
>
</template>
<template #edge-label="{ edgeId, edge, ...slotProps }">
<v-edge-label
:text="edge.label"
align="center"
vertical-align="above"
v-bind="slotProps"
@pointerdown.stop=""
@click="onClickEdgeLabel(edgeId)"
/>
</template>
</v-network-graph>
</template>
<style scoped>
.custom-node-label {
cursor: pointer;
}
::v-deep(.v-edge-label) {
pointer-events: all !important;
cursor: pointer !important;
}
</style> // data.ts
import { Nodes, Edges, Layouts } from "v-network-graph";
const nodes: Nodes = {
node1: { name: "Node 1" },
node2: { name: "Node 2" },
node3: { name: "Node 3" },
node4: { name: "Node 4" },
node5: { name: "Node 5" },
};
const edges: Edges = {
edge1: { source: "node1", target: "node2", label: "edge1" },
edge2: { source: "node2", target: "node3", label: "edge2" },
edge3: { source: "node3", target: "node4", label: "edge3" },
edge4: { source: "node4", target: "node5", label: "edge4" },
};
const layouts: Layouts = {
nodes: {
node1: { x: 0, y: 0 },
node2: { x: 80, y: 80 },
node3: { x: 160, y: 0 },
node4: { x: 240, y: 80 },
node5: { x: 320, y: 0 },
},
};
export default {
nodes,
edges,
layouts,
}; Best Regards |
@dash14 Sorry for the late response, I have other things to do recently. |
I close this issue for now. |
I would to provide the user interface so they can modify label interactively.
The text was updated successfully, but these errors were encountered: