Preventing viewport reset on reload/refresh of diagram

[david-pa]

I'm creating a VSCode-integrated GLSP project, and I'm working on trying to prevent the GLSP client viewport from reseting it's position/zoom when the diagram is refreshed/reloaded.

I have been trying to implement a draft solution suggested by @tortmayr in this discussion post, but it seems like I can't create an instance of the ReloadModelAction action without triggering an error that prevents my VSCode extension from starting:

2025-07-21 16:35:36.263 [error] /Users/.../repo/.../node_modules/@eclipse-glsp/client/css/autocomplete-palette.css:17
.autocomplete-palette {
^

SyntaxError: Unexpected token '.'

The error seems to be completely out of nowhere, so I could use some assistance.
Here is the setup I'm using (it's very similar to the post linked above):

reload-action-handler.ts

import {
  Action,
  EditorContextService,
  isViewport,
  RequestModelAction,
  SetModelAction,
  SetViewportAction,
  UpdateModelAction,
  Viewport
} from '@eclipse-glsp/client';
import { injectable, inject } from 'inversify';

export interface ReloadModelAction extends Action {
  kind: typeof ReloadModelAction.KIND;
  uri: string;
}

export namespace ReloadModelAction {
  export const KIND = 'reloadModel';

  export function is(action: Action): action is ReloadModelAction {
    return Action.hasKind(action, KIND);
  }

  export function create(options: { uri: string }): ReloadModelAction {
    return {
      kind: KIND,
      uri: options.uri
    };
  }
}

@injectable()
export class ReloadModelActionHandler {
  @inject(EditorContextService)
  protected editorContext: EditorContextService;
  protected cachedViewport?: Viewport;

  handle(action: Action): Action | void {
    if (ReloadModelAction.is(action)) {
      const root = this.editorContext.modelRoot;
      if (isViewport(root)) {
        this.cachedViewport = { scroll: root.scroll, zoom: root.zoom };
      }
      return RequestModelAction.create({ options: { sourceUri: action.uri } });
    } else if ((SetModelAction.is(action) || UpdateModelAction.is(action)) && this.cachedViewport) {
      const viewport = this.cachedViewport;
      this.cachedViewport = undefined;
      return SetViewportAction.create(action.newRoot.id, viewport);
    }
  }
}

index.ts (in GLSP client files)

...
import { WorkspaceUpdateAction } from './vscode/workspace-update-action';
import { ReloadModelAction } from './vscode/reload-action-handler';
...
export class VisualEditorServerLauncher extends GlspSocketServerLauncher {
  ...
}

export class VisualEditorExtensionContext {
  ...
  public refreshDiagram(clientId: string, diagramJsonUri: vscode.Uri) {
    const reloadModelAction = ReloadModelAction.create({ uri: diagramJsonUri.path });
    // tell GLSP to reload the model to render changes made in the text file
    this.glspVscodeConnector.dispatchAction(reloadModelAction, clientId);
  }
}

diagram-module.ts (GLSP client files)

...
const graphEditorModule = new ContainerModule((bind, unbind, isBound, rebind) => {
  ...
  const context = { bind, unbind, isBound, rebind };
  ...
  // setup reload handler
  bind(ReloadModelActionHandler).toSelf().inSingletonScope();
  configureActionHandler(context, ReloadModelAction.KIND, ReloadModelActionHandler);
  configureActionHandler(context, SetModelAction.KIND, ReloadModelActionHandler);
  configureActionHandler(context, UpdateModelAction.KIND, ReloadModelActionHandler);
}
...

As far as I'm aware, there shouldn't be anything preventing me from calling ReloadModelAction.create() in index.ts, and I only see this error when calling .create() with that particular action and not any other ones like calling RequestModelAction.create() directly, so it's got to be related to the handler setup, I'd assume. It seems to me like it's an import issue, possibly.

@tortmayr the post is a little old, so I was wondering if something about the action and its handler might need to be tweaked?

Any help is much appreciated, thank you!

[david-pa]

@tortmayr Just wanted to follow up in case you missed this!

[tortmayr]

Hi @david-pa ,
the problem is that with your current solution you introduce a dependency to "@eclipse-glsp-client" in your vscode extension.
The extension is build in a node environment and you are now loading in browser resources (like .css) files. That"s why the build step then fails.

This works for other GLSP base actions because they are defined in the "@eclipse-glsp/protocol" package which is a common package that can be used in both browser and node environments.

To fix the issue you have to make sure that you don"t import directly from "@eclipse-glsp/browser" in your vscode-extension. Only the webview part should depend on the client directly.

[david-pa]

So, it seems as though all the imports used in reload-action-handler.ts from @eclipse-glsp/client are available in @eclipse-glsp/protocol, except for EditorContextService and isViewport.

If I'm unable to import from @eclipse-glsp-client in this instance, where am I supposed to import those from?

[martin-fleck-at]

You are right, not everything is exported from protocol. Especially the EditorContextService however is not actually protocol material as it heavily relies on the selection and other client-level services.

As far as I can tell, you need to avoid the @eclipse-glsp/client imports from the code where you call ReloadModelAction.create so the best option would be to ensure that the definition/creation of that action are not in the same file (or even package) as the handling of that action which requires the actual client imports. That is one of the reasons, we often split something into a protocol and have the handling somewhere else. Could you give that a try?

[david-pa]

Splitting the action and handler (although I did have to duplicate the action in the handler file just so it could be referenced) got things working! Thanks so much @martin-fleck-at!