How to add canvas horizontal and vertical scrolling

Developers
1

Hi,

How to add horizontal and vertical scrolling in canvas if diagram overflow. Many thanks

Kind Regards,
Waq

2

Hi,

Please, have a look at this discussion for details.

For more technical insight, check ZoomScroll module.

Thanks,
Vladimir

3

I did this for my implementation. Depends on your requirement.

Canvas.js

function createContainer(options) {

options = assign({}, { width: ‘100%’, height: ‘400px’ }, options);

** //options = assign({}, { width: ‘100%’, height: '100% }, options);**

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

// create a

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

assign(parent.style, {
position: ‘relative’,
overflow: ‘scroll’,
backgroundColor: “white”,

Canvas.prototype._init = function(config) {

var eventBus = this._eventBus;

var container = this._container = createContainer(config),

//svg = this._svg = Snap.createSnapAt(‘100%’, ‘100%’, container),

** svg = this._svg = Snap.createSnapAt(‘10000’, ‘10000’, container),**

2 Likes
4

Thank you very much!!!

5

Hi Sudharsan_R,

  • Now, i want to split tool into one container, and split editor into one container as you did. Could you help me about this? thanks.

Regards,
Hung

6

define an id in index.html and hook the panel to the id instead of bjs-container.

7

Hi Sudhanrsan_R,

  • Thank you very much, i will try to do this.

Regards,
Hung

8

Hi Sudarshan_R,

I am very new to BPMN.IO , was going through all the questions/reply on forum.

I have a requirement : add our elements in flow diagram instead of existing default elements in BPMN.IO flow diagram.
In your diagram i can see you have added your custom canvas elements . Could you please help me how to add own elements to BPMN work flow.

9

Hello Sudharsan_R,
I 'm trying to split the diagram and the palette into separate two containers, Could you please share the code source of your implementation so it could give me some insight.
My personal email: dgouissem@gmail.com
kind regards,

10

Can you send me your project please?
dgouissem@gmail.com

Thanks in advance

11

Hi Sudharsan_R,
I have been searching for from long time can you please share the code to my mail.That will be very much helped to me.
Email : venkateshprasad.mummidi@gmail.com