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/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg id='canvas' style='width:800px;height:800px'></svg>

JavaScript

//Anchor Experiment
(function () {
    var
        pad = function(n, width, z) {
            z = z || '0';
            n = n + '';
            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
        },
        mapSource = [
            { page: 1, x1: 320, y1: 500, x2: 400, y2: 510, data: 'Subtotal' },
            { page: 1, x1: 450, y1: 500, x2: 480, y2: 510, data: '539.11' },
            { page: 1, x1: 320, y1: 515, x2: 350, y2: 525, data: 'GST' },
            { page: 1, x1: 550, y1: 515, x2: 590, y2: 525, data: ' 13.89' },
            { page: 1, x1: 320, y1: 530, x2: 470, y2: 540, data: 'Balance Due' },
            { page: 1, x1: 650, y1: 530, x2: 680, y2: 540, data: '723.00' }
        ],
        mapTemplate = {
            anchors: [
                { 
                    name: 'FooterAnchor', text: 'Subtotal', partialMatch: true,
                    sourceBBox: { page: 1, x1: 320, y1: 500, x2: 400, y2: 510, data: 'Subtotal' },
                    gridBBox: { x1:440, y1: 490, x2: 690, y2: 550,
                        columns : [
                            { colIndex: 0, x1: 440, x2: 490 },
                            { colIndex: 1, x1: 491, x2: 600 },
                            { colIndex: 2, x1: 601, x2: 690 }
                        ],
                        rules: [
                            { type: 'gridcellextraction', row: 0, col: 0, canonical: 'NetTotal' },
                            { type: 'gridcellextraction', row: 1, col: 1, canonical: 'TaxTotal' },
                            { type: 'gridcellextraction', row: 2, col: 2, canonical: 'GrossTotal' }
                        ]
                    }
                }
            ]
        },
        newSource = [
            { page: 1, x1: 320, y1: 600, x2: 400, y2: 610, data: 'Subtotal' },
            { page: 1, x1: 450, y1: 600, x2: 480, y2: 610, data: '839.11' },
            { page: 1, x1: 320, y1: 615, x2: 350, y2: 625, data: 'GST' },
            { page: 1, x1: 550,...