gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
172 lines (160 loc) • 8.31 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="Custom text editing using an HTML select box and some radio buttons."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>Text Editing Examples</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
<div class="md:pl-4">
<a class="text-white hover:text-white no-underline hover:no-underline
font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
<h1 class="my-0 p-1 ">GoJS</h1>
</a>
</div>
<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
</ul>
</div>
</div>
<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
<div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="../release/go.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<!-- custom text editors -->
<script src="../extensions/TextEditorSelectBox.js"></script>
<script src="../extensions/TextEditorRadioButtons.js"></script>
<script id="code">
function init() {
// Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
// For details, see https://gojs.net/latest/intro/buildingObjects.html
const $ = go.GraphObject.make;
myDiagram = new go.Diagram("myDiagramDiv", // must identify the DIV
{
// default text editor is now a SelectBox
"textEditingTool.defaultTextEditor": window.TextEditorSelectBox, // defined in textEditorSelectBox.js
"undoManager.isEnabled": true
});
var brush = new go.Brush(go.Brush.Linear);
brush.addColorStop(0, "rgb(255, 211, 89)");
brush.addColorStop(1, "rgb(255, 239, 113)");
myDiagram.nodeTemplate =
$(go.Node, "Vertical",
{
resizable: true,
rotatable: true,
locationSpot: go.Spot.Center
},
new go.Binding("location").makeTwoWay(),
$(go.TextBlock,
{
text: "Alpha",
editable: true,
font: "32pt Georgia, serif",
background: "lightblue"
},
new go.Binding("choices")),
$(go.TextBlock,
{
text: "Beta",
editable: true,
font: "22pt Georgia, serif",
background: "lightgreen",
scale: 2
},
new go.Binding("choices")),
$(go.TextBlock,
{
text: "Gamma",
editable: true,
font: "60pt Georgia, serif",
background: "orangered",
scale: 0.4
},
new go.Binding("choices")),
$(go.TextBlock,
{
text: "One",
editable: true,
font: "bold 16pt Arial, Helvetica, sans-serif",
background: brush,
scale: 2,
// this specific TextBlock uses a RadioButtons for editing text
textEditor: window.TextEditorRadioButtons, // defined in textEditorRadioButtons.js
// this specific TextBlock has its own choices:
choices: ['One', 'Two', 'Three', 'Four']
})
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, choices: ['Alpha', 'Beta', 'Gamma', 'Theta'], location: new go.Point(250, 150) },
{ key: 2, choices: ['Alpha', 'Beta', 'Gamma', 'Theta'], location: new go.Point(50, 50) }
],
[
{ from: 1, to: 2 }
]);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<!--
The div needs an explicit size or else we won't see anything.
Lets also add a border to help see the edges.
-->
<div id="myDiagramDiv"
style="border: solid 1px black; width:500px; height:400px; min-width: 200px"></div>
<p>
This example shows how create custom textEditors for the TextEditingTool.
</p>
<p>
Above is a Diagram with two nodes, each holding several TextBlocks.
The TextEditingTool on the diagram has a custom editor that consists of an HTML select box with several preset values.
This editor will change the text as soon as the user presses Enter, Tab, or clicks away from the select box.
</p>
<p>
TextBlocks can also have their own custom editors that override the TextEditingTool's editor, by setting <a>TextBlock.textEditor</a>.
The last TextBlock in each node has its own custom editor that consists of an HTML div with several radio buttons.
This editor will change the text as soon as an option is selected.
</p>
<p>
TextBlocks in this sample make use of <a>TextBlock.choices</a> to inform the custom text editing tools.
</p>
<p>The code for these text editors is in <a href="../extensions/TextEditorSelectBox.js" target="_blank">TextEditorSelectBox.js</a>
and <a href="../extensions/TextEditorRadioButtons.js" target="_blank">TextEditorRadioButtons.js</a>.
<p>You can see a re-implementation of the default text editors in the <a href="../extensions/TextEditor.html">Text Editor extension</a>.
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</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>