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: 'top',
    };
  }

  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;
      if (this.top + offset < 0) {
        offset = 0 - this.top;
      }
      if (this.top + offset > 100) {
        offset = 100 - this.top;
      }
      this.progressBtn.current.style.top = this.top + offset + 'px';
    }
  }

  handleMouseUp(e) {
    this.start = false;
  }

  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, cursor: 'no-drop' }}
            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>
    );
  }
}