From 2d4c5c051e5aacea96a7f584a59d51e572934f61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Wed, 12 Apr 2023 15:46:30 +0200 Subject: [PATCH 1/7] Add the radio button in elements-identification.html and get its value in js file --- dev/public/elements-identification.html | 3 +++ dev/public/static/js/elements-identification.js | 16 +++++++++++++--- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/dev/public/elements-identification.html b/dev/public/elements-identification.html index 95f33631b8..c43cf04756 100644 --- a/dev/public/elements-identification.html +++ b/dev/public/elements-identification.html @@ -170,6 +170,9 @@
+ + +
diff --git a/dev/public/static/js/elements-identification.js b/dev/public/static/js/elements-identification.js index 7415835eeb..66ebf1a3c5 100644 --- a/dev/public/static/js/elements-identification.js +++ b/dev/public/static/js/elements-identification.js @@ -34,6 +34,7 @@ import { let lastIdentifiedBpmnIds = []; const cssClassName = 'detection'; let isOverlaysDisplayed = true; +let useCSS = true; function updateSelectedBPMNElements(textArea, bpmnKind) { log(`Searching for Bpmn elements of '${bpmnKind}' kind`); @@ -82,15 +83,24 @@ function configureControls() { lastIdentifiedBpmnIds = []; }; - // display options + // display overlay option const checkboxDisplayOverlaysElt = document.getElementById('checkbox-display-overlays'); checkboxDisplayOverlaysElt.addEventListener('change', function () { isOverlaysDisplayed = this.checked; log('Request overlays display:', isOverlaysDisplayed); updateSelectedBPMNElements(textArea, selectedKindElt.value); }); - - checkboxDisplayOverlaysElt.checked = true; + checkboxDisplayOverlaysElt.checked = isOverlaysDisplayed; + + // use CSS or API to style the BPMN elements + const checkboxUseCSSElt = document.getElementById('checkbox-css-style'); + checkboxUseCSSElt.addEventListener('change', function () { + useCSS = this.checked; + log('Request CSS style feature:', useCSS); + // TODO to change + updateSelectedBPMNElements(textArea, selectedKindElt.value); + }); + checkboxUseCSSElt.checked = useCSS; } function getOverlay(bpmnKind) { From 7095d67fcf58bbd3e169d934e5458666e458b11d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Tue, 18 Apr 2023 15:00:19 +0200 Subject: [PATCH 2/7] Export missing type for the API documentation : StyleWithOpacity --- src/component/registry/types.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/component/registry/types.ts b/src/component/registry/types.ts index e3dd256349..575a4faca1 100644 --- a/src/component/registry/types.ts +++ b/src/component/registry/types.ts @@ -235,7 +235,10 @@ export type Fill = StyleWithOpacity & { color?: 'default' | 'none' | string; }; -type StyleWithOpacity = { +/** + * @category Element Style + */ +export type StyleWithOpacity = { /** * The value must be between 0 and 100: * - If the set value is less than 0, the used value is 0. From 9b81c168e39d4c3d8a3401f4fa50632ec406f577 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Tue, 18 Apr 2023 15:01:26 +0200 Subject: [PATCH 3/7] Introduce new function in the main demo for elements-identification demo, to style without parameters: updateStyle --- dev/ts/main.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/dev/ts/main.ts b/dev/ts/main.ts index b8f7dd9197..3de3423509 100644 --- a/dev/ts/main.ts +++ b/dev/ts/main.ts @@ -310,14 +310,18 @@ export function getVersion(): Version { return version; } +export function updateStyle(bpmnElementIds: string | string[], style: StyleUpdate): void { + log('Applying style using the style API: %O', style); + bpmnVisualization.bpmnElementsRegistry.updateStyle(bpmnElementIds, style); + log('New style applied'); +} + function updateStyleOfElementsIfRequested(): void { if (style) { - log("Applying style using the style API: '%s'", style); const bpmnElementIds = retrieveAllBpmnElementIds(); log('Number of elements whose style is to be updated', bpmnElementIds.length); - bpmnVisualization.bpmnElementsRegistry.updateStyle(bpmnElementIds, style); - log('New style applied'); + updateStyle(bpmnElementIds, style); } } From f086e66a68300d659d064d237e1a6080874cd3c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Tue, 18 Apr 2023 15:02:56 +0200 Subject: [PATCH 4/7] Update the style according the selected BPMN kind and the style method (CSS or API) --- .../static/js/elements-identification.js | 145 +++++++++++++++++- 1 file changed, 139 insertions(+), 6 deletions(-) diff --git a/dev/public/static/js/elements-identification.js b/dev/public/static/js/elements-identification.js index 66ebf1a3c5..63e7d03784 100644 --- a/dev/public/static/js/elements-identification.js +++ b/dev/public/static/js/elements-identification.js @@ -28,6 +28,7 @@ import { ShapeUtil, startBpmnVisualization, updateLoadOptions, + updateStyle, windowAlertStatusKoNotifier, } from '../../../ts/dev-bundle-index'; @@ -36,6 +37,127 @@ const cssClassName = 'detection'; let isOverlaysDisplayed = true; let useCSS = true; +function updateStyleByAPI(bpmnIds, bpmnKind) { + const style = { font: { spacing: {} }, fill: {}, stroke: {}, gradient: {}, label: {} }; + switch (bpmnKind) { + case 'task': + style.font.color = 'red !important'; + style.fill.color = 'aquamarine'; + break; + case 'userTask': + style.font.color = 'red !important'; + style.fill.color = 'aquamarine'; + break; + case 'scriptTask': + style.font.color = 'red !important'; + style.font.size = 16; + style.fill.color = 'aquamarine'; + break; + case 'serviceTask': + style.font.color = 'red !important'; + style.font.size = 16; + style.fill.color = 'aquamarine'; + break; + case 'receiveTask': + case 'sendTask': + case 'manualTask': + case 'businessRuleTask': + style.font.color = 'red !important'; + style.fill.color = 'aquamarine'; + style.fill.opacity = 40; + break; + case 'startEvent': + case 'endEvent': + case 'intermediateCatchEvent': + case 'intermediateThrowEvent': + case 'boundaryEvent': + style.font.color = 'red !important'; + style.stroke.color = 'red'; + break; + case 'exclusiveGateway': + case 'inclusiveGateway': + case 'parallelGateway': + case 'eventBasedGateway': + case 'complexGateway': + style.font.color = 'red !important'; + style.font.opacity = 60; + style.stroke.color = 'chartreuse'; + style.stroke.width = 4; + break; + case 'lane': + case 'pool': + style.font.color = 'white !important'; + style.fill.color = 'deeppink'; + style.stroke.opacity = 80; + break; + case 'callActivity': + style.font.color = 'white'; + style.font.family = 'Times New Roman'; + style.font.isItalic = true; + style.font.isStrikeThrough = true; + + style.fill.color = 'LimeGreen'; + break; + case 'subProcess': + style.font.color = 'white'; + style.font.size = 14; + style.font.family = 'Dialog'; + style.font.isBold = true; + style.font.isItalic = true; + style.font.isUnderline = true; + style.font.isStrikeThrough = true; + + style.fill.color = 'MediumVioletRed'; + style.opacity = 60; + break; + case 'group': + case 'textAnnotation': + style.font.color = 'MidnightBlue'; + style.font.size = 18; + style.font.family = 'Verdana'; + style.font.isBold = true; + style.font.isUnderline = true; + + style.stroke.color = 'Chartreuse'; + break; + case 'messageFlow': + case 'sequenceFlow': + case 'association': + style.font.color = 'dodgerblue !important'; + style.stroke.color = 'dodgerblue'; + style.stroke.width = 4; + break; + } + + updateStyle(bpmnIds, style); +} + +function resetStyleByAPI() { + const style = { + font: { + color: 'default', + size: 10, + family: 'Arial', + isBold: false, + isItalic: false, + isUnderline: false, + isStrikeThrough: false, + opacity: 'default', + }, + fill: { + color: 'default', + opacity: 'default', + }, + stroke: { + color: 'default', + opacity: 'default', + width: 'default', + }, + opacity: 'default', + }; + updateStyle(lastIdentifiedBpmnIds, style); +} + function updateSelectedBPMNElements(textArea, bpmnKind) { log(`Searching for Bpmn elements of '${bpmnKind}' kind`); const elementsByKinds = getElementsByKinds(bpmnKind); @@ -51,9 +173,14 @@ function updateSelectedBPMNElements(textArea, bpmnKind) { // newly identified elements and values const newlyIdentifiedBpmnIds = elementsByKinds.map(elt => elt.bpmnSemantic.id); - // CSS classes update - removeCssClasses(lastIdentifiedBpmnIds, cssClassName); - addCssClasses(newlyIdentifiedBpmnIds, cssClassName); + // style update + if (useCSS) { + removeCssClasses(lastIdentifiedBpmnIds, cssClassName); + addCssClasses(newlyIdentifiedBpmnIds, cssClassName); + } else { + resetStyleByAPI(lastIdentifiedBpmnIds); + updateStyleByAPI(newlyIdentifiedBpmnIds, bpmnKind); + } // Overlays update lastIdentifiedBpmnIds.forEach(id => removeAllOverlays(id)); @@ -76,7 +203,7 @@ function configureControls() { document.getElementById('clear-btn').onclick = function () { textArea.value = ''; - removeCssClasses(lastIdentifiedBpmnIds, cssClassName); + useCSS ? removeCssClasses(lastIdentifiedBpmnIds, cssClassName) : resetStyleByAPI(lastIdentifiedBpmnIds); lastIdentifiedBpmnIds.forEach(id => removeAllOverlays(id)); // reset identified elements and values @@ -97,8 +224,14 @@ function configureControls() { checkboxUseCSSElt.addEventListener('change', function () { useCSS = this.checked; log('Request CSS style feature:', useCSS); - // TODO to change - updateSelectedBPMNElements(textArea, selectedKindElt.value); + + if (useCSS) { + resetStyleByAPI(lastIdentifiedBpmnIds); + addCssClasses(lastIdentifiedBpmnIds, cssClassName); + } else { + removeCssClasses(lastIdentifiedBpmnIds, cssClassName); + updateStyleByAPI(lastIdentifiedBpmnIds, selectedKindElt.value); + } }); checkboxUseCSSElt.checked = useCSS; } From c45acc1e706932023f86ac1212ad8e521c03e7d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Tue, 18 Apr 2023 15:30:59 +0200 Subject: [PATCH 5/7] Change colors --- .../static/js/elements-identification.js | 40 +++++++------------ 1 file changed, 14 insertions(+), 26 deletions(-) diff --git a/dev/public/static/js/elements-identification.js b/dev/public/static/js/elements-identification.js index 63e7d03784..493cbbc3fb 100644 --- a/dev/public/static/js/elements-identification.js +++ b/dev/public/static/js/elements-identification.js @@ -41,47 +41,34 @@ function updateStyleByAPI(bpmnIds, bpmnKind) { const style = { font: { spacing: {} }, fill: {}, stroke: {}, gradient: {}, label: {} }; switch (bpmnKind) { case 'task': - style.font.color = 'red !important'; - style.fill.color = 'aquamarine'; - break; case 'userTask': - style.font.color = 'red !important'; - style.fill.color = 'aquamarine'; - break; case 'scriptTask': - style.font.color = 'red !important'; - style.font.size = 16; - style.fill.color = 'aquamarine'; - break; case 'serviceTask': - style.font.color = 'red !important'; - style.font.size = 16; - style.fill.color = 'aquamarine'; - break; case 'receiveTask': case 'sendTask': case 'manualTask': case 'businessRuleTask': - style.font.color = 'red !important'; - style.fill.color = 'aquamarine'; - style.fill.opacity = 40; + style.font.color = 'Indigo'; + style.fill.color = 'gold'; + style.font.size = 14; + style.fill.opacity = 20; break; case 'startEvent': case 'endEvent': case 'intermediateCatchEvent': case 'intermediateThrowEvent': case 'boundaryEvent': - style.font.color = 'red !important'; - style.stroke.color = 'red'; + style.font.color = 'MediumTurquoise'; + style.stroke.color = 'MediumTurquoise'; break; case 'exclusiveGateway': case 'inclusiveGateway': case 'parallelGateway': case 'eventBasedGateway': case 'complexGateway': - style.font.color = 'red !important'; - style.font.opacity = 60; - style.stroke.color = 'chartreuse'; + style.font.color = 'CadetBlue'; + style.font.opacity = 85; + style.stroke.color = 'OrangeRed'; style.stroke.width = 4; break; case 'lane': @@ -107,24 +94,25 @@ function updateStyleByAPI(bpmnIds, bpmnKind) { style.font.isUnderline = true; style.font.isStrikeThrough = true; - style.fill.color = 'MediumVioletRed'; + style.fill.color = 'MidnightBlue'; style.opacity = 60; break; case 'group': case 'textAnnotation': - style.font.color = 'MidnightBlue'; + style.font.color = 'Crimson'; style.font.size = 18; style.font.family = 'Verdana'; style.font.isBold = true; style.font.isUnderline = true; style.stroke.color = 'Chartreuse'; + style.stroke.width = 6; break; case 'messageFlow': case 'sequenceFlow': case 'association': - style.font.color = 'dodgerblue !important'; - style.stroke.color = 'dodgerblue'; + style.font.color = 'Chocolate'; + style.stroke.color = 'Chocolate'; style.stroke.width = 4; break; } From 8f7bbbbf5955355ede7a907423b677bdfa44ac6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Mon, 24 Apr 2023 15:08:13 +0200 Subject: [PATCH 6/7] Simplify check of bpmn kind in style with API --- .../static/js/elements-identification.js | 127 ++++++++---------- 1 file changed, 54 insertions(+), 73 deletions(-) diff --git a/dev/public/static/js/elements-identification.js b/dev/public/static/js/elements-identification.js index 493cbbc3fb..a77be6bb4a 100644 --- a/dev/public/static/js/elements-identification.js +++ b/dev/public/static/js/elements-identification.js @@ -39,82 +39,63 @@ let useCSS = true; function updateStyleByAPI(bpmnIds, bpmnKind) { const style = { font: { spacing: {} }, fill: {}, stroke: {}, gradient: {}, label: {} }; - switch (bpmnKind) { - case 'task': - case 'userTask': - case 'scriptTask': - case 'serviceTask': - case 'receiveTask': - case 'sendTask': - case 'manualTask': - case 'businessRuleTask': - style.font.color = 'Indigo'; - style.fill.color = 'gold'; - style.font.size = 14; - style.fill.opacity = 20; - break; - case 'startEvent': - case 'endEvent': - case 'intermediateCatchEvent': - case 'intermediateThrowEvent': - case 'boundaryEvent': - style.font.color = 'MediumTurquoise'; - style.stroke.color = 'MediumTurquoise'; - break; - case 'exclusiveGateway': - case 'inclusiveGateway': - case 'parallelGateway': - case 'eventBasedGateway': - case 'complexGateway': - style.font.color = 'CadetBlue'; - style.font.opacity = 85; - style.stroke.color = 'OrangeRed'; - style.stroke.width = 4; - break; - case 'lane': - case 'pool': - style.font.color = 'white !important'; - style.fill.color = 'deeppink'; - style.stroke.opacity = 80; - break; - case 'callActivity': - style.font.color = 'white'; - style.font.family = 'Times New Roman'; - style.font.isItalic = true; - style.font.isStrikeThrough = true; - style.fill.color = 'LimeGreen'; - break; - case 'subProcess': - style.font.color = 'white'; - style.font.size = 14; - style.font.family = 'Dialog'; - style.font.isBold = true; - style.font.isItalic = true; - style.font.isUnderline = true; - style.font.isStrikeThrough = true; + if (ShapeUtil.isTask(bpmnKind)) { + style.font.color = 'Indigo'; + style.fill.color = 'gold'; + style.font.size = 14; + style.fill.opacity = 20; + } else if (ShapeUtil.isEvent(bpmnKind)) { + style.font.color = 'MediumTurquoise'; + style.stroke.color = 'MediumTurquoise'; + } else if (ShapeUtil.isGateway(bpmnKind)) { + style.font.color = 'CadetBlue'; + style.font.opacity = 85; + style.stroke.color = 'OrangeRed'; + style.stroke.width = 4; + } else if (ShapeUtil.isPoolOrLane(bpmnKind)) { + style.font.color = 'white !important'; + style.fill.color = 'deeppink'; + style.stroke.opacity = 80; + } else if (ShapeUtil.isCallActivity(bpmnKind)) { + style.font.color = 'white'; + style.font.family = 'Times New Roman'; + style.font.isItalic = true; + style.font.isStrikeThrough = true; - style.fill.color = 'MidnightBlue'; - style.opacity = 60; - break; - case 'group': - case 'textAnnotation': - style.font.color = 'Crimson'; - style.font.size = 18; - style.font.family = 'Verdana'; - style.font.isBold = true; - style.font.isUnderline = true; + style.fill.color = 'LimeGreen'; + } else if (ShapeUtil.isSubProcess(bpmnKind)) { + style.font.color = 'white'; + style.font.size = 14; + style.font.family = 'Dialog'; + style.font.isBold = true; + style.font.isItalic = true; + style.font.isUnderline = true; + style.font.isStrikeThrough = true; - 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; + style.fill.color = 'MidnightBlue'; + style.opacity = 60; + } else { + switch (bpmnKind) { + case 'group': + case 'textAnnotation': + style.font.color = 'Crimson'; + style.font.size = 18; + style.font.family = 'Verdana'; + style.font.isBold = true; + style.font.isUnderline = true; + + 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; + } } updateStyle(bpmnIds, style); From c8f8f23c30806f0d78df03985599bd070c851418 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= Date: Mon, 24 Apr 2023 15:12:27 +0200 Subject: [PATCH 7/7] Add comment on resetStyleByAPI method --- dev/public/static/js/elements-identification.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/dev/public/static/js/elements-identification.js b/dev/public/static/js/elements-identification.js index a77be6bb4a..cb740e921f 100644 --- a/dev/public/static/js/elements-identification.js +++ b/dev/public/static/js/elements-identification.js @@ -101,6 +101,10 @@ function updateStyleByAPI(bpmnIds, bpmnKind) { updateStyle(bpmnIds, style); } +/** +Temporary implementation until we have https://github.com/process-analytics/bpmn-visualization-js/issues/2458. +Note that this implementation has limitations, such as resetting font styles without considering what is originally defined in the BPMN model. +*/ function resetStyleByAPI() { const style = { font: {