blockly/core/renderers/geras/path_object.js

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

/**
 * @fileoverview An object that owns a block's rendering SVG elements.
 */

'use strict';

/**
 * An object that owns a block's rendering SVG elements.
 * @class
 */
goog.module('Blockly.geras.PathObject');

const colour = goog.require('Blockly.utils.colour');
const dom = goog.require('Blockly.utils.dom');
/* eslint-disable-next-line no-unused-vars */
const {ConstantProvider} = goog.requireType('Blockly.geras.ConstantProvider');
const {PathObject: BasePathObject} = goog.require('Blockly.blockRendering.PathObject');
const {Svg} = goog.require('Blockly.utils.Svg');
/* eslint-disable-next-line no-unused-vars */
const {Theme} = goog.requireType('Blockly.Theme');


/**
 * An object that handles creating and setting each of the SVG elements
 * used by the renderer.
 */
class PathObject extends BasePathObject {
  /**
   * @param {!SVGElement} root The root SVG element.
   * @param {!Theme.BlockStyle} style The style object to use for
   *     colouring.
   * @param {!ConstantProvider} constants The renderer's constants.
   * @alias Blockly.geras.PathObject
   * @package
   */
  constructor(root, style, constants) {
    super(root, style, constants);
    /**
     * The renderer's constant provider.
     * @type {!ConstantProvider}
     */
    this.constants = constants;

    /**
     * The dark path of the block.
     * @type {SVGElement}
     * @package
     */
    this.svgPathDark = dom.createSvgElement(
        Svg.PATH, {'class': 'blocklyPathDark', 'transform': 'translate(1,1)'});

    // SVG draw order is based on the order of elements (top most = back most)
    // So we need to insert the dark path before the base path to make sure it
    // gets drawn first.
    this.svgRoot.insertBefore(this.svgPathDark, this.svgPath);

    /**
     * The light path of the block.
     * @type {SVGElement}
     * @package
     */
    this.svgPathLight = dom.createSvgElement(
        Svg.PATH, {'class': 'blocklyPathLight'}, this.svgRoot);

    /**
     * The colour of the dark path on the block in '#RRGGBB' format.
     * @type {string}
     * @package
     */
    this.colourDark = '#000000';
  }

  /**
   * @override
   */
  setPath(mainPath) {
    this.svgPath.setAttribute('d', mainPath);
    this.svgPathDark.setAttribute('d', mainPath);
  }

  /**
   * Set the highlight path generated by the renderer onto the SVG element.
   * @param {string} highlightPath The highlight path.
   * @package
   */
  setHighlightPath(highlightPath) {
    this.svgPathLight.setAttribute('d', highlightPath);
  }

  /**
   * @override
   */
  flipRTL() {
    // Mirror the block's path.
    this.svgPath.setAttribute('transform', 'scale(-1 1)');
    this.svgPathLight.setAttribute('transform', 'scale(-1 1)');
    this.svgPathDark.setAttribute('transform', 'translate(1,1) scale(-1 1)');
  }

  /**
   * @override
   */
  applyColour(block) {
    this.svgPathLight.style.display = '';
    this.svgPathDark.style.display = '';
    this.svgPathLight.setAttribute('stroke', this.style.colourTertiary);
    this.svgPathDark.setAttribute('fill', this.colourDark);

    super.applyColour(block);

    this.svgPath.setAttribute('stroke', 'none');
  }

  /**
   * @override
   */
  setStyle(blockStyle) {
    this.style = blockStyle;
    this.colourDark =
        colour.blend('#000', this.style.colourPrimary, 0.2) || this.colourDark;
  }

  /**
   * @override
   */
  updateHighlighted(highlighted) {
    if (highlighted) {
      this.svgPath.setAttribute(
          'filter', 'url(#' + this.constants.embossFilterId + ')');
      this.svgPathLight.style.display = 'none';
    } else {
      this.svgPath.setAttribute('filter', 'none');
      this.svgPathLight.style.display = 'inline';
    }
  }

  /**
   * @override
   */
  updateShadow_(shadow) {
    if (shadow) {
      this.svgPathLight.style.display = 'none';
      this.svgPathDark.setAttribute('fill', this.style.colourSecondary);
      this.svgPath.setAttribute('stroke', 'none');
      this.svgPath.setAttribute('fill', this.style.colourSecondary);
    }
  }

  /**
   * @override
   */
  updateDisabled_(disabled) {
    super.updateDisabled_(disabled);
    if (disabled) {
      this.svgPath.setAttribute('stroke', 'none');
    }
  }
}

exports.PathObject = PathObject;