Ports on RoundRectangleShape

@uriel wrote:

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';

@Component({
    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;
        this.setNodeTemplate();
        this.setModel();
    }

    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;
        node.add(shape);

        let textBlock = new go.TextBlock();
        textBlock.text = "some text";
        node.add(textBlock);
        node.locationSpot = go.Spot.Center;
        node.minSize = new go.Size(140, 50);
        this.makePorts(node);
        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;
    }

}

Posts: 4

Participants: 2

Read full topic