Adornment shadow

GoJS
1

I created a node with item array, each item can have an adornment to have action bar for that item,
I need to show shadow for the action bar (look at the red circle below)
image

the problem is I can not create a shadow on a panel,

I can create shadow to the adornment , but then it hides the item, because I have to put a background to show the shadow

image

my item Adornment looks like this

    const ItemAdornment = $(
      go.Adornment,
      'Spot',{
        background:"lightblue",
        shadowVisible:true,
        isShadowed: true, shadowBlur: 4, shadowColor: 'red',
        shadowOffset: new go.Point(5.8, 2.4),
      },
      $(go.Placeholder),
      $(
        go.Panel,
        go.Panel.Auto,
        { mouseLeave: (e, buttonspanel, next) => hideAdornment(next) },

what can I do to have shadow only on the action bar and not to hide the item

2

Does this do something like what you want?

const AD =
  $(go.Adornment, "Spot",
    {
      isShadowed: true,
      mouseLeave: (e, ad) => ad.adornedPart.removeAdornment("AD")
    },
    $(go.Placeholder),
    $(go.Panel,
      { 
        alignment: go.Spot.Right, alignmentFocus: go.Spot.Left,
        background: "transparent"  // to catch mouse events between item Panel and this Panel
      },
      $("Button",
        { "ButtonBorder.shadowVisible": true, margin: new go.Margin(0, 0, 0, 6) },
        $(go.Shape, "Diamond",
          { width: 12, height: 12, fill: "red", stroke: "darkred" }),
        { click: (e, shp) => alert(shp.part.adornedObject.data) }
      )
    )
  );

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { isShadowed: true },
    $(go.Shape, { fill: "lightyellow" }),
    $(go.Panel, "Vertical",
      new go.Binding("itemArray", "items"),
      {
        itemTemplate:
          $(go.Panel, "Horizontal",
            $(go.Shape, { width: 10, height: 10, margin: 2 }),
            $(go.TextBlock, { editable: true },
              new go.Binding("text", "").makeTwoWay()),
            {
              mouseEnter: (e, panel) => { AD.adornedObject = panel; panel.part.addAdornment("AD", AD); },
              mouseLeave: (e, panel, next) => { if (!next || !(next === AD || next.isContainedBy(AD))) panel.part.removeAdornment("AD"); }
            }
          ),
        defaultAlignment: go.Spot.Left,
        margin: 6
      }
    )
  );
3

thanks, it is much better,
the problem I have Is that I use RoundeRectangle Figure
so it looks like this
image

        $(go.Shape, {
          figure: 'RoundedRectangle',
          fill: 'white',
          stroke: 'black',
        }),

We can see on the corners the white background.

also can I control the blur, and other shadow attributes?

4

Look at the Part.shadow… properties.

5

I could play with the shadow, the only problem I have now is the with the coroners
image

6

fixed it , put the shadowVisible on the shape

7

I have updated the code that I provided, above.