function ChangeNode(changelist, diameter, parentElementId, streamUtilities) { var mStreamUtilities = streamUtilities; var changeCanvas = document.createElement( "canvas" ); changeCanvas.style.position = "absolute"; changeCanvas.width = diameter; changeCanvas.height = diameter; document.getElementById( parentElementId ).appendChild( changeCanvas ); var changeContext = changeCanvas.getContext( '2d' ); changeCanvas.style.zIndex = 40; changeCanvas.onclick = function(evt) { clicked(evt); } var mClickListeners = new Array(); this.addClickListener = function(listener) { mClickListeners.push(listener); } function clicked(mouseEvt) { for( var i = 0; i < mClickListeners.length; i++ ) mClickListeners[i].clicked(changelist, mouseEvt.x, changeCanvas.offsetTop + diameter/*this causes the click to appear to be at the bottom*/); //console.log( 'changelist clicked: ' + changelist.Change ); } var mX = 0; this.Location = function(x, y) { mX = x; changeCanvas.style.left = x; changeCanvas.style.top = y; } this.getCenter = function() { return new mStreamUtilities.Point( mX + diameter/2, changeCanvas.offsetTop + diameter/2 ); } this.getHeight = function() { return diameter; } this.Selected = false; this.Highlighted = false; this.drawNode = function() { mStreamUtilities.clearCanvas(changeCanvas); //draw a circle changeContext.beginPath(); changeContext.arc(changeCanvas.width/2, changeCanvas.height/2, diameter/2 - 4, 0, Math.PI*2, true); changeContext.closePath(); changeContext.lineWidth = 2; if(this.Selected) { changeContext.fillStyle = 'aliceblue'; changeContext.fill(); changeContext.strokeStyle = 'dodgerblue'; changeContext.stroke(); } else { changeContext.fillStyle = 'orange'; changeContext.fill(); if( this.Highlighted ) { changeContext.strokeStyle = 'dodgerblue'; changeContext.stroke(); } else { changeContext.strokeStyle = 'darkorange'; changeContext.stroke(); } } } this.moveRight = function(moveIncrements) { var moveX = diameter * moveIncrements; mStreamUtilities.moveElementRight(changeCanvas, moveX, 500); mX += moveX; return moveX; } this.Closed = function() { changeCanvas.parentElement.removeChild(changeCanvas); } this.changelist = function() { return changelist; } }
# | Change | User | Description | Committed | |
---|---|---|---|---|---|
#1 | 8081 | David George |
Initial submit of JavaScript StreamGraph. Main functionality is: Change Trajectory (Change Flow), Timeline, and GitStreams. |