feat(example): update example

Closes bpmn-io#222

README.md

@@ -1,7 +1,3 @@
-> The project is in an early development stage.
-> For the time being, please refer to our [comprehensive test suite](https://github.com/bpmn-io/diagram-js/tree/master/test/spec) or [bpmn-js](https://github.com/bpmn-io/bpmn-js) for usage examples.
-
-
 # diagram-js
 
 [![Build Status](https://travis-ci.org/bpmn-io/diagram-js.svg?branch=master)](https://travis-ci.org/bpmn-io/diagram-js)
@@ -32,6 +28,11 @@ Execute `grunt` to lint and test the project and to generate (preliminary) docum
 We do not generate any build artifacts. Required parts of the library should be bundled by modelers / viewers as needed instead.
 
 
+### Example
+
+You can find an example app build with diagram-js [here](/example).
+
+
 ## License
 
 MIT

example/Gruntfile.js

@@ -0,0 +1,111 @@
+'use strict';
+
+var path = require('path');
+
+module.exports = function(grunt) {
+
+  require('load-grunt-tasks')(grunt);
+
+
+  // project configuration
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+
+    config: {
+      sources: 'app',
+      dist: 'dist',
+      diagram_js: path.dirname(require.resolve('diagram-js'))
+    },
+
+    jshint: {
+      src: [
+        ['<%=config.sources %>']
+      ],
+      options: {
+        jshintrc: true
+      }
+    },
+
+    browserify: {
+      options: {
+        browserifyOptions: {
+          // strip unnecessary built-ins
+          builtins: [ 'events' ],
+          insertGlobalVars: {
+            process: function() {
+              return 'undefined';
+            },
+            Buffer: function() {
+              return 'undefined';
+            }
+          }
+        },
+        transform: [ 'brfs' ]
+      },
+      watch: {
+        options: {
+          watch: true
+        },
+        files: {
+          '<%= config.dist %>/app.js': [ '<%= config.sources %>/**/*.js' ]
+        }
+      },
+      app: {
+        files: {
+          '<%= config.dist %>/app.js': [ '<%= config.sources %>/**/*.js' ]
+        }
+      }
+    },
+    copy: {
+      app: {
+        files: [
+          {
+            expand: true,
+            cwd: '<%= config.sources %>/',
+            src: ['**/*.*', '!**/*.js'],
+            dest: '<%= config.dist %>'
+          },
+          {
+            src: '<%= config.diagram_js %>/assets/diagram-js.css',
+            dest: '<%= config.dist %>/css/diagram-js.css'
+          }
+        ]
+      }
+    },
+    watch: {
+      options: {
+        livereload: true
+      },
+      samples: {
+        files: [ '<%= config.sources %>/**/*.*' ],
+        tasks: [ 'copy:app' ]
+      }
+    },
+    connect: {
+      livereload: {
+        options: {
+          port: 9013,
+          livereload: true,
+          hostname: 'localhost',
+          open: true,
+          base: [
+            '<%= config.dist %>'
+          ]
+        }
+      }
+    }
+  });
+
+  // tasks
+
+  grunt.registerTask('build', [ 'browserify:app', 'copy:app' ]);
+
+  grunt.registerTask('auto-build', [
+    'copy',
+    'browserify:watch',
+    'connect',
+    'watch'
+  ]);
+
+  grunt.registerTask('default', [ 'jshint', 'build' ]);
+};

example/README.md

@@ -0,0 +1,33 @@
+# diagram-js Example App
+
+![Screenshot](docs/screenshot.png)
+
+An example application build with diagram-js. You can use this as a starting point for building your project.
+
+
+## Building the Project
+
+Initialize the project dependencies via
+
+```
+npm install
+```
+
+The project contains a  [Grunt](http://gruntjs.com/) build script that defines a few tasks.
+
+To create the sample distribution in the `dist` folder run
+
+```
+grunt
+```
+
+To bootstrap a development setup that spawns a small webserver and rebuilds your app on changes run
+
+```
+grunt auto-build
+```
+
+
+## Licence
+
+MIT

example/app/ExampleContextPadProvider.js

@@ -0,0 +1,49 @@
+'use strict';
+
+/**
+ * A example context pad provider.
+ */
+function ExampleContextPadProvider(connect, contextpad, modeling) {
+  this._connect = connect;
+  this._modeling = modeling;
+
+  contextpad.registerProvider(this);
+}
+
+ExampleContextPadProvider.prototype.getContextPadEntries = function(element) {
+  var connect = this._connect,
+      modeling = this._modeling;
+
+  function removeElement() {
+    modeling.removeElements([ element ]);
+  }
+
+  function startConnect(event, element, autoActivate) {
+    connect.start(event, element, autoActivate);
+  }
+
+  return {
+    'delete': {
+      group: 'edit',
+      className: 'context-pad-icon-remove',
+      title: 'Remove',
+      action: {
+        click: removeElement,
+        dragstart: removeElement
+      }
+    },
+    'connect': {
+      group: 'edit',
+      className: 'context-pad-icon-connect',
+      title: 'Connect',
+      action: {
+        click: startConnect,
+        dragstart: startConnect
+      }
+    }
+  };
+};
+
+ExampleContextPadProvider.$inject = [ 'connect', 'contextPad', 'modeling' ];
+
+module.exports = ExampleContextPadProvider;

example/app/ExamplePaletteProvider.js

@@ -0,0 +1,56 @@
+'use strict';
+
+
+/**
+ * A example palette provider.
+ */
+function ExamplePaletteProvider(create, elementFactory, lassoTool, palette) {
+  this._create = create;
+  this._elementFactory = elementFactory;
+  this._lassoTool = lassoTool;
+  this._palette = palette;
+
+  palette.registerProvider(this);
+}
+
+ExamplePaletteProvider.$inject = [ 'create', 'elementFactory', 'lassoTool', 'palette' ];
+
+ExamplePaletteProvider.prototype.getPaletteEntries = function() {
+  var create = this._create,
+      elementFactory = this._elementFactory,
+      lassoTool = this._lassoTool;
+
+  return {
+    'lasso-tool': {
+      group: 'tools',
+      className: 'palette-icon-lasso-tool',
+      title: 'Activate Lasso Tool',
+      action: {
+        click: function(event) {
+          lassoTool.activateSelection(event);
+        }
+      }
+    },
+    'tool-separator': {
+      group: 'tools',
+      separator: true
+    },
+    'create-shape': {
+      group: 'create',
+      className: 'palette-icon-create-shape',
+      title: 'Create Shape',
+      action: {
+        click: function() {
+          var shape = elementFactory.createShape({
+            width: 100,
+            height: 80
+          });
+
+          create.start(event, shape);
+        }
+      }
+    }
+  };
+};
+
+module.exports = ExamplePaletteProvider;

example/app/ExampleRuleProvider.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var inherits = require('inherits');
+
+var RuleProvider = require('diagram-js/lib/features/rules/RuleProvider');
+
+function ExampleRuleProvider(eventBus) {
+  RuleProvider.call(this, eventBus);
+}
+
+ExampleRuleProvider.$inject = [ 'eventBus' ];
+
+inherits(ExampleRuleProvider, RuleProvider);
+
+module.exports = ExampleRuleProvider;
+
+ExampleRuleProvider.prototype.init = function() {
+  this.addRule('shape.create', function(context) {
+    const target = context.target,
+          shape = context.shape;
+
+    return target.parent === shape.target;
+  });
+
+  this.addRule('connection.create', function(context) {
+    const source = context.source,
+          target = context.target;
+
+    return source.parent === target.parent;
+  });
+};

example/app/app.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var Diagram = require('diagram-js');
+
+var container = document.getElementById('container');
+
+var diagram = new Diagram({
+  canvas: { container: container },
+  modules: [
+    require('diagram-js/lib/features/selection'), // select elements
+    require('diagram-js/lib/navigation/zoomscroll'), // zoom canvas
+    require('diagram-js/lib/navigation/movecanvas'), // scroll canvas
+    require('diagram-js/lib/features/modeling'), // basic modeling (create/move/remove shapes/connections)
+    require('diagram-js/lib/features/move'), // move shapes
+    require('diagram-js/lib/features/outline'), // show element outlines
+    require('diagram-js/lib/features/lasso-tool'), // lasso tool for element selection
+    require('diagram-js/lib/features/palette'), // palette
+    require('diagram-js/lib/features/create'), // create elements
+    require('diagram-js/lib/features/context-pad'), // context pad for elements,
+    require('diagram-js/lib/features/connect'), // connect elements
+    require('diagram-js/lib/features/rules'), // rules
+    {
+      __init__: [ 'exampleContextPadProvider', 'examplePaletteProvider', 'exampleRuleProvider' ],
+      exampleContextPadProvider: [ 'type', require('./ExampleContextPadProvider') ],
+      examplePaletteProvider: [ 'type', require('./ExamplePaletteProvider') ],
+      exampleRuleProvider: [ 'type', require('./ExampleRuleProvider') ]
+    }
+  ]
+});
+
+// get instances from diagram
+var canvas = diagram.get('canvas'),
+    defaultRenderer = diagram.get('defaultRenderer'),
+    elementFactory = diagram.get('elementFactory'),
+    styles = diagram.get('styles');
+
+// override default stroke color
+defaultRenderer.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: '#000' });
+defaultRenderer.SHAPE_STYLE = styles.style({ fill: 'white', stroke: '#000', strokeWidth: 2 });
+
+// add root
+var root = elementFactory.createRoot();
+
+canvas.setRootElement(root);
+
+// add shapes
+var shape1 = elementFactory.createShape({
+  x: 200,
+  y: 100,
+  width: 100,
+  height: 80
+});
+
+canvas.addShape(shape1, root);
+
+var shape2 = elementFactory.createShape({
+  x: 300,
+  y: 200,
+  width: 100,
+  height: 80
+});
+
+canvas.addShape(shape2, root);