create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
527 lines (470 loc) • 22.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="An HTML panel that displays the properties of some model data and allows the user to edit their values." />
<meta itemprop="description" content="An HTML panel that displays the properties of some model data and allows the user to edit their values." />
<meta property="og:description" content="An HTML panel that displays the properties of some model data and allows the user to edit their values." />
<meta name="twitter:description" content="An HTML panel that displays the properties of some model data and allows the user to edit their values." />
<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="Data Inspector, Expedient Way to Implement HTML Editor of Data Properties of Selected Node" />
<meta property="og:title" content="Data Inspector, Expedient Way to Implement HTML Editor of Data Properties of Selected Node" />
<meta name="twitter:title" content="Data Inspector, Expedient Way to Implement HTML Editor of Data Properties of Selected Node" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/datainspector.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/datainspector.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/datainspector.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/DataInspector.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/DataInspector.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Data Inspector, Expedient Way to Implement HTML Editor of Data Properties of Selected 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>
<link rel="stylesheet" href="../assets/css/prism.css"/>
<script src="../assets/js/prism.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<style>
/* Default CSS for the Data inspector */
.inspector {
display: inline-block;
font: bold 14px helvetica, sans-serif;
background-color: #212121;
/* Grey 100 */
cursor: default;
}
.inspector table {
border-collapse: separate;
border-spacing: 2px;
}
.inspector td,
th {
/* Grey 900 */
color: #f5f5f5;
padding: 2px;
}
.inspector input {
background-color: #424242;
/* Grey 800 */
color: #f5f5f5;
/* Grey 100 */
font: bold 12px helvetica, sans-serif;
border: 0px;
padding: 2px;
}
.inspector input:disabled {
background-color: #bdbdbd;
/* Grey 400 */
color: #616161;
/* Grey 700 */
}
.inspector select {
background-color: #424242;
}
</style>
<script src="../extensions/DataInspector.js"></script>
<script id="code">
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
'animationManager.isEnabled': false,
// allow double-click in background to create a new node
'clickCreatingTool.archetypeNodeData': { text: 'Node', color: 'white' },
// allow Ctrl-G to call groupSelection()
'commandHandler.archetypeGroupData': {
text: 'Group',
isGroup: true,
color: 'blue'
},
// enable undo & redo
'undoManager.isEnabled': true,
// automatically show the state of the diagram's model on the page
ModelChanged: e => {
if (e.isTransactionFinished) {
document.getElementById('savedModel').textContent =
myDiagram.model.toJson();
if (window.Prism) window.Prism.highlightAll();
}
}
});
// These nodes have text surrounded by a rounded rectangle
// whose fill color is bound to the node data.
// The user can drag a node by dragging its TextBlock label.
// Dragging from the Shape will start drawing a new link.
myDiagram.nodeTemplate =
new go.Node('Auto', { locationSpot: go.Spot.Center })
.bindTwoWay('location', 'loc', go.Point.parse, go.Point.stringify)
.add(
new go.Shape('Rectangle', {
stroke: null,
strokeWidth: 0,
fill: 'white', // the default fill, if there is no data-binding
portId: '',
cursor: 'pointer', // the Shape is the port, not the whole Node
// allow all kinds of links from and to this port
fromLinkable: true,
fromLinkableSelfNode: true,
fromLinkableDuplicates: true,
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true
})
.bind('fill', 'color'),
new go.TextBlock({
font: 'bold 18px sans-serif',
stroke: '#111',
margin: 8, // make some extra space for the shape around the text
isMultiline: false, // don't allow newlines in text
editable: true // allow in-place editing by user
})
.bindTwoWay('text', 'text')
);
// The link shape and arrowhead have their stroke brush data bound to the "color" property
myDiagram.linkTemplate =
new go.Link({
toShortLength: 3,
relinkableFrom: true,
relinkableTo: true
}) // allow the user to relink existing links
.add(
new go.Shape({ strokeWidth: 2 })
.bind('stroke', 'color'),
new go.Shape({ toArrow: 'Standard', stroke: null })
.bind('fill', 'color')
);
// Groups consist of a title in the color given by the group node data
// above a translucent gray rectangle surrounding the member parts
myDiagram.groupTemplate =
new go.Group('Vertical', {
selectionObjectName: 'PANEL', // selection handle goes around shape, not label
ungroupable: true
}) // enable Ctrl-Shift-G to ungroup a selected Group
.add(
new go.TextBlock({
font: 'bold 19px sans-serif',
isMultiline: false, // don't allow newlines in text
editable: true // allow in-place editing by user
})
.bindTwoWay('text', 'text')
.bind('stroke', 'color'),
new go.Panel('Auto', { name: 'PANEL' })
.add(
new go.Shape('Rectangle', { // the rectangular shape around the members
fill: 'rgba(128,128,128,0.2)',
stroke: 'gray',
strokeWidth: 3
}),
new go.Placeholder({ padding: 10 }) // represents where the members are
)
);
// Create the Diagram's Model:
const nodeDataArray = [
{ key: 1, text: 'Alpha', color: '#B2DFDB', state: 'one' },
{
key: 2,
text: 'Beta',
color: '#B2B2DB',
state: 'two',
password: '1234'
},
{
key: 3,
text: 'Gamma',
color: '#1DE9B6',
state: 2,
group: 5,
flag: false,
choices: [1, 2, 3, 4, 5]
},
{
key: 4,
text: 'Delta',
color: '#00BFA5',
state: 'three',
group: 5,
flag: true
},
{ key: 5, text: 'Epsilon', color: '#00BFA5', isGroup: true }
];
const linkDataArray = [
{ from: 1, to: 2, color: '#5E35B1' },
{ from: 2, to: 2, color: '#5E35B1' },
{ from: 3, to: 4, color: '#6200EA' },
{ from: 3, to: 1, color: '#6200EA' }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
// some shared model data
myDiagram.model.modelData = { test: true, hello: 'world', version: 42 };
// select a Node, so that the first Inspector shows something
myDiagram.select(myDiagram.nodes.first());
// Declare which properties to show and how.
// By default, all properties on the model data objects are shown unless the inspector option "includesOwnProperties" is set to false.
// Show the primary selection's data, or blanks if no Part is selected:
const inspector =
new Inspector('myInspectorDiv', myDiagram, {
// allows for multiple nodes to be inspected at once
multipleSelection: true,
// max number of node properties will be shown when multiple selection is true
showSize: 4,
// when multipleSelection is true, when showUnionProperties is true it takes the union of properties
// otherwise it takes the intersection of properties
showUnionProperties: true,
// 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: { show: Inspector.showIfPresent, type: 'color' },
// Comments and LinkComments are not in any node or link data (yet), so we add them here:
Comments: { show: Inspector.showIfNode },
LinkComments: { show: Inspector.showIfLink },
isGroup: { readOnly: true, show: Inspector.showIfPresent },
flag: { show: Inspector.showIfNode, type: 'checkbox' },
state: {
show: Inspector.showIfNode,
type: 'select',
choices: (node, propName) => {
if (Array.isArray(node.data.choices)) return node.data.choices;
return ['one', 'two', 'three', 'four', 'five'];
}
},
choices: { show: false }, // must not be shown at all
// an example of specifying the <input> type
password: { show: Inspector.showIfPresent, type: 'password' }
}
});
// Always show the first Node:
const inspector2 =
new Inspector('myInspectorDiv2', myDiagram, {
// By default the inspector works on the Diagram selection.
// This property lets us inspect a specific object by calling Inspector.inspectObject.
inspectSelection: false,
properties: {
text: {},
// This property we want to declare as a color, to show a color-picker:
color: { type: 'color' },
// key would be automatically added for node data, but we want to declare it read-only also:
key: { readOnly: true, show: Inspector.showIfPresent }
}
});
// If not inspecting a selection, you can programatically decide what to inspect (a Part, or a JavaScript object)
inspector2.inspectObject(myDiagram.nodes.first().data);
// Always show the model.modelData:
const inspector3 =
new Inspector('myInspectorDiv3', myDiagram, {
inspectSelection: false
});
inspector3.inspectObject(myDiagram.model.modelData);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<span style="display: inline-block; vertical-align: top">
<div style="margin-left: 10px">
<div
id="myDiagramDiv"
style="border: solid 1px black; width: 400px; height: 400px"></div>
</div>
</span>
<span style="display: inline-block; vertical-align: top">
Selected Part:<br />
<div id="myInspectorDiv" class="inspector"></div>
<br />
First Node's data:<br />
<div id="myInspectorDiv2" class="inspector"></div>
<br />
Model.modelData:<br />
<div id="myInspectorDiv3" class="inspector"></div>
<br />
</span>
<div>
<p>
An HTML-based inspector that displays and allows editing of data for the
selected Part (if any), or for a particular JavaScript object, or for the
shared
<a>Model.modelData</a> object, which exists even if there are no nodes or
links.
</p>
<p>
The inspector code lies in
<a href="../extensions/DataInspector.js">DataInspector.js</a>.
This code is meant to
be a starting point for making your own model data inspector.
</p>
<p>
On browsers that support it, color types display a color picker. There are
various plugins and polyfills for this functionality if you wish to extend
the data inspector.
</p>
<p>This shows the contents of the model after each transaction:</p>
<pre class="lang-js"><code id="savedModel"></code></pre>
</div>
</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>Groups</h4>
<p>
The <a href="../api/symbols/Group.html" target="api">Group</a> class is used to treat a collection of <a href="../api/symbols/Node.html" target="api">Node</a>s and <a href="../api/symbols/Link.html" target="api">Link</a>s as if they were a single <a href="../api/symbols/Node.html" target="api">Node</a>.
Those nodes and links are members of the group; together they constitute a subgraph.
</p>
<p>
A subgraph is <em>not</em> another <a href="../api/symbols/Diagram.html" target="api">Diagram</a>, so there is no separate HTML Div element for the subgraph of a group.
All of the <a href="../api/symbols/Part.html" target="api">Part</a>s that are members of a <a href="../api/symbols/Group.html" target="api">Group</a> belong to the same Diagram as the Group.
There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes.
There can even be links between member nodes and the containing group itself.
</p>
<p>
More information can be found in the <a href="../intro/groups.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#groups">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>Data Inspector</h4>
<p>Using a premade GoJS extension, you can create an HTML-based inspector that displays and allows editing of data for the selected Part (if any),
or for a particular JavaScript object, or for the shared <a href="../api/symbols/Model.html#modelData" target="api">Model.modelData</a> object,
which exists even if there are no nodes or links.
</p>
<p>The inspector code lies in <a href="../extensions/DataInspector.js">DataInspector.js</a> and <a href="../extensions/DataInspector.css">DataInspector.css</a>.
This code is meant to be a starting point for making your own model data inspector.
</p>
<p>
A generic demonstration of this extension can be found in the <a href="../samples/DataInspector.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#inspector">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>HTML Interaction</h4>
<p>
GoJS Diagrams can be used alongside other HTML elements in a webapp.
For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the <a href="../api/symbols/HTMLInfo.html" target="api">HTMLInfo</a> class.
</p>
<p>
More information can be found in the <a href="../intro/HTMLinteraction.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#html">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>