本文整理汇总了TypeScript中ux/dom.getRect函数的典型用法代码示例。如果您正苦于以下问题:TypeScript getRect函数的具体用法?TypeScript getRect怎么用?TypeScript getRect使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了getRect函数的8个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。
示例1: within
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);
}
开发者ID:Teal,项目名称:TealUI,代码行数:7,代码来源:within.ts
示例2: isScrollIntoView
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);
}
开发者ID:Teal,项目名称:TealUI,代码行数:7,代码来源:scroll.ts
示例3: limit
/**
* 限制只能在指定区域内拖动。
* @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;
}
}
开发者ID:Teal,项目名称:TealUI,代码行数:18,代码来源:drag.ts
示例4: snap
/**
* 使当前元素吸附于目标位置。
* @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;
}
开发者ID:Teal,项目名称:TealUI,代码行数:57,代码来源:drag.ts
示例5: scrollIntoViewIfNeeded
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);
}
开发者ID:Teal,项目名称:TealUI,代码行数:22,代码来源:scroll.ts
示例6: scrollIntoView
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);
}
开发者ID:Teal,项目名称:TealUI,代码行数:24,代码来源:scroll.ts
示例7: pin
/**
* 将元素对齐到其它节点或区域。
* @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;
}
}
//.........这里部分代码省略.........
开发者ID:Teal,项目名称:TealUI,代码行数:101,代码来源:pin.ts
示例8: realign
/**
* 重新对齐分割条的位置。
*/
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);
}
开发者ID:Teal,项目名称:TealUI,代码行数:9,代码来源:splitter.ts
注:本文中的ux/dom.getRect函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。 |
请发表评论