Added Overlays to show the presence of tilt elements

.bpmnlintrc

@@ -3,8 +3,8 @@
     "plugin:custom/recommended"
   ],
   "rules": {
-    "custom/process-must-contain-tilt-meta": "off",
-    "custom/controller-must-be-completely-filled": "off",
+    "custom/process-must-contain-tilt-meta": "error",
+    "custom/controller-must-be-completely-filled": "error",
     "label-required": "off"
   }
 }

.github/workflows/build_and_release.yml

@@ -16,7 +16,7 @@ jobs:
           npm install
           npm run all
           sed -i "s/TILT Extension (Development Build)/TILT Extension ${{ github.ref_name }}/" ./index.js
-          zip tilt-release.zip -r ./dist ./client ./index.js ./README.md ./LICENSE.md ./example_process.bpmn
+          zip tilt-release.zip -r ./dist ./client ./menu ./index.js ./README.md ./LICENSE.md ./example_process.bpmn
 
       - name: Create Release
         id: create_release

bpmnlint-plugin-custom/index.js

@@ -2,7 +2,8 @@ module.exports = {
     configs: {
       recommended: {
         rules: {
-          'process-must-contain-tilt-meta': 'off'
+          'process-must-contain-tilt-meta': 'error',
+          'third-country-transfers-are-disallowed':'warn'
         }
       }
     }

bpmnlint-plugin-custom/rules/controller-must-be-completely-filled.js

@@ -15,7 +15,7 @@ module.exports = function() {
         if (is(node, 'bpmn:StartEvent')) {
             check_passed = test_if_properties_exists(node,tilt_type,propertiesToTest)
             if(!check_passed){
-                reporter.report(node.id, "Must Contain all this and that...");
+                reporter.report(node.id, "[ TILT ]\tMust Contain all this and that...");
             }
         }
     }

bpmnlint-plugin-custom/rules/process-must-contain-tilt-meta.js

@@ -15,7 +15,7 @@ module.exports = function() {
         if (is(node, 'bpmn:Process')) {
             check_passed = test_if_properties_exists(node,tilt_type,propertiesToTest)
             if(!check_passed){
-                reporter.report(node.id, "The business process needs to contain all required TILT meta fields.");
+                reporter.report(node.id, "[ TILT ]\tThe business process needs to contain all required TILT meta fields.");
             }
         }
     }

bpmnlint-plugin-custom/rules/third-country-transfers-are-disallowed.js

@@ -0,0 +1,22 @@
+const { test_if_is_tilt } = require("../tilt-rule-helper");
+const {
+    is
+  } = require('bpmnlint-utils');
+
+
+module.exports = function() {
+    function check(node, reporter) {
+        let check_passed  = false;
+        if (is(node, 'bpmn:MessageFlow')) {
+            debugger;
+            check_passed = !test_if_is_tilt(node,"tilt:ThirdCountryTransfers")
+            if(!check_passed){
+                reporter.report(node.id, "[ TILT ]\tThird country transfer detected!");
+            }
+        }
+    }
+
+    return {
+      check: check
+    };
+};

bpmnlint-plugin-custom/tilt-rule-helper.js

@@ -10,6 +10,17 @@ export function test_if_properties_exists(node, tilt_type, propertiesToTest){
     };
     return false;
 }
+
+export function test_if_is_tilt(node, tilt_type){
+    if ("extensionElements" in node){
+        for (let i = 0; i < node["extensionElements"]["values"].length; i++) {
+            if (node["extensionElements"]["values"][i].$type == tilt_type){
+                return true;
+            }
+          }
+    };
+    return false;
+}
 export function test(){
     return false;
 }

client/index.js

@@ -7,18 +7,19 @@ import tiltPropertiesExtensionModule from './tilt-properties';
 import tiltModdleDescriptor from "./descriptors/tilt";
 
 import ExtractButton from './tilt-extractor/extract-button';
+import tiltOverlayProvider from './tilt-overlay'
 
-var tiltExtractor = require('./tilt-extractor/tilt-extractor');
+//var tiltExtractor = require('./tilt-extractor/tilt-extractor');
 
 registerPlatformBpmnJSPlugin(tiltPropertiesExtensionModule);
 registerBpmnJSModdleExtension(tiltModdleDescriptor);
-
+registerPlatformBpmnJSPlugin(tiltOverlayProvider)
 
 
 //provide { config, resolver } as a `lintRules.${tabType}` plug-in
 registerClientPlugin({ config, resolver }, 'lintRules.cloud-bpmn');
 registerClientPlugin({ config, resolver }, 'lintRules.bpmn');
 
-registerBpmnJSPlugin(tiltExtractor);
+//registerBpmnJSPlugin(tiltExtractor);
 
 registerClientExtension(ExtractButton);

client/style/style.css

@@ -0,0 +1,15 @@
+.filter-green svg{
+    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
+}
+.filter-error svg{
+    filter: invert(34%) sepia(86%) saturate(2067%) hue-rotate(342deg) brightness(88%) contrast(99%);
+}
+.filter-ok svg{
+    filter: invert(41%) sepia(55%) saturate(382%) hue-rotate(128deg) brightness(101%) contrast(85%);
+}
+.filter-warn svg{
+    filter: invert(81%) sepia(9%) saturate(1984%) hue-rotate(1deg) brightness(94%) contrast(86%);;
+}
+.filter-tilt svg{
+    filter: invert(21%) sepia(85%) saturate(5617%) hue-rotate(269deg) brightness(93%) contrast(91%);
+}

client/tilt-extractor/extract-button.js

@@ -1,12 +1,13 @@
 import React, { Fragment, PureComponent } from 'camunda-modeler-plugin-helpers/react';
 import { Fill } from 'camunda-modeler-plugin-helpers/components';
+import tiltIcon from "../../assets/tilt.svg"
 const { getBusinessObject } = require('bpmn-js/lib/util/ModelUtil');
 import { v4 as uuidv4 } from 'uuid';
 
 import classNames from 'classnames';
 import {getPropertyFromModdle } from '../tilt-properties/props/moddle-property-io';
 import TILT from "../descriptors/tilt.json"
-import { buildTiltDocument, cleanPropertyThroughSchema, filterObjectsWithTiltProperty, getBusinessObjects } from './extractor';
+import { buildTiltDocument } from './extractor';
 
 export default class ExtractButton extends PureComponent {
   constructor() {
@@ -40,7 +41,7 @@ export default class ExtractButton extends PureComponent {
 
     if(element.hasOwnProperty("$type") && element.$type.startsWith("tilt")){
       tilt_properties.push(element);
-      console.log(element)
+      //console.log(element)
       return tilt_properties;
 
     }
@@ -136,15 +137,15 @@ export default class ExtractButton extends PureComponent {
   render() {
     // we can use fills to hook React components into certain places of the UI
     return <Fragment>
-      <Fill slot="status-bar__app" group="1_tilt_save">
+      <Fill slot="status-bar__file" group="1_tilt_save">
         <button
           ref={ this._buttonRef }
           className={ classNames('tilt-btn','btn') }
           onClick={ () =>  this.saveFile()}>
-          Click to create a TILT object...
+          TILT
         </button>
       </Fill>
-    </Fragment>;onClick
+    </Fragment>;
   }
 }
 

client/tilt-extractor/extractor.js

@@ -16,7 +16,7 @@ export function filterObjectsWithTiltProperty(businessObjects,tiltProperty){
         extensionElements = businessObjects[bo].get("extensionElements");
         if(extensionElements){
             if(!extensionElements.hasOwnProperty("values")){
-                console.log(extensionElements)
+                //console.log(extensionElements)
                 continue;
             }
             tiltProperties.push(...extensionElements.values.filter(e => e.$type == tiltProperty))
@@ -85,7 +85,7 @@ export function getSchemaProperty(propertyName, tiltSchema = schema){
             }
         }
     }
-    console.log(propertyName)
+    //console.log(propertyName)
     return {};
 }
 

client/tilt-extractor/tilt-extractor.js

@@ -16,8 +16,9 @@ function TiltExtractor(injector, eventBus, bpmnRules, editorActions, canvas, com
 
   editorActions.register({
     extractTiltFromBpmn: function() {
-      let bo = getBusinessObject(canvas.getRootElement())
-      self.extract();
+      //let bo = getBusinessObject(canvas.getRootElement())
+      //self.extract();
+      debugger;
     }
   });
 }

client/tilt-overlay/index.js

@@ -0,0 +1,6 @@
+import TiltOverlayProvider from './overlay';
+
+export default {
+  __init__: [ 'tiltOverlayProvider' ],
+  tiltOverlayProvider: [ 'type', TiltOverlayProvider ]
+};

client/tilt-overlay/overlay.js

@@ -0,0 +1,142 @@
+import tiltIcon from "../../assets/tilt.svg";
+import tiltControllerIcon from "../../assets/controller.svg";
+import tiltDataDisclosedIcon from "../../assets/datadisclosed.svg";
+import flagIcon from "../../assets/flag.svg";
+import tiltDataProtectionOfficerIcon from "../../assets/protection.svg";
+import tiltRepresentativeIcon from "../../assets/representative.svg"
+import { getBusinessObject } from "bpmn-js/lib/util/ModelUtil";
+
+const events = [
+  'commandStack.element.updateModdleProperties.postExecuted',
+  'shape.added'
+]
+const toggleEvents = ['canvas.viewbox.changed']
+
+function addTiltOverlays(overlays,e){
+  const element = getElementFromEvent(e);
+  const bo = getBusinessObject(element);
+  const extensionElements = bo.get("extensionElements");
+
+  // Discover all existing Tilt Extensions
+  var arr = [];
+  if(extensionElements){
+    for(let v in extensionElements.values){
+      let t = extensionElements.values[v].$type;
+      if(t.startsWith("tilt")){
+        if(!arr.includes(t)){
+          arr.push(t)
+        }
+      }
+    }
+  }
+
+  // Remove existing Overlays
+  const currentO = overlays.get({element: element.id});
+  for(let o in currentO){
+    debugger;
+    overlays.remove(currentO[o].id)
+  }
+
+  // Add new Overlays
+  for(let a in arr){
+    switch(arr[a]) {
+        case "tilt:Controller":
+          addOverlay(overlays,element.id,tiltControllerIcon);
+          break;
+        case "tilt:DataDisclosed":
+          addOverlay(overlays,element.id,tiltDataDisclosedIcon);
+          break;
+        case "tilt:DataProtectionOfficer":
+          addOverlay(overlays,element.id,tiltDataProtectionOfficerIcon);
+          break;
+        case "tilt:Representative":
+          addOverlay(overlays,element.id,tiltRepresentativeIcon);
+          break;
+        case "tilt:ThirdCountryTransfers":
+          //let deltaX = Math.abs(element.waypoints[0].x - element.waypoints[element.waypoints.length-1].x);
+          //let deltaY = Math.abs(element.waypoints[0].y - element.waypoints[element.waypoints.length-1].y);
+
+          overlays.add(`${element.id}`, {
+            html: `<div class="filter-error">${flagIcon}</div>`,
+            position: {
+              top: 10,//deltaY/2,
+              left: 10//deltaX/2
+            }
+          });
+          break;
+        default:
+          addOverlay(overlays,element.id,tiltIcon)
+          break;
+          // code block
+      }
+  }
+  return {}
+}
+
+function addOverlay(overlays,id,icon, c = "filter-tilt"){
+  let g = overlays.get({element: id})
+  overlays.add(`${id}`, {
+    html: `<div class="${c}">${icon}</div>`,
+    position: {
+      left: -5+g.length * 24,
+      top: -30
+    }
+  });
+}
+
+function getElementFromEvent(e){
+  if(e.hasOwnProperty("context")){
+    return e.context.element;
+  }else{
+    return e.element;
+  }
+}
+
+export default class TiltOverlayProvider {
+    constructor(injector,overlays,eventBus,editorActions) {
+      //this._injector = injector;
+      //this._overlays = overlays;
+      window.toggleTilt = true;
+      this.addEventListener(eventBus,events,overlays);
+
+      //Whenever there is a viebox change we need to reactivate the toggle.
+      toggleEvents.forEach(function(event) {
+        eventBus.on(event, function(e) {
+          if(window.toggleTilt){
+            overlays.show();
+          }else{
+            overlays.hide()
+          }
+          //console.log(event +": "+e)
+        });
+       });
+
+
+      editorActions.register({
+        toggleTiltIcons: function() {
+          window.toggleTilt = !window.toggleTilt;
+          if(window.toggleTilt){
+            overlays.show();
+          }else{
+            overlays.hide()
+          }
+          //console.log(window.toggleTilt)
+        }
+      });
+      //editorActions.trigger("toggleTiltIcons")
+    }
+    addEventListener(eventBus,eventList,overlays){
+      eventList.forEach(function(event) {
+        eventBus.on(event, function(e) {
+          addTiltOverlays(overlays,e);
+        });
+       });
+    }
+  }
+
+  TiltOverlayProvider.$inject = [
+    "injector",
+    "overlays",
+    "eventBus",
+    "editorActions"
+  ];

client/tilt-properties/tilt-extension-provider.js

@@ -42,8 +42,9 @@ export default class TiltPropertiesExtensionProvider {
       }else if(is(element, 'bpmn:StartEvent')) {
 
         groups.push(createTiltPropertiesGroup(element,this._injector,[
+          new PropertyBlueprint("tilt:Meta",{},null),
           new PropertyBlueprint("tilt:Controller",{representative:[]},null)
-          ],[1]));
+          ],[1,1]));
 
       }else if(is(element, 'bpmn:DataObjectReference')) {