JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="canvas">
  <h2>Test</h2>
</div>

CSS

body{
  margin: 0;
}

.canvas{
  width: 100vw;
  height: 100vh;
  background: silver;
}

h2{
  display: block;
  width: 200px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}

JavaScript

(function(){
  'use strict';

  var Zoomify = function(options){
    /**
     * @param {string} canvas - canvas selector.
     * @param {number} min - minimum allowed scale
     * @param {number} max - maximum allowed scale
     * @param {boolean} allowCanvasMove - if `false` than default scroll is used
     * @param {function} onchange - on change callback function
     * @param {function} set - set new instance values and update render. method function
    */
     
    var preventOnChangeCall = true;
    
    this.canvas = document.querySelector(options.canvas);

    this.rotation = 0;
    this.gestureStartRotation = 0;
    this.gestureStartScale = 0;
    this.scale = 1;
    this.posX = 0;
    this.posY = 0;
    this.min = options.min || 0;
    this.max = options.max || 10;
    this.allowMove = typeof options.allowCanvasMove === 'boolean' ? options.allowCanvasMove : true;
    this.onchange = typeof options.onchange === 'function' ? options.onchange : function(){};
    this.startX;
    this.startY;

    this.attachEvents();
    
    this.update(null, preventOnChangeCall);
  };

Zoomify.prototype.set = function(options){
	var optionsList = ['scale', 'posX', 'posY', 'startX', 'startY', 'allowMove'],
			preventOnChangeCall = true;
  
  optionsList.map(function(option_name){
  	if(options[option_name]){
    	this[option_name] = options[option_name];
    }
  });
  
  this.update(null, preventOnChangeCall);
};

Zoomify.prototype.update = function(e, preventOnChangeCall){
    window.requestAnimationFrame(() => {
      var scale = Math.max(Math.min(this.max, this.scale), this.min),
          transform;

      this.scale = scale;
      transform = `translate3D(${this.posX}px, ${this.posY}px, 0px) rotate(${this.rotation}deg) scale(${scale})`;

      this.canvas.style.transform = transform;


      if(preventOnChangeCall){return;}

      this.onchange(e, {
        scale: this.scale,
        x: this.posX,
        y: this.posY
      });

    });
  };

 ...