process-analytics · tbouffard · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024
diff --git a/packages/demo/index.html b/packages/demo/index.html
@@ -29,6 +29,7 @@ <h1>Available demos</h1>
     <ul>
         <li><a href="pages/overlays.html">OverlaysPlugin</a>: Show how to use the <code>OverlaysPlugin</code> and demonstrate its features.</li>
         <li><a href="./pages/path-resolver.html">PathResolver</a>: Infer path after selecting some flow nodes.</li>
+        <li><a href="./pages/plugins-by-name.html">Plugins with API using names</a>: Show how to use plugins providing an API on BPMN elements identified by their name.</li>
     </ul>
     As a reminder, <code>bpmn-visualization</code> examples and demos: <a href="https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html" target="_blank" rel="noopener"><i>⏩ live environment</i></a>
 </section>

diff --git a/packages/demo/pages/plugins-by-name.html b/packages/demo/pages/plugins-by-name.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>bv-addons "Plugins by name" demo</title>
+    <script type="module" src="/src/plugins-by-name.ts"></script>
+  </head>
+  <body>
+    <header>
+      <a href="../"><img src="/assets/logo.svg" id="logo" alt="The Process Analytics project logo" class="logo" title="Back to home"></a>
+      <h1>"Plugins by name" demo</h1>
+    </header>
+    <section class="presentation">
+      <div class="description">Show how to use plugins providing an API on BPMN elements identified by their name, and demonstrate their features.</div>
+      <div class="controls">
+        <button id="btn-highlight-element">Highlight an element</button>
+        <button id="bt-clear">Clear</button>
+      </div>
+    </section>
+    <div class="bpmn-wrapping-container">
+      <div class="enclosing-container">
+        <div id="bpmn-container" class="bpmn-container">
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/packages/demo/src/assets/plugins-by-name.css b/packages/demo/src/assets/plugins-by-name.css
@@ -0,0 +1,18 @@
+/*
+Copyright 2024 Bonitasoft S.A.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import 'shared/common-page.css';
+@import 'shared/bpmn-container.css';
diff --git a/packages/demo/src/plugins-by-name.ts b/packages/demo/src/plugins-by-name.ts
@@ -0,0 +1,82 @@
+/*
+Copyright 2024 Bonitasoft S.A.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import './assets/plugins-by-name.css';
+
+import type { FitOptions, StyleUpdate } from 'bpmn-visualization';
+
+import { BpmnVisualization, StyleByNamePlugin } from '@process-analytics/bv-experimental-add-ons';
+import { FitType } from 'bpmn-visualization';
+
+// This is simple example of the BPMN diagram, loaded as string. The '?.raw' extension support is provided by Vite.
+// For other load methods, see https://github.com/process-analytics/bpmn-visualization-examples
+import diagram from './assets/diagram.bpmn?raw';
+import { ZoomComponent } from './shared/zoom-component';
+
+// Instantiate BpmnVisualization, and pass the OverlaysPlugin
+const bpmnVisualization = new BpmnVisualization({
+  container: 'bpmn-container',
+  navigation: { enabled: true },
+  plugins: [StyleByNamePlugin],
+});
+// Load the BPMN diagram defined above
+const fitOptions: FitOptions = { type: FitType.Center, margin: 20 };
+bpmnVisualization.load(diagram, { fit: fitOptions });
+
+// Zoom box
+new ZoomComponent(bpmnVisualization, fitOptions).render();
+
+// Use style by name plugin to update the style of the elements
+const styleRegistryByName = bpmnVisualization.getPlugin<StyleByNamePlugin>('style-by-name');
+
+function clearAllStyles(): void {
+  styleRegistryByName.resetStyle();
+}
+
+function pickRandomElement<T>(array: Array<T>): T {
+  return array[Math.floor(Math.random() * array.length)];
+}
+
+const availableElements = ['Record Goods Receipts', 'Record Invoice Receipt', 'Record Service Entry Sheet', 'Clear Invoice', 'Remove Payment Block', 'SRM subprocess'];
+const availableStyleUpdates: StyleUpdate[] = [
+  {
+    stroke: { color: 'orange', width: 3 },
+  },
+  {
+    fill: { color: 'chartreuse' },
+    font: { color: 'white', size: 18 },
+    stroke: { color: 'chartreuse' },
+  },
+  { fill: { color: 'yellow', opacity: 30 }, font: { color: 'red' } },
+];
+function highlightElement(): void {
+  clearAllStyles();
+  const elementName = pickRandomElement<string>(availableElements);
+  const styleUpdate = pickRandomElement<StyleUpdate>(availableStyleUpdates);
+  styleRegistryByName.updateStyle(elementName, styleUpdate);
+}
+
+const setupControlEventHandlers = (): void => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  document.querySelector('#btn-highlight-element')?.addEventListener('click', _event => {
+    highlightElement();
+  });
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  document.querySelector('#bt-clear')?.addEventListener('click', _event => {
+    clearAllStyles();
+  });
+};
+setupControlEventHandlers();