【React+Ts】窗口拖拽+放大缩小功能

tsx代码：

import React, { Component, RefObject } from 'react'

import './index.less'

interface Iprop { }
interface Istate {
    arr: arr[]
}
interface arr {
    id: symbol,
    txt: string
}
export default class index extends Component<Iprop, Istate> {
    constructor(props: Iprop) {
        super(props)
        this.state = {
            arr: [

            ]
        }
    }
    pw: number = 0;
    ph: number = 0;
    px: number = 0
    py: number = 0
    son?: HTMLDivElement
    gapW: number = 0
    p = React.createRef<HTMLDivElement>()
    direction: string = ''
    nowX: number = 0
    nowY: number = 0
    disx: number = 0
    disy: number = 0
    x: number = 0
    y: number = 0
    fnAlterS(e: React.MouseEvent) {
        this.pw = (e.target as HTMLDivElement).offsetWidth
        this.ph = (e.target as HTMLDivElement).offsetHeight
        this.px = (e.pageX - (e.target as HTMLDivElement).offsetLeft - this.pw / 2) * (this.pw > this.ph ? this.ph / this.pw : 1);
        this.py = (e.pageY - (e.target as HTMLDivElement).offsetTop - this.ph / 2) * (this.ph > this.pw ? this.pw / this.ph : 1);
        this.son = ((e.target as HTMLDivElement).children[0] as HTMLDivElement)
        this.gapW = (this.ph > this.pw ? this.pw : this.ph) / 2 - this.son.offsetLeft
        this.nowX = e.pageX
        this.nowY = e.pageY
        if (this.px <= -this.gapW && Math.abs(this.py) < this.gapW) {
            // 左边
            this.direction = '左'
        }
        if (this.px >= this.gapW && Math.abs(this.py) < this.gapW) {
            // 右边
            this.direction = '右'