1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | import * as go from '../release/go-module.js';
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | ((window) => {
|
18 |
|
19 | const customText = document.createElement('div');
|
20 | customText.id = 'customTextEditor';
|
21 | customText.style.cssText = 'border: 1px solid black; background-color: white;';
|
22 | customText.innerHTML =
|
23 | ' <label for="One">One</label> <input type="radio" name="group1" id="One" value="One"> <br/>' +
|
24 | ' <label for="Two">Two</label> <input type="radio" name="group1" id="Two" value="Two"> <br/>' +
|
25 | ' <label for="Three">Three</label> <input type="radio" name="group1" id="Three" value="Three"> <br/>' +
|
26 | ' <label for="Four">Four</label> <input type="radio" name="group1" id="Four" value="Four">';
|
27 | const customEditor = new go.HTMLInfo();
|
28 | customEditor.show = (textBlock, diagram, tool) => {
|
29 | if (!(textBlock instanceof go.TextBlock))
|
30 | return;
|
31 | const startingValue = textBlock.text;
|
32 |
|
33 | customText.innerHTML = '';
|
34 | let list = textBlock.choices;
|
35 |
|
36 | if (list === null)
|
37 | list = ['Default A', 'Default B', 'Default C'];
|
38 | let l = list.length;
|
39 | for (let i = 0; i < l; i++) {
|
40 | const value = list[i];
|
41 | const label = document.createElement('label');
|
42 | const input = document.createElement('input');
|
43 | label.htmlFor = value;
|
44 | label.textContent = value;
|
45 | input.type = 'radio';
|
46 | input.name = 'group1';
|
47 | input.id = value;
|
48 | input.value = value;
|
49 | customText.appendChild(label);
|
50 | customText.appendChild(input);
|
51 | if (i !== l - 1)
|
52 | customText.appendChild(document.createElement('br'));
|
53 | }
|
54 |
|
55 | const children = customText.children;
|
56 | l = children.length;
|
57 | for (let i = 0; i < l; i++) {
|
58 | const child = children[i];
|
59 | if (!(child instanceof HTMLInputElement))
|
60 | continue;
|
61 |
|
62 | if (child.value === startingValue) {
|
63 | child.checked = true;
|
64 | }
|
65 |
|
66 | customText.addEventListener('change', (e) => {
|
67 | tool.acceptText(go.TextEditingTool.Tab);
|
68 | }, false);
|
69 | }
|
70 |
|
71 | customText.addEventListener('keydown', (e) => {
|
72 | const key = e.key;
|
73 | if (key === "Enter") {
|
74 | tool.acceptText(go.TextEditingTool.Enter);
|
75 | return;
|
76 | }
|
77 | else if (key === "Tab") {
|
78 | tool.acceptText(go.TextEditingTool.Tab);
|
79 | e.preventDefault();
|
80 | return false;
|
81 | }
|
82 | else if (key === "Escape") {
|
83 | tool.doCancel();
|
84 | if (tool.diagram)
|
85 | tool.diagram.focus();
|
86 | }
|
87 | }, false);
|
88 | const loc = textBlock.getDocumentPoint(go.Spot.TopLeft);
|
89 | const pos = diagram.transformDocToView(loc);
|
90 | customText.style.left = pos.x + 'px';
|
91 | customText.style.top = pos.y + 'px';
|
92 | customText.style.position = 'absolute';
|
93 | customText.style.zIndex = (100).toString();
|
94 | if (diagram.div !== null)
|
95 | diagram.div.appendChild(customText);
|
96 | };
|
97 | customEditor.hide = (diagram, tool) => {
|
98 | if (diagram.div !== null)
|
99 | diagram.div.removeChild(customText);
|
100 | };
|
101 |
|
102 |
|
103 |
|
104 | customEditor.valueFunction = () => {
|
105 | const children = customText.children;
|
106 | const l = children.length;
|
107 | for (let i = 0; i < l; i++) {
|
108 | const child = children[i];
|
109 | if (!(child instanceof HTMLInputElement))
|
110 | continue;
|
111 | if (child.checked) {
|
112 | return child.value;
|
113 | }
|
114 | }
|
115 | return '';
|
116 | };
|
117 | window.TextEditorRadioButtons = customEditor;
|
118 | })(window);
|