search

dash14 / v-network-graph

An interactive network graph visualization component for Vue 3
https://dash14.github.io/v-network-graph/
MIT License
495 stars 44 forks source link

node image prevent to show node stroke #25

Closed drAliRahnema closed 2 years ago

drAliRahnema commented 2 years ago

hii use image as node and then when i want to use storke for the same node it will be hide behind the image how can i fix this issue

drAliRahnema commented 2 years ago

hi i use image as node and then when i want to use stroke for the same node it will be hide behind the image how can i fix this issue

dash14 commented 2 years ago

Hi @MohandesaliRahnema, I think it is possible to do this by inserting the circle that draws the node stroke after the image. I changed the node image example to do so. I hope this is helpful. https://dash14.github.io/v-network-graph/examples/appearance.html#custom-node

drAliRahnema commented 2 years ago

thank you a lot you save my day excuse me i have two another question 1- how can i have two image on a node for ex. i want to show os icon as a small circle on right bottom of a node where the node has an image itself for ex a node have status image via sub img to show os 2- the event that return on node click has no attr offsetx and offset on event.target best regards

On Sun, Dec 19, 2021 at 3:15 PM dash14 @.***> wrote:

Hi @MohandesaliRahnema https://github.com/MohandesaliRahnema, I think it is possible to do this by inserting the circle that draws the node stroke after the image. I changed the node image example to do so. I hope this is helpful.

https://dash14.github.io/v-network-graph/examples/appearance.html#custom-node

— Reply to this email directly, view it on GitHub https://github.com/dash14/v-network-graph/issues/25#issuecomment-997377763, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEAUS5VBX6UL36TINMF2DNLURXAVHANCNFSM5KLTJUAA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

dash14 commented 2 years ago

1- how can i have two image on a node

As implemented in the example, the image is just an SVG <image> tag. You can put as many as you want between <template #override-node="..."> ~ </template>. The display position of the placed element can be adjusted with x and y. The coordinates of the center of the node are (0,0).

2- the event that return on node click has no attr offsetx and offset on event.target

There are no offset attributes in SVG Element, so try using getBoundingClientRect() or getBBox().

drAliRahnema commented 2 years ago

thank you very much

On Mon, Dec 20, 2021 at 8:20 PM dash14 @.***> wrote:

1- how can i have two image on a node

As implemented in the example, the image is just an SVG tag. You can put as many as you want between <template #override-node="..."> ~ . The display position of the placed element can be adjusted with x and y. The coordinates of the center of the node are (0,0).

2- the event that return on node click has no attr offsetx and offset on event.target

There are no offset attributes in SVG Element, so try using getBoundingClientRect() or getBBox().

— Reply to this email directly, view it on GitHub https://github.com/dash14/v-network-graph/issues/25#issuecomment-998099413, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEAUS5R2GQU47GRPWMC4TIDUR5NEJANCNFSM5KLTJUAA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

drAliRahnema commented 2 years ago

[image: image.png] when i use two template for image i got above error

On Tue, Dec 21, 2021 at 8:39 AM Ali Rahnema @.***> wrote:

thank you very much

On Mon, Dec 20, 2021 at 8:20 PM dash14 @.***> wrote:

1- how can i have two image on a node

As implemented in the example, the image is just an SVG tag. You can put as many as you want between <template #override-node="..."> ~ . The display position of the placed element can be adjusted with x and y. The coordinates of the center of the node are (0,0).

2- the event that return on node click has no attr offsetx and offset on event.target

There are no offset attributes in SVG Element, so try using getBoundingClientRect() or getBBox().

— Reply to this email directly, view it on GitHub https://github.com/dash14/v-network-graph/issues/25#issuecomment-998099413, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEAUS5R2GQU47GRPWMC4TIDUR5NEJANCNFSM5KLTJUAA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

dash14 commented 2 years ago

I can't see the image... I don't know how you are writing the code, so I'll guess. Are you writing two <template template #override-node>? This <template> is to replace a node, and can only be written once. I think you want to use multiple tags (elements) to represent a node. So please put two <image> inside one <template #override-node>.

drAliRahnema commented 2 years ago

oh yahhhh... thank you very much

On Tue, Dec 21, 2021 at 7:33 PM dash14 @.***> wrote:

I can't see the image... I don't know how you are writing the code, so I'll guess. Are you writing two <template template #override-node>? This