nodeskini 1.0.0 → 1.0.2

package/blocklySkini/blockly/core/utils/style.js

@@ -0,0 +1,281 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Utilities for element styles.
+ * These methods are not specific to Blockly, and could be factored out into
+ * a JavaScript framework such as Closure.
+ * @author samelh@google.com (Sam El-Husseini)
+ */
+'use strict';
+
+/**
+ * @name Blockly.utils.style
+ * @namespace
+ */
+goog.provide('Blockly.utils.style');
+
+goog.require('Blockly.utils.Coordinate');
+goog.require('Blockly.utils.Size');
+
+
+/**
+ * Gets the height and width of an element.
+ * Similar to Closure's goog.style.getSize
+ * @param {!Element} element Element to get size of.
+ * @return {!Blockly.utils.Size} Object with width/height properties.
+ */
+Blockly.utils.style.getSize = function(element) {
+  if (Blockly.utils.style.getStyle_(element, 'display') != 'none') {
+    return Blockly.utils.style.getSizeWithDisplay_(element);
+  }
+
+  // Evaluate size with a temporary element.
+  var style = element.style;
+  var originalDisplay = style.display;
+  var originalVisibility = style.visibility;
+  var originalPosition = style.position;
+
+  style.visibility = 'hidden';
+  style.position = 'absolute';
+  style.display = 'inline';
+
+  var offsetWidth = /** @type {!HTMLElement} */ (element).offsetWidth;
+  var offsetHeight = /** @type {!HTMLElement} */ (element).offsetHeight;
+
+  style.display = originalDisplay;
+  style.position = originalPosition;
+  style.visibility = originalVisibility;
+
+  return new Blockly.utils.Size(offsetWidth, offsetHeight);
+};
+
+/**
+ * Gets the height and width of an element when the display is not none.
+ * @param {!Element} element Element to get size of.
+ * @return {!Blockly.utils.Size} Object with width/height properties.
+ * @private
+ */
+Blockly.utils.style.getSizeWithDisplay_ = function(element) {
+  var offsetWidth = /** @type {!HTMLElement} */ (element).offsetWidth;
+  var offsetHeight = /** @type {!HTMLElement} */ (element).offsetHeight;
+  return new Blockly.utils.Size(offsetWidth, offsetHeight);
+};
+
+/**
+ * Cross-browser pseudo get computed style. It returns the computed style where
+ * available. If not available it tries the cascaded style value (IE
+ * currentStyle) and in worst case the inline style value.  It shouldn't be
+ * called directly, see http://wiki/Main/ComputedStyleVsCascadedStyle for
+ * discussion.
+ *
+ * Copied from Closure's goog.style.getStyle_
+ *
+ * @param {!Element} element Element to get style of.
+ * @param {string} style Property to get (must be camelCase, not css-style.).
+ * @return {string} Style value.
+ * @private
+ */
+Blockly.utils.style.getStyle_ = function(element, style) {
+  return Blockly.utils.style.getComputedStyle(element, style) ||
+      Blockly.utils.style.getCascadedStyle(element, style) ||
+      (element.style && element.style[style]);
+};
+
+/**
+ * Retrieves a computed style value of a node. It returns empty string if the
+ * value cannot be computed (which will be the case in Internet Explorer) or
+ * "none" if the property requested is an SVG one and it has not been
+ * explicitly set (firefox and webkit).
+ *
+ * Copied from Closure's goog.style.getComputedStyle
+ *
+ * @param {!Element} element Element to get style of.
+ * @param {string} property Property to get (camel-case).
+ * @return {string} Style value.
+ */
+Blockly.utils.style.getComputedStyle = function(element, property) {
+  if (document.defaultView && document.defaultView.getComputedStyle) {
+    var styles = document.defaultView.getComputedStyle(element, null);
+    if (styles) {
+      // element.style[..] is undefined for browser specific styles
+      // as 'filter'.
+      return styles[property] || styles.getPropertyValue(property) || '';
+    }
+  }
+
+  return '';
+};
+
+/**
+ * Gets the cascaded style value of a node, or null if the value cannot be
+ * computed (only Internet Explorer can do this).
+ *
+ * Copied from Closure's goog.style.getCascadedStyle
+ *
+ * @param {!Element} element Element to get style of.
+ * @param {string} style Property to get (camel-case).
+ * @return {string} Style value.
+ */
+Blockly.utils.style.getCascadedStyle = function(element, style) {
+  return /** @type {string} */ (
+      element.currentStyle ? element.currentStyle[style] : null);
+};
+
+/**
+ * Returns a Coordinate object relative to the top-left of the HTML document.
+ * Similar to Closure's goog.style.getPageOffset
+ * @param {!Element} el Element to get the page offset for.
+ * @return {!Blockly.utils.Coordinate} The page offset.
+ */
+Blockly.utils.style.getPageOffset = function(el) {
+  var pos = new Blockly.utils.Coordinate(0, 0);
+  var box = el.getBoundingClientRect();
+  var documentElement = document.documentElement;
+  // Must add the scroll coordinates in to get the absolute page offset
+  // of element since getBoundingClientRect returns relative coordinates to
+  // the viewport.
+  var scrollCoord = new Blockly.utils.Coordinate(
+      window.pageXOffset || documentElement.scrollLeft,
+      window.pageYOffset || documentElement.scrollTop);
+  pos.x = box.left + scrollCoord.x;
+  pos.y = box.top + scrollCoord.y;
+
+  return pos;
+};
+
+/**
+ * Calculates the viewport coordinates relative to the document.
+ * Similar to Closure's goog.style.getViewportPageOffset
+ * @return {!Blockly.utils.Coordinate} The page offset of the viewport.
+ */
+Blockly.utils.style.getViewportPageOffset = function() {
+  var body = document.body;
+  var documentElement = document.documentElement;
+  var scrollLeft = body.scrollLeft || documentElement.scrollLeft;
+  var scrollTop = body.scrollTop || documentElement.scrollTop;
+  return new Blockly.utils.Coordinate(scrollLeft, scrollTop);
+};
+
+/**
+ * Shows or hides an element from the page. Hiding the element is done by
+ * setting the display property to "none", removing the element from the
+ * rendering hierarchy so it takes up no space. To show the element, the default
+ * inherited display property is restored (defined either in stylesheets or by
+ * the browser's default style rules).
+ * Copied from Closure's goog.style.getViewportPageOffset
+ *
+ * @param {!Element} el Element to show or hide.
+ * @param {*} isShown True to render the element in its default style,
+ *     false to disable rendering the element.
+ */
+Blockly.utils.style.setElementShown = function(el, isShown) {
+  el.style.display = isShown ? '' : 'none';
+};
+
+/**
+ * Returns true if the element is using right to left (RTL) direction.
+ * Copied from Closure's goog.style.isRightToLeft
+ *
+ * @param {!Element} el The element to test.
+ * @return {boolean} True for right to left, false for left to right.
+ */
+Blockly.utils.style.isRightToLeft = function(el) {
+  return 'rtl' == Blockly.utils.style.getStyle_(el, 'direction');
+};
+
+/**
+ * Gets the computed border widths (on all sides) in pixels
+ * Copied from Closure's goog.style.getBorderBox
+ * @param {!Element} element  The element to get the border widths for.
+ * @return {!Object} The computed border widths.
+ */
+Blockly.utils.style.getBorderBox = function(element) {
+  var left = Blockly.utils.style.getComputedStyle(element, 'borderLeftWidth');
+  var right = Blockly.utils.style.getComputedStyle(element, 'borderRightWidth');
+  var top = Blockly.utils.style.getComputedStyle(element, 'borderTopWidth');
+  var bottom = Blockly.utils.style.getComputedStyle(element, 'borderBottomWidth');
+
+  return {
+    top: parseFloat(top),
+    right: parseFloat(right),
+    bottom: parseFloat(bottom),
+    left: parseFloat(left)
+  };
+};
+
+/**
+ * Changes the scroll position of `container` with the minimum amount so
+ * that the content and the borders of the given `element` become visible.
+ * If the element is bigger than the container, its top left corner will be
+ * aligned as close to the container's top left corner as possible.
+ * Copied from Closure's goog.style.scrollIntoContainerView
+ *
+ * @param {!Element} element The element to make visible.
+ * @param {!Element} container The container to scroll. If not set, then the
+ *     document scroll element will be used.
+ * @param {boolean=} opt_center Whether to center the element in the container.
+ *     Defaults to false.
+ */
+Blockly.utils.style.scrollIntoContainerView = function(
+    element, container, opt_center) {
+  var offset =
+      Blockly.utils.style.getContainerOffsetToScrollInto(element,
+          container, opt_center);
+  container.scrollLeft = offset.x;
+  container.scrollTop = offset.y;
+};
+
+/**
+ * Calculate the scroll position of `container` with the minimum amount so
+ * that the content and the borders of the given `element` become visible.
+ * If the element is bigger than the container, its top left corner will be
+ * aligned as close to the container's top left corner as possible.
+ * Copied from Closure's goog.style.getContainerOffsetToScrollInto
+ *
+ * @param {!Element} element The element to make visible.
+ * @param {!Element} container The container to scroll. If not set, then the
+ *     document scroll element will be used.
+ * @param {boolean=} opt_center Whether to center the element in the container.
+ *     Defaults to false.
+ * @return {!Blockly.utils.Coordinate} The new scroll position of the container,
+ *     in form of goog.math.Coordinate(scrollLeft, scrollTop).
+ */
+Blockly.utils.style.getContainerOffsetToScrollInto = function(
+    element, container, opt_center) {
+  // Absolute position of the element's border's top left corner.
+  var elementPos = Blockly.utils.style.getPageOffset(element);
+  // Absolute position of the container's border's top left corner.
+  var containerPos = Blockly.utils.style.getPageOffset(container);
+  var containerBorder = Blockly.utils.style.getBorderBox(container);
+  // Relative pos. of the element's border box to the container's content box.
+  var relX = elementPos.x - containerPos.x - containerBorder.left;
+  var relY = elementPos.y - containerPos.y - containerBorder.top;
+  // How much the element can move in the container, i.e. the difference between
+  // the element's bottom-right-most and top-left-most position where it's
+  // fully visible.
+  var elementSize = Blockly.utils.style.getSizeWithDisplay_(element);
+  var spaceX = container.clientWidth - elementSize.width;
+  var spaceY = container.clientHeight - elementSize.height;
+  var scrollLeft = container.scrollLeft;
+  var scrollTop = container.scrollTop;
+  if (opt_center) {
+    // All browsers round non-integer scroll positions down.
+    scrollLeft += relX - spaceX / 2;
+    scrollTop += relY - spaceY / 2;
+  } else {
+    // This formula was designed to give the correct scroll values in the
+    // following cases:
+    // - element is higher than container (spaceY < 0) => scroll down by relY
+    // - element is not higher that container (spaceY >= 0):
+    //   - it is above container (relY < 0) => scroll up by abs(relY)
+    //   - it is below container (relY > spaceY) => scroll down by relY - spaceY
+    //   - it is in the container => don't scroll
+    scrollLeft += Math.min(relX, Math.max(relX - spaceX, 0));
+    scrollTop += Math.min(relY, Math.max(relY - spaceY, 0));
+  }
+  return new Blockly.utils.Coordinate(scrollLeft, scrollTop);
+};

package/blocklySkini/blockly/core/utils/svg.js

@@ -0,0 +1,181 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Defines the Blockly.utils.Svg class. Its constants enumerate
+ * all SVG tag names used by Blockly.
+ * @author samelh@google.com (Sam El-Husseini)
+ */
+'use strict';
+
+/**
+ * @name Blockly.utils.Svg
+ * @namespace
+ */
+goog.provide('Blockly.utils.Svg');
+
+
+/**
+ * A name with the type of the SVG element stored in the generic.
+ * @param {string} tagName The SVG element tag name.
+ * @constructor
+ * @template T
+ * @private
+ */
+Blockly.utils.Svg = function(tagName) {
+  /**
+   * @type {string}
+   * @private
+   */
+  this.tagName_ = tagName;
+};
+
+/**
+ * Returns the SVG element tag name.
+ * @return {string} The name.
+ * @override
+ */
+Blockly.utils.Svg.prototype.toString = function() {
+  return this.tagName_;
+};
+
+/** @type {!Blockly.utils.Svg<!SVGAnimateElement>}
+ * @package
+ */
+Blockly.utils.Svg.ANIMATE =
+    new Blockly.utils.Svg('animate');
+
+/** @type {!Blockly.utils.Svg<!SVGCircleElement>}
+* @package
+ */
+Blockly.utils.Svg.CIRCLE =
+    new Blockly.utils.Svg('circle');
+
+/** @type {!Blockly.utils.Svg<!SVGClipPathElement>}
+ * @package
+ */
+Blockly.utils.Svg.CLIPPATH =
+    new Blockly.utils.Svg('clipPath');
+
+/** @type {!Blockly.utils.Svg<!SVGDefsElement>}
+ * @package
+ */
+Blockly.utils.Svg.DEFS =
+    new Blockly.utils.Svg('defs');
+
+/** @type {!Blockly.utils.Svg<!SVGFECompositeElement>}
+ * @package
+ */
+Blockly.utils.Svg.FECOMPOSITE =
+    new Blockly.utils.Svg('feComposite');
+
+/** @type {!Blockly.utils.Svg<!SVGFEComponentTransferElement>}
+ * @package
+ */
+Blockly.utils.Svg.FECOMPONENTTRANSFER =
+    new Blockly.utils.Svg('feComponentTransfer');
+
+/** @type {!Blockly.utils.Svg<!SVGFEFloodElement>}
+ * @package
+ */
+Blockly.utils.Svg.FEFLOOD =
+    new Blockly.utils.Svg('feFlood');
+
+/** @type {!Blockly.utils.Svg<!SVGFEFuncAElement>}
+ * @package
+ */
+Blockly.utils.Svg.FEFUNCA =
+    new Blockly.utils.Svg('feFuncA');
+
+/** @type {!Blockly.utils.Svg<!SVGFEGaussianBlurElement>}
+ * @package
+ */
+Blockly.utils.Svg.FEGAUSSIANBLUR =
+    new Blockly.utils.Svg('feGaussianBlur');
+
+/** @type {!Blockly.utils.Svg<!SVGFEPointLightElement>}
+ * @package
+ */
+Blockly.utils.Svg.FEPOINTLIGHT =
+    new Blockly.utils.Svg('fePointLight');
+
+/** @type {!Blockly.utils.Svg<!SVGFESpecularLightingElement>}
+ * @package
+ */
+Blockly.utils.Svg.FESPECULARLIGHTING =
+    new Blockly.utils.Svg('feSpecularLighting');
+
+/** @type {!Blockly.utils.Svg<!SVGFilterElement>}
+ * @package
+ */
+Blockly.utils.Svg.FILTER =
+    new Blockly.utils.Svg('filter');
+
+/** @type {!Blockly.utils.Svg<!SVGForeignObjectElement>}
+ * @package
+ */
+Blockly.utils.Svg.FOREIGNOBJECT =
+    new Blockly.utils.Svg('foreignObject');
+
+/** @type {!Blockly.utils.Svg<!SVGGElement>}
+ * @package
+ */
+Blockly.utils.Svg.G =
+    new Blockly.utils.Svg('g');
+
+/** @type {!Blockly.utils.Svg<!SVGImageElement>}
+ * @package
+ */
+Blockly.utils.Svg.IMAGE =
+    new Blockly.utils.Svg('image');
+
+/** @type {!Blockly.utils.Svg<!SVGLineElement>}
+ * @package
+ */
+Blockly.utils.Svg.LINE =
+    new Blockly.utils.Svg('line');
+
+/** @type {!Blockly.utils.Svg<!SVGPathElement>}
+ * @package
+ */
+Blockly.utils.Svg.PATH =
+    new Blockly.utils.Svg('path');
+
+/** @type {!Blockly.utils.Svg<!SVGPatternElement>}
+ * @package
+ */
+Blockly.utils.Svg.PATTERN =
+    new Blockly.utils.Svg('pattern');
+
+/** @type {!Blockly.utils.Svg<!SVGPolygonElement>}
+ * @package
+ */
+Blockly.utils.Svg.POLYGON =
+    new Blockly.utils.Svg('polygon');
+
+/** @type {!Blockly.utils.Svg<!SVGRectElement>}
+ * @package
+ */
+Blockly.utils.Svg.RECT =
+    new Blockly.utils.Svg('rect');
+
+/** @type {!Blockly.utils.Svg<!SVGSVGElement>}
+ * @package
+ */
+Blockly.utils.Svg.SVG =
+    new Blockly.utils.Svg('svg');
+
+/** @type {!Blockly.utils.Svg<!SVGTextElement>}
+ * @package
+ */
+Blockly.utils.Svg.TEXT =
+    new Blockly.utils.Svg('text');
+
+/** @type {!Blockly.utils.Svg<!SVGTSpanElement>}
+ * @package
+ */
+Blockly.utils.Svg.TSPAN =
+    new Blockly.utils.Svg('tspan');

package/blocklySkini/blockly/core/utils/svg_paths.js

@@ -0,0 +1,142 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Methods for creating parts of SVG path strings.  See
+ * developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+/**
+ * @name Blockly.utils.svgPaths
+ * @namespace
+ */
+goog.provide('Blockly.utils.svgPaths');
+
+
+/**
+ * Create a string representing the given x, y pair.  It does not matter whether
+ * the coordinate is relative or absolute.  The result has leading
+ * and trailing spaces, and separates the x and y coordinates with a comma but
+ * no space.
+ * @param {number} x The x coordinate.
+ * @param {number} y The y coordinate.
+ * @return {string} A string of the format ' x,y '
+ * @public
+ */
+Blockly.utils.svgPaths.point = function(x, y) {
+  return ' ' + x + ',' + y + ' ';
+};
+
+/**
+ * Draw a cubic or quadratic curve.  See
+ * developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Cubic_B%C3%A9zier_Curve
+ * These coordinates are unitless and hence in the user coordinate system.
+ * @param {string} command The command to use.
+ *     Should be one of: c, C, s, S, q, Q.
+ * @param {!Array.<string>} points  An array containing all of the points to pass to the
+ *     curve command, in order.  The points are represented as strings of the
+ *     format ' x, y '.
+ * @return {string} A string defining one or more Bezier curves.  See the MDN
+ *     documentation for exact format.
+ * @public
+ */
+Blockly.utils.svgPaths.curve = function(command, points) {
+  return ' ' + command + points.join('');
+};
+
+/**
+ * Move the cursor to the given position without drawing a line.
+ * The coordinates are absolute.
+ * These coordinates are unitless and hence in the user coordinate system.
+ * See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands
+ * @param {number} x The absolute x coordinate.
+ * @param {number} y The absolute y coordinate.
+ * @return {string} A string of the format ' M x,y '
+ * @public
+ */
+Blockly.utils.svgPaths.moveTo = function(x, y) {
+  return ' M ' + x + ',' + y + ' ';
+};
+
+/**
+ * Move the cursor to the given position without drawing a line.
+ * Coordinates are relative.
+ * These coordinates are unitless and hence in the user coordinate system.
+ * See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands
+ * @param {number} dx The relative x coordinate.
+ * @param {number} dy The relative y coordinate.
+ * @return {string} A string of the format ' m dx,dy '
+ * @public
+ */
+Blockly.utils.svgPaths.moveBy = function(dx, dy) {
+  return ' m ' + dx + ',' + dy + ' ';
+};
+
+/**
+ * Draw a line from the current point to the end point, which is the current
+ * point shifted by dx along the x-axis and dy along the y-axis.
+ * These coordinates are unitless and hence in the user coordinate system.
+ * See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands
+ * @param {number} dx The relative x coordinate.
+ * @param {number} dy The relative y coordinate.
+ * @return {string} A string of the format ' l dx,dy '
+ * @public
+ */
+Blockly.utils.svgPaths.lineTo = function(dx, dy) {
+  return ' l ' + dx + ',' + dy + ' ';
+};
+
+/**
+ * Draw multiple lines connecting all of the given points in order.  This is
+ * equivalent to a series of 'l' commands.
+ * These coordinates are unitless and hence in the user coordinate system.
+ * See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands
+ * @param {!Array.<string>} points An array containing all of the points to
+ *     draw lines to, in order.  The points are represented as strings of the
+ *     format ' dx,dy '.
+ * @return {string} A string of the format ' l (dx,dy)+ '
+ * @public
+ */
+Blockly.utils.svgPaths.line = function(points) {
+  return ' l' + points.join('');
+};
+
+/**
+ * Draw a horizontal or vertical line.
+ * The first argument specifies the direction and whether the given position is
+ * relative or absolute.
+ * These coordinates are unitless and hence in the user coordinate system.
+ * See developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#LineTo_path_commands
+ * @param {string} command The command to prepend to the coordinate.  This
+ *     should be one of: V, v, H, h.
+ * @param {number} val The coordinate to pass to the command.  It may be
+ *     absolute or relative.
+ * @return {string} A string of the format ' command val '
+ * @public
+ */
+Blockly.utils.svgPaths.lineOnAxis = function(command, val) {
+  return ' ' + command + ' ' + val + ' ';
+};
+
+/**
+ * Draw an elliptical arc curve.
+ * These coordinates are unitless and hence in the user coordinate system.
+ * See developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Elliptical_Arc_Curve
+ * @param {string} command The command string.  Either 'a' or 'A'.
+ * @param {string} flags The flag string.  See the MDN documentation for a
+ *     description and examples.
+ * @param {number} radius The radius of the arc to draw.
+ * @param {string} point The point to move the cursor to after drawing the arc,
+ *     specified either in absolute or relative coordinates depending on the
+ *     command.
+ * @return {string} A string of the format 'command radius radius flags point'
+ * @public
+ */
+Blockly.utils.svgPaths.arc = function(command, flags, radius, point) {
+  return command + ' ' + radius + ' ' + radius + ' ' + flags + point;
+};