How to configure the columns for djs-palette

We have embedded bpmn-io into our application and the djs-palette is always two-column. I found this in the code:

  if ('twoColumn' in state) {
    twoColumn = state.twoColumn;
  } else {
    twoColumn = this._needsCollapse(parent.clientHeight, this._entries || {});
  }

  // always update two column
  cls.toggle(PALETTE_TWO_COLUMN_CLS, twoColumn);
  parentCls.toggle(PALETTE_PREFIX + PALETTE_TWO_COLUMN_CLS, twoColumn);

How can we configure that to e.g. turn off two-column mode? I guess we need to define state.twoColumn = false somewhere, but I couldn’t find any example that shows how to provide state values. Does anyone around here know, how that works?

Hi,

Unfortunately, I couldn’t find any way to configure this feature. So with the current state of the library, you could change it via subclassing the original palette and passing tweaked state to the _toggleState method:

import Palette from 'diagram-js/lib/features/palette/Palette.js';

export const CustomPaletteModule = {
  __init__: [ 'palette' ],
  palette: [ 'type', CustomPalette ]
};

class CustomPalette extends Palette {
  _toggleState(state) {

    // force single-column layout
    return super._toggleState({ ...state, twoColumn: false });
  }
}

Note that _toggleState is a private method so this solution is likely to break with the future releases.

Feel free also to file a feature request on the configuration feature.

Thanks @barmac for your reply. I had already filed a feature request at How to configure the columns for djs-palette · Issue #629 · bpmn-io/diagram-js · GitHub and they asked me to move that to the forums as they felt it should better be handled here.
Also, it looks like the example at Modeler | BPMN Token Simulation Demo is somehow using the one column layout but I wasn’t able to figure out, how they’ve achieved it there.

OK I see :slight_smile: I think you were redirected to the forums because the issue was more like a question “how do I do configure the palette” and not a request to implement some functionality “I want to configure the palette but there is no API for that”. Please use our feature request template to create valid issues.

Also, it looks like the example at Modeler | BPMN Token Simulation Demo is somehow using the one column layout but I wasn’t able to figure out, how they’ve achieved it there.

The way palette works at the moment is that it adapts to the container size. If the container’s height is too low to fit a single-column palette, it will use the two-column layout. So to achieve the single-column layout in your application, you should either increase the container’s height or resolve to the solution I provided previously. You can also check out the source code to read the exact algorithm.

The container height was something I had in mind too, but it looks like that mechanic doesn’t work. At least, this screen looks like there is not much more on how we could enhance the height:

But thanks for the other clarifications, we’ll follow up on them accordingly.

1 Like