From 0da60130e249eace528fd12ecc7e3cea66d0d7e8 Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Sun, 20 Aug 2023 08:22:25 +0200
Subject: [PATCH] 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                              |  7 +------
 package.json                           |  2 +-
 packages/demo/index.html               | 10 ++++------
 packages/demo/pages/path-resolver.html |  5 ++++-
 packages/demo/src/path-resolver.css    |  7 ++++---
 packages/demo/src/path-resolver.ts     |  1 -
 6 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index be18079..5e3d121 100644
--- a/README.md
+++ b/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
diff --git a/package.json b/package.json
index 613a814..d238091 100644
--- a/package.json
+++ b/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",
diff --git a/packages/demo/index.html b/packages/demo/index.html
index 8a4b136..6a70ecc 100644
--- a/packages/demo/index.html
+++ b/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>
diff --git a/packages/demo/pages/path-resolver.html b/packages/demo/pages/path-resolver.html
index 5deae77..15afd52 100644
--- a/packages/demo/pages/path-resolver.html
+++ b/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>
diff --git a/packages/demo/src/path-resolver.css b/packages/demo/src/path-resolver.css
index dfb960e..25637dd 100644
--- a/packages/demo/src/path-resolver.css
+++ b/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;
 }
diff --git a/packages/demo/src/path-resolver.ts b/packages/demo/src/path-resolver.ts
index 958b664..b3249e1 100644
--- a/packages/demo/src/path-resolver.ts
+++ b/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