function WorkspaceNode(workspace, currentUserIsOwner, streamUtilities) { var mStreamUtilities = streamUtilities; var backgroundCanvas=document.createElement( "canvas" ); backgroundCanvas.style.position = "absolute"; document.getElementById( "streamGraph" ).appendChild( backgroundCanvas ); var mHeight = 18; var mWidth = mStreamUtilities.GetTextWidth(workspace.Client, backgroundCanvas) + mHeight; var mX = 0; var mY = 0; var mWorkspace = workspace; backgroundCanvas.width = mWidth; backgroundCanvas.height = mHeight; //backgroundCanvas.style.background = 'rgba(255,255,255,.5)'; var mClickListeners = new Array(); this.addClickListener = function(listener) { mClickListeners.push(listener); } function workspaceSelected(mouseEvt) { for(var i = 0; i < mClickListeners.length; i++) mClickListeners[i].nodeClicked(workspace, mouseEvt.x, mouseEvt.y); } backgroundCanvas.onclick = function(evt) { workspaceSelected(evt); } this.position = function(x, y) { mX = x; mY = y; backgroundCanvas.style.left = x; backgroundCanvas.style.top = y; this.top = parseInt(backgroundCanvas.style.top); //console.log( 'workspace: ' + workspace.Client + ' stream: ' + workspace.Stream ); } var inc = 0; this.draw = function() { mStreamUtilities.clearCanvas(backgroundCanvas); var backgroundContext = backgroundCanvas.getContext( '2d' ); mStreamUtilities.CreateRoundedRectangle( 2, 2, backgroundCanvas.width - 4, backgroundCanvas.height - 4, backgroundCanvas.height/2, backgroundContext ); backgroundContext.save(); if( currentUserIsOwner ) { backgroundContext.fillStyle = mStreamUtilities.GetGradientFill('rgba(240,230,140, .5)', backgroundContext, backgroundCanvas); backgroundContext.fill(); backgroundContext.strokeStyle = 'darkkhaki'; } else { backgroundContext.fillStyle = mStreamUtilities.GetGradientFill('rgba(160,160,160, .5)', backgroundContext, backgroundCanvas); backgroundContext.fill(); backgroundContext.strokeStyle = 'gray'; } backgroundContext.stroke(); backgroundContext.restore(); backgroundContext.font = "normal " + backgroundCanvas.height * 0.5 + "px sans-serif"; backgroundContext.textAlign = 'center'; backgroundContext.textBaseline = "middle"; backgroundContext.fillText(workspace.Client,backgroundCanvas.width/2, backgroundCanvas.height/2 - backgroundCanvas.height * 0.02); } this.clear = function() { mStreamUtilities.clearCanvas(backgroundCanvas); backgroundCanvas.parentNode.removeChild(backgroundCanvas); } this.width = function() { return backgroundCanvas.width; } this.height = mHeight; this.element = backgroundCanvas; this.hide = function() { $(backgroundCanvas).hide(); } this.top = parseInt(backgroundCanvas.style.top); this.show = function() { $(backgroundCanvas).show(); } function move(moveUp, makeVisible) { var direction; if(moveUp) direction = '-='; else direction = '+='; if( makeVisible ) { $(backgroundCanvas).animate({ top: direction + backgroundCanvas.height }, 100, function() { $(backgroundCanvas).show();// show after the animation is complete. }); } else { $(backgroundCanvas).hide();// hide before the animation starts $(backgroundCanvas).animate({ top: direction + backgroundCanvas.height }, 100, function() { // Animation complete. }); } } this.moveUp = function(makeVisible) { this.top = parseInt(backgroundCanvas.style.top) - backgroundCanvas.height; move(true, makeVisible); } this.moveDown = function(makeVisible) { this.top = parseInt(backgroundCanvas.style.top) + backgroundCanvas.height; move(false, makeVisible); } this.setMenu = function(menuId, menuHandler) { setContextMenu(backgroundCanvas, menuId, menuHandler); } setContextMenu = function(element, menuId, menuHandler) { $(element).contextMenu( { menu: menuId }, menuHandler ); } }
# | Change | User | Description | Committed | |
---|---|---|---|---|---|
#1 | 8081 | David George |
Initial submit of JavaScript StreamGraph. Main functionality is: Change Trajectory (Change Flow), Timeline, and GitStreams. |