create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
341 lines (302 loc) • 14.7 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="An example of having the user customize a Palette by adding copies of Diagram nodes to the Palette's Model." />
<meta itemprop="description" content="An example of having the user customize a Palette by adding copies of Diagram nodes to the Palette's Model." />
<meta property="og:description" content="An example of having the user customize a Palette by adding copies of Diagram nodes to the Palette's Model." />
<meta name="twitter:description" content="An example of having the user customize a Palette by adding copies of Diagram nodes to the Palette's Model." />
<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="Adding Nodes to Palette from Diagram" />
<meta property="og:title" content="Adding Nodes to Palette from Diagram" />
<meta name="twitter:title" content="Adding Nodes to Palette from Diagram" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/addtopalette.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/addtopalette.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/addtopalette.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/addToPalette.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/addToPalette.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Adding Nodes to Palette from Diagram | 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/DataInspector.js"></script>
<script id="code">
function init() {
// initialize main Diagram
myDiagram = new go.Diagram('myDiagramDiv', {
'undoManager.isEnabled': true
});
myDiagram.nodeTemplate =
new go.Node('Auto', { locationSpot: go.Spot.Center })
.bindTwoWay('location', 'location', go.Point.parse, go.Point.stringify)
.add(
new go.Shape('Circle', {
fill: 'white',
stroke: 'gray',
strokeWidth: 2,
portId: '',
fromLinkable: true,
toLinkable: true,
fromLinkableDuplicates: true,
toLinkableDuplicates: true,
fromLinkableSelfNode: true,
toLinkableSelfNode: true
})
.bind('stroke', 'color')
.bind('figure'),
new go.TextBlock({
margin: new go.Margin(5, 5, 3, 5),
font: '10pt sans-serif',
minSize: new go.Size(16, 16),
maxSize: new go.Size(120, NaN),
textAlign: 'center',
editable: true
})
.bindTwoWay('text')
);
// initialize Palette
myPalette = new go.Palette('myPaletteDiv', {
nodeTemplate: myDiagram.nodeTemplate,
contentAlignment: go.Spot.Center,
layout: new go.GridLayout({ wrappingColumn: 1, cellSize: new go.Size(2, 2) }),
ModelChanged: e => {
// just for demonstration purposes,
if (e.isTransactionFinished) {
// show the model data in the page's TextArea
document.getElementById('mySavedPaletteModel').textContent = e.model.toJson();
}
}
});
// now add the initial contents of the Palette
myPalette.model.nodeDataArray = [
{ text: 'Circle', color: 'blue', figure: 'Circle' },
{ text: 'Square', color: 'purple', figure: 'Square' },
{ text: 'Ellipse', color: 'orange', figure: 'Ellipse' },
{ text: 'Rectangle', color: 'red', figure: 'Rectangle' },
{ text: 'Rounded\nRectangle', color: 'green', figure: 'RoundedRectangle' },
{ text: 'Triangle', color: 'purple', figure: 'Triangle' }
];
// initialize Overview
myOverview = new go.Overview('myOverviewDiv', {
observed: myDiagram,
contentAlignment: go.Spot.Center
});
var inspector = new Inspector('myInspectorDiv', myDiagram, {
// uncomment this line to only inspect the named properties below instead of all properties on each object:
// includesOwnProperties: false,
properties: {
text: {},
// key would be automatically added for nodes, but we want to declare it read-only also:
key: { readOnly: true, show: Inspector.showIfPresent },
// color would be automatically added for nodes, but we want to declare it a color also:
color: { type: 'color' },
figure: {}
}
});
load();
}
// Show the diagram's model in JSON format
function save() {
document.getElementById('mySavedModel').value = myDiagram.model.toJson();
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById('mySavedModel').value);
}
function addToPalette() {
var node = myDiagram.selection.filter(p => p instanceof go.Node).first();
if (node !== null) {
myPalette.startTransaction();
var item = myPalette.model.copyNodeData(node.data);
myPalette.model.addNodeData(item);
myPalette.commitTransaction('added item to palette');
}
}
// The user cannot delete selected nodes in the Palette with the Delete key or Ctrl-X,
// but they can if they do so programmatically.
function removeFromPalette() {
myPalette.commandHandler.deleteSelection();
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div style="width: 100%; white-space: nowrap">
<span style="display: inline-block; vertical-align: top; padding: 2px; width: 140px">
<div
id="myPaletteDiv"
style="background-color: whitesmoke; border: solid 1px black; height: 400px"></div>
<div id="myOverviewDiv" style="border: solid 1px black; height: 100px"></div>
</span>
<span style="display: inline-block; vertical-align: top; padding: 2px; width: 500px">
<div id="myDiagramDiv" style="border: solid 1px black; height: 500px"></div>
</span>
<span style="display: inline-block; vertical-align: top; padding: 2px; width: 200px">
<div id="myInspectorDiv" class="inspector"></div>
</span>
</div>
<p>
This sample supports the normal kind of drag-and-drop from a <a>Palette</a> to a <a>Diagram</a>.
The Data <a>Inspector</a> allows you to edit the properties of a selected node in the diagram.
</p>
<p>
This sample also supports dynamically adding a copy of a selected node in the diagram to the
palette by the "Add To Palette" button. See the current state of the palette's model in the top
textarea. The palette is <a>Diagram.isReadOnly</a>, so the user cannot delete selected nodes
from the palette. But the "Delete From Palette" button removes any selected nodes from the
palette.
</p>
<div>
<button onclick="addToPalette()">Add To Palette</button>
<button onclick="removeFromPalette()">Delete From Palette</button>
Palette model:
</div>
<textarea id="mySavedPaletteModel" style="width: 100%; height: 200px"></textarea>
<div>
<button id="loadModel" onclick="load()">Load</button>
<button id="saveModel" onclick="save()">Save</button>
Diagram model:
</div>
<textarea id="mySavedModel" style="width: 100%; height: 200px">
{ "class": "go.GraphLinksModel",
"nodeDataArray": [
{ "key": 1, "text": "hello", "figure":"Circle", "color":"green", "location":"0 0" },
{ "key": 2, "text": "world", "figure":"Rectangle", "color":"red", "location":"100 0" }
],
"linkDataArray": [
{ "from":1, "to":2 }
]}
</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>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>Overview Diagrams</h4>
<p>
An <a href="../api/symbols/Overview.html" target="api">Overview</a> is a subclass of <a href="../api/symbols/Diagram.html" target="api">Diagram</a> that is used to display all of the <a href="../api/symbols/Part.html" target="api">Part</a>s
of another diagram and to show where that diagram's viewport is relative to all of those parts.
The user can also scroll the overviewed diagram by clicking or dragging within the overview.
</p>
<p>
The initialization of an <a href="../api/symbols/Overview.html" target="api">Overview</a> is just a matter of setting <a href="../api/symbols/Overview.html#observed" target="api">Overview.observed</a>
to refer to the <a href="../api/symbols/Diagram.html" target="api">Diagram</a> that you want it to show. So there needs to be a DIV for your main diagram,
for which you create a Diagram in the normal manner, and a separate DIV for your overview, for which you
create the Overview in a very simple manner.
</p>
<p>
More information can be found in the <a href="../intro/overview.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#overview">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>