wsemi/src/domGetBoudRectRefSelf.mjs

A support package for web developer.

import isNumber from 'lodash/isNumber'
import iseobj from './iseobj.mjs'
import isEle from './isEle.mjs'
import domGetBoudRect from './domGetBoudRect.mjs'


/**
 * 前端由事件clientX與clientY座標，計算於DOM元素內的左上角座標x與y，以及該元素的寬度w與高度h
 *
 * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/domGetBoudRectRefSelf.test.mjs Github}
 * @memberOf wsemi
 * @param {Object} p 輸入座標點物件，主要需有DOM事件(event)的clientX與clientY，此為相對可視區域左上角的座標，單位皆為px
 * @param {HTMLElement} ele 輸入DOM元素
 * @returns {Object} 回傳物件，內含x、y、寬度w、高度h，單位皆為px
 * @example
 * need test in browser
 *
 * let r = domGetBoudRectRefSelf(document.querySelector('#id'))
 * console.log(r)
 * // => {
 *   x:...,
 *   y:...,
 *   w:...,
 *   h:...,
 * }
 *
 */
function domGetBoudRectRefSelf(p, ele) {

    //check
    if (!iseobj(p)) {
        return null
    }
    if (!isNumber(p.clientX) || !isNumber(p.clientY)) {
        return null
    }
    if (!isEle(ele)) {
        return null
    }

    //domGetBoudRect
    let rt = domGetBoudRect(ele)
    if (!rt) {
        return null
    }

    let x = p.clientX - rt.left //事件的clientX,clientY是基於瀏覽器可視區域左上角的座標
    let y = p.clientY - rt.top
    let w = ele.offsetWidth
    let h = ele.offsetHeight

    return {
        x, y, w, h
    }
}


export default domGetBoudRectRefSelf