Fill property is not working properly

GoJS
#1

Hi,
In our diagram we are having few nodes and groups.
For them we are giving fill property to transparent in templates.
But some times, Instead of transparent its showing a gray color background.
Its coming for a few nodes and groups in the diagram, and when we Zoom in and Zoom out this will go to normal state and other nodes got filled with gray color.
( frequently observed when diagram contains more groups and nodes )




In above attached image, I added two states of every node and group.
1 and 2 are normal nodes and 3 is a group with shape “roundedrectangle”.

Few things I observed here is,

  1. If I give fill to null it works properly, but we want clickable area so we cant use that.
  2. Not only with transparent, but with some other colors also same behavior is observed.
  3. When I move the diagram using scroll bar, If a node/group is at canvas bounds, its hidden part is not getting filled with the gray color. same as image 4 in above attach.

How can we avoid this strange behavior ?

#2

Chances are that one of the colors you specified is not a valid CSS color string. Are there any console messages that might give you a clue as to which one is wrong? If not, you may need to examine all of the color strings carefully for yourself.

#3

I tried with “transparent”, "rgba(0,0,0,0) for transparent, “red” and “green” colors.
And there are no console messages.
Initially its drawing properly with all colors, but some times some random nodes/groups are behaving like this.
When I do zoom in and zoom out random nodes are changing their states.
Is this a canvas specific problem?
Or any default fill color is overriding ?

#4

This is looking more and more like one of the color strings that you are using is not a valid CSS color string. It is clear that you are not only using “transparent”, “red”, and “green”, but other colors too. Please check all of them.

You could also try running in different browsers to (maybe) see different results.

#5

For all nodes/groups we are using “transparent” for fill property. The other colors i mentioned was just for reproducing purpose.
I tried it on IE10 and latest chrome and firefox browsers, same behavior every where.
I debugged nodes when they filled with gray, and checked its fill color, its giving transparent only.

#6

Can we see the code for the node and link templates?

#7

Is there any chance you could let us run your app?

#8

Unfortunately i cant share the app, as its not public.
And we are having complex node templates and they are many, and not that self explanatory :(
I will try to make a small POC and will share with you.

#9

You can always email us, gojs (at) nwoods.com if the code is private.

We suspect its a malformed CSS color string somewhere in one of the templates.

#10

We tried by not specifying any color in templates, so that diagram can take default colors. But still the problem was reproducible.
After some debugging, we found that one node template was causing the problem.
Some places we need to add a node with out any visibility, and it should act as node and handle connected links.
so for that we created a invisible node template like this.

                $(go.Node, "Spot", {

<span =“apple-tab-span”="" style=“white-space:pre”> selectionAdorned : false
<span =“apple-tab-span”="" style=“white-space:pre”> },
$(go.Shape,{
<span =“apple-tab-span”="" style=“white-space:pre”> width : 0,
<span =“apple-tab-span”="" style=“white-space:pre”> height : 0,
<span =“apple-tab-span”="" style=“white-space:pre”> fill : null,
<span =“apple-tab-span”="" style=“white-space:pre”> stroke : null,
<span =“apple-tab-span”="" style=“white-space:pre”> strokeWidth : 0
<span =“apple-tab-span”="" style=“white-space:pre”> }))

And this node will be part of groups.
We solved it by giving height 20, as width is still 0 so still it is invisible.
But here also when we zoomout and make the diagram very small the same behavior is observed.

But without this node also, it is reproducible.
Observed that, If the diagram is big and contains smaller nodes ( height,width as 20), then when we zoom out and make it very small or view it in small overview box its reproducible.

#11

I have added that node template to basic.html, one inside the group and one outside, and it seems to “work” without distorting anything else:

So I think I may need more information to reproduce this problem.