feat: provide element reports on canvas

Closes #68
camunda · Jul 24, 2023 · 74e34ab · 74e34ab
1 parent 289a228
commit 74e34ab
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 8 deletions.
diff --git a/assets/linting.css b/assets/linting.css
@@ -31,4 +31,68 @@
 
 .cl-icon-info {
   --icon-bg-color: var(--cl-color-info);
+}
+
+.cl-overlay {
+  z-index: 500;
+}
+
+.cl-overlay:hover {
+  z-index: 1000;
+}
+
+.cl-dropdown {
+  position: relative;
+}
+
+.cl-dropdown-menu {
+  position: absolute;
+  top: 18px;
+  left: 5px;
+  padding: 5px;
+}
+
+.cl-dropdown-menu {
+  display: none;
+}
+
+.cl-dropdown:hover .cl-dropdown-menu,
+.cl-dropdown.open .cl-dropdown-menu {
+  display: block;
+}
+
+.cl-reports {
+  padding: 8px;
+  margin: 0;
+  list-style: none;
+
+  color: var(--cl-font-color);
+  font-family: var(--cl-font-family);
+  font-size: var(--cl-font-size);
+  background: var(--color-grey-225-10-97);
+  border: solid 1px var(--color-grey-225-10-75);
+  border-radius: 2px;
+
+  width: max-content;
+  max-width: 300px;
+}
+
+.cl-report {
+  display: flex;
+  align-items: flex-start;
+  justify-items: stretch;
+}
+
+.cl-report .cl-icon {
+  flex: none;
+
+  margin-top: .095em;
+  margin-right: .5em;
+
+  height: 1em;
+  width: 1em;
+
+  color: var(--icon-bg-color);
+  background: transparent;
+  border: none;
 }
diff --git a/lib/modeler/LintingAnnotations.js b/lib/modeler/LintingAnnotations.js
@@ -44,8 +44,8 @@ export default class LintingAnnotations {
 
       renderOverlay(html, {
         reports,
-        onClick: () => {
-          this._eventBus.fire('lintingAnnotations.click', { report: reports[ 0 ] });
+        onClick: (report) => {
+          this._eventBus.fire('lintingAnnotations.click', { report });
         }
       });
 

diff --git a/lib/modeler/OverlayComponent.js b/lib/modeler/OverlayComponent.js
@@ -46,16 +46,47 @@ export function OverlayComponent(props) {
         : 'info';
 
   return html`
-    <div
-      class=${ classNames('cl-icon',`cl-icon-${category}`) }
-      onClick=${ onClick }
-      title="Click to show issue"
-    >
-      ${ icons[category] }
+    <div class="cl-overlay cl-dropdown">
+      <div class=${ classNames('cl-icon',`cl-icon-${category}`) }>
+        ${ icons[category] }
+      </div>
+
+      <div class="cl-dropdown-menu">
+        <ul class="cl-reports">
+        ${ reports.map(report => html`<${ReportComponent} report=${ report } onClick=${ onClick } />`) }
+        </ul>
+      </div>
     </div>
   `;
 }
 
+export function ReportComponent(props) {
+
+  const {
+    report,
+    onClick
+  } = props;
+
+  const {
+    category,
+    rule,
+    message
+  } = report;
+
+  const handleClick = (event) => onClick(report);
+
+  return html`
+    <li class=${ classNames('cl-report', `cl-report-${category}`) }>
+      <div class=${ classNames('cl-icon',`cl-icon-${category}`) }>${ icons[category] }</div>
+      <a title=${ `${ rule }: ${message}` }
+         data-rule=${ rule }
+         data-message=${ message }
+         onClick=${ handleClick }
+      >${ message }</a>
+    </li>
+  `;
+}
+
 export function renderOverlay(el, props) {
   return renderComponent(html`<${OverlayComponent} ...${props} />`, el);
 }