chore(renderer): extract BpmnRenderer utilities into util

Closes #731
This commit is contained in:
felixlinker 2017-12-01 14:45:54 +01:00 committed by Nico Rehwaldt
parent e9eb9e374a
commit 36a12396fd
3 changed files with 257 additions and 144 deletions

162
lib/draw/BpmnRenderUtil.js Normal file
View File

@ -0,0 +1,162 @@
'use strict';
var every = require('lodash/collection/every'),
some = require('lodash/collection/some');
var componentsToPath = require('diagram-js/lib/util/RenderUtil').componentsToPath;
///////// element utils /////////////////////////////
/**
* Checks if eventDefinition of the given element matches with semantic type.
*
* @return {boolean} true if element is of the given semantic type
*/
function isTypedEvent(event, eventDefinitionType, filter) {
function matches(definition, filter) {
return every(filter, function(val, key) {
// we want a == conversion here, to be able to catch
// undefined == false and friends
/* jshint -W116 */
return definition[key] == val;
});
}
return some(event.eventDefinitions, function(definition) {
return definition.$type === eventDefinitionType && matches(event, filter);
});
}
module.exports.isTypedEvent = isTypedEvent;
function isThrowEvent(event) {
return (event.$type === 'bpmn:IntermediateThrowEvent') || (event.$type === 'bpmn:EndEvent');
}
module.exports.isThrowEvent = isThrowEvent;
function isCollection(element) {
var dataObject = element.dataObjectRef;
return element.isCollection || (dataObject && dataObject.isCollection);
}
module.exports.isCollection = isCollection;
function getDi(element) {
return element.businessObject.di;
}
module.exports.getDi = getDi;
function getSemantic(element) {
return element.businessObject;
}
module.exports.getSemantic = getSemantic;
/////// color access ////////////////////////////////////////
function getFillColor(element, defaultColor) {
return getDi(element).get('bioc:fill') || defaultColor || 'white';
}
module.exports.getFillColor = getFillColor;
function getStrokeColor(element, defaultColor) {
return getDi(element).get('bioc:stroke') || defaultColor || 'black';
}
module.exports.getStrokeColor = getStrokeColor;
/////// cropping path customizations /////////////////////////
function getCirclePath(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);
}
module.exports.getCirclePath = getCirclePath;
function getRoundRectPath(shape, borderRadius) {
var x = shape.x,
y = shape.y,
width = shape.width,
height = shape.height;
var roundRectPath = [
['M', x + borderRadius, y],
['l', width - borderRadius * 2, 0],
['a', borderRadius, borderRadius, 0, 0, 1, borderRadius, borderRadius],
['l', 0, height - borderRadius * 2],
['a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, borderRadius],
['l', borderRadius * 2 - width, 0],
['a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, -borderRadius],
['l', 0, borderRadius * 2 - height],
['a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -borderRadius],
['z']
];
return componentsToPath(roundRectPath);
}
module.exports.getRoundRectPath = getRoundRectPath;
function getDiamondPath(shape) {
var width = shape.width,
height = shape.height,
x = shape.x,
y = shape.y,
halfWidth = width / 2,
halfHeight = height / 2;
var diamondPath = [
['M', x + halfWidth, y],
['l', halfWidth, halfHeight],
['l', -halfWidth, halfHeight],
['l', -halfWidth, -halfHeight],
['z']
];
return componentsToPath(diamondPath);
}
module.exports.getDiamondPath = getDiamondPath;
function getRectPath(shape) {
var x = shape.x,
y = shape.y,
width = shape.width,
height = shape.height;
var rectPath = [
['M', x, y],
['l', width, 0],
['l', 0, height],
['l', -width, 0],
['z']
];
return componentsToPath(rectPath);
}
module.exports.getRectPath = getRectPath;

View File

@ -3,21 +3,30 @@
var inherits = require('inherits'),
isObject = require('lodash/lang/isObject'),
assign = require('lodash/object/assign'),
forEach = require('lodash/collection/forEach'),
every = require('lodash/collection/every'),
some = require('lodash/collection/some');
forEach = require('lodash/collection/forEach');
var BaseRenderer = require('diagram-js/lib/draw/BaseRenderer'),
TextUtil = require('diagram-js/lib/util/Text'),
DiUtil = require('../util/DiUtil');
var getBusinessObject = require('../util/ModelUtil').getBusinessObject,
is = require('../util/ModelUtil').is;
var is = require('../util/ModelUtil').is;
var RenderUtil = require('diagram-js/lib/util/RenderUtil');
var createLine = require('diagram-js/lib/util/RenderUtil').createLine;
var componentsToPath = RenderUtil.componentsToPath,
createLine = RenderUtil.createLine;
var BpmnRenderUtil = require('./BpmnRenderUtil');
var isTypedEvent = BpmnRenderUtil.isTypedEvent,
isThrowEvent = BpmnRenderUtil.isThrowEvent,
isCollection = BpmnRenderUtil.isCollection,
getDi = BpmnRenderUtil.getDi,
getSemantic = BpmnRenderUtil.getSemantic;
var getCirclePath = BpmnRenderUtil.getCirclePath,
getRoundRectPath = BpmnRenderUtil.getRoundRectPath,
getDiamondPath = BpmnRenderUtil.getDiamondPath,
getRectPath = BpmnRenderUtil.getRectPath,
getFillColor = BpmnRenderUtil.getFillColor,
getStrokeColor = BpmnRenderUtil.getStrokeColor;
var domQuery = require('min-dom/lib/query');
@ -1806,139 +1815,3 @@ BpmnRenderer.prototype.getShapePath = function(element) {
return getRectPath(element);
};
///////// helper functions /////////////////////////////
/**
* Checks if eventDefinition of the given element matches with semantic type.
*
* @return {boolean} true if element is of the given semantic type
*/
function isTypedEvent(event, eventDefinitionType, filter) {
function matches(definition, filter) {
return every(filter, function(val, key) {
// we want a == conversion here, to be able to catch
// undefined == false and friends
/* jshint -W116 */
return definition[key] == val;
});
}
return some(event.eventDefinitions, function(definition) {
return definition.$type === eventDefinitionType && matches(event, filter);
});
}
function isThrowEvent(event) {
return (event.$type === 'bpmn:IntermediateThrowEvent') || (event.$type === 'bpmn:EndEvent');
}
function isCollection(element) {
var dataObject = element.dataObjectRef;
return element.isCollection || (dataObject && dataObject.isCollection);
}
function getDi(element) {
return element.businessObject.di;
}
function getSemantic(element) {
return element.businessObject;
}
/////// cropping path customizations /////////////////////////
function getCirclePath(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);
}
function getRoundRectPath(shape, borderRadius) {
var x = shape.x,
y = shape.y,
width = shape.width,
height = shape.height;
var roundRectPath = [
['M', x + borderRadius, y],
['l', width - borderRadius * 2, 0],
['a', borderRadius, borderRadius, 0, 0, 1, borderRadius, borderRadius],
['l', 0, height - borderRadius * 2],
['a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, borderRadius],
['l', borderRadius * 2 - width, 0],
['a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, -borderRadius],
['l', 0, borderRadius * 2 - height],
['a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -borderRadius],
['z']
];
return componentsToPath(roundRectPath);
}
function getDiamondPath(shape) {
var width = shape.width,
height = shape.height,
x = shape.x,
y = shape.y,
halfWidth = width / 2,
halfHeight = height / 2;
var diamondPath = [
['M', x + halfWidth, y],
['l', halfWidth, halfHeight],
['l', -halfWidth, halfHeight],
['l', -halfWidth, -halfHeight],
['z']
];
return componentsToPath(diamondPath);
}
function getRectPath(shape) {
var x = shape.x,
y = shape.y,
width = shape.width,
height = shape.height;
var rectPath = [
['M', x, y],
['l', width, 0],
['l', 0, height],
['l', -width, 0],
['z']
];
return componentsToPath(rectPath);
}
function getFillColor(element, defaultColor) {
var bo = getBusinessObject(element);
return bo.di.get('fill') || defaultColor || 'white';
}
function getStrokeColor(element, defaultColor) {
var bo = getBusinessObject(element);
return bo.di.get('stroke') || defaultColor || 'black';
}

View File

@ -0,0 +1,78 @@
'use strict';
require('../../TestHelper');
var BpmnRenderUtil = require('../../../lib/draw/BpmnRenderUtil');
describe('BpmnRenderUtil', function() {
it('should expose isTypedEvent', function() {
expect(BpmnRenderUtil.isTypedEvent).to.be.a('function');
});
it('should expose isThrowEvent', function() {
expect(BpmnRenderUtil.isThrowEvent).to.be.a('function');
});
it('should expose isCollection', function() {
expect(BpmnRenderUtil.isCollection).to.be.a('function');
});
it('should expose getDi', function() {
expect(BpmnRenderUtil.getDi).to.be.a('function');
});
it('should expose getSemantic', function() {
expect(BpmnRenderUtil.getSemantic).to.be.a('function');
});
it('should expose getCirclePath', function() {
expect(BpmnRenderUtil.getCirclePath).to.be.a('function');
});
it('should expose getRoundRectPath', function() {
expect(BpmnRenderUtil.getRoundRectPath).to.be.a('function');
});
it('should expose getDiamondPath', function() {
expect(BpmnRenderUtil.getDiamondPath).to.be.a('function');
});
it('should expose getRectPath', function() {
expect(BpmnRenderUtil.getRectPath).to.be.a('function');
});
it('should expose getFillColor', function() {
expect(BpmnRenderUtil.getFillColor).to.be.a('function');
});
it('should expose getStrokeColor', function() {
expect(BpmnRenderUtil.getStrokeColor).to.be.a('function');
});
});