JSFiddle - React, Tailwind, and code Playground

by jamesdh

HTML

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head>
    <body>
        Use mousewheel to zoom
    <div id="paper"></div>
    </body>
</html>

CSS

body{padding:10px;overflow:hidden;background:#dcdcdc}
#paper {width:100%;height:300px;border:1px solid;background:#fff}

JavaScript

var paper = Raphael('paper');
    paper.setViewBox(0,0,paper.width,paper.height);
var c = paper.rect(0,0,50,50).attr({'fill':'#e0e0e0'});
    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 canvasID = "#paper";
var startX,startY;
var mousedown = false;
var dX,dY;
var oX = 0, oY = 0, oWidth = viewBoxWidth, oHeight = viewBoxHeight;
var viewBox = paper.setViewBox(oX, oY, viewBoxWidth, viewBoxHeight);
viewBox.X = oX;
viewBox.Y = oY;
var vB = paper.rect(viewBox.X,viewBox.Y,viewBoxWidth,viewBoxHeight)
    .attr({stroke: "#009", "stroke-width": 3});;


    /** This is high-level function.
     * It must react to delta being more/less than zero.
     */
    function handle(delta) {
        vBHo = viewBoxHeight;
        vBWo = viewBoxWidth;
        if (delta < 0) {
        viewBoxWidth *= 0.95;
        viewBoxHeight*= 0.95;
        }
        else {
        viewBoxWidth *= 1.05;
        viewBoxHeight *= 1.05;
        }
/*
        vB.attr({
          x: viewBox.X,
          y: viewBox.Y,
          width: viewBoxWidth,
          height: viewBoxHeight
        });
 */
                        
  viewBox.X -= (viewBoxWidth - vBWo) / 2;
  viewBox.Y -= (viewBoxHeight - vBHo) / 2;          paper.setViewBox(viewBox.X,viewBox.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.
...