trtc-electron-sdk/liteav/MediaMixingDesigner/Movable.js

trtc electron sdk

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const logger_1 = __importDefault(require("../logger"));
class Movable {
    constructor(movable, container, options = {
        calcPositionOnly: false,
        canExceedContainer: false,
    }) {
        this.logPrefix = '[Movable]';
        this.movable = null;
        this.container = null;
        this.options = {
            calcPositionOnly: false,
            canExceedContainer: false
        };
        this.callbacksMap = new Map();
        this.originLeft = 0;
        this.originTop = 0;
        this.moveStartOfLeft = 0;
        this.moveStartOfTop = 0;
        this.movable = movable;
        this.container = container || document.body;
        this.options = {
            calcPositionOnly: !!options.calcPositionOnly || false,
            canExceedContainer: !!options.canExceedContainer || false
        };
        this.setStyle();
        this.onMouseDown = this.onMouseDown.bind(this);
        this.onMouseMove = this.onMouseMove.bind(this);
        this.onMouseUp = this.onMouseUp.bind(this);
        this.onMouseMove5px = this.onMouseMove5px.bind(this);
        this.onMouseUp5px = this.onMouseUp5px.bind(this);
        this.movable.addEventListener("mousedown", this.onMouseDown, false);
    }
    setStyle() {
        if (this.movable) {
            this.movable.style.position = "absolute";
            this.movable.style.cursor = 'move';
        }
        else {
            logger_1.default.error(`${this.logPrefix}setStyle 'movable' is null`);
        }
    }
    onMouseDown(event) {
        if (event.button !== 0) {
            return;
        }
        event.preventDefault(); // Avoid select text content.
        if (document.defaultView && this.movable) {
            const movableStyle = document.defaultView.getComputedStyle(this.movable);
            this.originLeft = window.parseInt(movableStyle.left);
            this.originTop = window.parseInt(movableStyle.top);
        }
        else {
            logger_1.default.error(`${this.logPrefix}onMouseDown 'movable' is null`);
        }
        this.moveStartOfLeft = event.screenX;
        this.moveStartOfTop = event.screenY;
        document.addEventListener('mousemove', this.onMouseMove5px, false);
        document.addEventListener('mouseup', this.onMouseUp5px, false);
    }
    onMouseMove5px(event) {
        const leftMovedDistance = event.screenX - (this.moveStartOfLeft || 0);
        const topMovedDistance = event.screenY - (this.moveStartOfTop || 0);
        if (Math.abs(leftMovedDistance) >= 5 || Math.abs(topMovedDistance) >= 5) {
            // 至少移动5像素，才开始真正的移动，避免鼠标点一下就立即移动
            document.removeEventListener("mousemove", this.onMouseMove5px, false);
            document.removeEventListener("mouseup", this.onMouseUp5px, false);
            document.addEventListener("mousemove", this.onMouseMove, false);
            document.addEventListener("mouseup", this.onMouseUp, false);
        }
        else {
            logger_1.default.debug(`${this.logPrefix}on Movable mouse move less than 5px`);
        }
    }
    onMouseUp5px() {
        document.removeEventListener("mousemove", this.onMouseMove5px, false);
        document.removeEventListener("mouseup", this.onMouseUp5px, false);
    }
    onMouseMove(event) {
        if (this.movable && this.container) {
            const leftMovedDistance = event.screenX - this.moveStartOfLeft;
            const topMovedDistance = event.screenY - this.moveStartOfTop;
            let left = this.originLeft + leftMovedDistance;
            let top = this.originTop + topMovedDistance;
            const movableWidth = this.movable.offsetWidth;
            const movableHeight = this.movable.offsetHeight;
            const containerWidth = this.container.offsetWidth;
            const containerHeight = this.container.offsetHeight;
            if (!this.options.canExceedContainer) {
                if (left < 0) {
                    left = 0;
                }
                else if (left > containerWidth - movableWidth) {
                    left = containerWidth - movableWidth;
                }
                if (top < 0) {
                    top = 0;
                }
                else if (top > containerHeight - movableHeight) {
                    top = containerHeight - movableHeight;
                }
            }
            if (!this.options.calcPositionOnly && this.movable) {
                this.movable.style.left = left + "px";
                this.movable.style.top = top + "px";
            }
            this.emit("move", left, top);
        }
        else {
            logger_1.default.error(`${this.logPrefix}onMouseMove error:No 'movable' and 'container'.`);
        }
    }
    onMouseUp() {
        document.removeEventListener("mousemove", this.onMouseMove, false);
        document.removeEventListener("mouseup", this.onMouseUp, false);
        this.originLeft = 0;
        this.originTop = 0;
        this.moveStartOfLeft = 0;
        this.moveStartOfTop = 0;
    }
    on(eventName, callback) {
        const callbacks = this.callbacksMap.get(eventName);
        if (callbacks) {
            callbacks.push(callback);
        }
        else {
            this.callbacksMap.set(eventName, [callback]);
        }
    }
    off(eventName, callback) {
        let callbacks = this.callbacksMap.get(eventName);
        if (callbacks) {
            callbacks = callbacks.filter((item) => item != callback);
            this.callbacksMap.set(eventName, callbacks);
        }
    }
    emit(eventName, ...arg) {
        const callbacks = this.callbacksMap.get(eventName);
        if (callbacks) {
            callbacks.forEach((callback) => {
                try {
                    callback.apply(null, arg);
                }
                catch (error) {
                    console.error("[Movable]emit error:", callback, error);
                }
            });
        }
    }
    destroy() {
        var _a;
        (_a = this.movable) === null || _a === void 0 ? void 0 : _a.removeEventListener("mousedown", this.onMouseDown, false);
        this.callbacksMap.clear();
        this.movable = null;
        this.container = null;
    }
}
exports.default = Movable;