How to associate shadows with Shapes or Pictures

GoJS
1

Hey, I have the following template: a go.Part with a shape and a picture.


const nodeTemplate = $(
  go.Part,
  go.Panel.Spot,
  {
    isClipping: true,
    resizable: true,
    scale: 1,
    // Transparent cannot cast a shadow
    background: "red",
    isShadowed: true,
  },
  $(go.Shape, "Circle", { strokeWidth: 0 }),
  $(go.Picture, img, {
    stretch: go.GraphObject.Fill,
  })
);

I want to associate a shadow specifically with the shape or the picture, but I’m facing some issues:

  1. I don’t want the panel to have a background - it should be transparent.
  2. The isShadowed property doesn’t work with a transparent background as it is mentionned in the doc.
  3. I can’t apply isShadowed directly to the picture or shape.

I’ve tried several approaches, such as:

  • Setting isClipping on the go.Part.
  • Using go.Brush, which technically works, but it’s extremely difficult to maintain for different shapes, resizing…

Is there a simpler way to achieve this? How can I associate the shadow to the circle or the picture ?

This is a Codesandbox example: https://codesandbox.io/p/sandbox/gojs-custom-shadow-forum-qmpl2c

2

I just put a non-clipping Circle Shape behind it:

myDiagram.nodeTemplate =
  new go.Part("Spot", { isShadowed: true, resizable: true })
    .add(
      new go.Shape("Circle", { strokeWidth: 0 }),
      new go.Panel("Spot", { isClipping: true, stretch: go.Stretch.Fill  })
        .add(
          new go.Shape("Circle", { strokeWidth: 0 }),
          new go.Picture("55x55.png", { stretch: go.Stretch.Fill })
        )
    );

image