How to roll my own Modeler

Misc
1

I’m trying to roll my own Modeler following the corresponding walkthrough section.

But when I try to run my test.html file, I get module loading issues (as reported in Modeler.js not found):

I need to rewrite

 import Modeler from 'bpmn-js/lib/Modeler';

to

 import Modeler from 'bpmn-js/lib/Modeler.js';

Also, in Modeler.js, what does

 import inherits from 'inherits';

mean? There is no such file in the folder bpmn-js/lib from where the Modeler.js file is imported and the browser throws an error >>Failed to resolve module specifier “inherits”. Relative references must start with either “/”, “./”, or “…/”.

I’m confused. What am I missing?

Can I only run the Modeler after bundling with webpack?

2

Hi @gwag and welcome to the community,

if you want to “roll your own Modeler”, then you indeed need to bundle with Webpack. See a full example here.

What are you trying to achieve in the first place? Maybe the pre-packaged Modeler is sufficient for you? This would not require you to use WebPack. See example here.

Of course rolling your own Modeler gives you more flexibility (e.g., loading of custom modules), but it really depends of your use-case whether you need that.

Thanks
Max

3

Thanks, Max, for your reply.

I’d like to set up a development environment of bpmn-js such that I can modify all three involved libraries. Therefore I have installed bpmn-js, bpmn-moddle and diagram-js in my project folder, along with their dependencies.

I tried bundling bpmn.js with Rollup. But I received the following error:

npx rollup test.js --file bundle.js --format iife

test.js → bundle.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
inherits (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/navigation/keyboard-move (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/navigation/movecanvas (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/navigation/touch (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/navigation/zoomscroll (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/align-elements (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/auto-scroll (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/bendpoints (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/connect (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/connection-preview (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/create (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/keyboard-move-selection (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/move (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/resize (imported by bpmn-js\lib\Modeler.js)
**[!] Error: Could not resolve './features/auto-place' from bpmn-js\lib\Modeler.js**

-Gerd

4

Did you try to start from this example repo here?

I would need a more complete view of your project setup to assist, would you be able to share?

Thanks

5

The bundling example that you mentioned is not based on the bpmn-js dev environment with bpmn-js, bpmn-moddle and diagram-js installed in a project folder.

Can you point me to a code example that is based on the dev environment (as described in https://github.com/bpmn-io/bpmn-js/blob/master/docs/project/SETUP.md)?

Thanks,
Gerd

6

Hi Gerd,

you can execute this script with a minor change I did:

#!/bin/bash

###
# Setup script to be executed in a bpmn.io project root (some empty folder chosen by YOU)
###

base=`pwd`

echo cloning repositories

git clone git@github.com:bpmn-io/diagram-js.git
git clone git@github.com:bpmn-io/bpmn-js.git
git clone git@github.com:bpmn-io/bpmn-moddle.git

echo done.


echo setup diagram-js

cd $base/diagram-js
npm install


echo setup bpmn-moddle

cd $base/bpmn-moddle
npm install

npm run build


echo setup bpmn-js

cd $base/bpmn-js
npm install
npm link ../diagram-js
npm link ../bpmn-moddle


cd $base

echo all done.

Afterwards you can:

  • You can run a bpmn-js modeler by doing:
cd bpmn-js
npm run start
  • Directly change diagram-js, bpmn-moddle or bpmn-js, the bpmn-js modeler will automatically pick up the changes
    • Note that you might need to npm run build again in the downstream libraries
  • When you want to bundle your custom bpmn-js modeler, just run the following inside bpmn-js 
npm run distro
8

I was facing a same problem regarding the roll, modular but now it been solved and all the things working well.

1 Like
11