import React, { Component } from "react"
import AreaSelect from "../areaSelete/areaSelete"
import "./funAreaSelect.css"
export default class FlvCom extends Component {
    constructor(props){
        super(props);
        this.state = {
            serviceData:[],
        }
    }
    static getDerivedStateFromProps(props){
        
        return null;
    }
    componentDidUpdate(){
       
    }
    componentDidMount(){
      var canvasEl = document.getElementById(this.myRef.state.id)
      canvasEl.onclick = (e)=>{
          var left = e.layerX;
          var top = e.layerY;
          let {serviceData} = this.state;
          serviceData.push([left,top])
          this.setState({
            serviceData
          },()=>{
            this.myRef.draw()
          })
      }
      canvasEl.oncontextmenu = (e)=>{
        console.log(e.button)
        e.preventDefault()
      }
    }
    change(){
        
    }
    render() {
        let {serviceData} = this.state;
        return (
            <div className="funAreaSelectCss">
                <AreaSelect ref={(inst) => { this.myRef = inst } } serviceData={serviceData} change={(val)=>this.change(val)}></AreaSelect>
            </div>
        )
    }
}