var canvas = Raphael(10, 50, 1600, 1300);

canvas.canvas.style.backgroundColor = '#34495e';

​

​

var ModuleRect = function(x,y,data){

  this.x = x || 0;

  this.y = y|| 0;

  this.width = 180;

  this.height = 300;

  this.title = data.title || 'notitle';

  this.inject = data.inject || [];

  this.export = data.export || {};

  var self = this;

  this.draw = function(){

    var st = canvas.set();

    var c = canvas.rect(self.x, self.y, self.width, self.height);

    c.attr({'fill': '#34495e'});

    st.push(c);

    var t = canvas.text(self.x+100, self.y+10, self.title);

     st.push(t);

    var len = self.inject.length;

    for (var i=0;i<len;i++){

      var text = self.inject[i];

      st.push(text);

      var c = canvas.circle(self.x+self.width, self.y+i*20+10, 5).attr({'fill': 'white'});

      var t = canvas.text(self.x+30, self.y+i*20+10, text).attr({'text-anchor': 'start'});

    }

    var n = 0;

    for (var key in self.export){

      var val = self.export[key];

      var c = canvas.circle(self.x, self.y+n*20+150, 5).attr({'fill': 'white'});

      var t = canvas.text(self.x+10, self.y+n*20+150, key+':'+val).attr({'text-anchor': 'start'});

      n++;

    }

​

      var start = function () {

                    this.ox = this.attr("x");

                    this.oy = this.attr("y");

                    this.animate({ opacity: .25}, 500, ">");

                },

                move = function (dx, dy) {

                    this.attr({x: this.ox + dx, y: this.oy + dy});

                },

                up = function () {

                    this.animate({ opacity: .5}, 500, ">");

                };

                 st.drag(move, start, up);

  }

}

​

​

var data = {

  title:'mover',

  inject:["pubsub", "stage", "mover", "blocks", "assets"],

  export:{

        scene: 'THREE.Scene',

        renderer: 'THREE.WebGLRenderer',

        camera: 'THREE.PerspectiveCamera',

        container: 'HTMLElement',

        controls: 'THREE.OrbitControls',

        walls: '[]',

        room: '{}'

    }

}

​

​

var m1 = new ModuleRect(100,100,data);

m1.draw();

​

​

var m2 = new ModuleRect(400,200,data);

m2.draw();