nodeskini 1.0.0 → 1.0.2

package/blocklySkini/blockly/core/renderers/zelos/marker_svg.js

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Methods for graphically rendering a marker as SVG.
+ * @author samelh@microsoft.com (Sam El-Husseini)
+ */
+'use strict';
+
+goog.provide('Blockly.zelos.MarkerSvg');
+
+goog.require('Blockly.blockRendering.MarkerSvg');
+goog.require('Blockly.utils.dom');
+goog.require('Blockly.utils.Svg');
+
+
+/**
+ * Class to draw a marker.
+ * @param {!Blockly.WorkspaceSvg} workspace The workspace the marker belongs to.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The constants for
+ *     the renderer.
+ * @param {!Blockly.Marker} marker The marker to draw.
+ * @constructor
+ * @extends {Blockly.blockRendering.MarkerSvg}
+ */
+Blockly.zelos.MarkerSvg = function(workspace, constants, marker) {
+  Blockly.zelos.MarkerSvg.superClass_.constructor.call(
+      this, workspace, constants, marker);
+};
+Blockly.utils.object.inherits(Blockly.zelos.MarkerSvg,
+    Blockly.blockRendering.MarkerSvg);
+
+/**
+ * Position and display the marker for an input or an output connection.
+ * @param {!Blockly.ASTNode} curNode The node to draw the marker for.
+ * @private
+ */
+Blockly.zelos.MarkerSvg.prototype.showWithInputOutput_ = function(curNode) {
+  var block = /** @type {!Blockly.BlockSvg} */ (curNode.getSourceBlock());
+  var connection = /** @type {!Blockly.Connection} */ (curNode.getLocation());
+  var offsetInBlock = connection.getOffsetInBlock();
+
+  this.positionCircle_(offsetInBlock.x, offsetInBlock.y);
+  this.setParent_(block);
+  this.showCurrent_();
+};
+
+/**
+ * @override
+ */
+Blockly.zelos.MarkerSvg.prototype.showWithOutput_ = function(curNode) {
+  this.showWithInputOutput_(curNode);
+};
+
+/**
+ * @override
+ */
+Blockly.zelos.MarkerSvg.prototype.showWithInput_ = function(curNode) {
+  this.showWithInputOutput_(curNode);
+};
+
+/**
+ * Draw a rectangle around the block.
+ * @param {!Blockly.ASTNode} curNode The current node of the marker.
+ */
+Blockly.zelos.MarkerSvg.prototype.showWithBlock_ = function(curNode) {
+  var block = /** @type {!Blockly.BlockSvg} */ (curNode.getLocation());
+
+  // Gets the height and width of entire stack.
+  var heightWidth = block.getHeightWidth();
+
+  // Add padding so that being on a stack looks different than being on a block.
+  this.positionRect_(0, 0, heightWidth.width, heightWidth.height);
+  this.setParent_(block);
+  this.showCurrent_();
+};
+
+/**
+ * Position the circle we use for input and output connections.
+ * @param {number} x The x position of the circle.
+ * @param {number} y The y position of the circle.
+ * @private
+ */
+Blockly.zelos.MarkerSvg.prototype.positionCircle_ = function(x, y) {
+  this.markerCircle_.setAttribute('cx', x);
+  this.markerCircle_.setAttribute('cy', y);
+  this.currentMarkerSvg = this.markerCircle_;
+};
+
+/**
+ * @override
+ */
+Blockly.zelos.MarkerSvg.prototype.hide = function() {
+  Blockly.zelos.MarkerSvg.superClass_.hide.call(this);
+  this.markerCircle_.style.display = 'none';
+};
+
+/**
+ * @override
+ */
+Blockly.zelos.MarkerSvg.prototype.createDomInternal_ = function() {
+  /* This markup will be generated and added to the .svgGroup_:
+  <g>
+    <rect width="100" height="5">
+      <animate attributeType="XML" attributeName="fill" dur="1s"
+        values="transparent;transparent;#fff;transparent" repeatCount="indefinite" />
+    </rect>
+  </g>
+  */
+
+  Blockly.zelos.MarkerSvg.superClass_.createDomInternal_.call(this);
+
+  this.markerCircle_ = Blockly.utils.dom.createSvgElement(
+      Blockly.utils.Svg.CIRCLE, {
+        'r': this.constants_.CURSOR_RADIUS,
+        'style': 'display: none',
+        'stroke-width': this.constants_.CURSOR_STROKE_WIDTH
+      },
+      this.markerSvg_);
+
+  // Markers and stack cursors don't blink.
+  if (this.isCursor()) {
+    var blinkProperties = this.getBlinkProperties_();
+    Blockly.utils.dom.createSvgElement(
+        Blockly.utils.Svg.ANIMATE, blinkProperties,
+        this.markerCircle_);
+  }
+
+  return this.markerSvg_;
+};
+
+/**
+ * @override
+ */
+Blockly.zelos.MarkerSvg.prototype.applyColour_ = function(curNode) {
+  Blockly.zelos.MarkerSvg.superClass_.applyColour_.call(this, curNode);
+
+  this.markerCircle_.setAttribute('fill', this.colour_);
+  this.markerCircle_.setAttribute('stroke', this.colour_);
+
+  if (this.isCursor()) {
+    var values = this.colour_ + ';transparent;transparent;';
+    this.markerCircle_.firstChild.setAttribute('values', values);
+  }
+};

package/blocklySkini/blockly/core/renderers/zelos/measurables/inputs.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Zelos specific objects representing inputs with connections on
+ * a rendered block.
+ * @author samelh@google.com (Sam El-Husseini)
+ */
+
+goog.provide('Blockly.zelos.StatementInput');
+
+goog.require('Blockly.blockRendering.StatementInput');
+goog.require('Blockly.utils.object');
+
+
+/**
+ * An object containing information about the space a statement input takes up
+ * during rendering
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
+ * @param {!Blockly.Input} input The statement input to measure and store
+ *     information for.
+ * @package
+ * @constructor
+ * @extends {Blockly.blockRendering.StatementInput}
+ */
+Blockly.zelos.StatementInput = function(constants, input) {
+  Blockly.zelos.StatementInput.superClass_.constructor.call(this,
+      constants, input);
+
+  if (this.connectedBlock) {
+    // Find the bottom-most connected block in the stack.
+    var block = this.connectedBlock;
+    while (block.getNextBlock()) {
+      block = block.getNextBlock();
+    }
+    if (!block.nextConnection) {
+      this.height = this.connectedBlockHeight;
+      this.connectedBottomNextConnection = true;
+    }
+  }
+};
+Blockly.utils.object.inherits(Blockly.zelos.StatementInput,
+    Blockly.blockRendering.StatementInput);

package/blocklySkini/blockly/core/renderers/zelos/measurables/row_elements.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Zelos specific objects representing elements in a row of a
+ * rendered block.
+ * @author samelh@google.com (Sam El-Husseini)
+ */
+
+goog.provide('Blockly.zelos.RightConnectionShape');
+
+goog.require('Blockly.blockRendering.Measurable');
+goog.require('Blockly.blockRendering.Types');
+goog.require('Blockly.utils.object');
+
+
+/**
+ * An object containing information about the space a right connection shape
+ * takes up during rendering.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
+ * @package
+ * @constructor
+ * @extends {Blockly.blockRendering.Measurable}
+ */
+Blockly.zelos.RightConnectionShape = function(constants) {
+  Blockly.zelos.RightConnectionShape.superClass_.constructor.call(this, constants);
+  this.type |= Blockly.blockRendering.Types.getType('RIGHT_CONNECTION');
+  // Size is dynamic
+  this.height = 0;
+  this.width = 0;
+};
+Blockly.utils.object.inherits(Blockly.zelos.RightConnectionShape,
+    Blockly.blockRendering.Measurable);

package/blocklySkini/blockly/core/renderers/zelos/measurables/rows.js

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview An object representing a single row on a rendered block and all
+ * of its subcomponents.
+ * @author samelh@google.com (Sam El-Husseini)
+ */
+'use strict';
+
+goog.provide('Blockly.zelos.BottomRow');
+goog.provide('Blockly.zelos.TopRow');
+
+goog.require('Blockly.blockRendering.BottomRow');
+goog.require('Blockly.blockRendering.TopRow');
+goog.require('Blockly.blockRendering.SpacerRow');
+goog.require('Blockly.utils.object');
+
+
+/**
+ * An object containing information about what elements are in the top row of a
+ * block as well as sizing information for the top row.
+ * Elements in a top row can consist of corners, hats, spacers, and previous
+ * connections.
+ * After this constructor is called, the row will contain all non-spacer
+ * elements it needs.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
+ * @package
+ * @constructor
+ * @extends {Blockly.blockRendering.TopRow}
+ */
+Blockly.zelos.TopRow = function(constants) {
+  Blockly.zelos.TopRow.superClass_.constructor.call(this, constants);
+};
+Blockly.utils.object.inherits(Blockly.zelos.TopRow,
+    Blockly.blockRendering.TopRow);
+
+/**
+ * @override
+ */
+Blockly.zelos.TopRow.prototype.endsWithElemSpacer = function() {
+  return false;
+};
+
+/**
+ * Render a round corner unless the block has an output connection.
+ * @override
+ */
+Blockly.zelos.TopRow.prototype.hasLeftSquareCorner = function(block) {
+  var hasHat = (block.hat ?
+      block.hat === 'cap' : this.constants_.ADD_START_HATS) &&
+      !block.outputConnection && !block.previousConnection;
+  return !!block.outputConnection || hasHat;
+};
+
+/**
+ * Render a round corner unless the block has an output connection.
+ * @override
+ */
+Blockly.zelos.TopRow.prototype.hasRightSquareCorner = function(block) {
+  return !!block.outputConnection && !block.statementInputCount &&
+    !block.nextConnection;
+};
+
+/**
+ * An object containing information about what elements are in the bottom row of
+ * a block as well as spacing information for the top row.
+ * Elements in a bottom row can consist of corners, spacers and next
+ * connections.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
+ * @package
+ * @constructor
+ * @extends {Blockly.blockRendering.BottomRow}
+ */
+Blockly.zelos.BottomRow = function(constants) {
+  Blockly.zelos.BottomRow.superClass_.constructor.call(this, constants);
+};
+Blockly.utils.object.inherits(Blockly.zelos.BottomRow,
+    Blockly.blockRendering.BottomRow);
+
+/**
+ * @override
+ */
+Blockly.zelos.BottomRow.prototype.endsWithElemSpacer = function() {
+  return false;
+};
+
+/**
+ * Render a round corner unless the block has an output connection.
+ * @override
+ */
+Blockly.zelos.BottomRow.prototype.hasLeftSquareCorner = function(block) {
+  return !!block.outputConnection;
+};
+
+/**
+ * Render a round corner unless the block has an output connection.
+ * @override
+ */
+Blockly.zelos.BottomRow.prototype.hasRightSquareCorner = function(block) {
+  return !!block.outputConnection && !block.statementInputCount &&
+    !block.nextConnection;
+};

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

@@ -0,0 +1,244 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview An object that owns a block's rendering SVG elements.
+ * @author samelh@google.com (Sam El-Husseini)
+ */
+
+'use strict';
+
+goog.provide('Blockly.zelos.PathObject');
+
+goog.require('Blockly.blockRendering.PathObject');
+goog.require('Blockly.zelos.ConstantProvider');
+goog.require('Blockly.utils.dom');
+goog.require('Blockly.utils.object');
+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.zelos.ConstantProvider} constants The renderer's constants.
+ * @constructor
+ * @extends {Blockly.blockRendering.PathObject}
+ * @package
+ */
+Blockly.zelos.PathObject = function(root, style, constants) {
+  Blockly.zelos.PathObject.superClass_.constructor.call(this, root, style,
+      constants);
+
+  /**
+   * The renderer's constant provider.
+   * @type {!Blockly.zelos.ConstantProvider}
+   */
+  this.constants = constants;
+
+  /**
+   * The selected path of the block.
+   * @type {SVGElement}
+   * @private
+   */
+  this.svgPathSelected_ = null;
+
+  /**
+   * The outline paths on the block.
+   * @type {!Object.<string,!SVGElement>}
+   * @private
+   */
+  this.outlines_ = {};
+
+  /**
+   * A set used to determine which outlines were used during a draw pass.  The
+   * set is initialized with a reference to all the outlines in
+   * `this.outlines_`. Every time we use an outline during the draw pass, the
+   * reference is removed from this set.
+   * @type {Object.<string, number>}
+   * @private
+   */
+  this.remainingOutlines_ = null;
+
+  /**
+   * The type of block's output connection shape.  This is set when a block with
+   * an output connection is drawn.
+   * @package
+   */
+  this.outputShapeType = null;
+};
+Blockly.utils.object.inherits(Blockly.zelos.PathObject,
+    Blockly.blockRendering.PathObject);
+
+/**
+ * @override
+ */
+Blockly.zelos.PathObject.prototype.setPath = function(pathString) {
+  Blockly.zelos.PathObject.superClass_.setPath.call(this, pathString);
+  if (this.svgPathSelected_) {
+    this.svgPathSelected_.setAttribute('d', pathString);
+  }
+};
+
+/**
+ * @override
+ */
+Blockly.zelos.PathObject.prototype.applyColour = function(block) {
+  Blockly.zelos.PathObject.superClass_.applyColour.call(this, block);
+  // Set shadow stroke colour.
+  if (block.isShadow() && block.getParent()) {
+    this.svgPath.setAttribute('stroke', block.getParent().style.colourTertiary);
+  }
+
+  // Apply colour to outlines.
+  for (var i = 0, keys = Object.keys(this.outlines_),
+    key; (key = keys[i]); i++) {
+    this.outlines_[key].setAttribute('fill', this.style.colourTertiary);
+  }
+};
+
+/**
+ * @override
+ */
+Blockly.zelos.PathObject.prototype.flipRTL = function() {
+  Blockly.zelos.PathObject.superClass_.flipRTL.call(this);
+  // Mirror each input outline path.
+  for (var i = 0, keys = Object.keys(this.outlines_),
+    key; (key = keys[i]); i++) {
+    this.outlines_[key].setAttribute('transform', 'scale(-1 1)');
+  }
+};
+
+/**
+ * @override
+ */
+Blockly.zelos.PathObject.prototype.updateSelected = function(enable) {
+  this.setClass_('blocklySelected', enable);
+  if (enable) {
+    if (!this.svgPathSelected_) {
+      this.svgPathSelected_ =
+        /** @type {!SVGElement} */ (this.svgPath.cloneNode(true));
+      this.svgPathSelected_.setAttribute('fill', 'none');
+      this.svgPathSelected_.setAttribute('filter',
+          'url(#' + this.constants.selectedGlowFilterId + ')');
+      this.svgRoot.appendChild(this.svgPathSelected_);
+    }
+  } else {
+    if (this.svgPathSelected_) {
+      this.svgRoot.removeChild(this.svgPathSelected_);
+      this.svgPathSelected_ = null;
+    }
+  }
+};
+
+/**
+ * @override
+ */
+Blockly.zelos.PathObject.prototype.updateReplacementFade = function(
+    enable) {
+  this.setClass_('blocklyReplaceable', enable);
+  if (enable) {
+    this.svgPath.setAttribute('filter',
+        'url(#' + this.constants.replacementGlowFilterId + ')');
+  } else {
+    this.svgPath.removeAttribute('filter');
+  }
+};
+
+/**
+ * @override
+ */
+Blockly.zelos.PathObject.prototype.updateShapeForInputHighlight = function(
+    conn, enable) {
+  var name = conn.getParentInput().name;
+  var outlinePath = this.getOutlinePath_(name);
+  if (!outlinePath) {
+    return;
+  }
+  if (enable) {
+    outlinePath.setAttribute('filter',
+        'url(#' + this.constants.replacementGlowFilterId + ')');
+  } else {
+    outlinePath.removeAttribute('filter');
+  }
+};
+
+/**
+ * Method that's called when the drawer is about to draw the block.
+ * @package
+ */
+Blockly.zelos.PathObject.prototype.beginDrawing = function() {
+  this.remainingOutlines_ = {};
+  for (var i = 0, keys = Object.keys(this.outlines_),
+    key; (key = keys[i]); i++) {
+    // The value set here isn't used anywhere, we are just using the
+    // object as a Set data structure.
+    this.remainingOutlines_[key] = 1;
+  }
+};
+
+/**
+ * Method that's called when the drawer is done drawing.
+ * @package
+ */
+Blockly.zelos.PathObject.prototype.endDrawing = function() {
+  // Go through all remaining outlines that were not used this draw pass, and
+  // remove them.
+  if (this.remainingOutlines_) {
+    for (var i = 0, keys = Object.keys(this.remainingOutlines_),
+      key; (key = keys[i]); i++) {
+      this.removeOutlinePath_(key);
+    }
+  }
+  this.remainingOutlines_ = null;
+};
+
+/**
+ * Set the path generated by the renderer for an outline path on the respective
+ * outline path SVG element.
+ * @param {string} name The input name.
+ * @param {string} pathString The path.
+ * @package
+ */
+Blockly.zelos.PathObject.prototype.setOutlinePath = function(name, pathString) {
+  var outline = this.getOutlinePath_(name);
+  outline.setAttribute('d', pathString);
+  outline.setAttribute('fill', this.style.colourTertiary);
+};
+
+/**
+ * Create's an outline path for the specified input.
+ * @param {string} name The input name.
+ * @return {!SVGElement} The SVG outline path.
+ * @private
+ */
+Blockly.zelos.PathObject.prototype.getOutlinePath_ = function(name) {
+  if (!this.outlines_[name]) {
+    this.outlines_[name] = Blockly.utils.dom.createSvgElement(
+        Blockly.utils.Svg.PATH, {
+          'class': 'blocklyOutlinePath',
+          // IE doesn't like paths without the data definition, set empty default
+          'd': ''
+        },
+        this.svgRoot);
+  }
+  if (this.remainingOutlines_) {
+    delete this.remainingOutlines_[name];
+  }
+  return this.outlines_[name];
+};
+
+/**
+ * Remove an outline path that is associated with the specified input.
+ * @param {string} name The input name.
+ * @private
+ */
+Blockly.zelos.PathObject.prototype.removeOutlinePath_ = function(name) {
+  this.outlines_[name].parentNode.removeChild(this.outlines_[name]);
+  delete this.outlines_[name];
+};