blockly 8.0.4-beta.0 → 8.0.5-beta.0

package/core/toolbox/collapsible_category.js

@@ -1,311 +0,0 @@
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview A toolbox category used to organize blocks in the toolbox.
- */
-'use strict';
-
-/**
- * A toolbox category used to organize blocks in the toolbox.
- * @class
- */
-goog.module('Blockly.CollapsibleToolboxCategory');
-
-const aria = goog.require('Blockly.utils.aria');
-const dom = goog.require('Blockly.utils.dom');
-const registry = goog.require('Blockly.registry');
-const toolbox = goog.require('Blockly.utils.toolbox');
-/* eslint-disable-next-line no-unused-vars */
-const {ICollapsibleToolboxItem} = goog.require('Blockly.ICollapsibleToolboxItem');
-/* eslint-disable-next-line no-unused-vars */
-const {IToolboxItem} = goog.requireType('Blockly.IToolboxItem');
-/* eslint-disable-next-line no-unused-vars */
-const {IToolbox} = goog.requireType('Blockly.IToolbox');
-const {ToolboxCategory} = goog.require('Blockly.ToolboxCategory');
-const {ToolboxSeparator} = goog.require('Blockly.ToolboxSeparator');
-
-
-/**
- * Class for a category in a toolbox that can be collapsed.
- * @implements {ICollapsibleToolboxItem}
- * @alias Blockly.CollapsibleToolboxCategory
- */
-class CollapsibleToolboxCategory extends ToolboxCategory {
-  /**
-   * @param {!toolbox.CategoryInfo} categoryDef The information needed
-   *     to create a category in the toolbox.
-   * @param {!IToolbox} toolbox The parent toolbox for the category.
-   * @param {ICollapsibleToolboxItem=} opt_parent The parent category or null if
-   *     the category does not have a parent.
-   */
-  constructor(categoryDef, toolbox, opt_parent) {
-    super(categoryDef, toolbox, opt_parent);
-
-    /**
-     * Container for any child categories.
-     * @type {?HTMLDivElement}
-     * @protected
-     */
-    this.subcategoriesDiv_ = null;
-
-    /**
-     * Whether or not the category should display its subcategories.
-     * @type {boolean}
-     * @protected
-     */
-    this.expanded_ = false;
-
-    /**
-     * The child toolbox items for this category.
-     * @type {!Array<!IToolboxItem>}
-     * @protected
-     */
-    this.toolboxItems_ = [];
-  }
-
-  /**
-   * @override
-   */
-  makeDefaultCssConfig_() {
-    const cssConfig = super.makeDefaultCssConfig_();
-    cssConfig['contents'] = 'blocklyToolboxContents';
-    return cssConfig;
-  }
-
-  /**
-   * @override
-   */
-  parseContents_(categoryDef) {
-    const contents = categoryDef['contents'];
-    let prevIsFlyoutItem = true;
-
-    if (categoryDef['custom']) {
-      this.flyoutItems_ = categoryDef['custom'];
-    } else if (contents) {
-      for (let i = 0; i < contents.length; i++) {
-        const itemDef = contents[i];
-        // Separators can exist as either a flyout item or a toolbox item so
-        // decide where it goes based on the type of the previous item.
-        if (!registry.hasItem(registry.Type.TOOLBOX_ITEM, itemDef['kind']) ||
-            (itemDef['kind'].toLowerCase() ===
-                 ToolboxSeparator.registrationName &&
-             prevIsFlyoutItem)) {
-          const flyoutItem = /** @type {toolbox.FlyoutItemInfo} */ (itemDef);
-          this.flyoutItems_.push(flyoutItem);
-          prevIsFlyoutItem = true;
-        } else {
-          this.createToolboxItem_(itemDef);
-          prevIsFlyoutItem = false;
-        }
-      }
-    }
-  }
-
-  /**
-   * Creates a toolbox item and adds it to the list of toolbox items.
-   * @param {!toolbox.ToolboxItemInfo} itemDef The information needed
-   *     to create a toolbox item.
-   * @private
-   */
-  createToolboxItem_(itemDef) {
-    let registryName = itemDef['kind'];
-    const categoryDef = /** @type {!toolbox.CategoryInfo} */ (itemDef);
-
-    // Categories that are collapsible are created using a class registered
-    // under a different name.
-    if (registryName.toUpperCase() == 'CATEGORY' &&
-        toolbox.isCategoryCollapsible(categoryDef)) {
-      registryName = CollapsibleToolboxCategory.registrationName;
-    }
-    const ToolboxItemClass =
-        registry.getClass(registry.Type.TOOLBOX_ITEM, registryName);
-    const toolboxItem =
-        new ToolboxItemClass(itemDef, this.parentToolbox_, this);
-    this.toolboxItems_.push(toolboxItem);
-  }
-
-  /**
-   * @override
-   */
-  init() {
-    super.init();
-
-    this.setExpanded(
-        this.toolboxItemDef_['expanded'] === 'true' ||
-        this.toolboxItemDef_['expanded']);
-  }
-
-  /**
-   * @override
-   */
-  createDom_() {
-    super.createDom_();
-
-    const subCategories = this.getChildToolboxItems();
-    this.subcategoriesDiv_ = this.createSubCategoriesDom_(subCategories);
-    aria.setRole(this.subcategoriesDiv_, aria.Role.GROUP);
-    this.htmlDiv_.appendChild(this.subcategoriesDiv_);
-
-    return this.htmlDiv_;
-  }
-
-  /**
-   * @override
-   */
-  createIconDom_() {
-    const toolboxIcon = document.createElement('span');
-    if (!this.parentToolbox_.isHorizontal()) {
-      dom.addClass(toolboxIcon, this.cssConfig_['icon']);
-      toolboxIcon.style.visibility = 'visible';
-    }
-
-    toolboxIcon.style.display = 'inline-block';
-    return toolboxIcon;
-  }
-
-  /**
-   * Create the DOM for all subcategories.
-   * @param {!Array<!IToolboxItem>} subcategories The subcategories.
-   * @return {!HTMLDivElement} The div holding all the subcategories.
-   * @protected
-   */
-  createSubCategoriesDom_(subcategories) {
-    const contentsContainer =
-        /** @type {!HTMLDivElement} */ (document.createElement('div'));
-    dom.addClass(contentsContainer, this.cssConfig_['contents']);
-
-    for (let i = 0; i < subcategories.length; i++) {
-      const newCategory = subcategories[i];
-      newCategory.init();
-      const newCategoryDiv = newCategory.getDiv();
-      contentsContainer.appendChild(newCategoryDiv);
-      if (newCategory.getClickTarget) {
-        newCategory.getClickTarget().setAttribute('id', newCategory.getId());
-      }
-    }
-    return contentsContainer;
-  }
-
-  /**
-   * Opens or closes the current category.
-   * @param {boolean} isExpanded True to expand the category, false to close.
-   * @public
-   */
-  setExpanded(isExpanded) {
-    if (this.expanded_ === isExpanded) {
-      return;
-    }
-    this.expanded_ = isExpanded;
-    if (isExpanded) {
-      this.subcategoriesDiv_.style.display = 'block';
-      this.openIcon_(this.iconDom_);
-    } else {
-      this.subcategoriesDiv_.style.display = 'none';
-      this.closeIcon_(this.iconDom_);
-    }
-    aria.setState(
-        /** @type {!HTMLDivElement} */ (this.htmlDiv_), aria.State.EXPANDED,
-        isExpanded);
-
-    this.parentToolbox_.handleToolboxItemResize();
-  }
-
-  /**
-   * @override
-   */
-  setVisible_(isVisible) {
-    this.htmlDiv_.style.display = isVisible ? 'block' : 'none';
-    const childToolboxItems = this.getChildToolboxItems();
-    for (let i = 0; i < childToolboxItems.length; i++) {
-      const child = childToolboxItems[i];
-      child.setVisible_(isVisible);
-    }
-    this.isHidden_ = !isVisible;
-
-    if (this.parentToolbox_.getSelectedItem() === this) {
-      this.parentToolbox_.clearSelection();
-    }
-  }
-
-  /**
-   * Whether the category is expanded to show its child subcategories.
-   * @return {boolean} True if the toolbox item shows its children, false if it
-   *     is collapsed.
-   * @public
-   */
-  isExpanded() {
-    return this.expanded_;
-  }
-
-  /**
-   * @override
-   */
-  isCollapsible() {
-    return true;
-  }
-
-  /**
-   * @override
-   */
-  onClick(_e) {
-    this.toggleExpanded();
-  }
-
-  /**
-   * Toggles whether or not the category is expanded.
-   * @public
-   */
-  toggleExpanded() {
-    this.setExpanded(!this.expanded_);
-  }
-
-  /**
-   * @override
-   */
-  getDiv() {
-    return this.htmlDiv_;
-  }
-
-  /**
-   * Gets any children toolbox items. (ex. Gets the subcategories)
-   * @return {!Array<!IToolboxItem>} The child toolbox items.
-   */
-  getChildToolboxItems() {
-    return this.toolboxItems_;
-  }
-}
-
-/**
- * All the CSS class names that are used to create a collapsible
- * category. This is all the properties from the regular category plus contents.
- * @typedef {{
- *            container:?string,
- *            row:?string,
- *            rowcontentcontainer:?string,
- *            icon:?string,
- *            label:?string,
- *            selected:?string,
- *            openicon:?string,
- *            closedicon:?string,
- *            contents:?string
- *          }}
- */
-CollapsibleToolboxCategory.CssConfig;
-
-/**
- * Name used for registering a collapsible toolbox category.
- * @type {string}
- * @override
- */
-CollapsibleToolboxCategory.registrationName = 'collapsibleCategory';
-
-
-registry.register(
-    registry.Type.TOOLBOX_ITEM, CollapsibleToolboxCategory.registrationName,
-    CollapsibleToolboxCategory);
-
-exports.CollapsibleToolboxCategory = CollapsibleToolboxCategory;

package/core/toolbox/separator.js

@@ -1,133 +0,0 @@
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview A separator used for separating toolbox categories.
- */
-'use strict';
-
-/**
- * A separator used for separating toolbox categories.
- * @class
- */
-goog.module('Blockly.ToolboxSeparator');
-
-const Css = goog.require('Blockly.Css');
-const dom = goog.require('Blockly.utils.dom');
-const object = goog.require('Blockly.utils.object');
-const registry = goog.require('Blockly.registry');
-/* eslint-disable-next-line no-unused-vars */
-const toolbox = goog.requireType('Blockly.utils.toolbox');
-/* eslint-disable-next-line no-unused-vars */
-const {IToolbox} = goog.requireType('Blockly.IToolbox');
-const {ToolboxItem} = goog.require('Blockly.ToolboxItem');
-
-
-/**
- * Class for a toolbox separator. This is the thin visual line that appears on
- * the toolbox. This item is not interactable.
- * @extends {ToolboxItem}
- * @alias Blockly.ToolboxSeparator
- */
-class ToolboxSeparator extends ToolboxItem {
-  /**
-   * @param {!toolbox.SeparatorInfo} separatorDef The information
-   *     needed to create a separator.
-   * @param {!IToolbox} toolbox The parent toolbox for the separator.
-   */
-  constructor(separatorDef, toolbox) {
-    super(separatorDef, toolbox);
-    /**
-     * All the CSS class names that are used to create a separator.
-     * @type {!ToolboxSeparator.CssConfig}
-     * @protected
-     */
-    this.cssConfig_ = {'container': 'blocklyTreeSeparator'};
-
-    /**
-     * @type {?HTMLDivElement}
-     * @private
-     */
-    this.htmlDiv_ = null;
-
-    const cssConfig = separatorDef['cssconfig'] || separatorDef['cssConfig'];
-    object.mixin(this.cssConfig_, cssConfig);
-  }
-
-  /**
-   * @override
-   */
-  init() {
-    this.createDom_();
-  }
-
-  /**
-   * Creates the DOM for a separator.
-   * @return {!HTMLDivElement} The parent element for the separator.
-   * @protected
-   */
-  createDom_() {
-    const container =
-        /** @type {!HTMLDivElement} */ (document.createElement('div'));
-    dom.addClass(container, this.cssConfig_['container']);
-    this.htmlDiv_ = container;
-    return container;
-  }
-
-  /**
-   * @override
-   */
-  getDiv() {
-    return /** @type {!HTMLDivElement} */ (this.htmlDiv_);
-  }
-
-  /**
-   * @override
-   */
-  dispose() {
-    dom.removeNode(/** @type {!HTMLDivElement} */ (this.htmlDiv_));
-  }
-}
-
-/**
- * All the CSS class names that are used to create a separator.
- * @typedef {{
- *            container:(string|undefined)
- *          }}
- */
-ToolboxSeparator.CssConfig;
-
-/**
- * Name used for registering a toolbox separator.
- * @type {string}
- */
-ToolboxSeparator.registrationName = 'sep';
-
-/**
- * CSS for Toolbox.  See css.js for use.
- */
-Css.register(`
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-`);
-
-registry.register(
-    registry.Type.TOOLBOX_ITEM, ToolboxSeparator.registrationName,
-    ToolboxSeparator);
-
-exports.ToolboxSeparator = ToolboxSeparator;

package/core/toolbox/toolbox_item.js

@@ -1,173 +0,0 @@
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview An item in the toolbox.
- */
-'use strict';
-
-/**
- * An item in the toolbox.
- * @class
- */
-goog.module('Blockly.ToolboxItem');
-
-const idGenerator = goog.require('Blockly.utils.idGenerator');
-/* eslint-disable-next-line no-unused-vars */
-const toolbox = goog.requireType('Blockly.utils.toolbox');
-/* eslint-disable-next-line no-unused-vars */
-const {ICollapsibleToolboxItem} = goog.requireType('Blockly.ICollapsibleToolboxItem');
-/* eslint-disable-next-line no-unused-vars */
-const {IToolboxItem} = goog.require('Blockly.IToolboxItem');
-/* eslint-disable-next-line no-unused-vars */
-const {IToolbox} = goog.requireType('Blockly.IToolbox');
-/* eslint-disable-next-line no-unused-vars */
-const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
-
-
-/**
- * Class for an item in the toolbox.
- * @implements {IToolboxItem}
- * @alias Blockly.ToolboxItem
- */
-class ToolboxItem {
-  /**
-   * @param {!toolbox.ToolboxItemInfo} toolboxItemDef The JSON defining
-   *     the toolbox item.
-   * @param {!IToolbox} toolbox The toolbox that holds the toolbox item.
-   * @param {ICollapsibleToolboxItem=} opt_parent The parent toolbox item
-   *     or null if the category does not have a parent.
-   */
-  constructor(toolboxItemDef, toolbox, opt_parent) {
-    /**
-     * The id for the category.
-     * @type {string}
-     * @protected
-     */
-    this.id_ = toolboxItemDef['toolboxitemid'] || idGenerator.getNextUniqueId();
-
-    /**
-     * The parent of the category.
-     * @type {?ICollapsibleToolboxItem}
-     * @protected
-     */
-    this.parent_ = opt_parent || null;
-
-    /**
-     * The level that the category is nested at.
-     * @type {number}
-     * @protected
-     */
-    this.level_ = this.parent_ ? this.parent_.getLevel() + 1 : 0;
-
-    /**
-     * The JSON definition of the toolbox item.
-     * @type {?toolbox.ToolboxItemInfo}
-     * @protected
-     */
-    this.toolboxItemDef_ = toolboxItemDef;
-
-    /**
-     * The toolbox this category belongs to.
-     * @type {!IToolbox}
-     * @protected
-     */
-    this.parentToolbox_ = toolbox;
-
-    /**
-     * The workspace of the parent toolbox.
-     * @type {!WorkspaceSvg}
-     * @protected
-     */
-    this.workspace_ = this.parentToolbox_.getWorkspace();
-  }
-
-  /**
-   * Initializes the toolbox item.
-   * This includes creating the DOM and updating the state of any items based
-   * on the info object.
-   * @public
-   */
-  init() {
-    // No-op by default.
-  }
-
-  /**
-   * Gets the div for the toolbox item.
-   * @return {?Element} The div for the toolbox item.
-   * @public
-   */
-  getDiv() {
-    return null;
-  }
-
-  /**
-   * Gets the HTML element that is clickable.
-   * The parent toolbox element receives clicks. The parent toolbox will add an
-   * ID to this element so it can pass the onClick event to the correct
-   * toolboxItem.
-   * @return {?Element} The HTML element that receives clicks, or null if this
-   *     item should not receive clicks.
-   * @public
-   */
-  getClickTarget() {
-    return null;
-  }
-
-  /**
-   * Gets a unique identifier for this toolbox item.
-   * @return {string} The ID for the toolbox item.
-   * @public
-   */
-  getId() {
-    return this.id_;
-  }
-
-  /**
-   * Gets the parent if the toolbox item is nested.
-   * @return {?IToolboxItem} The parent toolbox item, or null if
-   *     this toolbox item is not nested.
-   * @public
-   */
-  getParent() {
-    return null;
-  }
-
-  /**
-   * Gets the nested level of the category.
-   * @return {number} The nested level of the category.
-   * @package
-   */
-  getLevel() {
-    return this.level_;
-  }
-
-  /**
-   * Whether the toolbox item is selectable.
-   * @return {boolean} True if the toolbox item can be selected.
-   * @public
-   */
-  isSelectable() {
-    return false;
-  }
-
-  /**
-   * Whether the toolbox item is collapsible.
-   * @return {boolean} True if the toolbox item is collapsible.
-   * @public
-   */
-  isCollapsible() {
-    return false;
-  }
-
-  /**
-   * Dispose of this toolbox item. No-op by default.
-   * @public
-   */
-  dispose() {}
-}
-
-exports.ToolboxItem = ToolboxItem;