Override Canvas function to add scroll to Viewer

Developers
1

Hello,

I would like to know how can i override the Canvas function ‘createContainer()’ in order to add scrolling to the viewer.
I tried overriding it but i got the error canvas.getContainer() is not a function.

This is my code:

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;
  }
}

This is my customCanvas file. And then this is the code to initialize the Viewer:

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

I am using Angular.
Any help will be appreciated.

2

Ensure you use proper inheritance:

  • Your custom canvas must inherit via class CustomCanvas extends Canvas
  • You must call the super constructor with the required arguments

You are correct about the way how you inject the custom canvas, overriding the existing one. Note however that we don’t encourage you to perform this kind of monkey patching :wink:.

3

Okay i will try that. But how do you suggest i do it if monkey patching is not encouraged? Is there another way?

4

I wanted to ask what does the ‘scroll’ option on overflow really do? Because after the fix i don’t have any errors anymore and it seems to be working but i don’t really know what changed.