org-chart-frant/src/components/toolBar/index.jsx

import React from 'react'
import add from './img/add.png'
import decrease from './img/decrease.png'
import styles from './index.less';
import top from './img/top.png';
import left from './img/left.png';
import topActive from './img/top_active.png'
import leftActive from './img/left_active.png'

export default class ToolBar extends React.Component {
    progressBtn = React.createRef()
    start = false;
    clientY = 0
    originalY = 0
    top = 50
    constructor(props) {
        super(props);
        this.state = {
            toolActive: "left"
        }
    }

    handleMouseDown(e) {
        this.clientY = e.clientY
        this.originalY = e.clientY
        this.top = parseInt(this.progressBtn.current.style.top)
        this.start = true;
    }

    handleMouseMove(e) {
        if(this.start && e.clientY - this.clientY > 10) {
            this.props.onZoomOut()
            this.clientY = e.clientY
        } else if(this.start && e.clientY - this.clientY < - 10) {
            this.props.onZoomIn()
            this.clientY = e.clientY
        }
        if(this.start) {
            let offset = e.clientY - this.originalY
            console.log("offset:", offset);
            if((this.top + offset) < 0) {
                offset = 0 - this.top
            }
            if((this.top + offset) > 100) {
                offset = 100 - this.top
            }
            console.log("(this.top + offset)：", (this.top + offset))
            this.progressBtn.current.style.top = (this.top + offset) + "px";
        }
    }

    handleMouseUp(e) {
        this.start = false;
        console.log("this.start:", this.start)
        
    }
    
    render() {
        return (
            <div className={styles.toolbarWrapper}>
                <img src={add} style={{cursor: 'pointer'}} onClick={() => {this.props.onZoomIn(this.progressBtn)}}/>
                <div className={styles.progressWrapper}>
                    <div className={styles.progressBtn} style={{top: 50}} ref={this.progressBtn}
                        onMouseDown={(e) => {this.handleMouseDown(e)}}
                        onMouseMove={(e) => {this.handleMouseMove(e)}}
                        onMouseUp={(e) => {this.handleMouseUp(e)}}
                        onMouseLeave={(e) => {this.handleMouseUp(e)}}
                    ></div>
                    <div className={styles.progressLine}></div>
                </div>
                <img src={decrease} style={{cursor: 'pointer'}} onClick={() => {this.props.onZoomOut(this.progressBtn)}}/>

                <img className={styles.toolBarItem} src={this.state.toolActive == 'top'? topActive : top} onClick={() => {this.setState({toolActive: "top"}); this.props.onTopLayoutClick(this.progressBtn)}}/>
                <img className={styles.toolBarItem} src={this.state.toolActive == 'left'? leftActive : left} onClick={() => {this.setState({toolActive: "left"}); this.props.onLeftLayoutClick(this.progressBtn)}}/>
            </div>
        )
    }
}