JSFiddle - React, Tailwind, and code Playground

by Jimmy Chandra

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/lumen/bootstrap.min.css">
<div class='container'>
    <div class='page-header'>
        <h1>Invoice Mapper</h1>
    </div>
    <div class='row'>
        <div class='col-md-8'>
            <div class='panel panel-default'>
                <div class='panel-heading'>
                     <h3 class='panel-title'>PDF Rendering</h3>
                </div>
                <div class='panel-body'>
                    <ul class='pager'>
                        <li><span class='glyphicon glyphicon-backward'></span></li>
                        <li><span class='glyphicon glyphicon-forward'></span></li>
                    </ul>
                    <div id='canvas' style='width:480px;height:640px;margin:0 auto'></div>
                </div>
            </div>
        </div>
        <div class='col-md-4'>
            <div class='panel panel-default' id='footerAnchorPanel'>
                <div class='panel-heading'>
                     <h3 class='panel-title'>Footer Anchor</h3>

                </div>
                <div class='panel-body'>
                    <div class="form-group">
                        <label for="anchoredRegionSelectButton">Select anchored region</label>
                        <div class='input-group '> <span class='input-group-btn'>
                                <button class='btn btn-default' id='anchoredRegionSelectButton' data-bind='click:pickRegion'><span class='glyphicon glyphicon-screenshot'></span>
                      ...

JavaScript

(function () {
    //ViewBag module
    var ViewBag = (function (udef) {
        return function () {
            return {};
        };
    }());

    //Rubberband module
    var Rubberband = (function (udef) {
        var ctor = function (drawingContext) {
            var self = this;
            self.selection = udef;
            self.isSelectionShown = false;

            var ctx = drawingContext,
                overlay = udef,
                rubberbandSvg = udef,
                selectionSvg = udef,
                callbackFn = udef,
                ensureOverlayExist = function () {
                    if (overlay === udef) {
                        overlay = ctx.rect(0, 0, ctx.width, ctx.height)
                            .attr({
                            'stroke': 'none',
                                'fill': '#fff',
                                'fill-opacity': 0,
                                'cursor': 'crosshair'
                        });
                    }

                    return overlay;
                },
                removeOverlay = function () {
                    if (overlay !== udef) {
                        overlay.undrag();
                        overlay.remove();
                        overlay = udef;
                    }
                },
                dragStart = function (x, y) {
                    if (rubberbandSvg !== udef) rubberbandSvg.remove();

                    var po = $('#canvas').offset();
                    x -= po.left;
                    y -= po.top;

                    rubberbandSvg = ctx.rect(x, y, 0, 0)
                        .attr({
                        'stroke': '#f00',
                            'fill': '#f00',
                            'fill-opacity': 0.05,
                            'stroke-opacity': 0.5,
                            'stroke-width': '1',
                            'stroke-dasharray': '-'
                    })
                        .data('ox', x)
          ...