SVG renderer: Duplicate nodes are created on adding/removing shadow

GoJS
1

I am adding shadow on mouseEnter and removing it on mouseLeave
Here’s the code for it

$(
      go.Node,
      "Spot",
      {
        mouseEnter: (e, obj: go.GraphObject) => {
          this._toggleHoverEffect(obj.part, true);
        },
        mouseLeave: (e, obj: go.GraphObject) => {
          this._toggleHoverEffect(obj.part, false);
        },
      },
)

private static _toggleHoverEffect(part: go.Part, isHovered: boolean): void {
    if (isHovered) {
      part.shadowBlur = 30;
      part.shadowOffset = new go.Point(0, 2);
      part.shadowColor = SHAPE_COLORS.lightShadow;
      part.isShadowed = true;
    } else {
      part.shadowBlur = null;
      part.shadowOffset = new go.Point();
      part.shadowColor = null;
      part.isShadowed = false;
    }
  }

Now this is working perfectly fine when using default renderer.
But when using svg renderer duplicate node elements are created every time on mouseEnter and mouseLeave.
image

I think this has something to do with node shadow because on commenting out part.isShadowed line from code, duplicate nodes are not created.

Is this a bug in gojs svg rendering?

2

That could be – are you using the latest version?

3

yes I’m using 2.3.16

4

OK, thanks for reporting the bug – we’ll look into it.

5

thanks @walter one more issue with svg width
I have a collapsible panel and a gojs diagram placed next to one another.
when I collapse the panel the svg width increases which is fine.
But when I expand the panel back the svg width doesn’t decrease back to original.
This results in horizontal scrolling on the screen.

When svg renderer is disabled, the canvas width increases and decreases as expected.

6

This is unrelated to the bug, but note that shadowBlur cannot be null, and neither can shadowColor. And rather than allocate points unnecessarily, it might be best to keep the point as (0,2) if you are only toggling the shadow on/off. So I’d suggest:

      myDiagram.nodeTemplate =
        $(go.Node, "Spot",
          {
            shadowBlur: 30,
            shadowOffset: new go.Point(0, 2),
            shadowColor: SHAPE_COLORS.lightShadow,
            mouseEnter: (e, obj) => {
              _toggleHoverEffect(obj.part, true);
            },
            mouseLeave: (e, obj) => {
              _toggleHoverEffect(obj.part, false);
            },
          },
          new go.Shape({})
        )

      function _toggleHoverEffect(part, isHovered) {
        if (isHovered) {
          part.isShadowed = true;
        } else {
          part.isShadowed = false;
        }
      }

We are still writing a fix for the bug,

7

I believe we’ve fixed the problem, could you give this build a try?

https://gojs.net/temp/go2316a.js

8

@vkv I’m unable to reproduce the scrollbar issue. This is what I was using (button to toggle) https://codepen.io/simonsarris/pen/WNWMQbv?editors=1010

9

Thanks @simon the duplicate nodes issue is fixed. But the svg width change issue mentioned above is still present.
One more issue that I see is that there’re these empty clipPath elements that gets created every time I hover a node or change the node data array.

image
image729×498 12.6 KB

10

I’ll investigate the clipPath issue, I noticed that yesterday too.

But can you help me reproduce the svg width change that you’re seeing? I haven’t been able to.

11

I have ameliorated the clipPath issue, but I still need an example of the width changing problem.

12

@simon Here’s how we can reproduce the svg width issue
A Pen by shashank (codepen.io)

When I change renderer to default things are working as expected.
But when using svg renderer expand/collapse is not working as expected, which I think is because of the svg width.

13

Thank you. This is unexpected.

In your real-world use case, does setting the Diagram’s main SVG element to position:absolute fix the issue? You could write:

// after diagram init
myDiagram.div.lastChild.style.position = 'absolute';

Or in the CSS something like:

#myDiagramDiv SVG {
  position: absolute;
}

We will add this to the library regardless (the canvas is already position: absolute and we want them to work identically), I just want to be sure its the only thing that’s wrong, here.

14

yes @simon setting position absolute on svg fixed the issue.

15

@simon while using version 2.3.17 with svg renderer enabled, I’m now not able to add shadows. It’s working fine with svg renderer disabled. Can you please check it?

16

Can you give me an example? The basic example we had from before works as expected (shadows turned on/off on hover)

https://codepen.io/simonsarris/pen/zYXjeqb?editors=1010

note I set it to

<script src="https://gojs.net/2.3.17/release/go.js"></script>
17

A Pen by shashank (codepen.io)
@simon

18

Thank you and sorry about that. It seems like animation is breaking SVG shadows for some reason. We’ll investigate.

19

I think we have fixed this, though we’ll want to do more testing, and it may be a week or two before we release the next 2.3 version.

In the meantime, if you want to try or use the provisional build you can do so: https://gojs.net/temp/go2317a.js