@nikku, my Bpmn-js version is 16. I would like to use a custom Renderer to overwrite base bpmn shape such as bpmn:ExclusiveGateway
I have custom Rule/Palette successfully,but Renderer is failed.
I found the bpmn-js always use BpmnRenerder.drawShape. Can you kindly help to figure out what’s wrong with my code?
var inherits = require('inherits');
var BpmnRenderer = require('bpmn-js/lib/draw/BpmnRenderer');
var componentsToPath = require('diagram-js/lib/util/RenderUtil').componentsToPath,
createLine = require('diagram-js/lib/util/RenderUtil').createLine;
/**
* A renderer that knows how to render custom elements.
*/
function CustomRenderer(eventBus, styles) {
BpmnRenderer.call(this, eventBus, 3500);
var computeStyle = styles.computeStyle;
this.drawTriangle = function(p, side) {
var halfSide = side / 2,
points,
attrs;
points = [ halfSide, 0, side, side, 0, side ];
attrs = computeStyle(attrs, {
stroke: '#3CAA82',
strokeWidth: 2,
fill: '#3CAA82'
});
return p.polygon(points).attr(attrs);
};
this.getTrianglePath = function(element) {
var x = element.x,
y = element.y,
width = element.width,
height = element.height;
var trianglePath = [
['M', x + width / 2, y],
['l', width / 2, height],
['l', -width, 0 ],
['z']
];
return componentsToPath(trianglePath);
};
this.drawCircle = function(p, width, height) {
var cx = width / 2,
cy = height / 2;
var attrs = computeStyle(attrs, {
stroke: '#4488aa',
strokeWidth: 4,
fill: 'white'
});
return p.circle(cx, cy, Math.round((width + height) / 4)).attr(attrs);
};
this.getCirclePath = function(shape) {
var cx = shape.x + shape.width / 2,
cy = shape.y + shape.height / 2,
radius = shape.width / 2;
var circlePath = [
['M', cx, cy],
['m', 0, -radius],
['a', radius, radius, 0, 1, 1, 0, 2 * radius],
['a', radius, radius, 0, 1, 1, 0, -2 * radius],
['z']
];
return componentsToPath(circlePath);
};
this.drawCustomConnection = function(p, element) {
var attrs = computeStyle(attrs, {
stroke: '#ff471a',
strokeWidth: 2
});
return createLine(element.waypoints, attrs).appendTo(p);
};
this.getCustomConnectionPath = function(connection) {
var waypoints = connection.waypoints.map(function(p) {
return p.original || p;
});
var connectionPath = [
['M', waypoints[0].x, waypoints[0].y]
];
waypoints.forEach(function(waypoint, index) {
if (index !== 0) {
connectionPath.push(['L', waypoint.x, waypoint.y]);
}
});
return componentsToPath(connectionPath);
};
}
inherits(CustomRenderer, BpmnRenderer);
module.exports = CustomRenderer;
CustomRenderer.$inject = [ 'eventBus', 'styles' ];
CustomRenderer.prototype.canRender = function(element) {
return true;
};
CustomRenderer.prototype.drawShape = function(p, element) {
var type = element.type;
if (type === 'bpmn:ParallelGateway') {
return this.drawTriangle(p, element.width);
}
if (type === 'bpmn:ExclusiveGateway') {
return this.drawCircle(p, element.width, element.height);
}
};
CustomRenderer.prototype.getShapePath = function(shape) {
var type = shape.type;
if (type === 'bpmn:ParallelGateway') {
return this.getTrianglePath(shape);
}
if (type === 'bpmn:ExclusiveGateway') {
return this.getCirclePath(shape);
}
};
CustomRenderer.prototype.drawConnection = function(p, element) {
var type = element.type;
if (type === 'custom:connection') {
return this.drawCustomConnection(p, element);
}
};
CustomRenderer.prototype.getConnectionPath = function(connection) {
var type = connection.type;
if (type === 'custom:connection') {
return this.getCustomConnectionPath(connection);
}
};