create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
445 lines (395 loc) • 19.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="Support selecting ports within nodes." />
<meta itemprop="description" content="Support selecting ports within nodes." />
<meta property="og:description" content="Support selecting ports within nodes." />
<meta name="twitter:description" content="Support selecting ports within nodes." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Selectable, Deletable Ports in Nodes" />
<meta property="og:title" content="Selectable, Deletable Ports in Nodes" />
<meta name="twitter:title" content="Selectable, Deletable Ports in Nodes" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/selectableports.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/selectableports.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/selectableports.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/selectablePorts.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/selectablePorts.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Selectable, Deletable Ports in Nodes | GoJS Diagramming Library
</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="flex flex-col prose">
<div class="w-full max-w-screen-xl mx-auto">
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<link rel="stylesheet" href="../assets/css/prism.css"/>
<script src="../assets/js/prism.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
// For this sample, automatically show the state of the diagram's model on the page
ModelChanged: e => {
if (e.isTransactionFinished) showModel();
},
'undoManager.isEnabled': true
});
const UnselectedBrush = 'lightgray'; // item appearance, if not "selected"
const SelectedBrush = 'dodgerblue'; // item appearance, if "selected"
function isPortSelected(item) {
return item && item.fill !== UnselectedBrush; // assume the port is a Shape
}
function setPortSelected(item, sel) {
if (!item) return;
if (sel) {
item.fill = SelectedBrush;
} else {
item.fill = UnselectedBrush;
}
}
function onPortClick(e, tb) {
var shape = tb.panel.findObject('SHAPE');
if (shape !== null) {
var oldskips = shape.diagram.skipsUndoManager;
shape.diagram.skipsUndoManager = true;
if (e.control || e.meta) {
setPortSelected(shape, !isPortSelected(shape));
shape.part.isSelected = shape.part.ports.any(isPortSelected);
} else if (e.shift) {
// alternative policy: select all Ports between this item and some other one??
if (!isPortSelected(shape)) setPortSelected(shape, true);
shape.part.isSelected = true;
} else {
if (!isPortSelected(shape)) {
// deselect all sibling items
shape.part.ports.each(it => {
if (it !== shape) setPortSelected(it, false);
});
setPortSelected(shape, true);
}
shape.part.isSelected = true;
}
shape.diagram.skipsUndoManager = oldskips;
}
}
function makeItemTemplate(leftside) {
return new go.Panel('Auto', { margin: new go.Margin(1, 0) }) // some space between ports
.add(
new go.Shape({
name: 'SHAPE',
fill: UnselectedBrush,
stroke: 'gray',
geometryString: 'F1 m 0,0 l 5,0 1,4 -1,4 -5,0 1,-4 -1,-4 z',
spot1: new go.Spot(0, 0, 5, 1), // keep the text inside the shape
spot2: new go.Spot(1, 1, -5, 0),
// some port-related properties
toSpot: go.Spot.Left,
toLinkable: leftside,
fromSpot: go.Spot.Right,
fromLinkable: !leftside,
cursor: 'pointer'
})
.bind('portId', 'name'),
new go.TextBlock({
// allow the user to select items -- the background color indicates whether "selected"
isActionable: true,
click: onPortClick
})
.bind('text', 'name')
);
}
myDiagram.nodeTemplate =
new go.Node('Spot', {
selectionAdorned: false,
locationSpot: go.Spot.Center,
locationObjectName: 'BODY'
})
.bindTwoWay('location', 'loc', go.Point.parse, go.Point.stringify)
.add(
new go.Panel('Auto', { name: 'BODY' })
.add(
new go.Shape('RoundedRectangle', {
stroke: 'gray',
strokeWidth: 2,
fill: 'transparent'
})
.bindObject('stroke', 'isSelected', b => b ? SelectedBrush : UnselectedBrush),
new go.Panel('Vertical', { margin: 6 })
.add(
new go.TextBlock({ alignment: go.Spot.Left })
.bind('text', 'name'),
new go.Picture('images/60x90.png', {
width: 30,
height: 45,
margin: new go.Margin(10, 10)
})
)
),
new go.Panel('Vertical', {
name: 'LEFTPORTS',
alignment: new go.Spot(0, 0.5, 0, 7),
itemTemplate: makeItemTemplate(true)
})
.bind('itemArray', 'inservices'),
new go.Panel('Vertical', {
name: 'RIGHTPORTS',
alignment: new go.Spot(1, 0.5, 0, 7),
itemTemplate: makeItemTemplate(false)
})
.bind('itemArray', 'outservices')
);
myDiagram.linkTemplate =
new go.Link({
routing: go.Routing.Orthogonal,
corner: 10,
toShortLength: -3,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true
})
.add(
new go.Shape({ stroke: 'gray', strokeWidth: 2.5 })
);
function findAllSelectedItems() {
var items = [];
for (var nit = myDiagram.nodes; nit.next(); ) {
var node = nit.value;
//?? Maybe this should only return selected items that are within selected Nodes
//if (!node.isSelected) continue;
node.ports.each(port => {
if (isPortSelected(port)) items.push(port.findBindingPanel());
});
}
return items;
}
// Override the standard CommandHandler deleteSelection and canDeleteSelection behavior.
// If there are any selected items, delete them instead of deleting any selected nodes or links.
myDiagram.commandHandler.canDeleteSelection = function () {
// method override must be function, not =>
// true if there are any selected deletable nodes or links,
// or if there are any selected items within nodes
return go.CommandHandler.prototype.canDeleteSelection.call(this) || findAllSelectedItems().length > 0;
};
myDiagram.commandHandler.deleteSelection = function () {
// method override must be function, not =>
var items = findAllSelectedItems();
if (items.length > 0) {
// if there are any selected items, delete them
myDiagram.startTransaction('delete items');
for (var i = 0; i < items.length; i++) {
var item = items[i];
var nodedata = item.part.data;
var itemdata = item.data;
// find the item array that the item data is in; try "inservices" first
var itemarray = nodedata.inservices;
var itemindex = itemarray.indexOf(itemdata);
if (itemindex < 0) {
// otherwise try "outservices"
itemarray = nodedata.outservices;
itemindex = itemarray.indexOf(itemdata);
}
if (itemindex >= 0) {
myDiagram.model.removeArrayItem(itemarray, itemindex);
}
}
myDiagram.commitTransaction('delete items');
} else {
// otherwise just delete nodes and/or links, as usual
go.CommandHandler.prototype.deleteSelection.call(this);
}
};
myDiagram.model = new go.GraphLinksModel({
copiesArrays: true,
copiesArrayObjects: true,
linkFromPortIdProperty: 'fromPort',
linkToPortIdProperty: 'toPort',
nodeDataArray: [
{ key: 1, name: 'Server', inservices: [{ name: 's1' }, { name: 's2' }], outservices: [{ name: 'o1' }], loc: '0 0' },
{ key: 2, name: 'Other', inservices: [{ name: 's1' }, { name: 's2' }], loc: '200 60' }
],
linkDataArray: [{ from: 1, fromPort: 'o1', to: 2, toPort: 's2' }]
});
showModel();
function showModel() {
document.getElementById('mySavedModel').innerHTML = myDiagram.model.toJson();
if (window.Prism) window.Prism.highlightAll();
}
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 600px"></div>
<p>
Click on a port to select it. To select multiple press <code>Ctrl + Click</code>
or on mac <code>Cmd + Click</code>. The Delete command will only delete
selected ports, if there are any; otherwise it will delete Nodes and Links
as it normally would.
</p>
<p>The model data, automatically updated after each change or undo or redo:</p>
<pre class="lang-js"><code id="mySavedModel"></code></pre>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
<div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto">
<hr/>
<h3 class="text-xl">GoJS Features in this sample</h3>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Item Arrays</h4>
<p>
It is sometimes useful to display a variable number of elements in a node by data binding to a JavaScript Array.
In GoJS, this is simply achieved by binding (or setting) <a href="../api/symbols/Panel.html#itemArray" target="api">Panel.itemArray</a>.
The <a href="../api/symbols/Panel.html" target="api">Panel</a> will create an element in the panel for each value in the Array.
More information can be found in the <a href="../intro/itemArrays.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#itemarrays">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Ports in Nodes</h4>
<p>
Specific elements of a Node at which links may connect are called <i>ports</i>.
There may be any number of ports in a node. By default there is just one port, the whole node,
which results in the effect of having the whole node act as the port.
Port-like GraphObjects can only be in <a href="../api/symbols/Node.html" target="api">Node</a>s or <a href="../api/symbols/Group.html" target="api">Group</a>s, not in <a href="../api/symbols/Link.html" target="api">Link</a>s or <a href="../api/symbols/Adornment.html" target="api">Adornment</a>s or simple <a href="../api/symbols/Part.html" target="api">Part</a>s.
</p>
<p>
More information can be found in the <a href="../intro/ports.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#ports">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Geometry Path Strings</h4>
<p>
The <b>GoJS</b> <a href="../api/symbols/Geometry.html" target="api">Geometry</a> class controls the "shape" of a <a href="../api/symbols/Shape.html" target="api">Shape</a>,
whereas the <a href="../api/symbols/Shape.html#fill" target="api">Shape.fill</a> and <a href="../api/symbols/Shape.html#stroke" target="api">Shape.stroke</a> and other shape properties control the colors and appearance of the shape.
For common shape figures, there are predefined geometries that can be used by setting <a href="../api/symbols/Shape.html#figure" target="api">Shape.figure</a>.
However one can also define custom geometries.
</p>
<p>
One can construct any Geometry by allocating and initializing a <a href="../api/symbols/Geometry.html" target="api">Geometry</a> of at least one <a href="../api/symbols/PathFigure.html" target="api">PathFigure</a> holding some <a href="../api/symbols/PathSegment.html" target="api">PathSegment</a>s.
But you may find that using the string representation of a Geometry is easier to write and save in a database.
Use the static method <a href="../api/symbols/Geometry.html#parse" target="api">Geometry.parse</a> or the <a href="../api/symbols/Shape.html#geometryString" target="api">Shape.geometryString</a> property to transform a geometry path string into a <a href="../api/symbols/Geometry.html" target="api">Geometry</a> object.
</p>
<p>
More information can be found in the <a href="../intro/geometry.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#geometries">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Commands</h4>
<p>
A <a href="../api/symbols/CommandHandler.html" target="api">CommandHandler</a> handles all default keyboard input events in a Diagram.
There are many predefined methods on <a>CommandHandler</a> that implement common commands to operate on the Diagram or the current <a>Diagram.selection></a>.
</p>
<p>
You can override <a>CommandHandler.doKeyDown</a> to handle additional keyboard shortcuts or to change which commands are invoked via the keyboard.
<p>
Your code can invoke a command by calling the appropriate method on the <a>Diagram.commandHandler</a>.
Each command method has a corresponding <b>can...</b> predicate that your code can use to enable or disable any buttons that invoke the command.
Your code can customize the behavior of a command by overriding the method on <a>CommandHandler</a>,
or by setting properties on the <a>CommandHandler</a> or <a>Diagram</a> or <a>Part</a>s --
see <a href="../intro/permissions.html">GoJS Permissions</a>.
</p>
<p>
There are several CommandHandler extensions that provide additional functionality.
<p>
More information can be found in the <a href="../intro/commands.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#commands">Related samples</a>
</p>
<hr>
</div>
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>