assets/html/blockAreaSetting.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draggable Rectangles</title>
    <style>
        body {
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            min-height: 100vh; /* Full viewport height */
            margin: 0; /* Remove default margin */
            background-color: #f0f0f0;
        }


        #canvas {
            position: relative;
            background-color: #e0e0e0;
            overflow: hidden;
            width: 80%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .draggable {
            position: absolute;
            background-color: rgba(0, 0, 255, 0.5);
            cursor: move;
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
        }

        .resizer {
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
            cursor: pointer;
        }

        .resizer.tl {
            left: -10px;
            top: -10px;
            cursor: nwse-resize;
        }

        .resizer.tr {
            right: -10px;
            top: -10px;
            cursor: nesw-resize;
        }

        .resizer.bl {
            left: -10px;
            bottom: -10px;
            cursor: nesw-resize;
        }

        .resizer.br {
            right: -10px;
            bottom: -10px;
            cursor: nwse-resize;
        }

        .floating-button {
            position: absolute;
            padding: 5px 10px;
            background-color: rgba(255, 0, 0, 0.97);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            user-select: none; /* prevent text selection */
        }

        #buttonContainer {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        button {
            cursor: pointer;
            user-select: none; /* prevent text selection */
            margin: 5px;
        }
    </style>
</head>
<body>
<div id="canvas">
    <div id="buttonContainer">
        <button id="activeButton">Current: Disabled</button>
        <button id="addButton">Add Area</button>
        <button id="deleteButton">Delete Area</button>
        <button id="resetButton">Reset Default</button>
        <button id="saveButton">Save Changes</button>
    </div>
</div>
<script>


    let config = {
        activated: false,
        screen: {
            height: 1080,
            width: 2200
        },
        rects: [
            {top: 0, bottom: 0.1, left: 0.2, right: 0.8},
            {top: 0.9, bottom: 1, left: 0.2, right: 0.8},
            {top: 0.2, bottom: 0.8, left: 0, right: 0.1},
            {top: 0.2, bottom: 0.8, left: 0.9, right: 1}
        ]
    };

    let defaultConfig = {
        rects: [
            {top: 0, bottom: 0.1, left: 0.2, right: 0.8},
            {top: 0.9, bottom: 1, left: 0.2, right: 0.8},
            {top: 0.2, bottom: 0.8, left: 0, right: 0.1},
            {top: 0.2, bottom: 0.8, left: 0.9, right: 1}
        ]
    };

    let isBrowser = navigator.userAgent.includes('Chrome/');

    const eventMap = isBrowser ?
        {
            start: "mousedown",
            move: 'mousemove',
            end: 'mouseup',
            click: 'click'
        } : {
            start: "touchstart",
            move: 'touchmove',
            end: 'touchend',
            click: 'touchend',
        };
    const canvas = document.getElementById('canvas');

    let canvasHeight = null;
    let canvasWidth = null;
    let status = {
        deleteMode: false,
        rectElems: []
    };
    document.addEventListener("DOMContentLoaded", function () {
        Android.postMessage(`{"message":'ok'}`);
    });

    function getClientPosition(event) {
        if (!event.touches) {
            return [event.clientX, event.clientY];
        } else {
            return [
                (event.touches[0].clientX),
                (event.touches[0].clientY)
            ];

        }
    }


    function loadConfig(importConfig) {
        importConfig = JSON.parse(importConfig);
        if (!importConfig.rects) {
            importConfig.rects = defaultConfig.rects;
        }
        config = importConfig;
        canvas.style.aspectRatio = config.screen.width / config.screen.height;
        canvasHeight = canvas.clientHeight;
        canvasWidth = canvas.clientWidth;

        config.rects.forEach(createRectangle);
        registerButton();
    }

    function saveConfig() {
        config.rects = [];
        for (let rectElem of status.rectElems) {
            if (!rectElem.isConnected) continue;
            const top = parseInt(rectElem.style.top, 10) / canvasHeight;
            const left = parseInt(rectElem.style.left, 10) / canvasWidth;
            const elemWidth = parseInt(rectElem.style.width, 10) / canvasWidth;
            const elemHeight = parseInt(rectElem.style.height, 10) / canvasHeight;
            const bottom = top + elemHeight;
            const right = left + elemWidth;
            config.rects.push({top: top, bottom: bottom, left: left, right: right});
        }
        console.log(config);
        Android.postMessage(JSON.stringify(config));
        return config;
    }


    function createFloatingButton(target, text, callback) {
        const buttonDiv = document.createElement('div');
        buttonDiv.className = 'floating-button';
        buttonDiv.textContent = text;
        target.appendChild(buttonDiv);

        buttonDiv.addEventListener(eventMap.end, handleInteraction);

        function handleInteraction(event) {
            event.stopPropagation();
            callback();
            buttonDiv.remove();
            cleanUp();
        }

        function cleanUp() {
            document.removeEventListener(eventMap.end, handleOutsideClick);
        }

        document.addEventListener(eventMap.end, handleOutsideClick);
        let isFirst = true;

        function handleOutsideClick(event) {
            if (isFirst) {
                isFirst = false;
                return;
            }
            if (event.target !== buttonDiv && event.target !== target) {
                buttonDiv.remove();
                cleanUp();
            }
        }
    }


    function registerButton() {
        let activeButton = document.getElementById('activeButton');
        activeButton.innerText = config.activated ? "Current: Enabled" : "Current: Disabled";
        activeButton.addEventListener(eventMap.click, function () {
            config.activated = !config.activated;
            activeButton.innerText = config.activated ? "Current: Enabled" : "Current: Disabled";
        });

        let addButton = document.getElementById("addButton");
        addButton.addEventListener(eventMap.click, function () {
            createRectangle({top: 0.2, bottom: 0.8, left: 0.25, right: 0.4});
        });

        let deleteButton = document.getElementById("deleteButton");
        deleteButton.addEventListener(eventMap.click, function () {
            status.deleteMode = !status.deleteMode;
            deleteButton.innerText = status.deleteMode ? "Delete: On" : "Delete Area";
        });

        let resetButton = document.getElementById('resetButton');
        resetButton.addEventListener(eventMap.click, function () {
            status.rectElems.forEach(x => x.remove());
            status.rectElems = [];
            config.rects = defaultConfig.rects;
            config.rects.forEach(createRectangle);
        });

        let saveButtonTextTimeout = null;
        let saveButton = document.getElementById('saveButton');
        saveButton.addEventListener(eventMap.click, function () {
            saveConfig();
            saveButton.innerText = "Changes Saved!";

            if (saveButtonTextTimeout !== null) {
                clearTimeout(saveButtonTextTimeout);
            }

            saveButtonTextTimeout = setTimeout(() => {
                saveButton.innerText = "Save Changes";
            }, 2000);
        });
    }


    function createRectangle(rect) {
        function addResizers(div) {
            const positions = ['tl', 'tr', 'bl', 'br'];
            positions.forEach(pos => {
                const resizer = document.createElement('div');
                resizer.className = 'resizer ' + pos;
                div.appendChild(resizer);
                setupResize(div, resizer, pos);
            });
        }

        function isPointInElement(elem, clientX, clientY) {
            const rect = elem.getBoundingClientRect();
            return (
                clientX >= rect.left &&
                clientX <= rect.right &&
                clientY >= rect.top &&
                clientY <= rect.bottom
            );
        }


        function setStyle(div, top, left, width, height,) {
             if (top === undefined) {
                top = parseInt(div.style.top.slice(0, -2));
            }
            if (left === undefined) {
                left = parseInt(div.style.left.slice(0, -2));
            }
            if (width === undefined) {
                width = parseInt(div.style.width.slice(0, -2));
            }
            if (height === undefined) {
                height = parseInt(div.style.height.slice(0, -2));
            }

            //Limit minimum width and height
            if (width < 5) width = 5;
            if (height < 5) height = 5;


            //Avoid the rect out of bound
            if (left < 0) {
                left = 0;
            }
            if (top < 0) {
                top = 0;
            }
            if (left + width > canvasWidth) left = canvasWidth - width;
            if (top + height > canvasHeight) top = canvasHeight - height;

            div.style.width = width + 'px';
            div.style.height = height + 'px';
            div.style.top = top + 'px';
            div.style.left = left + 'px';
        }

        function setupResize(div, resizer, pos) {
            resizer.addEventListener(eventMap.start, function (event) {
                event.stopPropagation();
                let [initialX, initialY] = getClientPosition(event);
                const initialWidth = parseInt(getComputedStyle(div, null).getPropertyValue('width'), 10);
                const initialHeight = parseInt(getComputedStyle(div, null).getPropertyValue('height'), 10);
                const initialTop = div.offsetTop;
                const initialLeft = div.offsetLeft;

                document.addEventListener(eventMap.move, onMouseMove);
                document.addEventListener(eventMap.end, onMouseUp);

                function onMouseMove(event) {
                    const [x, y] = getClientPosition(event);
                    if (!isPointInElement(canvas, x, y)) {
                        return;
                    }
                    const dx = x - initialX;
                    const dy = y - initialY;
                    let width, height, top, left;
                    switch (pos) {
                        case 'tl':
                            width = initialWidth - dx;
                            height = initialHeight - dy;
                            top = initialTop + dy;
                            left = initialLeft + dx;
                            break;
                        case 'tr':
                            width = initialWidth + dx;
                            height = initialHeight - dy;
                            top = initialTop + dy;
                            break;
                        case 'bl':
                            width = initialWidth - dx;
                            height = initialHeight + dy;
                            left = initialLeft + dx;
                            break;
                        case 'br':
                            width = initialWidth + dx;
                            height = initialHeight + dy;
                            break;
                    }
                    //Prevent move the other edge while dragging top or left
                    if (top > initialTop + initialHeight) top = initialTop + initialHeight;
                    if (left > initialLeft + initialWidth) left = initialLeft + initialWidth;

                    setStyle(div, top, left, width, height);
                }

                function onMouseUp(event) {

                    document.removeEventListener(eventMap.move, onMouseMove);
                    document.removeEventListener(eventMap.end, onMouseUp);
                }
            });
        }

        function registerClickListener(el) {

            el.addEventListener(eventMap.end, function (event) {
                if (status.deleteMode) {
                    createFloatingButton(el, "Delete this area?", function () {
                        el.remove();
                    });
                }
            });
            el.addEventListener(eventMap.start, function (event) {
                if (status.deleteMode) {
                    return;
                }
                console.log(event.type)

                const [startX, startY] = getClientPosition(event);
                const startPosTop = el.offsetTop;
                const startPosLeft = el.offsetLeft;

                const onMouseMove = function (event) {
                console.log(event.type)

                    const [x, y] = getClientPosition(event);
                    const dx = x - startX;
                    const dy = y - startY;

                    const top = startPosTop + dy;
                    const left = startPosLeft + dx;
                    console.log(top,left)
                    setStyle(el, top, left);

                };

                const onMouseUp = function () {
                console.log(event.type)

                    document.removeEventListener(eventMap.move, onMouseMove);
                    document.removeEventListener(eventMap.end, onMouseUp);
                };

                document.addEventListener(eventMap.move, onMouseMove);
                document.addEventListener(eventMap.end, onMouseUp);
            });
        }

        const div = document.createElement('div');
        div.className = 'draggable';
        setStyle(div, rect.top * canvasHeight, rect.left * canvasWidth,
            (rect.right - rect.left) * canvasWidth, (rect.bottom - rect.top) * canvasHeight);
        canvas.appendChild(div);
        status.rectElems.push(div)
        registerClickListener(div);
        addResizers(div);
    }


</script>
</body>
</html>