Closed Suniron closed 1 year ago
Hi @Suniron, Thanks for your question.
My problem: I dont find the way to define custom node as rectangle + custom svg inside.
An example of specifying a custom node with a rect svg is shown below. I hope this is helpful.
<script setup lang="ts">
import { defineConfigs } from "v-network-graph";
const nodes = {
node1: { name: "Node 1" },
node2: { name: "Node 2" },
node3: { name: "Node 3" },
node4: { name: "Node 4" },
};
const edges = {
edge1: { source: "node1", target: "node2" },
edge2: { source: "node2", target: "node3" },
edge3: { source: "node3", target: "node4" },
};
const layouts = {
nodes: {
node1: { x: 0, y: 0 },
node2: { x: 50, y: 50 },
node3: { x: 100, y: 0 },
node4: { x: 150, y: 50 },
},
}
const configs = defineConfigs({
node: {
selectable: true,
normal: {
type: "rect",
width: 32,
height: 32,
borderRadius: 0
},
},
});
</script>
<template>
<v-network-graph
class="graph"
:nodes="nodes"
:edges="edges"
:configs="configs"
:layouts="layouts"
>
<template #override-node="{ config, scale }">
<!-- node's center position is (0, 0) -->
<!-- shadow -->
<rect
:x="4 * scale"
:y="(-config.height / 2 + config.height * 0.7) * scale"
:width="config.width * scale"
:height="(config.height * 0.3) * scale"
fill="#444466"
transform="skewX(-50)"
/>
<!-- node rect -->
<rect
:x="-config.width / 2 * scale"
:y="-config.height / 2 * scale"
:width="config.width * scale"
:height="config.height * scale"
:fill="config.color"
stroke="#000"
:stroke-width="1 * scale"
/>
</template>
</v-network-graph>
</template>
<style>
.graph {
width: 800px;
height: 600px;
border: 1px solid #000;
}
</style>
More large question 1: where can I found all possibles tags to put inside v-network-graph slots ?
v-network-graph simply expands the tags specified in the slot to the desired position, so you can specify any SVG tag that the browser recognizes.
More large question 2: where can I found all possibles slots can be used in the map ? I searched a lot in documentation but they are not listed in... 🤷♂️
Sorry, the list of slots is not yet documented at this time.... The following slots can be specified.
Other slots can also be added as layers, specifying where they are to be inserted. For details, please check the custom layer example.
Best Regards
I close this issue for now. If you have any other question/comment, please reopen this issue.
Hey there,
My problem: I dont find the way to define custom node as rectangle + custom svg inside.
I tried with ''rect'' in defined config or with / tags in the override node slot.
In waiting à solution, I have a circle with my svg inside..
More large question 1: where can I found all possibles tags to put inside v-network-graph slots ?
More large question 2: where can I found all possibles slots can be used in the map ? I searched a lot in documentation but they are not listed in... 🤷♂️
Thanks by advance !