From 2ac896c84a11c2921a72a3c131818b26ecb73f23 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Fri, 18 Aug 2023 14:47:58 +0200 Subject: [PATCH] chore: migrate the code of the demo/test pages to TypeScript (#2794) --- dev/public/bpmn-rendering.html | 2 +- dev/public/diagram-navigation.html | 2 +- dev/public/elements-identification.html | 2 +- dev/public/index.html | 2 +- dev/public/lib-integration.html | 2 +- dev/public/overlays.html | 2 +- dev/ts/component/DropFileUserInterface.ts | 2 +- dev/ts/component/ThemedBpmnVisualization.ts | 2 +- dev/ts/component/download.ts | 2 +- dev/ts/dev-bundle-index.ts | 7 +- .../pages/bpmn-rendering.ts} | 4 +- .../pages/diagram-navigation.ts} | 19 +++-- .../pages/elements-identification.ts} | 77 +++++++++++-------- .../static/js/index.js => ts/pages/index.ts} | 49 ++++++------ .../pages/lib-integration.ts} | 12 ++- .../js/overlays.js => ts/pages/overlays.ts} | 28 +++---- .../controls.js => ts/shared/controls.ts} | 12 +-- dev/ts/{utils => shared}/internal-helpers.ts | 0 dev/ts/{ => shared}/main.ts | 16 ++-- dev/ts/{utils => shared}/shared-helpers.ts | 0 src/component/mxgraph/renderer/style-utils.ts | 9 +-- src/model/bpmn/internal/edge/utils.ts | 24 ++++++ vite.config.js | 2 +- 23 files changed, 155 insertions(+), 122 deletions(-) rename dev/{public/static/js/bpmn-rendering.js => ts/pages/bpmn-rendering.ts} (92%) rename dev/{public/static/js/diagram-navigation.js => ts/pages/diagram-navigation.ts} (70%) rename dev/{public/static/js/elements-identification.js => ts/pages/elements-identification.ts} (80%) rename dev/{public/static/js/index.js => ts/pages/index.ts} (70%) rename dev/{public/static/js/lib-integration.js => ts/pages/lib-integration.ts} (67%) rename dev/{public/static/js/overlays.js => ts/pages/overlays.ts} (74%) rename dev/{public/static/js/helpers/controls.js => ts/shared/controls.ts} (88%) rename dev/ts/{utils => shared}/internal-helpers.ts (100%) rename dev/ts/{ => shared}/main.ts (96%) rename dev/ts/{utils => shared}/shared-helpers.ts (100%) create mode 100644 src/model/bpmn/internal/edge/utils.ts diff --git a/dev/public/bpmn-rendering.html b/dev/public/bpmn-rendering.html index 59aa39bfe9..dd516e347b 100644 --- a/dev/public/bpmn-rendering.html +++ b/dev/public/bpmn-rendering.html @@ -18,7 +18,7 @@ font-weight: bold; } - +
diff --git a/dev/public/diagram-navigation.html b/dev/public/diagram-navigation.html index 88e549dc73..e549431bb3 100644 --- a/dev/public/diagram-navigation.html +++ b/dev/public/diagram-navigation.html @@ -18,7 +18,7 @@ width: 35px; } - +
diff --git a/dev/public/elements-identification.html b/dev/public/elements-identification.html index c43cf04756..f026719496 100644 --- a/dev/public/elements-identification.html +++ b/dev/public/elements-identification.html @@ -132,7 +132,7 @@ color: var(--color-flow) !important; } - +
diff --git a/dev/public/index.html b/dev/public/index.html index 0795abb326..404c1c2429 100644 --- a/dev/public/index.html +++ b/dev/public/index.html @@ -7,7 +7,7 @@ - + diff --git a/dev/public/lib-integration.html b/dev/public/lib-integration.html index d0c22a552e..95b3f52750 100644 --- a/dev/public/lib-integration.html +++ b/dev/public/lib-integration.html @@ -4,7 +4,7 @@ bpmn-visualization - Library Integration - +
diff --git a/dev/public/overlays.html b/dev/public/overlays.html index dc4a09435e..29cca479ad 100644 --- a/dev/public/overlays.html +++ b/dev/public/overlays.html @@ -13,7 +13,7 @@ background-color: MintCream; } - +
diff --git a/dev/ts/component/DropFileUserInterface.ts b/dev/ts/component/DropFileUserInterface.ts index 1d1d5a2555..0376fde591 100644 --- a/dev/ts/component/DropFileUserInterface.ts +++ b/dev/ts/component/DropFileUserInterface.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { logErrorAndOpenAlert } from '../utils/internal-helpers'; +import { logErrorAndOpenAlert } from '../shared/internal-helpers'; export class DropFileUserInterface { private document: Document; diff --git a/dev/ts/component/ThemedBpmnVisualization.ts b/dev/ts/component/ThemedBpmnVisualization.ts index be2fbb743a..680ba84f50 100644 --- a/dev/ts/component/ThemedBpmnVisualization.ts +++ b/dev/ts/component/ThemedBpmnVisualization.ts @@ -15,7 +15,7 @@ limitations under the License. */ import { BpmnVisualization, FlowKind, ShapeBpmnElementKind, ShapeUtil, StyleConfigurator, StyleDefault } from '../../../src/bpmn-visualization'; -import { logStartup } from '../utils/internal-helpers'; +import { logStartup } from '../shared/internal-helpers'; import { mxConstants } from '../../../src/component/mxgraph/initializer'; interface Theme { diff --git a/dev/ts/component/download.ts b/dev/ts/component/download.ts index 9a81497525..2f31c0b170 100644 --- a/dev/ts/component/download.ts +++ b/dev/ts/component/download.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { logDownload } from '../utils/internal-helpers'; +import { logDownload } from '../shared/internal-helpers'; // inspired from https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server function download(filename: string, contentType: string, text: string): void { diff --git a/dev/ts/dev-bundle-index.ts b/dev/ts/dev-bundle-index.ts index 4e21372fd2..1262e04132 100644 --- a/dev/ts/dev-bundle-index.ts +++ b/dev/ts/dev-bundle-index.ts @@ -14,6 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -export * from './main'; -export * from './utils/shared-helpers'; +export * from './shared/controls'; +export * from './shared/main'; +export * from './shared/shared-helpers'; export * from '../../src/bpmn-visualization'; +// extra code not exported by bpmn-visualization +export * from '../../src/model/bpmn/internal/edge/utils'; diff --git a/dev/public/static/js/bpmn-rendering.js b/dev/ts/pages/bpmn-rendering.ts similarity index 92% rename from dev/public/static/js/bpmn-rendering.js rename to dev/ts/pages/bpmn-rendering.ts index 01f491ce65..0fc783ef5a 100644 --- a/dev/public/static/js/bpmn-rendering.js +++ b/dev/ts/pages/bpmn-rendering.ts @@ -14,9 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { documentReady, log, logError, startBpmnVisualization } from '../../../ts/dev-bundle-index'; +import { documentReady, log, logError, startBpmnVisualization } from '../dev-bundle-index'; -function statusFetchKO(errorMsg) { +function statusFetchKO(errorMsg: string): void { logError(errorMsg); const statusElt = document.getElementById('status-zone'); statusElt.innerText = errorMsg; diff --git a/dev/public/static/js/diagram-navigation.js b/dev/ts/pages/diagram-navigation.ts similarity index 70% rename from dev/public/static/js/diagram-navigation.js rename to dev/ts/pages/diagram-navigation.ts index 425ce54b2f..0d7d9d27f9 100644 --- a/dev/public/static/js/diagram-navigation.js +++ b/dev/ts/pages/diagram-navigation.ts @@ -14,10 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { documentReady, fit, FitType, startBpmnVisualization, zoom, ZoomType } from '../../../ts/dev-bundle-index'; -import { configureControlsPanel, configureMousePointer } from './helpers/controls.js'; +import { configureControlsPanel, configureMousePointer, documentReady, fit, FitType, startBpmnVisualization, zoom, ZoomType } from '../dev-bundle-index'; -function configureFitAndZoomButtons() { +function configureFitAndZoomButtons(): void { Object.values(FitType).forEach(fitType => { document.getElementById(fitType).onclick = () => fit({ type: fitType }); }); @@ -26,23 +25,23 @@ function configureFitAndZoomButtons() { }); } -function configureZoomThrottleInput(parameters) { - const elZoomThrottle = document.getElementById('zoom-throttle'); +function configureZoomThrottleInput(parameters: URLSearchParams): HTMLInputElement { + const elZoomThrottle = document.getElementById('zoom-throttle'); if (parameters.get('zoomThrottle')) { elZoomThrottle.value = parameters.get('zoomThrottle'); } return elZoomThrottle; } -function configureZoomDebounceInput(parameters) { - const elZoomDebounce = document.getElementById('zoom-debounce'); +function configureZoomDebounceInput(parameters: URLSearchParams): HTMLInputElement { + const elZoomDebounce = document.getElementById('zoom-debounce'); if (parameters.get('zoomDebounce')) { elZoomDebounce.value = parameters.get('zoomDebounce'); } return elZoomDebounce; } -function start() { +function start(): void { const parameters = new URLSearchParams(window.location.search); configureMousePointer(parameters); configureControlsPanel(parameters); @@ -56,8 +55,8 @@ function start() { navigation: { enabled: true, zoom: { - throttleDelay: elZoomThrottle.value, - debounceDelay: elZoomDebounce.value, + throttleDelay: Number(elZoomThrottle.value), + debounceDelay: Number(elZoomDebounce.value), }, }, }, diff --git a/dev/public/static/js/elements-identification.js b/dev/ts/pages/elements-identification.ts similarity index 80% rename from dev/public/static/js/elements-identification.js rename to dev/ts/pages/elements-identification.ts index 0fa20b4259..e5f8cd7fd4 100644 --- a/dev/public/static/js/elements-identification.js +++ b/dev/ts/pages/elements-identification.ts @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ +import type { BpmnElement, BpmnElementKind, Overlay, ShapeStyleUpdate, StyleUpdate, FlowKind } from '../dev-bundle-index'; import { addCssClasses, addOverlays, @@ -34,17 +35,32 @@ import { getParentElementIds, ShapeBpmnElementKind, isChildOfSubProcess, -} from '../../../ts/dev-bundle-index'; + isFlowKind, +} from '../dev-bundle-index'; -let lastIdentifiedBpmnIds = []; -let lastIdentifiedParentBpmnIds = []; -let styledPoolAndLaneIds = []; +let lastIdentifiedBpmnIds: string[] = []; +let lastIdentifiedParentBpmnIds: string[] = []; +let styledPoolAndLaneIds: string[] = []; const cssClassName = 'detection'; let isOverlaysDisplayed = true; let useCSS = true; -function computeStyleUpdateByKind(bpmnKind) { - const style = { font: {}, fill: {}, stroke: {} }; +function computeStyleUpdateByKind(bpmnKind: BpmnElementKind): StyleUpdate { + const style: ShapeStyleUpdate = { font: {}, fill: {}, stroke: {} }; + + if (isFlowKind(bpmnKind)) { + switch (bpmnKind as FlowKind) { + case 'messageFlow': + case 'sequenceFlow': + case 'association': + style.font.color = 'Chocolate'; + style.stroke.color = 'Chocolate'; + style.stroke.width = 4; + break; + } + return style; + } + if (ShapeUtil.isTask(bpmnKind)) { style.font.color = 'Indigo'; style.fill.color = 'gold'; @@ -99,19 +115,12 @@ function computeStyleUpdateByKind(bpmnKind) { style.stroke.color = 'Chartreuse'; style.stroke.width = 6; break; - case 'messageFlow': - case 'sequenceFlow': - case 'association': - style.font.color = 'Chocolate'; - style.stroke.color = 'Chocolate'; - style.stroke.width = 4; - break; } } return style; } -function updateStyleByAPI(bpmnIds, bpmnKind) { +function updateStyleByAPI(bpmnIds: string[], bpmnKind: ShapeBpmnElementKind): void { const subProcessChildrenIds = bpmnIds.filter(isChildOfSubProcess); const otherIds = bpmnIds.filter(bpmnId => !subProcessChildrenIds.includes(bpmnId)); @@ -130,17 +139,17 @@ function updateStyleByAPI(bpmnIds, bpmnKind) { updateStyle(otherIds, style); } -function styleByCSS(idsToStyle) { +function styleByCSS(idsToStyle: string[]): void { removeCssClasses(lastIdentifiedBpmnIds, cssClassName); addCssClasses(idsToStyle, cssClassName); } -function styleByAPI(idsToStyle, bpmnKind) { +function styleByAPI(idsToStyle: string[], bpmnKind: ShapeBpmnElementKind): void { resetStyleByAPI(); updateStyleByAPI(idsToStyle, bpmnKind); } -function resetStyleByAPI() { +function resetStyleByAPI(): void { resetStyle(lastIdentifiedBpmnIds); resetStyle(lastIdentifiedParentBpmnIds); lastIdentifiedParentBpmnIds = []; @@ -148,7 +157,7 @@ function resetStyleByAPI() { styledPoolAndLaneIds = []; } -function manageOverlays(idsToAddOverlay, bpmnKind) { +function manageOverlays(idsToAddOverlay: string[], bpmnKind: ShapeBpmnElementKind): void { lastIdentifiedBpmnIds.forEach(id => removeAllOverlays(id)); if (isOverlaysDisplayed) { idsToAddOverlay.forEach(id => addOverlays(id, getOverlay(bpmnKind))); @@ -157,7 +166,7 @@ function manageOverlays(idsToAddOverlay, bpmnKind) { } } -function updateSelectedBPMNElements(bpmnKind) { +function updateSelectedBPMNElements(bpmnKind: ShapeBpmnElementKind): void { log(`Searching for Bpmn elements of '${bpmnKind}' kind`); const elementsByKinds = getElementsByKinds(bpmnKind); @@ -172,8 +181,8 @@ function updateSelectedBPMNElements(bpmnKind) { lastIdentifiedBpmnIds = newlyIdentifiedBpmnIds; } -function updateTextArea(elementsByKinds, bpmnKind) { - const textArea = document.getElementById('elements-result'); +function updateTextArea(elementsByKinds: BpmnElement[], bpmnKind: string): void { + const textArea = document.getElementById('elements-result'); const textHeader = `Found ${elementsByKinds.length} ${bpmnKind}(s)`; log(textHeader); @@ -183,15 +192,15 @@ function updateTextArea(elementsByKinds, bpmnKind) { textArea.scrollTop = textArea.scrollHeight; } -function resetTextArea() { - const textArea = document.getElementById('elements-result'); +function resetTextArea(): void { + const textArea = document.getElementById('elements-result'); textArea.value = ''; } -function configureControls() { - const selectedKindElt = document.getElementById('bpmn-kinds-select'); - selectedKindElt.onchange = event => updateSelectedBPMNElements(event.target.value); - document.addEventListener('diagramLoaded', () => updateSelectedBPMNElements(selectedKindElt.value), false); +function configureControls(): void { + const selectedKindElt = document.getElementById('bpmn-kinds-select'); + selectedKindElt.onchange = event => updateSelectedBPMNElements((event.target).value as ShapeBpmnElementKind); + document.addEventListener('diagramLoaded', () => updateSelectedBPMNElements(selectedKindElt.value as ShapeBpmnElementKind), false); document.getElementById('clear-btn').onclick = function () { resetTextArea(); @@ -204,16 +213,16 @@ function configureControls() { }; // display overlay option - const checkboxDisplayOverlaysElt = document.getElementById('checkbox-display-overlays'); + const checkboxDisplayOverlaysElt = document.getElementById('checkbox-display-overlays'); checkboxDisplayOverlaysElt.addEventListener('change', function () { isOverlaysDisplayed = this.checked; log('Request overlays display:', isOverlaysDisplayed); - updateSelectedBPMNElements(selectedKindElt.value); + updateSelectedBPMNElements(selectedKindElt.value as ShapeBpmnElementKind); }); checkboxDisplayOverlaysElt.checked = isOverlaysDisplayed; // use CSS or API to style the BPMN elements - const checkboxUseCSSElt = document.getElementById('checkbox-css-style'); + const checkboxUseCSSElt = document.getElementById('checkbox-css-style'); checkboxUseCSSElt.addEventListener('change', function () { useCSS = this.checked; log('Request CSS style feature:', useCSS); @@ -223,13 +232,13 @@ function configureControls() { addCssClasses(lastIdentifiedBpmnIds, cssClassName); } else { removeCssClasses(lastIdentifiedBpmnIds, cssClassName); - updateStyleByAPI(lastIdentifiedBpmnIds, selectedKindElt.value); + updateStyleByAPI(lastIdentifiedBpmnIds, selectedKindElt.value as ShapeBpmnElementKind); } }); checkboxUseCSSElt.checked = useCSS; } -function getOverlay(bpmnKind) { +function getOverlay(bpmnKind: BpmnElementKind): Overlay { if (ShapeUtil.isActivity(bpmnKind)) { return { position: 'top-right', @@ -274,7 +283,7 @@ function getOverlay(bpmnKind) { return { position: 'top-left', label: '40' }; } -function configureDownloadButtons() { +function configureDownloadButtons(): void { document.getElementById('btn-dl-svg').addEventListener('click', downloadSvg, false); document.getElementById('btn-dl-png').addEventListener('click', downloadPng, false); } @@ -283,7 +292,7 @@ documentReady(() => { startBpmnVisualization({ globalOptions: { // Use a DOM element without id to test the fix for https://github.com/process-analytics/bpmn-visualization-js/issues/2270 - container: document.querySelector('.bpmn-container'), + container: document.querySelector('.bpmn-container'), navigation: { enabled: true, }, diff --git a/dev/public/static/js/index.js b/dev/ts/pages/index.ts similarity index 70% rename from dev/public/static/js/index.js rename to dev/ts/pages/index.ts index a3d884d851..4920abf07e 100644 --- a/dev/public/static/js/index.js +++ b/dev/ts/pages/index.ts @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ +import type { FitOptions, FitType } from '../dev-bundle-index'; import { documentReady, handleFileSelect, @@ -28,22 +29,22 @@ import { zoom, ZoomType, windowAlertStatusKoNotifier, -} from '../../../ts/dev-bundle-index'; +} from '../dev-bundle-index'; let fitOnLoad = true; -let fitOptions = {}; +let fitOptions: FitOptions = {}; -function configureFitOnLoadCheckBox() { - const fitOnLoadElt = document.getElementById('fitOnLoad'); +function configureFitOnLoadCheckBox(): void { + const fitOnLoadElt = document.getElementById('fitOnLoad'); fitOnLoadElt.onchange = event => { - fitOnLoad = event.target.checked; + fitOnLoad = (event.target).checked; log('Fit on load updated!', fitOnLoad); updateLoadOptions(fitOnLoad ? fitOptions : {}); }; fitOnLoadElt.checked = fitOnLoad; } -function updateFitConfig(config) { +function updateFitConfig(config: FitOptions): void { log('Updating fit config', config); fitOptions.margin = config.margin || fitOptions.margin; @@ -57,45 +58,45 @@ function updateFitConfig(config) { } } -function configureFitTypeSelect() { - const fitTypeSelectedElt = document.getElementById('fitType-selected'); +function configureFitTypeSelect(): void { + const fitTypeSelectedElt = document.getElementById('fitType-selected'); fitTypeSelectedElt.onchange = event => { - updateFitConfig({ type: event.target.value }); + updateFitConfig({ type: (event.target).value as FitType }); fit(fitOptions); }; if (fitOptions.type) { fitTypeSelectedElt.value = fitOptions.type; } else { - updateFitConfig({ type: fitTypeSelectedElt.value }); + updateFitConfig({ type: fitTypeSelectedElt.value as FitType }); } } -function configureFitMarginInput() { - const fitMarginElt = document.getElementById('fit-margin'); +function configureFitMarginInput(): void { + const fitMarginElt = document.getElementById('fit-margin'); fitMarginElt.onchange = event => { - updateFitConfig({ margin: event.target.value }); + updateFitConfig({ margin: Number((event.target).value) }); fit(fitOptions); }; if (fitOptions.margin) { - fitMarginElt.value = fitOptions.margin; + fitMarginElt.value = String(fitOptions.margin); } else { - updateFitConfig({ margin: fitMarginElt.value }); + updateFitConfig({ margin: Number(fitMarginElt.value) }); } } -function configureZoomButtons() { +function configureZoomButtons(): void { Object.values(ZoomType).forEach(zoomType => { document.getElementById(`zoom-${zoomType}`).onclick = () => zoom(zoomType); }); document.getElementById(`zoom-reset`).onclick = () => fit(fitOptions); } -function configureThemeSelect() { - const themeSelectedElt = document.getElementById('theme-selected'); +function configureThemeSelect(): void { + const themeSelectedElt = document.getElementById('theme-selected'); themeSelectedElt.onchange = event => { - switchTheme(event.target.value); + switchTheme((event.target).value); }; const currentTheme = getCurrentTheme(); @@ -104,7 +105,7 @@ function configureThemeSelect() { } } -function configureDisplayedFooterContent() { +function configureDisplayedFooterContent(): void { const version = getVersion(); const versionAsString = `bpmn-visualization@${version.lib}`; const dependenciesAsString = [...version.dependencies].map(([name, version]) => `${name}@${version}`).join('/'); @@ -115,17 +116,17 @@ function configureDisplayedFooterContent() { // The following function `preventZoomingPage` serves to block the page content zoom. // It is to make zooming of the actual diagram area more convenient for the user. // Without that function, the zooming performed out of the diagram area can mess up the page layout. -function preventZoomingPage() { +function preventZoomingPage(): void { document.addEventListener( 'wheel', - e => { + (e: WheelEvent): void => { if (e.ctrlKey) e.preventDefault(); // prevent whole page zoom }, - { passive: false, capture: 'bubble' }, + { passive: false, capture: true }, ); } -function startDemo() { +function startDemo(): void { preventZoomingPage(); const bpmnContainerId = 'bpmn-container'; diff --git a/dev/public/static/js/lib-integration.js b/dev/ts/pages/lib-integration.ts similarity index 67% rename from dev/public/static/js/lib-integration.js rename to dev/ts/pages/lib-integration.ts index 629f118cba..190eca0582 100644 --- a/dev/public/static/js/lib-integration.js +++ b/dev/ts/pages/lib-integration.ts @@ -14,13 +14,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { BpmnVisualization } from '../../../../src/bpmn-visualization'; +// IMPORTANT: here we want to test only the integration of the lib. +// So we must NOT use any demo code. +import { BpmnVisualization } from '../../../src/bpmn-visualization'; const bpmnVisualizationIntegration = new BpmnVisualization({ container: 'bpmn-container-custom' }); -bpmnVisualizationIntegration.load(bpmnDefaultContent()); - -function bpmnDefaultContent() { - return ` +bpmnVisualizationIntegration.load(` @@ -35,5 +34,4 @@ function bpmnDefaultContent() { -`; -} +`); diff --git a/dev/public/static/js/overlays.js b/dev/ts/pages/overlays.ts similarity index 74% rename from dev/public/static/js/overlays.js rename to dev/ts/pages/overlays.ts index 967151cb69..b97314e925 100644 --- a/dev/public/static/js/overlays.js +++ b/dev/ts/pages/overlays.ts @@ -14,18 +14,20 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { addOverlays, documentReady, getElementsByIds, removeAllOverlays, startBpmnVisualization } from '../../../ts/dev-bundle-index'; -import { configureControlsPanel, configureMousePointer } from './helpers/controls.js'; +import type { Overlay, OverlayPosition } from '../dev-bundle-index'; +import { addOverlays, configureControlsPanel, configureMousePointer, documentReady, getElementsByIds, removeAllOverlays, startBpmnVisualization } from '../dev-bundle-index'; -function addOverlay(overlay) { - const bpmnId = document.getElementById('bpmn-id-input').value; +const bpmnIdInputElt = document.getElementById('bpmn-id-input'); + +function addOverlay(overlay: Overlay): void { + const bpmnId = bpmnIdInputElt.value; if (bpmnId) { addOverlays(bpmnId, overlay); } } -function getPosition() { - const bpmnId = document.getElementById('bpmn-id-input').value; +function getPosition(): OverlayPosition { + const bpmnId = bpmnIdInputElt.value; if (bpmnId) { const elementsByIds = getElementsByIds(bpmnId); if (elementsByIds) { @@ -37,27 +39,27 @@ function getPosition() { } } -function configureAddDefaultOverlay(position) { +function configureAddDefaultOverlay(position: OverlayPosition): void { document.getElementById(position).onclick = () => addOverlay({ position, label: '123' }); } -function configureAddOverlayWithCustomFont() { +function configureAddOverlayWithCustomFont(): void { document.getElementById('font').onclick = () => addOverlay({ position: getPosition(), label: '7896', style: { font: { color: 'LightSeaGreen', size: 30 } } }); } -function configureAddOverlayWithCustomFill() { +function configureAddOverlayWithCustomFill(): void { document.getElementById('fill').onclick = () => addOverlay({ position: getPosition(), label: '3', style: { fill: { color: 'LightSalmon', opacity: 50 } } }); } -function configureAddOverlayWithCustomStroke() { +function configureAddOverlayWithCustomStroke(): void { document.getElementById('stroke').onclick = () => addOverlay({ position: getPosition(), label: '41', style: { stroke: { color: 'Aquamarine', width: 5 } } }); } -function configureRemoveAllOverlays() { - document.getElementById('clear').onclick = () => removeAllOverlays(document.getElementById('bpmn-id-input').value); +function configureRemoveAllOverlays(): void { + document.getElementById('clear').onclick = () => removeAllOverlays(bpmnIdInputElt.value); } -function start() { +function start(): void { const parameters = new URLSearchParams(window.location.search); configureMousePointer(parameters); configureControlsPanel(parameters); diff --git a/dev/public/static/js/helpers/controls.js b/dev/ts/shared/controls.ts similarity index 88% rename from dev/public/static/js/helpers/controls.js rename to dev/ts/shared/controls.ts index 64cabd9f66..55fd3df5bd 100644 --- a/dev/public/static/js/helpers/controls.js +++ b/dev/ts/shared/controls.ts @@ -16,7 +16,7 @@ limitations under the License. // @see https://github.com/puppeteer/puppeteer/issues/374 // @see https://github.com/puppeteer/puppeteer/blob/4fdb1e3cab34310b4a1012c3024a94bc422b3b92/test/assets/input/mouse-helper.js -function showMousePointer() { +function showMousePointer(): void { const box = document.createElement('div'); box.classList.add('mouse-helper'); const styleElement = document.createElement('style'); @@ -83,18 +83,20 @@ function showMousePointer() { }, true, ); - function updateButtons(buttons) { - for (let i = 0; i < 5; i++) box.classList.toggle('button-' + i, buttons & (1 << i)); + function updateButtons(buttons: number): void { + for (let i = 0; i < 5; i++) { + box.classList.toggle('button-' + i, (buttons & (1 << i)) > 0); + } } } -export function configureMousePointer(parameters) { +export function configureMousePointer(parameters: URLSearchParams): void { if (parameters.get('showMousePointer') === 'true') { showMousePointer(); } } -export function configureControlsPanel(parameters) { +export function configureControlsPanel(parameters: URLSearchParams): void { const elControlsPanel = document.getElementById('controls-panel'); if (parameters.get('showControlsPanel') === 'true') { elControlsPanel.classList.remove('hidden'); diff --git a/dev/ts/utils/internal-helpers.ts b/dev/ts/shared/internal-helpers.ts similarity index 100% rename from dev/ts/utils/internal-helpers.ts rename to dev/ts/shared/internal-helpers.ts diff --git a/dev/ts/main.ts b/dev/ts/shared/main.ts similarity index 96% rename from dev/ts/main.ts rename to dev/ts/shared/main.ts index cc0ada21a2..87416201de 100644 --- a/dev/ts/main.ts +++ b/dev/ts/shared/main.ts @@ -30,14 +30,14 @@ import type { ZoomType, FillColorGradient, GradientDirection, -} from '../../src/bpmn-visualization'; -import { FlowKind, ShapeBpmnElementKind } from '../../src/bpmn-visualization'; -import { fetchBpmnContent, logDownload, logError, logErrorAndOpenAlert, logStartup } from './utils/internal-helpers'; -import { log } from './utils/shared-helpers'; -import { DropFileUserInterface } from './component/DropFileUserInterface'; -import { SvgExporter } from './component/SvgExporter'; -import { downloadAsPng, downloadAsSvg } from './component/download'; -import { ThemedBpmnVisualization } from './component/ThemedBpmnVisualization'; +} from '../../../src/bpmn-visualization'; +import { FlowKind, ShapeBpmnElementKind } from '../../../src/bpmn-visualization'; +import { fetchBpmnContent, logDownload, logError, logErrorAndOpenAlert, logStartup } from './internal-helpers'; +import { log } from './shared-helpers'; +import { DropFileUserInterface } from '../component/DropFileUserInterface'; +import { SvgExporter } from '../component/SvgExporter'; +import { downloadAsPng, downloadAsSvg } from '../component/download'; +import { ThemedBpmnVisualization } from '../component/ThemedBpmnVisualization'; let bpmnVisualization: ThemedBpmnVisualization; let loadOptions: LoadOptions = {}; diff --git a/dev/ts/utils/shared-helpers.ts b/dev/ts/shared/shared-helpers.ts similarity index 100% rename from dev/ts/utils/shared-helpers.ts rename to dev/ts/shared/shared-helpers.ts diff --git a/src/component/mxgraph/renderer/style-utils.ts b/src/component/mxgraph/renderer/style-utils.ts index 43ea496a38..c78a9e64dc 100644 --- a/src/component/mxgraph/renderer/style-utils.ts +++ b/src/component/mxgraph/renderer/style-utils.ts @@ -15,7 +15,8 @@ limitations under the License. */ import type { mxCell } from 'mxgraph'; -import { FlowKind, ShapeUtil } from '../../../model/bpmn/internal'; +import { ShapeUtil } from '../../../model/bpmn/internal'; +import { isFlowKind } from '../../../model/bpmn/internal/edge/utils'; import { BpmnStyleIdentifier } from '../style/identifiers'; /** @@ -86,12 +87,6 @@ export function computeAllBpmnClassNames(style: string, isLabel: boolean): strin return classes; } -function isFlowKind(kind: string): boolean { - return Object.values(FlowKind) - .map(value => value as string) - .includes(kind); -} - /** * Compute the class name in a hyphen case form. * For instance, `userTask` returns `bpmn-user-task` diff --git a/src/model/bpmn/internal/edge/utils.ts b/src/model/bpmn/internal/edge/utils.ts new file mode 100644 index 0000000000..5ec6632003 --- /dev/null +++ b/src/model/bpmn/internal/edge/utils.ts @@ -0,0 +1,24 @@ +/* +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. +*/ + +import { FlowKind } from './kinds'; + +/** @internal */ +export function isFlowKind(kind: string): kind is FlowKind { + return Object.values(FlowKind) + .map(value => value as string) + .includes(kind); +} diff --git a/vite.config.js b/vite.config.js index 100d8171e7..b3c78a8935 100644 --- a/vite.config.js +++ b/vite.config.js @@ -48,7 +48,7 @@ export default defineConfig(({ mode }) => { }, }, }, - chunkSizeWarningLimit: 820, // mxgraph + chunkSizeWarningLimit: 838, // mxgraph }, preview: { port: 10002,