| 1 | /*
|
| 2 | * Copyright (C) 1998-2021 by Northwoods Software Corporation. All Rights Reserved.
|
| 3 | */
|
| 4 | /*
|
| 5 | * This is an extension and not part of the main GoJS library.
|
| 6 | * Note that the API for this class may change with any version, even point releases.
|
| 7 | * If you intend to use an extension in production, you should copy the code to your own source directory.
|
| 8 | * Extensions can be found in the GoJS kit under the extensions or extensionsTS folders.
|
| 9 | * See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
|
| 10 | */
|
| 11 | import * as go from '../release/go-module.js';
|
| 12 | // HTML + JavaScript text editor using an HTML Select Element and HTMLInfo.
|
| 13 | // This file exposes one instance of HTMLInfo, window.TextEditorSelectBox
|
| 14 | // see /samples/customTextEditingTool.html
|
| 15 | // see also textEditorRadioButton.js for another custom editor
|
| 16 | // see also textEditor.html for a re-implementation of the default text editor
|
| 17 | ((window) => {
|
| 18 | const customEditor = new go.HTMLInfo();
|
| 19 | const customSelectBox = document.createElement('select');
|
| 20 | customEditor.show = (textBlock, diagram, tool) => {
|
| 21 | if (!(textBlock instanceof go.TextBlock))
|
| 22 | return;
|
| 23 | // Populate the select box:
|
| 24 | customSelectBox.innerHTML = '';
|
| 25 | let list = textBlock.choices;
|
| 26 | // Perhaps give some default choices if textBlock.choices is null
|
| 27 | if (list === null)
|
| 28 | list = ['Default A', 'Default B', 'Default C'];
|
| 29 | const l = list.length;
|
| 30 | for (let i = 0; i < l; i++) {
|
| 31 | const op = document.createElement('option');
|
| 32 | op.text = list[i];
|
| 33 | op.value = list[i];
|
| 34 | if (list[i] === textBlock.text)
|
| 35 | op.selected = true;
|
| 36 | customSelectBox.add(op);
|
| 37 | // consider also adding the current value, if it is not in the choices list
|
| 38 | }
|
| 39 | // After the list is populated, set the value:
|
| 40 | customSelectBox.value = textBlock.text;
|
| 41 | // Do a few different things when a user presses a key
|
| 42 | customSelectBox.addEventListener('keydown', (e) => {
|
| 43 | const key = e.key;
|
| 44 | if (key === "Enter") { // Accept on Enter
|
| 45 | tool.acceptText(go.TextEditingTool.Enter);
|
| 46 | return;
|
| 47 | }
|
| 48 | else if (key === "Tab") { // Accept on Tab
|
| 49 | tool.acceptText(go.TextEditingTool.Tab);
|
| 50 | e.preventDefault();
|
| 51 | return false;
|
| 52 | }
|
| 53 | else if (key === "Escape") { // Cancel on Esc
|
| 54 | tool.doCancel();
|
| 55 | if (tool.diagram)
|
| 56 | tool.diagram.focus();
|
| 57 | }
|
| 58 | }, false);
|
| 59 | const loc = textBlock.getDocumentPoint(go.Spot.TopLeft);
|
| 60 | const pos = diagram.transformDocToView(loc);
|
| 61 | customSelectBox.style.left = pos.x + 'px';
|
| 62 | customSelectBox.style.top = pos.y + 'px';
|
| 63 | customSelectBox.style.position = 'absolute';
|
| 64 | customSelectBox.style.zIndex = (100).toString(); // place it in front of the Diagram
|
| 65 | if (diagram.div !== null)
|
| 66 | diagram.div.appendChild(customSelectBox);
|
| 67 | customSelectBox.focus();
|
| 68 | };
|
| 69 | customEditor.hide = (diagram, tool) => {
|
| 70 | if (diagram.div !== null)
|
| 71 | diagram.div.removeChild(customSelectBox);
|
| 72 | };
|
| 73 | customEditor.valueFunction = () => customSelectBox.value;
|
| 74 | window.TextEditorSelectBox = customEditor;
|
| 75 | })(window);
|