blockly/core/warning.js

/**
 * @license
 * Copyright 2012 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

/**
 * @fileoverview Object representing a warning.
 * @author fraser@google.com (Neil Fraser)
 */
'use strict';

goog.provide('Blockly.Warning');

goog.require('Blockly.Bubble');
goog.require('Blockly.Events');
goog.require('Blockly.Events.Ui');
goog.require('Blockly.Icon');
goog.require('Blockly.utils.dom');
goog.require('Blockly.utils.object');


/**
 * Class for a warning.
 * @param {!Blockly.Block} block The block associated with this warning.
 * @extends {Blockly.Icon}
 * @constructor
 */
Blockly.Warning = function(block) {
  Blockly.Warning.superClass_.constructor.call(this, block);
  this.createIcon();
  // The text_ object can contain multiple warnings.
  this.text_ = {};
};
Blockly.utils.object.inherits(Blockly.Warning, Blockly.Icon);

/**
 * Does this icon get hidden when the block is collapsed.
 */
Blockly.Warning.prototype.collapseHidden = false;

/**
 * Draw the warning icon.
 * @param {!Element} group The icon group.
 * @protected
 */
Blockly.Warning.prototype.drawIcon_ = function(group) {
  // Triangle with rounded corners.
  Blockly.utils.dom.createSvgElement(
      Blockly.utils.dom.SvgElementType.PATH,
      {
        'class': 'blocklyIconShape',
        'd': 'M2,15Q-1,15 0.5,12L6.5,1.7Q8,-1 9.5,1.7L15.5,12Q17,15 14,15z'
      },
      group);
  // Can't use a real '!' text character since different browsers and operating
  // systems render it differently.
  // Body of exclamation point.
  Blockly.utils.dom.createSvgElement(
      Blockly.utils.dom.SvgElementType.PATH,
      {
        'class': 'blocklyIconSymbol',
        'd': 'm7,4.8v3.16l0.27,2.27h1.46l0.27,-2.27v-3.16z'
      },
      group);
  // Dot of exclamation point.
  Blockly.utils.dom.createSvgElement(
      Blockly.utils.dom.SvgElementType.RECT,
      {
        'class': 'blocklyIconSymbol',
        'x': '7', 'y': '11', 'height': '2', 'width': '2'
      },
      group);
};

/**
 * Create the text for the warning's bubble.
 * @param {string} text The text to display.
 * @return {!SVGTextElement} The top-level node of the text.
 * @private
 */
Blockly.Warning.textToDom_ = function(text) {
  var paragraph = Blockly.utils.dom.createSvgElement(
      Blockly.utils.dom.SvgElementType.TEXT,
      {
        'class': 'blocklyText blocklyBubbleText blocklyNoPointerEvents',
        'y': Blockly.Bubble.BORDER_WIDTH
      },
      null);
  var lines = text.split('\n');
  for (var i = 0; i < lines.length; i++) {
    var tspanElement = Blockly.utils.dom.createSvgElement(
        Blockly.utils.dom.SvgElementType.TSPAN,
        {'dy': '1em', 'x': Blockly.Bubble.BORDER_WIDTH}, paragraph);
    var textNode = document.createTextNode(lines[i]);
    tspanElement.appendChild(textNode);
  }
  return paragraph;
};

/**
 * Show or hide the warning bubble.
 * @param {boolean} visible True if the bubble should be visible.
 */
Blockly.Warning.prototype.setVisible = function(visible) {
  if (visible == this.isVisible()) {
    return;
  }
  Blockly.Events.fire(
      new Blockly.Events.Ui(this.block_, 'warningOpen', !visible, visible));
  if (visible) {
    this.createBubble();
  } else {
    this.disposeBubble();
  }
};

/**
 * Show the bubble.
 * @package
 */
Blockly.Warning.prototype.createBubble = function() {
  // TODO (#2943): This is package because comments steal this UI for
  //  non-editable comments, but really this should be private.
  this.paragraphElement_ = Blockly.Warning.textToDom_(this.getText());
  this.bubble_ = new Blockly.Bubble(
      /** @type {!Blockly.WorkspaceSvg} */ (this.block_.workspace),
      this.paragraphElement_, this.block_.pathObject.svgPath,
      /** @type {!Blockly.utils.Coordinate} */ (this.iconXY_), null, null);
  // Expose this warning's block's ID on its top-level SVG group.
  this.bubble_.setSvgId(this.block_.id);
  if (this.block_.RTL) {
    // Right-align the paragraph.
    // This cannot be done until the bubble is rendered on screen.
    var maxWidth = this.paragraphElement_.getBBox().width;
    for (var i = 0, textElement;
      (textElement = this.paragraphElement_.childNodes[i]); i++) {

      textElement.setAttribute('text-anchor', 'end');
      textElement.setAttribute('x', maxWidth + Blockly.Bubble.BORDER_WIDTH);
    }
  }
  this.applyColour();
};

/**
 * Dispose of the bubble and references to it.
 * @package
 */
Blockly.Warning.prototype.disposeBubble = function() {
  // TODO (#2943): This is package because comments steal this UI for
  //  non-editable comments, but really this should be private.
  this.bubble_.dispose();
  this.bubble_ = null;
  this.body_ = null;
  this.paragraphElement_ = null;
};

/**
 * Set this warning's text.
 * @param {string} text Warning text (or '' to delete). This supports
 *    linebreaks.
 * @param {string} id An ID for this text entry to be able to maintain
 *     multiple warnings.
 */
Blockly.Warning.prototype.setText = function(text, id) {
  if (this.text_[id] == text) {
    return;
  }
  if (text) {
    this.text_[id] = text;
  } else {
    delete this.text_[id];
  }
  if (this.isVisible()) {
    this.setVisible(false);
    this.setVisible(true);
  }
};

/**
 * Get this warning's texts.
 * @return {string} All texts concatenated into one string.
 */
Blockly.Warning.prototype.getText = function() {
  var allWarnings = [];
  for (var id in this.text_) {
    allWarnings.push(this.text_[id]);
  }
  return allWarnings.join('\n');
};

/**
 * Dispose of this warning.
 */
Blockly.Warning.prototype.dispose = function() {
  this.block_.warning = null;
  Blockly.Icon.prototype.dispose.call(this);
};