Merge remote-tracking branch 'origin/master' into feature/plugin-depe…

…ndencies

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

@@ -1,7 +1,4 @@
 import 'bpmn-js/dist/assets/diagram-js.css';
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
 import 'bpmn-js-properties-panel/dist/assets/element-templates.css';
 import 'bpmn-js-properties-panel/dist/assets/properties-panel.css';
 import './editor/resources/styling/modeler.css';
@@ -22,6 +19,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 +78,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 +92,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 +130,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 +190,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 +277,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

@@ -85,19 +85,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/menu/DataFlowReplaceMenuProvider.js

@@ -139,7 +139,7 @@ export default class DataFlowReplaceMenuProvider {
         // create replacement entries for each loaded transformation task configuration
         let options = createConfigurationsEntries(
             element,
-            'dataflow-transformation-task-icon',
+            'bpmn-icon-dataflow-transformation-task',
             getTransformationTaskConfigurations(),
             bpmnFactory,
             modeling,
@@ -156,7 +156,7 @@ export default class DataFlowReplaceMenuProvider {
                 'Transformation Tasks',
                 popupMenu,
                 options,
-                'dataflow-transformation-task-icon'
+                'dataflow-transformation-tasks-menu-icon'
             )
         };
     }
@@ -184,7 +184,7 @@ export default class DataFlowReplaceMenuProvider {
             const definition = {
                 label: 'Transformation Association',
                 id: entryId,
-                className: 'dataflow-transformation-association-icon',
+                className: 'bpmn-icon-dataflow-transformation-association',
             };
 
             // define action to replace with a transformation association
@@ -225,7 +225,7 @@ export default class DataFlowReplaceMenuProvider {
             const definition = {
                 label: 'Data Association',
                 id: entryId,
-                className: 'dataflow-data-association-icon',
+                className: 'bpmn-icon-dataflow-data-association-icon',
             };
 
             // create action to replace the transformation association by a data association

components/bpmn-q/modeler-component/extensions/data-extension/menu/DataFlowReplaceOptions.js

@@ -5,7 +5,7 @@ export const TASK = [
     {
         id: 'dataflow-transformation-task',
         label: 'Data Transformation Task',
-        className: 'dataflow-transformation-task-icon',
+        className: 'dataflow-transformation-task-menu-icon',
         target: {
             type: consts.TRANSFORMATION_TASK
         }
@@ -29,7 +29,7 @@ export const DATA_OBJECT = [
     {
         id: 'dataflow-data-map-object',
         label: 'Data Map Object',
-        className: 'dataflow-data-map-object-icon',
+        className: 'dataflow-data-map-object-menu-icon',
         target: {
             type: consts.DATA_MAP_OBJECT
         }

components/bpmn-q/modeler-component/extensions/data-extension/palette/DataFlowPaletteProvider.js

@@ -1,9 +1,5 @@
 import * as consts from '../Constants';
 
-/**
- * Custom palette provider to add entries for creating the modelling elements of the DataFlow extension to the
- * palette of the bpmn-js modeler.
- */
 export default class DataFlowPaletteProvider {
 
     constructor(bpmnFactory, create, elementFactory, palette, translate) {
@@ -16,21 +12,15 @@ export default class DataFlowPaletteProvider {
         palette.registerProvider(this);
     }
 
-    /**
-     * Returns the palette entries for the DataFlow elements
-     */
     getPaletteEntries() {
-        return this.createDataFlowEntries();
+        return this.createPlanqkServiceTaskEntry();
     }
 
-    /**
-     * Returns palette entries to create DataMapObjects, DataStoreMaps and TransformationTasks
-     */
-    createDataFlowEntries() {
+    createPlanqkServiceTaskEntry() {
         const {bpmnFactory, create, elementFactory, translate} = this;
 
-        // start creation of a DataMapObject
-        function createDataMapObject(event) {
+         // start creation of a DataMapObject
+         function createDataMapObject(event) {
             const businessObject = bpmnFactory.create(consts.DATA_MAP_OBJECT);
             let shape = elementFactory.createShape({
                 type: consts.DATA_MAP_OBJECT,
@@ -58,8 +48,8 @@ export default class DataFlowPaletteProvider {
             });
             create.start(event, shape);
         }
+
 
-        // create and return new palette entries
         return {
             // add separator line to delimit the new group
             'dataflow-separator': {
@@ -92,7 +82,7 @@ export default class DataFlowPaletteProvider {
                     click: createTransformationTask,
                     dragstart: createTransformationTask,
                 }
-            },
+            }
         };
     }
 }