Here are related code about how we define ports:
-- Main Component TS:
/**
* Uses portConfigs to customise each node's port configuration
*/
const portPositioners: IPortPositioner[] = PortUtils.getPortPositioners();
if (portPositioners) {
portPositioners.forEach(cnf => {
// order of panel is important, as it determines the z-index
nodeTemplate.push(
this.getPortCollection(cnf, port)
);
});
}
/**
* Returns the shape that is used for port dots, using the
* IPortPositioner for positioning coords.
*/
private getPortCollection(cnf: IPortPositioner, port: GoJSPort): Panel {
const x: number = this.utils.getPortPos(true, cnf, 0);
const y: number = this.utils.getPortPos(true, cnf, 1);
const offx: number = this.utils.getPortPos(true, cnf, 2);
const offy: number = this.utils.getPortPos(true, cnf, 3);
return port.getPort(cnf.name, new Spot(x, y, offx, offy));
}
-- gojs-port.ts
getPort(portUIStateName: string, spot: Spot): Panel {
return $(Panel, Panel.Auto,
{
name: PORT_PANEL_NAME_PREFIX + portUIStateName,
alignment: spot,
mouseEnter: (e, panel: Panel) => {
this.showLargeLinkButton(panel, portUIStateName, true);
}
},
// only shows port if it is configured to have ports
new Binding('visible', 'portConfigs', (portConfigs: IPortConfig[], panel: Panel) => {
return portConfigs ? portConfigs.some(cnf => cnf.name === portUIStateName) : false;
}
),
this.getPortPanel(portUIStateName, spot)
);
}
private getPortPanel(portUIStateName: string, spot: Spot): Panel {
return $(Panel, Panel.Auto,
{
name: PORT_PANEL_INNER_NAME_PREFIX + portUIStateName
},
// hides the port when largeLinkButtonVisible is visible
new Binding('visible', 'uiStates', (uiStates: IUIStates, shape: Shape) => {
const nodeState = uiStates.nodes[shape.part.data.key];
const portState = nodeState.ports[portUIStateName];
return nodeState.portsShowAll || portState.isPortActive;
}
).ofModel(),
// small port dot
$(Shape, 'Circle',
{
name: portUIStateName,
fill: COLORS.NODE_SELECT,
stroke: COLORS.WHITE,
strokeWidth: 1,
desiredSize: new Size(PORT_WIDTH, PORT_WIDTH),
portId: portUIStateName, // declare this object to be a 'port'
fromLinkable: true,
toLinkable: true, // declare whether the user may draw links to/from here
cursor: 'not-allowed'
},
new Binding('fromLinkable', 'portConfigs', (portConfigs: IPortConfig[]) => {
// if specified direction, uses that value, otherwise defaults to true
const cnf: IPortConfig = portConfigs.find(o => o.name === portUIStateName);
return cnf ? cnf.direction === EPortRule.FROM || cnf.direction === EPortRule.BIDIRECTIONAL : true;
}
),
new Binding('toLinkable', 'portConfigs', (portConfigs: IPortConfig[]) => {
// if specified direction, uses that value, otherwise defaults to true
const cnf: IPortConfig = portConfigs.find(o => o.name === portUIStateName);
return cnf
? cnf.direction === EPortRule.TO ||
cnf.direction === EPortRule.BIDIRECTIONAL
: true;
}
),
// changes the colour of the port when popup is visible
new Binding('fill', 'uiStates', (uiStates: IUIStates, shape: Shape) => {
const nodeState: INodeUIState = uiStates.nodes[shape.part.data.key];
const portState: IPortUIState = nodeState.ports[portUIStateName];
return portState.isPortActive ? COLORS.DARK_GREY : COLORS.NODE_SELECT;
}
).ofModel()
)
);
}
--port-utls.ts
/**
* Returns an array of possible port configs for a node
*/
static getPortPositioners(): IPortPositioner[] {
return [
{
name: PORT_POS.TOP_MIDDLE,
position: [0.5, 0, 0, PORT_OFFSET_DIRECTION.MINUS] as (string | number)[]
}, {
name: PORT_POS.TOP_LEFT,
position: [0, 0, PORT_OFFSET_DIRECTION.MINUS, PORT_OFFSET_DIRECTION.MINUS] as (string | number)[]
}, {
name: PORT_POS.TOP_RIGHT,
position: [1, 0, PORT_OFFSET_DIRECTION.PLUS, PORT_OFFSET_DIRECTION.MINUS] as (string | number)[]
}, {
name: PORT_POS.LEFT_MIDDLE,
position: [0, 0.5, PORT_OFFSET_DIRECTION.MINUS, 0] as (string | number)[]
}, {
name: PORT_POS.RIGHT_MIDDLE,
position: [1, 0.5, PORT_OFFSET_DIRECTION.PLUS, 0] as (string | number)[]
}, {
name: PORT_POS.BOTTOM_MIDDLE,
position: [0.5, 1, 0, PORT_OFFSET_DIRECTION.PLUS] as (string | number)[]
}, {
name: PORT_POS.BOTTOM_LEFT,
position: [0, 1, PORT_OFFSET_DIRECTION.MINUS, PORT_OFFSET_DIRECTION.PLUS] as (string | number)[]
}, {
name: PORT_POS.BOTTOM_RIGHT,
position: [1, 1, PORT_OFFSET_DIRECTION.PLUS, PORT_OFFSET_DIRECTION.PLUS] as (string | number)[]
}
];
}
