how to properly hide a diagram

[kchobantonov]

I have a scenario where I'm showing either the glsp graphical editor or the monaco editor that shows the model as JSON. I'm using vue3 only (no vscode/theia) and I use the v-show to either show the diagram editor or to show the monaco editor. The issue that I'm having is that it looks like the Ctrl+C (copy) command does not work in monaco editor when I have the diagram editor on the page (just hidden) . Is there a way to disable any handlers for keyboard events for the whole graphical editor to prevent that or I'm doing something wrong ? So the sample template code looks like

  <v-card height="100%" flat>
    <MonacoEditor
      :config="{
        language: 'json',
      }"
      v-model="jsonModel"
      v-show="appStore.showJson"
    ></MonacoEditor>
    <div style="height: 100%" v-show="!appStore.showJson">
      <div id="sprotty"></div>
    </div>
  </v-card>

If I remove the whole parent div of sprotty then the monaco editor Ctrl+C is working properly

[tortmayr]

Hi @kchobantonov,
sorry for the late reply. Somehow we missed this open question.

I tested this and in general GLSP/sprotty keylisteners are not registered if the diagram is not visible.
However, for the copy & paste functionality a different approach is used. Since SVG does not nativly support the copy event we have to register the copy/paste/cut event listeners on the window. That's why the also trigger if the diagram is hidden.

See https://github.com/eclipse-glsp/glsp-client/blob/09e87efc4f27b3c69a4868c4ee46a7fe1981857d/packages/client/src/features/copy-paste/copy-paste-standalone.ts#L48

That's definitly not ideal for scenarios where the diagram is nested into another application frame and/or is currently not visible.
I will further investigate this to find a suitable workaround/fix.