@zohodesk/dot/es/AttachmentViewer/utils.js

In this Library, we Provide Some Basic Components to Build Your Application

import { isAudioFile } from "./Attachment";
export class Zoom {
  constructor() {
    const matrix = [1, 0, 0, 1, 0, 0]; // current view transform

    this.m = matrix; // alias 

    this.scale = 1; // current scale

    this.pos = {
      x: 0,
      y: 0
    }; // current position of origin

    this.dirty = true;
  }

  applyTo(el) {
    const {
      dirty,
      m
    } = this;

    if (dirty) {
      this.update();
    }

    el.style.transform = `matrix(${m[0]},${m[1]},${m[2]},${m[3]},${m[4]},${m[5]})`;
    el.style.transformOrigin = '0 0';
  }

  update() {
    // m[4], m[5] - need to set transforms based on positions. Currently set to 0 to zoom based on center
    const {
      m,
      scale,
      pos
    } = this;
    this.dirty = false;
    m[3] = m[0] = scale;
    m[2] = m[1] = 0;
    m[4] = pos.x;
    m[5] = pos.y;
  }

  pan(amount) {
    if (this.dirty) {
      this.update();
    }

    this.pos.x += amount.x;
    this.pos.y += amount.y;
    this.dirty = true;
  }

  scaleAt(at, amount) {
    // at in screen coords
    const {
      dirty,
      pos
    } = this;

    if (dirty) {
      this.update();
    }

    this.scale *= amount;
    this.pos.x = at.x - (at.x - pos.x) * amount;
    this.pos.y = at.y - (at.y - pos.y) * amount;
    this.dirty = true;
  }

}
;
export class ZoomEvent {
  constructor() {
    this.pos = [];
  }

  on(dir, ele, zoom, event) {
    if (dir === 'in') {
      const x = event.pageX - ele.width / 2;
      const y = event.pageY - ele.height / 2;
      this.pos.push({
        x,
        y
      });
      zoom.scaleAt({
        x,
        y
      }, 1.6);
      zoom.applyTo(ele);
    } else if (this.pos.length) {
      const {
        x,
        y
      } = this.pos.pop();
      zoom.scaleAt({
        x,
        y
      }, 1 / 1.6);
      zoom.applyTo(ele);
    }

    event.preventDefault();
  }

}
export function checkImageValidity(src) {
  return new Promise(resolve => {
    const img = new Image();
    img.src = src;

    img.onload = () => {
      resolve(true);
    };

    img.onerror = () => {
      resolve(false);
    };
  });
}
export function checkAudioUrlValidity(url) {
  return new Promise(resolve => {
    const audio = new Audio(url);

    audio.oncanplaythrough = () => {
      resolve(true);
    };

    audio.onerror = () => {
      resolve(false);
    };
  });
}
;
export function checkFileSourcesValidation(_ref) {
  let {
    fileName,
    viewURL
  } = _ref;

  if (isAudioFile(fileName)) {
    const audioValidityPromise = checkAudioUrlValidity(viewURL);
    return audioValidityPromise.then(isURLValid => ({
      isViewURLValid: isURLValid,
      canZoom: false
    }));
  } else {
    const imageValidityPromise = checkImageValidity(viewURL);
    return imageValidityPromise.then(isURLValid => ({
      isViewURLValid: isURLValid,
      canZoom: isURLValid
    }));
  }
}