Added Harmoware-VIS control

Added PLAY · PAUSE button and play direction switching button.

Import control objects from Harmoware-VIS.

app.js
// before
import {
  Container, connectToHarmowareVis, HarmoVisLayers, MovesLayer, MovesInput
} from 'harmoware-vis';

// after
import {
  Container, connectToHarmowareVis, HarmoVisLayers, MovesLayer, MovesInput,
  PlayButton, PauseButton, ForwardButton, ReverseButton
} from 'harmoware-vis';

Get necessary state from Harmoware-VIS props.

app.js
// before
const { actions, clickedObject, inputFileName, viewport,
  routePaths, movesbase, movedData } = this.props;

// after
const { actions, clickedObject, inputFileName, viewport,
  routePaths, movesbase, movedData,
  animatePause, animateReverse } = this.props;

Added Harmoware-VIS control object to JSX.

app.js
// add in ul tag group
<li className="flex_row">
  {animatePause ?
    <PlayButton actions={actions} /> : <PauseButton actions={actions} />
  }
  {animateReverse ?
    <ForwardButton actions={actions} /> : <ReverseButton actions={actions} />
  }
</li>

Last updated