yjxp-web/src/utils/index.ts

/**
 * This is just a simple version of deep copy
 * Has a lot of edge cases bug
 * If you want to use a perfect deep copy, use lodash's _.cloneDeep
 * @param {Object} source
 * @returns {Object}
 */
export const deepClone = (source: any) => {
    if (!source && typeof source !== 'object') {
        throw new Error('error arguments', 'deepClone' as any);
    }
    const targetObj: any = source.constructor === Array ? [] : {};
    Object.keys(source).forEach((keys) => {
        if (source[keys] && typeof source[keys] === 'object') {
            targetObj[keys] = deepClone(source[keys]);
        } else {
            targetObj[keys] = source[keys];
        }
    });
    return targetObj;
};

export const getRgba = (rgbaString) => {
    // 使用正则表达式匹配rgba的各个部分
    const match = rgbaString.match(/^rgba\(\s*(\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\s*\)$/);
    if (!match) {
        return rgbaString;
    }

    // 提取出红、绿、蓝和原始透明度
    const [r, g, b, opacity] = match.slice(1).map(Number);

    // 返回新的RGBA字符串，其中透明度被设置为1
    return {
        color: 'rgb(' + r + ',' + g + ',' + b + ')',
        opacity: opacity
    }
}
// 通用table样式
const getTableRowClass = ({rowIndex}) => {
    return rowIndex % 2 === 0 ? '' : 'common-table-tr';
}

export const hexToRgba = (hex, alpha = 1) => {
    if (!hex) return '';
    // 确保输入是一个有效的十六进制颜色值，并以 # 开头
    hex = hex.replace(/^#/, '');
    // 如果十六进制颜色值是3位的简写形式（如 #f80），则扩展为6位
    if (hex.length === 3) {
        hex = hex
            .split('')
            .map((x) => x + x)
            .join('');
    }
    // 如果十六进制颜色值的长度不是6位，则抛出错误
    if (hex.length !== 6) {
        return hex;
    }
    // 解析红、绿、蓝分量
    const bigint = parseInt(hex, 16);
    const r = (bigint >> 16) & 255;
    const g = (bigint >> 8) & 255;
    const b = bigint & 255;
    // 返回 RGBA 字符串
    return `rgba(${r}, ${g}, ${b}, ${alpha || 1})`;
};

export const rgbToRgba = (rgbString, alpha) => {
    if (!rgbString) return '';
    // 去掉字符串两端的空格
    rgbString = rgbString.trim();

    // 使用正则表达式匹配 rgb 格式的数字部分
    const rgbMatch = rgbString.match(/\d+/g);

    // 如果没有匹配到 rgb 格式，返回 null
    if (!rgbMatch || rgbMatch.length !== 3) {
        return null;
    }

    // 将匹配到的数字部分转换为整数
    const r = parseInt(rgbMatch[0], 10);
    const g = parseInt(rgbMatch[1], 10);
    const b = parseInt(rgbMatch[2], 10);

    // 拼接 rgba 字符串
    const rgbaString = `rgba(${r}, ${g}, ${b}, ${alpha})`;

    return rgbaString;
};

export const initDrag = (el, scaleX = 1, scaleY = 1) => {
    if (!el) return;
    el.style.position = 'fixed';
    el.style.cursor = 'move';

    const dragDom = el;

    let disX = 0; // 鼠标按下时，鼠标与拖拽元素的左边距
    let disY = 0; // 鼠标按下时，鼠标与拖拽元素的上边距

    dragDom.onmousedown = (e) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        disX = e.clientX / scaleX - dragDom.offsetLeft;
        disY = e.clientY / scaleY - dragDom.offsetTop;

        // 鼠标移动事件
        document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离
            const l = e.clientX / scaleX - disX;
            const t = e.clientY / scaleY - disY;
            // 移动当前元素
            dragDom.style.left = `${l + 'px'}`;
            dragDom.style.top = `${t + 'px'}`;
        };

        // 鼠标松开事件
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    };
};