Add user task icon component

This commit is contained in:
mauriziovitale84 2016-10-21 17:31:20 +01:00
parent fb8b640db0
commit e14876f8a7
9 changed files with 155 additions and 4 deletions

View File

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

View File

@ -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() {
}
}

View File

@ -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
];

View File

@ -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>

View File

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

View File

@ -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};
}
}

View File

@ -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
];

View File

@ -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
];

View File

@ -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);
}
}