Multiple Canvas, element in one canvas as palette for another

Developers General
1

Hi,

Please see the attached GIF:paletteExample

I’m using Diagram JS vanilla to create a custom diagram tool where I want to specify states first, and then use those states in some form of state diagram.

I would like to get some high-level idea of how to best achieve this functionality? Can I have 2 canvases as shown above and then use elements in one canvas as palette item for items in other canvas?

Thanks,
Jay.

2

Hi Jay,

I assume your question relates to the 2 blue containers (predefined states and diagram).

Instead of using 2 containers, you could consider having the 2 sections as the only children of the root element, and everything else as the children on either of those elements. You prevent a lot of headaches of data transfers between 2 diagram-js instances this way.

The pools in BPMN-JS might be loosely related to the behavior you want to achieve.
Recording 2022-02-16 at 11.51.47

3

@Martin

Thanks for the reply. Whilst the example you’ve provided may be an approach I can take - it doesn’t fully answer my query. The key thing here is that in the 1st canvas, you’re able to create a “state” and define it (the Gif creates “state1” and “state2”). In the second canvas - you can only add a state you’ve created in 1st canvas. So - the states defined in Canvas1 become the palette for canvas 2.

In the example shown above - it means that when you drag the element from top lane to bottom lane - you’re not moving the element, but referencing the element defined in top lane.

4

The rules of what can be dropped where has to be done in your business logic. You can use the RulesProvider to define what kind of elements can be dropped on the left an which can be dropped on the right.

What you probably want is:

  • Pallet to left: create Template, forbid dropping on right
  • Left to right: create instance, probably using the dragging API to create the instance at drag start. Use rules to limit dropping to the left.

Is that correct?

5

Hi Martin,

What you’ve suggested could work. Will play around and see where I get to. Thank you for the replies - this gives me some ideas.

Another question - in the simple diagram js editor example (https://github.com/bpmn-io/diagram-js-examples/tree/master/editor) - there is a concept of a “Frame”. Would creating a “Frame Left” and “Frame Right” be a better option than separate canvases in your opinion?

Thanks,
Jay.

6

Glad I can help :slight_smile:

The Frame in the linked repo is an example of an element and have no deeper meaning.
You can create special elements “frame-left” and “frame-right” that can not be created by the user but are just “containers” for other elements. This would absolutely work