Merge pull request #12 from umb/issue_5

Add documentation overlay #5
mesoneer-ag · Aug 16, 2017 · 944838c · 944838c
2 parents acef50c + 0a71a6c
commit 944838c
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 46 deletions.
diff --git a/client/PropertyInfoPlugin.js b/client/PropertyInfoPlugin.js
@@ -68,7 +68,7 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
             var elements = elementRegistry.getAll();
             for (var elementCount in elements) {
                 var elementObject = elements[elementCount];
-                if (elementObject.businessObject.$instanceOf('bpmn:FlowNode') || element.businessObject.$instanceOf('bpmn:Participant')) {
+                if (elementObject.businessObject.$instanceOf('bpmn:FlowNode') || elementObject.businessObject.$instanceOf('bpmn:Participant')) {
                     addStyle(elementObject);
                 }
             }
@@ -83,10 +83,35 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
             }
         }
 
+        elementOverlays[element.id] = [];
+
+        if( element.businessObject.documentation !== undefined &&
+            element.businessObject.documentation.length > 0 &&
+            element.businessObject.documentation[0].text.trim() !== ""){
+
+            var text = element.businessObject.documentation[0].text;
+            text = text.replace(/(?:\r\n|\r|\n)/g, '<br />');
+
+
+            elementOverlays[element.id].push(
+            overlays.add(element, 'badge', {
+                position: {
+                    top: 4,
+                    right: 4
+                },
+                html: '<div class="doc-val-true" data-badge="D"></div><div class="doc-val-hover" data-badge="D">'+text+'</div>'
+            }));
+        }
+
         if (element.businessObject.extensionElements === undefined && element.businessObject.$instanceOf('bpmn:FlowNode')) {
             return;
         }
 
+        //Do not process the label of an element
+        if (element.type === "label") {
+            return;
+        }
+
         if (!overlaysVisible) {
             return;
         }
@@ -271,7 +296,7 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
 
         }
 
-        elementOverlays[element.id] = badges;
+        pushArray(elementOverlays[element.id],badges);
     }
 
     function uniqBy(a, key) {
@@ -282,6 +307,15 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
         })
     }
 
+    function pushArray(list, other) {
+        var len = other.length;
+        var start = list.length;
+        list.length = start + len;
+        for (var i = 0; i < len; i++ , start++) {
+            list[start] = other[i];
+        }
+    }
+
 }
 
 PropertyInfoPlugin.$inject = ['eventBus', 'overlays', 'elementRegistry', 'editorActions'];

diff --git a/client/client-bundle.js b/client/client-bundle.js
@@ -69,7 +69,7 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
             var elements = elementRegistry.getAll();
             for (var elementCount in elements) {
                 var elementObject = elements[elementCount];
-                if (elementObject.businessObject.$instanceOf('bpmn:FlowNode') || element.businessObject.$instanceOf('bpmn:Participant')) {
+                if (elementObject.businessObject.$instanceOf('bpmn:FlowNode') || elementObject.businessObject.$instanceOf('bpmn:Participant')) {
                     addStyle(elementObject);
                 }
             }
@@ -84,10 +84,35 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
             }
         }
 
+        elementOverlays[element.id] = [];
+
+        if( element.businessObject.documentation !== undefined &&
+            element.businessObject.documentation.length > 0 &&
+            element.businessObject.documentation[0].text.trim() !== ""){
+
+            var text = element.businessObject.documentation[0].text;
+            text = text.replace(/(?:\r\n|\r|\n)/g, '<br />');
+
+
+            elementOverlays[element.id].push(
+            overlays.add(element, 'badge', {
+                position: {
+                    top: 4,
+                    right: 4
+                },
+                html: '<div class="doc-val-true" data-badge="D"></div><div class="doc-val-hover" data-badge="D">'+text+'</div>'
+            }));
+        }
+
         if (element.businessObject.extensionElements === undefined && element.businessObject.$instanceOf('bpmn:FlowNode')) {
             return;
         }
 
+        //Do not process the label of an element
+        if (element.type === "label") {
+            return;
+        }
+
         if (!overlaysVisible) {
             return;
         }
@@ -272,7 +297,7 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
 
         }
 
-        elementOverlays[element.id] = badges;
+        pushArray(elementOverlays[element.id],badges);
     }
 
     function uniqBy(a, key) {
@@ -283,6 +308,15 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
         })
     }
 
+    function pushArray(list, other) {
+        var len = other.length;
+        var start = list.length;
+        list.length = start + len;
+        for (var i = 0; i < len; i++ , start++) {
+            list[start] = other[i];
+        }
+    }
+
 }
 
 PropertyInfoPlugin.$inject = ['eventBus', 'overlays', 'elementRegistry', 'editorActions'];
@@ -299,47 +333,47 @@ var plugin = require('./PropertyInfoPlugin');
 registerBpmnJSPlugin(plugin);
 
 },{"./PropertyInfoPlugin":1,"camunda-modeler-plugin-helpers":3}],3:[function(require,module,exports){
-/**
- * Validate and register a client plugin.
- *
- * @param {Object} plugin
- * @param {String} type
- */
-function registerClientPlugin(plugin, type) {
-  var plugins = window.plugins || [];
-  window.plugins = plugins;
-
-  if (!plugin) {
-    throw new Error('plugin not specified');
-  }
-
-  if (!type) {
-    throw new Error('type not specified');
-  }
-
-  plugins.push({
-    plugin: plugin,
-    type: type
-  });
-}
-
-/**
- * Validate and register a bpmn-js plugin.
- *
- * Example use:
- *
- *    var registerBpmnJSPlugin = require('./camundaModelerPluginHelpers').registerBpmnJSPlugin;
- *    var module = require('./index');
- *
- *    registerBpmnJSPlugin(module);
- *
- * @param {Object} plugin
- */
-function registerBpmnJSPlugin(plugin) {
-  registerClientPlugin(plugin, 'bpmn.modeler.additionalModules');
-}
-
-module.exports.registerBpmnJSPlugin = registerBpmnJSPlugin;
+/**
+ * Validate and register a client plugin.
+ *
+ * @param {Object} plugin
+ * @param {String} type
+ */
+function registerClientPlugin(plugin, type) {
+  var plugins = window.plugins || [];
+  window.plugins = plugins;
+
+  if (!plugin) {
+    throw new Error('plugin not specified');
+  }
+
+  if (!type) {
+    throw new Error('type not specified');
+  }
+
+  plugins.push({
+    plugin: plugin,
+    type: type
+  });
+}
+
+/**
+ * Validate and register a bpmn-js plugin.
+ *
+ * Example use:
+ *
+ *    var registerBpmnJSPlugin = require('./camundaModelerPluginHelpers').registerBpmnJSPlugin;
+ *    var module = require('./index');
+ *
+ *    registerBpmnJSPlugin(module);
+ *
+ * @param {Object} plugin
+ */
+function registerBpmnJSPlugin(plugin) {
+  registerClientPlugin(plugin, 'bpmn.modeler.additionalModules');
+}
+
+module.exports.registerBpmnJSPlugin = registerBpmnJSPlugin;
 
 },{}],4:[function(require,module,exports){
 (function (global){

diff --git a/style/style.css b/style/style.css
@@ -29,4 +29,44 @@
 
 .badge-red:after {
     background: #D2335C;
-}
+}
+
+.doc-val-true {
+    background-color: transparent;
+    width: 24px;
+    height: 24px;
+    border-radius: 0px 9px;
+    margin: -0.25em 0 0 -1.75em;
+    border-bottom: 12px solid transparent;
+    border-left: 12px solid transparent;
+    border-right: 12px solid #FFDE00;
+    border-top: 12px solid #FFDE00;
+}
+
+.doc-val-true::after {
+     content: "D";
+     color: #000;
+     background: none;
+     display: block;
+     margin: -11px 0 0 1px;
+     font-size: 10px;
+     position: absolute;
+ }
+
+.doc-val-true:hover + .doc-val-hover {
+    display: block;
+}
+
+.doc-val-hover {
+    display: none;
+    width: 200px;
+    height: 100px;
+    position: absolute;
+    margin: -11.5em 0 0 -13em;
+    border: 2px solid #D38C17;
+    border-radius: 10px;
+    box-shadow: 0px 1px 5px 0px #000;
+    background-color: #FFDE00;
+    padding: 5px 7px;
+    overflow: hidden;
+}