Integrate icons as SVGs and add new modeling constructs (#50)

* fix palette icons

* replace png in menu

* integrate all icons

* adapt some icons

* remove margin

Co-Authored-By: SharonNaemi <49727936+SharonNaemi@users.noreply.github.com>

* add svg in replace menu

* remove fontello, add svg

Co-Authored-By: LaviniaStiliadou <livia_16@live.de>

* fix layouting

* add circuit cutting task, cutting result combination task

* fix setting of maxNumSubCircuits

* update matched to support new tasks for transformation

---------

Co-authored-by: LaviniaStiliadou <livia_16@live.de>
Co-authored-by: mbeisel <beiselmn@gmail.com>

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';

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,
                 }
-            },
+            }
         };
     }
 }

components/bpmn-q/modeler-component/extensions/data-extension/resources/data-flow-styles.css

@@ -1,7 +1,7 @@
 .dataflow-transformation-task-icon:before {
     content: "";
-    width: 20px;
-    height: 15px;
+    width: 5px;
+    height: 5px;
     background-size: contain;
     background-image: url("../resources/icons/change-exchange-icon.svg");
     background-repeat: no-repeat;
@@ -10,10 +10,14 @@
     margin: 0 6px 0 0;
 }
 
+.dataflow-transformation-task-icon:hover {
+    filter: invert(0.5) sepia(1) hue-rotate(165deg) saturate(4) brightness(1);
+}
+
 .dataflow-data-store-map-icon:before {
     content: "";
-    width: 20px;
-    height: 15px;
+    width: 30px;
+    height: 30px;
     background-size: contain;
     background-image: url("../resources/icons/data-store-map-icon.svg");
     background-repeat: no-repeat;
@@ -22,40 +26,72 @@
     margin: 0 6px 0 0;
 }
 
+.dataflow-data-store-map-icon:hover {
+    filter: invert(0.5) sepia(1) hue-rotate(165deg) saturate(4) brightness(1);
+}
+
 .dataflow-data-map-object-icon:before {
     content: "";
-    width: 20px;
-    height: 15px;
+    width: 10px;
+    height: 10px;
     background-size: contain;
     background-image: url("../resources/icons/data-map-object-icon.svg");
     background-repeat: no-repeat;
     display: inline-block;
-    float: left;
-    margin: 0 6px 0 0;
+}
+
+.dataflow-data-map-object-menu-icon:before {
+    content: "";
+    width: 10px;
+    height: 10px;
+    background-size: contain;
+    background-image: url("../resources/icons/data-map-object-icon.svg");
+    background-repeat: no-repeat;
+    display: inline-block;
+}
+
+.dataflow-data-map-object-icon:hover {
+    filter: invert(0.5) sepia(1) hue-rotate(165deg) saturate(4) brightness(1);
 }
 
 .dataflow-transformation-task-palette-icon {
-    content: url("../resources/icons/transformation-task.svg");
-    padding: 11px 8px 11px 10px;
-    box-sizing: border-box;
-    margin: 0;
-    outline: none;
+    content: "";
+    width: 12px;
+    height: 12px;
+    background-size: contain;
+    background-image: url("../resources/icons/transformation-task.svg");
+    background-repeat: no-repeat;
+    display: inline-block;
+    transform: scale(0.6);
+}
+
+.dataflow-transformation-task-palette-icon:hover {
+    filter: invert(0.5) sepia(1) hue-rotate(165deg) saturate(4) brightness(1);
 }
 
 .dataflow-data-store-map-task-palette-icon {
-    content: url("../resources/icons/data-store-map-icon.svg");
-    padding: 10px;
-    box-sizing: border-box;
-    margin: 0;
-    outline: none;
+    content: "";
+    background-size: contain;
+    background-image: url("../resources/icons/data-store-map-icon.svg");
+    background-repeat: no-repeat;
+    display: inline-block;
+    transform: scale(0.6);
+}
+
+.dataflow-data-store-map-task-palette-icon:hover {
+    filter: invert(0.5) sepia(1) hue-rotate(165deg) saturate(4) brightness(1);
 }
 
 .dataflow-data-map-object-palette-icon {
-    content: url("../resources/icons/data-map-object-icon.svg");
-    padding: 10px 13px 10px 14px;
-    box-sizing: border-box;
-    margin: 0;
-    outline: none;
+    content: "";
+    background-size: contain;
+    background-image: url("../resources/icons/data-map-object-icon.svg");
+    background-repeat: no-repeat;
+    transform: scale(0.8);
+}
+
+.dataflow-data-map-object-palette-icon:hover {
+    filter: invert(0.5) sepia(1) hue-rotate(165deg) saturate(4) brightness(1);
 }
 
 .dataflow-transformation-association-icon:before {
@@ -104,4 +140,24 @@
     display: inline-block;
     float: left;
     margin: 0 6px 0 0;
+}
+
+.dataflow-transformation-tasks-menu-icon:before {
+    content: "";
+    width: 5px;
+    height: 5px;
+    background-size: contain;
+    background-image: url("../resources/icons/transformation-task.svg");
+    background-repeat: no-repeat;
+    display: inline-block;
+}
+
+.dataflow-transformation-task-menu-icon:before {
+    content: "";
+    width: 5px;
+    height: 5px;
+    background-size: contain;
+    background-image: url("../resources/icons/change-exchange-icon.svg");
+    background-repeat: no-repeat;
+    display: inline-block;
 }