weslord · September 13, 2018 08:54
diff --git a/README.md b/README.md
diff --git a/FortGraph b/FortGraph
 A D3-based Force Directed Graph (for planning Dwarf Fortress layouts)
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang='en'>
 <head>
  <meta charset='utf-8'>
  <title>Dwarf Force-tress</title>
  <link rel='stylesheet' href='style.css'>
  <script src='https://d3js.org/d3.v5.min.js'></script>
 </head>
 <body>

 </body>
 <script src='main.js'></script>
 </html>
diff --git a/industries.json b/industries.json
 {
  "vertices":[
    {
      "id":0,
      "title":"Stone",
      "type":"stockpile"
    },
    {
      "id":1,
      "title":"Mason",
      "type":"workshop"
    },
    {
      "id":2,
      "title":"Craftsdwarf",
      "type":"workshop"
    },
    {
      "id":3,
      "title":"Carpenter",
      "type":"workshop"
    },
    {
      "id":4,
      "title":"Wood",
      "type":"stockpile"
    },
    {
      "id":5,
      "title":"Wood Furnace",
      "type":"workshop"
    },
    {
      "id":6,
      "title":"Charcoal",
      "type":"stockpile"
    },
    {
      "id":7,
      "title":"Ash",
      "type":"stockpile"
    },
    {
      "id":8,
      "title":"Trees",
      "type":"resource"
    },
    {
      "id":9,
      "title":"Mining",
      "type":"resource"
    },
    {
      "id":10,
      "title":"Furniture",
      "type":"stockpile"
    },
    {
      "id":11,
      "title":"Bowyer",
      "type":"workshop"
    },
    {
      "id":12,
      "title":"Farm Plot",
      "type":"workshop"
    },
    {
      "id":13,
      "title":"Brewery",
      "type":"workshop"
    },
    {
      "id":14,
      "title":"Farmer's Workshop",
      "type":"workshop"
    },
    {
      "id":15,
      "title":"Kitchen",
      "type":"workshop"
    },
    {
      "id":16,
      "title":"Plants",
      "type":"stockpile"
    },
    {
      "id":17,
      "title":"Seeds",
      "type":"stockpile"
    },
    {
      "id":18,
      "title":"Alcohol",
      "type":"stockpile"
    }
  ],
  "edges":[
    {
      "source":0,
      "target":1
    },
    {
      "source":0,
      "target":2
    },
    {
      "source":8,
      "target":4
    },
    {
      "source":9,
      "target":0
    },
    {
      "source":4,
      "target":5
    },
    {
      "source":4,
      "target":3
    },
    {
      "source":5,
      "target":7
    },
    {
      "source":5,
      "target":6
    },
    {
      "source":4,
      "target":2
    },
    {
      "source":3,
      "target":10
    },
    {
      "source":1,
      "target":10
    },
    {
      "source":4,
      "target":11
    },
    {
      "source":12,
      "target":16
    },
    {
      "source":13,
      "target":17
    },
    {
      "source":17,
      "target":12
    },
    {
      "source":16,
      "target":13
    },
    {
      "source":16,
      "target":14
    },
    {
      "source":16,
      "target":15
    },
    {
      "source":13,
      "target":18
    },
    {
      "source":18,
      "target":15
    }
  ]
 }
diff --git a/main.js b/main.js
 'use strict';
 { // INIT
  var windowWidth  = window.innerWidth,
      windowHeight = window.innerHeight;

  var width  = windowWidth - 258,
      height = windowHeight - 10;

  var color = d3.scaleOrdinal(d3.schemeCategory10);

  var svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height);

  var world = svg.append('g')
      .attr('id', 'world')
      .attr('transform', 'translate('+width/2+','+height/2+')');

  svg
    .call(d3.zoom()
        .scaleExtent([1/8, 2])
        .on('zoom', zoomed))
    .call(d3.zoom().transform, d3.zoomIdentity.translate(width/2, height/2))
    .on('dblclick.zoom', null);

  // from http://bl.ocks.org/rkirsling/5001347
  // define arrow markers for graph links
  svg.append('svg:defs').append('svg:marker')
    .attr('id', 'end-arrow')
    .attr('viewBox', '0 -5 15 10')
    .attr('refX', 7.5)
    .attr('markerWidth', 7.5)
    .attr('markerHeight', 5)
    .attr('orient', 'auto')
  .append('svg:path')
    .attr('d', 'M 0 -5 L 10 0 L 0 5')
    .attr('style', 'fill: #000; stroke: none');

  var buildings = world.selectAll('g');
  var lines     = world.selectAll('g');

  var linePreview = world
      .append('path');

  var inspector = {};
  inspector.body = d3.select('body').append('div')
      .attr('id', 'inspector');
  inspector.title = inspector.body.append('input')
      .on('change', function () {
        if (this.value == '') {
          this.value = selected.title;
        } else {
          selected ? selected.title = this.value : null;
          updateInspector(selected);
          update();
        }
      });
  inspector.type = inspector.body.append('input')
      .on('change', function () {
        selected ? selected.type = this.value : null;
        update();
      });
  inspector.from = inspector.body.append('div').classed('from', true);
  inspector.to = inspector.body.append('div').classed('to', true);
  inspector.focus = function () {
    d3.event.stopPropagation();
    inspector.title.node().select();
  };

  var vertices = [];
  var edges = [];

  d3.text('industries.json').then(function(g){
    importGraph(g);
  });

  var source = null,
      target = null,
      selected = null,
      line   = null; // rename this (represents an edge)

  var dragging = true;
  var ctrlPressed = false;
  
  window.addEventListener("resize", resize);

  svg.on('dblclick', newVertexAtMouse);
  svg.on('click', selectObj);

  d3.select(window)
    .on('keydown', windowKeydown)
    .on('keyup', windowKeyup);

  var simulation = d3.forceSimulation()
      .force('x', d3.forceX(0))
      .force('y', d3.forceY(0))
      .force('link', d3.forceLink().id(function(d) {return d.id;}))
      .force('charge', d3.forceManyBody().strength(-200))
      .on('tick', tick);

  simulation.force('x').strength(0.02);
  simulation.force('y').strength(0.03);

  update();
 }

 function update() {
  lines = lines.data(edges, function(d) {
    return d.index;
  });
  lines.exit().remove();
  var enter = lines.enter().append('g')
      .on('click', selectObj)
      .on('mouseover', lineHover)
      .on('mouseout', lineUnHover);
  enter.append('path')
      .style('marker-end', 'url(#end-arrow)');
  lines = lines.merge(enter);

  buildings = buildings.data(vertices, function(d) {
    return d.id;
  });
  buildings.exit().remove();
  enter = buildings.enter().append('g')
      .on('click', selectObj)
      .on('dblclick', inspector.focus)
      .on('mouseover', bldgHover)
      .on('mouseout', bldgUnHover)
      .call(d3.drag()
        .on('start', bldgDragStart)
        .on('drag', bldgDragProgress)
        .on('end', bldgDragEnd)
      );
  enter.append('text');
  enter.append('rect');

  buildings = buildings.merge(enter);

  buildings.classed('selected', function (d) {
    return d.selected;
  });
  lines.classed('selected', function (d) {
    return d.selected;
  });

  buildings.selectAll('text')
      .text(function(d) {return d.title;})
      .attr('height', 10)
      .attr('transform', function() {
         var b = this.getBBox();
         return 'translate(-'+ b.width/2 +','+ 10/2 +')';
        });
  buildings.selectAll('rect')
      .each(function(d) {
        const b = this.parentNode.querySelector('text').getBBox();
        d.width = b.width + 5;
        d.height = 20;
        d3.select(this)
          .attr('width', d.width)
          .attr('height', d.height)
          .attr('transform', 'translate(-'+ d.width / 2 +','+ -10 +')')
          .attr('stroke', color(d.type))
          .attr('rx', 5)
          .attr('ry', 5);
      });

  lines.lower();
  d3.selectAll('text').raise();

  simulation.nodes(vertices);
  simulation.force('link')
    .links(edges)
    .distance(100)
    .strength(0.2);
 }

 function tick() {
  lines.each(drawPath);

  buildings.attr('transform', function(d) {
    return 'translate(' + d.x + ',' + d.y + ')';
  });
 }

 function drawPath(d) {
  let path;
  if (this.children) {
    path = this.children[0];
  } else {
    path = this.node();
  }

  const x1 = d.source.x;
  const y1 = d.source.y;
  const y2 = d.target.y;
  const x2 = d.target.x;
  const w2 = d.target.width/2 + 3;
  const h2 = d.target.height/2 + 3;

  const dx = x1 - x2;
  const dy = y1 - y2;
  const m12 = dy / dx;
  const m2 = h2 / w2;

  let x2a;
  let y2a;

  if ( Math.abs(m12) > Math.abs(m2) ) {
    // if slope of line is greater than aspect ratio of box
    // line exits out the bottom
    x2a = x2 + dy/Math.abs(dy) * h2 / m12;
    y2a = y2 + dy/Math.abs(dy) * h2;
  } else {
    // line exits out the side
    x2a = x2 + dx/Math.abs(dx) * w2;
    y2a = y2 + dx/Math.abs(dx) * w2 * m12;
  }

  d3.select(path)
    .attr('d', `
      M ${x1} ${y1}
      L ${x2a} ${y2a}
    `); 
 }

 function newVertexAtMouse() {
  var x = d3.mouse(world.node())[0];
  var y = d3.mouse(world.node())[1];
  newVertex(x, y);
 }

 function newVertex(x = 0, y = 0) {
  var lastVertexId = 0;

  vertices.forEach(function(vertex){
    if (vertex.id > lastVertexId) {
      lastVertexId = vertex.id;
    }
  });
  
  var vertex = {id: ++lastVertexId, title: 'New', type: '', x: x, y: y};

  vertices.push(vertex);
  selectObj(vertex);
  inspector.focus();

  update();
  simulation.alpha(0.3).restart();
  return vertex;
 }

 function deleteObj(obj) {
  if (vertices.indexOf(obj) !== -1) {
    vertices.splice(vertices.indexOf(obj), 1);

    edges = edges.filter(function (edge) {
      return (edge.source !== obj && edge.target !== obj);
    });
  }

  if (edges.indexOf(obj) !== -1) {
    edges.splice(edges.indexOf(obj), 1);
  }

  update();
  simulation.alpha(0.3).restart();
 }

 function bldgDragStart(d) {
  source = d;

  if (!ctrlPressed) {
    dragging = true; // dragging the bldg
  } else {
    dragging = false; // drawing new edge
  }
 }

 function bldgDragProgress(d) {
  var tx, ty;
  if (dragging) {
    source.fx = d3.event.x;
    source.fy = d3.event.y;
  } else {
    if (target && target !== source) {
      drawPath.call(linePreview, {source, target});
    } else {
      tx = d3.mouse(world.node())[0];
      ty = d3.mouse(world.node())[1];
      linePreview
          .style('display', 'inline')
          .style('marker-end', 'url(#end-arrow)')
          .attr('d', function(d) {
            return `M ${source.x} ${source.y} L ${tx} ${ty}`
          });
    }
  }

  simulation.alpha(0.3).restart();
 }

 function bldgDragEnd(d) {
  linePreview
      .style('display', 'none');

  if (dragging) {
    if (!d.fixed) {
      source.fx = null;
      source.fy = null;
    }
  } else {
    if (target) {
      if (source !== target && !edgeExists(source, target)) {
        edges.push({source: source, target: target});
        updateInspector(selected);
      }
    }
  }

  update();
 }

 function bldgHover(d) {
  target = d;
  d3.select(this).classed('hover', true);
 }

 function bldgUnHover(d) {
  target = null;
  d3.select(this).classed('hover', false);
 }

 function lineHover(d) {
  line = d;
 }

 function lineUnHover(d) {
  line = null;
 }

 function selectObj(subject) {
  if (d3.event) {
    d3.event.stopPropagation();
  }
  
  if (subject === selected) {
    // TODO: re-implement for multi-select
    //       do not interfere with dblclick
 //    subject = null;
  }

  selected = subject;

  edges.forEach(function(edge) {
    edge.selected = false;
  });

  vertices.forEach(function(vertex) {
    vertex.selected = false;
  });

  updateInspector(selected);

  update();
 }

 function updateInspector(subject) {
  inspector.title.node().value = '';
  inspector.type.node().value = '';
  inspector.to.node().innerText = '';
  inspector.from.node().innerText = '';
  
  if (subject && subject.title !== '') {
    subject.selected = true;

    inspector.title.node().value = subject.title;
    inspector.type.node().value = subject.type;

    var from = inspector.from
        .append('ul');

    edges.forEach(function(edge) {
      if (edge.target === subject) {
        let li = from.append('li');
        li.append('a')
            .text(edge.source.title)
            .on('click', function() {
              selectObj(edge.source);
            });
        li.append('a')
            .text('×')
            .on('click', function() {
              deleteObj(edge);
              updateInspector(subject);
            });
      }
    });

    from.append('li')
        .text('+')
        .on('click', function() {
          var vertex = newVertex();
          edges.push({source: vertex, target: subject});
          updateInspector(vertex);
          update();
        }); 

    var to = inspector.to
        .append('ul');

    edges.forEach(function(edge) {
      if (edge.source === subject) {
        let li = to.append('li');
        li.append('a')
            .text(edge.target.title)
            .on('click', function() {
              selectObj(edge.target);
            });
        li.append('a')
            .text('×')
            .on('click', function() {
              deleteObj(edge);
              updateInspector(subject);
            });
      }
    });

    to.append('li')
        .text('+')
        .on('click', function() {
          var vertex = newVertex();
          edges.push({source: subject, target: vertex});
          updateInspector(vertex);
          update();
        }); 

  } else {
    if (subject && subject.title === '') {
      deleteObj(subject);
    }
  }
 }

 function fixBldg(subject) {
  if (subject && subject.fixed) {
    d3.select(this).classed('fixed', false);
    subject.fixed = false;
    subject.fx = null;
    subject.fy = null;
    simulation.alpha(0.3).restart();
  } else if (subject) {
    d3.select(this).classed('fixed', true);
    subject.fixed = true;
    subject.fx = subject.x;
    subject.fy = subject.y;
  }
 }

 function edgeExists(source, target) {
  for (var i = 0; i < edges.length; i++) {
    if (source === edges[i].source && target === edges[i].target) {
      return true;
    }
  }
 }

 function exportGraph() {
  var cleanEdges = edges.map(function(edge) {
    var cleanEdge = Object.assign({}, edge);
    cleanEdge.source = cleanEdge.source.id;
    cleanEdge.target = cleanEdge.target.id;
    return cleanEdge;
  });

  var cleanGraph = {vertices: vertices, edges: cleanEdges};
  return JSON.stringify(cleanGraph);
 }

 function importGraph(dirtyGraph) {
  // TODO: check for duplicate IDs
  var graph = JSON.parse(dirtyGraph);

  vertices = [];
  edges = [];

  vertices = graph.vertices;
  edges = graph.edges;
  update();
  simulation.alpha(1).restart();
 }

 function windowKeydown(d) {
  if (d3.event.target.type !== "text") {
    switch(d3.event.keyCode) {
      case 16: // shift
      case 17: // ctrl
      case 18: // alt
      case 91: // cmd
        ctrlPressed = true;
        svg.attr('style', 'cursor: pointer');
        break;
      case 8:  // backspace
      case 46: // delete
      case 68: // d
        d3.event.preventDefault();
        world.selectAll('.selected').each(deleteObj);
        target = null;
        break;
       case 80: // p
        world.selectAll('.selected').each(fixBldg);
        break;
      case 27: // esc
        selectObj(null);
        break;
      default:
        break;
    }
  }
 }

 function windowKeyup() {
  switch(d3.event.keyCode) {
    case 16: // shift
    case 17: // ctrl
    case 18: // alt
    case 91: // cmd
      ctrlPressed = false;
      svg.attr('style', 'cursor: default');
      break;
    default:
      break;
  }
 }

 function resize() {
  var windowWidth = window.innerWidth,
      windowHeight = window.innerHeight;

  width  = windowWidth - 258,
  height = windowHeight - 10;

  svg
    .attr('width', width)
    .attr('height', height);

  simulation
      .alpha(0.3).restart();
 }

 function zoomed() {
  world.attr('transform', d3.event.transform);
 }
diff --git a/style.css b/style.css
 html {
  box-sizing: border-box;
 }

 *, *:before, *:after {
  box-sizing: inherit;
 }

 body {
  margin: 5px;
  width: 100%;
  height: 100%;
 }

 #inspector {
  border: 2px solid black;
  width: 250px;
  height: calc(100% - 10px);
  position: absolute;
  top: 5px;
  right: 5px;
  overflow: scroll;
  background: rgba(255,255,255,0.8);
  padding: 1em;
 }

 #inspector input {
  font-size: 0.85em;
  width: 100%;
  height: 2em;
  margin-bottom: 0.5em;
  padding-left: 0.25em;
 }

 #inspector ul {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
 }

 #inspector li {
  display: inline-block;
  border: 1px solid white;
  border-radius: 0.5em;
  margin: 1px 2px;
  font-size: 0.75em;
  cursor: default;
 }

 #inspector li:hover {
  border: 1px solid black;
 }

 #inspector li:last-child {
  width: 2em;
  text-align: center;
 }

 .from li {
  background-color: #dcd;
 }

 .from a:first-child:before {
  content: '← ';
  padding-left: 0.5em;
 }

 .to li {
  background-color: #ddc;
 }

 .to a:first-child:before {
  content: '→ ';
  padding-left: 0.5em;
 }

 #inspector a:last-child {
  display: inline-block;
  background-color: rgba(255, 0, 0, 0.25);
  width: 1.25em;
  margin-left: 0.5em;
  margin-right: 0;
  border-radius: 100%;
  text-align: center;
  font-size: 1em;
 }

 #inspector a:last-child:hover {
  background-color: rgba(255, 0, 0, 0.5);
 }

 svg {
  border: 2px solid black;
 }

 rect {
  stroke-width: 2;
  fill: #fff;
 }

 .hover rect {
  stroke-width: 3.5;
 }

 .fixed rect {
  fill: #eee;
 }

 path.selected, .selected rect {
  stroke-width: 3;
 }

 path {
  stroke: #000;
  stroke-width: 2;
  fill: none;
 }

 path:hover {
  stroke-width: 3;
 }

 line {
  stroke: #000;
  stroke-width: 2;
 }

 text {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
 }
	<!DOCTYPE html>
	<html lang='en'>
	<head>
	<meta charset='utf-8'>
	<title>Dwarf Force-tress</title>
	<link rel='stylesheet' href='style.css'>
	<script src='https://d3js.org/d3.v5.min.js'></script>
	</head>
	<body>

	</body>
	<script src='main.js'></script>
	</html>
	{
	"vertices":[
	{
	"id":0,
	"title":"Stone",
	"type":"stockpile"
	},
	{
	"id":1,
	"title":"Mason",
	"type":"workshop"
	},
	{
	"id":2,
	"title":"Craftsdwarf",
	"type":"workshop"
	},
	{
	"id":3,
	"title":"Carpenter",
	"type":"workshop"
	},
	{
	"id":4,
	"title":"Wood",
	"type":"stockpile"
	},
	{
	"id":5,
	"title":"Wood Furnace",
	"type":"workshop"
	},
	{
	"id":6,
	"title":"Charcoal",
	"type":"stockpile"
	},
	{
	"id":7,
	"title":"Ash",
	"type":"stockpile"
	},
	{
	"id":8,
	"title":"Trees",
	"type":"resource"
	},
	{
	"id":9,
	"title":"Mining",
	"type":"resource"
	},
	{
	"id":10,
	"title":"Furniture",
	"type":"stockpile"
	},
	{
	"id":11,
	"title":"Bowyer",
	"type":"workshop"
	},
	{
	"id":12,
	"title":"Farm Plot",
	"type":"workshop"
	},
	{
	"id":13,
	"title":"Brewery",
	"type":"workshop"
	},
	{
	"id":14,
	"title":"Farmer's Workshop",
	"type":"workshop"
	},
	{
	"id":15,
	"title":"Kitchen",
	"type":"workshop"
	},
	{
	"id":16,
	"title":"Plants",
	"type":"stockpile"
	},
	{
	"id":17,
	"title":"Seeds",
	"type":"stockpile"
	},
	{
	"id":18,
	"title":"Alcohol",
	"type":"stockpile"
	}
	],
	"edges":[
	{
	"source":0,
	"target":1
	},
	{
	"source":0,
	"target":2
	},
	{
	"source":8,
	"target":4
	},
	{
	"source":9,
	"target":0
	},
	{
	"source":4,
	"target":5
	},
	{
	"source":4,
	"target":3
	},
	{
	"source":5,
	"target":7
	},
	{
	"source":5,
	"target":6
	},
	{
	"source":4,
	"target":2
	},
	{
	"source":3,
	"target":10
	},
	{
	"source":1,
	"target":10
	},
	{
	"source":4,
	"target":11
	},
	{
	"source":12,
	"target":16
	},
	{
	"source":13,
	"target":17
	},
	{
	"source":17,
	"target":12
	},
	{
	"source":16,
	"target":13
	},
	{
	"source":16,
	"target":14
	},
	{
	"source":16,
	"target":15
	},
	{
	"source":13,
	"target":18
	},
	{
	"source":18,
	"target":15
	}
	]
	}
	'use strict';
	{ // INIT
	var windowWidth = window.innerWidth,
	windowHeight = window.innerHeight;

	var width = windowWidth - 258,
	height = windowHeight - 10;

	var color = d3.scaleOrdinal(d3.schemeCategory10);

	var svg = d3.select('body').append('svg')
	.attr('width', width)
	.attr('height', height);

	var world = svg.append('g')
	.attr('id', 'world')
	.attr('transform', 'translate('+width/2+','+height/2+')');

	svg
	.call(d3.zoom()
	.scaleExtent([1/8, 2])
	.on('zoom', zoomed))
	.call(d3.zoom().transform, d3.zoomIdentity.translate(width/2, height/2))
	.on('dblclick.zoom', null);

	// from http://bl.ocks.org/rkirsling/5001347
	// define arrow markers for graph links
	svg.append('svg:defs').append('svg:marker')
	.attr('id', 'end-arrow')
	.attr('viewBox', '0 -5 15 10')
	.attr('refX', 7.5)
	.attr('markerWidth', 7.5)
	.attr('markerHeight', 5)
	.attr('orient', 'auto')
	.append('svg:path')
	.attr('d', 'M 0 -5 L 10 0 L 0 5')
	.attr('style', 'fill: #000; stroke: none');

	var buildings = world.selectAll('g');
	var lines = world.selectAll('g');

	var linePreview = world
	.append('path');

	var inspector = {};
	inspector.body = d3.select('body').append('div')
	.attr('id', 'inspector');
	inspector.title = inspector.body.append('input')
	.on('change', function () {
	if (this.value == '') {
	this.value = selected.title;
	} else {
	selected ? selected.title = this.value : null;
	updateInspector(selected);
	update();
	}
	});
	inspector.type = inspector.body.append('input')
	.on('change', function () {
	selected ? selected.type = this.value : null;
	update();
	});
	inspector.from = inspector.body.append('div').classed('from', true);
	inspector.to = inspector.body.append('div').classed('to', true);
	inspector.focus = function () {
	d3.event.stopPropagation();
	inspector.title.node().select();
	};

	var vertices = [];
	var edges = [];

	d3.text('industries.json').then(function(g){
	importGraph(g);
	});

	var source = null,
	target = null,
	selected = null,
	line = null; // rename this (represents an edge)

	var dragging = true;
	var ctrlPressed = false;

	window.addEventListener("resize", resize);

	svg.on('dblclick', newVertexAtMouse);
	svg.on('click', selectObj);

	d3.select(window)
	.on('keydown', windowKeydown)
	.on('keyup', windowKeyup);

	var simulation = d3.forceSimulation()
	.force('x', d3.forceX(0))
	.force('y', d3.forceY(0))
	.force('link', d3.forceLink().id(function(d) {return d.id;}))
	.force('charge', d3.forceManyBody().strength(-200))
	.on('tick', tick);

	simulation.force('x').strength(0.02);
	simulation.force('y').strength(0.03);

	update();
	}

	function update() {
	lines = lines.data(edges, function(d) {
	return d.index;
	});
	lines.exit().remove();
	var enter = lines.enter().append('g')
	.on('click', selectObj)
	.on('mouseover', lineHover)
	.on('mouseout', lineUnHover);
	enter.append('path')
	.style('marker-end', 'url(#end-arrow)');
	lines = lines.merge(enter);

	buildings = buildings.data(vertices, function(d) {
	return d.id;
	});
	buildings.exit().remove();
	enter = buildings.enter().append('g')
	.on('click', selectObj)
	.on('dblclick', inspector.focus)
	.on('mouseover', bldgHover)
	.on('mouseout', bldgUnHover)
	.call(d3.drag()
	.on('start', bldgDragStart)
	.on('drag', bldgDragProgress)
	.on('end', bldgDragEnd)
	);
	enter.append('text');
	enter.append('rect');

	buildings = buildings.merge(enter);

	buildings.classed('selected', function (d) {
	return d.selected;
	});
	lines.classed('selected', function (d) {
	return d.selected;
	});

	buildings.selectAll('text')
	.text(function(d) {return d.title;})
	.attr('height', 10)
	.attr('transform', function() {
	var b = this.getBBox();
	return 'translate(-'+ b.width/2 +','+ 10/2 +')';
	});
	buildings.selectAll('rect')
	.each(function(d) {
	const b = this.parentNode.querySelector('text').getBBox();
	d.width = b.width + 5;
	d.height = 20;
	d3.select(this)
	.attr('width', d.width)
	.attr('height', d.height)
	.attr('transform', 'translate(-'+ d.width / 2 +','+ -10 +')')
	.attr('stroke', color(d.type))
	.attr('rx', 5)
	.attr('ry', 5);
	});

	lines.lower();
	d3.selectAll('text').raise();

	simulation.nodes(vertices);
	simulation.force('link')
	.links(edges)
	.distance(100)
	.strength(0.2);
	}

	function tick() {
	lines.each(drawPath);

	buildings.attr('transform', function(d) {
	return 'translate(' + d.x + ',' + d.y + ')';
	});
	}

	function drawPath(d) {
	let path;
	if (this.children) {
	path = this.children[0];
	} else {
	path = this.node();
	}

	const x1 = d.source.x;
	const y1 = d.source.y;
	const y2 = d.target.y;
	const x2 = d.target.x;
	const w2 = d.target.width/2 + 3;
	const h2 = d.target.height/2 + 3;

	const dx = x1 - x2;
	const dy = y1 - y2;
	const m12 = dy / dx;
	const m2 = h2 / w2;

	let x2a;
	let y2a;

	if ( Math.abs(m12) > Math.abs(m2) ) {
	// if slope of line is greater than aspect ratio of box
	// line exits out the bottom
	x2a = x2 + dy/Math.abs(dy) * h2 / m12;
	y2a = y2 + dy/Math.abs(dy) * h2;
	} else {
	// line exits out the side
	x2a = x2 + dx/Math.abs(dx) * w2;
	y2a = y2 + dx/Math.abs(dx) * w2 * m12;
	}

	d3.select(path)
	.attr('d', `
	M ${x1} ${y1}
	L ${x2a} ${y2a}
	`);
	}

	function newVertexAtMouse() {
	var x = d3.mouse(world.node())[0];
	var y = d3.mouse(world.node())[1];
	newVertex(x, y);
	}

	function newVertex(x = 0, y = 0) {
	var lastVertexId = 0;

	vertices.forEach(function(vertex){
	if (vertex.id > lastVertexId) {
	lastVertexId = vertex.id;
	}
	});

	var vertex = {id: ++lastVertexId, title: 'New', type: '', x: x, y: y};

	vertices.push(vertex);
	selectObj(vertex);
	inspector.focus();

	update();
	simulation.alpha(0.3).restart();
	return vertex;
	}

	function deleteObj(obj) {
	if (vertices.indexOf(obj) !== -1) {
	vertices.splice(vertices.indexOf(obj), 1);

	edges = edges.filter(function (edge) {
	return (edge.source !== obj && edge.target !== obj);
	});
	}

	if (edges.indexOf(obj) !== -1) {
	edges.splice(edges.indexOf(obj), 1);
	}

	update();
	simulation.alpha(0.3).restart();
	}

	function bldgDragStart(d) {
	source = d;

	if (!ctrlPressed) {
	dragging = true; // dragging the bldg
	} else {
	dragging = false; // drawing new edge
	}
	}

	function bldgDragProgress(d) {
	var tx, ty;
	if (dragging) {
	source.fx = d3.event.x;
	source.fy = d3.event.y;
	} else {
	if (target && target !== source) {
	drawPath.call(linePreview, {source, target});
	} else {
	tx = d3.mouse(world.node())[0];
	ty = d3.mouse(world.node())[1];
	linePreview
	.style('display', 'inline')
	.style('marker-end', 'url(#end-arrow)')
	.attr('d', function(d) {
	return `M ${source.x} ${source.y} L ${tx} ${ty}`
	});
	}
	}

	simulation.alpha(0.3).restart();
	}

	function bldgDragEnd(d) {
	linePreview
	.style('display', 'none');

	if (dragging) {
	if (!d.fixed) {
	source.fx = null;
	source.fy = null;
	}
	} else {
	if (target) {
	if (source !== target && !edgeExists(source, target)) {
	edges.push({source: source, target: target});
	updateInspector(selected);
	}
	}
	}

	update();
	}

	function bldgHover(d) {
	target = d;
	d3.select(this).classed('hover', true);
	}

	function bldgUnHover(d) {
	target = null;
	d3.select(this).classed('hover', false);
	}

	function lineHover(d) {
	line = d;
	}

	function lineUnHover(d) {
	line = null;
	}

	function selectObj(subject) {
	if (d3.event) {
	d3.event.stopPropagation();
	}

	if (subject === selected) {
	// TODO: re-implement for multi-select
	// do not interfere with dblclick
	// subject = null;
	}

	selected = subject;

	edges.forEach(function(edge) {
	edge.selected = false;
	});

	vertices.forEach(function(vertex) {
	vertex.selected = false;
	});

	updateInspector(selected);

	update();
	}

	function updateInspector(subject) {
	inspector.title.node().value = '';
	inspector.type.node().value = '';
	inspector.to.node().innerText = '';
	inspector.from.node().innerText = '';

	if (subject && subject.title !== '') {
	subject.selected = true;

	inspector.title.node().value = subject.title;
	inspector.type.node().value = subject.type;

	var from = inspector.from
	.append('ul');

	edges.forEach(function(edge) {
	if (edge.target === subject) {
	let li = from.append('li');
	li.append('a')
	.text(edge.source.title)
	.on('click', function() {
	selectObj(edge.source);
	});
	li.append('a')
	.text('×')
	.on('click', function() {
	deleteObj(edge);
	updateInspector(subject);
	});
	}
	});

	from.append('li')
	.text('+')
	.on('click', function() {
	var vertex = newVertex();
	edges.push({source: vertex, target: subject});
	updateInspector(vertex);
	update();
	});

	var to = inspector.to
	.append('ul');

	edges.forEach(function(edge) {
	if (edge.source === subject) {
	let li = to.append('li');
	li.append('a')
	.text(edge.target.title)
	.on('click', function() {
	selectObj(edge.target);
	});
	li.append('a')
	.text('×')
	.on('click', function() {
	deleteObj(edge);
	updateInspector(subject);
	});
	}
	});

	to.append('li')
	.text('+')
	.on('click', function() {
	var vertex = newVertex();
	edges.push({source: subject, target: vertex});
	updateInspector(vertex);
	update();
	});

	} else {
	if (subject && subject.title === '') {
	deleteObj(subject);
	}
	}
	}

	function fixBldg(subject) {
	if (subject && subject.fixed) {
	d3.select(this).classed('fixed', false);
	subject.fixed = false;
	subject.fx = null;
	subject.fy = null;
	simulation.alpha(0.3).restart();
	} else if (subject) {
	d3.select(this).classed('fixed', true);
	subject.fixed = true;
	subject.fx = subject.x;
	subject.fy = subject.y;
	}
	}

	function edgeExists(source, target) {
	for (var i = 0; i < edges.length; i++) {
	if (source === edges[i].source && target === edges[i].target) {
	return true;
	}
	}
	}

	function exportGraph() {
	var cleanEdges = edges.map(function(edge) {
	var cleanEdge = Object.assign({}, edge);
	cleanEdge.source = cleanEdge.source.id;
	cleanEdge.target = cleanEdge.target.id;
	return cleanEdge;
	});

	var cleanGraph = {vertices: vertices, edges: cleanEdges};
	return JSON.stringify(cleanGraph);
	}

	function importGraph(dirtyGraph) {
	// TODO: check for duplicate IDs
	var graph = JSON.parse(dirtyGraph);

	vertices = [];
	edges = [];

	vertices = graph.vertices;
	edges = graph.edges;
	update();
	simulation.alpha(1).restart();
	}

	function windowKeydown(d) {
	if (d3.event.target.type !== "text") {
	switch(d3.event.keyCode) {
	case 16: // shift
	case 17: // ctrl
	case 18: // alt
	case 91: // cmd
	ctrlPressed = true;
	svg.attr('style', 'cursor: pointer');
	break;
	case 8: // backspace
	case 46: // delete
	case 68: // d
	d3.event.preventDefault();
	world.selectAll('.selected').each(deleteObj);
	target = null;
	break;
	case 80: // p
	world.selectAll('.selected').each(fixBldg);
	break;
	case 27: // esc
	selectObj(null);
	break;
	default:
	break;
	}
	}
	}

	function windowKeyup() {
	switch(d3.event.keyCode) {
	case 16: // shift
	case 17: // ctrl
	case 18: // alt
	case 91: // cmd
	ctrlPressed = false;
	svg.attr('style', 'cursor: default');
	break;
	default:
	break;
	}
	}

	function resize() {
	var windowWidth = window.innerWidth,
	windowHeight = window.innerHeight;

	width = windowWidth - 258,
	height = windowHeight - 10;

	svg
	.attr('width', width)
	.attr('height', height);

	simulation
	.alpha(0.3).restart();
	}

	function zoomed() {
	world.attr('transform', d3.event.transform);
	}
	html {
	box-sizing: border-box;
	}

	, :before, *:after {
	box-sizing: inherit;
	}

	body {
	margin: 5px;
	width: 100%;
	height: 100%;
	}

	#inspector {
	border: 2px solid black;
	width: 250px;
	height: calc(100% - 10px);
	position: absolute;
	top: 5px;
	right: 5px;
	overflow: scroll;
	background: rgba(255,255,255,0.8);
	padding: 1em;
	}

	#inspector input {
	font-size: 0.85em;
	width: 100%;
	height: 2em;
	margin-bottom: 0.5em;
	padding-left: 0.25em;
	}

	#inspector ul {
	list-style: none;
	text-decoration: none;
	margin: 0;
	padding: 0;
	}

	#inspector li {
	display: inline-block;
	border: 1px solid white;
	border-radius: 0.5em;
	margin: 1px 2px;
	font-size: 0.75em;
	cursor: default;
	}

	#inspector li:hover {
	border: 1px solid black;
	}

	#inspector li:last-child {
	width: 2em;
	text-align: center;
	}

	.from li {
	background-color: #dcd;
	}

	.from a:first-child:before {
	content: '← ';
	padding-left: 0.5em;
	}

	.to li {
	background-color: #ddc;
	}

	.to a:first-child:before {
	content: '→ ';
	padding-left: 0.5em;
	}

	#inspector a:last-child {
	display: inline-block;
	background-color: rgba(255, 0, 0, 0.25);
	width: 1.25em;
	margin-left: 0.5em;
	margin-right: 0;
	border-radius: 100%;
	text-align: center;
	font-size: 1em;
	}

	#inspector a:last-child:hover {
	background-color: rgba(255, 0, 0, 0.5);
	}

	svg {
	border: 2px solid black;
	}

	rect {
	stroke-width: 2;
	fill: #fff;
	}

	.hover rect {
	stroke-width: 3.5;
	}

	.fixed rect {
	fill: #eee;
	}

	path.selected, .selected rect {
	stroke-width: 3;
	}

	path {
	stroke: #000;
	stroke-width: 2;
	fill: none;
	}

	path:hover {
	stroke-width: 3;
	}

	line {
	stroke: #000;
	stroke-width: 2;
	}

	text {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
	}