Hi!
I have problem!
I create Web Application NodeJS + Express.
C:\Users\SChaikovskiy>npm install express-generator -g
C:\Projects>express -v ejs -c sass CamundaModelerJS
create page for modeler: modeler.ejs and try add modeler.
- If i add “import BpmnModeler from ‘bpmn-js/lib/Modeler’;” in page(modeler.ejs) then
code of page below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Дизайнер процесса</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- example styles -->
<style>
html, body, #canvas {
height: 100%;
padding: 0;
margin: 0;
}
.diagram-note {
background-color: rgba(66, 180, 21, 0.7);
color: White;
border-radius: 5px;
font-family: Arial;
font-size: 12px;
padding: 5px;
min-height: 16px;
width: 50px;
text-align: center;
}
.needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
}
#save-button {
position: fixed;
bottom: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="canvas"></div>
<button id="save-button">Сохранить</button>
<script>
var diagramUrl = 'http://localhost:8080/rest/engine/default/process-definition/key/LandCoordinationProcess/xml';
import BpmnModeler from 'bpmn-js/lib/Modeler';
var bpmnModeler = new BpmnModeler({
container: '#canvas',
keyboard: {
bindTo: window
}
});
/**
* Save diagram contents and print them to the console.
*/
function exportDiagram() {
bpmnModeler.saveXML({ format: true }, function(err, xml) {
if (err) {
return console.error('could not save BPMN 2.0 diagram', err);
}
console.log('DIAGRAM', xml);
$.ajax({
type: "POST",
url: 'http://localhost:8080/SaveBPMModel',
data: {
strXml: xml,
},
success: function (data) {
alert("Сохранено!");
}
});
});
}
$.get(diagramUrl, function(bpmnXML) {
bpmnModeler.importXML(bpmnXML.bpmn20Xml, function(err) {
if (err) {
return console.error('could not import BPMN 2.0 diagram', err);
}
var canvas = bpmnModeler.get('canvas');
//canvas.zoom('fit-viewport');
});
});
$('#save-button').click(exportDiagram);
</script>
</body>
</html>
- if add import in modeler.js(router), error in start
C:\Projects\CamundaModelerJS>npm start
camundamodelerjs@0.0.0 start C:\Projects\CamundaModelerJS
node ./bin/www
C:\Projects\CamundaModelerJS\routes\modeler.js:8
import bpmnModeler from ‘bpmn-js/lib/Modeler’;
^^^^^^^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:84:7)
at createScript (vm.js:264:10)
at Object.runInThisContext (vm.js:312:10)
at Module._compile (internal/modules/cjs/loader.js:694:28)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:745:10)
at Module.load (internal/modules/cjs/loader.js:626:32)
at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
at Function.Module._load (internal/modules/cjs/loader.js:558:3)
at Module.require (internal/modules/cjs/loader.js:663:17)
at require (internal/modules/cjs/helpers.js:20:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! camundamodelerjs@0.0.0 start: node ./bin/www
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the camundamodelerjs@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SChaikovskiy\AppData\Roaming\npm-cache_logs\2019-04-03T08_04_19_219Z-debug.log
code:
var express = require('express');
var router = express.Router();
//var BpmnModeler = require('bpmn-js/lib/Modeler');
/* GET modeler page. */
router.get('/', function(req, res, next) {
import bpmnModeler from 'bpmn-js/lib/Modeler';
res.render('modeler', { title: 'Express' });
});
module.exports = router;
- OR
