blockly 8.0.5 → 9.0.0-beta.0

package/core/toolbox/collapsible_category.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { ICollapsibleToolboxItem } from '../interfaces/i_collapsible_toolbox_item.js';
+import type { IToolbox } from '../interfaces/i_toolbox.js';
+import type { IToolboxItem } from '../interfaces/i_toolbox_item.js';
+import * as toolbox from '../utils/toolbox.js';
+import { ToolboxCategory } from './category.js';
+/**
+ * Class for a category in a toolbox that can be collapsed.
+ * @alias Blockly.CollapsibleToolboxCategory
+ */
+export declare class CollapsibleToolboxCategory extends ToolboxCategory implements ICollapsibleToolboxItem {
+    /** Name used for registering a collapsible toolbox category. */
+    static registrationName: string;
+    /** Container for any child categories. */
+    protected subcategoriesDiv_: HTMLDivElement | null;
+    /** Whether or not the category should display its subcategories. */
+    protected expanded_: boolean;
+    /** The child toolbox items for this category. */
+    protected toolboxItems_: IToolboxItem[];
+    flyoutItems_: any;
+    isHidden_: any;
+    /**
+     * @param categoryDef The information needed to create a category in the
+     *     toolbox.
+     * @param toolbox The parent toolbox for the category.
+     * @param opt_parent The parent category or null if the category does not have
+     *     a parent.
+     */
+    constructor(categoryDef: toolbox.CategoryInfo, toolbox: IToolbox, opt_parent?: ICollapsibleToolboxItem);
+    makeDefaultCssConfig_(): ToolboxCategory.CssConfig;
+    parseContents_(categoryDef: toolbox.CategoryInfo): void;
+    /**
+     * Creates a toolbox item and adds it to the list of toolbox items.
+     * @param itemDef The information needed to create a toolbox item.
+     */
+    private createToolboxItem_;
+    init(): void;
+    createDom_(): HTMLDivElement;
+    createIconDom_(): HTMLSpanElement;
+    /**
+     * Create the DOM for all subcategories.
+     * @param subcategories The subcategories.
+     * @return The div holding all the subcategories.
+     */
+    protected createSubCategoriesDom_(subcategories: IToolboxItem[]): HTMLDivElement;
+    /**
+     * Opens or closes the current category.
+     * @param isExpanded True to expand the category, false to close.
+     */
+    setExpanded(isExpanded: boolean): void;
+    setVisible_(isVisible: boolean): void;
+    /**
+     * Whether the category is expanded to show its child subcategories.
+     * @return True if the toolbox item shows its children, false if it is
+     *     collapsed.
+     */
+    isExpanded(): boolean;
+    isCollapsible(): boolean;
+    onClick(_e: Event): void;
+    /** Toggles whether or not the category is expanded. */
+    toggleExpanded(): void;
+    getDiv(): HTMLDivElement | null;
+    /**
+     * Gets any children toolbox items. (ex. Gets the subcategories)
+     * @return The child toolbox items.
+     */
+    getChildToolboxItems(): IToolboxItem[];
+}
+export declare namespace CollapsibleToolboxCategory {
+    /**
+     * All the CSS class names that are used to create a collapsible
+     * category. This is all the properties from the regular category plus
+     * contents.
+     */
+    interface CssConfig {
+        container: string | null;
+        row: string | null;
+        rowcontentcontainer: string | null;
+        icon: string | null;
+        label: string | null;
+        selected: string | null;
+        openicon: string | null;
+        closedicon: string | null;
+        contents: string | null;
+    }
+}
+export declare type CssConfig = CollapsibleToolboxCategory.CssConfig;

package/core/toolbox/collapsible_category.ts

@@ -0,0 +1,273 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview A toolbox category used to organize blocks in the toolbox.
+ */
+
+/**
+ * A toolbox category used to organize blocks in the toolbox.
+ * @class
+ */
+import * as goog from '../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.CollapsibleToolboxCategory');
+
+import type {ICollapsibleToolboxItem} from '../interfaces/i_collapsible_toolbox_item.js';
+import type {IToolbox} from '../interfaces/i_toolbox.js';
+import type {IToolboxItem} from '../interfaces/i_toolbox_item.js';
+import * as registry from '../registry.js';
+import * as aria from '../utils/aria.js';
+import * as dom from '../utils/dom.js';
+import * as toolbox from '../utils/toolbox.js';
+
+import {ToolboxCategory} from './category.js';
+import {ToolboxSeparator} from './separator.js';
+
+
+/**
+ * Class for a category in a toolbox that can be collapsed.
+ * @alias Blockly.CollapsibleToolboxCategory
+ */
+export class CollapsibleToolboxCategory extends ToolboxCategory implements
+    ICollapsibleToolboxItem {
+  /** Name used for registering a collapsible toolbox category. */
+  static override registrationName = 'collapsibleCategory';
+
+  /** Container for any child categories. */
+  protected subcategoriesDiv_: HTMLDivElement|null = null;
+
+  /** Whether or not the category should display its subcategories. */
+  protected expanded_ = false;
+
+  /** The child toolbox items for this category. */
+  protected toolboxItems_: IToolboxItem[] = [];
+  override flyoutItems_: AnyDuringMigration;
+  override isHidden_: AnyDuringMigration;
+
+  /**
+   * @param categoryDef The information needed to create a category in the
+   *     toolbox.
+   * @param toolbox The parent toolbox for the category.
+   * @param opt_parent The parent category or null if the category does not have
+   *     a parent.
+   */
+  constructor(
+      categoryDef: toolbox.CategoryInfo, toolbox: IToolbox,
+      opt_parent?: ICollapsibleToolboxItem) {
+    super(categoryDef, toolbox, opt_parent);
+  }
+
+  override makeDefaultCssConfig_() {
+    const cssConfig = super.makeDefaultCssConfig_();
+    (cssConfig as AnyDuringMigration)['contents'] = 'blocklyToolboxContents';
+    return cssConfig;
+  }
+
+  override parseContents_(categoryDef: toolbox.CategoryInfo) {
+    // AnyDuringMigration because:  Element implicitly has an 'any' type because
+    // expression of type '"contents"' can't be used to index type
+    // 'CategoryInfo'.
+    const contents = (categoryDef as AnyDuringMigration)['contents'];
+    let prevIsFlyoutItem = true;
+
+    // AnyDuringMigration because:  Element implicitly has an 'any' type because
+    // expression of type '"custom"' can't be used to index type 'CategoryInfo'.
+    if ((categoryDef as AnyDuringMigration)['custom']) {
+      // AnyDuringMigration because:  Element implicitly has an 'any' type
+      // because expression of type '"custom"' can't be used to index type
+      // 'CategoryInfo'.
+      this.flyoutItems_ = (categoryDef as AnyDuringMigration)['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 = itemDef as toolbox.FlyoutItemInfo;
+          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 itemDef The information needed to create a toolbox item.
+   */
+  private createToolboxItem_(itemDef: toolbox.ToolboxItemInfo) {
+    let registryName = itemDef['kind'];
+    const categoryDef = itemDef as toolbox.CategoryInfo;
+    // 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_ as AnyDuringMigration)['expanded'] === 'true' ||
+        (this.toolboxItemDef_ as AnyDuringMigration)['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()) {
+      // AnyDuringMigration because:  Argument of type 'string | undefined' is
+      // not assignable to parameter of type 'string'.
+      dom.addClass(
+          toolboxIcon, (this.cssConfig_ as AnyDuringMigration)['icon']);
+      toolboxIcon.style.visibility = 'visible';
+    }
+
+    toolboxIcon.style.display = 'inline-block';
+    return toolboxIcon;
+  }
+
+  /**
+   * Create the DOM for all subcategories.
+   * @param subcategories The subcategories.
+   * @return The div holding all the subcategories.
+   */
+  protected createSubCategoriesDom_(subcategories: IToolboxItem[]):
+      HTMLDivElement {
+    const contentsContainer = (document.createElement('div'));
+    dom.addClass(
+        contentsContainer, (this.cssConfig_ as AnyDuringMigration)['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 isExpanded True to expand the category, false to close.
+   */
+  setExpanded(isExpanded: boolean) {
+    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(
+        this.htmlDiv_ as HTMLDivElement, aria.State.EXPANDED, isExpanded);
+
+    this.parentToolbox_.handleToolboxItemResize();
+  }
+
+  override setVisible_(isVisible: boolean) {
+    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 True if the toolbox item shows its children, false if it is
+   *     collapsed.
+   */
+  isExpanded(): boolean {
+    return this.expanded_;
+  }
+
+  override isCollapsible() {
+    return true;
+  }
+
+  override onClick(_e: Event) {
+    this.toggleExpanded();
+  }
+
+  /** Toggles whether or not the category is expanded. */
+  toggleExpanded() {
+    this.setExpanded(!this.expanded_);
+  }
+
+  override getDiv() {
+    return this.htmlDiv_;
+  }
+
+  /**
+   * Gets any children toolbox items. (ex. Gets the subcategories)
+   * @return The child toolbox items.
+   */
+  getChildToolboxItems(): IToolboxItem[] {
+    return this.toolboxItems_;
+  }
+}
+
+export namespace CollapsibleToolboxCategory {
+  /**
+   * All the CSS class names that are used to create a collapsible
+   * category. This is all the properties from the regular category plus
+   * contents.
+   */
+  export interface CssConfig {
+    container: string|null;
+    row: string|null;
+    rowcontentcontainer: string|null;
+    icon: string|null;
+    label: string|null;
+    selected: string|null;
+    openicon: string|null;
+    closedicon: string|null;
+    contents: string|null;
+  }
+}
+
+export type CssConfig = CollapsibleToolboxCategory.CssConfig;
+
+registry.register(
+    registry.Type.TOOLBOX_ITEM, CollapsibleToolboxCategory.registrationName,
+    CollapsibleToolboxCategory);

package/core/toolbox/separator.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { IToolbox } from '../interfaces/i_toolbox.js';
+import type * as toolbox from '../utils/toolbox.js';
+import { ToolboxItem } from './toolbox_item.js';
+/**
+ * Class for a toolbox separator. This is the thin visual line that appears on
+ * the toolbox. This item is not interactable.
+ * @alias Blockly.ToolboxSeparator
+ */
+export declare class ToolboxSeparator extends ToolboxItem {
+    /** Name used for registering a toolbox separator. */
+    static registrationName: string;
+    /** All the CSS class names that are used to create a separator. */
+    protected cssConfig_: CssConfig;
+    private htmlDiv_;
+    /**
+     * @param separatorDef The information needed to create a separator.
+     * @param toolbox The parent toolbox for the separator.
+     */
+    constructor(separatorDef: toolbox.SeparatorInfo, toolbox: IToolbox);
+    init(): void;
+    /**
+     * Creates the DOM for a separator.
+     * @return The parent element for the separator.
+     */
+    protected createDom_(): HTMLDivElement;
+    getDiv(): HTMLDivElement;
+    dispose(): void;
+}
+export declare namespace ToolboxSeparator {
+    interface CssConfig {
+        container: string | undefined;
+    }
+}
+export declare type CssConfig = ToolboxSeparator.CssConfig;

package/core/toolbox/separator.ts

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview A separator used for separating toolbox categories.
+ */
+
+/**
+ * A separator used for separating toolbox categories.
+ * @class
+ */
+import * as goog from '../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.ToolboxSeparator');
+
+import * as Css from '../css.js';
+import type {IToolbox} from '../interfaces/i_toolbox.js';
+import * as registry from '../registry.js';
+import * as dom from '../utils/dom.js';
+import type * as toolbox from '../utils/toolbox.js';
+
+import {ToolboxItem} from './toolbox_item.js';
+
+
+/**
+ * Class for a toolbox separator. This is the thin visual line that appears on
+ * the toolbox. This item is not interactable.
+ * @alias Blockly.ToolboxSeparator
+ */
+export class ToolboxSeparator extends ToolboxItem {
+  /** Name used for registering a toolbox separator. */
+  static registrationName = 'sep';
+
+  /** All the CSS class names that are used to create a separator. */
+  protected cssConfig_: CssConfig = {'container': 'blocklyTreeSeparator'};
+
+  private htmlDiv_: HTMLDivElement|null = null;
+
+  /**
+   * @param separatorDef The information needed to create a separator.
+   * @param toolbox The parent toolbox for the separator.
+   */
+  constructor(separatorDef: toolbox.SeparatorInfo, toolbox: IToolbox) {
+    super(separatorDef, toolbox);
+
+    const cssConfig =
+        separatorDef['cssconfig'] || (separatorDef as any)['cssConfig'];
+    Object.assign(this.cssConfig_, cssConfig);
+  }
+
+  override init() {
+    this.createDom_();
+  }
+
+  /**
+   * Creates the DOM for a separator.
+   * @return The parent element for the separator.
+   */
+  protected createDom_(): HTMLDivElement {
+    const container = (document.createElement('div'));
+    dom.addClass(container, this.cssConfig_['container']!);
+    this.htmlDiv_ = container;
+    return container;
+  }
+
+  override getDiv() {
+    return this.htmlDiv_ as HTMLDivElement;
+  }
+
+  override dispose() {
+    dom.removeNode(this.htmlDiv_ as HTMLDivElement);
+  }
+}
+
+export namespace ToolboxSeparator {
+  export interface CssConfig {
+    container: string|undefined;
+  }
+}
+
+export type CssConfig = ToolboxSeparator.CssConfig;
+
+/** 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);