Storing the current position of the Viewport

[jmenzies12]

Hey there,

I am looking to save the current position of the viewport, I assumed initially that the GGraph position would be what I was looking for but from debugging it doesn't look like it changes. Essentially when our source model changes, we trigger a RequestModelAction in order to add any new nodes etc. The problem is that when this happens the viewport resets back to the center instead of staying where the user originally had it.

We are using node-server with the vscode-integration.

Cheers
Jonathan

[tortmayr]

Hi @jmenzies12,

to achieve this you need to fetch the current viewport data from the model before sending the RequestModelAction and restore it afterwards.
Assuming you are dispatching the RequestModelAction on the client side you could implement a custom action handler.
Here is an (untested) draft of how this could look like:

export interface ReloadModelAction extends Action {
    kind: typeof ReloadModelAction.KIND;
    options?: Args;
}

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

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

    export function create(options?: Args): ReloadModelAction {
        return {
            kind: KIND,
            options
        };
    }
}

@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: action.options });
        } else if ((SetModelAction.is(action) || UpdateModelAction.is(action)) && this.cachedViewport) {
            const viewport = this.cachedViewport;
            this.cachedViewport = undefined;
            return SetViewportAction.create(action.newRoot.id, viewport);
        }
    }
}

Then configure the custom handler in your diagram module:

const context = { bind, unbind, rebind, isBound };
bind(ReloadModelActionHandler).toSelf().inSingletonScope();
configureActionHandler(context, ReloadModelAction.KIND, ReloadModelActionHandler);
configureActionHandler(context, SetModelAction.KIND, ReloadModelActionHandler);
configureActionHandler(context, UpdateModelAction.KIND, ReloadModelActionHandler);

[jmenzies12]

Thanks @tortmayr, currently our RMA is being sent from the server in our SourceModelStorage implementation but after looking into your solution and a few other issues we've been having I am going to move that to dispatch it in the client via the vscode connector.

Will comment again if/when I finish and test the implementation.

[jmenzies12]

Yep worked perfectly, thanks again