TypeScript dom.getRect函數代碼示例

export function within(elem: HTMLElement, container: HTMLElement | Document | dom.Rect, padding = 0) {
    container = (container as HTMLElement | Document).nodeType ? dom.getRect(container as HTMLElement | Document) : container as dom.Rect;
    const rect = dom.getRect(elem);
    const deltaY = rect.y - container.y;
    const deltaX = rect.x - container.x;
    return (deltaY < padding ? deltaY + rect.height > padding : deltaY < container.height) && (deltaX < padding ? deltaX + rect.width > padding : deltaX < container.width);
}

export function isScrollIntoView(elem: HTMLElement | Document, scrollable: HTMLElement | Document = scrollParent(elem), padding = 0) {
    const container = getRect(scrollable);
    const rect = getRect(elem);
    const deltaY = rect.y - container.y;
    const deltaX = rect.x - container.x;
    return (deltaY < padding ? deltaY + rect.height > padding : deltaY < container.height) && (deltaX < padding ? deltaX + rect.width > padding : deltaX < container.width);
}

 /**
  * 限製隻能在指定區域內拖動。
  * @param container 限製的區域或元素。
  * @param padding 容器的內邊距。
  */
 limit(container: Document | HTMLElement | Rect, padding = 0) {
     container = (container as Document | HTMLElement).nodeType ? getRect(container as Document | HTMLElement) : container as Rect;
     this.elem.style.top = this.endClientY + "px";
     this.elem.style.left = this.endClientX + "px";
     const currentRect = getRect(this.elem);
     let delta: number;
     if ((delta = currentRect.x - container.x - padding) <= 0 || (delta = currentRect.x + currentRect.width - container.x - container.width + padding) >= 0) {
         this.endClientX -= delta;
     }
     if ((delta = currentRect.y - container.y - padding) <= 0 || (delta = currentRect.y + currentRect.height - container.y - container.height + padding) >= 0) {
         this.endClientY -= delta;
     }
 }

    /**
     * 使當前元素吸附於目標位置。
     * @param target 吸附的目標區域或元素。
     * @param padding 容器的內邊距。
     * @param distance 吸附的最小距離，當距離小於這個值後產生吸附效果。
     * @param position 吸附的位置。
     * @return 如果未吸附成功則返回 0，如果水平吸附成功則返回 1，如果垂直吸附成功則返回 2，如果都吸附成功則返回 3。
     */
    snap(target: Document | HTMLElement | Rect, padding = 0, distance = 15, position: "both" | "inside" | "outside" = "both") {
        target = (target as Document | HTMLElement).nodeType ? getRect(target as Document | HTMLElement) : target as Rect;
        const inside = position !== "outside";
        const outside = position !== "inside";

        this.elem.style.top = this.endClientY + "px";
        this.elem.style.left = this.endClientX + "px";
        const rect = getRect(this.elem);

        let result = 0;

        let deltaX = distance;
        if (inside) {
            deltaX = target.x + padding - rect.x;
            if (Math.abs(deltaX) >= distance) {
                deltaX = target.x + target.width - padding - rect.x - rect.width;
            }
        }
        if (Math.abs(deltaX) >= distance && outside) {
            deltaX = target.x + padding - rect.x - rect.width;
            if (Math.abs(deltaX) >= distance) {
                deltaX = target.x + target.width - padding - rect.x;
            }
        }
        if (Math.abs(deltaX) < distance) {
            this.endClientX += deltaX;
            result += 1;
        }

        let deltaY = distance;
        if (inside) {
            deltaY = target.y + padding - rect.y;
            if (Math.abs(deltaY) >= distance) {
                deltaY = target.y + target.height - padding - rect.y - rect.height;
            }
        }
        if (Math.abs(deltaY) >= distance && outside) {
            deltaY = target.y + padding - rect.y - rect.height;
            if (Math.abs(deltaY) >= distance) {
                deltaY = target.y + target.height - padding - rect.y;
            }
        }
        if (Math.abs(deltaY) < distance) {
            this.endClientY += deltaY;
            result += 2;
        }

        return result;
    }

export function scrollIntoViewIfNeeded(elem: HTMLElement | Document, scrollable: HTMLElement | Document = scrollParent(elem), duration?: number, padding = 0, offset = 0, callback?: (value: Point) => void) {
    const container = getRect(scrollable);
    const rect = getRect(elem);
    const deltaY = rect.y - container.y;
    const deltaX = rect.x - container.x;
    const value = getScroll(scrollable);
    if (deltaY < padding) {
        value.y += deltaY - offset;
    } else if (deltaY + rect.height + padding > container.height) {
        value.y += deltaY - container.height + rect.height + offset;
    } else {
        delete value.y;
    }
    if (deltaX < padding) {
        value.x += deltaX - offset;
    } else if (deltaX + rect.width + padding > container.width) {
        value.x += deltaX - container.width + rect.width + offset;
    } else {
        delete value.x;
    }
    scrollTo(scrollable, value, duration, callback);
}

export function scrollIntoView(elem: HTMLElement | Document, position?: ScrollLogicalPosition, scrollable: HTMLElement | Document = scrollParent(elem), duration?: number, offset = 0, callback?: (value: Point) => void) {
    const container = getRect(scrollable);
    const rect = getRect(elem);
    const deltaY = rect.y - container.y;
    const deltaX = rect.x - container.x;
    const value = getScroll(scrollable);
    if (!position || position === "start" || position === "nearest" && deltaY <= (container.height - rect.height) / 2) {
        value.y += deltaY - offset;
    } else {
        value.y += deltaY - container.height + rect.height + offset;
        if (position === "center") {
            value.y += (container.height - rect.height) / 2;
        }
    }
    if (!position || position === "start" || position === "nearest" && deltaX <= (container.width - rect.width) / 2) {
        value.x -= -deltaX + offset;
    } else {
        value.x -= -deltaX + container.width - rect.width - offset;
        if (position === "center") {
            value.x += (container.width - rect.width) / 2;
        }
    }
    scrollTo(scrollable, value, duration, callback);
}

/**
 * 將元素對齊到其它節點或區域。
 * @param elem 要定位的元素。
 * @param target 對齊的目標節點或區域。
 * @param align 對齊的位置。
 * 位置使用格式為“xx-yy”的字符串表示。
 *
 * 其中 xx 表示水平方向的位置，可取以下值之一：
 * - ll: 對齊到 target 左邊框的左側。
 * - lr: 對齊到 target 左邊框的右側。
 * - cc: 對齊到 target 水平居中位置。
 * - rl: 對齊到 target 右邊框的左側。
 * - rr: 對齊到 target 右邊框的右側。
 *
 * 其中 yy 表示垂直方向的位置，可取以下值之一：
 * - tt: 對齊到 target 上邊框的上側。
 * - tb: 對齊到 target 上邊框的下側。
 * - cc: 對齊到 target 垂直居中位置。
 * - bt: 對齊到 target 下邊框的上側。
 * - bb: 對齊到 target 下邊框的下側。
 *
 * 對於常見的位置，也可以直接使用下圖中的字符串表示：
 * ```
 * |        topLeft   top   topRight
 * |           ┌───────────────┐
 * |   leftTop │               │ rightTop
 * |           │               │
 * |      left │     center    │ right
 * |           │               │
 * |leftBottom │               │ rightBottom
 * |           └───────────────┘
 * |     bottomLeft bottom bottomRight
 * ```
 * @param margin 元素的外邊距。
 * @param container 容器節點或區域，定位超出容器後會自動調整。如果為 null 則不自動調整位置。
 * @param containerPadding 容器的內邊距。
 * @param offset 定位後的額外偏移距離。如果小於 1，則表示相對元素大小的百分比。
 * @param resize 如果容器比元素小，是否允許更改元素大小。
 * @return 返回定位結果。
 * @example pin(document.getElementById("pin_popover"), document.getElementById("pin_target"))
 */
export default function pin(elem: HTMLElement, target: Document | HTMLElement | Rect, align: PinAlign = "bottomLeft", margin = 0, container: Document | HTMLElement | Rect | null = scrollParent(elem), containerPadding = 10, offset = 0, resize = /^(?:auto|scroll)$/.test(getStyle(elem, "overflow"))) {

    // 如果上一次定位更新了大小則先恢複默認大小。
    if (resize !== false) {
        const style = elem.style;
        if ((style as any).__width__ != null) {
            style.width = (style as any).__width__;
            delete (style as any).__width__;
        }
        if ((style as any).__height__ != null) {
            style.height = (style as any).__height__;
            delete (style as any).__height__;
        }
    }

    // 計算相關的矩形。
    const result = getRect(elem) as PinResult;
    result.align = align = (knownAligns[align as keyof typeof knownAligns] || align) as PinResult["align"];
    result.target = target = (target as Document | HTMLElement).nodeType ? getRect(target as Document | HTMLElement) : target as Rect;
    if (container) {
        result.container = container = (container as Document | HTMLElement).nodeType ? getRect(container as Document | HTMLElement) : { ...container as Rect };
        container.x += containerPadding;
        container.y += containerPadding;
        container.width -= containerPadding + containerPadding;
        container.height -= containerPadding + containerPadding;
    }

    const proc = (x: "x" | "y", width: "width" | "height", offset: number, center: boolean, left: boolean, right: boolean) => {

        // 檢測容器大小是否超出容器。
        if (resize && container && result[width] > (container as Rect)[width]) {
            result["scale" + x.toUpperCase() as "scaleX" | "scaleY"] = true;
            (elem.style as any)["__" + width + "__"] = elem.style[width];
            result[width] = (container as Rect)[width];
        }

        // 計算位置。
        if (offset < 1 && offset > -1) {
            offset *= result[width];
        }
        let value = (target as Rect)[x] + (center ?
            ((target as Rect)[width] - result[width]) / 2 + offset :
            (left ? 0 : (target as Rect)[width]) + (right ? offset : -result[width] - offset));

        // 檢測位置是否超出容器。
        if (container) {
            const leftBound = (container as Rect)[x];
            const rightBound = leftBound + (container as Rect)[width] - result[width];
            if ((center || !right) && value < leftBound || (center || right) && value > rightBound) {

                // 對於左右邊對齊的布局，先嘗試翻轉布局。
                if (!center) {
                    const rotateX = "rotate" + x.toUpperCase() as "rotateX" | "rotateY";
                    if (!result[rotateX]) {
                        result[rotateX] = true;
                        proc(x, width, offset, center, !left, !right);
                        return;
                    }
                }
//.........這裏部分代碼省略.........

 /**
  * 重新對齊分割條的位置。
  */
 realign() {
     const rect = getRect(this.target2);
     delete rect[this.horizontal ? "height" : "width"];
     rect[this.horizontal ? "y" : "x"] -= this.elem[this.horizontal ? "offsetHeight" : "offsetWidth"] / 2;
     setRect(this.elem, rect);
 }