Closed ctrueblood-epri closed 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.
Thank you for fixing the bug! I tested v0.3.5 and it works successfully when using non-hex color values.
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 asrgba(128,128,128,0.35)
orvar(--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, whensourceMarkerId
andtargetMarkerId
are referenced in edge.vue template, theurl(...)
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('#...')
And, in marker.ts, perhaps add more logic to remove special characters:
Thank you for considering this issue.