mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
Add manual task component
This commit is contained in:
parent
a93f72cf37
commit
0e217c49db
@ -0,0 +1,2 @@
|
|||||||
|
<diagram-task [data]="data"></diagram-task>
|
||||||
|
<diagram-icon-manual-task [data]="data"></diagram-icon-manual-task>
|
@ -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-manual-task',
|
||||||
|
templateUrl: './diagram-manual-task.component.html',
|
||||||
|
styleUrls: ['./diagram-manual-task.component.css']
|
||||||
|
})
|
||||||
|
export class DiagramManualTaskComponent {
|
||||||
|
@Input()
|
||||||
|
data: any;
|
||||||
|
|
||||||
|
@Output()
|
||||||
|
onError = new EventEmitter();
|
||||||
|
|
||||||
|
constructor(public elementRef: ElementRef,
|
||||||
|
private diagramColorService: DiagramColorService) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
@ -20,6 +20,7 @@ import { DiagramTaskComponent } from './diagram-task.component';
|
|||||||
import { DiagramServiceTaskComponent } from './diagram-service-task.component';
|
import { DiagramServiceTaskComponent } from './diagram-service-task.component';
|
||||||
import { DiagramSendTaskComponent } from './diagram-send-task.component';
|
import { DiagramSendTaskComponent } from './diagram-send-task.component';
|
||||||
import { DiagramUserTaskComponent } from './diagram-user-task.component';
|
import { DiagramUserTaskComponent } from './diagram-user-task.component';
|
||||||
|
import { DiagramManualTaskComponent } from './diagram-manual-task.component';
|
||||||
|
|
||||||
// primitives
|
// primitives
|
||||||
export * from './diagram-container-service-task.component';
|
export * from './diagram-container-service-task.component';
|
||||||
@ -27,11 +28,13 @@ export * from './diagram-task.component';
|
|||||||
export * from './diagram-service-task.component';
|
export * from './diagram-service-task.component';
|
||||||
export * from './diagram-send-task.component';
|
export * from './diagram-send-task.component';
|
||||||
export * from './diagram-user-task.component';
|
export * from './diagram-user-task.component';
|
||||||
|
export * from './diagram-manual-task.component';
|
||||||
|
|
||||||
export const DIAGRAM_ACTIVITIES_DIRECTIVES: any[] = [
|
export const DIAGRAM_ACTIVITIES_DIRECTIVES: any[] = [
|
||||||
DiagramContainerServiceTaskComponent,
|
DiagramContainerServiceTaskComponent,
|
||||||
DiagramTaskComponent,
|
DiagramTaskComponent,
|
||||||
DiagramServiceTaskComponent,
|
DiagramServiceTaskComponent,
|
||||||
DiagramSendTaskComponent,
|
DiagramSendTaskComponent,
|
||||||
DiagramUserTaskComponent
|
DiagramUserTaskComponent,
|
||||||
|
DiagramManualTaskComponent
|
||||||
];
|
];
|
||||||
|
@ -22,6 +22,9 @@
|
|||||||
<div *ngSwitchCase="'UserTask'">
|
<div *ngSwitchCase="'UserTask'">
|
||||||
<diagram-user-task [data]="element"></diagram-user-task>
|
<diagram-user-task [data]="element"></diagram-user-task>
|
||||||
</div>
|
</div>
|
||||||
|
<div *ngSwitchCase="'ManualTask'">
|
||||||
|
<diagram-manual-task [data]="element"></diagram-manual-task>
|
||||||
|
</div>
|
||||||
<div *ngSwitchCase="'ServiceTask'">
|
<div *ngSwitchCase="'ServiceTask'">
|
||||||
<diagram-container-service-task [data]="element"></diagram-container-service-task>
|
<diagram-container-service-task [data]="element"></diagram-container-service-task>
|
||||||
</div>
|
</div>
|
||||||
|
@ -0,0 +1,2 @@
|
|||||||
|
<raphael-icon-manual [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
|
||||||
|
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-manual>
|
@ -0,0 +1,46 @@
|
|||||||
|
/*!
|
||||||
|
* @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-manual-task',
|
||||||
|
templateUrl: './diagram-icon-manual-task.component.html',
|
||||||
|
styleUrls: ['./diagram-icon-manual-task.component.css']
|
||||||
|
})
|
||||||
|
export class DiagramIconManualTaskComponent {
|
||||||
|
@Input()
|
||||||
|
data: any;
|
||||||
|
|
||||||
|
@Output()
|
||||||
|
onError = new EventEmitter();
|
||||||
|
|
||||||
|
position: any;
|
||||||
|
|
||||||
|
options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
|
||||||
|
|
||||||
|
constructor(public elementRef: ElementRef,
|
||||||
|
private diagramColorService: DiagramColorService) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.position = {x: this.data.x + 4, y: this.data.y + 4};
|
||||||
|
this.options.stroke = 'none' ;
|
||||||
|
this.options.fillColors = '#d1b575' ;
|
||||||
|
}
|
||||||
|
}
|
@ -18,14 +18,17 @@
|
|||||||
import { DiagramIconServiceTaskComponent } from './diagram-icon-service-task.component';
|
import { DiagramIconServiceTaskComponent } from './diagram-icon-service-task.component';
|
||||||
import { DiagramIconSendTaskComponent } from './diagram-icon-send-task.component';
|
import { DiagramIconSendTaskComponent } from './diagram-icon-send-task.component';
|
||||||
import { DiagramIconUserTaskComponent } from './diagram-icon-user-task.component';
|
import { DiagramIconUserTaskComponent } from './diagram-icon-user-task.component';
|
||||||
|
import { DiagramIconManualTaskComponent } from './diagram-icon-manual-task.component';
|
||||||
|
|
||||||
// primitives
|
// primitives
|
||||||
export * from './diagram-icon-service-task.component';
|
export * from './diagram-icon-service-task.component';
|
||||||
export * from './diagram-icon-send-task.component';
|
export * from './diagram-icon-send-task.component';
|
||||||
export * from './diagram-icon-user-task.component';
|
export * from './diagram-icon-user-task.component';
|
||||||
|
export * from './diagram-icon-manual-task.component';
|
||||||
|
|
||||||
export const DIAGRAM_ICONS_DIRECTIVES: any[] = [
|
export const DIAGRAM_ICONS_DIRECTIVES: any[] = [
|
||||||
DiagramIconServiceTaskComponent,
|
DiagramIconServiceTaskComponent,
|
||||||
DiagramIconSendTaskComponent,
|
DiagramIconSendTaskComponent,
|
||||||
DiagramIconUserTaskComponent
|
DiagramIconUserTaskComponent,
|
||||||
|
DiagramIconManualTaskComponent
|
||||||
];
|
];
|
||||||
|
@ -28,6 +28,7 @@ import { RaphaelPentagonDirective } from './raphael-pentagon.component';
|
|||||||
import { RaphaelIconServiceDirective } from './raphael-icon-service.component';
|
import { RaphaelIconServiceDirective } from './raphael-icon-service.component';
|
||||||
import { RaphaelIconSendDirective } from './raphael-icon-send.component';
|
import { RaphaelIconSendDirective } from './raphael-icon-send.component';
|
||||||
import { RaphaelIconUserDirective } from './raphael-icon-user.component';
|
import { RaphaelIconUserDirective } from './raphael-icon-user.component';
|
||||||
|
import { RaphaelIconManualDirective } from './raphael-icon-manual.component';
|
||||||
|
|
||||||
// primitives
|
// primitives
|
||||||
export * from './raphael-circle.component';
|
export * from './raphael-circle.component';
|
||||||
@ -42,6 +43,7 @@ export * from './raphael-pentagon.component';
|
|||||||
export * from './raphael-icon-service.component';
|
export * from './raphael-icon-service.component';
|
||||||
export * from './raphael-icon-send.component';
|
export * from './raphael-icon-send.component';
|
||||||
export * from './raphael-icon-user.component';
|
export * from './raphael-icon-user.component';
|
||||||
|
export * from './raphael-icon-manual.component';
|
||||||
|
|
||||||
export const RAPHAEL_DIRECTIVES: any[] = [
|
export const RAPHAEL_DIRECTIVES: any[] = [
|
||||||
RaphaelCircleDirective,
|
RaphaelCircleDirective,
|
||||||
@ -54,5 +56,6 @@ export const RAPHAEL_DIRECTIVES: any[] = [
|
|||||||
RaphaelPentagonDirective,
|
RaphaelPentagonDirective,
|
||||||
RaphaelIconServiceDirective,
|
RaphaelIconServiceDirective,
|
||||||
RaphaelIconSendDirective,
|
RaphaelIconSendDirective,
|
||||||
RaphaelIconUserDirective
|
RaphaelIconUserDirective,
|
||||||
|
RaphaelIconManualDirective
|
||||||
];
|
];
|
||||||
|
@ -0,0 +1,76 @@
|
|||||||
|
/*!
|
||||||
|
* @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-manual'})
|
||||||
|
export class RaphaelIconManualDirective extends RaphaelBase implements OnInit {
|
||||||
|
@Input()
|
||||||
|
paper: any;
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
position: Point;
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
text: string;
|
||||||
|
|
||||||
|
@Output()
|
||||||
|
onError = new EventEmitter();
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
strokeWidth: number;
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
fillColors: any;
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
stroke: any;
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
fillOpacity: any;
|
||||||
|
|
||||||
|
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 17,9.3290326 c -0.0069,0.5512461 -0.455166,1.0455894 -0.940778,1.0376604 l -5.792746,0 c
|
||||||
|
0.0053,0.119381 0.0026,0.237107 0.0061,0.355965 l 5.154918,0 c 0.482032,-0.0096 0.925529,0.49051 0.919525,1.037574 -0.0078,0.537128
|
||||||
|
-0.446283,1.017531 -0.919521,1.007683 l -5.245273,0 c -0.01507,0.104484 -0.03389,0.204081 -0.05316,0.301591 l 2.630175,0
|
||||||
|
c 0.454137,-0.0096 0.872112,0.461754 0.866386,0.977186 C 13.619526,14.554106 13.206293,15.009498 12.75924,15 L 3.7753054,15
|
||||||
|
C 3.6045812,15 3.433552,14.94423 3.2916363,14.837136 c -0.00174,0 -0.00436,0 -0.00609,0 C 1.7212035,14.367801
|
||||||
|
0.99998255,11.458641 1,11.458641 L 1,7.4588393 c 0,0 0.6623144,-1.316333 1.8390583,-2.0872584 1.1767614,-0.7711868
|
||||||
|
6.8053358,-2.40497 7.2587847,-2.8052901 0.453484,-0.40032 1.660213,1.4859942 0.04775,2.4010487 C 8.5332315,5.882394
|
||||||
|
8.507351,5.7996113 8.4370292,5.7936859 l 6.3569748,-0.00871 c 0.497046,-0.00958 0.952273,0.5097676 0.94612,1.0738232
|
||||||
|
-0.0053,0.556126 -0.456176,1.0566566 -0.94612,1.0496854 l -4.72435,0 c 0.01307,0.1149374 0.0244,0.2281319 0.03721,0.3498661
|
||||||
|
l 5.952195,0 c 0.494517,-0.00871 0.947906,0.5066305 0.940795,1.0679848 z`).attr({
|
||||||
|
'opacity': 1,
|
||||||
|
'stroke': this.stroke,
|
||||||
|
'fill': this.fillColors
|
||||||
|
});
|
||||||
|
return path1.transform('T' + position.x + ',' + position.y);
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user