blockly 8.0.5 → 9.0.0-beta.0

package/core/theme/themes.js

@@ -1,23 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Namespace for themes.
- */
-'use strict';
-
-/**
- * Namespace for themes.
- * @namespace Blockly.Themes
- */
-goog.module('Blockly.Themes');
-
-const {Classic} = goog.require('Blockly.Themes.Classic');
-const {Zelos} = goog.require('Blockly.Themes.Zelos');
-
-
-exports.Classic = Classic;
-exports.Zelos = Zelos;

package/core/theme.js

@@ -1,228 +0,0 @@
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview The class representing a theme.
- */
-'use strict';
-
-/**
- * The class representing a theme.
- * @class
- */
-goog.module('Blockly.Theme');
-
-const object = goog.require('Blockly.utils.object');
-const registry = goog.require('Blockly.registry');
-
-
-/**
- * Class for a theme.
- * @alias Blockly.Theme
- */
-class 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(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);
-  }
-  /**
-   * Gets the class name that identifies this theme.
-   * @return {string} The CSS class name.
-   * @package
-   */
-  getClassName() {
-    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.
-   */
-  setBlockStyle(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.
-   */
-  setCategoryStyle(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.
-   */
-  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;
-  }
-  /**
-   * Configure a specific Blockly UI component with a style value.
-   * @param {string} componentName The name of the component.
-   * @param {*} styleValue The style value.
-   */
-  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;
-      }
-    }
-
-    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.
- * @typedef {{
- *            colourPrimary:string,
- *            colourSecondary:string,
- *            colourTertiary:string,
- *            hat:string
- *          }}
- */
-Theme.BlockStyle;
-
-/**
- * A category style.
- * @typedef {{
- *            colour:string
- *          }}
- */
-Theme.CategoryStyle;
-
-/**
- * A component style.
- * @typedef {{
- *            workspaceBackgroundColour:?string,
- *            toolboxBackgroundColour:?string,
- *            toolboxForegroundColour:?string,
- *            flyoutBackgroundColour:?string,
- *            flyoutForegroundColour:?string,
- *            flyoutOpacity:?number,
- *            scrollbarColour:?string,
- *            scrollbarOpacity:?number,
- *            insertionMarkerColour:?string,
- *            insertionMarkerOpacity:?number,
- *            markerColour:?string,
- *            cursorColour:?string,
- *            selectedGlowColour:?string,
- *            selectedGlowOpacity:?number,
- *            replacementGlowColour:?string,
- *            replacementGlowOpacity:?number
- *          }}
- */
-Theme.ComponentStyle;
-
-/**
- * A font style.
- * @typedef {{
- *            family:?string,
- *            weight:?string,
- *            size:?number
- *          }}
- */
-Theme.FontStyle;
-
-exports.Theme = Theme;

package/core/theme_manager.js

@@ -1,211 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Object in charge of storing and updating a workspace theme
- *     and UI components.
- */
-'use strict';
-
-/**
- * Object in charge of storing and updating a workspace theme
- *     and UI components.
- * @class
- */
-goog.module('Blockly.ThemeManager');
-
-const arrayUtils = goog.require('Blockly.utils.array');
-const dom = goog.require('Blockly.utils.dom');
-/* eslint-disable-next-line no-unused-vars */
-const {Theme} = goog.requireType('Blockly.Theme');
-/* eslint-disable-next-line no-unused-vars */
-const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
-/* eslint-disable-next-line no-unused-vars */
-const {Workspace} = goog.requireType('Blockly.Workspace');
-
-
-/**
- * Class for storing and updating a workspace's theme and UI components.
- * @alias Blockly.ThemeManager
- */
-class ThemeManager {
-  /**
-   * @param {!WorkspaceSvg} workspace The main workspace.
-   * @param {!Theme} theme The workspace theme.
-   * @package
-   */
-  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);
-  }
-
-  /**
-   * Get the workspace theme.
-   * @return {!Theme} The workspace theme.
-   * @package
-   */
-  getTheme() {
-    return this.theme_;
-  }
-
-  /**
-   * Set the workspace theme, and refresh the workspace and all components.
-   * @param {!Theme} theme The workspace theme.
-   * @package
-   */
-  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());
-    }
-
-    // Refresh all subscribed workspaces.
-    for (let i = 0, workspace; (workspace = this.subscribedWorkspaces_[i]);
-         i++) {
-      /** @type {!WorkspaceSvg} */ (workspace).refreshTheme();
-    }
-
-    // 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 || '';
-      }
-    }
-
-    for (const workspace of this.subscribedWorkspaces_) {
-      /** @type {!WorkspaceSvg} */ (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
-   */
-  subscribeWorkspace(workspace) {
-    this.subscribedWorkspaces_.push(workspace);
-  }
-
-  /**
-   * 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.');
-    }
-  }
-
-  /**
-   * 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] = [];
-    }
-
-    // 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
-   */
-  unsubscribe(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);
-        }
-      }
-      // 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;
-  }
-}
-
-/**
- * A Blockly UI component type.
- * @typedef {{
- *            element:!Element,
- *            propertyName:string
- *          }}
- */
-ThemeManager.Component;
-
-exports.ThemeManager = ThemeManager;