How to use the gojs.Point function in gojs

new go.Binding("points"),
              $(go.Shape,  // the link path shape
                { isPanelMain: true, strokeWidth: 2 }),
              $(go.Shape,  // the arrowhead
                { toArrow: "Standard", stroke: null })
            ),
          model: new go.GraphLinksModel([  // specify the contents of the Palette
            { text: "Start", figure: "Circle", fill: "#00AD5F" },
            { text: "Step" },
            { text: "DB", figure: "Database", fill: "lightgray" },
            { text: "???", figure: "Diamond", fill: "lightskyblue" },
            { text: "End", figure: "Circle", fill: "#CE0620" },
            { text: "Comment", figure: "RoundedRectangle", fill: "lightyellow" }
          ], [
            // the Palette also has a disconnected Link, which the user can drag-and-drop
            { points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) }
          ])
        });
    });
  };

if (v.distance === layer) {verts.push(v); }
    });
    let found = verts.length;
    if (found === 0) {return; }

    let radius = layer * this.layerThickness;
    let separator = sweep / found; // distance between nodes in their sweep portion
    let start = angle - sweep / 2 + separator / 2;
    // for each vertex in this layer, place it in its correct layer and position
    for (let i = 0; i < found; i++) {
      let v = verts[i];
      let a = start + i * separator; // the angle to rotate the node to
      if (a < 0) {a += 360; } else if (a > 360) {a -= 360; }
      // the point to place the node at -- this corresponds with the layer the node is in
      // all nodes in the same layer are placed at a constant point, then rotated accordingly
      let p = new go.Point(radius, 0);
      p.rotate(a);
      v.centerX = p.x + this.arrangementOrigin.x;
      v.centerY = p.y + this.arrangementOrigin.y;
      v.laid = true;
      v.angle = a;
      v.sweep = separator;
      v.radius = radius;
      // keep going for all layers
      this.radlay1(v, layer + 1, a, sweep / found);
    }
  }

const type = serverMapComponent.isBaseApplication(key) ? 'big' : 'normal';
                        return ServerMapTheme.general.common.font[type];
                    }),
                    new go.Binding('stroke', '', () => {
                        return ServerMapTheme.general.node.normal.text.stroke;
                    }),
                    new go.Binding('text', '', (data) => {
                        return '[' + data.topCountNodes[0].applicationName.split(' ')[1] + ']' + data.serviceType.replace(/(.*)\_.*/ig, '$1');
                    })
                )
            ),
            $(
                go.Panel,
                go.Panel.Auto,
                {
                    position: new go.Point(10, 0),
                    width: 120,
                    height: 120
                },
                $(
                    go.Picture,
                    {
                        width: 20,
                        height: 20,
                        source: ServerMapTheme.general.common.funcServerMapImagePath(ServerMapTheme.general.common.icon.error),
                        imageStretch: go.GraphObject.Uniform
                    },
                    new go.Binding('visible', '', (data) => {
                        return data.isAuthorized && data.hasAlert;
                    })
                )
            )

margin: new go.Margin(5, 0, 0, 0),
                            width: 28,
                            height: 28,
                            source: ServerMapTheme.general.common.funcServerMapImagePath(ServerMapTheme.general.common.icon.filter),
                            visible: false,
                            imageStretch: go.GraphObject.Uniform
                        },
                        new go.Binding('visible', 'isFiltered')
                    )
                )
            ),
            $(
                go.Panel,
                go.Panel.Auto,
                {
                    position: new go.Point(10, 0),
                    width: 120,
                    height: 120
                },
                $(
                    go.Picture,
                    {
                        width: 20,
                        height: 20,
                        source: ServerMapTheme.general.common.funcServerMapImagePath(ServerMapTheme.general.common.icon.error),
                        imageStretch: go.GraphObject.Uniform
                    },
                    new go.Binding('visible', '', (data) => {
                        return data.isAuthorized && data.hasAlert;
                    })
                )
            )

$(
                go.Panel,
                go.Panel.Table,
                {
                    cursor: 'pointer'
                },
                $(go.RowColumnDefinition, {column: 0, minimum: 108}),
                $(
                    go.Shape,
                    {
                        row: 0,
                        column: 0,
                        width: 108,
                        height: 108,
                        figure: 'Circle',
                        position: new go.Point(-4, -4),
                    },
                    new go.Binding('fill', 'key', (key) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
                        return ServerMapTheme.general.node[type].fill.top;
                    }),
                    new go.Binding('stroke', 'key', (key, node) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
                        return ServerMapTheme.general.node[type].stroke;
                    }),
                    new go.Binding('strokeWidth', 'key', (key) => {
                        const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
                        return ServerMapTheme.general.node[type].strokeWidth;
                    })
                ),
                $(
                    go.Picture,

public static makeNodeTemplate(serverMapComponent: ServerMapDiagramWithGojs) {
        const $ = go.GraphObject.make;
        return $(
            go.Node,
            go.Panel.Auto,
            {
                position: new go.Point(0, 0),
                selectionAdorned: false,
                click: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onClickNode(event, obj);
                },
                doubleClick: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onDoubleClickNode(event, obj);
                },
                contextClick: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onContextClickNode(event, obj);
                }
            },
            new go.Binding('key', 'key'),
            new go.Binding('category', 'serviceType'),
            $(
                go.Shape,
                {

public static makeNodeGroupTemplate(serverMapComponent: any) {
        const $ = go.GraphObject.make;
        return $(
            go.Node,
            go.Panel.Auto,
            {
                position: new go.Point(0, 0),
                selectionAdorned: false,
                click: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onClickNode(event, obj);
                },
                doubleClick: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onDoubleClickNode(event, obj);
                },
                contextClick: (event: go.InputEvent, obj: go.GraphObject) => {
                    serverMapComponent.onContextClickNode(event, obj);
                }
            },
            new go.Binding('key', 'key'),
            new go.Binding('category', 'serviceType'),
            $(
                go.Shape,
                {