diff --git a/demos/minimap/minimap.js b/demos/minimap/minimap.js index 17deef213..cd884a510 100644 --- a/demos/minimap/minimap.js +++ b/demos/minimap/minimap.js @@ -29,17 +29,17 @@ var Minimap = {}; /** -* initilize the workspace and minimap. -* @param {Workspace} workspace The main workspace of the user -* @param {Workspace} minimap The workspace that will be used as a minimap +* Initilize the workspace and minimap. +* @param {Workspace} workspace The main workspace of the user. +* @param {Workspace} minimap The workspace that will be used as a minimap. */ -Minimap.init = function(workspace,minimap){ - this.workspace= workspace; - this.minimap= minimap; +Minimap.init = function(workspace, minimap){ + this.workspace = workspace; + this.minimap = minimap; //Adding scroll callback functionlity to vScroll just for this demo. //IMPORTANT: This should be changed when there is proper UI event handling - // api available and should be handled by workspace's event listeners + // api available and should be handled by workspace's event listeners. this.workspace.scrollbar.vScroll.onScroll_ = function(){ var ratio = this.handlePosition_ / this.scrollViewSize_; if (isNaN(ratio)) { @@ -53,26 +53,30 @@ Minimap.init = function(workspace,minimap){ } this.workspace_.setMetrics(xyRatio); - // get the absolutePosition - var absolutePosition = (this.handlePosition_/this.ratio_); + // Code above is same as the original onScroll_ function in core/scrollbar.js. + // New code starts from here. - // firing the scroll change listener - Minimap.onScrollChange(absolutePosition,this.horizontal_); + // Get the absolutePosition. + var absolutePosition = (this.handlePosition_ / this.ratio_); + + // Firing the scroll change listener. + Minimap.onScrollChange(absolutePosition, this.horizontal_); }; - // used as left padding in the minimap + // Used as left padding in the minimap. this.PADDING = 5; - // required to stop a positive feedback loop when user clicks minimap + // Required to stop a positive feedback loop when user clicks minimap // and the scroll changes, which inturn may change minimap. - this.disableScrollChange=false; + this.disableScrollChange = false; // Listen to events on the main workspace. this.workspace.addChangeListener(Minimap.mirrorEvent); //Get rectangle bounding the minimap div. this.rect = document.getElementById('mapDiv').getBoundingClientRect(); - // Create a svg overlay on the top of mapDiv for the minimap + + // Create a svg overlay on the top of mapDiv for the minimap. this.svg = Blockly.utils.createSvgElement('svg', { 'xmlns': 'http://www.w3.org/2000/svg', 'xmlns:html': 'http://www.w3.org/1999/xhtml', @@ -82,34 +86,33 @@ Minimap.init = function(workspace,minimap){ 'width': this.rect.right-this.rect.left, 'class': 'minimap', }, document.getElementById('mapDiv')); - this.svg.style.top=this.rect.top; - this.svg.style.left=this.rect.left; + this.svg.style.top = this.rect.top; + this.svg.style.left = this.rect.left; // Creating a rectangle in the minimap that represents current view. Blockly.utils.createSvgElement('rect', { 'width':100, 'height':100, 'class':'mapDragger' - },this.svg); + }, this.svg); // Rectangle in the minimap that represents current view. this.mapDragger = this.svg.childNodes[0]; - // Adding mouse events to the rectangle, to make it Draggable - this.mapDragger.addEventListener("mousedown",Minimap.mousedown,false); - this.mapDragger.addEventListener("mouseup",Minimap.mouseup); - this.mapDragger.addEventListener("mousemove",Minimap.mouseover); - this.mapDragger.addEventListener("mouseout",Minimap.mouseout); + // Adding mouse events to the rectangle, to make it Draggable. + this.mapDragger.addEventListener("mousedown", Minimap.mousedown,false); + this.mapDragger.addEventListener("mouseup", Minimap.mouseup); + this.mapDragger.addEventListener("mousemove", Minimap.mouseover); + this.mapDragger.addEventListener("mouseout", Minimap.mouseout); //When the window change, we need to resize the minimap window. window.addEventListener('resize', Minimap.repositionMinimap); - // click event for the minimap - // TODO: Drag event - this.svg.addEventListener('mouseup',Minimap.updateMapDragger); + // Mouse up event for the minimap. + this.svg.addEventListener('mouseup', Minimap.updateMapDragger); - //boolen to check whether I am dragging the surface or not - this.isDragging= false; + //Boolen to check whether I am dragging the surface or not. + this.isDragging = false; }; Minimap.mousedown = function(e){ @@ -135,7 +138,7 @@ Minimap.mouseover = function(e){ }; /** -* initilize the workspace and minimap. +* Initilize the workspace and minimap. * @param {Event} event Event that triggered in the main workspace. */ Minimap.mirrorEvent = function(event){ @@ -156,21 +159,21 @@ Minimap.mirrorEvent = function(event){ */ Minimap.repositionMinimap = function(){ Minimap.rect = document.getElementById('mapDiv').getBoundingClientRect(); - Minimap.svg.style.top=Minimap.rect.top; - Minimap.svg.style.left=Minimap.rect.left; + Minimap.svg.style.top = Minimap.rect.top; + Minimap.svg.style.left = Minimap.rect.left; }; /** -* updates the rectangle's height and position. +* Updates the rectangle's height and position. */ Minimap.setDraggerHeight = function(){ var workspaceMetrics = Minimap.workspace.getMetrics(); - var draggerHeight=(workspaceMetrics.viewHeight/Minimap.workspace.scale)*Minimap.minimap.scale; - // its zero when first block is placed - if(draggerHeight==0){ + var draggerHeight = (workspaceMetrics.viewHeight / Minimap.workspace.scale) * Minimap.minimap.scale; + // It's zero when first block is placed. + if(draggerHeight == 0){ return; } - Minimap.mapDragger.setAttribute("height",draggerHeight); + Minimap.mapDragger.setAttribute("height", draggerHeight); }; /** @@ -183,65 +186,71 @@ Minimap.scaleMinimap = function(){ var workspaceMetrics = Minimap.workspace.getMetrics(); var minimapMetrics = Minimap.minimap.getMetrics(); - //scaling the mimimap such that all the blocks can be seen in the viewport - //this padding is default because this is how to scrollbar(in main workspace) is implemented - var topPadding = (workspaceMetrics.viewHeight)*Minimap.minimap.scale/(2*Minimap.workspace.scale); + //Scaling the mimimap such that all the blocks can be seen in the viewport. + //This padding is default because this is how to scrollbar(in main workspace) is implemented. + var topPadding = (workspaceMetrics.viewHeight) * Minimap.minimap.scale / (2 * Minimap.workspace.scale); - // if actual padding is more than half view ports height, change it to actual padding/ - if((workspaceBoundingBox.y*Minimap.workspace.scale-workspaceMetrics.contentTop) - *Minimap.minimap.scale/Minimap.workspace.scale>topPadding){ - topPadding=(workspaceBoundingBox.y*Minimap.workspace.scale-workspaceMetrics.contentTop) - *Minimap.minimap.scale/Minimap.workspace.scale; + // If actual padding is more than half view ports height, change it to actual padding. + if((workspaceBoundingBox.y * Minimap.workspace.scale - workspaceMetrics.contentTop) + * Minimap.minimap.scale / Minimap.workspace.scale > topPadding){ + topPadding = (workspaceBoundingBox.y * Minimap.workspace.scale - workspaceMetrics.contentTop) + * Minimap.minimap.scale / Minimap.workspace.scale; } - var scalex = (minimapMetrics.viewWidth-Minimap.PADDING)/minimapBoundingBox.width; - var scaley = (minimapMetrics.viewHeight-2*topPadding)/minimapBoundingBox.height; - Minimap.minimap.setScale(Math.min(scalex,scaley)); + var scalex = (minimapMetrics.viewWidth - Minimap.PADDING) / minimapBoundingBox.width; + var scaley = (minimapMetrics.viewHeight - 2 * topPadding) / minimapBoundingBox.height; + Minimap.minimap.setScale(Math.min(scalex, scaley)); - // translating the minimap - Minimap.minimap.translate(-minimapBoundingBox.x*Minimap.minimap.scale+Minimap.PADDING, - -minimapMetrics.contentTop*Minimap.minimap.scale + topPadding); + // Translating the minimap. + Minimap.minimap.translate( - minimapBoundingBox.x * Minimap.minimap.scale+Minimap.PADDING, + - minimapMetrics.contentTop * Minimap.minimap.scale + topPadding); }; /** * Handles the onclick event on the minimapBoundingBox. Changes mapDraggers position. -* @param {Event} e Event from the mouse click +* @param {Event} e Event from the mouse click. */ Minimap.updateMapDragger = function(e){ - var y=e.clientY; + var y = e.clientY; var draggerHeight = Minimap.mapDragger.getAttribute("height"); - var finalY = y-Minimap.rect.top-draggerHeight/2; - var maxValidY = (Minimap.workspace.getMetrics().contentHeight-Minimap.workspace.getMetrics().viewHeight) - *Minimap.minimap.scale; - if(y+draggerHeight/2>Minimap.rect.bottom){ - finalY = Minimap.rect.bottom-Minimap.rect.top-draggerHeight; - }else if(y Minimap.rect.bottom){ + finalY = Minimap.rect.bottom - Minimap.rect.top - draggerHeight; + }else if(y < Minimap.rect.top + draggerHeight / 2){ finalY = 0; } - // do not go below loew bound of scrollbar - if(finalY>maxValidY){ - finalY=maxValidY; + // Do not go below loew bound of scrollbar. + if(finalY > maxValidY){ + finalY = maxValidY; } Minimap.mapDragger.setAttribute("y", finalY); - // required, otherwise creates a feedback loop - Minimap.disableScrollChange=true; - Minimap.workspace.scrollbar.vScroll.set((finalY*Minimap.workspace.scale)/Minimap.minimap.scale); - Minimap.disableScrollChange=false; + // Required, otherwise creates a feedback loop. + Minimap.disableScrollChange = true; + Minimap.workspace.scrollbar.vScroll.set((finalY * Minimap.workspace.scale) / Minimap.minimap.scale); + Minimap.disableScrollChange = false; }; /** * Handles the onclick event on the minimapBoundingBox, paramaters are passed by -* the event handler +* the event handler. * @param {Float} position This is the absolute postion of the scrollbar. * @param {boolean} horizontal Informs if the change event if for horizontal(true) * scrollbar or vertical(false) scrollbar. */ -Minimap.onScrollChange = function(position,horizontal){ +Minimap.onScrollChange = function(position, horizontal){ + + if(Minimap.disableScrollChange){ + return; + } + + // Currently the minimap automatically scales (see function Minimap.scaleMinimap) if the new block is created/moved + // beyond the width of the minimap. Compelete horizontal view is always visible in the minimap. if(horizontal){ return; } - var newDraggerPosition = (position*Minimap.minimap.scale/Minimap.workspace.scale); - if(!Minimap.disableScrollChange){ - Minimap.mapDragger.setAttribute("y",newDraggerPosition); - } + + var newDraggerPosition = (position * Minimap.minimap.scale / Minimap.workspace.scale); + Minimap.mapDragger.setAttribute("y", newDraggerPosition); };