├── .eslintrc ├── .gitignore ├── README.md ├── bundling ├── .babelrc ├── .gitignore ├── .npmrc ├── README.md ├── package.json ├── public │ └── index.html ├── resources │ ├── claims.cmmn │ └── screenshot.png └── src │ └── app.js ├── pre-packaged └── README.md ├── properties-panel ├── .babelrc ├── .gitignore ├── .npmrc ├── Gruntfile.js ├── README.md ├── app │ ├── index.html │ └── index.js ├── package.json ├── resources │ ├── newDiagram.cmmn │ └── screenshot.png └── styles │ └── app.less └── starter ├── README.md ├── diagram.cmmn ├── modeler.html ├── viewer.html └── viewer.png /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "plugin:bpmn-io/es6" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.gitignore.io/api/node,odx 2 | 3 | dist 4 | 5 | ### Node ### 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 23 | .grunt 24 | 25 | # node-waf configuration 26 | .lock-wscript 27 | 28 | # Compiled binary addons (http://nodejs.org/api/addons.html) 29 | build/Release 30 | 31 | # Dependency directory 32 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 33 | node_modules 34 | 35 | ### OSX ### 36 | .DS_Store 37 | .AppleDouble 38 | .LSOverride 39 | 40 | # Icon must end with two \r 41 | Icon 42 | 43 | # Thumbnails 44 | ._* 45 | 46 | # Files that might appear in the root of a volume 47 | .DocumentRevisions-V100 48 | .fseventsd 49 | .Spotlight-V100 50 | .TemporaryItems 51 | .Trashes 52 | .VolumeIcon.icns 53 | 54 | # Directories potentially created on remote AFP share 55 | .AppleDB 56 | .AppleDesktop 57 | Network Trash Folder 58 | Temporary Items 59 | .apdisk 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cmmn-js Examples 2 | 3 | This repository contains a number of examples showing how use and integrate [cmmn-js](https://github.com/bpmn-io/cmmn-js) it into your applications. 4 | 5 | 6 | ## Starter 7 | 8 | * [starter](./starter) - Getting started with [cmmn-js](https://github.com/bpmn-io/cmmn-js) using our [pre-packaged distribution](./pre-packaged). 9 | 10 | 11 | ## Basics 12 | 13 | * [bundling](./bundling) - an example how to install bpmn-js via [npm](http://npmjs.org), use it in a node-style application and package it and the application code for the browser with [Browserify](http://browserify.org). 14 | * [properties-panel](https://github.com/bpmn-io/cmmn-js-examples/tree/master/properties-panel) - add a properties panel and edit execution related CMMN 1.1 properties. 15 | 16 | 17 | ## License 18 | 19 | MIT _(unless noted otherwise)_ 20 | 21 | -------------------------------------------------------------------------------- /bundling/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ "env" ] 3 | } -------------------------------------------------------------------------------- /bundling/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | public/app.bundled.js 3 | tmp/ -------------------------------------------------------------------------------- /bundling/.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false -------------------------------------------------------------------------------- /bundling/README.md: -------------------------------------------------------------------------------- 1 | # cmmn-js bundling example 2 | 3 | This example showcases how add [cmmn-js](https://github.com/cmmn-io/cmmn-js) 4 | into a node-style application and bundle it for the browser using 5 | [Browserify](http://browserify.org). 6 | 7 | 8 | ## About 9 | 10 | This example uses cmmn-js to embed the [claims](https://demo.bpmn.io/cmmn/s/claims-file) diagram into a web application. 11 | 12 | ![example screenshot](./resources/screenshot.png "Screenshot of the example application") 13 | 14 | 15 | ## Usage Summary 16 | 17 | Install cmmn-js via [npm](http://npmjs.org) 18 | 19 | ``` 20 | npm install --save cmmn-js 21 | ``` 22 | 23 | Use it in your application 24 | 25 | ```javascript 26 | var CmmnViewer = require('cmmn-js'); 27 | 28 | var viewer = new CmmnViewer({ 29 | container: '#canvas' 30 | }); 31 | 32 | viewer.importXML(claimsDiagram, function(err) { 33 | 34 | if (!err) { 35 | console.log('success!'); 36 | viewer.get('canvas').zoom('fit-viewport'); 37 | } else { 38 | console.log('something went wrong:', err); 39 | } 40 | }); 41 | ``` 42 | 43 | Bundle the `src/app.js` file for the browser with browserify: 44 | 45 | ``` 46 | browserify src/app.js -t brfs -o public/app.bundled.js 47 | ``` 48 | 49 | __Note:__ You may use another module bundler such as [Webpack](https://webpack.js.org/), 50 | too. 51 | 52 | 53 | ## Building the Example 54 | 55 | Initialize the project dependencies via 56 | 57 | ``` 58 | npm install 59 | ``` 60 | 61 | To create the sample distribution in the `public` folder run 62 | 63 | ``` 64 | npm run all 65 | ``` 66 | 67 | 68 | ## License 69 | 70 | MIT -------------------------------------------------------------------------------- /bundling/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cmmn-js-example-commonjs", 3 | "version": "0.0.0", 4 | "description": "An example how to use cmmn-js with CommonJS + npm + browserify", 5 | "main": "app/app.js", 6 | "scripts": { 7 | "all": "run-s bundle open", 8 | "bundle": "browserify src/app.js -t [ stringify --extensions [ .cmmn ] ] -g babelify -o public/app.bundled.js", 9 | "bundle:watch": "watchify src/app.js -t [ stringify --extensions [ .cmmn ] ] -g babelify -o public/app.bundled.js -v", 10 | "open": "opn ./public/index.html", 11 | "dev": "npm run bundle:watch" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/cmmn-io/cmmn-js-examples" 16 | }, 17 | "keywords": [ 18 | "cmmnjs-example" 19 | ], 20 | "author": { 21 | "name": "Nico Rehwaldt", 22 | "url": "https://github.com/nikku" 23 | }, 24 | "contributors": [ 25 | { 26 | "name": "bpmn.io contributors", 27 | "url": "https://github.com/cmmn-io" 28 | } 29 | ], 30 | "license": "MIT", 31 | "devDependencies": { 32 | "babel-core": "^6.26.0", 33 | "babel-preset-env": "^1.6.1", 34 | "babelify": "^8.0.0", 35 | "browserify": "^15.2.0", 36 | "npm-run-all": "^4.1.2", 37 | "opn-cli": "^3.1.0", 38 | "stringify": "^3.1.0", 39 | "watchify": "^3.10.0" 40 | }, 41 | "dependencies": { 42 | "cmmn-js": "^0.19.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /bundling/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | 19 | 20 | npm/browserify example - cmmn-js-examples 21 | 22 | 23 | 24 |

Clames File Viewer

25 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /bundling/resources/claims.cmmn: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 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 | complete 36 | 37 | 38 | 39 | 40 | complete 41 | 42 | 43 | 44 | 45 | 46 | complete 47 | 48 | 49 | 50 | 51 | complete 52 | 53 | 54 | 55 | 56 | complete 57 | 58 | 59 | 60 | 61 | complete 62 | 63 | 64 | 65 | 66 | complete 67 | 68 | 69 | 70 | 71 | complete 72 | 73 | 74 | 75 | 76 | 77 | 79 | 80 | 81 | 82 | 83 | 84 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | complete 97 | 98 | 99 | 100 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 110 | 111 | 112 | 113 | 114 | 115 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 130 | 131 | 133 | 134 | 135 | 136 | 137 | 139 | 140 | 141 | 142 | 143 | 145 | 146 | 147 | 148 | 149 | 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 | -------------------------------------------------------------------------------- /bundling/resources/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bpmn-io/cmmn-js-examples/d5e69d5e7a649d6e3dd4c185c22ec7ce29234a4f/bundling/resources/screenshot.png -------------------------------------------------------------------------------- /bundling/src/app.js: -------------------------------------------------------------------------------- 1 | // we use stringify to inline an example XML document 2 | import claimsDiagram from '../resources/claims.cmmn'; 3 | 4 | 5 | // require the viewer, make sure you added it to your project 6 | // dependencies via npm install --save cmmn-js 7 | var CmmnViewer = require('cmmn-js'); 8 | 9 | var viewer = new CmmnViewer({ 10 | container: '#canvas' 11 | }); 12 | 13 | viewer.importXML(claimsDiagram, function(err) { 14 | 15 | if (!err) { 16 | console.log('success!'); 17 | viewer.get('canvas').zoom('fit-viewport'); 18 | } else { 19 | console.log('something went wrong:', err); 20 | } 21 | }); -------------------------------------------------------------------------------- /pre-packaged/README.md: -------------------------------------------------------------------------------- 1 | # cmmn-js pre-packaged example 2 | 3 | This example showcases how to use the pre-packaged version(s) of [cmmn-js](https://github.com/bpmn-io/cmmn-js). 4 | 5 | 6 | ## About 7 | 8 | We provide pre-packaged versions of our toolkit via [unpkg](https://unpkg.com/cmmn-js/dist/). 9 | 10 | This example shows how to embed these resources to integrate a CMMN viewer or editor 11 | into a website. 12 | 13 | 14 | ## Embed pre-packaged Assets 15 | 16 | Download or simply include the relevant dependencies into your website: 17 | 18 | #### Viewer 19 | 20 | ```html 21 | 22 | ``` 23 | 24 | Download the complete [viewer example](https://cdn.staticaly.com/gh/bpmn-io/cmmn-js-examples/master/starter/viewer.html). 25 | 26 | #### Modeler 27 | 28 | ```html 29 | 30 | 31 | 32 | 33 | 34 | ``` 35 | 36 | Download the complete [modeler example](https://cdn.staticaly.com/gh/bpmn-io/cmmn-js-examples/master/starter/modeler.html). 37 | 38 | 39 | ## Use the Library 40 | 41 | The library is bundled as an UMD bundle and binds itself to the global `CmmnJS` 42 | variable. 43 | 44 | ```javascript 45 | var cmmnJS = new CmmnJS({ 46 | container: '#canvas' 47 | }); 48 | 49 | cmmnJS.importXML(someDiagram, function(err) { 50 | 51 | if (!err) { 52 | console.log('success!'); 53 | viewer.get('canvas').zoom('fit-viewport'); 54 | } else { 55 | console.log('something went wrong:', err); 56 | } 57 | }); 58 | ``` 59 | 60 | ## License 61 | 62 | MIT 63 | -------------------------------------------------------------------------------- /properties-panel/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ "env" ] 3 | } -------------------------------------------------------------------------------- /properties-panel/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ -------------------------------------------------------------------------------- /properties-panel/.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false -------------------------------------------------------------------------------- /properties-panel/Gruntfile.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = function(grunt) { 4 | 5 | require('load-grunt-tasks')(grunt); 6 | 7 | /** 8 | * Resolve external project resource as file path 9 | */ 10 | function resolvePath(project, file) { 11 | return path.join(path.dirname(require.resolve(project)), file); 12 | } 13 | 14 | grunt.initConfig({ 15 | 16 | browserify: { 17 | options: { 18 | browserifyOptions: { 19 | debug: true 20 | }, 21 | transform: [ 22 | [ 'stringify', { 23 | extensions: [ '.cmmn' ] 24 | } ], 25 | [ 'babelify', { 26 | global: true 27 | } ] 28 | ] 29 | }, 30 | watch: { 31 | options: { 32 | watch: true 33 | }, 34 | files: { 35 | 'dist/index.js': [ 'app/**/*.js' ] 36 | } 37 | }, 38 | app: { 39 | files: { 40 | 'dist/index.js': [ 'app/**/*.js' ] 41 | } 42 | } 43 | }, 44 | 45 | copy: { 46 | cmmn_js: { 47 | files: [ 48 | { 49 | expand: true, 50 | cwd: resolvePath('cmmn-js', 'dist/'), 51 | src: ['**/*.*', '!**/*.js'], 52 | dest: 'dist/vendor/cmmn-js/' 53 | } 54 | ] 55 | }, 56 | app: { 57 | files: [ 58 | { 59 | expand: true, 60 | cwd: 'app/', 61 | src: ['**/*.*', '!**/*.js'], 62 | dest: 'dist' 63 | } 64 | ] 65 | } 66 | }, 67 | 68 | less: { 69 | options: { 70 | dumpLineNumbers: 'comments', 71 | paths: [ 72 | 'node_modules' 73 | ] 74 | }, 75 | 76 | styles: { 77 | files: { 78 | 'dist/css/app.css': 'styles/app.less' 79 | } 80 | } 81 | }, 82 | 83 | watch: { 84 | options: { 85 | livereload: true 86 | }, 87 | 88 | samples: { 89 | files: [ 'app/**/*.*' ], 90 | tasks: [ 'copy:app' ] 91 | }, 92 | 93 | less: { 94 | files: [ 95 | 'styles/**/*.less', 96 | 'node_modules/cmmn-js-properties-panel/styles/**/*.less' 97 | ], 98 | tasks: [ 99 | 'less' 100 | ] 101 | }, 102 | }, 103 | 104 | connect: { 105 | livereload: { 106 | options: { 107 | port: 9013, 108 | livereload: true, 109 | hostname: 'localhost', 110 | open: true, 111 | base: [ 112 | 'dist' 113 | ] 114 | } 115 | } 116 | } 117 | }); 118 | 119 | // tasks 120 | 121 | grunt.registerTask('build', [ 'copy', 'less', 'browserify:app' ]); 122 | 123 | grunt.registerTask('auto-build', [ 124 | 'copy', 125 | 'less', 126 | 'browserify:watch', 127 | 'connect:livereload', 128 | 'watch' 129 | ]); 130 | 131 | grunt.registerTask('default', [ 'build' ]); 132 | }; 133 | -------------------------------------------------------------------------------- /properties-panel/README.md: -------------------------------------------------------------------------------- 1 | # cmmn-js Modeler + Properties Panel Example 2 | 3 | This example uses [cmmn-js](https://github.com/bpmn-io/cmmn-js) and [cmmn-js-properties-panel](https://github.com/bpmn-io/cmmn-js-properties-panel). It implements a CMMN 1.1 modeler that allows you to edit execution related properties via a properties panel. 4 | 5 | 6 | ## About 7 | 8 | This example is a node-style web application that builds an user interface around the cmmn-js CMMN 1.1 modeler. 9 | 10 | ![demo application screenshot](./resources/screenshot.png "Screenshot of the modeler + properties panel example") 11 | 12 | 13 | ## Usage 14 | 15 | Add the [properties panel](https://github.com/bpmn-io/cmmn-js-properties-panel) to your project: 16 | 17 | ``` 18 | npm install --save cmmn-js-properties-panel 19 | ``` 20 | 21 | Additionally, if you'd like to use [Camunda BPM](https://camunda.org) execution related properties, include the [camunda-cmmn-moddle](https://github.com/camunda/camunda-cmmn-moddle) dependency which tells the modeler about `camunda:XXX` extension properties: 22 | 23 | ``` 24 | npm install --save camunda-cmmn-moddle 25 | ``` 26 | 27 | Now extend the [cmmn-js](https://github.com/bpmm-io/cmmn-js) modeler with two properties panel related modules, the panel itself and a provider module that controls which properties are visible for each element. Additionally you must pass an element via `propertiesPanel.parent` into which the properties panel will be rendered (cf. [`app/index.js`](./app/index.js#L16) for details). 28 | 29 | ```javascript 30 | var propertiesPanelModule = require('cmmn-js-properties-panel'), 31 | // providing camunda executable properties, too 32 | propertiesProviderModule = require('cmmn-js-properties-panel/lib/provider/camunda'), 33 | camundaModdleDescriptor = require('camunda-cmmn-moddle/resources/camunda'); 34 | 35 | var bpmnModeler = new BpmnModeler({ 36 | container: '#js-canvas', 37 | propertiesPanel: { 38 | parent: '#js-properties-panel' 39 | }, 40 | additionalModules: [ 41 | propertiesPanelModule, 42 | propertiesProviderModule 43 | ], 44 | // needed if you'd like to maintain camunda:XXX properties in the properties panel 45 | moddleExtensions: { 46 | camunda: camundaModdleDescriptor 47 | } 48 | }); 49 | ``` 50 | 51 | 52 | ## Building the Example 53 | 54 | You need a [NodeJS](http://nodejs.org) development stack with [npm](https://npmjs.org) installed to build the project. 55 | 56 | To install all project dependencies execute 57 | 58 | ``` 59 | npm install 60 | ``` 61 | 62 | Build the example using [browserify](http://browserify.org) via 63 | 64 | ``` 65 | npm run all 66 | ``` 67 | 68 | You may also spawn a development setup by executing 69 | 70 | ``` 71 | npm run dev 72 | ``` 73 | 74 | Both tasks generate the distribution ready client-side modeler application into the `dist` folder. 75 | 76 | Serve the application locally or via a web server (nginx, apache, embedded). 77 | -------------------------------------------------------------------------------- /properties-panel/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | cmmn-js modeler demo 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | Drop CMMN diagram from your desktop or create a new diagram to get started. 16 |
17 |
18 | 19 |
20 |
21 |

Ooops, we could not display the CMMN 1.1 diagram.

22 | 23 |
24 | cause of the problem 25 | 

26 |         

27 |       

28 |     

29 | 
30 |     

31 |     

32 |   

33 | 
34 |   
49 | 
50 |   
51 | 
52 | 


--------------------------------------------------------------------------------
/properties-panel/app/index.js:
--------------------------------------------------------------------------------
  1 | import $ from 'jquery';
  2 | 
  3 | import CmmnModeler from 'cmmn-js/lib/Modeler';
  4 | 
  5 | import propertiesPanelModule from 'cmmn-js-properties-panel';
  6 | import propertiesProviderModule from 'cmmn-js-properties-panel/lib/provider/camunda';
  7 | import camundaModdleDescriptor from 'camunda-cmmn-moddle/resources/camunda';
  8 | 
  9 | import {
 10 |   debounce
 11 | } from 'min-dash';
 12 | 
 13 | import newDiagramXML from '../resources/newDiagram.cmmn';
 14 | 
 15 | 
 16 | var container = $('#js-drop-zone');
 17 | 
 18 | var cmmnModeler = new CmmnModeler({
 19 |   container: '#js-canvas',
 20 |   propertiesPanel: {
 21 |     parent: '#js-properties-panel'
 22 |   },
 23 |   additionalModules: [
 24 |     propertiesPanelModule,
 25 |     propertiesProviderModule
 26 |   ],
 27 |   moddleExtensions: {
 28 |     camunda: camundaModdleDescriptor
 29 |   }
 30 | });
 31 | 
 32 | function createNewDiagram() {
 33 |   openDiagram(newDiagramXML);
 34 | }
 35 | 
 36 | function openDiagram(xml) {
 37 | 
 38 |   cmmnModeler.importXML(xml, function(err) {
 39 | 
 40 |     if (err) {
 41 |       container
 42 |         .removeClass('with-diagram')
 43 |         .addClass('with-error');
 44 | 
 45 |       container.find('.error pre').text(err.message);
 46 | 
 47 |       console.error(err);
 48 |     } else {
 49 |       container
 50 |         .removeClass('with-error')
 51 |         .addClass('with-diagram');
 52 |     }
 53 | 
 54 | 
 55 |   });
 56 | }
 57 | 
 58 | function saveSVG(done) {
 59 |   cmmnModeler.saveSVG(done);
 60 | }
 61 | 
 62 | function saveDiagram(done) {
 63 | 
 64 |   cmmnModeler.saveXML({ format: true }, function(err, xml) {
 65 |     done(err, xml);
 66 |   });
 67 | }
 68 | 
 69 | function registerFileDrop(container, callback) {
 70 | 
 71 |   function handleFileSelect(e) {
 72 |     e.stopPropagation();
 73 |     e.preventDefault();
 74 | 
 75 |     var files = e.dataTransfer.files;
 76 | 
 77 |     var file = files[0];
 78 | 
 79 |     var reader = new FileReader();
 80 | 
 81 |     reader.onload = function(e) {
 82 | 
 83 |       var xml = e.target.result;
 84 | 
 85 |       callback(xml);
 86 |     };
 87 | 
 88 |     reader.readAsText(file);
 89 |   }
 90 | 
 91 |   function handleDragOver(e) {
 92 |     e.stopPropagation();
 93 |     e.preventDefault();
 94 | 
 95 |     e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
 96 |   }
 97 | 
 98 |   container.get(0).addEventListener('dragover', handleDragOver, false);
 99 |   container.get(0).addEventListener('drop', handleFileSelect, false);
100 | }
101 | 
102 | 
103 | ////// file drag / drop ///////////////////////
104 | 
105 | // check file api availability
106 | if (!window.FileList || !window.FileReader) {
107 |   window.alert(
108 |     'Looks like you use an older browser that does not support drag and drop. ' +
109 |     'Try using Chrome, Firefox or the Internet Explorer > 10.');
110 | } else {
111 |   registerFileDrop(container, openDiagram);
112 | }
113 | 
114 | // bootstrap diagram functions
115 | 
116 | $(function() {
117 | 
118 |   $('#js-create-diagram').click(function(e) {
119 |     e.stopPropagation();
120 |     e.preventDefault();
121 | 
122 |     createNewDiagram();
123 |   });
124 | 
125 |   var downloadLink = $('#js-download-diagram');
126 |   var downloadSvgLink = $('#js-download-svg');
127 | 
128 |   $('.buttons a').click(function(e) {
129 |     if (!$(this).is('.active')) {
130 |       e.preventDefault();
131 |       e.stopPropagation();
132 |     }
133 |   });
134 | 
135 |   function setEncoded(link, name, data) {
136 |     var encodedData = encodeURIComponent(data);
137 | 
138 |     if (data) {
139 |       link.addClass('active').attr({
140 |         'href': 'data:application/cmmn11-xml;charset=UTF-8,' + encodedData,
141 |         'download': name
142 |       });
143 |     } else {
144 |       link.removeClass('active');
145 |     }
146 |   }
147 | 
148 |   var exportArtifacts = debounce(function() {
149 | 
150 |     saveSVG(function(err, svg) {
151 |       setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg);
152 |     });
153 | 
154 |     saveDiagram(function(err, xml) {
155 |       setEncoded(downloadLink, 'diagram.cmmn', err ? null : xml);
156 |     });
157 |   }, 500);
158 | 
159 |   cmmnModeler.on('commandStack.changed', exportArtifacts);
160 | });
161 | 


--------------------------------------------------------------------------------
/properties-panel/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cmmn-js-example-properties-panel",
 3 |   "version": "0.0.0",
 4 |   "description": "A cmmn-js modeler + properties panel example",
 5 |   "main": "app/index.js",
 6 |   "scripts": {
 7 |     "all": "grunt",
 8 |     "dev": "grunt auto-build"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/bpmn-io/cmmn-js-examples"
13 |   },
14 |   "keywords": [
15 |     "cmmnjs-example"
16 |   ],
17 |   "author": {
18 |     "name": "Nico Rehwaldt",
19 |     "url": "https://github.com/nikku"
20 |   },
21 |   "contributors": [
22 |     {
23 |       "name": "bpmn.io contributors",
24 |       "url": "https://github.com/bpmn-io"
25 |     }
26 |   ],
27 |   "license": "MIT",
28 |   "devDependencies": {
29 |     "babel-core": "^6.26.0",
30 |     "babel-preset-env": "^1.6.1",
31 |     "babelify": "^8.0.0",
32 |     "grunt": "~1.0.1",
33 |     "grunt-browserify": "^5.0.0",
34 |     "grunt-cli": "^1.2.0",
35 |     "grunt-contrib-connect": "~1.0.2",
36 |     "grunt-contrib-copy": "~1.0.0",
37 |     "grunt-contrib-less": "^1.0.1",
38 |     "grunt-contrib-watch": "~1.0.0",
39 |     "load-grunt-tasks": "~3.5.0",
40 |     "stringify": "^3.1.0"
41 |   },
42 |   "dependencies": {
43 |     "camunda-cmmn-moddle": "^1.0.0",
44 |     "cmmn-js": "^0.19.2",
45 |     "cmmn-js-properties-panel": "^0.5.0",
46 |     "jquery": "^3.3.1",
47 |     "lodash": "^3.0.0"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/properties-panel/resources/newDiagram.cmmn:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |       
 6 |       
 7 |     
 8 |   
 9 |   
10 |     
11 |       
12 |       
13 |         
14 |         
15 |       
16 |       
17 |         
18 |         
19 |       
20 |     
21 |   
22 | 
23 | 


--------------------------------------------------------------------------------
/properties-panel/resources/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bpmn-io/cmmn-js-examples/d5e69d5e7a649d6e3dd4c185c22ec7ce29234a4f/properties-panel/resources/screenshot.png


--------------------------------------------------------------------------------
/properties-panel/styles/app.less:
--------------------------------------------------------------------------------
  1 | @import "cmmn-js-properties-panel/styles/properties";
  2 | 
  3 | * {
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | body,
  8 | html {
  9 | 
 10 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 11 | 
 12 |   font-size: 12px;
 13 | 
 14 |   height: 100%;
 15 |   max-height: 100%;
 16 |   padding: 0;
 17 |   margin: 0;
 18 | }
 19 | 
 20 | a:link {
 21 |   text-decoration: none;
 22 | }
 23 | 
 24 | .content {
 25 |   position: relative;
 26 |   width: 100%;
 27 |   height: 100%;
 28 | 
 29 |   > .message {
 30 |     width: 100%;
 31 |     height: 100%;
 32 |     text-align: center;
 33 |     display: table;
 34 | 
 35 |     font-size: 16px;
 36 |     color: #111;
 37 | 
 38 |     .note {
 39 |       vertical-align: middle;
 40 |       text-align: center;
 41 |       display: table-cell;
 42 |     }
 43 | 
 44 |     .error {
 45 |       .details {
 46 |         max-width: 500px;
 47 |         font-size: 12px;
 48 |         margin: 20px auto;
 49 |         text-align: left;
 50 |       }
 51 | 
 52 |       pre {
 53 |         border: solid 1px #CCC;
 54 |         background: #EEE;
 55 |         padding: 10px;
 56 |       }
 57 |     }
 58 |   }
 59 |   &:not(.with-error) .error,
 60 |   &.with-error .intro,
 61 |   &.with-diagram .intro {
 62 |     display: none;
 63 |   }
 64 | 
 65 |   .canvas {
 66 |     position: absolute;
 67 |     top: 0;
 68 |     left: 0;
 69 |     right: 0;
 70 |     bottom: 0;
 71 |   }
 72 | 
 73 |   .canvas,
 74 |   &.with-error .canvas {
 75 |     visibility: hidden;
 76 |   }
 77 | 
 78 |   &.with-diagram .canvas {
 79 |     visibility: visible;
 80 |   }
 81 | }
 82 | 
 83 | 
 84 | .buttons {
 85 |   position: fixed;
 86 |   bottom: 20px;
 87 |   left: 20px;
 88 | 
 89 |   padding: 0;
 90 |   margin: 0;
 91 |   list-style: none;
 92 | 
 93 |   > li {
 94 |     display: inline-block;
 95 |     margin-right: 10px;
 96 | 
 97 |     > a {
 98 |       background: #DDD;
 99 |       border: solid 1px #666;
100 |       display: inline-block;
101 |       padding: 5px;
102 |     }
103 |   }
104 | 
105 |   a {
106 |     opacity: 0.3;
107 |   }
108 | 
109 |   a.active {
110 |     opacity: 1.0;
111 |   }
112 | }
113 | 
114 | #js-properties-panel {
115 |   position: absolute;
116 |   top: 0;
117 |   bottom: 0;
118 |   right: 0;
119 |   width: 260px;
120 |   z-index: 10;
121 |   border-left: 1px solid #ccc;
122 |   overflow: auto;
123 |   &:empty {
124 |     display: none;
125 |   }
126 |   > .djs-properties-panel {
127 |     padding-bottom: 70px;
128 |     min-height:100%;
129 |   }
130 | }
131 | 


--------------------------------------------------------------------------------
/starter/README.md:
--------------------------------------------------------------------------------
1 | # cmmn-js starter
2 | 
3 | Try out our toolkit by downloading the [viewer](https://cdn.staticaly.com/gh/bpmn-io/cmmn-js-examples/master/starter/viewer.html) or [modeler](https://cdn.staticaly.com/gh/bpmn-io/cmmn-js-examples/master/starter/modeler.html) example.
4 | 
5 | 
6 | [![viewer example screenshot](./viewer.png)](https://cdn.staticaly.com/gh/bpmn-io/cmmn-js-examples/master/starter/viewer.html)
7 | 
8 | _Screenshot of the [viewer example](https://cdn.staticaly.com/gh/bpmn-io/cmmn-js-examples/master/starter/viewer.html)._


--------------------------------------------------------------------------------
/starter/diagram.cmmn:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  9 |     
 10 |         
 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 |                     complete
 36 |                 
 37 |             
 38 |             
 39 |                 
 40 |                     complete
 41 |                 
 42 |             
 43 |             
 44 |             
 45 |                 
 46 |                     complete
 47 |                 
 48 |             
 49 |             
 50 |                 
 51 |                     complete
 52 |                 
 53 |             
 54 |             
 55 |                 
 56 |                     complete
 57 |                 
 58 |             
 59 |             
 60 |                 
 61 |                     complete
 62 |                 
 63 |             
 64 |             
 65 |                 
 66 |                     complete
 67 |                 
 68 |             
 69 |             
 70 |                 
 71 |                     complete
 72 |                 
 73 |             
 74 |             
 75 |                 
 76 |             
 77 |             
 79 |                 
 80 |                     
 81 |                 
 82 |             
 83 |             
 84 |             
 86 |             
 87 |             
 88 |                 
 89 |                     
 90 |                 
 91 |                 
 92 |                     
 93 |                 
 94 |                 
 95 |                     
 96 |                         complete
 97 |                     
 98 |                 
 99 |                 
100 |                 
102 |                     
103 |                         
104 |                         
105 |                         
106 |                     
107 |                 
108 |                 
110 |                     
111 |                         
112 |                     
113 |                 
114 |             
115 |             
118 |             
119 |                 
120 |                     
121 |                     
122 |                     
123 |                 
124 |                 
125 |                     
126 |                 
127 |                 
128 |                 
130 |             
131 |             
133 |                 
134 |                     
135 |                 
136 |             
137 |             
139 |                 
140 |                     
141 |                 
142 |             
143 |             
145 |                 
146 |                     
147 |                 
148 |             
149 |             
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 | 


--------------------------------------------------------------------------------
/starter/modeler.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |   
  4 |     
  5 |     Hello World
  6 | 
  7 |     
  8 |     
  9 |     
 10 | 
 11 |     
 12 |     
 13 | 
 14 |     
 15 |     
 16 | 
 17 |     
 18 |     
 47 |   
 48 |   
 49 |     

 50 | 
 51 |     
 52 | 
 53 |     
125 |     
135 |   
136 | 


--------------------------------------------------------------------------------
/starter/viewer.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     Hello World
 6 | 
 7 |     
 8 |     
 9 | 
10 |     
11 |     
12 | 
13 |     
14 |     
37 |   
38 |   
39 |     

40 | 
41 |     
91 |     
97 |   
98 | 


--------------------------------------------------------------------------------
/starter/viewer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bpmn-io/cmmn-js-examples/d5e69d5e7a649d6e3dd4c185c22ec7ce29234a4f/starter/viewer.png


--------------------------------------------------------------------------------