@zag-js/dom-event - npm Package Compare versions

Comparing version 0.0.0-dev-20230525221231 to 0.0.0-dev-20230526204018

dist/get-event-point.js

@@ -26,11 +26,11 @@ "use strict";
 module.exports = __toCommonJS(get_event_point_exports);
-function pointFromTouch(e, type = "page") {
+function pointFromTouch(e, type = "client") {
   const point = e.touches[0] || e.changedTouches[0];
   return { x: point[`${type}X`], y: point[`${type}Y`] };
 }
-function pointFromMouse(point, type = "page") {
+function pointFromMouse(point, type = "client") {
   return { x: point[`${type}X`], y: point[`${type}Y`] };
 }
 var isTouchEvent = (event) => "touches" in event && event.touches.length > 0;
-function getEventPoint(event, type = "page") {
+function getEventPoint(event, type = "client") {
   return isTouchEvent(event) ? pointFromTouch(event, type) : pointFromMouse(event, type);
@@ -37,0 +37,0 @@ }

dist/get-point-value.d.ts

@@ -5,20 +5,22 @@ type Point = {
 };
-declare function getRelativePointValue(absolutePoint: Point, element: HTMLElement): {
-    x: number;
-    y: number;
-    getDelta(origin: Point): {
+type PercentValueOptions = {
+    inverted?: boolean | {
+        x?: boolean;
+        y?: boolean;
+    };
+    dir?: "ltr" | "rtl";
+    orientation?: "vertical" | "horizontal";
+};
+declare function getRelativePoint(point: Point, element: HTMLElement): {
+    offset: {
         x: number;
         y: number;
     };
+    percent: {
+        x: number;
+        y: number;
+    };
+    getPercentValue: (options?: PercentValueOptions) => number;
 };
-declare function getRelativePointPercent(absolutePoint: Point, element: HTMLElement): {
-    x: number;
-    y: number;
-    normalize(options?: NormalizeOptions): number;
-};
-type NormalizeOptions = {
-    dir?: "ltr" | "rtl";
-    orientation?: "vertical" | "horizontal";
-};
 
-export { getRelativePointPercent, getRelativePointValue };
+export { Point, getRelativePoint };

dist/get-point-value.js

@@ -23,66 +23,26 @@ "use strict";
 __export(get_point_value_exports, {
-  getRelativePointPercent: () => getRelativePointPercent,
-  getRelativePointValue: () => getRelativePointValue
+  getRelativePoint: () => getRelativePoint
 });
 module.exports = __toCommonJS(get_point_value_exports);
-
-// src/get-element-offset.ts
-function getElementOffset(element) {
-  let left = 0;
-  let top = 0;
-  let el = element;
-  const win = element.ownerDocument.defaultView || window;
-  if (el.parentNode) {
-    do {
-      left += el.offsetLeft;
-      top += el.offsetTop;
-    } while ((el = el.offsetParent) && el.nodeType < 9);
-    el = element;
-    do {
-      left -= el.scrollLeft;
-      top -= el.scrollTop;
-    } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
-  }
-  return {
-    top,
-    right: win.innerWidth - left - element.offsetWidth,
-    bottom: win.innerHeight - top - element.offsetHeight,
-    left
-  };
+function clamp(value) {
+  return Math.max(0, Math.min(1, value));
 }
-
-// src/get-point-value.ts
-var clamp = (value) => Math.max(0, Math.min(1, value));
-function getRelativePointValue(absolutePoint, element) {
-  const offset = getElementOffset(element);
-  const x = absolutePoint.x - offset.left;
-  const y = absolutePoint.y - offset.top;
-  return {
-    x,
-    y,
-    getDelta(origin) {
-      return { x: x - origin.x, y: y - origin.y };
+function getRelativePoint(point, element) {
+  const { left, top, width, height } = element.getBoundingClientRect();
+  const offset = { x: point.x - left, y: point.y - top };
+  const percent = { x: clamp(offset.x / width), y: clamp(offset.y / height) };
+  function getPercentValue(options = {}) {
+    const { dir = "ltr", orientation = "horizontal", inverted } = options;
+    const invertX = typeof inverted === "object" ? inverted.x : inverted;
+    const invertY = typeof inverted === "object" ? inverted.y : inverted;
+    if (orientation === "horizontal") {
+      return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
     }
-  };
+    return invertY ? 1 - percent.y : percent.y;
+  }
+  return { offset, percent, getPercentValue };
 }
-function getRelativePointPercent(absolutePoint, element) {
-  const relativePoint = getRelativePointValue(absolutePoint, element);
-  const x = clamp(relativePoint.x / element.offsetWidth);
-  const y = clamp(relativePoint.y / element.offsetHeight);
-  return {
-    x,
-    y,
-    normalize(options = {}) {
-      const { dir = "ltr", orientation = "horizontal" } = options;
-      let newX = x;
-      if (orientation === "horizontal" && dir === "rtl")
-        newX = 1 - newX;
-      return orientation === "horizontal" ? newX : y;
-    }
-  };
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getRelativePointPercent,
-  getRelativePointValue
+  getRelativePoint
 });

dist/index.d.ts

@@ -8,3 +8,3 @@ export { addDomEvent } from './add-dom-event.js';
 export { getNativeEvent } from './get-native-event.js';
-export { getRelativePointPercent, getRelativePointValue } from './get-point-value.js';
+export { Point, getRelativePoint } from './get-point-value.js';
 export { requestPointerLock } from './request-pointer-lock.js';
@@ -11,0 +11,0 @@ export { trackPointerMove } from './track-pointer-move.js';

dist/index.js

@@ -30,4 +30,3 @@ "use strict";
   getNativeEvent: () => getNativeEvent,
-  getRelativePointPercent: () => getRelativePointPercent,
-  getRelativePointValue: () => getRelativePointValue,
+  getRelativePoint: () => getRelativePoint,
   isContextMenuEvent: () => isContextMenuEvent,
@@ -122,11 +121,11 @@ isCtrlKey: () => isCtrlKey,
 // src/get-event-point.ts
-function pointFromTouch(e, type = "page") {
+function pointFromTouch(e, type = "client") {
   const point = e.touches[0] || e.changedTouches[0];
   return { x: point[`${type}X`], y: point[`${type}Y`] };
 }
-function pointFromMouse(point, type = "page") {
+function pointFromMouse(point, type = "client") {
   return { x: point[`${type}X`], y: point[`${type}Y`] };
 }
 var isTouchEvent = (event) => "touches" in event && event.touches.length > 0;
-function getEventPoint(event, type = "page") {
+function getEventPoint(event, type = "client") {
   return isTouchEvent(event) ? pointFromTouch(event, type) : pointFromMouse(event, type);
@@ -153,56 +152,20 @@ }
 
-// src/get-element-offset.ts
-function getElementOffset(element) {
-  let left = 0;
-  let top = 0;
-  let el = element;
-  const win = element.ownerDocument.defaultView || window;
-  if (el.parentNode) {
-    do {
-      left += el.offsetLeft;
-      top += el.offsetTop;
-    } while ((el = el.offsetParent) && el.nodeType < 9);
-    el = element;
-    do {
-      left -= el.scrollLeft;
-      top -= el.scrollTop;
-    } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
-  }
-  return {
-    top,
-    right: win.innerWidth - left - element.offsetWidth,
-    bottom: win.innerHeight - top - element.offsetHeight,
-    left
-  };
-}
-
 // src/get-point-value.ts
-var clamp = (value) => Math.max(0, Math.min(1, value));
-function getRelativePointValue(absolutePoint, element) {
-  const offset = getElementOffset(element);
-  const x = absolutePoint.x - offset.left;
-  const y = absolutePoint.y - offset.top;
-  return {
-    x,
-    y,
-    getDelta(origin) {
-      return { x: x - origin.x, y: y - origin.y };
-    }
-  };
+function clamp(value) {
+  return Math.max(0, Math.min(1, value));
 }
-function getRelativePointPercent(absolutePoint, element) {
-  const relativePoint = getRelativePointValue(absolutePoint, element);
-  const x = clamp(relativePoint.x / element.offsetWidth);
-  const y = clamp(relativePoint.y / element.offsetHeight);
-  return {
-    x,
-    y,
-    normalize(options = {}) {
-      const { dir = "ltr", orientation = "horizontal" } = options;
-      let newX = x;
-      if (orientation === "horizontal" && dir === "rtl")
-        newX = 1 - newX;
-      return orientation === "horizontal" ? newX : y;
+function getRelativePoint(point, element) {
+  const { left, top, width, height } = element.getBoundingClientRect();
+  const offset = { x: point.x - left, y: point.y - top };
+  const percent = { x: clamp(offset.x / width), y: clamp(offset.y / height) };
+  function getPercentValue(options = {}) {
+    const { dir = "ltr", orientation = "horizontal", inverted } = options;
+    const invertX = typeof inverted === "object" ? inverted.x : inverted;
+    const invertY = typeof inverted === "object" ? inverted.y : inverted;
+    if (orientation === "horizontal") {
+      return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
     }
-  };
+    return invertY ? 1 - percent.y : percent.y;
+  }
+  return { offset, percent, getPercentValue };
 }
@@ -292,4 +255,3 @@
   getNativeEvent,
-  getRelativePointPercent,
-  getRelativePointValue,
+  getRelativePoint,
   isContextMenuEvent,
@@ -296,0 +258,0 @@ isCtrlKey,

dist/track-pointer-move.js

@@ -38,11 +38,11 @@ "use strict";
 // src/get-event-point.ts
-function pointFromTouch(e, type = "page") {
+function pointFromTouch(e, type = "client") {
   const point = e.touches[0] || e.changedTouches[0];
   return { x: point[`${type}X`], y: point[`${type}Y`] };
 }
-function pointFromMouse(point, type = "page") {
+function pointFromMouse(point, type = "client") {
   return { x: point[`${type}X`], y: point[`${type}Y`] };
 }
 var isTouchEvent = (event) => "touches" in event && event.touches.length > 0;
-function getEventPoint(event, type = "page") {
+function getEventPoint(event, type = "client") {
   return isTouchEvent(event) ? pointFromTouch(event, type) : pointFromMouse(event, type);
@@ -49,0 +49,0 @@ }

package.json

 {
   "name": "@zag-js/dom-event",
-  "version": "0.0.0-dev-20230525221231",
+  "version": "0.0.0-dev-20230526204018",
   "description": "",
@@ -27,4 +27,4 @@ "keywords": [
   "dependencies": {
-    "@zag-js/types": "0.0.0-dev-20230525221231",
-    "@zag-js/text-selection": "0.0.0-dev-20230525221231"
+    "@zag-js/types": "0.0.0-dev-20230526204018",
+    "@zag-js/text-selection": "0.0.0-dev-20230526204018"
   },
@@ -31,0 +31,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

46622

decreased by-9.18%

Number of package files

53

decreased by-7.02%

Lines of code

1307

decreased by-12.4%

Dependency changes

• + Added@zag-js/dom-query@0.0.0-dev-20230526204018(transitive)

• + Added@zag-js/text-selection@0.0.0-dev-20230526204018(transitive)

• + Added@zag-js/types@0.0.0-dev-20230526204018(transitive)

• - Removed@zag-js/dom-query@0.0.0-dev-20230525221231(transitive)

• - Removed@zag-js/text-selection@0.0.0-dev-20230525221231(transitive)

• - Removed@zag-js/types@0.0.0-dev-20230525221231(transitive)

• Updated@zag-js/text-selection@0.0.0-dev-20230526204018

• Updated@zag-js/types@0.0.0-dev-20230526204018