You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
2.1 KiB
48 lines
2.1 KiB
<!DOCTYPE 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> |