JSFiddle - React, Tailwind, and code Playground

by Mohammed Fawzan

HTML

<svg width="500" height="500" style="background-color: blue">


    <g id="draw">

        <rect class="container" height="400" width="400" x="0" y="0" style="fill:gray"></rect>

        <g class="qbox" id="qbox">

            <line id="dummyLine" x1="0" x2="0" y1="0" y2="0" visibility="hidden"
                  style='stroke:red; stroke-width:4px'></line>

            <image x="10" y="10" class="container" initial-x="10" initial-y="10" xlink:href="http://i60.tinypic.com/20ic9e.png"
                   width="110"
                   height="110"></image>
            <circle class="left" id="qbox-left" initial-cx="10" initial-cy="65" cx="10" cy="65" r="5"
                    style="fill:red"></circle>
            <circle class="right" id="qbox-right" initial-cx="120" initial-cy="65" cx="120" cy="65" r="5"
                    style="fill:red"></circle>

            <g id="op1" class="op">
                <image class="opim" x="10" y="10" class="container" initial-x="10" initial-y="10"
                       xlink:href="http://i58.tinypic.com/imlzs9.png" width="50"
                       height="50"></image>
                <circle id="op1-left" class="left" initial-cx="10" initial-cy="35" cx="10" cy="35" r="5"
                        style="fill:red"></circle>
                <circle id="op1-right" class="right" initial-cx="60" initial-cy="35" cx="60" cy="35" r="5"
                        style="fill:red"></circle>
            </g>

            <g id="op2" class="op">
                <image class="opim" x="60" y="60" initial-x="60" initial-y="60"
                       xlink:href="http://i58.tinypic.com/imlzs9.png" width="50"
                       height="50"></image>
                <circle id="op2-left" class="left" initial-cx="60" initial-cy="85" cx="60" cy="85" r="5"
                        style="fill:red"></circle>
                <circle id="op2-right" class="right" initial-cx="110" initial-cy="85" cx="110" cy="85" r="5"
                       ...

JavaScript

var qBox = d3.selectAll('.qbox')
            .on('dblclick', function () {
                var g = d3.select(this);
                var scale = 'scale(1.2,1.2)';
                g.attr('transform', g.attr('transform') + ' ' + scale);
            });
    var opBox = d3.selectAll('.op');
    var circles = d3.selectAll('circle');


    var cDrag = d3.behavior.drag()

                    .on('dragstart', function () {
                        d3.event.sourceEvent.stopPropagation();
                    })
                    .on('drag', function () {

                        var dummyLine = d3.select('#dummyLine');
                        var me = d3.select(this);

                        var transForm = me.node().getCTM();
                        var t2 = me.select(function () {
                            return this.parentNode;
                        }).select(function () {
                            return this.parentNode;
                        }).select('circle').node().getCTM();

                        var tC = d3.transform(d3.select(this).attr('transform')).translate;
                        var tP = d3.transform(d3.select(this).select(function () {
                            return this.parentNode;
                        }).attr('transform')).translate;

                        console.log(transForm);

                        var meX = t2['e'];
                        var meY = t2['f'];


                        dummyLine
                                .style('visibility', 'visible')
                                .attr('tx1', Number(me.attr('cx')))
                                .attr('x1', Number(me.attr('cx')) + (Number(transForm['e'] - Number(meX))))
                                .attr('ty1', Number(me.attr('cy')))
                                .attr('y1', Number(me.attr('cy')) + (Number(transForm['f'] - Number(meY))))
                                .attr('x2', Number(d3.event.x) )
                                .attr('tx2',...