Skip to content

Instantly share code, notes, and snippets.

@paulovmr

paulovmr/file1.js

Last active October 29, 2020 18:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paulovmr/40fbfbf689023840c4d6bd9e32889d44 to your computer and use it in GitHub Desktop.
Save paulovmr/40fbfbf689023840c4d6bd9e32889d44 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
file1.js
const editor = DmnEditor.open({
container: document.getElementById("dmn-editor-container"),
initialContent: Promise.resolve(""),
readOnly: false,
origin: "",
resources: new Map([
[
"MyIncludedModel.dmn",
{
contentType: "text",
content: Promise.resolve("")
}
]
])
});
Raw
file10.html
<!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>
Raw
file2.html
<!DOCTYPE html>
<html lang="en">
<head>
<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"></div>
<div id="dmn-editor-container"></div>
<script><!-- Editor usage will go here. --></script>
</body>
</html>
Raw
file3.html
<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>
Raw
file4.js
const editor = DmnEditor.open({
container: document.getElementById("dmn-editor-container"),
initialContent: Promise.resolve(""),
readOnly: false
});
Raw
file5.js
document.getElementById("undo").addEventListener("click", () => {
editor.undo();
});
document.getElementById("redo").addEventListener("click", () => {
editor.redo();
});
Raw
file6.js
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();
});
});
Raw
file7.js
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);
});
});
Raw
file8.js
editor.subscribeToContentChanges(isDirty => {
if (isDirty) {
document.getElementById("unsavedChanges").classList.remove("hidden");
} else {
document.getElementById("unsavedChanges").classList.add("hidden");
}
});
Raw
file9.html
<style>
#dmn-editor-container {
height: calc(100vh - 50px);
}
.toolbar {
height: 30px;
}
.hidden {
display: none;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment