Modeler and Viewer

[newUser]

Hello,

My index.js

import BpmnModeler from 'bpmn-js/lib/Modeler';

...

var bpmnModeler = new BpmnModeler({
  container: '#js-canvas',
  propertiesPanel: {
    parent: '#js-properties-panel'
  }, ...
})

var bpmnViewer = new BpmnModeler.NavigatedViewer({
  container,
  keyboard: {
    bindTo: document
  }
})

bpmnViewer.importXML(diagramXML, function (err, warnings) {
  const overlays = bpmnViewer.get("overlays");
  const canvas = bpmnViewer.get("canvas")

  canvas.zoom('fit-viewport');
  overlays.add("Process_1",'note', {
    position: { bottom: 0, right: 0 },
    html: "<div class=\"diagram-note\">HELLOOOOOOOO</div>"
  });
});

How can I use both Modeler and Viewer? I have seen some Topics on the forum but they didnt help me. With my Code I get to see this

but the Palette doesnt work anymore I cannot drag any element. What am I doing wrong?

[beatriz.mendes]

You are using the viewer when importing the diagram. The viewer is read-only. If you want to allow diagram editing/modeling then you need to use the modeler (bpmnModeler.importXML(...)).

[newUser]

Okey this worked with bpmnModeler thanks! How can I add overlays to tasks so that when the user selects a task from the palette he can add a comment if he wants in the overlay?

[beatriz.mendes]

Please check out the overlays example here. If you have any issues, please create a dedicated topic for it.