Skip to content

Commit

Permalink
[INFRA] Update BPMN Visualization version to 0.22.0 (#303)
Browse files Browse the repository at this point in the history
  • Loading branch information
@process-analytics-bot
process-analytics-bot authored Mar 7, 2022
1 parent 87601c7 commit 4fd5280
Show file tree
Hide file tree
Showing 34 changed files with 99 additions and 111 deletions.
2 changes: 1 addition & 1 deletion demo/hacktoberfest-custom-themes/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<link rel="stylesheet" href="../static/css/style.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.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<!-- load the example -->
<script defer src="../../examples/static/js/diagram/bpmn-diagrams.js"></script>
<script defer src="../../examples/static/js/style-identifiers.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion demo/load-and-navigation/index.es.js
View file

Large diffs are not rendered by default.

117 changes: 57 additions & 60 deletions demo/load-and-navigation/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,111 +2,108 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 768 is the break point from which current layout is nicely displayed, below that is not yet supported -->
<meta name="viewport" content="width=768, initial-scale=0.5, maximum-scale=0.5, user-scalable=no, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>BPMN Visualization Demo</title>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link href="static/css/tailwind.css" rel="stylesheet">
<link rel="icon" href="static/img/favicon.png">

<!-- load demo -->
<script src="static/js/demo.js" type="module"></script>
<script src="static/js/index.js" type="module"></script>
</head>
<body class="overflow-hidden bg-gray-800 font-sans leading-normal tracking-normal mt-12">
<body class="bg-gray-800 font-sans leading-normal tracking-normal flex flex-col h-screen">
<!--Nav-->
<nav class="bg-gray-800 pt-2 md:pt-1 pb-1 px-1 mt-0 h-auto fixed w-full z-20 top-0">
<nav class="bg-gray-800 pt-2 md:pt-1 pb-1 px-1 mt-0 h-auto w-full">
<div class="flex flex-wrap items-center">
<div class="flex flex-shrink justify-center md:justify-start text-white">
<a class="flex items-center" href="../../examples/index.html">
<img src="static/img/logo_64x64_white.png" alt="logo" class="logo h-11 m-2 ml-3">
<span class="h-11 m-2 py-1 text-3xl">BPMN Visualization</span>
<a class="flex items-center mb-1 md:mt-2 md:mb-2" href="../../examples/index.html">
<img src="static/img/logo_64x64_white.png" alt="logo" class="logo h-11 ml-3 mr-2">
<span class="h-11 ml-2 py-1 text-2xl md:text-3xl">BPMN Visualization</span>
</a>
</div>
</div>
</nav>
<!-- Page section -->
<div class="flex flex-col md:flex-row">
<div class="flex flex-col md:flex-row flex-grow">
<!-- Left Navigation Panel -->
<div class="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:relative md:h-screen z-10 w-full md:w-48">
<div class="md:mt-12 md:w-48 md:fixed md:left-0 md:top-0 content-center md:content-start text-left justify-between">
<ul class="list-reset flex flex-row md:flex-col py-0 md:py-3 px-1 md:px-2 text-center md:text-left">
<li class="mr-3 flex-1">
<div class="py-1 md:py-5 pl-1 align-middle border-b-2 border-gray-800">
<div class="bg-gray-800 shadow-xl w-full md:w-48">
<ul class="flex flex-row md:flex-col py-0 px-1 md:px-2">
<li class="md:mr-3">
<div class="py-1 md:pb-5 md:pt-3 pl-1 border-b-2 border-gray-800">
<div class="bg-gradient-to-b from-red-200 to-red-100 border-b-4 border-red-600 rounded-lg shadow-xl hover:border-red-900">
<div class="flex flex-row items-center cursor-pointer text-red-500 hover:text-red-900">
<div class="flex-1 text-right md:text-center">
<div class="cursor-pointer text-red-500 hover:text-red-900">
<div class="text-center">
<input type="file" id="bpmn-file" name="file" class="hidden"/>
<label for="bpmn-file" class="font-bold text-3xl cursor-pointer"><span><em class="fas fa-file"></em>BPMN<em class="fas fa-upload"></em></span></label>
<label for="bpmn-file" class="font-bold text-1xl md:text-3xl cursor-pointer"><span><em class="fas fa-file"></em>BPMN<em class="fas fa-upload"></em></span></label>
</div>
</div>
</div>
</div>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline border-b-2 border-gray-800 border-purple-500">
<a href="#" class="block pb-1 md:py-3 pl-1 text-white no-underline md:border-b-2 md:border-purple-500">
<label for="fitOnLoad">Fit on load:
<input type="checkbox" id="fitOnLoad" name="fitOnLoad" checked>
</label>
</a>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline border-b-2 border-blue-600">
<label>Fit type:
<select name="fitTypes" id="fitType-selected" class="w-full text-blue-900">
<option value="None">None</option>
<option value="HorizontalVertical">Horizontal-Vertical</option>
<option value="Horizontal">Horizontal</option>
<option value="Vertical">Vertical</option>
<option value="Center" selected>Center</option>
</select>
</label>
</a>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-0 md:pl-1 align-middle text-white no-underline border-b-2 border-gray-800 border-red-500">
<label for="fit-margin">Fit margin:
<input type="number" id="fit-margin" min="0" max="100" value="50" maxlength="3" oninput="validity.valid||(value='');" class="text-red-900 pl-1 float-right md:w-1/3">
</label>
</a>
<li class="flex-1 md:mr-3">
<div class="py-1 md:py-3 pl-1 text-white md:border-b-2 md:border-red-500">
<a href="#" class="block no-underline md:pb-3 md:border-b-2 md:border-blue-600">
<label class="flex justify-evenly md:block">Fit type:
<select name="fitTypes" id="fitType-selected" class="w-1/2 md:w-full pl-1 md:pl-0 text-blue-900">
<option value="None">None</option>
<option value="HorizontalVertical">Horizontal-Vertical</option>
<option value="Horizontal">Horizontal</option>
<option value="Vertical">Vertical</option>
<option value="Center" selected>Center</option>
</select>
</label>
</a>
<a href="#" class="block no-underline mt-3">
<label for="fit-margin" class="flex justify-around">Fit margin:
<input type="number" id="fit-margin" class="w-1/3 pl-1 text-red-900 md:ml-auto" min="0" max="100" value="50" maxlength="3" oninput="validity.valid||(value='');">
</label>
</a>
</div>
</li>
<li class="mr-3 flex-1">
<div id="zoom-config-controls" class="py-1 md:py-3 pl-1 md:pl-1 align-middle text-white border-b-2 border-gray-800 border-yellow-500">
<label for="zoom-throttle" class="block w-full">Throttle:
<input id="zoom-throttle" class="md:w-1/3 pl-1 float-right bg-gray-500 text-black" type="number" placeholder="throttle" value="30" min="0" max="100" disabled
<li class="flex-1 md:mr-3">
<div id="zoom-config-controls" class="py-1 md:py-3 pl-1 text-white md:border-b-2 md:border-yellow-500">
<label for="zoom-throttle" class="flex justify-center">
Throttle:
<input id="zoom-throttle" class="w-1/3 pl-1 ml-3 text-black md:ml-auto" placeholder="throttle" value="50" disabled
title="to play with throttle pass parameter in url like this: .../?zoomThrottle=40"/>
</label>
<label for="zoom-debounce" class="block w-full mt-3">Debounce:
<input id="zoom-debounce" class="md:w-1/3 pl-1 float-right bg-gray-500 text-black" type="number" placeholder="debounce" value="30" min="0" max="100" disabled
<label for="zoom-debounce" class="flex justify-center mt-3">Debounce:
<input id="zoom-debounce" class="w-1/3 pl-1 text-black md:ml-auto" placeholder="debounce" value="50" disabled
title="to play with debounce pass parameter in url like this: .../?zoomDebounce=30"/>
</label>
</div>
</li>
</ul>
</div>
</div>

<!-- Main section -->
<div class="main-content flex-1 bg-gray-100 mt-12 md:mt-2 pb-24 md:pb-5">
<div class="bg-gray-800 pt-3">
<div class="rounded-tl-3xl bg-gradient-to-r from-purple-900 to-gray-800 p-4 shadow text-2xl text-white">
<div class="flex flex-1 flex-col bg-gray-100 md:rounded-bl-2xl">
<div class="bg-gray-800">
<div class="md:rounded-tl-3xl bg-gradient-to-r from-purple-900 to-gray-800 p-4 shadow text-2xl text-white">
<h3 class="font-bold pl-2">Diagram</h3>
</div>
</div>

<div class="flex flex-row flex-wrap flex-grow mt-2">
<div class="w-full p-6">
<!-- BPMN container space -->
<!-- TODO: check if possible to drop [style]-->
<div class="bg-white border-transparent rounded-lg shadow-xl overflow-hidden absolute" style="top: 158px; right: 20px; bottom: 20px; left: 215px;">
<div>
<div id="bpmn-container"></div>
</div>
<div class="flex-grow mt-2 p-6 flex flex-col">
<!-- BPMN container space -->
<!-- relative position is required by bpmn-container and the generated drop-container element to make its absolute position work -->
<div class="flex-grow bg-white border-transparent rounded-lg shadow-xl relative">
<!-- set absolute and no inset, as mxGraph needs absolute dimension to make the fit work and to fit the whole parent container -->
<div id="bpmn-container" class="overflow-hidden absolute inset-0">
</div>
<!-- /BPMN container Space -->
</div>
<!-- /BPMN container Space -->
</div>

</div>
</div>

<footer class="flex flex-col-reverse items-end">
<div id="footer-content" class="py-3 mr-3 text-white"></div>
</footer>
</body>
</html>
2 changes: 1 addition & 1 deletion demo/load-and-navigation/static/css/tailwind.css
View file

Large diffs are not rendered by default.

25 changes: 8 additions & 17 deletions demo/load-and-navigation/static/js/demo.js → demo/load-and-navigation/static/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { documentReady, handleFileSelect, startBpmnVisualization, fit, log, updateLoadOptions, getCurrentLoadOptions } from '../../index.es.js';
import { documentReady, handleFileSelect, startBpmnVisualization, fit, log, updateLoadOptions, getCurrentLoadOptions, getVersion } from '../../index.es.js';

let fitOnLoad = true;
let fitOptions = {};
Expand Down Expand Up @@ -70,13 +70,12 @@ function configureFitMarginInput() {
}
}

function configureControlPanel() {
const parameters = new URLSearchParams(window.location.search);
if (parameters.get('hideControls') === 'true') {
const classList = document.getElementById('controls').classList;
classList.remove('controls');
classList.add('hidden');
}
function configureDisplayedFooterContent() {
const version = getVersion();
const versionAsString = `bpmn-visualization@${version.lib}`;
const dependenciesAsString = [...version.dependencies].map(([name, version]) => `${name}@${version}`).join('/');
const versionElt = document.getElementById('footer-content');
versionElt.innerText = `${versionAsString} with ${dependenciesAsString}`;
}

// The following function `preventZoomingPage` serves to block the page content zoom.
Expand All @@ -92,17 +91,9 @@ function preventZoomingPage() {
);
}

function setupFixedDiagramContainerSize(containerId) {
const containerElt = document.getElementById(containerId);
const height = containerElt.parentNode.parentNode.getBoundingClientRect().height;
// parent height minus 2 x padding
containerElt.style = `overflow: hidden; height:${height - 2 * 20}px`;
}

function startDemo() {
preventZoomingPage();
const bpmnContainerId = 'bpmn-container';
setupFixedDiagramContainerSize(bpmnContainerId);

const parameters = new URLSearchParams(window.location.search);
const zoomThrottleElt = document.getElementById('zoom-throttle'),
Expand Down Expand Up @@ -136,7 +127,7 @@ function startDemo() {
configureFitTypeSelect();
configureFitMarginInput();
configureFitOnLoadCheckBox();
configureControlPanel();
configureDisplayedFooterContent();
}

// Start
Expand Down
2 changes: 1 addition & 1 deletion demo/monitoring-all-process-instances/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<link rel="stylesheet" href="./css/legend.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.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/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>
Expand Down
2 changes: 1 addition & 1 deletion demo/predictions/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<link rel="stylesheet" href="./css/demo.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.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<script defer src="./js/bpmn-diagram-bpmn-spec-pizza.js"></script>
<script defer src="../static/js/use-case.js"></script>
<script defer src="./js/prediction-use-case.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-behavior/apply-css-classes/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
}
</style>
<script defer src="../../static/js/link-to-sources.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<script defer src="../../static/js/diagram/bpmn-diagram-miwg-test-suite-c_1_1.js"></script>
<script defer src="index.js"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-behavior/call-activity-with-modal-on-mouse-over/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
</style>
<script defer src="../../static/js/link-to-sources.js"></script>
<!-- load bpmn-visualization -->
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
<script defer src="./index.js"></script>
<script defer src="./modal.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-behavior/call-activity-with-reload-on-dblclick/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</style>
<script defer src="../../static/js/link-to-sources.js"></script>
<!-- load bpmn-visualization -->
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
<script defer src="./index.js"></script>
<script defer src="./breadcrumbs.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-behavior/call-activity-with-tabs-on-click/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</style>
<script defer src="../../static/js/link-to-sources.js"></script>
<!-- load bpmn-visualization -->
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
<script defer src="./index.js"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-behavior/growing-sequence-flow/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
</style>
<script defer src="../../static/js/link-to-sources.js"></script>
<!-- load bpmn-visualization -->
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
<script defer src="./index.js"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-behavior/javascript-tooltip-and-popover/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@

<script defer src="../../static/js/link-to-sources.js"></script>
<!-- load bpmn-visualization -->
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
<script defer src="index.js"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-behavior/popover-static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
</style>
<script defer src="../../static/js/link-to-sources.js"></script>
<!-- load bpmn-visualization -->
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
<script defer src="../../static/js/dom-helper.js"></script>
<script defer src="./index.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-behavior/running-dashed-message-flow/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
</style>
<script defer src="../../static/js/link-to-sources.js"></script>
<!-- load bpmn-visualization -->
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
<script defer src="./index.js"></script>
</head>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-behavior/select-elements-by-bpmn-kind/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
}
</style>
<script defer src="../../static/js/link-to-sources.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<script defer src="../../static/js/diagram/bpmn-diagram-miwg-test-suite-a_4_1.js"></script>
<script defer src="../../static/js/diagram/bpmn-diagram-miwg-test-suite-c_1_0.js"></script>
<script defer src="../../static/js/diagram/bpmn-diagram-miwg-test-suite-c_1_1.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-bpmn-theme/custom-colors/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<link rel="stylesheet" href="../../static/css/main.css" type="text/css">
<script defer src="../../static/js/link-to-sources.js"></script>
<!-- load bpmn-visualization -->
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.21.5/dist/bpmn-visualization.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.22.0/dist/bpmn-visualization.min.js"></script>
<!-- load the example -->
<script defer src="../../static/js/diagram/bpmn-diagrams.js"></script>
<script defer src="../../static/js/style-identifiers.js"></script>
Expand Down
Loading

0 comments on commit 4fd5280

Please sign in to comment.