How to add extra row separators in item array, and fromSpot is not working

GoJS
1

1.we need extra row seperators on starting and end of the itemArray
expected:
image
got:
image

2.we gave fromSpot:go.Spot.LeftRightSides but link goes from all sides

image

Template code for this activity :

    let caseTemplate = $(go.Panel, 'TableRow',
      new go.Binding('portId', 'portIndex'),
      {
        name: messageFlowPorts.decisionCase,
        fromLinkable:true,
        minSize: new go.Size(50, 20),
        toLinkable: false,
        defaultStretch: go.GraphObject.Horizontal,
        margin: 0,
        background: 'transparent',
        fromSpot: go.Spot.LeftRightSides
      },
      $(go.TextBlock,
        new go.Binding('name', 'portIndex', (val: number) => {
          return val != -1 ? 'VolanteDecisionCaseText' : 'VolanteActivityText'
        }),
        new go.Binding('font', 'portIndex', (val: number) => {
          return val != -1 ? volanteFlowEditorFont.extendedActivityLabel : volanteFlowEditorFont.baseActivityLabel
        }),
        {
          alignment: go.Spot.Center,
          margin: 3,
          wrap: go.TextBlock.Fill,
          textAlign: 'center',
        }, new go.Binding('text', 'label'))
    );

    let volanteDecisionActivity = $(go.Node, 'Auto', getNodeProperties(),
      getShapeForNode('RoundedRectangle'),
      $(go.Panel, "Vertical",
        { stretch: go.GraphObject.Horizontal, alignment: go.Spot.TopLeft },
        $(go.Panel, "Auto",
          { stretch: go.GraphObject.Horizontal },
          getTextForNode(3, true)),
        $(go.Panel, 'Table',
          {
            name: 'DecisionTable',
            minSize: new go.Size(80, 10),
            defaultStretch: go.GraphObject.Horizontal,
            itemTemplate: caseTemplate,
            defaultRowSeparatorStroke: 'black',
          },
          new go.Binding('defaultRowSeparatorStroke', 'original', (val: IMessageFlowElement) => {
            return val.visual.lineColor
          }),
          new go.Binding('itemArray', 'original', (val: DecisionFlowElement) => {
            return [...val.cases, { label: 'Default', portIndex: val.cases.length + 1 }]
          }),
        ))
    );

3.How reduce size for

$(go.Shape,{fromArrow:'Circle'})
2

  1. Add horizontal separator lines in the node template, above and below the “Table” Panel.

  2. If you are sure the links are in fact coming out from the row/port, perhaps either the link template or a layout is setting or computing the spot.

  3. Set its scale to a value less than 1.0.

3
  1. how to add horizontal seperators
  2. solved [portId has to string]
  3. solved
4

It is a “Vertical” Panel, so you can just insert two “LineH” Shapes of { height: 0, stretch: go.GraphObject.Horizontal }.