search

bpmn-io / bpmn-js-examples

Examples how to use bpmn-js
https://bpmn.io/toolkit/bpmn-js
1.84k stars 1.23k forks source link

use with requirejs #149

Closed alibahal closed 2 years ago

alibahal commented 2 years ago

HI, I want to use this component with requirejs , but after module loaded,when I want to use, the BpmnJS object is undefined. in this line :

var bpmnModeler = new BpmnJS({ container: '#canvas', keyboard: { bindTo: window } });

Is there anyway to use bpmn modeler with requirejs ? I mean this js file : https://unpkg.com/bpmn-js@8.8.3/dist/bpmn-modeler.development.js if you there is any sample, it would be very helpful thank you

nikku commented 2 years ago

Setup:

npm install bpmn-js@8.8.3

Use:

const BpmnJS = require('bpmn-js/dist/bpmn-modeler.development.js');

const modeler = new BpmnJS();

...

(You bundle this file for the web).

Profit! :tada:

Please share additional details regarding your setup so we can reproduce your issue on our end.

alibahal commented 2 years ago

Thank you. But how I use this const you defined? Which property of it, I should use to create 'bpmnModeler' variable?

nikku commented 2 years ago

I've updated the example.

nikku commented 2 years ago

Also:

Please share additional details regarding your setup so we can reproduce your issue on our end.

alibahal commented 2 years ago

I've updated the example.

sorry ,which example you updated?

nikku commented 2 years ago

This one.

alibahal commented 2 years ago

I think there is a misunderstanding , I use RequireJs like below:

(function () {
var router = {}; require.config({ deps: ["jquery"], paths: { app: "/app", "bpmnModeler": '/js/Bpms/bpmn-modeler.development', "bpmnViewer": '/js/Bpms/viewer.development' }, shim: { "bpmnModeler": ["jquery"], "bpmnViewer": ["jquery"]
} }); })();

define(["bpmnModeler", "kendo-template!app/bpmnDmnModule/workflowManagement/workflowManagementView"], function (BpmnJS,templateId) {
var bpmnModeler = new BpmnJS({ container: '#canvas', keyboard: { bindTo: window } });
var options = { }; return new kendo.View(templateId, options); });

do you have any idea?

nikku commented 2 years ago

It just works:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>bpmnjs requirejs test</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    #canvas {
      width: 100vw;
      height: 100vh;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>

  <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>

  <script>
    define('bpmnModeler', [
      'https://unpkg.com/bpmn-js@8.8.3/dist/bpmn-modeler.development'
    ], function(BpmnJS) {
      return new BpmnJS({
        container: '#canvas',
        keyboard: {
          bindTo: window
        }
      });
    });

    require([ 'bpmnModeler' ], function(bpmnModeler) {
      bpmnModeler.createDiagram();
    });
  </script>
</body>
</html>