prototype: box json

_.md

[ Launch: Tributary inlet ] 4700584 by enjalot

config.json

{"description":"prototype: box json","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"test.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"fullscreen":false,"thumbnail":"http://i.imgur.com/KgXdncn.png"}

inlet.js

var test = tributary.test;
console.log(test);

var x = test.x;
var y = test.y;
var w = test.width;
var h = test.height;

var svg = d3.select("svg");

svg.append("rect")
.attr(test);


var zoom = d3.behavior.zoom()
.on("zoom", function() {
  var scale = d3.event.scale;
  var translate = d3.event.translate;
  
  //console.log(scale, translate);

  test.x = x + translate[0];
  test.y = y + translate[1];
  test.width = w * scale;
  test.height = h * scale;

  d3.select("rect").attr(test);
  updateTest();
})

svg.call(zoom);


function updateTest() {
  var cm = tributary.getCodeEditor("test.json");
  cm.setValue(JSON.stringify(test));
}

style.css

rect {
  fill: #CA6262;
  stroke: #000000;
  stroke-width: 3;
}

test.json

{"x":91.20585789736927,"y":273.0809537877534,"width":287.9862637029376,"height":287.9862637029376,"rx":5,"ry":5}