update

ebpm-process-modeler/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

ebpm-process-modeler/.env.development

@@ -0,0 +1 @@
+VUE_APP_BASE_EBPM_PATH = 'http://localhost:8085/ebpm-process-manage'

ebpm-process-modeler/.env.production

@@ -0,0 +1 @@
+VUE_APP_BASE_EBPM_PATH = 'https://www.rzdata.net/ebpm-process-manage'

ebpm-process-modeler/.env.staging

@@ -0,0 +1 @@
+VUE_APP_BASE_EBPM_PATH = 'http://192.168.2.128:8080/ebpm-process-manage'

ebpm-process-modeler/.env.uat

@@ -0,0 +1 @@
+VUE_APP_BASE_EBPM_PATH = 'http://dzy.ubcp-dev.szzt.api.zgs.yun/ebpm-process-manage'

ebpm-process-modeler/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

ebpm-process-modeler/Dockerfile

@@ -0,0 +1,4 @@
+FROM nginx:1.21.1-alpine
+COPY default.conf /etc/nginx/conf.d/
+COPY ./dist /usr/share/nginx/html/ebpm-process-modeler
+EXPOSE 80

ebpm-process-modeler/Dockerfile.aly

@@ -0,0 +1,4 @@
+FROM cr.registry.res.zgs.yun/dzy/nginx:1.21.5-alpine
+COPY default.conf /etc/nginx/conf.d/
+COPY ./dist /usr/share/nginx/html/ebpm-process-modeler
+EXPOSE 80

ebpm-process-modeler/READFIRST.md

@@ -0,0 +1,17 @@
+# Vue Project
+
+## Prerequisites
+
+- NodeJS ^8.9
+- npm ^5.6
+
+## Steps to Run inside CodeMix
+
+
+1. From the `Quick Open`  Command Palette (ctrl/cmd + shift + p) search for:
+     `Terminal: Create New Integrated Terminal`
+2. From the `Quick Open` options select this project.
+3. Once you are inside the Terminal, execute: `npm install`
+4. Finally to run this example run `npm run serve`
+5. Open your browser on http://localhost:8080
+6. To build run `npm run build` and generate HTML/CSS/JS minification.

ebpm-process-modeler/README.md

@@ -0,0 +1,34 @@
+# codemix-vanilla-react
+
+Template for project creation of Vue inside CodeMix
+
+# Contents
+
+This template project is just an example Hello World that guide you through the use of Vue to build a very simple web application that display the Hello World!!! Greeting.
+
+This example has been started with the vue-cli and webpack-simple
+
+# Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```

ebpm-process-modeler/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

ebpm-process-modeler/bpmn-js/bpmn-moddle/CHANGELOG.md

@@ -0,0 +1,63 @@
+# Changelog
+
+All notable changes to [bpmn-moddle](https://github.com/bpmn-io/bpmn-moddle) are documented here. We use [semantic versioning](http://semver.org/) for releases.
+
+## Unreleased
+
+___Note:__ Yet to be released changes appear here._
+
+## 5.2.0
+
+* `FEAT`: validate ID attributes as QNames
+
+## 5.1.6
+
+* `FIX`: correct `Choreography` model definitions ([#59](https://github.com/bpmn-io/bpmn-moddle/issues/59))
+
+## 5.1.5
+
+* `FIX`: correct `StandardLoopCharacteristics#loopMaximum` type ([#56](https://github.com/bpmn-io/bpmn-moddle/issues/56))
+
+## 5.1.4
+
+* `FIX`: correct extension attributes not being serialized on `bpmn:Expression` elements ([#55](https://github.com/bpmn-io/bpmn-moddle/issues/55))
+
+## 5.1.3
+
+* `FIX`: correct missing `resourceParameterBinding` parent
+
+## 5.1.2
+
+* `CHORE`: warn on unknown attribute in well-known namespace
+* `FIX`: correct missing `participantMultiplicity` parent
+
+## 5.1.0
+
+* `CHORE`: bump dependency versions
+
+## 5.0.0
+
+### Breaking Changes
+
+* `FEAT`: migrate to ES modules. Use `esm` or a ES module aware transpiler to consume this library.
+
+## 4.0.0
+
+* `FEAT`: encode entities in body properties (rather than using CDATA escaping)
+
+## 3.0.2
+
+* `FIX`: properly handle `.` in attribute names
+
+## 3.0.1
+
+* `FIX`: properly decode `text` entities
+
+## 3.0.0
+
+* `CHORE`: improve error handling on invalid attributes
+* `CHORE`: drop lodash in favor of [min-dash](https://github.com/bpmn-io/min-dash)
+
+## ...
+
+Check `git log` for earlier history.

ebpm-process-modeler/bpmn-js/bpmn-moddle/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

ebpm-process-modeler/bpmn-js/bpmn-moddle/README.md

@@ -0,0 +1,75 @@
+> As of version `5.0.0` this library exposes [ES modules](http://exploringjs.com/es6/ch_modules.html#sec_basics-of-es6-modules). Use [esm](https://github.com/standard-things/esm) to consume it or an ES module aware bundler such as [Webpack](https://webpack.js.org) or [Rollup](https://rollupjs.org) to bundle it for the browser.
+
+
+# bpmn-moddle
+
+[![Build Status](https://travis-ci.org/bpmn-io/bpmn-moddle.svg?branch=master)](https://travis-ci.org/bpmn-io/bpmn-moddle)
+
+Read and write BPMN 2.0 diagram files in NodeJS and the browser.
+
+__bpmn-moddle__ uses the [BPMN 2.0 meta-model](http://www.omg.org/spec/BPMN/2.0/) to validate the input and produce correct BPMN 2.0 XML. The library is built on top of [moddle](https://github.com/bpmn-io/moddle) and [moddle-xml](https://github.com/bpmn-io/moddle-xml).
+
+
+## Usage
+
+Get the library via [npm package](https://www.npmjs.org/package/bpmn-moddle). Bundle it for the web using [browserify](http://browserify.org) or [webpack](https://webpack.github.io).
+
+```javascript
+import BpmnModdle from 'bpmn-moddle';
+
+var moddle = new BpmnModdle();
+
+var xmlStr =
+  '<?xml version="1.0" encoding="UTF-8"?>' +
+  '<bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" ' +
+                     'id="empty-definitions" ' +
+                     'targetNamespace="http://bpmn.io/schema/bpmn">' +
+  '</bpmn2:definitions>';
+
+
+moddle.fromXML(xmlStr, function(err, definitions) {
+
+  // update id attribute
+  definitions.set('id', 'NEW ID');
+
+  // add a root element
+  var bpmnProcess = moddle.create('bpmn:Process', { id: 'MyProcess_1' });
+  definitions.get('rootElements').push(bpmnProcess);
+
+  moddle.toXML(definitions, function(err, xmlStrUpdated) {
+
+    // xmlStrUpdated contains new id and the added process
+
+  });
+
+});
+```
+
+
+## Resources
+
+* [Issues](https://github.com/bpmn-io/bpmn-moddle/issues)
+* [Examples](https://github.com/bpmn-io/bpmn-moddle/tree/master/test/spec/xml)
+* [Changelog](./CHANGELOG.md)
+
+
+## Building the Project
+
+To run the test suite that includes XSD schema validation you must have a Java JDK installed and properly exposed through the `JAVA_HOME` variable.
+
+Execute the test via
+
+```
+npm test
+```
+
+Perform a complete build of the application via
+
+```
+npm run all
+```
+
+
+## License
+
+Use under the terms of the [MIT license](http://opensource.org/licenses/MIT).

ebpm-process-modeler/bpmn-js/bpmn-moddle/index.js

@@ -0,0 +1,3 @@
+export {
+  default
+} from './lib/simple';

ebpm-process-modeler/bpmn-js/bpmn-moddle/lib/bpmn-moddle.js

@@ -0,0 +1,86 @@
+import {
+  isString,
+  isFunction,
+  assign
+} from 'min-dash';
+
+import Moddle from 'moddle';
+
+import {
+  Reader,
+  Writer
+} from 'moddle-xml';
+
+
+/**
+ * A sub class of {@link Moddle} with support for import and export of BPMN 2.0 xml files.
+ *
+ * @class BpmnModdle
+ * @extends Moddle
+ *
+ * @param {Object|Array} packages to use for instantiating the model
+ * @param {Object} [options] additional options to pass over
+ */
+export default function BpmnModdle(packages, options) {
+  Moddle.call(this, packages, options);
+}
+
+BpmnModdle.prototype = Object.create(Moddle.prototype);
+
+
+/**
+ * Instantiates a BPMN model tree from a given xml string.
+ *
+ * @param {String}   xmlStr
+ * @param {String}   [typeName='bpmn:Definitions'] name of the root element
+ * @param {Object}   [options]  options to pass to the underlying reader
+ * @param {Function} done       callback that is invoked with (err, result, parseContext)
+ *                              once the import completes
+ */
+BpmnModdle.prototype.fromXML = function(xmlStr, typeName, options, done) {
+
+  if (!isString(typeName)) {
+    done = options;
+    options = typeName;
+    typeName = 'bpmn:Definitions';
+  }
+
+  if (isFunction(options)) {
+    done = options;
+    options = {};
+  }
+
+  var reader = new Reader(assign({ model: this, lax: true }, options));
+  var rootHandler = reader.handler(typeName);
+
+  reader.fromXML(xmlStr, rootHandler, done);
+};
+
+
+/**
+ * Serializes a BPMN 2.0 object tree to XML.
+ *
+ * @param {String}   element    the root element, typically an instance of `bpmn:Definitions`
+ * @param {Object}   [options]  to pass to the underlying writer
+ * @param {Function} done       callback invoked with (err, xmlStr) once the import completes
+ */
+BpmnModdle.prototype.toXML = function(element, options, done) {
+
+  if (isFunction(options)) {
+    done = options;
+    options = {};
+  }
+
+  var writer = new Writer(options);
+
+  var result;
+  var err;
+
+  try {
+    result = writer.toXML(element);
+  } catch (e) {
+    err = e;
+  }
+
+  return done(err, result);
+};

ebpm-process-modeler/bpmn-js/bpmn-moddle/lib/simple.js

@@ -0,0 +1,25 @@
+import {
+  assign
+} from 'min-dash';
+
+import BpmnModdle from './bpmn-moddle';
+
+import BpmnPackage from '../resources/bpmn/json/bpmn.json';
+import BpmnDiPackage from '../resources/bpmn/json/bpmndi.json';
+import DcPackage from '../resources/bpmn/json/dc.json';
+import DiPackage from '../resources/bpmn/json/di.json';
+import BiocPackage from '../resources/bpmn-io/json/bioc.json';
+
+var packages = {
+  bpmn: BpmnPackage,
+  bpmndi: BpmnDiPackage,
+  dc: DcPackage,
+  di: DiPackage,
+  bioc: BiocPackage
+};
+
+export default function(additionalPackages, options) {
+  var pks = assign({}, packages, additionalPackages);
+
+  return new BpmnModdle(pks, options);
+}

ebpm-process-modeler/bpmn-js/bpmn-moddle/package.json

@@ -0,0 +1,80 @@
+{
+  "_args": [
+    [
+      "bpmn-moddle@5.2.0",
+      "D:\\dataTag\\ebpm-process-modeler\\ebpm-process-modeler"
+    ]
+  ],
+  "_from": "bpmn-moddle@5.2.0",
+  "_id": "bpmn-moddle@5.2.0",
+  "_inBundle": false,
+  "_integrity": "sha512-MZTlpIXWcHTelp09vR4hs23diCdeHl4JbwOXGmif10qf9v/kqreiCMeo0B9w8eEmZqdRdkulTIScKavTYOxTQw==",
+  "_location": "/bpmn-moddle",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "version",
+    "registry": true,
+    "raw": "bpmn-moddle@5.2.0",
+    "name": "bpmn-moddle",
+    "escapedName": "bpmn-moddle",
+    "rawSpec": "5.2.0",
+    "saveSpec": null,
+    "fetchSpec": "5.2.0"
+  },
+  "_requiredBy": [
+    "/bpmn-js"
+  ],
+  "_resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-5.2.0.tgz",
+  "_spec": "5.2.0",
+  "_where": "D:\\dataTag\\ebpm-process-modeler\\ebpm-process-modeler",
+  "author": {
+    "name": "Nico Rehwaldt",
+    "url": "https://github.com/nikku"
+  },
+  "bugs": {
+    "url": "https://github.com/bpmn-io/bpmn-moddle/issues"
+  },
+  "contributors": [
+    {
+      "name": "bpmn.io contributors",
+      "url": "https://github.com/bpmn-io"
+    }
+  ],
+  "dependencies": {
+    "min-dash": "^3.0.0",
+    "moddle": "^4.1.0",
+    "moddle-xml": "^7.5.0"
+  },
+  "description": "A moddle wrapper for BPMN 2.0",
+  "devDependencies": {
+    "chai": "^4.1.2",
+    "cmof-parser": "^0.2.0",
+    "eslint": "^4.11.0",
+    "eslint-plugin-bpmn-io": "^0.4.1",
+    "esm": "^3.0.15",
+    "mocha": "^4.0.1",
+    "npm-run-all": "^4.1.5",
+    "xsd-schema-validator": "^0.5.0"
+  },
+  "homepage": "https://github.com/bpmn-io/bpmn-moddle#readme",
+  "keywords": [
+    "bpmn",
+    "moddle",
+    "bpmn20",
+    "meta-model"
+  ],
+  "license": "MIT",
+  "name": "bpmn-moddle",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bpmn-io/bpmn-moddle.git"
+  },
+  "scripts": {
+    "all": "run-s lint test",
+    "dev": "npm test -- --watch",
+    "lint": "eslint .",
+    "test": "mocha -r esm --reporter=spec --recursive test"
+  },
+  "sideEffects": false,
+  "version": "5.2.0"
+}

ebpm-process-modeler/bpmn-js/bpmn-moddle/resources/bpmn-io/json/bioc.json

@@ -0,0 +1,41 @@
+{
+  "name": "bpmn.io colors for BPMN",
+  "uri": "http://bpmn.io/schema/bpmn/biocolor/1.0",
+  "prefix": "bioc",
+  "types": [
+    {
+      "name": "ColoredShape",
+      "extends": [ "bpmndi:BPMNShape" ],
+      "properties": [
+        {
+          "name": "stroke",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "fill",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ColoredEdge",
+      "extends": [ "bpmndi:BPMNEdge" ],
+      "properties": [
+        {
+          "name": "stroke",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "fill",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "enumerations": [],
+  "associations": []
+}

ebpm-process-modeler/bpmn-js/bpmn-moddle/resources/bpmn/json/bpmndi.json

@@ -0,0 +1,193 @@
+{
+  "name": "BPMNDI",
+  "uri": "http://www.omg.org/spec/BPMN/20100524/DI",
+  "types": [
+    {
+      "name": "BPMNDiagram",
+      "properties": [
+        {
+          "name": "plane",
+          "type": "BPMNPlane",
+          "redefines": "di:Diagram#rootElement"
+        },
+        {
+          "name": "labelStyle",
+          "type": "BPMNLabelStyle",
+          "isMany": true
+        }
+      ],
+      "superClass": [
+        "di:Diagram"
+      ]
+    },
+    {
+      "name": "BPMNPlane",
+      "properties": [
+        {
+          "name": "bpmnElement",
+          "isAttr": true,
+          "isReference": true,
+          "type": "bpmn:BaseElement",
+          "redefines": "di:DiagramElement#modelElement"
+        }
+      ],
+      "superClass": [
+        "di:Plane"
+      ]
+    },
+    {
+      "name": "BPMNShape",
+      "properties": [
+        {
+          "name": "bpmnElement",
+          "isAttr": true,
+          "isReference": true,
+          "type": "bpmn:BaseElement",
+          "redefines": "di:DiagramElement#modelElement"
+        },
+        {
+          "name": "isHorizontal",
+          "isAttr": true,
+          "type": "Boolean"
+        },
+        {
+          "name": "isExpanded",
+          "isAttr": true,
+          "type": "Boolean"
+        },
+        {
+          "name": "isMarkerVisible",
+          "isAttr": true,
+          "type": "Boolean"
+        },
+        {
+          "name": "label",
+          "type": "BPMNLabel"
+        },
+        {
+          "name": "isMessageVisible",
+          "isAttr": true,
+          "type": "Boolean"
+        },
+        {
+          "name": "participantBandKind",
+          "type": "ParticipantBandKind",
+          "isAttr": true
+        },
+        {
+          "name": "choreographyActivityShape",
+          "type": "BPMNShape",
+          "isAttr": true,
+          "isReference": true
+        }
+      ],
+      "superClass": [
+        "di:LabeledShape"
+      ]
+    },
+    {
+      "name": "BPMNEdge",
+      "properties": [
+        {
+          "name": "label",
+          "type": "BPMNLabel"
+        },
+        {
+          "name": "bpmnElement",
+          "isAttr": true,
+          "isReference": true,
+          "type": "bpmn:BaseElement",
+          "redefines": "di:DiagramElement#modelElement"
+        },
+        {
+          "name": "sourceElement",
+          "isAttr": true,
+          "isReference": true,
+          "type": "di:DiagramElement",
+          "redefines": "di:Edge#source"
+        },
+        {
+          "name": "targetElement",
+          "isAttr": true,
+          "isReference": true,
+          "type": "di:DiagramElement",
+          "redefines": "di:Edge#target"
+        },
+        {
+          "name": "messageVisibleKind",
+          "type": "MessageVisibleKind",
+          "isAttr": true,
+          "default": "initiating"
+        }
+      ],
+      "superClass": [
+        "di:LabeledEdge"
+      ]
+    },
+    {
+      "name": "BPMNLabel",
+      "properties": [
+        {
+          "name": "labelStyle",
+          "type": "BPMNLabelStyle",
+          "isAttr": true,
+          "isReference": true,
+          "redefines": "di:DiagramElement#style"
+        }
+      ],
+      "superClass": [
+        "di:Label"
+      ]
+    },
+    {
+      "name": "BPMNLabelStyle",
+      "properties": [
+        {
+          "name": "font",
+          "type": "dc:Font"
+        }
+      ],
+      "superClass": [
+        "di:Style"
+      ]
+    }
+  ],
+  "enumerations": [
+    {
+      "name": "ParticipantBandKind",
+      "literalValues": [
+        {
+          "name": "top_initiating"
+        },
+        {
+          "name": "middle_initiating"
+        },
+        {
+          "name": "bottom_initiating"
+        },
+        {
+          "name": "top_non_initiating"
+        },
+        {
+          "name": "middle_non_initiating"
+        },
+        {
+          "name": "bottom_non_initiating"
+        }
+      ]
+    },
+    {
+      "name": "MessageVisibleKind",
+      "literalValues": [
+        {
+          "name": "initiating"
+        },
+        {
+          "name": "non_initiating"
+        }
+      ]
+    }
+  ],
+  "associations": [],
+  "prefix": "bpmndi"
+}

ebpm-process-modeler/bpmn-js/bpmn-moddle/resources/bpmn/json/dc.json

@@ -0,0 +1,99 @@
+{
+  "name": "DC",
+  "uri": "http://www.omg.org/spec/DD/20100524/DC",
+  "types": [
+    {
+      "name": "Boolean"
+    },
+    {
+      "name": "Integer"
+    },
+    {
+      "name": "Real"
+    },
+    {
+      "name": "String"
+    },
+    {
+      "name": "Font",
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "size",
+          "type": "Real",
+          "isAttr": true
+        },
+        {
+          "name": "isBold",
+          "type": "Boolean",
+          "isAttr": true
+        },
+        {
+          "name": "isItalic",
+          "type": "Boolean",
+          "isAttr": true
+        },
+        {
+          "name": "isUnderline",
+          "type": "Boolean",
+          "isAttr": true
+        },
+        {
+          "name": "isStrikeThrough",
+          "type": "Boolean",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Point",
+      "properties": [
+        {
+          "name": "x",
+          "type": "Real",
+          "default": "0",
+          "isAttr": true
+        },
+        {
+          "name": "y",
+          "type": "Real",
+          "default": "0",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Bounds",
+      "properties": [
+        {
+          "name": "x",
+          "type": "Real",
+          "default": "0",
+          "isAttr": true
+        },
+        {
+          "name": "y",
+          "type": "Real",
+          "default": "0",
+          "isAttr": true
+        },
+        {
+          "name": "width",
+          "type": "Real",
+          "isAttr": true
+        },
+        {
+          "name": "height",
+          "type": "Real",
+          "isAttr": true
+        }
+      ]
+    }
+  ],
+  "prefix": "dc",
+  "associations": []
+}

ebpm-process-modeler/bpmn-js/bpmn-moddle/resources/bpmn/json/di.json

@@ -0,0 +1,238 @@
+{
+  "name": "DI",
+  "uri": "http://www.omg.org/spec/DD/20100524/DI",
+  "types": [
+    {
+      "name": "DiagramElement",
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true,
+          "isId": true
+        },
+        {
+          "name": "extension",
+          "type": "Extension"
+        },
+        {
+          "name": "owningDiagram",
+          "type": "Diagram",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true
+        },
+        {
+          "name": "owningElement",
+          "type": "DiagramElement",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true
+        },
+        {
+          "name": "modelElement",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true,
+          "type": "Element"
+        },
+        {
+          "name": "style",
+          "type": "Style",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true
+        },
+        {
+          "name": "ownedElement",
+          "type": "DiagramElement",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Node",
+      "isAbstract": true,
+      "superClass": [
+        "DiagramElement"
+      ]
+    },
+    {
+      "name": "Edge",
+      "isAbstract": true,
+      "superClass": [
+        "DiagramElement"
+      ],
+      "properties": [
+        {
+          "name": "source",
+          "type": "DiagramElement",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true
+        },
+        {
+          "name": "target",
+          "type": "DiagramElement",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true
+        },
+        {
+          "name": "waypoint",
+          "isUnique": false,
+          "isMany": true,
+          "type": "dc:Point",
+          "xml": {
+            "serialize": "xsi:type"
+          }
+        }
+      ]
+    },
+    {
+      "name": "Diagram",
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true,
+          "isId": true
+        },
+        {
+          "name": "rootElement",
+          "type": "DiagramElement",
+          "isReadOnly": true,
+          "isVirtual": true
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "documentation",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resolution",
+          "isAttr": true,
+          "type": "Real"
+        },
+        {
+          "name": "ownedStyle",
+          "type": "Style",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Shape",
+      "isAbstract": true,
+      "superClass": [
+        "Node"
+      ],
+      "properties": [
+        {
+          "name": "bounds",
+          "type": "dc:Bounds"
+        }
+      ]
+    },
+    {
+      "name": "Plane",
+      "isAbstract": true,
+      "superClass": [
+        "Node"
+      ],
+      "properties": [
+        {
+          "name": "planeElement",
+          "type": "DiagramElement",
+          "subsettedProperty": "DiagramElement-ownedElement",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "LabeledEdge",
+      "isAbstract": true,
+      "superClass": [
+        "Edge"
+      ],
+      "properties": [
+        {
+          "name": "ownedLabel",
+          "type": "Label",
+          "isReadOnly": true,
+          "subsettedProperty": "DiagramElement-ownedElement",
+          "isVirtual": true,
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "LabeledShape",
+      "isAbstract": true,
+      "superClass": [
+        "Shape"
+      ],
+      "properties": [
+        {
+          "name": "ownedLabel",
+          "type": "Label",
+          "isReadOnly": true,
+          "subsettedProperty": "DiagramElement-ownedElement",
+          "isVirtual": true,
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Label",
+      "isAbstract": true,
+      "superClass": [
+        "Node"
+      ],
+      "properties": [
+        {
+          "name": "bounds",
+          "type": "dc:Bounds"
+        }
+      ]
+    },
+    {
+      "name": "Style",
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true,
+          "isId": true
+        }
+      ]
+    },
+    {
+      "name": "Extension",
+      "properties": [
+        {
+          "name": "values",
+          "type": "Element",
+          "isMany": true
+        }
+      ]
+    }
+  ],
+  "associations": [],
+  "prefix": "di",
+  "xml": {
+    "tagAlias": "lowerCase"
+  }
+}

ebpm-process-modeler/bpmn-js/bpmn-moddle/resources/bpmn/xsd/BPMN20.xsd

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsd:schema elementFormDefault="qualified" attributeFormDefault="unqualified"	
+	xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
+	xmlns:xsd="http://www.w3.org/2001/XMLSchema"
+	xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+	targetNamespace="http://www.omg.org/spec/BPMN/20100524/MODEL">
+
+	<xsd:import namespace="http://www.omg.org/spec/BPMN/20100524/DI" schemaLocation="BPMNDI.xsd"/>
+	<xsd:include schemaLocation="Semantic.xsd"/>
+
+	<xsd:element name="definitions" type="tDefinitions"/>
+	<xsd:complexType name="tDefinitions">
+		<xsd:sequence>
+			<xsd:element ref="import" minOccurs="0" maxOccurs="unbounded"/>
+			<xsd:element ref="extension" minOccurs="0" maxOccurs="unbounded"/>
+			<xsd:element ref="rootElement" minOccurs="0" maxOccurs="unbounded"/>
+			<xsd:element ref="bpmndi:BPMNDiagram" minOccurs="0" maxOccurs="unbounded"/>
+			<xsd:element ref="relationship" minOccurs="0" maxOccurs="unbounded"/>
+		</xsd:sequence>
+		<xsd:attribute name="id" type="xsd:ID" use="optional"/>
+		<xsd:attribute name="name" type="xsd:string"/>
+		<xsd:attribute name="targetNamespace" type="xsd:anyURI" use="required"/>
+		<xsd:attribute name="expressionLanguage" type="xsd:anyURI" use="optional" default="http://www.w3.org/1999/XPath"/>
+		<xsd:attribute name="typeLanguage" type="xsd:anyURI" use="optional" default="http://www.w3.org/2001/XMLSchema"/>
+		<xsd:attribute name="exporter" type="xsd:string"/>
+		<xsd:attribute name="exporterVersion" type="xsd:string"/>
+		<xsd:anyAttribute namespace="##other" processContents="lax"/>
+	</xsd:complexType>
+	
+	<xsd:element name="import" type="tImport"/>
+	<xsd:complexType name="tImport">
+		<xsd:attribute name="namespace" type="xsd:anyURI" use="required"/>
+		<xsd:attribute name="location" type="xsd:string" use="required"/>
+		<xsd:attribute name="importType" type="xsd:anyURI" use="required"/>
+	</xsd:complexType>
+
+</xsd:schema>

ebpm-process-modeler/bpmn-js/bpmn-moddle/resources/bpmn/xsd/BPMNDI.xsd

@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" targetNamespace="http://www.omg.org/spec/BPMN/20100524/DI"  elementFormDefault="qualified" attributeFormDefault="unqualified">
+
+	<xsd:import namespace="http://www.omg.org/spec/DD/20100524/DC" schemaLocation="DC.xsd" />
+	<xsd:import namespace="http://www.omg.org/spec/DD/20100524/DI" schemaLocation="DI.xsd" />
+	
+	<xsd:element name="BPMNDiagram" type="bpmndi:BPMNDiagram" />
+	<xsd:element name="BPMNPlane" type="bpmndi:BPMNPlane" />
+	<xsd:element name="BPMNLabelStyle" type="bpmndi:BPMNLabelStyle" />
+	<xsd:element name="BPMNShape" type="bpmndi:BPMNShape" substitutionGroup="di:DiagramElement" />
+	<xsd:element name="BPMNLabel" type="bpmndi:BPMNLabel" />
+	<xsd:element name="BPMNEdge" type="bpmndi:BPMNEdge" substitutionGroup="di:DiagramElement" />
+	
+	<xsd:complexType name="BPMNDiagram">
+		<xsd:complexContent>
+			<xsd:extension base="di:Diagram">
+				<xsd:sequence>
+					<xsd:element ref="bpmndi:BPMNPlane" />
+					<xsd:element ref="bpmndi:BPMNLabelStyle" maxOccurs="unbounded" minOccurs="0" />
+				</xsd:sequence>
+			</xsd:extension>
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType name="BPMNPlane">
+		<xsd:complexContent>
+			<xsd:extension base="di:Plane">
+				<xsd:attribute name="bpmnElement" type="xsd:QName" />
+			</xsd:extension>
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType name="BPMNEdge">
+		<xsd:complexContent>
+			<xsd:extension base="di:LabeledEdge">
+				<xsd:sequence>
+					<xsd:element ref="bpmndi:BPMNLabel" minOccurs="0" />
+				</xsd:sequence>
+				<xsd:attribute name="bpmnElement" type="xsd:QName" />
+				<xsd:attribute name="sourceElement" type="xsd:QName" />
+				<xsd:attribute name="targetElement" type="xsd:QName" />
+				<xsd:attribute name="messageVisibleKind" type="bpmndi:MessageVisibleKind" />
+			</xsd:extension>
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType name="BPMNShape">
+		<xsd:complexContent>
+			<xsd:extension base="di:LabeledShape">
+				<xsd:sequence>
+					<xsd:element ref="bpmndi:BPMNLabel" minOccurs="0" />
+				</xsd:sequence>
+				<xsd:attribute name="bpmnElement" type="xsd:QName" />
+				<xsd:attribute name="isHorizontal" type="xsd:boolean" />
+				<xsd:attribute name="isExpanded" type="xsd:boolean" />
+				<xsd:attribute name="isMarkerVisible" type="xsd:boolean" />
+				<xsd:attribute name="isMessageVisible" type="xsd:boolean" />
+				<xsd:attribute name="participantBandKind" type="bpmndi:ParticipantBandKind" />
+        		<xsd:attribute name="choreographyActivityShape" type="xsd:QName"/>
+			</xsd:extension>
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType name="BPMNLabel">
+		<xsd:complexContent>
+			<xsd:extension base="di:Label">
+				<xsd:attribute name="labelStyle" type="xsd:QName" />
+			</xsd:extension>
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType name="BPMNLabelStyle">
+		<xsd:complexContent>
+			<xsd:extension base="di:Style">
+				<xsd:sequence>
+					<xsd:element ref="dc:Font" />
+				</xsd:sequence>
+			</xsd:extension>
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:simpleType name="ParticipantBandKind">
+		<xsd:restriction base="xsd:string">
+			<xsd:enumeration value="top_initiating" />
+			<xsd:enumeration value="middle_initiating" />
+			<xsd:enumeration value="bottom_initiating" />
+			<xsd:enumeration value="top_non_initiating" />
+			<xsd:enumeration value="middle_non_initiating" />
+			<xsd:enumeration value="bottom_non_initiating" />
+		</xsd:restriction>
+	</xsd:simpleType>
+	
+	<xsd:simpleType name="MessageVisibleKind">
+		<xsd:restriction base="xsd:string">
+			<xsd:enumeration value="initiating" />
+			<xsd:enumeration value="non_initiating" />
+		</xsd:restriction>
+	</xsd:simpleType>
+
+</xsd:schema>

ebpm-process-modeler/bpmn-js/bpmn-moddle/resources/bpmn/xsd/DC.xsd

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" targetNamespace="http://www.omg.org/spec/DD/20100524/DC" elementFormDefault="qualified" attributeFormDefault="unqualified">
+
+	<xsd:element name="Font" type="dc:Font" />
+	<xsd:element name="Point" type="dc:Point" />
+	<xsd:element name="Bounds" type="dc:Bounds" />
+	
+	<xsd:complexType name="Font">
+		<xsd:attribute name="name" type="xsd:string" />
+		<xsd:attribute name="size" type="xsd:double" />
+		<xsd:attribute name="isBold" type="xsd:boolean" />
+		<xsd:attribute name="isItalic" type="xsd:boolean" />
+		<xsd:attribute name="isUnderline" type="xsd:boolean" />
+		<xsd:attribute name="isStrikeThrough" type="xsd:boolean" />
+	</xsd:complexType>
+	
+	<xsd:complexType name="Point">
+		<xsd:attribute name="x" type="xsd:double" use="required" />
+		<xsd:attribute name="y" type="xsd:double" use="required" />
+	</xsd:complexType>
+	
+	<xsd:complexType name="Bounds">
+		<xsd:attribute name="x" type="xsd:double" use="required" />
+		<xsd:attribute name="y" type="xsd:double" use="required" />
+		<xsd:attribute name="width" type="xsd:double" use="required" />
+		<xsd:attribute name="height" type="xsd:double" use="required" />
+	</xsd:complexType>
+
+</xsd:schema>

ebpm-process-modeler/bpmn-js/bpmn-moddle/resources/bpmn/xsd/DI.xsd

@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" targetNamespace="http://www.omg.org/spec/DD/20100524/DI" elementFormDefault="qualified" attributeFormDefault="unqualified">
+
+	<xsd:import namespace="http://www.omg.org/spec/DD/20100524/DC" schemaLocation="DC.xsd" />
+	
+	<xsd:element name="DiagramElement" type="di:DiagramElement" />
+	<xsd:element name="Diagram" type="di:Diagram" />
+	<xsd:element name="Style" type="di:Style" />
+	<xsd:element name="Node" type="di:Node" />
+	<xsd:element name="Edge" type="di:Edge" />
+	<xsd:element name="Shape" type="di:Shape" />
+	<xsd:element name="Plane" type="di:Plane" />
+	<xsd:element name="LabeledEdge" type="di:LabeledEdge" />
+	<xsd:element name="Label" type="di:Label" />
+	<xsd:element name="LabeledShape" type="di:LabeledShape" />
+	
+	<xsd:complexType abstract="true" name="DiagramElement">
+		<xsd:sequence>
+			<xsd:element name="extension" minOccurs="0">
+				<xsd:complexType>
+					<xsd:sequence>
+						<xsd:any namespace="##other" minOccurs="0" maxOccurs="unbounded" />
+					</xsd:sequence>
+				</xsd:complexType>
+			</xsd:element>
+		</xsd:sequence>
+		<xsd:attribute name="id" type="xsd:ID" />
+		<xsd:anyAttribute namespace="##other" processContents="lax" />
+	</xsd:complexType>
+	
+	<xsd:complexType abstract="true" name="Diagram">
+		<xsd:attribute name="name" type="xsd:string" />
+		<xsd:attribute name="documentation" type="xsd:string" />
+		<xsd:attribute name="resolution" type="xsd:double" />
+		<xsd:attribute name="id" type="xsd:ID" />
+	</xsd:complexType>
+	
+	<xsd:complexType abstract="true" name="Node">
+		<xsd:complexContent>
+			<xsd:extension base="di:DiagramElement" />
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType abstract="true" name="Edge">
+		<xsd:complexContent>
+			<xsd:extension base="di:DiagramElement">
+				<xsd:sequence>
+					<xsd:element maxOccurs="unbounded" minOccurs="2" name="waypoint" type="dc:Point" />
+				</xsd:sequence>
+			</xsd:extension>
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType abstract="true" name="LabeledEdge">
+		<xsd:complexContent>
+			<xsd:extension base="di:Edge" />
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType abstract="true" name="Shape">
+		<xsd:complexContent>
+			<xsd:extension base="di:Node">
+				<xsd:sequence>
+					<xsd:element ref="dc:Bounds" />
+				</xsd:sequence>
+			</xsd:extension>
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType abstract="true" name="LabeledShape">
+		<xsd:complexContent>
+			<xsd:extension base="di:Shape" />
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType abstract="true" name="Label">
+		<xsd:complexContent>
+			<xsd:extension base="di:Node">
+				<xsd:sequence>
+					<xsd:element ref="dc:Bounds" minOccurs="0" />
+				</xsd:sequence>
+			</xsd:extension>
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType abstract="true" name="Plane">
+		<xsd:complexContent>
+			<xsd:extension base="di:Node">
+				<xsd:sequence>
+					<xsd:element ref="di:DiagramElement" maxOccurs="unbounded" minOccurs="0" />
+				</xsd:sequence>
+			</xsd:extension>
+		</xsd:complexContent>
+	</xsd:complexType>
+	
+	<xsd:complexType abstract="true" name="Style">
+		<xsd:attribute name="id" type="xsd:ID" />
+	</xsd:complexType>
+	
+</xsd:schema>

ebpm-process-modeler/bpmn-js/colors/ColorContextPadProvider.js

@@ -0,0 +1,103 @@
+'use strict';
+
+
+function ColorContextPadProvider(contextPad, popupMenu, canvas) {
+
+  this._contextPad = contextPad;
+  this._popupMenu = popupMenu;
+  this._canvas = canvas;
+  contextPad.registerProvider(this);
+}
+
+
+ColorContextPadProvider.$inject = [
+  'contextPad',
+  'popupMenu',
+  'canvas'
+];
+module.exports = ColorContextPadProvider;
+
+
+ColorContextPadProvider.prototype.getContextPadEntries = function(element) {
+  var self = this;
+  var actions = {
+    '3': {
+      group: 'e',
+      className: 'bpmn-icon-screw-wrench',
+      title: '设置颜色',
+      action: {
+        click: function(event, element) {
+          // close any existing popup
+          self._popupMenu.close();
+
+          // create new color-picker popup
+          var colorPicker = _popupMenuCreate(self._popupMenu,'color-picker', element);
+
+          // get start popup draw start position
+          var opts = getStartPosition(self._canvas, self._contextPad, element);
+
+          // or fallback to current cursor position
+          opts.cursor = {
+            x: event.x,
+            y: event.y
+          };
+
+          // open color picker submenu popup
+          colorPicker.open(element,'color-picker',opts);
+        }
+      }
+    }
+  };
+
+  // return actions;
+};
+
+
+function _popupMenuCreate(_this,id,element){
+  var provider = _this._providers[id];
+
+  if (!provider) {
+    throw new Error('Provider is not registered: ' + id);
+  }
+
+  if (!element) {
+    throw new Error('Element is missing');
+  }
+
+  var current = _this._current = {
+    provider: provider,
+    className: id,
+    element: element
+  };
+
+  if (provider.getHeaderEntries) {
+    current.headerEntries = provider.getHeaderEntries(element);
+  }
+
+  current.entries = provider.getEntries(element);
+
+  return _this;
+}
+
+// helpers //////////////////////
+
+function getStartPosition(canvas, contextPad, element) {
+
+  var Y_OFFSET = 5;
+
+  var diagramContainer = canvas.getContainer(),
+      pad = contextPad.getPad(element).html;
+
+  var diagramRect = diagramContainer.getBoundingClientRect(),
+      padRect = pad.getBoundingClientRect();
+
+  var top = padRect.top - diagramRect.top;
+  var left = padRect.left - diagramRect.left;
+
+  var pos = {
+    x: left,
+    y: top + padRect.height + Y_OFFSET
+  };
+
+  return pos;
+}

ebpm-process-modeler/bpmn-js/colors/ColorPopupProvider.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var getBusinessObject = require('bpmn-js/lib/util/ModelUtil').getBusinessObject;
+
+
+function PopupMenuProvider(popupMenu, modeling) {
+  this._popupMenu = popupMenu;
+  this._modeling = modeling;
+
+  this._popupMenu.registerProvider('color-picker', this);
+}
+
+
+PopupMenuProvider.$inject = [
+  'popupMenu',
+  'modeling'
+];
+module.exports = PopupMenuProvider;
+
+
+PopupMenuProvider.prototype.getEntries = function(element) {
+  var self = this;
+
+  var colors = [
+    {
+      label: '红色',
+      hex: 'ff0000'
+    }, {
+      label: '橙色',
+      hex: 'ff7f00'
+    }, {
+      label: '黄色',
+      hex: 'ffff00'
+    }, {
+      label: '绿色',
+      hex: '00ff00'
+    }, {
+      label: '蓝色',
+      hex: '0000ff'
+    }, {
+      label: '青色',
+      hex: '4b0082'
+    }, {
+      label: '紫色',
+      hex: '9400d3'
+    }
+  ];
+
+  var entries = colors.map(function(color) {
+    return {
+      label: color.label,
+      id: color.label.toLowerCase() + '-color',
+      className: 'color-icon-' + color.hex,
+      action: createAction(self._modeling, element, '#' + color.hex)
+    };
+  });
+  return entries;
+};
+
+
+PopupMenuProvider.prototype.getHeaderEntries = function(element) {
+  return [
+    {
+      label: '还原',
+      id: 'clear-color',
+      className: 'color-icon-clear',
+      action: createAction(this._modeling, element)
+    }
+  ];
+};
+
+
+function createAction(modeling, element, newColor) {
+  // set hex value to an element
+  return function() {
+    var bo = getBusinessObject(element);
+    var di = bo.di;
+
+    var currentColor = di.get('color:background-color');
+
+    console.log('Replacing colors from/to: ', currentColor, newColor);
+
+    var ns = (
+      newColor ?
+        'http://www.omg.org/spec/BPMN/non-normative/color/1.0' :
+        undefined
+    );
+
+    modeling.updateProperties(element, {
+      di: {
+        'xmlns:color': ns,
+        'color:background-color': newColor
+      }
+    });
+
+  };
+}

ebpm-process-modeler/bpmn-js/colors/ColorRenderer.js

@@ -0,0 +1,66 @@
+
+var inherits = require('inherits');
+var getBusinessObject = require('bpmn-js/lib/util/ModelUtil').getBusinessObject;
+import BpmnRenderer from 'bpmn-js/lib/draw/BpmnRenderer';
+//import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
+var svgAttr = require('tiny-svg/lib/attr');
+
+
+export default function ColorRenderer(injector, eventBus) {
+  // set higher priority then a default 1000 for an existing BpmnRenderer
+  var callPriority = 2000;
+
+  //
+  //BaseRenderer.call(this, eventBus, 2000);
+  injector.invoke(BpmnRenderer, this);
+  var self = this;
+
+  eventBus.on([ 'render.shape' ], callPriority, function(evt, context) {
+    var element = context.element,
+        visuals = context.gfx;
+
+    // call default implementation
+    var shape = self.drawShape(visuals, element);
+    // 2D shape with default white color
+    var businessObject = getBusinessObject(element);
+    if(businessObject.$type == "bpmn:SequenceFlow"){
+      svgAttr(shape, {
+        fill: getBackgroundColor(element) || '#000000'
+      });
+    }else{
+      svgAttr(shape, {
+        fill: getBackgroundColor(element) || '#ffffff'
+      });
+    }
+    // make sure default renderer is not called anymore
+    return shape;
+  });
+
+  eventBus.on([ 'render.connection' ], callPriority, function(evt, context) {
+    var element = context.element,
+        visuals = context.gfx;
+
+    // call default implementation
+    var shape = self.drawConnection(visuals, element);
+
+    // line shape with default black color
+    svgAttr(shape, {
+      stroke: getBackgroundColor(element) || '#000000'
+    });
+
+    // make sure default renderer is not called anymore
+    return shape;
+  });
+}
+
+inherits(ColorRenderer, BpmnRenderer);
+ColorRenderer.$inject = [ 'injector', 'eventBus' ];
+//module.exports = ColorRenderer;
+
+
+
+
+function getBackgroundColor(element) {
+  var bo = getBusinessObject(element);
+  return bo.di.get('color:background-color');
+}

ebpm-process-modeler/bpmn-js/colors/color-picker.css

@@ -0,0 +1,69 @@
+/* COLOR PICKER */
+
+/* context pad */
+.djs-context-pad .entry {
+  background-color: rgba(255, 255, 255, 0.6);
+  box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.6);
+}
+
+.bpmn-icon-color:before {
+    content: '🖌';
+}
+
+/* color popup menu */
+[class^="color-icon-"]:before,
+[class*=" color-icon-"]:before {
+  display: inline-block;
+  content: '';
+  width: 1.5em;
+  height: 0.6em;
+  border-radius: 0.5em;
+  border: 0.03em solid black;
+}
+
+.djs-popup-header .entry.color-icon-clear {
+  margin-left: 5px;
+  padding: 0;
+}
+
+.djs-popup-header .entry.color-icon-clear > span {
+  margin-left: 5px;
+}
+
+.color-icon-clear:before {
+  background-color: #ffffff;
+}
+
+.color-icon-ff0000:before {
+  background-color: #ff0000;
+}
+
+.color-icon-ff7f00:before {
+  background-color: #ff7f00;
+}
+
+.color-icon-ffff00:before {
+  background-color: #ffff00;
+}
+
+.color-icon-00ff00:before {
+  background-color: #00ff00;
+}
+
+.color-icon-0000ff:before {
+  background-color: #0000ff;
+}
+
+.color-icon-4b0082:before {
+  background-color: #4b0082;
+}
+
+.color-icon-9400d3:before {
+  background-color: #9400d3;
+}
+
+/* transparancy for shapes with colors */
+.color-transparancy {
+  fill-opacity: 0.50;
+}
+

ebpm-process-modeler/bpmn-js/colors/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+
+module.exports = {
+  __init__: [
+    'colorContextPadProvider',
+    'colorPopupProvider'
+  ],
+  colorContextPadProvider: [ 'type', require('./ColorContextPadProvider') ],
+  
+  colorPopupProvider: [ 'type', require('./ColorPopupProvider') ]
+};

ebpm-process-modeler/bpmn-js/colors/vendor/bpmn-font/css/bpmn-codes.css

@@ -0,0 +1,107 @@
+
+.bpmn-icon-screw-wrench:before { content: '\e800'; } /* '' */
+.bpmn-icon-trash:before { content: '\e801'; } /* '' */
+.bpmn-icon-conditional-flow:before { content: '\e802'; } /* '' */
+.bpmn-icon-default-flow:before { content: '\e803'; } /* '' */
+.bpmn-icon-gateway-parallel:before { content: '\e804'; } /* '' */
+.bpmn-icon-intermediate-event-catch-cancel:before { content: '\e805'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-message:before { content: '\e806'; } /* '' */
+.bpmn-icon-start-event-compensation:before { content: '\e807'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-parallel-multiple:before { content: '\e808'; } /* '' */
+.bpmn-icon-loop-marker:before { content: '\e809'; } /* '' */
+.bpmn-icon-parallel-mi-marker:before { content: '\e80a'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-signal:before { content: '\e80b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-timer:before { content: '\e80c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-parallel-multiple:before { content: '\e80d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-compensation:before { content: '\e80e'; } /* '' */
+.bpmn-icon-gateway-xor:before { content: '\e80f'; } /* '' */
+.bpmn-icon-connection:before { content: '\e810'; } /* '' */
+.bpmn-icon-end-event-cancel:before { content: '\e811'; } /* '' */
+.bpmn-icon-intermediate-event-catch-condition:before { content: '\e812'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-parallel-multiple:before { content: '\e813'; } /* '' */
+.bpmn-icon-start-event-condition:before { content: '\e814'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-timer:before { content: '\e815'; } /* '' */
+.bpmn-icon-sequential-mi-marker:before { content: '\e816'; } /* '' */
+.bpmn-icon-user-task:before { content: '\e817'; } /* '' */
+.bpmn-icon-business-rule:before { content: '\e818'; } /* '' */
+.bpmn-icon-sub-process-marker:before { content: '\e819'; } /* '' */
+.bpmn-icon-start-event-parallel-multiple:before { content: '\e81a'; } /* '' */
+.bpmn-icon-start-event-error:before { content: '\e81b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-signal:before { content: '\e81c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-error:before { content: '\e81d'; } /* '' */
+.bpmn-icon-end-event-compensation:before { content: '\e81e'; } /* '' */
+.bpmn-icon-subprocess-collapsed:before { content: '\e81f'; } /* '' */
+.bpmn-icon-subprocess-expanded:before { content: '\e820'; } /* '' */
+.bpmn-icon-task:before { content: '\e821'; } /* '' */
+.bpmn-icon-end-event-error:before { content: '\e822'; } /* '' */
+.bpmn-icon-intermediate-event-catch-escalation:before { content: '\e823'; } /* '' */
+.bpmn-icon-intermediate-event-catch-timer:before { content: '\e824'; } /* '' */
+.bpmn-icon-start-event-escalation:before { content: '\e825'; } /* '' */
+.bpmn-icon-start-event-signal:before { content: '\e826'; } /* '' */
+.bpmn-icon-business-rule-task:before { content: '\e827'; } /* '' */
+.bpmn-icon-manual:before { content: '\e828'; } /* '' */
+.bpmn-icon-receive:before { content: '\e829'; } /* '' */
+.bpmn-icon-call-activity:before { content: '\e82a'; } /* '' */
+.bpmn-icon-start-event-timer:before { content: '\e82b'; } /* '' */
+.bpmn-icon-start-event-message:before { content: '\e82c'; } /* '' */
+.bpmn-icon-intermediate-event-none:before { content: '\e82d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-link:before { content: '\e82e'; } /* '' */
+.bpmn-icon-end-event-escalation:before { content: '\e82f'; } /* '' */
+.bpmn-icon-text-annotation:before { content: '\e830'; } /* '' */
+.bpmn-icon-bpmn-io:before { content: '\e831'; } /* '' */
+.bpmn-icon-gateway-complex:before { content: '\e832'; } /* '' */
+.bpmn-icon-gateway-eventbased:before { content: '\e833'; } /* '' */
+.bpmn-icon-gateway-none:before { content: '\e834'; } /* '' */
+.bpmn-icon-gateway-or:before { content: '\e835'; } /* '' */
+.bpmn-icon-end-event-terminate:before { content: '\e836'; } /* '' */
+.bpmn-icon-end-event-signal:before { content: '\e837'; } /* '' */
+.bpmn-icon-end-event-none:before { content: '\e838'; } /* '' */
+.bpmn-icon-end-event-multiple:before { content: '\e839'; } /* '' */
+.bpmn-icon-end-event-message:before { content: '\e83a'; } /* '' */
+.bpmn-icon-end-event-link:before { content: '\e83b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-message:before { content: '\e83c'; } /* '' */
+.bpmn-icon-intermediate-event-throw-compensation:before { content: '\e83d'; } /* '' */
+.bpmn-icon-start-event-multiple:before { content: '\e83e'; } /* '' */
+.bpmn-icon-script:before { content: '\e83f'; } /* '' */
+.bpmn-icon-manual-task:before { content: '\e840'; } /* '' */
+.bpmn-icon-send:before { content: '\e841'; } /* '' */
+.bpmn-icon-service:before { content: '\e842'; } /* '' */
+.bpmn-icon-receive-task:before { content: '\e843'; } /* '' */
+.bpmn-icon-user:before { content: '\e844'; } /* '' */
+.bpmn-icon-start-event-none:before { content: '\e845'; } /* '' */
+.bpmn-icon-intermediate-event-throw-escalation:before { content: '\e846'; } /* '' */
+.bpmn-icon-intermediate-event-catch-multiple:before { content: '\e847'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-escalation:before { content: '\e848'; } /* '' */
+.bpmn-icon-intermediate-event-throw-link:before { content: '\e849'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-condition:before { content: '\e84a'; } /* '' */
+.bpmn-icon-data-object:before { content: '\e84b'; } /* '' */
+.bpmn-icon-script-task:before { content: '\e84c'; } /* '' */
+.bpmn-icon-send-task:before { content: '\e84d'; } /* '' */
+.bpmn-icon-data-store:before { content: '\e84e'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-escalation:before { content: '\e84f'; } /* '' */
+.bpmn-icon-intermediate-event-throw-message:before { content: '\e850'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-multiple:before { content: '\e851'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-signal:before { content: '\e852'; } /* '' */
+.bpmn-icon-intermediate-event-throw-multiple:before { content: '\e853'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-message:before { content: '\e854'; } /* '' */
+.bpmn-icon-ad-hoc-marker:before { content: '\e855'; } /* '' */
+.bpmn-icon-service-task:before { content: '\e856'; } /* '' */
+.bpmn-icon-task-none:before { content: '\e857'; } /* '' */
+.bpmn-icon-compensation-marker:before { content: '\e858'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-multiple:before { content: '\e859'; } /* '' */
+.bpmn-icon-intermediate-event-throw-signal:before { content: '\e85a'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-condition:before { content: '\e85b'; } /* '' */
+.bpmn-icon-participant:before { content: '\e85c'; } /* '' */
+.bpmn-icon-event-subprocess-expanded:before { content: '\e85d'; } /* '' */
+.bpmn-icon-lane-insert-below:before { content: '\e85e'; } /* '' */
+.bpmn-icon-space-tool:before { content: '\e85f'; } /* '' */
+.bpmn-icon-connection-multi:before { content: '\e860'; } /* '' */
+.bpmn-icon-lane:before { content: '\e861'; } /* '' */
+.bpmn-icon-lasso-tool:before { content: '\e862'; } /* '' */
+.bpmn-icon-lane-insert-above:before { content: '\e863'; } /* '' */
+.bpmn-icon-lane-divide-three:before { content: '\e864'; } /* '' */
+.bpmn-icon-lane-divide-two:before { content: '\e865'; } /* '' */
+.bpmn-icon-data-input:before { content: '\e866'; } /* '' */
+.bpmn-icon-data-output:before { content: '\e867'; } /* '' */
+.bpmn-icon-hand-tool:before { content: '\e868'; } /* '' */
+.bpmn-icon-transaction:before { content: '\e8c4'; } /* '' */

ebpm-process-modeler/bpmn-js/colors/vendor/bpmn-font/css/bpmn.css

@@ -0,0 +1,162 @@
+@font-face {
+  font-family: 'bpmn';
+  src: url('../font/bpmn.eot?70672887');
+  src: url('../font/bpmn.eot?70672887#iefix') format('embedded-opentype'),
+       url('../font/bpmn.woff?70672887') format('woff'),
+       url('../font/bpmn.ttf?70672887') format('truetype'),
+       url('../font/bpmn.svg?70672887#bpmn') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'bpmn';
+    src: url('../font/bpmn.svg?70672887#bpmn') format('svg');
+  }
+}
+*/
+
+ [class^="bpmn-icon-"]:before, [class*=" bpmn-icon-"]:before {
+  font-family: "bpmn";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  /* margin-right: .2em; */
+  text-align: center;
+  /* opacity: .8; */
+
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  /* margin-left: .2em; */
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.bpmn-icon-screw-wrench:before { content: '\e800'; } /* '' */
+.bpmn-icon-trash:before { content: '\e801'; } /* '' */
+.bpmn-icon-conditional-flow:before { content: '\e802'; } /* '' */
+.bpmn-icon-default-flow:before { content: '\e803'; } /* '' */
+.bpmn-icon-gateway-parallel:before { content: '\e804'; } /* '' */
+.bpmn-icon-intermediate-event-catch-cancel:before { content: '\e805'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-message:before { content: '\e806'; } /* '' */
+.bpmn-icon-start-event-compensation:before { content: '\e807'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-parallel-multiple:before { content: '\e808'; } /* '' */
+.bpmn-icon-loop-marker:before { content: '\e809'; } /* '' */
+.bpmn-icon-parallel-mi-marker:before { content: '\e80a'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-signal:before { content: '\e80b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-timer:before { content: '\e80c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-parallel-multiple:before { content: '\e80d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-compensation:before { content: '\e80e'; } /* '' */
+.bpmn-icon-gateway-xor:before { content: '\e80f'; } /* '' */
+.bpmn-icon-connection:before { content: '\e810'; } /* '' */
+.bpmn-icon-end-event-cancel:before { content: '\e811'; } /* '' */
+.bpmn-icon-intermediate-event-catch-condition:before { content: '\e812'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-parallel-multiple:before { content: '\e813'; } /* '' */
+.bpmn-icon-start-event-condition:before { content: '\e814'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-timer:before { content: '\e815'; } /* '' */
+.bpmn-icon-sequential-mi-marker:before { content: '\e816'; } /* '' */
+.bpmn-icon-user-task:before { content: '\e817'; } /* '' */
+.bpmn-icon-business-rule:before { content: '\e818'; } /* '' */
+.bpmn-icon-sub-process-marker:before { content: '\e819'; } /* '' */
+.bpmn-icon-start-event-parallel-multiple:before { content: '\e81a'; } /* '' */
+.bpmn-icon-start-event-error:before { content: '\e81b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-signal:before { content: '\e81c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-error:before { content: '\e81d'; } /* '' */
+.bpmn-icon-end-event-compensation:before { content: '\e81e'; } /* '' */
+.bpmn-icon-subprocess-collapsed:before { content: '\e81f'; } /* '' */
+.bpmn-icon-subprocess-expanded:before { content: '\e820'; } /* '' */
+.bpmn-icon-task:before { content: '\e821'; } /* '' */
+.bpmn-icon-end-event-error:before { content: '\e822'; } /* '' */
+.bpmn-icon-intermediate-event-catch-escalation:before { content: '\e823'; } /* '' */
+.bpmn-icon-intermediate-event-catch-timer:before { content: '\e824'; } /* '' */
+.bpmn-icon-start-event-escalation:before { content: '\e825'; } /* '' */
+.bpmn-icon-start-event-signal:before { content: '\e826'; } /* '' */
+.bpmn-icon-business-rule-task:before { content: '\e827'; } /* '' */
+.bpmn-icon-manual:before { content: '\e828'; } /* '' */
+.bpmn-icon-receive:before { content: '\e829'; } /* '' */
+.bpmn-icon-call-activity:before { content: '\e82a'; } /* '' */
+.bpmn-icon-start-event-timer:before { content: '\e82b'; } /* '' */
+.bpmn-icon-start-event-message:before { content: '\e82c'; } /* '' */
+.bpmn-icon-intermediate-event-none:before { content: '\e82d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-link:before { content: '\e82e'; } /* '' */
+.bpmn-icon-end-event-escalation:before { content: '\e82f'; } /* '' */
+.bpmn-icon-text-annotation:before { content: '\e830'; } /* '' */
+.bpmn-icon-bpmn-io:before { content: '\e831'; } /* '' */
+.bpmn-icon-gateway-complex:before { content: '\e832'; } /* '' */
+.bpmn-icon-gateway-eventbased:before { content: '\e833'; } /* '' */
+.bpmn-icon-gateway-none:before { content: '\e834'; } /* '' */
+.bpmn-icon-gateway-or:before { content: '\e835'; } /* '' */
+.bpmn-icon-end-event-terminate:before { content: '\e836'; } /* '' */
+.bpmn-icon-end-event-signal:before { content: '\e837'; } /* '' */
+.bpmn-icon-end-event-none:before { content: '\e838'; } /* '' */
+.bpmn-icon-end-event-multiple:before { content: '\e839'; } /* '' */
+.bpmn-icon-end-event-message:before { content: '\e83a'; } /* '' */
+.bpmn-icon-end-event-link:before { content: '\e83b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-message:before { content: '\e83c'; } /* '' */
+.bpmn-icon-intermediate-event-throw-compensation:before { content: '\e83d'; } /* '' */
+.bpmn-icon-start-event-multiple:before { content: '\e83e'; } /* '' */
+.bpmn-icon-script:before { content: '\e83f'; } /* '' */
+.bpmn-icon-manual-task:before { content: '\e840'; } /* '' */
+.bpmn-icon-send:before { content: '\e841'; } /* '' */
+.bpmn-icon-service:before { content: '\e842'; } /* '' */
+.bpmn-icon-receive-task:before { content: '\e843'; } /* '' */
+.bpmn-icon-user:before { content: '\e844'; } /* '' */
+.bpmn-icon-start-event-none:before { content: '\e845'; } /* '' */
+.bpmn-icon-intermediate-event-throw-escalation:before { content: '\e846'; } /* '' */
+.bpmn-icon-intermediate-event-catch-multiple:before { content: '\e847'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-escalation:before { content: '\e848'; } /* '' */
+.bpmn-icon-intermediate-event-throw-link:before { content: '\e849'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-condition:before { content: '\e84a'; } /* '' */
+.bpmn-icon-data-object:before { content: '\e84b'; } /* '' */
+.bpmn-icon-script-task:before { content: '\e84c'; } /* '' */
+.bpmn-icon-send-task:before { content: '\e84d'; } /* '' */
+.bpmn-icon-data-store:before { content: '\e84e'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-escalation:before { content: '\e84f'; } /* '' */
+.bpmn-icon-intermediate-event-throw-message:before { content: '\e850'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-multiple:before { content: '\e851'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-signal:before { content: '\e852'; } /* '' */
+.bpmn-icon-intermediate-event-throw-multiple:before { content: '\e853'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-message:before { content: '\e854'; } /* '' */
+.bpmn-icon-ad-hoc-marker:before { content: '\e855'; } /* '' */
+.bpmn-icon-service-task:before { content: '\e856'; } /* '' */
+.bpmn-icon-task-none:before { content: '\e857'; } /* '' */
+.bpmn-icon-compensation-marker:before { content: '\e858'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-multiple:before { content: '\e859'; } /* '' */
+.bpmn-icon-intermediate-event-throw-signal:before { content: '\e85a'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-condition:before { content: '\e85b'; } /* '' */
+.bpmn-icon-participant:before { content: '\e85c'; } /* '' */
+.bpmn-icon-event-subprocess-expanded:before { content: '\e85d'; } /* '' */
+.bpmn-icon-lane-insert-below:before { content: '\e85e'; } /* '' */
+.bpmn-icon-space-tool:before { content: '\e85f'; } /* '' */
+.bpmn-icon-connection-multi:before { content: '\e860'; } /* '' */
+.bpmn-icon-lane:before { content: '\e861'; } /* '' */
+.bpmn-icon-lasso-tool:before { content: '\e862'; } /* '' */
+.bpmn-icon-lane-insert-above:before { content: '\e863'; } /* '' */
+.bpmn-icon-lane-divide-three:before { content: '\e864'; } /* '' */
+.bpmn-icon-lane-divide-two:before { content: '\e865'; } /* '' */
+.bpmn-icon-data-input:before { content: '\e866'; } /* '' */
+.bpmn-icon-data-output:before { content: '\e867'; } /* '' */
+.bpmn-icon-hand-tool:before { content: '\e868'; } /* '' */
+.bpmn-icon-transaction:before { content: '\e8c4'; } /* '' */

ebpm-process-modeler/bpmn-js/colors/vendor/colors/color-picker.css

@@ -0,0 +1,71 @@
+/* COLOR PICKER */
+
+/* context pad */
+.djs-context-pad .entry {
+  background-color: rgba(255, 255, 255, 0.6);
+  box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.6);
+}
+
+.bpmn-icon-color:before {
+    content: '🖌';
+}
+
+/* color popup menu */
+[class^="color-icon-"]:before,
+[class*=" color-icon-"]:before {
+  display: inline-block;
+  content: '';
+  width: 1.5em;
+  height: 0.6em;
+  border-radius: 0.5em;
+  border: 0.03em solid black;
+}
+
+.djs-popup-header .entry.color-icon-clear {
+  margin-left: 5px;
+  padding: 0;
+}
+.djs-label{
+  fill: rgba(0, 0, 0) !important;
+}
+.djs-popup-header .entry.color-icon-clear > span {
+  margin-left: 5px;
+}
+
+.color-icon-clear:before {
+  background-color: #ffffff;
+}
+
+.color-icon-ff0000:before {
+  background-color: #ff0000;
+}
+
+.color-icon-ff7f00:before {
+  background-color: #ff7f00;
+}
+
+.color-icon-ffff00:before {
+  background-color: #ffff00;
+}
+
+.color-icon-00ff00:before {
+  background-color: #00ff00;
+}
+
+.color-icon-0000ff:before {
+  background-color: #0000ff;
+}
+
+.color-icon-4b0082:before {
+  background-color: #4b0082;
+}
+
+.color-icon-9400d3:before {
+  background-color: #9400d3;
+}
+
+/* transparancy for shapes with colors */
+.color-transparancy {
+  fill-opacity: 0.50;
+}
+

ebpm-process-modeler/bpmn-js/colors/vendor/diagram-js.css

@@ -0,0 +1,684 @@
+/**
+ * outline styles
+ */
+
+.djs-outline {
+  fill: none;
+  visibility: hidden;
+}
+
+.djs-element.hover .djs-outline,
+.djs-element.selected .djs-outline {
+  visibility: visible;
+  shape-rendering: crispEdges;
+  stroke-dasharray: 3,3;
+}
+
+.djs-element.selected .djs-outline {
+  stroke: #8888FF;
+  stroke-width: 1px;
+}
+
+.djs-element.hover .djs-outline {
+  stroke: #FF8888;
+  stroke-width: 1px;
+}
+
+.djs-shape.connect-ok .djs-visual > :nth-child(1) {
+  fill: #DCFECC /* light-green */ !important;
+}
+
+.djs-shape.connect-not-ok .djs-visual > :nth-child(1),
+.djs-shape.drop-not-ok .djs-visual > :nth-child(1) {
+  fill: #f9dee5 /* light-red */ !important;
+}
+
+.djs-shape.new-parent .djs-visual > :nth-child(1) {
+  fill: #F7F9FF !important;
+}
+
+svg.drop-not-ok {
+  background: #f9dee5 /* light-red */ !important;
+}
+
+svg.new-parent {
+  background: #F7F9FF /* light-blue */ !important;
+}
+
+.djs-connection.connect-ok .djs-visual > :nth-child(1),
+.djs-connection.drop-ok .djs-visual > :nth-child(1) {
+  stroke: #90DD5F /* light-green */ !important;
+}
+
+.djs-connection.connect-not-ok .djs-visual > :nth-child(1),
+.djs-connection.drop-not-ok .djs-visual > :nth-child(1) {
+  stroke: #E56283 /* light-red */ !important;
+}
+
+.drop-not-ok,
+.connect-not-ok {
+  cursor: not-allowed;
+}
+
+.djs-element.attach-ok .djs-visual > :nth-child(1) {
+  stroke-width: 5px !important;
+  stroke: rgba(255, 116, 0, 0.7) !important;
+}
+
+
+/**
+* Selection box style
+*
+*/
+.djs-lasso-overlay {
+  fill: rgb(255, 116, 0);
+  fill-opacity: 0.1;
+
+  stroke-dasharray: 5 1 3 1;
+  stroke: rgb(255, 116, 0);
+
+  shape-rendering: crispEdges;
+  pointer-events: none;
+}
+
+/**
+ * Resize styles
+ */
+.djs-resize-overlay {
+  fill: none;
+
+  stroke-dasharray: 5 1 3 1;
+  stroke: rgb(255, 116, 0);
+
+  pointer-events: none;
+}
+
+.djs-resizer-hit {
+  fill: none;
+  pointer-events: all;
+}
+
+.djs-resizer-visual {
+  fill: white;
+  stroke-width: 1px;
+  stroke: black;
+  shape-rendering: crispEdges;
+  stroke-opacity: 0.2;
+}
+
+.djs-cursor-resize-nwse,
+.djs-resizer-nw,
+.djs-resizer-se {
+  cursor: nwse-resize;
+}
+
+.djs-cursor-resize-nesw,
+.djs-resizer-ne,
+.djs-resizer-sw {
+  cursor: nesw-resize;
+}
+
+.djs-shape.djs-resizing > .djs-outline {
+  visibility: hidden !important;
+}
+
+.djs-shape.djs-resizing > .djs-resizer {
+  visibility: hidden;
+}
+
+.djs-dragger > .djs-resizer {
+  visibility: hidden;
+}
+
+/**
+ * drag styles
+ */
+.djs-dragger .djs-visual circle,
+.djs-dragger .djs-visual path,
+.djs-dragger .djs-visual polygon,
+.djs-dragger .djs-visual polyline,
+.djs-dragger .djs-visual rect,
+.djs-dragger .djs-visual text {
+  fill: none !important;
+  stroke: rgb(255, 116, 0) !important;
+}
+
+.djs-dragging {
+  opacity: 0.3;
+}
+
+.djs-dragging,
+.djs-dragging > * {
+  pointer-events: none !important;
+}
+
+.djs-dragging .djs-context-pad,
+.djs-dragging .djs-outline {
+  display: none !important;
+}
+
+/**
+ * no pointer events for visual
+ */
+.djs-visual,
+.djs-outline {
+  pointer-events: none;
+}
+
+/**
+ * all pointer events for hit shape
+ */
+.djs-shape .djs-hit {
+  pointer-events: all;
+}
+
+.djs-connection .djs-hit {
+  pointer-events: stroke;
+}
+
+/**
+ * shape / connection basic styles
+ */
+.djs-connection .djs-visual {
+  stroke-width: 2px;
+  fill: none;
+}
+
+.djs-cursor-grab {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+}
+
+.djs-cursor-grabbing {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+
+.djs-cursor-crosshair {
+  cursor: crosshair;
+}
+
+.djs-cursor-move {
+  cursor: move;
+}
+
+.djs-cursor-resize-ns {
+  cursor: ns-resize;
+}
+
+.djs-cursor-resize-ew {
+  cursor: ew-resize;
+}
+
+
+/**
+ * snapping
+ */
+.djs-snap-line {
+  stroke: rgb(255, 195, 66);
+  stroke: rgba(255, 195, 66, 0.50);
+  stroke-linecap: round;
+  stroke-width: 2px;
+  pointer-events: none;
+}
+
+/**
+ * snapping
+ */
+.djs-crosshair {
+  stroke: #555;
+  stroke-linecap: round;
+  stroke-width: 1px;
+  pointer-events: none;
+  shape-rendering: crispEdges;
+  stroke-dasharray: 5, 5;
+}
+
+/**
+ * palette
+ */
+
+.djs-palette {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+
+  box-sizing: border-box;
+  width: 48px;
+}
+
+.djs-palette .separator {
+  margin: 0 5px;
+  padding-top: 5px;
+
+  border: none;
+  border-bottom: solid 1px #DDD;
+
+  clear: both;
+}
+
+.djs-palette .entry:before {
+  vertical-align: middle;
+}
+
+.djs-palette .djs-palette-toggle {
+  cursor: pointer;
+}
+
+.djs-palette .entry,
+.djs-palette .djs-palette-toggle {
+  color: #333;
+  font-size: 30px;
+
+  text-align: center;
+}
+
+.djs-palette .entry {
+  float: left;
+}
+
+.djs-palette .entry img {
+  max-width: 100%;
+}
+
+.djs-palette .djs-palette-entries:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.djs-palette .djs-palette-toggle:hover {
+  background: #666;
+}
+
+.djs-palette .entry:hover {
+  color: rgb(255, 116, 0);
+}
+
+.djs-palette .highlighted-entry {
+  color: rgb(255, 116, 0) !important;
+}
+
+.djs-palette .entry,
+.djs-palette .djs-palette-toggle {
+  width: 124px;
+  height: 46px;
+  line-height: 46px;
+  cursor: default;
+}
+
+/**
+ * Palette open / two-column layout is controlled via
+ * classes on the palette. Events to hook into palette
+ * changed life-cycle are available in addition.
+ */
+.djs-palette.two-column.open {
+  width:124px;
+}
+
+.djs-palette:not(.open) .djs-palette-entries {
+  display: none;
+}
+
+.djs-palette:not(.open) {
+  overflow: hidden;
+}
+
+.djs-palette.open .djs-palette-toggle {
+  width: 100%;
+  height: 10px;
+}
+
+/**
+ * context-pad
+ */
+.djs-overlay-context-pad {
+  width: 72px;
+}
+
+.djs-context-pad {
+  position: absolute;
+  display: none;
+  pointer-events: none;
+}
+
+.djs-context-pad .entry {
+  width: 22px;
+  height: 22px;
+  text-align: center;
+  display: inline-block;
+  font-size: 22px;
+  margin: 0 2px 2px 0;
+
+  border-radius: 3px;
+
+  cursor: default;
+
+  background-color: #FEFEFE;
+  box-shadow: 0 0 2px 1px #FEFEFE;
+  pointer-events: all;
+}
+
+.djs-context-pad .entry:before {
+  vertical-align: top;
+}
+
+.djs-context-pad .entry:hover {
+  background: rgb(255, 252, 176);
+}
+
+.djs-context-pad.open {
+  display: block;
+}
+
+/**
+ * popup styles
+ */
+.djs-popup .entry {
+  line-height: 20px;
+  white-space: nowrap;
+  cursor: default;
+}
+
+/* larger font for prefixed icons */
+.djs-popup .entry:before {
+  vertical-align: middle;
+  font-size: 20px;
+}
+
+.djs-popup .entry > span {
+  vertical-align: middle;
+  font-size: 14px;
+}
+
+.djs-popup .entry:hover,
+.djs-popup .entry.active:hover {
+  background: rgb(255, 252, 176);
+}
+
+.djs-popup .entry.disabled {
+  background: inherit;
+}
+
+.djs-popup .djs-popup-header .entry {
+  display: inline-block;
+  padding: 2px 3px 2px 3px;
+
+  border: solid 1px transparent;
+  border-radius: 3px;
+}
+
+.djs-popup .djs-popup-header .entry.active {
+  color: rgb(255, 116, 0);
+  border: solid 1px rgb(255, 116, 0);
+  background-color: #F6F6F6;
+}
+
+.djs-popup-body .entry {
+  padding: 4px 10px 4px 5px;
+}
+
+.djs-popup-body .entry > span {
+  margin-left: 5px;
+}
+
+.djs-popup-body {
+  background-color: #FEFEFE;
+}
+
+.djs-popup-header {
+  border-bottom: 1px solid #DDD;
+}
+
+.djs-popup-header .entry {
+  margin: 1px;
+  margin-left: 3px;
+}
+
+.djs-popup-header .entry:last-child {
+  margin-right: 3px;
+}
+
+/**
+ * popup / palette styles
+ */
+.djs-popup, .djs-palette {
+  background: #FAFAFA;
+  border: solid 1px #CCC;
+  border-radius: 2px;
+}
+
+/**
+ * touch
+ */
+
+.djs-shape,
+.djs-connection {
+  touch-action: none;
+}
+
+.djs-segment-dragger,
+.djs-bendpoint {
+  display: none;
+}
+
+/**
+ * bendpoints
+ */
+.djs-segment-dragger .djs-visual {
+  fill: rgba(255, 255, 121, 0.2);
+  stroke-width: 1px;
+  stroke-opacity: 1;
+  stroke: rgba(255, 255, 121, 0.3);
+}
+
+.djs-bendpoint .djs-visual {
+  fill: rgba(255, 255, 121, 0.8);
+  stroke-width: 1px;
+  stroke-opacity: 0.5;
+  stroke: black;
+}
+
+.djs-segment-dragger:hover,
+.djs-bendpoints.hover .djs-segment-dragger,
+.djs-bendpoints.selected .djs-segment-dragger,
+.djs-bendpoint:hover,
+.djs-bendpoints.hover .djs-bendpoint,
+.djs-bendpoints.selected .djs-bendpoint {
+  display: block;
+}
+
+.djs-drag-active .djs-bendpoints * {
+  display: none;
+}
+
+.djs-bendpoints:not(.hover) .floating {
+  display: none;
+}
+
+.djs-segment-dragger:hover .djs-visual,
+.djs-segment-dragger.djs-dragging .djs-visual,
+.djs-bendpoint:hover .djs-visual,
+.djs-bendpoint.floating .djs-visual {
+  fill: yellow;
+  stroke-opacity: 0.5;
+  stroke: black;
+}
+
+.djs-bendpoint.floating .djs-hit {
+  pointer-events: none;
+}
+
+.djs-segment-dragger .djs-hit,
+.djs-bendpoint .djs-hit {
+  pointer-events: all;
+  fill: none;
+}
+
+.djs-segment-dragger.horizontal .djs-hit {
+  cursor: ns-resize;
+}
+
+.djs-segment-dragger.vertical .djs-hit {
+  cursor: ew-resize;
+}
+
+.djs-segment-dragger.djs-dragging .djs-hit {
+  pointer-events: none;
+}
+
+.djs-updating,
+.djs-updating > * {
+  pointer-events: none !important;
+}
+
+.djs-updating .djs-context-pad,
+.djs-updating .djs-outline,
+.djs-updating .djs-bendpoint,
+.connect-ok .djs-bendpoint,
+.connect-not-ok .djs-bendpoint,
+.drop-ok .djs-bendpoint,
+.drop-not-ok .djs-bendpoint {
+  display: none !important;
+}
+
+.djs-segment-dragger.djs-dragging,
+.djs-bendpoint.djs-dragging {
+  display: block;
+  opacity: 1.0;
+}
+
+.djs-segment-dragger.djs-dragging .djs-visual,
+.djs-bendpoint.djs-dragging .djs-visual {
+  fill: yellow;
+  stroke-opacity: 0.5;
+}
+
+
+/**
+ * tooltips
+ */
+.djs-tooltip-error {
+  font-size: 11px;
+  line-height: 18px;
+  text-align: left;
+
+  padding: 5px;
+
+  opacity: 0.7;
+}
+
+.djs-tooltip-error > * {
+  width: 160px;
+
+  background: rgb(252, 236, 240);
+  color: rgb(158, 76, 76);
+  padding: 3px 7px;
+  border-radius: 5px;
+  border-left: solid 5px rgb(174, 73, 73);
+}
+
+.djs-tooltip-error:hover {
+  opacity: 1;
+}
+
+
+/**
+ * search pad
+ */
+.djs-search-container {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+
+  width: 25%;
+  min-width: 300px;
+  max-width: 400px;
+  z-index: 10;
+
+  font-size: 1.05em;
+  opacity: 0.9;
+  background: #FAFAFA;
+  border: solid 1px #CCC;
+  border-radius: 2px;
+}
+
+.djs-search-container:not(.open) {
+  display: none;
+}
+
+.djs-search-input input {
+  font-size: 1.05em;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+}
+
+.djs-search-input input:focus {
+  outline: none;
+  border-color: #52B415;
+}
+
+.djs-search-results {
+  position: relative;
+  overflow-y: auto;
+  max-height: 200px;
+}
+
+.djs-search-results:hover {
+  /*background: #fffdd7;*/
+  cursor: pointer;
+}
+
+.djs-search-result {
+  width: 100%;
+  padding: 6px 10px;
+  background: white;
+  border-bottom: solid 1px #AAA;
+  border-radius: 1px;
+}
+
+.djs-search-highlight {
+  color: black;
+}
+
+.djs-search-result-primary {
+  margin: 0 0 10px;
+}
+
+.djs-search-result-secondary {
+  font-family: monospace;
+  margin: 0;
+}
+
+.djs-search-result:hover {
+  background: #fdffd6;
+}
+
+.djs-search-result-selected {
+  background: #fffcb0;
+}
+
+.djs-search-result-selected:hover {
+  background: #f7f388;
+}
+
+.djs-search-overlay {
+  background: yellow;
+  opacity: 0.3;
+}
+
+/**
+ * hidden styles
+ */
+.djs-element-hidden,
+.djs-element-hidden .djs-hit,
+.djs-element-hidden .djs-outline,
+.djs-label-hidden .djs-label {
+  display: none !important;
+}

ebpm-process-modeler/bpmn-js/customTranslate/customTranslate.js

@@ -0,0 +1,14 @@
+import translations from './translations';
+
+//提供转换器
+export default function customTranslate(template, replacements) {
+  replacements = replacements || {};
+
+  // Translate
+  template = translations[template] || template;
+
+  // Replace
+  return template.replace(/{([^}]+)}/g, function(_, key) {
+    return replacements[key] || '{' + key + '}';
+  });
+}

ebpm-process-modeler/bpmn-js/customTranslate/translations.js

@@ -0,0 +1,104 @@
+/**
+ *
+ * 转换字典
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  //'Exclusive Gateway': 'Exklusives Gateway',
+  //'Parallel Gateway': 'Paralleles Gateway',
+  //'Inclusive Gateway': 'Inklusives Gateway',
+  //'Complex Gateway': 'Komplexes Gateway',
+  //'Event based Gateway': 'Ereignis-basiertes Gateway',
+  'Message Start Event': '消息启动事件',
+  'Timer Start Event': '定时启动事件',
+  'Conditional Start Event': '条件启动事件',
+  'Signal Start Event': '信号启动事件',
+  'Error Start Event': '错误启动事件',
+  'Escalation Start Event': '升级启动事件',
+  'Compensation Start Event': '补偿启动事件',
+  'Message Start Event (non-interrupting)': '消息启动事件 (非中断)',
+  'Timer Start Event (non-interrupting)': '定时启动事件 (非中断)',
+  'Conditional Start Event (non-interrupting)': '条件启动事件 (非中断)',
+  'Signal Start Event (non-interrupting)': '信号启动事件 (非中断)',
+  'Escalation Start Event (non-interrupting)': '升级启动事件 (非中断)',
+  'Assignee': '代理人',
+  'Candidate Groups': '候选组',
+  'Candidate Users': '候选人',
+  'Due Date': '到期日',
+  'Follow Up Date': '跟踪日期',
+  'Priority': '优先',
+  'General': '一般信息',
+  'teners': '监听',
+  'Extensions': '扩展',
+  'Name': '名称',
+  'Version Tag': '版本标签',
+  'Executable': '可执行文件',
+  'External Task Configuration': '外部任务配置',
+  'Task Priority': '任务优先级',
+  'Job Configuration': '作业配置',
+  'Job Priority': '工作优先级',
+  'Documentation': '文档',
+  'Element Documentation': '说明',
+  'History Configuration': '历史配置',
+  'History Time To Live': '历史生存时间',
+  'Details': '详情',
+  "keyDetails":'流程信息',
+  'Initiator': '发起者',
+  'Asynchronous Continuations': '异步连续',
+  'Asynchronous Before': '异步之前',
+  'Asynchronous After': '异步之后',
+  'Forms': '表单',
+  'Input/Output': '输入/输出',
+  'Properties': '属性',
+  'Add Property': '添加属性',
+  'value': '值',
+  'Parameters': '参数',
+  'Input Parameters': '输入参数',
+  'Output Parameters': '输出参数',
+  'Execution Listener': '执行监听',
+  'Task Listener': '任务监听',
+  'Id': 'ID(唯一标识)',
+  'Change type': '改变类型',
+  'Append EndEvent': '添加结束事件',
+  'Append Gateway': '添加网关',
+  'Append Task': '添加任务',
+  'Append UserTask': '添加用户任务',
+  'Append TextAnnotation': '添加文本注释',
+  'Remove':'删除',
+  'Connect using Sequence/MessageFlow or Association': '连接线',
+  'Inclusive Gateway': '包容网关',
+  'Parallel Gateway': '并行网关',
+  'Exclusive Gateway': '条件网关',
+  'End Event': '结束事件',
+  'Start Event': '开始事件',
+  'Create StartEvent': '开始事件',
+  'Create EndEvent': '结束事件',
+  'Create ExclusiveGateway': '条件网关',
+  'Create UserTask': '用户任务',
+  'Create ServiceTask' : '服务任务',
+  'Create ScriptTask' : '脚本任务',
+  'Create ReceiveTask' : '等待任务',
+  'Create ManualTask' : '线下任务',
+  'Create expanded SubProcess': '内嵌子流程',
+  'Create collapsed SubProcess': '调用外部子流程',
+  'Create InclusiveGateway': '包容网关',
+  'Activate the lasso tool': '套索工具',
+  'Activate the global connect tool': '连接线',
+  'Activate the hand tool': '手',
+  'Task': '任务',
+  'User Task': '用户任务',
+  'Receive Task': '接收任务',
+  'Service Task': '服务任务',
+  'Manual Task': '手动任务',
+  'Script Task': '脚本任务',
+  'Sub Process (collapsed)': '子流程(折叠)',
+  'Call Activity': '外部子流程',
+  'Sub Process (expanded)': '子流程（扩展）',
+  'Transaction': '处理',
+  'Event Sub Process': '事件子流程',
+  'Sub Process': '子流程',
+  'Set Color':'设置颜色',
+}

ebpm-process-modeler/bpmn-js/descriptors/magic.json

@@ -0,0 +1,12 @@
+{
+  "name": "Magic",
+  "prefix": "magic",
+  "uri": "http://magic",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+
+  ]
+}

ebpm-process-modeler/bpmn-js/propertiesPanel/index.js

@@ -0,0 +1,10 @@
+import PropertiesPanel from "./PropertiesPanel";
+
+export default {
+  __depends__: [
+    require('bpmn-js-properties-panel/lib/cmd'),
+    require('diagram-js/lib/i18n/translate').default
+  ],
+  __init__: [ 'propertiesPanel' ],
+  propertiesPanel: [ 'type', PropertiesPanel ]
+};

ebpm-process-modeler/bpmn-js/provider/magic/CustomContextPad.js

@@ -0,0 +1,162 @@
+import inherits from 'inherits';
+//import layer from 'vue-layer';
+//import Vue from 'vue';
+//require("layui-layer");
+import {
+  assign
+} from 'min-dash';
+
+import ContextPadProvider from 'bpmn-js/lib/features/context-pad/ContextPadProvider';
+
+import {
+  bind
+} from 'min-dash';
+//import { appendFile } from 'fs';
+
+/**上下文的什么鬼,actions代表每个事件,可以在这更改事件的属性,例如给title添加转换方法 */
+export default function CustomContextPadProvider(injector, connect, translate) {
+
+  injector.invoke(ContextPadProvider, this);
+
+  var cached = bind(this.getContextPadEntries, this);
+  //console.log(this);
+  //console.log(elementFactory);
+  this.getContextPadEntries = function (element) {
+    // console.log(ContextPadProvider);
+    //console.log(this);
+    var actions = cached(element);
+    var businessObject = element.businessObject;
+    // delete actions['Append TextAnnotation']
+    //console.log(actions);
+    if (actions['append.intermediate-event']) {
+      delete actions['append.intermediate-event']
+    }
+
+    if (!(/bpmn:.*Task/.test(businessObject.$type))) {
+      delete actions['replace']
+    }
+    if (actions['append.end-event']) {
+      //delete actions['append.end-event'];
+    }
+    if (actions['append.gateway']) {
+      delete actions['append.gateway'];
+    }
+    if (actions['append.append-user-task']) {
+      delete actions['append.append-user-task'];
+    }
+    if (actions['replace']) {
+      delete actions['replace'];
+    }
+    if (actions['append.append-task']) {
+      delete actions['append.append-task']
+      actions['append.append-user-task'] = appendAction(this, 'bpmn:UserTask', 'bpmn-icon-user-task');
+    }
+    /*
+    actions['aaDialog'] = {
+      group: 'edit',
+      className: "el-icon-plus",
+      title: "弹框",
+      action: {
+        //dragstart: function (){alert(111)},
+        click: function (){
+          /*layer.open({
+            type:1,
+            content:'十几块了广阔的拉升',
+          });
+          //layer();
+          //let $layer = layer(Vue);
+          //console.log();
+          layer.open({
+            type:1,
+            title: '在线调试'
+            ,content: '可以填写任意的layer代码'
+          });
+        },
+      }
+    };*/
+
+    for (let key in actions) {
+      actions[key].title = translate(actions[key].title);
+      if (key == 'delete') {
+        actions[key].group = 'f';
+        actions["4"] = actions[key];
+        delete actions[key];
+      }
+      if (key == 'append.text-annotation') {
+        actions[key].group = 'd';
+        actions["2"] = actions[key];
+        delete actions[key];
+      }
+      if (key == 'connect') {
+        actions[key].group = 'a';
+        actions["1"] = actions[key];
+        delete actions[key];
+      }
+    }
+    /*
+    'append.append-task': appendAction(
+          'bpmn:Task',
+          'bpmn-icon-task'
+        ),
+
+    if(actions['replace']){
+      delete actions['replace']
+    }
+
+    if(isAny(businessObject, [ 'bpmn:StartEvent'])){
+
+        console.log(actions);
+        delete actions['append.intermediate-event']
+        console.log(actions);
+    }*/
+    //console.log(actions['replace'].action.click);
+    return actions;
+  };
+}
+
+inherits(CustomContextPadProvider, ContextPadProvider);
+
+CustomContextPadProvider.$inject = [
+  'injector',
+  'connect',
+  'translate'
+];
+
+
+function appendAction(ContextPadProvider, type, className, title, options) {
+
+  if (typeof title !== 'string') {
+    options = title;
+    title = ContextPadProvider._translate('Append {type}', {
+      type: type.replace(/^bpmn:/, '')
+    });
+  }
+
+  function appendStart(event, element) {
+
+    var shape = this._elementFactory.createShape(assign({
+      type: type
+    }, options));
+    ContextPadProvider._create.start(event, shape, element);
+  }
+
+
+  var append = ContextPadProvider._autoPlace ? function (event, element) {
+    var shape = ContextPadProvider._elementFactory.createShape(assign({
+      type: type
+    }, options));
+
+    ContextPadProvider._autoPlace.append(element, shape);
+  } : appendStart;
+
+
+  return {
+    group: 'model',
+    className: className,
+    title: title,
+    action: {
+      dragstart: appendStart,
+      click: append
+    }
+  };
+}

ebpm-process-modeler/bpmn-js/provider/magic/CustomPalette.js

@@ -0,0 +1,221 @@
+import {
+  assign
+} from 'min-dash';
+
+
+/**
+ * 定制调色板/感觉就是左边的菜单
+ * A palette that allows you to create BPMN _and_ custom elements.
+ * 允许您创建bpmn和定制元素的调色板。
+ */
+export default function PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool, handTool,
+  globalConnect, translate) {
+  this._palette = palette;
+  this._create = create;
+  this._elementFactory = elementFactory;
+  this._spaceTool = spaceTool;
+  this._lassoTool = lassoTool;
+  this._handTool = handTool;
+  this._globalConnect = globalConnect;
+  this._translate = translate;
+  palette.registerProvider(this);
+}
+
+PaletteProvider.$inject = [
+  'palette',
+  'create',
+  'elementFactory',
+  'spaceTool',
+  'lassoTool',
+  'handTool',
+  'globalConnect',
+  'translate'
+];
+
+
+PaletteProvider.prototype.getPaletteEntries = function (element) {
+  var actions = {},
+    create = this._create,
+    elementFactory = this._elementFactory,
+    spaceTool = this._spaceTool,
+    lassoTool = this._lassoTool,
+    handTool = this._handTool,
+    globalConnect = this._globalConnect,
+    translate = this._translate;
+
+
+  function createAction(type, group, className, title, options) {
+
+    function createListener(event) {
+      var shape = elementFactory.createShape(assign({
+        type: type
+      }, options));
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded;
+      }
+      create.start(event, shape);
+    }
+    var shortType = type.replace(/^bpmn:/, '');
+    return {
+      group: group,
+      className: className + ' afterText',
+      title: translate(title || 'Create ' + shortType),
+      action: {
+        dragstart: createListener,
+        click: createListener
+      }
+    };
+  }
+  function createParticipant(event, collapsed) {
+    create.start(event, elementFactory.createParticipantShape(collapsed));
+  }
+
+  assign(actions, {
+    /*'hand-tool': createAction(
+      'custom:triangle', 'custom', 'icon-custom-triangle'
+    ),
+    'custom-circle': createAction(
+      'custom:circle', 'custom', 'icon-custom-circle'
+    ),
+    'custom-separator': {
+      group: 'custom',
+      separator: true
+    },
+    */
+    /*
+     'hand-tool': {
+       group: 'tools',
+       className: 'bpmn-icon-hand-tool',
+       title: translate('Activate the hand tool'),
+       action: {
+         click: function(event) {
+           handTool.activateHand(event);
+         }
+       }
+     },
+     
+     
+     'space-tool': {
+       group: 'tools',
+       className: 'bpmn-icon-space-tool',
+       title: translate('Activate the create/remove space tool'),
+       action: {
+         click: function(event) {
+           spaceTool.activateSelection(event);
+         }
+       }
+     },
+     'tool-separator': {
+       group: 'tools',
+       separator: true
+     },*/
+    //事件
+    'create.start-event': createAction(
+      'bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none'
+    ),
+    /*
+    'create.intermediate-event': createAction(
+      'bpmn:IntermediateThrowEvent', 'event', 'bpmn-icon-intermediate-event-none'
+    ),*/
+    'create.end-event': createAction(
+      'bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none'
+    ),
+    'event-separator': {
+      group: 'event',
+      separator: true
+    },
+    //task 任务
+    'create.user-task': createAction(
+      'bpmn:UserTask', 'task', 'bpmn-icon-user-task'
+    ),
+    'create.service-task': createAction(
+      'bpmn:ServiceTask', 'task', 'bpmn-icon-service-task'
+    ),
+    'create.script-task': createAction(
+      'bpmn:ScriptTask', 'task', 'bpmn-icon-script-task'
+    ),
+    'create.receive-task': createAction(
+      'bpmn:ReceiveTask', 'task', 'bpmn-icon-receive-task'
+    ),
+    'create.manual-task': createAction(
+      'bpmn:ManualTask', 'task', 'bpmn-icon-manual-task'
+    ),
+    'task-separator': {
+      group: 'task',
+      separator: true
+    },
+    //subprocess 流程
+    // 'create.subprocess-expanded': createAction(
+    //   'bpmn:SubProcess', 'subprocess', 'bpmn-icon-subprocess-expanded', 'Create expanded SubProcess', {
+    //     isExpanded: true
+    //   }
+    // ),
+    //collapsed-subprocess
+    /* 'create.subprocess-collapsed': createAction(
+      'bpmn:SubProcess', 'subprocess', 'bpmn-icon-subprocess-collapsed', 'Create collapsed SubProcess'
+    ), */
+    'create.callactivity': createAction(
+      'bpmn:CallActivity', 'subprocess', 'bpmn-icon-call-activity', 'Call Activity'
+    ),
+    'subprocess-separator': {
+      group: 'subprocess',
+      separator: true
+    },
+
+    //Gateway 网关
+
+    'create.exclusive-gateway': createAction(
+      'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-xor'
+    ),
+    'create.inclusive-gateway': createAction(
+      'bpmn:InclusiveGateway', 'gateway', 'bpmn-icon-gateway-or'
+    ),
+
+    'gateway-separator': {
+      group: 'gateway',
+      separator: true
+    },
+    //工具
+    'global-connect-tool': {
+      group: 'endTools',
+      className: 'bpmn-icon-connection-multi afterText',
+      title: translate('Activate the global connect tool'),
+      action: {
+        click: function (event) {
+          globalConnect.toggle(event);
+        }
+      }
+    },
+    'lasso-tool': {
+      group: 'endTools',
+      className: 'bpmn-icon-lasso-tool afterText',
+      title: translate('Activate the lasso tool'),
+      action: {
+        click: function (event) {
+          lassoTool.activateSelection(event);
+        }
+      }
+    },
+    //bpmn:TextAnnotation
+    'Append TextAnnotation':createAction(
+      'bpmn:TextAnnotation', 'endTools', 'bpmn-icon-text-annotation','Append TextAnnotation'
+    ),
+    /*
+    'create.data-object': createAction(
+      'bpmn:DataObjectReference', 'data-object', 'bpmn-icon-data-object'
+    ),
+
+    'create.participant-expanded': {
+      group: 'collaboration',
+      className: 'bpmn-icon-participant',
+      title: 'Create Pool/Participant',
+      action: {
+        dragstart: createParticipant,
+        click: createParticipant
+      }
+    }*/
+  });
+
+  return actions;
+};

ebpm-process-modeler/bpmn-js/provider/magic/MagicPropertiesProvider.js

@@ -0,0 +1,219 @@
+import inherits from 'inherits';
+
+import PropertiesActivator from 'bpmn-js-properties-panel/lib/PropertiesActivator';
+
+// Require all properties you need from existing providers.
+// In this case all available bpmn relevant properties without camunda extensions.
+import processProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps';
+//import eventProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/EventProps';
+//import linkProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/LinkProps';
+import documentationProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/DocumentationProps';
+import idProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/IdProps';
+import nameProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/NameProps';
+import {
+  isAny
+} from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
+import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
+//import spellProps from '../magic/parts/SpellProps';
+//import axios from 'axios';
+//require("layui-layer");
+import Vue from 'vue';
+// Require your custom property entries.
+//import spellProps from './parts/SpellProps';
+var getBusinessObject = require('bpmn-js/lib/util/ModelUtil').getBusinessObject;
+var cmdHelper = require('bpmn-js-properties-panel/lib/helper/CmdHelper');
+
+function ensureNotNull(prop) {
+  if (!prop) {
+    throw new Error(prop + ' must be set.');
+  }
+
+  return prop;
+}
+
+var setDefaultParameters = function (options) {
+
+  // default method to fetch the current value of the input field
+  var defaultGet = function (element) {
+    var bo = getBusinessObject(element),
+      res = {},
+      prop = ensureNotNull(options.modelProperty);
+    res[prop] = bo.get(prop);
+
+    return res;
+  };
+
+  // default method to set a new value to the input field
+  var defaultSet = function (element, values) {
+    var res = {},
+      prop = ensureNotNull(options.modelProperty);
+    if (values[prop] !== '') {
+      res[prop] = values[prop];
+    } else {
+      res[prop] = undefined;
+    }
+
+    return cmdHelper.updateProperties(element, res);
+  };
+
+  // default validation method
+  var defaultValidate = function () {
+    return {};
+  };
+
+  return {
+    id: options.id,
+    description: (options.description || ''),
+    get: (options.get || defaultGet),
+    set: (options.set || defaultSet),
+    validate: (options.validate || defaultValidate),
+    html: ''
+  };
+};
+
+
+//配置右边状态栏
+// The general tab contains all bpmn relevant properties.
+// The properties are organized in groups.
+function createGeneralTabGroups(element, bpmnFactory, elementRegistry, translate) {
+  var generalGroup = {
+    id: 'general',
+    label: translate('General'),
+    entries: []
+  };
+
+  if (isAny(element, ['bpmn:Process'])) {
+    generalGroup.entries.push(entryFactory.textField({
+      id: 'id',
+      //description : 'Apply a black magic spell',
+      label: '流程KEY',
+      canBeDisabled: true,
+      modelProperty: 'id'
+    }));
+  } else {
+    idProps(generalGroup, element, translate);
+  }
+
+  nameProps(generalGroup, element, null, null, translate);
+  processProps(generalGroup, element, translate);
+  documentationProps(generalGroup, element, bpmnFactory, translate);
+  var configureGroup = {
+    id: 'keyDetails',
+    label: 'keyDetails',
+    entries: []
+  }
+  /*
+  var detailsGroup = {
+    id: 'Details',
+    label: 'Details',
+    entries: []
+  };
+  linkProps(detailsGroup, element, translate);
+  eventProps(detailsGroup, element, bpmnFactory, elementRegistry, translate);
+    var documentationGroup = {
+      id: 'Documentation',
+      label: '说明',
+      entries: []
+    };
+  
+    documentationProps(documentationGroup, element, bpmnFactory, translate);
+  */
+  return [
+    generalGroup,
+    configureGroup
+    // detailsGroup
+    // documentationGroup
+  ]
+}
+
+// Create the custom magic tab
+/*
+function createMagicTabGroups(element, elementRegistry) {
+
+  // Create a group called "Black Magic".
+  var blackMagicGroup = {
+    id: 'black-magic',
+    label: 'Black Magic',
+    entries: []
+  };
+
+  // Add the spell props to the black magic group.
+
+  blackMagicGroup.entries.push(entryFactory.button({id:"id",label:"1111"}));
+  spellProps(blackMagicGroup, element);
+  return [
+    blackMagicGroup
+  ];
+}*/
+
+export default function MagicPropertiesProvider(
+  eventBus, bpmnFactory, elementRegistry,
+  translate) {
+
+  PropertiesActivator.call(this, eventBus);
+
+  this.getTabs = function (element) {
+
+    var generalTab = {
+      id: 'General',
+      label: '基本信息',
+      groups: createGeneralTabGroups(element, bpmnFactory, elementRegistry, translate)
+    };
+
+    // The "magic" tab
+    /*
+     var magicTab = {
+       id: 'magic',
+       label: 'Magic',
+       groups: createMagicTabGroups(element, elementRegistry)
+     };
+  */
+    // Show general + "magic" tab
+    return [
+      generalTab,
+      //magicTab
+    ];
+  };
+}
+inherits(MagicPropertiesProvider, PropertiesActivator);
+
+
+//创建自定义控件
+
+entryFactory.button = function (options, defaultParameters) {
+  var id = options.id,
+    label = options.label || id,
+    element = options.element;
+  var $dialogVisible = Vue.prototype.store.state.dialogVisible;
+  var _click = function processConfig() {
+    //console.log(Vue.prototype.store);
+    // console.log(element)
+    if (element && element.constructor.name == "Root") {
+      $dialogVisible.dialogIfromeSrc = $dialogVisible.url + "/ebpm-process-manage/procDefModelMgr/proConfig.do?procDefId=" + $dialogVisible.procDefId;
+      //$dialogVisible.dialogIfromeSrc = $dialogVisible.url+'/ebpm-process-manage/procDefModelMgr/proConfig.do?procDefId=api:1:79097648-b4c9-11e9-8827-aa03cab5dae6';
+      $dialogVisible.title = "流程设置";
+    } else {
+      if (defaultParameters.id == 'bdqx') {
+        $dialogVisible.dialogIfromeSrc = $dialogVisible.url + "/plateform-web/#/roleFormField?formId=" + $dialogVisible.formId + "&procDefKey=" + $dialogVisible.procDefKey +
+          "&appId=" + $dialogVisible.appId + "&actDefId=" + element.id + "&formCode=" + $dialogVisible.formCode + "&modelId=" + $dialogVisible.modelId
+        $dialogVisible.title = element.businessObject.name + "环节表单设置";
+      } else {
+        $dialogVisible.dialogIfromeSrc = $dialogVisible.url + "/ebpm-process-manage/activityInfo/actConfig.do?" +
+          "processDefId=" + $dialogVisible.procDefId + "&activityDefId=" + element.id + "&sys=" + $dialogVisible.appId;
+        //$dialogVisible.dialogIfromeSrc = $dialogVisible.url+'/ebpm-process-manage/activityInfo/actConfig.do?' +
+        //'procDefId=api:1:79097648-b4c9-11e9-8827-aa03cab5dae6&activityDefId=sid-20F588AB-471E-4E74-B2B1-FB46403E26DB';
+        $dialogVisible.title = "环节设置";
+      }
+    }
+    $dialogVisible.show = true;
+    //console.log($dialogVisible);
+  }
+  var resource = defaultParameters;
+  if (!$dialogVisible.procDefId) {
+    resource.html = '<a style="display: block;" data-action="_click" class="el-button el-button--primary el-button--mini is-disabled">' + label + '</a>';
+  } else {
+    resource.html = '<a style="display: block;" data-action="_click" class="el-button el-button--primary el-button--mini">' + label + '</a>';
+    resource['_click'] = _click;
+  }
+  return resource;
+};

ebpm-process-modeler/bpmn-js/provider/magic/index.js

@@ -0,0 +1,14 @@
+import MagicPropertiesProvider from './MagicPropertiesProvider';
+import CustomPalette from './CustomPalette';
+import CustomContextPadProvider from "./CustomContextPad";
+import ReplaceMenuProvider from "./popup-menu/ReplaceMenuProvider";
+import ColorRenderer from '../../../bpmn-js/colors/ColorRenderer';
+
+export default {
+  __init__: [ 'propertiesProvider' , 'paletteProvider','contextPadProvider','replaceMenuProvider','colorRenderer'],
+  propertiesProvider: [ 'type', MagicPropertiesProvider ],
+  contextPadProvider: [ 'type', CustomContextPadProvider ],
+  paletteProvider: [ 'type', CustomPalette ],
+  replaceMenuProvider: [ 'type', ReplaceMenuProvider ],
+  colorRenderer: [ 'type', ColorRenderer ],
+};

ebpm-process-modeler/bpmn-js/provider/magic/parts/SpellProps.js

@@ -0,0 +1,21 @@
+import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
+/** 没用上 */
+import {
+  is
+} from 'bpmn-js/lib/util/ModelUtil';
+
+
+export default function(group, element) {
+
+  // Only return an entry, if the currently selected
+  // element is a start event.
+
+  if (is(element, 'bpmn:StartEvent')) {
+    group.entries.push(entryFactory.textField({
+      id : 'spell',
+      description : 'Apply a black magic spell',
+      label : 'Spell',
+      modelProperty : 'spell'
+    }));
+  }
+}

ebpm-process-modeler/bpmn-js/provider/magic/popup-menu/ReplaceMenuProvider.js

@@ -0,0 +1,493 @@
+import {
+  getBusinessObject,
+  is
+} from '../../../../node_modules/bpmn-js/lib/util/ModelUtil';
+
+import {
+  isEventSubProcess,
+  isExpanded
+} from '../../../../node_modules/bpmn-js/lib/util/DiUtil';
+
+import {
+  isDifferentType
+} from '../../../../node_modules/bpmn-js/lib/features/popup-menu/util/TypeUtil';
+import {
+  forEach,
+  filter
+} from 'min-dash';
+
+import * as replaceOptions from './ReplaceOptions';
+
+
+/**
+ * 替换弹出菜单的,不改默认行为的话只要改配置文件ReplaceOption.js
+ * This module is an element agnostic replace menu provider for the popup menu.
+ */
+export default function ReplaceMenuProvider(
+    popupMenu, modeling, moddle,
+    bpmnReplace, rules, translate) {
+
+  this._popupMenu = popupMenu;
+  this._modeling = modeling;
+  this._moddle = moddle;
+  this._bpmnReplace = bpmnReplace;
+  this._rules = rules;
+  this._translate = translate;
+
+  this.register();
+}
+
+ReplaceMenuProvider.$inject = [
+  'popupMenu',
+  'modeling',
+  'moddle',
+  'bpmnReplace',
+  'rules',
+  'translate'
+];
+
+
+/**
+ * Register replace menu provider in the popup menu
+ */
+ReplaceMenuProvider.prototype.register = function() {
+  this._popupMenu.registerProvider('bpmn-replace', this);
+};
+
+
+/**
+ * Get all entries from replaceOptions for the given element and apply filters
+ * on them. Get for example only elements, which are different from the current one.
+ *
+ * @param {djs.model.Base} element
+ *
+ * @return {Array<Object>} a list of menu entry items
+ */
+ReplaceMenuProvider.prototype.getEntries = function(element) {
+
+  var businessObject = element.businessObject;
+
+  var rules = this._rules;
+
+  var entries;
+
+  if (!rules.allowed('shape.replace', { element: element })) {
+    return [];
+  }
+
+  var differentType = isDifferentType(element);
+
+  // start events outside event sub processes
+  if (is(businessObject, 'bpmn:StartEvent') && !isEventSubProcess(businessObject.$parent)) {
+
+    entries = filter(replaceOptions.START_EVENT, differentType);
+
+    return this._createEntries(element, entries);
+  }
+
+  // expanded/collapsed pools
+  if (is(businessObject, 'bpmn:Participant')) {
+
+    entries = filter(replaceOptions.PARTICIPANT, function(entry) {
+      return isExpanded(businessObject) !== entry.target.isExpanded;
+    });
+
+    return this._createEntries(element, entries);
+  }
+
+  // start events inside event sub processes
+  if (is(businessObject, 'bpmn:StartEvent') && isEventSubProcess(businessObject.$parent)) {
+
+    entries = filter(replaceOptions.EVENT_SUB_PROCESS_START_EVENT, function(entry) {
+
+      var target = entry.target;
+
+      var isInterrupting = target.isInterrupting !== false;
+
+      var isInterruptingEqual = getBusinessObject(element).isInterrupting === isInterrupting;
+
+      // filters elements which types and event definition are equal but have have different interrupting types
+      return differentType(entry) || !differentType(entry) && !isInterruptingEqual;
+
+    });
+
+    return this._createEntries(element, entries);
+  }
+
+  // end events
+  if (is(businessObject, 'bpmn:EndEvent')) {
+
+    entries = filter(replaceOptions.END_EVENT, function(entry) {
+      var target = entry.target;
+
+      // hide cancel end events outside transactions
+      if (target.eventDefinitionType == 'bpmn:CancelEventDefinition' && !is(businessObject.$parent, 'bpmn:Transaction')) {
+        return false;
+      }
+
+      return differentType(entry);
+    });
+
+    return this._createEntries(element, entries);
+  }
+
+  // boundary events
+  if (is(businessObject, 'bpmn:BoundaryEvent')) {
+
+    entries = filter(replaceOptions.BOUNDARY_EVENT, function(entry) {
+
+      var target = entry.target;
+
+      if (target.eventDefinition == 'bpmn:CancelEventDefinition' &&
+         !is(businessObject.attachedToRef, 'bpmn:Transaction')) {
+        return false;
+      }
+      var cancelActivity = target.cancelActivity !== false;
+
+      var isCancelActivityEqual = businessObject.cancelActivity == cancelActivity;
+
+      return differentType(entry) || !differentType(entry) && !isCancelActivityEqual;
+    });
+
+    return this._createEntries(element, entries);
+  }
+
+  // intermediate events
+  if (is(businessObject, 'bpmn:IntermediateCatchEvent') ||
+      is(businessObject, 'bpmn:IntermediateThrowEvent')) {
+
+    entries = filter(replaceOptions.INTERMEDIATE_EVENT, differentType);
+
+    return this._createEntries(element, entries);
+  }
+
+  // gateways
+  if (is(businessObject, 'bpmn:Gateway')) {
+
+    entries = filter(replaceOptions.GATEWAY, differentType);
+
+    return this._createEntries(element, entries);
+  }
+
+  // transactions
+  if (is(businessObject, 'bpmn:Transaction')) {
+
+    entries = filter(replaceOptions.TRANSACTION, differentType);
+
+    return this._createEntries(element, entries);
+  }
+
+  // expanded event sub processes
+  if (isEventSubProcess(businessObject) && isExpanded(businessObject)) {
+
+    entries = filter(replaceOptions.EVENT_SUB_PROCESS, differentType);
+
+    return this._createEntries(element, entries);
+  }
+
+  // expanded sub processes
+  if (is(businessObject, 'bpmn:SubProcess') && isExpanded(businessObject)) {
+
+    entries = filter(replaceOptions.SUBPROCESS_EXPANDED, differentType);
+
+    return this._createEntries(element, entries);
+  }
+
+  // collapsed ad hoc sub processes
+  if (is(businessObject, 'bpmn:AdHocSubProcess') && !isExpanded(businessObject)) {
+
+    entries = filter(replaceOptions.TASK, function(entry) {
+
+      var target = entry.target;
+
+      var isTargetSubProcess = target.type === 'bpmn:SubProcess';
+
+      var isTargetExpanded = target.isExpanded === true;
+
+      return isDifferentType(element, target) && (!isTargetSubProcess || isTargetExpanded);
+    });
+
+    return this._createEntries(element, entries);
+  }
+
+  // sequence flows
+  if (is(businessObject, 'bpmn:SequenceFlow')) {
+    return this._createSequenceFlowEntries(element, replaceOptions.SEQUENCE_FLOW);
+  }
+
+  // flow nodes
+  if (is(businessObject, 'bpmn:FlowNode')) {
+    entries = filter(replaceOptions.TASK, differentType);
+
+    // collapsed SubProcess can not be replaced with itself
+    if (is(businessObject, 'bpmn:SubProcess') && !isExpanded(businessObject)) {
+      entries = filter(entries, function(entry) {
+        return entry.label !== 'Sub Process (collapsed)';
+      });
+    }
+
+    return this._createEntries(element, entries);
+  }
+
+  return [];
+};
+
+
+/**
+ * Get a list of header items for the given element. This includes buttons
+ * for multi instance markers and for the ad hoc marker.
+ *
+ * @param {djs.model.Base} element
+ *
+ * @return {Array<Object>} a list of menu entry items
+ */
+ReplaceMenuProvider.prototype.getHeaderEntries = function(element) {
+
+  var headerEntries = [];
+
+  if (is(element, 'bpmn:Activity') && !isEventSubProcess(element)) {
+    headerEntries = headerEntries.concat(this._getLoopEntries(element));
+  }
+
+  if (is(element, 'bpmn:SubProcess') &&
+      !is(element, 'bpmn:Transaction') &&
+      !isEventSubProcess(element)) {
+    headerEntries.push(this._getAdHocEntry(element));
+  }
+
+  return headerEntries;
+};
+
+
+/**
+ * Creates an array of menu entry objects for a given element and filters the replaceOptions
+ * according to a filter function.
+ *
+ * @param  {djs.model.Base} element
+ * @param  {Object} replaceOptions
+ *
+ * @return {Array<Object>} a list of menu items
+ */
+ReplaceMenuProvider.prototype._createEntries = function(element, replaceOptions) {
+  var menuEntries = [];
+
+  var self = this;
+
+  forEach(replaceOptions, function(definition) {
+    var entry = self._createMenuEntry(definition, element);
+
+    menuEntries.push(entry);
+  });
+
+  return menuEntries;
+};
+
+/**
+ * Creates an array of menu entry objects for a given sequence flow.
+ *
+ * @param  {djs.model.Base} element
+ * @param  {Object} replaceOptions
+
+ * @return {Array<Object>} a list of menu items
+ */
+ReplaceMenuProvider.prototype._createSequenceFlowEntries = function(element, replaceOptions) {
+
+  var businessObject = getBusinessObject(element);
+
+  var menuEntries = [];
+
+  var modeling = this._modeling,
+      moddle = this._moddle;
+
+  var self = this;
+
+  forEach(replaceOptions, function(entry) {
+
+    switch (entry.actionName) {
+    case 'replace-with-default-flow':
+      if (businessObject.sourceRef.default !== businessObject &&
+            (is(businessObject.sourceRef, 'bpmn:ExclusiveGateway') ||
+             is(businessObject.sourceRef, 'bpmn:InclusiveGateway') ||
+             is(businessObject.sourceRef, 'bpmn:ComplexGateway') ||
+             is(businessObject.sourceRef, 'bpmn:Activity'))) {
+
+        menuEntries.push(self._createMenuEntry(entry, element, function() {
+          modeling.updateProperties(element.source, { default: businessObject });
+        }));
+      }
+      break;
+    case 'replace-with-conditional-flow':
+      if (!businessObject.conditionExpression && is(businessObject.sourceRef, 'bpmn:Activity')) {
+
+        menuEntries.push(self._createMenuEntry(entry, element, function() {
+          var conditionExpression = moddle.create('bpmn:FormalExpression', { body: '' });
+
+          modeling.updateProperties(element, { conditionExpression: conditionExpression });
+        }));
+      }
+      break;
+    default:
+      // default flows
+      if (is(businessObject.sourceRef, 'bpmn:Activity') && businessObject.conditionExpression) {
+        return menuEntries.push(self._createMenuEntry(entry, element, function() {
+          modeling.updateProperties(element, { conditionExpression: undefined });
+        }));
+      }
+      // conditional flows
+      if ((is(businessObject.sourceRef, 'bpmn:ExclusiveGateway') ||
+           is(businessObject.sourceRef, 'bpmn:InclusiveGateway') ||
+           is(businessObject.sourceRef, 'bpmn:ComplexGateway') ||
+           is(businessObject.sourceRef, 'bpmn:Activity')) &&
+           businessObject.sourceRef.default === businessObject) {
+
+        return menuEntries.push(self._createMenuEntry(entry, element, function() {
+          modeling.updateProperties(element.source, { default: undefined });
+        }));
+      }
+    }
+  });
+
+  return menuEntries;
+};
+
+
+/**
+ * Creates and returns a single menu entry item.
+ *
+ * @param  {Object} definition a single replace options definition object
+ * @param  {djs.model.Base} element
+ * @param  {Function} [action] an action callback function which gets called when
+ *                             the menu entry is being triggered.
+ *
+ * @return {Object} menu entry item
+ */
+ReplaceMenuProvider.prototype._createMenuEntry = function(definition, element, action) {
+  var translate = this._translate;
+  var replaceElement = this._bpmnReplace.replaceElement;
+
+  var replaceAction = function() {
+    return replaceElement(element, definition.target);
+  };
+
+  action = action || replaceAction;
+
+  var menuEntry = {
+    label: translate(definition.label),
+    className: definition.className,
+    id: definition.actionName,
+    action: action
+  };
+
+  return menuEntry;
+};
+
+/**
+ * Get a list of menu items containing buttons for multi instance markers
+ *
+ * @param  {djs.model.Base} element
+ *
+ * @return {Array<Object>} a list of menu items
+ */
+ReplaceMenuProvider.prototype._getLoopEntries = function(element) {
+
+  var self = this;
+  var translate = this._translate;
+
+  function toggleLoopEntry(event, entry) {
+    var loopCharacteristics;
+
+    if (entry.active) {
+      loopCharacteristics = undefined;
+    } else {
+      loopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
+
+      if (entry.options.isSequential) {
+        loopCharacteristics.isSequential = entry.options.isSequential;
+      }
+    }
+    self._modeling.updateProperties(element, { loopCharacteristics: loopCharacteristics });
+  }
+
+  var businessObject = getBusinessObject(element),
+      loopCharacteristics = businessObject.loopCharacteristics;
+
+  var isSequential,
+      isLoop,
+      isParallel;
+
+  if (loopCharacteristics) {
+    isSequential = loopCharacteristics.isSequential;
+    isLoop = loopCharacteristics.isSequential === undefined;
+    isParallel = loopCharacteristics.isSequential !== undefined && !loopCharacteristics.isSequential;
+  }
+
+
+  var loopEntries = [
+    {
+      id: 'toggle-parallel-mi',
+      className: 'bpmn-icon-parallel-mi-marker',
+      title: translate('Parallel Multi Instance'),
+      active: isParallel,
+      action: toggleLoopEntry,
+      options: {
+        loopCharacteristics: 'bpmn:MultiInstanceLoopCharacteristics',
+        isSequential: false
+      }
+    },
+    {
+      id: 'toggle-sequential-mi',
+      className: 'bpmn-icon-sequential-mi-marker',
+      title: translate('Sequential Multi Instance'),
+      active: isSequential,
+      action: toggleLoopEntry,
+      options: {
+        loopCharacteristics: 'bpmn:MultiInstanceLoopCharacteristics',
+        isSequential: true
+      }
+    },
+    {
+      id: 'toggle-loop',
+      className: 'bpmn-icon-loop-marker',
+      title: translate('Loop'),
+      active: isLoop,
+      action: toggleLoopEntry,
+      options: {
+        loopCharacteristics: 'bpmn:StandardLoopCharacteristics'
+      }
+    }
+  ];
+  return loopEntries;
+};
+
+
+/**
+ * Get the menu items containing a button for the ad hoc marker
+ *
+ * @param  {djs.model.Base} element
+ *
+ * @return {Object} a menu item
+ */
+ReplaceMenuProvider.prototype._getAdHocEntry = function(element) {
+  var translate = this._translate;
+  var businessObject = getBusinessObject(element);
+
+  var isAdHoc = is(businessObject, 'bpmn:AdHocSubProcess');
+
+  var replaceElement = this._bpmnReplace.replaceElement;
+
+  var adHocEntry = {
+    id: 'toggle-adhoc',
+    className: 'bpmn-icon-ad-hoc-marker',
+    title: translate('Ad-hoc'),
+    active: isAdHoc,
+    action: function() {
+      if (isAdHoc) {
+        return replaceElement(element, { type: 'bpmn:SubProcess' });
+      } else {
+        return replaceElement(element, { type: 'bpmn:AdHocSubProcess' });
+      }
+    }
+  };
+
+  return adHocEntry;
+};

ebpm-process-modeler/bpmn-js/provider/magic/popup-menu/ReplaceOptions.js

@@ -0,0 +1,793 @@
+export var START_EVENT = [
+  {
+    label: 'Start Event',
+    actionName: 'replace-with-none-start',
+    className: 'bpmn-icon-start-event-none',
+    target: {
+      type: 'bpmn:StartEvent'
+    }
+  },
+  {
+    label: 'End Event',
+    actionName: 'replace-with-none-end',
+    className: 'bpmn-icon-end-event-none',
+    target: {
+      type: 'bpmn:EndEvent'
+    }
+  },
+  /*
+  {
+    label: 'Intermediate Throw Event',
+    actionName: 'replace-with-none-intermediate-throwing',
+    className: 'bpmn-icon-intermediate-event-none',
+    target: {
+      type: 'bpmn:IntermediateThrowEvent'
+    }
+  },
+
+  {
+    label: 'Message Start Event',
+    actionName: 'replace-with-message-start',
+    className: 'bpmn-icon-start-event-message',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:MessageEventDefinition'
+    }
+  },
+  {
+    label: 'Timer Start Event',
+    actionName: 'replace-with-timer-start',
+    className: 'bpmn-icon-start-event-timer',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:TimerEventDefinition'
+    }
+  },
+  {
+    label: 'Conditional Start Event',
+    actionName: 'replace-with-conditional-start',
+    className: 'bpmn-icon-start-event-condition',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:ConditionalEventDefinition'
+    }
+  },
+  {
+    label: 'Signal Start Event',
+    actionName: 'replace-with-signal-start',
+    className: 'bpmn-icon-start-event-signal',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:SignalEventDefinition'
+    }
+  }*/
+];
+
+export var INTERMEDIATE_EVENT = [
+  {
+    label: 'Start Event',
+    actionName: 'replace-with-none-start',
+    className: 'bpmn-icon-start-event-none',
+    target: {
+      type: 'bpmn:StartEvent'
+    }
+  },
+  {
+    label: 'Intermediate Throw Event',
+    actionName: 'replace-with-none-intermediate-throw',
+    className: 'bpmn-icon-intermediate-event-none',
+    target: {
+      type: 'bpmn:IntermediateThrowEvent'
+    }
+  },
+  {
+    label: 'End Event',
+    actionName: 'replace-with-none-end',
+    className: 'bpmn-icon-end-event-none',
+    target: {
+      type: 'bpmn:EndEvent'
+    }
+  },
+  {
+    label: 'Message Intermediate Catch Event',
+    actionName: 'replace-with-message-intermediate-catch',
+    className: 'bpmn-icon-intermediate-event-catch-message',
+    target: {
+      type: 'bpmn:IntermediateCatchEvent',
+      eventDefinitionType: 'bpmn:MessageEventDefinition'
+    }
+  },
+  {
+    label: 'Message Intermediate Throw Event',
+    actionName: 'replace-with-message-intermediate-throw',
+    className: 'bpmn-icon-intermediate-event-throw-message',
+    target: {
+      type: 'bpmn:IntermediateThrowEvent',
+      eventDefinitionType: 'bpmn:MessageEventDefinition'
+    }
+  },
+  {
+    label: 'Timer Intermediate Catch Event',
+    actionName: 'replace-with-timer-intermediate-catch',
+    className: 'bpmn-icon-intermediate-event-catch-timer',
+    target: {
+      type: 'bpmn:IntermediateCatchEvent',
+      eventDefinitionType: 'bpmn:TimerEventDefinition'
+    }
+  },
+  {
+    label: 'Escalation Intermediate Throw Event',
+    actionName: 'replace-with-escalation-intermediate-throw',
+    className: 'bpmn-icon-intermediate-event-throw-escalation',
+    target: {
+      type: 'bpmn:IntermediateThrowEvent',
+      eventDefinitionType: 'bpmn:EscalationEventDefinition'
+    }
+  },
+  {
+    label: 'Conditional Intermediate Catch Event',
+    actionName: 'replace-with-conditional-intermediate-catch',
+    className: 'bpmn-icon-intermediate-event-catch-condition',
+    target: {
+      type: 'bpmn:IntermediateCatchEvent',
+      eventDefinitionType: 'bpmn:ConditionalEventDefinition'
+    }
+  },
+  {
+    label: 'Link Intermediate Catch Event',
+    actionName: 'replace-with-link-intermediate-catch',
+    className: 'bpmn-icon-intermediate-event-catch-link',
+    target: {
+      type: 'bpmn:IntermediateCatchEvent',
+      eventDefinitionType: 'bpmn:LinkEventDefinition'
+    }
+  },
+  {
+    label: 'Link Intermediate Throw Event',
+    actionName: 'replace-with-link-intermediate-throw',
+    className: 'bpmn-icon-intermediate-event-throw-link',
+    target: {
+      type: 'bpmn:IntermediateThrowEvent',
+      eventDefinitionType: 'bpmn:LinkEventDefinition'
+    }
+  },
+  {
+    label: 'Compensation Intermediate Throw Event',
+    actionName: 'replace-with-compensation-intermediate-throw',
+    className: 'bpmn-icon-intermediate-event-throw-compensation',
+    target: {
+      type: 'bpmn:IntermediateThrowEvent',
+      eventDefinitionType: 'bpmn:CompensateEventDefinition'
+    }
+  },
+  {
+    label: 'Signal Intermediate Catch Event',
+    actionName: 'replace-with-signal-intermediate-catch',
+    className: 'bpmn-icon-intermediate-event-catch-signal',
+    target: {
+      type: 'bpmn:IntermediateCatchEvent',
+      eventDefinitionType: 'bpmn:SignalEventDefinition'
+    }
+  },
+  {
+    label: 'Signal Intermediate Throw Event',
+    actionName: 'replace-with-signal-intermediate-throw',
+    className: 'bpmn-icon-intermediate-event-throw-signal',
+    target: {
+      type: 'bpmn:IntermediateThrowEvent',
+      eventDefinitionType: 'bpmn:SignalEventDefinition'
+    }
+  }
+];
+
+export var END_EVENT = [
+  {
+    label: 'Start Event',
+    actionName: 'replace-with-none-start',
+    className: 'bpmn-icon-start-event-none',
+    target: {
+      type: 'bpmn:StartEvent'
+    }
+  },
+  {
+    label: 'End Event',
+    actionName: 'replace-with-none-end',
+    className: 'bpmn-icon-end-event-none',
+    target: {
+      type: 'bpmn:EndEvent'
+    }
+  },
+  /*
+  {
+    label: 'Intermediate Throw Event',
+    actionName: 'replace-with-none-intermediate-throw',
+    className: 'bpmn-icon-intermediate-event-none',
+    target: {
+      type: 'bpmn:IntermediateThrowEvent'
+    }
+  },
+
+  {
+    label: 'Message End Event',
+    actionName: 'replace-with-message-end',
+    className: 'bpmn-icon-end-event-message',
+    target: {
+      type: 'bpmn:EndEvent',
+      eventDefinitionType: 'bpmn:MessageEventDefinition'
+    }
+  },
+  {
+    label: 'Escalation End Event',
+    actionName: 'replace-with-escalation-end',
+    className: 'bpmn-icon-end-event-escalation',
+    target: {
+      type: 'bpmn:EndEvent',
+      eventDefinitionType: 'bpmn:EscalationEventDefinition'
+    }
+  },
+  {
+    label: 'Error End Event',
+    actionName: 'replace-with-error-end',
+    className: 'bpmn-icon-end-event-error',
+    target: {
+      type: 'bpmn:EndEvent',
+      eventDefinitionType: 'bpmn:ErrorEventDefinition'
+    }
+  },
+  {
+    label: 'Cancel End Event',
+    actionName: 'replace-with-cancel-end',
+    className: 'bpmn-icon-end-event-cancel',
+    target: {
+      type: 'bpmn:EndEvent',
+      eventDefinitionType: 'bpmn:CancelEventDefinition'
+    }
+  },
+  {
+    label: 'Compensation End Event',
+    actionName: 'replace-with-compensation-end',
+    className: 'bpmn-icon-end-event-compensation',
+    target: {
+      type: 'bpmn:EndEvent',
+      eventDefinitionType: 'bpmn:CompensateEventDefinition'
+    }
+  },
+  {
+    label: 'Signal End Event',
+    actionName: 'replace-with-signal-end',
+    className: 'bpmn-icon-end-event-signal',
+    target: {
+      type: 'bpmn:EndEvent',
+      eventDefinitionType: 'bpmn:SignalEventDefinition'
+    }
+  },
+  {
+    label: 'Terminate End Event',
+    actionName: 'replace-with-terminate-end',
+    className: 'bpmn-icon-end-event-terminate',
+    target: {
+      type: 'bpmn:EndEvent',
+      eventDefinitionType: 'bpmn:TerminateEventDefinition'
+    }
+  }*/
+];
+
+export var GATEWAY = [
+  {
+    label: 'Exclusive Gateway',
+    actionName: 'replace-with-exclusive-gateway',
+    className: 'bpmn-icon-gateway-xor',
+    target: {
+      type: 'bpmn:ExclusiveGateway'
+    }
+  },
+  {
+    label: 'Parallel Gateway',
+    actionName: 'replace-with-parallel-gateway',
+    className: 'bpmn-icon-gateway-parallel',
+    target: {
+      type: 'bpmn:ParallelGateway'
+    }
+  },
+  {
+    label: 'Inclusive Gateway',
+    actionName: 'replace-with-inclusive-gateway',
+    className: 'bpmn-icon-gateway-or',
+    target: {
+      type: 'bpmn:InclusiveGateway'
+    }
+  },
+  /*
+  {
+    label: 'Complex Gateway',
+    actionName: 'replace-with-complex-gateway',
+    className: 'bpmn-icon-gateway-complex',
+    target: {
+      type: 'bpmn:ComplexGateway'
+    }
+  },
+  {
+    label: 'Event based Gateway',
+    actionName: 'replace-with-event-based-gateway',
+    className: 'bpmn-icon-gateway-eventbased',
+    target: {
+      type: 'bpmn:EventBasedGateway',
+      instantiate: false,
+      eventGatewayType: 'Exclusive'
+    }
+  }*/
+  // Gateways deactivated until https://github.com/bpmn-io/bpmn-js/issues/194
+  // {
+  //   label: 'Event based instantiating Gateway',
+  //   actionName: 'replace-with-exclusive-event-based-gateway',
+  //   className: 'bpmn-icon-exclusive-event-based',
+  //   target: {
+  //     type: 'bpmn:EventBasedGateway'
+  //   },
+  //   options: {
+  //     businessObject: { instantiate: true, eventGatewayType: 'Exclusive' }
+  //   }
+  // },
+  // {
+  //   label: 'Parallel Event based instantiating Gateway',
+  //   actionName: 'replace-with-parallel-event-based-instantiate-gateway',
+  //   className: 'bpmn-icon-parallel-event-based-instantiate-gateway',
+  //   target: {
+  //     type: 'bpmn:EventBasedGateway'
+  //   },
+  //   options: {
+  //     businessObject: { instantiate: true, eventGatewayType: 'Parallel' }
+  //   }
+  // }
+];
+
+export var SUBPROCESS_EXPANDED = [
+  {
+    label: 'Transaction',
+    actionName: 'replace-with-transaction',
+    className: 'bpmn-icon-transaction',
+    target: {
+      type: 'bpmn:Transaction',
+      isExpanded: true
+    }
+  },
+  {
+    label: 'Event Sub Process',
+    actionName: 'replace-with-event-subprocess',
+    className: 'bpmn-icon-event-subprocess-expanded',
+    target: {
+      type: 'bpmn:SubProcess',
+      triggeredByEvent: true,
+      isExpanded: true
+    }
+  },
+  {
+    label: 'Sub Process (collapsed)',
+    actionName: 'replace-with-collapsed-subprocess',
+    className: 'bpmn-icon-subprocess-collapsed',
+    target: {
+      type: 'bpmn:SubProcess',
+      isExpanded: false
+    }
+  }
+];
+
+export var TRANSACTION = [
+  {
+    label: 'Sub Process',
+    actionName: 'replace-with-subprocess',
+    className: 'bpmn-icon-subprocess-expanded',
+    target: {
+      type: 'bpmn:SubProcess',
+      isExpanded: true
+    }
+  },
+  {
+    label: 'Event Sub Process',
+    actionName: 'replace-with-event-subprocess',
+    className: 'bpmn-icon-event-subprocess-expanded',
+    target: {
+      type: 'bpmn:SubProcess',
+      triggeredByEvent: true,
+      isExpanded: true
+    }
+  }
+];
+
+export var EVENT_SUB_PROCESS = [
+  {
+    label: 'Sub Process',
+    actionName: 'replace-with-subprocess',
+    className: 'bpmn-icon-subprocess-expanded',
+    target: {
+      type: 'bpmn:SubProcess',
+      isExpanded: true
+    }
+  },
+  {
+    label: 'Transaction',
+    actionName: 'replace-with-transaction',
+    className: 'bpmn-icon-transaction',
+    target: {
+      type: 'bpmn:Transaction',
+      isExpanded: true
+    }
+  }
+];
+
+export var TASK = [
+  {
+    label: 'Task',
+    actionName: 'replace-with-task',
+    className: 'bpmn-icon-task',
+    target: {
+      type: 'bpmn:Task'
+    }
+  },
+  /*
+  {
+    label: 'Send Task',
+    actionName: 'replace-with-send-task',
+    className: 'bpmn-icon-send',
+    target: {
+      type: 'bpmn:SendTask'
+    }
+  },*/
+  {
+    label: 'Receive Task',
+    actionName: 'replace-with-receive-task',
+    className: 'bpmn-icon-receive',
+    target: {
+      type: 'bpmn:ReceiveTask'
+    }
+  },
+  {
+    label: 'User Task',
+    actionName: 'replace-with-user-task',
+    className: 'bpmn-icon-user',
+    target: {
+      type: 'bpmn:UserTask'
+    }
+  },
+  {
+    label: 'Manual Task',
+    actionName: 'replace-with-manual-task',
+    className: 'bpmn-icon-manual',
+    target: {
+      type: 'bpmn:ManualTask'
+    }
+  },
+  /*
+  {
+    label: 'Business Rule Task',
+    actionName: 'replace-with-rule-task',
+    className: 'bpmn-icon-business-rule',
+    target: {
+      type: 'bpmn:BusinessRuleTask'
+    }
+  },
+  */
+  {
+    label: 'Service Task',
+    actionName: 'replace-with-service-task',
+    className: 'bpmn-icon-service',
+    target: {
+      type: 'bpmn:ServiceTask'
+    }
+  },
+  {
+    label: 'Script Task',
+    actionName: 'replace-with-script-task',
+    className: 'bpmn-icon-script',
+    target: {
+      type: 'bpmn:ScriptTask'
+    }
+  },
+  {
+    label: 'Call Activity',
+    actionName: 'replace-with-call-activity',
+    className: 'bpmn-icon-call-activity',
+    target: {
+      type: 'bpmn:CallActivity'
+    }
+  },
+  {
+    label: 'Sub Process (collapsed)',
+    actionName: 'replace-with-collapsed-subprocess',
+    className: 'bpmn-icon-subprocess-collapsed',
+    target: {
+      type: 'bpmn:SubProcess',
+      isExpanded: false
+    }
+  },
+  {
+    label: 'Sub Process (expanded)',
+    actionName: 'replace-with-expanded-subprocess',
+    className: 'bpmn-icon-subprocess-expanded',
+    target: {
+      type: 'bpmn:SubProcess',
+      isExpanded: true
+    }
+  }
+];
+
+export var BOUNDARY_EVENT = [
+  {
+    label: 'Message Boundary Event',
+    actionName: 'replace-with-message-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-message',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:MessageEventDefinition'
+    }
+  },
+  {
+    label: 'Timer Boundary Event',
+    actionName: 'replace-with-timer-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-timer',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:TimerEventDefinition'
+    }
+  },
+  {
+    label: 'Escalation Boundary Event',
+    actionName: 'replace-with-escalation-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-escalation',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:EscalationEventDefinition'
+    }
+  },
+  {
+    label: 'Conditional Boundary Event',
+    actionName: 'replace-with-conditional-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-condition',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:ConditionalEventDefinition'
+    }
+  },
+  {
+    label: 'Error Boundary Event',
+    actionName: 'replace-with-error-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-error',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:ErrorEventDefinition'
+    }
+  },
+  {
+    label: 'Cancel Boundary Event',
+    actionName: 'replace-with-cancel-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-cancel',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:CancelEventDefinition'
+    }
+  },
+  {
+    label: 'Signal Boundary Event',
+    actionName: 'replace-with-signal-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-signal',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:SignalEventDefinition'
+    }
+  },
+  {
+    label: 'Compensation Boundary Event',
+    actionName: 'replace-with-compensation-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-compensation',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:CompensateEventDefinition'
+    }
+  },
+  {
+    label: 'Message Boundary Event (non-interrupting)',
+    actionName: 'replace-with-non-interrupting-message-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-message',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:MessageEventDefinition',
+      cancelActivity: false
+    }
+  },
+  {
+    label: 'Timer Boundary Event (non-interrupting)',
+    actionName: 'replace-with-non-interrupting-timer-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-timer',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:TimerEventDefinition',
+      cancelActivity: false
+    }
+  },
+  {
+    label: 'Escalation Boundary Event (non-interrupting)',
+    actionName: 'replace-with-non-interrupting-escalation-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-escalation',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:EscalationEventDefinition',
+      cancelActivity: false
+    }
+  },
+  {
+    label: 'Conditional Boundary Event (non-interrupting)',
+    actionName: 'replace-with-non-interrupting-conditional-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-condition',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:ConditionalEventDefinition',
+      cancelActivity: false
+    }
+  },
+  {
+    label: 'Signal Boundary Event (non-interrupting)',
+    actionName: 'replace-with-non-interrupting-signal-boundary',
+    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-signal',
+    target: {
+      type: 'bpmn:BoundaryEvent',
+      eventDefinitionType: 'bpmn:SignalEventDefinition',
+      cancelActivity: false
+    }
+  }
+];
+
+export var EVENT_SUB_PROCESS_START_EVENT = [
+  {
+    label: 'Message Start Event',
+    actionName: 'replace-with-message-start',
+    className: 'bpmn-icon-start-event-message',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:MessageEventDefinition'
+    }
+  },
+  {
+    label: 'Timer Start Event',
+    actionName: 'replace-with-timer-start',
+    className: 'bpmn-icon-start-event-timer',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:TimerEventDefinition'
+    }
+  },
+  {
+    label: 'Conditional Start Event',
+    actionName: 'replace-with-conditional-start',
+    className: 'bpmn-icon-start-event-condition',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:ConditionalEventDefinition'
+    }
+  },
+  {
+    label: 'Signal Start Event',
+    actionName: 'replace-with-signal-start',
+    className: 'bpmn-icon-start-event-signal',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:SignalEventDefinition'
+    }
+  },
+  {
+    label: 'Error Start Event',
+    actionName: 'replace-with-error-start',
+    className: 'bpmn-icon-start-event-error',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:ErrorEventDefinition'
+    }
+  },
+  {
+    label: 'Escalation Start Event',
+    actionName: 'replace-with-escalation-start',
+    className: 'bpmn-icon-start-event-escalation',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:EscalationEventDefinition'
+    }
+  },
+  {
+    label: 'Compensation Start Event',
+    actionName: 'replace-with-compensation-start',
+    className: 'bpmn-icon-start-event-compensation',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:CompensateEventDefinition'
+    }
+  },
+  {
+    label: 'Message Start Event (non-interrupting)',
+    actionName: 'replace-with-non-interrupting-message-start',
+    className: 'bpmn-icon-start-event-non-interrupting-message',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:MessageEventDefinition',
+      isInterrupting: false
+    }
+  },
+  {
+    label: 'Timer Start Event (non-interrupting)',
+    actionName: 'replace-with-non-interrupting-timer-start',
+    className: 'bpmn-icon-start-event-non-interrupting-timer',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:TimerEventDefinition',
+      isInterrupting: false
+    }
+  },
+  {
+    label: 'Conditional Start Event (non-interrupting)',
+    actionName: 'replace-with-non-interrupting-conditional-start',
+    className: 'bpmn-icon-start-event-non-interrupting-condition',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:ConditionalEventDefinition',
+      isInterrupting: false
+    }
+  },
+  {
+    label: 'Signal Start Event (non-interrupting)',
+    actionName: 'replace-with-non-interrupting-signal-start',
+    className: 'bpmn-icon-start-event-non-interrupting-signal',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:SignalEventDefinition',
+      isInterrupting: false
+    }
+  },
+  {
+    label: 'Escalation Start Event (non-interrupting)',
+    actionName: 'replace-with-non-interrupting-escalation-start',
+    className: 'bpmn-icon-start-event-non-interrupting-escalation',
+    target: {
+      type: 'bpmn:StartEvent',
+      eventDefinitionType: 'bpmn:EscalationEventDefinition',
+      isInterrupting: false
+    }
+  }
+];
+
+export var SEQUENCE_FLOW = [
+  {
+    label: 'Sequence Flow',
+    actionName: 'replace-with-sequence-flow',
+    className: 'bpmn-icon-connection'
+  },
+  {
+    label: 'Default Flow',
+    actionName: 'replace-with-default-flow',
+    className: 'bpmn-icon-default-flow'
+  },
+  {
+    label: 'Conditional Flow',
+    actionName: 'replace-with-conditional-flow',
+    className: 'bpmn-icon-conditional-flow'
+  }
+];
+
+export var PARTICIPANT = [
+  {
+    label: 'Expanded Pool',
+    actionName: 'replace-with-expanded-pool',
+    className: 'bpmn-icon-participant',
+    target: {
+      type: 'bpmn:Participant',
+      isExpanded: true
+    }
+  },
+  {
+    label: 'Collapsed Pool',
+    actionName: 'replace-with-collapsed-pool',
+    // TODO(@janstuemmel): maybe design new icon
+    className: 'bpmn-icon-lane',
+    target: {
+      type: 'bpmn:Participant',
+      isExpanded: false
+    }
+  }
+];

ebpm-process-modeler/default.conf

@@ -0,0 +1,52 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    #charset koi8-r;
+    #access_log  /var/log/nginx/host.access.log  main;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location ^~/ebpm-process-modeler {
+       alias /usr/share/nginx/html/ebpm-process-modeler;
+       index  index.html index.htm;
+       try_files $uri $uri/ /ebpm-process-modeler/index.html;
+   }
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+
+
+    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
+    #
+    #location ~ \.php$ {
+    #    proxy_pass   http://127.0.0.1;
+    #}
+
+    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
+    #
+    #location ~ \.php$ {
+    #    root           html;
+    #    fastcgi_pass   127.0.0.1:9000;
+    #    fastcgi_index  index.php;
+    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
+    #    include        fastcgi_params;
+    #}
+
+    # deny access to .htaccess files, if Apache's document root
+    # concurs with nginx's one
+    #
+    #location ~ /\.ht {
+    #    deny  all;
+    #}
+}
+

ebpm-process-modeler/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "ebpm-process-modeler",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build:uat": "vue-cli-service build --mode uat",
+    "build:stage": "vue-cli-service build --mode staging",
+    "build": "vue-cli-service build --mode development --target app --dashboard",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "bpmn-js": "^4.0.3",
+    "bpmn-js-properties-panel": "^0.31.0",
+    "camunda-bpmn-moddle": "^3.2.0",
+    "element-ui": "^2.11.0",
+    "tiny-svg": "^0.1.3",
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.1.1",
+    "xe-utils": "^2.2.2"
+  },
+  "devDependencies": {
+    "sass": "1.32.13",
+    "sass-loader": "10.1.1",
+    "script-ext-html-webpack-plugin": "2.1.5",
+    "@vue/cli-plugin-babel": "^3.0.4",
+    "@vue/cli-plugin-eslint": "^3.0.4",
+    "@vue/cli-service": "^3.0.4",
+    "vue-template-compiler": "^2.5.17"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "no-alert": 0,
+      "no-console": 0
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

ebpm-process-modeler/public/css/common.css

@@ -0,0 +1,183 @@
+.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
+  stroke: #7ACB5A !important;
+}
+.highlight-cancle:not(.djs-connection) .djs-visual > :nth-child(1) {
+  stroke: #802A2A !important;
+}
+.highlight-run:not(.djs-connection) .djs-visual > :nth-child(1) {
+  stroke: red !important;
+}
+.highlight-line:not(.djs-shape) .djs-visual :last-child {
+  stroke: #7ACB5A !important;
+}
+.highlight-label .djs-visual text{
+  fill: #428bca !important;
+}
+/*hjjd-box 流程节点*/
+.hjjd-box{
+display: block;
+margin: 0;
+padding: 0;
+}
+.hjjd-box:before,
+.hjjd-box:after{
+display: table;
+content: "";
+}
+.hjjd-box:after{
+clear: both;
+}
+.hjjd-box .jd-list{
+  display: inline-block;
+  margin: 5px 10px 10px 0;
+  float: left;
+}
+.hjjd-box .jd-list:before,
+.hjjd-box .jd-list:after{
+display: table;
+content: "";
+}
+.hjjd-box .jd-list:after{
+clear: both;
+}
+.hjjd-box .jd-list .jd-wzx{
+display: inline-block;
+width: 15px;
+height: 15px;
+border: 1px solid #000;
+background: #808080;
+margin: 0 5px 0 0;
+float: left;
+box-sizing: border-box;
+}
+.hjjd-box .jd-list .jd-yzx{
+display: inline-block;
+width: 15px;
+height: 15px;
+border: 1px solid #000;
+background: #7ACB5A;
+margin: 0 5px 0 0;
+float: left;
+box-sizing: border-box;
+}
+.hjjd-box .jd-list .jd-dqjd{
+display: inline-block;
+width: 15px;
+height: 15px;
+border: 1px solid #000;
+background: #ff0000;
+margin: 0 5px 0 0;
+float: left;
+box-sizing: border-box;
+}
+.hjjd-box .jd-list .jd-yzf{
+display: inline-block;
+width: 15px;
+height: 15px;
+border: 1px solid #000;
+background: #802a2a;
+margin: 0 5px 0 0;
+float: left;
+box-sizing: border-box;
+}
+.hjjd-box .jd-list .text{
+font-size: 14px;
+height: 15px;
+line-height: 15px;
+color: #393939;
+font-weight: bold;
+float: left;
+}
+/*lchj-box 流程环节*/
+.lchj-box{
+display: block;
+width: 300px;
+margin: -45px 0 0 -40px;
+box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
+}
+.lchj-box .box-head{
+background: #F1F1F1;
+height: 36px;
+line-height: 36px;
+padding: 0 10px;
+}
+.lchj-box .box-head .title{
+color: #454545;
+font-size: 15px;
+font-weight: bold;
+padding: 0 15px 0 0;
+}
+.lchj-box .box-head .link,
+.lchj-box .box-head .link:hover{
+color: #428bca;
+font-size: 14px;
+font-weight: bold;
+cursor: pointer;
+text-align-last: none;
+}
+.lchj-box .box-body {
+overflow: auto;
+height: 300px;
+padding: 10px;
+background: #fff;
+}
+/*lchj-table 非组件表格*/
+.lchj-table {
+border-top: 1px solid #dee3e9;
+border-left: 1px solid #dee3e9;
+border-collapse: separate;
+border-spacing: 0;
+table-layout: fixed;
+width: 100%;
+color: #333;
+font-size: 14px;
+margin: 0;
+}
+.lchj-table + .lchj-table{
+margin-top: 10px;
+}
+.lchj-table tr td, .lchj-table tr th {
+border-bottom: 1px solid #dee3e9;
+border-right: 1px solid #dee3e9 !important;
+padding: 6px;
+text-align: left;
+}
+
+.lchj-table tr td .el-button.el-button--text, .lchj-table tr th .el-button.el-button--text {
+padding: 0;
+}
+
+.lchj-table tr td .el-button, .lchj-table tr th .el-button {
+padding: 4px 10px;
+}
+
+.lchj-table td.clum, .lchj-table th.clum {
+background: #f4f9ff;
+text-align: right;
+}
+
+.lchj-table thead tr th, .lchj-table thead tr td {
+color: #333;
+background: #f4f9ff;
+font-weight: 700;
+border-top: 0 !important;
+border-left: 0 !important;
+}
+
+.lchj-table tr td.center, .lchj-table tr th.center {
+text-align: center;
+}
+.num-color{
+  background: #7ACB5A;
+  color: #fff;
+  font-size: 13px;
+  display: inline-block;
+  min-width: 15px;
+  height: 15px;
+  line-height: 15px;
+  text-align: center;
+  border-radius: 5px;
+  padding: 0 3px;
+  box-sizing: border-box;
+  margin: 5px 0 0 0;
+}

ebpm-process-modeler/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>流程建模</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but ebpm-process-modeler doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

ebpm-process-modeler/public/js/bpmn-js/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [ "env" ]
+}

ebpm-process-modeler/public/js/bpmn-js/.npminstall.done

@@ -0,0 +1 @@
+Tue Apr 07 2020 16:59:34 GMT+0800 (GMT+08:00)

ebpm-process-modeler/public/js/bpmn-js/CHANGELOG.md

@@ -0,0 +1,308 @@
+# Changelog
+
+All notable changes to [bpmn-js](https://github.com/bpmn-io/bpmn-js) are documented here. We use [semantic versioning](http://semver.org/) for releases.
+
+## Unreleased
+
+___Note:__ Yet to be released changes appear here._
+
+## 4.0.4
+
+* `FIX`: creating `bpmn:Participant` on single `bpmn:Group` throwing error ([#1133](https://github.com/bpmn-io/bpmn-js/issues/1133))
+* `CHORE`: bump to `diagram-js@4.0.3`
+
+## 4.0.3
+
+* `FIX`: prevent dropping on labels and `bpmn:Group` elements ([#1131](https://github.com/bpmn-io/bpmn-js/pull/1131))
+
+## 4.0.2
+
+* `FIX`: correct element positioning update ([#1129](https://github.com/bpmn-io/bpmn-js/issues/1129))
+* `CHORE`: bump to `diagram-js@4.0.2`
+
+## 4.0.1
+
+* `FIX`: prevent adding lane from crashing IE ([#746](https://github.com/bpmn-io/bpmn-js/issues/746))
+* `FIX`: correct inverse space tool visuals ([#1105](https://github.com/bpmn-io/bpmn-js/issues/1105))
+* `CHORE`: update `diagram-js-direct-editing` to prevent install warning
+* `CHORE`: update to `diagram-js@4.0.1`
+
+## 4.0.0
+
+* `FEAT`: add top, right, bottom, left snapping with container elements ([#1108](https://github.com/bpmn-io/bpmn-js/pull/1108))
+* `FEAT`: add grid snapping ([#987](https://github.com/bpmn-io/bpmn-js/pull/987))
+* `FEAT`: allow modeling of groups ([#343](https://github.com/bpmn-io/bpmn-js/issues/343))
+* `FEAT`: improve modeling rules behind event-based gateways ([#1006](https://github.com/bpmn-io/bpmn-js/pull/1006))
+* `FEAT`: adjust default collapsed pool to standard height ([`5affe2570`](https://github.com/bpmn-io/bpmn-js/commit/5affe25705082937beace6b4a568f176a0527baf))
+* `FEAT`: add connection previews ([#743](https://github.com/bpmn-io/bpmn-js/issues/743))
+* `FEAT`: create expanded sub-process with start event included ([#1039](https://github.com/bpmn-io/bpmn-js/pull/1039))
+* `FEAT`: improve automatic label adjustment for boundary events ([#1064](https://github.com/bpmn-io/bpmn-js/pull/1064))
+* `FEAT`: improve creation of initial participant ([#1046](https://github.com/bpmn-io/bpmn-js/pull/1046))
+* `FEAT`: improve boundary to host loop layout ([#1070](https://github.com/bpmn-io/bpmn-js/pull/1070))
+* `FEAT`: make connection segment move the primary connection drag behavior
+* `FEAT`: allow label and group movement everywhere ([#1080](https://github.com/bpmn-io/bpmn-js/pull/1080))
+* `FEAT`: improve message flow to participant connection in the presence of lanes ([#950](https://github.com/bpmn-io/bpmn-js/issues/950))
+* `FEAT`: allow detaching of boundary and attaching of intermediate events ([#1045](https://github.com/bpmn-io/bpmn-js/issues/1045))
+* `FEAT`: simplify requested palette and context pad translations ([#1027](https://github.com/bpmn-io/bpmn-js/pull/1027))
+* `FEAT`: simplify participant dragging in the presence of nested lanes ([`fdb299dc`](https://github.com/bpmn-io/bpmn-js/commit/fdb299dc888a7dcdb3f7674b6ed2a857864df457))
+* `FEAT`: correctly render all kinds of multiple events ([#1091](https://github.com/bpmn-io/bpmn-js/pull/1091))
+* `CHORE`: validate BPMN 2.0 XML ids as QNames ([`92c03679a`](https://github.com/bpmn-io/bpmn-js/commit/92c03679a4fd3c92a1c5ce3c97f7d366e2a5753a))
+* `FIX`: correctly handle flow reconnection + type replacement ([#896](https://github.com/bpmn-io/bpmn-js/issues/896), [#1008](https://github.com/bpmn-io/bpmn-js/issues/1008))
+
+### Breaking Changes
+
+* `CHORE`: bump to [`diagram-js@4.0.0`](https://github.com/bpmn-io/diagram-js/blob/master/CHANGELOG.md#400)
+
+## 3.5.0
+
+* `FEAT`: restore `Viewer#importDefinitions` and make it public API ([#1112](https://github.com/bpmn-io/bpmn-js/pull/1112))
+
+## 3.4.3
+
+* `FIX`: prevent HTML injection in search ([diagram-js#362](https://github.com/bpmn-io/diagram-js/pull/362))
+
+## 2.5.4
+
+* `FIX`: prevent HTML injection in search ([diagram-js#362](https://github.com/bpmn-io/diagram-js/pull/362))
+* `CHORE`: bump to `diagram-js@2.6.2`
+
+## 3.4.2
+
+* `FIX`: do not evaluate pasted text as HTML ([#1073](https://github.com/bpmn-io/bpmn-js/issues/1073))
+
+## 2.5.3
+
+* `FIX`: do not evaluate pasted text as HTML ([#1073](https://github.com/bpmn-io/bpmn-js/issues/1073))
+
+## 3.4.1
+
+_Republish of `v3.4.0` without `.git` folder._
+
+## 3.4.0
+
+* `FIX`: properly render colored connection markers ([#981](https://github.com/bpmn-io/bpmn-js/issues/981))
+* `FEAT`: add ability to open different DI diagrams ([#87](https://github.com/bpmn-io/bpmn-js/issues/87))
+* `FIX`: correctly layout straight boundary to target connections ([#891](https://github.com/bpmn-io/bpmn-js/issues/891))
+* `FEAT`: resize participant to standard size on collapse ([#975](https://github.com/bpmn-io/bpmn-js/pull/975))
+* `FEAT`: consistently layout connection on reconnect start and end ([#971](https://github.com/bpmn-io/bpmn-js/pull/971))
+* `FEAT`: layout connection on element removal ([#989](https://github.com/bpmn-io/bpmn-js/issues/989))
+* `FIX`: properly crop sequence flow ends on undo/redo ([#940](https://github.com/bpmn-io/bpmn-js/issues/940))
+* `CHORE`: bump to [`diagram-js@3.3.0`](https://github.com/bpmn-io/diagram-js/blob/master/CHANGELOG.md#330)
+
+## 3.3.1
+
+* `FIX`: ignore unchanged direct editing completion
+* `CHORE`: update to `diagram-js-direct-editing@1.4.2`
+
+## 3.3.0
+
+* `FEAT`: display `DataInput` / `DataOutput` labels ([`89719de3b`](https://github.com/bpmn-io/bpmn-js/commit/89719de3be50d9270227fd04216f7f19f0d018a2))
+* `FEAT`: support basic `DataInput` / `DataOutput` move ([#962](https://github.com/bpmn-io/bpmn-js/pull/962))
+* `FIX`: properly handle `DataInput` / `DataOutput` move ([#961](https://github.com/bpmn-io/bpmn-js/issues/961))
+
+## 3.2.3
+
+* `FIX`: update to `diagram-js-direct-editing@1.4.1` to trim trailing/leading whitespace in task names ([#763](https://github.com/bpmn-io/bpmn-js/issues/763))
+
+## 3.2.2
+
+* `FIX`: gracefully handle missing waypoints ([`45486f2`](https://github.com/bpmn-io/bpmn-js/commit/45486f2afe7f42fcac31be9ca477a7c94babe7d8))
+
+## 3.2.1
+
+* `FIX`: bump to `diagram-js@3.1.3` / `tiny-svg@2.2.1` to work around MS Edge bug ([`ed798a15`](https://github.com/bpmn-io/bpmn-js/commit/ed798a152539a613dbc9de9d61231ebbfb50987a))
+
+## 3.2.0
+
+* `FEAT`: set isHorizontal=true for new and updated participant/lane DIs ([#934](https://github.com/bpmn-io/bpmn-js/issues/934))
+
+## 3.1.1
+
+* `CHORE`: update to `diagram-js@3.1.1`
+
+## 3.1.0
+
+* `CHORE`: update to `diagram-js@3.1`
+
+## 3.0.4
+
+* `FIX`: render labels always on top ([#920](https://github.com/bpmn-io/bpmn-js/pull/920))
+
+## 3.0.3
+
+* `FIX`: do not join incoming/outgoing flows other than sequence flows on element deletion ([#917](https://github.com/bpmn-io/bpmn-js/issues/917))
+
+## 3.0.2
+
+* `FIX`: correct IE 11 delete keybinding ([#904](https://github.com/bpmn-io/bpmn-js/issues/904))
+
+## 3.0.1
+
+* `FIX`: restore copy-paste behavior
+
+## 3.0.0
+
+* `FEAT`: improve context pad tooltip titles for `EventBasedGateway` ([`350a5ab`](https://github.com/bpmn-io/bpmn-js/commit/350a5ab75ed675991599faff9615e4bbe184d491))
+* `FEAT`: display group names ([#844](https://github.com/bpmn-io/bpmn-js/issues/844))
+* `FEAT`: add ability to move selection with keyboard arrows ([#376](https://github.com/bpmn-io/bpmn-js/issues/376))
+* `FEAT`: support `SHIFT` modifier to move elements / canvas with keyboard arrows at accelerated speed
+* `FEAT`: require `Ctrl/Cmd` to be pressed as a modifier key to move the canvas via keyboard errors
+* `FEAT`: auto-expand elements when children resize ([#786](https://github.com/bpmn-io/bpmn-js/issues/786))
+* `CHORE`: bind editor actions and keyboard shortcuts for explicitly added features only ([#887](https://github.com/bpmn-io/bpmn-js/pull/887))
+* `CHORE`: update to [`diagram-js@3.0.0`](https://github.com/bpmn-io/diagram-js/blob/master/CHANGELOG.md#300)
+* `FIX`: disallow attaching of `BoundaryEvent` to a `ReceiveTask` following an `EventBasedGateway` ([#874](https://github.com/bpmn-io/bpmn-js/issues/874))
+* `FIX`: fix date in license ([#882](https://github.com/bpmn-io/bpmn-js/pull/882))
+
+### Breaking Changes
+
+* `BpmnGlobalConnect` provider got removed. Use `connection.start` rule to customize whether connection should allowed to be started ([#565](https://github.com/bpmn-io/bpmn-js/issues/565), [#870](https://github.com/bpmn-io/bpmn-js/issues/870))
+* `EditorActions` / `Keyboard` do not pull in features implicitly anymore. If you roll your own editor, include features you would like to ship with manually to provide the respective actions / keyboard bindings ([`645265ad`](https://github.com/bpmn-io/bpmn-js/commit/645265ad7e4a47e80657c671068a027752d7504f))
+* Moving the canvas with keyboard arrows now requires the `Ctrl/Cmd` modifiers to be pressed.
+
+## 2.5.2
+
+* `FIX`: correct horizontal embedded label padding
+
+## 2.5.1
+
+* `FIX`: prevent error to be thrown on lane move ([#855](https://github.com/bpmn-io/bpmn-js/issues/855))
+
+## 2.5.0
+
+* `FEAT`: snap message flows to `bpmn:Event` center during connect ([#850](https://github.com/bpmn-io/bpmn-js/issues/850))
+* `CHORE`: bump to `diagram-js@2.6.0`
+* `FIX`: allow label movement over message flow ([#849](https://github.com/bpmn-io/bpmn-js/issues/849))
+
+## 2.4.1
+
+* `FIX`: make viewer IE 9 compatible
+* `FIX`: prevent duplicate connections after drop on flow ([#774](https://github.com/bpmn-io/bpmn-js/issues/774))
+* `FIX`: fix rules not preventing redundant loop ([#836](https://github.com/bpmn-io/bpmn-js/issues/836))
+
+## 2.4.0
+
+* `FEAT`: improve layouting of boundary event to host loops ([#467](https://github.com/bpmn-io/bpmn-js/issues/467))
+* `FEAT`: allow circular activity to activity loops ([#824](https://github.com/bpmn-io/bpmn-js/issues/824))
+* `FEAT`: create label on appropriate free position ([#825](https://github.com/bpmn-io/bpmn-js/issues/825))
+* `CHORE`: bump to `diagram-js@2.5.0`
+* `FIX`: repair label position not being adapted on host move
+
+## 2.3.1
+
+* `FIX`: revert to `Arial` as the default rendering font ([#819](https://github.com/bpmn-io/bpmn-js/issues/819))
+* `FIX`: keep event definitions when switching from interrupting to non-interrupting boundary event ([#799](https://github.com/bpmn-io/bpmn-js/issues/799))
+
+## 2.3.0
+
+* `CHORE`: update to `diagram-js@2.4.0`
+
+## 2.2.1
+
+* `FIX`: correct updating of multiple data stores ([`300e7010`](https://github.com/bpmn-io/bpmn-js/commit/300e7010c4e1862394d147988dc4c4bcc09b07bc))
+
+## 2.2.0
+
+* `FEAT`: emit export events ([#813](https://github.com/bpmn-io/bpmn-js/issues/813))
+* `FEAT`: unset businessObject name if empty ([`6c081d85`](https://github.com/bpmn-io/bpmn-js/commit/6c081d854fa8a4e87eb7cdd1744be37c78652667))
+* `FEAT`: resize text annotation on text change ([`100f3fb2`](https://github.com/bpmn-io/bpmn-js/commit/100f3fb2ee6373cd4b7ad0b76e520a1afb70887e))
+* `FIX`: apply data store behavior in collaboration only ([`5cc28d5d`](https://github.com/bpmn-io/bpmn-js/commit/5cc28d5d5571287a798b189aed75095f1fd0189e))
+* `FIX`: create/update labels when updating element name via `Modeling#updateProperties` ([`4a0f6da8`](https://github.com/bpmn-io/bpmn-js/commit/4a0f6da814c45268e8a324e73a53479bd2435bbe))
+
+## 2.1.0
+
+* `FEAT`: support specifying `lineHeight` for text rendering ([#256](https://github.com/bpmn-io/diagram-js/pull/256))
+* `FEAT`: `bpmn:LaneSet` elements get an ID assigned on creation
+* `FEAT`: external labels can be deleted, clearing the elements name ([#791](https://github.com/bpmn-io/bpmn-js/pull/791))
+* `FEAT`: add ability to override default element colors ([#713](https://github.com/bpmn-io/bpmn-js/issues/713))
+* `FEAT`: add ability to override font family and size of rendered labels ([`4bb270f1`](https://github.com/bpmn-io/bpmn-js/commit/4bb270f19279db40f9cc3c179e09ee3a9a114e7c))
+
+## 2.0.1
+
+_Republish of `v2.0.0` due to registry error._
+
+## 2.0.0
+
+* `FEAT`: allow data store to be modeled between participants ([#483](https://github.com/bpmn-io/bpmn-js/issues/483))
+* `CHORE`: update to [`diagram-js@2.0.0`](https://github.com/bpmn-io/diagram-js/blob/master/CHANGELOG.md#200)
+* `FIX`: correctly handle missing `bpmndi:Label` bounds during model updating ([#794](https://github.com/bpmn-io/bpmn-js/issues/794))
+
+### Breaking Changes
+
+* The `PopupMenu` API got rewritten, cf. [`b1852e1d`](https://github.com/bpmn-io/diagram-js/pull/254/commits/b1852e1d71f67bd36ae1eb02748d2d0cbf124625)
+
+## 1.3.3
+
+* `CHORE`: update to [`bpmn-moddle@5.1.5`](https://github.com/bpmn-io/bpmn-moddle/blob/master/CHANGELOG.md#515)
+
+## 1.3.2
+
+* `FIX`: correctly serialize extension attributes on `bpmn:Expression`
+
+## 1.3.1
+
+* `FIX`: correctly auto-place from boundary events attached to host edges ([#788](https://github.com/bpmn-io/bpmn-js/issues/788))
+
+## 1.3.0
+
+* `FEAT`: expose additional `BpmnTreeWalker` APIs for advanced import use-cases
+* `CHORE`: bump diagram-js and object-refs version
+
+## 1.2.1
+
+* `FIX`: correct side-effects config to not include `*.css` files
+
+## 1.2.0
+
+* `FEAT`: add initial snapping when creating associations
+* `CHORE`: update to `diagram-js@1.3.0`
+* `FIX`: allow message flows between collapsed pools
+* `FIX`: complete direct editing on popup menu use
+* `FIX`: focus label editing box on element creation
+
+## 1.1.1
+
+* `FIX`: escape `data-element-id` in CSS selectors
+
+## 1.1.0
+
+* `FEAT`: show gateway icon on context pad without marker ([`15dfab6b`](https://github.com/bpmn-io/bpmn-js/commit/15dfab6b5b12dd184acf070f2ab3ad205d1b245c))
+
+## 1.0.4
+
+* `FIX`: properly wire `$parent` on copy + paste
+* `FIX`: improve boundary event rendering to correct SVG to image conversion
+
+## 1.0.3
+
+* `FIX`: re-expose `TestHelper#bootstrapBpmnJS` util
+
+## 1.0.2
+
+* `FIX`: correct library default export
+
+## 1.0.1
+
+_Republished 1.0.0 with CHANGELOG entries._
+
+## 1.0.0
+
+* `CHORE`: convert code base to ES modules
+* `CHORE`: update utility toolbelt
+
+### Breaking Changes
+
+* You must now configure a module transpiler such as Babel or Webpack to handle ES module imports and exports.
+
+## 0.31.0
+
+* `FEAT`: encode entities in body properties during XML export
+* `CHORE`: bump to [`bpmn-moddle@4.0.0`](https://github.com/bpmn-io/bpmn-moddle/releases/tag/v4.0.0)
+* `CHORE`: bump utility version
+
+## 0.30.0
+
+* `CHORE`: bump to [`diagram-js@0.31.0`](https://github.com/bpmn-io/diagram-js/releases/tag/v0.31.0)
+
+## ...
+
+Check `git log` for earlier history.

ebpm-process-modeler/public/js/bpmn-js/LICENSE

@@ -0,0 +1,23 @@
+Copyright (c) 2014-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The source code responsible for displaying the bpmn.io logo (two green cogwheels in
+a box) that links back to http://bpmn.io as part of rendered diagrams MUST NOT be
+removed or changed. When this software is being used in a website or application,
+the logo must stay fully visible and not visually overlapped by other elements.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+OR OTHER DEALINGS IN THE SOFTWARE.

ebpm-process-modeler/public/js/bpmn-js/README.md

@@ -0,0 +1,92 @@
+# bpmn-js - BPMN 2.0 for the web
+
+[![Build Status](https://travis-ci.org/bpmn-io/bpmn-js.svg?branch=master)](https://travis-ci.org/bpmn-io/bpmn-js)
+
+View and edit BPMN 2.0 diagrams in the browser.
+
+[![bpmn-js screencast](./resources/screencast.gif "bpmn-js in action")](http://demo.bpmn.io/s/start)
+
+
+## Installation
+
+Use the library [pre-packaged](https://github.com/bpmn-io/bpmn-js-examples/tree/master/pre-packaged)
+or include it [via npm](https://github.com/bpmn-io/bpmn-js-examples/tree/master/bundling)
+into your node-style web-application.
+
+## Usage
+
+To get started, create a [bpmn-js](https://github.com/bpmn-io/bpmn-js) instance
+and render [BPMN 2.0 diagrams](https://www.omg.org/spec/BPMN/2.0.2/) in the browser:
+
+```javascript
+var xml; // my BPMN 2.0 xml
+var viewer = new BpmnJS({
+  container: 'body'
+});
+
+viewer.importXML(xml, function(err) {
+
+  if (err) {
+    console.log('error rendering', err);
+  } else {
+    console.log('rendered');
+  }
+});
+```
+
+Checkout our [examples](https://github.com/bpmn-io/bpmn-js-examples) for many
+more supported usage scenarios.
+
+
+### Dynamic Attach/Detach
+
+You may attach or detach the viewer dynamically to any element on the page, too:
+
+```javascript
+var viewer = new BpmnJS();
+
+// attach it to some element
+viewer.attachTo('#container');
+
+// detach the panel
+viewer.detach();
+```
+
+
+## Resources
+
+* [Demo](http://demo.bpmn.io)
+* [Issues](https://github.com/bpmn-io/bpmn-js/issues)
+* [Examples](https://github.com/bpmn-io/bpmn-js-examples)
+* [Forum](https://forum.bpmn.io)
+* [Changelog](./CHANGELOG.md)
+
+
+## Building the Project
+
+Perform the following steps to build the library, including running all tests:
+
+```
+cd bpmn-js
+npm install
+npm run all
+```
+
+You may need to perform [additional project setup](./docs/project/SETUP.md) when
+building the latest development snapshot.
+
+Please checkout our [contributing guidelines](./.github/CONTRIBUTING.md) if you plan to
+file an issue or pull request.
+
+
+## Related
+
+bpmn-js builds on top of a few additional powerful tools:
+
+* [bpmn-moddle](https://github.com/bpmn-io/bpmn-moddle): Read / write support for BPMN 2.0 XML in the browsers
+* [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit
+
+
+## License
+
+Use under the terms of the [bpmn.io license](http://bpmn.io/license).

ebpm-process-modeler/public/js/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css

@@ -0,0 +1,108 @@
+
+.bpmn-icon-screw-wrench:before { content: '\e800'; } /* '' */
+.bpmn-icon-trash:before { content: '\e801'; } /* '' */
+.bpmn-icon-conditional-flow:before { content: '\e802'; } /* '' */
+.bpmn-icon-default-flow:before { content: '\e803'; } /* '' */
+.bpmn-icon-gateway-parallel:before { content: '\e804'; } /* '' */
+.bpmn-icon-intermediate-event-catch-cancel:before { content: '\e805'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-message:before { content: '\e806'; } /* '' */
+.bpmn-icon-start-event-compensation:before { content: '\e807'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-parallel-multiple:before { content: '\e808'; } /* '' */
+.bpmn-icon-loop-marker:before { content: '\e809'; } /* '' */
+.bpmn-icon-parallel-mi-marker:before { content: '\e80a'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-signal:before { content: '\e80b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-timer:before { content: '\e80c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-parallel-multiple:before { content: '\e80d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-compensation:before { content: '\e80e'; } /* '' */
+.bpmn-icon-gateway-xor:before { content: '\e80f'; } /* '' */
+.bpmn-icon-connection:before { content: '\e810'; } /* '' */
+.bpmn-icon-end-event-cancel:before { content: '\e811'; } /* '' */
+.bpmn-icon-intermediate-event-catch-condition:before { content: '\e812'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-parallel-multiple:before { content: '\e813'; } /* '' */
+.bpmn-icon-start-event-condition:before { content: '\e814'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-timer:before { content: '\e815'; } /* '' */
+.bpmn-icon-sequential-mi-marker:before { content: '\e816'; } /* '' */
+.bpmn-icon-user-task:before { content: '\e817'; } /* '' */
+.bpmn-icon-business-rule:before { content: '\e818'; } /* '' */
+.bpmn-icon-sub-process-marker:before { content: '\e819'; } /* '' */
+.bpmn-icon-start-event-parallel-multiple:before { content: '\e81a'; } /* '' */
+.bpmn-icon-start-event-error:before { content: '\e81b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-signal:before { content: '\e81c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-error:before { content: '\e81d'; } /* '' */
+.bpmn-icon-end-event-compensation:before { content: '\e81e'; } /* '' */
+.bpmn-icon-subprocess-collapsed:before { content: '\e81f'; } /* '' */
+.bpmn-icon-subprocess-expanded:before { content: '\e820'; } /* '' */
+.bpmn-icon-task:before { content: '\e821'; } /* '' */
+.bpmn-icon-end-event-error:before { content: '\e822'; } /* '' */
+.bpmn-icon-intermediate-event-catch-escalation:before { content: '\e823'; } /* '' */
+.bpmn-icon-intermediate-event-catch-timer:before { content: '\e824'; } /* '' */
+.bpmn-icon-start-event-escalation:before { content: '\e825'; } /* '' */
+.bpmn-icon-start-event-signal:before { content: '\e826'; } /* '' */
+.bpmn-icon-business-rule-task:before { content: '\e827'; } /* '' */
+.bpmn-icon-manual:before { content: '\e828'; } /* '' */
+.bpmn-icon-receive:before { content: '\e829'; } /* '' */
+.bpmn-icon-call-activity:before { content: '\e82a'; } /* '' */
+.bpmn-icon-start-event-timer:before { content: '\e82b'; } /* '' */
+.bpmn-icon-start-event-message:before { content: '\e82c'; } /* '' */
+.bpmn-icon-intermediate-event-none:before { content: '\e82d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-link:before { content: '\e82e'; } /* '' */
+.bpmn-icon-end-event-escalation:before { content: '\e82f'; } /* '' */
+.bpmn-icon-text-annotation:before { content: '\e830'; } /* '' */
+.bpmn-icon-bpmn-io:before { content: '\e831'; } /* '' */
+.bpmn-icon-gateway-complex:before { content: '\e832'; } /* '' */
+.bpmn-icon-gateway-eventbased:before { content: '\e833'; } /* '' */
+.bpmn-icon-gateway-none:before { content: '\e834'; } /* '' */
+.bpmn-icon-gateway-or:before { content: '\e835'; } /* '' */
+.bpmn-icon-end-event-terminate:before { content: '\e836'; } /* '' */
+.bpmn-icon-end-event-signal:before { content: '\e837'; } /* '' */
+.bpmn-icon-end-event-none:before { content: '\e838'; } /* '' */
+.bpmn-icon-end-event-multiple:before { content: '\e839'; } /* '' */
+.bpmn-icon-end-event-message:before { content: '\e83a'; } /* '' */
+.bpmn-icon-end-event-link:before { content: '\e83b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-message:before { content: '\e83c'; } /* '' */
+.bpmn-icon-intermediate-event-throw-compensation:before { content: '\e83d'; } /* '' */
+.bpmn-icon-start-event-multiple:before { content: '\e83e'; } /* '' */
+.bpmn-icon-script:before { content: '\e83f'; } /* '' */
+.bpmn-icon-manual-task:before { content: '\e840'; } /* '' */
+.bpmn-icon-send:before { content: '\e841'; } /* '' */
+.bpmn-icon-service:before { content: '\e842'; } /* '' */
+.bpmn-icon-receive-task:before { content: '\e843'; } /* '' */
+.bpmn-icon-user:before { content: '\e844'; } /* '' */
+.bpmn-icon-start-event-none:before { content: '\e845'; } /* '' */
+.bpmn-icon-intermediate-event-throw-escalation:before { content: '\e846'; } /* '' */
+.bpmn-icon-intermediate-event-catch-multiple:before { content: '\e847'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-escalation:before { content: '\e848'; } /* '' */
+.bpmn-icon-intermediate-event-throw-link:before { content: '\e849'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-condition:before { content: '\e84a'; } /* '' */
+.bpmn-icon-data-object:before { content: '\e84b'; } /* '' */
+.bpmn-icon-script-task:before { content: '\e84c'; } /* '' */
+.bpmn-icon-send-task:before { content: '\e84d'; } /* '' */
+.bpmn-icon-data-store:before { content: '\e84e'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-escalation:before { content: '\e84f'; } /* '' */
+.bpmn-icon-intermediate-event-throw-message:before { content: '\e850'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-multiple:before { content: '\e851'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-signal:before { content: '\e852'; } /* '' */
+.bpmn-icon-intermediate-event-throw-multiple:before { content: '\e853'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-message:before { content: '\e854'; } /* '' */
+.bpmn-icon-ad-hoc-marker:before { content: '\e855'; } /* '' */
+.bpmn-icon-service-task:before { content: '\e856'; } /* '' */
+.bpmn-icon-task-none:before { content: '\e857'; } /* '' */
+.bpmn-icon-compensation-marker:before { content: '\e858'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-multiple:before { content: '\e859'; } /* '' */
+.bpmn-icon-intermediate-event-throw-signal:before { content: '\e85a'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-condition:before { content: '\e85b'; } /* '' */
+.bpmn-icon-participant:before { content: '\e85c'; } /* '' */
+.bpmn-icon-event-subprocess-expanded:before { content: '\e85d'; } /* '' */
+.bpmn-icon-lane-insert-below:before { content: '\e85e'; } /* '' */
+.bpmn-icon-space-tool:before { content: '\e85f'; } /* '' */
+.bpmn-icon-connection-multi:before { content: '\e860'; } /* '' */
+.bpmn-icon-lane:before { content: '\e861'; } /* '' */
+.bpmn-icon-lasso-tool:before { content: '\e862'; } /* '' */
+.bpmn-icon-lane-insert-above:before { content: '\e863'; } /* '' */
+.bpmn-icon-lane-divide-three:before { content: '\e864'; } /* '' */
+.bpmn-icon-lane-divide-two:before { content: '\e865'; } /* '' */
+.bpmn-icon-data-input:before { content: '\e866'; } /* '' */
+.bpmn-icon-data-output:before { content: '\e867'; } /* '' */
+.bpmn-icon-hand-tool:before { content: '\e868'; } /* '' */
+.bpmn-icon-group:before { content: '\e869'; } /* '' */
+.bpmn-icon-transaction:before { content: '\e8c4'; } /* '' */

ebpm-process-modeler/public/js/bpmn-js/dist/assets/bpmn-font/css/bpmn.css

@@ -0,0 +1,164 @@
+@font-face {
+  font-family: 'bpmn';
+  src: url('../font/bpmn.eot?14396105');
+  src: url('../font/bpmn.eot?14396105#iefix') format('embedded-opentype'),
+       url('../font/bpmn.woff2?14396105') format('woff2'),
+       url('../font/bpmn.woff?14396105') format('woff'),
+       url('../font/bpmn.ttf?14396105') format('truetype'),
+       url('../font/bpmn.svg?14396105#bpmn') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'bpmn';
+    src: url('../font/bpmn.svg?14396105#bpmn') format('svg');
+  }
+}
+*/
+
+ [class^="bpmn-icon-"]:before, [class*=" bpmn-icon-"]:before {
+  font-family: "bpmn";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  /* margin-right: .2em; */
+  text-align: center;
+  /* opacity: .8; */
+
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  /* margin-left: .2em; */
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.bpmn-icon-screw-wrench:before { content: '\e800'; } /* '' */
+.bpmn-icon-trash:before { content: '\e801'; } /* '' */
+.bpmn-icon-conditional-flow:before { content: '\e802'; } /* '' */
+.bpmn-icon-default-flow:before { content: '\e803'; } /* '' */
+.bpmn-icon-gateway-parallel:before { content: '\e804'; } /* '' */
+.bpmn-icon-intermediate-event-catch-cancel:before { content: '\e805'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-message:before { content: '\e806'; } /* '' */
+.bpmn-icon-start-event-compensation:before { content: '\e807'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-parallel-multiple:before { content: '\e808'; } /* '' */
+.bpmn-icon-loop-marker:before { content: '\e809'; } /* '' */
+.bpmn-icon-parallel-mi-marker:before { content: '\e80a'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-signal:before { content: '\e80b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-timer:before { content: '\e80c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-parallel-multiple:before { content: '\e80d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-compensation:before { content: '\e80e'; } /* '' */
+.bpmn-icon-gateway-xor:before { content: '\e80f'; } /* '' */
+.bpmn-icon-connection:before { content: '\e810'; } /* '' */
+.bpmn-icon-end-event-cancel:before { content: '\e811'; } /* '' */
+.bpmn-icon-intermediate-event-catch-condition:before { content: '\e812'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-parallel-multiple:before { content: '\e813'; } /* '' */
+.bpmn-icon-start-event-condition:before { content: '\e814'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-timer:before { content: '\e815'; } /* '' */
+.bpmn-icon-sequential-mi-marker:before { content: '\e816'; } /* '' */
+.bpmn-icon-user-task:before { content: '\e817'; } /* '' */
+.bpmn-icon-business-rule:before { content: '\e818'; } /* '' */
+.bpmn-icon-sub-process-marker:before { content: '\e819'; } /* '' */
+.bpmn-icon-start-event-parallel-multiple:before { content: '\e81a'; } /* '' */
+.bpmn-icon-start-event-error:before { content: '\e81b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-signal:before { content: '\e81c'; } /* '' */
+.bpmn-icon-intermediate-event-catch-error:before { content: '\e81d'; } /* '' */
+.bpmn-icon-end-event-compensation:before { content: '\e81e'; } /* '' */
+.bpmn-icon-subprocess-collapsed:before { content: '\e81f'; } /* '' */
+.bpmn-icon-subprocess-expanded:before { content: '\e820'; } /* '' */
+.bpmn-icon-task:before { content: '\e821'; } /* '' */
+.bpmn-icon-end-event-error:before { content: '\e822'; } /* '' */
+.bpmn-icon-intermediate-event-catch-escalation:before { content: '\e823'; } /* '' */
+.bpmn-icon-intermediate-event-catch-timer:before { content: '\e824'; } /* '' */
+.bpmn-icon-start-event-escalation:before { content: '\e825'; } /* '' */
+.bpmn-icon-start-event-signal:before { content: '\e826'; } /* '' */
+.bpmn-icon-business-rule-task:before { content: '\e827'; } /* '' */
+.bpmn-icon-manual:before { content: '\e828'; } /* '' */
+.bpmn-icon-receive:before { content: '\e829'; } /* '' */
+.bpmn-icon-call-activity:before { content: '\e82a'; } /* '' */
+.bpmn-icon-start-event-timer:before { content: '\e82b'; } /* '' */
+.bpmn-icon-start-event-message:before { content: '\e82c'; } /* '' */
+.bpmn-icon-intermediate-event-none:before { content: '\e82d'; } /* '' */
+.bpmn-icon-intermediate-event-catch-link:before { content: '\e82e'; } /* '' */
+.bpmn-icon-end-event-escalation:before { content: '\e82f'; } /* '' */
+.bpmn-icon-text-annotation:before { content: '\e830'; } /* '' */
+.bpmn-icon-bpmn-io:before { content: '\e831'; } /* '' */
+.bpmn-icon-gateway-complex:before { content: '\e832'; } /* '' */
+.bpmn-icon-gateway-eventbased:before { content: '\e833'; } /* '' */
+.bpmn-icon-gateway-none:before { content: '\e834'; } /* '' */
+.bpmn-icon-gateway-or:before { content: '\e835'; } /* '' */
+.bpmn-icon-end-event-terminate:before { content: '\e836'; } /* '' */
+.bpmn-icon-end-event-signal:before { content: '\e837'; } /* '' */
+.bpmn-icon-end-event-none:before { content: '\e838'; } /* '' */
+.bpmn-icon-end-event-multiple:before { content: '\e839'; } /* '' */
+.bpmn-icon-end-event-message:before { content: '\e83a'; } /* '' */
+.bpmn-icon-end-event-link:before { content: '\e83b'; } /* '' */
+.bpmn-icon-intermediate-event-catch-message:before { content: '\e83c'; } /* '' */
+.bpmn-icon-intermediate-event-throw-compensation:before { content: '\e83d'; } /* '' */
+.bpmn-icon-start-event-multiple:before { content: '\e83e'; } /* '' */
+.bpmn-icon-script:before { content: '\e83f'; } /* '' */
+.bpmn-icon-manual-task:before { content: '\e840'; } /* '' */
+.bpmn-icon-send:before { content: '\e841'; } /* '' */
+.bpmn-icon-service:before { content: '\e842'; } /* '' */
+.bpmn-icon-receive-task:before { content: '\e843'; } /* '' */
+.bpmn-icon-user:before { content: '\e844'; } /* '' */
+.bpmn-icon-start-event-none:before { content: '\e845'; } /* '' */
+.bpmn-icon-intermediate-event-throw-escalation:before { content: '\e846'; } /* '' */
+.bpmn-icon-intermediate-event-catch-multiple:before { content: '\e847'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-escalation:before { content: '\e848'; } /* '' */
+.bpmn-icon-intermediate-event-throw-link:before { content: '\e849'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-condition:before { content: '\e84a'; } /* '' */
+.bpmn-icon-data-object:before { content: '\e84b'; } /* '' */
+.bpmn-icon-script-task:before { content: '\e84c'; } /* '' */
+.bpmn-icon-send-task:before { content: '\e84d'; } /* '' */
+.bpmn-icon-data-store:before { content: '\e84e'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-escalation:before { content: '\e84f'; } /* '' */
+.bpmn-icon-intermediate-event-throw-message:before { content: '\e850'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-multiple:before { content: '\e851'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-signal:before { content: '\e852'; } /* '' */
+.bpmn-icon-intermediate-event-throw-multiple:before { content: '\e853'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-message:before { content: '\e854'; } /* '' */
+.bpmn-icon-ad-hoc-marker:before { content: '\e855'; } /* '' */
+.bpmn-icon-service-task:before { content: '\e856'; } /* '' */
+.bpmn-icon-task-none:before { content: '\e857'; } /* '' */
+.bpmn-icon-compensation-marker:before { content: '\e858'; } /* '' */
+.bpmn-icon-start-event-non-interrupting-multiple:before { content: '\e859'; } /* '' */
+.bpmn-icon-intermediate-event-throw-signal:before { content: '\e85a'; } /* '' */
+.bpmn-icon-intermediate-event-catch-non-interrupting-condition:before { content: '\e85b'; } /* '' */
+.bpmn-icon-participant:before { content: '\e85c'; } /* '' */
+.bpmn-icon-event-subprocess-expanded:before { content: '\e85d'; } /* '' */
+.bpmn-icon-lane-insert-below:before { content: '\e85e'; } /* '' */
+.bpmn-icon-space-tool:before { content: '\e85f'; } /* '' */
+.bpmn-icon-connection-multi:before { content: '\e860'; } /* '' */
+.bpmn-icon-lane:before { content: '\e861'; } /* '' */
+.bpmn-icon-lasso-tool:before { content: '\e862'; } /* '' */
+.bpmn-icon-lane-insert-above:before { content: '\e863'; } /* '' */
+.bpmn-icon-lane-divide-three:before { content: '\e864'; } /* '' */
+.bpmn-icon-lane-divide-two:before { content: '\e865'; } /* '' */
+.bpmn-icon-data-input:before { content: '\e866'; } /* '' */
+.bpmn-icon-data-output:before { content: '\e867'; } /* '' */
+.bpmn-icon-hand-tool:before { content: '\e868'; } /* '' */
+.bpmn-icon-group:before { content: '\e869'; } /* '' */
+.bpmn-icon-transaction:before { content: '\e8c4'; } /* '' */

ebpm-process-modeler/public/js/bpmn-js/dist/assets/diagram-js.css

@@ -0,0 +1,713 @@
+/**
+ * outline styles
+ */
+
+.djs-outline {
+  fill: none;
+  visibility: hidden;
+}
+
+.djs-element.hover .djs-outline,
+.djs-element.selected .djs-outline {
+  visibility: visible;
+  shape-rendering: crispEdges;
+  stroke-dasharray: 3,3;
+}
+
+.djs-element.selected .djs-outline {
+  stroke: #8888FF;
+  stroke-width: 1px;
+}
+
+.djs-element.hover .djs-outline {
+  stroke: #FF8888;
+  stroke-width: 1px;
+}
+
+.djs-shape.connect-ok .djs-visual > :nth-child(1) {
+  fill: #DCFECC /* light-green */ !important;
+}
+
+.djs-shape.connect-not-ok .djs-visual > :nth-child(1),
+.djs-shape.drop-not-ok .djs-visual > :nth-child(1) {
+  fill: #f9dee5 /* light-red */ !important;
+}
+
+.djs-shape.new-parent .djs-visual > :nth-child(1) {
+  fill: #F7F9FF !important;
+}
+
+svg.drop-not-ok {
+  background: #f9dee5 /* light-red */ !important;
+}
+
+svg.new-parent {
+  background: #F7F9FF /* light-blue */ !important;
+}
+
+.djs-connection.connect-ok .djs-visual > :nth-child(1),
+.djs-connection.drop-ok .djs-visual > :nth-child(1) {
+  stroke: #90DD5F /* light-green */ !important;
+}
+
+.djs-connection.connect-not-ok .djs-visual > :nth-child(1),
+.djs-connection.drop-not-ok .djs-visual > :nth-child(1) {
+  stroke: #E56283 /* light-red */ !important;
+}
+
+.drop-not-ok,
+.connect-not-ok {
+  cursor: not-allowed;
+}
+
+.djs-element.attach-ok .djs-visual > :nth-child(1) {
+  stroke-width: 5px !important;
+  stroke: rgba(255, 116, 0, 0.7) !important;
+}
+
+.djs-frame.connect-not-ok .djs-visual > :nth-child(1),
+.djs-frame.drop-not-ok .djs-visual > :nth-child(1) {
+  stroke-width: 3px !important;
+  stroke: #E56283 /* light-red */ !important;
+  fill: none !important;
+}
+
+/**
+* Selection box style
+*
+*/
+.djs-lasso-overlay {
+  fill: rgb(255, 116, 0);
+  fill-opacity: 0.1;
+
+  stroke-dasharray: 5 1 3 1;
+  stroke: rgb(255, 116, 0);
+
+  shape-rendering: crispEdges;
+  pointer-events: none;
+}
+
+/**
+ * Resize styles
+ */
+.djs-resize-overlay {
+  fill: none;
+
+  stroke-dasharray: 5 1 3 1;
+  stroke: rgb(255, 116, 0);
+
+  pointer-events: none;
+}
+
+.djs-resizer-hit {
+  fill: none;
+  pointer-events: all;
+}
+
+.djs-resizer-visual {
+  fill: white;
+  stroke-width: 1px;
+  stroke: black;
+  shape-rendering: crispEdges;
+  stroke-opacity: 0.2;
+}
+
+.djs-cursor-resize-nwse,
+.djs-resizer-nw,
+.djs-resizer-se {
+  cursor: nwse-resize;
+}
+
+.djs-cursor-resize-nesw,
+.djs-resizer-ne,
+.djs-resizer-sw {
+  cursor: nesw-resize;
+}
+
+.djs-shape.djs-resizing > .djs-outline {
+  visibility: hidden !important;
+}
+
+.djs-shape.djs-resizing > .djs-resizer {
+  visibility: hidden;
+}
+
+.djs-dragger > .djs-resizer {
+  visibility: hidden;
+}
+
+/**
+ * drag styles
+ */
+.djs-dragger * {
+  fill: none !important;
+  stroke: rgb(255, 116, 0) !important;
+}
+
+.djs-dragger tspan,
+.djs-dragger text {
+  fill: rgb(255, 116, 0) !important;
+  stroke: none !important;
+}
+
+marker.djs-dragger circle,
+marker.djs-dragger path,
+marker.djs-dragger polygon,
+marker.djs-dragger polyline,
+marker.djs-dragger rect {
+  fill: rgb(255, 116, 0) !important;
+  stroke: none !important;
+}
+
+marker.djs-dragger text,
+marker.djs-dragger tspan {
+  fill: none !important;
+  stroke: rgb(255, 116, 0) !important;
+}
+
+.djs-dragging {
+  opacity: 0.3;
+}
+
+.djs-dragging,
+.djs-dragging > * {
+  pointer-events: none !important;
+}
+
+.djs-dragging .djs-context-pad,
+.djs-dragging .djs-outline {
+  display: none !important;
+}
+
+/**
+ * no pointer events for visual
+ */
+.djs-visual,
+.djs-outline {
+  pointer-events: none;
+}
+
+.djs-element.attach-ok .djs-hit {
+  stroke-width: 60px !important;
+}
+
+/**
+ * all pointer events for hit shape
+ */
+.djs-shape .djs-hit {
+  pointer-events: all;
+}
+
+.djs-connection .djs-hit {
+  pointer-events: stroke;
+}
+
+.djs-frame .djs-hit {
+  pointer-events: stroke;
+}
+
+/**
+ * shape / connection basic styles
+ */
+.djs-connection .djs-visual {
+  stroke-width: 2px;
+  fill: none;
+}
+
+.djs-cursor-grab {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+}
+
+.djs-cursor-grabbing {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+
+.djs-cursor-crosshair {
+  cursor: crosshair;
+}
+
+.djs-cursor-move {
+  cursor: move;
+}
+
+.djs-cursor-resize-ns {
+  cursor: ns-resize;
+}
+
+.djs-cursor-resize-ew {
+  cursor: ew-resize;
+}
+
+
+/**
+ * snapping
+ */
+.djs-snap-line {
+  stroke: rgb(255, 195, 66);
+  stroke: rgba(255, 195, 66, 0.50);
+  stroke-linecap: round;
+  stroke-width: 2px;
+  pointer-events: none;
+}
+
+/**
+ * snapping
+ */
+.djs-crosshair {
+  stroke: #555;
+  stroke-linecap: round;
+  stroke-width: 1px;
+  pointer-events: none;
+  shape-rendering: crispEdges;
+  stroke-dasharray: 5, 5;
+}
+
+/**
+ * palette
+ */
+
+.djs-palette {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+
+  box-sizing: border-box;
+  width: 48px;
+}
+
+.djs-palette .separator {
+  margin: 0 5px;
+  padding-top: 5px;
+
+  border: none;
+  border-bottom: solid 1px #DDD;
+
+  clear: both;
+}
+
+.djs-palette .entry:before {
+  vertical-align: text-bottom;
+}
+
+.djs-palette .djs-palette-toggle {
+  cursor: pointer;
+}
+
+.djs-palette .entry,
+.djs-palette .djs-palette-toggle {
+  color: #333;
+  font-size: 30px;
+
+  text-align: center;
+}
+
+.djs-palette .entry {
+  float: left;
+}
+
+.djs-palette .entry img {
+  max-width: 100%;
+}
+
+.djs-palette .djs-palette-entries:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.djs-palette .djs-palette-toggle:hover {
+  background: #666;
+}
+
+.djs-palette .entry:hover {
+  color: rgb(255, 116, 0);
+}
+
+.djs-palette .highlighted-entry {
+  color: rgb(255, 116, 0) !important;
+}
+
+.djs-palette .entry,
+.djs-palette .djs-palette-toggle {
+  width: 46px;
+  height: 46px;
+  line-height: 46px;
+  cursor: default;
+}
+
+/**
+ * Palette open / two-column layout is controlled via
+ * classes on the palette. Events to hook into palette
+ * changed life-cycle are available in addition.
+ */
+.djs-palette.two-column.open {
+  width: 94px;
+}
+
+.djs-palette:not(.open) .djs-palette-entries {
+  display: none;
+}
+
+.djs-palette:not(.open) {
+  overflow: hidden;
+}
+
+.djs-palette.open .djs-palette-toggle {
+  display: none;
+}
+
+/**
+ * context-pad
+ */
+.djs-overlay-context-pad {
+  width: 72px;
+}
+
+.djs-context-pad {
+  position: absolute;
+  display: none;
+  pointer-events: none;
+}
+
+.djs-context-pad .entry {
+  width: 22px;
+  height: 22px;
+  text-align: center;
+  display: inline-block;
+  font-size: 22px;
+  margin: 0 2px 2px 0;
+
+  border-radius: 3px;
+
+  cursor: default;
+
+  background-color: #FEFEFE;
+  box-shadow: 0 0 2px 1px #FEFEFE;
+  pointer-events: all;
+}
+
+.djs-context-pad .entry:before {
+  vertical-align: top;
+}
+
+.djs-context-pad .entry:hover {
+  background: rgb(255, 252, 176);
+}
+
+.djs-context-pad.open {
+  display: block;
+}
+
+/**
+ * popup styles
+ */
+.djs-popup .entry {
+  line-height: 20px;
+  white-space: nowrap;
+  cursor: default;
+}
+
+/* larger font for prefixed icons */
+.djs-popup .entry:before {
+  vertical-align: middle;
+  font-size: 20px;
+}
+
+.djs-popup .entry > span {
+  vertical-align: middle;
+  font-size: 14px;
+}
+
+.djs-popup .entry:hover,
+.djs-popup .entry.active:hover {
+  background: rgb(255, 252, 176);
+}
+
+.djs-popup .entry.disabled {
+  background: inherit;
+}
+
+.djs-popup .djs-popup-header .entry {
+  display: inline-block;
+  padding: 2px 3px 2px 3px;
+
+  border: solid 1px transparent;
+  border-radius: 3px;
+}
+
+.djs-popup .djs-popup-header .entry.active {
+  color: rgb(255, 116, 0);
+  border: solid 1px rgb(255, 116, 0);
+  background-color: #F6F6F6;
+}
+
+.djs-popup-body .entry {
+  padding: 4px 10px 4px 5px;
+}
+
+.djs-popup-body .entry > span {
+  margin-left: 5px;
+}
+
+.djs-popup-body {
+  background-color: #FEFEFE;
+}
+
+.djs-popup-header {
+  border-bottom: 1px solid #DDD;
+}
+
+.djs-popup-header .entry {
+  margin: 1px;
+  margin-left: 3px;
+}
+
+.djs-popup-header .entry:last-child {
+  margin-right: 3px;
+}
+
+/**
+ * popup / palette styles
+ */
+.djs-popup, .djs-palette {
+  background: #FAFAFA;
+  border: solid 1px #CCC;
+  border-radius: 2px;
+}
+
+/**
+ * touch
+ */
+
+.djs-shape,
+.djs-connection {
+  touch-action: none;
+}
+
+.djs-segment-dragger,
+.djs-bendpoint {
+  display: none;
+}
+
+/**
+ * bendpoints
+ */
+.djs-segment-dragger .djs-visual {
+  fill: rgba(255, 255, 121, 0.2);
+  stroke-width: 1px;
+  stroke-opacity: 1;
+  stroke: rgba(255, 255, 121, 0.3);
+}
+
+.djs-bendpoint .djs-visual {
+  fill: rgba(255, 255, 121, 0.8);
+  stroke-width: 1px;
+  stroke-opacity: 0.5;
+  stroke: black;
+}
+
+.djs-segment-dragger:hover,
+.djs-bendpoints.hover .djs-segment-dragger,
+.djs-bendpoints.selected .djs-segment-dragger,
+.djs-bendpoint:hover,
+.djs-bendpoints.hover .djs-bendpoint,
+.djs-bendpoints.selected .djs-bendpoint {
+  display: block;
+}
+
+.djs-drag-active .djs-bendpoints * {
+  display: none;
+}
+
+.djs-bendpoints:not(.hover) .floating {
+  display: none;
+}
+
+.djs-segment-dragger:hover .djs-visual,
+.djs-segment-dragger.djs-dragging .djs-visual,
+.djs-bendpoint:hover .djs-visual,
+.djs-bendpoint.floating .djs-visual {
+  fill: yellow;
+  stroke-opacity: 0.5;
+  stroke: black;
+}
+
+.djs-bendpoint.floating .djs-hit {
+  pointer-events: none;
+}
+
+.djs-segment-dragger .djs-hit,
+.djs-bendpoint .djs-hit {
+  pointer-events: all;
+  fill: none;
+}
+
+.djs-segment-dragger.horizontal .djs-hit {
+  cursor: ns-resize;
+}
+
+.djs-segment-dragger.vertical .djs-hit {
+  cursor: ew-resize;
+}
+
+.djs-segment-dragger.djs-dragging .djs-hit {
+  pointer-events: none;
+}
+
+.djs-updating,
+.djs-updating > * {
+  pointer-events: none !important;
+}
+
+.djs-updating .djs-context-pad,
+.djs-updating .djs-outline,
+.djs-updating .djs-bendpoint,
+.connect-ok .djs-bendpoint,
+.connect-not-ok .djs-bendpoint,
+.drop-ok .djs-bendpoint,
+.drop-not-ok .djs-bendpoint {
+  display: none !important;
+}
+
+.djs-segment-dragger.djs-dragging,
+.djs-bendpoint.djs-dragging {
+  display: block;
+  opacity: 1.0;
+}
+
+.djs-segment-dragger.djs-dragging .djs-visual,
+.djs-bendpoint.djs-dragging .djs-visual {
+  fill: yellow;
+  stroke-opacity: 0.5;
+}
+
+
+/**
+ * tooltips
+ */
+.djs-tooltip-error {
+  font-size: 11px;
+  line-height: 18px;
+  text-align: left;
+
+  padding: 5px;
+
+  opacity: 0.7;
+}
+
+.djs-tooltip-error > * {
+  width: 160px;
+
+  background: rgb(252, 236, 240);
+  color: rgb(158, 76, 76);
+  padding: 3px 7px;
+  border-radius: 5px;
+  border-left: solid 5px rgb(174, 73, 73);
+}
+
+.djs-tooltip-error:hover {
+  opacity: 1;
+}
+
+
+/**
+ * search pad
+ */
+.djs-search-container {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+
+  width: 25%;
+  min-width: 300px;
+  max-width: 400px;
+  z-index: 10;
+
+  font-size: 1.05em;
+  opacity: 0.9;
+  background: #FAFAFA;
+  border: solid 1px #CCC;
+  border-radius: 2px;
+}
+
+.djs-search-container:not(.open) {
+  display: none;
+}
+
+.djs-search-input input {
+  font-size: 1.05em;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+}
+
+.djs-search-input input:focus {
+  outline: none;
+  border-color: #52B415;
+}
+
+.djs-search-results {
+  position: relative;
+  overflow-y: auto;
+  max-height: 200px;
+}
+
+.djs-search-results:hover {
+  /*background: #fffdd7;*/
+  cursor: pointer;
+}
+
+.djs-search-result {
+  width: 100%;
+  padding: 6px 10px;
+  background: white;
+  border-bottom: solid 1px #AAA;
+  border-radius: 1px;
+}
+
+.djs-search-highlight {
+  color: black;
+}
+
+.djs-search-result-primary {
+  margin: 0 0 10px;
+}
+
+.djs-search-result-secondary {
+  font-family: monospace;
+  margin: 0;
+}
+
+.djs-search-result:hover {
+  background: #fdffd6;
+}
+
+.djs-search-result-selected {
+  background: #fffcb0;
+}
+
+.djs-search-result-selected:hover {
+  background: #f7f388;
+}
+
+.djs-search-overlay {
+  background: yellow;
+  opacity: 0.3;
+}
+
+/**
+ * hidden styles
+ */
+.djs-element-hidden,
+.djs-element-hidden .djs-hit,
+.djs-element-hidden .djs-outline,
+.djs-label-hidden .djs-label {
+  display: none !important;
+}

ebpm-process-modeler/public/js/bpmn-js/index.js

@@ -0,0 +1,3 @@
+export {
+  default
+} from './lib/Viewer';

ebpm-process-modeler/public/js/bpmn-js/lib/Modeler.js

@@ -0,0 +1,243 @@
+import inherits from 'inherits';
+
+import Ids from 'ids';
+
+import Viewer from './Viewer';
+
+import NavigatedViewer from './NavigatedViewer';
+
+import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
+import TouchModule from 'diagram-js/lib/navigation/touch';
+import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
+
+import AlignElementsModule from 'diagram-js/lib/features/align-elements';
+import AutoPlaceModule from './features/auto-place';
+import AutoResizeModule from './features/auto-resize';
+import AutoScrollModule from 'diagram-js/lib/features/auto-scroll';
+import BendpointsModule from 'diagram-js/lib/features/bendpoints';
+import ConnectModule from 'diagram-js/lib/features/connect';
+import ConnectionPreviewModule from 'diagram-js/lib/features/connection-preview';
+import ContextPadModule from './features/context-pad';
+import CopyPasteModule from './features/copy-paste';
+import CreateModule from 'diagram-js/lib/features/create';
+import DistributeElementsModule from './features/distribute-elements';
+import EditorActionsModule from './features/editor-actions';
+import GridSnappingModule from './features/grid-snapping';
+import KeyboardModule from './features/keyboard';
+import KeyboardMoveSelectionModule from 'diagram-js/lib/features/keyboard-move-selection';
+import LabelEditingModule from './features/label-editing';
+import ModelingModule from './features/modeling';
+import MoveModule from 'diagram-js/lib/features/move';
+import PaletteModule from './features/palette';
+import ReplacePreviewModule from './features/replace-preview';
+import ResizeModule from 'diagram-js/lib/features/resize';
+import SnappingModule from './features/snapping';
+import SearchModule from './features/search';
+
+
+var initialDiagram =
+  '<?xml version="1.0" encoding="UTF-8"?>' +
+  '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
+                    'xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" ' +
+                    'xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" ' +
+                    'xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" ' +
+                    'targetNamespace="http://bpmn.io/schema/bpmn" ' +
+                    'id="Definitions_1">' +
+    '<bpmn:process id="Process_1" isExecutable="false">' +
+      '<bpmn:startEvent id="StartEvent_1"/>' +
+    '</bpmn:process>' +
+    '<bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
+      '<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
+        '<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
+          '<dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>' +
+        '</bpmndi:BPMNShape>' +
+      '</bpmndi:BPMNPlane>' +
+    '</bpmndi:BPMNDiagram>' +
+  '</bpmn:definitions>';
+
+
+/**
+ * A modeler for BPMN 2.0 diagrams.
+ *
+ *
+ * ## Extending the Modeler
+ *
+ * In order to extend the viewer pass extension modules to bootstrap via the
+ * `additionalModules` option. An extension module is an object that exposes
+ * named services.
+ *
+ * The following example depicts the integration of a simple
+ * logging component that integrates with interaction events:
+ *
+ *
+ * ```javascript
+ *
+ * // logging component
+ * function InteractionLogger(eventBus) {
+ *   eventBus.on('element.hover', function(event) {
+ *     console.log()
+ *   })
+ * }
+ *
+ * InteractionLogger.$inject = [ 'eventBus' ]; // minification save
+ *
+ * // extension module
+ * var extensionModule = {
+ *   __init__: [ 'interactionLogger' ],
+ *   interactionLogger: [ 'type', InteractionLogger ]
+ * };
+ *
+ * // extend the viewer
+ * var bpmnModeler = new Modeler({ additionalModules: [ extensionModule ] });
+ * bpmnModeler.importXML(...);
+ * ```
+ *
+ *
+ * ## Customizing / Replacing Components
+ *
+ * You can replace individual diagram components by redefining them in override modules.
+ * This works for all components, including those defined in the core.
+ *
+ * Pass in override modules via the `options.additionalModules` flag like this:
+ *
+ * ```javascript
+ * function CustomContextPadProvider(contextPad) {
+ *
+ *   contextPad.registerProvider(this);
+ *
+ *   this.getContextPadEntries = function(element) {
+ *     // no entries, effectively disable the context pad
+ *     return {};
+ *   };
+ * }
+ *
+ * CustomContextPadProvider.$inject = [ 'contextPad' ];
+ *
+ * var overrideModule = {
+ *   contextPadProvider: [ 'type', CustomContextPadProvider ]
+ * };
+ *
+ * var bpmnModeler = new Modeler({ additionalModules: [ overrideModule ]});
+ * ```
+ *
+ * @param {Object} [options] configuration options to pass to the viewer
+ * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
+ * @param {String|Number} [options.width] the width of the viewer
+ * @param {String|Number} [options.height] the height of the viewer
+ * @param {Object} [options.moddleExtensions] extension packages to provide
+ * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
+ * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+ */
+export default function Modeler(options) {
+  Viewer.call(this, options);
+
+  // hook ID collection into the modeler
+  this.on('import.parse.complete', function(event) {
+    if (!event.error) {
+      this._collectIds(event.definitions, event.context);
+    }
+  }, this);
+
+  this.on('diagram.destroy', function() {
+    this.get('moddle').ids.clear();
+  }, this);
+}
+
+inherits(Modeler, Viewer);
+
+Modeler.Viewer = Viewer;
+Modeler.NavigatedViewer = NavigatedViewer;
+
+/**
+ * Create a new diagram to start modeling.
+ *
+ * @param {Function} [done]
+ */
+Modeler.prototype.createDiagram = function(done) {
+  return this.importXML(initialDiagram, done);
+};
+
+/**
+ * Create a moddle instance, attaching ids to it.
+ *
+ * @param {Object} options
+ */
+Modeler.prototype._createModdle = function(options) {
+  var moddle = Viewer.prototype._createModdle.call(this, options);
+
+  // attach ids to moddle to be able to track
+  // and validated ids in the BPMN 2.0 XML document
+  // tree
+  moddle.ids = new Ids([ 32, 36, 1 ]);
+
+  return moddle;
+};
+
+/**
+ * Collect ids processed during parsing of the
+ * definitions object.
+ *
+ * @param {ModdleElement} definitions
+ * @param {Context} context
+ */
+Modeler.prototype._collectIds = function(definitions, context) {
+
+  var moddle = definitions.$model,
+      ids = moddle.ids,
+      id;
+
+  // remove references from previous import
+  ids.clear();
+
+  for (id in context.elementsById) {
+    ids.claim(id, context.elementsById[id]);
+  }
+};
+
+Modeler.prototype._interactionModules = [
+  // non-modeling components
+  KeyboardMoveModule,
+  MoveCanvasModule,
+  TouchModule,
+  ZoomScrollModule
+];
+
+Modeler.prototype._modelingModules = [
+  // modeling components
+  AlignElementsModule,
+  AutoPlaceModule,
+  AutoScrollModule,
+  AutoResizeModule,
+  BendpointsModule,
+  ConnectModule,
+  ConnectionPreviewModule,
+  ContextPadModule,
+  CopyPasteModule,
+  CreateModule,
+  DistributeElementsModule,
+  EditorActionsModule,
+  GridSnappingModule,
+  KeyboardModule,
+  KeyboardMoveSelectionModule,
+  LabelEditingModule,
+  ModelingModule,
+  MoveModule,
+  PaletteModule,
+  ReplacePreviewModule,
+  ResizeModule,
+  SnappingModule,
+  SearchModule
+];
+
+
+// modules the modeler is composed of
+//
+// - viewer modules
+// - interaction modules
+// - modeling modules
+
+Modeler.prototype._modules = [].concat(
+  Modeler.prototype._modules,
+  Modeler.prototype._interactionModules,
+  Modeler.prototype._modelingModules);

ebpm-process-modeler/public/js/bpmn-js/lib/NavigatedViewer.js

@@ -0,0 +1,28 @@
+import inherits from 'inherits';
+
+import Viewer from './Viewer';
+
+import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
+import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
+
+/**
+ * A viewer that includes mouse navigation facilities
+ *
+ * @param {Object} options
+ */
+export default function NavigatedViewer(options) {
+  Viewer.call(this, options);
+}
+
+inherits(NavigatedViewer, Viewer);
+
+NavigatedViewer.prototype._navigationModules = [
+  KeyboardMoveModule,
+  MoveCanvasModule,
+  ZoomScrollModule
+];
+
+NavigatedViewer.prototype._modules = [].concat(
+  NavigatedViewer.prototype._modules,
+  NavigatedViewer.prototype._navigationModules);

ebpm-process-modeler/public/js/bpmn-js/lib/Viewer.js

@@ -0,0 +1,685 @@
+/**
+ * The code in the <project-logo></project-logo> area
+ * must not be changed.
+ *
+ * @see http://bpmn.io/license for more information.
+ */
+import {
+  assign,
+  find,
+  isFunction,
+  isNumber,
+  omit
+} from 'min-dash';
+
+import {
+  domify,
+  query as domQuery,
+  remove as domRemove
+} from 'min-dom';
+
+import {
+  innerSVG
+} from 'tiny-svg';
+
+import Diagram from 'diagram-js';
+import BpmnModdle from 'bpmn-moddle';
+
+import inherits from 'inherits';
+
+import {
+  importBpmnDiagram
+} from './import/Importer';
+
+import CoreModule from './core';
+import TranslateModule from 'diagram-js/lib/i18n/translate';
+import SelectionModule from 'diagram-js/lib/features/selection';
+import OverlaysModule from 'diagram-js/lib/features/overlays';
+
+
+function checkValidationError(err) {
+
+  // check if we can help the user by indicating wrong BPMN 2.0 xml
+  // (in case he or the exporting tool did not get that right)
+
+  var pattern = /unparsable content <([^>]+)> detected([\s\S]*)$/;
+  var match = pattern.exec(err.message);
+
+  if (match) {
+    err.message =
+      'unparsable content <' + match[1] + '> detected; ' +
+      'this may indicate an invalid BPMN 2.0 diagram file' + match[2];
+  }
+
+  return err;
+}
+
+var DEFAULT_OPTIONS = {
+  width: '100%',
+  height: '100%',
+  position: 'relative'
+};
+
+
+/**
+ * Ensure the passed argument is a proper unit (defaulting to px)
+ */
+function ensureUnit(val) {
+  return val + (isNumber(val) ? 'px' : '');
+}
+
+
+/**
+ * Find BPMNDiagram in definitions by ID
+ *
+ * @param {ModdleElement<Definitions>} definitions
+ * @param {String} diagramId
+ *
+ * @return {ModdleElement<BPMNDiagram>|null}
+ */
+function findBPMNDiagram(definitions, diagramId) {
+  if (!diagramId) {
+    return null;
+  }
+
+  return find(definitions.diagrams, function(element) {
+    return element.id === diagramId;
+  }) || null;
+}
+
+/**
+ * A viewer for BPMN 2.0 diagrams.
+ *
+ * Have a look at {@link NavigatedViewer} or {@link Modeler} for bundles that include
+ * additional features.
+ *
+ *
+ * ## Extending the Viewer
+ *
+ * In order to extend the viewer pass extension modules to bootstrap via the
+ * `additionalModules` option. An extension module is an object that exposes
+ * named services.
+ *
+ * The following example depicts the integration of a simple
+ * logging component that integrates with interaction events:
+ *
+ *
+ * ```javascript
+ *
+ * // logging component
+ * function InteractionLogger(eventBus) {
+ *   eventBus.on('element.hover', function(event) {
+ *     console.log()
+ *   })
+ * }
+ *
+ * InteractionLogger.$inject = [ 'eventBus' ]; // minification save
+ *
+ * // extension module
+ * var extensionModule = {
+ *   __init__: [ 'interactionLogger' ],
+ *   interactionLogger: [ 'type', InteractionLogger ]
+ * };
+ *
+ * // extend the viewer
+ * var bpmnViewer = new Viewer({ additionalModules: [ extensionModule ] });
+ * bpmnViewer.importXML(...);
+ * ```
+ *
+ * @param {Object} [options] configuration options to pass to the viewer
+ * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
+ * @param {String|Number} [options.width] the width of the viewer
+ * @param {String|Number} [options.height] the height of the viewer
+ * @param {Object} [options.moddleExtensions] extension packages to provide
+ * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
+ * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+ */
+export default function Viewer(options) {
+
+  options = assign({}, DEFAULT_OPTIONS, options);
+
+  this._moddle = this._createModdle(options);
+
+  this._container = this._createContainer(options);
+
+  /* <project-logo> */
+
+  addProjectLogo(this._container);
+
+  /* </project-logo> */
+
+  this._init(this._container, this._moddle, options);
+}
+
+inherits(Viewer, Diagram);
+
+
+/**
+ * Parse and render a BPMN 2.0 diagram.
+ *
+ * Once finished the viewer reports back the result to the
+ * provided callback function with (err, warnings).
+ *
+ * ## Life-Cycle Events
+ *
+ * During import the viewer will fire life-cycle events:
+ *
+ *   * import.parse.start (about to read model from xml)
+ *   * import.parse.complete (model read; may have worked or not)
+ *   * import.render.start (graphical import start)
+ *   * import.render.complete (graphical import finished)
+ *   * import.done (everything done)
+ *
+ * You can use these events to hook into the life-cycle.
+ *
+ * @param {String} xml the BPMN 2.0 xml
+ * @param {ModdleElement<BPMNDiagram>|String} [bpmnDiagram] BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
+ * @param {Function} [done] invoked with (err, warnings=[])
+ */
+Viewer.prototype.importXML = function(xml, bpmnDiagram, done) {
+
+  if (isFunction(bpmnDiagram)) {
+    done = bpmnDiagram;
+    bpmnDiagram = null;
+  }
+
+  // done is optional
+  done = done || function() {};
+
+  var self = this;
+
+  // hook in pre-parse listeners +
+  // allow xml manipulation
+  xml = this._emit('import.parse.start', { xml: xml }) || xml;
+
+  this._moddle.fromXML(xml, 'bpmn:Definitions', function(err, definitions, context) {
+
+    // hook in post parse listeners +
+    // allow definitions manipulation
+    definitions = self._emit('import.parse.complete', {
+      error: err,
+      definitions: definitions,
+      context: context
+    }) || definitions;
+
+    var parseWarnings = context.warnings;
+
+    if (err) {
+      err = checkValidationError(err);
+
+      self._emit('import.done', { error: err, warnings: parseWarnings });
+
+      return done(err, parseWarnings);
+    }
+
+    self.importDefinitions(definitions, bpmnDiagram, function(err, importWarnings) {
+      var allWarnings = [].concat(parseWarnings, importWarnings || []);
+
+      self._emit('import.done', { error: err, warnings: allWarnings });
+
+      done(err, allWarnings);
+    });
+  });
+};
+
+/**
+ * Import parsed definitions and render a BPMN 2.0 diagram.
+ *
+ * Once finished the viewer reports back the result to the
+ * provided callback function with (err, warnings).
+ *
+ * ## Life-Cycle Events
+ *
+ * During import the viewer will fire life-cycle events:
+ *
+ *   * import.render.start (graphical import start)
+ *   * import.render.complete (graphical import finished)
+ *
+ * You can use these events to hook into the life-cycle.
+ *
+ * @param {ModdleElement<Definitions>} definitions parsed BPMN 2.0 definitions
+ * @param {ModdleElement<BPMNDiagram>|String} [bpmnDiagram] BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
+ * @param {Function} [done] invoked with (err, warnings=[])
+ */
+Viewer.prototype.importDefinitions = function(definitions, bpmnDiagram, done) {
+
+  if (isFunction(bpmnDiagram)) {
+    done = bpmnDiagram;
+    bpmnDiagram = null;
+  }
+
+  // done is optional
+  done = done || function() {};
+
+  this._setDefinitions(definitions);
+
+  return this.open(bpmnDiagram, done);
+};
+
+/**
+ * Open diagram of previously imported XML.
+ *
+ * Once finished the viewer reports back the result to the
+ * provided callback function with (err, warnings).
+ *
+ * ## Life-Cycle Events
+ *
+ * During switch the viewer will fire life-cycle events:
+ *
+ *   * import.render.start (graphical import start)
+ *   * import.render.complete (graphical import finished)
+ *
+ * You can use these events to hook into the life-cycle.
+ *
+ * @param {String|ModdleElement<BPMNDiagram>} [bpmnDiagramOrId] id or the diagram to open
+ * @param {Function} [done] invoked with (err, warnings=[])
+ */
+Viewer.prototype.open = function(bpmnDiagramOrId, done) {
+
+  if (isFunction(bpmnDiagramOrId)) {
+    done = bpmnDiagramOrId;
+    bpmnDiagramOrId = null;
+  }
+
+  var definitions = this._definitions;
+  var bpmnDiagram = bpmnDiagramOrId;
+
+  // done is optional
+  done = done || function() {};
+
+  if (!definitions) {
+    return done(new Error('no XML imported'));
+  }
+
+  if (typeof bpmnDiagramOrId === 'string') {
+    bpmnDiagram = findBPMNDiagram(definitions, bpmnDiagramOrId);
+
+    if (!bpmnDiagram) {
+      return done(new Error('BPMNDiagram <' + bpmnDiagramOrId + '> not found'));
+    }
+  }
+
+  // clear existing rendered diagram
+  // catch synchronous exceptions during #clear()
+  try {
+    this.clear();
+  } catch (error) {
+    return done(error);
+  }
+
+  // perform graphical import
+  return importBpmnDiagram(this, definitions, bpmnDiagram, done);
+};
+
+/**
+ * Export the currently displayed BPMN 2.0 diagram as
+ * a BPMN 2.0 XML document.
+ *
+ * ## Life-Cycle Events
+ *
+ * During XML saving the viewer will fire life-cycle events:
+ *
+ *   * saveXML.start (before serialization)
+ *   * saveXML.serialized (after xml generation)
+ *   * saveXML.done (everything done)
+ *
+ * You can use these events to hook into the life-cycle.
+ *
+ * @param {Object} [options] export options
+ * @param {Boolean} [options.format=false] output formated XML
+ * @param {Boolean} [options.preamble=true] output preamble
+ *
+ * @param {Function} done invoked with (err, xml)
+ */
+Viewer.prototype.saveXML = function(options, done) {
+
+  if (!done) {
+    done = options;
+    options = {};
+  }
+
+  var self = this;
+
+  var definitions = this._definitions;
+
+  if (!definitions) {
+    return done(new Error('no definitions loaded'));
+  }
+
+  // allow to fiddle around with definitions
+  definitions = this._emit('saveXML.start', {
+    definitions: definitions
+  }) || definitions;
+
+  this._moddle.toXML(definitions, options, function(err, xml) {
+
+    try {
+      xml = self._emit('saveXML.serialized', {
+        error: err,
+        xml: xml
+      }) || xml;
+
+      self._emit('saveXML.done', {
+        error: err,
+        xml: xml
+      });
+    } catch (e) {
+      console.error('error in saveXML life-cycle listener', e);
+    }
+
+    done(err, xml);
+  });
+};
+
+/**
+ * Export the currently displayed BPMN 2.0 diagram as
+ * an SVG image.
+ *
+ * ## Life-Cycle Events
+ *
+ * During SVG saving the viewer will fire life-cycle events:
+ *
+ *   * saveSVG.start (before serialization)
+ *   * saveSVG.done (everything done)
+ *
+ * You can use these events to hook into the life-cycle.
+ *
+ * @param {Object} [options]
+ * @param {Function} done invoked with (err, svgStr)
+ */
+Viewer.prototype.saveSVG = function(options, done) {
+
+  if (!done) {
+    done = options;
+    options = {};
+  }
+
+  this._emit('saveSVG.start');
+
+  var svg, err;
+
+  try {
+    var canvas = this.get('canvas');
+
+    var contentNode = canvas.getDefaultLayer(),
+        defsNode = domQuery('defs', canvas._svg);
+
+    var contents = innerSVG(contentNode),
+        defs = defsNode ? '<defs>' + innerSVG(defsNode) + '</defs>' : '';
+
+    var bbox = contentNode.getBBox();
+
+    svg =
+      '<?xml version="1.0" encoding="utf-8"?>\n' +
+      '<!-- created with bpmn-js / http://bpmn.io -->\n' +
+      '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
+      '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ' +
+           'width="' + bbox.width + '" height="' + bbox.height + '" ' +
+           'viewBox="' + bbox.x + ' ' + bbox.y + ' ' + bbox.width + ' ' + bbox.height + '" version="1.1">' +
+        defs + contents +
+      '</svg>';
+  } catch (e) {
+    err = e;
+  }
+
+  this._emit('saveSVG.done', {
+    error: err,
+    svg: svg
+  });
+
+  done(err, svg);
+};
+
+/**
+ * Get a named diagram service.
+ *
+ * @example
+ *
+ * var elementRegistry = viewer.get('elementRegistry');
+ * var startEventShape = elementRegistry.get('StartEvent_1');
+ *
+ * @param {String} name
+ *
+ * @return {Object} diagram service instance
+ *
+ * @method Viewer#get
+ */
+
+/**
+ * Invoke a function in the context of this viewer.
+ *
+ * @example
+ *
+ * viewer.invoke(function(elementRegistry) {
+ *   var startEventShape = elementRegistry.get('StartEvent_1');
+ * });
+ *
+ * @param {Function} fn to be invoked
+ *
+ * @return {Object} the functions return value
+ *
+ * @method Viewer#invoke
+ */
+
+
+Viewer.prototype._setDefinitions = function(definitions) {
+  this._definitions = definitions;
+};
+
+Viewer.prototype.getModules = function() {
+  return this._modules;
+};
+
+/**
+ * Remove all drawn elements from the viewer.
+ *
+ * After calling this method the viewer can still
+ * be reused for opening another diagram.
+ *
+ * @method Viewer#clear
+ */
+Viewer.prototype.clear = function() {
+
+  // remove businessObject#di binding
+  //
+  // this is necessary, as we establish the bindings
+  // in the BpmnTreeWalker (and assume none are given
+  // on reimport)
+  this.get('elementRegistry').forEach(function(element) {
+    var bo = element.businessObject;
+
+    if (bo && bo.di) {
+      delete bo.di;
+    }
+  });
+
+  // remove drawn elements
+  Diagram.prototype.clear.call(this);
+};
+
+/**
+ * Destroy the viewer instance and remove all its
+ * remainders from the document tree.
+ */
+Viewer.prototype.destroy = function() {
+
+  // diagram destroy
+  Diagram.prototype.destroy.call(this);
+
+  // dom detach
+  domRemove(this._container);
+};
+
+/**
+ * Register an event listener
+ *
+ * Remove a previously added listener via {@link #off(event, callback)}.
+ *
+ * @param {String} event
+ * @param {Number} [priority]
+ * @param {Function} callback
+ * @param {Object} [that]
+ */
+Viewer.prototype.on = function(event, priority, callback, target) {
+  return this.get('eventBus').on(event, priority, callback, target);
+};
+
+/**
+ * De-register an event listener
+ *
+ * @param {String} event
+ * @param {Function} callback
+ */
+Viewer.prototype.off = function(event, callback) {
+  this.get('eventBus').off(event, callback);
+};
+
+Viewer.prototype.attachTo = function(parentNode) {
+
+  if (!parentNode) {
+    throw new Error('parentNode required');
+  }
+
+  // ensure we detach from the
+  // previous, old parent
+  this.detach();
+
+  // unwrap jQuery if provided
+  if (parentNode.get && parentNode.constructor.prototype.jquery) {
+    parentNode = parentNode.get(0);
+  }
+
+  if (typeof parentNode === 'string') {
+    parentNode = domQuery(parentNode);
+  }
+
+  parentNode.appendChild(this._container);
+
+  this._emit('attach', {});
+
+  this.get('canvas').resized();
+};
+
+Viewer.prototype.getDefinitions = function() {
+  return this._definitions;
+};
+
+Viewer.prototype.detach = function() {
+
+  var container = this._container,
+      parentNode = container.parentNode;
+
+  if (!parentNode) {
+    return;
+  }
+
+  this._emit('detach', {});
+
+  parentNode.removeChild(container);
+};
+
+Viewer.prototype._init = function(container, moddle, options) {
+
+  var baseModules = options.modules || this.getModules(),
+      additionalModules = options.additionalModules || [],
+      staticModules = [
+        {
+          bpmnjs: [ 'value', this ],
+          moddle: [ 'value', moddle ]
+        }
+      ];
+
+  var diagramModules = [].concat(staticModules, baseModules, additionalModules);
+
+  var diagramOptions = assign(omit(options, [ 'additionalModules' ]), {
+    canvas: assign({}, options.canvas, { container: container }),
+    modules: diagramModules
+  });
+
+  // invoke diagram constructor
+  Diagram.call(this, diagramOptions);
+
+  if (options && options.container) {
+    this.attachTo(options.container);
+  }
+};
+
+/**
+ * Emit an event on the underlying {@link EventBus}
+ *
+ * @param  {String} type
+ * @param  {Object} event
+ *
+ * @return {Object} event processing result (if any)
+ */
+Viewer.prototype._emit = function(type, event) {
+  return this.get('eventBus').fire(type, event);
+};
+
+Viewer.prototype._createContainer = function(options) {
+
+  var container = domify('<div class="bjs-container"></div>');
+
+  assign(container.style, {
+    width: ensureUnit(options.width),
+    height: ensureUnit(options.height),
+    position: options.position
+  });
+
+  return container;
+};
+
+Viewer.prototype._createModdle = function(options) {
+  var moddleOptions = assign({}, this._moddleExtensions, options.moddleExtensions);
+
+  return new BpmnModdle(moddleOptions);
+};
+
+// modules the viewer is composed of
+Viewer.prototype._modules = [
+  CoreModule,
+  TranslateModule,
+  SelectionModule,
+  OverlaysModule
+];
+
+// default moddle extensions the viewer is composed of
+Viewer.prototype._moddleExtensions = {};
+
+/* <project-logo> */
+
+import {
+  open as openPoweredBy,
+  BPMNIO_IMG
+} from './util/PoweredByUtil';
+
+import {
+  event as domEvent
+} from 'min-dom';
+
+/**
+ * Adds the project logo to the diagram container as
+ * required by the bpmn.io license.
+ *
+ * @see http://bpmn.io/license
+ *
+ * @param {Element} container
+ */
+function addProjectLogo(container) {
+  var img = BPMNIO_IMG;
+
+  var linkMarkup =
+    '';
+
+  var linkElement = domify(linkMarkup);
+
+  container.appendChild(linkElement);
+
+  domEvent.bind(linkElement, 'click', function(event) {
+    openPoweredBy();
+
+    event.preventDefault();
+  });
+}
+
+/* </project-logo> */

ebpm-process-modeler/public/js/bpmn-js/lib/core/index.js

@@ -0,0 +1,9 @@
+import DrawModule from '../draw';
+import ImportModule from '../import';
+
+export default {
+  __depends__: [
+    DrawModule,
+    ImportModule
+  ]
+};

ebpm-process-modeler/public/js/bpmn-js/lib/draw/BpmnRenderUtil.js

@@ -0,0 +1,142 @@
+import {
+  every,
+  some
+} from 'min-dash';
+
+import {
+  componentsToPath
+} from 'diagram-js/lib/util/RenderUtil';
+
+
+// element utils //////////////////////
+
+/**
+ * Checks if eventDefinition of the given element matches with semantic type.
+ *
+ * @return {boolean} true if element is of the given semantic type
+ */
+export function isTypedEvent(event, eventDefinitionType, filter) {
+
+  function matches(definition, filter) {
+    return every(filter, function(val, key) {
+
+      // we want a == conversion here, to be able to catch
+      // undefined == false and friends
+      /* jshint -W116 */
+      return definition[key] == val;
+    });
+  }
+
+  return some(event.eventDefinitions, function(definition) {
+    return definition.$type === eventDefinitionType && matches(event, filter);
+  });
+}
+
+export function isThrowEvent(event) {
+  return (event.$type === 'bpmn:IntermediateThrowEvent') || (event.$type === 'bpmn:EndEvent');
+}
+
+export function isCollection(element) {
+  var dataObject = element.dataObjectRef;
+
+  return element.isCollection || (dataObject && dataObject.isCollection);
+}
+
+export function getDi(element) {
+  return element.businessObject.di;
+}
+
+export function getSemantic(element) {
+  return element.businessObject;
+}
+
+
+// color access //////////////////////
+
+export function getFillColor(element, defaultColor) {
+  return getDi(element).get('bioc:fill') || defaultColor || 'white';
+}
+
+export function getStrokeColor(element, defaultColor) {
+  return getDi(element).get('bioc:stroke') || defaultColor || 'black';
+}
+
+
+// cropping path customizations //////////////////////
+
+export function getCirclePath(shape) {
+
+  var cx = shape.x + shape.width / 2,
+      cy = shape.y + shape.height / 2,
+      radius = shape.width / 2;
+
+  var circlePath = [
+    ['M', cx, cy],
+    ['m', 0, -radius],
+    ['a', radius, radius, 0, 1, 1, 0, 2 * radius],
+    ['a', radius, radius, 0, 1, 1, 0, -2 * radius],
+    ['z']
+  ];
+
+  return componentsToPath(circlePath);
+}
+
+export function getRoundRectPath(shape, borderRadius) {
+
+  var x = shape.x,
+      y = shape.y,
+      width = shape.width,
+      height = shape.height;
+
+  var roundRectPath = [
+    ['M', x + borderRadius, y],
+    ['l', width - borderRadius * 2, 0],
+    ['a', borderRadius, borderRadius, 0, 0, 1, borderRadius, borderRadius],
+    ['l', 0, height - borderRadius * 2],
+    ['a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, borderRadius],
+    ['l', borderRadius * 2 - width, 0],
+    ['a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, -borderRadius],
+    ['l', 0, borderRadius * 2 - height],
+    ['a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -borderRadius],
+    ['z']
+  ];
+
+  return componentsToPath(roundRectPath);
+}
+
+export function getDiamondPath(shape) {
+
+  var width = shape.width,
+      height = shape.height,
+      x = shape.x,
+      y = shape.y,
+      halfWidth = width / 2,
+      halfHeight = height / 2;
+
+  var diamondPath = [
+    ['M', x + halfWidth, y],
+    ['l', halfWidth, halfHeight],
+    ['l', -halfWidth, halfHeight],
+    ['l', -halfWidth, -halfHeight],
+    ['z']
+  ];
+
+  return componentsToPath(diamondPath);
+}
+
+export function getRectPath(shape) {
+  var x = shape.x,
+      y = shape.y,
+      width = shape.width,
+      height = shape.height;
+
+  var rectPath = [
+    ['M', x, y],
+    ['l', width, 0],
+    ['l', 0, height],
+    ['l', -width, 0],
+    ['z']
+  ];
+
+  return componentsToPath(rectPath);
+}

ebpm-process-modeler/public/js/bpmn-js/lib/draw/PathMap.js

@@ -0,0 +1,474 @@
+/**
+ * Map containing SVG paths needed by BpmnRenderer.
+ */
+
+export default function PathMap() {
+
+  /**
+   * Contains a map of path elements
+   *
+   * <h1>Path definition</h1>
+   * A parameterized path is defined like this:
+   * <pre>
+   * 'GATEWAY_PARALLEL': {
+   *   d: 'm {mx},{my} {e.x0},0 0,{e.x1} {e.x1},0 0,{e.y0} -{e.x1},0 0,{e.y1} ' +
+          '-{e.x0},0 0,-{e.y1} -{e.x1},0 0,-{e.y0} {e.x1},0 z',
+   *   height: 17.5,
+   *   width:  17.5,
+   *   heightElements: [2.5, 7.5],
+   *   widthElements: [2.5, 7.5]
+   * }
+   * </pre>
+   * <p>It's important to specify a correct <b>height and width</b> for the path as the scaling
+   * is based on the ratio between the specified height and width in this object and the
+   * height and width that is set as scale target (Note x,y coordinates will be scaled with
+   * individual ratios).</p>
+   * <p>The '<b>heightElements</b>' and '<b>widthElements</b>' array must contain the values that will be scaled.
+   * The scaling is based on the computed ratios.
+   * Coordinates on the y axis should be in the <b>heightElement</b>'s array, they will be scaled using
+   * the computed ratio coefficient.
+   * In the parameterized path the scaled values can be accessed through the 'e' object in {} brackets.
+   *   <ul>
+   *    <li>The values for the y axis can be accessed in the path string using {e.y0}, {e.y1}, ....</li>
+   *    <li>The values for the x axis can be accessed in the path string using {e.x0}, {e.x1}, ....</li>
+   *   </ul>
+   *   The numbers x0, x1 respectively y0, y1, ... map to the corresponding array index.
+   * </p>
+   */
+  this.pathMap = {
+    'EVENT_MESSAGE': {
+      d: 'm {mx},{my} l 0,{e.y1} l {e.x1},0 l 0,-{e.y1} z l {e.x0},{e.y0} l {e.x0},-{e.y0}',
+      height: 36,
+      width:  36,
+      heightElements: [6, 14],
+      widthElements: [10.5, 21]
+    },
+    'EVENT_SIGNAL': {
+      d: 'M {mx},{my} l {e.x0},{e.y0} l -{e.x1},0 Z',
+      height: 36,
+      width: 36,
+      heightElements: [18],
+      widthElements: [10, 20]
+    },
+    'EVENT_ESCALATION': {
+      d: 'M {mx},{my} l {e.x0},{e.y0} l -{e.x0},-{e.y1} l -{e.x0},{e.y1} Z',
+      height: 36,
+      width: 36,
+      heightElements: [20, 7],
+      widthElements: [8]
+    },
+    'EVENT_CONDITIONAL': {
+      d: 'M {e.x0},{e.y0} l {e.x1},0 l 0,{e.y2} l -{e.x1},0 Z ' +
+         'M {e.x2},{e.y3} l {e.x0},0 ' +
+         'M {e.x2},{e.y4} l {e.x0},0 ' +
+         'M {e.x2},{e.y5} l {e.x0},0 ' +
+         'M {e.x2},{e.y6} l {e.x0},0 ' +
+         'M {e.x2},{e.y7} l {e.x0},0 ' +
+         'M {e.x2},{e.y8} l {e.x0},0 ',
+      height: 36,
+      width:  36,
+      heightElements: [8.5, 14.5, 18, 11.5, 14.5, 17.5, 20.5, 23.5, 26.5],
+      widthElements:  [10.5, 14.5, 12.5]
+    },
+    'EVENT_LINK': {
+      d: 'm {mx},{my} 0,{e.y0} -{e.x1},0 0,{e.y1} {e.x1},0 0,{e.y0} {e.x0},-{e.y2} -{e.x0},-{e.y2} z',
+      height: 36,
+      width: 36,
+      heightElements: [4.4375, 6.75, 7.8125],
+      widthElements: [9.84375, 13.5]
+    },
+    'EVENT_ERROR': {
+      d: 'm {mx},{my} {e.x0},-{e.y0} {e.x1},-{e.y1} {e.x2},{e.y2} {e.x3},-{e.y3} -{e.x4},{e.y4} -{e.x5},-{e.y5} z',
+      height: 36,
+      width: 36,
+      heightElements: [0.023, 8.737, 8.151, 16.564, 10.591, 8.714],
+      widthElements: [0.085, 6.672, 6.97, 4.273, 5.337, 6.636]
+    },
+    'EVENT_CANCEL_45': {
+      d: 'm {mx},{my} -{e.x1},0 0,{e.x0} {e.x1},0 0,{e.y1} {e.x0},0 ' +
+        '0,-{e.y1} {e.x1},0 0,-{e.y0} -{e.x1},0 0,-{e.y1} -{e.x0},0 z',
+      height: 36,
+      width: 36,
+      heightElements: [4.75, 8.5],
+      widthElements: [4.75, 8.5]
+    },
+    'EVENT_COMPENSATION': {
+      d: 'm {mx},{my} {e.x0},-{e.y0} 0,{e.y1} z m {e.x1},-{e.y2} {e.x2},-{e.y3} 0,{e.y1} -{e.x2},-{e.y3} z',
+      height: 36,
+      width: 36,
+      heightElements: [6.5, 13, 0.4, 6.1],
+      widthElements: [9, 9.3, 8.7]
+    },
+    'EVENT_TIMER_WH': {
+      d: 'M {mx},{my} l {e.x0},-{e.y0} m -{e.x0},{e.y0} l {e.x1},{e.y1} ',
+      height: 36,
+      width:  36,
+      heightElements: [10, 2],
+      widthElements: [3, 7]
+    },
+    'EVENT_TIMER_LINE': {
+      d:  'M {mx},{my} ' +
+          'm {e.x0},{e.y0} l -{e.x1},{e.y1} ',
+      height: 36,
+      width:  36,
+      heightElements: [10, 3],
+      widthElements: [0, 0]
+    },
+    'EVENT_MULTIPLE': {
+      d:'m {mx},{my} {e.x1},-{e.y0} {e.x1},{e.y0} -{e.x0},{e.y1} -{e.x2},0 z',
+      height: 36,
+      width:  36,
+      heightElements: [6.28099, 12.56199],
+      widthElements: [3.1405, 9.42149, 12.56198]
+    },
+    'EVENT_PARALLEL_MULTIPLE': {
+      d:'m {mx},{my} {e.x0},0 0,{e.y1} {e.x1},0 0,{e.y0} -{e.x1},0 0,{e.y1} ' +
+        '-{e.x0},0 0,-{e.y1} -{e.x1},0 0,-{e.y0} {e.x1},0 z',
+      height: 36,
+      width:  36,
+      heightElements: [2.56228, 7.68683],
+      widthElements: [2.56228, 7.68683]
+    },
+    'GATEWAY_EXCLUSIVE': {
+      d:'m {mx},{my} {e.x0},{e.y0} {e.x1},{e.y0} {e.x2},0 {e.x4},{e.y2} ' +
+                    '{e.x4},{e.y1} {e.x2},0 {e.x1},{e.y3} {e.x0},{e.y3} ' +
+                    '{e.x3},0 {e.x5},{e.y1} {e.x5},{e.y2} {e.x3},0 z',
+      height: 17.5,
+      width:  17.5,
+      heightElements: [8.5, 6.5312, -6.5312, -8.5],
+      widthElements:  [6.5, -6.5, 3, -3, 5, -5]
+    },
+    'GATEWAY_PARALLEL': {
+      d:'m {mx},{my} 0,{e.y1} -{e.x1},0 0,{e.y0} {e.x1},0 0,{e.y1} {e.x0},0 ' +
+        '0,-{e.y1} {e.x1},0 0,-{e.y0} -{e.x1},0 0,-{e.y1} -{e.x0},0 z',
+      height: 30,
+      width:  30,
+      heightElements: [5, 12.5],
+      widthElements: [5, 12.5]
+    },
+    'GATEWAY_EVENT_BASED': {
+      d:'m {mx},{my} {e.x0},{e.y0} {e.x0},{e.y1} {e.x1},{e.y2} {e.x2},0 z',
+      height: 11,
+      width:  11,
+      heightElements: [-6, 6, 12, -12],
+      widthElements: [9, -3, -12]
+    },
+    'GATEWAY_COMPLEX': {
+      d:'m {mx},{my} 0,{e.y0} -{e.x0},-{e.y1} -{e.x1},{e.y2} {e.x0},{e.y1} -{e.x2},0 0,{e.y3} ' +
+        '{e.x2},0  -{e.x0},{e.y1} l {e.x1},{e.y2} {e.x0},-{e.y1} 0,{e.y0} {e.x3},0 0,-{e.y0} {e.x0},{e.y1} ' +
+        '{e.x1},-{e.y2} -{e.x0},-{e.y1} {e.x2},0 0,-{e.y3} -{e.x2},0 {e.x0},-{e.y1} -{e.x1},-{e.y2} ' +
+        '-{e.x0},{e.y1} 0,-{e.y0} -{e.x3},0 z',
+      height: 17.125,
+      width:  17.125,
+      heightElements: [4.875, 3.4375, 2.125, 3],
+      widthElements: [3.4375, 2.125, 4.875, 3]
+    },
+    'DATA_OBJECT_PATH': {
+      d:'m 0,0 {e.x1},0 {e.x0},{e.y0} 0,{e.y1} -{e.x2},0 0,-{e.y2} {e.x1},0 0,{e.y0} {e.x0},0',
+      height: 61,
+      width:  51,
+      heightElements: [10, 50, 60],
+      widthElements: [10, 40, 50, 60]
+    },
+    'DATA_OBJECT_COLLECTION_PATH': {
+      d:'m {mx}, {my} ' +
+        'm  0 15  l 0 -15 ' +
+        'm  4 15  l 0 -15 ' +
+        'm  4 15  l 0 -15 ',
+      height: 61,
+      width:  51,
+      heightElements: [12],
+      widthElements: [1, 6, 12, 15]
+    },
+    'DATA_ARROW': {
+      d:'m 5,9 9,0 0,-3 5,5 -5,5 0,-3 -9,0 z',
+      height: 61,
+      width:  51,
+      heightElements: [],
+      widthElements: []
+    },
+    'DATA_STORE': {
+      d:'m  {mx},{my} ' +
+        'l  0,{e.y2} ' +
+        'c  {e.x0},{e.y1} {e.x1},{e.y1}  {e.x2},0 ' +
+        'l  0,-{e.y2} ' +
+        'c -{e.x0},-{e.y1} -{e.x1},-{e.y1} -{e.x2},0' +
+        'c  {e.x0},{e.y1} {e.x1},{e.y1}  {e.x2},0 ' +
+        'm  -{e.x2},{e.y0}' +
+        'c  {e.x0},{e.y1} {e.x1},{e.y1} {e.x2},0' +
+        'm  -{e.x2},{e.y0}' +
+        'c  {e.x0},{e.y1} {e.x1},{e.y1}  {e.x2},0',
+      height: 61,
+      width:  61,
+      heightElements: [7, 10, 45],
+      widthElements:  [2, 58, 60]
+    },
+    'TEXT_ANNOTATION': {
+      d: 'm {mx}, {my} m 10,0 l -10,0 l 0,{e.y0} l 10,0',
+      height: 30,
+      width: 10,
+      heightElements: [30],
+      widthElements: [10]
+    },
+    'MARKER_SUB_PROCESS': {
+      d: 'm{mx},{my} m 7,2 l 0,10 m -5,-5 l 10,0',
+      height: 10,
+      width: 10,
+      heightElements: [],
+      widthElements: []
+    },
+    'MARKER_PARALLEL': {
+      d: 'm{mx},{my} m 3,2 l 0,10 m 3,-10 l 0,10 m 3,-10 l 0,10',
+      height: 10,
+      width: 10,
+      heightElements: [],
+      widthElements: []
+    },
+    'MARKER_SEQUENTIAL': {
+      d: 'm{mx},{my} m 0,3 l 10,0 m -10,3 l 10,0 m -10,3 l 10,0',
+      height: 10,
+      width: 10,
+      heightElements: [],
+      widthElements: []
+    },
+    'MARKER_COMPENSATION': {
+      d: 'm {mx},{my} 7,-5 0,10 z m 7.1,-0.3 6.9,-4.7 0,10 -6.9,-4.7 z',
+      height: 10,
+      width: 21,
+      heightElements: [],
+      widthElements: []
+    },
+    'MARKER_LOOP': {
+      d: 'm {mx},{my} c 3.526979,0 6.386161,-2.829858 6.386161,-6.320661 0,-3.490806 -2.859182,-6.320661 ' +
+        '-6.386161,-6.320661 -3.526978,0 -6.38616,2.829855 -6.38616,6.320661 0,1.745402 ' +
+        '0.714797,3.325567 1.870463,4.469381 0.577834,0.571908 1.265885,1.034728 2.029916,1.35457 ' +
+        'l -0.718163,-3.909793 m 0.718163,3.909793 -3.885211,0.802902',
+      height: 13.9,
+      width: 13.7,
+      heightElements: [],
+      widthElements: []
+    },
+    'MARKER_ADHOC': {
+      d: 'm {mx},{my} m 0.84461,2.64411 c 1.05533,-1.23780996 2.64337,-2.07882 4.29653,-1.97997996 2.05163,0.0805 ' +
+        '3.85579,1.15803 5.76082,1.79107 1.06385,0.34139996 2.24454,0.1438 3.18759,-0.43767 0.61743,-0.33642 ' +
+        '1.2775,-0.64078 1.7542,-1.17511 0,0.56023 0,1.12046 0,1.6807 -0.98706,0.96237996 -2.29792,1.62393996 ' +
+        '-3.6918,1.66181996 -1.24459,0.0927 -2.46671,-0.2491 -3.59505,-0.74812 -1.35789,-0.55965 ' +
+        '-2.75133,-1.33436996 -4.27027,-1.18121996 -1.37741,0.14601 -2.41842,1.13685996 -3.44288,1.96782996 z',
+      height: 4,
+      width: 15,
+      heightElements: [],
+      widthElements: []
+    },
+    'TASK_TYPE_SEND': {
+      d: 'm {mx},{my} l 0,{e.y1} l {e.x1},0 l 0,-{e.y1} z l {e.x0},{e.y0} l {e.x0},-{e.y0}',
+      height: 14,
+      width:  21,
+      heightElements: [6, 14],
+      widthElements: [10.5, 21]
+    },
+    'TASK_TYPE_SCRIPT': {
+      d: 'm {mx},{my} c 9.966553,-6.27276 -8.000926,-7.91932 2.968968,-14.938 l -8.802728,0 ' +
+        'c -10.969894,7.01868 6.997585,8.66524 -2.968967,14.938 z ' +
+        'm -7,-12 l 5,0 ' +
+        'm -4.5,3 l 4.5,0 ' +
+        'm -3,3 l 5,0' +
+        'm -4,3 l 5,0',
+      height: 15,
+      width:  12.6,
+      heightElements: [6, 14],
+      widthElements: [10.5, 21]
+    },
+    'TASK_TYPE_USER_1': {
+      d: 'm {mx},{my} c 0.909,-0.845 1.594,-2.049 1.594,-3.385 0,-2.554 -1.805,-4.62199999 ' +
+        '-4.357,-4.62199999 -2.55199998,0 -4.28799998,2.06799999 -4.28799998,4.62199999 0,1.348 ' +
+        '0.974,2.562 1.89599998,3.405 -0.52899998,0.187 -5.669,2.097 -5.794,4.7560005 v 6.718 ' +
+        'h 17 v -6.718 c 0,-2.2980005 -5.5279996,-4.5950005 -6.0509996,-4.7760005 z' +
+        'm -8,6 l 0,5.5 m 11,0 l 0,-5'
+    },
+    'TASK_TYPE_USER_2': {
+      d: 'm {mx},{my} m 2.162,1.009 c 0,2.4470005 -2.158,4.4310005 -4.821,4.4310005 ' +
+        '-2.66499998,0 -4.822,-1.981 -4.822,-4.4310005 '
+    },
+    'TASK_TYPE_USER_3': {
+      d: 'm {mx},{my} m -6.9,-3.80 c 0,0 2.25099998,-2.358 4.27399998,-1.177 2.024,1.181 4.221,1.537 ' +
+        '4.124,0.965 -0.098,-0.57 -0.117,-3.79099999 -4.191,-4.13599999 -3.57499998,0.001 ' +
+        '-4.20799998,3.36699999 -4.20699998,4.34799999 z'
+    },
+    'TASK_TYPE_MANUAL': {
+      d: 'm {mx},{my} c 0.234,-0.01 5.604,0.008 8.029,0.004 0.808,0 1.271,-0.172 1.417,-0.752 0.227,-0.898 ' +
+        '-0.334,-1.314 -1.338,-1.316 -2.467,-0.01 -7.886,-0.004 -8.108,-0.004 -0.014,-0.079 0.016,-0.533 0,-0.61 ' +
+        '0.195,-0.042 8.507,0.006 9.616,0.002 0.877,-0.007 1.35,-0.438 1.353,-1.208 0.003,-0.768 -0.479,-1.09 ' +
+        '-1.35,-1.091 -2.968,-0.002 -9.619,-0.013 -9.619,-0.013 v -0.591 c 0,0 5.052,-0.016 7.225,-0.016 ' +
+        '0.888,-0.002 1.354,-0.416 1.351,-1.193 -0.006,-0.761 -0.492,-1.196 -1.361,-1.196 -3.473,-0.005 ' +
+        '-10.86,-0.003 -11.0829995,-0.003 -0.022,-0.047 -0.045,-0.094 -0.069,-0.139 0.3939995,-0.319 ' +
+        '2.0409995,-1.626 2.4149995,-2.017 0.469,-0.4870005 0.519,-1.1650005 0.162,-1.6040005 -0.414,-0.511 ' +
+        '-0.973,-0.5 -1.48,-0.236 -1.4609995,0.764 -6.5999995,3.6430005 -7.7329995,4.2710005 -0.9,0.499 ' +
+        '-1.516,1.253 -1.882,2.19 -0.37000002,0.95 -0.17,2.01 -0.166,2.979 0.004,0.718 -0.27300002,1.345 ' +
+        '-0.055,2.063 0.629,2.087 2.425,3.312 4.859,3.318 4.6179995,0.014 9.2379995,-0.139 13.8569995,-0.158 ' +
+        '0.755,-0.004 1.171,-0.301 1.182,-1.033 0.012,-0.754 -0.423,-0.969 -1.183,-0.973 -1.778,-0.01 ' +
+        '-5.824,-0.004 -6.04,-0.004 10e-4,-0.084 0.003,-0.586 10e-4,-0.67 z'
+    },
+    'TASK_TYPE_INSTANTIATING_SEND': {
+      d: 'm {mx},{my} l 0,8.4 l 12.6,0 l 0,-8.4 z l 6.3,3.6 l 6.3,-3.6'
+    },
+    'TASK_TYPE_SERVICE': {
+      d: 'm {mx},{my} v -1.71335 c 0.352326,-0.0705 0.703932,-0.17838 1.047628,-0.32133 ' +
+        '0.344416,-0.14465 0.665822,-0.32133 0.966377,-0.52145 l 1.19431,1.18005 1.567487,-1.57688 ' +
+        '-1.195028,-1.18014 c 0.403376,-0.61394 0.683079,-1.29908 0.825447,-2.01824 l 1.622133,-0.01 ' +
+        'v -2.2196 l -1.636514,0.01 c -0.07333,-0.35153 -0.178319,-0.70024 -0.323564,-1.04372 ' +
+        '-0.145244,-0.34406 -0.321407,-0.6644 -0.522735,-0.96217 l 1.131035,-1.13631 -1.583305,-1.56293 ' +
+        '-1.129598,1.13589 c -0.614052,-0.40108 -1.302883,-0.68093 -2.022633,-0.82247 l 0.0093,-1.61852 ' +
+        'h -2.241173 l 0.0042,1.63124 c -0.353763,0.0736 -0.705369,0.17977 -1.049785,0.32371 -0.344415,0.14437 ' +
+        '-0.665102,0.32092 -0.9635006,0.52046 l -1.1698628,-1.15823 -1.5667691,1.5792 1.1684265,1.15669 ' +
+        'c -0.4026573,0.61283 -0.68308,1.29797 -0.8247287,2.01713 l -1.6588041,0.003 v 2.22174 ' +
+        'l 1.6724648,-0.006 c 0.073327,0.35077 0.1797598,0.70243 0.3242851,1.04472 0.1452428,0.34448 ' +
+        '0.3214064,0.6644 0.5227339,0.96066 l -1.1993431,1.19723 1.5840256,1.56011 1.1964668,-1.19348 ' +
+        'c 0.6140517,0.40346 1.3028827,0.68232 2.0233517,0.82331 l 7.19e-4,1.69892 h 2.226848 z ' +
+        'm 0.221462,-3.9957 c -1.788948,0.7502 -3.8576,-0.0928 -4.6097055,-1.87438 -0.7521065,-1.78321 ' +
+        '0.090598,-3.84627 1.8802645,-4.59604 1.78823,-0.74936 3.856881,0.0929 4.608987,1.87437 ' +
+        '0.752106,1.78165 -0.0906,3.84612 -1.879546,4.59605 z'
+    },
+    'TASK_TYPE_SERVICE_FILL': {
+      d: 'm {mx},{my} c -1.788948,0.7502 -3.8576,-0.0928 -4.6097055,-1.87438 -0.7521065,-1.78321 ' +
+        '0.090598,-3.84627 1.8802645,-4.59604 1.78823,-0.74936 3.856881,0.0929 4.608987,1.87437 ' +
+        '0.752106,1.78165 -0.0906,3.84612 -1.879546,4.59605 z'
+    },
+    'TASK_TYPE_BUSINESS_RULE_HEADER': {
+      d: 'm {mx},{my} 0,4 20,0 0,-4 z'
+    },
+    'TASK_TYPE_BUSINESS_RULE_MAIN': {
+      d: 'm {mx},{my} 0,12 20,0 0,-12 z' +
+        'm 0,8 l 20,0 ' +
+        'm -13,-4 l 0,8'
+    },
+    'MESSAGE_FLOW_MARKER': {
+      d: 'm {mx},{my} m -10.5 ,-7 l 0,14 l 21,0 l 0,-14 z l 10.5,6 l 10.5,-6'
+    }
+  };
+
+  this.getRawPath = function getRawPath(pathId) {
+    return this.pathMap[pathId].d;
+  };
+
+  /**
+   * Scales the path to the given height and width.
+   * <h1>Use case</h1>
+   * <p>Use case is to scale the content of elements (event, gateways) based
+   * on the element bounding box's size.
+   * </p>
+   * <h1>Why not transform</h1>
+   * <p>Scaling a path with transform() will also scale the stroke and IE does not support
+   * the option 'non-scaling-stroke' to prevent this.
+   * Also there are use cases where only some parts of a path should be
+   * scaled.</p>
+   *
+   * @param {String} pathId The ID of the path.
+   * @param {Object} param <p>
+   *   Example param object scales the path to 60% size of the container (data.width, data.height).
+   *   <pre>
+   *   {
+   *     xScaleFactor: 0.6,
+   *     yScaleFactor:0.6,
+   *     containerWidth: data.width,
+   *     containerHeight: data.height,
+   *     position: {
+   *       mx: 0.46,
+   *       my: 0.2,
+   *     }
+   *   }
+   *   </pre>
+   *   <ul>
+   *    <li>targetpathwidth = xScaleFactor * containerWidth</li>
+   *    <li>targetpathheight = yScaleFactor * containerHeight</li>
+   *    <li>Position is used to set the starting coordinate of the path. M is computed:
+    *    <ul>
+    *      <li>position.x * containerWidth</li>
+    *      <li>position.y * containerHeight</li>
+    *    </ul>
+    *    Center of the container <pre> position: {
+   *       mx: 0.5,
+   *       my: 0.5,
+   *     }</pre>
+   *     Upper left corner of the container
+   *     <pre> position: {
+   *       mx: 0.0,
+   *       my: 0.0,
+   *     }</pre>
+   *    </li>
+   *   </ul>
+   * </p>
+   *
+   */
+  this.getScaledPath = function getScaledPath(pathId, param) {
+    var rawPath = this.pathMap[pathId];
+
+    // positioning
+    // compute the start point of the path
+    var mx, my;
+
+    if (param.abspos) {
+      mx = param.abspos.x;
+      my = param.abspos.y;
+    } else {
+      mx = param.containerWidth * param.position.mx;
+      my = param.containerHeight * param.position.my;
+    }
+
+    var coordinates = {}; // map for the scaled coordinates
+    if (param.position) {
+
+      // path
+      var heightRatio = (param.containerHeight / rawPath.height) * param.yScaleFactor;
+      var widthRatio = (param.containerWidth / rawPath.width) * param.xScaleFactor;
+
+
+      // Apply height ratio
+      for (var heightIndex = 0; heightIndex < rawPath.heightElements.length; heightIndex++) {
+        coordinates['y' + heightIndex] = rawPath.heightElements[heightIndex] * heightRatio;
+      }
+
+      // Apply width ratio
+      for (var widthIndex = 0; widthIndex < rawPath.widthElements.length; widthIndex++) {
+        coordinates['x' + widthIndex] = rawPath.widthElements[widthIndex] * widthRatio;
+      }
+    }
+
+    // Apply value to raw path
+    var path = format(
+      rawPath.d, {
+        mx: mx,
+        my: my,
+        e: coordinates
+      }
+    );
+    return path;
+  };
+}
+
+// helpers //////////////////////
+
+// copied from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js
+var tokenRegex = /\{([^}]+)\}/g,
+    objNotationRegex = /(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g; // matches .xxxxx or ["xxxxx"] to run over object properties
+
+function replacer(all, key, obj) {
+  var res = obj;
+  key.replace(objNotationRegex, function(all, name, quote, quotedName, isFunc) {
+    name = name || quotedName;
+    if (res) {
+      if (name in res) {
+        res = res[name];
+      }
+      typeof res == 'function' && isFunc && (res = res());
+    }
+  });
+  res = (res == null || res == obj ? all : res) + '';
+
+  return res;
+}
+
+function format(str, obj) {
+  return String(str).replace(tokenRegex, function(all, key) {
+    return replacer(all, key, obj);
+  });
+}

ebpm-process-modeler/public/js/bpmn-js/lib/draw/TextRenderer.js

@@ -0,0 +1,115 @@
+import { assign } from 'min-dash';
+
+import TextUtil from 'diagram-js/lib/util/Text';
+
+var DEFAULT_FONT_SIZE = 12;
+var LINE_HEIGHT_RATIO = 1.2;
+
+var MIN_TEXT_ANNOTATION_HEIGHT = 30;
+
+
+export default function TextRenderer(config) {
+  var defaultStyle = assign({
+    fontFamily: 'Arial, sans-serif',
+    fontSize: DEFAULT_FONT_SIZE,
+    fontWeight: 'normal',
+    lineHeight: LINE_HEIGHT_RATIO
+  }, config && config.defaultStyle || {});
+
+  var fontSize = parseInt(defaultStyle.fontSize, 10) - 1;
+
+  var externalStyle = assign({}, defaultStyle, {
+    fontSize: fontSize
+  }, config && config.externalStyle || {});
+
+  var textUtil = new TextUtil({
+    style: defaultStyle
+  });
+
+  /**
+   * Get the new bounds of an externally rendered,
+   * layouted label.
+   *
+   * @param  {Bounds} bounds
+   * @param  {String} text
+   *
+   * @return {Bounds}
+   */
+  this.getExternalLabelBounds = function(bounds, text) {
+
+    var layoutedDimensions = textUtil.getDimensions(text, {
+      box: {
+        width: 90,
+        height: 30,
+        x: bounds.width / 2 + bounds.x,
+        y: bounds.height / 2 + bounds.y
+      },
+      style: externalStyle
+    });
+
+    // resize label shape to fit label text
+    return {
+      x: Math.round(bounds.x + bounds.width / 2 - layoutedDimensions.width / 2),
+      y: Math.round(bounds.y),
+      width: Math.ceil(layoutedDimensions.width),
+      height: Math.ceil(layoutedDimensions.height)
+    };
+
+  };
+
+  /**
+   * Get the new bounds of text annotation.
+   *
+   * @param  {Bounds} bounds
+   * @param  {String} text
+   *
+   * @return {Bounds}
+   */
+  this.getTextAnnotationBounds = function(bounds, text) {
+
+    var layoutedDimensions = textUtil.getDimensions(text, {
+      box: bounds,
+      style: defaultStyle,
+      align: 'left-top',
+      padding: 5
+    });
+
+    return {
+      x: bounds.x,
+      y: bounds.y,
+      width: bounds.width,
+      height: Math.max(MIN_TEXT_ANNOTATION_HEIGHT, Math.round(layoutedDimensions.height))
+    };
+  };
+
+  /**
+   * Create a layouted text element.
+   *
+   * @param {String} text
+   * @param {Object} [options]
+   *
+   * @return {SVGElement} rendered text
+   */
+  this.createText = function(text, options) {
+    return textUtil.createText(text, options || {});
+  };
+
+  /**
+   * Get default text style.
+   */
+  this.getDefaultStyle = function() {
+    return defaultStyle;
+  };
+
+  /**
+   * Get the external text style.
+   */
+  this.getExternalStyle = function() {
+    return externalStyle;
+  };
+
+}
+
+TextRenderer.$inject = [
+  'config.textRenderer'
+];

ebpm-process-modeler/public/js/bpmn-js/lib/draw/index.js

@@ -0,0 +1,11 @@
+import BpmnRenderer from './BpmnRenderer';
+import TextRenderer from './TextRenderer';
+
+import PathMap from './PathMap';
+
+export default {
+  __init__: [ 'bpmnRenderer' ],
+  bpmnRenderer: [ 'type', BpmnRenderer ],
+  textRenderer: [ 'type', TextRenderer ],
+  pathMap: [ 'type', PathMap ]
+};

ebpm-process-modeler/public/js/bpmn-js/lib/features/auto-place/AutoPlace.js

@@ -0,0 +1,53 @@
+import { getNewShapePosition } from './AutoPlaceUtil';
+
+
+/**
+ * A service that places elements connected to existing ones
+ * to an appropriate position in an _automated_ fashion.
+ *
+ * @param {EventBus} eventBus
+ * @param {Modeling} modeling
+ */
+export default function AutoPlace(eventBus, modeling) {
+
+  function emit(event, payload) {
+    return eventBus.fire(event, payload);
+  }
+
+
+  /**
+   * Append shape to source at appropriate position.
+   *
+   * @param {djs.model.Shape} source
+   * @param {djs.model.Shape} shape
+   *
+   * @return {djs.model.Shape} appended shape
+   */
+  this.append = function(source, shape) {
+
+    // allow others to provide the position
+    var position = emit('autoPlace', {
+      source: source,
+      shape: shape
+    });
+
+    if (!position) {
+      position = getNewShapePosition(source, shape);
+    }
+
+    var newShape = modeling.appendShape(source, shape, position, source.parent);
+
+    // notify interested parties on new shape placed
+    emit('autoPlace.end', {
+      shape: newShape
+    });
+
+    return newShape;
+  };
+
+}
+
+AutoPlace.$inject = [
+  'eventBus',
+  'modeling'
+];

ebpm-process-modeler/public/js/bpmn-js/lib/features/auto-place/AutoPlaceSelectionBehavior.js

@@ -0,0 +1,18 @@
+/**
+ * Select element after auto placement.
+ *
+ * @param {EventBus} eventBus
+ * @param {Selection} selection
+ */
+export default function AutoPlaceSelectionBehavior(eventBus, selection) {
+
+  eventBus.on('autoPlace.end', 500, function(e) {
+    selection.select(e.shape);
+  });
+
+}
+
+AutoPlaceSelectionBehavior.$inject = [
+  'eventBus',
+  'selection'
+];

ebpm-process-modeler/public/js/bpmn-js/lib/features/auto-place/AutoPlaceUtil.js

@@ -0,0 +1,429 @@
+import { is } from '../../util/ModelUtil';
+import { isAny } from '../modeling/util/ModelingUtil';
+
+import {
+  getMid,
+  asTRBL,
+  getOrientation
+} from 'diagram-js/lib/layout/LayoutUtil';
+
+import {
+  find,
+  reduce
+} from 'min-dash';
+
+var DEFAULT_HORIZONTAL_DISTANCE = 50;
+
+var MAX_HORIZONTAL_DISTANCE = 250;
+
+// padding to detect element placement
+var PLACEMENT_DETECTION_PAD = 10;
+
+/**
+ * Find the new position for the target element to
+ * connect to source.
+ *
+ * @param  {djs.model.Shape} source
+ * @param  {djs.model.Shape} element
+ *
+ * @return {Point}
+ */
+export function getNewShapePosition(source, element) {
+
+  if (is(element, 'bpmn:TextAnnotation')) {
+    return getTextAnnotationPosition(source, element);
+  }
+
+  if (isAny(element, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
+    return getDataElementPosition(source, element);
+  }
+
+  if (is(element, 'bpmn:FlowNode')) {
+    return getFlowNodePosition(source, element);
+  }
+
+  return getDefaultPosition(source, element);
+}
+
+/**
+ * Always try to place element right of source;
+ * compute actual distance from previous nodes in flow.
+ */
+export function getFlowNodePosition(source, element) {
+
+  var sourceTrbl = asTRBL(source);
+  var sourceMid = getMid(source);
+
+  var horizontalDistance = getFlowNodeDistance(source, element);
+
+  var orientation = 'left',
+      rowSize = 80,
+      margin = 30;
+
+  if (is(source, 'bpmn:BoundaryEvent')) {
+    orientation = getOrientation(source, source.host, -25);
+
+    if (orientation.indexOf('top') !== -1) {
+      margin *= -1;
+    }
+  }
+
+  function getVerticalDistance(orient) {
+    if (orient.indexOf('top') != -1) {
+      return -1 * rowSize;
+    } else if (orient.indexOf('bottom') != -1) {
+      return rowSize;
+    } else {
+      return 0;
+    }
+  }
+
+  var position = {
+    x: sourceTrbl.right + horizontalDistance + element.width / 2,
+    y: sourceMid.y + getVerticalDistance(orientation)
+  };
+
+  var escapeDirection = {
+    y: {
+      margin: margin,
+      rowSize: rowSize
+    }
+  };
+
+  return deconflictPosition(source, element, position, escapeDirection);
+}
+
+
+/**
+ * Compute best distance between source and target,
+ * based on existing connections to and from source.
+ *
+ * @param {djs.model.Shape} source
+ * @param {djs.model.Shape} element
+ *
+ * @return {Number} distance
+ */
+export function getFlowNodeDistance(source, element) {
+
+  var sourceTrbl = asTRBL(source);
+
+  // is connection a reference to consider?
+  function isReference(c) {
+    return is(c, 'bpmn:SequenceFlow');
+  }
+
+  function toTargetNode(weight) {
+
+    return function(shape) {
+      return {
+        shape: shape,
+        weight: weight,
+        distanceTo: function(shape) {
+          var shapeTrbl = asTRBL(shape);
+
+          return shapeTrbl.left - sourceTrbl.right;
+        }
+      };
+    };
+  }
+
+  function toSourceNode(weight) {
+    return function(shape) {
+      return {
+        shape: shape,
+        weight: weight,
+        distanceTo: function(shape) {
+          var shapeTrbl = asTRBL(shape);
+
+          return sourceTrbl.left - shapeTrbl.right;
+        }
+      };
+    };
+  }
+
+  // we create a list of nodes to take into consideration
+  // for calculating the optimal flow node distance
+  //
+  //   * weight existing target nodes higher than source nodes
+  //   * only take into account individual nodes once
+  //
+  var nodes = reduce([].concat(
+    getTargets(source, isReference).map(toTargetNode(5)),
+    getSources(source, isReference).map(toSourceNode(1))
+  ), function(nodes, node) {
+    // filter out shapes connected twice via source or target
+    nodes[node.shape.id + '__weight_' + node.weight] = node;
+
+    return nodes;
+  }, {});
+
+  // compute distances between source and incoming nodes;
+  // group at the same time by distance and expose the
+  // favourite distance as { fav: { count, value } }.
+  var distancesGrouped = reduce(nodes, function(result, node) {
+
+    var shape = node.shape,
+        weight = node.weight,
+        distanceTo = node.distanceTo;
+
+    var fav = result.fav,
+        currentDistance,
+        currentDistanceCount,
+        currentDistanceEntry;
+
+    currentDistance = distanceTo(shape);
+
+    // ignore too far away peers
+    // or non-left to right modeled nodes
+    if (currentDistance < 0 || currentDistance > MAX_HORIZONTAL_DISTANCE) {
+      return result;
+    }
+
+    currentDistanceEntry = result[String(currentDistance)] =
+      result[String(currentDistance)] || {
+        value: currentDistance,
+        count: 0
+      };
+
+    // inc diff count
+    currentDistanceCount = currentDistanceEntry.count += 1 * weight;
+
+    if (!fav || fav.count < currentDistanceCount) {
+      result.fav = currentDistanceEntry;
+    }
+
+    return result;
+  }, { });
+
+
+  if (distancesGrouped.fav) {
+    return distancesGrouped.fav.value;
+  } else {
+    return DEFAULT_HORIZONTAL_DISTANCE;
+  }
+}
+
+
+/**
+ * Always try to place text annotations top right of source.
+ */
+export function getTextAnnotationPosition(source, element) {
+
+  var sourceTrbl = asTRBL(source);
+
+  var position = {
+    x: sourceTrbl.right + element.width / 2,
+    y: sourceTrbl.top - 50 - element.height / 2
+  };
+
+  var escapeDirection = {
+    y: {
+      margin: -30,
+      rowSize: 20
+    }
+  };
+
+  return deconflictPosition(source, element, position, escapeDirection);
+}
+
+
+/**
+ * Always put element bottom right of source.
+ */
+export function getDataElementPosition(source, element) {
+
+  var sourceTrbl = asTRBL(source);
+
+  var position = {
+    x: sourceTrbl.right - 10 + element.width / 2,
+    y: sourceTrbl.bottom + 40 + element.width / 2
+  };
+
+  var escapeDirection = {
+    x: {
+      margin: 30,
+      rowSize: 30
+    }
+  };
+
+  return deconflictPosition(source, element, position, escapeDirection);
+}
+
+
+/**
+ * Always put element right of source per default.
+ */
+export function getDefaultPosition(source, element) {
+
+  var sourceTrbl = asTRBL(source);
+
+  var sourceMid = getMid(source);
+
+  // simply put element right next to source
+  return {
+    x: sourceTrbl.right + DEFAULT_HORIZONTAL_DISTANCE + element.width / 2,
+    y: sourceMid.y
+  };
+}
+
+
+/**
+ * Returns all connected elements around the given source.
+ *
+ * This includes:
+ *
+ *   - connected elements
+ *   - host connected elements
+ *   - attachers connected elements
+ *
+ * @param  {djs.model.Shape} source
+ * @param  {djs.model.Shape} element
+ *
+ * @return {Array<djs.model.Shape>}
+ */
+function getAutoPlaceClosure(source, element) {
+
+  var allConnected = getConnected(source);
+
+  if (source.host) {
+    allConnected = allConnected.concat(getConnected(source.host));
+  }
+
+  if (source.attachers) {
+    allConnected = allConnected.concat(source.attachers.reduce(function(shapes, attacher) {
+      return shapes.concat(getConnected(attacher));
+    }, []));
+  }
+
+  return allConnected;
+}
+
+/**
+ * Return target at given position, if defined.
+ *
+ * This takes connected elements from host and attachers
+ * into account, too.
+ */
+export function getConnectedAtPosition(source, position, element) {
+
+  var bounds = {
+    x: position.x - (element.width / 2),
+    y: position.y - (element.height / 2),
+    width: element.width,
+    height: element.height
+  };
+
+  var closure = getAutoPlaceClosure(source, element);
+
+  return find(closure, function(target) {
+
+    if (target === element) {
+      return false;
+    }
+
+    var orientation = getOrientation(target, bounds, PLACEMENT_DETECTION_PAD);
+
+    return orientation === 'intersect';
+  });
+}
+
+
+/**
+ * Returns a new, position for the given element
+ * based on the given element that is not occupied
+ * by some element connected to source.
+ *
+ * Take into account the escapeDirection (where to move
+ * on positining clashes) in the computation.
+ *
+ * @param {djs.model.Shape} source
+ * @param {djs.model.Shape} element
+ * @param {Point} position
+ * @param {Object} escapeDelta
+ *
+ * @return {Point}
+ */
+export function deconflictPosition(source, element, position, escapeDelta) {
+
+  function nextPosition(existingElement) {
+
+    var newPosition = {
+      x: position.x,
+      y: position.y
+    };
+
+    [ 'x', 'y' ].forEach(function(axis) {
+
+      var axisDelta = escapeDelta[axis];
+
+      if (!axisDelta) {
+        return;
+      }
+
+      var dimension = axis === 'x' ? 'width' : 'height';
+
+      var margin = axisDelta.margin,
+          rowSize = axisDelta.rowSize;
+
+      if (margin < 0) {
+        newPosition[axis] = Math.min(
+          existingElement[axis] + margin - element[dimension] / 2,
+          position[axis] - rowSize + margin
+        );
+      } else {
+        newPosition[axis] = Math.max(
+          existingTarget[axis] + existingTarget[dimension] + margin + element[dimension] / 2,
+          position[axis] + rowSize + margin
+        );
+      }
+    });
+
+    return newPosition;
+  }
+
+  var existingTarget;
+
+  // deconflict position until free slot is found
+  while ((existingTarget = getConnectedAtPosition(source, position, element))) {
+    position = nextPosition(existingTarget);
+  }
+
+  return position;
+}
+
+
+
+// helpers //////////////////////
+
+function noneFilter() {
+  return true;
+}
+
+function getConnected(element, connectionFilter) {
+  return [].concat(
+    getTargets(element, connectionFilter),
+    getSources(element, connectionFilter)
+  );
+}
+
+function getSources(shape, connectionFilter) {
+
+  if (!connectionFilter) {
+    connectionFilter = noneFilter;
+  }
+
+  return shape.incoming.filter(connectionFilter).map(function(c) {
+    return c.source;
+  });
+}
+
+function getTargets(shape, connectionFilter) {
+
+  if (!connectionFilter) {
+    connectionFilter = noneFilter;
+  }
+
+  return shape.outgoing.filter(connectionFilter).map(function(c) {
+    return c.target;
+  });
+}

ebpm-process-modeler/public/js/bpmn-js/lib/features/auto-place/index.js

@@ -0,0 +1,8 @@
+import AutoPlace from './AutoPlace';
+import AutoPlaceSelectionBehavior from './AutoPlaceSelectionBehavior';
+
+export default {
+  __init__: [ 'autoPlaceSelectionBehavior' ],
+  autoPlace: [ 'type', AutoPlace ],
+  autoPlaceSelectionBehavior: [ 'type', AutoPlaceSelectionBehavior ]
+};

ebpm-process-modeler/public/js/bpmn-js/lib/features/auto-resize/BpmnAutoResize.js

@@ -0,0 +1,38 @@
+import AutoResize from 'diagram-js/lib/features/auto-resize/AutoResize';
+
+import inherits from 'inherits';
+
+import { is } from '../../util/ModelUtil';
+
+
+/**
+ * Sub class of the AutoResize module which implements a BPMN
+ * specific resize function.
+ */
+export default function BpmnAutoResize(injector) {
+
+  injector.invoke(AutoResize, this);
+}
+
+BpmnAutoResize.$inject = [
+  'injector'
+];
+
+inherits(BpmnAutoResize, AutoResize);
+
+
+/**
+ * Resize shapes and lanes.
+ *
+ * @param {djs.model.Shape} target
+ * @param {Bounds} newBounds
+ * @param {Object} hints
+ */
+BpmnAutoResize.prototype.resize = function(target, newBounds, hints) {
+
+  if (is(target, 'bpmn:Participant')) {
+    this._modeling.resizeLane(target, newBounds, null, hints);
+  } else {
+    this._modeling.resizeShape(target, newBounds, null, hints);
+  }
+};

ebpm-process-modeler/public/js/bpmn-js/lib/features/auto-resize/BpmnAutoResizeProvider.js

@@ -0,0 +1,51 @@
+import { is } from '../../util/ModelUtil';
+
+import inherits from 'inherits';
+
+import { forEach } from 'min-dash';
+
+import AutoResizeProvider from 'diagram-js/lib/features/auto-resize/AutoResizeProvider';
+
+
+/**
+ * This module is a provider for automatically resizing parent BPMN elements
+ */
+export default function BpmnAutoResizeProvider(eventBus, modeling) {
+  AutoResizeProvider.call(this, eventBus);
+
+  this._modeling = modeling;
+}
+
+inherits(BpmnAutoResizeProvider, AutoResizeProvider);
+
+BpmnAutoResizeProvider.$inject = [
+  'eventBus',
+  'modeling'
+];
+
+
+/**
+ * Check if the given target can be expanded
+ *
+ * @param  {djs.model.Shape} target
+ *
+ * @return {boolean}
+ */
+BpmnAutoResizeProvider.prototype.canResize = function(elements, target) {
+
+  if (!is(target, 'bpmn:Participant') && !is(target, 'bpmn:Lane') && !(is(target, 'bpmn:SubProcess'))) {
+    return false;
+  }
+
+  var canResize = true;
+
+  forEach(elements, function(element) {
+
+    if (is(element, 'bpmn:Lane') || element.labelTarget) {
+      canResize = false;
+      return;
+    }
+  });
+
+  return canResize;
+};

ebpm-process-modeler/public/js/bpmn-js/lib/features/auto-resize/index.js

@@ -0,0 +1,12 @@
+import BpmnAutoResize from './BpmnAutoResize';
+import BpmnAutoResizeProvider from './BpmnAutoResizeProvider';
+
+
+export default {
+  __init__: [
+    'bpmnAutoResize',
+    'bpmnAutoResizeProvider'
+  ],
+  bpmnAutoResize: [ 'type', BpmnAutoResize ],
+  bpmnAutoResizeProvider: [ 'type', BpmnAutoResizeProvider ]
+};

ebpm-process-modeler/public/js/bpmn-js/lib/features/context-pad/ContextPadProvider.js

@@ -0,0 +1,434 @@
+import {
+  assign,
+  forEach,
+  isArray
+} from 'min-dash';
+
+import {
+  is
+} from '../../util/ModelUtil';
+
+import {
+  isExpanded,
+  isEventSubProcess
+} from '../../util/DiUtil';
+
+import {
+  isAny
+} from '../modeling/util/ModelingUtil';
+
+import {
+  getChildLanes
+} from '../modeling/util/LaneUtil';
+
+import {
+  hasPrimaryModifier
+} from 'diagram-js/lib/util/Mouse';
+
+
+/**
+ * A provider for BPMN 2.0 elements context pad
+ */
+export default function ContextPadProvider(
+    config, injector, eventBus,
+    contextPad, modeling, elementFactory,
+    connect, create, popupMenu,
+    canvas, rules, translate) {
+
+  config = config || {};
+
+  contextPad.registerProvider(this);
+
+  this._contextPad = contextPad;
+
+  this._modeling = modeling;
+
+  this._elementFactory = elementFactory;
+  this._connect = connect;
+  this._create = create;
+  this._popupMenu = popupMenu;
+  this._canvas = canvas;
+  this._rules = rules;
+  this._translate = translate;
+
+  if (config.autoPlace !== false) {
+    this._autoPlace = injector.get('autoPlace', false);
+  }
+
+  eventBus.on('create.end', 250, function(event) {
+    var shape = event.context.shape;
+
+    if (!hasPrimaryModifier(event)) {
+      return;
+    }
+
+    var entries = contextPad.getEntries(shape);
+
+    if (entries.replace) {
+      entries.replace.action.click(event, shape);
+    }
+  });
+}
+
+ContextPadProvider.$inject = [
+  'config.contextPad',
+  'injector',
+  'eventBus',
+  'contextPad',
+  'modeling',
+  'elementFactory',
+  'connect',
+  'create',
+  'popupMenu',
+  'canvas',
+  'rules',
+  'translate'
+];
+
+
+ContextPadProvider.prototype.getContextPadEntries = function(element) {
+
+  var contextPad = this._contextPad,
+      modeling = this._modeling,
+
+      elementFactory = this._elementFactory,
+      connect = this._connect,
+      create = this._create,
+      popupMenu = this._popupMenu,
+      canvas = this._canvas,
+      rules = this._rules,
+      autoPlace = this._autoPlace,
+      translate = this._translate;
+
+  var actions = {};
+
+  if (element.type === 'label') {
+    return actions;
+  }
+
+  var businessObject = element.businessObject;
+
+  function startConnect(event, element) {
+    connect.start(event, element);
+  }
+
+  function removeElement(e) {
+    modeling.removeElements([ element ]);
+  }
+
+  function getReplaceMenuPosition(element) {
+
+    var Y_OFFSET = 5;
+
+    var diagramContainer = canvas.getContainer(),
+        pad = contextPad.getPad(element).html;
+
+    var diagramRect = diagramContainer.getBoundingClientRect(),
+        padRect = pad.getBoundingClientRect();
+
+    var top = padRect.top - diagramRect.top;
+    var left = padRect.left - diagramRect.left;
+
+    var pos = {
+      x: left,
+      y: top + padRect.height + Y_OFFSET
+    };
+
+    return pos;
+  }
+
+
+  /**
+   * Create an append action
+   *
+   * @param {String} type
+   * @param {String} className
+   * @param {String} [title]
+   * @param {Object} [options]
+   *
+   * @return {Object} descriptor
+   */
+  function appendAction(type, className, title, options) {
+
+    if (typeof title !== 'string') {
+      options = title;
+      title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
+    }
+
+    function appendStart(event, element) {
+
+      var shape = elementFactory.createShape(assign({ type: type }, options));
+      create.start(event, shape, element);
+    }
+
+
+    var append = autoPlace ? function(event, element) {
+      var shape = elementFactory.createShape(assign({ type: type }, options));
+
+      autoPlace.append(element, shape);
+    } : appendStart;
+
+
+    return {
+      group: 'model',
+      className: className,
+      title: title,
+      action: {
+        dragstart: appendStart,
+        click: append
+      }
+    };
+  }
+
+  function splitLaneHandler(count) {
+
+    return function(event, element) {
+      // actual split
+      modeling.splitLane(element, count);
+
+      // refresh context pad after split to
+      // get rid of split icons
+      contextPad.open(element, true);
+    };
+  }
+
+
+  if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(businessObject)) {
+
+    var childLanes = getChildLanes(element);
+
+    assign(actions, {
+      'lane-insert-above': {
+        group: 'lane-insert-above',
+        className: 'bpmn-icon-lane-insert-above',
+        title: translate('Add Lane above'),
+        action: {
+          click: function(event, element) {
+            modeling.addLane(element, 'top');
+          }
+        }
+      }
+    });
+
+    if (childLanes.length < 2) {
+
+      if (element.height >= 120) {
+        assign(actions, {
+          'lane-divide-two': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-two',
+            title: translate('Divide into two Lanes'),
+            action: {
+              click: splitLaneHandler(2)
+            }
+          }
+        });
+      }
+
+      if (element.height >= 180) {
+        assign(actions, {
+          'lane-divide-three': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-three',
+            title: translate('Divide into three Lanes'),
+            action: {
+              click: splitLaneHandler(3)
+            }
+          }
+        });
+      }
+    }
+
+    assign(actions, {
+      'lane-insert-below': {
+        group: 'lane-insert-below',
+        className: 'bpmn-icon-lane-insert-below',
+        title: translate('Add Lane below'),
+        action: {
+          click: function(event, element) {
+            modeling.addLane(element, 'bottom');
+          }
+        }
+      }
+    });
+
+  }
+
+  if (is(businessObject, 'bpmn:FlowNode')) {
+
+    if (is(businessObject, 'bpmn:EventBasedGateway')) {
+
+      assign(actions, {
+        'append.receive-task': appendAction(
+          'bpmn:ReceiveTask',
+          'bpmn-icon-receive-task'
+        ),
+        'append.message-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-message',
+          translate('Append MessageIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:MessageEventDefinition' }
+        ),
+        'append.timer-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-timer',
+          translate('Append TimerIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:TimerEventDefinition' }
+        ),
+        'append.condtion-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-condition',
+          translate('Append ConditionIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:ConditionalEventDefinition' }
+        ),
+        'append.signal-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-signal',
+          translate('Append SignalIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:SignalEventDefinition' }
+        )
+      });
+    } else
+
+    if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {
+
+      assign(actions, {
+        'append.compensation-activity':
+            appendAction(
+              'bpmn:Task',
+              'bpmn-icon-task',
+              translate('Append compensation activity'),
+              {
+                isForCompensation: true
+              }
+            )
+      });
+    } else
+
+    if (!is(businessObject, 'bpmn:EndEvent') &&
+        !businessObject.isForCompensation &&
+        !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
+        !isEventSubProcess(businessObject)) {
+
+      assign(actions, {
+        'append.end-event': appendAction(
+          'bpmn:EndEvent',
+          'bpmn-icon-end-event-none',
+          translate('Append EndEvent')
+        ),
+        'append.gateway': appendAction(
+          'bpmn:ExclusiveGateway',
+          'bpmn-icon-gateway-none',
+          translate('Append Gateway')
+        ),
+        'append.append-task': appendAction(
+          'bpmn:Task',
+          'bpmn-icon-task',
+          translate('Append Task')
+        ),
+        'append.intermediate-event': appendAction(
+          'bpmn:IntermediateThrowEvent',
+          'bpmn-icon-intermediate-event-none',
+          translate('Append Intermediate/Boundary Event')
+        )
+      });
+    }
+  }
+
+  if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
+    // Replace menu entry
+    assign(actions, {
+      'replace': {
+        group: 'edit',
+        className: 'bpmn-icon-screw-wrench',
+        title: translate('Change type'),
+        action: {
+          click: function(event, element) {
+
+            var position = assign(getReplaceMenuPosition(element), {
+              cursor: { x: event.x, y: event.y }
+            });
+
+            popupMenu.open(element, 'bpmn-replace', position);
+          }
+        }
+      }
+    });
+  }
+
+  if (isAny(businessObject, [
+    'bpmn:FlowNode',
+    'bpmn:InteractionNode',
+    'bpmn:DataObjectReference',
+    'bpmn:DataStoreReference'
+  ])) {
+
+    assign(actions, {
+      'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation'),
+
+      'connect': {
+        group: 'connect',
+        className: 'bpmn-icon-connection-multi',
+        title: translate('Connect using ' +
+                  (businessObject.isForCompensation ? '' : 'Sequence/MessageFlow or ') +
+                  'Association'),
+        action: {
+          click: startConnect,
+          dragstart: startConnect
+        }
+      }
+    });
+  }
+
+  if (isAny(businessObject, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
+    assign(actions, {
+      'connect': {
+        group: 'connect',
+        className: 'bpmn-icon-connection-multi',
+        title: translate('Connect using DataInputAssociation'),
+        action: {
+          click: startConnect,
+          dragstart: startConnect
+        }
+      }
+    });
+  }
+
+  // delete element entry, only show if allowed by rules
+  var deleteAllowed = rules.allowed('elements.delete', { elements: [ element ] });
+
+  if (isArray(deleteAllowed)) {
+    // was the element returned as a deletion candidate?
+    deleteAllowed = deleteAllowed[0] === element;
+  }
+
+  if (deleteAllowed) {
+    assign(actions, {
+      'delete': {
+        group: 'edit',
+        className: 'bpmn-icon-trash',
+        title: translate('Remove'),
+        action: {
+          click: removeElement
+        }
+      }
+    });
+  }
+
+  return actions;
+};
+
+function isEventType(eventBo, type, definition) {
+
+  var isType = eventBo.$instanceOf(type);
+  var isDefinition = false;
+
+  var definitions = eventBo.eventDefinitions || [];
+  forEach(definitions, function(def) {
+    if (def.$type === definition) {
+      isDefinition = true;
+    }
+  });
+
+  return isType && isDefinition;
+}

ebpm-process-modeler/public/js/bpmn-js/lib/features/context-pad/index.js

@@ -0,0 +1,21 @@
+import DirectEditingModule from 'diagram-js-direct-editing';
+import ContextPadModule from 'diagram-js/lib/features/context-pad';
+import SelectionModule from 'diagram-js/lib/features/selection';
+import ConnectModule from 'diagram-js/lib/features/connect';
+import CreateModule from 'diagram-js/lib/features/create';
+import PopupMenuModule from '../popup-menu';
+
+import ContextPadProvider from './ContextPadProvider';
+
+export default {
+  __depends__: [
+    DirectEditingModule,
+    ContextPadModule,
+    SelectionModule,
+    ConnectModule,
+    CreateModule,
+    PopupMenuModule
+  ],
+  __init__: [ 'contextPadProvider' ],
+  contextPadProvider: [ 'type', ContextPadProvider ]
+};