Add new example with color shape by click

process-analytics · tbouffard · Feb 20, 2023 · Feb 7, 2023 · Feb 7, 2023 · Feb 8, 2023
commit 4ddf20dbbf1d0ac11ce50c1e8a73611cb7303433
diff --git a/demo/visualize-path/README.md b/demo/visualize-path/README.md
@@ -0,0 +1,5 @@
+# Visualize the path between two consecutive shapes
+
+Javascript example to demonstrate how to use `bpmn-visualization` to visualize the path between two consecutive shapes.
+- [__⏩ live environment__](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/demo/visualize-path/index.html)
+- to run locally, open the [index.html](index.html) directly in a Web Browser
diff --git a/demo/visualize-path/css/path.css b/demo/visualize-path/css/path.css
@@ -0,0 +1,40 @@
+:root {
+    --color-lvl1: #e9e9e9;
+    --color-lvl2: #bdbdbd;
+    --color-lvl3: #a7a7a7;
+    --color-lvl4: #7a7a7a;
+    --color-lvl5: Black;
+}
+
+/* for 'path' classes
+    path:nth-child(2) is for edge line
+    path:nth-child(3) is for edge arrow
+*/
+.path-lvl1 > path:nth-child(2) {
+    stroke: var(--color-lvl1);
+    stroke-width: 2px;
+}
+
+.path-lvl1 > path:nth-child(3) {
+    stroke: var(--color-lvl1);
+    fill: var(--color-lvl1);
+}
+
+.bpmn-type-event:hover, .bpmn-type-gateway:hover, .bpmn-type-activity:hover {
+    cursor: pointer;
+}
+
+.highlight.bpmn-type-activity > rect:first-child,
+.highlight.bpmn-type-event > ellipse:first-child,
+.highlight.bpmn-type-gateway > path:first-child {
+    stroke: LightSeaGreen;
+    filter: drop-shadow(0 0 0.75rem LightSeaGreen);
+}
+
+.highlight.bpmn-type-gateway > :not(:first-child) {
+    stroke: LightSeaGreen;
+}
+
+.highlight.bpmn-type-gateway > path:nth-child(2) {
+    fill: LightSeaGreen;
+}
diff --git a/demo/visualize-path/index.html b/demo/visualize-path/index.html
@@ -0,0 +1,84 @@
+<!--
+Copyright 2021 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 - Visualize the path between two consecutive shapes</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">
+    <script defer src="../../examples/static/js/link-to-sources.js"></script>
+    <!-- load bpmn-visualization -->
+    <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.30.0/dist/bpmn-visualization.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/values.js@2.0.0/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/monitoring-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>Visualize the path between two consecutive shapes</h2>
+            <p></p>
+        </div>
+
+        <div class="col-11 col-mx-auto" style="margin-top: 2rem; margin-bottom: 1rem">
+            <div class="text-center">
+                <h4 id="path-title"></h4>
+            </div>
+            <div id="use-case-panel" class="bg-gray">
+                <div class="columns">
+                    <div class="column 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>
diff --git a/demo/visualize-path/js/index.js b/demo/visualize-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();
+})
+
diff --git a/demo/visualize-path/js/monitoring-use-case.js b/demo/visualize-path/js/monitoring-use-case.js
@@ -0,0 +1,39 @@
+class PathUseCase extends UseCase {
+
+    constructor(getDiagram) {
+        super('path', getDiagram, true);
+    }
+
+    display() {
+        super.display();
+
+        let elementsByKinds = this._bpmnVisualization.bpmnElementsRegistry.getElementsByKinds([
+            bpmnvisu.ShapeBpmnElementKind.EVENT_END,
+            bpmnvisu.ShapeBpmnElementKind.EVENT_BOUNDARY,
+            bpmnvisu.ShapeBpmnElementKind.EVENT_START,
+            bpmnvisu.ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH,
+            bpmnvisu.ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW,
+            bpmnvisu.ShapeBpmnElementKind.CALL_ACTIVITY,
+            bpmnvisu.ShapeBpmnElementKind.SUB_PROCESS,
+            bpmnvisu.ShapeBpmnElementKind.TASK,
+            bpmnvisu.ShapeBpmnElementKind.TASK_BUSINESS_RULE,
+            bpmnvisu.ShapeBpmnElementKind.TASK_RECEIVE,
+            bpmnvisu.ShapeBpmnElementKind.TASK_MANUAL,
+            bpmnvisu.ShapeBpmnElementKind.TASK_SEND,
+            bpmnvisu.ShapeBpmnElementKind.TASK_SERVICE,
+            bpmnvisu.ShapeBpmnElementKind.TASK_SCRIPT,
+            bpmnvisu.ShapeBpmnElementKind.TASK_USER,
+            bpmnvisu.ShapeBpmnElementKind.GATEWAY_EVENT_BASED,
+            bpmnvisu.ShapeBpmnElementKind.GATEWAY_EXCLUSIVE,
+            bpmnvisu.ShapeBpmnElementKind.GATEWAY_INCLUSIVE,
+            bpmnvisu.ShapeBpmnElementKind.GATEWAY_PARALLEL])
+            .forEach(item => item.htmlElement.onclick = () => {
+                this._bpmnVisualization.bpmnElementsRegistry.addCssClasses(item.bpmnSemantic.id, 'highlight');
+            });
+
+        /*        "bpmn-type-event"
+                "bpmn-type-gateway"
+                "bpmn-type-activity"
+        "bpmn-type-flow"*/
+    }
+}
diff --git a/demo/visualize-path/js/paths.js b/demo/visualize-path/js/paths.js
@@ -0,0 +1,33 @@
+class Path {
+    _sourceId ;
+    _edgeId;
+    _targetId;
+
+    constructor(sourceId, edgeId, targetId) {
+        this._sourceId = sourceId;
+        this._edgeId = edgeId;
+        this._targetId = targetId;
+    }
+}
+
+let paths = [
+    new Path('start_event', "sequence_flow_1", "parallel_gateway_1"),
+    new Path('parallel_gateway_1', "sequence_flow_2", "task_1"),
+    new Path('parallel_gateway_1', "sequence_flow_18", "task_2"),
+    new Path('task_1', "sequence_flow_3", "exclusive_gateway_1"),
+    new Path('task_2', "sequence_flow_15", "parallel_gateway_2"),
+    new Path('exclusive_gateway_1', "sequence_flow_4", "task_3"),
+    new Path('exclusive_gateway_1', "sequence_flow_5", "task_5"),
+    new Path('exclusive_gateway_2', "sequence_flow_14", "parallel_gateway_2"),
+    new Path('parallel_gateway_2', "sequence_flow_16", "task_8"),
+    new Path('task_8', "sequence_flow_17", "end_event"),
+    new Path('task_3', "sequence_flow_12", "task_4"),
+    new Path('task_4', "sequence_flow_13", "exclusive_gateway_2"),
+    new Path('task_5', "sequence_flow_6", "inclusive_gateway_1"),
+    new Path('inclusive_gateway_1', "sequence_flow_7", "task_7"),
+    new Path('inclusive_gateway_1', "sequence_flow_8", "task_6"),
+    new Path('inclusive_gateway_2', "sequence_flow_11", "exclusive_gateway_2"),
+    new Path('task_7', "sequence_flow_10", "inclusive_gateway_2"),
+    new Path('task_6', "sequence_flow_9", "inclusive_gateway_2")
+];
+
diff --git a/examples/index.html b/examples/index.html
@@ -313,6 +313,22 @@ <h2 class="bg-dark">Demos</h2>
                             </div>
                         </a>
                     </div>
+
+                    <div class="col-md-12 col-4 p-2">
+                        <a href="../demo/visualize-path/index.html" class="card-link">
+                            <div class="card p-2">
+                                <div class="card-header">
+                                    <div class="card-title">Visualize the path between two consecutive shapes</div>
+                                    <div class="card-subtitle"></div>
+                                </div>
+                                <div class="card-image">
+                                    <img src="static/img/preview/demo/visualize-path.png" class="img-responsive" alt="visualize path">
+                                </div>
+                                <div class="card-body">Show how to use <code>bpmn-visualization</code> to visualize the path between two consecutive shapes.</div>
+                                <div class="card-footer"></div>
+                            </div>
+                        </a>
+                    </div>
                 </div>
             </section>