JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!doc html>
<header>
    
<script src="http://d3js.org/d3.v3.min.js"></script>

     <div id="header" style="margin-bottom: 0;">
            <div id="mapName"></div>
            <div id="signUp"><a href=""></a></div>
        </div>

        <div id="content">
            <div style="position: relative; height: 100%;">
                <div style="display: inline-block; height: 100%; vertical-align: top; border-right: 2px solid darkcyan;" id="sidebar">
                    <div><a id="newTask" title="Add new task" draggable="true"><img src="task.png" /></a></div>
                    
                </div>
                <div id="canvas" tabindex="0"></div>
                <div id="tabbar"></div>
            </div>
        </div>
</body>
</html>

CSS

html, body {
                margin: 0;
                padding: 0;
            }

            body { 
                overflow: hidden;
            }

            #header {
                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                height: 30px;
                border-bottom: 2px solid darkcyan;
                background-color: #eee;
                padding: 5px;
            }
            #title {
                position: absolute;
                left: 50%;
                width: 400px;
                margin-left: -200px;
                text-align: center;
            }
            #signUp {
                position: absolute;
                top: 9px;
                right: 16em;
            }
            #signUp a {
                color: darkcyan;
            }
            #menu {
                position: absolute;
                top: 42px;
                left: 0px;
                width: 100%;
            }
            #content {
                position: absolute;
                top: 63px;
                left: 0px;
                right: 0px;
                bottom: 5px;
                white-space: nowrap;
            }
            #sidebar {
                background-color: #eee;
            }
            #sidebar div {
                padding: 5px; 
                text-align: center;
            }
            #canvas {
                overflow: scroll;
                position: absolute;
                top: 0;
                left: 70px;
                bottom: 2em;
                right: 0px;
            }
            #tabbar {
                position: absolute;
                bottom: 0;
                left: 70px;
                right: 0px;
                height: 2em;
            }
            *[draggable="true"] {
                cursor: move;
            }

/* elements */

.devs text {
    text-transform: uppercase;
    font-weight: 800;
    touch-action:...

JavaScript

var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 800)
                        .attr("height", 803);

                var clientX;
                var clientY;
                var offsetX;
                var offsetY;

                var $stageContainer = $("#content");
                var stageOffset = $stageContainer.offset();
                var offsetX = stageOffset.left;
                var offsetY = stageOffset.top;
                console.log(offsetX + " " + offsetY);

                $(document).on('mousemove', function (event)
                {
                    clientX = event.clientX;
                    clientY = event.clientY;
                    console.log(clientX + " " + clientY);

                });

                function getId(Id) {
                    var shapeId;
                    $('a').on("mousedown", function (event) {
                        shapeId = this.id;
                        console.log(shapeId);
                    }).on('mouseup', function (event)
                    {
                        if (shapeId == "newTask")
                        {
                            console.log("shape is", shapeId);
                            createRect();
                        }
                    })
                }
                getId();

                function createCircle() {
                    svg.append("circle")
                            .attr("id", "onCircleDragStart")
                            .attr("r", 25)  
                            .attr("cx", "100")
                            .attr("cy", "100")
                            .classed("dragTarget", true)
                }
                function createRect() {
                    svg.append("rect")
                            .attr("id", "onRectDragStart")
                            .attr("rx", 10)
                            .attr("width", 51)
                            .attr("height", 41)
     ...