gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
48 lines (46 loc) • 2.15 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Data Inspector</title>
<meta name="description" content="TypeScript: An HTML panel that displays the properties of some model data and allows the user to edit their values." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<script src="../samples/assets/require.js"></script>
<script src="../assets/js/goSamples.js"></script>
<!-- this is only for the GoJS Samples framework -->
<link rel='stylesheet' href='dataInspector.css' />
<script id='code'>
require(["DataInspectorScript"], function(app) {
app.init();
});
</script>
</head>
<body>
<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="myInspectorDiv1" 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>The inspector code lies in <a href="DataInspector.js">DataInspector.js</a> and <a href="DataInspector.css">DataInspector.css</a>.
This code is meant to be a starting point for making your own model data inspector.
<p>On browsers that support it, color types display a color picker. There are various plugins and polyfills for this functionaltiy
if you wish to extend the data inspector.
<p>This shows the contents of the model after each transaction:
<pre id="savedModel" />
</div>
</div>
</body>
</html>