CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-05 08:00:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Basic code style changes. Adding a few more comments. Return early if disableScrollChange in onScrollChange listener.

Browse Source
This commit is contained in:
Karan Purohit
2017-03-08 10:17:38 +05:30
parent 738d5d6669
commit f77325f289
1 changed files with 80 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
demos/minimap/minimap.js
View File

@@ -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.top+draggerHeight/2){
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.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);
};