@cropper/element-viewer - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/element-viewer.d.ts

@@ -462,2 +462,12 @@ declare class CropperCanvas extends CropperElement_2_2 {
     translatable: boolean;
+    alt: string;
+    crossorigin: string;
+    decoding: string;
+    elementtiming: string;
+    fetchpriority: string;
+    loading: string;
+    referrerpolicy: string;
+    sizes: string;
+    src: string;
+    srcset: string;
     protected set $canvas(element: CropperCanvas);
@@ -464,0 +474,0 @@ protected get $canvas(): CropperCanvas;

dist/element-viewer.esm.js

@@ -122,2 +122,19 @@ const IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
 }
+/**
+ * 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;
+}
 
@@ -245,8 +262,6 @@ var style$1 = `:host([hidden]){display:none!important}`;
         });
-        const shadow = this.attachShadow({
+        const shadow = this.shadowRoot || this.attachShadow({
             mode: this.shadowRootMode || DEFAULT_SHADOW_ROOT_MODE,
         });
-        if (!this.shadowRoot) {
-            shadowRoots.set(this, shadow);
-        }
+        shadowRoots.set(this, shadow);
         styleSheets.set(this, this.$addStyles(this.$sharedStyle));
@@ -359,3 +374,3 @@ if (this.$style) {
 }
-CropperElement.$version = '2.0.0';
+CropperElement.$version = '2.1.0';
 
@@ -415,6 +430,7 @@ var style = `:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}`;
     connectedCallback() {
+        var _a, _b;
         super.connectedCallback();
         let $selection = null;
         if (this.selection) {
-            $selection = this.ownerDocument.querySelector(this.selection);
+            $selection = (_b = (_a = getRootDocument(this)) === null || _a === void 0 ? void 0 : _a.querySelector(this.selection)) !== null && _b !== void 0 ? _b : null;
         }
@@ -462,3 +478,3 @@ else {
     $handleSelectionChange(event) {
-        this.$render(event.detail);
+        this.$render(event.defaultPrevented ? this.$selection : event.detail);
     }
@@ -472,5 +488,3 @@ $handleSourceImageLoad() {
             $image.$ready(() => {
-                setTimeout(() => {
-                    this.$render();
-                }, 50);
+                this.$render();
             });
@@ -534,3 +548,6 @@ }
         if (this.$sourceImage) {
-            this.$transformImageByOffset(matrix !== null && matrix !== void 0 ? matrix : this.$sourceImage.$getTransform(), -x, -y);
+            // Transform the image by the selection offset after the next DOM update cycle
+            setTimeout(() => {
+                this.$transformImageByOffset(matrix !== null && matrix !== void 0 ? matrix : this.$sourceImage.$getTransform(), -x, -y);
+            });
         }
@@ -557,4 +574,4 @@ }
 CropperViewer.$name = CROPPER_VIEWER;
-CropperViewer.$version = '2.0.0';
+CropperViewer.$version = '2.1.0';
 
 export { RESIZE_BOTH, RESIZE_HORIZONTAL, RESIZE_NONE, RESIZE_VERTICAL, CropperViewer as default };

dist/element-viewer.esm.min.js

@@ -1,1 +0,1 @@
-const e="undefined"!=typeof window&&void 0!==window.document,t=e?window:{};e&&t.document.documentElement;const s="cropper",o=`${s}-canvas`,i=`${s}-image`,n=`${s}-selection`,a=`${s}-viewer`,r="load",h="change",c="transform",l=Number.isNaN||t.isNaN;const d=/([a-z\d])([A-Z])/g;function u(e){return String(e).replace(d,"$1-$2").toLowerCase()}const m=/-[A-z\d]/g;function $(e){return e.replace(m,(e=>e.slice(1).toUpperCase()))}const g=/\s\s*/;function b(e,t,s,o){t.trim().split(g).forEach((t=>{e.removeEventListener(t,s,o)}))}function p(e,t,s,o){t.trim().split(g).forEach((t=>{e.addEventListener(t,s,o)}))}const f={bubbles:!0,cancelable:!0,composed:!0};const S=Promise.resolve();const y=/left|top|width|height/i,w="open",v=new WeakMap,C=new WeakMap,I=new Map,k=t.document&&Array.isArray(t.document.adoptedStyleSheets)&&"replaceSync"in t.CSSStyleSheet.prototype;class T extends HTMLElement{get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}constructor(){var e,t;super(),this.shadowRootMode=w,this.slottable=!0;const s=null===(t=null===(e=Object.getPrototypeOf(this))||void 0===e?void 0:e.constructor)||void 0===t?void 0:t.$name;s&&I.set(s,this.tagName.toLowerCase())}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(e,t,s){if(Object.is(s,t))return;const o=$(e);let i=s;switch(typeof this[o]){case"boolean":i=null!==s&&"false"!==s;break;case"number":i=Number(s)}switch(this[o]=i,e){case"theme-color":{const e=C.get(this),t=this.$sharedStyle;e&&t&&(k?e.replaceSync(t):e.textContent=t);break}}}$propertyChangedCallback(e,t,s){if(!Object.is(s,t))switch(e=u(e),typeof s){case"boolean":!0===s?this.hasAttribute(e)||this.setAttribute(e,""):this.removeAttribute(e);break;case"number":s=l(s)?"":String(s);default:s?this.getAttribute(e)!==s&&this.setAttribute(e,s):this.removeAttribute(e)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((e=>{const t=$(e);let s=this[t];(function(e){return void 0===e})(s)||this.$propertyChangedCallback(t,void 0,s),Object.defineProperty(this,t,{enumerable:!0,configurable:!0,get:()=>s,set(e){const o=s;s=e,this.$propertyChangedCallback(t,o,e)}})}));const e=this.attachShadow({mode:this.shadowRootMode||w});if(this.shadowRoot||v.set(this,e),C.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const t=document.createElement("template");t.innerHTML=this.$template,e.appendChild(t.content)}if(this.slottable){const t=document.createElement("slot");e.appendChild(t)}}disconnectedCallback(){C.has(this)&&C.delete(this),v.has(this)&&v.delete(this)}$getTagNameOf(e){var t;return null!==(t=I.get(e))&&void 0!==t?t:e}$setStyles(e){return Object.keys(e).forEach((t=>{let s=e[t];(function(e){return"number"==typeof e&&!l(e)})(s)&&(s=0!==s&&y.test(t)?`${s}px`:String(s)),this.style[t]=s})),this}$getShadowRoot(){return this.shadowRoot||v.get(this)}$addStyles(e){let t;const s=this.$getShadowRoot();return k?(t=new CSSStyleSheet,t.replaceSync(e),s.adoptedStyleSheets=s.adoptedStyleSheets.concat(t)):(t=document.createElement("style"),t.textContent=e,s.appendChild(t)),t}$emit(e,t,s){return function(e,t,s,o){return e.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},f),{detail:s}),o)))}(this,e,t,s)}$nextTick(e){return function(e,t){return t?S.then(e?t.bind(e):t):S}(this,e)}static $define(s,o){var i;"object"==typeof(i=s)&&null!==i&&(o=s,s=""),s||(s=this.$name||this.name),s=u(s),e&&t.customElements&&!t.customElements.get(s)&&customElements.define(s,this,o)}}T.$version="2.0.0";const A=new WeakMap,O=new WeakMap,E=new WeakMap,L=new WeakMap,N="both",j="horizontal",x="vertical",M="none";class W extends T{constructor(){super(...arguments),this.$onSelectionChange=null,this.$onSourceImageLoad=null,this.$onSourceImageTransform=null,this.$scale=1,this.$style=":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}",this.resize=x,this.selection="",this.slottable=!1}set $image(e){O.set(this,e)}get $image(){return O.get(this)}set $sourceImage(e){L.set(this,e)}get $sourceImage(){return L.get(this)}set $canvas(e){A.set(this,e)}get $canvas(){return A.get(this)}set $selection(e){E.set(this,e)}get $selection(){return E.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){super.connectedCallback();let e=null;if(e=this.selection?this.ownerDocument.querySelector(this.selection):this.closest(this.$getTagNameOf(n)),"object"==typeof(t=e)&&null!==t&&1===t.nodeType){this.$selection=e,this.$onSelectionChange=this.$handleSelectionChange.bind(this),p(e,h,this.$onSelectionChange);const t=e.closest(this.$getTagNameOf(o));if(t){this.$canvas=t;const e=t.querySelector(this.$getTagNameOf(i));e&&(this.$sourceImage=e,this.$image=e.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageLoad=this.$handleSourceImageLoad.bind(this),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),p(e.$image,r,this.$onSourceImageLoad),p(e,c,this.$onSourceImageTransform))}this.$render()}var t}disconnectedCallback(){const{$selection:e,$sourceImage:t}=this;e&&this.$onSelectionChange&&(b(e,h,this.$onSelectionChange),this.$onSelectionChange=null),t&&this.$onSourceImageLoad&&(b(t.$image,r,this.$onSourceImageLoad),this.$onSourceImageLoad=null),t&&this.$onSourceImageTransform&&(b(t,c,this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(e){this.$render(e.detail)}$handleSourceImageLoad(){const{$image:e,$sourceImage:t}=this,s=e.getAttribute("src"),o=t.getAttribute("src");o&&o!==s&&(e.setAttribute("src",o),e.$ready((()=>{setTimeout((()=>{this.$render()}),50)})))}$handleSourceImageTransform(e){this.$render(void 0,e.detail.matrix)}$render(e,t){const{$canvas:s,$selection:o}=this;e||o.hidden||(e=o),(!e||0===e.x&&0===e.y&&0===e.width&&0===e.height)&&(e={x:0,y:0,width:s.offsetWidth,height:s.offsetHeight});const{x:i,y:n,width:a,height:r}=e,h={},{clientWidth:c,clientHeight:l}=this;let d=c,u=l,m=NaN;switch(this.resize){case N:m=1,d=a,u=r,h.width=a,h.height=r;break;case j:m=r>0?l/r:0,d=a*m,h.width=d;break;case x:m=a>0?c/a:0,u=r*m,h.height=u;break;default:c>0?m=a>0?c/a:0:l>0&&(m=r>0?l/r:0)}this.$scale=m,this.$setStyles(h),this.$sourceImage&&this.$transformImageByOffset(null!=t?t:this.$sourceImage.$getTransform(),-i,-n)}$transformImageByOffset(e,t,s){const{$image:o,$scale:i,$sourceImage:n}=this;if(n&&o&&i>=0){const[n,a,r,h,c,l]=e,d=(t*h-r*s)/(n*h-r*a),u=(s*n-a*t)/(n*h-r*a),m=n*d+r*u+c,$=a*d+h*u+l;o.$ready((e=>{this.$setStyles.call(o,{width:e.naturalWidth*i,height:e.naturalHeight*i})})),o.$setTransform(n,a,r,h,m*i,$*i)}}}W.$name=a,W.$version="2.0.0";export{N as RESIZE_BOTH,j as RESIZE_HORIZONTAL,M as RESIZE_NONE,x as RESIZE_VERTICAL,W as default};
+const e="undefined"!=typeof window&&void 0!==window.document,t=e?window:{};e&&t.document.documentElement;const s="cropper",o=`${s}-canvas`,n=`${s}-image`,i=`${s}-selection`,a=`${s}-viewer`,r="load",h="change",c="transform",l=Number.isNaN||t.isNaN;const d=/([a-z\d])([A-Z])/g;function u(e){return String(e).replace(d,"$1-$2").toLowerCase()}const m=/-[A-z\d]/g;function $(e){return e.replace(m,(e=>e.slice(1).toUpperCase()))}const g=/\s\s*/;function b(e,t,s,o){t.trim().split(g).forEach((t=>{e.removeEventListener(t,s,o)}))}function p(e,t,s,o){t.trim().split(g).forEach((t=>{e.addEventListener(t,s,o)}))}const f={bubbles:!0,cancelable:!0,composed:!0};const S=Promise.resolve();const y=/left|top|width|height/i,w="open",v=new WeakMap,C=new WeakMap,I=new Map,k=t.document&&Array.isArray(t.document.adoptedStyleSheets)&&"replaceSync"in t.CSSStyleSheet.prototype;class T extends HTMLElement{get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}constructor(){var e,t;super(),this.shadowRootMode=w,this.slottable=!0;const s=null===(t=null===(e=Object.getPrototypeOf(this))||void 0===e?void 0:e.constructor)||void 0===t?void 0:t.$name;s&&I.set(s,this.tagName.toLowerCase())}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(e,t,s){if(Object.is(s,t))return;const o=$(e);let n=s;switch(typeof this[o]){case"boolean":n=null!==s&&"false"!==s;break;case"number":n=Number(s)}switch(this[o]=n,e){case"theme-color":{const e=C.get(this),t=this.$sharedStyle;e&&t&&(k?e.replaceSync(t):e.textContent=t);break}}}$propertyChangedCallback(e,t,s){if(!Object.is(s,t))switch(e=u(e),typeof s){case"boolean":!0===s?this.hasAttribute(e)||this.setAttribute(e,""):this.removeAttribute(e);break;case"number":s=l(s)?"":String(s);default:s?this.getAttribute(e)!==s&&this.setAttribute(e,s):this.removeAttribute(e)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((e=>{const t=$(e);let s=this[t];(function(e){return void 0===e})(s)||this.$propertyChangedCallback(t,void 0,s),Object.defineProperty(this,t,{enumerable:!0,configurable:!0,get:()=>s,set(e){const o=s;s=e,this.$propertyChangedCallback(t,o,e)}})}));const e=this.shadowRoot||this.attachShadow({mode:this.shadowRootMode||w});if(v.set(this,e),C.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const t=document.createElement("template");t.innerHTML=this.$template,e.appendChild(t.content)}if(this.slottable){const t=document.createElement("slot");e.appendChild(t)}}disconnectedCallback(){C.has(this)&&C.delete(this),v.has(this)&&v.delete(this)}$getTagNameOf(e){var t;return null!==(t=I.get(e))&&void 0!==t?t:e}$setStyles(e){return Object.keys(e).forEach((t=>{let s=e[t];(function(e){return"number"==typeof e&&!l(e)})(s)&&(s=0!==s&&y.test(t)?`${s}px`:String(s)),this.style[t]=s})),this}$getShadowRoot(){return this.shadowRoot||v.get(this)}$addStyles(e){let t;const s=this.$getShadowRoot();return k?(t=new CSSStyleSheet,t.replaceSync(e),s.adoptedStyleSheets=s.adoptedStyleSheets.concat(t)):(t=document.createElement("style"),t.textContent=e,s.appendChild(t)),t}$emit(e,t,s){return function(e,t,s,o){return e.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},f),{detail:s}),o)))}(this,e,t,s)}$nextTick(e){return function(e,t){return t?S.then(e?t.bind(e):t):S}(this,e)}static $define(s,o){var n;"object"==typeof(n=s)&&null!==n&&(o=s,s=""),s||(s=this.$name||this.name),s=u(s),e&&t.customElements&&!t.customElements.get(s)&&customElements.define(s,this,o)}}T.$version="2.1.0";const A=new WeakMap,O=new WeakMap,E=new WeakMap,N=new WeakMap,L="both",j="horizontal",x="vertical",M="none";class W extends T{constructor(){super(...arguments),this.$onSelectionChange=null,this.$onSourceImageLoad=null,this.$onSourceImageTransform=null,this.$scale=1,this.$style=":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}",this.resize=x,this.selection="",this.slottable=!1}set $image(e){O.set(this,e)}get $image(){return O.get(this)}set $sourceImage(e){N.set(this,e)}get $sourceImage(){return N.get(this)}set $canvas(e){A.set(this,e)}get $canvas(){return A.get(this)}set $selection(e){E.set(this,e)}get $selection(){return E.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){var e,t;super.connectedCallback();let s=null;if(s=this.selection?null!==(t=null===(e=function(e){const t=e.getRootNode();switch(t.nodeType){case 1:return t.ownerDocument;case 9:case 11:return t}return null}(this))||void 0===e?void 0:e.querySelector(this.selection))&&void 0!==t?t:null:this.closest(this.$getTagNameOf(i)),"object"==typeof(a=s)&&null!==a&&1===a.nodeType){this.$selection=s,this.$onSelectionChange=this.$handleSelectionChange.bind(this),p(s,h,this.$onSelectionChange);const e=s.closest(this.$getTagNameOf(o));if(e){this.$canvas=e;const t=e.querySelector(this.$getTagNameOf(n));t&&(this.$sourceImage=t,this.$image=t.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageLoad=this.$handleSourceImageLoad.bind(this),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),p(t.$image,r,this.$onSourceImageLoad),p(t,c,this.$onSourceImageTransform))}this.$render()}var a}disconnectedCallback(){const{$selection:e,$sourceImage:t}=this;e&&this.$onSelectionChange&&(b(e,h,this.$onSelectionChange),this.$onSelectionChange=null),t&&this.$onSourceImageLoad&&(b(t.$image,r,this.$onSourceImageLoad),this.$onSourceImageLoad=null),t&&this.$onSourceImageTransform&&(b(t,c,this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(e){this.$render(e.defaultPrevented?this.$selection:e.detail)}$handleSourceImageLoad(){const{$image:e,$sourceImage:t}=this,s=e.getAttribute("src"),o=t.getAttribute("src");o&&o!==s&&(e.setAttribute("src",o),e.$ready((()=>{this.$render()})))}$handleSourceImageTransform(e){this.$render(void 0,e.detail.matrix)}$render(e,t){const{$canvas:s,$selection:o}=this;e||o.hidden||(e=o),(!e||0===e.x&&0===e.y&&0===e.width&&0===e.height)&&(e={x:0,y:0,width:s.offsetWidth,height:s.offsetHeight});const{x:n,y:i,width:a,height:r}=e,h={},{clientWidth:c,clientHeight:l}=this;let d=c,u=l,m=NaN;switch(this.resize){case L:m=1,d=a,u=r,h.width=a,h.height=r;break;case j:m=r>0?l/r:0,d=a*m,h.width=d;break;case x:m=a>0?c/a:0,u=r*m,h.height=u;break;default:c>0?m=a>0?c/a:0:l>0&&(m=r>0?l/r:0)}this.$scale=m,this.$setStyles(h),this.$sourceImage&&setTimeout((()=>{this.$transformImageByOffset(null!=t?t:this.$sourceImage.$getTransform(),-n,-i)}))}$transformImageByOffset(e,t,s){const{$image:o,$scale:n,$sourceImage:i}=this;if(i&&o&&n>=0){const[i,a,r,h,c,l]=e,d=(t*h-r*s)/(i*h-r*a),u=(s*i-a*t)/(i*h-r*a),m=i*d+r*u+c,$=a*d+h*u+l;o.$ready((e=>{this.$setStyles.call(o,{width:e.naturalWidth*n,height:e.naturalHeight*n})})),o.$setTransform(i,a,r,h,m*n,$*n)}}}W.$name=a,W.$version="2.1.0";export{L as RESIZE_BOTH,j as RESIZE_HORIZONTAL,M as RESIZE_NONE,x as RESIZE_VERTICAL,W as default};

dist/element-viewer.esm.raw.js

 import CropperElement from '@cropper/element';
-import { CROPPER_VIEWER, CROPPER_SELECTION, isElement, on, EVENT_CHANGE, CROPPER_CANVAS, CROPPER_IMAGE, EVENT_LOAD, EVENT_TRANSFORM, off } from '@cropper/utils';
+import { CROPPER_VIEWER, getRootDocument, CROPPER_SELECTION, isElement, on, EVENT_CHANGE, CROPPER_CANVAS, CROPPER_IMAGE, EVENT_LOAD, EVENT_TRANSFORM, off } from '@cropper/utils';
 
@@ -57,6 +57,7 @@ var style = `:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}`;
     connectedCallback() {
+        var _a, _b;
         super.connectedCallback();
         let $selection = null;
         if (this.selection) {
-            $selection = this.ownerDocument.querySelector(this.selection);
+            $selection = (_b = (_a = getRootDocument(this)) === null || _a === void 0 ? void 0 : _a.querySelector(this.selection)) !== null && _b !== void 0 ? _b : null;
         }
@@ -104,3 +105,3 @@ else {
     $handleSelectionChange(event) {
-        this.$render(event.detail);
+        this.$render(event.defaultPrevented ? this.$selection : event.detail);
     }
@@ -114,5 +115,3 @@ $handleSourceImageLoad() {
             $image.$ready(() => {
-                setTimeout(() => {
-                    this.$render();
-                }, 50);
+                this.$render();
             });
@@ -176,3 +175,6 @@ }
         if (this.$sourceImage) {
-            this.$transformImageByOffset(matrix !== null && matrix !== void 0 ? matrix : this.$sourceImage.$getTransform(), -x, -y);
+            // Transform the image by the selection offset after the next DOM update cycle
+            setTimeout(() => {
+                this.$transformImageByOffset(matrix !== null && matrix !== void 0 ? matrix : this.$sourceImage.$getTransform(), -x, -y);
+            });
         }
@@ -199,4 +201,4 @@ }
 CropperViewer.$name = CROPPER_VIEWER;
-CropperViewer.$version = '2.0.0';
+CropperViewer.$version = '2.1.0';
 
 export { RESIZE_BOTH, RESIZE_HORIZONTAL, RESIZE_NONE, RESIZE_VERTICAL, CropperViewer as default };

dist/element-viewer.js

@@ -128,2 +128,19 @@ (function (global, factory) {
     }
+    /**
+     * 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;
+    }
 
@@ -251,8 +268,6 @@ var style$1 = `:host([hidden]){display:none!important}`;
             });
-            const shadow = this.attachShadow({
+            const shadow = this.shadowRoot || this.attachShadow({
                 mode: this.shadowRootMode || DEFAULT_SHADOW_ROOT_MODE,
             });
-            if (!this.shadowRoot) {
-                shadowRoots.set(this, shadow);
-            }
+            shadowRoots.set(this, shadow);
             styleSheets.set(this, this.$addStyles(this.$sharedStyle));
@@ -365,3 +380,3 @@ if (this.$style) {
     }
-    CropperElement.$version = '2.0.0';
+    CropperElement.$version = '2.1.0';
 
@@ -421,6 +436,7 @@ var style = `:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}`;
         connectedCallback() {
+            var _a, _b;
             super.connectedCallback();
             let $selection = null;
             if (this.selection) {
-                $selection = this.ownerDocument.querySelector(this.selection);
+                $selection = (_b = (_a = getRootDocument(this)) === null || _a === void 0 ? void 0 : _a.querySelector(this.selection)) !== null && _b !== void 0 ? _b : null;
             }
@@ -468,3 +484,3 @@ else {
         $handleSelectionChange(event) {
-            this.$render(event.detail);
+            this.$render(event.defaultPrevented ? this.$selection : event.detail);
         }
@@ -478,5 +494,3 @@ $handleSourceImageLoad() {
                 $image.$ready(() => {
-                    setTimeout(() => {
-                        this.$render();
-                    }, 50);
+                    this.$render();
                 });
@@ -540,3 +554,6 @@ }
             if (this.$sourceImage) {
-                this.$transformImageByOffset(matrix !== null && matrix !== void 0 ? matrix : this.$sourceImage.$getTransform(), -x, -y);
+                // Transform the image by the selection offset after the next DOM update cycle
+                setTimeout(() => {
+                    this.$transformImageByOffset(matrix !== null && matrix !== void 0 ? matrix : this.$sourceImage.$getTransform(), -x, -y);
+                });
             }
@@ -563,3 +580,3 @@ }
     CropperViewer.$name = CROPPER_VIEWER;
-    CropperViewer.$version = '2.0.0';
+    CropperViewer.$version = '2.1.0';
 
@@ -566,0 +583,0 @@ exports.RESIZE_BOTH = RESIZE_BOTH;

dist/element-viewer.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).CropperViewer={})}(this,(function(e){"use strict";const t="undefined"!=typeof window&&void 0!==window.document,s=t?window:{};t&&s.document.documentElement;const o="cropper",i=`${o}-canvas`,n=`${o}-image`,a=`${o}-selection`,r=`${o}-viewer`,h="load",c="change",l="transform",d=Number.isNaN||s.isNaN;const u=/([a-z\d])([A-Z])/g;function m(e){return String(e).replace(u,"$1-$2").toLowerCase()}const g=/-[A-z\d]/g;function $(e){return e.replace(g,(e=>e.slice(1).toUpperCase()))}const f=/\s\s*/;function p(e,t,s,o){t.trim().split(f).forEach((t=>{e.removeEventListener(t,s,o)}))}function b(e,t,s,o){t.trim().split(f).forEach((t=>{e.addEventListener(t,s,o)}))}const S={bubbles:!0,cancelable:!0,composed:!0};const y=Promise.resolve();const w=/left|top|width|height/i,C="open",v=new WeakMap,I=new WeakMap,E=new Map,k=s.document&&Array.isArray(s.document.adoptedStyleSheets)&&"replaceSync"in s.CSSStyleSheet.prototype;class T extends HTMLElement{get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}constructor(){var e,t;super(),this.shadowRootMode=C,this.slottable=!0;const s=null===(t=null===(e=Object.getPrototypeOf(this))||void 0===e?void 0:e.constructor)||void 0===t?void 0:t.$name;s&&E.set(s,this.tagName.toLowerCase())}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(e,t,s){if(Object.is(s,t))return;const o=$(e);let i=s;switch(typeof this[o]){case"boolean":i=null!==s&&"false"!==s;break;case"number":i=Number(s)}switch(this[o]=i,e){case"theme-color":{const e=I.get(this),t=this.$sharedStyle;e&&t&&(k?e.replaceSync(t):e.textContent=t);break}}}$propertyChangedCallback(e,t,s){if(!Object.is(s,t))switch(e=m(e),typeof s){case"boolean":!0===s?this.hasAttribute(e)||this.setAttribute(e,""):this.removeAttribute(e);break;case"number":s=d(s)?"":String(s);default:s?this.getAttribute(e)!==s&&this.setAttribute(e,s):this.removeAttribute(e)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((e=>{const t=$(e);let s=this[t];(function(e){return void 0===e})(s)||this.$propertyChangedCallback(t,void 0,s),Object.defineProperty(this,t,{enumerable:!0,configurable:!0,get:()=>s,set(e){const o=s;s=e,this.$propertyChangedCallback(t,o,e)}})}));const e=this.attachShadow({mode:this.shadowRootMode||C});if(this.shadowRoot||v.set(this,e),I.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const t=document.createElement("template");t.innerHTML=this.$template,e.appendChild(t.content)}if(this.slottable){const t=document.createElement("slot");e.appendChild(t)}}disconnectedCallback(){I.has(this)&&I.delete(this),v.has(this)&&v.delete(this)}$getTagNameOf(e){var t;return null!==(t=E.get(e))&&void 0!==t?t:e}$setStyles(e){return Object.keys(e).forEach((t=>{let s=e[t];(function(e){return"number"==typeof e&&!d(e)})(s)&&(s=0!==s&&w.test(t)?`${s}px`:String(s)),this.style[t]=s})),this}$getShadowRoot(){return this.shadowRoot||v.get(this)}$addStyles(e){let t;const s=this.$getShadowRoot();return k?(t=new CSSStyleSheet,t.replaceSync(e),s.adoptedStyleSheets=s.adoptedStyleSheets.concat(t)):(t=document.createElement("style"),t.textContent=e,s.appendChild(t)),t}$emit(e,t,s){return function(e,t,s,o){return e.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},S),{detail:s}),o)))}(this,e,t,s)}$nextTick(e){return function(e,t){return t?y.then(e?t.bind(e):t):y}(this,e)}static $define(e,o){var i;"object"==typeof(i=e)&&null!==i&&(o=e,e=""),e||(e=this.$name||this.name),e=m(e),t&&s.customElements&&!s.customElements.get(e)&&customElements.define(e,this,o)}}T.$version="2.0.0";const O=new WeakMap,A=new WeakMap,N=new WeakMap,L=new WeakMap,j="both",x="horizontal",R="vertical",M="none";class W extends T{constructor(){super(...arguments),this.$onSelectionChange=null,this.$onSourceImageLoad=null,this.$onSourceImageTransform=null,this.$scale=1,this.$style=":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}",this.resize=R,this.selection="",this.slottable=!1}set $image(e){A.set(this,e)}get $image(){return A.get(this)}set $sourceImage(e){L.set(this,e)}get $sourceImage(){return L.get(this)}set $canvas(e){O.set(this,e)}get $canvas(){return O.get(this)}set $selection(e){N.set(this,e)}get $selection(){return N.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){super.connectedCallback();let e=null;if(e=this.selection?this.ownerDocument.querySelector(this.selection):this.closest(this.$getTagNameOf(a)),"object"==typeof(t=e)&&null!==t&&1===t.nodeType){this.$selection=e,this.$onSelectionChange=this.$handleSelectionChange.bind(this),b(e,c,this.$onSelectionChange);const t=e.closest(this.$getTagNameOf(i));if(t){this.$canvas=t;const e=t.querySelector(this.$getTagNameOf(n));e&&(this.$sourceImage=e,this.$image=e.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageLoad=this.$handleSourceImageLoad.bind(this),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),b(e.$image,h,this.$onSourceImageLoad),b(e,l,this.$onSourceImageTransform))}this.$render()}var t}disconnectedCallback(){const{$selection:e,$sourceImage:t}=this;e&&this.$onSelectionChange&&(p(e,c,this.$onSelectionChange),this.$onSelectionChange=null),t&&this.$onSourceImageLoad&&(p(t.$image,h,this.$onSourceImageLoad),this.$onSourceImageLoad=null),t&&this.$onSourceImageTransform&&(p(t,l,this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(e){this.$render(e.detail)}$handleSourceImageLoad(){const{$image:e,$sourceImage:t}=this,s=e.getAttribute("src"),o=t.getAttribute("src");o&&o!==s&&(e.setAttribute("src",o),e.$ready((()=>{setTimeout((()=>{this.$render()}),50)})))}$handleSourceImageTransform(e){this.$render(void 0,e.detail.matrix)}$render(e,t){const{$canvas:s,$selection:o}=this;e||o.hidden||(e=o),(!e||0===e.x&&0===e.y&&0===e.width&&0===e.height)&&(e={x:0,y:0,width:s.offsetWidth,height:s.offsetHeight});const{x:i,y:n,width:a,height:r}=e,h={},{clientWidth:c,clientHeight:l}=this;let d=c,u=l,m=NaN;switch(this.resize){case j:m=1,d=a,u=r,h.width=a,h.height=r;break;case x:m=r>0?l/r:0,d=a*m,h.width=d;break;case R:m=a>0?c/a:0,u=r*m,h.height=u;break;default:c>0?m=a>0?c/a:0:l>0&&(m=r>0?l/r:0)}this.$scale=m,this.$setStyles(h),this.$sourceImage&&this.$transformImageByOffset(null!=t?t:this.$sourceImage.$getTransform(),-i,-n)}$transformImageByOffset(e,t,s){const{$image:o,$scale:i,$sourceImage:n}=this;if(n&&o&&i>=0){const[n,a,r,h,c,l]=e,d=(t*h-r*s)/(n*h-r*a),u=(s*n-a*t)/(n*h-r*a),m=n*d+r*u+c,g=a*d+h*u+l;o.$ready((e=>{this.$setStyles.call(o,{width:e.naturalWidth*i,height:e.naturalHeight*i})})),o.$setTransform(n,a,r,h,m*i,g*i)}}}W.$name=r,W.$version="2.0.0",e.RESIZE_BOTH=j,e.RESIZE_HORIZONTAL=x,e.RESIZE_NONE=M,e.RESIZE_VERTICAL=R,e.default=W,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).CropperViewer={})}(this,(function(e){"use strict";const t="undefined"!=typeof window&&void 0!==window.document,s=t?window:{};t&&s.document.documentElement;const o="cropper",n=`${o}-canvas`,i=`${o}-image`,a=`${o}-selection`,r=`${o}-viewer`,h="load",c="change",l="transform",d=Number.isNaN||s.isNaN;const u=/([a-z\d])([A-Z])/g;function m(e){return String(e).replace(u,"$1-$2").toLowerCase()}const g=/-[A-z\d]/g;function $(e){return e.replace(g,(e=>e.slice(1).toUpperCase()))}const f=/\s\s*/;function p(e,t,s,o){t.trim().split(f).forEach((t=>{e.removeEventListener(t,s,o)}))}function b(e,t,s,o){t.trim().split(f).forEach((t=>{e.addEventListener(t,s,o)}))}const S={bubbles:!0,cancelable:!0,composed:!0};const y=Promise.resolve();const w=/left|top|width|height/i,v="open",C=new WeakMap,I=new WeakMap,E=new Map,k=s.document&&Array.isArray(s.document.adoptedStyleSheets)&&"replaceSync"in s.CSSStyleSheet.prototype;class T extends HTMLElement{get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}constructor(){var e,t;super(),this.shadowRootMode=v,this.slottable=!0;const s=null===(t=null===(e=Object.getPrototypeOf(this))||void 0===e?void 0:e.constructor)||void 0===t?void 0:t.$name;s&&E.set(s,this.tagName.toLowerCase())}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(e,t,s){if(Object.is(s,t))return;const o=$(e);let n=s;switch(typeof this[o]){case"boolean":n=null!==s&&"false"!==s;break;case"number":n=Number(s)}switch(this[o]=n,e){case"theme-color":{const e=I.get(this),t=this.$sharedStyle;e&&t&&(k?e.replaceSync(t):e.textContent=t);break}}}$propertyChangedCallback(e,t,s){if(!Object.is(s,t))switch(e=m(e),typeof s){case"boolean":!0===s?this.hasAttribute(e)||this.setAttribute(e,""):this.removeAttribute(e);break;case"number":s=d(s)?"":String(s);default:s?this.getAttribute(e)!==s&&this.setAttribute(e,s):this.removeAttribute(e)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((e=>{const t=$(e);let s=this[t];(function(e){return void 0===e})(s)||this.$propertyChangedCallback(t,void 0,s),Object.defineProperty(this,t,{enumerable:!0,configurable:!0,get:()=>s,set(e){const o=s;s=e,this.$propertyChangedCallback(t,o,e)}})}));const e=this.shadowRoot||this.attachShadow({mode:this.shadowRootMode||v});if(C.set(this,e),I.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const t=document.createElement("template");t.innerHTML=this.$template,e.appendChild(t.content)}if(this.slottable){const t=document.createElement("slot");e.appendChild(t)}}disconnectedCallback(){I.has(this)&&I.delete(this),C.has(this)&&C.delete(this)}$getTagNameOf(e){var t;return null!==(t=E.get(e))&&void 0!==t?t:e}$setStyles(e){return Object.keys(e).forEach((t=>{let s=e[t];(function(e){return"number"==typeof e&&!d(e)})(s)&&(s=0!==s&&w.test(t)?`${s}px`:String(s)),this.style[t]=s})),this}$getShadowRoot(){return this.shadowRoot||C.get(this)}$addStyles(e){let t;const s=this.$getShadowRoot();return k?(t=new CSSStyleSheet,t.replaceSync(e),s.adoptedStyleSheets=s.adoptedStyleSheets.concat(t)):(t=document.createElement("style"),t.textContent=e,s.appendChild(t)),t}$emit(e,t,s){return function(e,t,s,o){return e.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},S),{detail:s}),o)))}(this,e,t,s)}$nextTick(e){return function(e,t){return t?y.then(e?t.bind(e):t):y}(this,e)}static $define(e,o){var n;"object"==typeof(n=e)&&null!==n&&(o=e,e=""),e||(e=this.$name||this.name),e=m(e),t&&s.customElements&&!s.customElements.get(e)&&customElements.define(e,this,o)}}T.$version="2.1.0";const O=new WeakMap,A=new WeakMap,N=new WeakMap,L=new WeakMap,R="both",j="horizontal",x="vertical",M="none";class W extends T{constructor(){super(...arguments),this.$onSelectionChange=null,this.$onSourceImageLoad=null,this.$onSourceImageTransform=null,this.$scale=1,this.$style=":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}",this.resize=x,this.selection="",this.slottable=!1}set $image(e){A.set(this,e)}get $image(){return A.get(this)}set $sourceImage(e){L.set(this,e)}get $sourceImage(){return L.get(this)}set $canvas(e){O.set(this,e)}get $canvas(){return O.get(this)}set $selection(e){N.set(this,e)}get $selection(){return N.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){var e,t;super.connectedCallback();let s=null;if(s=this.selection?null!==(t=null===(e=function(e){const t=e.getRootNode();switch(t.nodeType){case 1:return t.ownerDocument;case 9:case 11:return t}return null}(this))||void 0===e?void 0:e.querySelector(this.selection))&&void 0!==t?t:null:this.closest(this.$getTagNameOf(a)),"object"==typeof(o=s)&&null!==o&&1===o.nodeType){this.$selection=s,this.$onSelectionChange=this.$handleSelectionChange.bind(this),b(s,c,this.$onSelectionChange);const e=s.closest(this.$getTagNameOf(n));if(e){this.$canvas=e;const t=e.querySelector(this.$getTagNameOf(i));t&&(this.$sourceImage=t,this.$image=t.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageLoad=this.$handleSourceImageLoad.bind(this),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),b(t.$image,h,this.$onSourceImageLoad),b(t,l,this.$onSourceImageTransform))}this.$render()}var o}disconnectedCallback(){const{$selection:e,$sourceImage:t}=this;e&&this.$onSelectionChange&&(p(e,c,this.$onSelectionChange),this.$onSelectionChange=null),t&&this.$onSourceImageLoad&&(p(t.$image,h,this.$onSourceImageLoad),this.$onSourceImageLoad=null),t&&this.$onSourceImageTransform&&(p(t,l,this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(e){this.$render(e.defaultPrevented?this.$selection:e.detail)}$handleSourceImageLoad(){const{$image:e,$sourceImage:t}=this,s=e.getAttribute("src"),o=t.getAttribute("src");o&&o!==s&&(e.setAttribute("src",o),e.$ready((()=>{this.$render()})))}$handleSourceImageTransform(e){this.$render(void 0,e.detail.matrix)}$render(e,t){const{$canvas:s,$selection:o}=this;e||o.hidden||(e=o),(!e||0===e.x&&0===e.y&&0===e.width&&0===e.height)&&(e={x:0,y:0,width:s.offsetWidth,height:s.offsetHeight});const{x:n,y:i,width:a,height:r}=e,h={},{clientWidth:c,clientHeight:l}=this;let d=c,u=l,m=NaN;switch(this.resize){case R:m=1,d=a,u=r,h.width=a,h.height=r;break;case j:m=r>0?l/r:0,d=a*m,h.width=d;break;case x:m=a>0?c/a:0,u=r*m,h.height=u;break;default:c>0?m=a>0?c/a:0:l>0&&(m=r>0?l/r:0)}this.$scale=m,this.$setStyles(h),this.$sourceImage&&setTimeout((()=>{this.$transformImageByOffset(null!=t?t:this.$sourceImage.$getTransform(),-n,-i)}))}$transformImageByOffset(e,t,s){const{$image:o,$scale:n,$sourceImage:i}=this;if(i&&o&&n>=0){const[i,a,r,h,c,l]=e,d=(t*h-r*s)/(i*h-r*a),u=(s*i-a*t)/(i*h-r*a),m=i*d+r*u+c,g=a*d+h*u+l;o.$ready((e=>{this.$setStyles.call(o,{width:e.naturalWidth*n,height:e.naturalHeight*n})})),o.$setTransform(i,a,r,h,m*n,g*n)}}}W.$name=r,W.$version="2.1.0",e.RESIZE_BOTH=R,e.RESIZE_HORIZONTAL=j,e.RESIZE_NONE=M,e.RESIZE_VERTICAL=x,e.default=W,Object.defineProperty(e,"__esModule",{value:!0})}));

dist/element-viewer.raw.js

@@ -64,6 +64,7 @@ (function (global, factory) {
       connectedCallback() {
+          var _a, _b;
           super.connectedCallback();
           let $selection = null;
           if (this.selection) {
-              $selection = this.ownerDocument.querySelector(this.selection);
+              $selection = (_b = (_a = utils.getRootDocument(this)) === null || _a === void 0 ? void 0 : _a.querySelector(this.selection)) !== null && _b !== void 0 ? _b : null;
           }
@@ -111,3 +112,3 @@ else {
       $handleSelectionChange(event) {
-          this.$render(event.detail);
+          this.$render(event.defaultPrevented ? this.$selection : event.detail);
       }
@@ -121,5 +122,3 @@ $handleSourceImageLoad() {
               $image.$ready(() => {
-                  setTimeout(() => {
-                      this.$render();
-                  }, 50);
+                  this.$render();
               });
@@ -183,3 +182,6 @@ }
           if (this.$sourceImage) {
-              this.$transformImageByOffset(matrix !== null && matrix !== void 0 ? matrix : this.$sourceImage.$getTransform(), -x, -y);
+              // Transform the image by the selection offset after the next DOM update cycle
+              setTimeout(() => {
+                  this.$transformImageByOffset(matrix !== null && matrix !== void 0 ? matrix : this.$sourceImage.$getTransform(), -x, -y);
+              });
           }
@@ -206,3 +208,3 @@ }
   CropperViewer.$name = utils.CROPPER_VIEWER;
-  CropperViewer.$version = '2.0.0';
+  CropperViewer.$version = '2.1.0';
 
@@ -209,0 +211,0 @@ exports.RESIZE_BOTH = RESIZE_BOTH;

package.json

 {
   "name": "@cropper/element-viewer",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A custom viewer element for the Cropper.",
@@ -63,7 +63,7 @@ "main": "dist/element-viewer.raw.js",
   "dependencies": {
-    "@cropper/element": "^2.0.1",
-    "@cropper/element-canvas": "^2.0.1",
-    "@cropper/element-image": "^2.0.1",
-    "@cropper/element-selection": "^2.0.1",
-    "@cropper/utils": "^2.0.1"
+    "@cropper/element": "^2.1.0",
+    "@cropper/element-canvas": "^2.1.0",
+    "@cropper/element-image": "^2.1.0",
+    "@cropper/element-selection": "^2.1.0",
+    "@cropper/utils": "^2.1.0"
   },
@@ -73,3 +73,3 @@ "publishConfig": {
   },
-  "gitHead": "6b8e5ff146012939d08b13fae360a1a6ad2dda29"
+  "gitHead": "268be1a7f91fffa9d6676388f3e6d636780466dc"
 }

No alert changes

Improved metrics

Total package byte prevSize

114026

2.26%

Lines of code

2338

2.19%

Dependency changes

• Updated

  @cropper/element@^2.1.0

• Updated

  @cropper/element-canvas@^2.1.0

• Updated

  @cropper/element-image@^2.1.0

• Updated

  @cropper/element-selection@^2.1.0

• Updated

  @cropper/utils@^2.1.0