Skip to content

0.14.0
Compare
Choose a tag to compare
@csouchet csouchet released this 19 Apr 09:41
· 1893 commits to master since this release
v0.14.0
f783083

This new release focuses on the improvement of the API to add one or several Overlays, on implementation of the new API to remove all the overlays of a specific BPMN element, on adding automatic tests on Webkit, on the improvement of the coverage.

Thanks to all the contributors of this release 🌈: @aibcmars, @csouchet, and @tbouffard

See milestone 0.14.0 to get the list of issues covered by this release.

Highlights

Add one or several Overlays

API

class BpmnElementsRegistry {
  /**
   * Add one/several overlays to a BPMN element.
   *
   * Notice that if you pass an id that is not related to an existing BPMN element, nothing happens on the rendering side.
   *
   * @param bpmnElementId The BPMN id of the element where to add the overlays
   * @param overlays The overlays to add to the BPMN element
   */
  addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void {
      ...
   }
   ...
}

New position for Ovelay on Shape: top-center, bottom-center, middle-left, middle-right
Position for Ovelay on Edge: start, middle, end

Usage

Add one or several Overlays, with default style, on an Edge of the BPMN Diagram

  // Add an overlay to BPMN elements with id 'sequence_flow_1'
  bpmnVisualization.bpmnElementsRegistry.addOverlays('sequence_flow_1', { position: 'middle', label: '40' });

  // Add several overlays to BPMN element with id 'sequence_flow_3'
  bpmnVisualization.bpmnElementsRegistry.addOverlays('sequence_flow_3', [{ position: 'end', label: '110' }, { position: 'start', label: '40' }]);

Add one or several stylized Overlays

  // Add an overlay to BPMN elements with id 'task_1'
  bpmnVisualization.bpmnElementsRegistry.addOverlays('task_1', {
    position: 'top-left',
    label: '40',
    style: {
      font: { color: 'Chartreuse', size: 8 },
      fill: { color: 'Pink', opacity: 50 },
      stroke: { color: 'DarkSeaGreen', width: 2 }
    }
  });

  // Add several overlays to BPMN element with id 'task_3'
  bpmnVisualization.bpmnElementsRegistry.addOverlays('task_3', [
    {
      position: 'bottom-right',
      label: '110',
      style: {
        font: { color: '#663399', size: 8 },
        fill: { color: '#FFDAB9', opacity: 50 },
        stroke: { color: 'DarkSeaGreen', width: 2 }
      }
    },
    {
      position: 'top-left',
      label: '40',
      style: {
        font: { color: 'MidnightBlue', size: 30 },
        fill: { color: 'Aquamarine', opacity: 70 },
        stroke: { color: '#4B0082', width: 1 }
      }
    }
  ]);

Rendering

Add one or several Overlays, with default style, on an Shape of the BPMN Diagram

image

Add one or several Overlays, with default style, on an Edge of the BPMN Diagram

image

Add one or several stylized Overlays

image

Remove all the overlays of a specific BPMN element

API

class BpmnElementsRegistry {
  /**
   * Remove all overlays of a BPMN element.
   *
   * <b>WARNING</b>: could be renamed when adding support for removal of one or several specific overlays.
   *
   * @param bpmnElementId The BPMN id of the element where to remove the overlays
   */
  removeAllOverlays(bpmnElementId: string): void {
    ...
  }
   ...
}

Usage

  //  all overlays of the BPMN element with id: activity_1
  bpmnVisualization.bpmnElementsRegistry.removeAllOverlays('activity_1');

Automatic tests on Webkit

Github actions

The e2e tests are automatically run on Webkit on MacOs with Github actions on Pull request.

Locally

To execute the e2e tests on Webkit locally, run the following command:
BROWSERS=webkit npm run test:e2e

Coverage improvement

0.13.0

image

0.14.0

image

What's Changed

🧲 BPMN diagram usability

📝 Documentation

📦 Dependency updates

👻 Maintenance

Assets 2
Loading