graphdb-workbench/dist/res/graphexplore/keyboard-shortcuts.html

The web application for GraphDB APIs

<div>
    <!-- massively taken from https://github.com/chieffancypants/angular-hotkeys -->
    <button id="keyboardShortcuts" ng-click="toggleCheatSheet()" type="button" class="btn btn-sm btn-secondary">{{'graph.shortcuts.mouse.keyboard' | translate}}</button>
    <div class="hotkeys-container fade" ng-class="{in: shortcutsVisible}">
        <div class="hotkeys">
            <div class="close" ng-click="toggleCheatSheet()"></div>
            <div class="mb-3">
                <h3 class="text-xs-center">{{'graph.shortcuts.mouse.actions' | translate}}</h3>
                <table>
                    <tbody>
                    <tr>
                        <td class="hotkeys-keys">
                            <kbd>{{'graph.shortcuts.single.click' | translate}}</kbd>
                        </td>
                        <td class="hotkeys-text">{{'graph.shortcuts.view.node.details' | translate}}</td>
                    </tr>
                    <tr>
                        <td class="hotkeys-keys">
                            <kbd>{{'graph.shortcuts.double.click' | translate}}</kbd>
                        </td>
                        <td class="hotkeys-text">{{'graph.shortcuts.load.node.connections' | translate}}</td>
                    </tr>
                    <tr>
                        <td class="hotkeys-keys">
                            <kbd>Ctrl/Cmd-click</kbd>
                        </td>
                        <td class="hotkeys-text">{{'graph.shortcuts.remove.node.links' | translate}}</td>
                    </tr>
                    <tr>
                        <td class="hotkeys-keys">
                            <kbd>Ctrl/Cmd-Shift-click</kbd>
                        </td>
                        <td class="hotkeys-text">{{'graph.shortcuts.restart.view.with.node.at.center' | translate}}</td>
                    </tr>
                    <tr>
                        <td class="hotkeys-keys">
                            <kbd>{{'graph.shortcuts.click.drag.node' | translate}}</kbd>
                        </td>
                        <td class="hotkeys-text">{{'graph.shortcuts.move.node.dragging' | translate}}</td>
                    </tr>
                    <tr>
                        <td class="hotkeys-keys">
                            <kbd>{{'graph.shortcuts.right.click.node' | translate}}</kbd>
                        </td>
                        <td class="hotkeys-text">{{'graph.shortcuts.pin.unpin.node' | translate}}</td>
                    </tr>
                    <tr>
                        <td class="hotkeys-keys">
                            <kbd>{{'graph.shortcuts.click.drag.outside.node' | translate}}</kbd>
                        </td>
                        <td class="hotkeys-text">{{'graph.shortcuts.move.whole.graph' | translate}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="mb-3">
            <h3 class="text-xs-center">{{'graph.shortcuts.touch.actions' | translate}}</h3>
            <table>
                <tbody>
                <tr>
                    <td class="hotkeys-keys">
                        <kbd>{{'graph.shortcuts.tap' | translate}}</kbd>
                    </td>
                    <td class="hotkeys-text">{{'graph.shortcuts.view.node.details' | translate}}</td>
                </tr>
                <tr>
                    <td class="hotkeys-keys">
                        <kbd>{{'graph.shortcuts.tap.hold' | translate}}</kbd>
                    </td>
                    <td class="hotkeys-text">{{'graph.shortcuts.remove.node.links' | translate}}</td>
                </tr>
                <tr>
                    <td class="hotkeys-keys">
                        <kbd>{{'graph.shortcuts.tap.twice' | translate}}</kbd>
                    </td>
                    <td class="hotkeys-text">{{'graph.shortcuts.load.node.connections' | translate}}</td>
                </tr>
                </tbody>
            </table>
            </div>
            <div class="mb-3">
                <h3 class="text-xs-center">{{'graph.shortcuts.keyboard.actions' | translate}}</h3>
                <table>
                    <tr>
                        <td class="hotkeys-keys">
                            <kbd>{{'graph.shortcuts.left.arrow' | translate}}</kbd>
                        </td>
                        <td class="hotkeys-text">{{'graph.shortcuts.rotate.graph.left' | translate}}</td>
                    </tr>
                    <tr>
                        <td class="hotkeys-keys">
                            <kbd>{{'graph.shortcuts.right.arrow' | translate}}</kbd>
                        </td>
                        <td class="hotkeys-text">{{'graph.shortcuts.rotate.graph.right' | translate}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>