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

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

/**
 * @file        Layer 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 core from 'core/core';
import createComponent from 'components/createComponent';
import ContainerMixin from 'components/ContainerMixin';
import NodeMixin from 'components/NodeMixin';
import PixiLayer from 'classes/Layer';
import pixiPropTypes from './pixi/propTypes';

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

  createNode() {
    this.node = new PixiLayer();
  },
  mountNode(props) {
    // color, opacity, width, height, x, y, etc.
    const layer = this.node;

    layer.setProperties(props);
    //  layer.x = props.x || 0;
    //  layer.y = props.y || 0;

    return layer;
  },
  updateNode(prevProps, props) {
    const layer = this.node;

    layer.setProperties(props);
  },
});

export class Layer extends React.PureComponent {
  static propTypes = {
    ...pixiPropTypes,
    // TODO: check: rename to alpha
    // opacity: PropTypes.number,
    width: PropTypes.number,
    height: PropTypes.number,
    fillColor: PropTypes.number,
    fillAlpha: PropTypes.number,
    clip: PropTypes.bool,
  };
  render() {
    const renderer = core.getRenderer();
    const props = {
      width: renderer.width,
      height: renderer.height,
      ...this.props,
    };

    return React.createElement(RawLayer, props, this.props.children);
  }
}