"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const element_1 = require("../../../../../client/element");
class Resize extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._x = {};
        this._y = {};
        this._resize_x = {};
        this._resize_y = {};
        this._pointer_down_count = 0;
        this._pointer_down = {};
        this._pointer_down_direction = {};
        this._add_pointer_listener = (element, x, y, direction) => {
            const { api: { input: { pointer: { setPointerCapture }, }, }, } = this.$system;
            element.addEventListener('pointerdown', (event) => {
                const { clientX, clientY, pointerId } = event;
                this._resize.style.position = 'absolute';
                this._resize.style.width = `100%`;
                this._resize.style.height = `100%`;
                this._x[pointerId] = x;
                this._y[pointerId] = y;
                this._resize_x[pointerId] = clientX;
                this._resize_y[pointerId] = clientY;
                this._pointer_down_count++;
                this._pointer_down[pointerId] = true;
                this._pointer_down_direction[pointerId] = direction;
                const on_pointer_move = (event) => {
                    // console.log('Resize', 'on_pointer_move')
                    const { pointerId } = event;
                    if (this._pointer_down[pointerId]) {
                        const { clientX, clientY, pointerId } = event;
                        const dw = this._x[pointerId] * (clientX - this._resize_x[pointerId]);
                        const dh = this._y[pointerId] * (clientY - this._resize_y[pointerId]);
                        const dx = this._x[pointerId] * (dw / 2);
                        const dy = this._y[pointerId] * (dh / 2);
                        const direction = this._pointer_down_direction[pointerId];
                        this._resize_x[pointerId] = clientX;
                        this._resize_y[pointerId] = clientY;
                        this.dispatchEvent('resized', {
                            dx,
                            dy,
                            dw,
                            dh,
                            direction,
                            pointerId,
                        });
                    }
                };
                const on_pointer_up = (event) => {
                    // console.log('on_pointer_up')
                    const { pointerId } = event;
                    if (this._pointer_down[pointerId]) {
                        this._pointer_down_count--;
                        delete this._pointer_down[pointerId];
                        delete this._pointer_down_direction[pointerId];
                        if (this._pointer_down_count === 0) {
                            element.removeEventListener('pointermove', on_pointer_move);
                            element.removeEventListener('pointerup', on_pointer_up);
                            element.removeEventListener('pointercancel', on_pointer_up);
                            element.removeEventListener('pointerleave', on_pointer_up);
                            this.dispatchEvent('resizeend', {});
                            this._resize.style.position = 'initial';
                            this._resize.style.width = '0';
                            this._resize.style.height = '0';
                        }
                        releasePointerCapture();
                    }
                };
                if (this._pointer_down_count === 1) {
                    element.addEventListener('pointermove', on_pointer_move);
                    element.addEventListener('pointerup', on_pointer_up);
                    element.addEventListener('pointercancel', on_pointer_up);
                    element.addEventListener('pointerleave', on_pointer_up);
                }
                const releasePointerCapture = setPointerCapture(element, pointerId);
                this._dispatch_resize_start(pointerId, direction);
            });
        };
        this._dispatch_resize_start = (pointerId, direction) => {
            this.dispatchEvent('resizestart', {
                dx: 0,
                dy: 0,
                dw: 0,
                dh: 0,
                direction,
                pointerId,
            });
        };
        const { disabled, l = 15 } = $props;
        const resize = this.$system.api.document.createElement('div');
        resize.classList.add('resize');
        resize.style.top = '0';
        resize.style.position = 'initial';
        // resize.style.width = `100%`
        // resize.style.height = `100%`
        // resize.style.background = 'none'
        // resize.style.opacity = '0.5'
        resize.style.pointerEvents = disabled ? 'none' : 'all';
        const top = this.$system.api.document.createElement('div');
        top.classList.add('resize-top');
        top.style.position = 'absolute';
        top.style.width = '100%';
        top.style.height = `${l}px`;
        top.style.top = `${-l}px`;
        top.style.left = '0';
        top.style.cursor = 'n-resize';
        // top.style.backgroundColor = GREEN
        // top.style.opacity = '0.5'
        this._add_pointer_listener(top, 0, -1, 'n');
        resize.appendChild(top);
        const right = this.$system.api.document.createElement('div');
        right.classList.add('resize-right');
        right.style.position = 'absolute';
        right.style.width = `${l}px`;
        right.style.height = '100%';
        right.style.top = '0';
        right.style.right = `${-l}px`;
        right.style.cursor = 'e-resize';
        // right.style.backgroundColor = GREEN
        // right.style.opacity = '0.5'
        this._add_pointer_listener(right, 1, 0, 'e');
        resize.appendChild(right);
        const bottom = this.$system.api.document.createElement('div');
        bottom.classList.add('resize-bottom');
        bottom.style.position = 'absolute';
        bottom.style.width = '100%';
        bottom.style.height = `${l}px`;
        bottom.style.bottom = `${-l}px`;
        bottom.style.left = '0';
        bottom.style.cursor = 's-resize';
        // bottom.style.backgroundColor = GREEN
        // bottom.style.opacity = '0.5'
        this._add_pointer_listener(bottom, 0, 1, 's');
        resize.appendChild(bottom);
        const left = this.$system.api.document.createElement('div');
        left.classList.add('resize-left');
        left.style.position = 'absolute';
        left.style.width = `${l}px`;
        left.style.height = '100%';
        left.style.top = '0';
        left.style.left = `${-l}px`;
        left.style.cursor = 'w-resize';
        // left.style.backgroundColor = GREEN
        // left.style.opacity = '0.5'
        this._add_pointer_listener(left, -1, 0, 'w');
        resize.appendChild(left);
        const top_right = this.$system.api.document.createElement('div');
        top_right.classList.add('resize-top_right');
        top_right.style.position = 'absolute';
        top_right.style.width = `${l}px`;
        top_right.style.height = `${l}px`;
        top_right.style.top = `${-l}px`;
        top_right.style.right = `${-l}px`;
        top_right.style.cursor = 'ne-resize';
        // top_right.style.backgroundColor = BLUE
        // top_right.style.opacity = '0.5'
        this._add_pointer_listener(top_right, 1, -1, 'ne');
        resize.appendChild(top_right);
        const right_bottom = this.$system.api.document.createElement('div');
        right_bottom.classList.add('resize-right_bottom');
        right_bottom.style.position = 'absolute';
        right_bottom.style.width = `${l}px`;
        right_bottom.style.height = `${l}px`;
        right_bottom.style.right = `${-l}px`;
        right_bottom.style.bottom = `${-l}px`;
        right_bottom.style.cursor = 'se-resize';
        // right_bottom.style.backgroundColor = BLUE
        // right_bottom.style.opacity = '0.5'
        this._add_pointer_listener(right_bottom, 1, 1, 'se');
        resize.appendChild(right_bottom);
        const bottom_left = this.$system.api.document.createElement('div');
        bottom_left.classList.add('resize-bottom_left');
        bottom_left.style.position = 'absolute';
        bottom_left.style.width = `${l}px`;
        bottom_left.style.height = `${l}px`;
        bottom_left.style.bottom = `${-l}px`;
        bottom_left.style.left = `${-l}px`;
        bottom_left.style.cursor = 'sw-resize';
        // bottom_left.style.backgroundColor = BLUE
        // bottom_left.style.opacity = '0.5'
        this._add_pointer_listener(bottom_left, -1, 1, 'sw');
        resize.appendChild(bottom_left);
        const left_top = this.$system.api.document.createElement('div');
        left_top.classList.add('resize-left_top');
        left_top.style.position = 'absolute';
        left_top.style.width = `${l}px`;
        left_top.style.height = `${l}px`;
        left_top.style.left = `${-l}px`;
        left_top.style.top = `${-l}px`;
        left_top.style.cursor = 'nw-resize';
        // left_top.style.backgroundColor = BLUE
        // left_top.style.opacity = '0.5'
        this._add_pointer_listener(left_top, -1, -1, 'nw');
        resize.appendChild(left_top);
        this._resize = resize;
        this.$element = resize;
    }
    onPropChanged(name, current) {
        // console.log('Resize', 'onPropChanged', name, current)
        if (name === 'disabled') {
            if (current === true) {
                this._resize.style.pointerEvents = 'none';
            }
            else if (current === false) {
                this._resize.style.pointerEvents = 'inherit';
            }
        }
    }
}
exports.default = Resize;
//# sourceMappingURL=Component.js.map