dsaffo/index.html

## index.html
<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">


</head>

<style>
  html,
  body {
    height: 100%;
  }

  .main_svg {
    height: 100%;
    width: 100%;
  }

  .main {
    height: 100%;
    width: 100%;
  }

</style>

<body>

  <div class="main">
    <svg class="main_svg">
    </svg>
  </div>

</body>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
  let w = window.innerWidth;
  let h = window.innerHeight;

  let svg = d3.select(".main_svg");

  let idNum = 0;

  let side1 =
    svg.append("rect")
    .attr("width", w / 2)
    .attr("height", h)
    .attr("fill", "white")
    .attr("stroke", "black")

  let side2 =
    svg.append("rect")
    .attr("width", w / 2)
    .attr("height", h)
    .attr("x", w / 2)
    .attr("fill", "white")
    .attr("stroke", "black")


  let set1 = {};
  let set2 = {};
  let edges = [];

  side1.on("click", function() {
    console.log(idNum);

    d3.select(".main")
      .append("form")
      .style("position", "absolute")
      .style("left", d3.event.x + "px")
      .style("top", d3.event.y + "px")
      .attr("name", "form" + idNum)
      .attr("id", "f" + idNum)
      .attr("onSubmit", "return handleClickSide1(id)")
      .append("input")
      .attr("type", "text")
      .attr("id", "inputf" + idNum)
      .attr("placeholder", "Type Stuff");

    idNum += 1;
  })

  side2.on("click", function() {
    console.log(idNum);

    d3.select(".main")
      .append("form")
      .style("position", "absolute")
      .style("left", d3.event.x + "px")
      .style("top", d3.event.y + "px")
      .attr("name", "form" + idNum)
      .attr("id", "f" + idNum)
      .attr("onSubmit", "return handleClickSide2(id)")
      .append("input")
      .attr("type", "text")
      .attr("id", "inputf" + idNum)
      .attr("placeholder", "Type Stuff");

    idNum += 1;
  })


  function handleClickSide1(id) {
    console.log(id);
    drawCircle(id, document.getElementById("input" + id).value, getOffset(document.getElementById(id)).left, getOffset(document.getElementById(id)).top);
    d3.select("#" + id).remove();
    return false;
  }

  function handleClickSide2(id) {
    console.log(id);
    drawSquare(id, document.getElementById("input" + id).value, getOffset(document.getElementById(id)).left, getOffset(document.getElementById(id)).top);
    d3.select("#" + id).remove();
    return false;
  }

  function drawCircle(id, label, x, y) {

    set1 = Object.assign({
      [id]: {
        "id": id,
        "label": label,
        "x": x,
        "y": y
      }
    }, set1);

    console.log(set1);

    var drag_line = null;

    let node = svg.append("g")
      .attr("x", x)
      .attr("y", y)
      .attr("class", "set1")
      .attr("id", "node" + id)
      .on("click", function() {

        let edge = svg.append("line")
          .attr("class", "edge")
          .attr("stroke", "grey")
          .attr("stroke-width", 10)
          .attr("x1", node.attr("x"))
          .attr("y1", node.attr("y"))
          .attr("x2", node.attr("x+10"))
          .attr("y2", node.attr("y+10"))

        svg.on("mousemove", function() {
          edge.attr("x2", d3.event.x - 20).attr("y2", d3.event.y - 20)
        })

        d3.selectAll(".set2").on("click", function() {

          edges.push({
            "x1": edge.attr("x1"),
            "y1": edge.attr("y1"),
            "x2": edge.attr("x2"),
            "y2": edge.attr("y2")
          })


          console.log(edges);
          edge.remove();
          redraw();

        });

      })

    let circle = node.append("circle")
      .attr("cx", x)
      .attr("cy", y)
      .attr("r", "50px")
      .attr("stroke", "black")
      .attr("fill", "white")

    let text = node.append("text")
      .attr("dx", x - 35)
      .attr("dy", y)
      .attr("fill", "black")
      .attr("font-size", "20px")
      .text(label)
  }


  function drawSquare(id, label, x, y) {

    set2 = Object.assign({
      [id]: {
        "id": id,
        "label": label,
        "x": x,
        "y": y
      }
    }, set2);

    console.log(set2);


    let node = svg.append("g").attr("class", "set2");

    let rect = node.append("rect")
      .attr("x", x)
      .attr("y", y)
      .attr("width", "100px")
      .attr("height", "100px")
      .attr("stroke", "black")
      .attr("fill", "white")

    let text = node.append("text")
      .attr("dx", x + 15)
      .attr("dy", y + 50)
      .attr("fill", "black")
      .attr("font-size", "20px")
      .text(label)
  }


  function drawEdge(x1, y1, x2, y2) {
    let edge = svg.append("line")
      .attr("class", "edge")
      .attr("stroke", "grey")
      .attr("stroke-width", 10)
      .attr("x1", x1)
      .attr("y1", y1)
      .attr("x2", x2)
      .attr("y2", y2)
      .on("click", function() {
        edge.remove();
      })

  }

  function redraw() {
    d3.selectAll(".set1").remove();
    d3.selectAll(".set2").remove();
    d3.selectAll(".edge").remove();


    for (var o in edges) drawEdge(edges[o].x1, edges[o].y1, edges[o].x2, edges[o].y2);
    for (var o in set1) drawCircle(set1[o].id, set1[o].label, set1[o].x, set1[o].y);
    for (var o in set2) drawSquare(set2[o].id, set2[o].label, set2[o].x, set2[o].y);


  }

  function getOffset(el) {
    const rect = el.getBoundingClientRect();
    return {
      left: rect.left + window.scrollX,
      top: rect.top + window.scrollY
    };
  }

</script>

</html>
	<!DOCTYPE html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">


	</head>

	<style>
	html,
	body {
	height: 100%;
	}

	.main_svg {
	height: 100%;
	width: 100%;
	}

	.main {
	height: 100%;
	width: 100%;
	}

	</style>

	<body>

	<div class="main">
	<svg class="main_svg">
	</svg>
	</div>

	</body>

	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
	let w = window.innerWidth;
	let h = window.innerHeight;

	let svg = d3.select(".main_svg");

	let idNum = 0;

	let side1 =
	svg.append("rect")
	.attr("width", w / 2)
	.attr("height", h)
	.attr("fill", "white")
	.attr("stroke", "black")

	let side2 =
	svg.append("rect")
	.attr("width", w / 2)
	.attr("height", h)
	.attr("x", w / 2)
	.attr("fill", "white")
	.attr("stroke", "black")


	let set1 = {};
	let set2 = {};
	let edges = [];

	side1.on("click", function() {
	console.log(idNum);

	d3.select(".main")
	.append("form")
	.style("position", "absolute")
	.style("left", d3.event.x + "px")
	.style("top", d3.event.y + "px")
	.attr("name", "form" + idNum)
	.attr("id", "f" + idNum)
	.attr("onSubmit", "return handleClickSide1(id)")
	.append("input")
	.attr("type", "text")
	.attr("id", "inputf" + idNum)
	.attr("placeholder", "Type Stuff");

	idNum += 1;
	})

	side2.on("click", function() {
	console.log(idNum);

	d3.select(".main")
	.append("form")
	.style("position", "absolute")
	.style("left", d3.event.x + "px")
	.style("top", d3.event.y + "px")
	.attr("name", "form" + idNum)
	.attr("id", "f" + idNum)
	.attr("onSubmit", "return handleClickSide2(id)")
	.append("input")
	.attr("type", "text")
	.attr("id", "inputf" + idNum)
	.attr("placeholder", "Type Stuff");

	idNum += 1;
	})




	function handleClickSide1(id) {
	console.log(id);
	drawCircle(id, document.getElementById("input" + id).value, getOffset(document.getElementById(id)).left, getOffset(document.getElementById(id)).top);
	d3.select("#" + id).remove();
	return false;
	}

	function handleClickSide2(id) {
	console.log(id);
	drawSquare(id, document.getElementById("input" + id).value, getOffset(document.getElementById(id)).left, getOffset(document.getElementById(id)).top);
	d3.select("#" + id).remove();
	return false;
	}

	function drawCircle(id, label, x, y) {

	set1 = Object.assign({
	[id]: {
	"id": id,
	"label": label,
	"x": x,
	"y": y
	}
	}, set1);

	console.log(set1);

	var drag_line = null;

	let node = svg.append("g")
	.attr("x", x)
	.attr("y", y)
	.attr("class", "set1")
	.attr("id", "node" + id)
	.on("click", function() {

	let edge = svg.append("line")
	.attr("class", "edge")
	.attr("stroke", "grey")
	.attr("stroke-width", 10)
	.attr("x1", node.attr("x"))
	.attr("y1", node.attr("y"))
	.attr("x2", node.attr("x+10"))
	.attr("y2", node.attr("y+10"))

	svg.on("mousemove", function() {
	edge.attr("x2", d3.event.x - 20).attr("y2", d3.event.y - 20)
	})

	d3.selectAll(".set2").on("click", function() {

	edges.push({
	"x1": edge.attr("x1"),
	"y1": edge.attr("y1"),
	"x2": edge.attr("x2"),
	"y2": edge.attr("y2")
	})


	console.log(edges);
	edge.remove();
	redraw();

	});

	})

	let circle = node.append("circle")
	.attr("cx", x)
	.attr("cy", y)
	.attr("r", "50px")
	.attr("stroke", "black")
	.attr("fill", "white")

	let text = node.append("text")
	.attr("dx", x - 35)
	.attr("dy", y)
	.attr("fill", "black")
	.attr("font-size", "20px")
	.text(label)
	}


	function drawSquare(id, label, x, y) {

	set2 = Object.assign({
	[id]: {
	"id": id,
	"label": label,
	"x": x,
	"y": y
	}
	}, set2);

	console.log(set2);


	let node = svg.append("g").attr("class", "set2");

	let rect = node.append("rect")
	.attr("x", x)
	.attr("y", y)
	.attr("width", "100px")
	.attr("height", "100px")
	.attr("stroke", "black")
	.attr("fill", "white")

	let text = node.append("text")
	.attr("dx", x + 15)
	.attr("dy", y + 50)
	.attr("fill", "black")
	.attr("font-size", "20px")
	.text(label)
	}


	function drawEdge(x1, y1, x2, y2) {
	let edge = svg.append("line")
	.attr("class", "edge")
	.attr("stroke", "grey")
	.attr("stroke-width", 10)
	.attr("x1", x1)
	.attr("y1", y1)
	.attr("x2", x2)
	.attr("y2", y2)
	.on("click", function() {
	edge.remove();
	})

	}

	function redraw() {
	d3.selectAll(".set1").remove();
	d3.selectAll(".set2").remove();
	d3.selectAll(".edge").remove();


	for (var o in edges) drawEdge(edges[o].x1, edges[o].y1, edges[o].x2, edges[o].y2);
	for (var o in set1) drawCircle(set1[o].id, set1[o].label, set1[o].x, set1[o].y);
	for (var o in set2) drawSquare(set2[o].id, set2[o].label, set2[o].x, set2[o].y);


	}

	function getOffset(el) {
	const rect = el.getBoundingClientRect();
	return {
	left: rect.left + window.scrollX,
	top: rect.top + window.scrollY
	};
	}

	</script>

	</html>