create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
667 lines (590 loc) • 28.6 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="Allow the user to shift ports that are in a node." />
<meta itemprop="description" content="Allow the user to shift ports that are in a node." />
<meta property="og:description" content="Allow the user to shift ports that are in a node." />
<meta name="twitter:description" content="Allow the user to shift ports that are in a node." />
<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="Shifting Port by Dragging Individual Port within its Node" />
<meta property="og:title" content="Shifting Port by Dragging Individual Port within its Node" />
<meta name="twitter:title" content="Shifting Port by Dragging Individual Port within its Node" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/portshifting.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/portshifting.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/portshifting.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/PortShifting.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/PortShifting.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Shifting Port by Dragging Individual Port within its Node | 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 src="../extensions/Figures.js"></script>
<script src="../extensions/PortShiftingTool.js"></script>
<script id="code">
var red = 'orangered'; // 0 or false
var green = 'forestgreen'; // 1 or true
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
'draggingTool.isGridSnapEnabled': true, // dragged nodes will snap to a grid of 10x10 cells
'undoManager.isEnabled': true
});
// install the PortShiftingTool as a "mouse move" tool
myDiagram.toolManager.mouseMoveTools.insertAt(0, new PortShiftingTool());
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener('Modified', e => {
const button = document.getElementById('saveModel');
if (button) button.disabled = !myDiagram.isModified;
const idx = document.title.indexOf('*');
if (myDiagram.isModified) {
if (idx < 0) document.title += '*';
} else {
if (idx >= 0) document.title = document.title.slice(0, idx);
}
});
var palette = new go.Palette('palette'); // create a new Palette in the HTML DIV element "palette"
// creates relinkable Links that will avoid crossing Nodes when possible and will jump over other Links in their paths
myDiagram.linkTemplate =
new go.Link({
routing: go.Routing.AvoidsNodes,
curve: go.Curve.JumpOver,
corner: 3,
relinkableFrom: true,
relinkableTo: true,
selectionAdorned: false, // Links are not adorned when selected so that their color remains visible.
shadowOffset: new go.Point(0, 0),
shadowBlur: 5,
shadowColor: 'blue'
})
.bindObject('isShadowed', 'isSelected')
.add(
new go.Shape({ name: 'SHAPE', strokeWidth: 2, stroke: red })
);
// node template helpers
var sharedToolTip =
go.GraphObject.build('ToolTip', { 'Border.figure': 'RoundedRectangle' })
.add(
new go.TextBlock({ margin: 2 })
.bind('text', '', d => d.category)
);
// define some common property settings
function nodeStyle(node) {
node.selectionAdorned = false;
node.shadowOffset = new go.Point(0, 0);
node.shadowBlur = 15;
node.shadowColor = 'blue';
node.locationSpot = go.Spot.Center;
node.locationObjectName = 'NODESHAPE';
node.resizable = true;
node.resizeObjectName = 'NODESHAPE';
node.toolTip = sharedToolTip;
node.bindTwoWay('location', 'loc', go.Point.parse, go.Point.stringify);
node.bindObject('isShadowed', 'isSelected');
}
function shapeStyle(shape) {
shape.name = 'NODESHAPE';
shape.fill = 'lightgray';
shape.stroke = 'darkslategray';
shape.desiredSize = new go.Size(40, 40);
shape.strokeWidth = 2;
}
function portStyle(port, id, input, align) {
port.bindTwoWay('alignment', id + 'Spot', go.Spot.parse, go.Spot.stringify);
port.portId = id;
port.desiredSize = new go.Size(6, 6);
port.alignment = align;
port.fill = 'black';
port.fromSpot = go.Spot.Right;
port.fromLinkable = !input;
port.toSpot = go.Spot.Left;
port.toLinkable = input;
port.toMaxLinks = 1;
port.cursor = 'pointer';
}
// define templates for each type of node
const inputTemplate =
new go.Node('Spot', {
doubleClick: (e, obj) => {
if (!(obj instanceof go.Node)) return;
e.diagram.startTransaction('Toggle Input');
const shp = obj.findObject('NODESHAPE');
shp.fill = shp.fill === green ? red : green;
updateStates();
e.diagram.commitTransaction('Toggle Input');
}
})
.apply(nodeStyle)
.add(
new go.Shape('Circle').apply(shapeStyle)
.set({ fill: red }), // override the default fill
new go.Shape('Rectangle').apply(portStyle, '', false, new go.Spot(1, 0.5)) // the only port
);
const outputTemplate =
new go.Node('Spot').apply(nodeStyle)
.add(
new go.Shape('Rectangle').apply(shapeStyle)
.set({ fill: green }), // override the default fill
new go.Shape('Rectangle').apply(portStyle, '', true, new go.Spot(0, 0.5))
); // the only port
const andTemplate =
new go.Node('Spot').apply(nodeStyle)
.add(
new go.Shape('AndGate').apply(shapeStyle),
new go.Shape('Rectangle').apply(portStyle, 'in1', true, new go.Spot(0, 0.3)),
new go.Shape('Rectangle').apply(portStyle, 'in2', true, new go.Spot(0, 0.7)),
new go.Shape('Rectangle').apply(portStyle, 'out', false, new go.Spot(1, 0.5))
);
const orTemplate =
new go.Node('Spot').apply(nodeStyle)
.add(
new go.Shape('OrGate').apply(shapeStyle),
new go.Shape('Rectangle').apply(portStyle, 'in1', true, new go.Spot(0.16, 0.3)),
new go.Shape('Rectangle').apply(portStyle, 'in2', true, new go.Spot(0.16, 0.7)),
new go.Shape('Rectangle').apply(portStyle, 'out', false, new go.Spot(1, 0.5))
);
const xorTemplate =
new go.Node('Spot').apply(nodeStyle)
.add(
new go.Shape('XorGate').apply(shapeStyle),
new go.Shape('Rectangle').apply(portStyle, 'in1', true, new go.Spot(0.26, 0.3)),
new go.Shape('Rectangle').apply(portStyle, 'in2', true, new go.Spot(0.26, 0.7)),
new go.Shape('Rectangle').apply(portStyle, 'out', false, new go.Spot(1, 0.5))
);
const norTemplate =
new go.Node('Spot').apply(nodeStyle)
.add(
new go.Shape('NorGate').apply(shapeStyle),
new go.Shape('Rectangle').apply(portStyle, 'in1', true, new go.Spot(0.16, 0.3)),
new go.Shape('Rectangle').apply(portStyle, 'in2', true, new go.Spot(0.16, 0.7)),
new go.Shape('Rectangle').apply(portStyle, 'out', false, new go.Spot(1, 0.5))
);
const xnorTemplate =
new go.Node('Spot').apply(nodeStyle)
.add(
new go.Shape('XnorGate').apply(shapeStyle),
new go.Shape('Rectangle').apply(portStyle, 'in1', true, new go.Spot(0.26, 0.3)),
new go.Shape('Rectangle').apply(portStyle, 'in2', true, new go.Spot(0.26, 0.7)),
new go.Shape('Rectangle').apply(portStyle, 'out', false, new go.Spot(1, 0.5))
);
const nandTemplate =
new go.Node('Spot').apply(nodeStyle)
.add(
new go.Shape('NandGate').apply(shapeStyle),
new go.Shape('Rectangle').apply(portStyle, 'in1', true, new go.Spot(0, 0.3)),
new go.Shape('Rectangle').apply(portStyle, 'in2', true, new go.Spot(0, 0.7)),
new go.Shape('Rectangle').apply(portStyle, 'out', false, new go.Spot(1, 0.5))
);
const notTemplate =
new go.Node('Spot').apply(nodeStyle)
.add(
new go.Shape('Inverter').apply(shapeStyle),
new go.Shape('Rectangle').apply(portStyle, 'in', true, new go.Spot(0, 0.5)),
new go.Shape('Rectangle').apply(portStyle, 'out', false, new go.Spot(1, 0.5))
);
// add the templates created above to myDiagram and palette
myDiagram.nodeTemplateMap.add('input', inputTemplate);
myDiagram.nodeTemplateMap.add('output', outputTemplate);
myDiagram.nodeTemplateMap.add('and', andTemplate);
myDiagram.nodeTemplateMap.add('or', orTemplate);
myDiagram.nodeTemplateMap.add('xor', xorTemplate);
myDiagram.nodeTemplateMap.add('not', notTemplate);
myDiagram.nodeTemplateMap.add('nand', nandTemplate);
myDiagram.nodeTemplateMap.add('nor', norTemplate);
myDiagram.nodeTemplateMap.add('xnor', xnorTemplate);
// share the template map with the Palette
palette.nodeTemplateMap = myDiagram.nodeTemplateMap;
palette.model.nodeDataArray = [
{ category: 'input' },
{ category: 'output' },
{ category: 'and' },
{ category: 'or' },
{ category: 'xor' },
{ category: 'not' },
{ category: 'nand' },
{ category: 'nor' },
{ category: 'xnor' }
];
// load the initial diagram
load();
// continually update the diagram
loop();
}
// update the diagram every 250 milliseconds
function loop() {
setTimeout(() => {
updateStates();
loop();
}, 250);
}
// update the value and appearance of each node according to its type and input values
function updateStates() {
var oldskip = myDiagram.skipsUndoManager;
myDiagram.skipsUndoManager = true;
// do all "input" nodes first
myDiagram.nodes.each(node => {
if (node.category === 'input') {
doInput(node);
}
});
// now we can do all other kinds of nodes
myDiagram.nodes.each(node => {
switch (node.category) {
case 'and':
doAnd(node);
break;
case 'or':
doOr(node);
break;
case 'xor':
doXor(node);
break;
case 'not':
doNot(node);
break;
case 'nand':
doNand(node);
break;
case 'nor':
doNor(node);
break;
case 'xnor':
doXnor(node);
break;
case 'output':
doOutput(node);
break;
case 'input':
break; // doInput already called, above
}
});
myDiagram.skipsUndoManager = oldskip;
}
// helper predicate
function linkIsTrue(link) {
// assume the given Link has a Shape named "SHAPE"
return link.findObject('SHAPE').stroke === green;
}
// helper function for propagating results
function setOutputLinks(node, color) {
node.findLinksOutOf().each(link => (link.findObject('SHAPE').stroke = color));
}
// update nodes by the specific function for its type
// determine the color of links coming out of this node based on those coming in and node type
function doInput(node) {
// the output is just the node's Shape.fill
setOutputLinks(node, node.findObject('NODESHAPE').fill);
}
function doAnd(node) {
var color = node.findLinksInto().all(linkIsTrue) ? green : red;
setOutputLinks(node, color);
}
function doNand(node) {
var color = !node.findLinksInto().all(linkIsTrue) ? green : red;
setOutputLinks(node, color);
}
function doNot(node) {
var color = !node.findLinksInto().all(linkIsTrue) ? green : red;
setOutputLinks(node, color);
}
function doOr(node) {
var color = node.findLinksInto().any(linkIsTrue) ? green : red;
setOutputLinks(node, color);
}
function doNor(node) {
var color = !node.findLinksInto().any(linkIsTrue) ? green : red;
setOutputLinks(node, color);
}
function doXor(node) {
var truecount = 0;
node.findLinksInto().each(link => {
if (linkIsTrue(link)) truecount++;
});
var color = truecount % 2 !== 0 ? green : red;
setOutputLinks(node, color);
}
function doXnor(node) {
var truecount = 0;
node.findLinksInto().each(link => {
if (linkIsTrue(link)) truecount++;
});
var color = truecount % 2 === 0 ? green : red;
setOutputLinks(node, color);
}
function doOutput(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(link => {
node.findObject('NODESHAPE').fill = link.findObject('SHAPE').stroke;
});
}
// save a model to and load a model from Json text, displayed below the Diagram
function save() {
document.getElementById('mySavedModel').value = myDiagram.model.toJson();
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById('mySavedModel').value);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div style="width: 100%; display: flex; justify-content: space-between">
<div id="palette" style="width: 100px; height: 500px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 500px; border: solid 1px black"></div>
</div>
<div id="description">
<p>
This is exactly like the <a href="../samples/LogicCircuit.html">Logic Circuit sample</a> but also makes use of the PortShiftingTool, which is defined in
<a href="../extensions/PortShiftingTool.js">PortShiftingTool.js</a>
</p>
<p>
When the user wants to shift the position of a port on a node, the user can hold down the Shift key during a mouse-down on a port element. Dragging then
will move the port within the node.
</p>
<p>Note how the relative position of the port within the node is maintained as you resize the node.</p>
<p>
If you want to persist the port's spot, you should add a TwoWay Binding of the <a>GraphObject.alignment</a>
property with a property that you define on the node data for each port.
</p>
<p>
This sample does not constrain the position of the port within the node, but you could adapt the PortShiftingTool.updateAlignment method to do so. For
example if you wanted, you could keep a port stuck along one edge of the node.
</p>
</div>
<div id="buttons">
<button id="saveModel" onclick="save()">Save</button>
<button id="loadModel" onclick="load()">Load</button>
</div>
<textarea id="mySavedModel" style="width: 100%; height: 200px">
{ "class": "go.GraphLinksModel",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"nodeDataArray": [
{"category":"input", "key":"input1", "loc":"-150 -80" },
{"category":"or", "key":"or1", "loc":"-70 0" },
{"category":"not", "key":"not1", "loc":"10 0" },
{"category":"xor", "key":"xor1", "loc":"100 0" },
{"category":"or", "key":"or2", "loc":"200 0" },
{"category":"output", "key":"output1", "loc":"200 -100" }
],
"linkDataArray": [
{"from":"input1", "fromPort":"out", "to":"or1", "toPort":"in1"},
{"from":"or1", "fromPort":"out", "to":"not1", "toPort":"in"},
{"from":"not1", "fromPort":"out", "to":"or1", "toPort":"in2"},
{"from":"not1", "fromPort":"out", "to":"xor1", "toPort":"in1"},
{"from":"xor1", "fromPort":"out", "to":"or2", "toPort":"in1"},
{"from":"or2", "fromPort":"out", "to":"xor1", "toPort":"in2"},
{"from":"xor1", "fromPort":"out", "to":"output1", "toPort":""}
]}
</textarea>
</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>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>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>Tools</h4>
<p>
<a href="../api/symbols/Tool.html" target="api">Tool</a>s handle all input events, such as mouse and keyboard interactions, in a Diagram.
There are many kinds of predefined Tool classes that implement all of the common operations that users do.
</p>
<p>
For flexibility and simplicity, all input events are canonicalized as <a href="../api/symbols/InputEvent.html" target="api">InputEvent</a>s and
redirected by the diagram to go to the <a href="../api/symbols/Diagram.html#currentTool" target="api">Diagram.currentTool</a>.
By default the Diagram.currentTool is an instance of <a href="../api/symbols/ToolManager.html" target="api">ToolManager</a> held as the <a href="../api/symbols/Diagram.html#toolManager" target="api">Diagram.toolManager</a>.
The ToolManager implements support for all mode-less tools.
The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool.
This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides that it is finished,
at which time the diagram's current tool reverts back to the <a href="../api/symbols/Diagram.html#defaultTool" target="api">Diagram.defaultTool</a>, which is normally the ToolManager, again.
</p>
<p>
More information can be found in the <a href="../intro/tools.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#tools">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Palette</h4>
<p>
A <a href="../api/symbols/Palette.html" target="api">Palette</a> is a subclass of <a href="../api/symbols/Diagram.html" target="api">Diagram</a> that is used to display a number of <a href="../api/symbols/Part.html" target="api">Part</a>s that
can be dragged into the diagram that is being modified by the user.
The initialization of a <a href="../api/symbols/Palette.html" target="api">Palette</a> is just like the initialization of any <a href="../api/symbols/Diagram.html" target="api">Diagram</a>.
Like Diagrams, you can have more than one Palette on the page at the same time.
</p>
<p>
More information can be found in the <a href="../intro/palette.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#palette">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>GoJS Extensions</h4>
<p>
<b>GoJS</b> can be extended in a variety of ways.
The most common way to change the standard behavior is to set properties on the <a href="../api/symbols/GraphObject.html" target="api">GraphObject</a>, <a href="../api/symbols/Diagram.html" target="api">Diagram</a>, <a href="../api/symbols/CommandHandler.html" target="api">CommandHandler</a>, <a href="../api/symbols/Tool.html" target="api">Tool</a>, or <a href="../api/symbols/Layout.html" target="api">Layout</a>.
But when the desired property does not exist, you might need to override methods of CommandHandler, Tool, Layout, Link, or Node.
Methods that you can override are documented in the API reference.
Various features of GoJS can be overriden, either by replacing a method on an instance (a feature of JavaScript) or by defining a subclass.
You should not modify the prototypes of any of the <b>GoJS</b> classes.
</p>
<p>
In addition to our samples, <b>GoJS</b> provides an <strong><a href="../samples/#extensions">extensions gallery</a></strong>,
showcasing the creation of custom tools and layouts.
Those classes and samples are written in TypeScript, available at <code>../extensionsJSM/</code>,
as ECMAScript/JavaScript modules -- these use the <code>../release/go-module.js</code> library.
We recommend that you copy the files that you need into your project, so that you can adjust how they refer to the GoJS library
that you choose and so that you can include them into your own building and packaging procedures.
</p>
<p>
More information can be found in the <a href="../intro/extensions.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#extensions">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Grid Patterns</h4>
<p>
<b>GoJS</b> provides functionality to display a grid of lines drawn at regular intervals.
Grid Panels can also force dragged parts to be aligned on grid points, and resize parts to be multiples of the grid cell size.
</p>
<p>
Grids are implemented using a type of <a href="../api/symbols/Panel.html" target="api">Panel</a>, <a href="../api/symbols/PanelLayout.html#Grid" target="api">Panel.Grid</a>.
Grid Panels, like most other types of Panels, can be used within <a href="../api/symbols/Node.html" target="api">Node</a>s or any other kind of <a href="../api/symbols/Part.html" target="api">Part</a>.
However when they are used as the <a href="../api/symbols/Diagram.html#grid" target="api">Diagram.grid</a>, they are effectively infinite in extent.
</p>
<p>
More information can be found in the <a href="../intro/grids.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#grid">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>