How to use "additionalModules" of Viewer?

Developers
1

I am trying to cuztomize the Viewer’s canvas. I am trying to do so using the additionalModules of Viewer in a similar fashion that has been done for Modeler, in angular.

But it does not seem to work. I am getting errors like canvas.getContainer ia not a function.
Can anyone help me with this? It’s kind of urgent.

2

Can you share some code so it’s easier to understand what you’re trying to do? Are you trying to replace the canvas?

3 
import * as _Canvas from 'diagram-js/lib/core/canvas.js';

export class CustomCanvas {
  constructor() {

  }

  createContainer(options) {
    options = _Canvas.assign({}, { width: '100%', height: '800px' }, options);

    const container = options.container || document.body;

    // create a <div> around the svg element with the respective size
    // this way we can always get the correct container size
    // (this is impossible for <svg> elements at the moment)
    const parent = document.createElement('div');
    parent.setAttribute('class', 'djs-container');

    _Canvas.assign(parent.style, {
      position: 'relative',
      overflow: 'scroll',
      width: _Canvas.ensurePx(options.width),
      height: _Canvas.ensurePx(options.height)
    });

    container.appendChild(parent);

    return parent;
  }
}

I am trying to override Canvas yes. I created a custom Canvas.
Basically i tried overriding the createContainer() function because i saw somewhere that if you change “hidden” to “scroll” on overflow, your viewer has a scroll.
And then i tried adding it to additionalModules.

Here is how i tried adding it:

const viewer = new Viewer({
      container: '#canvas',
      additionalModules: [
        {'canvas': ['type', CustomCanvas ]}
      ]
    });

I should mention I am using Angular, just in case.

4

This is a duplicate of this thread, right?

5

Yes because nobody was answering. And it’s kinda urgent. So i tried asking in a different way.