Source: control2/recording/Overlay.js

(function() {
    const OVERLAY_MODES = Help4.control2.recording.OVERLAY_MODES = {
        capture: 'capture',
        panelCover: 'panelCover'  // XRAY-4118
    };

    /**
     * @typedef {Help4.control2.Control.Params} Help4.control2.recording.Overlay.Params
     * @property {string} [mode = 'capture'] - overlay mode: "capture" or "panelCover"
     */

    /**
     * Creates and handles the overlay to allow hotspot assignment.
     * @augments Help4.control2.Control
     * @property {string} mode - overlay mode: "capture" or "panelCover"
     */
    Help4.control2.recording.Overlay = class extends Help4.control2.Control {
        /**
         * @override
         * @param {Help4.control2.recording.Overlay.Params} [params]
         */
        constructor(params) {
            const onEvent = event => {
                if (!(event = Help4.Event.normalize(event))) return;
                this._fireEvent({type: event.type, data: {x: event.clientX, y: event.clientY}});
            };

            // XRAY-2079: if popups are open they might close on outside click
            // prevent that from happening by cancelling events on myself
            const cancelEvent = event => Help4.Event.cancel(event);

            const onClick = event => {
                // Chrome: middle mouse button only sends mouseup and no click event
                // IE: middle mouse button sends mouseup and click events
                const normEv = Help4.Event.normalize(event);
                if (normEv && normEv.button !== 2) this._onEvent(event);  // prevent double firing for IE
                return this._cancelEvent(event);
            };

            const onMouseUp = event => {
                // Chrome: middle mouse button only sends mouseup and no click event
                // IE: middle mouse button sends mouseup and click events

                // listener for Chrome
                const normEv = Help4.Event.normalize(event);
                if (normEv && normEv.button === 2) this._fireEvent({type: 'middleclick'});
                return this._cancelEvent(event);
            };

            const T = Help4.jscore.ControlBase.TYPES;
            super(params, {
                params: {
                    mode: {type: T.string, init: OVERLAY_MODES.capture}
                },
                statics: {
                    _onEvent:     {init: onEvent, destroy: false},
                    _cancelEvent: {init: cancelEvent, destroy: false},
                    _onClick:     {init: onClick, destroy: false},
                    _onMouseUp:   {init: onMouseUp, destroy: false}
                },
                config: {
                    css: 'control-capture'
                }
            });
        }

        /**
         * @override
         */
        _onBeforeDestroy() {
            const d = this.getDom();
            if (d && this.mode === OVERLAY_MODES.capture) {
                d.onmousemove = null;
                d.onmouseover = null;
                d.onmouseout = null;
                d.onclick = null;
                d.ondblclick = null;
                d.onmousedown = null;
                d.onmouseup = null;
            }
        }

        /**
         * @override
         * @param {HTMLElement} dom - control DOM
         */
        _onDomCreated(dom) {
            if (this.mode === OVERLAY_MODES.capture) {
                dom.onmousemove = this._onEvent;
                dom.onmouseover = this._onEvent;
                dom.onmouseout = this._onEvent;
                dom.onclick = this._onClick;
                dom.ondblclick = this._cancelEvent;
                dom.onmousedown = this._cancelEvent;
                dom.onmouseup = this._onMouseUp;
            } else {
                // carousel not needed when debugging with Help4.API.record()
                const carousel = Help4.getController().getHandler()?.getCarousel();
                const {left, top, width, height} = carousel
                    ? carousel.getDom().getBoundingClientRect()
                    : new DOMRect();

                this.addCss('panelCover');

                Help4.extendObject(dom.style, {
                    left: left + 'px',
                    top: top + 'px',
                    width: width + 'px',
                    height: height + 'px'
                });
            }
        }
    }
})();