How zoom works?

Authors:Zhicheng Wang

• html
• ts
• scss
• spec.ts

<div class="playground">
  <div class="active-rect">
    <img (uiMeasure)="zoom.activeRect.copyFrom($event.offsetRect);zoom.activeViewport.limitTo($event.offsetRect)"
         src="../../../assets/zoom/small.jpg">
    <div (uiMeasure)="zoom.activeViewport.copyFrom($event.offsetRect)" [style.left.px]="zoom.activeViewport.left"
         [style.top.px]="zoom.activeViewport.top"
         class="viewport"></div>
    <div (mousemove)="zoom.activeViewport.centerTo($event.offsetX, $event.offsetY);zoom.update()"
         class="overlay"></div>
  </div>
  <div [style.height.px]="zoom.passiveViewport.height" [style.width.px]="zoom.passiveViewport.width"
       class="passive-rect">
    <img (uiMeasure)="zoom.passiveRect.copyFrom($event.offsetRect)" [style.left.px]="-zoom.passiveViewport.left"
         [style.top.px]="-zoom.passiveViewport.top" src="../../../assets/zoom/large.jpg"/>
  </div>
</div>