create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
388 lines (344 loc) • 17.1 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="Show all of the predefined kinds of arrowheads for links, which can be used by setting Shape.toArrow or Shape.fromArrow." />
<meta itemprop="description" content="Show all of the predefined kinds of arrowheads for links, which can be used by setting Shape.toArrow or Shape.fromArrow." />
<meta property="og:description" content="Show all of the predefined kinds of arrowheads for links, which can be used by setting Shape.toArrow or Shape.fromArrow." />
<meta name="twitter:description" content="Show all of the predefined kinds of arrowheads for links, which can be used by setting Shape.toArrow or Shape.fromArrow." />
<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="All Predefined Arrowheads for Links" />
<meta property="og:title" content="All Predefined Arrowheads for Links" />
<meta name="twitter:title" content="All Predefined Arrowheads for Links" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/arrowheads.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/arrowheads.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/arrowheads.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/arrowheads.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/arrowheads.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
All Predefined Arrowheads for Links | 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>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
const colors = {
gold: '#f3e601',
white: '#FFFFFF',
black: '#101920'
};
var myDiagram = new go.Diagram('myDiagramDiv', {
hoverDelay: 50,
isReadOnly: true, // don't allow move or delete
layout: new go.CircularLayout({
radius: 100, // minimum radius
spacing: 14, // circular nodes will touch each other
nodeDiameterFormula: go.CircularNodeDiameterFormula.Circular, // assume nodes are circular
startAngle: 270 // first node will be at top
}),
// define a DiagramEvent listener
LayoutCompleted: e => {
// now that the CircularLayout has finished, we know where its center is
var cntr = myDiagram.findNodeForKey('Center');
cntr.location = myDiagram.layout.actualCenter;
}
});
// these are the nodes that are in a circle
myDiagram.nodeTemplate =
new go.Node({
locationSpot: go.Spot.Center,
click: showArrowInfo, // defined below
// define a tooltip for each link that displays its information
toolTip:
go.GraphObject.build('ToolTip')
.add(
new go.TextBlock({ margin: 4 })
.bindObject('text', '', infoString)
)
})
.add(
new go.Shape('Circle', {
desiredSize: new go.Size(25, 25),
fill: 'transparent',
strokeWidth: 1.5,
stroke: colors.gold
})
);
// use a special template for the center node
myDiagram.nodeTemplateMap.add('Center',
new go.Node('Spot', {
selectable: false,
isLayoutPositioned: false, // the Diagram.layout will not position this node
locationSpot: go.Spot.Center
})
.add(
new go.Shape('Circle', {
fill: 'transparent',
strokeWidth: 1.5,
stroke: colors.gold,
desiredSize: new go.Size(250, 250)
}),
new go.TextBlock('Select or hover over\na Node or Link\nto see arrowhead names', {
margin: 1,
textAlign: 'center',
stroke: colors.white,
font: '16px Segoe UI, Roboto, Helvetica Neue, Noto Sans, sans-serif'
})
)
);
// all Links have both "toArrow" and "fromArrow" Shapes,
// where both arrow properties are data bound
myDiagram.linkTemplate =
new go.Link({
// the whole link panel
routing: go.Routing.Normal,
click: showArrowInfo,
// define a tooltip for each link that displays its information
toolTip:
go.GraphObject.build('ToolTip')
.add(
new go.TextBlock({ margin: 4 })
.bindObject('text', '', infoString)
)
})
.add(
// the link shape
// the first element in a Link is assumed to be main element
new go.Shape({ stroke: colors.white, strokeWidth: 1.5, strokeDashArray: [2, 5] }),
// the "from" arrowhead
new go.Shape({ scale: 2, stroke: colors.white, fill: colors.black })
.bind('fromArrow'),
// the "to" arrowhead
new go.Shape({ scale: 2, stroke: colors.white, fill: colors.black })
.bind('toArrow')
);
// collect all of the predefined arrowhead names
var arrowheads = go.Shape.getArrowheadGeometries().toKeySet().toArray();
if (arrowheads.length % 2 === 1) arrowheads.push(''); // make sure there's an even number
// create all of the link data, two arrowheads per link
var linkdata = [];
var i = 0;
for (var j = 0; j < arrowheads.length; j = j + 2) {
linkdata.push({
from: 'Center',
to: i++,
toArrow: arrowheads[j],
fromArrow: arrowheads[j + 1]
});
}
myDiagram.model = new go.GraphLinksModel({
// this gets copied automatically when there's a link data reference to a new node key
// and is then added to the nodeDataArray
archetypeNodeData: {},
// the node array starts with just the special Center node
nodeDataArray: [{ category: 'Center', key: 'Center' }],
// the link array was created above
linkDataArray: linkdata
});
}
// a conversion function used to get arrowhead information for a Part
function infoString(obj) {
var part = obj.part;
if (part instanceof go.Adornment) part = part.adornedPart;
var msg = '';
if (part instanceof go.Link) {
var link = part;
msg = 'toArrow: ' + link.data.toArrow + '\nfromArrow: ' + link.data.fromArrow;
} else if (part instanceof go.Node) {
var node = part;
var link = node.linksConnected.first();
msg = 'toArrow: ' + link.data.toArrow + '\nfromArrow: ' + link.data.fromArrow;
}
return msg;
}
// a GraphObject.click event handler to show arrowhead information
function showArrowInfo(e, obj) {
var msg = infoString(obj);
if (msg) {
var status = document.getElementById('myArrowheadInfo');
if (status) status.textContent = msg;
}
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<!-- The DIV for the Diagram needs an explicit size or else we won't see anything.
Also add a border to help see the edges. -->
<div
id="myDiagramDiv"
style="border: solid 1px black; background-color: #101920; width: 600px; height: 600px"></div>
<div id="myArrowheadInfo" style="color: red"></div>
<p>
This sample displays all predefined GoJS arrowheads. Select or hover over a Node or its Link to
see the names of the arrowheads on the Link.
</p>
<p>
Each Link shows two arrowheads. The Link template has a Shape whose
<a>Shape.toArrow</a> property is bound to an arrowhead name. A different Shape in the template
has its <a>Shape.fromArrow</a> property bound to a different arrowhead name. Each arrowhead has
been scaled up to make it more easily visible.
</p>
<p>
See the definitions of all these arrowheads in the file:
<a href="../extensions/Arrowheads.js" target="_blank">Arrowheads.js</a>.
</p>
<p>For predefined shape geometries, see the <a href="shapes.html">Shapes</a> sample.</p>
</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>Links</h4>
<p>
The <a href="../api/symbols/Link.html" target="api">Link</a> class is used to implement a visual relationship between nodes.
Links are normally created by the presence of link data objects in the <a href="../api/symbols/GraphLinksModel.html#linkDataArray" target="api">GraphLinksModel.linkDataArray</a>
or by a parent key reference as the value of the <a href="../api/symbols/TreeModel.html#nodeParentKeyProperty" target="api">TreeModel.nodeParentKeyProperty</a> of a node data object
in a <a href="../api/symbols/TreeModel.html" target="api">TreeModel</a>.
More information can be found in the <a href="../intro/links.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#links">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Circular Layout</h4>
<p>
This predefined layout is used for placing Nodes in a cirular or elliptical arrangement.
More information can be found in the <a href="../intro/layouts.html#CircularLayout">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#circularlayout">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>ToolTips</h4>
<p>
A tooltip is an <a href="../api/symbols/Adornment.html" target="api">Adornment</a> that is shown when the mouse hovers over an object that has its <a href="../api/symbols/GraphObject.html#toolTip" target="api">GraphObject.toolTip</a> set.
The tooltip part is bound to the same data as the part itself.
</p>
<p>
It is typical to implement a tooltip as a "ToolTip" Panel holding a <a href="../api/symbols/TextBlock.html" target="api">TextBlock</a> or a Panel of TextBlocks and other objects.
Each "ToolTip" is just an "Auto" Panel <a href="../api/symbols/Adornment.html" target="api">Adornment</a> that is shadowed, and where the border is a rectangular <a href="../api/symbols/Shape.html" target="api">Shape</a> with a light gray fill.
However you can implement the tooltip as any arbitrarily complicated Adornment.
</p>
<p>
More information can be found in the <a href="../intro/tooltips.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#tooltips">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 -->
</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>