@camunda/linting 0.4.1 → 0.5.0-alpha.2

package/CHANGELOG.md

@@ -6,6 +6,19 @@ All notable changes to [@camunda/linting](https://github.com/camunda/linting) ar
 
 ___Note:__ Yet to be released changes appear here._
 
+## 0.5.0-alpha.2
+
+* `FIX`: publish assets
+
+## 0.5.0-alpha.1
+
+* `FIX`: publish modeler.js
+
+## 0.5.0-alpha.0
+
+* `FEAT`: add bpmn-js plugin for canvas and properties panel errors ([#11](https://github.com/camunda/linting/pull/11))
+* `FEAT`: add no-zeebe-properties rule ([#43](https://github.com/camunda/bpmnlint-plugin-camunda-compat/pull/43))
+
 ## 0.4.1
 
 * `DEPS`: broaden supported versions range of `bpmn-js-properties-panel`

package/README.md

@@ -8,12 +8,24 @@ The BPMN linter used by the Camunda Desktop and Web Modeler. Batteries included.
 * configures linter based on `modeler:executionPlatform` and `modeler:executionPlatformVersion`
 * creates error messages to be shown in desktop and web modeler
 * creates errors to be shown in properties panel
+* creates error overlays to be shown on canvas 
 
 # Usage
 
 ```javascript
+import Modeler from 'bpmn-js/lib/Modeler';
+
 import { Linter } from '@camunda/linting';
-import { getErrors } from '@camunda/linting/properties-panel';
+
+import lintingModule from '@camunda/linting/modeler';
+
+import '@camunda/linting/assets/linting.css';
+
+const modeler = new Modeler({
+  additionalModules: [
+    lintingModule
+  ]
+});
 
 // configure to be used with desktop or web modeler
 const linter = new Linter({
@@ -28,10 +40,27 @@ const reports = await linter.lint(xml);
 
 ...
 
-const errors = getErrors(reports, element);
+// update errors on canvas and in properties panel (requires bpmn-js-properties-panel >= 1.3.0)
+modeler.get('linting').setErrors(reports);
+
+// show error by selecting element and properties panel entry
+modeler.get('linting').showError(report);
+```
+
+# Development
+
+```sh
+# install
+npm i
+
+# run tests
+npm t
+
+# run tests in watch mode
+npm run test:watch
 
-// bpmn-js-properties-panel >=1.3.0
-eventBus.fire('propertiesPanel.setErrors', { errors });
+# run example
+npm start
 ```
 
 # License

package/assets/linting.css

@@ -0,0 +1,33 @@
+:root {
+  --color-red-360-100-45: hsl(360, 100%, 45%);
+  --color-white: hsl(0, 0%, 100%);
+
+  --linting-annotation-background-color: var(--color-red-360-100-45);
+  --linting-annotation-fill-color: var(--color-white);
+}
+
+.djs-overlays:not(.hover) .bjs-linting-annotation {
+  opacity: 0.5;
+}
+
+.djs-overlays.hover .bjs-linting-annotation,
+.djs-overlays .bjs-linting-annotation:hover {
+  opacity: 1;
+}
+
+.bjs-linting-annotation {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1px;
+  border-radius: 2px;
+  background-color: var(--linting-annotation-background-color);
+  cursor: default;
+  z-index: 100000;
+}
+
+.bjs-linting-annotation > svg {
+  fill: var(--linting-annotation-fill-color);
+  width: 18px;
+  height: 18px;
+}

package/lib/modeler/Linting.js

@@ -0,0 +1,105 @@
+import { getErrors } from '../utils/properties-panel';
+
+export default class Linting {
+  constructor(canvas, elementRegistry, eventBus, lintingAnnotations, selection) {
+    this._canvas = canvas;
+    this._elementRegistry = elementRegistry;
+    this._eventBus = eventBus;
+    this._lintingAnnotations = lintingAnnotations;
+    this._selection = selection;
+
+    this._reports = [];
+
+    eventBus.on('selection.changed', () => this._update());
+
+    eventBus.on('lintingAnnotations.click', ({ report }) => this.showError(report));
+  }
+
+  showError(report) {
+    const {
+      id,
+      propertiesPanel = {}
+    } = report;
+
+    const element = this._elementRegistry.get(id);
+
+    if (element !== this._canvas.getRootElement() && needsScrollToElement(this._canvas, element)) {
+      this._canvas.scrollToElement(element);
+    }
+
+    this._selection.select(element);
+
+    const { entryId } = propertiesPanel;
+
+    this._eventBus.fire('propertiesPanel.showEntry', {
+      id: entryId
+    });
+  }
+
+  setErrors(reports) {
+    this._reports = reports;
+
+    this._update();
+  }
+
+  activate() {
+    this._update();
+  }
+
+  deactivate() {
+    this._update([]);
+  }
+
+  _update(reports) {
+    if (!reports) {
+      reports = this._reports;
+    }
+
+    // set annotations
+    this._lintingAnnotations.setErrors(reports);
+
+    // set properties panel errors
+    const selectedElement = this._getSelectedElement();
+
+    this._eventBus.fire('propertiesPanel.setErrors', {
+      errors: getErrors(this._reports, selectedElement)
+    });
+  }
+
+  _getSelectedElement() {
+    const selection = this._selection.get();
+
+    if (!selection || !selection.length) {
+      return this._canvas.getRootElement();
+    }
+
+    const selectedElement = selection[ 0 ];
+
+    if (isLabel(selectedElement)) {
+      return selectedElement.labelTarget;
+    }
+
+    return selectedElement;
+  }
+}
+
+Linting.$inject = [
+  'canvas',
+  'elementRegistry',
+  'eventBus',
+  'lintingAnnotations',
+  'selection'
+];
+
+function isLabel(element) {
+  return !!element.labelTarget;
+}
+
+function needsScrollToElement(canvas, element) {
+  const viewbox = canvas.viewbox();
+
+  return viewbox.x > element.x
+    || viewbox.y > element.y
+    || viewbox.x + viewbox.width < element.x + element.width
+    || viewbox.y + viewbox.height < element.y + element.height;
+}

package/lib/modeler/LintingAnnotations.js

@@ -0,0 +1,72 @@
+import { groupBy } from 'min-dash';
+
+import { domify } from 'min-dom';
+
+const errorSvg = `
+<svg viewBox="2 2 20 20">
+  <path d="M12,5 C15.8659932,5 19,8.13400675 19,12 C19,15.8659932 15.8659932,19 12,19 C8.13400675,19 5,15.8659932 5,12 C5,8.13400675 8.13400675,5 12,5 Z M9.33333333,8 L8,9.33333333 L10.667,12 L8,14.6666667 L9.33333333,16 L12,13.333 L14.6666667,16 L16,14.6666667 L13.333,12 L16,9.33333333 L14.6666667,8 L12,10.666 L9.33333333,8 Z"></path>
+</svg>
+`;
+
+export default class LintingAnnotations {
+  constructor(elementRegistry, eventBus, overlays) {
+    this._elementRegistry = elementRegistry;
+    this._eventBus = eventBus;
+    this._overlays = overlays;
+
+    this._reportsByElement = {};
+
+    this._overlayIds = {};
+  }
+
+  setErrors(reports) {
+    this._reportsByElement = groupBy(reports, 'id');
+
+    this._update();
+  }
+
+  _update(reportsByElement) {
+    if (!reportsByElement) {
+      reportsByElement = this._reportsByElement;
+    }
+
+    this._overlays.remove({ type: 'linting' });
+
+    Object.entries(reportsByElement).forEach(([ id, reports ]) => {
+      const element = this._elementRegistry.get(id);
+
+      if (!element) {
+        return;
+      }
+
+      const overlay = domify(`
+        <div class="bjs-linting-annotation" title="Click to show">
+          ${ errorSvg }
+        </div>
+      `);
+
+      overlay.addEventListener('click', () => {
+        this._eventBus.fire('lintingAnnotations.click', { report: reports[ 0 ] });
+      });
+
+      const overlayId = this._overlays.add(element, 'linting', {
+        position: {
+          bottom: -5,
+          left: 0
+        },
+        html: overlay,
+        show: {
+          minZoom: 0.5
+        }
+      });
+
+      this._overlayIds[ id ] = overlayId;
+    });
+  }
+}
+
+LintingAnnotations.$inject = [
+  'elementRegistry',
+  'eventBus',
+  'overlays'
+];

package/lib/modeler/index.js

@@ -0,0 +1,11 @@
+import Linting from './Linting';
+import LintingAnnotations from './LintingAnnotations';
+
+export default {
+  __init__: [
+    'linting',
+    'lintingAnnotations'
+  ],
+  linting: [ 'type', Linting ],
+  lintingAnnotations: [ 'type', LintingAnnotations ]
+};

package/lib/utils/error-messages.js

@@ -108,13 +108,20 @@ function getExtensionElementNotAllowedErrorMessage(report, executionPlatformLabe
 
   const {
     node,
+    parentNode,
     extensionElement
   } = error;
 
+  const typeString = getTypeString(parentNode || node);
+
   if (is(node, 'bpmn:BusinessRuleTask') && is(extensionElement, 'zeebe:CalledDecision')) {
     return `A <Business Rule Task> with <Implementation: DMN decision> is not supported by ${ executionPlatformLabel }`;
   }
 
+  if (is(extensionElement, 'zeebe:Properties')) {
+    return `${ getIndefiniteArticle(typeString) } <${ typeString }> with <Extension properties> is not supported by ${ executionPlatformLabel }`;
+  }
+
   return message;
 }
 

package/lib/utils/properties-panel.js

@@ -122,6 +122,14 @@ export function getEntryIds(report) {
     });
   }
 
+  if (isExtensionElementNotAllowedError(error, 'zeebe:Properties')) {
+    const { extensionElement } = error;
+
+    return extensionElement.get('zeebe:properties').map((zeebeProperty, index) => {
+      return `${ id }-extensionProperty-${ index }-name`;
+    });
+  }
+
   return [];
 }
 
@@ -189,6 +197,16 @@ export function getErrorMessage(id) {
   if (/^.+-header-[0-9]+-key$/.test(id)) {
     return 'Must be unique.';
   }
+
+  if (/^.+-extensionProperty-[0-9]+-name$/.test(id)) {
+    return 'Not supported.';
+  }
+}
+
+function isExtensionElementNotAllowedError(error, extensionElement, type) {
+  return error.type === ERROR_TYPES.EXTENSION_ELEMENT_NOT_ALLOWED
+    && is(error.extensionElement, extensionElement)
+    && (!type || is(error.node, type));
 }
 
 function isExtensionElementRequiredError(error, requiredExtensionElement, type) {

package/modeler.js

@@ -0,0 +1 @@
+export { default } from './lib/modeler';

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@camunda/linting",
-  "version": "0.4.1",
+  "version": "0.5.0-alpha.2",
   "description": "Linting for Camunda Platform",
   "main": "index.js",
   "scripts": {
     "all": "npm run lint && npm test",
     "lint": "eslint .",
-    "test": "mocha -r esm --reporter=spec --recursive test/spec",
-    "test:watch": "npm run test -- --watch"
+    "start": "cross-env SINGLE_START=modeler npm run test:watch",
+    "test": "karma start",
+    "test:watch": "npm test -- --auto-watch --no-single-run"
   },
   "keywords": [
     "bpmnlint",
@@ -25,18 +26,32 @@
   "dependencies": {
     "bpmn-moddle": "^7.1.2",
     "bpmnlint": "^7.8.0",
-    "bpmnlint-plugin-camunda-compat": "^0.10.0",
+    "bpmnlint-plugin-camunda-compat": "^0.11.0",
     "bpmnlint-utils": "^1.0.2",
+    "min-dash": "^3.8.1",
+    "min-dom": "^3.2.1",
     "modeler-moddle": "^0.2.0",
-    "zeebe-bpmn-moddle": "^0.12.1"
+    "zeebe-bpmn-moddle": "^0.14.0"
   },
   "devDependencies": {
+    "bpmn-js": "^9.4.0",
     "chai": "^4.3.6",
+    "cross-env": "^7.0.3",
     "eslint": "^4.11.0",
     "eslint-plugin-bpmn-io": "^0.4.1",
-    "esm": "^3.2.25",
-    "min-dash": "^3.8.1",
-    "mocha": "^4.0.1"
+    "karma": "^6.4.0",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-debug-launcher": "0.0.5",
+    "karma-env-preprocessor": "^0.1.1",
+    "karma-mocha": "^2.0.1",
+    "karma-sinon-chai": "^2.0.2",
+    "karma-webpack": "^5.0.0",
+    "mocha": "^4.0.1",
+    "mocha-test-container-support": "^0.2.0",
+    "puppeteer": "^16.2.0",
+    "sinon": "^14.0.0",
+    "sinon-chai": "^3.7.0",
+    "webpack": "^5.74.0"
   },
   "peerDependencies": {
     "bpmn-js-properties-panel": "^1.3.0"
@@ -47,8 +62,9 @@
     }
   },
   "files": [
+    "assets",
     "lib",
-    "properties-panel.js"
+    "modeler.js"
   ],
   "publishConfig": {
     "access": "public"

package/properties-panel.js

@@ -1 +0,0 @@
-export * from './lib/utils/properties-panel';