|
||
---|---|---|
assets | ||
lib | ||
resources | ||
.eslintignore | ||
.eslintrc | ||
.gitignore | ||
.npmignore | ||
.travis.yml | ||
CHANGELOG.md | ||
LICENSE | ||
README.md | ||
package-lock.json | ||
package.json | ||
rollup.config.js |
README.md
diagram-js Code Editor
A code editor for diagram-js.
Features
- Modify script tasks with python formatting
- Tests scripts in place with feedback
- View externally provided data and functions
Usage
Extend your diagram-js application with the coding module. We'll use bpmn-js as an example:
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import codingModule from 'diagram-js-code-editor';
var bpmnModeler = new BpmnModeler({
additionalModules: [
propertiesProviderModule,
propertiesPanelModule,
codingModule
]
});
bpmnModeler.get('eventBus').on('editor.validate.request', (request) => {
if (isGoodCode(request.code)){
} else {
}
bpmnModeler.get('eventBus').fire('editor.validate.response', {passing: true, msg: "msg"});
});
bpmnModeler.get('eventBus').on('editor.scripts.request', () => {
let scripts = [{name: "", description: ""}]
bpmnModeler.get('eventBus').fire('editor.scripts.response', {scripts: scripts});
});
bpmnModeler.get('eventBus').on('editor.objects.request', () => {
let data = [{userId: "int", description: "string"}]
bpmnModeler.get('eventBus').fire('editor.scripts.response', {objects: data});
});
For proper styling integrate the embedded style sheet:
<link rel="stylesheet" href="diagram-js-code-editor/assets/diagram-js-code-editor.css" />
Please see this example for a more detailed instruction.
License
MIT