blockly 7.20211209.4 → 8.0.0

package/core/theme.js

@@ -21,65 +21,157 @@ const registry = goog.require('Blockly.registry');
 
 /**
  * Class for a theme.
- * @param {string} name Theme name.
- * @param {!Object<string, Theme.BlockStyle>=} opt_blockStyles A map
- *     from style names (strings) to objects with style attributes for blocks.
- * @param {!Object<string, Theme.CategoryStyle>=} opt_categoryStyles A
- *     map from style names (strings) to objects with style attributes for
- *     categories.
- * @param {!Theme.ComponentStyle=} opt_componentStyles A map of Blockly
- *     component names to style value.
- * @constructor
  * @alias Blockly.Theme
  */
-const Theme = function(
-    name, opt_blockStyles, opt_categoryStyles, opt_componentStyles) {
+class Theme {
   /**
-   * The theme name. This can be used to reference a specific theme in CSS.
-   * @type {string}
+   * @param {string} name Theme name.
+   * @param {!Object<string, Theme.BlockStyle>=} opt_blockStyles A map
+   *     from style names (strings) to objects with style attributes for blocks.
+   * @param {!Object<string, Theme.CategoryStyle>=} opt_categoryStyles A
+   *     map from style names (strings) to objects with style attributes for
+   *     categories.
+   * @param {!Theme.ComponentStyle=} opt_componentStyles A map of Blockly
+   *     component names to style value.
    */
-  this.name = name;
-
+  constructor(name, opt_blockStyles, opt_categoryStyles, opt_componentStyles) {
+    /**
+     * The theme name. This can be used to reference a specific theme in CSS.
+     * @type {string}
+     */
+    this.name = name;
+
+    /**
+     * The block styles map.
+     * @type {!Object<string, !Theme.BlockStyle>}
+     * @package
+     */
+    this.blockStyles = opt_blockStyles || Object.create(null);
+
+    /**
+     * The category styles map.
+     * @type {!Object<string, Theme.CategoryStyle>}
+     * @package
+     */
+    this.categoryStyles = opt_categoryStyles || Object.create(null);
+
+    /**
+     * The UI components styles map.
+     * @type {!Theme.ComponentStyle}
+     * @package
+     */
+    this.componentStyles = opt_componentStyles ||
+        (/** @type {Theme.ComponentStyle} */ (Object.create(null)));
+
+    /**
+     * The font style.
+     * @type {!Theme.FontStyle}
+     * @package
+     */
+    this.fontStyle = /** @type {Theme.FontStyle} */ (Object.create(null));
+
+    /**
+     * Whether or not to add a 'hat' on top of all blocks with no previous or
+     * output connections.
+     * @type {?boolean}
+     * @package
+     */
+    this.startHats = null;
+
+    // Register the theme by name.
+    registry.register(registry.Type.THEME, name, this);
+  }
   /**
-   * The block styles map.
-   * @type {!Object<string, !Theme.BlockStyle>}
+   * Gets the class name that identifies this theme.
+   * @return {string} The CSS class name.
    * @package
    */
-  this.blockStyles = opt_blockStyles || Object.create(null);
-
+  getClassName() {
+    return this.name + '-theme';
+  }
   /**
-   * The category styles map.
-   * @type {!Object<string, Theme.CategoryStyle>}
-   * @package
+   * Overrides or adds a style to the blockStyles map.
+   * @param {string} blockStyleName The name of the block style.
+   * @param {Theme.BlockStyle} blockStyle The block style.
    */
-  this.categoryStyles = opt_categoryStyles || Object.create(null);
-
+  setBlockStyle(blockStyleName, blockStyle) {
+    this.blockStyles[blockStyleName] = blockStyle;
+  }
   /**
-   * The UI components styles map.
-   * @type {!Theme.ComponentStyle}
-   * @package
+   * Overrides or adds a style to the categoryStyles map.
+   * @param {string} categoryStyleName The name of the category style.
+   * @param {Theme.CategoryStyle} categoryStyle The category style.
    */
-  this.componentStyles = opt_componentStyles ||
-      (/** @type {Theme.ComponentStyle} */ (Object.create(null)));
-
+  setCategoryStyle(categoryStyleName, categoryStyle) {
+    this.categoryStyles[categoryStyleName] = categoryStyle;
+  }
   /**
-   * The font style.
-   * @type {!Theme.FontStyle}
-   * @package
+   * Gets the style for a given Blockly UI component.  If the style value is a
+   * string, we attempt to find the value of any named references.
+   * @param {string} componentName The name of the component.
+   * @return {?string} The style value.
    */
-  this.fontStyle = /** @type {Theme.FontStyle} */ (Object.create(null));
-
+  getComponentStyle(componentName) {
+    const style = this.componentStyles[componentName];
+    if (style && typeof style === 'string' &&
+        this.getComponentStyle(/** @type {string} */ (style))) {
+      return this.getComponentStyle(/** @type {string} */ (style));
+    }
+    return style ? String(style) : null;
+  }
   /**
-   * Whether or not to add a 'hat' on top of all blocks with no previous or
-   * output connections.
-   * @type {?boolean}
-   * @package
+   * Configure a specific Blockly UI component with a style value.
+   * @param {string} componentName The name of the component.
+   * @param {*} styleValue The style value.
    */
-  this.startHats = null;
+  setComponentStyle(componentName, styleValue) {
+    this.componentStyles[componentName] = styleValue;
+  }
+  /**
+   * Configure a theme's font style.
+   * @param {Theme.FontStyle} fontStyle The font style.
+   */
+  setFontStyle(fontStyle) {
+    this.fontStyle = fontStyle;
+  }
+  /**
+   * Configure a theme's start hats.
+   * @param {boolean} startHats True if the theme enables start hats, false
+   *     otherwise.
+   */
+  setStartHats(startHats) {
+    this.startHats = startHats;
+  }
+  /**
+   * Define a new Blockly theme.
+   * @param {string} name The name of the theme.
+   * @param {!Object} themeObj An object containing theme properties.
+   * @return {!Theme} A new Blockly theme.
+   */
+  static defineTheme(name, themeObj) {
+    const theme = new Theme(name);
+    let base = themeObj['base'];
+    if (base) {
+      if (typeof base === 'string') {
+        base = registry.getObject(registry.Type.THEME, base);
+      }
+      if (base instanceof Theme) {
+        object.deepMerge(theme, base);
+        theme.name = name;
+      }
+    }
 
-  // Register the theme by name.
-  registry.register(registry.Type.THEME, name, this);
-};
+    object.deepMerge(theme.blockStyles, themeObj['blockStyles']);
+    object.deepMerge(theme.categoryStyles, themeObj['categoryStyles']);
+    object.deepMerge(theme.componentStyles, themeObj['componentStyles']);
+    object.deepMerge(theme.fontStyle, themeObj['fontStyle']);
+    if (themeObj['startHats'] !== null) {
+      theme.startHats = themeObj['startHats'];
+    }
+
+    return theme;
+  }
+}
 
 /**
  * A block style.
@@ -133,102 +225,4 @@ Theme.ComponentStyle;
  */
 Theme.FontStyle;
 
-/**
- * Gets the class name that identifies this theme.
- * @return {string} The CSS class name.
- * @package
- */
-Theme.prototype.getClassName = function() {
-  return this.name + '-theme';
-};
-
-/**
- * Overrides or adds a style to the blockStyles map.
- * @param {string} blockStyleName The name of the block style.
- * @param {Theme.BlockStyle} blockStyle The block style.
- */
-Theme.prototype.setBlockStyle = function(blockStyleName, blockStyle) {
-  this.blockStyles[blockStyleName] = blockStyle;
-};
-
-/**
- * Overrides or adds a style to the categoryStyles map.
- * @param {string} categoryStyleName The name of the category style.
- * @param {Theme.CategoryStyle} categoryStyle The category style.
- */
-Theme.prototype.setCategoryStyle = function(categoryStyleName, categoryStyle) {
-  this.categoryStyles[categoryStyleName] = categoryStyle;
-};
-
-/**
- * Gets the style for a given Blockly UI component.  If the style value is a
- * string, we attempt to find the value of any named references.
- * @param {string} componentName The name of the component.
- * @return {?string} The style value.
- */
-Theme.prototype.getComponentStyle = function(componentName) {
-  const style = this.componentStyles[componentName];
-  if (style && typeof style === 'string' &&
-      this.getComponentStyle(/** @type {string} */ (style))) {
-    return this.getComponentStyle(/** @type {string} */ (style));
-  }
-  return style ? String(style) : null;
-};
-
-/**
- * Configure a specific Blockly UI component with a style value.
- * @param {string} componentName The name of the component.
- * @param {*} styleValue The style value.
- */
-Theme.prototype.setComponentStyle = function(componentName, styleValue) {
-  this.componentStyles[componentName] = styleValue;
-};
-
-/**
- * Configure a theme's font style.
- * @param {Theme.FontStyle} fontStyle The font style.
- */
-Theme.prototype.setFontStyle = function(fontStyle) {
-  this.fontStyle = fontStyle;
-};
-
-/**
- * Configure a theme's start hats.
- * @param {boolean} startHats True if the theme enables start hats, false
- *     otherwise.
- */
-Theme.prototype.setStartHats = function(startHats) {
-  this.startHats = startHats;
-};
-
-/**
- * Define a new Blockly theme.
- * @param {string} name The name of the theme.
- * @param {!Object} themeObj An object containing theme properties.
- * @return {!Theme} A new Blockly theme.
- */
-Theme.defineTheme = function(name, themeObj) {
-  const theme = new Theme(name);
-  let base = themeObj['base'];
-  if (base) {
-    if (typeof base === 'string') {
-      base = registry.getObject(registry.Type.THEME, base);
-    }
-    if (base instanceof Theme) {
-      object.deepMerge(theme, base);
-      theme.name = name;
-    }
-  }
-
-  object.deepMerge(theme.blockStyles, themeObj['blockStyles']);
-  object.deepMerge(theme.categoryStyles, themeObj['categoryStyles']);
-  object.deepMerge(theme.componentStyles, themeObj['componentStyles']);
-  object.deepMerge(theme.fontStyle, themeObj['fontStyle']);
-  if (themeObj['startHats'] !== null) {
-    theme.startHats = themeObj['startHats'];
-  }
-
-  return theme;
-};
-
 exports.Theme = Theme;

package/core/theme_manager.js

@@ -29,179 +29,183 @@ const {Workspace} = goog.requireType('Blockly.Workspace');
 
 /**
  * Class for storing and updating a workspace's theme and UI components.
- * @param {!WorkspaceSvg} workspace The main workspace.
- * @param {!Theme} theme The workspace theme.
- * @constructor
- * @package
  * @alias Blockly.ThemeManager
  */
-const ThemeManager = function(workspace, theme) {
+class ThemeManager {
   /**
-   * The main workspace.
-   * @type {!WorkspaceSvg}
-   * @private
+   * @param {!WorkspaceSvg} workspace The main workspace.
+   * @param {!Theme} theme The workspace theme.
+   * @package
    */
-  this.workspace_ = workspace;
-
-  /**
-   * The Blockly theme to use.
-   * @type {!Theme}
-   * @private
-   */
-  this.theme_ = theme;
+  constructor(workspace, theme) {
+    /**
+     * The main workspace.
+     * @type {!WorkspaceSvg}
+     * @private
+     */
+    this.workspace_ = workspace;
+
+    /**
+     * The Blockly theme to use.
+     * @type {!Theme}
+     * @private
+     */
+    this.theme_ = theme;
+
+    /**
+     * A list of workspaces that are subscribed to this theme.
+     * @type {!Array<Workspace>}
+     * @private
+     */
+    this.subscribedWorkspaces_ = [];
+
+    /**
+     * A map of subscribed UI components, keyed by component name.
+     * @type {!Object<string, !Array<!ThemeManager.Component>>}
+     * @private
+     */
+    this.componentDB_ = Object.create(null);
+  }
 
   /**
-   * A list of workspaces that are subscribed to this theme.
-   * @type {!Array<Workspace>}
-   * @private
+   * Get the workspace theme.
+   * @return {!Theme} The workspace theme.
+   * @package
    */
-  this.subscribedWorkspaces_ = [];
+  getTheme() {
+    return this.theme_;
+  }
 
   /**
-   * A map of subscribed UI components, keyed by component name.
-   * @type {!Object<string, !Array<!ThemeManager.Component>>}
-   * @private
+   * Set the workspace theme, and refresh the workspace and all components.
+   * @param {!Theme} theme The workspace theme.
+   * @package
    */
-  this.componentDB_ = Object.create(null);
-};
+  setTheme(theme) {
+    const prevTheme = this.theme_;
+    this.theme_ = theme;
+
+    // Set the theme name onto the injection div.
+    const injectionDiv = this.workspace_.getInjectionDiv();
+    if (injectionDiv) {
+      if (prevTheme) {
+        dom.removeClass(injectionDiv, prevTheme.getClassName());
+      }
+      dom.addClass(injectionDiv, this.theme_.getClassName());
+    }
 
-/**
- * A Blockly UI component type.
- * @typedef {{
- *            element:!Element,
- *            propertyName:string
- *          }}
- */
-ThemeManager.Component;
+    // Refresh all subscribed workspaces.
+    for (let i = 0, workspace; (workspace = this.subscribedWorkspaces_[i]);
+         i++) {
+      /** @type {!WorkspaceSvg} */ (workspace).refreshTheme();
+    }
 
-/**
- * Get the workspace theme.
- * @return {!Theme} The workspace theme.
- * @package
- */
-ThemeManager.prototype.getTheme = function() {
-  return this.theme_;
-};
+    // Refresh all registered Blockly UI components.
+    for (let i = 0, keys = Object.keys(this.componentDB_), key; (key = keys[i]);
+         i++) {
+      for (let j = 0, component; (component = this.componentDB_[key][j]); j++) {
+        const element = component.element;
+        const propertyName = component.propertyName;
+        const style = this.theme_ && this.theme_.getComponentStyle(key);
+        element.style[propertyName] = style || '';
+      }
+    }
 
-/**
- * Set the workspace theme, and refresh the workspace and all components.
- * @param {!Theme} theme The workspace theme.
- * @package
- */
-ThemeManager.prototype.setTheme = function(theme) {
-  const prevTheme = this.theme_;
-  this.theme_ = theme;
-
-  // Set the theme name onto the injection div.
-  const injectionDiv = this.workspace_.getInjectionDiv();
-  if (injectionDiv) {
-    if (prevTheme) {
-      dom.removeClass(injectionDiv, prevTheme.getClassName());
+    for (const workspace of this.subscribedWorkspaces_) {
+      /** @type {!WorkspaceSvg} */ (workspace).hideChaff();
     }
-    dom.addClass(injectionDiv, this.theme_.getClassName());
   }
 
-  // Refresh all subscribed workspaces.
-  for (let i = 0, workspace; (workspace = this.subscribedWorkspaces_[i]); i++) {
-    workspace.refreshTheme();
+  /**
+   * Subscribe a workspace to changes to the selected theme.  If a new theme is
+   * set, the workspace is called to refresh its blocks.
+   * @param {!Workspace} workspace The workspace to subscribe.
+   * @package
+   */
+  subscribeWorkspace(workspace) {
+    this.subscribedWorkspaces_.push(workspace);
   }
 
-  // Refresh all registered Blockly UI components.
-  for (let i = 0, keys = Object.keys(this.componentDB_), key; (key = keys[i]);
-       i++) {
-    for (let j = 0, component; (component = this.componentDB_[key][j]); j++) {
-      const element = component.element;
-      const propertyName = component.propertyName;
-      const style = this.theme_ && this.theme_.getComponentStyle(key);
-      element.style[propertyName] = style || '';
+  /**
+   * Unsubscribe a workspace to changes to the selected theme.
+   * @param {!Workspace} workspace The workspace to unsubscribe.
+   * @package
+   */
+  unsubscribeWorkspace(workspace) {
+    if (!arrayUtils.removeElem(this.subscribedWorkspaces_, workspace)) {
+      throw Error(
+          'Cannot unsubscribe a workspace that hasn\'t been subscribed.');
     }
   }
 
-  for (const workspace of this.subscribedWorkspaces_) {
-    workspace.hideChaff();
-  }
-};
-
-/**
- * Subscribe a workspace to changes to the selected theme.  If a new theme is
- * set, the workspace is called to refresh its blocks.
- * @param {!Workspace} workspace The workspace to subscribe.
- * @package
- */
-ThemeManager.prototype.subscribeWorkspace = function(workspace) {
-  this.subscribedWorkspaces_.push(workspace);
-};
+  /**
+   * Subscribe an element to changes to the selected theme.  If a new theme is
+   * selected, the element's style is refreshed with the new theme's style.
+   * @param {!Element} element The element to subscribe.
+   * @param {string} componentName The name used to identify the component. This
+   *     must be the same name used to configure the style in the Theme object.
+   * @param {string} propertyName The inline style property name to update.
+   * @package
+   */
+  subscribe(element, componentName, propertyName) {
+    if (!this.componentDB_[componentName]) {
+      this.componentDB_[componentName] = [];
+    }
 
-/**
- * Unsubscribe a workspace to changes to the selected theme.
- * @param {!Workspace} workspace The workspace to unsubscribe.
- * @package
- */
-ThemeManager.prototype.unsubscribeWorkspace = function(workspace) {
-  if (!arrayUtils.removeElem(this.subscribedWorkspaces_, workspace)) {
-    throw Error('Cannot unsubscribe a workspace that hasn\'t been subscribed.');
-  }
-};
+    // Add the element to our component map.
+    this.componentDB_[componentName].push(
+        {element: element, propertyName: propertyName});
 
-/**
- * Subscribe an element to changes to the selected theme.  If a new theme is
- * selected, the element's style is refreshed with the new theme's style.
- * @param {!Element} element The element to subscribe.
- * @param {string} componentName The name used to identify the component. This
- *     must be the same name used to configure the style in the Theme object.
- * @param {string} propertyName The inline style property name to update.
- * @package
- */
-ThemeManager.prototype.subscribe = function(
-    element, componentName, propertyName) {
-  if (!this.componentDB_[componentName]) {
-    this.componentDB_[componentName] = [];
+    // Initialize the element with its corresponding theme style.
+    const style = this.theme_ && this.theme_.getComponentStyle(componentName);
+    element.style[propertyName] = style || '';
   }
 
-  // Add the element to our component map.
-  this.componentDB_[componentName].push(
-      {element: element, propertyName: propertyName});
-
-  // Initialize the element with its corresponding theme style.
-  const style = this.theme_ && this.theme_.getComponentStyle(componentName);
-  element.style[propertyName] = style || '';
-};
-
-/**
- * Unsubscribe an element to changes to the selected theme.
- * @param {Element} element The element to unsubscribe.
- * @package
- */
-ThemeManager.prototype.unsubscribe = function(element) {
-  if (!element) {
-    return;
-  }
-  // Go through all component, and remove any references to this element.
-  const componentNames = Object.keys(this.componentDB_);
-  for (let c = 0, componentName; (componentName = componentNames[c]); c++) {
-    const elements = this.componentDB_[componentName];
-    for (let i = elements.length - 1; i >= 0; i--) {
-      if (elements[i].element === element) {
-        elements.splice(i, 1);
-      }
+  /**
+   * Unsubscribe an element to changes to the selected theme.
+   * @param {Element} element The element to unsubscribe.
+   * @package
+   */
+  unsubscribe(element) {
+    if (!element) {
+      return;
     }
-    // Clean up the component map entry if the list is empty.
-    if (!this.componentDB_[componentName].length) {
-      delete this.componentDB_[componentName];
+    // Go through all component, and remove any references to this element.
+    const componentNames = Object.keys(this.componentDB_);
+    for (let c = 0, componentName; (componentName = componentNames[c]); c++) {
+      const elements = this.componentDB_[componentName];
+      for (let i = elements.length - 1; i >= 0; i--) {
+        if (elements[i].element === element) {
+          elements.splice(i, 1);
+        }
+      }
+      // Clean up the component map entry if the list is empty.
+      if (!this.componentDB_[componentName].length) {
+        delete this.componentDB_[componentName];
+      }
     }
   }
-};
+
+  /**
+   * Dispose of this theme manager.
+   * @package
+   * @suppress {checkTypes}
+   */
+  dispose() {
+    this.owner_ = null;
+    this.theme_ = null;
+    this.subscribedWorkspaces_ = null;
+    this.componentDB_ = null;
+  }
+}
 
 /**
- * Dispose of this theme manager.
- * @package
- * @suppress {checkTypes}
+ * A Blockly UI component type.
+ * @typedef {{
+ *            element:!Element,
+ *            propertyName:string
+ *          }}
  */
-ThemeManager.prototype.dispose = function() {
-  this.owner_ = null;
-  this.theme_ = null;
-  this.subscribedWorkspaces_ = null;
-  this.componentDB_ = null;
-};
+ThemeManager.Component;
 
 exports.ThemeManager = ThemeManager;