visual rendering of the active bindings on a derby page

index.js

var p = APP.page
var eventModel = p._eventModel
var bs = eventModel.bindingWrappers

/*

renderBindings
listExpressions
listElements

*/

function getExpression(e) {
  if(e.content) {
    e.content.forEach(function(c) {
      if(c.content) return getExpression(e);
      if(c.meta) return c.meta.source;
      if(c.data) return c.data;
    })
  }
  if(e.meta) {
    return e.meta.source;
  }
}

function listExpressions() {
  bs.forEach(function(b) { 
    //console.log(b);
    console.log(getExpression(b.expression))
  })
}

function listElements() {
  bs.forEach(function(b) { 
    //console.log(b);
    console.log("===========================")
    console.log(getExpression(b.expression))
    if(b.binding.element) { 
      console.log("el", b.binding.element) 
    } else if( b.binding.start && b.binding.end) { 
      p.getRange(b.binding.start, b.binding.end) 
    } 
    console.log("===========================")
  })
}

function renderBindings() {
  //loop over the binding wrappers and create the bounding boxes for all bindings
  var layout = []
  bs.forEach(function(b) {
    var d = { 
      id: b.id, 
      x: Infinity, y: Infinity, w: 0, h: 0,
      expression: getExpression(b.expression),
      updates: 0
    }
    if(b.binding.element) { 
      d.element = b.binding.element;
      var bbox = d.element.getBoundingClientRect();
      //console.log("el", d.element, bbox) 

      d.x = bbox.left;
      d.y = bbox.top;
      d.w = bbox.width;
      d.h = bbox.height;
      layout.push(d)
      //console.log(bbox.left, d.x, bbox.width, d.w)
    } /*else if( b.binding.start && b.binding.end) { 
      var elements = getRange(b.binding.start, b.binding.end) 
      elements.forEach(function(e) {
        if(!e.getBoundingClientRect) return;
        var bbox = e.getBoundingClientRect();
        if(bbox.left < d.x) d.x = bbox.left
        if(bbox.top < d.y) d.y = bbox.top
        if(bbox.width > d.w) d.w = bbox.width
        if(bbox.height > d.h) d.x = bbox.height
      })
    }*/
  })
  console.log(layout)
  eventModel._layout = layout;

/*
  try {
    console.log("d3", d3)
  } catch (e) {
    */
    setupCanvas()
    drawCanvas()
    setInterval(function() {
      drawCanvas();
    }, 100)

  //}
}

var canvas;
function setupCanvas() {
  canvas = document.createElement("canvas")
  //canvas.setAttribute('width', "100%");
  //canvas.setAttribute('height', "100%");
  canvas.setAttribute('width', "2000");
  canvas.setAttribute('height', "3000");
  canvas.style.position = "fixed";
  canvas.style.top = 0;
  canvas.style.left = 0;
  canvas.style["pointer-events"] = "none";
  document.body.appendChild(canvas)
}

var scrollEl = document.getElementsByClassName("infinite-scroll")[0]
if(!scrollEl) {
  scrollEl = document.getElementsByClassName("content")[0]
}
var offset = 0;
function drawCanvas() {
  if(scrollEl) offset = scrollEl.scrollTop
  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = "rgba(250,250,250, 0.1)";
  ctx.strokeStyle = "rgba(20,20,20, 0.2)";
  eventModel._layout.forEach(function(d) {
    if(d.updates >= 1) {
      //ctx.fillStyle = "rgba(" + [255 - d.updates*5, 255 - d.updates*5,255 - d.updates*5] +  ", 0.5)";
      ctx.fillStyle = "rgba(" + [d.updates*5, 55,55] +  ", 0.5)";
    } else {
      ctx.fillStyle = "rgba(250,250,250, 0.1)";
    }

    //ctx.fillRect (d.x, d.y, d.w, d.h);
    //ctx.strokeRect (d.x, d.y, d.w, d.h);
    ctx.fillRect (d.x, d.y - (offset || 0), d.w, d.h);
    ctx.strokeRect (d.x, d.y - (offset || 0), d.w, d.h);
  })
}

function getRange(start, end, innerOnly) {
  // Note: the calling function must make sure to check that there is a parent
  var parent = start.parentNode;
  if (start === end) {
    return [start];
  }
  // Remove all nodes from start to end
  var node = (innerOnly) ? start.nextSibling : start;
  var nextNode;
  var nodes = []
  while (node) {
    //console.log("node", node)
    nodes.push(node)
    nextNode = node.nextSibling;
    if (innerOnly && node === end) {
      nextNode = end;
      break;
    }
    if (node === end) break;
    node = nextNode;
  }
  return [nodes]
}

eventModel.__proto__.localUpdate = function(pass) {
  if (this.bindings) {
    for (var id in this.bindings) {
      var binding = this.bindings[id];
      if(eventModel._layout){
        for(var i = 0; i < eventModel._layout.length; i++) {
          if(eventModel._layout[i].id == id) {
            eventModel._layout[i].updates++;
            break;
          }
        }
      }
      binding.update(pass);
    }
  }

  // If our value changed, we also need to update anything that depends on it
  // via refOut.
  if (this.refOut) {
    for (var id in this.refOut) {
      var ref = this.refOut[id];
      ref.update();
    }
  }
};
renderBindings()