BPMN Swimlanes with NON automatic layouting

We’re still evaluating goJS before purchasing a license, so I’m pretty new to goJS. Don’t shoot me if I’m asking a silly question :) :)

Online example: http://gojs.azurewebsites.net/

We’re trying to achieve BPMN swimlanes with NO automatic layouting inside the lanes. Inside the lanes everything should be user-draggable. (and be saved as the user intended it)

In the example URL above you can clearly see what I mean. In the HTML source, I explicitely set the X and Y of “Blok 3” to a high value (http://prntscr.com/5rz9qm). Yet the node is positioned entirely left in the swimlane.

I already tried playing with the properties isInitial, isOngoing (Layout on group template) and isLayoutPositioned (Nodes), alas, to no avail.

Any ideas?

I think your swimlanes (i.e. Groups) are using Placeholders. You are also using the custom StackLayout as the Diagram.layout, which is changing the size and position of each of the swimlanes/groups.

I suspect that you want to go to an interactive experience more like the Planogram sample: http://gojs.net/latest/samples/planogram.html. Is that true? If so, note that the Groups there do not use Placeholders, so that they can be individually sized and positioned independently of their member nodes and links. Although moving a Group does move its member Nodes, moving a Node just leaves it where it is, and there are no restrictions on where Nodes may be dragged.

They are using placeholders indeed. Copied exactly from the swim lanes example. (http://gojs.net/latest/samples/swimlanes.html)

My lanes themselves are beahaving as I want them to be. (so NOT like the planogram sample)
But I want to position the blocks INSIDE the swimlanes completely free.

  • I can do that with the mouse
  • But when i press the save button, and then the load button you'll see that the blocks will automatically align left in the lane.

It’s only the automatic aligning that I don’t want… I want to be able to save the position of the blocks in the lanes, exactly as the user positioned them by dragging…

I think you probably don’t want to use a Placeholder. I suspect that the Placeholder is being positioned at the top-left corner of the area bounded by the Shape, as determined by the StackLayout.

You have already removed the setting of Group.layout, which I think is correct for your app.
So I think you need to change the StackLayout too. Instead of inheriting from GridLayout and depending on it to position the Groups, you should explicitly compute the sizes and positions of each Group. It’s a bit busy, so I can’t implement this for you right now.

No problem, thanks for the effort so far.

I am trying without the placeholder now. Getting closer…

See the updated example:

  • initial loading of the model works. The Y value of 30 for "Blok 3" works perfectly... (Y value is relative to the top of the swimlane)
  • But when I press the save button, the Y value of that block being saved is 281. relative from the top of the diagram. (see http://prntscr.com/5scvs2 )
  • So when I load the saved values again, it uses the 281, but now relative again from the top of the swimlane, so the "Blok 3"moves way down the diagram then... ( http://prntscr.com/5scwki )
(You you can reproduce easily in the online example. Just press "save" and then "load"...)

Almost there :)

Yes, that appears to be due to the custom “StackLayout” still being a GridLayout.

Hmmm. Tried some things without the StackLayout being a GridLayout. But can’t figure out how to make the lanes being dependant on each other. (resizing one lange --> moving the other lanes with it, so they keep attached to each other)

Some pointers in that regard?

The point of using GridLayout is so that the Groups/lanes are automatically moved (along with their member nodes, of course) so that there is a fixed (zero) space between them.

I do not understand what you want to happen when users move member nodes around or resize groups.

Well, I want the groups themselves to behave as in the example of the swimlanes…

But the user should be able to move the nodes (blocks) around, inside the lanes, completely free, even across swimlanes… (as I showed in the previous posts/examples)

So, as far as the swimlanes are concerned, a GridLayout would be perfect. But this ruins the layout of the blocks inside the lanes… (as shown in the last example)

So I finally got some time to work on this. Try this modified swimlanes sample: [EDIT: now a standard sample that does have a Placeholder] Swim Lanes. The Group template does NOT have a Placeholder and does NOT have a Group.layout. The custom Diagram Layout is correspondingly different.

Seems exactly what we need!

Thanks for the support!

Hi there,
Could you please share the solution to this again??

Thanks in advance!

Whatever had been there has been superseded by:

That sample also has additional features not present in the older version of the sample.

Thanks for the fast reply! So I guess there is no vertical support anymore?

Here’s a link to a variation that is vertically oriented: Swim Lanes (vertical)

The old sample was getting hard to read/understand trying to do both orientations.