integration with the latest elkjs

[kchobantonov]

Hi All,

working on making the workflow example to work entirely on the browser and so far everything work except for the auto layout that is based on elkjs

instead of using configureELKLayoutModule from '@eclipse-glsp/layout-elk'; I had to copy that code and include it in my code base so that I can change this section

const elkFactory: ElkFactory = () =>
  new ElkConstructor({
    algorithms: options.algorithms,
    defaultLayoutOptions: options.defaultLayoutOptions,
    workerFactory: () =>
      new Worker(
        new URL(
          '../../node_modules/elkjs/lib/elk-worker.min.js',
          import.meta.url,
        ),
        {
          type: 'classic',
        },
      ),
  });

This made that work when I use vite with dev mode but when I do a production build then this is not working since this is hitting this issue kieler/elkjs#96 which should be fixed in 0.7.3-dev and above but when I change the used version 0.7.1 to either 0.7.3-dev or to the latest my typescript compiler complain about incompatible types.

Krasirmir

[martin-fleck-at]

Hi @kchobantonov,

Could you describe your setup a little bit more and what error are you getting exactly? Are the types actually incompatible between those versions? We have encountered similar problems of getting elk.js properly running when packaging it as a VS Code extension and running it in Theia (#1238). Our overall goal is to update it to the latest version (#1313) but I think packaging it in a custom setting (e.g., Vite) may always require some special handling so we'll try to make it as configurable as possible.

[kchobantonov]

hm ok I believe it was probably because of the pnpm and how the dependencies were managed - I have added .npmrc file with the following content

shamefully-hoist=true

to make the pnpm behaves more like npm and yarn and now with dependency to

 "elkjs": "^0.9.3"

I do not get the typescript error of incompatible types anymore - and my vite + vue3 + vuetify3 and glsp app is working with auto layout as well. I my glsp server version of the browser/app.ts (the file in the workflow example) I had to copy and paste the whole code for configureELKLayoutModule from @eclipse-glsp/layout-elk and then only change the elkFactory to this

    const elkFactory: ElkFactory = () =>
      new ElkConstructor({
        algorithms: options.algorithms,
        defaultLayoutOptions: options.defaultLayoutOptions,
        workerFactory: () =>
          new Worker(
            new URL(
              '../../../../node_modules/elkjs/lib/elk-worker.min.js',
              import.meta.url,
            ),
            {
              type: 'classic',
            },
          ),
      });

with the following import of the ElkConstructor

import ElkConstructor from 'elkjs/lib/elk-api';

The only thing that I didn't like is the relative path

 '../../../../node_modules/elkjs/lib/elk-worker.min.js',

because depending on the pnpm hosting - for example if I remove the

shamefully-hoist=true

then the location of the elkjs package will change and I need to adjust the path

[tortmayr]

I know that @Sakrafux was also working on integrating GLSP in a browser-only context and provided a PR to make or elkjs integration work in the browser context. Maybe this solution also works for your usecase.

[kchobantonov]

It didn't work for me although it is saying that the code of the webworker is included into the bundled version when I tried to invoke the functionality nothing happens - when I change the code as above then it is all working fine using

 "elkjs": "^0.9.3"

[kchobantonov]

closing this discussion as I have the solution how to fix that issue now as suggested above.