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