How to set the node shadow like a box-shadow in css

Hi,

We are willing to have the shadow of nodes all around it. I tried using shadowOffset but it only allow to move the start point of the shadow and as the shadow is having the exact same size as the node, it doesn’t solve my problem at all.

Is it possible to have a shadow all around a node, like a box-shadow in css ?

Thanks in advance for your answer,
Vincent

You could just use a background Shape with a translucent fill (and no stroke):

  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, { strokeWidth: 0, fill: "rgba(0,0,0,0.2)" }),
      $(go.Panel, "Auto",
        { margin: 5 },
        $(go.Shape,
          { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, editable: true },
          new go.Binding("text").makeTwoWay())
      )
    );

Change the margin to control how wide it is on each side. I’m not sure you can get blur in the same way, though.

Hello,

Thanks for you quick answer !

It’s working well indeed. I’m able to show this “fake shadow” conditionnaly if it is selected. But I’m not able to set a blur on the shape… Do you have any idea of how I could add an equivalent to shadowBlur: 12 ?

Sorry, it isn’t clear to me at this moment how to do that.

Arf, too bad :/. If you have any idea please contact me.
I’ll try to figure out something but I’m feeling kind of stuck without any attributes allowing to blur

I wanted to create a full surround shadow on select as you seem to be describing here and was able to achieve what I needed with this:

GraphObject.make(
    Node,
    'Auto',
    new Binding('isShadowed', 'isSelected').ofObject(),
    {
      shadowOffset: new Point(0, 0),
      shadowBlur: 12,
      selectionAdorned: false,
    },
...
  );

Though I imagine if you needed a “bigger” shadow you could combine both ideas; first create the background object as Walter describes, then apply the shadow to that instead of the “main” object