resize-handle.ts

import { BaseElement } from "../../../shared/_base";
import { CodeEditor } from "../code-editor/code-editor";
import './resize-handle.less';

export class ResizeHandle extends BaseElement {


    onInit(): void {
        this.setDragEvents();
    }

    setDragEvents() {
        this.addEventListener("mousedown", (evt: MouseEvent) => {
            evt.preventDefault();
            evt.stopPropagation();
            this.setOverlay({
                x: evt.pageX,
                y: evt.pageY
            });

        });

        this.addEventListener("touchstart", (evt: TouchEvent) => {
            evt.preventDefault();
            evt.stopPropagation();
            this.setOverlay({
                x: evt.touches[0].pageX,
                y: evt.touches[0].pageY
            });
        });
    }

    setSize(x: number, y: number) {
        var t = this.getTarget();

        if (t) {
            if (this.directionIsHorizontal()) {
                t.style.minWidth = x + "px";
                t.style.maxWidth = x + "px";
            }
            else {
                t.style.minHeight = y + "px";
                t.style.maxHeight = y + "px";
            }
        }
    }

    getTarget() {
        var targetAttr = this.getAttribute("target");
        if (targetAttr) {
            var target = <HTMLElement>document.querySelector(targetAttr);

            if (target) {
                return target;
            }
        }

        return this.parentElement;
    }

    directionIsHorizontal() {
        var attr = this.getAttribute("dir");

        if (attr) {
            if (attr.toLowerCase().indexOf('v') === 0) {
                return false;
            }
        }

        return true;
    }

    getIframe() {
        return <HTMLIFrameElement>this.find("iframe");
    }

    setOverlay(start: { x: number, y: number }) {
        var overlay = document.createElement("div");
        overlay.setAttribute("id", "fixed-resize-overlay");

        var targetStartSize = { width: 0, height: 0 };

        var target = this.getTarget();
        if (target) {
            var bounds = target.getBoundingClientRect();

            targetStartSize = {
                width: bounds.width,
                height: bounds.height
            };
        }

        overlay.addEventListener("mousemove", (evt: MouseEvent) => {
            this.getIframe().style.pointerEvents = "none";
            this.classList.add("active");
            this.setSize(targetStartSize.width + (evt.pageX - start.x), targetStartSize.height + (evt.pageY - start.y));
        });

        overlay.addEventListener("mouseup", (evt: MouseEvent) => {
            this.getIframe().style.pointerEvents = "all";
            this.classList.remove("active");
            this.removeOverlay();
        });

        overlay.addEventListener("touchmove", (evt: TouchEvent) => {
            this.getIframe().style.pointerEvents = "none";
            this.classList.add("active");
            this.setSize(targetStartSize.width + (start.x - evt.touches[0].pageX), targetStartSize.height + (start.y - evt.touches[0].pageY));
        });

        overlay.addEventListener("touchend", (evt: TouchEvent) => {
            this.getIframe().style.pointerEvents = "all";
            this.classList.remove("active");
            this.removeOverlay();
        });

        document.body.classList.remove("animate");
        document.body.appendChild(overlay);
    }

    removeOverlay() {
        var overlay = document.getElementById("fixed-resize-overlay");

        if (overlay) {
            overlay.parentElement?.removeChild(overlay);
        }
        
        document.body.classList.add("animate");
    }
}