JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<html>
    
    <head>
        <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/300aa589f5a0ba7fce667cd62c7cdda0bd5ad904/raphael-min.js"></script>
        <style type="text/css">
            body {
                overflow:hidden;
            }
            #paper {
                width:100%;
                height:500px;
                border:1px solid;
            }
        </style>
    </head>
    
    <body>
        <div id="paper"></div>
    </body>

</html>

JavaScript

var paper = Raphael('paper');
	paper.setViewBox(0, 0, paper.width, paper.height);
	//var c = paper.rect(30, 30, 300, 300);
	var WIDTH = 10;
	var HEIGHT = 10;
	for (var i = 0; i < 10; i++)
	 for (var j = 0; j < 10; j++)
	 paper.rect(i * WIDTH, j * HEIGHT, WIDTH, HEIGHT);

	//c.translate((paper.width / 2) - (c.attr('width') / 2), (paper.height / 2) - (c.attr('height') / 2));
	var viewBoxWidth = paper.width;
	var viewBoxHeight = paper.height;
	var scale = 1;
	/** This is high-level function.
	 * It must react to delta being more/less than zero.
	 */
	function handle(delta, mousex, mousey) {

	    if (delta < 0) {
	        viewBoxWidth *= 0.95;
	        viewBoxHeight *= 0.95;
	    } else {
	        viewBoxWidth *= 1.05;
	        viewBoxHeight *= 1.05;
	    }
	    scale = paper.width / viewBoxWidth;
	    console.log(scale);
	    // zoom to center
	    x = (paper.width / 2) - (viewBoxWidth / 2);
	    y = (paper.height / 2) - (viewBoxHeight / 2);
	    // i try to zoom to mouse cursor
	    x = -((mousex - (mousex * scale))) / scale;
	    y = -((mousey - (mousey * scale))) / scale;
	    paper.setViewBox(x, y, viewBoxWidth, viewBoxHeight);
	}

	/** Event handler for mouse wheel event.
	 */
	function wheel(event) {
	    var delta = 0;
	    if (!event) /* For IE. */
	    event = window.event;
	    if (event.wheelDelta) { /* IE/Opera. */
	        delta = event.wheelDelta / 120;
	    } else if (event.detail) { /** Mozilla case. */
	        /** In Mozilla, sign of delta is different than in IE.
	         * Also, delta is multiple of 3.
	         */
	        delta = -event.detail / 3;
	    }
	    /** If delta is nonzero, handle it.
	     * Basically, delta is now positive if wheel was scrolled up,
	     * and negative, if wheel was scrolled down.
	     */
        console.log(event.x + " " + event.y);
	    if (delta) handle(delta, event.x, event.y);
	    /** Prevent default actions caused by mouse wheel.
	     * That might be ugly, but we handle scrolls somehow
	     * anyway, so...