Add user task icon component

ng2-components/ng2-activiti-analytics/src/components/diagrams/activities/diagram-user-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-user-task [data]="data"></diagram-icon-user-task>

ng2-components/ng2-activiti-analytics/src/components/diagrams/activities/diagram-user-task.component.ts

@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * 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.
+ */
+
+import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { DiagramColorService } from './../services/diagram-color.service';
+
+@Component({
+    moduleId: module.id,
+    selector: 'diagram-user-task',
+    templateUrl: './diagram-user-task.component.html',
+    styleUrls: ['./diagram-user-task.component.css']
+})
+export class DiagramUserTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+
+    }
+}

ng2-components/ng2-activiti-analytics/src/components/diagrams/activities/index.ts

@@ -19,16 +19,19 @@ import { DiagramContainerServiceTaskComponent } from './diagram-container-servic
 import { DiagramTaskComponent } from './diagram-task.component';
 import { DiagramServiceTaskComponent } from './diagram-service-task.component';
 import { DiagramSendTaskComponent } from './diagram-send-task.component';
+import { DiagramUserTaskComponent } from './diagram-user-task.component';
 
 // primitives
 export * from './diagram-container-service-task.component';
 export * from './diagram-task.component';
 export * from './diagram-service-task.component';
 export * from './diagram-send-task.component';
+export * from './diagram-user-task.component';
 
 export const DIAGRAM_ACTIVITIES_DIRECTIVES: any[] = [
     DiagramContainerServiceTaskComponent,
     DiagramTaskComponent,
     DiagramServiceTaskComponent,
-    DiagramSendTaskComponent
+    DiagramSendTaskComponent,
+    DiagramUserTaskComponent
 ];

ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html

@@ -20,7 +20,7 @@
                 <diagram-event [data]="element" [radius]="14" [strokeWidth]="4"></diagram-event>
             </div>
             <div *ngSwitchCase="'UserTask'">
-                <diagram-task [data]="element"></diagram-task>
+                <diagram-user-task [data]="element"></diagram-user-task>
             </div>
             <div *ngSwitchCase="'ServiceTask'">
                 <diagram-container-service-task [data]="element"></diagram-container-service-task>

ng2-components/ng2-activiti-analytics/src/components/diagrams/icons/diagram-icon-user-task.component.html

@@ -0,0 +1 @@
+<raphael-icon-user [position]="position"></raphael-icon-user>

ng2-components/ng2-activiti-analytics/src/components/diagrams/icons/diagram-icon-user-task.component.ts

@@ -0,0 +1,42 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * 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.
+ */
+
+import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { DiagramColorService } from './../services/diagram-color.service';
+
+@Component({
+    moduleId: module.id,
+    selector: 'diagram-icon-user-task',
+    templateUrl: './diagram-icon-user-task.component.html',
+    styleUrls: ['./diagram-icon-user-task.component.css']
+})
+export class DiagramIconUserTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    position: any;
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 4, y: this.data.y + 4};
+    }
+}

ng2-components/ng2-activiti-analytics/src/components/diagrams/icons/index.ts

@@ -17,12 +17,15 @@
 
 import { DiagramIconServiceTaskComponent } from './diagram-icon-service-task.component';
 import { DiagramIconSendTaskComponent } from './diagram-icon-send-task.component';
+import { DiagramIconUserTaskComponent } from './diagram-icon-user-task.component';
 
 // primitives
 export * from './diagram-icon-service-task.component';
 export * from './diagram-icon-send-task.component';
+export * from './diagram-icon-user-task.component';
 
 export const DIAGRAM_ICONS_DIRECTIVES: any[] = [
     DiagramIconServiceTaskComponent,
-    DiagramIconSendTaskComponent
+    DiagramIconSendTaskComponent,
+    DiagramIconUserTaskComponent
 ];

ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts

@@ -27,6 +27,7 @@ import { RaphaelPentagonDirective } from './raphael-pentagon.component';
 // icons
 import { RaphaelIconServiceDirective } from './raphael-icon-service.component';
 import { RaphaelIconSendDirective } from './raphael-icon-send.component';
+import { RaphaelIconUserDirective } from './raphael-icon-user.component';
 
 // primitives
 export * from './raphael-circle.component';
@@ -40,6 +41,7 @@ export * from './raphael-pentagon.component';
 
 export * from './raphael-icon-service.component';
 export * from './raphael-icon-send.component';
+export * from './raphael-icon-user.component';
 
 export const RAPHAEL_DIRECTIVES: any[] = [
     RaphaelCircleDirective,
@@ -51,5 +53,6 @@ export const RAPHAEL_DIRECTIVES: any[] = [
     RaphaelRhombusDirective,
     RaphaelPentagonDirective,
     RaphaelIconServiceDirective,
-    RaphaelIconSendDirective
+    RaphaelIconSendDirective,
+    RaphaelIconUserDirective
 ];

ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-icon-user.component.ts

@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * 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.
+ */
+
+import { Directive, OnInit, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { Point } from './models/point';
+import { RaphaelBase } from './raphael-base';
+import { RaphaelService } from './raphael.service';
+
+@Directive({selector: 'raphael-icon-user'})
+export class RaphaelIconUserDirective extends RaphaelBase implements OnInit {
+    @Input()
+    paper: any;
+
+    @Input()
+    position: Point;
+
+    @Input()
+    text: string;
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef,
+                raphaelService: RaphaelService) {
+        super(elementRef, raphaelService);
+    }
+
+    ngOnInit() {
+        console.log(this.elementRef);
+        this.draw(this.position);
+    }
+
+    public draw(position: Point) {
+        let path1 = this.paper.path(`m 1,17 16,0 0,-1.7778 -5.333332,-3.5555 0,-1.7778 c 1.244444,0 1.244444,-2.3111 1.244444,-2.3111
+        l 0,-3.0222 C 12.555557,0.8221 9.0000001,1.0001 9.0000001,1.0001 c 0,0 -3.5555556,-0.178 -3.9111111,3.5555 l 0,3.0222 c
+        0,0 0,2.3111 1.2444443,2.3111 l 0,1.7778 L 1,15.2222 1,17 17,17`).attr({
+            'opacity': 1,
+            'stroke': 'none',
+            'fill': '#d1b575'
+        });
+        return path1.transform('T' + position.x + ',' + position.y);
+    }
+}