Ports on RoundRectangleShape

look at the example below,
this creates a node with Roundrectangle shape.
the problem is that the ports do not touch the shape lines

if I change the roundrectangle to Rectangle than everything will be OK.

import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';
import * as go from 'gojs';

    selector: 'app-diagram',
    templateUrl: './diagram.component.html',
    styleUrls: ['./diagram.component.scss']
export class DiagramComponent implements OnInit {
    @ViewChild('diagramDiv') private diagramRef: ElementRef;
    private diagram = new go.Diagram();
    @Input('name') name: string;

    constructor() { }

    ngOnInit() {
        this.diagram.div = this.diagramRef.nativeElement;

    setNodeTemplate() {
        this.diagram.nodeTemplate = this.createNnode();

    createNnode() {
        let node = new go.Node(go.Panel.Auto);
        let shape = new go.Shape();
        shape.isPanelMain = true;
        shape.figure = "RoundedRectangle";
        shape.strokeWidth = 1;
        shape.fill = "lightblue"
        shape.parameter1 = 10;
        shape.isPanelMain = true;

        let textBlock = new go.TextBlock();
        textBlock.text = "some text";
        node.locationSpot = go.Spot.Center;
        node.minSize = new go.Size(140, 50);
        node.mouseEnter = this.onNodeMouseEnter.bind(this);
        node.mouseLeave = this.onNodeMouseLeave.bind(this);
        return node;

    private onNodeMouseEnter(e, node: go.Node) {
        this.hideShowLinkablePorts(node, true);

    private onNodeMouseLeave(e, node: go.Node) {
        this.hideShowLinkablePorts(node, false);

    private hideShowLinkablePorts(node: go.Node, show: boolean) {
        node.ports.each((port: go.Shape) => {
            if (port.portId !== "") {  // don't change the default port, which is the big shape
                port.fill = show ? "rgba(255,0,0,.3)" : null;

    setModel() {
        this.diagram.model = new go.GraphLinksModel(
                { key: "Alpha", color: "lightblue" },
                { key: "Beta", color: "orange" },
                { key: "Gamma", color: "lightgreen" },
                { key: "Delta", color: "pink" },

    private makePorts(node: any) {
        node.add(this.makePort("0", go.Spot.MiddleBottom));
        node.add(this.makePort("1", go.Spot.MiddleTop));
        node.add(this.makePort("2", go.Spot.MiddleLeft));
        node.add(this.makePort("3", go.Spot.MiddleRight));
    private makePort(name: string, spot: go.Spot) {
        let shape = new go.Shape();
        shape.figure = "Circle";
        shape.toLinkableDuplicates = false;
        let params = {
            fill: null,
            stroke: null,
            desiredSize: new go.Size(10, 10),
            alignment: spot,
            alignmentFocus: spot,
            portId: name,
            fromSpot: spot, toSpot: spot,
            fromLinkable: true, toLinkable: true,
            cursor: "pointer"
        shape = Object.assign(shape, params);
        return shape;


the same problem happens with the Diamnod or Decision shapes

You are adding the ports to an “Auto” Panel, whose behavior is described at GoJS Panels -- Northwoods Software.

Instead, I suggest that you add the Auto Panel as the main element to the Node that is a Spot Panel, and add the ports to that Spot Panel. Many of the samples that have multiple ports organize their node templates that way.

By the way, I am curious why you do not use GraphObject.make. Besides making the nesting of elements much clearer and avoiding for you to have to declare variables, it will also check for spelling errors of property names. Your code is more verbose, calling bind and Object.assign.

I will check you solution tomorrow this coding style because

  • I am use to work that way
  • this way it is easier for me to read the code, I can reuse it,