From 738d5d66692fffb006278d04b489f980ab588cb1 Mon Sep 17 00:00:00 2001 From: Karan Purohit Date: Wed, 8 Mar 2017 00:12:22 +0530 Subject: [PATCH 1/5] Adding new minimap demo --- demos/minimap/icon.png | Bin 0 -> 4243 bytes demos/minimap/index.html | 91 +++++++++++++++ demos/minimap/minimap.js | 247 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 338 insertions(+) create mode 100644 demos/minimap/icon.png create mode 100644 demos/minimap/index.html create mode 100644 demos/minimap/minimap.js diff --git a/demos/minimap/icon.png b/demos/minimap/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..870caa070d8e4a9f1a295cad8c4570d8132694cf GIT binary patch literal 4243 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 literal 0 HcmV?d00001 diff --git a/demos/minimap/index.html b/demos/minimap/index.html new file mode 100644 index 000000000..ce4a7d9f2 --- /dev/null +++ b/demos/minimap/index.html @@ -0,0 +1,91 @@ + + + + + Blockly Demo: Minimap + + + + + + + +

Blockly > + Demos > Minimap

+ +

This is a simple demo showing how a minimap can be implemented.

+ + + + + + +
+
+ 		+
+
+ + + + + + + + diff --git a/demos/minimap/minimap.js b/demos/minimap/minimap.js new file mode 100644 index 000000000..17deef213 --- /dev/null +++ b/demos/minimap/minimap.js @@ -0,0 +1,247 @@ +/** +* Blockly Demos: Code +* +* Copyright 2017 Google Inc. +* https://developers.google.com/blockly/ +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/** +* @fileoverview JavaScript for Blockly's Minimap demo. +* @author karnpurohit@gmail.com (Karan Purohit) +*/ +'use strict'; + +/** +* Creating a seperate namespace for minimap. +*/ +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 +*/ +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 + this.workspace.scrollbar.vScroll.onScroll_ = function(){ + var ratio = this.handlePosition_ / this.scrollViewSize_; + if (isNaN(ratio)) { + ratio = 0; + } + var xyRatio = {}; + if (this.horizontal_) { + xyRatio.x = ratio; + } else { + xyRatio.y = ratio; + } + this.workspace_.setMetrics(xyRatio); + + // 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 + this.PADDING = 5; + + // required to stop a positive feedback loop when user clicks minimap + // and the scroll changes, which inturn may change minimap. + 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 + this.svg = Blockly.utils.createSvgElement('svg', { + 'xmlns': 'http://www.w3.org/2000/svg', + 'xmlns:html': 'http://www.w3.org/1999/xhtml', + 'xmlns:xlink': 'http://www.w3.org/1999/xlink', + 'version': '1.1', + 'height': this.rect.bottom-this.rect.top, + '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; + + // Creating a rectangle in the minimap that represents current view. + Blockly.utils.createSvgElement('rect', { + 'width':100, + 'height':100, + 'class':'mapDragger' + },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); + + //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); + + //boolen to check whether I am dragging the surface or not + this.isDragging= false; +}; + +Minimap.mousedown = function(e){ + Minimap.isDragging=true; + e.stopPropagation(); +}; + +Minimap.mouseup = function(e){ + Minimap.isDragging = false; + Minimap.updateMapDragger(e); + e.stopPropagation(); +}; + +Minimap.mouseout = function(){ + Minimap.isDragging = false; +}; + +Minimap.mouseover = function(e){ + if(Minimap.isDragging){ + Minimap.updateMapDragger(e); + } + e.stopPropagation(); +}; + +/** +* initilize the workspace and minimap. +* @param {Event} event Event that triggered in the main workspace. +*/ +Minimap.mirrorEvent = function(event){ + if (event.type == Blockly.Events.UI) { + return; // Don't mirror UI events. + } + // Convert event to JSON. This could then be transmitted across the net. + var json = event.toJson(); + // Convert JSON back into an event, then execute it. + var minimapEvent = Blockly.Events.fromJson(json, Minimap.minimap); + minimapEvent.run(true); + Minimap.scaleMinimap(); + Minimap.setDraggerHeight(); +}; + +/** +* Called when window is resized. Repositions the minimap overlay. +*/ +Minimap.repositionMinimap = function(){ + Minimap.rect = document.getElementById('mapDiv').getBoundingClientRect(); + Minimap.svg.style.top=Minimap.rect.top; + Minimap.svg.style.left=Minimap.rect.left; +}; + +/** +* 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){ + return; + } + Minimap.mapDragger.setAttribute("height",draggerHeight); +}; + +/** +* Updates the overall position of the viewport of the minimap by appropriately +* using translate functions. +*/ +Minimap.scaleMinimap = function(){ + var minimapBoundingBox = Minimap.minimap.getBlocksBoundingBox(); + var workspaceBoundingBox = Minimap.workspace.getBlocksBoundingBox(); + 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); + + // 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)); + + // 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 +*/ +Minimap.updateMapDragger = function(e){ + 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(ymaxValidY){ + 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; +}; + +/** +* Handles the onclick event on the minimapBoundingBox, paramaters are passed by +* 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){ + if(horizontal){ + return; + } + var newDraggerPosition = (position*Minimap.minimap.scale/Minimap.workspace.scale); + if(!Minimap.disableScrollChange){ + Minimap.mapDragger.setAttribute("y",newDraggerPosition); + } +}; From f77325f289fec9bbb751d596d8e9f91c3825b309 Mon Sep 17 00:00:00 2001 From: Karan Purohit Date: Wed, 8 Mar 2017 10:17:38 +0530 Subject: [PATCH 2/5] Basic code style changes. Adding a few more comments. Return early if disableScrollChange in onScrollChange listener. --- demos/minimap/minimap.js | 151 +++++++++++++++++++++------------------ 1 file changed, 80 insertions(+), 71 deletions(-) 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); }; From 4e9055a343e9d9f908bcfb107ec8325742540b01 Mon Sep 17 00:00:00 2001 From: Karan Purohit Date: Sun, 12 Mar 2017 15:29:05 +0530 Subject: [PATCH 3/5] Adding horizontal scrolling. Changed scroll change callbacks from onScroll_ to setHandlePosition. onScroll_ is not challed when workspace is dragged. --- demos/minimap/index.html | 7 ++- demos/minimap/minimap.js | 103 +++++++++++++++++++++++++++++---------- 2 files changed, 79 insertions(+), 31 deletions(-) diff --git a/demos/minimap/index.html b/demos/minimap/index.html index ce4a7d9f2..2e495fdb1 100644 --- a/demos/minimap/index.html +++ b/demos/minimap/index.html @@ -30,7 +30,7 @@
-
+
@@ -51,7 +51,6 @@