fix(cropper): cropper don't work until change

A-l-y-l-e · Apr 7, 2020 · 9a009f6 · 9a009f6
1 parent 912889c
commit 9a009f6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 21 deletions.
diff --git a/src/api/docs/demos/cropper-dialog.ts.html b/src/api/docs/demos/cropper-dialog.ts.html
@@ -1,4 +1,4 @@
-<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> Component<span class="tt18 ttae">,</span> ChangeDetectionStrategy<span class="tt18 ttae">,</span> Inject<span class="tt18 ttae">,</span> ViewChild<span class="tt18 ttae">,</span> AfterViewInit<span class="tt18 ttae">,</span> NgZone <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@angular/core'</span><span class="tt18 ttae">;</span>
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> Component<span class="tt18 ttae">,</span> ChangeDetectionStrategy<span class="tt18 ttae">,</span> Inject<span class="tt18 ttae">,</span> ViewChild<span class="tt18 ttae">,</span> AfterViewInit <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@angular/core'</span><span class="tt18 ttae">;</span>
 <span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> StyleRenderer<span class="tt18 ttae">,</span> WithStyles<span class="tt18 ttae">,</span> lyl<span class="tt18 ttae">,</span> ThemeRef<span class="tt18 ttae">,</span> ThemeVariables <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui'</span><span class="tt18 ttae">;</span>
 <span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> LyDialogRef<span class="tt18 ttae">,</span> <span class="tt18 ttbb">LY_DIALOG_DATA</span> <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/dialog'</span><span class="tt18 ttae">;</span>
 <span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> <span class="tt18 ttbb">STYLES</span> <span class="tt18 tt1j">as</span> <span class="tt18 ttbb">SLIDER_STYLES</span> <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/slider'</span><span class="tt18 ttae">;</span>
@@ -8,7 +8,6 @@
   ImgCropperEvent<span class="tt18 ttae">,</span>
   ImgCropperErrorEvent
 <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/image-cropper'</span><span class="tt18 ttae">;</span>
-<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> take <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'rxjs/operators'</span><span class="tt18 ttae">;</span>
 
 <span class="tt18 tt1j">const</span> <span class="tt18 function-variable tta3">STYLES</span> <span class="tt18 ttb0">=</span> <span class="tt18 ttae">(</span><span class="tt18 parameter">_theme<span class="tt18 ttb0">:</span> ThemeVariables<span class="tt18 ttae">,</span> ref<span class="tt18 ttb0">:</span> ThemeRef</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">=></span> <span class="tt18 ttae">&#123;</span>
   ref<span class="tt18 ttae">.</span><span class="tt18 tta3">renderStyleSheet</span><span class="tt18 ttae">(</span><span class="tt18 ttbb">SLIDER_STYLES</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span>
@@ -55,14 +54,14 @@
   <span class="tt18 tt1j">constructor</span><span class="tt18 ttae">(</span>
     <span class="tt18 parameter">@<span class="tt18 tta3">Inject</span><span class="tt18 ttae">(</span><span class="tt18 ttbb">LY_DIALOG_DATA</span><span class="tt18 ttae">)</span> <span class="tt18 tt1j">private</span> event<span class="tt18 ttb0">:</span> Event<span class="tt18 ttae">,</span>
     <span class="tt18 tt1j">readonly</span> sRenderer<span class="tt18 ttb0">:</span> StyleRenderer<span class="tt18 ttae">,</span>
-    <span class="tt18 tt1j">public</span> dialogRef<span class="tt18 ttb0">:</span> LyDialogRef<span class="tt18 ttae">,</span>
-    <span class="tt18 tt1j">private</span> _ngZone<span class="tt18 ttb0">:</span> NgZone</span>
+    <span class="tt18 tt1j">public</span> dialogRef<span class="tt18 ttb0">:</span> LyDialogRef</span>
   <span class="tt18 ttae">)</span> <span class="tt18 ttae">&#123;</span> <span class="tt18 ttae">&#125;</span>
 
   <span class="tt18 tta3">ngAfterViewInit</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttae">&#123;</span>
-    <span class="tt18 tt1j">this</span><span class="tt18 ttae">.</span>_ngZone<span class="tt18 ttae">.</span>onStable
-    <span class="tt18 ttae">.</span><span class="tt18 tta3">pipe</span><span class="tt18 ttae">(</span><span class="tt18 tta3">take</span><span class="tt18 ttae">(</span><span class="tt18 ttap">1</span><span class="tt18 ttae">)</span><span class="tt18 ttae">)</span>
-    <span class="tt18 ttae">.</span><span class="tt18 tta3">subscribe</span><span class="tt18 ttae">(</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">=></span> <span class="tt18 tt1j">this</span><span class="tt18 ttae">.</span>cropper<span class="tt18 ttae">.</span><span class="tt18 tta3">selectInputEvent</span><span class="tt18 ttae">(</span><span class="tt18 tt1j">this</span><span class="tt18 ttae">.</span>event<span class="tt18 ttae">)</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span>
+    <span class="tt18 tt3o">// Load image when dialog animation has finished</span>
+    <span class="tt18 tt1j">this</span><span class="tt18 ttae">.</span>dialogRef<span class="tt18 ttae">.</span>afterOpened<span class="tt18 ttae">.</span><span class="tt18 tta3">subscribe</span><span class="tt18 ttae">(</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">=></span> <span class="tt18 ttae">&#123;</span>
+      <span class="tt18 tt1j">this</span><span class="tt18 ttae">.</span>cropper<span class="tt18 ttae">.</span><span class="tt18 tta3">selectInputEvent</span><span class="tt18 ttae">(</span><span class="tt18 tt1j">this</span><span class="tt18 ttae">.</span>event<span class="tt18 ttae">)</span><span class="tt18 ttae">;</span>
+    <span class="tt18 ttae">&#125;</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span>
   <span class="tt18 ttae">&#125;</span>
 
   <span class="tt18 tta3">onCropped</span><span class="tt18 ttae">(</span><span class="tt18 parameter">e<span class="tt18 ttb0">:</span> ImgCropperEvent</span><span class="tt18 ttae">)</span> <span class="tt18 ttae">&#123;</span>

diff --git a/src/app/docs/components/image-cropper-demo/cropper-with-dialog/cropper-dialog.ts b/src/app/docs/components/image-cropper-demo/cropper-with-dialog/cropper-dialog.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Inject, ViewChild, AfterViewInit, NgZone } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Inject, ViewChild, AfterViewInit } from '@angular/core';
 import { StyleRenderer, WithStyles, lyl, ThemeRef, ThemeVariables } from '@alyle/ui';
 import { LyDialogRef, LY_DIALOG_DATA } from '@alyle/ui/dialog';
 import { STYLES as SLIDER_STYLES } from '@alyle/ui/slider';
@@ -8,7 +8,6 @@ import {
   ImgCropperEvent,
   ImgCropperErrorEvent
 } from '@alyle/ui/image-cropper';
-import { take } from 'rxjs/operators';
 
 const STYLES = (_theme: ThemeVariables, ref: ThemeRef) => {
   ref.renderStyleSheet(SLIDER_STYLES);
@@ -55,14 +54,14 @@ export class CropperDialog implements WithStyles, AfterViewInit {
   constructor(
     @Inject(LY_DIALOG_DATA) private event: Event,
     readonly sRenderer: StyleRenderer,
-    public dialogRef: LyDialogRef,
-    private _ngZone: NgZone
+    public dialogRef: LyDialogRef
   ) { }
 
   ngAfterViewInit() {
-    this._ngZone.onStable
-    .pipe(take(1))
-    .subscribe(() => this.cropper.selectInputEvent(this.event));
+    // Load image when dialog animation has finished
+    this.dialogRef.afterOpened.subscribe(() => {
+      this.cropper.selectInputEvent(this.event);
+    });
   }
 
   onCropped(e: ImgCropperEvent) {

diff --git a/src/lib/image-cropper/image-cropper.ts b/src/lib/image-cropper/image-cropper.ts
@@ -404,8 +404,7 @@ export class LyImageCropper implements OnDestroy {
 
           this.cd.markForCheck();
         },
-        (error) => {
-          console.log(error);
+        () => {
           const cropEvent: ImgCropperErrorEvent = {
             name: fileName,
             size: fileSize,
@@ -663,9 +662,7 @@ export class LyImageCropper implements OnDestroy {
 
       img.onerror = err => observer.error(err);
       img.onabort = err => observer.error(err);
-      img.onload = () => {
-        observer.next(null!);
-      };
+      img.onload = () => observer.next(null!);
     })
     .pipe(take(1), takeUntil(this._destroy))
     .subscribe(
@@ -679,9 +676,8 @@ export class LyImageCropper implements OnDestroy {
           .onStable
           .pipe(take(1), takeUntil(this._destroy))
           .subscribe(
-            () => this._ngZone.run(() => setTimeout(() => this._positionImg(cropEvent, fn), 0))
+            () => setTimeout(() => this._ngZone.run(() => this._positionImg(cropEvent, fn)))
           );
-
       },
       () => {
         (cropEvent as ImgCropperErrorEvent).error = ImgCropperError.Type;