pointvec/scripts/dotgrid.js

function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round", color = "#000000")
{
  this.width = width;
  this.height = height;
  this.grid_x = grid_x;
  this.grid_y = grid_y;
  this.block_x = block_x;
  this.block_y = block_y;

  this.thickness = thickness;
  this.linecap = linecap;
  this.color = color;

  this.element = null;

  this.grid_width = this.width/this.grid_x;
  this.grid_height = this.height/this.grid_y;

  var cursor = null;
  var cursor_from = null;
  var cursor_to = null;
  var cursor_end = null;

  var from = null;
  var to = null;
  var end = null;

  this.svg_el = null;

  this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  this.segments = [];
  this.interface = document.createElement("div");
  this.interface.id = "interface";

  this.install = function()
  {
    // Dotgrid
    this.element = document.createElement("div");
    this.element.id = "dotgrid";
    this.element.style.width = this.width;
    this.element.style.height = this.height;
    document.body.appendChild(this.element);
    document.body.appendChild(this.interface);

    // Markers
    for (var x = this.grid_x; x >= 0; x--) {
      for (var y = this.grid_y; y >= 0; y--) {
        var marker = document.createElement("div");
        marker.setAttribute("class",(x % this.block_x == 0 && y % this.block_y == 0 ? "marker block" : "marker"));
        marker.style.left = parseInt(x * this.grid_width + (this.grid_width/2)) +5;
        marker.style.top = parseInt(y * this.grid_height + (this.grid_height/2)) +5;
        this.element.appendChild(marker);
      }
    }

    // Cursors
    this.cursor = document.createElement("div");
    this.cursor.id = "cursor";
    this.element.appendChild(this.cursor);

    cursor_from = document.createElement("div");
    cursor_from.id = "cursor_from";
    this.element.appendChild(cursor_from);

    cursor_to = document.createElement("div");
    cursor_to.id = "cursor_to";
    this.element.appendChild(cursor_to);

    cursor_end = document.createElement("div");
    cursor_end.id = "cursor_end";
    this.element.appendChild(cursor_end);

    // Vector
    this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    this.svg_el.setAttribute("class","vector");
    this.svg_el.setAttribute("width",this.width+"px");
    this.svg_el.setAttribute("height",this.height+"px");
    this.svg_el.setAttribute("xmlns","http://www.w3.org/2000/svg");
    this.svg_el.setAttribute("baseProfile","full");
    this.svg_el.setAttribute("version","1.1");
    this.svg_el.style.width = this.width;
    this.svg_el.style.height = this.height;
    this.svg_el.style.stroke = this.color;
    this.svg_el.style.strokeWidth = this.thickness;
    this.svg_el.style.fill = "none";
    this.svg_el.style.strokeLinecap = this.linecap;
    this.element.appendChild(this.svg_el);

    this.svg_el.appendChild(this.path);    
  }

  // Cursor

  this.mouse_down = function(e)
  {
  }

  this.mouse_move = function(e)
  {
    var pos = this.position_in_grid(e.clientX,e.clientY);
    pos = this.position_on_grid(pos[0],pos[1]);

    this.cursor.style.left = -pos[0];
    this.cursor.style.top = pos[1];
  }

  this.mouse_up = function(e)
  {
    var pos = this.position_in_grid(e.clientX,e.clientY);
    pos = this.position_on_grid(pos[0],pos[1]);

    pos = [pos[0]+10,pos[1]-10]
    
    if(from === null){ this.set_from(pos); }
    else if(to === null){ this.set_to(pos); }
    else{ this.set_end(pos); }
    this.draw();
  }

  // Setters

  this.set_from = function(pos)
  {
    from = pos;

    cursor_from.style.left = -pos[0] + 10;
    cursor_from.style.top = pos[1] + 10;
  }

  this.set_to = function(pos)
  {
    cursor_to.style.left = -pos[0] + 10;
    cursor_to.style.top = pos[1] + 10;

    to = pos;
  }

  this.set_end = function(pos)
  {
    cursor_end.style.left = -pos[0] + 10;
    cursor_end.style.top = pos[1] + 10;

    end = pos;
  }

  this.mod_thickness = function(mod)
  {
    this.thickness += mod;
    this.draw();
  }

  this.mod_linecap_index = 1;

  this.mod_linecap = function(mod)
  {
    var a = ["butt","square","round"];
    this.mod_linecap_index += 1;
    this.linecap = a[this.mod_linecap_index % a.length];
    this.draw();
  }

  this.mod_move = function(x,y)
  {
    if(!to && !end){
      this.set_from([from[0]+(x*10),from[1]+(y*10)])
    }
    this.draw();
  }

  this.draw = function()
  {
    var d = "";
    var prev = "";
    for(id in this.segments){
      var segment = this.segments[id];
      d += segment.to_segment(prev)+" ";
      prev = segment;
    }

    this.path.setAttribute("d",d);

    this.svg_el.style.width = this.width;
    this.svg_el.style.height = this.height;
    this.svg_el.style.stroke = this.color;
    this.svg_el.style.strokeLinecap = this.linecap;
    this.svg_el.style.strokeWidth = this.thickness;

    this.update_interface();
  }

  // Draw
  this.add_line = function()
  {
    if(from === null || to === null){ return; }

    var end_point = end ? new Pos(end[0] * -1,end[1]) : null;
    this.segments.push(new Path_Line(new Pos(from[0] * -1,from[1]),new Pos(to[0] * -1,to[1]),end_point));

    this.draw();
    reset();
  }

  this.draw_arc = function(orientation)
  {
    if(from === null || to === null){ return; }

    var end_point = end ? new Pos(end[0] * -1,end[1]) : null;
    this.segments.push(new Path_Arc(new Pos(from[0] * -1,from[1]),new Pos(to[0] * -1,to[1]),orientation,end_point));

    this.draw();
    reset();
  }

  this.draw_bezier = function()
  {
    if(from === null || to === null){ return; }  

    this.segments.push(new Path_Bezier(new Pos(from[0] * -1,from[1]),new Pos(to[0] * -1,to[1]),new Pos(end[0] * -1,end[1])));

    this.draw();
    reset();
  }

  this.draw_dot = function()
  {
    var s = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    s.setAttribute("cx",-from[0]);
    s.setAttribute("cy",from[1]);
    s.setAttribute("r","2");
    s.setAttribute("fill","black");
    this.svg_el.appendChild(s);

    reset();
  }

  this.draw_circle = function()
  {
    if(from === null || to === null){ return; }

    var s = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    s.setAttribute("cx",-from[0]);
    s.setAttribute("cy",from[1]);
    s.setAttribute("r",(from[0] - to[0]));
    this.svg_el.appendChild(s);

    reset();
  }

  this.draw_rect = function()
  {
    if(from === null || to === null){ return; }

    var s = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    s.setAttribute("x",-from[0]);
    s.setAttribute("y",from[1]);
    s.setAttribute("width",Math.abs(to[0]) - Math.abs(from[0]));
    s.setAttribute("height",Math.abs(to[1]) - Math.abs(from[1]));
    this.svg_el.appendChild(s);

    reset();
  }

  this.reset = function()
  {
    reset();
  }

  function reset()
  {
    from = null;
    to = null;
    end = null;
    cursor_from.style.left = -100;
    cursor_from.style.top = -100;
    cursor_to.style.left = -100;
    cursor_to.style.top = -100;
    cursor_end.style.left = -100;
    cursor_end.style.top = -100;
  }

  this.erase = function()
  {
    this.reset();
    this.segments.pop();
    this.draw();
  }

  this.export = function()
  {
    var w = window.open('about:blank');
    w.document.write("<title>Export</title>");
    w.document.write("<body></body>");
    w.document.body.innerText += this.svg_el.outerHTML;
  }

  this.update_interface = function()
  {
    var html = "";

    html += "~"+this.thickness+" ";
    html += "/"+this.linecap+" ";

    if(from){ html += ">" }
    if(to){ html += ">" }
    if(end){ html += ">" }

    html += " "

    if(to){ html += "aA sS d f" }
    if(end){ html += ">" }

    this.interface.innerHTML = html;
  }

  // Normalizers

  this.position_in_grid = function(x,y)
  {
    return [(window.innerWidth/2) - (this.width/2) - x,y - 50];
  }

  this.position_on_grid = function(x,y)
  {
    x = parseInt(x/this.grid_width) * this.grid_width - (this.grid_width/2) + 5;
    y = parseInt(y/this.grid_height) * this.grid_height + (this.grid_height/2) +5;
    return [parseInt(x),parseInt(y)];
  }
}