bpmn-js-bpmnlint - npm Package Compare versions

Comparing version 0.12.4 to 0.13.0

CHANGELOG.md

@@ -9,2 +9,15 @@ # Changelog
 
+## 0.13.0
+
+_This is more or less a full rewrite of the extension._
+
+* `FEAT`: add ability to configure initial activation state
+* `FEAT`: rework api
+* `FEAT`: use `overlays` for root element, too
+* `FEAT`: show rule name on tooltip hover
+* `FEAT`: improve look and feel
+* `FEAT`: reposition validation button and add title hint
+* `CHORE`: namespace styles
+* `CHORE`: clearly separate public and private methods
+
 ## 0.12.4
@@ -11,0 +24,0 @@

dist/index.esm.js

 import { Linter } from 'bpmnlint';
 import { reduce, groupBy, assign } from 'min-dash';
-import { domify, query, remove } from 'min-dom';
+import { domify } from 'min-dom';
+import { escapeHTML } from 'diagram-js/lib/util/EscapeUtil';
 
+function EditorActions(injector, linting) {
+  var editorActions = injector.get('editorActions', false);
+
+  editorActions && editorActions.register({
+    toggleLinting: function() {
+      linting.toggle();
+    }
+  });
+}
+
+EditorActions.$inject = [
+  'injector',
+  'linting'
+];
+
 var ErrorSvg = "<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>";
 
-var WarningSvg = "<svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path fill=\"currentColor\" d=\"M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\"></path></svg>";
+var WarningSvg = "<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>";
 
 var SuccessSvg = "<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>";
 
-var OFFSET_TOP = -5,
-    OFFSET_RIGHT = -5;
+var OFFSET_TOP = -7,
+    OFFSET_RIGHT = -7;
 
@@ -25,9 +41,17 @@ var LOW_PRIORITY = 500;
 
+var stateToIcon = {
+  error: ErrorSvg,
+  warning: WarningSvg,
+  success: SuccessSvg,
+  inactive: SuccessSvg
+};
 
 function Linting(
-    config, bpmnjs, canvas,
-    elementRegistry, eventBus,
+    bpmnjs,
+    canvas,
+    config,
+    elementRegistry,
+    eventBus,
     overlays
 ) {
-
   this._bpmnjs = bpmnjs;
@@ -40,3 +64,4 @@ this._canvas = canvas;
   this._issues = {};
-  this._lintingActive = false;
+
+  this._active = config && config.active || false;
   this._linterConfig = emptyConfig;
@@ -49,2 +74,3 @@
   eventBus.on([
+    'import.done',
     'elements.changed',
@@ -54,3 +80,3 @@ 'linting.configChanged',
   ], LOW_PRIORITY, function(e) {
-    if (self.lintingActive()) {
+    if (self.isActive()) {
       self.update();
@@ -60,4 +86,14 @@ }
 
+  eventBus.on('linting.toggle', function(event) {
+
+    const active = event.active;
+
+    if (!active) {
+      self._clearIssues();
+      self._updateButton();
+    }
+  });
+
   eventBus.on('diagram.clear', function() {
-    self.clearIssues();
+    self._clearIssues();
   });
@@ -104,23 +140,13 @@
 
-Linting.prototype._init = function(config) {
-  var self = this;
+Linting.prototype._init = function() {
+  this._createButton();
 
-  var button = this._button = domify(
-    '<button class="bpmn-js-bpmnlint-button inactive"></button>'
-  );
-
-  this.updateButton();
-
-  button.addEventListener('click', function() {
-    self.toggleLinting();
-  });
-
-  this._canvas.getContainer().appendChild(button);
+  this._updateButton();
 };
 
-Linting.prototype.lintingActive = function() {
-  return this._lintingActive;
+Linting.prototype.isActive = function() {
+  return this._active;
 };
 
-Linting.prototype.formatIssues = function(issues) {
+Linting.prototype._formatIssues = function(issues) {
 
@@ -142,29 +168,25 @@ const reports = reduce(issues, function(reports, ruleReports, rule) {
 
-Linting.prototype.toggleLinting = function() {
-  if (this.lintingActive()) {
-    this.deactivateLinting();
-  } else {
-    this.activateLinting();
-  }
-};
+/**
+ * Toggle linting on or off.
+ *
+ * @param {boolean} [newActive]
+ *
+ * @return {boolean} the new active state
+ */
+Linting.prototype.toggle = function(newActive) {
 
-Linting.prototype.activateLinting = function() {
-  this.setActive(true);
-};
+  newActive = typeof newActive === 'undefined' ? !this.isActive() : newActive;
 
-Linting.prototype.deactivateLinting = function() {
-  this.setActive(false);
+  this._setActive(newActive);
 
-  this.clearIssues();
-
-  this.updateButton();
+  return newActive;
 };
 
-Linting.prototype.setActive = function(active) {
+Linting.prototype._setActive = function(active) {
 
-  if (this._lintingActive === active) {
+  if (this._active === active) {
     return;
   }
 
-  this._lintingActive = active;
+  this._active = active;
 
@@ -180,2 +202,8 @@ this._eventBus.fire('linting.toggle', { active: active });
 
+  var definitions = this._bpmnjs.getDefinitions();
+
+  if (!definitions) {
+    return;
+  }
+
   var lintStart = this._lintStart = Math.random();
@@ -189,3 +217,3 @@
 
-    newIssues = self.formatIssues(newIssues);
+    newIssues = self._formatIssues(newIssues);
 
@@ -215,10 +243,8 @@ var remove = {},
 
-    self.removeProcessIssues();
+    self._clearOverlays();
+    self._createIssues(add);
 
-    self.removeIssues(remove);
-    self.createIssues(add);
-
     self._issues = newIssues;
 
-    self.updateButton();
+    self._updateButton();
 
@@ -233,5 +259,5 @@ self._fireComplete(newIssues);
 
-Linting.prototype.createIssues = function(issues) {
+Linting.prototype._createIssues = function(issues) {
   for (var id in issues) {
-    this.createElementIssues(id, issues[id]);
+    this._createElementIssues(id, issues[id]);
   }
@@ -243,197 +269,197 @@ };
  *
- * @param {String} elementId - Elements ID.
+ * @param {string} elementId - Elements ID.
  * @param {Array} elementIssues - All element issues including warnings and errors.
  */
-Linting.prototype.createElementIssues = function(elementId, elementIssues) {
-
+Linting.prototype._createElementIssues = function(elementId, elementIssues) {
   var element = this._elementRegistry.get(elementId);
 
   if (!element) {
-    // gracefully handle element not found
     return;
   }
 
-  var isProcess = element.type === 'bpmn:Process';
+  var menuPosition;
+  var position;
 
-  var position = { top: OFFSET_TOP, right: OFFSET_RIGHT };
+  if (element === this._canvas.getRootElement()) {
+    menuPosition = 'bottom-right';
 
-  elementIssues = groupBy(elementIssues, function(elementIssue) {
+    position = {
+      top: 20,
+      left: 150
+    };
+  } else {
+    menuPosition = 'top-right';
+
+    position = {
+      top: OFFSET_TOP,
+      left: OFFSET_RIGHT
+    };
+  }
+
+  var issuesByType = groupBy(elementIssues, function(elementIssue) {
     return elementIssue.category;
   });
 
-  var errors = elementIssues.error,
-      warnings = elementIssues.warn;
+  var errors = issuesByType.error,
+      warnings = issuesByType.warn;
 
-  var html = domify('<div class="bpmn-js-bpmnlint-issues"><div class="icons"></div></div>');
+  if (!errors && !warnings) {
+    return;
+  }
 
-  var icons = query('.icons', html);
+  var $html = domify(
+    '<div class="bjsl-overlay bjsl-issues-' + menuPosition + '"></div>'
+  );
 
-  var group;
+  var $icon = errors
+    ? domify('<div class="bjsl-icon bjsl-icon-error">' + ErrorSvg + '</div>')
+    : domify('<div class="bjsl-icon bjsl-icon-warning">' + WarningSvg + '</div>');
 
-  if (errors) {
-    icons.appendChild(domify('<span class="icon error">' + ErrorSvg + '</span>'));
+  var $dropdown = domify('<div class="bjsl-dropdown"></div>');
+  var $dropdownContent = domify('<div class="bjsl-dropdown-content"></div>');
+  var $issues = domify('<div class="bjsl-issues"></div>');
+  var $issueList = domify('<ul></ul>');
 
-    group = this.createGroup(errors, 'error', 'Errors', ErrorSvg);
+  $html.appendChild($icon);
+  $html.appendChild($dropdown);
 
-    html.appendChild(group);
-  }
+  $dropdown.appendChild($dropdownContent);
+  $dropdownContent.appendChild($issues);
 
-  if (warnings) {
-    icons.appendChild(domify('<span class="icon warning">' + WarningSvg + '</span>'));
+  $issues.appendChild($issueList);
 
-    group = this.createGroup(warnings, 'warning', 'Warnings', WarningSvg);
-
-    html.appendChild(group);
+  if (errors) {
+    this._addErrors($issueList, errors);
   }
 
-  if (isProcess) {
-    this.createProcessIssues(html);
-  } else {
-    this._overlayIds[elementId] = this._overlays.add(element, 'bpmnlint', {
-      position: position,
-      html: html,
-      scale: {
-        min: 1,
-        max: 1
-      }
-    });
+  if (warnings) {
+    this._addWarnings($issueList, warnings);
   }
 
+  this._overlayIds[elementId] = this._overlays.add(element, 'linting', {
+    position: position,
+    html: $html,
+    scale: {
+      min: .9
+    }
+  });
 };
 
-Linting.prototype.createGroup = function(issues, type, label, icon) {
+Linting.prototype._addErrors = function($ul, errors) {
 
-  var group = domify(
-    '<div class="group">' +
-      '<div class="header ' + type + '">' + icon + label + '</div>' +
-    '</div>'
-  );
+  var self = this;
 
-  issues.forEach(function(issue) {
-    var collapsable = domify(
-      '<div class="collapsable ' + type + '">' +
-      issue.message +
-      '</div>'
-    );
-
-    group.appendChild(collapsable);
+  errors.forEach(function(error) {
+    self._addEntry($ul, 'error', error);
   });
-
-  return group;
 };
 
-Linting.prototype.removeIssues = function(issues) {
-  var overlayId;
+Linting.prototype._addWarnings = function($ul, warnings) {
 
-  for (var id in issues) {
-    if (id === 'Process') {
-      this.removeProcessIssues();
-    } else {
-      overlayId = this._overlayIds[id];
+  var self = this;
 
-      // ignore process
-      if (overlayId) {
-        this._overlays.remove(overlayId);
-      }
-    }
-  }
+  warnings.forEach(function(error) {
+    self._addEntry($ul, 'warning', error);
+  });
 };
 
-/**
- * Removes all overlays and clears cached issues.
- */
-Linting.prototype.clearIssues = function() {
-  var overlayId;
+Linting.prototype._addEntry = function($ul, state, entry) {
 
-  for (var id in this._overlayIds) {
-    overlayId = this._overlayIds[id];
+  var rule = entry.rule,
+      message = entry.message;
 
-    this._overlays.remove(overlayId);
-  }
+  var icon = stateToIcon[state];
 
-  this._issues = {};
+  var $entry = domify(
+    '<li class="' + state + '">' +
+      icon +
+      '<a title="' + escapeHTML(rule) + ': ' + escapeHTML(message) + '" ' +
+         'data-rule="' + escapeHTML(rule) + '" ' +
+         'data-message="' + escapeHTML(message) + '"' +
+      '>' +
+        escapeHTML(message) +
+      '</a>' +
+    '</li>'
+  );
 
-  this.removeProcessIssues();
+  $ul.appendChild($entry);
 };
 
-/**
- * Sets button state to reflect if linting is active.
- *
- * @param {String} state
- */
-Linting.prototype.setButtonState = function(state, html) {
-  if (state === 'success') {
-    this._button.classList.add('success');
-    this._button.classList.remove('error');
-    this._button.classList.remove('inactive');
-    this._button.classList.remove('warning');
-  } else if (state === 'error') {
-    this._button.classList.add('error');
-    this._button.classList.remove('inactive');
-    this._button.classList.remove('success');
-    this._button.classList.remove('warning');
-  } else if (state === 'warning') {
-    this._button.classList.add('warning');
-    this._button.classList.remove('error');
-    this._button.classList.remove('inactive');
-    this._button.classList.remove('success');
-  } else if (state === 'inactive') {
-    this._button.classList.add('inactive');
-    this._button.classList.remove('error');
-    this._button.classList.remove('success');
-    this._button.classList.remove('warning');
-  }
+Linting.prototype._clearOverlays = function() {
+  this._overlays.remove({ type: 'linting' });
 
-  this._button.innerHTML = html;
+  this._overlayIds = {};
 };
 
-Linting.prototype.updateButton = function() {
-  if (this._lintingActive) {
-    var errors = 0,
-        warnings = 0;
+Linting.prototype._clearIssues = function() {
+  this._issues = {};
 
-    for (var id in this._issues) {
-      this._issues[id].forEach(function(issue) {
-        if (issue.category === 'error') {
-          errors++;
-        } else if (issue.category === 'warn') {
-          warnings++;
-        }
-      });
-    }
+  this._clearOverlays();
+};
 
-    if (errors) {
-      this.setButtonState('error', ErrorSvg + '<span>' + errors + ' Errors, ' + warnings + ' Warnings</span>');
-    } else if (warnings) {
-      this.setButtonState('warning', WarningSvg + '<span>' + errors + ' Errors, ' + warnings + ' Warnings</span>');
+Linting.prototype._setButtonState = function(state, errors, warnings) {
+  var button = this._button;
+
+  var icon = stateToIcon[state];
+
+  var html = icon + '<span>' + errors + ' Errors, ' + warnings + ' Warnings</span>';
+
+  [
+    'error',
+    'inactive',
+    'success',
+    'warning'
+  ].forEach(function(s) {
+    if (state === s) {
+      button.classList.add('bjsl-button-' + s);
     } else {
-      this.setButtonState('success', SuccessSvg + '<span>0 Errors, 0 Warnings</span>');
+      button.classList.remove('bjsl-button-' + s);
     }
+  });
 
-  } else {
-    this.setButtonState('inactive', SuccessSvg + '<span>0 Errors, 0 Warnings</span>');
+  button.innerHTML = html;
+};
+
+Linting.prototype._updateButton = function() {
+
+  if (!this.isActive()) {
+    this._setButtonState('inactive', 0, 0);
+
+    return;
   }
 
-};
+  var errors = 0,
+      warnings = 0;
 
-Linting.prototype.createProcessIssues = function(html) {
-  var container = this._canvas.getContainer();
+  for (var id in this._issues) {
+    this._issues[id].forEach(function(issue) {
+      if (issue.category === 'error') {
+        errors++;
+      } else if (issue.category === 'warn') {
+        warnings++;
+      }
+    });
+  }
 
-  html.classList.add('bpmn-js-bpmnlint-process-issues');
+  var state = (errors && 'error') || (warnings && 'warning') || 'success';
 
-  container.appendChild(html);
+  this._setButtonState(state, errors, warnings);
 };
 
-Linting.prototype.removeProcessIssues = function() {
-  var container = this._canvas.getContainer();
+Linting.prototype._createButton = function() {
 
-  var html = query('.bpmn-js-bpmnlint-process-issues', container);
+  var self = this;
 
-  if (html) {
-    remove(html);
-  }
+  this._button = domify(
+    '<button class="bjsl-button bjsl-button-inactive" title="Toggle linting"></button>'
+  );
+
+  this._button.addEventListener('click', function() {
+    self.toggle();
+  });
+
+  this._canvas.getContainer().appendChild(this._button);
 };
 
 Linting.prototype.lint = function() {
-
   var definitions = this._bpmnjs.getDefinitions();
@@ -447,5 +473,5 @@
 Linting.$inject = [
-  'config.linting',
   'bpmnjs',
   'canvas',
+  'config.linting',
   'elementRegistry',
@@ -456,21 +482,6 @@ 'eventBus',
 
-function EditorActions(injector, linting) {
-  var editorActions = injector.get('editorActions', false);
-
-  editorActions && editorActions.register({
-    toggleLinting: function() {
-      linting.toggleLinting();
-    }
-  });
-}
-
-EditorActions.$inject = [
-  'injector',
-  'linting'
-];
-
 var index = {
   __init__: [ 'linting', 'lintingEditorActions' ],
   linting: [ 'type', Linting ],
-  lintingEditorActions: ['type', EditorActions]
+  lintingEditorActions: ['type', EditorActions ]
 };
@@ -477,0 +488,0 @@

dist/index.js

@@ -6,11 +6,27 @@ 'use strict';
 var minDom = require('min-dom');
+var EscapeUtil = require('diagram-js/lib/util/EscapeUtil');
 
+function EditorActions(injector, linting) {
+  var editorActions = injector.get('editorActions', false);
+
+  editorActions && editorActions.register({
+    toggleLinting: function() {
+      linting.toggle();
+    }
+  });
+}
+
+EditorActions.$inject = [
+  'injector',
+  'linting'
+];
+
 var ErrorSvg = "<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>";
 
-var WarningSvg = "<svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path fill=\"currentColor\" d=\"M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\"></path></svg>";
+var WarningSvg = "<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>";
 
 var SuccessSvg = "<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>";
 
-var OFFSET_TOP = -5,
-    OFFSET_RIGHT = -5;
+var OFFSET_TOP = -7,
+    OFFSET_RIGHT = -7;
 
@@ -28,9 +44,17 @@ var LOW_PRIORITY = 500;
 
+var stateToIcon = {
+  error: ErrorSvg,
+  warning: WarningSvg,
+  success: SuccessSvg,
+  inactive: SuccessSvg
+};
 
 function Linting(
-    config, bpmnjs, canvas,
-    elementRegistry, eventBus,
+    bpmnjs,
+    canvas,
+    config,
+    elementRegistry,
+    eventBus,
     overlays
 ) {
-
   this._bpmnjs = bpmnjs;
@@ -43,3 +67,4 @@ this._canvas = canvas;
   this._issues = {};
-  this._lintingActive = false;
+
+  this._active = config && config.active || false;
   this._linterConfig = emptyConfig;
@@ -52,2 +77,3 @@
   eventBus.on([
+    'import.done',
     'elements.changed',
@@ -57,3 +83,3 @@ 'linting.configChanged',
   ], LOW_PRIORITY, function(e) {
-    if (self.lintingActive()) {
+    if (self.isActive()) {
       self.update();
@@ -63,4 +89,14 @@ }
 
+  eventBus.on('linting.toggle', function(event) {
+
+    const active = event.active;
+
+    if (!active) {
+      self._clearIssues();
+      self._updateButton();
+    }
+  });
+
   eventBus.on('diagram.clear', function() {
-    self.clearIssues();
+    self._clearIssues();
   });
@@ -107,23 +143,13 @@
 
-Linting.prototype._init = function(config) {
-  var self = this;
+Linting.prototype._init = function() {
+  this._createButton();
 
-  var button = this._button = minDom.domify(
-    '<button class="bpmn-js-bpmnlint-button inactive"></button>'
-  );
-
-  this.updateButton();
-
-  button.addEventListener('click', function() {
-    self.toggleLinting();
-  });
-
-  this._canvas.getContainer().appendChild(button);
+  this._updateButton();
 };
 
-Linting.prototype.lintingActive = function() {
-  return this._lintingActive;
+Linting.prototype.isActive = function() {
+  return this._active;
 };
 
-Linting.prototype.formatIssues = function(issues) {
+Linting.prototype._formatIssues = function(issues) {
 
@@ -145,29 +171,25 @@ const reports = minDash.reduce(issues, function(reports, ruleReports, rule) {
 
-Linting.prototype.toggleLinting = function() {
-  if (this.lintingActive()) {
-    this.deactivateLinting();
-  } else {
-    this.activateLinting();
-  }
-};
+/**
+ * Toggle linting on or off.
+ *
+ * @param {boolean} [newActive]
+ *
+ * @return {boolean} the new active state
+ */
+Linting.prototype.toggle = function(newActive) {
 
-Linting.prototype.activateLinting = function() {
-  this.setActive(true);
-};
+  newActive = typeof newActive === 'undefined' ? !this.isActive() : newActive;
 
-Linting.prototype.deactivateLinting = function() {
-  this.setActive(false);
+  this._setActive(newActive);
 
-  this.clearIssues();
-
-  this.updateButton();
+  return newActive;
 };
 
-Linting.prototype.setActive = function(active) {
+Linting.prototype._setActive = function(active) {
 
-  if (this._lintingActive === active) {
+  if (this._active === active) {
     return;
   }
 
-  this._lintingActive = active;
+  this._active = active;
 
@@ -183,2 +205,8 @@ this._eventBus.fire('linting.toggle', { active: active });
 
+  var definitions = this._bpmnjs.getDefinitions();
+
+  if (!definitions) {
+    return;
+  }
+
   var lintStart = this._lintStart = Math.random();
@@ -192,3 +220,3 @@
 
-    newIssues = self.formatIssues(newIssues);
+    newIssues = self._formatIssues(newIssues);
 
@@ -218,10 +246,8 @@ var remove = {},
 
-    self.removeProcessIssues();
+    self._clearOverlays();
+    self._createIssues(add);
 
-    self.removeIssues(remove);
-    self.createIssues(add);
-
     self._issues = newIssues;
 
-    self.updateButton();
+    self._updateButton();
 
@@ -236,5 +262,5 @@ self._fireComplete(newIssues);
 
-Linting.prototype.createIssues = function(issues) {
+Linting.prototype._createIssues = function(issues) {
   for (var id in issues) {
-    this.createElementIssues(id, issues[id]);
+    this._createElementIssues(id, issues[id]);
   }
@@ -246,197 +272,197 @@ };
  *
- * @param {String} elementId - Elements ID.
+ * @param {string} elementId - Elements ID.
  * @param {Array} elementIssues - All element issues including warnings and errors.
  */
-Linting.prototype.createElementIssues = function(elementId, elementIssues) {
-
+Linting.prototype._createElementIssues = function(elementId, elementIssues) {
   var element = this._elementRegistry.get(elementId);
 
   if (!element) {
-    // gracefully handle element not found
     return;
   }
 
-  var isProcess = element.type === 'bpmn:Process';
+  var menuPosition;
+  var position;
 
-  var position = { top: OFFSET_TOP, right: OFFSET_RIGHT };
+  if (element === this._canvas.getRootElement()) {
+    menuPosition = 'bottom-right';
 
-  elementIssues = minDash.groupBy(elementIssues, function(elementIssue) {
+    position = {
+      top: 20,
+      left: 150
+    };
+  } else {
+    menuPosition = 'top-right';
+
+    position = {
+      top: OFFSET_TOP,
+      left: OFFSET_RIGHT
+    };
+  }
+
+  var issuesByType = minDash.groupBy(elementIssues, function(elementIssue) {
     return elementIssue.category;
   });
 
-  var errors = elementIssues.error,
-      warnings = elementIssues.warn;
+  var errors = issuesByType.error,
+      warnings = issuesByType.warn;
 
-  var html = minDom.domify('<div class="bpmn-js-bpmnlint-issues"><div class="icons"></div></div>');
+  if (!errors && !warnings) {
+    return;
+  }
 
-  var icons = minDom.query('.icons', html);
+  var $html = minDom.domify(
+    '<div class="bjsl-overlay bjsl-issues-' + menuPosition + '"></div>'
+  );
 
-  var group;
+  var $icon = errors
+    ? minDom.domify('<div class="bjsl-icon bjsl-icon-error">' + ErrorSvg + '</div>')
+    : minDom.domify('<div class="bjsl-icon bjsl-icon-warning">' + WarningSvg + '</div>');
 
-  if (errors) {
-    icons.appendChild(minDom.domify('<span class="icon error">' + ErrorSvg + '</span>'));
+  var $dropdown = minDom.domify('<div class="bjsl-dropdown"></div>');
+  var $dropdownContent = minDom.domify('<div class="bjsl-dropdown-content"></div>');
+  var $issues = minDom.domify('<div class="bjsl-issues"></div>');
+  var $issueList = minDom.domify('<ul></ul>');
 
-    group = this.createGroup(errors, 'error', 'Errors', ErrorSvg);
+  $html.appendChild($icon);
+  $html.appendChild($dropdown);
 
-    html.appendChild(group);
-  }
+  $dropdown.appendChild($dropdownContent);
+  $dropdownContent.appendChild($issues);
 
-  if (warnings) {
-    icons.appendChild(minDom.domify('<span class="icon warning">' + WarningSvg + '</span>'));
+  $issues.appendChild($issueList);
 
-    group = this.createGroup(warnings, 'warning', 'Warnings', WarningSvg);
-
-    html.appendChild(group);
+  if (errors) {
+    this._addErrors($issueList, errors);
   }
 
-  if (isProcess) {
-    this.createProcessIssues(html);
-  } else {
-    this._overlayIds[elementId] = this._overlays.add(element, 'bpmnlint', {
-      position: position,
-      html: html,
-      scale: {
-        min: 1,
-        max: 1
-      }
-    });
+  if (warnings) {
+    this._addWarnings($issueList, warnings);
   }
 
+  this._overlayIds[elementId] = this._overlays.add(element, 'linting', {
+    position: position,
+    html: $html,
+    scale: {
+      min: .9
+    }
+  });
 };
 
-Linting.prototype.createGroup = function(issues, type, label, icon) {
+Linting.prototype._addErrors = function($ul, errors) {
 
-  var group = minDom.domify(
-    '<div class="group">' +
-      '<div class="header ' + type + '">' + icon + label + '</div>' +
-    '</div>'
-  );
+  var self = this;
 
-  issues.forEach(function(issue) {
-    var collapsable = minDom.domify(
-      '<div class="collapsable ' + type + '">' +
-      issue.message +
-      '</div>'
-    );
-
-    group.appendChild(collapsable);
+  errors.forEach(function(error) {
+    self._addEntry($ul, 'error', error);
   });
-
-  return group;
 };
 
-Linting.prototype.removeIssues = function(issues) {
-  var overlayId;
+Linting.prototype._addWarnings = function($ul, warnings) {
 
-  for (var id in issues) {
-    if (id === 'Process') {
-      this.removeProcessIssues();
-    } else {
-      overlayId = this._overlayIds[id];
+  var self = this;
 
-      // ignore process
-      if (overlayId) {
-        this._overlays.remove(overlayId);
-      }
-    }
-  }
+  warnings.forEach(function(error) {
+    self._addEntry($ul, 'warning', error);
+  });
 };
 
-/**
- * Removes all overlays and clears cached issues.
- */
-Linting.prototype.clearIssues = function() {
-  var overlayId;
+Linting.prototype._addEntry = function($ul, state, entry) {
 
-  for (var id in this._overlayIds) {
-    overlayId = this._overlayIds[id];
+  var rule = entry.rule,
+      message = entry.message;
 
-    this._overlays.remove(overlayId);
-  }
+  var icon = stateToIcon[state];
 
-  this._issues = {};
+  var $entry = minDom.domify(
+    '<li class="' + state + '">' +
+      icon +
+      '<a title="' + EscapeUtil.escapeHTML(rule) + ': ' + EscapeUtil.escapeHTML(message) + '" ' +
+         'data-rule="' + EscapeUtil.escapeHTML(rule) + '" ' +
+         'data-message="' + EscapeUtil.escapeHTML(message) + '"' +
+      '>' +
+        EscapeUtil.escapeHTML(message) +
+      '</a>' +
+    '</li>'
+  );
 
-  this.removeProcessIssues();
+  $ul.appendChild($entry);
 };
 
-/**
- * Sets button state to reflect if linting is active.
- *
- * @param {String} state
- */
-Linting.prototype.setButtonState = function(state, html) {
-  if (state === 'success') {
-    this._button.classList.add('success');
-    this._button.classList.remove('error');
-    this._button.classList.remove('inactive');
-    this._button.classList.remove('warning');
-  } else if (state === 'error') {
-    this._button.classList.add('error');
-    this._button.classList.remove('inactive');
-    this._button.classList.remove('success');
-    this._button.classList.remove('warning');
-  } else if (state === 'warning') {
-    this._button.classList.add('warning');
-    this._button.classList.remove('error');
-    this._button.classList.remove('inactive');
-    this._button.classList.remove('success');
-  } else if (state === 'inactive') {
-    this._button.classList.add('inactive');
-    this._button.classList.remove('error');
-    this._button.classList.remove('success');
-    this._button.classList.remove('warning');
-  }
+Linting.prototype._clearOverlays = function() {
+  this._overlays.remove({ type: 'linting' });
 
-  this._button.innerHTML = html;
+  this._overlayIds = {};
 };
 
-Linting.prototype.updateButton = function() {
-  if (this._lintingActive) {
-    var errors = 0,
-        warnings = 0;
+Linting.prototype._clearIssues = function() {
+  this._issues = {};
 
-    for (var id in this._issues) {
-      this._issues[id].forEach(function(issue) {
-        if (issue.category === 'error') {
-          errors++;
-        } else if (issue.category === 'warn') {
-          warnings++;
-        }
-      });
-    }
+  this._clearOverlays();
+};
 
-    if (errors) {
-      this.setButtonState('error', ErrorSvg + '<span>' + errors + ' Errors, ' + warnings + ' Warnings</span>');
-    } else if (warnings) {
-      this.setButtonState('warning', WarningSvg + '<span>' + errors + ' Errors, ' + warnings + ' Warnings</span>');
+Linting.prototype._setButtonState = function(state, errors, warnings) {
+  var button = this._button;
+
+  var icon = stateToIcon[state];
+
+  var html = icon + '<span>' + errors + ' Errors, ' + warnings + ' Warnings</span>';
+
+  [
+    'error',
+    'inactive',
+    'success',
+    'warning'
+  ].forEach(function(s) {
+    if (state === s) {
+      button.classList.add('bjsl-button-' + s);
     } else {
-      this.setButtonState('success', SuccessSvg + '<span>0 Errors, 0 Warnings</span>');
+      button.classList.remove('bjsl-button-' + s);
     }
+  });
 
-  } else {
-    this.setButtonState('inactive', SuccessSvg + '<span>0 Errors, 0 Warnings</span>');
+  button.innerHTML = html;
+};
+
+Linting.prototype._updateButton = function() {
+
+  if (!this.isActive()) {
+    this._setButtonState('inactive', 0, 0);
+
+    return;
   }
 
-};
+  var errors = 0,
+      warnings = 0;
 
-Linting.prototype.createProcessIssues = function(html) {
-  var container = this._canvas.getContainer();
+  for (var id in this._issues) {
+    this._issues[id].forEach(function(issue) {
+      if (issue.category === 'error') {
+        errors++;
+      } else if (issue.category === 'warn') {
+        warnings++;
+      }
+    });
+  }
 
-  html.classList.add('bpmn-js-bpmnlint-process-issues');
+  var state = (errors && 'error') || (warnings && 'warning') || 'success';
 
-  container.appendChild(html);
+  this._setButtonState(state, errors, warnings);
 };
 
-Linting.prototype.removeProcessIssues = function() {
-  var container = this._canvas.getContainer();
+Linting.prototype._createButton = function() {
 
-  var html = minDom.query('.bpmn-js-bpmnlint-process-issues', container);
+  var self = this;
 
-  if (html) {
-    minDom.remove(html);
-  }
+  this._button = minDom.domify(
+    '<button class="bjsl-button bjsl-button-inactive" title="Toggle linting"></button>'
+  );
+
+  this._button.addEventListener('click', function() {
+    self.toggle();
+  });
+
+  this._canvas.getContainer().appendChild(this._button);
 };
 
 Linting.prototype.lint = function() {
-
   var definitions = this._bpmnjs.getDefinitions();
@@ -450,5 +476,5 @@
 Linting.$inject = [
-  'config.linting',
   'bpmnjs',
   'canvas',
+  'config.linting',
   'elementRegistry',
@@ -459,21 +485,6 @@ 'eventBus',
 
-function EditorActions(injector, linting) {
-  var editorActions = injector.get('editorActions', false);
-
-  editorActions && editorActions.register({
-    toggleLinting: function() {
-      linting.toggleLinting();
-    }
-  });
-}
-
-EditorActions.$inject = [
-  'injector',
-  'linting'
-];
-
 var index = {
   __init__: [ 'linting', 'lintingEditorActions' ],
   linting: [ 'type', Linting ],
-  lintingEditorActions: ['type', EditorActions]
+  lintingEditorActions: ['type', EditorActions ]
 };
@@ -480,0 +491,0 @@

package.json

 {
   "name": "bpmn-js-bpmnlint",
-  "version": "0.12.4",
+  "version": "0.13.0",
   "description": "bpmn-js integration for bpmnlint",
@@ -15,4 +15,5 @@ "main": "dist/index.js",
     "bundle": "NODE_ENV=production rollup -c",
+    "bundle:watch": "NODE_ENV=production rollup -c -w",
     "test:bundle": "echo \"NO TESTS YET\"",
-    "copy-assets": "cpx 'assets/css/*' dist/assets/css -v",
+    "copy-assets": "cpx assets/css/* dist/assets/css/ -v",
     "prepublishOnly": "run-s distro"
@@ -33,3 +34,3 @@ },
   "devDependencies": {
-    "bpmn-js": "^4.0.3",
+    "bpmn-js": "^4.0.4",
     "bpmnlint": "^6.1.1",
@@ -36,0 +37,0 @@ "bpmnlint-loader": "^0.1.4",

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

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

Lines of code

855

increased by1.42%

Worsened metrics

Total package byte prevSize

199727

decreased by-2.85%

No dependency changes