fix(editor): zooming options will be highlighted

packages/xlayers/src/app/editor/editor.component.html

@@ -21,6 +21,7 @@
           [disabled]="zoomLevel >= 3"
           matTooltip="Zoom In"
           mat-button
+          [color]="zoomIn ? 'warn' : ''"
           (click)="ZoomIn()"
         >
           <mat-icon>zoom_in</mat-icon>
@@ -29,13 +30,15 @@
           [disabled]="zoomLevel <= 0.1"
           matTooltip="Zoom Out"
           mat-button
+          [color]="zoomOut ? 'warn' : ''"
           (click)="ZoomOut()"
         >
           <mat-icon>zoom_out</mat-icon>
         </button>
         <button
           matTooltip="Zoom Reset"
           mat-button
+          [color]="resetZoom ? 'warn' : ''"
           (click)="ZoomReset()"
         >
           <mat-icon>search</mat-icon>

packages/xlayers/src/app/editor/editor.component.spec.ts

@@ -1,23 +1,74 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatMenuModule } from '@angular/material/menu';
-import { XStore } from '@app/core/state/state.mock';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { UiState } from '@app/core/state';
 import { WINDOW_PROVIDERS } from '@app/core/window.service';
 import { NgxsModule } from '@ngxs/store';
 import { EditorComponent } from './editor.component';
 
 describe('EditorComponent', () => {
-  beforeEach(async(() => {
+  let fixture: ComponentFixture<EditorComponent>;
+  let component: EditorComponent;
+
+  beforeEach(() => {
     TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
-      imports: [MatMenuModule, NgxsModule.forRoot([XStore])],
+      imports: [MatMenuModule, MatSnackBarModule, NgxsModule.forRoot([UiState])],
       declarations: [EditorComponent],
       providers: [WINDOW_PROVIDERS]
     }).compileComponents();
-  }));
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(EditorComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
+
+    jest.useFakeTimers();
+    fixture = TestBed.createComponent(EditorComponent);
+    component = fixture.debugElement.componentInstance;
+    jest.setTimeout(10);
+
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set zoom in highlight option when zoomed in', () => {
+    fixture.detectChanges();
+    expect(component.zoomIn).toBeFalsy();
+    component.ZoomIn();
+    expect(component.zoomIn).toBeTruthy();
+  });
+
+  it('should unset zoom in highlight option when below our on reset level', () => {
+    fixture.detectChanges();
+    component.ZoomIn();
+    component.ZoomIn();
+    expect(component.zoomIn).toBeTruthy();
+    component.ZoomReset();
+    expect(component.zoomIn).toBeFalsy();
+  });
+
+  it('should set zoom out highlight option when zoomed out', () => {
+    fixture.detectChanges();
+    expect(component.zoomOut).toBeFalsy();
+    component.ZoomOut();
+    expect(component.zoomOut).toBeTruthy();
+  });
+
+  it('should unset zoom out highlighting option when above our on reset level', () => {
+    fixture.detectChanges();
+    component.ZoomOut();
+    component.ZoomOut();
+    expect(component.zoomOut).toBeTruthy();
+    component.ZoomReset();
+    expect(component.zoomOut).toBeFalsy();
+  });
+
+
+  it('should unset highlighting options when we are on reset level', () => {
+    component.zoomIn = true;
+    component.zoomOut = true;
+    fixture.detectChanges();
+    component.ZoomReset();
+    expect(component.zoomOut).toBeFalsy();
+    expect(component.zoomIn).toBeFalsy();
+  });
 });

packages/xlayers/src/app/editor/editor.component.ts

@@ -27,10 +27,14 @@ import { PreviewBadgeService } from './preview-badge.service';
   styleUrls: ['./editor.component.css']
 })
 export class EditorComponent implements OnInit {
+  DEFAULT_TIMEOUT = 500;
   currentPage: SketchMSLayer;
   currentLayer: SketchMSLayer;
   sketchPages: Array<SketchMSPage>;
   wireframe: boolean;
+  zoomIn: boolean;
+  zoomOut: boolean;
+  resetZoom: boolean;
   preview: boolean;
   enabled: boolean;
   colors: {
@@ -62,7 +66,7 @@ export class EditorComponent implements OnInit {
     private readonly store: Store,
     private readonly exporter: ExportStackblitzService,
     private readonly badgeService: PreviewBadgeService
-  ) {}
+  ) { }
 
   ngOnInit() {
 
@@ -93,6 +97,8 @@ export class EditorComponent implements OnInit {
     });
     this.store.select(UiState.zoomLevel).subscribe(zoomLevel => {
       this.zoomLevel = zoomLevel;
+      this.zoomIn = zoomLevel > 1;
+      this.zoomOut = zoomLevel < 1;
     });
     this.store.select(UiState.is3dView).subscribe(is3dView => {
       this.is3dView = is3dView;
@@ -175,10 +181,14 @@ export class EditorComponent implements OnInit {
 
   ZoomOut() {
     this.store.dispatch(new ZoomOut());
+
   }
 
   ZoomReset() {
+    this.resetZoom = !this.resetZoom;
+    setTimeout(() => this.resetZoom = !this.resetZoom, this.DEFAULT_TIMEOUT);
     this.store.dispatch(new ZoomReset());
+
   }
 
   toggle3d() {