Shadow not applying on groups

[no_one345]

i m working on a diagram where i need shadow on group templates but it is not working in case of groups my group template is

 this.diagram.groupTemplate = Go(go.Group, "Auto", {
  doubleClick: (e, obj) => {
    if (obj instanceof go.Group)
      if (obj.isSubGraphExpanded == false) {
        obj.isSubGraphExpanded = true;
      } else if (obj.isSubGraphExpanded == true) {
        obj.isSubGraphExpanded = false;
      }
  },
  isShadowed: true,
  shadowOffset: new go.Point(43, 0),
  shadowColor: "black",
  background: "transparent",
  // highlight when dragging into the Group
  mouseDragEnter: (e, grp, prev) => {
    this.highlightGroup(e, grp, true);
  },
  mouseDragLeave: (e, grp, next) => {
    this.highlightGroup(e, grp, false);
  },
  computesBoundsAfterDrag: true,
  // resizable: true,
  // when the selection is dropped into a Group, add the selected
  // Parts into that Group;
  // if it fails, cancel the tool, rolling back any changes
  mouseDrop: (e, obj) => this.finishDrop(this, e, obj),
  handlesDragDropForMembers: true, // don't need to define
  // handlers on member Nodes
  // and Links
  // Groups containing Groups lay out their members horizontally
  // layout: Go(go.GridLayout, {
  // wrappingColumn: 4,
  // alignment: go.GridLayout.Position,
  // cellSize: new go.Size(1, 1),
  // spacing: new go.Size(50, 50)
  // }
  // // ,new go.Binding("wrappingColumn", "wrappingColumn",
  // function(h)
  // // {
  // //
  // // return h;
  // //
  // // })
  // )

}, new go.Binding("textEditable", "readOnly", (h) => {
  return !h;
}), new go.Binding("deletable", "readOnly", (h) => {
  return !h;
}), new go.Binding("background", "isHighlighted", (h) => {
  return h ? "rgba((124,252,0),0.8)" : "transparent";.......

[walter]

I’ll try this in a little while when I have some time.

[walter]

You didn’t provide the whole Group template, but when I try it, it seems to work as you specified:

    myDiagram.groupTemplate =
      $(go.Group, "Auto",
        {
          isShadowed: true,
          shadowOffset: new go.Point(43, 0),
          shadowColor: "black",
          background: "transparent"
        },
        new go.Binding("textEditable", "readOnly", h => !h),
        new go.Binding("deletable", "readOnly", h => !h),
        new go.Binding("background", "isHighlighted",
                       h => h ? "rgba((124,252,0),0.8)" : "transparent"),
        $(go.Shape,
          { fill: "lightgray", strokeWidth: 0, shadowVisible: true },
          new go.Binding("fill", "color")),
        $(go.Panel, "Vertical",
          $(go.TextBlock,
            {
              stretch: go.GraphObject.Horizontal,
              background: "slateblue",
              textAlign: "center",
              stroke: "white"
            }, 
            new go.Binding("text", "key")),
          $(go.Placeholder, { padding: 10 })
        )
      );

    myDiagram.model =
      $(go.GraphLinksModel,
        {
          nodeDataArray:
            [
              { key: 1, text: "Alpha", color: "lightblue", isGroup: true },
              { key: 2, text: "Beta", color: "orange", group: 1 }
            ]
        });

That’s an unusual value for Part.shadowOffset, so the result is:

Perhaps you need to set GraphObject.shadowVisible on individual GraphObjects in your Group to control which objects have shadow.

[no_one345]

this.diagram.groupTemplate=
  Go(go.Group, "Vertical",{
      // mouseDragEnter: (e, grp, prev) => { this.highlightGroup(e, grp, true); },
      // mouseDragLeave: (e, grp, next) => { this.highlightGroup(e, grp, false); },
      // mouseDrop: this.finishDrop,
      layout:
        Go(go.GridLayout,
          {
            wrappingWidth: Infinity, alignment: go.GridLayout.Position,
            cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4)
          }),isShadowed: true,
          shadowOffset: new go.Point(3, 0),
          shadowColor: "black",
    },new go.Binding("layout", Constants.ObjectTypeLabel, (h) => {

      var returnStr = this.configJson[h].layout;
      if (Utils.checkUndefined(returnStr)) {
        return Go(go.GridLayout, {
          wrappingColumn: returnStr.wrappingColumn,
          alignment: go.GridLayout.Position,
          cellSize: new go.Size(returnStr.cellSize[0],
            returnStr.cellSize[1]),
          spacing: new go.Size(returnStr.spacing[0],
            returnStr.spacing[1])
        });
      } else {
        return Go(go.GridLayout, {
        //  margin: new go.Margin(40, 0, 0, 5),
          wrappingColumn: 4,
          alignment: go.GridLayout.Position,
          cellSize: new go.Size(1, 1),
          spacing: new go.Size(50, 50)
        });
      }

    }),
    { defaultStretch: go.GraphObject.Horizontal },
    Go(go.Panel, "Auto",
      Go(go.Shape, "RoundedTopRectangle",
        { fill: "#030b43", strokeWidth: 0 },new go.Binding("fill", "headerbackground"),new go.Binding("stroke", "headerbackground")),
        Go(go.Panel, "Table",
        { stretch: go.GraphObject.Fill },
        Go(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
        // the table header
        Go(go.TextBlock,
          {
            alignment:go.Spot.Left,
            stroke: "#ffffff", margin: new go.Margin(2, 15, 2, 15), textAlign: "center"
          },
          new go.Binding("text", "text")),
        // the collapse/expand button
        Go(go.Picture,
          "assets/treeImages/edit.png", {
            name: "Edit",
            alignment: go.Spot.Right,
            click: (e, obj) => this.expand(e, obj),
            mouseEnter: (e, obj, prev) => {
              var shape = obj.part.findObject("Edit");
              if (shape instanceof go.Picture) { 
                shape.source = "assets/treeImages/edit1.png";
              }
               
            },
            mouseLeave: (e, obj, next) => { 
              var shape = obj.part.findObject("Edit");
              if (shape instanceof go.Picture) { 
                shape.source = "assets/treeImages/edit.png";
              }  
            },
            background: "transparent",
            margin: new go.Margin(6, 8, 6, 10),
            desiredSize: new go.Size(12, 12)
          })),
    
    ),
    Go(go.Panel, "Auto",
      Go(go.Shape, { fill: "Transparent", stroke: null,opacity:1,strokeWidth:0   }, new go.Binding("fill", "fill").makeTwoWay(), ),
      Go(go.Placeholder, { padding: 20 })
    ),
    // Go(go.Panel, "Auto",
    //   Go(go.Shape, "RoundedBottomRectangle",
    //     { fill: "white" },
    //     new go.Binding("fill", "role", function(r) { return r[0] === 'b' ? "lightgray" : "white"; })),
    //   Go(go.TextBlock,
    //     { margin: new go.Margin(2, 2, 0, 2), textAlign: "center" },
    //     new go.Binding("text", "title"))
    // )
  );

here is my group template

now the problem is that the shadow is divided in 2 parts one of header and one of the place holder is it possible to make it one

also how can i remove shadow from under the header

[walter]

As I said above, you can control which objects have a shadow by setting shadowVisible on each one. I do not see where you are setting that in your template.