nodeskini 1.0.1 → 1.0.2

package/blocklySkini/blockly/core/renderers/common/path_object.js

@@ -0,0 +1,279 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview An object that owns a block's rendering SVG elements.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+
+'use strict';
+
+goog.provide('Blockly.blockRendering.PathObject');
+
+goog.require('Blockly.blockRendering.ConstantProvider');
+goog.require('Blockly.blockRendering.IPathObject');
+goog.require('Blockly.Theme');
+goog.require('Blockly.utils.dom');
+goog.require('Blockly.utils.Svg');
+
+
+/**
+ * An object that handles creating and setting each of the SVG elements
+ * used by the renderer.
+ * @param {!SVGElement} root The root SVG element.
+ * @param {!Blockly.Theme.BlockStyle} style The style object to use for
+ *     colouring.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The renderer's
+ *     constants.
+ * @constructor
+ * @implements {Blockly.blockRendering.IPathObject}
+ * @package
+ */
+Blockly.blockRendering.PathObject = function(root, style, constants) {
+  /**
+   * The renderer's constant provider.
+   * @type {!Blockly.blockRendering.ConstantProvider}
+   * @package
+   */
+  this.constants = constants;
+
+  this.svgRoot = root;
+
+  /**
+   * The primary path of the block.
+   * @type {!SVGElement}
+   * @package
+   */
+  this.svgPath = Blockly.utils.dom.createSvgElement(
+      Blockly.utils.Svg.PATH,
+      {'class': 'blocklyPath'}, this.svgRoot);
+
+  /**
+   * The style object to use when colouring block paths.
+   * @type {!Blockly.Theme.BlockStyle}
+   * @package
+   */
+  this.style = style;
+
+  /**
+   * Holds the cursors svg element when the cursor is attached to the block.
+   * This is null if there is no cursor on the block.
+   * @type {SVGElement}
+   * @package
+   */
+  this.cursorSvg = null;
+
+  /**
+   * Holds the markers svg element when the marker is attached to the block.
+   * This is null if there is no marker on the block.
+   * @type {SVGElement}
+   * @package
+   */
+  this.markerSvg = null;
+};
+
+/**
+ * Set the path generated by the renderer onto the respective SVG element.
+ * @param {string} pathString The path.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.setPath = function(pathString) {
+  this.svgPath.setAttribute('d', pathString);
+};
+
+/**
+ * Flip the SVG paths in RTL.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.flipRTL = function() {
+  // Mirror the block's path.
+  this.svgPath.setAttribute('transform', 'scale(-1 1)');
+};
+
+/**
+ * Add the cursor svg to this block's svg group.
+ * @param {SVGElement} cursorSvg The svg root of the cursor to be added to the
+ *     block svg group.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.setCursorSvg = function(cursorSvg) {
+  if (!cursorSvg) {
+    this.cursorSvg = null;
+    return;
+  }
+
+  this.svgRoot.appendChild(cursorSvg);
+  this.cursorSvg = cursorSvg;
+};
+
+/**
+ * Add the marker svg to this block's svg group.
+ * @param {SVGElement} markerSvg The svg root of the marker to be added to the
+ *     block svg group.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.setMarkerSvg = function(markerSvg) {
+  if (!markerSvg) {
+    this.markerSvg = null;
+    return;
+  }
+
+  if (this.cursorSvg) {
+    this.svgRoot.insertBefore(markerSvg, this.cursorSvg);
+  } else {
+    this.svgRoot.appendChild(markerSvg);
+  }
+  this.markerSvg = markerSvg;
+};
+
+/**
+ * Apply the stored colours to the block's path, taking into account whether
+ * the paths belong to a shadow block.
+ * @param {!Blockly.Block} block The source block.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.applyColour = function(block) {
+  this.svgPath.setAttribute('stroke', this.style.colourTertiary);
+  this.svgPath.setAttribute('fill', this.style.colourPrimary);
+
+  this.updateShadow_(block.isShadow());
+  this.updateDisabled_(!block.isEnabled() || block.getInheritedDisabled());
+};
+
+/**
+ * Set the style.
+ * @param {!Blockly.Theme.BlockStyle} blockStyle The block style to use.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.setStyle = function(blockStyle) {
+  this.style = blockStyle;
+};
+
+/**
+ * Add or remove the given CSS class on the path object's root SVG element.
+ * @param {string} className The name of the class to add or remove
+ * @param {boolean} add True if the class should be added.  False if it should
+ *     be removed.
+ * @protected
+ */
+Blockly.blockRendering.PathObject.prototype.setClass_ = function(
+    className, add) {
+  if (add) {
+    Blockly.utils.dom.addClass(/** @type {!Element} */ (this.svgRoot),
+        className);
+  } else {
+    Blockly.utils.dom.removeClass(/** @type {!Element} */ (this.svgRoot),
+        className);
+  }
+};
+
+/**
+ * Set whether the block shows a highlight or not.  Block highlighting is
+ * often used to visually mark blocks currently being executed.
+ * @param {boolean} enable True if highlighted.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.updateHighlighted = function(
+    enable) {
+  if (enable) {
+    this.svgPath.setAttribute('filter',
+        'url(#' + this.constants.embossFilterId + ')');
+  } else {
+    this.svgPath.setAttribute('filter', 'none');
+  }
+};
+
+/**
+ * Updates the look of the block to reflect a shadow state.
+ * @param {boolean} shadow True if the block is a shadow block.
+ * @protected
+ */
+Blockly.blockRendering.PathObject.prototype.updateShadow_ = function(shadow) {
+  if (shadow) {
+    this.svgPath.setAttribute('stroke', 'none');
+    this.svgPath.setAttribute('fill', this.style.colourSecondary);
+  }
+};
+
+/**
+ * Updates the look of the block to reflect a disabled state.
+ * @param {boolean} disabled True if disabled.
+ * @protected
+ */
+Blockly.blockRendering.PathObject.prototype.updateDisabled_ = function(
+    disabled) {
+  this.setClass_('blocklyDisabled', disabled);
+  if (disabled) {
+    this.svgPath.setAttribute('fill',
+        'url(#' + this.constants.disabledPatternId + ')');
+  }
+};
+
+/**
+ * Add or remove styling showing that a block is selected.
+ * @param {boolean} enable True if selection is enabled, false otherwise.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.updateSelected = function(enable) {
+  this.setClass_('blocklySelected', enable);
+};
+
+/**
+ * Add or remove styling showing that a block is dragged over a delete area.
+ * @param {boolean} enable True if the block is being dragged over a delete
+ *     area, false otherwise.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.updateDraggingDelete = function(
+    enable) {
+  this.setClass_('blocklyDraggingDelete', enable);
+};
+
+/**
+ * Add or remove styling showing that a block is an insertion marker.
+ * @param {boolean} enable True if the block is an insertion marker, false
+ *     otherwise.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.updateInsertionMarker = function(
+    enable) {
+  this.setClass_('blocklyInsertionMarker', enable);
+};
+
+/**
+ * Add or remove styling showing that a block is movable.
+ * @param {boolean} enable True if the block is movable, false otherwise.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.updateMovable = function(enable) {
+  this.setClass_('blocklyDraggable', enable);
+};
+
+/**
+ * Add or remove styling that shows that if the dragging block is dropped, this
+ * block will be replaced.  If a shadow block, it will disappear.  Otherwise it
+ * will bump.
+ * @param {boolean} enable True if styling should be added.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.updateReplacementFade =
+    function(enable) {
+    /* eslint-disable indent */
+  this.setClass_('blocklyReplaceable', enable);
+}; /* eslint-enable indent */
+
+/**
+ * Add or remove styling that shows that if the dragging block is dropped, this
+ * block will be connected to the input.
+ * @param {Blockly.Connection} _conn The connection on the input to highlight.
+ * @param {boolean} _enable True if styling should be added.
+ * @package
+ */
+Blockly.blockRendering.PathObject.prototype.updateShapeForInputHighlight =
+    function(_conn, _enable) {
+    /* eslint-disable indent */
+  // NOP
+}; /* eslint-enable indent */

package/blocklySkini/blockly/core/renderers/common/renderer.js

@@ -0,0 +1,301 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Base renderer.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.blockRendering.Renderer');
+
+goog.require('Blockly.blockRendering.ConstantProvider');
+goog.require('Blockly.blockRendering.MarkerSvg');
+goog.require('Blockly.blockRendering.Drawer');
+goog.require('Blockly.blockRendering.IPathObject');
+goog.require('Blockly.blockRendering.PathObject');
+goog.require('Blockly.blockRendering.RenderInfo');
+goog.require('Blockly.InsertionMarkerManager');
+
+goog.requireType('Blockly.blockRendering.Debug');
+goog.requireType('Blockly.IRegistrable');
+
+
+/**
+ * The base class for a block renderer.
+ * @param {string} name The renderer name.
+ * @package
+ * @constructor
+ * @implements {Blockly.IRegistrable}
+ */
+Blockly.blockRendering.Renderer = function(name) {
+
+  /**
+   * The renderer name.
+   * @type {string}
+   * @package
+   */
+  this.name = name;
+
+  /**
+   * The renderer's constant provider.
+   * @type {Blockly.blockRendering.ConstantProvider}
+   * @private
+   */
+  this.constants_ = null;
+
+  /**
+   * Rendering constant overrides, passed in through options.
+   * @type {?Object}
+   * @package
+   */
+  this.overrides = null;
+};
+
+/**
+ * Gets the class name that identifies this renderer.
+ * @return {string} The CSS class name.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.getClassName = function() {
+  return this.name + '-renderer';
+};
+
+/**
+ * Initialize the renderer.
+ * @param {!Blockly.Theme} theme The workspace theme object.
+ * @param {Object=} opt_rendererOverrides Rendering constant overrides.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.init = function(theme,
+    opt_rendererOverrides) {
+  this.constants_ = this.makeConstants_();
+  if (opt_rendererOverrides) {
+    this.overrides = opt_rendererOverrides;
+    Blockly.utils.object.mixin(this.constants_, opt_rendererOverrides);
+  }
+  this.constants_.setTheme(theme);
+  this.constants_.init();
+};
+
+/**
+ * Create any DOM elements that this renderer needs.
+ * @param {!SVGElement} svg The root of the workspace's SVG.
+ * @param {!Blockly.Theme} theme The workspace theme object.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.createDom = function(svg, theme) {
+  this.constants_.createDom(svg, this.name + '-' + theme.name,
+      '.' + this.getClassName() + '.' + theme.getClassName());
+};
+
+/**
+ * Refresh the renderer after a theme change.
+ * @param {!SVGElement} svg The root of the workspace's SVG.
+ * @param {!Blockly.Theme} theme The workspace theme object.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.refreshDom = function(svg, theme) {
+  var previousConstants = this.getConstants();
+  previousConstants.dispose();
+  this.constants_ = this.makeConstants_();
+  if (this.overrides) {
+    Blockly.utils.object.mixin(this.constants_, this.overrides);
+  }
+  // Ensure the constant provider's random identifier does not change.
+  this.constants_.randomIdentifier = previousConstants.randomIdentifier;
+  this.constants_.setTheme(theme);
+  this.constants_.init();
+  this.createDom(svg, theme);
+};
+
+/**
+ * Dispose of this renderer.
+ * Delete all DOM elements that this renderer and its constants created.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.dispose = function() {
+  if (this.constants_) {
+    this.constants_.dispose();
+  }
+};
+
+/**
+ * Create a new instance of the renderer's constant provider.
+ * @return {!Blockly.blockRendering.ConstantProvider} The constant provider.
+ * @protected
+ */
+Blockly.blockRendering.Renderer.prototype.makeConstants_ = function() {
+  return new Blockly.blockRendering.ConstantProvider();
+};
+
+/**
+ * Create a new instance of the renderer's render info object.
+ * @param {!Blockly.BlockSvg} block The block to measure.
+ * @return {!Blockly.blockRendering.RenderInfo} The render info object.
+ * @protected
+ */
+Blockly.blockRendering.Renderer.prototype.makeRenderInfo_ = function(block) {
+  return new Blockly.blockRendering.RenderInfo(this, block);
+};
+
+/**
+ * Create a new instance of the renderer's drawer.
+ * @param {!Blockly.BlockSvg} block The block to render.
+ * @param {!Blockly.blockRendering.RenderInfo} info An object containing all
+ *   information needed to render this block.
+ * @return {!Blockly.blockRendering.Drawer} The drawer.
+ * @protected
+ */
+Blockly.blockRendering.Renderer.prototype.makeDrawer_ = function(block, info) {
+  return new Blockly.blockRendering.Drawer(block, info);
+};
+
+/**
+ * Create a new instance of the renderer's debugger.
+ * @return {!Blockly.blockRendering.Debug} The renderer debugger.
+ * @suppress {strictModuleDepCheck} Debug renderer only included in playground.
+ * @protected
+ */
+Blockly.blockRendering.Renderer.prototype.makeDebugger_ = function() {
+  if (!Blockly.blockRendering.Debug) {
+    throw Error('Missing require for Blockly.blockRendering.Debug');
+  }
+  return new Blockly.blockRendering.Debug(this.getConstants());
+};
+
+/**
+ * Create a new instance of the renderer's marker drawer.
+ * @param {!Blockly.WorkspaceSvg} workspace The workspace the marker belongs to.
+ * @param {!Blockly.Marker} marker The marker.
+ * @return {!Blockly.blockRendering.MarkerSvg} The object in charge of drawing
+ *     the marker.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.makeMarkerDrawer = function(
+    workspace, marker) {
+  return new Blockly.blockRendering.MarkerSvg(workspace, this.getConstants(), marker);
+};
+
+/**
+ * Create a new instance of a renderer path object.
+ * @param {!SVGElement} root The root SVG element.
+ * @param {!Blockly.Theme.BlockStyle} style The style object to use for
+ *     colouring.
+ * @return {!Blockly.blockRendering.IPathObject} The renderer path object.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.makePathObject = function(root,
+    style) {
+  return new Blockly.blockRendering.PathObject(root, style,
+      /** @type {!Blockly.blockRendering.ConstantProvider} */ (this.constants_));
+
+};
+
+/**
+ * Get the current renderer's constant provider.  We assume that when this is
+ * called, the renderer has already been initialized.
+ * @return {!Blockly.blockRendering.ConstantProvider} The constant provider.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.getConstants = function() {
+  return (
+    /** @type {!Blockly.blockRendering.ConstantProvider} */
+    (this.constants_));
+};
+
+/**
+ * Determine whether or not to highlight a connection.
+ * @param {Blockly.Connection} _conn The connection to determine whether or not
+ *     to highlight.
+ * @return {boolean} True if we should highlight the connection.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.shouldHighlightConnection =
+    function(_conn) {
+    /* eslint-disable indent */
+  return true;
+}; /* eslint-enable indent */
+
+/**
+ * Checks if an orphaned block can connect to the "end" of the topBlock's
+ * block-clump. If the clump is a row the end is the last input. If the clump
+ * is a stack, the end is the last next connection. If the clump is neither,
+ * then this returns false.
+ * @param {!Blockly.BlockSvg} topBlock The top block of the block clump we want to try and
+ *     connect to.
+ * @param {!Blockly.BlockSvg} orphanBlock The orphan block that wants to find
+ *     a home.
+ * @param {number} localType The type of the connection being dragged.
+ * @return {boolean} Whether there is a home for the orphan or not.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.orphanCanConnectAtEnd =
+    function(topBlock, orphanBlock, localType) {
+      var orphanConnection = null;
+      var lastConnection = null;
+      if (localType == Blockly.OUTPUT_VALUE) {  // We are replacing an output.
+        orphanConnection = orphanBlock.outputConnection;
+        // TODO:  I don't think this function necessarily has the correct logic,
+        //  but for now it is being kept for behavioral backwards-compat.
+        lastConnection = Blockly.Connection
+            .lastConnectionInRow(
+                /** @type {!Blockly.Block} **/ (topBlock), orphanBlock);
+      } else {  // We are replacing a previous.
+        orphanConnection = orphanBlock.previousConnection;
+        // TODO: This lives on the block while lastConnectionInRow lives on
+        //  on the connection. Something is fishy.
+        lastConnection = topBlock.lastConnectionInStack();
+      }
+
+      if (!lastConnection) {
+        return false;
+      }
+      return orphanConnection.getConnectionChecker().canConnect(
+          lastConnection, orphanConnection, false);
+    };
+
+/**
+ * Chooses a connection preview method based on the available connection, the
+ * current dragged connection, and the block being dragged.
+ * @param {!Blockly.RenderedConnection} closest The available connection.
+ * @param {!Blockly.RenderedConnection} local The connection currently being
+ *     dragged.
+ * @param {!Blockly.BlockSvg} topBlock The block currently being dragged.
+ * @return {!Blockly.InsertionMarkerManager.PREVIEW_TYPE} The preview type
+ *     to display.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.getConnectionPreviewMethod =
+    function(closest, local, topBlock) {
+      if (local.type == Blockly.OUTPUT_VALUE ||
+          local.type == Blockly.PREVIOUS_STATEMENT) {
+        if (!closest.isConnected() ||
+            this.orphanCanConnectAtEnd(
+                topBlock,
+                /** @type {!Blockly.BlockSvg} */ (closest.targetBlock()),
+                local.type)) {
+          return Blockly.InsertionMarkerManager.PREVIEW_TYPE.INSERTION_MARKER;
+        }
+        return Blockly.InsertionMarkerManager.PREVIEW_TYPE.REPLACEMENT_FADE;
+      }
+
+      return Blockly.InsertionMarkerManager.PREVIEW_TYPE.INSERTION_MARKER;
+    };
+
+/**
+ * Render the block.
+ * @param {!Blockly.BlockSvg} block The block to render.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.render = function(block) {
+  if (Blockly.blockRendering.useDebugger && !block.renderingDebugger) {
+    block.renderingDebugger = this.makeDebugger_();
+  }
+  var info = this.makeRenderInfo_(block);
+  info.measure();
+  this.makeDrawer_(block, info).draw();
+};

package/blocklySkini/blockly/core/renderers/geras/constants.js

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview An object that provides constants for rendering blocks in Geras
+ * mode.
+ * @author kozbial@google.com (Monica Kozbial)
+ */
+'use strict';
+
+goog.provide('Blockly.geras.ConstantProvider');
+
+goog.require('Blockly.blockRendering.ConstantProvider');
+goog.require('Blockly.utils.object');
+
+
+/**
+ * An object that provides constants for rendering blocks in Geras mode.
+ * @constructor
+ * @package
+ * @extends {Blockly.blockRendering.ConstantProvider}
+ */
+Blockly.geras.ConstantProvider = function() {
+  Blockly.geras.ConstantProvider.superClass_.constructor.call(this);
+
+  /**
+   * @override
+   */
+  this.FIELD_TEXT_BASELINE_CENTER = false;
+
+  // The dark/shadow path in classic rendering is the same as the normal block
+  // path, but translated down one and right one.
+  this.DARK_PATH_OFFSET = 1;
+
+  /**
+   * The maximum width of a bottom row that follows a statement input and has
+   * inputs inline.
+   * @type {number}
+   */
+  this.MAX_BOTTOM_WIDTH = 30;
+};
+Blockly.utils.object.inherits(Blockly.geras.ConstantProvider,
+    Blockly.blockRendering.ConstantProvider);
+
+
+/**
+ * @override
+ */
+Blockly.geras.ConstantProvider.prototype.getCSS_ = function(selector) {
+  return Blockly.geras.ConstantProvider.superClass_.getCSS_.call(this, selector)
+      .concat([
+        /* eslint-disable indent */
+        // Insertion marker.
+        selector + ' .blocklyInsertionMarker>.blocklyPathLight,',
+        selector + ' .blocklyInsertionMarker>.blocklyPathDark {',
+          'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';',
+          'stroke: none;',
+        '}',
+        /* eslint-enable indent */
+      ]);
+};