camunda / camunda-bpmn.js Goto Github PK

View Code? Open in Web Editor NEW

134.0 134.0 47.0 965 KB

camunda BPMN 2.0 Javascript libraries

Home Page: http://www.camunda.org/

JavaScript 99.10% CSS 0.49% HTML 0.41%

camunda-bpmn.js's Introduction

This project has been superseded by bpmn-io/bpmn-js.

camunda-bpmn.js

camunda BPMN JavaScript libraries for parsing, executing and rendering BPMN 2.0 with JavaScript.

Components

Transformer - Supports parsing a BPMN 2.0 XML File and transforming it into a JavaScript object model. The same object model can then be passed to the Executor and the Renderer.
Engine - Lightweight Process Engine completely written in JavaScript.
Renderer - Allows rendering BPMN 2.0 Diagrams using SVG or HTML5 Canvas.

Getting Started

The entry point to the API is the Bpmn Class.

Bootstrapping the Renderer

The Renderer uses Dojo GFX for abstracting SVG and HTML5 Canvas as underlying graphics technology. Additionally it relies on jQuery for DOM manipulation.

You must first include a AMD compliant script loader, such as Dojo or RequireJS.

To use plain RequireJS, download and include it into the site:

<script src="lib/require/require.min.js"></script>

Now you need to configure the path to the dependencies dojo, dojo.gfx and jquery in a require config. Assuming that the camunda-bpmn.js libraries are located under lib/camunda-bpmn and dojo is stored under lib/dojo:

<script src="lib/jquery/jquery-1.7.2.min.js"></script>

<!-- found in project as build/bpmn.min.js -->
<script src="lib/camunda-bpmn/bpmn.min.js"></script>

<!-- or include minified engine, if you need only that -->
<script src="lib/camunda-bpmn/engine.min.js"></script>

require({
  baseUrl: "./",
  packages: [
    { name: "dojo", location: "lib/dojo/dojo/" },
    { name: "dojox", location: "lib/dojo/dojox" }
  ]
});

Finally, you can load the renderer and draw a process diagram.

require([ "bpmn/Bpmn" ], function(Bpmn) {
  new Bpmn().renderUrl("test/resources/task_loop.bpmn", {
    diagramElement : "diagram",
    overlayHtml : '<div style="position: relative; top:100%"></div>'
  }).then(function(bpmn){
    bpmn.zoom(0.8);
    bpmn.annotate("reviewInvoice", '<span class="bluebox"  style="position: relative; top:100%">New Text</span>', ["highlight"]);
  });
});

API

Check out the file src/bpmn/Bpmn.js for the API of the library.

Development

We are using Grunt for building and testing the code. It can be installed using:

Install node.js.
Open a terminal, navigate to the site/ folder and type npm install
Install Grunt's command line interface (CLI) globally using npm install -g grunt-cli

After Grunt is installed you can use it like this:

Run grunt requirejs to optimize and minify the JavaScript code into the build/ folder.
Run grunt server watch to start a web server at localhost:9000
Open localhost:9000/test/runner.html to execute the jasmine tests in your browser while running the grunt server.
Open localhost:9000/demo.html to see the demo.

camunda-bpmn.js's People

Contributors

Stargazers

Watchers

camunda-bpmn.js's Issues

Memory leak on a Clear / Redraw

It seems that the clear method leave some orphan object.

To reproduce, use this modified demo.html file:

<html>
<head>
  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="pragma" content="no-cache" />
</head>
<body>
  <div id="diagram">
  </div>

  <script src="lib/require/require.js"></script>

  <script src="lib/jquery/jquery-1.7.2.min.js"></script>
  <script src="build/bpmn.min.js"></script>

  <script>
    require({
      baseUrl: "./",
      paths: {
        'jquery' : 'lib/jquery/jquery-1.7.2.min',
        'bpmn/Bpmn' : 'build/bpmn.min',
      },
      packages: [
        { name: "dojo", location: "lib/dojo/dojo" },
        { name: "dojox", location: "lib/dojo/dojox"},
        // provided by build/bpmn.min.js
        // { name: "bpmn", location: "src/bpmn" }
      ]
    });

    require(["bpmn/Bpmn", "dojo/domReady!"], function(Bpmn) {
      var bpm = new Bpmn();

      // Cycle function to render and clean 
      function cycle() {
        bpm.renderUrl("test/resources/complex.bpmn", {
          diagramElement : "diagram",
        }).then(function (bpmn){
          setTimeout(function() { // When diagram ready, clear it in 10 ms
            bpm.clear();
            cycle();
          }, 10);
        });
      }
      cycle();

    });
  </script>
</body>
</html>

This will draw and clear massively.

On a 3 minutes run with firefox 28:

Elapsed	Memory
0s	273 M
30s	455 M
60s	550 M
90s	691 M
120s	840 M
150s	945 M
180s	1026 M

Issue can be watched on chrome by taking Heap snapshots.
Some Gfx object seems to stack indefinitly.

Is this an issue or do I misunderstand the clear method ?

Best regards

Icons of Message path not centered

JS renderer does not work in Firefox if bpmn: namespace prefix is used

Any idea for adding boundary events support to engine

I'm looking for any clue or hint to add boundary event support to engine. I will appreciate if someone help.

Rendering gateway in a better way

Hi,

I am using bpmn.min.js to render the process diagram. Sadly, some of the gateways can not be correctly rendered. I suppose if a gateway has the corresponding adapterType and adapter class, it is rendered as a normal task but with a very small size. The problem is in this case, the name of the gateway can not be seen. How can I overcome this problem? Is that possible to adapt the js to avoid this problem. If yes, can you tell me how? Thanks in advance.

Best,
Huiying

Icon is overlaying the text inside the task when the task name is very long

See the image:
http://imgur.com/a/kBXqH

any example how to run the engine on server side? with nodejs?

I made the respective changes to get it work on node.js,
and it was working until determined point,.. but I've a problem on Transformer.js

camunda-bpmn.js/src/bpmn/Transformer.js:25
    if (source instanceof Document) {
                          ^
ReferenceError: Document is not defined
    at getXmlObject (/Users/erik/Web/camunda-bpmn.js/src/bpmn/Transformer.js:25:27)
    at Transformer.transform (/Users/erik/Web/camunda-bpmn.js/src/bpmn/Transformer.js:48:15)
    at Object.Engine.startInstance (/Users/erik/Web/camunda-bpmn.js/src/bpmn/Engine.js:30:43)
    at Object.<anonymous> (/Users/erik/Web/camunda-bpmn.js/test/engine/executionlistener.js:71:14)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)

my problem, obviously, I don't know how to translate this section of code for node.js :(

function getXmlObject(source) {
    var xmlDoc;
    if (source instanceof Document) {
        xmlDoc = source;
    } else if (window.DOMParser) {
      var parser = new DOMParser();
      xmlDoc = parser.parseFromString(source,"text/xml");
    } else {
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async=false;
      xmlDoc.loadXML(source);
    }
    return xmlDoc;

I would appreciate a lot if you can help me,..
I know that the engine is not a fully bpmn engine functional,. but I wish got it running on node.js

Best Regards.

typeError: r is null

Hi,

I have met a tough problem. I have one bpmn xml file which can be rendered by camunda-bpmn.js vey well, HOWEVER, another bpmn xml file which is generated from the same model but with a different version of parser, can not be rendered and in firebug it shows the error "typeError: r is null".

After roughly analysing the two xml files, I find that in the first xml file it contains only but in the second xml file it contains both <dataObject> and <dataObjectReference>. Is that where the error occurs?