Move Diagram to (0,0) Position

Users
1

Hey guys.

Would be a cool nice feature if there is a small tool to “move” a diagram
to start at 0,0 level (upper left). The reason is that this is not always
easy to move it to 0,0 (as the highest point might be somewhere on the
right in a large process and it is hard to directly hit the 0 line) – but
if you want to include BPMN diagrams e.g. in documentation ng bpmn.io
later on it is nice that you do not waste any space in the upper left
area.

Cheers

Bernd

2

One solution would be the ability to snap to (0, 0) during move. The other solution would be the alignment tool.

We accept extensions for this ;-).

3

But with both options you cannot select all elements of a diagram – when I
tried to move all elements at once I did not get a snap line – and the
alignment tool would destruct the existing model layout. Or did I miss
something?

4

Select All will be possible in the next release via CTRL+A.

Does that solve the issue already?

5

Selecting all is not the problem – after selecting I cannot get the whole
junk to 0,0 (or I did not understand how). I just can move everything
selected manually and try to get it on the upper and left 0 manually (which
is more or less successful depending on my eye, the zoom, the process model,
the current train track resulting in more or less bumps, …).

6

Any short cut you would suggest for this feature?

7

Nope. I always forget shortcuts anyway – so I need a button or a proper help
panel – but don’t care about the concrete letter. That’s why I use
TortoiseGit instead of command line :slight_smile:

8

I would give this a +1 - but: I also have the issue that the toolbar hides part of models which open at the (0,0) position. Which brings me to the follow-up question: shouldn’t the (0,0) position itself show up at this position by default?

9

I have done this in my customization. Take a look.

After hitting the Reset Canvas –

10

Hi, if I want to add a reset Canvas button like you, what should I do? Thanks in advance!!
@Sudharsan_R

11

Pls do these changes -

In node_modules/diagram-js/lib/core/Canvas.js

//Reset Canvas
Canvas.prototype.resetCanvas = function (){
  this._changeViewbox(function() {
    setCTM(this._viewport.node,{a:"1",b:"0",c:"0",d:"1",e:"0",f:"0"});
  });
}

In node_modules/bpmn-js/lib/Viewer.js

Viewer.prototype.resetCanvas = function() {
  var canvas = this.get('canvas');
  canvas.resetCanvas();
}

In app.js

/* Reset Canvas Scroll */
function resetCanvas(){
  bpmnModeler.resetCanvas();
}

//In
$(document).on('ready', function() {
//Add
  $('#js-reset-canvas').click(function(e) {
    e.stopPropagation();
    e.preventDefault();

    resetCanvas();
  });

index.html

                <li id="reset-canvas"><a id="js-reset-canvas" href>Reset Canvas</a></li>
12

The solution is posted in the below thread. You can accept if it comforms to your product.

13

It’s works, thank u for your help and your patience !

14

I am trying to figure out how to move the (0, 0) position just like you so that whenever the bpmn diagram wouldn’t go under the plattlet whenever i call .zoom(‘fit-viewport’).

Do you have any Idea how i can do that ?

15

Hi

I am trying to implement this feature but I get this error below when the reset link is clicked:
Note: I am using bmpn-js prebuilt v0.20.5 so the changes to Canvas and Viewer were done in file “bpmn-modeler.js” in the right places.

Do you have any idea about the source of is error?

Canvas.js:839 Uncaught TypeError: Cannot read property ‘setAttribute’ of undefined
at setCTM (Canvas.js:839)
at Canvas. (Canvas.js:222)
at Canvas._changeViewbox (Canvas.js:658)
at Canvas.resetCanvas (Canvas.js:221)
at Modeler.Viewer.resetCanvas (Viewer.js:152)
at resetCanvas (modeler.js:15)
at HTMLAnchorElement. (modeler.js:23)
at HTMLAnchorElement.dispatch (jquery-3.1.0.js:5110)
at HTMLAnchorElement.elemData.handle (jquery-3.1.0.js:4918)

1 Like