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 | (function(window) {
|
19 | |
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | const contextMenuDIV = document.createElement('div');
|
26 | contextMenuDIV.id = 'contextMenuDIV';
|
27 |
|
28 | const cmLight = document.createElement('div');
|
29 | cmLight.id = 'cmLight';
|
30 | cmLight.className = 'goCXforeground';
|
31 | const cmDark = document.createElement('div');
|
32 | cmDark.id = 'cmDark';
|
33 | cmDark.className = 'goCXbackground';
|
34 | contextMenuDIV.appendChild(cmLight);
|
35 | contextMenuDIV.appendChild(cmDark);
|
36 |
|
37 | const cxMenuButtons = [
|
38 | {
|
39 | text: 'Copy',
|
40 | command: (diagram: go.Diagram) => { diagram.commandHandler.copySelection(); },
|
41 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canCopySelection()
|
42 | }, {
|
43 | text: 'Cut',
|
44 | command: (diagram: go.Diagram) => { diagram.commandHandler.cutSelection(); },
|
45 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canCutSelection()
|
46 | }, {
|
47 | text: 'Delete',
|
48 | command: (diagram: go.Diagram) => { diagram.commandHandler.deleteSelection(); },
|
49 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canDeleteSelection()
|
50 | }, {
|
51 | text: 'Paste',
|
52 | command: (diagram: go.Diagram) => { diagram.commandHandler.pasteSelection(diagram.toolManager.contextMenuTool.mouseDownPoint); },
|
53 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canPasteSelection(diagram.toolManager.contextMenuTool.mouseDownPoint)
|
54 | }, {
|
55 | text: 'Select All',
|
56 | command: (diagram: go.Diagram) => { diagram.commandHandler.selectAll(); },
|
57 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canSelectAll()
|
58 | }, {
|
59 | text: 'Undo',
|
60 | command: (diagram: go.Diagram) => { diagram.commandHandler.undo(); },
|
61 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canUndo()
|
62 | }, {
|
63 | text: 'Redo',
|
64 | command: (diagram: go.Diagram) => { diagram.commandHandler.redo(); },
|
65 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canRedo()
|
66 | }, {
|
67 | text: 'Scroll To Part',
|
68 | command: (diagram: go.Diagram) => { diagram.commandHandler.scrollToPart(); },
|
69 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canScrollToPart()
|
70 | }, {
|
71 | text: 'Zoom To Fit',
|
72 | command: (diagram: go.Diagram) => { diagram.commandHandler.zoomToFit(); },
|
73 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canZoomToFit()
|
74 | }, {
|
75 | text: 'Reset Zoom',
|
76 | command: (diagram: go.Diagram) => { diagram.commandHandler.resetZoom(); },
|
77 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canResetZoom()
|
78 | }, {
|
79 | text: 'Group Selection',
|
80 | command: (diagram: go.Diagram) => { diagram.commandHandler.groupSelection(); },
|
81 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canGroupSelection()
|
82 | }, {
|
83 | text: 'Ungroup Selection',
|
84 | command: (diagram: go.Diagram) => { diagram.commandHandler.ungroupSelection(); },
|
85 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canUngroupSelection()
|
86 | }, {
|
87 | text: 'Edit Text',
|
88 | command: (diagram: go.Diagram) => { diagram.commandHandler.editTextBlock(); },
|
89 | isVisible: (diagram: go.Diagram) => diagram.commandHandler.canEditTextBlock()
|
90 | }
|
91 | ];
|
92 |
|
93 | const $ = go.GraphObject.make;
|
94 | const myContextMenu = $(go.HTMLInfo, {
|
95 | show: showContextMenu,
|
96 | hide: hideContextMenu
|
97 | });
|
98 |
|
99 | let firstTime = true;
|
100 |
|
101 | function showContextMenu(obj: go.GraphObject, diagram: go.Diagram, tool: go.Tool) {
|
102 | if (firstTime) {
|
103 |
|
104 | cmLight.addEventListener('contextmenu', (e) => { e.preventDefault(); return false; }, false);
|
105 | cmLight.addEventListener('selectstart', (e) => { e.preventDefault(); return false; }, false);
|
106 | contextMenuDIV.addEventListener('contextmenu', (e) => { e.preventDefault(); return false; }, false);
|
107 |
|
108 | contextMenuDIV.addEventListener('click', (e) => { diagram.currentTool.stopTool(); return false; }, false);
|
109 | firstTime = false;
|
110 | }
|
111 |
|
112 |
|
113 | cmLight.innerHTML = '';
|
114 |
|
115 | const ul = document.createElement('ul');
|
116 | cmLight.appendChild(ul);
|
117 |
|
118 | for (let i = 0; i < cxMenuButtons.length; i++) {
|
119 | const button = cxMenuButtons[i];
|
120 | const command = button.command;
|
121 | const isVisible = button.isVisible;
|
122 |
|
123 | if (!(typeof command === 'function')) continue;
|
124 |
|
125 | if (typeof isVisible === 'function' && !isVisible(diagram)) continue;
|
126 | const li = document.createElement('li');
|
127 | const ahref = document.createElement('a');
|
128 | ahref.href = '#';
|
129 | (ahref as any)._command = button.command;
|
130 | ahref.addEventListener('click', (e) => {
|
131 | (ahref as any)._command(diagram);
|
132 | tool.stopTool();
|
133 | e.preventDefault();
|
134 | return false;
|
135 | }, false);
|
136 | ahref.textContent = button.text;
|
137 | li.appendChild(ahref);
|
138 | ul.appendChild(li);
|
139 | }
|
140 |
|
141 |
|
142 | document.body.appendChild(contextMenuDIV);
|
143 | }
|
144 |
|
145 | function hideContextMenu(diagram: go.Diagram, tool: go.Tool) {
|
146 | document.body.removeChild(contextMenuDIV);
|
147 | }
|
148 |
|
149 | (window as any).myHTMLLightBox = myContextMenu;
|
150 | })(window);
|