'use strict';

class DivElement {

    /**
     * 构造函数
     * @param {object} option 
     * @param {HTMLElement} option.element
     * @param {number} option.minwidth
     * @param {number} option.minheight
     */
    constructor({ element,minwidth,minheight }) {
        this.element = element;
        this.minheight = minheight;
        this.minwidth = minwidth;
        this.state = false;
    }


    *
     * @returns {CSSStyleDeclaration}
     
    get style() {
        return window.getComputedStyle(this.element);
    }

    *
     * 调整大小
     
    resizable() {        
        let nodese = this._createSe('resizable-se');
        let [mousedownX,mousedownY,width,height] = [0,0];
        
        // 鼠标按下
        nodese.addEventListener("mousedown",(event) => {
            true;    设置状态位
            [mousedownX,height] = [
                event.clientX, 鼠标按下时X坐标
                event.clientY, 鼠标按下时Y坐标
                Number.parseFloat(this.style.width),1)"> 获取元素宽度
                Number.parseFloat(this.style.height),1)"> 获取 元素高度
            ];
        });

         鼠标拖动        
        document.addEventListener("mousemove",1)">if (.state) {
                let w = width + (event.clientX - mousedownX);    调整后的宽度
                let h = height + (event.clientY - mousedownY);   调整后的高度
                if (w > this.minwidth) {               限制最小 宽度
                    this.element.style.width = w + 'px';
                }
                if (h > this.minheight) {    限制最小 高度
                    this.element.style.height = h + 'px';
                }
            }
        })

         鼠标松开
        this.element.addEventListener("mouseup",1)">false;    重置状态位
        })
    }

    _createSe(className) {
        let node = document.createElement('div');
        node.className = className;
        .element.appendChild(node);
        return node;
    }
}