create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
338 lines (303 loc) • 14.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="Warehouse design diagram with reshapable areas and disconnected links." />
<meta itemprop="description" content="Warehouse design diagram with reshapable areas and disconnected links." />
<meta property="og:description" content="Warehouse design diagram with reshapable areas and disconnected links." />
<meta name="twitter:description" content="Warehouse design diagram with reshapable areas and disconnected links." />
<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="Warehouse Designer" />
<meta property="og:title" content="Warehouse Designer" />
<meta name="twitter:title" content="Warehouse Designer" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/warehouse.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/warehouse.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/warehouse.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/warehouse.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/warehouse.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Warehouse Designer | 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">
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width: 800px; height: 800px"></div>
<p>
GoJS can be used to create industrial editors or monitors, such as the editing of warehouse layouts or HVAC layouts, or the monitoring of industrial systems
or building security.
</p>
<p>In this sample, racks, areas, and zones can be resized and moved. Disconnected links are used to show suggested moving paths.</p>
<pre><code id="modelJson" class="lang-json">
{ "class": "GraphLinksModel",
"pointsDigits": 0,
"nodeDataArray": [
{"key":0,"category":"building","size":"640 680","loc":"-90 -190"},
{"key":1,"label":"racks 1","color":"lightblue","size":"420 60","loc":"70 -130"},
{"key":-13,"label":"racks 2","color":"lightblue","size":"440 60","loc":"50 -10"},
{"key":2,"label":"racks 3","color":"lightblue","size":"440 60","loc":"50 110"},
{"key":4,"label":"returns","color":"#f7d679","size":"80 100","loc":"-70 -130"},
{"key":5,"category":"zone","label":"inbound\nstaging","color":"rgba(255,0,255,0.1)","size":"100 160","loc":"-70 30"},
{"key":6,"label":"free area","category":"zone","color":"rgba(0,255,0,0.2)","size":"180 100","loc":"70 210"},
{"key":7,"label":"free area","category":"zone","color":"rgba(0,255,0,0.2)","size":"180 100","loc":"310 210"},
{"key":8,"label":"damaged\nitems or\nextra\nstaging","color":"#f7d679","size":"80 80","loc":"410 370"},
{"key":9,"label":"labeling","color":"#f7d679","size":"120 80","loc":"250 370"},
{"key":10,"label":"packing","color":"#f7d679","size":"120 40","loc":"70 410"},
{"key":11,"label":"packing","color":"#f7d679","size":"120 40","loc":"70 350"},
{"key":12,"category":"zone","label":"outbound\nshipment","color":"rgba(255,0,0,0.2)","size":"100 120","loc":"-70 330"},
{"key":13,"color":"rgba(0,0,0,1)","size":"20 120","loc":"-110 70"},
{"key":14,"color":"rgba(0,0,0,1)","size":"20 120","loc":"-110 270"}
],
"linkDataArray": [
{"points":[140,-50,370,-50],"text":"picking path"},
{"points":[140,70,370,70],"text":"picking path"},
{"points":[140,-170,370,-170],"text":"picking path"},
{"points":[510,-150,510,125],"text":"path"},
{"points":[480,330,250,330],"text":"path"}
]}
</code></pre>
</div>
<script id="code">
function init() {
const CellSize = new go.Size(20, 20);
const myDiagram = new go.Diagram('myDiagramDiv', {
contentAlignment: go.Spot.Center,
grid:
new go.Panel('Grid', { gridCellSize: CellSize })
.add(
new go.Shape('LineH', { strokeWidth: 0.5, stroke: 'lightgray' }),
new go.Shape('LineV', { strokeWidth: 0.5, stroke: 'lightgray' })
),
'animationManager.isEnabled': false,
'undoManager.isEnabled': true,
'draggingTool.dragsLink': true,
'relinkingTool.isUnconnectedLinkValid': true,
'linkingTool.isUnconnectedLinkValid': true,
'draggingTool.isGridSnapEnabled': true,
'draggingTool.gridSnapCellSpot': go.Spot.Center,
'resizingTool.isGridSnapEnabled': true,
ModelChanged: e => {
// just for demonstration purposes,
if (e.isTransactionFinished) {
// show the model data in the page's TextArea
const modelDiv = document.getElementById('modelJson');
modelDiv.textContent = e.model.toJson();
if (window.Prism) window.Prism.highlightElement(modelDiv);
}
}
});
// The default template (empty-string name) represents racks, shelves, or tables
myDiagram.nodeTemplateMap.add('',
new go.Node('Spot', {
resizable: true,
resizeObjectName: 'mainShape',
// because the gridSnapCellSpot is Center, offset the Node's location
locationSpot: new go.Spot(0, 0, CellSize.width / 2, CellSize.height / 2)
})
.bindTwoWay('location', 'loc', go.Point.parse, go.Point.stringify)
.add(
new go.Shape({
stroke: 'gray',
name: 'mainShape',
opacity: 0.7,
minSize: CellSize,
desiredSize: CellSize // defaults to 1x1 cell
})
.bind('fill', 'color')
.bindTwoWay('desiredSize', 'size', go.Size.parse, go.Size.stringify),
new go.TextBlock({ font: 'italic 11pt Verdana' })
.bind('text', 'label')
)
);
// The 'zone' template represents areas without furniture
myDiagram.nodeTemplateMap.add('zone',
new go.Node('Spot', {
resizable: true,
resizeObjectName: 'mainShape',
// because the gridSnapCellSpot is Center, offset the Node's location
locationSpot: new go.Spot(0, 0, CellSize.width / 2, CellSize.height / 2)
})
.bindTwoWay('location', 'loc', go.Point.parse, go.Point.stringify)
.add(
new go.Shape('RoundedRectangle', {
strokeDashArray: [8, 8],
stroke: 'rgba(0,0,0,.3)',
name: 'mainShape',
fill: null,
strokeWidth: 1.5,
minSize: CellSize,
desiredSize: CellSize // defaults to 1x1 cell
})
.bind('fill', 'color')
.bindTwoWay('desiredSize', 'size', go.Size.parse, go.Size.stringify),
new go.TextBlock('label', { font: 'italic 11pt Georgia' })
.bind('text', 'label')
)
);
// The 'building' template represents walls. It is in a background layer
// and cannot be selected.
myDiagram.nodeTemplateMap.add('building',
new go.Node('Spot', {
layerName: 'Background',
locationSpot: new go.Spot(0, 0, CellSize.width / 2, CellSize.height / 2),
selectable: false,
pickable: false
})
.bindTwoWay('location', 'loc', go.Point.parse, go.Point.stringify)
.bindTwoWay('desiredSize', 'size', go.Size.parse, go.Size.stringify)
.add(
new go.Shape({
stroke: 'black',
name: 'mainShape',
fill: 'rgba(0, 0, 0, 0.05)',
strokeWidth: 2,
minSize: CellSize,
desiredSize: CellSize // defaults to 1x1 cell
})
)
);
myDiagram.linkTemplate =
new go.Link({
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
toShortLength: 4
})
.bindTwoWay('points')
.add(
new go.Shape({ stroke: '#555', strokeDashArray: [12, 8], isPanelMain: true, strokeWidth: 3 }),
new go.Shape({ stroke: '#555', fill: '#555', toArrow: 'Triangle', scale: 2 }),
new go.Panel('Auto')
.add(
new go.Shape('RoundedRectangle', { fill: '#F8F8F8', stroke: null }),
new go.TextBlock({
textAlign: 'center',
font: '10pt helvetica, arial, sans-serif',
stroke: '#919191',
margin: 2,
minSize: new go.Size(10, NaN),
editable: true
})
.bindTwoWay('text')
)
);
myDiagram.model = go.Model.fromJSON(document.getElementById('modelJson').innerText);
} // end init
document.addEventListener('DOMContentLoaded', init);
</script>
</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 -->
<!-- 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>