diff --git a/core/variables.js b/core/variables.js index 86c39f83d..5bc8c5f3c 100644 --- a/core/variables.js +++ b/core/variables.js @@ -177,13 +177,13 @@ Blockly.Variables.flyoutCategoryBlocks = function(workspace) { }; /** -* Return a new variable name that is not yet being used. This will try to -* generate single letter variable names in the range 'i' to 'z' to start with. -* If no unique name is located it will try 'i' to 'z', 'a' to 'h', -* then 'i2' to 'z2' etc. Skip 'l'. + * Return a new variable name that is not yet being used. This will try to + * generate single letter variable names in the range 'i' to 'z' to start with. + * If no unique name is located it will try 'i' to 'z', 'a' to 'h', + * then 'i2' to 'z2' etc. Skip 'l'. * @param {!Blockly.Workspace} workspace The workspace to be unique in. -* @return {string} New variable name. -*/ + * @return {string} New variable name. + */ Blockly.Variables.generateUniqueName = function(workspace) { var variableList = workspace.getAllVariables(); var newName = ''; diff --git a/demos/blockfactory/block_exporter_tools.js b/demos/blockfactory/block_exporter_tools.js index 4d6d9bec6..2e7492bda 100644 --- a/demos/blockfactory/block_exporter_tools.js +++ b/demos/blockfactory/block_exporter_tools.js @@ -37,9 +37,9 @@ goog.require('goog.dom.xml'); /** -* Block Exporter Tools Class -* @constructor -*/ + * Block Exporter Tools Class + * @constructor + */ BlockExporterTools = function() { // Create container for hidden workspace. this.container = goog.dom.createDom('div', { diff --git a/demos/minimap/index.html b/demos/minimap/index.html index 2e495fdb1..50512d7ca 100644 --- a/demos/minimap/index.html +++ b/demos/minimap/index.html @@ -2,7 +2,7 @@ - Blockly Demo: Minimap + Blockly Demo: Minimap @@ -49,41 +49,40 @@ diff --git a/demos/minimap/minimap.js b/demos/minimap/minimap.js index 4ac687e39..6803d41f2 100644 --- a/demos/minimap/minimap.js +++ b/demos/minimap/minimap.js @@ -1,46 +1,46 @@ /** -* 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. -*/ + * Blockly Demos: Minimap + * + * 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) -*/ + * @fileoverview JavaScript for Blockly's Minimap demo. + * @author karnpurohit@gmail.com (Karan Purohit) + */ 'use strict'; /** -* Creating a seperate namespace for minimap. -*/ + * Creating a separate 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){ + * Initialize 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 and hScroll 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.setHandlePosition = function(newPosition){ + // Adding scroll callback functionality to vScroll and hScroll 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.setHandlePosition = function(newPosition) { this.handlePosition_ = newPosition; this.svgHandle_.setAttribute(this.positionAttribute_, this.handlePosition_); @@ -55,7 +55,7 @@ Minimap.init = function(workspace, minimap){ }; // Adding call back for horizontal scroll. - this.workspace.scrollbar.hScroll.setHandlePosition = function(newPosition){ + this.workspace.scrollbar.hScroll.setHandlePosition = function(newPosition) { this.handlePosition_ = newPosition; this.svgHandle_.setAttribute(this.positionAttribute_, this.handlePosition_); @@ -71,7 +71,7 @@ Minimap.init = function(workspace, minimap){ // Required to stop a positive feedback loop when user clicks minimap - // and the scroll changes, which inturn may change minimap. + // and the scroll changes, which in turn may change minimap. this.disableScrollChange = false; // Listen to events on the main workspace. @@ -95,9 +95,9 @@ Minimap.init = function(workspace, minimap){ // Creating a rectangle in the minimap that represents current view. Blockly.utils.createSvgElement('rect', { - 'width':100, - 'height':100, - 'class':'mapDragger' + 'width': 100, + 'height': 100, + 'class': 'mapDragger' }, this.svg); // Rectangle in the minimap that represents current view. @@ -105,7 +105,7 @@ Minimap.init = function(workspace, minimap){ // Adding mouse events to the rectangle, to make it Draggable. // Using Blockly.bindEvent_ to attach mouse/touch listeners. - Blockly.bindEvent_(this.mapDragger, "mousedown", null, Minimap.mousedown); + Blockly.bindEvent_(this.mapDragger, 'mousedown', null, Minimap.mousedown); //When the window change, we need to resize the minimap window. window.addEventListener('resize', Minimap.repositionMinimap); @@ -113,20 +113,22 @@ Minimap.init = function(workspace, minimap){ // Mouse up event for the minimap. this.svg.addEventListener('mouseup', Minimap.updateMapDragger); - //Boolen to check whether I am dragging the surface or not. + //Boolean to check whether I am dragging the surface or not. this.isDragging = false; }; -Minimap.mousedown = function(e){ +Minimap.mousedown = function(e) { // Using Blockly.bindEvent_ to attach mouse/touch listeners. - Minimap.mouseMoveBindData = Blockly.bindEvent_(document,"mousemove", null, Minimap.mousemove); - Minimap.mouseUpBindData = Blockly.bindEvent_(document,"mouseup", null, Minimap.mouseup); + Minimap.mouseMoveBindData = + Blockly.bindEvent_(document, 'mousemove', null, Minimap.mousemove); + Minimap.mouseUpBindData = + Blockly.bindEvent_(document, 'mouseup', null, Minimap.mouseup); - Minimap.isDragging=true; + Minimap.isDragging = true; e.stopPropagation(); }; -Minimap.mouseup = function(e){ +Minimap.mouseup = function(e) { Minimap.isDragging = false; // Removing listeners. Blockly.unbindEvent_(Minimap.mouseUpBindData); @@ -135,18 +137,18 @@ Minimap.mouseup = function(e){ e.stopPropagation(); }; -Minimap.mousemove = function(e){ - if(Minimap.isDragging){ +Minimap.mousemove = 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){ + * Run non-UI events from the main workspace on the 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. } @@ -161,146 +163,152 @@ Minimap.mirrorEvent = function(event){ }; /** -* Called when window is resized. Repositions the minimap overlay. -*/ -Minimap.repositionMinimap = function(){ + * 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 + 'px'; Minimap.svg.style.left = Minimap.rect.left + 'px'; }; /** -* Updates the rectangle's height . -*/ -Minimap.setDraggerHeight = function(){ + * Updates the rectangle's height. + */ +Minimap.setDraggerHeight = function() { var workspaceMetrics = Minimap.workspace.getMetrics(); - var draggerHeight = (workspaceMetrics.viewHeight / Minimap.workspace.scale) * Minimap.minimap.scale; + var draggerHeight = (workspaceMetrics.viewHeight / Minimap.workspace.scale) * + Minimap.minimap.scale; // It's zero when first block is placed. - if(draggerHeight == 0){ + if (draggerHeight == 0) { return; } - Minimap.mapDragger.setAttribute("height", draggerHeight); + Minimap.mapDragger.setAttribute('height', draggerHeight); }; /** -* Updates the rectangle's width. -*/ -Minimap.setDraggerWidth = function(){ + * Updates the rectangle's width. + */ +Minimap.setDraggerWidth = function() { var workspaceMetrics = Minimap.workspace.getMetrics(); - var draggerWidth = (workspaceMetrics.viewWidth / Minimap.workspace.scale) * Minimap.minimap.scale; + var draggerWidth = (workspaceMetrics.viewWidth / Minimap.workspace.scale) * + Minimap.minimap.scale; // It's zero when first block is placed. - if(draggerWidth == 0){ + if (draggerWidth == 0) { return; } - Minimap.mapDragger.setAttribute("width", draggerWidth); + Minimap.mapDragger.setAttribute('width', draggerWidth); }; /** -* Updates the overall position of the viewport of the minimap by appropriately -* using translate functions. -*/ -Minimap.scaleMinimap = function(){ + * 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); - var sidePadding = (workspaceMetrics.viewWidth) * 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); + var sidePadding = (workspaceMetrics.viewWidth) * 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; } - // If actual padding is more than half view ports height, change it to actual padding. - if((workspaceBoundingBox.x * Minimap.workspace.scale - workspaceMetrics.contentLeft) - * Minimap.minimap.scale / Minimap.workspace.scale > sidePadding){ - sidePadding = (workspaceBoundingBox.x * Minimap.workspace.scale - workspaceMetrics.contentLeft) - * Minimap.minimap.scale / Minimap.workspace.scale; + // If actual padding is more than half view ports height, + // change it to actual padding. + if ((workspaceBoundingBox.x * Minimap.workspace.scale - + workspaceMetrics.contentLeft) * + Minimap.minimap.scale / Minimap.workspace.scale > sidePadding) { + sidePadding = (workspaceBoundingBox.x * Minimap.workspace.scale - + workspaceMetrics.contentLeft) * + Minimap.minimap.scale / Minimap.workspace.scale; } - var scalex = (minimapMetrics.viewWidth - 2 * sidePadding) / minimapBoundingBox.width; - var scaley = (minimapMetrics.viewHeight - 2 * topPadding) / minimapBoundingBox.height; + var scalex = (minimapMetrics.viewWidth - 2 * sidePadding) / + minimapBoundingBox.width; + var scaley = (minimapMetrics.viewHeight - 2 * topPadding) / + minimapBoundingBox.height; Minimap.minimap.setScale(Math.min(scalex, scaley)); // Translating the minimap. - Minimap.minimap.translate( - minimapMetrics.contentLeft * Minimap.minimap.scale + sidePadding, - - minimapMetrics.contentTop * Minimap.minimap.scale + topPadding); + Minimap.minimap.translate( + -minimapMetrics.contentLeft * Minimap.minimap.scale + sidePadding, + -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){ + * 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 x = e.clientX; - var draggerHeight = Minimap.mapDragger.getAttribute("height"); - var draggerWidth = Minimap.mapDragger.getAttribute("width"); + var draggerHeight = Minimap.mapDragger.getAttribute('height'); + var draggerWidth = Minimap.mapDragger.getAttribute('width'); var finalY = y - Minimap.rect.top - draggerHeight / 2; var finalX = x - Minimap.rect.left - draggerWidth / 2; - var maxValidY = (Minimap.workspace.getMetrics().contentHeight - Minimap.workspace.getMetrics().viewHeight) - * Minimap.minimap.scale; - var maxValidX = (Minimap.workspace.getMetrics().contentWidth - Minimap.workspace.getMetrics().viewWidth) - * Minimap.minimap.scale; + var maxValidY = (Minimap.workspace.getMetrics().contentHeight - + Minimap.workspace.getMetrics().viewHeight) * Minimap.minimap.scale; + var maxValidX = (Minimap.workspace.getMetrics().contentWidth - + Minimap.workspace.getMetrics().viewWidth) * Minimap.minimap.scale; - if(y + draggerHeight / 2 > Minimap.rect.bottom){ + if (y + draggerHeight / 2 > Minimap.rect.bottom) { finalY = Minimap.rect.bottom - Minimap.rect.top - draggerHeight; - }else if(y < Minimap.rect.top + draggerHeight / 2){ + } else if (y < Minimap.rect.top + draggerHeight / 2) { finalY = 0; } - if(x + draggerWidth / 2 > Minimap.rect.right){ + if (x + draggerWidth / 2 > Minimap.rect.right) { finalX = Minimap.rect.right - Minimap.rect.left - draggerWidth; - }else if(x < Minimap.rect.left + draggerWidth / 2){ + } else if (x < Minimap.rect.left + draggerWidth / 2) { finalX = 0; } // Do not go below lower bound of scrollbar. - if(finalY > maxValidY){ + if (finalY > maxValidY) { finalY = maxValidY; } - - if(finalX > maxValidX){ + if (finalX > maxValidX) { finalX = maxValidX; } - Minimap.mapDragger.setAttribute("y", finalY); - Minimap.mapDragger.setAttribute("x", finalX); + Minimap.mapDragger.setAttribute('y', finalY); + Minimap.mapDragger.setAttribute('x', finalX); // Required, otherwise creates a feedback loop. Minimap.disableScrollChange = true; - Minimap.workspace.scrollbar.vScroll.set((finalY * Minimap.workspace.scale) / Minimap.minimap.scale); - Minimap.workspace.scrollbar.hScroll.set((finalX * Minimap.workspace.scale) / Minimap.minimap.scale); + Minimap.workspace.scrollbar.vScroll.set((finalY * Minimap.workspace.scale) / + Minimap.minimap.scale); + Minimap.workspace.scrollbar.hScroll.set((finalX * 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(Minimap.disableScrollChange){ - return; - } - - var newDraggerPosition = (position * Minimap.minimap.scale / Minimap.workspace.scale); - if(horizontal){ - // Change the horizontal position of dragger. - Minimap.mapDragger.setAttribute("x", newDraggerPosition); - } - else{ - // Change the vertical position of dragger. - Minimap.mapDragger.setAttribute("y", newDraggerPosition); + * Handles the onclick event on the minimapBoundingBox, parameters are passed by + * the event handler. + * @param {number} position This is the absolute position of the scrollbar. + * @param {boolean} horizontal Informs if the change event if for + * horizontal (true) or vertical (false) scrollbar. + */ +Minimap.onScrollChange = function(position, horizontal) { + if (!Minimap.disableScrollChange) { + Minimap.mapDragger.setAttribute(horizontal ? 'x' : 'y', + position * Minimap.minimap.scale / Minimap.workspace.scale); } };