diff --git a/ng2-components/ng2-activiti-analytics/index.ts b/ng2-components/ng2-activiti-analytics/index.ts index 86814b09ee..c7dc7a3ae4 100644 --- a/ng2-components/ng2-activiti-analytics/index.ts +++ b/ng2-components/ng2-activiti-analytics/index.ts @@ -22,6 +22,7 @@ import { AnalyticsReportListComponent } from './src/components/analytics-report- import { AnalyticsReportParametersComponent } from './src/components/analytics-report-parameters.component'; import { AnalyticsComponent } from './src/components/analytics.component'; import { AnalyticsService } from './src/services/analytics.service'; +import { RaphaelService } from './src/components/raphael/raphael.service'; import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts'; import { WIDGET_DIRECTIVES } from './src/components/widgets/index'; @@ -58,7 +59,8 @@ export const ANALYTICS_PROVIDERS: any[] = [ ...CHART_DIRECTIVES ], providers: [ - ...ANALYTICS_PROVIDERS + ...ANALYTICS_PROVIDERS, + RaphaelService ], exports: [ ...ANALYTICS_DIRECTIVES diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.html index 896baac631..d965900f2d 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.ts index 1ff911576a..db510db849 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.ts @@ -24,9 +24,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor styleUrls: ['./diagram-event.component.css'] }) export class DiagramEventComponent { - @Input() - paper: any; - @Input() data: any; diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.html index a03d77ac7d..985c72c443 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.ts index 62605adb6a..ff5238467a 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.ts @@ -24,9 +24,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor styleUrls: ['./diagram-sequence-flow.component.css'] }) export class DiagramSequenceFlowComponent { - @Input() - paper: any; - @Input() flow: any; diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html index 52ccf789c3..886c378df5 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html @@ -1,2 +1,2 @@ - - \ No newline at end of file + + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts index cdcc942783..5be4e5fcc7 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts @@ -35,12 +35,6 @@ export class DiagramTaskComponent { @Input() data: any; - @Input() - type: any; - - @Input() - paper: any; - options: any = {}; @Output() diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html index 6d1cdb38c3..8dace98ec9 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html @@ -2,24 +2,24 @@
- +
- +
- +
- +
diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.ts index f3cdd4dee9..a182f9eaa5 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.ts @@ -19,8 +19,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor import { AlfrescoTranslationService } from 'ng2-alfresco-core'; import { AnalyticsService } from '../../services/analytics.service'; -declare let Raphael: any; - @Component({ moduleId: module.id, selector: 'diagram', @@ -39,9 +37,6 @@ export class DiagramComponent { onError = new EventEmitter(); private diagram: any; - private paper: any; - private ctx: any; - private element: ElementRef; constructor(elementRef: ElementRef, @@ -54,8 +49,6 @@ export class DiagramComponent { } ngOnInit() { - this.ctx = this.element.nativeElement; - this.refresh(); this.getProcessDefinitionModel(this.processDefinitionId); } @@ -73,26 +66,4 @@ export class DiagramComponent { ); } } - - public getPaperBuilder(ctx: any): any { - if (typeof Raphael === 'undefined') { - throw new Error('ng2-charts configuration issue: Embedding Chart.js lib is mandatory'); - } - let paper = new Raphael(ctx, 583, 344.08374193550003); - paper.setViewBox(0, 0, 583, 344.08374193550003, false); - paper.renderfix(); - return paper; - } - - private refresh(): any { - this.ngOnDestroy(); - this.paper = this.getPaperBuilder(this.ctx); - } - - public ngOnDestroy(): any { - if (this.paper) { - this.paper.clear(); - this.paper = void 0; - } - } } diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-base.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-base.ts index b7d4ff5432..6e8292d754 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-base.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-base.ts @@ -15,56 +15,18 @@ * limitations under the License. */ -import { - OnDestroy, - OnInit, - Input, - ElementRef -} from '@angular/core'; +import { ElementRef } from '@angular/core'; +import { RaphaelService } from './raphael.service'; -declare let Raphael: any; +export class RaphaelBase { -export class RaphaelBase implements OnDestroy, OnInit { - @Input() paper: any; - private ctx: any; - - private initFlag: boolean = false; - private element: ElementRef; - public constructor(element: ElementRef) { + public constructor(element: ElementRef, + private raphaelService: RaphaelService) { this.element = element; - } - - public ngOnInit(): any { - if (!this.paper) { - this.ctx = this.element.nativeElement; - this.initFlag = true; - this.refresh(); - } - } - - public ngOnDestroy(): any { - if (this.paper) { - this.paper.clear(); - this.paper = void 0; - } - } - - public getPaperBuilder(ctx: any): any { - if (typeof Raphael === 'undefined') { - throw new Error('ng2-charts configuration issue: Embedding Chart.js lib is mandatory'); - } - let paper = new Raphael(ctx, 583, 344.08374193550003); - paper.setViewBox(0, 0, 583, 344.08374193550003, false); - paper.renderfix(); - return paper; - } - - private refresh(): any { - this.ngOnDestroy(); - this.paper = this.getPaperBuilder(this.ctx); + this.paper = this.raphaelService.getInstance(element); } } diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-circle.component.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-circle.component.ts index c3fe256688..a1a81edebc 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-circle.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-circle.component.ts @@ -18,6 +18,7 @@ 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-circle'}) export class RaphaelCircleDirective extends RaphaelBase implements OnInit { @@ -36,8 +37,9 @@ export class RaphaelCircleDirective extends RaphaelBase implements OnInit { @Output() onError = new EventEmitter(); - constructor(public elementRef: ElementRef) { - super(elementRef); + constructor(public elementRef: ElementRef, + raphaelService: RaphaelService) { + super(elementRef, raphaelService); } ngOnInit() { diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-flow-arrow.component.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-flow-arrow.component.ts index c2277ef508..7e4a66d8ec 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-flow-arrow.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-flow-arrow.component.ts @@ -17,6 +17,7 @@ import { Directive, OnInit, ElementRef, Input, Output, EventEmitter } from '@angular/core'; import { RaphaelBase } from './raphael-base'; +import { RaphaelService } from './raphael.service'; declare let Raphael: any; declare let Polyline: any; @@ -35,8 +36,9 @@ export class RaphaelFlowArrowDirective extends RaphaelBase implements OnInit { ARROW_WIDTH = 4; SEQUENCEFLOW_STROKE = 1.5; - constructor(public elementRef: ElementRef) { - super(elementRef); + constructor(public elementRef: ElementRef, + raphaelService: RaphaelService) { + super(elementRef, raphaelService); } ngOnInit() { diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts index eff4571c83..0fbff9cf53 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts @@ -17,9 +17,11 @@ 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-rect'}) -export class RaphaelRectDirective implements OnInit { +export class RaphaelRectDirective extends RaphaelBase implements OnInit { @Input() paper: any; @@ -41,7 +43,10 @@ export class RaphaelRectDirective implements OnInit { @Output() onError = new EventEmitter(); - constructor(public elementRef: ElementRef) {} + constructor(public elementRef: ElementRef, + raphaelService: RaphaelService) { + super(elementRef, raphaelService); + } ngOnInit() { console.log(this.elementRef); diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-text.component.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-text.component.ts index 66fb7751c1..45ecdae269 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-text.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-text.component.ts @@ -17,9 +17,11 @@ 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-text'}) -export class RaphaelTextDirective implements OnInit { +export class RaphaelTextDirective extends RaphaelBase implements OnInit { @Input() paper: any; @@ -32,7 +34,10 @@ export class RaphaelTextDirective implements OnInit { @Output() onError = new EventEmitter(); - constructor(public elementRef: ElementRef) {} + constructor(public elementRef: ElementRef, + raphaelService: RaphaelService) { + super(elementRef, raphaelService); + } ngOnInit() { console.log(this.elementRef); diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael.service.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael.service.ts new file mode 100644 index 0000000000..85f1e127db --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael.service.ts @@ -0,0 +1,60 @@ +/*! + * @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 { Injectable } from '@angular/core'; + +declare let Raphael: any; + +@Injectable() +export class RaphaelService { + + paper: any; + private ctx: any; + + constructor() { + } + + public getInstance(element: any): any { + if (!this.paper) { + this.ctx = element.nativeElement; + this.refresh(); + } + return this.paper; + } + + private refresh(): any { + this.ngOnDestroy(); + this.paper = this.getPaperBuilder(this.ctx); + } + + public getPaperBuilder(ctx: any): any { + if (typeof Raphael === 'undefined') { + throw new Error('ng2-charts configuration issue: Embedding Chart.js lib is mandatory'); + } + let paper = new Raphael(ctx, 583, 344.08374193550003); + paper.setViewBox(0, 0, 583, 344.08374193550003, false); + paper.renderfix(); + return paper; + } + + public ngOnDestroy(): any { + if (this.paper) { + this.paper.clear(); + this.paper = void 0; + } + } +}