Blockly.blockRendering.ConstantProvider.prototype.createDom = function()

in core/renderers/common/constants.js [1019:1151]


Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
    tagName, selector) {
  this.injectCSS_(tagName, selector);

  /*
  <defs>
    ... filters go here ...
  </defs>
  */
  var defs = Blockly.utils.dom.createSvgElement(
      Blockly.utils.Svg.DEFS, {}, svg);
  /*
    <filter id="blocklyEmbossFilter837493">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
      <feSpecularLighting in="blur" surfaceScale="1" specularConstant="0.5"
                          specularExponent="10" lighting-color="white"
                          result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000" />
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in"
                   result="specOut" />
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
                   k1="0" k2="1" k3="1" k4="0" />
    </filter>
  */
  var embossFilter = Blockly.utils.dom.createSvgElement(
      Blockly.utils.Svg.FILTER,
      {'id': 'blocklyEmbossFilter' + this.randomIdentifier}, defs);
  Blockly.utils.dom.createSvgElement(
      Blockly.utils.Svg.FEGAUSSIANBLUR,
      {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
  var feSpecularLighting = Blockly.utils.dom.createSvgElement(
      Blockly.utils.Svg.FESPECULARLIGHTING,
      {
        'in': 'blur',
        'surfaceScale': 1,
        'specularConstant': 0.5,
        'specularExponent': 10,
        'lighting-color': 'white',
        'result': 'specOut'
      },
      embossFilter);
  Blockly.utils.dom.createSvgElement(
      Blockly.utils.Svg.FEPOINTLIGHT,
      {'x': -5000, 'y': -10000, 'z': 20000}, feSpecularLighting);
  Blockly.utils.dom.createSvgElement(
      Blockly.utils.Svg.FECOMPOSITE,
      {
        'in': 'specOut',
        'in2': 'SourceAlpha',
        'operator': 'in',
        'result': 'specOut'
      }, embossFilter);
  Blockly.utils.dom.createSvgElement(
      Blockly.utils.Svg.FECOMPOSITE,
      {
        'in': 'SourceGraphic',
        'in2': 'specOut',
        'operator': 'arithmetic',
        'k1': 0,
        'k2': 1,
        'k3': 1,
        'k4': 0
      }, embossFilter);
  this.embossFilterId = embossFilter.id;
  this.embossFilter_ = embossFilter;

  /*
    <pattern id="blocklyDisabledPattern837493" patternUnits="userSpaceOnUse"
             width="10" height="10">
      <rect width="10" height="10" fill="#aaa" />
      <path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="#cc0" />
    </pattern>
  */
  var disabledPattern = Blockly.utils.dom.createSvgElement(
      Blockly.utils.Svg.PATTERN,
      {
        'id': 'blocklyDisabledPattern' + this.randomIdentifier,
        'patternUnits': 'userSpaceOnUse',
        'width': 10,
        'height': 10
      }, defs);
  Blockly.utils.dom.createSvgElement(
      Blockly.utils.Svg.RECT,
      {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
  Blockly.utils.dom.createSvgElement(
      Blockly.utils.Svg.PATH,
      {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern);
  this.disabledPatternId = disabledPattern.id;
  this.disabledPattern_ = disabledPattern;

  if (Blockly.blockRendering.Debug) {
    var debugFilter = Blockly.utils.dom.createSvgElement(
        Blockly.utils.Svg.FILTER,
        {
          'id': 'blocklyDebugFilter' + this.randomIdentifier,
          'height': '160%',
          'width': '180%',
          y: '-30%',
          x: '-40%'
        },
        defs);
    // Set all gaussian blur pixels to 1 opacity before applying flood
    var debugComponentTransfer = Blockly.utils.dom.createSvgElement(
        Blockly.utils.Svg.FECOMPONENTTRANSFER, {
          'result': 'outBlur'
        }, debugFilter);
    Blockly.utils.dom.createSvgElement(
        Blockly.utils.Svg.FEFUNCA,
        {
          'type': 'table', 'tableValues': '0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'
        },
        debugComponentTransfer);
    // Color the highlight
    Blockly.utils.dom.createSvgElement(
        Blockly.utils.Svg.FEFLOOD,
        {
          'flood-color': '#ff0000',
          'flood-opacity': 0.5,
          'result': 'outColor'
        },
        debugFilter);
    Blockly.utils.dom.createSvgElement(
        Blockly.utils.Svg.FECOMPOSITE,
        {
          'in': 'outColor', 'in2': 'outBlur',
          'operator': 'in', 'result': 'outGlow'
        },
        debugFilter);
    this.debugFilterId = debugFilter.id;
    this.debugFilter_ = debugFilter;
  }
};