tributary resize

_.md

[ Launch: tributary resize ] 7069096 by colster

config.json

{"description":"tributary resize","endpoint":"","display":"svg","public":true,"require":[{"name":"d3","url":"http://d3js.org/d3.v3.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"setup.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"test.json":{"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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/FPHyiGu.png","inline-console":false}

inlet.js

var test = tributary.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;
  

  test.x = x + translate[0];
  test.y = y + translate[1];
  test.w = w * scale;
  test.h = h * scale;
  
  d3.select("rect").attr(test);
  updateTest();
})

svg.call(zoom);

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

setup.js

//http://codemiorror.net/doc/manual.html

var fontSize = 16;

// capture the code editor window for inlet.js using the tributary API
var cm = tributary.getCodeEditor("setup.js" );

var wrap = cm. getWrapperElement();

d3.select(wrap).select(".CodeMirror-scroll")
.style({
  "font-size": fontSize + 'px',
  "line-height": fontSize +'px'
})

cm.setOption("tabSize", 4);
cm.setOptino("imdentUnit", 4);
cm.refresh()

style.css

rect {
	fill: #CA6262;
    stroke: #000;
    stroke-width:3 px;
  	rx = 5px;
  	ry = 5px;
}

test.json

{"x":142,"y":141,"width":200,"height":200,"w":200,"h":200}