blockly 12.4.0 → 12.5.0

package/demos/blockfactory/block_library_controller.js

@@ -1,325 +0,0 @@
-/**
- * @license
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Contains the code for Block Library Controller, which
- * depends on Block Library Storage and Block Library UI. Provides the
- * interfaces for the user to
- *  - save their blocks to the browser
- *  - re-open and edit saved blocks
- *  - delete blocks
- *  - clear their block library
- * Depends on BlockFactory functions defined in factory.js.
- */
-'use strict';
-
-/**
- * Block Library Controller Class
- * @param {string} blockLibraryName Desired name of Block Library, also used
- *    to create the key for where it's stored in local storage.
- * @param {!BlockLibraryStorage=} opt_blockLibraryStorage Optional storage
- *    object that allows user to import a block library.
- * @constructor
- */
-function BlockLibraryController(blockLibraryName, opt_blockLibraryStorage) {
-  this.name = blockLibraryName;
-  // Create a new, empty Block Library Storage object, or load existing one.
-  this.storage = opt_blockLibraryStorage || new BlockLibraryStorage(this.name);
-  // The BlockLibraryView object handles the proper updating and formatting of
-  // the block library dropdown.
-  this.view = new BlockLibraryView();
-};
-
-/**
- * Returns the block type of the block the user is building.
- * @return {string} The current block's type.
- * @private
- */
-BlockLibraryController.prototype.getCurrentBlockType = function() {
-  var rootBlock = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
-  var blockType = rootBlock.getFieldValue('NAME').trim().toLowerCase();
-  // Replace invalid characters.
-  return FactoryUtils.cleanBlockType(blockType);
-};
-
-/**
- * Removes current block from Block Library and updates the save and delete
- * buttons so that user may save block to library and but not delete.
- * @param {string} blockType Type of block.
- */
-BlockLibraryController.prototype.removeFromBlockLibrary = function() {
-  var blockType = this.getCurrentBlockType();
-  this.storage.removeBlock(blockType);
-  this.storage.saveToLocalStorage();
-  this.populateBlockLibrary();
-  this.view.updateButtons(blockType, false, false);
-};
-
-/**
- * Updates the workspace to show the block user selected from library
- * @param {string} blockType Block to edit on block factory.
- */
-BlockLibraryController.prototype.openBlock = function(blockType) {
-  if (blockType) {
-    var xml = this.storage.getBlockXml(blockType);
-    BlockFactory.mainWorkspace.clear();
-    Blockly.Xml.domToWorkspace(xml, BlockFactory.mainWorkspace);
-    BlockFactory.mainWorkspace.clearUndo();
-  } else {
-    BlockFactory.showStarterBlock();
-    this.view.setSelectedBlockType(null);
-  }
-};
-
-/**
- * Returns type of block selected from library.
- * @return {string} Type of block selected.
- */
-BlockLibraryController.prototype.getSelectedBlockType = function() {
-  return this.view.getSelectedBlockType();
-};
-
-/**
- * Confirms with user before clearing the block library in local storage and
- * updating the dropdown and displaying the starter block (factory_base).
- */
-BlockLibraryController.prototype.clearBlockLibrary = function() {
-  var msg = 'Delete all blocks from library?';
-  BlocklyDevTools.Analytics.onWarning(msg);
-  if (confirm(msg)) {
-    // Clear Block Library Storage.
-    this.storage.clear();
-    this.storage.saveToLocalStorage();
-    // Update dropdown.
-    this.view.clearOptions();
-    // Show default block.
-    BlockFactory.showStarterBlock();
-    // User may not save the starter block, but will get explicit instructions
-    // upon clicking the red save button.
-    this.view.updateButtons(null);
-  }
-};
-
-/**
- * Saves current block to local storage and updates dropdown.
- */
-BlockLibraryController.prototype.saveToBlockLibrary = function() {
-  var blockType = this.getCurrentBlockType();
-  // If user has not changed the name of the starter block.
-  if (reservedBlockFactoryBlocks.has(blockType) || blockType === 'block_type') {
-    // Do not save block if it has the default type, 'block_type'.
-    var msg = `You cannot save a block under the name "${blockType}". Try ` +
-        'changing the name before saving. Then, click on the "Block Library"' +
-        ' button to view your saved blocks.';
-    alert(msg);
-    BlocklyDevTools.Analytics.onWarning(msg);
-    return;
-  }
-
-  // Create block XML.
-  var xmlElement = Blockly.utils.xml.createElement('xml');
-  var block = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
-  xmlElement.appendChild(Blockly.Xml.blockToDomWithXY(block));
-
-  // Do not add option again if block type is already in library.
-  if (!this.has(blockType)) {
-    this.view.addOption(blockType, true, true);
-  }
-
-  // Save block.
-  this.storage.addBlock(blockType, xmlElement);
-  this.storage.saveToLocalStorage();
-
-  // Show saved block without other stray blocks sitting in Block Factory's
-  // main workspace.
-  this.openBlock(blockType);
-
-  // Add select handler to the new option.
-  this.addOptionSelectHandler(blockType);
-  BlocklyDevTools.Analytics.onSave('Block');
-};
-
-/**
- * Checks to see if the given blockType is already in Block Library
- * @param {string} blockType Type of block.
- * @return {boolean} Boolean indicating whether or not block is in the library.
- */
-BlockLibraryController.prototype.has = function(blockType) {
-  var blockLibrary = this.storage.blocks;
-  return (blockType in blockLibrary && blockLibrary[blockType] !== null);
-};
-
-/**
- * Populates the dropdown menu.
- */
-BlockLibraryController.prototype.populateBlockLibrary = function() {
-  this.view.clearOptions();
-  // Add an unselected option for each saved block.
-  var blockLibrary = this.storage.blocks;
-  for (var blockType in blockLibrary) {
-    this.view.addOption(blockType, false);
-  }
-  this.addOptionSelectHandlers();
-};
-
-/**
- * Return block library mapping block type to XML.
- * @return {Object} Object mapping block type to XML text.
- */
-BlockLibraryController.prototype.getBlockLibrary = function() {
-  return this.storage.getBlockXmlTextMap();
-};
-
-/**
- * @return {Object[]} Array of JSON data, where each item is the data for one block type.
- */
-BlockLibraryController.prototype.getBlockLibraryAsJson = function() {
-  const xmlBlocks = this.storage.getBlockXmlMap(this.storage.getBlockTypes());
-  const jsonBlocks = [];
-  const headlessWorkspace = new Blockly.Workspace();
-
-  for (const blockName in xmlBlocks) {
-    // Load the block XML into a workspace so we can save it as JSON
-    headlessWorkspace.clear();
-    const blockXml = xmlBlocks[blockName];
-    Blockly.Xml.domToWorkspace(blockXml, headlessWorkspace);
-    const block = headlessWorkspace.getBlocksByType('factory_base', false)[0];
-
-    if (!block) continue;
-
-    const json = Blockly.serialization.blocks.save(block, {addCoordinates: false, saveIds: false});
-    jsonBlocks.push(json);
-  }
-  return jsonBlocks;
-}
-
-/**
- * Return stored XML of a given block type.
- * @param {string} blockType The type of block.
- * @return {!Element} XML element of a given block type or null.
- */
-BlockLibraryController.prototype.getBlockXml = function(blockType) {
-  return this.storage.getBlockXml(blockType);
-};
-
-/**
- * Set the block library storage object from which exporter exports.
- * @param {!BlockLibraryStorage} blockLibStorage Block Library Storage object.
- */
-BlockLibraryController.prototype.setBlockLibraryStorage
-    = function(blockLibStorage) {
-  this.storage = blockLibStorage;
-};
-
-/**
- * Get the block library storage object from which exporter exports.
- * @return {!BlockLibraryStorage} blockLibStorage Block Library Storage object
- *    that stores the blocks.
- */
-BlockLibraryController.prototype.getBlockLibraryStorage = function() {
-  return this.blockLibStorage;
-};
-
-/**
- * Get the block library storage object from which exporter exports.
- * @return {boolean} True if the Block Library is empty, false otherwise.
- */
-BlockLibraryController.prototype.hasEmptyBlockLibrary = function() {
-  return this.storage.isEmpty();
-};
-
-/**
- * Get all block types stored in block library.
- * @return {!Array<string>} Array of block types.
- */
-BlockLibraryController.prototype.getStoredBlockTypes = function() {
-  return this.storage.getBlockTypes();
-};
-
-/**
- * Sets the currently selected block option to none.
- */
-BlockLibraryController.prototype.setNoneSelected = function() {
-  this.view.setSelectedBlockType(null);
-};
-
-/**
- * If there are unsaved changes to the block in open in Block Factory
- * and the block is not the starter block, check if user wants to proceed,
- * knowing that it will cause them to lose their changes.
- * @return {boolean} Whether or not to proceed.
- */
-BlockLibraryController.prototype.warnIfUnsavedChanges = function() {
-  if (!FactoryUtils.savedBlockChanges(this)) {
-    return confirm('You have unsaved changes. By proceeding without saving ' +
-        ' your block first, you will lose these changes.');
-  }
-  return true;
-};
-
-/**
- * Add select handler for an option of a given block type. The handler will to
- * update the view and the selected block accordingly.
- * @param {string} blockType The type of block represented by the option is for.
- */
-BlockLibraryController.prototype.addOptionSelectHandler = function(blockType) {
-  var self = this;
-
-  // Click handler for a block option. Sets the block option as the selected
-  // option and opens the block for edit in Block Factory.
-  var setSelectedAndOpen_ = function(blockOption) {
-    var blockType = blockOption.textContent;
-    self.view.setSelectedBlockType(blockType);
-    self.openBlock(blockType);
-    // The block is saved in the block library and all changes have been saved
-    // when the user opens a block from the block library dropdown.
-    // Thus, the buttons show up as a disabled update button and an enabled
-    // delete.
-    self.view.updateButtons(blockType, true, true);
-    blocklyFactory.closeModal();
-  };
-
-  // Returns a block option select handler.
-  var makeOptionSelectHandler_ = function(blockOption) {
-    return function() {
-      // If there are unsaved changes warn user, check if they'd like to
-      // proceed with unsaved changes, and act accordingly.
-      var proceedWithUnsavedChanges = self.warnIfUnsavedChanges();
-      if (!proceedWithUnsavedChanges) {
-        return;
-      }
-      setSelectedAndOpen_(blockOption);
-    };
-  };
-
-  // Assign a click handler to the block option.
-  var blockOption = this.view.optionMap[blockType];
-  // Use an additional closure to correctly assign the tab callback.
-  blockOption.addEventListener(
-      'click', makeOptionSelectHandler_(blockOption));
-};
-
-/**
- * Add select handlers to each option to update the view and the selected
- * blocks accordingly.
- */
-BlockLibraryController.prototype.addOptionSelectHandlers = function() {
-  // Assign a click handler to each block option.
-  for (var blockType in this.view.optionMap) {
-    this.addOptionSelectHandler(blockType);
-  }
-};
-
-/**
- * Update the save and delete buttons based on the current block type of the
- * block the user is currently editing.
- * @param {boolean} Whether changes to the block have been saved.
- */
-BlockLibraryController.prototype.updateButtons = function(savedChanges) {
-  var blockType = this.getCurrentBlockType();
-  var isInLibrary = this.has(blockType);
-  this.view.updateButtons(blockType, isInLibrary, savedChanges);
-};

package/demos/blockfactory/block_library_storage.js

@@ -1,149 +0,0 @@
-/**
- * @license
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Javascript for Block Library's Storage Class.
- * Depends on Block Library for its namespace.
- */
-
-'use strict';
-
-/**
- * Represents a block library's storage.
- * @param {string} blockLibraryName Desired name of Block Library, also used
- *    to create the key for where it's stored in local storage.
- * @param {!Object=} opt_blocks Object mapping block type to XML.
- * @constructor
- */
-function BlockLibraryStorage(blockLibraryName, opt_blocks) {
-  // Add prefix to this.name to avoid collisions in local storage.
-  this.name = 'BlockLibraryStorage.' + blockLibraryName;
-  if (!opt_blocks) {
-    // Initialize this.blocks by loading from local storage.
-    this.loadFromLocalStorage();
-    if (this.blocks === null) {
-      this.blocks = Object.create(null);
-      // The line above is equivalent of {} except that this object is TRULY
-      // empty. It doesn't have built-in attributes/functions such as length or
-      // toString.
-      this.saveToLocalStorage();
-    }
-  } else {
-    this.blocks = opt_blocks;
-    this.saveToLocalStorage();
-  }
-};
-
-/**
- * Reads the named block library from local storage and saves it in this.blocks.
- */
-BlockLibraryStorage.prototype.loadFromLocalStorage = function() {
-  var object = localStorage[this.name];
-  this.blocks = object ? JSON.parse(object) : null;
-};
-
-/**
- * Writes the current block library (this.blocks) to local storage.
- */
-BlockLibraryStorage.prototype.saveToLocalStorage = function() {
-  localStorage[this.name] = JSON.stringify(this.blocks);
-};
-
-/**
- * Clears the current block library.
- */
-BlockLibraryStorage.prototype.clear = function() {
-  this.blocks = Object.create(null);
-  // The line above is equivalent of {} except that this object is TRULY
-  // empty. It doesn't have built-in attributes/functions such as length or
-  // toString.
-};
-
-/**
- * Saves block to block library.
- * @param {string} blockType Type of block.
- * @param {Element} blockXML The block's XML pulled from workspace.
- */
-BlockLibraryStorage.prototype.addBlock = function(blockType, blockXML) {
-  var prettyXml = Blockly.Xml.domToPrettyText(blockXML);
-  this.blocks[blockType] = prettyXml;
-};
-
-/**
- * Removes block from current block library (this.blocks).
- * @param {string} blockType Type of block.
- */
-BlockLibraryStorage.prototype.removeBlock = function(blockType) {
-  delete this.blocks[blockType];
-};
-
-/**
- * Returns the XML of given block type stored in current block library
- * (this.blocks).
- * @param {string} blockType Type of block.
- * @return {Element} The XML that represents the block type or null.
- */
-BlockLibraryStorage.prototype.getBlockXml = function(blockType) {
-  var xml = this.blocks[blockType] || null;
-  if (xml) {
-    var xml = Blockly.utils.xml.textToDom(xml);
-  }
-  return xml;
-};
-
-
-/**
- * Returns map of each block type to its corresponding XML stored in current
- * block library (this.blocks).
- * @param {!Array<string>} blockTypes Types of blocks.
- * @return {!Object} Map of block type to corresponding XML.
- */
-BlockLibraryStorage.prototype.getBlockXmlMap = function(blockTypes) {
-  var blockXmlMap = Object.create(null);
-  for (var i = 0; i < blockTypes.length; i++) {
-    var blockType = blockTypes[i];
-    var xml = this.getBlockXml(blockType);
-    blockXmlMap[blockType] = xml;
-  }
-  return blockXmlMap;
-};
-
-/**
- * Returns array of all block types stored in current block library.
- * @return {!Array<string>} Array of block types stored in library.
- */
-BlockLibraryStorage.prototype.getBlockTypes = function() {
-  return Object.keys(this.blocks);
-};
-
-/**
- * Checks to see if block library is empty.
- * @return {boolean} True if empty, false otherwise.
- */
-BlockLibraryStorage.prototype.isEmpty = function() {
-  for (var blockType in this.blocks) {
-    return false;
-  }
-  return true;
-};
-
-/**
- * Returns array of all block types stored in current block library.
- * @return {!Array<string>} Map of block type to corresponding XML text.
- */
-BlockLibraryStorage.prototype.getBlockXmlTextMap = function() {
-  return this.blocks;
-};
-
-/**
- * Returns boolean of whether or not a given blockType is stored in block
- * library.
- * @param {string} blockType Type of block.
- * @return {boolean} Whether or not blockType is stored in block library.
- */
-BlockLibraryStorage.prototype.has = function(blockType) {
-  return !!this.blocks[blockType];
-};

package/demos/blockfactory/block_library_view.js

@@ -1,178 +0,0 @@
-/**
- * @license
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Javascript for BlockLibraryView class. It manages the display
- * of the Block Library dropdown, save, and delete buttons.
- */
-
-'use strict';
-
-/**
- * BlockLibraryView Class
- * @constructor
- */
-var BlockLibraryView = function() {
-  // Div element to contain the block types to choose from.
-  this.dropdown = document.getElementById('dropdownDiv_blockLib');
-  // Map of block type to corresponding 'a' element that is the option in the
-  // dropdown. Used to quickly and easily get a specific option.
-  this.optionMap = Object.create(null);
-  // Save and delete buttons.
-  this.saveButton = document.getElementById('saveToBlockLibraryButton');
-  this.deleteButton = document.getElementById('removeBlockFromLibraryButton');
-  // Initially, user should not be able to delete a block. They must save a
-  // block or select a stored block first.
-  this.deleteButton.disabled = true;
-};
-
-/**
- * Creates a node of a given element type and appends to the node with given ID.
- * @param {string} blockType Type of block.
- * @param {boolean} selected Whether or not the option should be selected on
- *    the dropdown.
- */
-BlockLibraryView.prototype.addOption = function(blockType, selected) {
-  // Create option.
-  var option = document.createElement('a');
-  option.id ='dropdown_' + blockType;
-  option.classList.add('blockLibOpt');
-  option.textContent = blockType;
-
-  // Add option to dropdown.
-  this.dropdown.appendChild(option);
-  this.optionMap[blockType] = option;
-
-  // Select the block.
-  if (selected) {
-    this.setSelectedBlockType(blockType);
-  }
-};
-
-/**
- * Sets a given block type to selected and all other blocks to deselected.
- * If null, deselects all blocks.
- * @param {string} blockTypeToSelect Type of block to select or null.
- */
-BlockLibraryView.prototype.setSelectedBlockType = function(blockTypeToSelect) {
-  // Select given block type and deselect all others. Will deselect all blocks
-  // if null or invalid block type selected.
-  for (var blockType in this.optionMap) {
-    var option = this.optionMap[blockType];
-    if (blockType === blockTypeToSelect) {
-      this.selectOption_(option);
-    } else {
-      this.deselectOption_(option);
-    }
-  }
-};
-
-/**
- * Selects a given option.
- * @param {!Element} option HTML 'a' element in the dropdown that represents
- *    a particular block type.
- * @private
- */
-BlockLibraryView.prototype.selectOption_ = function(option) {
-  option.classList.add('dropdown-content-selected');
-};
-
-/**
- * Deselects a given option.
- * @param {!Element} option HTML 'a' element in the dropdown that represents
- *    a particular block type.
- * @private
- */
-BlockLibraryView.prototype.deselectOption_ = function(option) {
-  option.classList.remove('dropdown-content-selected');
-};
-
-/**
- * Updates the save and delete buttons to represent how the current block will
- * be saved by including the block type in the button text as well as indicating
- * whether the block is being saved or updated.
- * @param {string} blockType The type of block being edited.
- * @param {boolean} isInLibrary Whether the block type is in the library.
- * @param {boolean} savedChanges Whether changes to block have been saved.
- */
-BlockLibraryView.prototype.updateButtons =
-    function(blockType, isInLibrary, savedChanges) {
-  if (blockType) {
-    // User is editing a block.
-
-    if (!isInLibrary) {
-      // Block type has not been saved to the library yet.
-      // Disable the delete button.
-      this.saveButton.textContent = 'Save "' + blockType + '"';
-      this.deleteButton.disabled = true;
-    } else {
-      // A version of the block type has already been saved.
-      // Enable the delete button.
-      this.saveButton.textContent = 'Update "' + blockType + '"';
-      this.deleteButton.disabled = false;
-    }
-    this.deleteButton.textContent = 'Delete "' + blockType + '"';
-
-    this.saveButton.classList.remove('button_alert', 'button_warn');
-    if (!savedChanges) {
-      var buttonFormatClass;
-
-      var isReserved = reservedBlockFactoryBlocks.has(blockType);
-      if (isReserved || blockType === 'block_type') {
-        // Make button red to alert user that the block type can't be saved.
-        buttonFormatClass = 'button_alert';
-      } else {
-        // Block type has not been saved to library yet or has unsaved changes.
-        // Make the button green to encourage the user to save the block.
-        buttonFormatClass = 'button_warn';
-      }
-      this.saveButton.classList.add(buttonFormatClass);
-      this.saveButton.disabled = false;
-
-    } else {
-      // No changes to save.
-      this.saveButton.disabled = true;
-    }
-
-  }
-};
-
-/**
- * Removes option currently selected in dropdown from dropdown menu.
- */
-BlockLibraryView.prototype.removeSelectedOption = function() {
-  var selectedOption = this.getSelectedOption();
-  this.dropdown.removeNode(selectedOption);
-};
-
-/**
- * Returns block type of selected block.
- * @return {string} Type of block selected.
- */
-BlockLibraryView.prototype.getSelectedBlockType = function() {
-  var selectedOption = this.getSelectedOption();
-  var blockType = selectedOption.textContent;
-  return blockType;
-};
-
-/**
- * Returns selected option.
- * @return {!Element} HTML 'a' element that is the option for a block type.
- */
-BlockLibraryView.prototype.getSelectedOption = function() {
-  return this.dropdown.getElementsByClassName('dropdown-content-selected')[0];
-};
-
-/**
- * Removes all options from dropdown.
- */
-BlockLibraryView.prototype.clearOptions = function() {
-  var blockOpts = this.dropdown.getElementsByClassName('blockLibOpt');
-  var option;
-  while ((option = blockOpts[0])) {
-    option.parentNode.removeChild(option);
-  }
-};