inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create a service that return the paper instance

Browse Source 
Remove paper dependency
This commit is contained in:
mauriziovitale84 2016-10-17 17:39:07 +01:00
parent fb41403717
commit 79988f421d
15 changed files with 99 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ng2-components/ng2-activiti-analytics/index.ts
View File

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

2
ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.html
View File

@ -1 +1 @@
<raphael-circle [paper]="paper" [center]="center" [radius]="radius" [strokeWith]="strokeWidth"></raphael-circle>
<raphael-circle [center]="center" [radius]="radius" [strokeWith]="strokeWidth"></raphael-circle>

3
ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-event.component.ts
View File

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

2
ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.html
View File

@ -1 +1 @@
<raphael-flow-arrow [paper]="paper" [flow]="flow"></raphael-flow-arrow>
<raphael-flow-arrow [flow]="flow"></raphael-flow-arrow>

3
ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-sequence-flow.component.ts
View File

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

4
ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html
View File

@ -1,2 +1,2 @@
<raphael-rect [paper]="paper" [leftCorner]="rect" [width]="data.width" [height]="data.height" [radius]="radius"></raphael-rect>
<raphael-text [paper]="paper" [text]="data.name" [position]="textPosition"></raphael-text>
<raphael-rect [leftCorner]="rect" [width]="data.width" [height]="data.height" [radius]="radius"></raphael-rect>
<raphael-text [text]="data.name" [position]="textPosition"></raphael-text>

6
ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts
View File

@ -35,12 +35,6 @@ export class DiagramTaskComponent {
@Input()
data: any;
@Input()
type: any;
@Input()
paper: any;
options: any = {};
@Output()

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

@ -2,24 +2,24 @@
<div *ngFor="let element of diagram.elements">
<div [ngSwitch]="element.type">
<div *ngSwitchCase="'StartEvent'">
<diagram-event [paper]="paper" [data]="element" [radius]="15" [strokeWidth]="1"></diagram-event>
<diagram-event [data]="element" [radius]="15" [strokeWidth]="1"></diagram-event>
</div>
</div>
<div [ngSwitch]="element.type">
<div *ngSwitchCase="'EndEvent'">
<diagram-event [paper]="paper" [data]="element" [radius]="14" [strokeWidth]="4"></diagram-event>
<diagram-event [data]="element" [radius]="14" [strokeWidth]="4"></diagram-event>
</div>
</div>
<div [ngSwitch]="element.type">
<div *ngSwitchCase="'UserTask'">
<diagram-task [paper]="paper" [data]="element" [type]="element.type"></diagram-task>
<diagram-task [data]="element"></diagram-task>
</div>
</div>
</div>
<div *ngFor="let flow of diagram.flows">
<div [ngSwitch]="flow.type">
<div *ngSwitchCase="'sequenceFlow'">
<diagram-sequence-flow [paper]="paper" [flow]="flow"></diagram-sequence-flow>
<diagram-sequence-flow [flow]="flow"></diagram-sequence-flow>
</div>
</div>
</div>

29
ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.ts
View File

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

50
ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-base.ts
View File

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

6
ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-circle.component.ts
View File

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

6
ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-flow-arrow.component.ts
View File

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

9
ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts
View File

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

9
ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-text.component.ts
View File

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

60
ng2-components/ng2-activiti-analytics/src/components/raphael/raphael.service.ts Normal file
View File

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