var sequence=0; function Block( point ) { var self=this; //+ DREVOR this.name = sequence++; this.point = point; this.slots = [ null, null, null, null ]; this.blockGroup = null; this.window = new Window(); this.window.id = "Window#" + this.name; this.window.shadow = 1; this.window.hOffset = point.x; this.window.vOffset = point.y; print(this.window.id); this.canvas = new Canvas(); this.canvas.id = "Canvas" + this.name; this.canvas.width = 100; this.canvas.height = 100; //+DREVOR -> this.canvas.onMouseDrag = function() { self.canvas.block.point=new Point(system.event.screenX,system.event.screenY); self.canvas.window.hOffset=self.canvas.block.point.x; self.canvas.window.vOffset=self.canvas.block.point.y; if(self.canvas.block.blockGroup!==null) self.canvas.block.blockGroup.drag(self.canvas.block); }; //<- DREVOR this.canvas.block = this; this.window.appendChild( this.canvas ); this.width = this.canvas.width; this.height = this.canvas.height; var temp = this.canvas.getContext( '2d' ); temp.beginPath(); temp.fillStyle = "rgba( 139, 125, 107, .7 )"; temp.rect( 0, 0, this.canvas.width, this.canvas.height ); temp.fill(); temp.stroke(); temp.rect( 10, 10, this.canvas.width - 20, this.canvas.height - 20 ); temp.stroke(); temp.clearRect( 10, 10, this.canvas.width - 20, this.canvas.height - 20 ); temp.fillStyle = "rgba( 255, 255, 255, .7 )"; temp.rect( 10, 10, this.canvas.width - 20, this.canvas.height - 20 ); temp.fill(); temp.closePath(); this.snapTo = function( point ) { print( point ); } this.toString = function() { return "Block( " + this.point + ", Window( Point( " + this.window.hOffset + ", " + this.window.vOffset + " ) ), Canvas( Point( " + this.canvas.hOffset + ", " + this.canvas.vOffset + " ) )"; } } function BlockGroup() { this.blocks = []; this.add = function( newBlock ) { newBlock.blockGroup = this; this.blocks[ this.blocks.length ] = newBlock; } this.drag = function( block ) { var point = block.point; for( var i = 0; i < this.blocks.length; i++ ) { if( point.x + block.width < this.blocks[ i ].x && ( point.y > this.blocks[ i ].y || point.y + block.height < this.blocks[ i ].y + this.blocks[ i ].height ) ) { block.snapTo( new Point( this.blocks[ i ].x - block.width, this.blocks[ i ].y ) ); break; } if( point.x > this.blocks[ i ].x + this.blocks[ i ].width && ( point.y > this.blocks[ i ].y || point.y + block.height < this.blocks[ i ].y + this.blocks[ i ].height ) ) { block.snapTo( new Point( this.blocks[ i ].x + this.blocks[ i ].width, this.blocks[ i ].y ) ); break; } if( point.y + block.width < this.blocks[ i ].y && ( point.x > this.blocks[ i ].x || point.x + block.height < this.blocks[ i ].x + this.blocks[ i ].height ) ) { block.snapTo( new Point( this.blocks[ i ].x, this.blocks[ i ].y - block.height ) ); break; } if( point.y > this.blocks[ i ].y + this.blocks[ i ].width && ( point.x > this.blocks[ i ].x || point.x + block.height < this.blocks[ i ].x + this.blocks[ i ].height ) ) { block.snapTo( new Point( this.blocks[ i ].x, this.blocks[ i ].y + this.blocks[ i ].height ) ); break; } } } } // How to use... var a = new Block( new Point( screen.width/2 - 500, screen.height/2 ) ); var b = new Block( new Point( screen.width/2, screen.height/2 ) ); var c = new BlockGroup(); c.add( a ); c.add( b );