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

Edge marker color only works for color values in hex format #13

Closed ctrueblood-epri closed 2 years ago

ctrueblood-epri commented 2 years ago

Defining an edge marker color works if the color value is in hex format (e.g., #212121). However, if the edge marker color is specified using non-hex color formats, such as rgba(128,128,128,0.35) or var(--my-color), then the edge marker does not appear when rendered.

Likely Cause

Please see this line: https://github.com/dash14/v-network-graph/blob/f639a8f95ebebe3b95121f78f690f0b743672574/src/composables/marker.ts#L30

The m.color.replace("#", "") expression referenced above allows parentheses ( and ) and comma , and period . to be included in the id string. Then, when sourceMarkerId and targetMarkerId are referenced in edge.vue template, the url(...) value becomes invalid. See lines 41-42 and 49-50 below.

https://github.com/dash14/v-network-graph/blob/919511e570276dcee78d0b11e3ccfb5577c149ba/src/components/edge.vue#L36-L51

Proposed Solution

In edge.vue, please consider wrapping the inner part of url(#...) in single quotes, like this: url('#...')

    :marker-start="state.sourceMarkerId ? `url('#${state.sourceMarkerId}')` : undefined"
    :marker-end="state.targetMarkerId ? `url('#${state.targetMarkerId}')` : undefined"

And, in marker.ts, perhaps add more logic to remove special characters:

m.color.replace("#", "").replace("(", "").replace(")", "").replace(",", "_").replace(".", "")

Thank you for considering this issue.

dash14 commented 2 years ago

Hi @ctrueblood-epri, Thank you for your detailed report of the problem and your suggestion of a solution.

As you pointed out, there are many ways to specify colors in various syntaxes. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_syntax_variations To solve this problem, I converted the color value to ascii code using base64 so that it can handle any input that comes in.

I just released (v0.3.5). Please check it out.

ctrueblood-epri commented 2 years ago

Thank you for fixing the bug! I tested v0.3.5 and it works successfully when using non-hex color values.