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

10
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();
@ -472,4 +474,4 @@ function addProjectLogo(container) {
});
}
/* </project-logo> */
/* </project-logo> */

580
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));
})
);

6
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();
})();
@ -72,4 +72,4 @@ describe('import - labels', function() {
});
});
});