scratch-blocks 1.1.206 → 2.0.0-beta.1

package/blockly-rc/demos/blockfactory/block_library_controller.js

@@ -0,0 +1,325 @@
+/**
+ * @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 (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 "block_type". 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/blockly-rc/demos/blockfactory/block_library_storage.js

@@ -0,0 +1,149 @@
+/**
+ * @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/blockly-rc/demos/blockfactory/block_library_view.js

@@ -0,0 +1,178 @@
+/**
+ * @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 library yet. Disable the delete button
+      // and allow user to save.
+      this.saveButton.textContent = 'Save "' + blockType + '"';
+      this.saveButton.disabled = false;
+      this.deleteButton.disabled = true;
+    } else {
+      // Block type has already been saved. Disable the save button unless the
+      // there are unsaved changes (checked below).
+      this.saveButton.textContent = 'Update "' + blockType + '"';
+      this.saveButton.disabled = true;
+      this.deleteButton.disabled = false;
+    }
+    this.deleteButton.textContent = 'Delete "' + blockType + '"';
+
+    // If changes to block have been made and are not saved, make button
+    // green to encourage user to save the block.
+    if (!savedChanges) {
+      var buttonFormatClass = 'button_warn';
+
+      // If block type is the default, 'block_type', make button red to alert
+      // user.
+      if (blockType === 'block_type') {
+        buttonFormatClass = 'button_alert';
+      }
+      this.saveButton.classList.add(buttonFormatClass);
+      this.saveButton.disabled = false;
+
+    } else {
+      // No changes to save.
+      this.saveButton.classList.remove('button_alert', 'button_warn');
+      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);
+  }
+};