├── .gitignore ├── .jshintrc ├── Gruntfile.js ├── LICENSE ├── README.md ├── app ├── app.css ├── app.js ├── bpmn-viewer.js ├── bpmn.js ├── bpmnio.css ├── diff.json └── index.html ├── assets └── diff.css ├── docs └── setup │ └── SETUP.bat ├── index.js ├── lib ├── change-handler.js └── differ.js ├── package.json ├── resources ├── pizza-collaboration │ ├── new.bpmn │ ├── old.bpmn │ ├── start-event-new.bpmn │ └── start-event-old.bpmn └── simple │ ├── diff.json │ ├── new.bpmn │ ├── new_removed.bpmn │ └── old.bpmn └── test ├── config └── karma.unit.js ├── fixtures ├── add │ ├── after.bpmn │ └── before.bpmn ├── change │ ├── after.bpmn │ └── before.bpmn ├── collaboration │ ├── after.bpmn │ └── before.bpmn ├── layout-change │ ├── after.bpmn │ └── before.bpmn └── remove │ ├── after.bpmn │ └── before.bpmn └── spec └── differ.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | docs/api/ 4 | tmp/ 5 | npm-debug.log 6 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "noarg" : true, 3 | "noempty" : false, 4 | "quotmark" : true, 5 | "undef" : true, 6 | "trailing" : true, 7 | "maxlen" : 120, 8 | "browser" : true, 9 | "node" : true, 10 | "debug": true, 11 | "strict": false, 12 | "globals": { 13 | "describe": false, 14 | "it": false, 15 | "expect": true, 16 | "beforeEach": true, 17 | "afterEach": true, 18 | "alert": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | require('load-grunt-tasks')(grunt); 4 | 5 | /* global process */ 6 | 7 | // configures browsers to run test against 8 | // any of [ 'PhantomJS', 'Chrome', 'Firefox', 'IE'] 9 | var TEST_BROWSERS = ((process.env.TEST_BROWSERS || '').replace(/^\s+|\s+$/, '') || 'PhantomJS').split(/\s*,\s*/g); 10 | 11 | 12 | // project configuration 13 | grunt.initConfig({ 14 | pkg: grunt.file.readJSON('package.json'), 15 | 16 | config: { 17 | app: 'app', 18 | sources: 'lib', 19 | tests: 'test' 20 | }, 21 | 22 | release: { 23 | options: { 24 | tagName: 'v<%= version %>', 25 | commitMessage: 'chore(project): release v<%= version %>', 26 | tagMessage: 'chore(project): tag v<%= version %>' 27 | } 28 | }, 29 | 30 | jshint: { 31 | src: ['<%= config.sources %>'], 32 | options: { 33 | jshintrc: true 34 | } 35 | }, 36 | 37 | karma: { 38 | options: { 39 | configFile: '<%= config.tests %>/config/karma.unit.js', 40 | }, 41 | single: { 42 | singleRun: true, 43 | autoWatch: false, 44 | 45 | browsers: TEST_BROWSERS, 46 | 47 | browserify: { 48 | watch: false, 49 | debug: true, 50 | transform: [ [ 'brfs', { global: true } ] ] 51 | } 52 | }, 53 | unit: { 54 | browsers: TEST_BROWSERS, 55 | debug: true 56 | } 57 | }, 58 | 59 | browserify: { 60 | options: { 61 | browserifyOptions: { 62 | builtins: false 63 | }, 64 | bundleOptions: { 65 | detectGlobals: false, 66 | insertGlobalVars: [], 67 | debug: true 68 | } 69 | }, 70 | watch: { 71 | files: { 72 | '<%= config.app %>/bpmn-viewer.js': [ '<%= config.app %>/bpmn.js', 'index.js' ] 73 | }, 74 | options: { 75 | watch: true 76 | } 77 | }, 78 | standaloneViewer: { 79 | files: { 80 | '<%= config.app %>/bpmn-viewer.js': [ '<%= config.app %>/bpmn.js', 'index.js' ] 81 | }, 82 | options: { 83 | alias: [ 84 | 'jquery:jquery', 85 | 'lodash:lodash', 86 | 'index.js:bpmn-js-diffing', 87 | '<%= config.app %>/bpmn.js:bpmn-js' 88 | ] 89 | } 90 | }, 91 | }, 92 | 93 | jsdoc: { 94 | dist: { 95 | src: [ '<%= config.sources %>/**/*.js' ], 96 | options: { 97 | destination: 'docs/api', 98 | plugins: [ 'plugins/markdown' ] 99 | } 100 | } 101 | } 102 | }); 103 | 104 | // tasks 105 | 106 | grunt.registerTask('test', [ 'karma:single' ]); 107 | 108 | grunt.registerTask('auto-test', [ 'karma:unit' ]); 109 | 110 | grunt.registerTask('default', [ 'jshint', 'test', 'browserify:standaloneViewer', 'jsdoc' ]); 111 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-present Camunda Services GmbH 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bpmn-io/bpmn-js-diffing/42894df7b727736006024a6a654d30568fea4222/README.md -------------------------------------------------------------------------------- /app/app.css: -------------------------------------------------------------------------------- 1 | .content { 2 | height: 100%; 3 | width: 100%; 4 | 5 | position: relative; 6 | display: table; 7 | } 8 | 9 | .di-container { 10 | height: 100%; 11 | width: 50%; 12 | position: relative; 13 | 14 | display: table-cell; 15 | border-collapse: collapse; 16 | } 17 | 18 | .di-container.left { 19 | border-right: dotted 2px #CCC; 20 | } 21 | 22 | .di-header { 23 | position: absolute; 24 | top: 0; 25 | z-index: 10; 26 | margin: 20px; 27 | padding: 10px; 28 | 29 | background: #EEE; 30 | border-radius: 5px; 31 | 32 | opacity: 0.9; 33 | } 34 | 35 | .di-header:hover { 36 | opacity: 1; 37 | } 38 | 39 | .di-header h2 { 40 | margin-top: 0; 41 | } 42 | 43 | .right .di-header { 44 | right: 0; 45 | text-align: right; 46 | } 47 | 48 | .canvas { 49 | display: block; 50 | height: 100%; 51 | } 52 | 53 | 54 | .djs-shape.highlight .djs-outline { 55 | stroke: yellow !important; 56 | stroke-width: 10px; 57 | fill: yellow; 58 | } 59 | 60 | .djs-container { 61 | overflow: hidden; 62 | } 63 | 64 | 65 | /** 66 | * drag and drop 67 | */ 68 | 69 | .drop-marker { 70 | border: dashed 5px #CCC; 71 | border-radius: 20px; 72 | 73 | position: absolute; 74 | left: 20px; 75 | top: 20px; 76 | right: 20px; 77 | bottom: 20px; 78 | } 79 | 80 | .di-container .drop-marker, 81 | .di-container.dropping :not(.drop-marker) { 82 | display: none; 83 | } 84 | 85 | .dropping .drop-marker { 86 | display: block; 87 | } 88 | 89 | /** 90 | * change details 91 | */ 92 | .changeDetails table { 93 | border: 2px solid orange; 94 | width: 300px; 95 | background-color: #fff; 96 | } 97 | 98 | .changeDetails th { 99 | text-align: left; 100 | } 101 | 102 | 103 | /** 104 | * markers 105 | */ 106 | .marker { 107 | border-radius: 50%; 108 | background-color: gray; 109 | color: white; 110 | font-weight: bold; 111 | font-size: 150%; 112 | padding-right: 6px; 113 | padding-left: 6px; 114 | } 115 | 116 | .marker-changed { 117 | font-size: 130%; 118 | padding: 2px 5px; 119 | } 120 | 121 | .marker-layout-changed { 122 | font-size: 120%; 123 | padding: 2px 4px; 124 | } 125 | 126 | 127 | /** 128 | * changes overview 129 | */ 130 | #changes-overview { 131 | position: absolute; 132 | left: 25%; 133 | right: 25%; 134 | bottom: 0; 135 | height: 40%; 136 | 137 | color: #666; 138 | 139 | padding-top: 40px; 140 | z-index: 110; 141 | } 142 | 143 | #changes-overview.collapsed { 144 | height: 45px; 145 | } 146 | 147 | #changes-overview .changes { 148 | padding: 20px; 149 | border-radius: 2px 0; 150 | 151 | position: relative; 152 | height: 100%; 153 | overflow-y: auto; 154 | } 155 | 156 | #changes-overview table { 157 | text-align: left; 158 | width: 100%; 159 | height: 100%; 160 | 161 | border-collapse: collapse; 162 | } 163 | 164 | #changes-overview table tr { 165 | line-height: 30px; 166 | } 167 | 168 | #changes-overview thead tr { 169 | border-bottom: solid 1px #999; 170 | } 171 | 172 | #changes-overview .entry:hover { 173 | background-color: #EEE; 174 | cursor: pointer; 175 | } 176 | 177 | #changes-overview .status { 178 | font-weight: bold; 179 | color: #F9F9F9; 180 | 181 | padding: 0 5px; 182 | display: inline-block; 183 | white-space: nowrap; 184 | 185 | line-height: 20px 186 | } 187 | 188 | #changes-overview .entry.removed .status { 189 | background-color: red; 190 | } 191 | 192 | #changes-overview .entry.added .status { 193 | background-color: green; 194 | } 195 | 196 | #changes-overview .entry.changed .status { 197 | background-color: orange; 198 | } 199 | 200 | #changes-overview .entry.layout-changed .status { 201 | background-color: blue; 202 | } 203 | 204 | #changes-overview .show-hide-toggle { 205 | margin: 0 0 0 auto; 206 | padding: 5px 10px; 207 | height: 40px; 208 | cursor: pointer; 209 | background: #F0F0F0; 210 | display: inline-block; 211 | line-height: 30px; 212 | 213 | position: absolute; 214 | right: 20px; 215 | top: 0; 216 | 217 | border-radius: 5px 5px 0 0; 218 | cursor: pointer; 219 | } 220 | 221 | #changes-overview .show-hide-toggle:hover { 222 | background: #CCC; 223 | } -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | 'use strict'; 4 | 5 | 6 | var $ = require('jquery'), 7 | _ = require('lodash'), 8 | BpmnViewer = require('bpmn-js'), 9 | Diffing = require('bpmn-js-diffing'); 10 | 11 | 12 | function createViewer(side) { 13 | return new BpmnViewer({ 14 | container: '#canvas-' + side, 15 | height: '100%', 16 | width: '100%' 17 | }); 18 | } 19 | 20 | function syncViewers(a, b) { 21 | 22 | var changing; 23 | 24 | function update(viewer) { 25 | 26 | return function(e) { 27 | if (changing) { 28 | return; 29 | } 30 | 31 | changing = true; 32 | viewer.get('canvas').viewbox(e.viewbox); 33 | changing = false; 34 | }; 35 | } 36 | 37 | function syncViewbox(a, b) { 38 | a.on('canvas.viewbox.changed', update(b)); 39 | } 40 | 41 | syncViewbox(a, b); 42 | syncViewbox(b, a); 43 | } 44 | 45 | function createViewers(left, right) { 46 | 47 | var sides = {}; 48 | 49 | sides[left] = createViewer(left); 50 | sides[right] = createViewer(right); 51 | 52 | // sync navigation 53 | syncViewers(sides[left], sides[right]); 54 | 55 | return sides; 56 | } 57 | 58 | 59 | var viewers = createViewers('left', 'right'); 60 | 61 | function getViewer(side) { 62 | return viewers[side]; 63 | } 64 | 65 | function isLoaded(v) { 66 | return v.loading !== undefined && !v.loading; 67 | } 68 | 69 | function allDiagramsLoaded() { 70 | return _.every(viewers, isLoaded); 71 | } 72 | 73 | function setLoading(viewer, loading) { 74 | viewer.loading = loading; 75 | } 76 | 77 | 78 | function clearDiffs(viewer) { 79 | viewer.get('overlays').remove({ type: 'diff' }); 80 | 81 | // TODO(nre): expose as external API 82 | _.forEach(viewer.get('elementRegistry')._elementMap, function(container) { 83 | var gfx = container.gfx; 84 | 85 | gfx 86 | .removeClass('diff-added') 87 | .removeClass('diff-changed') 88 | .removeClass('diff-removed') 89 | .removeClass('diff-layout-changed'); 90 | }); 91 | 92 | } 93 | 94 | 95 | function diagramLoading(side, viewer) { 96 | 97 | setLoading(viewer, true); 98 | 99 | var loaded = _.filter(viewers, isLoaded); 100 | 101 | // clear diffs on loaded 102 | _.forEach(loaded, function(v) { 103 | clearDiffs(v); 104 | }); 105 | } 106 | 107 | function diagramLoaded(err, side, viewer) { 108 | if (err) { 109 | console.error('load error', err); 110 | } 111 | 112 | setLoading(viewer, err); 113 | 114 | if (allDiagramsLoaded()) { 115 | 116 | // sync viewboxes 117 | var other = getViewer(side == 'left' ? 'right' : 'left'); 118 | viewer.get('canvas').viewbox(other.get('canvas').viewbox()); 119 | 120 | showDiff(getViewer('left'), getViewer('right')); 121 | } 122 | } 123 | 124 | 125 | // we use $.ajax to load the diagram. 126 | // make sure you run the application via web-server (ie. connect (node) or asdf (ruby)) 127 | 128 | function loadDiagram(side, diagram) { 129 | 130 | var viewer = getViewer(side); 131 | 132 | function done(err) { 133 | diagramLoaded(err, side, viewer); 134 | } 135 | 136 | diagramLoading(side, viewer); 137 | 138 | if (diagram.xml) { 139 | return viewer.importXML(diagram.xml, done); 140 | } 141 | 142 | $.get(diagram.url, function(xml) { 143 | viewer.importXML(xml, done); 144 | }); 145 | } 146 | 147 | 148 | function showDiff(viewerOld, viewerNew) { 149 | 150 | var result = Diffing.diff (viewerOld.definitions, viewerNew.definitions); 151 | 152 | 153 | $.each(result._removed, function(i, obj) { 154 | highlight(viewerOld, i, 'diff-removed'); 155 | addMarker(viewerOld, i, 'marker-removed', '−'); 156 | }); 157 | 158 | 159 | $.each(result._added, function(i, obj) { 160 | highlight(viewerNew, i, 'diff-added'); 161 | addMarker(viewerNew, i, 'marker-added', '+'); 162 | }); 163 | 164 | 165 | $.each(result._layoutChanged, function(i, obj) { 166 | highlight(viewerOld, i, 'diff-layout-changed'); 167 | addMarker(viewerOld, i, 'marker-layout-changed', '⇨'); 168 | 169 | highlight(viewerNew, i, 'diff-layout-changed'); 170 | addMarker(viewerNew, i, 'marker-layout-changed', '⇨'); 171 | }); 172 | 173 | 174 | $.each(result._changed, function(i, obj) { 175 | 176 | highlight(viewerOld, i, 'diff-changed'); 177 | addMarker(viewerOld, i, 'marker-changed', '✎'); 178 | 179 | highlight(viewerNew, i, 'diff-changed'); 180 | addMarker(viewerNew, i, 'marker-changed', '✎'); 181 | 182 | var details = ''; 183 | $.each(obj.attrs, function(attr, changes) { 184 | details = details + '' + 185 | '' + 186 | '' + 187 | ''; 188 | }); 189 | 190 | details = details + '
Attributeoldnew
' + attr + '' + changes.oldValue + '' + changes.newValue + '
'; 191 | 192 | viewerOld.get('elementRegistry').getGraphicsByElement(i).click (function (event) { 193 | $('#changeDetailsOld_' + i).toggle(); 194 | }); 195 | 196 | var detailsOld = '
' + details; 197 | 198 | // attach an overlay to a node 199 | viewerOld.get('overlays').add(i, 'diff', { 200 | position: { 201 | bottom: -5, 202 | left: 0 203 | }, 204 | html: detailsOld 205 | }); 206 | 207 | $('#changeDetailsOld_' + i).toggle(); 208 | 209 | viewerNew.get('elementRegistry').getGraphicsByElement(i).click (function (event) { 210 | $('#changeDetailsNew_' + i).toggle(); 211 | }); 212 | 213 | var detailsNew = '
' + details; 214 | 215 | // attach an overlay to a node 216 | viewerNew.get('overlays').add(i, 'diff', { 217 | position: { 218 | bottom: -5, 219 | left: 0 220 | }, 221 | html: detailsNew 222 | }); 223 | 224 | $('#changeDetailsNew_' + i).toggle(); 225 | }); 226 | 227 | // create Table Overview of Changes 228 | showChangesOverview (result, viewerOld, viewerNew); 229 | 230 | } 231 | 232 | 233 | loadDiagram('left', { url: '../resources/pizza-collaboration/old.bpmn' }); 234 | loadDiagram('right', { url: '../resources/pizza-collaboration/new.bpmn' }); 235 | 236 | 237 | function openDiagram(xml, side) { 238 | loadDiagram(side, { xml: xml }); 239 | } 240 | 241 | function openFile(file, target, done) { 242 | var reader = new FileReader(); 243 | 244 | reader.onload = function(e) { 245 | var xml = e.target.result; 246 | done(xml, target); 247 | }; 248 | 249 | reader.readAsText(file); 250 | } 251 | 252 | 253 | $('.drop-zone').each(function() { 254 | var node = this, 255 | element = $(node); 256 | 257 | element.append('
'); 258 | 259 | function removeMarker() { 260 | $('.drop-zone').removeClass('dropping'); 261 | } 262 | 263 | function handleFileSelect(e) { 264 | e.stopPropagation(); 265 | e.preventDefault(); 266 | 267 | var files = e.dataTransfer.files; 268 | openFile(files[0], element.attr('target'), openDiagram); 269 | 270 | removeMarker(); 271 | } 272 | 273 | function handleDragOver(e) { 274 | removeMarker(); 275 | 276 | e.stopPropagation(); 277 | e.preventDefault(); 278 | 279 | element.addClass('dropping'); 280 | 281 | e.dataTransfer.dropEffect = 'copy'; 282 | } 283 | 284 | function handleDragLeave(e) { 285 | removeMarker(); 286 | } 287 | 288 | node.addEventListener('dragover', handleDragOver, false); 289 | node.ownerDocument.body.addEventListener('dragover', handleDragLeave, false); 290 | 291 | node.addEventListener('drop', handleFileSelect, false); 292 | }); 293 | 294 | $('.file').on('change', function(e) { 295 | openFile(e.target.files[0], $(this).attr('target'), openDiagram); 296 | }); 297 | 298 | 299 | function addMarker(viewer, elementId, className, symbol) { 300 | 301 | var overlays = viewer.get('overlays'); 302 | 303 | try { 304 | // attach an overlay to a node 305 | overlays.add(elementId, 'diff', { 306 | position: { 307 | top: -12, 308 | right: 12 309 | }, 310 | html: '' + symbol + '' 311 | }); 312 | } catch (e) { 313 | 314 | // ignore error 315 | } 316 | } 317 | 318 | function highlight(viewer, elementId, marker) { 319 | viewer.get('canvas').addMarker(elementId, marker); 320 | } 321 | 322 | function unhighlight(viewer, elementId, marker) { 323 | viewer.get('canvas').removeMarker(elementId, marker); 324 | } 325 | 326 | $('#changes-overview .show-hide-toggle').click(function () { 327 | $('#changes-overview').toggleClass('collapsed'); 328 | }); 329 | 330 | 331 | function showChangesOverview (result, viewerOld, viewerNew) { 332 | 333 | $('#changes-overview table').remove(); 334 | 335 | var changesTable = $( 336 | '' + 337 | '' + 338 | '
#NameTypeChange
'); 339 | 340 | var count = 0; 341 | 342 | function addRow(element, type, label) { 343 | var html = 344 | '' + 345 | '' + (count++) + '' + (element.name || '') + '' + 346 | '' + element.$type.replace('bpmn:', '') + '' + 347 | '' + label + '' + 348 | ''; 349 | 350 | var row = $(html).data({ 351 | changed: type, 352 | element: element.id 353 | }).addClass(type).appendTo(changesTable); 354 | } 355 | 356 | $.each(result._removed, function(i, obj) { 357 | addRow(obj, 'removed', 'Removed'); 358 | }); 359 | 360 | $.each(result._added, function(i, obj) { 361 | addRow(obj, 'added', 'Added'); 362 | }); 363 | 364 | $.each(result._changed, function(i, obj) { 365 | addRow(obj.model, 'changed', 'Changed'); 366 | }); 367 | 368 | $.each(result._layoutChanged, function(i, obj) { 369 | addRow(obj, 'layout-changed', 'Layout Changed'); 370 | }); 371 | 372 | changesTable.appendTo('#changes-overview .changes'); 373 | 374 | 375 | var HIGHLIGHT_CLS = 'highlight'; 376 | 377 | $('#changes-overview tr.entry').each(function() { 378 | 379 | var row = $(this); 380 | 381 | var id = row.data('element'); 382 | var changed = row.data('changed'); 383 | 384 | row.hover(function() { 385 | 386 | if (changed == 'removed') { 387 | highlight(viewerOld, id, HIGHLIGHT_CLS); 388 | } else if (changed == 'added') { 389 | highlight(viewerNew, id, HIGHLIGHT_CLS); 390 | } else { 391 | highlight(viewerOld, id, HIGHLIGHT_CLS); 392 | highlight(viewerNew, id, HIGHLIGHT_CLS); 393 | } 394 | }, function() { 395 | 396 | if (changed == 'removed') { 397 | unhighlight(viewerOld, id, HIGHLIGHT_CLS); 398 | } else if (changed == 'added') { 399 | unhighlight(viewerNew, id, HIGHLIGHT_CLS); 400 | } else { 401 | unhighlight(viewerOld, id, HIGHLIGHT_CLS); 402 | unhighlight(viewerNew, id, HIGHLIGHT_CLS); 403 | } 404 | }); 405 | 406 | row.click(function() { 407 | 408 | var containerWidth = $('.di-container').width(); 409 | var containerHeight = $('.di-container').height(); 410 | 411 | var viewer = (changed == 'removed' ? viewerOld : viewerNew); 412 | 413 | var element = viewer.get('elementRegistry').getById(id); 414 | 415 | var x, y; 416 | 417 | if (element.waypoints) { 418 | x = element.waypoints[0].x; 419 | y = element.waypoints[0].y; 420 | } else { 421 | x = element.x + element.width / 2; 422 | y = element.y + element.height / 2; 423 | } 424 | 425 | viewer.get('canvas').viewbox({ 426 | x: x - (containerWidth / 2), 427 | y: y - ((containerHeight / 2) - 100), 428 | width: containerWidth, 429 | height: containerHeight 430 | }); 431 | }); 432 | 433 | }); 434 | } 435 | 436 | })(); 437 | -------------------------------------------------------------------------------- /app/bpmn.js: -------------------------------------------------------------------------------- 1 | var BpmnJS = require('bpmn-js/lib/Viewer'); 2 | 3 | BpmnJS.prototype._modules = BpmnJS.prototype._modules.concat([ 4 | require('bpmn-js/lib/features/movecanvas'), 5 | require('bpmn-js/lib/features/zoomscroll') 6 | ]); 7 | 8 | module.exports = BpmnJS; -------------------------------------------------------------------------------- /app/bpmnio.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, body { 6 | 7 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 8 | 9 | font-size: 12px; 10 | color: #444; 11 | 12 | height: 100%; 13 | padding: 0; 14 | margin: 0; 15 | } 16 | 17 | h1, h2, h3, h4 { 18 | font-weight: normal; 19 | } 20 | 21 | .content { 22 | width: 100%; 23 | height: 100%; 24 | 25 | overflow: hidden; 26 | } 27 | 28 | 29 | /** widgets **/ 30 | 31 | .bjs-powered-by, 32 | .io-control { 33 | background: #FFF; 34 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 35 | border-radius: 2px; 36 | padding: 5px; 37 | } 38 | 39 | .bjs-powered-by { 40 | padding-bottom: 2px; 41 | } 42 | 43 | .io-control-list { 44 | list-style: none; 45 | 46 | padding: 5px; 47 | margin: 0; 48 | } 49 | 50 | button.inactive, 51 | a.inactive { 52 | color: #E0E0E0; 53 | color: rgba(10, 10, 10, 0.4) !important; 54 | cursor: default; 55 | } 56 | 57 | .close { 58 | font-size: 21px; 59 | font-weight: 700; 60 | text-shadow: 0 1px 0 #FFF; 61 | opacity: .2; 62 | line-height: 1; 63 | vertical-align: middle; 64 | margin-left: 5px; 65 | } 66 | 67 | a:link { 68 | text-decoration: none; 69 | } 70 | 71 | button, 72 | a, 73 | a:visited { 74 | color: #555; 75 | } 76 | 77 | button:hover, 78 | a:hover { 79 | color: #333; 80 | } 81 | 82 | .vr { 83 | display: inline-block; 84 | height: 26px; 85 | border-right: solid 1px #999; 86 | vertical-align: top; 87 | } 88 | 89 | .io-control-list a, 90 | .io-control-list button { 91 | padding: 0; 92 | outline: none; 93 | 94 | cursor: pointer; 95 | font-size: 22px; 96 | line-height: 26px; 97 | 98 | background: none; 99 | border: none; 100 | } 101 | 102 | .io-control-list.io-horizontal, 103 | .io-control-list.io-horizontal li { 104 | display: inline-block; 105 | } 106 | 107 | .io-control-list.io-horizontal a, 108 | .io-control-list.io-horizontal button { 109 | padding: 2px; 110 | margin: 0 5px; 111 | } 112 | 113 | .io-control hr { 114 | border: none; 115 | border-top: solid 1px #EEE; 116 | } 117 | 118 | 119 | /** dialogs */ 120 | 121 | .io-dialog { 122 | display: none; 123 | } 124 | 125 | .io-dialog.open { 126 | display: block; 127 | } 128 | 129 | .io-dialog.open:before { 130 | content: ''; 131 | position: fixed; 132 | left: 0; 133 | top: 0; 134 | bottom: 0; 135 | right: 0; 136 | 137 | background: #666; 138 | opacity: 0.2; 139 | 140 | z-index: 1001; 141 | } 142 | 143 | .io-dialog .content { 144 | position: fixed; 145 | 146 | background: white; 147 | padding: 10px 30px 20px 30px; 148 | 149 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 150 | border-radius: 2px; 151 | 152 | height: auto; 153 | 154 | z-index: 1001; 155 | } 156 | 157 | .io-dialog .project-logo { 158 | position: absolute; 159 | bottom: 27px; 160 | right: 27px; 161 | width: 54px; 162 | height: 54px; 163 | font-size: 48px; 164 | } 165 | 166 | @media (max-width: 599px) { 167 | .io-dialog .content { 168 | left: 20px; 169 | right: 20px; 170 | top: 20px; 171 | width: auto; 172 | } 173 | } 174 | 175 | @media (min-width: 600px) { 176 | 177 | .io-dialog .content { 178 | width: 600px; 179 | left: 50%; 180 | margin-left: -300px; 181 | top: 100px; 182 | } 183 | } 184 | 185 | /** fonts **/ 186 | 187 | @font-face { 188 | font-family: 'bpmnio'; 189 | src: url('../font/bpmnio.eot?2633928'); 190 | src: url('../font/bpmnio.eot?2633928#iefix') format('embedded-opentype'), 191 | url('../font/bpmnio.woff?2633928') format('woff'), 192 | url('../font/bpmnio.ttf?2633928') format('truetype'), 193 | url('../font/bpmnio.svg?2633928#bpmnio') format('svg'); 194 | font-weight: normal; 195 | font-style: normal; 196 | } 197 | 198 | [class^="icon-"]:before, 199 | [class*=" icon-"]:before { 200 | font-family: "bpmnio"; 201 | font-style: normal; 202 | font-weight: normal; 203 | speak: none; 204 | 205 | display: inline-block; 206 | text-decoration: inherit; 207 | width: 1em; 208 | text-align: center; 209 | 210 | font-variant: normal; 211 | text-transform: none; 212 | 213 | line-height: 1em; 214 | } 215 | 216 | .icon-plus:before { content: '\e800'; } 217 | .icon-loading:before { content: '\e801'; } 218 | .icon-minus:before { content: '\e802'; } 219 | .icon-open:before { content: '\e803'; } 220 | .icon-picture:before { content: '\e804'; } 221 | .icon-download:before { content: '\e805'; } 222 | .icon-size-reset:before { content: '\e806'; } 223 | .icon-bpmn-io:before { content: '\e807'; } 224 | .icon-info:before { content: '\e808'; } 225 | .icon-comment:before { content: '\e809'; } 226 | .icon-undo:before { content: '\e80a'; } 227 | .icon-redo:before { content: '\e80b'; } 228 | .icon-plus-circled:before { content: '\e80c'; } 229 | 230 | /** animate spinner **/ 231 | 232 | .animate-spin { 233 | -moz-animation: spin 2s infinite linear; 234 | -o-animation: spin 2s infinite linear; 235 | -webkit-animation: spin 2s infinite linear; 236 | animation: spin 2s infinite linear; 237 | display: inline-block; 238 | } 239 | @-moz-keyframes spin { 240 | 0% { 241 | -moz-transform: rotate(0deg); 242 | -o-transform: rotate(0deg); 243 | -webkit-transform: rotate(0deg); 244 | transform: rotate(0deg); 245 | } 246 | 247 | 100% { 248 | -moz-transform: rotate(359deg); 249 | -o-transform: rotate(359deg); 250 | -webkit-transform: rotate(359deg); 251 | transform: rotate(359deg); 252 | } 253 | } 254 | @-webkit-keyframes spin { 255 | 0% { 256 | -moz-transform: rotate(0deg); 257 | -o-transform: rotate(0deg); 258 | -webkit-transform: rotate(0deg); 259 | transform: rotate(0deg); 260 | } 261 | 262 | 100% { 263 | -moz-transform: rotate(359deg); 264 | -o-transform: rotate(359deg); 265 | -webkit-transform: rotate(359deg); 266 | transform: rotate(359deg); 267 | } 268 | } 269 | @-o-keyframes spin { 270 | 0% { 271 | -moz-transform: rotate(0deg); 272 | -o-transform: rotate(0deg); 273 | -webkit-transform: rotate(0deg); 274 | transform: rotate(0deg); 275 | } 276 | 277 | 100% { 278 | -moz-transform: rotate(359deg); 279 | -o-transform: rotate(359deg); 280 | -webkit-transform: rotate(359deg); 281 | transform: rotate(359deg); 282 | } 283 | } 284 | @-ms-keyframes spin { 285 | 0% { 286 | -moz-transform: rotate(0deg); 287 | -o-transform: rotate(0deg); 288 | -webkit-transform: rotate(0deg); 289 | transform: rotate(0deg); 290 | } 291 | 292 | 100% { 293 | -moz-transform: rotate(359deg); 294 | -o-transform: rotate(359deg); 295 | -webkit-transform: rotate(359deg); 296 | transform: rotate(359deg); 297 | } 298 | } 299 | @keyframes spin { 300 | 0% { 301 | -moz-transform: rotate(0deg); 302 | -o-transform: rotate(0deg); 303 | -webkit-transform: rotate(0deg); 304 | transform: rotate(0deg); 305 | } 306 | 307 | 100% { 308 | -moz-transform: rotate(359deg); 309 | -o-transform: rotate(359deg); 310 | -webkit-transform: rotate(359deg); 311 | transform: rotate(359deg); 312 | } 313 | } -------------------------------------------------------------------------------- /app/diff.json: -------------------------------------------------------------------------------- 1 | { 2 | "removed": [ 3 | "_6-74", 4 | "_6-674", 5 | "_6-125", 6 | "_6-178", 7 | "_6-746", 8 | "_6-691", 9 | "_6-748" 10 | ], 11 | "added": [ 12 | "ExclusiveGateway_1", 13 | "ManualTask_1" 14 | ], 15 | "moved": [ 16 | "_6-61" 17 | ], 18 | "edited": { 19 | "_6-127": { 20 | "Name": { 21 | "old": "Order a pizza", 22 | "new": "Order Pasta!" 23 | } 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | bpmn-js-diffing 19 | 20 | 21 |
22 | 23 |
24 |
25 |

version A

26 | 27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 |

version B

35 | 36 |
37 | 38 |
39 |
40 | 41 | 45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /assets/diff.css: -------------------------------------------------------------------------------- 1 | .diff-removed:not(.djs-connection) .djs-visual > :nth-child(1) { 2 | fill: #E56283 /* light-red */ !important; 3 | } 4 | 5 | .diff-removed.djs-connection .djs-visual > :nth-child(1) { 6 | stroke: #BB163F /* red */ !important; 7 | } 8 | 9 | .marker.marker-removed { 10 | background: #BB163F /* red */; 11 | } 12 | 13 | 14 | .diff-added:not(.djs-connection) .djs-visual > :nth-child(1) { 15 | fill: #90DD5F /* light-green */!important; 16 | } 17 | 18 | .diff-added.djs-connection .djs-visual > :nth-child(1) { 19 | stroke: #54B415 /* green */ !important; 20 | } 21 | 22 | .marker.marker-added { 23 | background: #54B415 /* green */; 24 | } 25 | 26 | 27 | .diff-layout-changed:not(.djs-connection) .djs-visual > :nth-child(1) { 28 | fill: #4D79A3 /* light-blue */ !important; 29 | } 30 | 31 | .diff-layout-changed.djs-connection .djs-visual > :nth-child(1) { 32 | stroke: #185085 /* blue */ !important; 33 | } 34 | 35 | .marker.marker-layout-changed { 36 | background: #185085 /* blue */; 37 | } 38 | 39 | 40 | .diff-changed:not(.djs-connection) .djs-visual > :nth-child(1) { 41 | fill: #FBC16C /* light-yellow */ !important; 42 | } 43 | 44 | .diff-changed.djs-connection .djs-visual > :nth-child(1) { 45 | stroke: #CD8318 /* yellow */ !important; 46 | } 47 | 48 | .marker.marker-changed { 49 | background: #CD8318 /* yellow */; 50 | } 51 | -------------------------------------------------------------------------------- /docs/setup/SETUP.bat: -------------------------------------------------------------------------------- 1 | SET BASE=%CD% 2 | 3 | mklink /D %BASE%\bpmn-js-diffing\node_modules\bpmn-js %BASE%\bpmn-js 4 | mklink /D %BASE%\bpmn-js-diffing\node_modules\bpmn-moddle %BASE%\bpmn-moddle -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./lib/differ'); -------------------------------------------------------------------------------- /lib/change-handler.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | function isTracked(element) { 5 | return element.$instanceOf('bpmn:FlowElement') || 6 | element.$instanceOf('bpmn:MessageFlow') || 7 | element.$instanceOf('bpmn:Participant') || 8 | element.$instanceOf('bpmn:Lane'); 9 | } 10 | 11 | function ChangeHandler() { 12 | this._layoutChanged = {}; 13 | this._changed = {}; 14 | this._removed = {}; 15 | this._added = {}; 16 | } 17 | 18 | module.exports = ChangeHandler; 19 | 20 | 21 | ChangeHandler.prototype.removed = function(model, property, element, idx) { 22 | if (isTracked(element)) { 23 | this._removed[element.id] = element; 24 | } 25 | }; 26 | 27 | ChangeHandler.prototype.changed = function(model, property, newValue, oldValue) { 28 | 29 | if (model.$instanceOf('bpmndi:BPMNEdge') || model.$instanceOf('bpmndi:BPMNShape')) { 30 | this._layoutChanged[model.bpmnElement.id] = model.bpmnElement; 31 | } 32 | 33 | if (isTracked(model)) { 34 | var changed = this._changed[model.id]; 35 | 36 | if (!changed) { 37 | changed = this._changed[model.id] = { model: model, attrs: { } }; 38 | } 39 | 40 | if (oldValue !== undefined || newValue !== undefined) { 41 | changed.attrs[property] = { oldValue: oldValue, newValue: newValue }; 42 | } 43 | } 44 | }; 45 | 46 | ChangeHandler.prototype.added = function(model, property, element, idx) { 47 | if (isTracked(element)) { 48 | this._added[element.id] = element; 49 | } 50 | }; 51 | 52 | ChangeHandler.prototype.moved = function(model, property, oldIndex, newIndex) { }; 53 | -------------------------------------------------------------------------------- /lib/differ.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _ = require('lodash'); 4 | 5 | var jsondiffpatch = require('jsondiffpatch'); 6 | 7 | 8 | var ChangeHandler = require('./change-handler'); 9 | 10 | 11 | function Differ() { } 12 | 13 | module.exports = Differ; 14 | 15 | 16 | Differ.prototype.createDiff = function(a, b) { 17 | 18 | // create a configured instance, match objects by name 19 | var diffpatcher = jsondiffpatch.create({ 20 | objectHash: function(obj) { 21 | return obj.id || JSON.stringify(obj); 22 | } 23 | }); 24 | 25 | return diffpatcher.diff(a, b); 26 | }; 27 | 28 | 29 | Differ.prototype.diff = function(a, b, handler) { 30 | 31 | handler = handler || new ChangeHandler(); 32 | 33 | function walk(diff, model) { 34 | 35 | _.forEach(diff, function(d, key) { 36 | 37 | // is array 38 | if (d._t === 'a') { 39 | 40 | _.forEach(d, function(val, idx) { 41 | 42 | if (idx === '_t') { 43 | return; 44 | } 45 | 46 | var removed = /^_/.test(idx), 47 | added = !removed && _.isArray(val), 48 | moved = removed && val[0] === ''; 49 | 50 | idx = parseInt(removed ? idx.slice(1) : idx, 10); 51 | 52 | if (added || (removed && !moved)) { 53 | handler[removed ? 'removed' : 'added'](model, key, val[0], idx); 54 | } else 55 | if (moved) { 56 | handler.moved(model, key, val[1], val[2]); 57 | } else { 58 | walk(val, model[key][idx]); 59 | } 60 | }); 61 | } else { 62 | if (_.isArray(d)) { 63 | handler.changed(model, key, d[0], d[1]); 64 | } else { 65 | handler.changed(model, key); 66 | walk(d, model[key]); 67 | } 68 | } 69 | }); 70 | } 71 | 72 | var diff = this.createDiff(a, b); 73 | 74 | walk(diff, b, handler); 75 | 76 | return handler; 77 | }; 78 | 79 | 80 | module.exports.diff = function(a, b, handler) { 81 | return new Differ().diff(a, b, handler); 82 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bpmn-js-diffing", 3 | "version": "0.0.0", 4 | "description": "Visual diffing of BPMN 2.0 diagrams", 5 | "main": "app/app.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/bpmn-io/bpmn-js-diffing" 9 | }, 10 | "keywords": [ 11 | "bpmnjs" 12 | ], 13 | "author": { 14 | "name": "Nico Rehwaldt", 15 | "url": "https://github.com/Nikku" 16 | }, 17 | "contributors": [ 18 | { 19 | "name": "bpmn.io contributors", 20 | "url": "https://github.com/bpmn-io" 21 | } 22 | ], 23 | "license": "MIT", 24 | "browser": { 25 | "fs": false 26 | }, 27 | "devDependencies": { 28 | "brfs": "^1.2.0", 29 | "grunt": "~0.4.4", 30 | "grunt-contrib-watch": "~0.5.0", 31 | "grunt-contrib-connect": "~0.6.0", 32 | "grunt-contrib-jshint": "~0.7.2", 33 | "grunt-contrib-copy": "~0.5.0", 34 | "grunt-browserify": "^2.1.4", 35 | "karma": "^0.12.21", 36 | "karma-chrome-launcher": "~0.1.2", 37 | "karma-phantomjs-launcher": "0.1.2", 38 | "karma-ie-launcher": "~0.1.4", 39 | "karma-firefox-launcher": "~0.1.3", 40 | "karma-bro": "~0.6.0", 41 | "mocha": "^1.21.4", 42 | "karma-mocha": "^0.1.7", 43 | "chai": "^1.9.1", 44 | "karma-chai": "^0.1.0", 45 | "bpmn-js": "^0.4.0", 46 | "jsondiffpatch": "^0.1.8", 47 | "load-grunt-tasks": "~0.3.0", 48 | "grunt-karma": "^0.8.3" 49 | }, 50 | "dependencies": { 51 | "bpmn-moddle": "^0.3.0", 52 | "bpmn-js": "^0.4.1", 53 | "jquery": "^2.1.0", 54 | "lodash": "^2.4.0", 55 | "grunt-jsdoc": "^0.5.6" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /resources/pizza-collaboration/new.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | _6-450 9 | _6-652 10 | _6-695 11 | ManualTask_1 12 | 13 | 14 | _6-463 15 | 16 | 17 | _6-514 18 | _6-565 19 | _6-616 20 | 21 | 22 | 23 | _6-630 24 | 25 | 26 | 27 | _6-630 28 | _6-693 29 | 30 | 31 | 32 | _6-693 33 | _6-632 34 | 35 | 36 | _6-632 37 | _6-634 38 | 39 | 40 | _6-634 41 | _6-636 42 | 43 | 44 | _6-636 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | _6-420 59 | 60 | 61 | _6-420 62 | _6-430 63 | _6-422 64 | _6-424 65 | 66 | 67 | _6-422 68 | _6-428 69 | 70 | 71 | 72 | _6-424 73 | _6-426 74 | 75 | 76 | 77 | 78 | 79 | _6-426 80 | _6-430 81 | 82 | 83 | _6-428 84 | _6-434 85 | 86 | 87 | _6-434 88 | _6-436 89 | 90 | 91 | _6-436 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | -------------------------------------------------------------------------------- /resources/pizza-collaboration/old.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | _6-450 9 | _6-652 10 | _6-674 11 | _6-695 12 | 13 | 14 | _6-463 15 | 16 | 17 | _6-514 18 | _6-565 19 | _6-616 20 | 21 | 22 | 23 | _6-630 24 | 25 | 26 | 27 | _6-630 28 | _6-691 29 | _6-693 30 | 31 | 32 | _6-691 33 | _6-746 34 | _6-748 35 | 36 | 37 | 38 | _6-748 39 | _6-746 40 | 41 | 42 | _6-693 43 | _6-632 44 | 45 | 46 | _6-632 47 | _6-634 48 | 49 | 50 | _6-634 51 | _6-636 52 | 53 | 54 | _6-636 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | _6-125 70 | 71 | 72 | _6-125 73 | _6-178 74 | 75 | 76 | _6-178 77 | _6-420 78 | 79 | 80 | _6-420 81 | _6-430 82 | _6-422 83 | _6-424 84 | 85 | 86 | _6-422 87 | _6-428 88 | 89 | 90 | 91 | _6-424 92 | _6-426 93 | 94 | 95 | 96 | 97 | 98 | _6-426 99 | _6-430 100 | 101 | 102 | _6-428 103 | _6-434 104 | 105 | 106 | _6-434 107 | _6-436 108 | 109 | 110 | _6-436 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | -------------------------------------------------------------------------------- /resources/pizza-collaboration/start-event-new.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /resources/pizza-collaboration/start-event-old.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /resources/simple/diff.json: -------------------------------------------------------------------------------- 1 | { 2 | "diagrams":{ 3 | "0":{ 4 | "plane":{ 5 | "planeElement":{ 6 | "10":{ 7 | "label":[ 8 | { 9 | "$type":"bpmndi:BPMNLabel", 10 | "bounds":{ 11 | "$type":"dc:Bounds", 12 | "height":6, 13 | "width":6, 14 | "x":645, 15 | "y":304 16 | } 17 | } 18 | ], 19 | "waypoint":{ 20 | "0":[ 21 | { 22 | "$type":"dc:Point", 23 | "x":623, 24 | "y":304 25 | } 26 | ], 27 | "1":[ 28 | { 29 | "$type":"dc:Point", 30 | "x":698, 31 | "y":304 32 | } 33 | ], 34 | "2":[ 35 | { 36 | "$type":"dc:Point", 37 | "x":698, 38 | "y":112 39 | } 40 | ], 41 | "_0":[ 42 | { 43 | "$type":"dc:Point", 44 | "x":623, 45 | "y":87 46 | }, 47 | 0, 48 | 0 49 | ], 50 | "_1":[ 51 | { 52 | "$type":"dc:Point", 53 | "x":673, 54 | "y":87 55 | }, 56 | 0, 57 | 0 58 | ], 59 | "_t":"a" 60 | } 61 | }, 62 | "7":{ 63 | "bounds":{ 64 | "y":[ 65 | 47, 66 | 264 67 | ] 68 | } 69 | }, 70 | "8":{ 71 | "label":[ 72 | { 73 | "$type":"bpmndi:BPMNLabel", 74 | "bounds":{ 75 | "$type":"dc:Bounds", 76 | "height":6, 77 | "width":6, 78 | "x":445, 79 | "y":137 80 | } 81 | } 82 | ], 83 | "waypoint":{ 84 | "0":[ 85 | { 86 | "$type":"dc:Point", 87 | "x":448, 88 | "y":112 89 | } 90 | ], 91 | "1":[ 92 | { 93 | "$type":"dc:Point", 94 | "x":448, 95 | "y":304 96 | } 97 | ], 98 | "2":[ 99 | { 100 | "$type":"dc:Point", 101 | "x":523, 102 | "y":304 103 | } 104 | ], 105 | "_0":[ 106 | { 107 | "$type":"dc:Point", 108 | "x":473, 109 | "y":87 110 | }, 111 | 0, 112 | 0 113 | ], 114 | "_1":[ 115 | { 116 | "$type":"dc:Point", 117 | "x":523, 118 | "y":87 119 | }, 120 | 0, 121 | 0 122 | ], 123 | "_t":"a" 124 | } 125 | }, 126 | "_t":"a" 127 | } 128 | } 129 | }, 130 | "_t":"a" 131 | }, 132 | "rootElements":{ 133 | "0":{ 134 | "flowElements":{ 135 | "3":{ 136 | "name":[ 137 | "Service 2", 138 | "RANDOM SERVICE" 139 | ] 140 | }, 141 | "_10":[ 142 | "", 143 | 15, 144 | 3 145 | ], 146 | "_7":[ 147 | "", 148 | 14, 149 | 3 150 | ], 151 | "_t":"a" 152 | } 153 | }, 154 | "_t":"a" 155 | } 156 | } -------------------------------------------------------------------------------- /resources/simple/new.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SequenceFlow_1 6 | 7 | 8 | SequenceFlow_1 9 | SequenceFlow_2 10 | 11 | 12 | 13 | SequenceFlow_2 14 | SequenceFlow_3 15 | 16 | 17 | 18 | SequenceFlow_3 19 | SequenceFlow_4 20 | SequenceFlow_6 21 | 22 | 23 | 24 | 25 | SequenceFlow_5 26 | SequenceFlow_7 27 | SequenceFlow_8 28 | 29 | 30 | SequenceFlow_6 31 | SequenceFlow_7 32 | 33 | 34 | 35 | 36 | SequenceFlow_8 37 | 38 | 39 | 40 | SequenceFlow_4 41 | SequenceFlow_5 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /resources/simple/new_removed.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SequenceFlow_3 7 | 8 | 9 | SequenceFlow_3 10 | SequenceFlow_4 11 | SequenceFlow_6 12 | 13 | 14 | 15 | 16 | SequenceFlow_5 17 | SequenceFlow_7 18 | SequenceFlow_8 19 | 20 | 21 | SequenceFlow_6 22 | SequenceFlow_7 23 | 24 | 25 | 26 | 27 | SequenceFlow_8 28 | 29 | 30 | 31 | SequenceFlow_4 32 | SequenceFlow_5 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /resources/simple/old.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SequenceFlow_1 6 | 7 | 8 | SequenceFlow_1 9 | SequenceFlow_2 10 | 11 | 12 | 13 | SequenceFlow_2 14 | SequenceFlow_3 15 | 16 | 17 | 18 | SequenceFlow_3 19 | SequenceFlow_4 20 | SequenceFlow_6 21 | 22 | 23 | 24 | SequenceFlow_4 25 | SequenceFlow_5 26 | 27 | 28 | 29 | SequenceFlow_5 30 | SequenceFlow_7 31 | SequenceFlow_8 32 | 33 | 34 | 35 | SequenceFlow_6 36 | SequenceFlow_7 37 | 38 | 39 | 40 | 41 | SequenceFlow_8 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /test/config/karma.unit.js: -------------------------------------------------------------------------------- 1 | module.exports = function(karma) { 2 | karma.set({ 3 | 4 | basePath: '../../', 5 | 6 | frameworks: [ 'browserify', 'mocha', 'chai' ], 7 | 8 | files: [ 9 | 'test/spec/**/*.js' 10 | ], 11 | 12 | preprocessors: { 13 | 'test/spec/**/*.js': [ 'browserify' ] 14 | }, 15 | 16 | reporters: [ 'progress' ], 17 | 18 | browsers: [ 'PhantomJS' ], 19 | 20 | browserNoActivityTimeout: 20000, 21 | 22 | singleRun: false, 23 | autoWatch: true, 24 | 25 | // browserify configuration 26 | browserify: { 27 | transform: [ [ 'brfs', { global: true } ] ], 28 | debug: true 29 | } 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /test/fixtures/add/after.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SequenceFlow_1 6 | 7 | 8 | SequenceFlow_1 9 | SequenceFlow_2 10 | 11 | 12 | 13 | SequenceFlow_2 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /test/fixtures/add/before.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SequenceFlow_1 6 | 7 | 8 | SequenceFlow_1 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /test/fixtures/change/after.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SequenceFlow_1 6 | 7 | 8 | SequenceFlow_1 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /test/fixtures/change/before.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SequenceFlow_1 6 | 7 | 8 | SequenceFlow_1 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /test/fixtures/collaboration/after.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test/fixtures/collaboration/before.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Task_1 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /test/fixtures/layout-change/after.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SequenceFlow_1 6 | 7 | 8 | 9 | SequenceFlow_1 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /test/fixtures/layout-change/before.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SequenceFlow_1 6 | 7 | 8 | SequenceFlow_1 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /test/fixtures/remove/after.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/fixtures/remove/before.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SequenceFlow_1 6 | 7 | 8 | SequenceFlow_1 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /test/spec/differ.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var TestHelper = require('bpmn-js/test/TestHelper'); 4 | 5 | 6 | var _ = require('lodash'); 7 | 8 | var fs = require('fs'); 9 | 10 | 11 | var BpmnModdle = require('bpmn-moddle'); 12 | 13 | var Differ = require('../../lib/differ'), 14 | SimpleChangeHandler = require('../../lib/change-handler'); 15 | 16 | 17 | TestHelper.insertCSS('diff.css', fs.readFileSync('assets/diff.css', 'utf-8')); 18 | 19 | 20 | function importDiagrams(a, b, done) { 21 | 22 | new BpmnModdle().fromXML(a, function(err, adefs) { 23 | 24 | if (err) { 25 | return done(err); 26 | } 27 | 28 | new BpmnModdle().fromXML(b, function(err, bdefs) { 29 | if (err) { 30 | return done(err); 31 | } else { 32 | return done(null, adefs, bdefs); 33 | } 34 | }); 35 | }); 36 | } 37 | 38 | 39 | function diff(a, b, done) { 40 | 41 | importDiagrams(a, b, function(err, adefs, bdefs) { 42 | if (err) { 43 | return done(err); 44 | } 45 | 46 | // given 47 | var handler = new SimpleChangeHandler(); 48 | 49 | // when 50 | new Differ().diff(adefs, bdefs, handler); 51 | 52 | done(err, handler, adefs, bdefs); 53 | }); 54 | 55 | } 56 | 57 | 58 | describe('diffing', function() { 59 | 60 | describe('diff', function() { 61 | 62 | it('should discover add', function(done) { 63 | 64 | var aDiagram = fs.readFileSync('test/fixtures/add/before.bpmn', 'utf-8'); 65 | var bDiagram = fs.readFileSync('test/fixtures/add/after.bpmn', 'utf-8'); 66 | 67 | // when 68 | diff(aDiagram, bDiagram, function(err, results, aDefinitions, bDefinitions) { 69 | 70 | if (err) { 71 | return done(err); 72 | } 73 | 74 | 75 | // then 76 | expect(results._added).to.have.keys([ 'EndEvent_1', 'SequenceFlow_2' ]); 77 | expect(results._removed).to.eql({}); 78 | expect(results._layoutChanged).to.eql({}); 79 | expect(results._changed).to.eql({}); 80 | 81 | done(); 82 | }); 83 | 84 | }); 85 | 86 | 87 | it('should discover remove', function(done) { 88 | 89 | var aDiagram = fs.readFileSync('test/fixtures/remove/before.bpmn', 'utf-8'); 90 | var bDiagram = fs.readFileSync('test/fixtures/remove/after.bpmn', 'utf-8'); 91 | 92 | // when 93 | diff(aDiagram, bDiagram, function(err, results, aDefinitions, bDefinitions) { 94 | 95 | if (err) { 96 | return done(err); 97 | } 98 | 99 | // then 100 | expect(results._added).to.eql({}); 101 | expect(results._removed).to.have.keys([ 'Task_1', 'SequenceFlow_1' ]); 102 | expect(results._layoutChanged).to.eql({}); 103 | expect(results._changed).to.eql({}); 104 | 105 | done(); 106 | }); 107 | 108 | }); 109 | 110 | 111 | it('should discover change', function(done) { 112 | 113 | var aDiagram = fs.readFileSync('test/fixtures/change/before.bpmn', 'utf-8'); 114 | var bDiagram = fs.readFileSync('test/fixtures/change/after.bpmn', 'utf-8'); 115 | 116 | // when 117 | diff(aDiagram, bDiagram, function(err, results, aDefinitions, bDefinitions) { 118 | 119 | if (err) { 120 | return done(err); 121 | } 122 | 123 | // then 124 | expect(results._added).to.eql({}); 125 | expect(results._removed).to.eql({}); 126 | expect(results._layoutChanged).to.eql({}); 127 | expect(results._changed).to.have.keys([ 'Task_1' ]); 128 | 129 | expect(results._changed['Task_1'].attrs).to.deep.eql({ 130 | name: { oldValue: undefined, newValue: 'TASK'} 131 | }); 132 | 133 | done(); 134 | }); 135 | 136 | }); 137 | 138 | 139 | it('should discover layout-change', function(done) { 140 | 141 | var aDiagram = fs.readFileSync('test/fixtures/layout-change/before.bpmn', 'utf-8'); 142 | var bDiagram = fs.readFileSync('test/fixtures/layout-change/after.bpmn', 'utf-8'); 143 | 144 | // when 145 | diff(aDiagram, bDiagram, function(err, results, aDefinitions, bDefinitions) { 146 | 147 | if (err) { 148 | return done(err); 149 | } 150 | 151 | // then 152 | expect(results._added).to.eql({}); 153 | expect(results._removed).to.eql({}); 154 | expect(results._layoutChanged).to.have.keys([ 'Task_1', 'SequenceFlow_1' ]); 155 | expect(results._changed).to.eql({}); 156 | 157 | done(); 158 | }); 159 | 160 | }); 161 | 162 | }); 163 | 164 | 165 | describe('api', function() { 166 | 167 | it('should diff with default handler', function(done) { 168 | 169 | var aDiagram = fs.readFileSync('test/fixtures/layout-change/before.bpmn', 'utf-8'); 170 | var bDiagram = fs.readFileSync('test/fixtures/layout-change/after.bpmn', 'utf-8'); 171 | 172 | // when 173 | importDiagrams(aDiagram, bDiagram, function(err, aDefinitions, bDefinitions) { 174 | 175 | if (err) { 176 | return done(err); 177 | } 178 | 179 | // when 180 | var results = new Differ().diff(aDefinitions, bDefinitions); 181 | 182 | // then 183 | expect(results._added).to.eql({}); 184 | expect(results._removed).to.eql({}); 185 | expect(results._layoutChanged).to.have.keys([ 'Task_1', 'SequenceFlow_1' ]); 186 | expect(results._changed).to.eql({}); 187 | 188 | done(); 189 | }); 190 | 191 | }); 192 | 193 | 194 | it('should diff via static diff', function(done) { 195 | 196 | var aDiagram = fs.readFileSync('test/fixtures/layout-change/before.bpmn', 'utf-8'); 197 | var bDiagram = fs.readFileSync('test/fixtures/layout-change/after.bpmn', 'utf-8'); 198 | 199 | // when 200 | importDiagrams(aDiagram, bDiagram, function(err, aDefinitions, bDefinitions) { 201 | 202 | if (err) { 203 | return done(err); 204 | } 205 | 206 | // when 207 | var results = Differ.diff(aDefinitions, bDefinitions); 208 | 209 | // then 210 | expect(results._added).to.eql({}); 211 | expect(results._removed).to.eql({}); 212 | expect(results._layoutChanged).to.have.keys([ 'Task_1', 'SequenceFlow_1' ]); 213 | expect(results._changed).to.eql({}); 214 | 215 | done(); 216 | }); 217 | 218 | }); 219 | 220 | }); 221 | 222 | 223 | describe('scenarios', function() { 224 | 225 | 226 | it('should diff collaboration pools / lanes', function(done) { 227 | 228 | var aDiagram = fs.readFileSync('test/fixtures/collaboration/before.bpmn', 'utf-8'); 229 | var bDiagram = fs.readFileSync('test/fixtures/collaboration/after.bpmn', 'utf-8'); 230 | 231 | 232 | // when 233 | diff(aDiagram, bDiagram, function(err, results, aDefinitions, bDefinitions) { 234 | 235 | if (err) { 236 | return done(err); 237 | } 238 | 239 | // then 240 | expect(results._added).to.have.keys([ 'Participant_2' ]); 241 | expect(results._removed).to.have.keys([ 'Participant_1', 'Lane_1' ]); 242 | expect(results._layoutChanged).to.have.keys([ '_Participant_2', 'Lane_2' ]); 243 | expect(results._changed).to.have.keys([ 'Lane_2' ]); 244 | 245 | done(); 246 | }); 247 | }); 248 | 249 | 250 | it('should diff pizza collaboration StartEvent move', function(done) { 251 | 252 | var aDiagram = fs.readFileSync('resources/pizza-collaboration/start-event-old.bpmn', 'utf-8'); 253 | var bDiagram = fs.readFileSync('resources/pizza-collaboration/start-event-new.bpmn', 'utf-8'); 254 | 255 | 256 | // when 257 | diff(aDiagram, bDiagram, function(err, results, aDefinitions, bDefinitions) { 258 | 259 | if (err) { 260 | return done(err); 261 | } 262 | 263 | // then 264 | expect(results._added).to.eql({}); 265 | expect(results._removed).to.eql({}); 266 | expect(results._layoutChanged).to.have.keys([ '_6-61' ]); 267 | expect(results._changed).to.eql({}); 268 | 269 | done(); 270 | }); 271 | }); 272 | 273 | 274 | it('should diff pizza collaboration', function(done) { 275 | 276 | var aDiagram = fs.readFileSync('resources/pizza-collaboration/old.bpmn', 'utf-8'); 277 | var bDiagram = fs.readFileSync('resources/pizza-collaboration/new.bpmn', 'utf-8'); 278 | 279 | 280 | // when 281 | diff(aDiagram, bDiagram, function(err, results, aDefinitions, bDefinitions) { 282 | 283 | if (err) { 284 | return done(err); 285 | } 286 | 287 | // then 288 | expect(results._added).to.have.keys([ 289 | 'ManualTask_1', 290 | 'ExclusiveGateway_1' 291 | ]); 292 | 293 | expect(results._removed).to.have.keys([ 294 | '_6-674', '_6-691', '_6-746', '_6-748', '_6-74', '_6-125', '_6-178', '_6-642' 295 | ]); 296 | 297 | expect(results._layoutChanged).to.have.keys([ 298 | '_6-61' 299 | ]); 300 | 301 | expect(results._changed).to.have.keys([ '_6-127' ]); 302 | 303 | done(); 304 | }); 305 | }); 306 | 307 | }); 308 | }); --------------------------------------------------------------------------------