@cropper/utils - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/utils.d.ts

@@ -104,2 +104,11 @@ export declare const ACTION_MOVE = "move";
 /**
+ * Get the real event target by checking composed path.
+ * This is useful when dealing with events that can cross shadow DOM boundaries.
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath}
+ * @param {Event} event The event object.
+ * @returns {EventTarget | null} The first element in the composed path, or the original event target.
+ */
+export declare function getComposedPathTarget(event: Event): EventTarget | null;
+
+/**
  * Get the offset base on the document.
@@ -114,2 +123,9 @@ * @param {Element} element The target element.
 
+/**
+ * Get the root document node.
+ * @param {Element} element The target element.
+ * @returns {Document|DocumentFragment|null} The document node.
+ */
+export declare function getRootDocument(element: Element): Document | DocumentFragment | null;
+
 export declare const HAS_POINTER_EVENT: boolean;
@@ -116,0 +132,0 @@

dist/utils.esm.js

@@ -202,2 +202,16 @@ const IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
 }
+/**
+ * Get the real event target by checking composed path.
+ * This is useful when dealing with events that can cross shadow DOM boundaries.
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath}
+ * @param {Event} event The event object.
+ * @returns {EventTarget | null} The first element in the composed path, or the original event target.
+ */
+function getComposedPathTarget(event) {
+    if (typeof event.composedPath === 'function') {
+        const path = event.composedPath();
+        return path.find(isElement) || event.target;
+    }
+    return event.target;
+}
 const resolvedPromise = Promise.resolve();
@@ -216,2 +230,19 @@ /**
 /**
+ * Get the root document node.
+ * @param {Element} element The target element.
+ * @returns {Document|DocumentFragment|null} The document node.
+ */
+function getRootDocument(element) {
+    const rootNode = element.getRootNode();
+    switch (rootNode.nodeType) {
+        case 1:
+            return rootNode.ownerDocument;
+        case 9:
+            return rootNode;
+        case 11:
+            return rootNode;
+    }
+    return null;
+}
+/**
  * Get the offset base on the document.
@@ -311,2 +342,2 @@ * @param {Element} element The target element.
 
-export { ACTION_MOVE, ACTION_NONE, ACTION_RESIZE_EAST, ACTION_RESIZE_NORTH, ACTION_RESIZE_NORTHEAST, ACTION_RESIZE_NORTHWEST, ACTION_RESIZE_SOUTH, ACTION_RESIZE_SOUTHEAST, ACTION_RESIZE_SOUTHWEST, ACTION_RESIZE_WEST, ACTION_ROTATE, ACTION_SCALE, ACTION_SELECT, ACTION_TRANSFORM, ATTRIBUTE_ACTION, CROPPER_CANVAS, CROPPER_CROSSHAIR, CROPPER_GIRD, CROPPER_HANDLE, CROPPER_IMAGE, CROPPER_SELECTION, CROPPER_SHADE, CROPPER_VIEWER, EVENT_ACTION, EVENT_ACTION_END, EVENT_ACTION_MOVE, EVENT_ACTION_START, EVENT_CHANGE, EVENT_ERROR, EVENT_KEYDOWN, EVENT_LOAD, EVENT_POINTER_DOWN, EVENT_POINTER_MOVE, EVENT_POINTER_UP, EVENT_RESIZE, EVENT_TOUCH_END, EVENT_TOUCH_MOVE, EVENT_TOUCH_START, EVENT_TRANSFORM, EVENT_WHEEL, HAS_POINTER_EVENT, IS_BROWSER, IS_TOUCH_DEVICE, NAMESPACE, WINDOW, emit, getAdjustedSizes, getOffset, isElement, isFunction, isNaN, isNumber, isObject, isPlainObject, isPositiveNumber, isString, isUndefined, multiplyMatrices, nextTick, off, on, once, toAngleInRadian, toCamelCase, toKebabCase };
+export { ACTION_MOVE, ACTION_NONE, ACTION_RESIZE_EAST, ACTION_RESIZE_NORTH, ACTION_RESIZE_NORTHEAST, ACTION_RESIZE_NORTHWEST, ACTION_RESIZE_SOUTH, ACTION_RESIZE_SOUTHEAST, ACTION_RESIZE_SOUTHWEST, ACTION_RESIZE_WEST, ACTION_ROTATE, ACTION_SCALE, ACTION_SELECT, ACTION_TRANSFORM, ATTRIBUTE_ACTION, CROPPER_CANVAS, CROPPER_CROSSHAIR, CROPPER_GIRD, CROPPER_HANDLE, CROPPER_IMAGE, CROPPER_SELECTION, CROPPER_SHADE, CROPPER_VIEWER, EVENT_ACTION, EVENT_ACTION_END, EVENT_ACTION_MOVE, EVENT_ACTION_START, EVENT_CHANGE, EVENT_ERROR, EVENT_KEYDOWN, EVENT_LOAD, EVENT_POINTER_DOWN, EVENT_POINTER_MOVE, EVENT_POINTER_UP, EVENT_RESIZE, EVENT_TOUCH_END, EVENT_TOUCH_MOVE, EVENT_TOUCH_START, EVENT_TRANSFORM, EVENT_WHEEL, HAS_POINTER_EVENT, IS_BROWSER, IS_TOUCH_DEVICE, NAMESPACE, WINDOW, emit, getAdjustedSizes, getComposedPathTarget, getOffset, getRootDocument, isElement, isFunction, isNaN, isNumber, isObject, isPlainObject, isPositiveNumber, isString, isUndefined, multiplyMatrices, nextTick, off, on, once, toAngleInRadian, toCamelCase, toKebabCase };

dist/utils.esm.min.js

@@ -1,1 +0,1 @@
-const e="undefined"!=typeof window&&void 0!==window.document,t=e?window:{},n=!!e&&"ontouchstart"in t.document.documentElement,o=!!e&&"PointerEvent"in t,r="cropper",c=`${r}-canvas`,i=`${r}-crosshair`,s=`${r}-grid`,u=`${r}-handle`,a=`${r}-image`,f=`${r}-selection`,d=`${r}-shade`,p=`${r}-viewer`,l="select",h="move",m="scale",g="rotate",w="transform",v="none",b="n-resize",y="e-resize",z="s-resize",$="w-resize",O="ne-resize",E="nw-resize",j="se-resize",P="sw-resize",C="action",L=n?"touchend touchcancel":"mouseup",N=n?"touchmove":"mousemove",I=n?"touchstart":"mousedown",M=o?"pointerdown":I,A=o?"pointermove":N,R=o?"pointerup pointercancel":L,S="error",T="keydown",k="load",x="resize",B="wheel",D="action",F="actionend",U="actionmove",X="actionstart",Y="change",Z="transform";function q(e){return"string"==typeof e}const G=Number.isNaN||t.isNaN;function H(e){return"number"==typeof e&&!G(e)}function J(e){return H(e)&&e>0&&e<1/0}function K(e){return void 0===e}function Q(e){return"object"==typeof e&&null!==e}const{hasOwnProperty:V}=Object.prototype;function W(e){if(!Q(e))return!1;try{const{constructor:t}=e,{prototype:n}=t;return t&&n&&V.call(n,"isPrototypeOf")}catch(e){return!1}}function _(e){return"function"==typeof e}function ee(e){return"object"==typeof e&&null!==e&&1===e.nodeType}const te=/([a-z\d])([A-Z])/g;function ne(e){return String(e).replace(te,"$1-$2").toLowerCase()}const oe=/-[A-z\d]/g;function re(e){return e.replace(oe,(e=>e.slice(1).toUpperCase()))}const ce=/\s\s*/;function ie(e,t,n,o){t.trim().split(ce).forEach((t=>{e.removeEventListener(t,n,o)}))}function se(e,t,n,o){t.trim().split(ce).forEach((t=>{e.addEventListener(t,n,o)}))}function ue(e,t,n,o){se(e,t,n,Object.assign(Object.assign({},o),{once:!0}))}const ae={bubbles:!0,cancelable:!0,composed:!0};function fe(e,t,n,o){return e.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},ae),{detail:n}),o)))}const de=Promise.resolve();function pe(e,t){return t?de.then(e?t.bind(e):t):de}function le(e){const{documentElement:n}=e.ownerDocument,o=e.getBoundingClientRect();return{left:o.left+(t.pageXOffset-n.clientLeft),top:o.top+(t.pageYOffset-n.clientTop)}}const he=/deg|g?rad|turn$/i;function me(e){const t=parseFloat(e)||0;if(0!==t){const[n="rad"]=String(e).match(he)||[];switch(n.toLowerCase()){case"deg":return t/360*(2*Math.PI);case"grad":return t/400*(2*Math.PI);case"turn":return t*(2*Math.PI)}}return t}const ge="contain";function we(e,t=ge){const{aspectRatio:n}=e;let{width:o,height:r}=e;const c=J(o),i=J(r);if(c&&i){const e=r*n;t===ge&&e>o||"cover"===t&&e<o?r=o/n:o=r*n}else c?r=o/n:i&&(o=r*n);return{width:o,height:r}}function ve(e,...t){if(0===t.length)return e;const[n,o,r,c,i,s]=e,[u,a,f,d,p,l]=t[0];return ve(e=[n*u+r*a,o*u+c*a,n*f+r*d,o*f+c*d,n*p+r*l+i,o*p+c*l+s],...t.slice(1))}export{h as ACTION_MOVE,v as ACTION_NONE,y as ACTION_RESIZE_EAST,b as ACTION_RESIZE_NORTH,O as ACTION_RESIZE_NORTHEAST,E as ACTION_RESIZE_NORTHWEST,z as ACTION_RESIZE_SOUTH,j as ACTION_RESIZE_SOUTHEAST,P as ACTION_RESIZE_SOUTHWEST,$ as ACTION_RESIZE_WEST,g as ACTION_ROTATE,m as ACTION_SCALE,l as ACTION_SELECT,w as ACTION_TRANSFORM,C as ATTRIBUTE_ACTION,c as CROPPER_CANVAS,i as CROPPER_CROSSHAIR,s as CROPPER_GIRD,u as CROPPER_HANDLE,a as CROPPER_IMAGE,f as CROPPER_SELECTION,d as CROPPER_SHADE,p as CROPPER_VIEWER,D as EVENT_ACTION,F as EVENT_ACTION_END,U as EVENT_ACTION_MOVE,X as EVENT_ACTION_START,Y as EVENT_CHANGE,S as EVENT_ERROR,T as EVENT_KEYDOWN,k as EVENT_LOAD,M as EVENT_POINTER_DOWN,A as EVENT_POINTER_MOVE,R as EVENT_POINTER_UP,x as EVENT_RESIZE,L as EVENT_TOUCH_END,N as EVENT_TOUCH_MOVE,I as EVENT_TOUCH_START,Z as EVENT_TRANSFORM,B as EVENT_WHEEL,o as HAS_POINTER_EVENT,e as IS_BROWSER,n as IS_TOUCH_DEVICE,r as NAMESPACE,t as WINDOW,fe as emit,we as getAdjustedSizes,le as getOffset,ee as isElement,_ as isFunction,G as isNaN,H as isNumber,Q as isObject,W as isPlainObject,J as isPositiveNumber,q as isString,K as isUndefined,ve as multiplyMatrices,pe as nextTick,ie as off,se as on,ue as once,me as toAngleInRadian,re as toCamelCase,ne as toKebabCase};
+const e="undefined"!=typeof window&&void 0!==window.document,t=e?window:{},n=!!e&&"ontouchstart"in t.document.documentElement,o=!!e&&"PointerEvent"in t,r="cropper",c=`${r}-canvas`,i=`${r}-crosshair`,s=`${r}-grid`,u=`${r}-handle`,a=`${r}-image`,f=`${r}-selection`,d=`${r}-shade`,p=`${r}-viewer`,l="select",h="move",m="scale",g="rotate",w="transform",v="none",b="n-resize",y="e-resize",z="s-resize",$="w-resize",O="ne-resize",E="nw-resize",P="se-resize",j="sw-resize",N="action",C=n?"touchend touchcancel":"mouseup",L=n?"touchmove":"mousemove",I=n?"touchstart":"mousedown",M=o?"pointerdown":I,R=o?"pointermove":L,T=o?"pointerup pointercancel":C,A="error",D="keydown",S="load",k="resize",x="wheel",B="action",F="actionend",U="actionmove",X="actionstart",Y="change",Z="transform";function q(e){return"string"==typeof e}const G=Number.isNaN||t.isNaN;function H(e){return"number"==typeof e&&!G(e)}function J(e){return H(e)&&e>0&&e<1/0}function K(e){return void 0===e}function Q(e){return"object"==typeof e&&null!==e}const{hasOwnProperty:V}=Object.prototype;function W(e){if(!Q(e))return!1;try{const{constructor:t}=e,{prototype:n}=t;return t&&n&&V.call(n,"isPrototypeOf")}catch(e){return!1}}function _(e){return"function"==typeof e}function ee(e){return"object"==typeof e&&null!==e&&1===e.nodeType}const te=/([a-z\d])([A-Z])/g;function ne(e){return String(e).replace(te,"$1-$2").toLowerCase()}const oe=/-[A-z\d]/g;function re(e){return e.replace(oe,(e=>e.slice(1).toUpperCase()))}const ce=/\s\s*/;function ie(e,t,n,o){t.trim().split(ce).forEach((t=>{e.removeEventListener(t,n,o)}))}function se(e,t,n,o){t.trim().split(ce).forEach((t=>{e.addEventListener(t,n,o)}))}function ue(e,t,n,o){se(e,t,n,Object.assign(Object.assign({},o),{once:!0}))}const ae={bubbles:!0,cancelable:!0,composed:!0};function fe(e,t,n,o){return e.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},ae),{detail:n}),o)))}function de(e){if("function"==typeof e.composedPath){return e.composedPath().find(ee)||e.target}return e.target}const pe=Promise.resolve();function le(e,t){return t?pe.then(e?t.bind(e):t):pe}function he(e){const t=e.getRootNode();switch(t.nodeType){case 1:return t.ownerDocument;case 9:case 11:return t}return null}function me(e){const{documentElement:n}=e.ownerDocument,o=e.getBoundingClientRect();return{left:o.left+(t.pageXOffset-n.clientLeft),top:o.top+(t.pageYOffset-n.clientTop)}}const ge=/deg|g?rad|turn$/i;function we(e){const t=parseFloat(e)||0;if(0!==t){const[n="rad"]=String(e).match(ge)||[];switch(n.toLowerCase()){case"deg":return t/360*(2*Math.PI);case"grad":return t/400*(2*Math.PI);case"turn":return t*(2*Math.PI)}}return t}const ve="contain";function be(e,t=ve){const{aspectRatio:n}=e;let{width:o,height:r}=e;const c=J(o),i=J(r);if(c&&i){const e=r*n;t===ve&&e>o||"cover"===t&&e<o?r=o/n:o=r*n}else c?r=o/n:i&&(o=r*n);return{width:o,height:r}}function ye(e,...t){if(0===t.length)return e;const[n,o,r,c,i,s]=e,[u,a,f,d,p,l]=t[0];return ye(e=[n*u+r*a,o*u+c*a,n*f+r*d,o*f+c*d,n*p+r*l+i,o*p+c*l+s],...t.slice(1))}export{h as ACTION_MOVE,v as ACTION_NONE,y as ACTION_RESIZE_EAST,b as ACTION_RESIZE_NORTH,O as ACTION_RESIZE_NORTHEAST,E as ACTION_RESIZE_NORTHWEST,z as ACTION_RESIZE_SOUTH,P as ACTION_RESIZE_SOUTHEAST,j as ACTION_RESIZE_SOUTHWEST,$ as ACTION_RESIZE_WEST,g as ACTION_ROTATE,m as ACTION_SCALE,l as ACTION_SELECT,w as ACTION_TRANSFORM,N as ATTRIBUTE_ACTION,c as CROPPER_CANVAS,i as CROPPER_CROSSHAIR,s as CROPPER_GIRD,u as CROPPER_HANDLE,a as CROPPER_IMAGE,f as CROPPER_SELECTION,d as CROPPER_SHADE,p as CROPPER_VIEWER,B as EVENT_ACTION,F as EVENT_ACTION_END,U as EVENT_ACTION_MOVE,X as EVENT_ACTION_START,Y as EVENT_CHANGE,A as EVENT_ERROR,D as EVENT_KEYDOWN,S as EVENT_LOAD,M as EVENT_POINTER_DOWN,R as EVENT_POINTER_MOVE,T as EVENT_POINTER_UP,k as EVENT_RESIZE,C as EVENT_TOUCH_END,L as EVENT_TOUCH_MOVE,I as EVENT_TOUCH_START,Z as EVENT_TRANSFORM,x as EVENT_WHEEL,o as HAS_POINTER_EVENT,e as IS_BROWSER,n as IS_TOUCH_DEVICE,r as NAMESPACE,t as WINDOW,fe as emit,be as getAdjustedSizes,de as getComposedPathTarget,me as getOffset,he as getRootDocument,ee as isElement,_ as isFunction,G as isNaN,H as isNumber,Q as isObject,W as isPlainObject,J as isPositiveNumber,q as isString,K as isUndefined,ye as multiplyMatrices,le as nextTick,ie as off,se as on,ue as once,we as toAngleInRadian,re as toCamelCase,ne as toKebabCase};

dist/utils.esm.raw.js

@@ -202,2 +202,16 @@ const IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
 }
+/**
+ * Get the real event target by checking composed path.
+ * This is useful when dealing with events that can cross shadow DOM boundaries.
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath}
+ * @param {Event} event The event object.
+ * @returns {EventTarget | null} The first element in the composed path, or the original event target.
+ */
+function getComposedPathTarget(event) {
+    if (typeof event.composedPath === 'function') {
+        const path = event.composedPath();
+        return path.find(isElement) || event.target;
+    }
+    return event.target;
+}
 const resolvedPromise = Promise.resolve();
@@ -216,2 +230,19 @@ /**
 /**
+ * Get the root document node.
+ * @param {Element} element The target element.
+ * @returns {Document|DocumentFragment|null} The document node.
+ */
+function getRootDocument(element) {
+    const rootNode = element.getRootNode();
+    switch (rootNode.nodeType) {
+        case 1:
+            return rootNode.ownerDocument;
+        case 9:
+            return rootNode;
+        case 11:
+            return rootNode;
+    }
+    return null;
+}
+/**
  * Get the offset base on the document.
@@ -311,2 +342,2 @@ * @param {Element} element The target element.
 
-export { ACTION_MOVE, ACTION_NONE, ACTION_RESIZE_EAST, ACTION_RESIZE_NORTH, ACTION_RESIZE_NORTHEAST, ACTION_RESIZE_NORTHWEST, ACTION_RESIZE_SOUTH, ACTION_RESIZE_SOUTHEAST, ACTION_RESIZE_SOUTHWEST, ACTION_RESIZE_WEST, ACTION_ROTATE, ACTION_SCALE, ACTION_SELECT, ACTION_TRANSFORM, ATTRIBUTE_ACTION, CROPPER_CANVAS, CROPPER_CROSSHAIR, CROPPER_GIRD, CROPPER_HANDLE, CROPPER_IMAGE, CROPPER_SELECTION, CROPPER_SHADE, CROPPER_VIEWER, EVENT_ACTION, EVENT_ACTION_END, EVENT_ACTION_MOVE, EVENT_ACTION_START, EVENT_CHANGE, EVENT_ERROR, EVENT_KEYDOWN, EVENT_LOAD, EVENT_POINTER_DOWN, EVENT_POINTER_MOVE, EVENT_POINTER_UP, EVENT_RESIZE, EVENT_TOUCH_END, EVENT_TOUCH_MOVE, EVENT_TOUCH_START, EVENT_TRANSFORM, EVENT_WHEEL, HAS_POINTER_EVENT, IS_BROWSER, IS_TOUCH_DEVICE, NAMESPACE, WINDOW, emit, getAdjustedSizes, getOffset, isElement, isFunction, isNaN, isNumber, isObject, isPlainObject, isPositiveNumber, isString, isUndefined, multiplyMatrices, nextTick, off, on, once, toAngleInRadian, toCamelCase, toKebabCase };
+export { ACTION_MOVE, ACTION_NONE, ACTION_RESIZE_EAST, ACTION_RESIZE_NORTH, ACTION_RESIZE_NORTHEAST, ACTION_RESIZE_NORTHWEST, ACTION_RESIZE_SOUTH, ACTION_RESIZE_SOUTHEAST, ACTION_RESIZE_SOUTHWEST, ACTION_RESIZE_WEST, ACTION_ROTATE, ACTION_SCALE, ACTION_SELECT, ACTION_TRANSFORM, ATTRIBUTE_ACTION, CROPPER_CANVAS, CROPPER_CROSSHAIR, CROPPER_GIRD, CROPPER_HANDLE, CROPPER_IMAGE, CROPPER_SELECTION, CROPPER_SHADE, CROPPER_VIEWER, EVENT_ACTION, EVENT_ACTION_END, EVENT_ACTION_MOVE, EVENT_ACTION_START, EVENT_CHANGE, EVENT_ERROR, EVENT_KEYDOWN, EVENT_LOAD, EVENT_POINTER_DOWN, EVENT_POINTER_MOVE, EVENT_POINTER_UP, EVENT_RESIZE, EVENT_TOUCH_END, EVENT_TOUCH_MOVE, EVENT_TOUCH_START, EVENT_TRANSFORM, EVENT_WHEEL, HAS_POINTER_EVENT, IS_BROWSER, IS_TOUCH_DEVICE, NAMESPACE, WINDOW, emit, getAdjustedSizes, getComposedPathTarget, getOffset, getRootDocument, isElement, isFunction, isNaN, isNumber, isObject, isPlainObject, isPositiveNumber, isString, isUndefined, multiplyMatrices, nextTick, off, on, once, toAngleInRadian, toCamelCase, toKebabCase };

dist/utils.js

@@ -208,2 +208,16 @@ (function (global, factory) {
     }
+    /**
+     * Get the real event target by checking composed path.
+     * This is useful when dealing with events that can cross shadow DOM boundaries.
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath}
+     * @param {Event} event The event object.
+     * @returns {EventTarget | null} The first element in the composed path, or the original event target.
+     */
+    function getComposedPathTarget(event) {
+        if (typeof event.composedPath === 'function') {
+            const path = event.composedPath();
+            return path.find(isElement) || event.target;
+        }
+        return event.target;
+    }
     const resolvedPromise = Promise.resolve();
@@ -222,2 +236,19 @@ /**
     /**
+     * Get the root document node.
+     * @param {Element} element The target element.
+     * @returns {Document|DocumentFragment|null} The document node.
+     */
+    function getRootDocument(element) {
+        const rootNode = element.getRootNode();
+        switch (rootNode.nodeType) {
+            case 1:
+                return rootNode.ownerDocument;
+            case 9:
+                return rootNode;
+            case 11:
+                return rootNode;
+        }
+        return null;
+    }
+    /**
      * Get the offset base on the document.
@@ -364,3 +395,5 @@ * @param {Element} element The target element.
     exports.getAdjustedSizes = getAdjustedSizes;
+    exports.getComposedPathTarget = getComposedPathTarget;
     exports.getOffset = getOffset;
+    exports.getRootDocument = getRootDocument;
     exports.isElement = isElement;
@@ -367,0 +400,0 @@ exports.isFunction = isFunction;

dist/utils.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).CropperUtils={})}(this,(function(e){"use strict";const t="undefined"!=typeof window&&void 0!==window.document,n=t?window:{},o=!!t&&"ontouchstart"in n.document.documentElement,i=!!t&&"PointerEvent"in n,r="cropper",s=`${r}-canvas`,c=`${r}-crosshair`,E=`${r}-grid`,u=`${r}-handle`,a=`${r}-image`,T=`${r}-selection`,O=`${r}-shade`,N=`${r}-viewer`,_=o?"touchend touchcancel":"mouseup",f=o?"touchmove":"mousemove",d=o?"touchstart":"mousedown",R=i?"pointerdown":d,l=i?"pointermove":f,C=i?"pointerup pointercancel":_;const p=Number.isNaN||n.isNaN;function I(e){return"number"==typeof e&&!p(e)}function A(e){return I(e)&&e>0&&e<1/0}function S(e){return"object"==typeof e&&null!==e}const{hasOwnProperty:m}=Object.prototype;const P=/([a-z\d])([A-Z])/g;const h=/-[A-z\d]/g;const g=/\s\s*/;function b(e,t,n,o){t.trim().split(g).forEach((t=>{e.addEventListener(t,n,o)}))}const V={bubbles:!0,cancelable:!0,composed:!0};const w=Promise.resolve();const v=/deg|g?rad|turn$/i;const y="contain";e.ACTION_MOVE="move",e.ACTION_NONE="none",e.ACTION_RESIZE_EAST="e-resize",e.ACTION_RESIZE_NORTH="n-resize",e.ACTION_RESIZE_NORTHEAST="ne-resize",e.ACTION_RESIZE_NORTHWEST="nw-resize",e.ACTION_RESIZE_SOUTH="s-resize",e.ACTION_RESIZE_SOUTHEAST="se-resize",e.ACTION_RESIZE_SOUTHWEST="sw-resize",e.ACTION_RESIZE_WEST="w-resize",e.ACTION_ROTATE="rotate",e.ACTION_SCALE="scale",e.ACTION_SELECT="select",e.ACTION_TRANSFORM="transform",e.ATTRIBUTE_ACTION="action",e.CROPPER_CANVAS=s,e.CROPPER_CROSSHAIR=c,e.CROPPER_GIRD=E,e.CROPPER_HANDLE=u,e.CROPPER_IMAGE=a,e.CROPPER_SELECTION=T,e.CROPPER_SHADE=O,e.CROPPER_VIEWER=N,e.EVENT_ACTION="action",e.EVENT_ACTION_END="actionend",e.EVENT_ACTION_MOVE="actionmove",e.EVENT_ACTION_START="actionstart",e.EVENT_CHANGE="change",e.EVENT_ERROR="error",e.EVENT_KEYDOWN="keydown",e.EVENT_LOAD="load",e.EVENT_POINTER_DOWN=R,e.EVENT_POINTER_MOVE=l,e.EVENT_POINTER_UP=C,e.EVENT_RESIZE="resize",e.EVENT_TOUCH_END=_,e.EVENT_TOUCH_MOVE=f,e.EVENT_TOUCH_START=d,e.EVENT_TRANSFORM="transform",e.EVENT_WHEEL="wheel",e.HAS_POINTER_EVENT=i,e.IS_BROWSER=t,e.IS_TOUCH_DEVICE=o,e.NAMESPACE=r,e.WINDOW=n,e.emit=function(e,t,n,o){return e.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},V),{detail:n}),o)))},e.getAdjustedSizes=function(e,t=y){const{aspectRatio:n}=e;let{width:o,height:i}=e;const r=A(o),s=A(i);if(r&&s){const e=i*n;t===y&&e>o||"cover"===t&&e<o?i=o/n:o=i*n}else r?i=o/n:s&&(o=i*n);return{width:o,height:i}},e.getOffset=function(e){const{documentElement:t}=e.ownerDocument,o=e.getBoundingClientRect();return{left:o.left+(n.pageXOffset-t.clientLeft),top:o.top+(n.pageYOffset-t.clientTop)}},e.isElement=function(e){return"object"==typeof e&&null!==e&&1===e.nodeType},e.isFunction=function(e){return"function"==typeof e},e.isNaN=p,e.isNumber=I,e.isObject=S,e.isPlainObject=function(e){if(!S(e))return!1;try{const{constructor:t}=e,{prototype:n}=t;return t&&n&&m.call(n,"isPrototypeOf")}catch(e){return!1}},e.isPositiveNumber=A,e.isString=function(e){return"string"==typeof e},e.isUndefined=function(e){return void 0===e},e.multiplyMatrices=function e(t,...n){if(0===n.length)return t;const[o,i,r,s,c,E]=t,[u,a,T,O,N,_]=n[0];return e(t=[o*u+r*a,i*u+s*a,o*T+r*O,i*T+s*O,o*N+r*_+c,i*N+s*_+E],...n.slice(1))},e.nextTick=function(e,t){return t?w.then(e?t.bind(e):t):w},e.off=function(e,t,n,o){t.trim().split(g).forEach((t=>{e.removeEventListener(t,n,o)}))},e.on=b,e.once=function(e,t,n,o){b(e,t,n,Object.assign(Object.assign({},o),{once:!0}))},e.toAngleInRadian=function(e){const t=parseFloat(e)||0;if(0!==t){const[n="rad"]=String(e).match(v)||[];switch(n.toLowerCase()){case"deg":return t/360*(2*Math.PI);case"grad":return t/400*(2*Math.PI);case"turn":return t*(2*Math.PI)}}return t},e.toCamelCase=function(e){return e.replace(h,(e=>e.slice(1).toUpperCase()))},e.toKebabCase=function(e){return String(e).replace(P,"$1-$2").toLowerCase()},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).CropperUtils={})}(this,(function(e){"use strict";const t="undefined"!=typeof window&&void 0!==window.document,n=t?window:{},o=!!t&&"ontouchstart"in n.document.documentElement,r=!!t&&"PointerEvent"in n,i="cropper",c=`${i}-canvas`,s=`${i}-crosshair`,E=`${i}-grid`,u=`${i}-handle`,a=`${i}-image`,T=`${i}-selection`,O=`${i}-shade`,f=`${i}-viewer`,N=o?"touchend touchcancel":"mouseup",_=o?"touchmove":"mousemove",d=o?"touchstart":"mousedown",R=r?"pointerdown":d,l=r?"pointermove":_,p=r?"pointerup pointercancel":N;const C=Number.isNaN||n.isNaN;function I(e){return"number"==typeof e&&!C(e)}function A(e){return I(e)&&e>0&&e<1/0}function m(e){return"object"==typeof e&&null!==e}const{hasOwnProperty:S}=Object.prototype;function g(e){return"object"==typeof e&&null!==e&&1===e.nodeType}const h=/([a-z\d])([A-Z])/g;const P=/-[A-z\d]/g;const b=/\s\s*/;function V(e,t,n,o){t.trim().split(b).forEach((t=>{e.addEventListener(t,n,o)}))}const w={bubbles:!0,cancelable:!0,composed:!0};const y=Promise.resolve();const v=/deg|g?rad|turn$/i;const H="contain";e.ACTION_MOVE="move",e.ACTION_NONE="none",e.ACTION_RESIZE_EAST="e-resize",e.ACTION_RESIZE_NORTH="n-resize",e.ACTION_RESIZE_NORTHEAST="ne-resize",e.ACTION_RESIZE_NORTHWEST="nw-resize",e.ACTION_RESIZE_SOUTH="s-resize",e.ACTION_RESIZE_SOUTHEAST="se-resize",e.ACTION_RESIZE_SOUTHWEST="sw-resize",e.ACTION_RESIZE_WEST="w-resize",e.ACTION_ROTATE="rotate",e.ACTION_SCALE="scale",e.ACTION_SELECT="select",e.ACTION_TRANSFORM="transform",e.ATTRIBUTE_ACTION="action",e.CROPPER_CANVAS=c,e.CROPPER_CROSSHAIR=s,e.CROPPER_GIRD=E,e.CROPPER_HANDLE=u,e.CROPPER_IMAGE=a,e.CROPPER_SELECTION=T,e.CROPPER_SHADE=O,e.CROPPER_VIEWER=f,e.EVENT_ACTION="action",e.EVENT_ACTION_END="actionend",e.EVENT_ACTION_MOVE="actionmove",e.EVENT_ACTION_START="actionstart",e.EVENT_CHANGE="change",e.EVENT_ERROR="error",e.EVENT_KEYDOWN="keydown",e.EVENT_LOAD="load",e.EVENT_POINTER_DOWN=R,e.EVENT_POINTER_MOVE=l,e.EVENT_POINTER_UP=p,e.EVENT_RESIZE="resize",e.EVENT_TOUCH_END=N,e.EVENT_TOUCH_MOVE=_,e.EVENT_TOUCH_START=d,e.EVENT_TRANSFORM="transform",e.EVENT_WHEEL="wheel",e.HAS_POINTER_EVENT=r,e.IS_BROWSER=t,e.IS_TOUCH_DEVICE=o,e.NAMESPACE=i,e.WINDOW=n,e.emit=function(e,t,n,o){return e.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},w),{detail:n}),o)))},e.getAdjustedSizes=function(e,t=H){const{aspectRatio:n}=e;let{width:o,height:r}=e;const i=A(o),c=A(r);if(i&&c){const e=r*n;t===H&&e>o||"cover"===t&&e<o?r=o/n:o=r*n}else i?r=o/n:c&&(o=r*n);return{width:o,height:r}},e.getComposedPathTarget=function(e){if("function"==typeof e.composedPath){return e.composedPath().find(g)||e.target}return e.target},e.getOffset=function(e){const{documentElement:t}=e.ownerDocument,o=e.getBoundingClientRect();return{left:o.left+(n.pageXOffset-t.clientLeft),top:o.top+(n.pageYOffset-t.clientTop)}},e.getRootDocument=function(e){const t=e.getRootNode();switch(t.nodeType){case 1:return t.ownerDocument;case 9:case 11:return t}return null},e.isElement=g,e.isFunction=function(e){return"function"==typeof e},e.isNaN=C,e.isNumber=I,e.isObject=m,e.isPlainObject=function(e){if(!m(e))return!1;try{const{constructor:t}=e,{prototype:n}=t;return t&&n&&S.call(n,"isPrototypeOf")}catch(e){return!1}},e.isPositiveNumber=A,e.isString=function(e){return"string"==typeof e},e.isUndefined=function(e){return void 0===e},e.multiplyMatrices=function e(t,...n){if(0===n.length)return t;const[o,r,i,c,s,E]=t,[u,a,T,O,f,N]=n[0];return e(t=[o*u+i*a,r*u+c*a,o*T+i*O,r*T+c*O,o*f+i*N+s,r*f+c*N+E],...n.slice(1))},e.nextTick=function(e,t){return t?y.then(e?t.bind(e):t):y},e.off=function(e,t,n,o){t.trim().split(b).forEach((t=>{e.removeEventListener(t,n,o)}))},e.on=V,e.once=function(e,t,n,o){V(e,t,n,Object.assign(Object.assign({},o),{once:!0}))},e.toAngleInRadian=function(e){const t=parseFloat(e)||0;if(0!==t){const[n="rad"]=String(e).match(v)||[];switch(n.toLowerCase()){case"deg":return t/360*(2*Math.PI);case"grad":return t/400*(2*Math.PI);case"turn":return t*(2*Math.PI)}}return t},e.toCamelCase=function(e){return e.replace(P,(e=>e.slice(1).toUpperCase()))},e.toKebabCase=function(e){return String(e).replace(h,"$1-$2").toLowerCase()},Object.defineProperty(e,"__esModule",{value:!0})}));

dist/utils.raw.js

@@ -208,2 +208,16 @@ (function (global, factory) {
     }
+    /**
+     * Get the real event target by checking composed path.
+     * This is useful when dealing with events that can cross shadow DOM boundaries.
+     * {@link https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath}
+     * @param {Event} event The event object.
+     * @returns {EventTarget | null} The first element in the composed path, or the original event target.
+     */
+    function getComposedPathTarget(event) {
+        if (typeof event.composedPath === 'function') {
+            const path = event.composedPath();
+            return path.find(isElement) || event.target;
+        }
+        return event.target;
+    }
     const resolvedPromise = Promise.resolve();
@@ -222,2 +236,19 @@ /**
     /**
+     * Get the root document node.
+     * @param {Element} element The target element.
+     * @returns {Document|DocumentFragment|null} The document node.
+     */
+    function getRootDocument(element) {
+        const rootNode = element.getRootNode();
+        switch (rootNode.nodeType) {
+            case 1:
+                return rootNode.ownerDocument;
+            case 9:
+                return rootNode;
+            case 11:
+                return rootNode;
+        }
+        return null;
+    }
+    /**
      * Get the offset base on the document.
@@ -364,3 +395,5 @@ * @param {Element} element The target element.
     exports.getAdjustedSizes = getAdjustedSizes;
+    exports.getComposedPathTarget = getComposedPathTarget;
     exports.getOffset = getOffset;
+    exports.getRootDocument = getRootDocument;
     exports.isElement = isElement;
@@ -367,0 +400,0 @@ exports.isFunction = isFunction;

package.json

 {
   "name": "@cropper/utils",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A series of common constants and utility functions for Cropper.",
@@ -65,3 +65,3 @@ "main": "dist/utils.raw.js",
   },
-  "gitHead": "6b8e5ff146012939d08b13fae360a1a6ad2dda29"
+  "gitHead": "268be1a7f91fffa9d6676388f3e6d636780466dc"
 }

No alert changes

Improved metrics

Total package byte prevSize

83872

7.61%

Lines of code

1753

8.95%

No dependency changes