feat(modeler): add modeler example

This commit restores the modeler example that has previously been
removed from bpmn-io/bpmn-js.

Author: nikku

modeler/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+tmp/

modeler/.jshintrc

@@ -0,0 +1,37 @@
+{
+  "bitwise" : true,
+  "curly" : true,
+  "eqeqeq" : true,
+  "forin" : true,
+  "freeze" : true,
+  "immed" : true,
+  "latedef" : false,
+  "newcap" : true,
+  "noarg" : true,
+  "noempty" : false,
+  "nonew" : true,
+  "quotmark" : true,
+  "undef" : true,
+  "strict" : true,
+  "trailing" : true,
+  "maxdepth" : 5,
+  "maxstatements" : 50,
+  "maxcomplexity" : 13,
+  "maxlen" : 120,
+  "browser" : true,
+  "node" : true,
+  "debug": true,
+  "strict": false,
+  "globals": {
+    "console": true,
+    "require": false,
+    "module": false,
+    "describe": false,
+    "it": false,
+    "jasmine": true,
+    "expect": true,
+    "fail": true,
+    "beforeEach": true,
+    "afterEach": true
+  }
+}

modeler/Gruntfile.js

@@ -0,0 +1,97 @@
+module.exports = function(grunt) {
+
+  require('load-grunt-tasks')(grunt);
+
+
+  // project configuration
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+
+    config: {
+      sources: 'app',
+      dist: 'dist'
+    },
+
+    jshint: {
+      src: [
+        ['<%=config.sources %>']
+      ],
+      options: {
+        jshintrc: true
+      }
+    },
+
+    browserify: {
+      options: {
+        transform: [ 'brfs' ],
+        browserifyOptions: {
+          builtins: [ 'fs' ],
+          commondir: false
+        },
+        bundleOptions: {
+          detectGlobals: false,
+          insertGlobalVars: [],
+          debug: true
+        }
+      },
+      watch: {
+        options: {
+          watch: true
+        },
+        files: {
+          '<%= config.dist %>/index.js': [ '<%= config.sources %>/**/*.js' ]
+        }
+      },
+      app: {
+        files: {
+          '<%= config.dist %>/index.js': [ '<%= config.sources %>/**/*.js' ]
+        }
+      }
+    },
+    copy: {
+      app: {
+        files: [
+          {
+            expand: true,
+            cwd: '<%= config.sources %>/',
+            src: ['**/*.*', '!**/*.js'],
+            dest: '<%= config.dist %>'
+          }
+        ]
+      }
+    },
+    watch: {
+      samples: {
+        files: [ '<%= config.sources %>/**/*.*' ],
+        tasks: [ 'copy:app' ]
+      },
+    },
+    connect: {
+      options: {
+        port: 9013,
+        livereload: 9014,
+        hostname: 'localhost'
+      },
+      livereload: {
+        options: {
+          open: true,
+          base: [
+            '<%= config.dist %>'
+          ]
+        }
+      }
+    }
+  });
+
+  // tasks
+
+  grunt.registerTask('build', [ 'browserify:app', 'copy:app' ]);
+
+  grunt.registerTask('auto-build', [
+    'browserify:watch',
+    'connect:livereload',
+    'watch'
+  ]);
+
+  grunt.registerTask('default', [ 'jshint', 'build' ]);
+};

modeler/README.md

@@ -0,0 +1,36 @@
+# bpmn-js Modeler Example
+
+This example uses [bpmn-js](https://github.com/bpmn-io/bpmn-js) to implement a modeler for BPMN 2.0 process diagrams. It serves as the basis of the bpmn-js demo application available at [demo.bpmn.io](http://demo.bpmn.io).
+
+## About
+
+This example is a node-style web application that builds a user interface around the bpmn-js BPMN 2.0 modeler.
+
+![demo application screenshot](https://raw.githubusercontent.com/bpmn-io/bpmn-js-examples/master/modeler/docs/screenshot.png "Screenshot of the example application")
+
+
+## Building
+
+You need a [NodeJS](http://nodejs.org) development stack with [npm](https://npmjs.org) and [grunt](http://gruntjs.com) installed to build the project.
+
+To install all project dependencies execute
+
+```
+npm install
+```
+
+Build the application (including [bpmn-js](https://github.com/bpmn-io/bpmn-js)) using [browserify](http://browserify.org) via
+
+```
+grunt
+```
+
+You may also spawn a development setup by executing
+
+```
+grunt auto-build
+```
+
+Both tasks generate the distribution ready client-side modeler application into the `dist` folder.
+
+Serve the application locally or via a web server (nginx, apache, embedded).

modeler/app/css/app.css

@@ -0,0 +1,96 @@
+* {
+  box-sizing: border-box;
+}
+
+body, html {
+
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  font-size: 12px;
+
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+a:link {
+  text-decoration: none;
+}
+
+.content,
+.content > div {
+  width: 100%;
+  height: 100%;
+}
+
+.content > .message {
+  text-align: center;
+  display: table;
+
+  font-size: 16px;
+  color: #111;
+}
+
+.content > .message .note {
+  vertical-align: middle;
+  text-align: center;
+  display: table-cell;
+}
+
+.content .error .details {
+  max-width: 500px;
+  font-size: 12px;
+  margin: 20px auto;
+  text-align: left;
+}
+
+.content .error pre {
+  border: solid 1px #CCC;
+  background: #EEE;
+  padding: 10px;
+}
+
+.content:not(.with-error) .error,
+.content.with-error .intro,
+.content.with-diagram .intro {
+  display: none;
+}
+
+
+.content .canvas,
+.content.with-error .canvas {
+  visibility: hidden;
+}
+
+.content.with-diagram .canvas {
+  visibility: visible;
+}
+
+.buttons {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.buttons > li {
+  display: inline-block;
+  margin-right: 10px;
+}
+.buttons > li > a {
+  background: #DDD;
+  border: solid 1px #666;
+  display: inline-block;
+  padding: 5px;
+}
+
+.buttons a {
+  opacity: 0.3;
+}
+
+.buttons a.active {
+  opacity: 1.0;
+}

modeler/app/css/diagram-js.css

@@ -0,0 +1,78 @@
+/**
+ * outline styles
+ */
+.djs-outline {
+  fill: none;
+  visibility: hidden;
+}
+
+.djs-group.hover .djs-outline,
+.djs-group.selected .djs-outline {
+  visibility: visible;
+  stroke-dasharray: 2,4;
+}
+
+.djs-group.selected .djs-outline {
+  stroke: blue;
+  stroke-width: 1px;
+}
+
+.djs-group.hover .djs-outline {
+  stroke: red;
+  stroke-width: 1px;
+}
+
+.djs-group.drop-ok .djs-visual {
+  fill: green;
+}
+
+.djs-group.drop-not-ok .djs-visual {
+  fill: red;
+}
+
+/**
+ * drag styles
+ */
+.djs-dragger {
+  fill: white;
+  opacity: 0.3;
+  stroke: #333;
+  stroke-dasharray: 2,1;
+}
+
+.djs-shape.djs-dragging {
+  visibility: hidden;
+}
+
+/**
+ * hit shape styles
+ */
+.djs-hit {
+  stroke-opacity: 0.0;
+  stroke-width: 10px;
+  fill: none;
+}
+
+/**
+ * shape / connection basic styles
+ */
+.djs-shape .djs-visual { }
+
+.djs-connection .djs-visual {
+  stroke-width: 2px;
+  fill: none;
+}
+
+.djs-connection .djs-bendpoint {
+  visibility: hidden;
+}
+
+.djs-connection:hover .djs-bendpoint {
+  visibility: visible;
+}
+
+.djs-connection .djs-bendpoint:hover {
+  stroke: #CCC;
+  stroke-width: 1px;
+  fill: yellow;
+}