JSFiddle - React, Tailwind, and code Playground

by cancerbero_sgx

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<p>Drag the colored points for editing the path and look at the console</p>

CSS

p {margin-left: 100px; font-size: 0.8em; font-weight: bold;  }

JavaScript

//editor path extension code 

/* path editor extension 
 * a path editor for be able of edit the path commands dragging its points.
 * 
 * TODO: 
 * -visual feedback of the path segment / command being edited. 
 * 
 * @author: sgurin 
 */
(function(){
    /**
     * installs a new path editor on this path. 
     * 
     * cfg is an object with following parameters :
     * commandEditors - colors and names for each path cmd
     * dragThrottle - the dragThrottle in ms - default 80.
     * 
     */
    Raphael.el.installPathEditor = function(cfg) {
        cfg = !cfg ? {} : cfg; 
        if(!this.type || this.type!="path" || !this.attr("path")) 
            return; 
        var pathObject = Raphael.parsePathString(this.attr("path")); 
        
        var context = {
            "pathObject": pathObject, 
            "shape": this, 
            "commandEditors" : cfg.commandEditors ? cfg.commandEditors : commandEditors, 
            "dragThrottle": cfg.dragThrottle ? dragThrottle : 80
        }
        var editorSet = this.paper.set(), 
            legendSet=this.paper.set(); 
        for ( var i = 0; i < pathObject.length; i++) {
            var cmd = pathObject[i]; 
            var cmdEditShape = buildPathCmdEditorFor(context, cmd); 
        }
        
        //build legend set
        var y = 10; 
        for(var i in context.commandEditors) {
            paper.circle(10, y, 5).attr({fill: context.commandEditors[i]["bgColor"]}); 
            paper.text(30, y, context.commandEditors[i]["description"]).attr({"text-anchor": "start"}); 
            y+=25; 
        }
        return {
            editor: editorSet, 
            legend: legendSet, 
            doCreateNewCommand: function(){
            }
        }; 
    }; 
    //default editor config
    var commandEditors = {
        "L": {"bgColor": "#ededed", "textColor": "black", "name": "L", description: "line to"},
        "M": {"bgColor": "#111111", "textColor": "white", "name": "M", description: "move...