|
13 | 13 | * See the License for the specific language governing permissions and |
14 | 14 | * limitations under the License. |
15 | 15 | */ |
16 | | -import { documentReady, handleFileSelect, startBpmnVisualization, FitType, updateFitType } from '../../index.es.js'; |
| 16 | +import { documentReady, handleFileSelect, startBpmnVisualization, FitType, fit, log, updateLoadOptions, getCurrentLoadOptions } from '../../index.es.js'; |
| 17 | + |
| 18 | +let fitOnLoad = true; |
| 19 | +let fitOptions = {}; |
17 | 20 |
|
18 | 21 | // eslint-disable-next-line @typescript-eslint/explicit-function-return-type |
19 | | -function updateFitTypeSelection(event) { |
20 | | - updateFitType(event); |
| 22 | +function configureBpmnViewport() { |
| 23 | + const viewport = document.getElementById('graph'); |
21 | 24 |
|
22 | | - if (event.target.value === 'None') { |
23 | | - resetClass(container); |
| 25 | + const useFixedSize = !(fitOptions.type && FitType[fitOptions.type] === 'None'); // !== 'None' |
| 26 | + if (useFixedSize) { |
| 27 | + viewport.classList.add('fixed-size'); |
24 | 28 | } else { |
25 | | - setFixedSizeClass(container); |
| 29 | + viewport.classList.remove('fixed-size'); |
26 | 30 | } |
27 | 31 | } |
28 | 32 |
|
29 | 33 | // eslint-disable-next-line @typescript-eslint/explicit-function-return-type |
30 | | -function setFixedSizeClass(htmlElementId) { |
31 | | - const htmlElement = document.getElementById(htmlElementId); |
32 | | - htmlElement.classList.add('fixed-size'); |
| 34 | +function configureFitOnLoadCheckBox() { |
| 35 | + const fitOnLoadElt = document.getElementById('fitOnLoad'); |
| 36 | + fitOnLoadElt.onchange = event => { |
| 37 | + fitOnLoad = event.target.checked; |
| 38 | + log('Fit on load updated!', fitOnLoad); |
| 39 | + updateLoadOptions(fitOnLoad ? fitOptions : {}); |
| 40 | + }; |
| 41 | + fitOnLoadElt.checked = fitOnLoad; |
33 | 42 | } |
34 | 43 |
|
35 | 44 | // eslint-disable-next-line @typescript-eslint/explicit-function-return-type |
36 | | -function resetClass(htmlElementId) { |
37 | | - const htmlElement = document.getElementById(htmlElementId); |
38 | | - htmlElement.classList.remove('fixed-size'); |
| 45 | +function updateFitConfig(config) { |
| 46 | + log('Updating fit config', config); |
| 47 | + |
| 48 | + fitOptions.margin = config.margin || fitOptions.margin; |
| 49 | + if (config.type) { |
| 50 | + fitOptions.type = FitType[config.type]; |
| 51 | + } |
| 52 | + log('Fit config updated!', fitOptions); |
| 53 | + |
| 54 | + if (fitOnLoad) { |
| 55 | + updateLoadOptions(fitOptions); |
| 56 | + } |
39 | 57 | } |
40 | 58 |
|
41 | 59 | // eslint-disable-next-line @typescript-eslint/explicit-function-return-type |
42 | | -function startDemo() { |
43 | | - const parameters = new URLSearchParams(window.location.search); |
| 60 | +function configureFitTypeSelect() { |
| 61 | + const fitTypeSelectedElt = document.getElementById('fitType-selected'); |
| 62 | + fitTypeSelectedElt.onchange = event => { |
| 63 | + updateFitConfig({ type: event.target.value }); |
| 64 | + configureBpmnViewport(); |
| 65 | + fit(fitOptions); |
| 66 | + }; |
44 | 67 |
|
45 | | - // Update the selected option at the initialization |
46 | | - const fitTypeSelected = document.getElementById('fitType-selected'); |
47 | | - fitTypeSelected.addEventListener('change', updateFitTypeSelection, false); |
48 | | - |
49 | | - const parameterFitType = parameters.get('fitType'); |
50 | | - if (parameterFitType) { |
51 | | - fitTypeSelected.value = parameterFitType; |
| 68 | + if (fitOptions.type) { |
| 69 | + fitTypeSelectedElt.value = FitType[fitOptions.type]; |
| 70 | + } else { |
| 71 | + updateFitConfig({ type: fitTypeSelectedElt.value }); |
52 | 72 | } |
53 | 73 |
|
54 | | - if (fitTypeSelected.value !== 'None') { |
55 | | - setFixedSizeClass('graph'); |
56 | | - } |
| 74 | + configureBpmnViewport(); |
| 75 | +} |
57 | 76 |
|
58 | | - startBpmnVisualization({ container: 'graph', loadOptions: { fitType: FitType[fitTypeSelected.value] } }); |
59 | | - document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false); |
| 77 | +// eslint-disable-next-line @typescript-eslint/explicit-function-return-type |
| 78 | +function configureFitMarginInput() { |
| 79 | + const fitMarginElt = document.getElementById('fit-margin'); |
| 80 | + fitMarginElt.onchange = event => updateFitConfig({ margin: event.target.value }); |
60 | 81 |
|
61 | | - // Update control panel |
| 82 | + if (fitOptions.margin) { |
| 83 | + fitMarginElt.value = fitOptions.margin; |
| 84 | + } else { |
| 85 | + updateFitConfig({ margin: fitMarginElt.value }); |
| 86 | + } |
| 87 | +} |
| 88 | + |
| 89 | +// eslint-disable-next-line @typescript-eslint/explicit-function-return-type |
| 90 | +function configureControlPanel() { |
| 91 | + const parameters = new URLSearchParams(window.location.search); |
62 | 92 | if (parameters.get('hideControls') === 'true') { |
63 | 93 | const classList = document.getElementById('controls').classList; |
64 | 94 | classList.remove('controls'); |
65 | 95 | classList.add('hidden'); |
66 | 96 | } |
67 | 97 | } |
68 | 98 |
|
| 99 | +// eslint-disable-next-line @typescript-eslint/explicit-function-return-type |
| 100 | +function startDemo() { |
| 101 | + startBpmnVisualization({ container: 'graph' }); |
| 102 | + |
| 103 | + // Configure custom html elements |
| 104 | + document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false); |
| 105 | + |
| 106 | + fitOptions = getCurrentLoadOptions().fit; |
| 107 | + configureFitTypeSelect(); |
| 108 | + configureFitMarginInput(); |
| 109 | + configureFitOnLoadCheckBox(); |
| 110 | + configureControlPanel(); |
| 111 | +} |
| 112 | + |
69 | 113 | // Start |
70 | 114 | documentReady(startDemo); |
0 commit comments