Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(example): custom user task icon #14

Merged
merged 1 commit into from
Aug 3, 2020
+167 −0
Merged

feat(example): custom user task icon #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,13 @@ If you need BPMN examples, you can use resources
- https://github.com/bpmn-miwg/bpmn-miwg-demos
- [files used to test](./bpmn-files/README.md) how the lib renders BPMN elements

## Examples


### Extensibility
- [custom user task icon](./examples/custom-user-task-icon/README.md): use your own icon


# Powered by

[![statically.io logo](https://statically.io/icons/icon-96x96.png "statically.io")](https://statically.io)
Expand Down
9 changes: 9 additions & 0 deletions examples/custom-user-task-icon/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Custom user task icon

**DISCLAIMER: this extension point is very experimental and is subject to changes**

Javascript example provided for `[email protected]`, [index.html](./index.html) or [live](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/custom-user-task-icon/index.html)

Override the `IconPainter` static method related to the icon of the BPMN element and paint the icon using the mxGraph
API. See https://process-analytics.github.io/bpmn-visualization-js/#bpmn-support-howto-elements-rendering for more
information.
151 changes: 151 additions & 0 deletions examples/custom-user-task-icon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<!--
Copyright 2020 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.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BPMN Visualization - Custom User Task Icon</title>
</head>
<body>
<!-- hack to avoid errors: the demo code requires these ids to add a listener -->
<div id="bpmn-file"></div>
<div id="file-selector"></div>
<!-- DO NOT change this id, the demo code requires it -->
<div id="graph">
<h2>Default User Task icon</h2>
</div>
<div id="graphAlternate">
<h2>Custom User Task icon</h2>
</div>

<!-- load global settings -->
<script src="../../demo/0.1.5/static/js/configureMxGraphGlobals.js"></script>
<!-- load mxGraph client library -->
<script src="../../demo/0.1.6/static/js/mxClient.min.js"></script>
<!-- load bpmn-visualization library -->
<script src="../../demo/0.1.5/index.es.js"></script>

<script>
const bpmn = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_12nbmjq" targetNamespace="http://example.bpmn.com/schema/bpmn">
<bpmn:collaboration id="Collaboration_1cajy2f">
<bpmn:participant id="Participant_0zyusbn" name="Pool" processRef="Process_1duwsyj" />
</bpmn:collaboration>
<bpmn:process id="Process_1duwsyj" isExecutable="false">
<bpmn:startEvent id="StartEvent_05jmofc" name="Start">
<bpmn:outgoing>Flow_1bic2fy</bpmn:outgoing>
</bpmn:startEvent>
<bpmn:endEvent id="Event_1o095l8" name="End">
<bpmn:incoming>Flow_1nkimwz</bpmn:incoming>
</bpmn:endEvent>
<bpmn:task id="Activity_04fn9qe" name="Abstract Task 1">
<bpmn:incoming>Flow_1bic2fy</bpmn:incoming>
<bpmn:outgoing>Flow_1sfz0po</bpmn:outgoing>
</bpmn:task>
<bpmn:userTask id="Activity_13y9ou5" name="User Task 2">
<bpmn:incoming>Flow_1sfz0po</bpmn:incoming>
<bpmn:outgoing>Flow_12gqqr8</bpmn:outgoing>
</bpmn:userTask>
<bpmn:serviceTask id="Activity_0dllg4f" name="Service Task 3">
<bpmn:incoming>Flow_12gqqr8</bpmn:incoming>
<bpmn:outgoing>Flow_1nkimwz</bpmn:outgoing>
</bpmn:serviceTask>
<bpmn:sequenceFlow id="Flow_1bic2fy" sourceRef="StartEvent_05jmofc" targetRef="Activity_04fn9qe" />
<bpmn:sequenceFlow id="Flow_1sfz0po" sourceRef="Activity_04fn9qe" targetRef="Activity_13y9ou5" />
<bpmn:sequenceFlow id="Flow_12gqqr8" sourceRef="Activity_13y9ou5" targetRef="Activity_0dllg4f" />
<bpmn:sequenceFlow id="Flow_1nkimwz" sourceRef="Activity_0dllg4f" targetRef="Event_1o095l8" />
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1cajy2f">
<bpmndi:BPMNShape id="Participant_0zyusbn_di" bpmnElement="Participant_0zyusbn" isHorizontal="true">
<dc:Bounds x="152" y="39" width="760" height="121" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_05jmofc">
<dc:Bounds x="206" y="81" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="210" y="124" width="28" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Event_1o095l8_di" bpmnElement="Event_1o095l8">
<dc:Bounds x="852" y="81" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="864" y="124" width="12" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Activity_1wvlsrv_di" bpmnElement="Activity_04fn9qe">
<dc:Bounds x="300" y="59" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Activity_0jp7sxr_di" bpmnElement="Activity_13y9ou5">
<dc:Bounds x="490" y="59" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Activity_1e6btip_di" bpmnElement="Activity_0dllg4f">
<dc:Bounds x="670" y="59" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="Flow_1bic2fy_di" bpmnElement="Flow_1bic2fy">
<di:waypoint x="242" y="99" />
<di:waypoint x="300" y="99" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_1sfz0po_di" bpmnElement="Flow_1sfz0po">
<di:waypoint x="400" y="99" />
<di:waypoint x="490" y="99" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_12gqqr8_di" bpmnElement="Flow_12gqqr8">
<di:waypoint x="590" y="99" />
<di:waypoint x="670" y="99" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Flow_1nkimwz_di" bpmnElement="Flow_1nkimwz">
<di:waypoint x="770" y="99" />
<di:waypoint x="852" y="99" />
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>`;
bpmnVisu.load(bpmn);

// demonstrate how to hard code the color for a specific icon
const userTaskIconColor = 'orange';

// adapted from https://github.com/primer/octicons/blob/638c6683c96ec4b357576c7897be8f19c933c052/icons/person.svg
// use mxgraph svg2xml to generate the xml stencil and port it to code
IconPainter.paintWomanIcon = function({ c, ratioFromParent, shape: { x, y, w, h }, icon }) {
this.updateCanvasStyle(c, Object.assign(Object.assign({}, icon), { isFilled: true }));
// icon coordinates fill a 12x13 rectangle
const canvas = MxCanvasUtil.getConfiguredCanvas(c, w, h, 13, ratioFromParent);
MxCanvasUtil.translateToStartingIconPosition(c, x, y, w, h, 20);

c.setFillColor(userTaskIconColor);

canvas.begin();
canvas.moveTo(12, 13);
canvas.arcTo(1, 1, 0, 0, 1, 11, 14);
canvas.lineTo(1, 14);
canvas.arcTo(1, 1, 0, 0, 1, 0, 13);
canvas.lineTo(0, 12);
canvas.curveTo(0, 9.37, 4, 8, 4, 8);
canvas.curveTo(4, 8, 4.23, 8, 4, 8);
canvas.curveTo(3.16, 6.38, 3.06, 5.41, 3, 3);
canvas.curveTo(3.17, 0.59, 4.87, 0, 6, 0);
canvas.curveTo(7.13, 0, 8.83, 0.59, 9, 3);
canvas.curveTo(8.94, 5.41, 8.84, 6.38, 8, 8);
canvas.curveTo(8, 8, 12, 9.37, 12, 12);
canvas.lineTo(12, 13);
canvas.close();
canvas.fill();
};

const bpmnVisuAlternate = new BpmnVisu(window.document.getElementById('graphAlternate'));
bpmnVisuAlternate.load(bpmn);
</script>
</body>
</html>