@aglyn/ 共享用户名

DOM测量助手和类型守护:边框和剪接矩形,卷轴双亲,相抵双亲,一个节点的自有窗口(包括跨iframes),以及事件坐标. 它主要是Besigner视觉编辑器的内部构件(@aglyn/besigner-ui) 和 @aglyn/shared-ui-next,可自行使用.

从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .

安装

npm install @aglyn/shared-util-dom

无对等依存. mobx 财务报告和审定财务报表 rxjs 是普通的依赖关系,仅由页面标题控制器使用.

里面有什么东西

下面的一切都从包根导出.

• 矩形与几何 : getElementClientRectBounding, (中文(简体) ), getElementClientRectBoundingInner, (中文(简体) ), getElementRectAsClientRect, (中文(简体) ), getElementClippingRect, (中文(简体) ), getElementViewportRect, (中文(简体) ), getElementDocumentElementRect, (中文(简体) ), getElementFragmentRects, (中文(简体) ), getElementWindowScrollBarX。 。 。 .
• 树行走: getElementScrollParent, (中文(简体) ), getElementListScrollParents, (中文(简体) ), getElementOffsetParent, (中文(简体) ), getElementParentNode, (中文(简体) ), getElementDocumentElement, (中文(简体) ), getElementNodeName, (中文(简体) ), getElementComputedStyle。 。 。 .
• 窗口和框架 : getNodeWindow, (中文(简体) ), getNodeWindowScroll, (中文(简体) ), getIframeDocument。这些解析了拥有一个节点的窗口,而不是假设一个全局的窗口,因此它们致力于一个iframe内的元素.
• 活动 : getEventCoordinates, (中文(简体) ), eventHasViewportCoordinates, (中文(简体) ), isTouchEvent, (中文(简体) ), isKeyboardEvent。 。 。 .
• 警卫: isNodeObject, (中文(简体) ), isNodeElement, (中文(简体) ), isElementHTMLElement, (中文(简体) ), isSVGElement, (中文(简体) ), isNodeShadowRoot, (中文(简体) ), isNodeTableElement, (中文(简体) ), isNodeDocument, (中文(简体) ), isElementWindow, (中文(简体) ), isElementScrollParentElement, (中文(简体) ), elementContainsChildElement。 。 。 .
• 类型和常数 : Rect, (中文(简体) ), ClientRectObject, (中文(简体) ), Coordinates, (中文(简体) ), VirtualElement, (中文(简体) ), Boundary, (中文(简体) ), RootBoundary,则 clippingParents 编号 : viewport 常数.
• 页面标题控制器 : PageTitle (a MobX 可观测类),共享实例 $title,可见 RxJS $pageTitle和设置器 setScreenName, (中文(简体) ), setScreenNumber, (中文(简体) ), setScreenSuffix, (中文(简体) ), setScreenSeparator, (中文(简体) ), setScreenTitle。 。 。 .

每个文件下 src/lib 也可以被子路径导入, 例如 @aglyn/shared-util-dom/get-element-scroll-parent 或者说 @aglyn/shared-util-dom/guards/is-touch-event。 。 。 . getOwnerDocument 只有这样,因为 @aglyn/shared-util-dom/get-owner-document。 。 。 .

使用量

import {
  getElementListScrollParents,
  getEventCoordinates,
  getNodeWindow,
} from '@aglyn/shared-util-dom'

function onPointerDown(event: PointerEvent) {
  const { x, y } = getEventCoordinates(event)
  const win = getNodeWindow(event.target)
  const scrollers = getElementListScrollParents(event.target as Element)
  // ...
}

导入时间效应

此软件包导入根 @aglyn/shared-util-tools,该根定义了一组不可假设 $_- 前缀方法 Array.prototype 当它装入。 看那包的README 准确的列表.

怎样才合适

A 类 shared 软件包:通用,对Aglyn的模型一无所知。 共享软件包只能导入其他共享软件包; 此软件包取决于 @aglyn/shared-util-tools。 。 。 . @aglyn/besigner-ui 财务报告和审定财务报表 @aglyn/shared-ui-next 依赖它.

许可证

阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/shared/util/dom 页面存档备份,存于互联网档案馆