Add xml viewer (#70)

* add xml viewer

* remove ace

* add border to resize editor

* enable live update on diagram change

* fix tests

* increase initial size of xml viewer & limit max height

* change size of modeler when xml viewer is enabled

* remove jump after first resize

* remove button from bottom left, add button to toolbar

* add icon

components/bpmn-q/.gitignore

@@ -1,4 +1,5 @@
 node_modules/*
 public/*
 !public/index.html
-bpmnlint-plugin-custom/node_modules/*
+!public/src
+bpmnlint-plugin-custom/node_modules/*

components/bpmn-q/modeler-component/QuantumWorkflowModeler.js

@@ -22,6 +22,7 @@ import { getPluginButtons, getTransformationButtons } from "./editor/plugin/Plug
 import { getPluginConfig, setPluginConfig } from "./editor/plugin/PluginConfigHandler";
 import * as editorConfig from './editor/config/EditorConfigManager';
 import { initEditorEventHandler } from './editor/events/EditorEventHandler';
+import $ from 'jquery';
 
 /**
  * The Quantum Workflow modeler HTML web component which contains the bpmn-js modeler to model BPMN diagrams, an editor
@@ -80,7 +81,7 @@ export class QuantumWorkflowModeler extends HTMLElement {
             <div style="display: flex; flex-direction: column; height: 100%;" class="qwm">
               <div id="button-container" style="flex-shrink: 0;"></div>
               <hr class="qwm-toolbar-splitter" />
-              <div id="main-div" style="display: flex; flex: 1;">
+              <div id="main-div" style="display: flex; flex: 1; height: 100%">
                 <div id="canvas" style="width: 100%"></div>
                 <div id="properties" style="overflow: auto; width:350px; max-height: 93.5vh; background: #f8f8f8;"></div>
               </div>
@@ -94,14 +95,14 @@ export class QuantumWorkflowModeler extends HTMLElement {
         let startX;
         let startWidth;
         let width = panel.style.width;
-        var propertiesElement = document.getElementById("properties");
+        let propertiesElement = document.getElementById("properties");
 
         propertiesElement.addEventListener("mousemove", function (e) {
-            var rect = this.getBoundingClientRect();
-            var x = e.clientX - rect.left;
-            var y = e.clientY - rect.top;
+            let rect = this.getBoundingClientRect();
+            let x = e.clientX - rect.left;
+            let y = e.clientY - rect.top;
 
-            var borderSize = 5;
+            let borderSize = 5;
 
             if (
                 x < borderSize ||
@@ -132,14 +133,14 @@ export class QuantumWorkflowModeler extends HTMLElement {
 
         // Mouse down handler
         function handleMouseDown(event) {
-            var rect = panel.getBoundingClientRect();
-            var x = event.clientX - rect.left;
+            let rect = panel.getBoundingClientRect();
+            let x = event.clientX - rect.left;
 
-            var borderSize = 5;
+            let borderSize = 5;
 
             if (
                 x < borderSize ||
-                x > rect.width - borderSize 
+                x > rect.width - borderSize
             ) {
 
                 isResizing = true;
@@ -192,6 +193,52 @@ export class QuantumWorkflowModeler extends HTMLElement {
 
             isCollapsed = !isCollapsed;
         });
+
+        let editor = document.getElementById('editor');
+        let dragging = false;
+        let aceEditor = ace.edit(editor);
+
+
+        $("#editor_dragbar").mousedown(function (e) {
+            e.preventDefault();
+            dragging = true;
+
+            let editorElement = $("#editor");
+            let editor_wrap = $("#editor_wrap");
+            let dragbar = $("#editor_dragbar");
+            let startY = e.pageY;
+            let startTop = parseInt(editorElement.css("top"));
+            let startHeight = editor_wrap.height();
+
+            $(document).mousemove(function (e) {
+                if (!dragging) return;
+
+                let actualY = e.pageY;
+                let deltaY = startY - actualY;
+                let newTop = startTop - deltaY;
+                let newHeight = startHeight + deltaY;
+                const viewportHeight = window.innerHeight;
+                const heightInVh = (newHeight / viewportHeight) * 100;
+
+                // since we move the editor element up we need to add the actual height of the 
+                // wrapper element
+                const editorHeight = 2 * newHeight;
+                if (newHeight >= 75 && heightInVh <= 89) {
+                    editorElement.css("top", newTop + "px");
+                    editor_wrap.css("height", newHeight + "px");
+                    editorElement.css("height", editorHeight + "px");
+                    dragbar.css("top", newTop - dragbar.height() + "px");
+                    aceEditor.resize();
+                }
+            });
+        });
+
+        $(document).mouseup(function (e) {
+            if (dragging) {
+                dragging = false;
+                $(document).unbind("mousemove");
+            }
+        });
     }
 
     /**
@@ -233,6 +280,11 @@ export class QuantumWorkflowModeler extends HTMLElement {
 
         // load initial workflow
         this.workflowModel = this.workflowModel || getPluginConfig('editor').defaultWorkflow;
+        getModeler().on('commandStack.changed', function () {
+            getModeler().saveXML({ format: true }).then(function (result) {
+                modeler.xml = result;
+            })
+        });
         if (this.workflowModel) {
             loadDiagram(this.workflowModel, getModeler()).then();
         } else {

components/bpmn-q/modeler-component/editor/resources/styling/editor-ui.css

@@ -195,6 +195,16 @@
     background: url("../icons/save-outline-icon.png") no-repeat center center;
 }
 
+#editor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.ace_print-margin {
+    display: none;
+}
+
 .qwm-icon-upload:before {
     content: "";
     width: 15px;
@@ -205,4 +215,17 @@
     background-repeat: no-repeat;
     display: inline-block;
     float: left;
-}
+}
+
+.qwm-icon-xml-viewer:before {
+    content: "";
+    width: 20px;
+    height: 18px;
+    margin-top: 0px;
+    background-size: contain;
+    background-image: url("../icons/xml-viewer-icon.png");
+    background-repeat: no-repeat;
+    display: inline-block;
+    float: left;
+}
+

components/bpmn-q/modeler-component/editor/ui/ButtonToolbar.js

@@ -7,7 +7,7 @@ import ConfigPlugin from "../config/ConfigPlugin";
 import TransformationToolbarButton from "./TransformationToolbarButton";
 import UploadButton from "./UploadButton";
 import ShortcutPlugin from "../shortcut/ShortcutPlugin";
-
+import XMLViewerButton from "./XMLViewerButton";
 
 /**
  * React component which displays the toolbar of the modeler
@@ -34,6 +34,7 @@ export default function ButtonToolbar(props) {
                 <SaveButton modeler={modeler}/>
                 <OpenButton/>
                 <UploadButton/>
+                <XMLViewerButton/>
                 <hr className="qwm-toolbar-splitter"/>
                 <ConfigPlugin/>
                 <hr className="qwm-toolbar-splitter"/>

components/bpmn-q/modeler-component/editor/ui/XMLViewerButton.js

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { getModeler } from "../ModelerHandler";
+import ace from "ace-builds";
+import { loadDiagram } from "../util/IoUtilities";
+
+/**
+ * React button which enables the XML Viewer.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function XMLViewerButton() {
+
+    const [enabledXMLView, setEnabledXMLView] = useState(false);
+    function enableXMLViewer(enabledXMLView) {
+        let modelerContainer = document.getElementById('modeler-container');
+        let editor = document.getElementById('editor');
+        let editorWrap = document.getElementById('editor_wrap');
+        let panel = document.getElementById("properties");
+        let aceEditor = ace.edit(editor);
+        if (!enabledXMLView) {
+            modelerContainer.style.height = '93vh';
+            editor.style.display = 'block';
+            editor.style.height = '93vh';
+            panel.style.display = 'none';
+            editorWrap.style.display = 'block';
+
+            // Dynamically set the value of the editor
+            let xml = getModeler().xml;
+            if (xml.xml != undefined) {
+                xml = xml.xml;
+            }
+            aceEditor.setValue(xml);
+        } else {
+            modelerContainer.style.height = '98vh';
+            editor.style.display = 'none';
+            panel.style.display = 'block';
+            editorWrap.style.display = 'none';
+
+
+            aceEditor.getSession().on('change', function () {
+                update();
+            });
+
+            function update() {
+                let xml = aceEditor.getSession().getValue();
+                loadDiagram(xml, getModeler());
+            }
+        }
+
+        setEnabledXMLView(!enabledXMLView)
+
+    }
+
+    return (
+        <button className="qwm-toolbar-btn" title="Trigger XML Viewer"
+            onClick={() => enableXMLViewer(enabledXMLView)}>
+            <span className="qwm-icon-xml-viewer">
+                <span className="qwm-indent">XML Viewer</span>
+            </span>
+        </button>
+    );
+}

components/bpmn-q/modeler-component/editor/util/IoUtilities.js

@@ -30,7 +30,6 @@ const NEW_DIAGRAM_XML = '<?xml version="1.0" encoding="UTF-8"?>\n' +
  * @returns {Promise<void>}
  */
 export async function saveXmlAsLocalFile(xml, fileName = editorConfig.getFileName()) {
-    console.log(fileName);
     const bpmnFile = await new File([xml], fileName, { type: 'text/xml' });
 
     const link = document.createElement('a');
@@ -82,19 +81,21 @@ export async function getXml(modeler) {
  * @returns {Promise<undefined|*>} Undefined, if an error occurred during import.
  */
 export async function loadDiagram(xml, modeler, dispatchEvent = true) {
+    if (xml !== '') {
+        try {
+            const result = await modeler.importXML(xml);
+            modeler.xml = xml;
 
-    try {
-        const result = await modeler.importXML(xml);
-
-        if (dispatchEvent) {
-            dispatchWorkflowEvent(workflowEventTypes.LOADED, xml, editorConfig.getFileName());
-        }
+            if (dispatchEvent) {
+                dispatchWorkflowEvent(workflowEventTypes.LOADED, xml, editorConfig.getFileName());
+            }
 
-        return result;
-    } catch (err) {
-        console.error(err);
+            return result;
+        } catch (err) {
+            console.error(err);
 
-        return { error: err };
+            return { error: err };
+        }
     }
 }
 

components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js

@@ -5,6 +5,8 @@ import {
 } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
 import * as consts from '../Constants';
 import { isConnectedWith } from '../../../editor/util/ModellingUtilities';
+import { getModeler } from '../../../editor/ModelerHandler';
+import ace from 'ace-builds';
 
 /**
  * Custom rules provider for the DataFlow elements. Extends the BpmnRules.
@@ -22,7 +24,7 @@ export default class CustomRulesProvider extends BpmnRules {
         // copy took place
         eventBus.on('copyPaste.elementsCopied', event => {
             const { tree } = event;
-            
+
             // persist in local storage, encoded as json
             localStorage.setItem('bpmnClipboard', JSON.stringify(tree));
         });
@@ -65,6 +67,22 @@ export default class CustomRulesProvider extends BpmnRules {
                 context.position
             );
         });
+
+        // update xml viewer on diagram change
+        eventBus.on("commandStack.changed", function () {
+            let editor = document.getElementById('editor');
+            let aceEditor = ace.edit(editor);
+            let modeler = getModeler();
+            if (modeler) {
+                modeler.saveXML({ format: true }).then(function (result) {
+                    if (result.xml != undefined) {
+                        result = result.xml;
+                    }
+                    aceEditor.setValue(result);
+                })
+            }
+        });
+
     }
 
     /**

components/bpmn-q/modeler-component/modeler.css

@@ -4,6 +4,23 @@
     right: 0;
 }
 
+.xml-viewer-button {
+    position: absolute;
+    bottom: 45px;
+    left: 20px;
+    z-index: 2;
+}
+
+.ace_editor.ace-tm {
+    width: 99%;
+    top: 0%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
+
 #properties {
     cursor: default;
 }
@@ -16,4 +33,22 @@
 
 body {
     overflow-y: hidden;
+}
+
+#editor_wrap {
+    position: relative;
+    border-bottom: 1px solid #222222;
+}
+
+#editor_dragbar {
+    position: absolute;
+    top: 200;
+    /* Adjust the initial top position as needed */
+    left: 0;
+    right: 0;
+    background-color: #222222;
+    height: 3px;
+    cursor: row-resize;
+    opacity: 1;
+    z-index: 3;
 }