Handle animationDelay setting after silent remove from core library

jornetsimon · Nov 5, 2020 · ab3b842 · ab3b842
1 parent 4d1f541
commit ab3b842
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 6 deletions.
diff --git a/projects/ng-rough-notation/package.json b/projects/ng-rough-notation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ng-rough-notation",
-	"version": "1.1.2",
+	"version": "1.2.0",
 	"description": "Angular directive wrapper for rough-notation",
 	"author": "Simon Jornet",
 	"keywords": [

diff --git a/projects/ng-rough-notation/src/lib/rough-annotation-config.ts b/projects/ng-rough-notation/src/lib/rough-annotation-config.ts
@@ -0,0 +1,5 @@
+import { RoughAnnotationConfig as OfficialRoughAnnotationConfig } from 'rough-notation/lib/model';
+
+export interface RoughAnnotationConfig extends OfficialRoughAnnotationConfig {
+	animationDelay?: number;
+}
diff --git a/projects/ng-rough-notation/src/lib/rough-notation.directive.ts b/projects/ng-rough-notation/src/lib/rough-notation.directive.ts
@@ -8,9 +8,10 @@ import {
 	Output,
 	Renderer2,
 } from '@angular/core';
-import { RoughAnnotation, RoughAnnotationConfig } from 'rough-notation/lib/model';
+import { RoughAnnotation } from 'rough-notation/lib/model';
 import { RoughNotationService } from './rough-notation.service';
 import { Subscription } from 'rxjs';
+import { RoughAnnotationConfig } from './rough-annotation-config';
 
 @Directive({
 	selector: '[roughNotation]',
@@ -74,7 +75,15 @@ export class RoughNotationDirective implements OnInit, OnDestroy {
 		// Instantiate RoughNotation
 		this.service.instantiate(this.hostElement.nativeElement);
 		if (this._show !== false) {
-			this.setVisibility(true);
+			const animationDelay = this.service.config.animationDelay;
+			if (animationDelay) {
+				// In case an animationDelay is specified
+				setTimeout(() => {
+					this.setVisibility(true);
+				}, animationDelay);
+			} else {
+				this.setVisibility(true);
+			}
 		}
 	}
 

diff --git a/projects/ng-rough-notation/src/lib/rough-notation.module.ts b/projects/ng-rough-notation/src/lib/rough-notation.module.ts
@@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common';
 import { RoughNotationDirective } from './rough-notation.directive';
 import { RoughNotationService } from './rough-notation.service';
 import { defaultConfig } from './utility';
-import { RoughAnnotationConfig } from 'rough-notation/lib/model';
 import { RoughNotationGroupComponent } from './rough-notation-group/rough-notation-group.component';
+import { RoughAnnotationConfig } from './rough-annotation-config';
 
 @NgModule({
 	declarations: [RoughNotationDirective, RoughNotationGroupComponent],

diff --git a/projects/ng-rough-notation/src/lib/rough-notation.service.ts b/projects/ng-rough-notation/src/lib/rough-notation.service.ts
@@ -1,9 +1,10 @@
 import { Inject, Injectable } from '@angular/core';
-import { RoughAnnotation, RoughAnnotationConfig } from 'rough-notation/lib/model';
+import { RoughAnnotation } from 'rough-notation/lib/model';
 import { annotate } from 'rough-notation';
 import { Observable, Subject } from 'rxjs';
 import { filter, scan, tap } from 'rxjs/operators';
 import { getDefaultTypeColor } from './utility';
+import { RoughAnnotationConfig } from './rough-annotation-config';
 
 @Injectable()
 export class RoughNotationService {

diff --git a/projects/ng-rough-notation/src/lib/utility.ts b/projects/ng-rough-notation/src/lib/utility.ts
@@ -1,4 +1,5 @@
-import { RoughAnnotationConfig, RoughAnnotationType } from 'rough-notation/lib/model';
+import { RoughAnnotationType } from 'rough-notation/lib/model';
+import { RoughAnnotationConfig } from './rough-annotation-config';
 
 export const defaultColors: Record<RoughAnnotationType, string> = {
 	highlight: '#FFF176',