mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-10-01 14:41:32 +00:00
Add event timer component
This commit is contained in:
@@ -2,4 +2,7 @@
|
|||||||
<div *ngSwitchCase="'timer'">
|
<div *ngSwitchCase="'timer'">
|
||||||
<diagram-icon-timer [data]="data"></diagram-icon-timer>
|
<diagram-icon-timer [data]="data"></diagram-icon-timer>
|
||||||
</div>
|
</div>
|
||||||
|
<div *ngSwitchCase="'error'">
|
||||||
|
<diagram-icon-error [data]="data"></diagram-icon-error>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
@@ -0,0 +1,2 @@
|
|||||||
|
<raphael-icon-error [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
|
||||||
|
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-error>
|
@@ -0,0 +1,48 @@
|
|||||||
|
/*!
|
||||||
|
* @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-error',
|
||||||
|
templateUrl: './diagram-icon-error.component.html',
|
||||||
|
styleUrls: ['./diagram-icon-error.component.css']
|
||||||
|
})
|
||||||
|
export class DiagramIconErrorComponent {
|
||||||
|
@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 - 1, y: this.data.y - 1};
|
||||||
|
|
||||||
|
this.options.stroke = 'black';
|
||||||
|
this.options.fillColors = 'none';
|
||||||
|
this.options.strokeWidth = 1;
|
||||||
|
}
|
||||||
|
}
|
@@ -30,6 +30,7 @@ import { DiagramIconScriptTaskComponent } from './diagram-icon-script-task.compo
|
|||||||
import { DiagramIconBusinessRuleTaskComponent } from './diagram-icon-business-rule-task.component';
|
import { DiagramIconBusinessRuleTaskComponent } from './diagram-icon-business-rule-task.component';
|
||||||
import { DiagramContainerIconEventTaskComponent } from './diagram-container-icon-event.component';
|
import { DiagramContainerIconEventTaskComponent } from './diagram-container-icon-event.component';
|
||||||
import { DiagramIconTimerComponent } from './diagram-icon-timer.component';
|
import { DiagramIconTimerComponent } from './diagram-icon-timer.component';
|
||||||
|
import { DiagramIconErrorComponent } from './diagram-icon-error.component';
|
||||||
|
|
||||||
// primitives
|
// primitives
|
||||||
export * from './diagram-icon-service-task.component';
|
export * from './diagram-icon-service-task.component';
|
||||||
@@ -47,6 +48,7 @@ export * from './diagram-icon-script-task.component';
|
|||||||
export * from './diagram-icon-business-rule-task.component';
|
export * from './diagram-icon-business-rule-task.component';
|
||||||
export * from './diagram-container-icon-event.component';
|
export * from './diagram-container-icon-event.component';
|
||||||
export * from './diagram-icon-timer.component';
|
export * from './diagram-icon-timer.component';
|
||||||
|
export * from './diagram-icon-error.component';
|
||||||
|
|
||||||
export const DIAGRAM_ICONS_DIRECTIVES: any[] = [
|
export const DIAGRAM_ICONS_DIRECTIVES: any[] = [
|
||||||
DiagramIconServiceTaskComponent,
|
DiagramIconServiceTaskComponent,
|
||||||
@@ -63,5 +65,6 @@ export const DIAGRAM_ICONS_DIRECTIVES: any[] = [
|
|||||||
DiagramIconScriptTaskComponent,
|
DiagramIconScriptTaskComponent,
|
||||||
DiagramIconBusinessRuleTaskComponent,
|
DiagramIconBusinessRuleTaskComponent,
|
||||||
DiagramContainerIconEventTaskComponent,
|
DiagramContainerIconEventTaskComponent,
|
||||||
DiagramIconTimerComponent
|
DiagramIconTimerComponent,
|
||||||
|
DiagramIconErrorComponent
|
||||||
];
|
];
|
||||||
|
@@ -29,6 +29,7 @@ import { RaphaelIconReceiveDirective } from './raphael-icon-receive.component';
|
|||||||
import { RaphaelIconScriptDirective } from './raphael-icon-script.component';
|
import { RaphaelIconScriptDirective } from './raphael-icon-script.component';
|
||||||
import { RaphaelIconBusinessRuleDirective } from './raphael-icon-business-rule.component';
|
import { RaphaelIconBusinessRuleDirective } from './raphael-icon-business-rule.component';
|
||||||
import { RaphaelIconTimerDirective } from './raphael-icon-timer.component';
|
import { RaphaelIconTimerDirective } from './raphael-icon-timer.component';
|
||||||
|
import { RaphaelIconErrorDirective } from './raphael-icon-error.component';
|
||||||
|
|
||||||
// primitives
|
// primitives
|
||||||
export * from './raphael-icon-service.component';
|
export * from './raphael-icon-service.component';
|
||||||
@@ -45,6 +46,7 @@ export * from './raphael-icon-receive.component';
|
|||||||
export * from './raphael-icon-script.component';
|
export * from './raphael-icon-script.component';
|
||||||
export * from './raphael-icon-business-rule.component';
|
export * from './raphael-icon-business-rule.component';
|
||||||
export * from './raphael-icon-timer.component';
|
export * from './raphael-icon-timer.component';
|
||||||
|
export * from './raphael-icon-error.component';
|
||||||
|
|
||||||
export const RAPHAEL_ICONS_DIRECTIVES: any[] = [
|
export const RAPHAEL_ICONS_DIRECTIVES: any[] = [
|
||||||
RaphaelIconServiceDirective,
|
RaphaelIconServiceDirective,
|
||||||
@@ -60,5 +62,6 @@ export const RAPHAEL_ICONS_DIRECTIVES: any[] = [
|
|||||||
RaphaelIconReceiveDirective,
|
RaphaelIconReceiveDirective,
|
||||||
RaphaelIconScriptDirective,
|
RaphaelIconScriptDirective,
|
||||||
RaphaelIconBusinessRuleDirective,
|
RaphaelIconBusinessRuleDirective,
|
||||||
RaphaelIconTimerDirective
|
RaphaelIconTimerDirective,
|
||||||
|
RaphaelIconErrorDirective
|
||||||
];
|
];
|
||||||
|
@@ -0,0 +1,68 @@
|
|||||||
|
/*!
|
||||||
|
* @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-error'})
|
||||||
|
export class RaphaelIconErrorDirective 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 22.820839,11.171502 L 19.36734,24.58992 L 13.54138,14.281819 L 9.3386512,20.071607
|
||||||
|
L 13.048949,6.8323057 L 18.996148,16.132659 L 22.820839,11.171502 z`).attr({
|
||||||
|
'opacity': 1,
|
||||||
|
'stroke': this.stroke,
|
||||||
|
'fill': this.fillColors
|
||||||
|
});
|
||||||
|
return path1.transform('T' + position.x + ',' + position.y);
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue
Block a user