Create Palette with custom update function

Hello everyone,

I am trying to create a Palette with headlines for the groups in addition to separators. I found the update function that creates the separators and that I would need to edit. I also found this example about creating a custom Palette.

What I’m struggling with is to put those two together. My initial thought was to take the custom palette from the example project and instead of having a custom getPaletteEntries-Function use a custom update-Function. But taking the getPaletteEntries-Function out results in an error that it is missing (I would expect it to use the default function). Moreover, the update function is never called.

How would I go about overriding the update function for the Palette?

Hi,

when setting up your CustomPalette (following along the example) you can override the _update function:

...

export default class CustomPalette {
  constructor(create, elementFactory, palette, translate) {
    this.create = create;
    this.elementFactory = elementFactory;
    this.translate = translate;

    palette.registerProvider(this);

    palette._update = function () {
      // ...
    }
  }

  getPaletteEntries(element) {
    // ...
  }
}

...

Also see this thread.

1 Like

Be aware that dealing with any _ prefixed methods is dangerous business. These are not part of the public API and may change without notice.

As an alternative, you could simply replace the palette all together. As long as you stay API-compatible to the existing palette, it does not matter if you provide the palette or of the stock palette is used:

// extend existing palette
class SpecialPalette extends Palette {

}

// override palette module
export default {
  'palette': [ 'type', SpecialPalette ]
};

Alternative, roll your own, API compatible palette and you can do whatever you want:

// provide palette which is API compatible
class SpecialPalette {
  registerProvider(...) { ... }

  ...
}

// override palette module
export default {
  'palette': [ 'type', SpecialPalette ]
};