Spacing Issue as marked in the diagram


#1

How to reduce the spacing which I have marked? Pasting the code here…Need to reduce the spacig between each…

    const oneeighty = 180;
    const twopointfive = 2.5;
    const seven = 7;

    return go.GraphObject.make(go.Node, 'Auto',
      {
        movable: true,
        copyable: true,
        deletable: false,
        stretch: go.GraphObject.Fill,
      },
      go.GraphObject.make(go.Shape,
        {

          fill: 'transparent',
          name: 'tableRow',
          stroke: null,
          stretch: go.GraphObject.Fill,
          mouseEnter: (e, obj) => {
            this.nodeMouseEnter(obj);
          },
          mouseLeave: (e, obj) => {
            this.nodeMouseLeave(obj);
          }
        }),
      go.GraphObject.make(go.Panel, 'Vertical',
        go.GraphObject.make(go.Panel, 'Table',
          {
            //spacing: new go.Size(0,0),
            name: 'List',
            padding: 0,
            minSize: new go.Size(oneeighty, 0),
            defaultStretch: go.GraphObject.Horizontal,
            defaultAlignment: go.Spot.Left

          },
          this.makedefaultIndicator(),
          go.GraphObject.make(go.Shape, 'Circle', {// Outer circle
            // margin: new go.Margin(0, 0, 0, 0),
            margin: new go.Margin(0,0,0,0),
            strokeWidth: 1,
            name: 'SHAPE',
            column: 1,
            desiredSize: new go.Size(this.CircleWidthHeight, this.CircleWidthHeight),
            cursor: 'pointer',
            mouseEnter: (e, obj) => {
              this.nodeMouseEnter(obj);
            },
            mouseLeave: (e, obj) => {
              this.nodeMouseLeave(obj);
            }
          },
            // allows the color to be determined by the node data
            new go.Binding('fill', 'eventDimension', (s: number) => {
              const val = 8;
              return (val === s) ? this.EventEndOuterFillColor : SHAPES.EventBackgroundColor;
            }),
            new go.Binding('strokeWidth', 'eventDimension', (s: number) => {
              const val = 8;
              return (s === val) ? this.EventNodeStrokeWidthIsEnd : 1;
            }),
            //  new go.Binding('stroke', 'eventDimension', this.nodeEventDimensionStrokeColorConverter),
            new go.Binding('stroke', 'stroke'),
            new go.Binding('strokeDashArray', 'eventDimension', this.activityNodeTemplatecircledasharray),
          ),

          // end main shape

          go.GraphObject.make(go.Shape, 'Circle', {// Inner circle
            // alignment: go.Spot.Center,
            desiredSize: new go.Size(this.InnerCircleWidthHeight, this.InnerCircleWidthHeight),
            column: 1,
            fill: null,
            margin: new go.Margin(0, 0, 0, twopointfive),
            mouseEnter: (e, obj) => {
              this.nodeMouseEnter(obj);
            },
            mouseLeave: (e, obj) => {
              this.nodeMouseLeave(obj);
            }
          },
            //new go.Binding('stroke', 'eventDimension', this.nodeEventDimensionStrokeColorConverter),
            new go.Binding('stroke', 'stroke'),
            new go.Binding('strokeDashArray', 'eventDimension', this.activityNodeTemplatecircledasharray), // dashes for non-interrupting
            new go.Binding('visible', 'eventDimension', this.VisibilityBinding),// inner  only visible for 4 thru 7
          ),

          go.GraphObject.make(go.Shape, 'NotAllowed', {
            //  alignment: go.Spot.Center,
            desiredSize: new go.Size(this.EventNodeSymbolSize, this.EventNodeSymbolSize),
            stroke: 'Black',
            column: 1,
            margin: new go.Margin(0, 0, 0, seven),
            mouseEnter: (e, obj) => {
              this.nodeMouseEnter(obj);
            },
            mouseLeave: (e, obj) => {
              this.nodeMouseLeave(obj);
            }
          },
            new go.Binding('figure', 'eventType', this.nodeEventTypeConverter),
            new go.Binding('fill', 'eventDimension', this.nodeEventDimensionSymbolFillConverter),
          ),

          go.GraphObject.make(go.TextBlock,
            {
              name: 'LABEL',
              //  margin: new go.Margin(0, 0, 0, 5),
              editable: false,
              column: 2,
              width: 100,
              mouseEnter: (e, obj) => {
                this.nodeMouseEnter(obj);
              },
              mouseLeave: (e, obj) => {
                this.nodeMouseLeave(obj);
              }
            },
            new go.Binding('text').makeTwoWay(),
            //  new go.Binding('font', 'font'),
            new go.Binding('stroke', 'textColor'),
          )// end TextBlock

        )  // end Table Panel of items
      )  // end Vertical Panel
    );
  }```

#2

Are those all separate Nodes positioned vertically above each other? If so, then it is the responsibility of the layout to position the nodes the way that you want. The template is only responsible for arranging the objects that compose the node.

I would use a GridLayout for this layout. The https://gojs.net/latest/api/symbols/GridLayout.html#spacing property is what controls the amount of space between the nodes.