feat: add demo "visualize path between two consecutive shapes"

README.md

@@ -82,6 +82,7 @@ especially when using `bpmn-visualization` prior version `0.27.0`.
 - [Hacktoberfest themes](demo/hacktoberfest-custom-themes/README.md) - special Hacktoberfest diagram with Hacktoberfest colors
 - [Monitoring of all process instances demo](demo/monitoring-all-process-instances/README.md) - show how to use `bpmn-visualization` to render the monitoring of all process instances for a defined process
 - [Demo for ICPM 2022](demo/icpm-2022/README.md) - show a Process Mining scenario (_Conformance_, _Compliance_ and _Happy path_)
+- [Draw a path](demo/draw-path/README.md) - show how to draw a path
 
 
 ## Tutorials

demo/draw-path/README.md

@@ -0,0 +1,5 @@
+# Draw me a path
+
+Javascript example to demonstrate how to use `bpmn-visualization` to draw a path.
+- [__⏩ live environment__](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/demo/draw-path/index.html)
+- to run locally, open the [index.html](index.html) directly in a Web Browser

demo/draw-path/css/legend.css

@@ -0,0 +1,41 @@
+fieldset {
+    border: 1px solid#ddd;
+    padding: 5px 12px;
+}
+
+legend {
+    font-size: 18px;
+    padding: 0 10px;
+    margin: auto;
+}
+
+.legend li:first-child::before {
+    background-color: var(--color-disableAll);
+}
+.legend li:nth-child(2)::before {
+    background-color: var(--color-highlight);
+}
+.legend li:nth-child(3)::before {
+    background-color: var(--color-possibleNext);
+}
+
+.legend li::before {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    margin-inline-end: .5rem;
+    border-width: 2px;
+    border-style: solid;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 3px;
+    border-color: #000;
+}
+
+.legend li {
+    line-height: 1rem;
+}
+.legend {
+    list-style: none;
+    font-size: 0.8rem;
+}

demo/draw-path/css/path.css

@@ -0,0 +1,83 @@
+:root {
+    --color-disableAll: Silver;
+    --color-highlight: LightSeaGreen;
+    --color-possibleNext: MediumVioletRed;
+}
+
+#use-case-panel {
+    padding-bottom: 0;
+}
+
+.bpmn-type-event:hover, .bpmn-type-gateway:hover, .bpmn-type-activity:hover, .bpmn-type-flow:hover {
+    cursor: pointer;
+}
+
+.disablePointer.bpmn-type-event:hover, .disablePointer.bpmn-type-gateway:hover, .disablePointer.bpmn-type-activity:hover, .disablePointer.bpmn-type-flow:hover {
+    cursor: default;
+}
+
+/* ------------------------------------------------ DISABLE EVERYTHING ------------------------------------------------ */
+/* SHAPE & EDGE */
+.disableAll.bpmn-type-activity > *,
+.disableAll.bpmn-type-event > *,
+.disableAll.bpmn-type-gateway > *,
+.disableAll.bpmn-type-flow > * {
+    stroke: var(--color-disableAll);
+}
+
+/* ICON */
+.disableAll.bpmn-type-gateway > path:nth-child(2), .disableAll.bpmn-type-flow > path:nth-child(3) {
+    fill: var(--color-disableAll);
+}
+
+/* LABEL */
+.disableAll.bpmn-type-activity > g > foreignObject > div > div > div,
+.disableAll.bpmn-type-event > g > foreignObject > div > div > div,
+.disableAll.bpmn-type-gateway > g > foreignObject > div > div > div,
+.disableAll.bpmn-type-flow > g > foreignObject > div > div > div {
+    color: var(--color-disableAll) !important;
+}
+
+/* ------------------------------------------------ HIGHLIGHT ------------------------------------------------ */
+/* SHAPE */
+.highlight.bpmn-type-activity > rect:first-child,
+.highlight.bpmn-type-event > ellipse:first-child,
+.highlight.bpmn-type-gateway > path:first-child,
+.highlight.bpmn-type-flow > * {
+    stroke: var(--color-highlight);
+    filter: drop-shadow(0 0 0.75rem var(--color-highlight));
+}
+
+/* ICON */
+.highlight.bpmn-type-gateway > :not(:first-child) {
+    stroke: var(--color-highlight);
+}
+
+.highlight.bpmn-type-gateway > path:nth-child(2), .highlight.bpmn-type-flow > path:nth-child(3) {
+    fill: var(--color-highlight);
+}
+
+/* ------------------------------------------------ POSSIBLE NEXT ------------------------------------------------ */
+/* SHAPE & EDGE */
+.possibleNext.bpmn-type-activity > *,
+.possibleNext.bpmn-type-event > *,
+.possibleNext.bpmn-type-gateway > *,
+.possibleNext.bpmn-type-flow > * {
+    stroke: var(--color-possibleNext) !important;
+}
+
+/* ICON */
+.possibleNext.bpmn-type-gateway > path:nth-child(2), .possibleNext.bpmn-type-flow > path:nth-child(3) {
+    fill: var(--color-possibleNext) !important;
+}
+
+/* LABEL */
+.possibleNext.bpmn-type-activity > g > foreignObject > div > div > div,
+.possibleNext.bpmn-type-event > g > foreignObject > div > div > div,
+.possibleNext.bpmn-type-gateway > g > foreignObject > div > div > div,
+.possibleNext.bpmn-type-flow > g > foreignObject > div > div > div {
+    color: var(--color-possibleNext) !important;
+}
+
+
+

demo/draw-path/css/step.css

@@ -0,0 +1,33 @@
+/* To override the kind of the children of a .step of SPECTRE.CSS */
+.step .step-item.active ~ .step-item div {
+    color: #bcc3ce;
+}
+.step .step-item div {
+    color: #5755d9;
+    display: inline-block;
+    padding: 20px 10px 0;
+    text-decoration: none;
+}
+
+.step .step-item.active ~ .step-item div::before {
+    background: #dadee4;
+}
+
+.step .step-item.active div::before {
+    background: #fff;
+    border: .1rem solid #5755d9;
+}
+.step .step-item div::before {
+    background: #5755d9;
+    border: .1rem solid #fff;
+    border-radius: 50%;
+    content: "";
+    display: block;
+    height: .6rem;
+    left: 50%;
+    position: absolute;
+    top: .2rem;
+    transform: translateX(-50%);
+    width: .6rem;
+    z-index: 1;
+}

demo/draw-path/index.html

@@ -0,0 +1,121 @@
+<!--
+Copyright 2023 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.
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>bpmn-visualization - Draw me a path</title>
+    <link rel="icon" type="image/svg+xml" href="../../examples/favicon.svg">
+    <link rel="stylesheet" href="../../examples/static/css/spectre.min.css" type="text/css">
+    <link rel="stylesheet" href="../../examples/static/css/icons.min.css" type="text/css">
+    <link rel="stylesheet" href="../../examples/static/css/main.css" type="text/css">
+    <link rel="stylesheet" href="../static/css/style.css" type="text/css">
+    <link rel="stylesheet" href="./css/path.css" type="text/css">
+    <link rel="stylesheet" href="./css/legend.css" type="text/css">
+    <link rel="stylesheet" href="./css/step.css" type="text/css">
+    <script defer src="../../examples/static/js/link-to-sources.js"></script>
+    <!-- load bpmn-visualization -->
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js" integrity="sha256-lNJnNIdh5oXecah6rOix/TxyGcOYnfkybx4Qii2uxSo="
+            crossorigin="anonymous"></script>
+    <script defer src="https://variancecharts.com/cdn/variance-noncommercial-standalone-6d26aa2.min.js" charset="UTF-8"></script>
+    <script defer src="../../examples/static/js/diagram/bpmn-diagrams.js"></script>
+    <script defer src="../static/js/use-case.js"></script>
+    <script defer src="./js/paths.js"></script>
+    <script defer src="./js/steps.js"></script>
+    <script defer src="./js/path-use-case.js"></script>
+    <script defer src="./js/index.js"></script>
+</head>
+<body>
+<header class="navbar bg-dark p-2">
+    <section class="navbar-section ml-2">
+        <a class="home" href="../../examples/index.html">
+            <img src="../../examples/static/img/logo_64x64_white.png" alt="logo" class="logo">
+            <span class="h3 text-light ml-2 lib-name-text">bpmn-visualization examples</span>
+        </a>
+    </section>
+    <section class="navbar-section">
+        <a href="https://process-analytics.github.io/bpmn-visualization-js/" class="mr-2 btn btn-secondary">Docs</a>
+        <div class="dropdown mr-2">
+            <a href="#" class="btn btn-primary dropdown-toggle" tabindex="0">
+                GitHub <span class="icon icon-caret icon-in-the-middle"></span>
+            </a>
+            <ul class="menu">
+                <li><a href="https://github.com/process-analytics/bpmn-visualization-js"
+                       class="mr-2 btn btn-link">Library</a></li>
+                <li><a href="https://github.com/process-analytics/bpmn-visualization-examples"
+                       class="mr-2 btn btn-link">Examples</a></li>
+            </ul>
+        </div>
+    </section>
+</header>
+
+<section class="container col-12 flex-centered" style="margin-top: .8rem !important">
+    <div class="col-11 col-mx-auto">
+        <div class="col-10 col-mx-auto">
+            <h2>Draw me a path</h2>
+            <p>Visualize the path between two consecutive shapes.</p>
+        </div>
+
+        <div class="col-11 col-mx-auto" style="margin-top: 2rem; margin-bottom: 1rem">
+            <div id="controls" class="column bg-secondary pt-2 pb-2">
+                <div class="columns">
+                    <div id="choose-use-case-panel" class="col-10" style="margin: auto">
+                        <h5>Progress</h5>
+                        <ul class="step">
+                            <li id="step1" class="step-item active">
+                                <div class="tooltip" data-tooltip="Click on an event, a gateway or an activity">Click on a shape</div>
+                            </li>
+                            <li id="step2" class="step-item">
+                                <!-- According to the official documentation of Spectre.css, we should only add \n to have multiple lines on the tooltip,
+                                but it doesn't work: https://picturepan2.github.io/spectre/components/tooltips.html#tooltips-multiline
+                                The workaround: https://github.com/picturepan2/spectre/issues/692#issuecomment-1310063019 -->
+                                <div class="tooltip" data-tooltip="Click on a next consecutive event,&#010a next consecutive gateway&#010or a next consecutive activity">Click on a next shape
+                                </div>
+                            </li>
+                            <li id="step3" class="step-item">
+                                <div class="tooltip" data-tooltip="Click on 'Refresh' button,&#010another event,&#010another gateway&#010or another activity">Reset</div>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="col-auto" style="margin: auto">
+                        <button id="btn-reset" type="reset" class="btn btn-error btn-action s-circle tooltip" data-tooltip="Refresh the diagram">
+                            <i class="icon icon-refresh"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div id="use-case-panel">
+                <div class="columns" style="padding-left: 2rem">
+                    <div id="legend" class="column col-2 col-mx-auto" style="margin: auto">
+                        <fieldset>
+                            <legend>Legend</legend>
+                            <ul class="legend">
+                                <li>Disabled items</li>
+                                <li>Selected items</li>
+                                <li>Possible path</li>
+                            </ul>
+                        </fieldset>
+                    </div>
+                    <div class="column col-10 col-mx-auto">
+                        <div id="path-bpmn-container" class="col-12 bpmn-container"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<footer class="flex-centered"></footer>
+</body>
+</html>

demo/draw-path/js/index.js

@@ -0,0 +1,8 @@
+// Initialize UseCase
+const useCase = new PathUseCase(getHardwareRetailerDiagram);
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Waiting for the displayed page before to load diagram & display data
+    useCase.display();
+})
+