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 | const customEditor = new go.HTMLInfo();
|
22 |
|
23 | const customSelectBox = document.createElement('select');
|
24 |
|
25 | customEditor.show = (textBlock, diagram, tool) => {
|
26 | if (!(textBlock instanceof go.TextBlock)) return;
|
27 |
|
28 |
|
29 | customSelectBox.innerHTML = '';
|
30 |
|
31 | let list = textBlock.choices;
|
32 |
|
33 | if (list === null) list = ['Default A', 'Default B', 'Default C'];
|
34 | const l = list.length;
|
35 | for (let i = 0; i < l; i++) {
|
36 | const op = document.createElement('option');
|
37 | op.text = list[i];
|
38 | op.value = list[i];
|
39 | if (list[i] === textBlock.text) op.selected = true;
|
40 | customSelectBox.add(op);
|
41 |
|
42 |
|
43 | }
|
44 |
|
45 |
|
46 | customSelectBox.value = textBlock.text;
|
47 |
|
48 |
|
49 | customSelectBox.addEventListener('keydown', (e) => {
|
50 | const key = e.key;
|
51 | if (key === "Enter") {
|
52 | (tool as any).acceptText(go.TextEditingTool.Enter);
|
53 | return;
|
54 | } else if (key === "Tab") {
|
55 | (tool as any).acceptText(go.TextEditingTool.Tab);
|
56 | e.preventDefault();
|
57 | return false;
|
58 | } else if (key === "Escape") {
|
59 | tool.doCancel();
|
60 | if (tool.diagram) tool.diagram.focus();
|
61 | }
|
62 | }, false);
|
63 |
|
64 | const loc = textBlock.getDocumentPoint(go.Spot.TopLeft);
|
65 | const pos = diagram.transformDocToView(loc);
|
66 | customSelectBox.style.left = pos.x + 'px';
|
67 | customSelectBox.style.top = pos.y + 'px';
|
68 | customSelectBox.style.position = 'absolute';
|
69 | customSelectBox.style.zIndex = (100).toString();
|
70 |
|
71 | if (diagram.div !== null) diagram.div.appendChild(customSelectBox);
|
72 | customSelectBox.focus();
|
73 | };
|
74 |
|
75 | customEditor.hide = (diagram, tool) => {
|
76 | if (diagram.div !== null) diagram.div.removeChild(customSelectBox);
|
77 | };
|
78 |
|
79 | customEditor.valueFunction = () => customSelectBox.value;
|
80 |
|
81 | window.TextEditorSelectBox = customEditor;
|
82 | })(window);
|