JSFiddle - React, Tailwind, and code Playground

by jonase

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

svg { 
    background-color: #eee;
}

JavaScript 1.7

var dom = React.DOM;

var Circle = React.createClass({
    render: function() {
        return dom.circle({
          cx: this.props.cx,
          cy: this.props.cy,
          r: this.props.r
        });
    }       
});

var Canvas = React.createClass({
    getInitialState: function() {
        return {
          panning: false,
          panStart: null,
          mouse: null,
          pan: {x: 0, y: 0},
          zoom: 1,
          viewBox: [6,6,31,46]
        };
    },
    
    viewbox: function() {
        var defaultWidth = 40;
        var defaultHeight = 40;
        
        var z = this.state.zoom;
        var p = this.state.pan;
        
        var newWidth = defaultWidth/z;
        var newHeight = defaultHeight/z;
        
        return [p.x, p.y, newWidth, newHeight].join(" ");
    },
    
    zoom: function(e) {
        var k = e.deltaY < 0 ? 0.1: -0.1;
        this.setState({zoom: this.state.zoom += k})
    },
    
    pan: function(e) {
        if(this.state.panning) {
          this.setState({pan: {x: this.state.panStart.x + 
                                  (this.state.mouse.x - e.clientX) / 
                                  (10*this.state.zoom),
                               y: this.state.panStart.x + 
                                  (this.state.mouse.y - e.clientY) / 
                                  (10*this.state.zoom)}});
        }
    },
    
    panStart: function(e) {
        this.setState({panning: true, 
                       panStart: {x: this.state.pan.x, y: this.state.pan.y},
                       mouse: {x: e.clientX, y: e.clientY}});
    },
    
    panEnd: function(e) {
        this.setState({panning: false, panStart: null, mouse: null});
    },
    
    render: function() {
        return dom.svg({
          width:this.props.viewPort.width,
          height:this.props.viewPort.height,
          viewBox:this.viewbox(),
          onWheel:this.zoom,
          onMouseDown: this.panStart,
          onMouseUp: this.panEnd,
   ...