I tried nyan bpmn example


#1

On the palette, it well looks like the nyan.
but from the time i drag, the shape looks like the type i specified(bpmn:ServiceTask), not the cat.

i dragging, it do not go through the candRender and drawShape api parts of my custom renderer source.

help me


#2

What exactly did you try? Where did you get stuck?


#3

I tried exactly the same as the nyan example.
but its do not work as i want.

import inherits from 'inherits';

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';

import {
  is
} from 'bpmn-js/lib/util/ModelUtil';


import {
  componentsToPath,
  createLine
} from 'diagram-js/lib/util/RenderUtil';

import {
  append as svgAppend,
  attr as svgAttr,
  create as svgCreate
} from 'tiny-svg';



/**
 * A renderer that knows how to render custom elements.
 */
  export default function CustomRenderer(eventBus, styles) {

  BaseRenderer.call(this, eventBus, 1500);

  this.candRender = function(element) {
    return is(element, 'bpmn:Task');
  };

  this.drawShape = function(parent, shape) {
    let url = 'data:image/gif;base64,R0lG..'

    let gfx = svgCreate('image', {
      x: 0,
      y:0,
      width: shape.width,
      height: shape.height,
      href: url
    });

    svgAppend(parent, gfx);

    return gfx;
  }
}

inherits(CustomRenderer, BaseRenderer);
CustomRenderer.$inject = [ 'eventBus' ];

i coded above code,

export default {
  __init__: [
    'CustomRenderer',
    'PaletteProvider',
    'customRules',
    'customUpdater',
    'contextPadProvider',
    'ElementFactory'
  ],
  ElementFactory: [ 'type', CustomElementFactory ],
  CustomRenderer: [ 'type', CustomRenderer ],
  PaletteProvider: [ 'type', CustomPalette ],
  customRules: [ 'type', customRules ],
  customUpdater: [ 'type', customUpdater ],
  contextPadProvider: [ 'type', customContextPadProvider ]
};

I registered, but this do not work.

49


#4

You got a typo here. It should be canRender.


#5

wow…
I did not know that.
thank you