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

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

/**
 * @file        Background image 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 core from 'core/core';
import { Image } from './Image';
import { Transition } from 'components/transition';
import transition from 'plugins/transition';

export class BGImage extends React.Component {
  constructor(props) {
    super(props);

    this.handleScriptExec = this.handleScriptExec.bind(this);
    this.handleArchiveSave = this.handleArchiveSave.bind(this);
    this.handleArchiveLoad = this.handleArchiveLoad.bind(this);

    this.state = {
      file: null,
      x: 0,
      y: 0,
    };
  }
  componentDidMount() {
    core.use('script-exec', this.handleScriptExec);
    core.use('save-archive', this.handleArchiveSave);
    core.use('load-archive', this.handleArchiveLoad);

    this.execute = transition(this.transLayer, this.execute.bind(this));
  }
  async execute(ctx, next) {
    const { params } = ctx;

    this.setState(params);
    await next();
  }
  componentWillUnmount() {
    core.unuse('script-exec', this.handleScriptExec);
    core.unuse('save-archive', this.handleArchiveSave);
    core.unuse('load-archive', this.handleArchiveLoad);
  }
  async handleScriptExec(ctx, next) {
    if (ctx.command === 'bg') {
      await this.execute(ctx, next);
    } else {
      await next();
    }
  }
  async handleArchiveSave(ctx, next) {
    ctx.data.bgimage = Object.assign({}, this.state);
    await next();
  }
  async handleArchiveLoad(ctx, next) {
    this.setState({
      file: null,
      x: 0,
      y: 0,
      ...ctx.data.bgimage
    });
    await next();
  }
  render() {
    // TODO: It's weired that if you wrap Image with Layer.
    return <Transition ref={transLayer => (this.transLayer = transLayer)}>
      <Image src={this.state.file || ''} x={0} y={0} />
    </Transition>;
  }
}