JS realizes graphics operation small project 1 (drawing window)

I will use javascript, html, and css to write a small case of graphics operations. The functions include drawing a window, dragging and moving, stretching and resizing, new creation, clearing, layer modification... Slowly improve the function and add

Operation video:

JS graphics operation video

Example screenshot of operation:

1. The main code of the "draw window" function js

var oBox = document.getElementById("operatingArea");
oBox.ontouchstart = oBox.onmousedown = function (ev) {
    var scrollbarWidth = oBox.offsetWidth - oBox.clientWidth;
    scrollbarWidth > 2 ? scrollbarWidth + 3 : scrollbarWidth;
    if (ev.offsetX > oBox.offsetWidth - scrollbarWidth || ev.offsetY > oBox.offsetHeight - scrollbarWidth) {
        return;
        //console.log('在滚动条上、、、、、、、、、、、、、、、、、、')
    } else {
        //console.log('不在在滚动条上、、、、、、、、、、、、、、、、、、')
        console.log("鼠标按下,oBox的值为：" + oBox.id);
        ev = ev || window.event;
        //1.获取按下的点
        let clientX, clientY;
        if (ev.type == 'touchstart') {
            clientX = ev.changedTouches[0].clientX;
            clientY = ev.changedTouches[0].clientY;
        } else if (ev.type == 'mousedown') {
            clientX = ev.clientX;
            clientY = ev.clientY;
        }
        var x1 = clientX - oBox.offsetLeft;
        var y1 = clientY - oBox.offsetTop;
        //2.创建div
        oDiv = document.createElement("div");
        oDiv.id = "genrectWin";
        oBox.appendChild(oDiv);

        oBox.onmousemove = oBox.ontouchmove = function (ev) {
            oDiv.className = "genrectWin";
            console.log("鼠标移动");
            ev = window.event || ev;
            if (ev.type == 'touchmove') {
                clientX = ev.changedTouches[0].clientX;
                clientY = ev.changedTouches[0].clientY;
            } else if (ev.type == 'mousemove') {
                clientX = ev.clientX;
                clientY = ev.clientY;
            }
            //oBox得到的ID是operatingArea
            var x2 = clientX - oBox.offsetLeft;
            var y2 = clientY - oBox.offsetTop;
            var w = (x2 > x1 ? x1 : x2) + $(document).scrollLeft() + $('#operatingArea').scrollLeft();
            var h = (y2 > y1 ? y1 : y2) + $(document).scrollTop() + $('#operatingArea').scrollTop();

            //3.设置div的样式
            oDiv.style.left = w + "px";
            oDiv.style.top = h + "px";
            //得到滚动条的宽高和鼠标点击位置的宽高值后无法实时移动
            oDiv.style.width = Math.abs(x2 - x1) + "px";
            oDiv.style.height = Math.abs(y2 - y1) + "px";

            //window.event ? window.event.cancelBubble = true : ev.stopPropagation();
            ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
        };
        document.onmouseup = oBox.ontouchend = function (e) {
            if (oDiv !== null) {
                var x = oDiv.offsetLeft - 100;
                var y = oDiv.offsetTop - 100;
                var w = oDiv.offsetWidth;
                var h = oDiv.offsetHeight;
                if (w > 10 && h > 10) {
                    callbacknewWindow(x, y, w, h);
                }
                console.log("genrect oBox   document.onmouseup");
                var my = document.getElementById("genrectWin");
                if (my != null) {
                    my.parentNode.removeChild(my);
                }
                oDiv = null;
                oBox.onmouseup = null;
                oBox.onmousemove = null;
                document.onmouseup = null;
            }
        };
        //在鼠标抬起后终止onmousemove事件
        //window.event ? window.event.cancelBubble = true : ev.stopPropagation();
        ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
        return false;  //解除在划动过程中鼠标样式改变的BUG
    }
}
//画窗口
function callbacknewWindow(x, y, w, h) {
    let subList = bgBoxList.filter(function(item) {
        return item.ugId == ugId;
    });
    if (subList.length === 0) {
        layer.msg("无底图，不能新建窗口", { icon: 2 });
        LangClick();
        return;
    }
    if (boxClassLenght > 100) {
        layer.msg("窗口已达上限", { icon: 2 });
    } else {
        boxClassLenght = Math.max.apply(Math, windowList.map(function(o) {
            return o.winId;
        }));
        if (!isNum(boxClassLenght)) {
            boxClassLenght = 0;
        }
        boxClassLenght++; // id +1
        newWindow(boxClassLenght, x, y, w, h, boxClassLenght, ugId);
        windowList.push(new windowModel("" , "", boxClassLenght, boxClassLenght, x, y, w, h, ugId));
        btnWindowNoDisabled();
    }
}

function newWindow(boxClassLenght, x, y, w, h, z, ugId) {
    console.log("进入方法newWindow");
    var subwin = new subwidget();
    subwin.initAsWindow("dragBox", boxClassLenght);
    // subwin.callbackupfun = SetWindowfunc;
    subwin.callbackupfun = SetWinRect;
    subwin.callbackdnfun = Active_box;
    subwin.callbackCloseFun = WinBtnClose;
    subwin.callbackMaxFun = WinBtnMax;
    // subwin.callbackMaxdbFun = WinBtndbMax;

    console.log("newWindow boxClassLenght" + boxClassLenght);
    subwin.setXYWHZ(x, y, w, h);
    subwin.windata.winId = boxClassLenght;
    subwin.windata.winGroupID = ugId;

    var dragsubwin = subwin.dragdiv;
    var videoDivSourceD = document.createElement("div");
    videoDivSourceD.id = "videoDivSourceD" + boxClassLenght;
    videoDivSourceD.className = "videoDivSourceD";

    dragsubwin.appendChild(videoDivSourceD);
    //鼠标移入的时候上下调整
    dragsubwin.onmouseover = function () {
        var resizeArr = $(this).children(".resize");
        for (var i = 0; i < resizeArr.length; i++) {
            resizeArr[i].style.zIndex = boxClassLenght;
            // resizeArr[i].style.display = "block";
        }
        //$(this).children(".title").show();
        $(this).children(".title").children(".buttons").css("display", "block");
    };
    dragsubwin.onmouseout = function () {
        var resizeArr = $(this).children(".resize");
        for (var i = 0; i < resizeArr.length; i++) {
            resizeArr[i].style.zIndex = "-1";
            // resizeArr[i].style.display = "none";
        }
        // $(this).children(".title").hide();
        $(this).children(".title").children(".buttons").css("display", "none");
    };
    // }
    dragsubwin.ondragenter = handle_enter_win;
    dragsubwin.ondragover = handle_over_win;
    dragsubwin.ondragleave = handle_leave_win;
    dragsubwin.ondrop = handle_drop_win;

    videoDivSourceD.innerHTML = "我是窗口" + boxClassLenght;

    //得到新建窗口的默认ID
    moveDownID = document.getElementById(dragsubwin.id).id;
    $("#" + moveDownID).css('border', "2px solid green").siblings('.dragwin').css('border', 'none');
    setWinText(x, y, w, h);
}

function setWinText(x, y, w, h) {
    $("#Window_WinX").val(x << 0);
    $("#Window_WinY").val(y << 0);
    $("#Window_WinW").val(w);
    $("#Window_WinH").val(h);
}