CustomRenderer - how to redraw the model?

sinisa.rudan · May 26, 2020, 6:24pm

How can we update the rendered model?
i.e.
so that the method CustomRenderer:: drawShape() is called again, as it is called after the xml is imported.

It is required for us to enable updating the visualization of the model based on changes coming from an external service.

Niklas_Kiefer · May 27, 2020, 7:23am

The renderer is called whenever an element changed

github.com

bpmn-io/diagram-js/blob/develop/lib/features/change-support/ChangeSupport.js#L54


    var elements = event.elements;

    elements.forEach(function(e) {
      eventBus.fire('element.changed', { element: e });
    });

    graphicsFactory.updateContainments(elements);
  });

  eventBus.on('shape.changed', function(event) {
    graphicsFactory.update('shape', event.element, event.gfx);
  });

  eventBus.on('connection.changed', function(event) {
    graphicsFactory.update('connection', event.element, event.gfx);
  });
}

ChangeSupport.$inject = [
  'eventBus',
  'canvas',

github.com

bpmn-io/diagram-js/blob/develop/lib/core/GraphicsFactory.js#L177


      var childGfx = elementRegistry.getGraphics(child);

      prependTo(childGfx.parentNode, childrenGfx);
    });
  });
};

GraphicsFactory.prototype.drawShape = function(visual, element) {
  var eventBus = this._eventBus;

  return eventBus.fire('render.shape', { gfx: visual, element: element });
};

GraphicsFactory.prototype.getShapePath = function(element) {
  var eventBus = this._eventBus;

  return eventBus.fire('render.getShapePath', element);
};

GraphicsFactory.prototype.drawConnection = function(visual, element) {
  var eventBus = this._eventBus;

So it should be possible to execute it on demand, e.g. by simply updating a shape’s properties

sinisa.rudan · June 3, 2020, 8:57pm

Thanks, yes, I’ve relying on this when changing the element.
Yet, here is the case that this is some dynamic aspect that is drawn over the model when an event is received from the external service
(and for that we don’t want to change any element).

Anyway, we believe that it should be logical to add some method to initiate redrawing.

some workaround for us could be maybe doing some change that is not visible, or doing a small change and then returning it the previous state, or having some hidden element (if hiding is possible) and changing that one …

philippfromme · June 4, 2020, 6:45am

Can you elaborate? What changes are coming in and how would they be reflected visually? bpmn-js has a well defined concept for re-rendering elements after they have changed. Usually you’d not want to mess with this by calling low-level methods.