dgraph-javascript/dot-parser/js/demo.js

// Generated by CoffeeScript 1.4.0
/*
# Code to render a parsed xdot file as an SVG
*/

var renderCurrent, renderDotGraph, renderToSvg;

renderCurrent = function() {
  window.ast = DotParser.parse(document.querySelector('textarea').value);
  console.log(ast);
  window.graph = new DotGraph(ast);
  console.log(graph);
  return graph.walk();
};

renderToSvg = function(graph) {
  var createElm, createElmNS, dragging, floatList, g, getCoords, i, k, label, n, offsetx, offsety, oldx, oldy, parser, path, points, pos, rect, rx, ry, text, tspan, x, xml, _ref, _ref1;
  floatList = function(l) {
    var v, _i, _len, _ref, _results;
    _ref = l.split(',');
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      v = _ref[_i];
      _results.push(parseFloat(v));
    }
    return _results;
  };
  createElm = function(name, attrs, parent) {
    var elm, k, v;
    if (attrs == null) {
      attrs = {};
    }
    elm = document.createElement(name);
    for (k in attrs) {
      v = attrs[k];
      elm.setAttribute(k, v);
    }
    if (parent != null) {
      parent.appendChild(elm);
    }
    return elm;
  };
  createElmNS = function(name, attrs, parent) {
    var elm, k, v;
    if (attrs == null) {
      attrs = {};
    }
    elm = document.createElementNS("http://www.w3.org/2000/svg", name);
    for (k in attrs) {
      v = attrs[k];
      elm.setAttribute(k, v);
    }
    if (parent != null) {
      parent.appendChild(elm);
    }
    return elm;
  };
  window.div = createElm('div', {}, document.body);
  window.svg = createElmNS('svg', {
    width: 700,
    height: 500
  }, div);
  window.bb = createElmNS('g', {
    transform: "translate(0,0)"
  }, svg);
  parser = new DOMParser();
  _ref = graph.nodes;
  for (k in _ref) {
    n = _ref[k];
    if (n.attrs.pos) {
      pos = floatList(n.attrs.pos);
      label = n.attrs.label;
      try {
        label = label.replace("\\N", k);
      } catch (e) {
        '';

      }
      if (label.value) {
        try {
          xml = parser.parseFromString("<root>" + label.value + "</root>", "text/xml");
          label = ((function() {
            var _i, _len, _ref1, _results;
            _ref1 = xml.querySelectorAll('font');
            _results = [];
            for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
              x = _ref1[_i];
              _results.push(x.textContent);
            }
            return _results;
          })()).join('\n');
        } catch (e) {
          console.log(label.value);
          label = '' + label.value;
        }
      }
      rx = parseFloat(n.attrs.width) * 36;
      ry = parseFloat(n.attrs.height) * 36;
      rect = createElmNS('rect', {
        id: k,
        x: pos[0] - rx,
        y: pos[1] - ry,
        width: rx * 2,
        height: ry * 2,
        stroke: 'black',
        fill: 'none',
        rx: 10
      }, bb);
      g = createElmNS('g', {
        transform: "translate(" + pos[0] + "," + pos[1] + ")"
      }, bb);
      text = createElmNS('text', {
        x: 0,
        y: 0,
        'text-anchor': 'middle',
        'font-family': 'sans',
        'font-size': 12,
        fill: 'red'
      }, g);
      tspan = createElmNS('tspan', {
        x: 0,
        y: -5
      }, text);
      tspan.textContent = label.split('\n')[0];
      tspan = createElmNS('tspan', {
        x: 0,
        y: 12,
        fill: 'blue'
      }, text);
      tspan.textContent = '' + ('' + label).split('\n')[1];
    }
  }
  _ref1 = graph.edges;
  for (k in _ref1) {
    e = _ref1[k];
    e = e[0];
    if (e.attrs.pos) {
      points = e.attrs.pos.slice(2).split(' ').map(floatList);
      path = "M " + points[1][0] + " " + points[1][1];
      i = 2;
      while (i < points.length) {
        path += " C " + [points[i][0], points[i][1], points[i + 1][0], points[i + 1][1], points[i + 2][0], points[i + 2][1]].join(' ');
        i += 3;
      }
      createElmNS('path', {
        d: path,
        stroke: 'blue',
        fill: 'none'
      }, bb);
    }
  }
  dragging = false;
  oldx = oldy = 0;
  offsetx = offsety = 0;
  getCoords = function(evt) {
    rect = svg.getBoundingClientRect();
    return [evt.pageX - div.offsetLeft, evt.pageY - div.offsetTop];
    return [evt.clientX - rect.left, evt.clientY - rect.top];
  };
  svg.onmousedown = function(evt) {
    var y, _ref2;
    _ref2 = getCoords(evt), x = _ref2[0], y = _ref2[1];
    oldx = x;
    oldy = y;
    return dragging = true;
  };
  svg.onmouseup = function(evt) {
    return dragging = false;
  };
  return svg.onmousemove = function(evt) {
    var diffx, diffy, y, _ref2;
    if (dragging) {
      _ref2 = getCoords(evt), x = _ref2[0], y = _ref2[1];
      diffx = x - oldx;
      diffy = y - oldy;
      offsetx += diffx;
      offsety += diffy;
      bb.setAttribute('transform', "translate(" + offsetx + "," + offsety + ")");
      oldx = x;
      return oldy = y;
    }
  };
};

renderDotGraph = function(canvasElm, graph) {
  var bb, ctx, floatList, g, i, k, label, n, points, pos, rx, ry, _ref, _ref1, _ref2, _results;
  floatList = function(l) {
    var v, _i, _len, _ref, _results;
    _ref = l.split(',');
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      v = _ref[_i];
      _results.push(parseFloat(v));
    }
    return _results;
  };
  ctx = canvasElm.getContext("2d");
  ctx.fillStyle = 'white';
  ctx.rect(0, 0, 10000, 10000);
  ctx.fill();
  ctx.fillStyle = 'black';
  ctx.strokeStyle = 'red';
  _ref = graph.graphs;
  for (k in _ref) {
    g = _ref[k];
    if (g.attrs.bb) {
      bb = floatList(g.attrs.bb);
      ctx.beginPath();
      ctx.rect(bb[0], bb[1], bb[2] - bb[0], bb[3] - bb[1]);
      ctx.stroke();
    }
  }
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  _ref1 = graph.nodes;
  for (k in _ref1) {
    n = _ref1[k];
    if (n.attrs.pos) {
      pos = floatList(n.attrs.pos);
      label = n.attrs.label;
      try {
        label = label.replace("\\N", k);
      } catch (e) {
        console.log(label);
      }
      ctx.fillText(label, pos[0], pos[1]);
      rx = parseFloat(n.attrs.width) * 36;
      ry = parseFloat(n.attrs.height) * 36;
      ctx.beginPath();
      ctx.ellipse(pos[0] - rx, pos[1] - ry, rx * 2, ry * 2);
      ctx.stroke();
    }
  }
  ctx.strokeStyle = 'blue';
  _ref2 = graph.edges;
  _results = [];
  for (k in _ref2) {
    e = _ref2[k];
    e = e[0];
    if (e.attrs.pos) {
      points = e.attrs.pos.slice(2).split(' ').map(floatList);
      ctx.beginPath();
      ctx.moveTo(points[1][0], points[1][1]);
      i = 2;
      while (i < points.length) {
        ctx.bezierCurveTo(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1], points[i + 2][0], points[i + 2][1]);
        i += 3;
      }
      ctx.stroke();
      ctx.beginPath();
      canvas_arrow(ctx, points[points.length - 1][0], points[points.length - 1][1], points[0][0], points[0][1]);
      _results.push(ctx.stroke());
    } else {
      _results.push(void 0);
    }
  }
  return _results;
};

window.onload = function() {
  renderCurrent();
  return renderToSvg(graph);
};