forked from NorthwoodsSoftware/GoJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcustomTextEditingTool.html
122 lines (114 loc) · 4.59 KB
/
customTextEditingTool.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Editing Examples</title>
<meta name="description" content="Custom text editing using an HTML select box and some radio buttons." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<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>