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