Hide elements on canvas

Developers
1

Hi,

I have to hide some elements from being displayed to the user. I could delete the gfx of the element. But when I drag a new node to canvas, it errors out.

unhandled error in event listener TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
    at prependTo (GraphicsFactory.js:316:14)

I have tried several ways to delete the gfx. Given below is one of the snippets.

var elementIds = ["sys_error_handling", "sys_error_handling_label"];
  var elementRegistry = bpmnModeler.get('elementRegistry');
  var elementsToHide = elementRegistry.filter(function (element) {
    return elementIds.indexOf(element.id) >= 0;
  });

  forEach(elementsToHide, function (element) {
    var gfx = elementRegistry.getGraphics(element);
    var parentElement = gfx.parentNode;
    while (parentElement?.firstChild) {
      parentElement?.removeChild(parentElement?.firstChild);
      console.log('Removed');
    }
});

I also tried this piece of code. This removes the element on initial load. Now when i drag a new node to canvas, the removed node appears. I also tried to listen to the shape.created event and execute the same piece of code, but no luck.

var graphicsFactory = bpmnModeler.get('graphicsFactory');
  forEach(elementsToHide, function (element) {
    graphicsFactory.remove(element);
   } );

Now when I added elementRegistry.remove(element); also, it started erroring out on dragging new node.

Any help in this regard will be highly appreciated.

2

This seems to be working now. Looking for a better approach as the elements are still somewhere available. When I drag/drop an element in the area where these elements were present, the removed elements become visible.

var graphicsFactory = bpmnModeler.get('graphicsFactory');
  forEach(elementsToHide, function (element) {
    graphicsFactory.remove(element);
    var gfx = elementRegistry.getGraphics(element);
    var visual = getVisual(gfx);
    domClear(visual);
  });