nodeskini 1.0.1 → 1.0.2

package/blocklySkini/blockly/core/theme.js

@@ -0,0 +1,236 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview The class representing a theme.
+ */
+'use strict';
+
+goog.provide('Blockly.Theme');
+
+goog.require('Blockly.registry');
+goog.require('Blockly.utils');
+goog.require('Blockly.utils.colour');
+goog.require('Blockly.utils.object');
+
+
+/**
+ * Class for a theme.
+ * @param {string} name Theme name.
+ * @param {!Object.<string, Blockly.Theme.BlockStyle>=} opt_blockStyles A map
+ *     from style names (strings) to objects with style attributes for blocks.
+ * @param {!Object.<string, Blockly.Theme.CategoryStyle>=} opt_categoryStyles A
+ *     map from style names (strings) to objects with style attributes for
+ *     categories.
+ * @param {!Blockly.Theme.ComponentStyle=} opt_componentStyles A map of Blockly
+ *     component names to style value.
+ * @constructor
+ */
+Blockly.Theme = function(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, !Blockly.Theme.BlockStyle>}
+   * @package
+   */
+  this.blockStyles = opt_blockStyles || Object.create(null);
+
+  /**
+   * The category styles map.
+   * @type {!Object.<string, Blockly.Theme.CategoryStyle>}
+   * @package
+   */
+  this.categoryStyles = opt_categoryStyles || Object.create(null);
+
+  /**
+   * The UI components styles map.
+   * @type {!Blockly.Theme.ComponentStyle}
+   * @package
+   */
+  this.componentStyles = opt_componentStyles ||
+    (/** @type {Blockly.Theme.ComponentStyle} */ (Object.create(null)));
+
+  /**
+   * The font style.
+   * @type {!Blockly.Theme.FontStyle}
+   * @package
+   */
+  this.fontStyle = /** @type {Blockly.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.
+  Blockly.registry.register(Blockly.registry.Type.THEME, name, this);
+};
+
+/**
+ * A block style.
+ * @typedef {{
+ *            colourPrimary:string,
+ *            colourSecondary:string,
+ *            colourTertiary:string,
+ *            hat:string
+ *          }}
+ */
+Blockly.Theme.BlockStyle;
+
+/**
+ * A category style.
+ * @typedef {{
+ *            colour:string
+ *          }}
+ */
+Blockly.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
+ *          }}
+ */
+Blockly.Theme.ComponentStyle;
+
+/**
+ * A font style.
+ * @typedef {{
+ *            family:?string,
+ *            weight:?string,
+ *            size:?number
+ *          }}
+ */
+Blockly.Theme.FontStyle;
+
+/**
+ * Gets the class name that identifies this theme.
+ * @return {string} The CSS class name.
+ * @package
+ */
+Blockly.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 {Blockly.Theme.BlockStyle} blockStyle The block style.
+*/
+Blockly.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 {Blockly.Theme.CategoryStyle} categoryStyle The category style.
+*/
+Blockly.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.
+ */
+Blockly.Theme.prototype.getComponentStyle = function(componentName) {
+  var 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.
+*/
+Blockly.Theme.prototype.setComponentStyle = function(componentName,
+    styleValue) {
+  this.componentStyles[componentName] = styleValue;
+};
+
+/**
+ * Configure a theme's font style.
+ * @param {Blockly.Theme.FontStyle} fontStyle The font style.
+*/
+Blockly.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.
+*/
+Blockly.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 {!Blockly.Theme} A new Blockly theme.
+*/
+Blockly.Theme.defineTheme = function(name, themeObj) {
+  var theme = new Blockly.Theme(name);
+  var base = themeObj['base'];
+  if (base) {
+    if (typeof base == "string") {
+      base = Blockly.registry.getObject(Blockly.registry.Type.THEME, base);
+    }
+    if (base instanceof Blockly.Theme) {
+      Blockly.utils.object.deepMerge(theme, base);
+      theme.name = name;
+    }
+  }
+
+  Blockly.utils.object.deepMerge(theme.blockStyles,
+      themeObj['blockStyles']);
+  Blockly.utils.object.deepMerge(theme.categoryStyles,
+      themeObj['categoryStyles']);
+  Blockly.utils.object.deepMerge(theme.componentStyles,
+      themeObj['componentStyles']);
+  Blockly.utils.object.deepMerge(theme.fontStyle,
+      themeObj['fontStyle']);
+  if (themeObj['startHats'] != null) {
+    theme.startHats = themeObj['startHats'];
+  }
+
+  return theme;
+};

package/blocklySkini/blockly/core/theme_manager.js

@@ -0,0 +1,197 @@
+/**
+ * @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.
+ * @author aschmiedt@google.com (Abby Schmiedt)
+ * @author samelh@google.com (Sam El-Husseini)
+ */
+'use strict';
+
+goog.provide('Blockly.ThemeManager');
+
+goog.require('Blockly.Theme');
+
+
+/**
+ * Class for storing and updating a workspace's theme and UI components.
+ * @param {!Blockly.WorkspaceSvg} workspace The main workspace.
+ * @param {!Blockly.Theme} theme The workspace theme.
+ * @constructor
+ * @package
+ */
+Blockly.ThemeManager = function(workspace, theme) {
+
+  /**
+   * The main workspace.
+   * @type {!Blockly.WorkspaceSvg}
+   * @private
+   */
+  this.workspace_ = workspace;
+
+  /**
+   * The Blockly theme to use.
+   * @type {!Blockly.Theme}
+   * @private
+   */
+  this.theme_ = theme;
+
+  /**
+   * A list of workspaces that are subscribed to this theme.
+   * @type {!Array.<Blockly.Workspace>}
+   * @private
+   */
+  this.subscribedWorkspaces_ = [];
+
+  /**
+   * A map of subscribed UI components, keyed by component name.
+   * @type {!Object.<string, !Array.<!Blockly.ThemeManager.Component>>}
+   * @private
+   */
+  this.componentDB_ = Object.create(null);
+};
+
+/**
+ * A Blockly UI component type.
+ * @typedef {{
+  *            element:!Element,
+  *            propertyName:string
+  *          }}
+  */
+Blockly.ThemeManager.Component;
+
+/**
+ * Get the workspace theme.
+ * @return {!Blockly.Theme} The workspace theme.
+ * @package
+ */
+Blockly.ThemeManager.prototype.getTheme = function() {
+  return this.theme_;
+};
+
+/**
+ * Set the workspace theme, and refresh the workspace and all components.
+ * @param {!Blockly.Theme} theme The workspace theme.
+ * @package
+ */
+Blockly.ThemeManager.prototype.setTheme = function(theme) {
+  var prevTheme = this.theme_;
+  this.theme_ = theme;
+
+  // Set the theme name onto the injection div.
+  var injectionDiv = this.workspace_.getInjectionDiv();
+  if (injectionDiv) {
+    if (prevTheme) {
+      Blockly.utils.dom.removeClass(injectionDiv, prevTheme.getClassName());
+    }
+    Blockly.utils.dom.addClass(injectionDiv, this.theme_.getClassName());
+  }
+
+  // Refresh all subscribed workspaces.
+  for (var i = 0, workspace; (workspace = this.subscribedWorkspaces_[i]); i++) {
+    workspace.refreshTheme();
+  }
+
+  // Refresh all registered Blockly UI components.
+  for (var i = 0, keys = Object.keys(this.componentDB_),
+    key; (key = keys[i]); i++) {
+    for (var j = 0, component; (component = this.componentDB_[key][j]); j++) {
+      var element = component.element;
+      var propertyName = component.propertyName;
+      var style = this.theme_ && this.theme_.getComponentStyle(key);
+      element.style[propertyName] = style || '';
+    }
+  }
+
+  Blockly.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 {!Blockly.Workspace} workspace The workspace to subscribe.
+ * @package
+ */
+Blockly.ThemeManager.prototype.subscribeWorkspace = function(workspace) {
+  this.subscribedWorkspaces_.push(workspace);
+};
+
+/**
+ * Unsubscribe a workspace to changes to the selected theme.
+ * @param {!Blockly.Workspace} workspace The workspace to unsubscribe.
+ * @package
+ */
+Blockly.ThemeManager.prototype.unsubscribeWorkspace = function(workspace) {
+  var index = this.subscribedWorkspaces_.indexOf(workspace);
+  if (index < 0) {
+    throw Error('Cannot unsubscribe a workspace that hasn\'t been subscribed.');
+  }
+  this.subscribedWorkspaces_.splice(index, 1);
+};
+
+/**
+ * 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
+ */
+Blockly.ThemeManager.prototype.subscribe = function(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.
+  var 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
+ */
+Blockly.ThemeManager.prototype.unsubscribe = function(element) {
+  if (!element) {
+    return;
+  }
+  // Go through all component, and remove any references to this element.
+  var componentNames = Object.keys(this.componentDB_);
+  for (var c = 0, componentName; (componentName = componentNames[c]); c++) {
+    var elements = this.componentDB_[componentName];
+    for (var 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}
+ */
+Blockly.ThemeManager.prototype.dispose = function() {
+  this.owner_ = null;
+  this.theme_ = null;
+  this.subscribedWorkspaces_ = null;
+  this.componentDB_ = null;
+};