[ADF-402] Process Diagram Widget - Show the current process state (#1867)

* Fixes for activiti process diagram Fix to show the current process state. ADF issue no ADF-402 * #ADF-402 fix to show process state and unit tests changes * fixed test for pipeline to match new angular4 changes on simple change (#1868) * [DW-50]: New features for accordion-group component (#1851) [ADF-557] - Add a new property called showIcon as input to hide/show filter icons. * [ADF-242] Select the first in the list when the report is deleted (#1862) * ADF-242 Select the first in the list when the report is deleted * Update README.md * Fixes for activiti process diagram Fix to show the current process state. ADF issue no ADF-402 * #ADF-402 fix to show process state and unit tests changes * #ADF-402 Removed error logging and modified documentation
2025-05-26 17:24:56 +00:00 · 2017-05-10 04:03:12 +05:30 · 2017-05-10 04:03:12 +05:30 · 3482cc57be
commit 3482cc57be
parent bac2a45d18
13 changed files with 4738 additions and 4 deletions
--- a/ng2-components/ng2-activiti-diagrams/README.md
+++ b/ng2-components/ng2-activiti-diagrams/README.md
@ -104,7 +104,12 @@ Follow the 3 steps below:
 This component shows the diagram of a process.

 ```html
-<activiti-diagrams [processDefinitionId]="processDefinitionId"></activiti-diagrams>
+<activiti-diagram [processDefinitionId]="processDefinitionId"></activiti-diagram>
+```
+Or below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending).
+
+```html
+<activiti-diagram [processInstanceId]="processInstanceId"></activiti-diagram>
 ```

 Usage example of this component :
@ -165,7 +170,9 @@ platformBrowserDynamic().bootstrapModule(AppModule);

 | Name | Description |
 | --- | --- |
-| `metricPercentage` | The array that contains the percentage of the time for each element |
+| `metricPercentages` | The array that contains the percentage of the time for each element |
+| `metricColor` | The array that contains the color for each element |
+| `metricType` | The string that specifies the metric type |

 ## Build from sources

--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramActivities.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramActivities.mock.ts
@ -26,6 +26,32 @@ export let userTask = {
    properties: [{}]
 };

+export let userTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake User task',
+    type: 'UserTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let userTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake User task',
+    type: 'UserTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let manualTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake Manual task',
@ -37,6 +63,32 @@ export let manualTask = {
    properties: [{}]
 };

+export let manualTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Manual task',
+    type: 'ManualTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let manualTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Manual task',
+    type: 'ManualTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let serviceTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake Service task',
@ -48,6 +100,32 @@ export let serviceTask = {
    properties: [{}]
 };

+export let serviceTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Service task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let serviceTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Service task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let receiveTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake Receive task',
@ -59,6 +137,32 @@ export let receiveTask = {
    properties: [{}]
 };

+export let receiveTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Receive task',
+    type: 'ReceiveTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let receiveTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Receive task',
+    type: 'ReceiveTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let scriptTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake Script task',
@ -70,6 +174,32 @@ export let scriptTask = {
    properties: [{}]
 };

+export let scriptTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Script task',
+    type: 'ScriptTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let scriptTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Script task',
+    type: 'ScriptTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let businessRuleTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake BusinessRule task',
@ -81,6 +211,32 @@ export let businessRuleTask = {
    properties: [{}]
 };

+export let businessRuleTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake BusinessRule task',
+    type: 'BusinessRuleTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
+export let businessRuleTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake BusinessRule task',
+    type: 'BusinessRuleTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}]
+};
+
 export let mailTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake Mail task',
@ -93,6 +249,34 @@ export let mailTask = {
    taskType: 'mail'
 };

+export let mailTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Mail task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'mail'
+};
+
+export let mailTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Mail task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'mail'
+};
+
 export let camelTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake Camel task',
@ -105,6 +289,34 @@ export let camelTask = {
    taskType: 'camel'
 };

+export let camelTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Camel task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'camel'
+};
+
+export let camelTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Camel task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'camel'
+};
+
 export let restCallTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake Rest Call task',
@ -117,6 +329,34 @@ export let restCallTask = {
    taskType: 'rest_call'
 };

+export let restCallTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Rest Call task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'rest_call'
+};
+
+export let restCallTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Rest Call task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'rest_call'
+};
+
 export let muleTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake Mule task',
@ -129,6 +369,34 @@ export let muleTask = {
    taskType: 'mule'
 };

+export let muleTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Mule task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'mule'
+};
+
+export let muleTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Mule task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'mule'
+};
+
 export let alfrescoPublishTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake Alfresco Publish task',
@ -141,6 +409,34 @@ export let alfrescoPublishTask = {
    taskType: 'alfresco_publish'
 };

+export let alfrescoPublishTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Alfresco Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'alfresco_publish'
+};
+
+export let alfrescoPublishTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Alfresco Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'alfresco_publish'
+};
+
 export let googleDrivePublishTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake Google Drive Publish task',
@ -153,6 +449,34 @@ export let googleDrivePublishTask = {
    taskType: 'google_drive_publish'
 };

+export let googleDrivePublishTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Google Drive Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'google_drive_publish'
+};
+
+export let googleDrivePublishTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Google Drive Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'google_drive_publish'
+};
+
 export let boxPublishTask = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    name: 'Fake Box Publish task',
@ -164,3 +488,31 @@ export let boxPublishTask = {
    properties: [{}],
    taskType: 'box_publish'
 };
+
+export let boxPublishTaskActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Box Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'box_publish'
+};
+
+export let boxPublishTaskCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    name: 'Fake Box Publish task',
+    type: 'ServiceTask',
+    width: 82,
+    height: 67,
+    x: 75.56890135999998,
+    y: 30,
+    properties: [{}],
+    taskType: 'box_publish'
+};
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramBoundary.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramBoundary.mock.ts
@ -26,6 +26,32 @@ export let boundaryTimeEvent = {
    eventDefinition: {type: 'timer'}
 };

+export let boundaryTimeEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
+export let boundaryTimeEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
 export let boundaryErrorEvent = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    type: 'BoundaryEvent',
@ -37,6 +63,32 @@ export let boundaryErrorEvent = {
    eventDefinition: {type: 'error'}
 };

+export let boundaryErrorEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
+export let boundaryErrorEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
 export let boundarySignalEvent = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    type: 'BoundaryEvent',
@ -48,6 +100,32 @@ export let boundarySignalEvent = {
    eventDefinition: {type: 'signal'}
 };

+export let boundarySignalEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
+export let boundarySignalEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
 export let boundaryMessageEvent = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    type: 'BoundaryEvent',
@ -58,3 +136,29 @@ export let boundaryMessageEvent = {
    properties: [{}],
    eventDefinition: {type: 'message'}
 };
+
+export let boundaryMessageEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
+
+export let boundaryMessageEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'BoundaryEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramEvents.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramEvents.mock.ts
@ -25,6 +25,30 @@ export let startEvent = {
    properties: [{}]
 };

+export let startEventActive = {
+    completed: false,
+    current: true,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    properties: [{}]
+};
+
+export let startEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    properties: [{}]
+};
+
 export let startTimeEvent = {
    id: 'startEvent1',
    type: 'StartEvent',
@ -36,6 +60,32 @@ export let startTimeEvent = {
    properties: [{}]
 };

+export let startTimeEventActive = {
+    completed: false,
+    current: true,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'timer'},
+    properties: [{}]
+};
+
+export let startTimeEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'timer'},
+    properties: [{}]
+};
+
 export let startSignalEvent = {
    id: 'startEvent1',
    type: 'StartEvent',
@ -47,6 +97,32 @@ export let startSignalEvent = {
    properties: [{}]
 };

+export let startSignalEventActive = {
+    completed: false,
+    current: true,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'signal'},
+    properties: [{}]
+};
+
+export let startSignalEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'signal'},
+    properties: [{}]
+};
+
 export let startMessageEvent = {
    id: 'startEvent1',
    type: 'StartEvent',
@ -58,6 +134,32 @@ export let startMessageEvent = {
    properties: [{}]
 };

+export let startMessageEventActive = {
+    completed: false,
+    current: true,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'message'},
+    properties: [{}]
+};
+
+export let startMessageEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'message'},
+    properties: [{}]
+};
+
 export let startErrorEvent = {
    id: 'startEvent1',
    type: 'StartEvent',
@ -69,6 +171,32 @@ export let startErrorEvent = {
    properties: [{}]
 };

+export let startErrorEventActive = {
+    completed: false,
+    current: true,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'error'},
+    properties: [{}]
+};
+
+export let startErrorEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'startEvent1',
+    type: 'StartEvent',
+    width: 30,
+    height: 30,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'error'},
+    properties: [{}]
+};
+
 export let endEvent = {
    id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
    type: 'EndEvent',
@ -79,6 +207,30 @@ export let endEvent = {
    properties: [{}]
 };

+export let endEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
+    type: 'EndEvent',
+    width: 28,
+    height: 28,
+    x: 15,
+    y: 48.5,
+    properties: [{}]
+};
+
+export let endEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
+    type: 'EndEvent',
+    width: 28,
+    height: 28,
+    x: 15,
+    y: 48.5,
+    properties: [{}]
+};
+
 export let endErrorEvent = {
    id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
    type: 'EndEvent',
@ -89,3 +241,30 @@ export let endErrorEvent = {
    eventDefinition: {type: 'error'},
    properties: [{}]
 };
+
+
+export let endErrorEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
+    type: 'EndEvent',
+    width: 28,
+    height: 28,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'error'},
+    properties: [{}]
+};
+
+export let endErrorEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E',
+    type: 'EndEvent',
+    width: 28,
+    height: 28,
+    x: 15,
+    y: 48.5,
+    eventDefinition: {type: 'error'},
+    properties: [{}]
+};
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramGateways.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramGateways.mock.ts
@ -25,6 +25,30 @@ export let exclusiveGatway = {
    properties: [{}]
 };

+export let exclusiveGatwayActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ExclusiveGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let exclusiveGatwayCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ExclusiveGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
 export let inclusiveGatway = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    type: 'InclusiveGateway',
@ -35,6 +59,30 @@ export let inclusiveGatway = {
    properties: [{}]
 };

+export let inclusiveGatwayActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'InclusiveGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let inclusiveGatwayCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'InclusiveGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
 export let parallelGatway = {
    id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
    type: 'ParallelGateway',
@ -45,6 +93,30 @@ export let parallelGatway = {
    properties: [{}]
 };

+export let parallelGatwayActive = {
+    completed: false,
+    current: true,
+    id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
+    type: 'ParallelGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let parallelGatwayCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
+    type: 'ParallelGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
 export let eventGatway = {
    id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
    type: 'EventGateway',
@ -54,3 +126,27 @@ export let eventGatway = {
    y: 30,
    properties: [{}]
 };
+
+export let eventGatwayActive = {
+    completed: false,
+    current: true,
+    id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
+    type: 'EventGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let eventGatwayCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC',
+    type: 'EventGateway',
+    width: 40,
+    height: 40,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramIntermediate.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramIntermediate.mock.ts
@ -26,6 +26,33 @@ export let intermediateCatchingTimeEvent = {
    eventDefinition: {type: 'timer'}
 };

+export let intermediateCatchingTimeEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
+export let intermediateCatchingTimeEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
+
 export let intermediateCatchingErrorEvent = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    type: 'IntermediateCatchEvent',
@ -37,6 +64,32 @@ export let intermediateCatchingErrorEvent = {
    eventDefinition: {type: 'error'}
 };

+export let intermediateCatchingErrorEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
+export let intermediateCatchingErrorEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
 export let intermediateCatchingSignalEvent = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    type: 'IntermediateCatchEvent',
@ -48,6 +101,33 @@ export let intermediateCatchingSignalEvent = {
    eventDefinition: {type: 'signal'}
 };

+export let intermediateCatchingSignalEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
+export let intermediateCatchingSignalEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
+
 export let intermediateCatchingMessageEvent = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    type: 'IntermediateCatchEvent',
@ -58,3 +138,29 @@ export let intermediateCatchingMessageEvent = {
    properties: [{}],
    eventDefinition: {type: 'message'}
 };
+
+export let intermediateCatchingMessageEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
+
+export let intermediateCatchingMessageEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'IntermediateCatchEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramStructural.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramStructural.mock.ts
@ -25,6 +25,30 @@ export let subProcess = {
    properties: [{}]
 };

+export let subProcessActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'SubProcess',
+    width: 300,
+    height: 200,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let subProcessCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'SubProcess',
+    width: 300,
+    height: 200,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
 export let eventSubProcess = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    type: 'EventSubProcess',
@ -34,3 +58,27 @@ export let eventSubProcess = {
    y: 30,
    properties: [{}]
 };
+
+export let eventSubProcessActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'EventSubProcess',
+    width: 300,
+    height: 200,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
+
+export let eventSubProcessCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'EventSubProcess',
+    width: 300,
+    height: 200,
+    x: 40,
+    y: 30,
+    properties: [{}]
+};
--- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramThrow.mock.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramThrow.mock.ts
@ -26,6 +26,32 @@ export let throwTimeEvent = {
    eventDefinition: {type: 'timer'}
 };

+export let throwTimeEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
+export let throwTimeEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'timer'}
+};
+
 export let throwErrorEvent = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    type: 'ThrowEvent',
@ -37,6 +63,32 @@ export let throwErrorEvent = {
    eventDefinition: {type: 'error'}
 };

+export let throwErrorEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
+export let throwErrorEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'error'}
+};
+
 export let throwSignalEvent = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    type: 'ThrowEvent',
@ -48,6 +100,32 @@ export let throwSignalEvent = {
    eventDefinition: {type: 'signal'}
 };

+export let throwSignalEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
+export let throwSignalEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'signal'}
+};
+
 export let throwMessageEvent = {
    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
    type: 'ThrowEvent',
@ -58,3 +136,29 @@ export let throwMessageEvent = {
    properties: [{}],
    eventDefinition: {type: 'message'}
 };
+
+export let throwMessageEventActive = {
+    completed: false,
+    current: true,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
+
+export let throwMessageEventCompleted = {
+    completed: true,
+    current: false,
+    id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
+    type: 'ThrowEvent',
+    width: 31,
+    height: 31,
+    x: 40,
+    y: 30,
+    properties: [{}],
+    eventDefinition: {type: 'message'}
+};
--- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts
--- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts
@ -31,6 +31,9 @@ export class DiagramComponent {
    @Input()
    processDefinitionId: any;

+    @Input()
+    processInstanceId: any;
+
    @Input()
    metricPercentages: any;

@ -71,14 +74,34 @@ export class DiagramComponent {
    ngOnChanges(changes: SimpleChanges) {
        this.reset();
        this.diagramColorService.setTotalColors(this.metricColor);
-        this.getProcessDefinitionModel(this.processDefinitionId);
+        if (this.processDefinitionId) {
+            this.getProcessDefinitionModel(this.processDefinitionId);
+        } else {
+            this.getRunningProcessDefinitionModel(this.processInstanceId);
+        }
+    }
+
+    getRunningProcessDefinitionModel(processInstanceId: string) {
+        this.diagramsService.getRunningProcessDefinitionModel(processInstanceId).subscribe(
+            (res: any) => {
+                this.diagram = new DiagramModel(res);
+                this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH,
+                                            this.diagram.diagramHeight + this.PADDING_HEIGHT);
+                this.setMetricValueToDiagramElement(this.diagram, this.metricPercentages, this.metricType);
+                this.onSuccess.emit(res);
+            },
+            (err: any) => {
+                this.onError.emit(err);
+            }
+        );
    }

    getProcessDefinitionModel(processDefinitionId: string) {
        this.diagramsService.getProcessDefinitionModel(processDefinitionId).subscribe(
            (res: any) => {
                this.diagram = new DiagramModel(res);
-                this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH, this.diagram.diagramHeight + this.PADDING_HEIGHT);
+                this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH,
+                                            this.diagram.diagramHeight + this.PADDING_HEIGHT);
                this.setMetricValueToDiagramElement(this.diagram, this.metricPercentages, this.metricType);
                this.onSuccess.emit(res);
            },
--- a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts
@ -74,6 +74,10 @@ export class RaphaelMultilineTextDirective extends RaphaelBase implements OnInit
    }

    private formatText(textPaper, text, elementWidth) {
+        let pText = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        textPaper.attr({
+            'text': pText
+        });
        let letterWidth = textPaper.getBBox().width / text.length;
        let removedLineBreaks = text.split('\n');
        let actualRowLength = 0, formattedText = [];
--- a/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts
@ -50,6 +50,8 @@ export class DiagramModel {
 }

 export class DiagramElementModel {
+    completed: boolean;
+    current: boolean;
    height: string;
    id: string;
    name: string;
@ -65,6 +67,8 @@ export class DiagramElementModel {

    constructor(obj?: any) {
        if (obj) {
+            this.completed = obj.completed || false;
+            this.current = obj.current || false;
            this.height = obj.height || '';
            this.id = obj.id || '';
            this.name = obj.name || '';
@ -102,6 +106,8 @@ export class DiagramElementPropertyModel {
 }

 export class DiagramFlowElementModel {
+    completed: boolean;
+    current: boolean;
    id: string;
    properties: any[] = [];
    sourceRef: string;
@ -111,6 +117,8 @@ export class DiagramFlowElementModel {

    constructor(obj?: any) {
        if (obj) {
+            this.completed = obj.completed || false;
+            this.current = obj.current || false;
            this.id = obj.id;
            this.properties = obj.properties;
            this.sourceRef = obj.sourceRef;
--- a/ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts
@ -40,6 +40,17 @@ export class DiagramsService {
            }).catch(err => this.handleError(err));
    }

+    getRunningProcessDefinitionModel(processInstanceId: string): Observable<any> {
+        let url = `${this.settingsService.getBPMApiBaseUrl()}/app/rest/process-instances/${processInstanceId}/model-json`;
+        let options = this.getRequestOptions();
+        return this.http
+            .get(url, options)
+            .map((res: any) => {
+                let body = res.json();
+                return body;
+            }).catch(err => this.handleError(err));
+    }
+
    public getHeaders(): Headers {
        return new Headers({
            'Accept': 'application/json',