@sheinx/hooks 3.9.5-beta.1 → 3.9.5-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/cjs/common/use-position-style/index.d.ts.map +1 -1
  2. package/cjs/common/use-position-style/index.js +12 -7
  3. package/cjs/utils/dom/document.d.ts +9 -1
  4. package/cjs/utils/dom/document.d.ts.map +1 -1
  5. package/cjs/utils/dom/document.js +37 -41
  6. package/esm/common/use-position-style/index.d.ts.map +1 -1
  7. package/esm/common/use-position-style/index.js +13 -8
  8. package/esm/utils/dom/document.d.ts +9 -1
  9. package/esm/utils/dom/document.d.ts.map +1 -1
  10. package/esm/utils/dom/document.js +36 -40
  11. package/package.json +1 -1
package/cjs/common/use-position-style/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,GAAG,gBAAgB,KAAK,IAAI,CAAC;IAErE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACpD;AAsBD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;CA+V3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,GAAG,gBAAgB,KAAK,IAAI,CAAC;IAErE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACpD;AAsBD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;CAoW3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/cjs/common/use-position-style/index.js CHANGED
@@ -178,7 +178,8 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
178
178
  var _position$split3 = position.split('-'),
179
179
  _position$split4 = _slicedToArray(_position$split3, 2),
180
180
  _horizontalPosition = _position$split4[1];
181
- if (_horizontalPosition === 'left' && context.parentRect.left + (popupElWidth || context.popUpWidth) > _utils.docSize.width) {
181
+ var bodyZoom = (0, _utils.getRelativeZoom)(document.body);
182
+ if (_horizontalPosition === 'left' && context.parentRect.left + (popupElWidth || context.popUpWidth) > _utils.docSize.width * bodyZoom) {
182
183
  newPosition = newPosition.replace('left', 'right');
183
184
  }
184
185
  }
@@ -333,19 +334,23 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
333
334
  }
334
335
  var _getAbsolutePositionS = getAbsolutePositionStyle(rect, position),
335
336
  style = _getAbsolutePositionS.style;
336
- var currentCSSZoom = (0, _utils.getCurrentCSSZoom)();
337
- if (currentCSSZoom && currentCSSZoom !== 1) {
337
+
338
+ // 计算从触发元素到挂载容器之间的相对 zoom 值
339
+ var rootContainer = getContainer() || document.body;
340
+ var relativeZoom = (0, _utils.getRelativeZoom)(parentElRef.current, rootContainer);
341
+ if (relativeZoom && relativeZoom !== 1) {
342
+ var zoomRatio = 1 / relativeZoom;
338
343
  if (style.left && typeof style.left === 'number') {
339
- style.left = style.left * (1 / currentCSSZoom);
344
+ style.left = style.left * zoomRatio;
340
345
  }
341
346
  if (style.top && typeof style.top === 'number') {
342
- style.top = style.top * (1 / currentCSSZoom);
347
+ style.top = style.top * zoomRatio;
343
348
  }
344
349
  if (style.right && typeof style.right === 'number') {
345
- style.right = style.right * (1 / currentCSSZoom);
350
+ style.right = style.right * zoomRatio;
346
351
  }
347
352
  if (style.bottom && typeof style.bottom === 'number') {
348
- style.bottom = style.bottom * (1 / currentCSSZoom);
353
+ style.bottom = style.bottom * zoomRatio;
349
354
  }
350
355
  }
351
356
  return {
package/cjs/utils/dom/document.d.ts CHANGED
@@ -1,4 +1,12 @@
1
- export declare const getCurrentCSSZoom: () => number;
1
+ /**
2
+ * 计算容器的累积 zoom 值
3
+ * 当弹出层通过 position: absolute 定位在容器内时，需要用容器的 zoom 值来修正坐标
4
+ * 因为 getBoundingClientRect() 返回的是应用 zoom 后的视口坐标，
5
+ * 但 CSS 的 left/top 值会在容器的 zoom 坐标系中解释
6
+ * @param container - 容器元素，默认为 document.body
7
+ * @returns 容器的累积 zoom 值
8
+ */
9
+ export declare const getRelativeZoom: (_element: HTMLElement | null, container?: HTMLElement | null) => number;
2
10
  export declare const getScrollPosition: (element?: HTMLElement | null) => {
3
11
  scrollTop: number;
4
12
  scrollLeft: number;
package/cjs/utils/dom/document.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"document.d.ts","sourceRoot":"","sources":["document.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,QAAO,MAqBpC,CAAA;AA6BD,eAAO,MAAM,iBAAiB,aAAc,WAAW,GAAG,IAAI;;;CAc7D,CAAC"}
1
+ {"version":3,"file":"document.d.ts","sourceRoot":"","sources":["document.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,aAAc,WAAW,GAAG,IAAI,cAAa,WAAW,GAAG,IAAI,KAAmB,MA8B7G,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,WAAW,GAAG,IAAI;;;CAc7D,CAAC"}
package/cjs/utils/dom/document.js CHANGED
@@ -3,51 +3,47 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.getScrollPosition = exports.getCurrentCSSZoom = void 0;
7
- var cachedZoom = 0;
8
- var getCurrentCSSZoom = exports.getCurrentCSSZoom = function getCurrentCSSZoom() {
9
- if (cachedZoom) return cachedZoom;
10
- if (typeof window === 'undefined' || typeof navigator === 'undefined' || !document.body) {
11
- return 1;
12
- }
13
- var currentCSSZoom = Math.round(document.body.getBoundingClientRect().width) / document.body.clientWidth;
14
- if (window.ResizeObserver) {
15
- // 监听document.body的变化，更新缓存的zoom
16
- var resizeObserver = new ResizeObserver(function () {
17
- cachedZoom = Math.round(document.body.getBoundingClientRect().width) / document.body.clientWidth;
18
- });
19
- resizeObserver.observe(document.body);
20
- }
21
- cachedZoom = currentCSSZoom;
22
- return currentCSSZoom;
23
- };
24
-
25
- // export const getZoomBoundingClientRect = (element: HTMLElement) => {
26
- // const currentCSSZoom = getCurrentCSSZoom()
27
- // if (currentCSSZoom === 1 || !currentCSSZoom) {
28
- // return element.getBoundingClientRect()
29
- // }
30
- // const isNotZoom = currentCSSZoom === 1 || !currentCSSZoom
6
+ exports.getScrollPosition = exports.getRelativeZoom = void 0;
7
+ // 缓存容器的 zoom 值，避免重复计算
8
+ // 使用 WeakMap 确保容器元素被销毁时缓存也会被清理
9
+ var zoomCache = new WeakMap();
31
10
 
32
- // if (isNotZoom) {
33
- // return element.getBoundingClientRect()
34
- // }
11
+ /**
12
+ * 计算容器的累积 zoom 值
13
+ * 当弹出层通过 position: absolute 定位在容器内时，需要用容器的 zoom 值来修正坐标
14
+ * 因为 getBoundingClientRect() 返回的是应用 zoom 后的视口坐标，
15
+ * 但 CSS 的 left/top 值会在容器的 zoom 坐标系中解释
16
+ * @param container - 容器元素，默认为 document.body
17
+ * @returns 容器的累积 zoom 值
18
+ */
19
+ var getRelativeZoom = exports.getRelativeZoom = function getRelativeZoom(_element) {
20
+ var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
21
+ if (!container || typeof window === 'undefined') return 1;
35
22
 
36
- // const zoomRatio = 1 / currentCSSZoom
37
- // const rect = element.getBoundingClientRect()
23
+ // 检查缓存
24
+ var cached = zoomCache.get(container);
25
+ if (cached !== undefined) {
26
+ return cached;
27
+ }
28
+ var zoom = 1;
29
+ var current = container;
38
30
 
39
- // return {
40
- // x: rect.x * zoomRatio,
41
- // y: rect.y * zoomRatio,
42
- // top: rect.top * zoomRatio,
43
- // right: rect.right * zoomRatio,
44
- // bottom: rect.bottom * zoomRatio,
45
- // left: rect.left * zoomRatio,
46
- // width: rect.width * zoomRatio,
47
- // height: rect.height * zoomRatio,
48
- // }
49
- // }
31
+ // 从容器向上遍历到 document，累积所有的 zoom 值
32
+ while (current && current !== document.documentElement) {
33
+ var computedStyle = window.getComputedStyle(current);
34
+ // zoom 不是标准 CSS 属性，需要通过索引访问
35
+ var zoomValue = computedStyle.zoom || '1';
36
+ var currentZoom = parseFloat(zoomValue);
37
+ if (!isNaN(currentZoom) && currentZoom !== 0) {
38
+ zoom *= currentZoom;
39
+ }
40
+ current = current.parentElement;
41
+ }
50
42
 
43
+ // 缓存计算结果
44
+ zoomCache.set(container, zoom);
45
+ return zoom;
46
+ };
51
47
  var getScrollPosition = exports.getScrollPosition = function getScrollPosition(element) {
52
48
  if (!element) return {
53
49
  scrollTop: 0,
package/esm/common/use-position-style/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,GAAG,gBAAgB,KAAK,IAAI,CAAC;IAErE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACpD;AAsBD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;CA+V3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,GAAG,gBAAgB,KAAK,IAAI,CAAC;IAErE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACpD;AAsBD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;CAoW3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/esm/common/use-position-style/index.js CHANGED
@@ -13,7 +13,7 @@ import { useCheckElementBorderWidth } from "./check-border";
13
13
  import { useCheckElementSize } from "./check-element-size";
14
14
  import shallowEqual from "../../utils/shallow-equal";
15
15
  import usePersistFn from "../use-persist-fn";
16
- import { getCurrentCSSZoom, getScrollPosition } from "../../utils";
16
+ import { getScrollPosition, getRelativeZoom } from "../../utils";
17
17
  import { docSize } from "../../utils";
18
18
  var horizontalPosition = ['left-bottom', 'left-top', 'right-bottom', 'right-top', 'left', 'right'];
19
19
  var verticalPosition = ['bottom-left', 'bottom-right', 'top-left', 'top-right', 'bottom', 'top'];
@@ -169,7 +169,8 @@ export var usePositionStyle = function usePositionStyle(config) {
169
169
  var _position$split3 = position.split('-'),
170
170
  _position$split4 = _slicedToArray(_position$split3, 2),
171
171
  _horizontalPosition = _position$split4[1];
172
- if (_horizontalPosition === 'left' && context.parentRect.left + (popupElWidth || context.popUpWidth) > docSize.width) {
172
+ var bodyZoom = getRelativeZoom(document.body);
173
+ if (_horizontalPosition === 'left' && context.parentRect.left + (popupElWidth || context.popUpWidth) > docSize.width * bodyZoom) {
173
174
  newPosition = newPosition.replace('left', 'right');
174
175
  }
175
176
  }
@@ -324,19 +325,23 @@ export var usePositionStyle = function usePositionStyle(config) {
324
325
  }
325
326
  var _getAbsolutePositionS = getAbsolutePositionStyle(rect, position),
326
327
  style = _getAbsolutePositionS.style;
327
- var currentCSSZoom = getCurrentCSSZoom();
328
- if (currentCSSZoom && currentCSSZoom !== 1) {
328
+
329
+ // 计算从触发元素到挂载容器之间的相对 zoom 值
330
+ var rootContainer = getContainer() || document.body;
331
+ var relativeZoom = getRelativeZoom(parentElRef.current, rootContainer);
332
+ if (relativeZoom && relativeZoom !== 1) {
333
+ var zoomRatio = 1 / relativeZoom;
329
334
  if (style.left && typeof style.left === 'number') {
330
- style.left = style.left * (1 / currentCSSZoom);
335
+ style.left = style.left * zoomRatio;
331
336
  }
332
337
  if (style.top && typeof style.top === 'number') {
333
- style.top = style.top * (1 / currentCSSZoom);
338
+ style.top = style.top * zoomRatio;
334
339
  }
335
340
  if (style.right && typeof style.right === 'number') {
336
- style.right = style.right * (1 / currentCSSZoom);
341
+ style.right = style.right * zoomRatio;
337
342
  }
338
343
  if (style.bottom && typeof style.bottom === 'number') {
339
- style.bottom = style.bottom * (1 / currentCSSZoom);
344
+ style.bottom = style.bottom * zoomRatio;
340
345
  }
341
346
  }
342
347
  return {
package/esm/utils/dom/document.d.ts CHANGED
@@ -1,4 +1,12 @@
1
- export declare const getCurrentCSSZoom: () => number;
1
+ /**
2
+ * 计算容器的累积 zoom 值
3
+ * 当弹出层通过 position: absolute 定位在容器内时，需要用容器的 zoom 值来修正坐标
4
+ * 因为 getBoundingClientRect() 返回的是应用 zoom 后的视口坐标，
5
+ * 但 CSS 的 left/top 值会在容器的 zoom 坐标系中解释
6
+ * @param container - 容器元素，默认为 document.body
7
+ * @returns 容器的累积 zoom 值
8
+ */
9
+ export declare const getRelativeZoom: (_element: HTMLElement | null, container?: HTMLElement | null) => number;
2
10
  export declare const getScrollPosition: (element?: HTMLElement | null) => {
3
11
  scrollTop: number;
4
12
  scrollLeft: number;
package/esm/utils/dom/document.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"document.d.ts","sourceRoot":"","sources":["document.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,QAAO,MAqBpC,CAAA;AA6BD,eAAO,MAAM,iBAAiB,aAAc,WAAW,GAAG,IAAI;;;CAc7D,CAAC"}
1
+ {"version":3,"file":"document.d.ts","sourceRoot":"","sources":["document.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,aAAc,WAAW,GAAG,IAAI,cAAa,WAAW,GAAG,IAAI,KAAmB,MA8B7G,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,WAAW,GAAG,IAAI;;;CAc7D,CAAC"}
package/esm/utils/dom/document.js CHANGED
@@ -1,47 +1,43 @@
1
- var cachedZoom = 0;
2
- export var getCurrentCSSZoom = function getCurrentCSSZoom() {
3
- if (cachedZoom) return cachedZoom;
4
- if (typeof window === 'undefined' || typeof navigator === 'undefined' || !document.body) {
5
- return 1;
6
- }
7
- var currentCSSZoom = Math.round(document.body.getBoundingClientRect().width) / document.body.clientWidth;
8
- if (window.ResizeObserver) {
9
- // 监听document.body的变化，更新缓存的zoom
10
- var resizeObserver = new ResizeObserver(function () {
11
- cachedZoom = Math.round(document.body.getBoundingClientRect().width) / document.body.clientWidth;
12
- });
13
- resizeObserver.observe(document.body);
14
- }
15
- cachedZoom = currentCSSZoom;
16
- return currentCSSZoom;
17
- };
18
-
19
- // export const getZoomBoundingClientRect = (element: HTMLElement) => {
20
- // const currentCSSZoom = getCurrentCSSZoom()
21
- // if (currentCSSZoom === 1 || !currentCSSZoom) {
22
- // return element.getBoundingClientRect()
23
- // }
24
- // const isNotZoom = currentCSSZoom === 1 || !currentCSSZoom
1
+ // 缓存容器的 zoom 值，避免重复计算
2
+ // 使用 WeakMap 确保容器元素被销毁时缓存也会被清理
3
+ var zoomCache = new WeakMap();
25
4
 
26
- // if (isNotZoom) {
27
- // return element.getBoundingClientRect()
28
- // }
5
+ /**
6
+ * 计算容器的累积 zoom 值
7
+ * 当弹出层通过 position: absolute 定位在容器内时，需要用容器的 zoom 值来修正坐标
8
+ * 因为 getBoundingClientRect() 返回的是应用 zoom 后的视口坐标，
9
+ * 但 CSS 的 left/top 值会在容器的 zoom 坐标系中解释
10
+ * @param container - 容器元素，默认为 document.body
11
+ * @returns 容器的累积 zoom 值
12
+ */
13
+ export var getRelativeZoom = function getRelativeZoom(_element) {
14
+ var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
15
+ if (!container || typeof window === 'undefined') return 1;
29
16
 
30
- // const zoomRatio = 1 / currentCSSZoom
31
- // const rect = element.getBoundingClientRect()
17
+ // 检查缓存
18
+ var cached = zoomCache.get(container);
19
+ if (cached !== undefined) {
20
+ return cached;
21
+ }
22
+ var zoom = 1;
23
+ var current = container;
32
24
 
33
- // return {
34
- // x: rect.x * zoomRatio,
35
- // y: rect.y * zoomRatio,
36
- // top: rect.top * zoomRatio,
37
- // right: rect.right * zoomRatio,
38
- // bottom: rect.bottom * zoomRatio,
39
- // left: rect.left * zoomRatio,
40
- // width: rect.width * zoomRatio,
41
- // height: rect.height * zoomRatio,
42
- // }
43
- // }
25
+ // 从容器向上遍历到 document，累积所有的 zoom 值
26
+ while (current && current !== document.documentElement) {
27
+ var computedStyle = window.getComputedStyle(current);
28
+ // zoom 不是标准 CSS 属性，需要通过索引访问
29
+ var zoomValue = computedStyle.zoom || '1';
30
+ var currentZoom = parseFloat(zoomValue);
31
+ if (!isNaN(currentZoom) && currentZoom !== 0) {
32
+ zoom *= currentZoom;
33
+ }
34
+ current = current.parentElement;
35
+ }
44
36
 
37
+ // 缓存计算结果
38
+ zoomCache.set(container, zoom);
39
+ return zoom;
40
+ };
45
41
  export var getScrollPosition = function getScrollPosition(element) {
46
42
  if (!element) return {
47
43
  scrollTop: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sheinx/hooks",
3
- "version": "3.9.5-beta.1",
3
+ "version": "3.9.5-beta.3",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",