BPMN and DMN Standalone Editors

In 0.7.2.alpha3 we started shipping a new component of the KIE tooling, what we’re calling Standalone Editors.

These Standalone Editors provide a straightforward way to use our tried-and-true DMN and BPMN Editors embedded in your own web applications.

The editors are now distributed in a self contained library that provides an all-in-one JavaScript file for each of them, that can be interacted using a comprehensive API for setup and control of them.

Installation

In this release, you can choose from three ways to install the Standalone Editors:

  1. Use our hosted JS files directly
  1. Manual download of each JS file
  1. NPM package
  • Available at https://www.npmjs.com/package/@kogito-tooling/kie-editors-standalone
  • To add it to your package.json file:
    • npm install @kogito-tooling/kie-editors-standalone
  • To import each Editor library in your TypeScript file:
    • import * as DmnEditor from "@kogito-tooling/kie-editors-standalone/dist/dmn"
    • import * as BpmnEditor from "@kogito-tooling/kie-editors-standalone/dist/bpmn"

Usage

The API is the same for both editors. Here is an example on how to open the DMN Editor:

Parameters description:

  • container: HTML element in which the Editor will be appended to.
  • initialContent: Promise to a DMN model content. Can be empty. Examples:
    • Promise.resolve("")
    • Promise.resolve("<DIAGRAM_CONTENT_DIRECTLY_HERE>")
    • fetch("MyDmnModel.dmn").then(content => content.text())
  • readOnly (optional, defaults to false): Use false to allow content edition, and true for read-only mode, in which the Editor will not allow changes. WARNING: Currently only the DMN Editor supports read-only mode.
  • origin (optional, defaults to window.location.origin): If for some reason your application needs to change this parameter, you can use it.
  • resources (optional, defaults to []): Map of resources that will be provided for the Editor. This can be used, for instance, to provide included models for the DMN Editor or Work Item Definitions for the BPMN Editor. Each entry in the map has the resource name as its key and an object containing the content-type (text or binary) and the resource content (Promise similar to the initialContent parameter) as its value.

The returned object will contain the methods needed to manipulate the Editor:

  • getContent(): Promise<string>: Returns a Promise containing the Editor content.
  • setContent(content: string): void: Sets the content of the Editor.
  • getPreview(): Promise<string>: Returns a Promise containing the SVG string of the current diagram.
  • subscribeToContentChanges(callback: (isDirty: boolean) => void): (isDirty: boolean) => void: Setup a callback to be called on every content change in the Editor. Returns the same callback to be used for unsubscription.
  • unsubscribeToContentChanges(callback: (isDirty: boolean) => void): void: Unsubscribes the passed callback from content changes.
  • markAsSaved(): void: Resets the Editor state, signalizing that its content is saved. This will also fire the subscribed callbacks of content changes.
  • undo(): void: Undo the last change in the Editor. This will also fire the callbacks subscribed for content changes.
  • redo(): void:  Redo the last undone change in the Editor. This will also fire the callbacks subscribed for content changes.
  • close(): void: Closes the Editor.
  • getElementPosition(selector: string): Promise<Rect>: Provides an alternative for extending the standard query selector when the element lives inside a canvas or even a video component. The selector parameter must follow the format of “:::”, e.g. Canvas:::MySquare or Video:::PresenterHand. Returns a Rect representing the element position.
  • envelopeApi: MessageBusClientApi<KogitoEditorEnvelopeApi>: Advanced Editor API. See more details in MessageBusClientApi and KogitoEditorEnvelopeApi.

Walk-through

Now let’s implement an application that provides the DMN Editor and adds a simple toolbar to the top that explores the main features of the API.

First, we start with a simple HTML page, and add a script tag with the DMN Standalone Editor JS library. We also add a <div> for the toolbar and a <div> for the Editor.

For the toolbar, we will add a few buttons, that will take advantage of the Editor’s API:

<div class="toolbar">
<span id="unsavedChanges" class="hidden">File contains unsaved changes.</span>
<button id="undo">Undo</button>
<button id="redo">Redo</button>
<button id="download">Download</button>
<button id="downloadSvg">Download SVG</button>
</div>
view raw file3.html hosted with ❤ by GitHub

With the HTML ready, we can add a script to open the editor:

const editor = DmnEditor.open({
container: document.getElementById("dmn-editor-container"),
initialContent: Promise.resolve(""),
readOnly: false
});
view raw file4.js hosted with ❤ by GitHub

This script will open an empty and modifiable DMN Editor inside the div#dmn-editor-container. But we still have to implement the toolbar actions. To be able to undo and redo changes, we can add the following script:

document.getElementById("undo").addEventListener("click", () => {
editor.undo();
});
document.getElementById("redo").addEventListener("click", () => {
editor.redo();
});
view raw file5.js hosted with ❤ by GitHub

To be able to retrieve the content from the Editor and, for example, download it, we can add this:

document.getElementById("download").addEventListener("click", () => {
editor.getContent().then(content => {
const elem = window.document.createElement("a");
elem.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
elem.download = "model.dmn";
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
editor.markAsSaved();
});
});
view raw file6.js hosted with ❤ by GitHub

A similar approach is used to make the diagram SVG available for download:

document.getElementById("downloadSvg").addEventListener("click", () => {
editor.getPreview().then(svgContent => {
const elem = window.document.createElement("a");
elem.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgContent);
elem.download = "model.svg";
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
});
});
view raw file7.js hosted with ❤ by GitHub

Finally, we can also subscribe for changes in the Editor, and be notified when its content changes:

editor.subscribeToContentChanges(isDirty => {
if (isDirty) {
document.getElementById("unsavedChanges").classList.remove("hidden");
} else {
document.getElementById("unsavedChanges").classList.add("hidden");
}
});
view raw file8.js hosted with ❤ by GitHub

We can also add some style to the <head> to make the Editor use the full page:

<style>
#dmn-editor-container {
height: calc(100vh 50px);
}
.toolbar {
height: 30px;
}
.hidden {
display: none;
}
</style>
view raw file9.html hosted with ❤ by GitHub

Then it looks like this:

And here is the full code:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#dmn-editor-container {
height: calc(100vh 50px);
}
.toolbar {
height: 30px;
}
.hidden {
display: none;
}
</style>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://kiegroup.github.io/kogito-online/standalone/dmn/index.js"></script>
</head>
<body>
<div class="toolbar">
<span id="unsavedChanges" class="hidden">File contains unsaved changes.</span>
<button id="undo">Undo</button>
<button id="redo">Redo</button>
<button id="download">Download</button>
<button id="downloadSvg">Download SVG</button>
</div>
<div id="dmn-editor-container" />
<script>
const editor = DmnEditor.open({
container: document.getElementById("dmn-editor-container"),
initialContent: Promise.resolve(""),
readOnly: false
});
document.getElementById("undo").addEventListener("click", () => {
editor.undo();
});
document.getElementById("redo").addEventListener("click", () => {
editor.redo();
});
document.getElementById("download").addEventListener("click", () => {
editor.getContent().then(content => {
const elem = window.document.createElement("a");
elem.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
elem.download = "model.dmn";
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
editor.markAsSaved();
});
});
document.getElementById("downloadSvg").addEventListener("click", () => {
editor.getPreview().then(svgContent => {
const elem = window.document.createElement("a");
elem.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgContent);
elem.download = "model.svg";
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
});
});
editor.subscribeToContentChanges(isDirty => {
if (isDirty) {
document.getElementById("unsavedChanges").classList.remove("hidden");
} else {
document.getElementById("unsavedChanges").classList.add("hidden");
}
});
</script>
</body>
</html>
view raw file10.html hosted with ❤ by GitHub

We hope this new distribution is useful to you, and stay tuned for new updates!

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments