Реализация плагина simpleheatmap с помощью React - PullRequest
Новая
       20

Реализация плагина simpleheatmap с помощью React

0 голосов
/ 11 апреля 2019

Я пытаюсь реализовать этот https://github.com/mourner/simpleheat плагин в компоненте реакции, но не могу понять:

  1. Как создать глобальную переменную 
let heat = SimpleHeat(canvas).data(data)

таким образом, чтобы он был доступен для функций draw и handleMouse

Думаю, проблема в том, что мне нужно повторно инициализировать simpleHeat в функции рисования, и она переопределяет данные, которые уже есть, но по какой-то причине тоже не создает ничего нового.

  1. Какой вообще хороший подход для реализации анимации в ответ на requestAnimationFrame?

Я пробовал искать на SO и github, но пока не смог найти реализацию этого с реакцией 

import React, { Component } from 'react'
import SimpleHeat from 'simpleheat'

export default class CanvasComponent extends Component {

  canvasRef = React.createRef();
  state = {
    x: 0,
    y: 0,
    canvas: this.canvasRef,
    // heat: SimpleHeat()
  }

  componentDidMount() {
    this.updateCanvas()

  }

  draw = () => {
    console.time('draw')
    let heat = SimpleHeat(this.canvasRef.current)
    console.log('called Frame:',frame)
    heat.draw()
    let frame = null
    console.log('called Frame:',frame)
    console.timeEnd('draw')
  }



  handleMouse = (e) =>{
    // console.log(e)
    console.log('canvas',this.state.canvas.current)
    // console.log('anotherCanv', this.canvasRef.current)

    let data = [[38, 20, 1], [38, 690, 1], [48, 30, 1]];
    // this.setState({x: e.screenX, y: e.screenY})
    let heat = SimpleHeat(this.canvasRef.current).data(data)
    let frame;
    heat.add([e.screenX,e.screenY, 1])

    console.log('e.screenX,e.screenY:', e.screenX,e.screenY)

    console.log(heat)
    frame = frame || window.requestAnimationFrame(this.draw)

  }



  updateCanvas() {
    let data = [[38, 20, 1], [38, 690, 1], [48, 30, 1]];
    let heat = SimpleHeat(this.canvasRef.current).data(data)

    console.log('heat:', heat)
    this.do(heat)
    // this.timer()
    // let data = [[38, 20, 1], [38, 690, 1], [48, 30, 1]];

    // let heat = SimpleHeat(this.canvasRef.current).data(data)

    window.requestAnimationFrame = window.requestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.msRequestAnimationFrame
    const canvas = this.canvasRef.current
    heat.draw()


    canvas.onMouseMove = (e) => {

      heat.add([this.state.x, this.state.y,1])
      console.log('worked:')
      // const frame = frame || window.requestAnimationFrame(this.do)
    }
  }

  render() {
    const {x, y} = this.state
    return (
      <div>
        <canvas onMouseMove={this.handleMouse} ref={this.canvasRef} width={500} height={500}/>
        <h1>{x}, {y}</h1>
      </div>
    )
  }
}
...