JSFiddle - React, Tailwind, and code Playground

by Julian Coles

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="MainDiv"></div>

JavaScript

var cursor;
var width, height;
var testSVG = {
  x: 0,
  y: 0,
  id: 0,
  image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png",
  width: 280,
  height: 140
};
var svgContainer = d3.select("#MainDiv").append("svg").attr({
  width: 1920,
  height: 1080,
  version: 1.1,
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "-40, -40, 2000, 1160",
  "class": "GraphicDesigner"
});

createSVG(svgContainer, testSVG);

function createSVG(container, object) {
  var d = [{
    x: object.x,
    y: object.y,
    moveX: object.x,
    movey: object.y
  }];
  var svgObjectGroup = container.data(d).append("g").attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    }).call(onDragDrop(dragmove, dropHandler))
    .attr("id", object.ID).attr("class", "masterTooltip");
  svgObjectGroup.append("svg").attr({
      width: object.width,
      height: object.height,
      viewBox: "0, 0, " + object.width + ", " + object.height
    }).append("svg:image")
    .attr({
      preserveAspectRatio: "none",
      width: object.width,
      height: object.height,
      "xlink:href": object.image
    });
  var dragSize = 16;
  svgObjectGroup.append("rect").attr({
    x: object.width - dragSize,
    y: object.height - dragSize,
    width: dragSize,
    height: dragSize,
    rx: 0,
    fill: "#FFFFFF",
    stroke: "black",
    "stroke-width": 1,
    cursor: "se-resize",
    "class": "sizers"
  });
}

function onDragDrop(dragHandler, dropHandler) {
  var drag = d3.behavior.drag();
  drag.on("drag", dragHandler).on("dragstart", startHandler).on("dragend", dropHandler);
  return drag;
}

function startHandler() {
  cursor = "se";
  d3.event.sourceEvent.stopPropagation();
  if (d3.event.sourceEvent.srcElement.attributes.cursor != undefined) cursor = d3.event.sourceEvent.srcElement.attributes.cursor.nodeValue; //Todo. Doesn't work in Firefox
}

function dragmove() {
  if...