Code Review: tik/proxy-view (#86)

* Added a minimal example for creating UI Extensions so future students have an easier start * Init proxy-view * Added action to send model + context to whoever needs it; got it to work so far using a symbol for ProxyViewUI * Added some comments * added notes still TODO * Renamed ProxyViewUI to ProxyView for consistency * . * Fixed watch, remember to revert for final merge * Some more notes * Removed deprecated and explore proxy options * Made the overlay seemingly work * Refactored code and added renderProxy() * Fixed stackoverflow * Some logic + exploring nodes. TODO: depthmap affects clone * Added TODOs and got the depthmap to mostly work * Added click-through potential and fixed when proxies are rendered * Created Cool Coordinate Calculation * Handled non-explicitly specified regions * Fixed renderingDefs getting lost * Implemented caching rendered nodes * Implemented caching for coordinates and vnodes, latter still TODO * Prevented proxies from being rendered behind the sidebar * Refactored code * Some code to change proxy size, still TODO * Added id method * Small fixes because of merge * Lots of refactoring, isConnected() filter, mostly fixed renderings cache * Started using the panel and added category functionality to renderingOptions * Just some comments * Made ProxyViewCategory a singleton * Added more sidebar stuff and proxy size calculations TODO * Fixed size calculation * Started working on clustering + refactored code * Continued working on clustering * Upgraded clustering to use groups of indices * Implemented capping to parent node * Simplification * Added clustering, some TODOs and an option to enable cascading clustering * Added getClusterRendering() method * Updated clustering, cannot test because quota is reached * Some clustering fixes, outsourced vnode transform updates, added a new option * Added weights for clustering clusters + outsourced cascading clustering * Updated cluster rendering + added a property to the API * Added a debug mode * Minor changes and some TODOs * Refactored code for code review * Code review mka * Started implementing sweep line for clustering * checkOverlap() mka feedback * Code review nre * Added a jsx cluster rendering * Fixed a bug concerning cluster IDs + outsourced anyContains() * Put debug options into their own category * Started implementing a distance filter * Finished calculations for isInRange() * Allowed RenderOptions to be choice options and added choices for filterDistant * Added code to highlight proxies connected to the selected node * Prepared the declaration of independence * Signed the declaration of independence * nre code review * Added a much needed method + refactoring * Synthesis proxy-renderings now work + options + UpdateModel should work * Cleaned up * Added k-meeting notes * Added a connected to selected filter * Added getNodeByID() and started fixing selected nodes * Implemented a SelectUtil and fixed selection filtering/highlighting * Minor method outsourcing * Implemented stacking order and started working on opacity by distance * Implemented opacity by selected, fixed some bugs and found new ones :) * Fixed SelectedElementsUtil bugs and added an option to allow transparent clusters * Added notes * Generalized getElementByID() and SelectUtil + implemented mouse interactions * Lots of stuff + still fixing an annoying bug * Added a TODO * Small test * Verified ids cause the bug, still have to find the reason for duplicate ids * Fixed cluster positioning + decorator placement, still no fix for edge proxy errors yet * Workaround for edge id bug * Implemented a detail level option * Slight refactoring, next up: outsourcing generic functions + filter API * Outsourced stuff to util + some reworks * Handled RenderingRefs in decorator placement + started angle * Fixed id bug, edges where drawn between proxies * Started working on the filter API. Bug: this is undefined * Improved the filter API * Fixed arrow head angle + new stacking order criteria * Comments * Implemented zooming out if necessary on click * Generalization + double click tests * It wasn't * Proxies are no longer influenced by smart zoom * Removed unnecessary multiplication * Implemented title scaling for proxies * Removed redundant title scaling * Notes * mka code review * Fixed proxy title scaling * Forgot to push implementation of transparent edges + moved cap to parent to debug * mka transparent clusters documentation * minor note * Started working on along-edge-routing * Along-edge-routing, still TODO * Some more work on along-edge-routing * Identified bugs, have to be fixed later * Implemented capToCanvas() with offset, still working on along-edge * Fixed order * Along-edge-routing now works for the first point * Potentially finished along-edge-routing, need a good example + code could use some clean up * Temp commit * Fixed some along-border stuff + started working on original edge fade out * add filter evaluation logic * update filtering interface * or connective now correctly evaluates using || * fix type checking so that cases are evaluated correctly * Adjusted overlay edge scale + hierarchical depth API * add documentation for filters * Fixed overlay positioning, changing color still TODO * Started with connecting off-screen edges * Connector proxies hopefully mostly done * Added some notes for later * Could potentially swap frame of reference, simplifying some stuff * Commit before removing useless stuff in case it's not useless * Added TODO notes * Started using translated canvas + fixed dire typo in distance calculation * Tried around a bit with getTransform(), non-translated canvas may be better because of sidebar * Brought order to all that translation stuff * Temp commit to not lose code, will be deleted soon * Election pledges were kept * Finished connector edges * Temp commit to save getIntersection() offset * Undid temp commit * Fixed linter stuff * Added support for semantic filters * Actually undid the temp commit * Implemented unregistering in sidebar + proxy-view filters * Temp commit for keeping previous option value * Undid temp commit * Added connectives * Added numeric connectives to semantic filtering. Should mostly work * Fixed documentation * Added some notes on three-valued logic struggles * Overlay precedence + offset relative to canvas * Convenient canvas constructor * Added some TODOs * Outsourced along border routing and added to connectors * Improved along-border-routing by traversing the original path as much as possible * This should have been part of previous commit * Consistent connector offset * Removed redundant names * Code review and default values for semantic filtering * semantic filtering specifics * Temp commit for an animation using scaling. Opacity animations may work better * First easy opacity animation. Still has problems * add true, false and id connectives * remove empty interface * make num not optional * put evaluation logic into separate namespaces * fix missing returns * add >=, <=, != numeric connectives * add numeric connectives * rename numeric connectives * Added the option to show proxies early * Moved inline-comments to previous line (thx to mka & jpe) * Small documentation clarification * Temp commit for TODOs * fix evaluate numeric for tags * make numeric to bool connectives binary * add numeric constant * change let to const * Added proxy scaling by original node + simple along-border-routing suggested by mka * New filter * Implemented immediately showing a proxy (potential future work) * Cleanup * Finalized the sidebar * Add debug option for disabling caches * Hacky debug option for exporting diagram + proxy-view in current zoom + scroll * Revert "Hacky debug option for exporting diagram + proxy-view in current zoom + scroll" This reverts commit 9bb79d2. * Slight adjustment to capNumber() * Option default fixes + documentation * Documentation * Documentation + simplification * Rename render for clarification * Fixed kpolygon colors * Cleanup for PR * Changes for sprotty 12. * more changes for Sprotty 0.12 * proxy-view: updated some filtering/options * add type narrowing methods * remove filter from filter names * renaming and typos * reorder class fields and methods * refactor names for clarity * cap proxies to edge of sidebar if it is locked open * refactor function * typo * update opacity calculation * update method docs * tidy up docstrings * newline at end of file * renaming for clarity * revert packagae json * add missing method docs * update remaining references to LRF to use GRF instead * make interactible proxies debug option * build: fixed the watch command * some documentation and hide private API * use method isContainerRendering * add explanation to CRF and GRF * feature: render options may now be debug options, which can be enabled via command pallette in VS Code / manual cache modification in CLI and turned of by turning off the corresponding debug option. * changed proxy edges to have the same scaling as they would have in the usual rendering. * embrace and document the hacky proxy decorator solution. * simplified and improved selection bookkeeping for proxies. * removed magic string * negated inside proxy filter for routing points * replaced some unicode characters * clean up mouse, hover, and action handling for proxies and some miscellaneous. Proxies now support hover feedback and actions defined on them. * correct docstring * rename proxy-view category display string * makes synthesis defined filters visible again and fixes an error in the filter evaluation * clarify titles of filters * resolve errors * Move settings to debug category Set sensible defaults for proxy view and hide certain settings as debug options. * Make checkboxes positive action Checkboxes for the structural proxy filters now signify that certain proxies are enabled rather than hidden when the checkbox is ticked. * Invert interpretation of semantic filters * further prettier fixes * fixed the dispatchAction command * shifted more options to debug --------- Co-authored-by: stu215592 <[email protected]> Co-authored-by: Max Kasperowski <[email protected]> Co-authored-by: Niklas Rentz <[email protected]> Co-authored-by: Soeren Domroes <[email protected]> Co-authored-by: Max Kasperowski <[email protected]>
kieler · Feb 29, 2024 · 9548698 · 9548698
1 parent 81ba1cd
commit 9548698
Show file tree

Hide file tree

Showing 40 changed files with 5,748 additions and 129 deletions.
diff --git a/applications/klighd-vscode/README.md b/applications/klighd-vscode/README.md
@@ -24,8 +24,7 @@ while the KLighD extension handles everything related to diagrams.
 ### Disclaimer
 
 Developing a language server for your extension that uses [KLighD](https://github.com/kieler/KLighD)
-to fulfill all requirements to be usable with this extension is no easy task. Until the distribution
-of [KLighD](https://github.com/kieler/KLighD) and documentation about building your own language
+to fulfill all requirements to be usable with this extension is no easy task. Until the documentation about building your own language
 server is improved, feel free to seek advice from a member of the KIELER working group.
 
 An example for a simple language server with KLighD synthesis support can be found
@@ -51,22 +50,16 @@ The VS Code extension for this language server can be found
 export async function activate(context: vscode.ExtensionContext) {
     // ... configuring the language client options
 
-    const lsClient = new LanguageClient("Language Server", serverOptions, clientOptions);
+    const lsClient = new LanguageClient('Language Server', serverOptions, clientOptions)
 
     // Inform the KLighD extension about the LS client.
     // The first argument is your language client.
     // The second argument is an array of language file endings
     // that are supported by your LS client.
-    // Returns an ID that is used to identify this extension when future
-    // commands are sent to klighd-vscode.
-    const refId = await vscode.commands.executeCommand(
-        "klighd-vscode.setLanguageClient",
-        lsClient,
-        ["sctx"]
-    );
-
-    console.debug("Starting Language Server...");
-    lsClient.start();
+    await vscode.commands.executeCommand('klighd-vscode.setLanguageClient', lsClient, ['sctx'])
+
+    console.debug('Starting Language Server...')
+    lsClient.start()
 }
 ```
 
@@ -109,7 +102,7 @@ To intercept an action, your extension has to provide an action handler with the
 signature:
 
 ```typescript
-type ActionHandler = (action: { kind: string }) => Promise<void>;
+type ActionHandler = (action: { kind: string }) => Promise<void>
 ```
 
 To register your action handler with the `klighd-vscode` extension call the following command:
@@ -121,18 +114,16 @@ vscode.commands.executeCommand("klighd-vscode.addActionHandler", kind: string, h
 ```
 
 ### Dispatching Actions
-*This feature is currently not supported*
 
-The KLighD diagram extension provides the ability to send an action to all open diagram views that
-belong to the host extension. The action will be handled by the diagram core and potentially sent to
+The KLighD diagram extension provides the ability to send an action to the open diagram view that
+belongs to the host extension. The action will be handled by the diagram core and potentially sent to
 the language server if it is handled that way.
 
 To send an action to a `klighd-vscode` webview, execute the following command:
 
 ```typescript
-// - refId: your registration id returned from the setLanguageClient command
 // - action: a valid Sprotty action that is sent to open diagram views.
-vscode.commands.executeCommand("klighd-vscode.dispatchAction", refId: string, action: Action);
+vscode.commands.executeCommand("klighd-vscode.dispatchAction", action: Action)
 ```
 
 ## Known Issues
@@ -141,5 +132,4 @@ vscode.commands.executeCommand("klighd-vscode.dispatchAction", refId: string, ac
     the same time. This causes problems if a workspace opens multiple files that are handled by
     different KLighD dependent extensions. This issue is tracked
     [here](https://github.com/kieler/klighd-vscode/issues/6).
--   Exported SVG are currently not displayed properly. This issue is tracked
-    [here](https://github.com/eclipse/sprotty/issues/149).
+-   See [here](https://github.com/kieler/klighd-vscode/issues) for further issues.
diff --git a/applications/klighd-vscode/package.json b/applications/klighd-vscode/package.json
@@ -35,6 +35,11 @@
                 "icon": "$(clear-all)",
                 "category": "KLighD Diagram"
             },
+            {
+                "command": "klighd-vscode.debugOptions",
+                "title": "Activate Debug Options",
+                "category": "KLighD Diagram"
+            },
             {
                 "command": "klighd-vscode.diagram.open",
                 "title": "Open in Diagram",
@@ -89,6 +94,9 @@
                 {
                     "command": "klighd-vscode.data.clear"
                 },
+                {
+                    "command": "klighd-vscode.debugOptions"
+                },
                 {
                     "when": "false",
                     "command": "klighd-vscode.diagram.open"

diff --git a/applications/klighd-vscode/src-webview/persistence-storage.ts b/applications/klighd-vscode/src-webview/persistence-storage.ts
@@ -25,6 +25,7 @@ import { PersistenceMessage } from '../src/storage/messages'
  * so they can be stored in workspace storage.
  */
 export class MessagePersistenceStorage implements PersistenceStorage {
+    /** The VS Code messenger to send messages to the extension. */
     messenger: Messenger
 
     /** Local cache of reported data to speed up reads. */

diff --git a/applications/klighd-vscode/src/constants.ts b/applications/klighd-vscode/src/constants.ts
@@ -44,6 +44,7 @@ export const command = {
     addActionHandler: withPrefix('addActionHandler'),
     dispatchAction: withPrefix('dispatchAction'),
     clearData: withPrefix('data.clear'),
+    debugOptions: withPrefix('debugOptions'),
     // The following commands are registered by `sprotty-vscode`
     diagramOpen: withPrefix('diagram.open'),
     diagramExport: withPrefix('diagram.export'),

diff --git a/applications/klighd-vscode/src/extension.ts b/applications/klighd-vscode/src/extension.ts
@@ -14,10 +14,13 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-// reflect-metadata needs to be the first import. Don't sort this elsewhere!
+// reflect-metadata needs to be imported before anything else to make any code requiring inversify.js to work.
+// See https://stackoverflow.com/questions/37534890/inversify-js-reflect-hasownmetadata-is-not-a-function
 import 'reflect-metadata'
+// The other imports.
+import { DebugOptions, SetRenderOptionAction } from '@kieler/klighd-core'
 import { diagramType } from '@kieler/klighd-core/lib/base/external-helpers'
-import { Action, isAction } from 'sprotty-protocol'
+import { Action, ActionMessage, isAction } from 'sprotty-protocol'
 import { registerLspEditCommands } from 'sprotty-vscode'
 import * as vscode from 'vscode'
 import { LanguageClient, State } from 'vscode-languageclient/node'
@@ -140,12 +143,17 @@ export function activate(context: vscode.ExtensionContext): void {
                 )
                 return
             }
-            // TODO: this has not been tested yet if the messenging change works like this.
-            messenger.sendNotification(
-                { method: 'diagram/accept' },
-                { type: 'webview', webviewType: diagramType },
-                action
-            )
+            messenger.sendNotification({ method: 'ActionMessage' }, { type: 'webview', webviewType: diagramType }, {
+                clientId: `${diagramType}_sprotty`,
+                action,
+            } as ActionMessage)
+        })
+    )
+
+    // Command to show debug options.
+    context.subscriptions.push(
+        vscode.commands.registerCommand(command.debugOptions, () => {
+            vscode.commands.executeCommand(command.dispatchAction, SetRenderOptionAction.create(DebugOptions.ID, true))
         })
     )
 }

diff --git a/packages/klighd-core/src/actions/action-listener.ts b/packages/klighd-core/src/actions/action-listener.ts
@@ -14,12 +14,13 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
+import { SKGraphElement } from '@kieler/klighd-interactive/lib/constraint-classes'
 import { MouseListener, SModelElementImpl } from 'sprotty'
 import { Action } from 'sprotty-protocol'
-import { KAction, ModifierState, SKGraphElement, Trigger } from '../skgraph-models'
+import { KAction, ModifierState, Trigger, isSKGraphElement } from '../skgraph-models'
 import { findRendering, getSemanticElement } from '../skgraph-utils'
 import { PerformActionAction } from './actions'
-/* global MouseEvent, WheelEvent */
+/* global MouseEvent, SVGElement, WheelEvent */
 
 /**
  * Mouse listener handling KLighD actions that can be defined on SKGraphElements in the model.
@@ -30,7 +31,7 @@ export class ActionListener extends MouseListener {
     doubleClick(target: SModelElementImpl, event: WheelEvent): (Action | Promise<Action>)[] {
         // Ignore the event if the top level graph element is clicked, as that is not a SKGraphElement.
         if (target.type !== 'graph') {
-            return this.actions(target as SKGraphElement, event, event.type)
+            return ActionListener.actions(target as SKGraphElement, event, event.type)
         }
         return []
     }
@@ -47,8 +48,8 @@ export class ActionListener extends MouseListener {
 
     mouseUp(target: SModelElementImpl, event: MouseEvent): (Action | Promise<Action>)[] {
         // counts as a click if the mouse has not moved since the last mouseDown event.
-        if (!this.mouseMoved && target.type !== 'graph' && target.type !== 'NONE') {
-            return this.actions(target as SKGraphElement, event, 'click')
+        if (!this.mouseMoved && isSKGraphElement(target)) {
+            return ActionListener.actions(target, event, 'click')
         }
         return []
     }
@@ -59,17 +60,16 @@ export class ActionListener extends MouseListener {
      * @param event The MouseEvent that triggered this listener.
      * @param eventType The event type of the event (e.g. 'dblclk', 'clk', etc.).
      */
-    protected actions(target: SKGraphElement, event: MouseEvent, eventType: string): (Action | Promise<Action>)[] {
+    static actions(target: SKGraphElement, event: MouseEvent, eventType: string): (Action | Promise<Action>)[] {
         const actions: Action[] = []
         // Look up the ID of the semantic element that was clicked.
         const semanticElement = getSemanticElement(target, event.target, true)
         if (semanticElement === undefined) {
             return actions
         }
-        const semanticElementId = semanticElement.id
 
         // Search the actions in the target element.
-        const kActions = this.findActions(target, semanticElementId)
+        const kActions = this.findActions(target, semanticElement)
 
         if (kActions === undefined) {
             return actions
@@ -83,7 +83,7 @@ export class ActionListener extends MouseListener {
                 this.eventsMatch(event, eventType, action.trigger)
             ) {
                 actions.push(
-                    PerformActionAction.create(action.actionId, target.id, semanticElementId, target.root.revision)
+                    PerformActionAction.create(action.actionId, target.id, semanticElement.id, target.root.revision)
                 )
             }
         })
@@ -93,10 +93,10 @@ export class ActionListener extends MouseListener {
     /**
      * Finds the actions defined in the SKGraphElement in its rendering with the given ID.
      * @param element The SKGraphElement to look in.
-     * @param id The ID of the KRendering within that SKGraphElement.
+     * @param svgElement The SVG rendering representation with a rendering ID to match the actions against.
      */
-    protected findActions(element: SKGraphElement, id: string): KAction[] {
-        const rendering = findRendering(element, id)
+    static findActions(element: SKGraphElement, svgElement: SVGElement): KAction[] {
+        const rendering = findRendering(element, svgElement)
         if (rendering) {
             return rendering.actions
         }
@@ -108,7 +108,7 @@ export class ActionListener extends MouseListener {
      * @param state The modifier state to match against.
      * @param pressed The actual key pressed value.
      */
-    private modifierStateMatches(state: ModifierState, pressed: boolean) {
+    static modifierStateMatches(state: ModifierState, pressed: boolean): boolean {
         switch (state) {
             case ModifierState.DONT_CARE: {
                 return true
@@ -132,7 +132,7 @@ export class ActionListener extends MouseListener {
      * @param eventType The eventType of that MouseEvent
      * @param trigger The trigger to check against.
      */
-    protected eventsMatch(event: MouseEvent, eventType: string, trigger: Trigger): boolean {
+    static eventsMatch(event: MouseEvent, eventType: string, trigger: Trigger): boolean {
         switch (trigger) {
             case Trigger.SINGLECLICK: {
                 return eventType === 'click' && event.button === 0

diff --git a/packages/klighd-core/src/actions/actions.ts b/packages/klighd-core/src/actions/actions.ts
@@ -16,8 +16,9 @@
  */
 // We follow Sprotty's way of redeclaring the interface and its create function, so disable this lint check for this file.
 /* eslint-disable no-redeclare */
-import { ExportSvgAction, RequestExportSvgAction } from 'sprotty'
+import { ExportSvgAction, RequestExportSvgAction, SGraphImpl } from 'sprotty'
 import { Action, FitToScreenAction, generateRequestId, RequestAction, ResponseAction } from 'sprotty-protocol'
+import { SKGraphModelRenderer } from '../skgraph-model-renderer'
 import { KImage } from '../skgraph-models'
 
 /**
@@ -155,6 +156,25 @@ export namespace KlighdFitToScreenAction {
     }
 }
 
+/** Contains the model and RenderingContext to be sent from the view to where it's needed. */
+export interface SendModelContextAction extends Action {
+    kind: typeof SendModelContextAction.KIND
+    model: SGraphImpl
+    context: SKGraphModelRenderer
+}
+
+export namespace SendModelContextAction {
+    export const KIND = 'sendModelContextAction'
+
+    export function create(model: SGraphImpl, context: SKGraphModelRenderer): SendModelContextAction {
+        return {
+            kind: KIND,
+            model,
+            context,
+        }
+    }
+}
+
 /**
  * Extended {@link RequestExportSvgAction} to create a request action of a {@link KlighdExportSvgAction}.
  */

diff --git a/packages/klighd-core/src/depth-map.ts b/packages/klighd-core/src/depth-map.ts
@@ -15,13 +15,13 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import { KGraphElement, KNode } from '@kieler/klighd-interactive/lib/constraint-classes'
+import { KNode, SKGraphElement } from '@kieler/klighd-interactive/lib/constraint-classes'
 import { SChildElementImpl, SModelRootImpl } from 'sprotty'
 import { Point, Viewport } from 'sprotty-protocol'
 import {
-    RenderOptionsRegistry,
     FullDetailRelativeThreshold,
     FullDetailScaleThreshold,
+    RenderOptionsRegistry,
 } from './options/render-options-registry'
 import { isContainerRendering, isRendering, KRendering } from './skgraph-models'
 
@@ -42,7 +42,7 @@ type DetailWithChildren = DetailLevel.FullDetails
 /**
  * Type predicate to determine whether a DetailLevel is a DetailWithChildren level
  */
-function isDetailWithChildren(detail: DetailLevel): detail is DetailWithChildren {
+export function isDetailWithChildren(detail: DetailLevel): detail is DetailWithChildren {
     return detail === DetailLevel.FullDetails
 }
 
@@ -146,14 +146,15 @@ export class DepthMap {
      * Returns the current DepthMap instance or returns a new one.
      * @param rootElement The model root element.
      */
-    public static init(rootElement: SModelRootImpl): void {
+    public static init(rootElement: SModelRootImpl): DepthMap {
         if (!DepthMap.instance) {
             // Create new DepthMap, when there is none
             DepthMap.instance = new DepthMap(rootElement)
         } else if (DepthMap.instance.rootElement !== rootElement) {
             // Reset and reinitialize if the model changed
             DepthMap.instance.reset(rootElement)
         }
+        return DepthMap.instance
     }
 
     /**
@@ -162,7 +163,7 @@ export class DepthMap {
      * @param element The KGraphElement to initialize for DepthMap usage
      */
     public initKGraphElement(
-        element: SChildElementImpl & KGraphElement,
+        element: SChildElementImpl & SKGraphElement,
         viewport: Viewport,
         renderingOptions: RenderOptionsRegistry
     ): RegionIndexEntry {
@@ -244,7 +245,7 @@ export class DepthMap {
      * @param element The graph element to look up the rendering for.
      * @returns The KRendering.
      */
-    findRendering(element: KGraphElement): KRendering | undefined {
+    findRendering(element: SKGraphElement): KRendering | undefined {
         for (const data of element.data) {
             if (data !== null && isRendering(data)) {
                 return data
@@ -254,7 +255,7 @@ export class DepthMap {
     }
 
     public getContainingRegion(
-        element: SChildElementImpl & KGraphElement,
+        element: SChildElementImpl & SKGraphElement,
         viewport: Viewport,
         renderOptions: RenderOptionsRegistry
     ): Region | undefined {

diff --git a/packages/klighd-core/src/di.config.ts b/packages/klighd-core/src/di.config.ts
@@ -32,6 +32,7 @@ import {
     ModelRendererFactory,
     modelSourceModule,
     ModelViewer,
+    MouseTool,
     overrideViewerOptions,
     PreRenderedElementImpl,
     PreRenderedView,
@@ -50,11 +51,13 @@ import diagramPieceModule from './diagram-pieces/diagram-pieces-module'
 import { KlighdDiagramServer } from './diagram-server'
 import { KlighdHoverMouseListener } from './hover/hover'
 import { PopupModelProvider } from './hover/popup-provider'
+import { KlighdMouseTool } from './klighd-mouse-tool'
 import { KlighdSvgExporter } from './klighd-svg-exporter'
 import { KlighdModelViewer } from './model-viewer'
 import { ResetPreferencesAction, SetPreferencesAction } from './options/actions'
 import { optionsModule } from './options/options-module'
 import { PreferencesRegistry } from './preferences-registry'
+import { proxyViewModule } from './proxy-view/proxy-view-module'
 import { sidebarModule } from './sidebar'
 import { SKGraphModelRenderer } from './skgraph-model-renderer'
 import { EDGE_TYPE, LABEL_TYPE, NODE_TYPE, PORT_TYPE, SKEdge, SKLabel, SKNode, SKPort } from './skgraph-models'
@@ -76,6 +79,8 @@ const kGraphDiagramModule = new ContainerModule(
             defaultDuration: 500,
             undoHistoryLimit: 50,
         })
+        rebind(MouseTool).to(KlighdMouseTool)
+        bind(KlighdMouseTool).toSelf().inSingletonScope()
         bind(TYPES.MouseListener).to(KlighdHoverMouseListener)
         bind(TYPES.IPopupModelProvider).to(PopupModelProvider)
         rebind<HoverState>(TYPES.HoverState).toDynamicValue(() => ({
@@ -134,7 +139,8 @@ export default function createContainer(widgetId: string): Container {
         sidebarModule,
         kGraphDiagramModule,
         updateDepthMapModule,
-        /* bookmarkModule, */ diagramPieceModule
+        /* bookmarkModule, */ diagramPieceModule,
+        proxyViewModule
     )
     // FIXME: bookmarkModule is currently broken due to wrong usage of Sprotty commands. action handling needs to be reimplemented for this to work.
     overrideViewerOptions(container, {