feat(demo): better explain how to use the PathResolver demo (#61)

Also
- improve the design of the page: use a flexible height for the
bpmn-container to better adapt to various screen resolutions
- index page: move bpmn-visualization-examples live environments in the
"available demos" section for consistency

Development: simplify explanation about commands to start the demo while
developing.

README.md

@@ -55,12 +55,7 @@ This project uses [npm workspaces](https://docs.npmjs.com/cli/v9/using-npm/works
 
 Install dependencies: `npm install`
 
-Running the demo only:
-- Build the lib: `npm run build -w packages/addons`
-- Run the demo: `npm run dev -w packages/demo`. The demo is accessible at http://localhost:5173/
-
-Develop the lib and live update the demo
-- run `npm run dev`
+Develop the lib and live update the demo: run `npm start`. The demo is accessible at http://localhost:5173/
 
 
 ## 📃 License

package.json

@@ -5,7 +5,7 @@
     "./packages/*"
   ],
   "scripts": {
-    "dev": "concurrently -n lib,demo \"npm run dev -w packages/addons\" \"npm run dev -w packages/demo\""
+    "start": "concurrently -n lib,demo \"npm run dev -w packages/addons\" \"npm run dev -w packages/demo\""
   },
   "devDependencies": {
     "concurrently": "~8.2.0",

packages/demo/index.html

@@ -18,12 +18,9 @@ <h1>bv-experimental-add-ons</h1>
     <code>bv-experimental-add-ons</code> provides new experimental features for <a href="https://github.com/process-analytics/bpmn-visualization-js" target="_blank">bpmn-visualization</a>.
     <p>
 
-    <div>
-        <div class="source-code">
-            <span>Source code:</span>
-            <a href="https://github.com/process-analytics/bv-experimental-add-ons" target="_blank" class="gh-logo" title="Go to the bv-experimental-add-ons GitHub repository"><img src="/assets/github-logo.svg" id="gh-logo" alt="The GitHub logo"></a>
-        </div>
-        <code>bpmn-visualization</code> examples: <a href="https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html" target="_blank"><i>⏩ live environment</i></a>
+    <div class="source-code">
+        <span>Source code:</span>
+        <a href="https://github.com/process-analytics/bv-experimental-add-ons" target="_blank" class="gh-logo" title="Go to the bv-experimental-add-ons GitHub repository"><img src="/assets/github-logo.svg" id="gh-logo" alt="The GitHub logo"></a>
     </div>
 
 </section>
@@ -32,6 +29,7 @@ <h1>Available demos</h1>
     <ul>
         <li><a href="./pages/path-resolver.html">PathResolver</a>: Infer path after selecting some flow nodes.</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"><i>⏩ live environment</i></a>
 </section>
 </body>
 </html>

packages/demo/pages/path-resolver.html

@@ -13,7 +13,10 @@
       <h1>PathResolver demo</h1>
     </header>
     <section class="presentation">
-      <div class="description">Select or deselect BPMN flow nodes, then compute the missing flows in the path.</div>
+      <div class="description">
+        Select or deselect BPMN flow nodes, then compute the missing flows in the path.
+        <br>
+        <b>TIP</b>: you can then update the selection and recompute the path.</div>
       <div class="controls">
         <button id="btn-compute-path">Compute path</button>
         <button id="bt-clear">Clear</button>

packages/demo/src/path-resolver.css

@@ -82,13 +82,14 @@ header {
 }
 
 #bpmn-container {
-  height: 80vh;
-  width: 98vw;
   overflow: hidden;
   border-style: solid;
   border-color: #b0b0b0;
   border-width: .1rem;
   border-radius: .2rem;
 
-  margin: auto;
+  width: 96vw;
+  margin-top: 1.25rem;
+  margin-bottom: 1.5rem;
+  flex-grow: 1;
 }

packages/demo/src/path-resolver.ts

@@ -19,7 +19,6 @@ import {BpmnElement, BpmnVisualization, FitType} from 'bpmn-visualization';
 import {PathResolver, ShapeUtil} from "@process-analytics/bv-experimental-add-ons";
 // 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
-// eslint-disable-next-line n/file-extension-in-import -- Vite syntax
 import diagram from './diagram.bpmn?raw';
 
 // Instantiate BpmnVisualization, pass the container HTMLElement - present in path-resolver.html