create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
251 lines (218 loc) • 10.7 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." />
<meta itemprop="description" content="Custom text editing using an HTML select box and some radio buttons." />
<meta property="og:description" content="Custom text editing using an HTML select box and some radio buttons." />
<meta name="twitter:description" content="Custom text editing using an HTML select box and some radio buttons." />
<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="Custom Select Box and Radio Button Text Editors for In-Place Editing of Text" />
<meta property="og:title" content="Custom Select Box and Radio Button Text Editors for In-Place Editing of Text" />
<meta name="twitter:title" content="Custom Select Box and Radio Button Text Editors for In-Place Editing of Text" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/customtexteditingtool.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/customtexteditingtool.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/customtexteditingtool.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/customTextEditingTool.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/customTextEditingTool.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Custom Select Box and Radio Button Text Editors for In-Place Editing of Text | 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>
<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() {
myDiagram = new go.Diagram('myDiagramDiv', {
// default text editor is now a SelectBox
'textEditingTool.defaultTextEditor': window.TextEditorSelectBox, // defined in textEditorSelectBox.js
'undoManager.isEnabled': true
});
var brush = new go.Brush(go.BrushType.Linear, { 0: 'rgb(255, 211, 89)', 1: 'rgb(255, 239, 113)' });
myDiagram.nodeTemplate =
new go.Node('Vertical', {
resizable: true,
rotatable: true,
locationSpot: go.Spot.Center
})
.bindTwoWay('location')
.add(
new go.TextBlock({
text: 'Alpha',
editable: true,
font: '32pt Georgia, serif',
background: 'lightblue'
})
.bind('choices'),
new go.TextBlock({
text: 'Beta',
editable: true,
font: '22pt Georgia, serif',
background: 'lightgreen',
scale: 2
})
.bind('choices'),
new go.TextBlock({
text: 'Gamma',
editable: true,
font: '60pt Georgia, serif',
background: 'orangered',
scale: 0.4
})
.bind('choices'),
new 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>
<p>You can see a re-implementation of the default text editors in the <a href="../samples/TextEditor.html">Text Editor extension</a>.</p>
</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>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>