|
<!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> |
