JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<div id="map"></div>

JavaScript

/** Requires:
 *  - raphael.js
 */
if(!window.ESi)
/** Namespace for ESi JS objects. */
window.ESi = {};

if(!Object.append)
/** Append key-values to `original` object. */
Object.append = function(original /*, other objects... */) {
    for (var i = 1, l = arguments.length; i < l; i++) {
        var extended = arguments[i] || {};
        for (var key in extended) original[key] = extended[key];
    }
    return original;
};

/** View all events which are fired. */
eve.on('ESi.*', function(){console.log('event:', eve.nt(), this, arguments);});

eve.on('ESi.StatusMap.labeling.*', function(attr){
    Object.append(attr, this.data('label'), { text: this.data('label-text') });
    attr.x = this.data('label-x');
    attr.y = this.data('label-y');
});

/** Add label to Raphael `Element` object. */
Raphael.el.label = function(attr) {
    attr = Object.append({}, attr);
    var labelElement = this.data('label-element'),
        bb = this.getBBox();
    eve('ESi.StatusMap.labeling.' + this.id, this, attr);
    if('x' in attr)
        attr.x = bb.x + bb.width  * (isNaN(attr.x) ? .5 : attr.x);
    if('y' in attr)
        attr.y = bb.y + bb.height * (isNaN(attr.y) ? .5 : attr.y);        
    if(!labelElement){
        labelElement = this.paper.text();
        this.data('label-element', labelElement);
        labelElement.parent = this;
    }
    labelElement.attr(attr);
    eve('ESi.StatusMap.labeled.' + this.id, this, attr);
    return labelElement;
};

/** Add label to `Element`s of Raphael `Set`. */
Raphael.st.label = function(lbl){
    var lbl = Object.append({}, lbl, { fromSet: true });
    eve('ESi.StatusMap.set.labeling', this, lbl);
    this.forEach(function(el){
        return el.label(lbl);
    });
    eve('ESi.StatusMap.set.labeled', this, lbl);
    return this;
};
/** Construct `ESi.StatusMap`. */
ESi.StatusMap = function(id, mapData) {
    // in case user forgets to use `new` when constructing:
    if (!(this instanceof ESi.StatusMap)) return new...