sartography
/
bpmn-js
mirror of https://github.com/sartography/bpmn-js.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(graphics): remove snapsvg 

Related to bpmn-io/diagram-js#50
This commit is contained in:
Philipp Fromme 2016-09-14 08:18:56 +02:00 committed by pedesen
parent 2c7aad5e0b
commit db0ce65aa4
12 changed files with 452 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
lib/Viewer.js
View File

@ -15,6 +15,8 @@ var domify = require('min-dom/lib/domify'),
domQuery = require('min-dom/lib/query'),
domRemove = require('min-dom/lib/remove');
var innerSVG = require('tiny-svg/lib/innerSVG');
var Diagram = require('diagram-js'),
BpmnModdle = require('bpmn-moddle');
@ -230,10 +232,10 @@ Viewer.prototype.saveSVG = function(options, done) {
var canvas = this.get('canvas');
var contentNode = canvas.getDefaultLayer(),
defsNode = canvas._svg.select('defs');
defsNode = domQuery('defs', canvas._svg);
var contents = contentNode.innerSVG(),
defs = (defsNode && defsNode.outerSVG()) || '';
var contents = innerSVG(contentNode),
defs = (defsNode && defsNode.outerHTML) || '';
var bbox = contentNode.getBBox();

576
lib/draw/BpmnRenderer.js
View File

File diff suppressed because it is too large Load Diff

32
lib/draw/PathMap.js
View File

@ -1,7 +1,5 @@
'use strict';
var Snap = require('diagram-js/vendor/snapsvg');
/**
* Map containing SVG paths needed by BpmnRenderer.
*/
@ -438,7 +436,7 @@ function PathMap() {
}
//Apply value to raw path
var path = Snap.format(
var path = format(
rawPath.d, {
mx: mx,
my: my,
@ -450,3 +448,31 @@ function PathMap() {
}
module.exports = PathMap;
////////// helpers //////////
// copied from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js
var tokenRegex = /\{([^\}]+)\}/g,
objNotationRegex = /(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g; // matches .xxxxx or ["xxxxx"] to run over object properties
function replacer(all, key, obj) {
var res = obj;
key.replace(objNotationRegex, function(all, name, quote, quotedName, isFunc) {
name = name || quotedName;
if (res) {
if (name in res) {
res = res[name];
}
typeof res == 'function' && isFunc && (res = res());
}
});
res = (res == null || res == obj ? all : res) + '';
return res;
}
function format(str, obj) {
return String(str).replace(tokenRegex, function(all, key) {
return replacer(all, key, obj);
});
}

12
lib/features/replace-preview/BpmnReplacePreview.js
View File

@ -7,6 +7,10 @@ var inherits = require('inherits');
var assign = require('lodash/object/assign'),
forEach = require('lodash/collection/forEach');
var domQuery = require('min-dom/lib/query');
var svgAttr = require('tiny-svg/lib/attr');
var LOW_PRIORITY = 250;
function BpmnReplacePreview(eventBus, elementRegistry, elementFactory, canvas, previewSupport) {
@ -45,10 +49,10 @@ function BpmnReplacePreview(eventBus, elementRegistry, elementFactory, canvas, p
canvas.addShape(tempShape, element.parent);
// select the original SVG element related to the element and hide it
var gfx = context.dragGroup.select('[data-element-id=' + element.id + ']');
var gfx = domQuery('[data-element-id=' + element.id + ']', context.dragGroup);
if (gfx) {
gfx.attr({ display: 'none' });
svgAttr(gfx, { display: 'none' });
}
// clone the gfx of the temporary shape and add it to the drag group
@ -71,10 +75,10 @@ function BpmnReplacePreview(eventBus, elementRegistry, elementFactory, canvas, p
forEach(visualReplacements, function(dragger, id) {
var originalGfx = context.dragGroup.select('[data-element-id=' + id + ']');
var originalGfx = domQuery('[data-element-id=' + id + ']', context.dragGroup);
if (originalGfx) {
originalGfx.attr({ display: 'inline' });
svgAttr(originalGfx, { display: 'inline' });
}
dragger.remove();

5
package.json
View File

@ -61,7 +61,7 @@
"load-grunt-tasks": "^0.3.0",
"mocha": "^2.2.5",
"mocha-test-container-support": "0.2.0",
"phantomjs": "^1.9.19",
"phantomjs": "^2.1.7",
"sinon": "~1.14.1",
"sinon-chai": "~2.7.0",
"source-map-concat": "^1.0.0",
@ -79,6 +79,7 @@
"inherits": "^2.0.1",
"lodash": "^3.0.1",
"min-dom": "^0.2.0",
"object-refs": "^0.1.1"
"object-refs": "^0.1.1",
"tiny-svg": "0.0.1"
}
}

42
test/integration/custom-elements/CustomRenderer.js
View File

@ -6,6 +6,10 @@ var BaseRenderer = require('diagram-js/lib/draw/BaseRenderer');
var componentsToPath = require('diagram-js/lib/util/RenderUtil').componentsToPath;
var svgAppend = require('tiny-svg/lib/append'),
svgAttr = require('tiny-svg/lib/attr'),
svgCreate = require('tiny-svg/lib/create');
function CustomRenderer(eventBus, styles) {
@ -18,19 +22,23 @@ function CustomRenderer(eventBus, styles) {
var computeStyle = styles.computeStyle;
this.handlers = {
'custom:triangle': function(p, element) {
return self.drawTriangle(p, element.width);
'custom:triangle': function(parentGfx, element) {
return self.drawTriangle(parentGfx, element.width);
},
'custom:circle': function(p, element, attrs) {
return self.drawCircle(p, element.width, element.height, attrs);
'custom:circle': function(parentGfx, element, attrs) {
return self.drawCircle(parentGfx, element.width, element.height, attrs);
}
};
this.drawTriangle = function(p, side, attrs) {
this.drawTriangle = function(parentGfx, side, attrs) {
var halfSide = side / 2,
points;
points = [ halfSide, 0, side, side, 0, side ];
points = [{ x: halfSide, y: 0 }, { x: side, y: side }, { x: 0, y: side }];
var pointsString = points.map(function(point) {
return point.x + ',' + point.y;
}).join(' ');
attrs = computeStyle(attrs, {
stroke: '#3CAA82',
@ -38,7 +46,13 @@ function CustomRenderer(eventBus, styles) {
fill: '#3CAA82'
});
return p.polygon(points).attr(attrs);
var polygon = svgCreate('polygon');
svgAttr(polygon, { points: pointsString });
svgAttr(polygon, attrs);
svgAppend(parentGfx, polygon);
return polygon;
};
this.getTrianglePath = function(element) {
@ -57,7 +71,7 @@ function CustomRenderer(eventBus, styles) {
return componentsToPath(trianglePath);
};
this.drawCircle = function(p, width, height, attrs) {
this.drawCircle = function(parentGfx, width, height, attrs) {
var cx = width / 2,
cy = height / 2;
@ -67,7 +81,17 @@ function CustomRenderer(eventBus, styles) {
fill: 'white'
});
return p.circle(cx, cy, Math.round((width + height) / 4)).attr(attrs);
var circle = svgCreate('circle');
svgAttr(circle, {
cx: cx,
cy: cy,
r: Math.round((width + height) / 4)
});
svgAttr(circle, attrs);
svgAppend(parentGfx, circle);
return circle;
};
this.getCirclePath = function(shape) {

2
test/spec/ModelerSpec.js
View File

@ -40,7 +40,7 @@ describe('Modeler', function() {
});
it.skip('should import complex', function(done) {
it.only('should import complex', function(done) {
var xml = require('../fixtures/bpmn/complex.bpmn');
createModeler(xml, done);
});

6
test/spec/draw/BpmnRendererSpec.js
View File

@ -5,6 +5,8 @@ require('../../TestHelper');
var coreModule = require('../../../lib/core'),
rendererModule = require('../../../lib/draw');
var domQuery = require('min-dom/lib/query');
/* global bootstrapViewer, bootstrapModeler, inject */
@ -174,7 +176,7 @@ describe('draw - bpmn renderer', function() {
var callActivityGfx = elementRegistry.getGraphics('CallActivity');
// make sure the + marker is shown
expect(callActivityGfx.select('[data-marker=sub-process]')).to.exist;
expect(domQuery('[data-marker=sub-process]', callActivityGfx)).to.exist;
done();
})();
@ -197,7 +199,7 @@ describe('draw - bpmn renderer', function() {
var callActivityGfx = elementRegistry.getGraphics('AdHocSubProcess');
// make sure the + marker is shown
expect(callActivityGfx.select('[data-marker=adhoc]')).to.exist;
expect(domQuery('[data-marker=adhoc]', callActivityGfx)).to.exist;
done();
})();

5
test/spec/features/modeling/LabelBoundsSpec.js
View File

@ -6,6 +6,9 @@ var Modeler = require('../../../../lib/Modeler');
var TestContainer = require('mocha-test-container-support');
var domQuery = require('min-dom/lib/query');
describe('label bounds', function() {
function createModeler(xml, done) {
@ -198,7 +201,7 @@ describe('label bounds', function() {
// given
var shape = elementRegistry.get('StartEvent_1'),
gfx = elementRegistry.getGraphics('StartEvent_1_label'),
hit = gfx.select('.djs-hit');
hit = domQuery('.djs-hit', gfx);
var interactionEventSpy = sinon.spy(hit, 'attr'),
rendererSpy = sinon.spy(bpmnRenderer, 'drawShape');

4
test/spec/features/modeling/behavior/ReplaceElementBehaviourSpec.js
View File

@ -12,6 +12,8 @@ var replacePreviewModule = require('../../../../../lib/features/replace-preview'
var is = require('../../../../../lib/util/ModelUtil').is,
canvasEvent = require('../../../../util/MockEvents').createCanvasEvent;
var domQuery = require('min-dom/lib/query');
describe('features/modeling - move start event behavior', function() {
@ -437,7 +439,7 @@ describe('features/modeling - move start event behavior', function() {
// then
var gfx = elementRegistry.getGraphics(subProcess);
var outline = gfx.select('.djs-outline');
var outline = domQuery('.djs-outline', gfx);
expect(outline.getBBox().width).to.equal(gfx.getBBox().width);
expect(outline.getBBox().height).to.equal(gfx.getBBox().height);

32
test/spec/features/replace-preview/BpmnReplacePreviewSpec.js
View File

@ -12,6 +12,10 @@ var canvasEvent = require('../../../util/MockEvents').createCanvasEvent;
var assign = require('lodash/object/assign');
var svgAttr = require('tiny-svg/lib/attr'),
svgClone = require('tiny-svg/lib/clone'),
innerSVG = require('tiny-svg/lib/innerSVG');
describe('features/replace-preview', function() {
@ -46,7 +50,7 @@ describe('features/replace-preview', function() {
canvas.addShape(tempShape, rootElement);
var gfx = elementRegistry.getGraphics(tempShape).clone();
var gfx = svgClone(elementRegistry.getGraphics(tempShape));
canvas.removeShape(tempShape);
@ -77,9 +81,9 @@ describe('features/replace-preview', function() {
// then
var dragGroup = dragging.context().data.context.dragGroup;
dragGroup[0].attr('display', 'inline');
svgAttr(dragGroup.childNodes[0], 'display', 'inline');
expect(dragGroup[0].getBBox()).to.eql(dragGroup[1].getBBox());
expect(dragGroup.childNodes[0].getBBox()).to.eql(dragGroup.childNodes[1].getBBox());
}));
@ -124,7 +128,7 @@ describe('features/replace-preview', function() {
// then
var dragGroup = dragging.context().data.context.dragGroup;
expect(dragGroup[0].attr('display')).to.equal('none');
expect(svgAttr(dragGroup.childNodes[0], 'display')).to.equal('none');
}));
@ -147,7 +151,7 @@ describe('features/replace-preview', function() {
eventDefinitionType: 'bpmn:MessageEventDefinition'
});
expect(context.dragGroup[0].innerSVG()).to.equal(startEventGfx.innerSVG());
expect(innerSVG(context.dragGroup.childNodes[0])).to.equal(innerSVG(startEventGfx));
})
);
@ -164,7 +168,7 @@ describe('features/replace-preview', function() {
// check if the visual replacement is a blank interrupting start event
var startEventGfx = getGfx({ type: 'bpmn:StartEvent' });
expect(context.dragGroup[1].innerSVG()).to.equal(startEventGfx.innerSVG());
expect(innerSVG(context.dragGroup.childNodes[1])).to.equal(innerSVG(startEventGfx));
})
);
@ -188,7 +192,7 @@ describe('features/replace-preview', function() {
eventDefinitionType: 'bpmn:MessageEventDefinition'
});
expect(context.dragGroup[0].innerSVG()).to.equal(startEventGfx.innerSVG());
expect(innerSVG(context.dragGroup.childNodes[0])).to.equal(innerSVG(startEventGfx));
})
);
@ -208,7 +212,7 @@ describe('features/replace-preview', function() {
// check if the visual representation remains a non interrupting message start event
var startEventGfx = getGfx({ type: 'bpmn:StartEvent' });
expect(context.dragGroup[1].innerSVG()).to.equal(startEventGfx.innerSVG());
expect(innerSVG(context.dragGroup.childNodes[1])).to.equal(innerSVG(startEventGfx));
})
);
@ -231,9 +235,9 @@ describe('features/replace-preview', function() {
// check if the visual replacements are blank interrupting start events
var startEventGfx = getGfx({ type: 'bpmn:StartEvent' });
expect(context.dragGroup[1].innerSVG()).to.equal(startEventGfx.innerSVG());
expect(context.dragGroup[3].innerSVG()).to.equal(startEventGfx.innerSVG());
expect(context.dragGroup[4].innerSVG()).to.equal(startEventGfx.innerSVG());
expect(innerSVG(context.dragGroup.childNodes[1])).to.equal(innerSVG(startEventGfx));
expect(innerSVG(context.dragGroup.childNodes[3])).to.equal(innerSVG(startEventGfx));
expect(innerSVG(context.dragGroup.childNodes[4])).to.equal(innerSVG(startEventGfx));
})
);
@ -268,9 +272,9 @@ describe('features/replace-preview', function() {
var context = dragging.context().data.context;
// then
expect(context.dragGroup[0].innerSVG()).to.equal(messageStartEventGfx.innerSVG());
expect(context.dragGroup[1].innerSVG()).to.equal(startEventGfx.innerSVG());
expect(context.dragGroup[2].innerSVG()).to.equal(timerStartEventGfx.innerSVG());
expect(innerSVG(context.dragGroup.childNodes[0])).to.equal(innerSVG(messageStartEventGfx));
expect(innerSVG(context.dragGroup.childNodes[1])).to.equal(innerSVG(startEventGfx));
expect(innerSVG(context.dragGroup.childNodes[2])).to.equal(innerSVG(timerStartEventGfx));
})
);

4
test/spec/import/elements/LabelSpec.js
View File

@ -50,13 +50,13 @@ describe('import - labels', function() {
// then
expect(endEvent.label.x).to.be.within(236, 237);
expect(endEvent.label.y).to.be.within(256, 256);
expect(endEvent.label.width).to.be.within(68, 69);
expect(endEvent.label.width).to.be.within(67, 69);
expect(endEvent.label.height).to.be.within(23, 30);
expect(sequenceFlow.label.x).to.be.within(441, 442);
expect(sequenceFlow.label.y).to.be.within(316, 317);
expect(sequenceFlow.label.width).to.be.within(79, 82);
expect(sequenceFlow.label.height).to.be.within(11, 15);
expect(sequenceFlow.label.height).to.be.within(12, 15);
done();
})();