113 lines
4.3 KiB
HTML
113 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Text Editing Examples</title>
|
|
<meta name="description" content="Custom text editing using different HTML elements." />
|
|
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
|
|
<meta charset="UTF-8">
|
|
<script src="../release/go.js"></script>
|
|
<!-- custom text editors -->
|
|
<script src="../extensions/TextEditorSelectBox.js"></script>
|
|
<script src="../extensions/TextEditorRadioButtons.js"></script>
|
|
|
|
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
|
|
<script id="code">
|
|
function init() {
|
|
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
|
|
var $ = go.GraphObject.make;
|
|
|
|
myDiagram = $(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", "loc"),
|
|
$(go.TextBlock,
|
|
{ text: "Alpha",
|
|
editable: true,
|
|
font: "32pt Georgia, serif",
|
|
areaBackground: "lightblue" },
|
|
new go.Binding("choices")),
|
|
$(go.TextBlock,
|
|
{ text: "Beta",
|
|
editable: true,
|
|
font: "22pt Georgia, serif",
|
|
areaBackground: "lightgreen",
|
|
scale: 2 },
|
|
new go.Binding("choices")),
|
|
$(go.TextBlock,
|
|
{ text: "Gamma",
|
|
editable: true,
|
|
font: "60pt Georgia, serif",
|
|
areaBackground: "orangered",
|
|
scale: 0.4 },
|
|
new go.Binding("choices")),
|
|
$(go.TextBlock,
|
|
{ text: "One",
|
|
editable: true,
|
|
font: "bold 16pt Arial, Helvetica, sans-serif",
|
|
areaBackground: 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'], loc: new go.Point(250,150) },
|
|
{key: 2, choices: ['Alpha', 'Beta', 'Gamma', 'Theta'], loc: new go.Point(50,50) }
|
|
],
|
|
[
|
|
{ from: 1, to: 2 }
|
|
]);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<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>
|
|
</body>
|
|
</html>
|