Style the element of a subprocess with 'swimlane' value

process-analytics · Jun 20, 2023 · 696d53d · 696d53d
1 parent 0dc9427
commit 696d53d
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 23 deletions.
diff --git a/dev/public/static/js/elements-identification.js b/dev/public/static/js/elements-identification.js
@@ -32,28 +32,26 @@ import {
   resetStyle,
   windowAlertStatusKoNotifier,
   getParentElementIds,
+  ShapeBpmnElementKind,
+  isChildOfSubProcess,
 } from '../../../ts/dev-bundle-index';
 
 let lastIdentifiedBpmnIds = [];
 let lastIdentifiedParentBpmnIds = [];
+let styledPoolAndLaneIds = [];
 const cssClassName = 'detection';
 let isOverlaysDisplayed = true;
 let useCSS = true;
 
-function updateStyleByAPI(bpmnIds, bpmnKind) {
+function computeDefaultStyleByKind(bpmnKind) {
   const style = { font: {}, fill: {}, stroke: {} };
-  lastIdentifiedParentBpmnIds = [];
-
   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)) {
     if (ShapeUtil.isBoundaryEvent(bpmnKind)) {
-      lastIdentifiedParentBpmnIds = getParentElementIds(bpmnIds);
-      updateStyle(lastIdentifiedParentBpmnIds, { opacity: 5, font: { color: 'green', opacity: 5 }, fill: { color: 'gold' }, stroke: { color: 'red' } });
-
       style.font.color = 'inherit';
       style.fill.color = 'inherit';
       style.stroke.color = 'inherit';
@@ -110,8 +108,26 @@ function updateStyleByAPI(bpmnIds, bpmnKind) {
         break;
     }
   }
+  return style;
+}
+
+function updateStyleByAPI(bpmnIds, bpmnKind) {
+  const subProcessChildrenIds = bpmnIds.filter(isChildOfSubProcess);
+  const otherIds = bpmnIds.filter(bpmnId => !subProcessChildrenIds.includes(bpmnId));
+
+  if (subProcessChildrenIds.length > 0) {
+    styledPoolAndLaneIds = getElementsByKinds([ShapeBpmnElementKind.POOL, ShapeBpmnElementKind.LANE]).map(element => element.bpmnSemantic.id);
+    updateStyle(styledPoolAndLaneIds, { opacity: 5, font: { color: 'blue', opacity: 5 }, fill: { color: 'pink' }, stroke: { color: 'green' } });
+  }
+  updateStyle(subProcessChildrenIds, { fill: { color: 'swimlane' }, stroke: { color: 'swimlane' }, font: { color: 'swimlane' } });
+
+  if (ShapeUtil.isBoundaryEvent(bpmnKind)) {
+    lastIdentifiedParentBpmnIds = getParentElementIds(otherIds);
+    updateStyle(lastIdentifiedParentBpmnIds, { opacity: 5, font: { color: 'green', opacity: 5 }, fill: { color: 'gold' }, stroke: { color: 'red' } });
+  }
 
-  updateStyle(bpmnIds, style);
+  const style = computeDefaultStyleByKind(bpmnKind);
+  updateStyle(otherIds, style);
 }
 
 function styleByCSS(idsToStyle) {
@@ -120,9 +136,16 @@ function styleByCSS(idsToStyle) {
 }
 
 function styleByAPI(idsToStyle, bpmnKind) {
+  resetStyleByAPI();
+  updateStyleByAPI(idsToStyle, bpmnKind);
+}
+
+function resetStyleByAPI() {
   resetStyle(lastIdentifiedBpmnIds);
   resetStyle(lastIdentifiedParentBpmnIds);
-  updateStyleByAPI(idsToStyle, bpmnKind);
+  lastIdentifiedParentBpmnIds = [];
+  resetStyle(styledPoolAndLaneIds);
+  styledPoolAndLaneIds = [];
 }
 
 function manageOverlays(idsToAddOverlay, bpmnKind) {
@@ -173,12 +196,11 @@ function configureControls() {
   document.getElementById('clear-btn').onclick = function () {
     resetTextArea();
 
-    useCSS ? removeCssClasses(lastIdentifiedBpmnIds, cssClassName) : resetStyle(lastIdentifiedBpmnIds);
+    useCSS ? removeCssClasses(lastIdentifiedBpmnIds, cssClassName) : resetStyleByAPI();
     lastIdentifiedBpmnIds.forEach(id => removeAllOverlays(id));
 
     // reset identified elements and values
     lastIdentifiedBpmnIds = [];
-    lastIdentifiedParentBpmnIds = [];
   };
 
   // display overlay option
@@ -197,9 +219,7 @@ function configureControls() {
     log('Request CSS style feature:', useCSS);
 
     if (useCSS) {
-      resetStyle(lastIdentifiedBpmnIds);
-      resetStyle(lastIdentifiedParentBpmnIds);
-      lastIdentifiedParentBpmnIds = [];
+      resetStyleByAPI();
       addCssClasses(lastIdentifiedBpmnIds, cssClassName);
     } else {
       removeCssClasses(lastIdentifiedBpmnIds, cssClassName);

diff --git a/dev/ts/main.ts b/dev/ts/main.ts
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import type { mxCell } from 'mxgraph';
 import type {
   BpmnElement,
   BpmnElementKind,
@@ -29,12 +30,12 @@ import type {
   ZoomType,
 } 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 { downloadAsPng, downloadAsSvg } from './component/download';
 import { DropFileUserInterface } from './component/DropFileUserInterface';
 import { SvgExporter } from './component/SvgExporter';
-import { downloadAsPng, downloadAsSvg } from './component/download';
 import { ThemedBpmnVisualization } from './component/ThemedBpmnVisualization';
+import { fetchBpmnContent, logDownload, logError, logErrorAndOpenAlert, logStartup } from './utils/internal-helpers';
+import { log } from './utils/shared-helpers';
 
 let bpmnVisualization: ThemedBpmnVisualization;
 let loadOptions: LoadOptions = {};
@@ -105,13 +106,19 @@ export function getElementsByIds(bpmnId: string | string[]): BpmnElement[] {
   return bpmnVisualization.bpmnElementsRegistry.getElementsByIds(bpmnId);
 }
 
+function getParentElement(id: string): mxCell {
+  const cell = bpmnVisualization.graph.model.getCell(id);
+  return bpmnVisualization.graph.getModel().getParent(cell);
+}
+
 export function getParentElementIds(bpmnIds: string[]): string[] {
-  return bpmnIds
-    .map(id => {
-      const cell = bpmnVisualization.graph.model.getCell(id);
-      return bpmnVisualization.graph.getModel().getParent(cell).getId();
-    })
-    .filter((value, index, self) => self.indexOf(value) === index);
+  return bpmnIds.map(id => getParentElement(id).getId()).filter((value, index, self) => self.indexOf(value) === index);
+}
+
+export function isChildOfSubProcess(bpmnId: string): boolean {
+  const parent = getParentElement(bpmnId);
+  const bpmnElement = getElementsByIds(parent.getId());
+  return bpmnElement && bpmnElement[0]?.bpmnSemantic.kind === ShapeBpmnElementKind.SUB_PROCESS;
 }
 
 export function addCssClasses(bpmnElementId: string | string[], classNames: string | string[]): void {
@@ -336,7 +343,7 @@ export function getVersion(): 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');
+  log('New style applied on: %O', bpmnElementIds);
 }
 
 export function resetStyle(bpmnElementIds: string | string[]): void {