bpmn-js-bpmnlint - npm Package Compare versions

Comparing version 0.16.0 to 0.17.0

CHANGELOG.md

@@ -9,2 +9,7 @@ # Changelog
 
+## 0.17.0
+
+* `CHORE`: bump to `bpmn-js@8.3.0` and `bpmnlint@7.2.1`
+* `FIX`: display issues for elements without bpmndi on root element level ([#27](https://github.com/bpmn-io/bpmn-js-bpmnlint/issues/27))
+
 ## 0.16.0
@@ -11,0 +16,0 @@

dist/bpmn-js-bpmnlint.umd.js

@@ -27,30 +27,35 @@ (function (global, factory) {
    * @param {ModdleElement} element
-   * @param {Function} fn
+   * @param {{ enter?: Function; leave?: Function }} options
    */
-  var traverse = function traverse(element, fn) {
-    fn(element);
+  var traverse = function traverse(element, options) {
 
-    var descriptor = element.$descriptor;
+    const enter = options.enter || null;
+    const leave = options.leave || null;
 
-    if (descriptor.isGeneric) {
-      return;
-    }
+    const enterSubTree = enter && enter(element);
 
-    var containedProperties = descriptor.properties.filter(p => {
-      return !p.isAttr && !p.isReference && p.type !== 'String';
-    });
+    const descriptor = element.$descriptor;
 
-    containedProperties.forEach(p => {
-      if (p.name in element) {
-        const propertyValue = element[p.name];
+    if (enterSubTree !== false && !descriptor.isGeneric) {
 
-        if (p.isMany) {
-          propertyValue.forEach(child => {
-            traverse(child, fn);
-          });
-        } else {
-          traverse(propertyValue, fn);
+      const containedProperties = descriptor.properties.filter(p => {
+        return !p.isAttr && !p.isReference && p.type !== 'String';
+      });
+
+      containedProperties.forEach(p => {
+        if (p.name in element) {
+          const propertyValue = element[p.name];
+
+          if (p.isMany) {
+            propertyValue.forEach(child => {
+              traverse(child, options);
+            });
+          } else {
+            traverse(propertyValue, options);
+          }
         }
-      }
-    });
+      });
+    }
+
+    leave && leave(element);
   };
@@ -73,3 +78,17 @@
     const reporter = new Reporter({ rule, moddleRoot });
-    traverse(moddleRoot, node => rule.check(node, reporter));
+
+    const check = rule.check;
+
+    const enter = check && check.enter || check;
+    const leave = check && check.leave;
+
+    if (!enter && !leave) {
+      throw new Error('no check implemented');
+    }
+
+    traverse(moddleRoot, {
+      enter: enter ? (node) => enter(node, reporter) : null,
+      leave: leave ? (node) => leave(node, reporter) : null
+    });
+
     return reporter.messages;
@@ -611,2 +630,19 @@ };
   /**
+   * Transform a collection into another collection
+   * by piping each member through the given fn.
+   *
+   * @param  {Object|Array}   collection
+   * @param  {Function} fn
+   *
+   * @return {Array} transformed collection
+   */
+
+  function map(collection, fn) {
+    var result = [];
+    forEach(collection, function (val, key) {
+      result.push(fn(val, key));
+    });
+    return result;
+  }
+  /**
    * Group collection members by attribute.
@@ -720,3 +756,3 @@ *
 
-  var map = {
+  var map$1 = {
     legend: [1, '<fieldset>', '</fieldset>'],
@@ -730,23 +766,23 @@ tr: [2, '<table><tbody>', '</tbody></table>'],
 
-  map.td =
-  map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
+  map$1.td =
+  map$1.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
 
-  map.option =
-  map.optgroup = [1, '<select multiple="multiple">', '</select>'];
+  map$1.option =
+  map$1.optgroup = [1, '<select multiple="multiple">', '</select>'];
 
-  map.thead =
-  map.tbody =
-  map.colgroup =
-  map.caption =
-  map.tfoot = [1, '<table>', '</table>'];
+  map$1.thead =
+  map$1.tbody =
+  map$1.colgroup =
+  map$1.caption =
+  map$1.tfoot = [1, '<table>', '</table>'];
 
-  map.polyline =
-  map.ellipse =
-  map.polygon =
-  map.circle =
-  map.text =
-  map.line =
-  map.path =
-  map.rect =
-  map.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
+  map$1.polyline =
+  map$1.ellipse =
+  map$1.polygon =
+  map$1.circle =
+  map$1.text =
+  map$1.line =
+  map$1.path =
+  map$1.rect =
+  map$1.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
 
@@ -786,3 +822,3 @@ /**
     // wrap map
-    var wrap = map[tag] || map._default;
+    var wrap = map$1[tag] || map$1._default;
     var depth = wrap[0];
@@ -1064,4 +1100,7 @@ var prefix = wrap[1];
 
-    const reports = reduce(issues, function(reports, ruleReports, rule) {
+    let self = this;
 
+    // (1) reduce issues to flat list of issues including the affected element
+    let reports = reduce(issues, function(reports, ruleReports, rule) {
+
       return reports.concat(ruleReports.map(function(report) {
@@ -1075,5 +1114,22 @@ report.rule = rule;
 
-    return groupBy(reports, function(report) {
+    // (2) if affected element is not visible, then report it on root level
+    reports = map(reports, function(report) {
+      const element = self._elementRegistry.get(report.id);
+
+      if (!element) {
+        report.isChildIssue = true;
+        report.actualElementId = report.id;
+
+        report.id = self._canvas.getRootElement().id;
+      }
+
+      return report;
+    });
+
+    // (3) group issues per elementId (resulting in ie. [elementId1: [{issue1}, {issue2}]] structure)
+    reports = groupBy(reports, function(report) {
       return report.id;
     });
+
+    return reports;
   };
@@ -1175,5 +1231,5 @@
   /**
-   * Create overlays for an elements issues.
+   * Create overlay including all issues which are given for a single element.
    *
-   * @param {string} elementId - Elements ID.
+   * @param {string} elementId - id of element, for which the issue shall be displayed.
    * @param {Array} elementIssues - All element issues including warnings and errors.
@@ -1208,9 +1264,11 @@ */
     var issuesByType = groupBy(elementIssues, function(elementIssue) {
-      return elementIssue.category;
+      return (elementIssue.isChildIssue ? 'child' : '') + elementIssue.category;
     });
 
     var errors = issuesByType.error,
-        warnings = issuesByType.warn;
+        warnings = issuesByType.warn,
+        childErrors = issuesByType.childerror,
+        childWarnings = issuesByType.childwarning;
 
-    if (!errors && !warnings) {
+    if (!errors && !warnings && !childErrors && !childWarnings) {
       return;
@@ -1223,3 +1281,3 @@ }
 
-    var $icon = errors
+    var $icon = (errors || childErrors)
       ? domify('<div class="bjsl-icon bjsl-icon-error">' + ErrorSvg + '</div>')
@@ -1230,3 +1288,6 @@ : domify('<div class="bjsl-icon bjsl-icon-warning">' + WarningSvg + '</div>');
     var $dropdownContent = domify('<div class="bjsl-dropdown-content"></div>');
-    var $issues = domify('<div class="bjsl-issues"></div>');
+
+    var $issueContainer = domify('<div class="bjsl-issues"></div>');
+
+    var $issues = domify('<div class="bjsl-current-element-issues"></div>');
     var $issueList = domify('<ul></ul>');
@@ -1238,6 +1299,9 @@
     $dropdown.appendChild($dropdownContent);
-    $dropdownContent.appendChild($issues);
+    $dropdownContent.appendChild($issueContainer);
 
+    $issueContainer.appendChild($issues);
+
     $issues.appendChild($issueList);
 
+    // Add errors and warnings to issueList
     if (errors) {
@@ -1251,2 +1315,27 @@ this._addErrors($issueList, errors);
 
+    // If errors or warnings for child elements of the current element are to be displayed,
+    // then add an additional list
+    if (childErrors || childWarnings) {
+      var $childIssues = domify('<div class="bjsl-child-issues"></div>');
+      var $childIssueList = domify('<ul></ul>');
+      var $childIssueLabel = domify('<a class="bjsl-issue-heading">Issues for child elements:</a>');
+
+      if (childErrors) {
+        this._addErrors($childIssueList, childErrors);
+      }
+
+      if (childWarnings) {
+        this._addWarnings($childIssueList, childWarnings);
+      }
+
+      if (errors || warnings) {
+        var $childIssuesSeperator = domify('<hr/>');
+        $childIssues.appendChild($childIssuesSeperator);
+      }
+
+      $childIssues.appendChild($childIssueLabel);
+      $childIssues.appendChild($childIssueList);
+      $issueContainer.appendChild($childIssues);
+    }
+
     this._overlayIds[elementId] = this._overlays.add(element, 'linting', {
@@ -1282,3 +1371,4 @@ position: position,
     var rule = entry.rule,
-        message = this._translate(entry.message);
+        message = this._translate(entry.message),
+        actualElementId = entry.actualElementId;
 
@@ -1296,2 +1386,5 @@ var icon = stateToIcon[state];
         '</a>' +
+        (actualElementId
+          ? '<a class="bjsl-id-hint"><code>' + actualElementId + '</code></a>'
+          : '') +
       '</li>'
@@ -1298,0 +1391,0 @@ );

dist/bpmn-js-bpmnlint.umd.prod.js

@@ -1,3 +0,3 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).BpmnJSBpmnlint=e()}(this,(function(){"use strict";function t(t,e){var n=t.get("editorActions",!1);n&&n.register({toggleLinting:function(){e.toggle()}})}t.$inject=["injector","linting"];class e{constructor({moddleRoot:t,rule:e}){this.rule=e,this.moddleRoot=t,this.messages=[],this.report=this.report.bind(this)}report(t,e){this.messages.push({id:t,message:e})}}const n={0:"off",1:"warn",2:"error"};function r(t={}){const{config:e,resolver:n}=t;if(void 0===n)throw new Error("must provide <options.resolver>");this.config=e,this.resolver=n,this.cachedRules={},this.cachedConfigs={}}var i=r;function o(t){return"bpmnlint"===t?"bpmnlint":t.startsWith("bpmnlint-plugin-")?t:"bpmnlint-plugin-"+t}r.prototype.applyRule=function(t,n){const{config:r,rule:i,category:o,name:s}=n;try{return function({moddleRoot:t,rule:n}){const r=new e({rule:n,moddleRoot:t});return function t(e,n){n(e);var r=e.$descriptor;r.isGeneric||r.properties.filter(t=>!t.isAttr&&!t.isReference&&"String"!==t.type).forEach(r=>{if(r.name in e){const i=e[r.name];r.isMany?i.forEach(e=>{t(e,n)}):t(i,n)}})}(t,t=>n.check(t,r)),r.messages}({moddleRoot:t,rule:i,config:r}).map((function(t){return{...t,category:o}}))}catch(t){return console.error("rule <"+s+"> failed with error: ",t),[{message:"Rule error: "+t.message,category:"error"}]}},r.prototype.resolveRule=function(t){const{pkg:e,ruleName:n}=this.parseRuleName(t),r=`${e}-${n}`,i=this.cachedRules[r];return i?Promise.resolve(i):Promise.resolve(this.resolver.resolveRule(e,n)).then(e=>{if(!e)throw new Error(`unknown rule <${t}>`);return this.cachedRules[r]=e()})},r.prototype.resolveConfig=function(t){const{pkg:e,configName:n}=this.parseConfigName(t),r=`${e}-${n}`,i=this.cachedConfigs[r];return i?Promise.resolve(i):Promise.resolve(this.resolver.resolveConfig(e,n)).then(n=>{if(!n)throw new Error(`unknown config <${t}>`);return this.cachedConfigs[r]=this.normalizeConfig(n,e)})},r.prototype.resolveRules=function(t){return this.resolveConfiguredRules(t).then(t=>{const e=Object.entries(t).map(([t,e])=>{const{category:n,config:r}=this.parseRuleValue(e);return{name:t,category:n,config:r}}).filter(t=>"off"!==t.category).map(t=>{const{name:e}=t;return this.resolveRule(e).then((function(e){return{...t,rule:e}}))});return Promise.all(e)})},r.prototype.resolveConfiguredRules=function(t){let e=t.extends;return"string"==typeof e&&(e=[e]),void 0===e&&(e=[]),Promise.all(e.map(t=>this.resolveConfig(t).then(t=>this.resolveConfiguredRules(t)))).then(e=>[...e,this.normalizeConfig(t,"bpmnlint").rules].reduce((t,e)=>({...t,...e}),{}))},r.prototype.lint=function(t,e){return e=e||this.config,this.resolveRules(e).then(e=>{const n={};return e.forEach(e=>{const{name:r}=e,i=this.applyRule(t,e);i.length&&(n[r]=i)}),n})},r.prototype.parseRuleValue=function(t){let e,r;return Array.isArray(t)?(e=t[0],r=t[1]):(e=t,r={}),"string"==typeof e&&(e=e.toLowerCase()),e=n[e]||e,{config:r,category:e}},r.prototype.parseRuleName=function(t,e="bpmnlint"){const n=/^(?:(?:(@[^/]+)\/)?([^@]{1}[^/]*)\/)?([^/]+)$/.exec(t);if(!n)throw new Error(`unparseable rule name <${t}>`);const[r,i,s,l]=n;if(!s)return{pkg:e,ruleName:l};return{pkg:`${i?i+"/":""}${o(s)}`,ruleName:l}},r.prototype.parseConfigName=function(t){const e=/^(?:(?:plugin:(?:(@[^/]+)\/)?([^@]{1}[^/]*)\/)|bpmnlint:)([^/]+)$/.exec(t);if(!e)throw new Error(`unparseable config name <${t}>`);const[n,r,i,s]=e;if(!i)return{pkg:"bpmnlint",configName:s};return{pkg:`${r?r+"/":""}${o(i)}`,configName:s}},r.prototype.getSimplePackageName=function(t){const e=/^(?:(@[^/]+)\/)?([^/]+)$/.exec(t);if(!e)throw new Error(`unparseable package name <${t}>`);const[n,r,i]=e;return`${r?r+"/":""}${function(t){if(t.startsWith("bpmnlint-plugin-"))return t.substring("bpmnlint-plugin-".length);return t}(i)}`},r.prototype.normalizeConfig=function(t,e){const n=t.rules||{},r=Object.keys(n).reduce((t,r)=>{const i=n[r],{pkg:o,ruleName:s}=this.parseRuleName(r,e);return t["bpmnlint"===o?s:`${this.getSimplePackageName(o)}/${s}`]=i,t},{});return{...t,rules:r}};var s={Linter:i},l=Object.prototype.toString,a=Object.prototype.hasOwnProperty;function c(t,e){return a.call(t,e)}function u(t,e){var n;if(void 0!==t){var r=function(t){return"[object Array]"===l.call(t)}(t)?h:g;for(var i in t)if(c(t,i)&&!1===e(n=t[i],r(i)))return n}}function p(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return e=f(e),u(t,(function(t){var r=e(t)||"_",i=n[r];i||(i=n[r]=[]),i.push(t)})),n}function f(t){return e=t,"[object Function]"===(n=l.call(e))||"[object AsyncFunction]"===n||"[object GeneratorFunction]"===n||"[object AsyncGeneratorFunction]"===n||"[object Proxy]"===n?t:function(e){return e[t]};var e,n}function g(t){return t}function h(t){return Number(t)}function d(){return(d=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}function v(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),r=1;r<e;r++)n[r-1]=arguments[r];return d.apply(void 0,[t].concat(n))}var m,y=function(t,e){if("string"!=typeof t)throw new TypeError("String expected");e||(e=document);var n=/<([\w:]+)/.exec(t);if(!n)return e.createTextNode(t);t=t.replace(/^\s+|\s+$/g,"");var r=n[1];if("body"==r){return(i=e.createElement("html")).innerHTML=t,i.removeChild(i.lastChild)}var i,o=_[r]||_._default,s=o[0],l=o[1],a=o[2];(i=e.createElement("div")).innerHTML=l+t+a;for(;s--;)i=i.lastChild;if(i.firstChild==i.lastChild)return i.removeChild(i.firstChild);var c=e.createDocumentFragment();for(;i.firstChild;)c.appendChild(i.removeChild(i.firstChild));return c},b=!1;"undefined"!=typeof document&&((m=document.createElement("div")).innerHTML='  <link/><table></table><a href="/a">a</a><input type="checkbox"/>',b=!m.getElementsByTagName("link").length,m=void 0);var _={legend:[1,"<fieldset>","</fieldset>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],_default:b?[1,"X<div>","</div>"]:[0,"",""]};_.td=_.th=[3,"<table><tbody><tr>","</tr></tbody></table>"],_.option=_.optgroup=[1,'<select multiple="multiple">',"</select>"],_.thead=_.tbody=_.colgroup=_.caption=_.tfoot=[1,"<table>","</table>"],_.polyline=_.ellipse=_.polygon=_.circle=_.text=_.line=_.path=_.rect=_.g=[1,'<svg xmlns="http://www.w3.org/2000/svg" version="1.1">',"</svg>"];var w="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).BpmnJSBpmnlint=e()}(this,(function(){"use strict";function t(t,e){var n=t.get("editorActions",!1);n&&n.register({toggleLinting:function(){e.toggle()}})}t.$inject=["injector","linting"];class e{constructor({moddleRoot:t,rule:e}){this.rule=e,this.moddleRoot=t,this.messages=[],this.report=this.report.bind(this)}report(t,e){this.messages.push({id:t,message:e})}}const n={0:"off",1:"warn",2:"error"};function r(t={}){const{config:e,resolver:n}=t;if(void 0===n)throw new Error("must provide <options.resolver>");this.config=e,this.resolver=n,this.cachedRules={},this.cachedConfigs={}}var i=r;function o(t){return"bpmnlint"===t?"bpmnlint":t.startsWith("bpmnlint-plugin-")?t:"bpmnlint-plugin-"+t}r.prototype.applyRule=function(t,n){const{config:r,rule:i,category:o,name:s}=n;try{return function({moddleRoot:t,rule:n}){const r=new e({rule:n,moddleRoot:t}),i=n.check,o=i&&i.enter||i,s=i&&i.leave;if(!o&&!s)throw new Error("no check implemented");return function t(e,n){const r=n.enter||null,i=n.leave||null,o=r&&r(e),s=e.$descriptor;if(!1!==o&&!s.isGeneric){s.properties.filter(t=>!t.isAttr&&!t.isReference&&"String"!==t.type).forEach(r=>{if(r.name in e){const i=e[r.name];r.isMany?i.forEach(e=>{t(e,n)}):t(i,n)}})}i&&i(e)}(t,{enter:o?t=>o(t,r):null,leave:s?t=>s(t,r):null}),r.messages}({moddleRoot:t,rule:i,config:r}).map((function(t){return{...t,category:o}}))}catch(t){return console.error("rule <"+s+"> failed with error: ",t),[{message:"Rule error: "+t.message,category:"error"}]}},r.prototype.resolveRule=function(t){const{pkg:e,ruleName:n}=this.parseRuleName(t),r=`${e}-${n}`,i=this.cachedRules[r];return i?Promise.resolve(i):Promise.resolve(this.resolver.resolveRule(e,n)).then(e=>{if(!e)throw new Error(`unknown rule <${t}>`);return this.cachedRules[r]=e()})},r.prototype.resolveConfig=function(t){const{pkg:e,configName:n}=this.parseConfigName(t),r=`${e}-${n}`,i=this.cachedConfigs[r];return i?Promise.resolve(i):Promise.resolve(this.resolver.resolveConfig(e,n)).then(n=>{if(!n)throw new Error(`unknown config <${t}>`);return this.cachedConfigs[r]=this.normalizeConfig(n,e)})},r.prototype.resolveRules=function(t){return this.resolveConfiguredRules(t).then(t=>{const e=Object.entries(t).map(([t,e])=>{const{category:n,config:r}=this.parseRuleValue(e);return{name:t,category:n,config:r}}).filter(t=>"off"!==t.category).map(t=>{const{name:e}=t;return this.resolveRule(e).then((function(e){return{...t,rule:e}}))});return Promise.all(e)})},r.prototype.resolveConfiguredRules=function(t){let e=t.extends;return"string"==typeof e&&(e=[e]),void 0===e&&(e=[]),Promise.all(e.map(t=>this.resolveConfig(t).then(t=>this.resolveConfiguredRules(t)))).then(e=>[...e,this.normalizeConfig(t,"bpmnlint").rules].reduce((t,e)=>({...t,...e}),{}))},r.prototype.lint=function(t,e){return e=e||this.config,this.resolveRules(e).then(e=>{const n={};return e.forEach(e=>{const{name:r}=e,i=this.applyRule(t,e);i.length&&(n[r]=i)}),n})},r.prototype.parseRuleValue=function(t){let e,r;return Array.isArray(t)?(e=t[0],r=t[1]):(e=t,r={}),"string"==typeof e&&(e=e.toLowerCase()),e=n[e]||e,{config:r,category:e}},r.prototype.parseRuleName=function(t,e="bpmnlint"){const n=/^(?:(?:(@[^/]+)\/)?([^@]{1}[^/]*)\/)?([^/]+)$/.exec(t);if(!n)throw new Error(`unparseable rule name <${t}>`);const[r,i,s,l]=n;if(!s)return{pkg:e,ruleName:l};return{pkg:`${i?i+"/":""}${o(s)}`,ruleName:l}},r.prototype.parseConfigName=function(t){const e=/^(?:(?:plugin:(?:(@[^/]+)\/)?([^@]{1}[^/]*)\/)|bpmnlint:)([^/]+)$/.exec(t);if(!e)throw new Error(`unparseable config name <${t}>`);const[n,r,i,s]=e;if(!i)return{pkg:"bpmnlint",configName:s};return{pkg:`${r?r+"/":""}${o(i)}`,configName:s}},r.prototype.getSimplePackageName=function(t){const e=/^(?:(@[^/]+)\/)?([^/]+)$/.exec(t);if(!e)throw new Error(`unparseable package name <${t}>`);const[n,r,i]=e;return`${r?r+"/":""}${function(t){if(t.startsWith("bpmnlint-plugin-"))return t.substring("bpmnlint-plugin-".length);return t}(i)}`},r.prototype.normalizeConfig=function(t,e){const n=t.rules||{},r=Object.keys(n).reduce((t,r)=>{const i=n[r],{pkg:o,ruleName:s}=this.parseRuleName(r,e);return t["bpmnlint"===o?s:`${this.getSimplePackageName(o)}/${s}`]=i,t},{});return{...t,rules:r}};var s={Linter:i},l=Object.prototype.toString,a=Object.prototype.hasOwnProperty;function c(t,e){return a.call(t,e)}function u(t,e){var n;if(void 0!==t){var r=function(t){return"[object Array]"===l.call(t)}(t)?d:h;for(var i in t)if(c(t,i)&&!1===e(n=t[i],r(i)))return n}}function p(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return e=f(e),u(t,(function(t){var r=e(t)||"_",i=n[r];i||(i=n[r]=[]),i.push(t)})),n}function f(t){return e=t,"[object Function]"===(n=l.call(e))||"[object AsyncFunction]"===n||"[object GeneratorFunction]"===n||"[object AsyncGeneratorFunction]"===n||"[object Proxy]"===n?t:function(e){return e[t]};var e,n}function h(t){return t}function d(t){return Number(t)}function g(){return(g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}function v(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),r=1;r<e;r++)n[r-1]=arguments[r];return g.apply(void 0,[t].concat(n))}var m,y=function(t,e){if("string"!=typeof t)throw new TypeError("String expected");e||(e=document);var n=/<([\w:]+)/.exec(t);if(!n)return e.createTextNode(t);t=t.replace(/^\s+|\s+$/g,"");var r=n[1];if("body"==r){return(i=e.createElement("html")).innerHTML=t,i.removeChild(i.lastChild)}var i,o=_[r]||_._default,s=o[0],l=o[1],a=o[2];(i=e.createElement("div")).innerHTML=l+t+a;for(;s--;)i=i.lastChild;if(i.firstChild==i.lastChild)return i.removeChild(i.firstChild);var c=e.createDocumentFragment();for(;i.firstChild;)c.appendChild(i.removeChild(i.firstChild));return c},b=!1;"undefined"!=typeof document&&((m=document.createElement("div")).innerHTML='  <link/><table></table><a href="/a">a</a><input type="checkbox"/>',b=!m.getElementsByTagName("link").length,m=void 0);var _={legend:[1,"<fieldset>","</fieldset>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],_default:b?[1,"X<div>","</div>"]:[0,"",""]};_.td=_.th=[3,"<table><tbody><tr>","</tr></tbody></table>"],_.option=_.optgroup=[1,'<select multiple="multiple">',"</select>"],_.thead=_.tbody=_.colgroup=_.caption=_.tfoot=[1,"<table>","</table>"],_.polyline=_.ellipse=_.polygon=_.circle=_.text=_.line=_.path=_.rect=_.g=[1,'<svg xmlns="http://www.w3.org/2000/svg" version="1.1">',"</svg>"];var w="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};
 /*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */
-!function(t){var e={exports:{}};t(e,e.exports)}((function(t,e){var n;n=w,t.exports=function(t){if(t.CSS&&t.CSS.escape)return t.CSS.escape;var e=function(t){if(0==arguments.length)throw new TypeError("`CSS.escape` requires an argument.");for(var e,n=String(t),r=n.length,i=-1,o="",s=n.charCodeAt(0);++i<r;)0!=(e=n.charCodeAt(i))?o+=e>=1&&e<=31||127==e||0==i&&e>=48&&e<=57||1==i&&e>=48&&e<=57&&45==s?"\\"+e.toString(16)+" ":0==i&&1==r&&45==e||!(e>=128||45==e||95==e||e>=48&&e<=57||e>=65&&e<=90||e>=97&&e<=122)?"\\"+n.charAt(i):n.charAt(i):o+="�";return o};return t.CSS||(t.CSS={}),t.CSS.escape=e,e}(n)}));var C={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};function j(t){return(t=""+t)&&t.replace(/[&<>"']/g,(function(t){return C[t]}))}var E='<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>',R='<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 512 512"><path fill="currentColor" d="M288 328.83c-45.518 0-82.419 34.576-82.419 77.229 0 42.652 36.9 77.229 82.419 77.229 45.518 0 82.419-34.577 82.419-77.23 0-42.652-36.9-77.229-82.419-77.229zM207.439 57.034l11.61 204.348c.544 9.334 8.78 16.64 18.755 16.64h100.392c9.975 0 18.211-7.306 18.754-16.64l11.611-204.348c.587-10.082-7.98-18.56-18.754-18.56H226.192c-10.775 0-19.34 8.478-18.753 18.56z"/></svg>',S='<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>',$={resolver:{resolveRule:function(){return null}},config:{}},x={error:E,warning:R,success:S,inactive:S};function L(t,e,n,r,i,o,s){this._bpmnjs=t,this._canvas=e,this._elementRegistry=r,this._eventBus=i,this._overlays=o,this._translate=s,this._issues={},this._active=n&&n.active||!1,this._linterConfig=$,this._overlayIds={};var l=this;i.on(["import.done","elements.changed","linting.configChanged","linting.toggle"],500,(function(t){l.isActive()&&l.update()})),i.on("linting.toggle",(function(t){t.active||(l._clearIssues(),l._updateButton())})),i.on("diagram.clear",(function(){l._clearIssues()}));var a=n&&n.bpmnlint;a&&i.once("diagram.init",(function(){if(l.getLinterConfig()===$)try{l.setLinterConfig(a)}catch(t){console.error("[bpmn-js-bpmnlint] Invalid lint rules configured. Please doublecheck your linting.bpmnlint configuration, cf. https://github.com/bpmn-io/bpmn-js-bpmnlint#configure-lint-rules")}})),this._init()}return L.prototype.setLinterConfig=function(t){if(!t.config||!t.resolver)throw new Error("Expected linterConfig = { config, resolver }");this._linterConfig=t,this._eventBus.fire("linting.configChanged")},L.prototype.getLinterConfig=function(){return this._linterConfig},L.prototype._init=function(){this._createButton(),this._updateButton()},L.prototype.isActive=function(){return this._active},L.prototype._formatIssues=function(t){var e,n;return p((e=function(t,e,n){return t.concat(e.map((function(t){return t.rule=n,t})))},n=[],u(t,(function(t,r){n=e(n,t,r)})),n),(function(t){return t.id}))},L.prototype.toggle=function(t){return t=void 0===t?!this.isActive():t,this._setActive(t),t},L.prototype._setActive=function(t){this._active!==t&&(this._active=t,this._eventBus.fire("linting.toggle",{active:t}))},L.prototype.update=function(){var t=this;if(this._bpmnjs.getDefinitions()){var e=this._lintStart=Math.random();this.lint().then((function(n){if(t._lintStart===e){n=t._formatIssues(n);var r={},i={},o={};for(var s in t._issues)n[s]||(r[s]=t._issues[s]);for(var l in n)t._issues[l]?n[l]!==t._issues[l]&&(i[l]=n[l]):o[l]=n[l];r=v(r,i),o=v(o,i),t._clearOverlays(),t._createIssues(o),t._issues=n,t._updateButton(),t._fireComplete(n)}}))}},L.prototype._fireComplete=function(t){this._eventBus.fire("linting.completed",{issues:t})},L.prototype._createIssues=function(t){for(var e in t)this._createElementIssues(e,t[e])},L.prototype._createElementIssues=function(t,e){var n=this._elementRegistry.get(t);if(n){var r,i;n===this._canvas.getRootElement()?(r="bottom-right",i={top:20,left:150}):(r="top-right",i={top:-7,left:-7});var o=p(e,(function(t){return t.category})),s=o.error,l=o.warn;if(s||l){var a=y('<div class="bjsl-overlay bjsl-issues-'+r+'"></div>'),c=y(s?'<div class="bjsl-icon bjsl-icon-error">'+E+"</div>":'<div class="bjsl-icon bjsl-icon-warning">'+R+"</div>"),u=y('<div class="bjsl-dropdown"></div>'),f=y('<div class="bjsl-dropdown-content"></div>'),g=y('<div class="bjsl-issues"></div>'),h=y("<ul></ul>");a.appendChild(c),a.appendChild(u),u.appendChild(f),f.appendChild(g),g.appendChild(h),s&&this._addErrors(h,s),l&&this._addWarnings(h,l),this._overlayIds[t]=this._overlays.add(n,"linting",{position:i,html:a,scale:{min:.9}})}}},L.prototype._addErrors=function(t,e){var n=this;e.forEach((function(e){n._addEntry(t,"error",e)}))},L.prototype._addWarnings=function(t,e){var n=this;e.forEach((function(e){n._addEntry(t,"warning",e)}))},L.prototype._addEntry=function(t,e,n){var r=n.rule,i=this._translate(n.message),o=y('<li class="'+e+'"><span class="icon"> '+x[e]+'</span><a title="'+j(r)+": "+j(i)+'" data-rule="'+j(r)+'" data-message="'+j(i)+'">'+j(i)+"</a></li>");t.appendChild(o)},L.prototype._clearOverlays=function(){this._overlays.remove({type:"linting"}),this._overlayIds={}},L.prototype._clearIssues=function(){this._issues={},this._clearOverlays()},L.prototype._setButtonState=function(t,e,n){var r=this._button,i=x[t]+"<span>"+this._translate("{errors} Errors, {warnings} Warnings",{errors:e.toString(),warnings:n.toString()})+"</span>";["error","inactive","success","warning"].forEach((function(e){t===e?r.classList.add("bjsl-button-"+e):r.classList.remove("bjsl-button-"+e)})),r.innerHTML=i},L.prototype._updateButton=function(){if(this.isActive()){var t=0,e=0;for(var n in this._issues)this._issues[n].forEach((function(n){"error"===n.category?t++:"warn"===n.category&&e++}));var r=(t?"error":e&&"warning")||"success";this._setButtonState(r,t,e)}else this._setButtonState("inactive",0,0)},L.prototype._createButton=function(){var t=this;this._button=y('<button class="bjsl-button bjsl-button-inactive" title="'+this._translate("Toggle linting")+'"></button>'),this._button.addEventListener("click",(function(){t.toggle()})),this._canvas.getContainer().appendChild(this._button)},L.prototype.lint=function(){var t=this._bpmnjs.getDefinitions();return new s.Linter(this._linterConfig).lint(t)},L.$inject=["bpmnjs","canvas","config.linting","elementRegistry","eventBus","overlays","translate"],{__init__:["linting","lintingEditorActions"],linting:["type",L],lintingEditorActions:["type",t]}}));
+!function(t){var e={exports:{}};t(e,e.exports)}((function(t,e){var n;n=w,t.exports=function(t){if(t.CSS&&t.CSS.escape)return t.CSS.escape;var e=function(t){if(0==arguments.length)throw new TypeError("`CSS.escape` requires an argument.");for(var e,n=String(t),r=n.length,i=-1,o="",s=n.charCodeAt(0);++i<r;)0!=(e=n.charCodeAt(i))?o+=e>=1&&e<=31||127==e||0==i&&e>=48&&e<=57||1==i&&e>=48&&e<=57&&45==s?"\\"+e.toString(16)+" ":0==i&&1==r&&45==e||!(e>=128||45==e||95==e||e>=48&&e<=57||e>=65&&e<=90||e>=97&&e<=122)?"\\"+n.charAt(i):n.charAt(i):o+="�";return o};return t.CSS||(t.CSS={}),t.CSS.escape=e,e}(n)}));var C={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};function j(t){return(t=""+t)&&t.replace(/[&<>"']/g,(function(t){return C[t]}))}var E='<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>',R='<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 512 512"><path fill="currentColor" d="M288 328.83c-45.518 0-82.419 34.576-82.419 77.229 0 42.652 36.9 77.229 82.419 77.229 45.518 0 82.419-34.577 82.419-77.23 0-42.652-36.9-77.229-82.419-77.229zM207.439 57.034l11.61 204.348c.544 9.334 8.78 16.64 18.755 16.64h100.392c9.975 0 18.211-7.306 18.754-16.64l11.611-204.348c.587-10.082-7.98-18.56-18.754-18.56H226.192c-10.775 0-19.34 8.478-18.753 18.56z"/></svg>',S='<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>',$={resolver:{resolveRule:function(){return null}},config:{}},x={error:E,warning:R,success:S,inactive:S};function L(t,e,n,r,i,o,s){this._bpmnjs=t,this._canvas=e,this._elementRegistry=r,this._eventBus=i,this._overlays=o,this._translate=s,this._issues={},this._active=n&&n.active||!1,this._linterConfig=$,this._overlayIds={};var l=this;i.on(["import.done","elements.changed","linting.configChanged","linting.toggle"],500,(function(t){l.isActive()&&l.update()})),i.on("linting.toggle",(function(t){t.active||(l._clearIssues(),l._updateButton())})),i.on("diagram.clear",(function(){l._clearIssues()}));var a=n&&n.bpmnlint;a&&i.once("diagram.init",(function(){if(l.getLinterConfig()===$)try{l.setLinterConfig(a)}catch(t){console.error("[bpmn-js-bpmnlint] Invalid lint rules configured. Please doublecheck your linting.bpmnlint configuration, cf. https://github.com/bpmn-io/bpmn-js-bpmnlint#configure-lint-rules")}})),this._init()}return L.prototype.setLinterConfig=function(t){if(!t.config||!t.resolver)throw new Error("Expected linterConfig = { config, resolver }");this._linterConfig=t,this._eventBus.fire("linting.configChanged")},L.prototype.getLinterConfig=function(){return this._linterConfig},L.prototype._init=function(){this._createButton(),this._updateButton()},L.prototype.isActive=function(){return this._active},L.prototype._formatIssues=function(t){let e=this,n=(r=function(t,e,n){return t.concat(e.map((function(t){return t.rule=n,t})))},i=[],u(t,(function(t,e){i=r(i,t,e)})),i);var r,i;return n=function(t,e){var n=[];return u(t,(function(t,r){n.push(e(t,r))})),n}(n,(function(t){return e._elementRegistry.get(t.id)||(t.isChildIssue=!0,t.actualElementId=t.id,t.id=e._canvas.getRootElement().id),t})),n=p(n,(function(t){return t.id})),n},L.prototype.toggle=function(t){return t=void 0===t?!this.isActive():t,this._setActive(t),t},L.prototype._setActive=function(t){this._active!==t&&(this._active=t,this._eventBus.fire("linting.toggle",{active:t}))},L.prototype.update=function(){var t=this;if(this._bpmnjs.getDefinitions()){var e=this._lintStart=Math.random();this.lint().then((function(n){if(t._lintStart===e){n=t._formatIssues(n);var r={},i={},o={};for(var s in t._issues)n[s]||(r[s]=t._issues[s]);for(var l in n)t._issues[l]?n[l]!==t._issues[l]&&(i[l]=n[l]):o[l]=n[l];r=v(r,i),o=v(o,i),t._clearOverlays(),t._createIssues(o),t._issues=n,t._updateButton(),t._fireComplete(n)}}))}},L.prototype._fireComplete=function(t){this._eventBus.fire("linting.completed",{issues:t})},L.prototype._createIssues=function(t){for(var e in t)this._createElementIssues(e,t[e])},L.prototype._createElementIssues=function(t,e){var n=this._elementRegistry.get(t);if(n){var r,i;n===this._canvas.getRootElement()?(r="bottom-right",i={top:20,left:150}):(r="top-right",i={top:-7,left:-7});var o=p(e,(function(t){return(t.isChildIssue?"child":"")+t.category})),s=o.error,l=o.warn,a=o.childerror,c=o.childwarning;if(s||l||a||c){var u=y('<div class="bjsl-overlay bjsl-issues-'+r+'"></div>'),f=y(s||a?'<div class="bjsl-icon bjsl-icon-error">'+E+"</div>":'<div class="bjsl-icon bjsl-icon-warning">'+R+"</div>"),h=y('<div class="bjsl-dropdown"></div>'),d=y('<div class="bjsl-dropdown-content"></div>'),g=y('<div class="bjsl-issues"></div>'),v=y('<div class="bjsl-current-element-issues"></div>'),m=y("<ul></ul>");if(u.appendChild(f),u.appendChild(h),h.appendChild(d),d.appendChild(g),g.appendChild(v),v.appendChild(m),s&&this._addErrors(m,s),l&&this._addWarnings(m,l),a||c){var b=y('<div class="bjsl-child-issues"></div>'),_=y("<ul></ul>"),w=y('<a class="bjsl-issue-heading">Issues for child elements:</a>');if(a&&this._addErrors(_,a),c&&this._addWarnings(_,c),s||l){var C=y("<hr/>");b.appendChild(C)}b.appendChild(w),b.appendChild(_),g.appendChild(b)}this._overlayIds[t]=this._overlays.add(n,"linting",{position:i,html:u,scale:{min:.9}})}}},L.prototype._addErrors=function(t,e){var n=this;e.forEach((function(e){n._addEntry(t,"error",e)}))},L.prototype._addWarnings=function(t,e){var n=this;e.forEach((function(e){n._addEntry(t,"warning",e)}))},L.prototype._addEntry=function(t,e,n){var r=n.rule,i=this._translate(n.message),o=n.actualElementId,s=y('<li class="'+e+'"><span class="icon"> '+x[e]+'</span><a title="'+j(r)+": "+j(i)+'" data-rule="'+j(r)+'" data-message="'+j(i)+'">'+j(i)+"</a>"+(o?'<a class="bjsl-id-hint"><code>'+o+"</code></a>":"")+"</li>");t.appendChild(s)},L.prototype._clearOverlays=function(){this._overlays.remove({type:"linting"}),this._overlayIds={}},L.prototype._clearIssues=function(){this._issues={},this._clearOverlays()},L.prototype._setButtonState=function(t,e,n){var r=this._button,i=x[t]+"<span>"+this._translate("{errors} Errors, {warnings} Warnings",{errors:e.toString(),warnings:n.toString()})+"</span>";["error","inactive","success","warning"].forEach((function(e){t===e?r.classList.add("bjsl-button-"+e):r.classList.remove("bjsl-button-"+e)})),r.innerHTML=i},L.prototype._updateButton=function(){if(this.isActive()){var t=0,e=0;for(var n in this._issues)this._issues[n].forEach((function(n){"error"===n.category?t++:"warn"===n.category&&e++}));var r=(t?"error":e&&"warning")||"success";this._setButtonState(r,t,e)}else this._setButtonState("inactive",0,0)},L.prototype._createButton=function(){var t=this;this._button=y('<button class="bjsl-button bjsl-button-inactive" title="'+this._translate("Toggle linting")+'"></button>'),this._button.addEventListener("click",(function(){t.toggle()})),this._canvas.getContainer().appendChild(this._button)},L.prototype.lint=function(){var t=this._bpmnjs.getDefinitions();return new s.Linter(this._linterConfig).lint(t)},L.$inject=["bpmnjs","canvas","config.linting","elementRegistry","eventBus","overlays","translate"],{__init__:["linting","lintingEditorActions"],linting:["type",L],lintingEditorActions:["type",t]}}));

dist/index.esm.js

 import { Linter } from 'bpmnlint';
-import { reduce, groupBy, assign } from 'min-dash';
+import { reduce, map, groupBy, assign } from 'min-dash';
 import { domify } from 'min-dom';
@@ -149,4 +149,7 @@ import { escapeHTML } from 'diagram-js/lib/util/EscapeUtil';
 
-  const reports = reduce(issues, function(reports, ruleReports, rule) {
+  let self = this;
 
+  // (1) reduce issues to flat list of issues including the affected element
+  let reports = reduce(issues, function(reports, ruleReports, rule) {
+
     return reports.concat(ruleReports.map(function(report) {
@@ -160,5 +163,22 @@ report.rule = rule;
 
-  return groupBy(reports, function(report) {
+  // (2) if affected element is not visible, then report it on root level
+  reports = map(reports, function(report) {
+    const element = self._elementRegistry.get(report.id);
+
+    if (!element) {
+      report.isChildIssue = true;
+      report.actualElementId = report.id;
+
+      report.id = self._canvas.getRootElement().id;
+    }
+
+    return report;
+  });
+
+  // (3) group issues per elementId (resulting in ie. [elementId1: [{issue1}, {issue2}]] structure)
+  reports = groupBy(reports, function(report) {
     return report.id;
   });
+
+  return reports;
 };
@@ -260,5 +280,5 @@
 /**
- * Create overlays for an elements issues.
+ * Create overlay including all issues which are given for a single element.
  *
- * @param {string} elementId - Elements ID.
+ * @param {string} elementId - id of element, for which the issue shall be displayed.
  * @param {Array} elementIssues - All element issues including warnings and errors.
@@ -293,9 +313,11 @@ */
   var issuesByType = groupBy(elementIssues, function(elementIssue) {
-    return elementIssue.category;
+    return (elementIssue.isChildIssue ? 'child' : '') + elementIssue.category;
   });
 
   var errors = issuesByType.error,
-      warnings = issuesByType.warn;
+      warnings = issuesByType.warn,
+      childErrors = issuesByType.childerror,
+      childWarnings = issuesByType.childwarning;
 
-  if (!errors && !warnings) {
+  if (!errors && !warnings && !childErrors && !childWarnings) {
     return;
@@ -308,3 +330,3 @@ }
 
-  var $icon = errors
+  var $icon = (errors || childErrors)
     ? domify('<div class="bjsl-icon bjsl-icon-error">' + ErrorSvg + '</div>')
@@ -315,3 +337,6 @@ : domify('<div class="bjsl-icon bjsl-icon-warning">' + WarningSvg + '</div>');
   var $dropdownContent = domify('<div class="bjsl-dropdown-content"></div>');
-  var $issues = domify('<div class="bjsl-issues"></div>');
+
+  var $issueContainer = domify('<div class="bjsl-issues"></div>');
+
+  var $issues = domify('<div class="bjsl-current-element-issues"></div>');
   var $issueList = domify('<ul></ul>');
@@ -323,6 +348,9 @@
   $dropdown.appendChild($dropdownContent);
-  $dropdownContent.appendChild($issues);
+  $dropdownContent.appendChild($issueContainer);
 
+  $issueContainer.appendChild($issues);
+
   $issues.appendChild($issueList);
 
+  // Add errors and warnings to issueList
   if (errors) {
@@ -336,2 +364,27 @@ this._addErrors($issueList, errors);
 
+  // If errors or warnings for child elements of the current element are to be displayed,
+  // then add an additional list
+  if (childErrors || childWarnings) {
+    var $childIssues = domify('<div class="bjsl-child-issues"></div>');
+    var $childIssueList = domify('<ul></ul>');
+    var $childIssueLabel = domify('<a class="bjsl-issue-heading">Issues for child elements:</a>');
+
+    if (childErrors) {
+      this._addErrors($childIssueList, childErrors);
+    }
+
+    if (childWarnings) {
+      this._addWarnings($childIssueList, childWarnings);
+    }
+
+    if (errors || warnings) {
+      var $childIssuesSeperator = domify('<hr/>');
+      $childIssues.appendChild($childIssuesSeperator);
+    }
+
+    $childIssues.appendChild($childIssueLabel);
+    $childIssues.appendChild($childIssueList);
+    $issueContainer.appendChild($childIssues);
+  }
+
   this._overlayIds[elementId] = this._overlays.add(element, 'linting', {
@@ -367,3 +420,4 @@ position: position,
   var rule = entry.rule,
-      message = this._translate(entry.message);
+      message = this._translate(entry.message),
+      actualElementId = entry.actualElementId;
 
@@ -381,2 +435,5 @@ var icon = stateToIcon[state];
       '</a>' +
+      (actualElementId
+        ? '<a class="bjsl-id-hint"><code>' + actualElementId + '</code></a>'
+        : '') +
     '</li>'
@@ -383,0 +440,0 @@ );

dist/index.js

@@ -151,4 +151,7 @@ 'use strict';
 
-  const reports = minDash.reduce(issues, function(reports, ruleReports, rule) {
+  let self = this;
 
+  // (1) reduce issues to flat list of issues including the affected element
+  let reports = minDash.reduce(issues, function(reports, ruleReports, rule) {
+
     return reports.concat(ruleReports.map(function(report) {
@@ -162,5 +165,22 @@ report.rule = rule;
 
-  return minDash.groupBy(reports, function(report) {
+  // (2) if affected element is not visible, then report it on root level
+  reports = minDash.map(reports, function(report) {
+    const element = self._elementRegistry.get(report.id);
+
+    if (!element) {
+      report.isChildIssue = true;
+      report.actualElementId = report.id;
+
+      report.id = self._canvas.getRootElement().id;
+    }
+
+    return report;
+  });
+
+  // (3) group issues per elementId (resulting in ie. [elementId1: [{issue1}, {issue2}]] structure)
+  reports = minDash.groupBy(reports, function(report) {
     return report.id;
   });
+
+  return reports;
 };
@@ -262,5 +282,5 @@
 /**
- * Create overlays for an elements issues.
+ * Create overlay including all issues which are given for a single element.
  *
- * @param {string} elementId - Elements ID.
+ * @param {string} elementId - id of element, for which the issue shall be displayed.
  * @param {Array} elementIssues - All element issues including warnings and errors.
@@ -295,9 +315,11 @@ */
   var issuesByType = minDash.groupBy(elementIssues, function(elementIssue) {
-    return elementIssue.category;
+    return (elementIssue.isChildIssue ? 'child' : '') + elementIssue.category;
   });
 
   var errors = issuesByType.error,
-      warnings = issuesByType.warn;
+      warnings = issuesByType.warn,
+      childErrors = issuesByType.childerror,
+      childWarnings = issuesByType.childwarning;
 
-  if (!errors && !warnings) {
+  if (!errors && !warnings && !childErrors && !childWarnings) {
     return;
@@ -310,3 +332,3 @@ }
 
-  var $icon = errors
+  var $icon = (errors || childErrors)
     ? minDom.domify('<div class="bjsl-icon bjsl-icon-error">' + ErrorSvg + '</div>')
@@ -317,3 +339,6 @@ : minDom.domify('<div class="bjsl-icon bjsl-icon-warning">' + WarningSvg + '</div>');
   var $dropdownContent = minDom.domify('<div class="bjsl-dropdown-content"></div>');
-  var $issues = minDom.domify('<div class="bjsl-issues"></div>');
+
+  var $issueContainer = minDom.domify('<div class="bjsl-issues"></div>');
+
+  var $issues = minDom.domify('<div class="bjsl-current-element-issues"></div>');
   var $issueList = minDom.domify('<ul></ul>');
@@ -325,6 +350,9 @@
   $dropdown.appendChild($dropdownContent);
-  $dropdownContent.appendChild($issues);
+  $dropdownContent.appendChild($issueContainer);
 
+  $issueContainer.appendChild($issues);
+
   $issues.appendChild($issueList);
 
+  // Add errors and warnings to issueList
   if (errors) {
@@ -338,2 +366,27 @@ this._addErrors($issueList, errors);
 
+  // If errors or warnings for child elements of the current element are to be displayed,
+  // then add an additional list
+  if (childErrors || childWarnings) {
+    var $childIssues = minDom.domify('<div class="bjsl-child-issues"></div>');
+    var $childIssueList = minDom.domify('<ul></ul>');
+    var $childIssueLabel = minDom.domify('<a class="bjsl-issue-heading">Issues for child elements:</a>');
+
+    if (childErrors) {
+      this._addErrors($childIssueList, childErrors);
+    }
+
+    if (childWarnings) {
+      this._addWarnings($childIssueList, childWarnings);
+    }
+
+    if (errors || warnings) {
+      var $childIssuesSeperator = minDom.domify('<hr/>');
+      $childIssues.appendChild($childIssuesSeperator);
+    }
+
+    $childIssues.appendChild($childIssueLabel);
+    $childIssues.appendChild($childIssueList);
+    $issueContainer.appendChild($childIssues);
+  }
+
   this._overlayIds[elementId] = this._overlays.add(element, 'linting', {
@@ -369,3 +422,4 @@ position: position,
   var rule = entry.rule,
-      message = this._translate(entry.message);
+      message = this._translate(entry.message),
+      actualElementId = entry.actualElementId;
 
@@ -383,2 +437,5 @@ var icon = stateToIcon[state];
       '</a>' +
+      (actualElementId
+        ? '<a class="bjsl-id-hint"><code>' + actualElementId + '</code></a>'
+        : '') +
     '</li>'
@@ -385,0 +442,0 @@ );

package.json

 {
   "name": "bpmn-js-bpmnlint",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "bpmn-js integration for bpmnlint",
@@ -36,10 +36,10 @@ "main": "dist/index.js",
     "@rollup/plugin-node-resolve": "^11.0.0",
-    "bpmn-js": "^7.5.0",
-    "bpmnlint": "^7.0.1",
+    "bpmn-js": "^8.3.0",
+    "bpmnlint": "^7.2.1",
     "bpmnlint-loader": "^0.1.4",
     "chai": "^4.2.0",
     "cpx": "^1.5.0",
-    "eslint": "^7.15.0",
-    "eslint-plugin-bpmn-io": "^0.11.0",
-    "karma": "^5.2.3",
+    "eslint": "^7.24.0",
+    "eslint-plugin-bpmn-io": "^0.12.0",
+    "karma": "^6.3.2",
     "karma-chrome-launcher": "^3.1.0",
@@ -57,3 +57,3 @@ "karma-mocha": "^2.0.1",
     "rollup-plugin-terser": "^5.3.1",
-    "sinon": "^7.5.0",
+    "sinon": "^9.2.4",
     "sinon-chai": "^3.5.0",
@@ -60,0 +60,0 @@ "webpack": "^4.44.2"

README.md

 # bpmn-js-bpmnlint
 
-[![Build Status](https://travis-ci.com/bpmn-io/bpmn-js-bpmnlint.svg?branch=master)](https://travis-ci.com/bpmn-io/bpmn-js-bpmnlint)
+[![CI](https://github.com/bpmn-io/bpmn-js-bpmnlint/workflows/CI/badge.svg)](https://github.com/bpmn-io/bpmn-js-bpmnlint/actions?query=workflow%3ACI)
 
@@ -23,3 +23,3 @@ Integrates [bpmnlint](https://github.com/bpmn-io/bpmnlint) into [bpmn-js](https://github.com/bpmn-io/bpmn-js).
 
-var modeler = new BpmnModeler({
+const modeler = new BpmnModeler({
   linting: {
@@ -51,3 +51,3 @@ bpmnlint: bpmnlintConfig
 ```javascript
-var linting = modeler.get('linting');
+const linting = modeler.get('linting');
 
@@ -54,0 +54,0 @@ linting.setLinterConfig(bpmnlintConfig);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

271560

increased by6.82%

Number of package files

13

increased by8.33%

Lines of code

2185

increased by9.14%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes