From 7e119dc40227c6257489797f7e975775c9c2eead Mon Sep 17 00:00:00 2001 From: Nico Rehwaldt Date: Thu, 20 Mar 2014 16:18:23 +0100 Subject: [PATCH] feat(BpmnRenderer): basic render events and activities Related to #1 --- Gruntfile.js | 2 +- example/app.js | 4 +- example/diagram-js.css | 7 +- lib/Importer.js | 2 +- lib/Modeler.js | 18 +- lib/{Renderer.js => Viewer.js} | 12 +- lib/di.js | 5 + lib/draw/BpmnRenderer.js | 132 +++++++++++++ lib/main.js | 4 +- package.json | 6 +- test/fixtures/bpmn/simple/activities.bpmn | 69 +++++++ test/fixtures/bpmn/simple/data-items.bpmn | 45 +++++ test/fixtures/bpmn/simple/events.bpmn | 226 ++++++++++++++++++++++ test/fixtures/bpmn/simple/gateways.bpmn | 41 ++++ 14 files changed, 549 insertions(+), 24 deletions(-) rename lib/{Renderer.js => Viewer.js} (60%) create mode 100644 lib/di.js create mode 100644 lib/draw/BpmnRenderer.js create mode 100644 test/fixtures/bpmn/simple/activities.bpmn create mode 100644 test/fixtures/bpmn/simple/data-items.bpmn create mode 100644 test/fixtures/bpmn/simple/events.bpmn create mode 100644 test/fixtures/bpmn/simple/gateways.bpmn diff --git a/Gruntfile.js b/Gruntfile.js index 97f2445f..adf8a23e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -59,7 +59,7 @@ module.exports = function(grunt) { alias: [ '<%= config.sources %>/main.js:bpmn', '<%= config.sources %>/Model.js:bpmn/Model', - '<%= config.sources %>/Renderer.js:bpmn/Renderer', + '<%= config.sources %>/Viewer.js:bpmn/Viewer', '<%= config.sources %>/Modeler.js:bpmn/Modeler' ], insertGlobalVars: [] diff --git a/example/app.js b/example/app.js index 9b9f571e..e0d155e2 100644 --- a/example/app.js +++ b/example/app.js @@ -1,14 +1,14 @@ (function() { var Model = require('bpmn/Model'), - Renderer = require('bpmn/Renderer'), + Viewer = require('bpmn/Viewer'), Modeler = require('bpmn/Modeler'); var container = $('#js-drop-zone'); var canvas = $('#js-canvas'); - var BpmnJS = canvas.is('.modeler') ? Modeler : Renderer; + var BpmnJS = canvas.is('.modeler') ? Modeler : Viewer; var renderer = new BpmnJS(canvas.get(0)); diff --git a/example/diagram-js.css b/example/diagram-js.css index de79351a..cdc85c9d 100644 --- a/example/diagram-js.css +++ b/example/diagram-js.css @@ -57,15 +57,10 @@ /** * shape / connection basic styles */ -.djs-shape .djs-visual { - stroke: black; - stroke-width: 2px; - fill: #F3F3F3; -} +.djs-shape .djs-visual { } .djs-connection .djs-visual { stroke-width: 2px; - stroke: #333; fill: none; } diff --git a/lib/Importer.js b/lib/Importer.js index 3e1898bb..c2666de3 100644 --- a/lib/Importer.js +++ b/lib/Importer.js @@ -4,7 +4,7 @@ var BpmnTreeWalker = require('./BpmnTreeWalker'); function importBpmnDiagram(diagram, definitions, done) { - var canvas = diagram.resolve('canvas'); + var canvas = diagram.get('canvas'); var shapes = {}; diff --git a/lib/Modeler.js b/lib/Modeler.js index 34e853cf..e11e9aca 100644 --- a/lib/Modeler.js +++ b/lib/Modeler.js @@ -1,17 +1,27 @@ var Diagram = require('diagram-js'); -var Renderer = require('./Renderer'); + +var bpmnModule = require('./di').defaultModule, + Viewer = require('./Viewer'); + +require('./draw/BpmnRenderer'); require('diagram-js/src/features/DragUI'); require('diagram-js/src/features/SelectionUI'); + function Modeler(container) { - Renderer.call(this, container); + Viewer.call(this, container); } -Modeler.prototype = new Renderer(); +Modeler.prototype = new Viewer(); Modeler.prototype.createDiagram = function() { - return new Diagram({ canvas: { container: this.container }, plugins: [ 'selectionUI', 'dragUI' ]}); + + return new Diagram({ + canvas: { container: this.container }, + modules: [ bpmnModule ], + components: [ 'selectionUI', 'dragUI' ] + }); }; module.exports = Modeler; \ No newline at end of file diff --git a/lib/Renderer.js b/lib/Viewer.js similarity index 60% rename from lib/Renderer.js rename to lib/Viewer.js index 75bdd4e7..363ceaeb 100644 --- a/lib/Renderer.js +++ b/lib/Viewer.js @@ -1,11 +1,11 @@ var Diagram = require('diagram-js'); var Importer = require('./Importer'); -function Renderer(container) { +function Viewer(container) { this.container = container; } -Renderer.prototype.importDefinitions = function(definitions, done) { +Viewer.prototype.importDefinitions = function(definitions, done) { if (this.diagram) { this.clear(); @@ -18,16 +18,16 @@ Renderer.prototype.importDefinitions = function(definitions, done) { }; -Renderer.prototype.exportDefinitions = function(done) { +Viewer.prototype.exportDefinitions = function(done) { }; -Renderer.prototype.createDiagram = function() { +Viewer.prototype.createDiagram = function() { return new Diagram({ canvas: { container: this.container }}); }; -Renderer.prototype.clear = function() { +Viewer.prototype.clear = function() { this.container.innerHTML = ''; }; -module.exports = Renderer; \ No newline at end of file +module.exports = Viewer; \ No newline at end of file diff --git a/lib/di.js b/lib/di.js new file mode 100644 index 00000000..a8001394 --- /dev/null +++ b/lib/di.js @@ -0,0 +1,5 @@ +var Module = require('didi').Module; + +module.exports = { + defaultModule: new Module() +}; \ No newline at end of file diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js new file mode 100644 index 00000000..578f2cb8 --- /dev/null +++ b/lib/draw/BpmnRenderer.js @@ -0,0 +1,132 @@ +var bpmnModule = require('../di').defaultModule; + +var DefaultRenderer = require('diagram-js/src/draw/Renderer'); + +function BpmnRenderer() { + + var TASK_BORDER_RADIUS = 8; + var INNER_OUTER_DIST = 3; + + function drawCircle(p, width, height, offset) { + + offset = offset || 0; + + var cx = width / 2, + cy = height / 2; + + return p.circle(cx, cy, Math.round((width + height) / 4 - offset)).attr({ + 'stroke': 'Black', + 'stroke-width': 2, + 'fill': 'White' + }); + } + + function drawRect(p, width, height, r, offset) { + offset = offset || 0; + + var x, y; + + x = y = offset; + + return p.rect(offset, offset, width - offset * 2, height - offset * 2, r).attr({ + 'stroke': 'Black', + 'stroke-width': 2, + 'fill': 'White' + }); + } + + function as(type) { + return function(p, data) { + return handlers[type](p, data); + }; + } + + function renderer(type) { + return handlers[type]; + } + + var handlers = { + 'bpmn:Event': function(p, data) { + var circle = drawCircle(p, data.width, data.height); + return circle; + }, + 'bpmn:StartEvent': as('bpmn:Event'), + 'bpmn:EndEvent': function(p, data) { + var circle = renderer('bpmn:Event')(p, data); + + circle.attr({ + 'stroke-width': 4 + }); + + return circle; + }, + 'bpmn:IntermediateEvent': function(p, data) { + var outer = renderer('bpmn:Event')(p, data); + var inner = drawCircle(p, data.width, data.height, INNER_OUTER_DIST); + + outer.attr('stroke-width', 1); + inner.attr('stroke-width', 1); + + return outer; + }, + 'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'), + 'bpmn:IntermediateCatchEvent': as('bpmn:IntermediateEvent'), + + 'bpmn:Activity': function(p, data) { + var rect = drawRect(p, data.width, data.height, TASK_BORDER_RADIUS); + return rect; + }, + + 'bpmn:Task': as('bpmn:Activity'), + 'bpmn:ServiceTask': as('bpmn:Activity'), + 'bpmn:UserTask': as('bpmn:Activity'), + 'bpmn:ManualTask': as('bpmn:Activity'), + 'bpmn:SendTask': as('bpmn:Activity'), + 'bpmn:ReceiveTask': as('bpmn:Activity'), + 'bpmn:ScriptTask': as('bpmn:Activity'), + 'bpmn:BusinessRuleTask': as('bpmn:Activity'), + 'bpmn:SubProcess': as('bpmn:Activity'), + 'bpmn:AdHocSubProcess': as('bpmn:Activity'), + 'bpmn:Transaction': function(p, data) { + var outer = renderer('bpmn:Activity')(p, data); + var inner = drawRect(p, data.width, data.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST); + + outer.attr('stroke-width', 1.5); + inner.attr('stroke-width', 1.5); + + return outer; + }, + 'bpmn:CallActivity': function(p, data) { + var rect = renderer('bpmn:Activity')(p, data); + rect.attr('stroke-width', 4); + return rect; + }, + + 'bpmn:Participant': as('bpmn:Lane'), + 'bpmn:Lane': function(p, data) { + var rect = drawRect(p, data.width, data.height, 0); + return rect; + } + }; + + function drawShape(parent, data) { + + var type = data.type; + var h = handlers[type]; + + if (!h) { + return BpmnRenderer.prototype.drawShape(parent, data); + } else { + return h(parent, data); + } + } + + this.drawShape = drawShape; +} + +BpmnRenderer.prototype = new DefaultRenderer(); + + +bpmnModule.type('renderer', [ 'snap', BpmnRenderer ]); + +module.exports = BpmnRenderer; \ No newline at end of file diff --git a/lib/main.js b/lib/main.js index d48be2a6..70efddb6 100644 --- a/lib/main.js +++ b/lib/main.js @@ -1,6 +1,6 @@ -var Renderer = require('./Renderer'), +var Viewer = require('./Viewer'), Model = require('./Model'); -module.exports.Renderer = Renderer; +module.exports.Viewer = Viewer; module.exports.Model = Model; \ No newline at end of file diff --git a/package.json b/package.json index 3c216b3f..d829770b 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,9 @@ "jsondiffpatch": "~0.1.4", "xsd-schema-validator": "0.0.3", "sax": "~0.6.0", + "brfs": "~1.0.0", "lodash": "~2.4.0", - "brfs": "~1.0.0" + "didi": "~0.0.4" }, "dependencies": { "moddle": "~0.0.1", @@ -59,6 +60,7 @@ "diagram-js": "~0.0.1" }, "peerDependencies": { - "lodash": "~2.4.0" + "lodash": "~2.4.0", + "didi": "~0.0.4" } } diff --git a/test/fixtures/bpmn/simple/activities.bpmn b/test/fixtures/bpmn/simple/activities.bpmn new file mode 100644 index 00000000..2b65bb21 --- /dev/null +++ b/test/fixtures/bpmn/simple/activities.bpmn @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/fixtures/bpmn/simple/data-items.bpmn b/test/fixtures/bpmn/simple/data-items.bpmn new file mode 100644 index 00000000..089d0cb5 --- /dev/null +++ b/test/fixtures/bpmn/simple/data-items.bpmn @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/fixtures/bpmn/simple/events.bpmn b/test/fixtures/bpmn/simple/events.bpmn new file mode 100644 index 00000000..61b45d8a --- /dev/null +++ b/test/fixtures/bpmn/simple/events.bpmn @@ -0,0 +1,226 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/fixtures/bpmn/simple/gateways.bpmn b/test/fixtures/bpmn/simple/gateways.bpmn new file mode 100644 index 00000000..7d35fe5f --- /dev/null +++ b/test/fixtures/bpmn/simple/gateways.bpmn @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file