avg-core-ts/src/components/Text.jsx

Develop Adventure Game (or ADV, Visual Novel, Galgame, etc.) on your own!

/**
 * @file        General text component
 * @author      MicroMatrix <yangpan.1985@bytedance.com>
 * @copyright   2012-2020 bytedance
 * @link        git@code.byted.org:yangpan.1985/avg.git
 */

import React from 'react';
import PropTypes from 'prop-types';
import createComponent from 'components/createComponent';
import ContainerMixin from 'components/ContainerMixin';
import NodeMixin from 'components/NodeMixin';
import TextSprite from 'classes/TextSprite';
import pixiPropTypes from './pixi/propTypes';
import { mountNode, updateNode, setValue, updateValue } from './pixi/properties';

const RawText = createComponent('RawText', ContainerMixin, NodeMixin, {

  createNode() {
    this.node = new TextSprite();
  },
  mountNode(props) {
    const style = {
      fill: 0xffffff,
      breakWords: true,
      fontFamily: 'sans-serif',
      fontSize: 24,
      fontStyle: 'normal',
      wordWrap: false,
      wordWrapWidth: 100,
      letterSpacing: 0,
      lineHeight: 27,
      under: false,
      shadow: 'black',
      shadowThickness: 0,
      stroke: 'black',
      strokeThickness: 0,
      ...props.style,
    };

    const node = this.node;

    mountNode(node, props);
    setValue.call(node, 'style', style);
    setValue.call(node, 'text', props.text);

    return node;
  },
  updateNode(prevProps, props) {
    const style = {
      fill: '#ffffff',
      breakWords: true,
      fontFamily: 'sans-serif',
      fontSize: 24,
      fontStyle: 'normal',
      wordWrap: false,
      wordWrapWidth: 100,
      letterSpacing: 0,
      lineHeight: 27,
      under: false,
      dropShadow: false,
      dropShadowColor: '#000000',
      stroke: 'black',
      strokeThickness: 0,
      ...props.style,
    };

    const node = this.node;

    updateNode(node, prevProps, props);
    updateValue.call(node, 'style', prevProps.style, style);
    updateValue.call(node, 'text', prevProps.text, props.text);
  },

});

export class Text extends React.Component {
  static displayName = 'Text';
  static propTypes = {
    text: PropTypes.string,
    ...pixiPropTypes,
  }
  render() {
    return React.createElement(RawText, this.props, this.props.children);
  }
}

// module.exports = Text;