49 lines
1.9 KiB
HTML
49 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Data Inspector</title>
|
|
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
|
|
<meta charset="UTF-8">
|
|
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
|
|
<link rel='stylesheet' href='dataInspector.css' />
|
|
</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>
|
|
<script src="../samples/assets/require.js"></script>
|
|
<script>
|
|
require(["DataInspectorScript"], function(app)
|
|
{
|
|
app.init();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|