filepond-plugin-image-preview - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/filepond-plugin-image-preview.esm.js

 /*
- * FilePondPluginImagePreview 1.0.3
+ * FilePondPluginImagePreview 1.0.4
  * Licensed under MIT, https://opensource.org/licenses/MIT
@@ -106,3 +106,3 @@ * Please visit https://pqina.nl/filepond for details.
         // the max height of the preview container
-        const containerMaxHeight = root.query('GET_IMAGE_PREVIEW_MAX_HEIGHT');
+        const maxPreviewHeight = root.query('GET_IMAGE_PREVIEW_MAX_HEIGHT');
 
@@ -124,10 +124,12 @@ // calculate scaled preview image size
         // calculate crop container size
-        const clipHeight = Math.min(previewHeight, containerMaxHeight);
-        const clipWidth = clipHeight / crop.aspectRatio;
+        let clipHeight = Math.min(
+          containerWidth * crop.aspectRatio,
+          maxPreviewHeight
+        );
 
-        // render image container that is fixed to crop ratio
-        root.ref.clip.style.cssText = `
-                    width:${clipWidth}px;
-                    height:${clipHeight}px;
-                `;
+        let clipWidth = clipHeight / crop.aspectRatio;
+        if (clipWidth > previewWidth) {
+          clipWidth = previewWidth;
+          clipHeight = clipWidth * crop.aspectRatio;
+        }
 
@@ -142,2 +144,9 @@ // calculate scalar based on if the clip rectangle has been scaled down
 
+        // apply styles
+        root.ref.clip.style.cssText = `
+                    width:${clipWidth}px;
+                    height:${clipHeight}px;
+                `;
+
+        // position image
         previewImage.style.cssText = `
@@ -559,11 +568,25 @@ width:${width}px;
     const didCalculatePreviewSize = ({ root, props, action }) => {
+      // we need the item to get to the crop size
+      const item = root.query('GET_ITEM', { id: props.id });
+      const crop = item.getMetadata('crop') || {
+        rect: {
+          x: 0,
+          y: 0,
+          width: 1,
+          height: 1
+        },
+        aspectRatio: action.height / action.width
+      };
+
       // maximum height
       const maxPreviewHeight = root.query('GET_IMAGE_PREVIEW_MAX_HEIGHT');
 
-      // calculate scale ratio
-      const scaleFactor = root.rect.element.width / action.width;
+      // const crop width
+      let height = Math.min(action.height, maxPreviewHeight);
+      let width = height / crop.aspectRatio;
+      if (width > root.rect.element.width) {
+        width = root.rect.element.width;
+        height = width * crop.aspectRatio;
+      }
 
-      // final height
-      const height = Math.min(maxPreviewHeight, action.height * scaleFactor);
-
       // set height
@@ -570,0 +593,0 @@ root.ref.imagePreview.element.style.cssText = `height:${height}px`;

dist/filepond-plugin-image-preview.esm.min.js

 /*
- * FilePondPluginImagePreview 1.0.3
+ * FilePondPluginImagePreview 1.0.4
  * Licensed under MIT, https://opensource.org/licenses/MIT
  * Please visit https://pqina.nl/filepond for details.
  */
-const isPreviewableImage=e=>/^image/.test(e.type)&&!/svg/.test(e.type),transforms={1:()=>[1,0,0,1,0,0],2:e=>[-1,0,0,1,e,0],3:(e,t)=>[-1,0,0,-1,e,t],4:(e,t)=>[1,0,0,-1,0,t],5:[0,1,1,0,0,0],6:(e,t)=>[0,1,-1,0,t,0],7:(e,t)=>[0,-1,-1,0,t,e],8:e=>[0,-1,1,0,0,e]},fixImageOrientation=(e,t,a,i)=>{-1!==i&&e.transform(...transforms[i](t,a))},createPreviewImage=(e,t,a,i)=>{i>=5&&i<=8&&([t,a]=[a,t]);const r=document.createElement("canvas"),o=r.getContext("2d");return i>=5&&i<=8?(r.width=a,r.height=t):(r.width=t,r.height=a),o.save(),fixImageOrientation(o,t,a,i),o.drawImage(e,0,0,t,a),e.close&&e.close(),o.restore(),r},IMAGE_SCALE_SPRING_PROPS={type:"spring",stiffness:.5,damping:.45,mass:10},createImageView=e=>e.utils.createView({name:"image-preview",tag:"div",ignoreRect:!0,create:({root:e,props:t})=>{e.ref.clip=document.createElement("div"),e.element.appendChild(e.ref.clip)},write:e.utils.createRoute({DID_IMAGE_PREVIEW_LOAD:({root:e,props:t,action:a})=>{const{id:i}=t,r=e.query("GET_ITEM",{id:t.id}).getMetadata("crop")||{rect:{x:0,y:0,width:1,height:1},aspectRatio:a.height/a.width},o=window.devicePixelRatio,n=e.query("GET_IMAGE_PREVIEW_MAX_HEIGHT"),c=e.rect.inner.width,s=c,l=c*(a.height/a.width),d=createPreviewImage(a.data,s*o,l*o,a.orientation),p=Math.min(l,n),h=p/r.aspectRatio;e.ref.clip.style.cssText=`\n                    width:${h}px;\n                    height:${p}px;\n                `;const E=p/(l*r.rect.height),I=s*E,m=l*E,w=-r.rect.x*s*E,g=-r.rect.y*l*E;d.style.cssText=`\n                    width:${I}px;\n                    height:${m}px;\n                    transform:translate(${Math.round(w)}px, ${Math.round(g)}px);\n                `,e.ref.clip.appendChild(d),e.dispatch("DID_IMAGE_PREVIEW_DRAW",{id:i})}}),mixins:{styles:["scaleX","scaleY","opacity"],animations:{scaleX:IMAGE_SCALE_SPRING_PROPS,scaleY:IMAGE_SCALE_SPRING_PROPS,opacity:{type:"tween",duration:750}}}}),applyTemplate=(e,t)=>{t.width=e.width,t.height=e.height;t.getContext("2d").drawImage(e,0,0)},createImageOverlayView=e=>e.utils.createView({name:"image-preview-overlay",tag:"canvas",ignoreRect:!0,create:({root:e,props:t})=>{applyTemplate(t.template,e.element)},mixins:{styles:["opacity"],animations:{opacity:{type:"spring",mass:25}}}}),getImageSize=(e,t)=>{const a=new Image;a.onload=(()=>{t(a.naturalWidth,a.naturalHeight)}),a.src=e},fitToBounds=(e,t,a,i)=>{const r=Math.min(a/e,i/t);return{width:Math.round(e*r),height:Math.round(t*r)}},getImageScaledSize=(e,t,a,i)=>{getImageSize(e,(e,r)=>{const o=fitToBounds(e,r,t,a);i(o.width,o.height)})},BitmapWorker=function(){self.onmessage=(t=>{e(t.data.message,e=>{self.postMessage({id:t.data.id,message:e},[e])})});const e=(e,t)=>{fetch(e.file).then(e=>e.blob()).then(e=>createImageBitmap(e)).then(e=>t(e))}},easeInOutSine=e=>-.5*(Math.cos(Math.PI*e)-1),addGradientSteps=(e,t,a=1,i=easeInOutSine,r=10,o=0)=>{const n=1-o,c=t.join(",");for(let t=0;t<=r;t++){const s=t/r,l=o+n*s;e.addColorStop(l,`rgba(${c}, ${i(s)*a})`)}},drawTemplate=(e,t,a,i,r)=>{e.width=t,e.height=a;const o=e.getContext("2d"),n=.5*t,c=o.createRadialGradient(n,a+110,a-100,n,a+110,a+100);addGradientSteps(c,i,r,void 0,8,.4),o.save(),o.translate(.5*-t,0),o.scale(2,1),o.fillStyle=c,o.fillRect(0,0,t,a),o.restore()},width=500,height=200,overlayTemplateShadow=document.createElement("canvas"),overlayTemplateError=document.createElement("canvas"),overlayTemplateSuccess=document.createElement("canvas");drawTemplate(overlayTemplateShadow,500,200,[40,40,40],.85),drawTemplate(overlayTemplateError,500,200,[196,78,71],1),drawTemplate(overlayTemplateSuccess,500,200,[54,151,99],1);const createImageWrapperView=e=>{const t=createImageOverlayView(e),a=({root:e})=>{e.ref.overlayShadow.opacity=1,e.ref.overlayError.opacity=0,e.ref.overlaySuccess.opacity=0},i=({root:e})=>{e.ref.overlayShadow.opacity=.25,e.ref.overlayError.opacity=1};return e.utils.createView({name:"image-preview-wrapper",create:({root:a,props:i,dispatch:r})=>{const{id:o}=i,n=createImageView(e);a.ref.image=a.appendChildView(a.createChildView(n,{id:i.id,scaleX:1.25,scaleY:1.25,opacity:0})),a.ref.overlayShadow=a.appendChildView(a.createChildView(t,{template:overlayTemplateShadow,opacity:0})),a.ref.overlaySuccess=a.appendChildView(a.createChildView(t,{template:overlayTemplateSuccess,opacity:0})),a.ref.overlayError=a.appendChildView(a.createChildView(t,{template:overlayTemplateError,opacity:0})),a.dispatch("DID_IMAGE_PREVIEW_CONTAINER_CREATE",{id:o})},write:e.utils.createRoute({DID_IMAGE_PREVIEW_LOAD:({root:e,props:t})=>{e.ref.overlayShadow.opacity=1},DID_IMAGE_PREVIEW_DRAW:({root:e,props:t})=>{const{image:a}=e.ref;a.scaleX=1,a.scaleY=1,a.opacity=1},DID_IMAGE_PREVIEW_CONTAINER_CREATE:({root:t,props:a,action:i})=>{const{utils:r,views:o}=e,{createView:n,createWorker:c,loadImage:s}=r,{id:l}=a,d=t.query("GET_ITEM",l),p=URL.createObjectURL(d.file),h=(d.getMetadata("exif")||{}).orientation||-1,E=(e,t,a,i)=>{s(p).then(e=>{const r=document.createElement("canvas");r.width=t,r.height=a,r.getContext("2d").drawImage(e,0,0,t,a),I(r,t,a,i)})},I=(e,a,i,r)=>{URL.revokeObjectURL(p),t.dispatch("DID_IMAGE_PREVIEW_LOAD",{id:l,data:e,width:a,height:i,orientation:r})},m=t.rect.element.width*window.devicePixelRatio*2;getImageScaledSize(p,m,m,(e,a)=>{if(h>=5&&h<=8&&([e,a]=[a,e]),t.dispatch("DID_IMAGE_PREVIEW_CALCULATE_SIZE",{id:l,width:e,height:a}),"createImageBitmap"in window){const t=c(BitmapWorker);t.post({file:p},i=>{i?(I(i,e,a,h),t.terminate()):E(0,e,a,h)})}else E(0,e,a,h)})},DID_THROW_ITEM_LOAD_ERROR:i,DID_THROW_ITEM_PROCESSING_ERROR:i,DID_THROW_ITEM_INVALID:i,DID_COMPLETE_ITEM_PROCESSING:({root:e})=>{e.ref.overlayShadow.opacity=.25,e.ref.overlaySuccess.opacity=1},DID_START_ITEM_PROCESSING:a,DID_REVERT_ITEM_PROCESSING:a})})};var plugin$1=e=>{const{addFilter:t,utils:a}=e,{Type:i,createRoute:r}=a,o=createImageWrapperView(e);return t("CREATE_VIEW",t=>{const{is:a,view:i,query:n}=t;if(!a("file")||!n("GET_ALLOW_IMAGE_PREVIEW"))return;i.registerWriter(r({DID_LOAD_ITEM:({root:t,props:a,actions:r})=>{const{id:c}=a,s=n("GET_ITEM",c);if(!s)return;const l=s.file;if(!isPreviewableImage(l))return;const d="createImageBitmap"in(window||{}),p=n("GET_IMAGE_PREVIEW_MAX_FILE_SIZE");if(!d&&p&&l.size>p)return;const{panel:h}=e.views;t.ref.panel=i.appendChildView(i.createChildView(h)),t.ref.panel.element.classList.add("filepond--panel-item"),t.ref.panel.height=10,t.ref.imagePreview=i.appendChildView(i.createChildView(o,{id:c}))},DID_IMAGE_PREVIEW_CALCULATE_SIZE:({root:e,props:t,action:a})=>{const i=e.query("GET_IMAGE_PREVIEW_MAX_HEIGHT"),r=e.rect.element.width/a.width,o=Math.min(i,a.height*r);e.ref.imagePreview.element.style.cssText=`height:${o}px`,e.ref.panel.height=o}}))}),{options:{allowImagePreview:[!0,i.BOOLEAN],imagePreviewMaxHeight:[256,i.INT],imagePreviewMaxFileSize:[null,i.INT]}}};document&&document.dispatchEvent(new CustomEvent("FilePond:pluginloaded",{detail:plugin$1}));export default plugin$1;
+const isPreviewableImage=e=>/^image/.test(e.type)&&!/svg/.test(e.type),transforms={1:()=>[1,0,0,1,0,0],2:e=>[-1,0,0,1,e,0],3:(e,t)=>[-1,0,0,-1,e,t],4:(e,t)=>[1,0,0,-1,0,t],5:[0,1,1,0,0,0],6:(e,t)=>[0,1,-1,0,t,0],7:(e,t)=>[0,-1,-1,0,t,e],8:e=>[0,-1,1,0,0,e]},fixImageOrientation=(e,t,a,i)=>{-1!==i&&e.transform(...transforms[i](t,a))},createPreviewImage=(e,t,a,i)=>{i>=5&&i<=8&&([t,a]=[a,t]);const r=document.createElement("canvas"),o=r.getContext("2d");return i>=5&&i<=8?(r.width=a,r.height=t):(r.width=t,r.height=a),o.save(),fixImageOrientation(o,t,a,i),o.drawImage(e,0,0,t,a),e.close&&e.close(),o.restore(),r},IMAGE_SCALE_SPRING_PROPS={type:"spring",stiffness:.5,damping:.45,mass:10},createImageView=e=>e.utils.createView({name:"image-preview",tag:"div",ignoreRect:!0,create:({root:e,props:t})=>{e.ref.clip=document.createElement("div"),e.element.appendChild(e.ref.clip)},write:e.utils.createRoute({DID_IMAGE_PREVIEW_LOAD:({root:e,props:t,action:a})=>{const{id:i}=t,r=e.query("GET_ITEM",{id:t.id}).getMetadata("crop")||{rect:{x:0,y:0,width:1,height:1},aspectRatio:a.height/a.width},o=window.devicePixelRatio,n=e.query("GET_IMAGE_PREVIEW_MAX_HEIGHT"),c=e.rect.inner.width,s=c,l=c*(a.height/a.width),d=createPreviewImage(a.data,s*o,l*o,a.orientation);let p=Math.min(c*r.aspectRatio,n),h=p/r.aspectRatio;h>s&&(p=(h=s)*r.aspectRatio);const E=p/(l*r.rect.height),I=s*E,m=l*E,g=-r.rect.x*s*E,w=-r.rect.y*l*E;e.ref.clip.style.cssText=`\n                    width:${h}px;\n                    height:${p}px;\n                `,d.style.cssText=`\n                    width:${I}px;\n                    height:${m}px;\n                    transform:translate(${Math.round(g)}px, ${Math.round(w)}px);\n                `,e.ref.clip.appendChild(d),e.dispatch("DID_IMAGE_PREVIEW_DRAW",{id:i})}}),mixins:{styles:["scaleX","scaleY","opacity"],animations:{scaleX:IMAGE_SCALE_SPRING_PROPS,scaleY:IMAGE_SCALE_SPRING_PROPS,opacity:{type:"tween",duration:750}}}}),applyTemplate=(e,t)=>{t.width=e.width,t.height=e.height;t.getContext("2d").drawImage(e,0,0)},createImageOverlayView=e=>e.utils.createView({name:"image-preview-overlay",tag:"canvas",ignoreRect:!0,create:({root:e,props:t})=>{applyTemplate(t.template,e.element)},mixins:{styles:["opacity"],animations:{opacity:{type:"spring",mass:25}}}}),getImageSize=(e,t)=>{const a=new Image;a.onload=(()=>{t(a.naturalWidth,a.naturalHeight)}),a.src=e},fitToBounds=(e,t,a,i)=>{const r=Math.min(a/e,i/t);return{width:Math.round(e*r),height:Math.round(t*r)}},getImageScaledSize=(e,t,a,i)=>{getImageSize(e,(e,r)=>{const o=fitToBounds(e,r,t,a);i(o.width,o.height)})},BitmapWorker=function(){self.onmessage=(t=>{e(t.data.message,e=>{self.postMessage({id:t.data.id,message:e},[e])})});const e=(e,t)=>{fetch(e.file).then(e=>e.blob()).then(e=>createImageBitmap(e)).then(e=>t(e))}},easeInOutSine=e=>-.5*(Math.cos(Math.PI*e)-1),addGradientSteps=(e,t,a=1,i=easeInOutSine,r=10,o=0)=>{const n=1-o,c=t.join(",");for(let t=0;t<=r;t++){const s=t/r,l=o+n*s;e.addColorStop(l,`rgba(${c}, ${i(s)*a})`)}},drawTemplate=(e,t,a,i,r)=>{e.width=t,e.height=a;const o=e.getContext("2d"),n=.5*t,c=o.createRadialGradient(n,a+110,a-100,n,a+110,a+100);addGradientSteps(c,i,r,void 0,8,.4),o.save(),o.translate(.5*-t,0),o.scale(2,1),o.fillStyle=c,o.fillRect(0,0,t,a),o.restore()},width=500,height=200,overlayTemplateShadow=document.createElement("canvas"),overlayTemplateError=document.createElement("canvas"),overlayTemplateSuccess=document.createElement("canvas");drawTemplate(overlayTemplateShadow,500,200,[40,40,40],.85),drawTemplate(overlayTemplateError,500,200,[196,78,71],1),drawTemplate(overlayTemplateSuccess,500,200,[54,151,99],1);const createImageWrapperView=e=>{const t=createImageOverlayView(e),a=({root:e})=>{e.ref.overlayShadow.opacity=1,e.ref.overlayError.opacity=0,e.ref.overlaySuccess.opacity=0},i=({root:e})=>{e.ref.overlayShadow.opacity=.25,e.ref.overlayError.opacity=1};return e.utils.createView({name:"image-preview-wrapper",create:({root:a,props:i,dispatch:r})=>{const{id:o}=i,n=createImageView(e);a.ref.image=a.appendChildView(a.createChildView(n,{id:i.id,scaleX:1.25,scaleY:1.25,opacity:0})),a.ref.overlayShadow=a.appendChildView(a.createChildView(t,{template:overlayTemplateShadow,opacity:0})),a.ref.overlaySuccess=a.appendChildView(a.createChildView(t,{template:overlayTemplateSuccess,opacity:0})),a.ref.overlayError=a.appendChildView(a.createChildView(t,{template:overlayTemplateError,opacity:0})),a.dispatch("DID_IMAGE_PREVIEW_CONTAINER_CREATE",{id:o})},write:e.utils.createRoute({DID_IMAGE_PREVIEW_LOAD:({root:e,props:t})=>{e.ref.overlayShadow.opacity=1},DID_IMAGE_PREVIEW_DRAW:({root:e,props:t})=>{const{image:a}=e.ref;a.scaleX=1,a.scaleY=1,a.opacity=1},DID_IMAGE_PREVIEW_CONTAINER_CREATE:({root:t,props:a,action:i})=>{const{utils:r,views:o}=e,{createView:n,createWorker:c,loadImage:s}=r,{id:l}=a,d=t.query("GET_ITEM",l),p=URL.createObjectURL(d.file),h=(d.getMetadata("exif")||{}).orientation||-1,E=(e,t,a,i)=>{s(p).then(e=>{const r=document.createElement("canvas");r.width=t,r.height=a,r.getContext("2d").drawImage(e,0,0,t,a),I(r,t,a,i)})},I=(e,a,i,r)=>{URL.revokeObjectURL(p),t.dispatch("DID_IMAGE_PREVIEW_LOAD",{id:l,data:e,width:a,height:i,orientation:r})},m=t.rect.element.width*window.devicePixelRatio*2;getImageScaledSize(p,m,m,(e,a)=>{if(h>=5&&h<=8&&([e,a]=[a,e]),t.dispatch("DID_IMAGE_PREVIEW_CALCULATE_SIZE",{id:l,width:e,height:a}),"createImageBitmap"in window){const t=c(BitmapWorker);t.post({file:p},i=>{i?(I(i,e,a,h),t.terminate()):E(0,e,a,h)})}else E(0,e,a,h)})},DID_THROW_ITEM_LOAD_ERROR:i,DID_THROW_ITEM_PROCESSING_ERROR:i,DID_THROW_ITEM_INVALID:i,DID_COMPLETE_ITEM_PROCESSING:({root:e})=>{e.ref.overlayShadow.opacity=.25,e.ref.overlaySuccess.opacity=1},DID_START_ITEM_PROCESSING:a,DID_REVERT_ITEM_PROCESSING:a})})};var plugin$1=e=>{const{addFilter:t,utils:a}=e,{Type:i,createRoute:r}=a,o=createImageWrapperView(e);return t("CREATE_VIEW",t=>{const{is:a,view:i,query:n}=t;if(!a("file")||!n("GET_ALLOW_IMAGE_PREVIEW"))return;i.registerWriter(r({DID_LOAD_ITEM:({root:t,props:a,actions:r})=>{const{id:c}=a,s=n("GET_ITEM",c);if(!s)return;const l=s.file;if(!isPreviewableImage(l))return;const d="createImageBitmap"in(window||{}),p=n("GET_IMAGE_PREVIEW_MAX_FILE_SIZE");if(!d&&p&&l.size>p)return;const{panel:h}=e.views;t.ref.panel=i.appendChildView(i.createChildView(h)),t.ref.panel.element.classList.add("filepond--panel-item"),t.ref.panel.height=10,t.ref.imagePreview=i.appendChildView(i.createChildView(o,{id:c}))},DID_IMAGE_PREVIEW_CALCULATE_SIZE:({root:e,props:t,action:a})=>{const i=e.query("GET_ITEM",{id:t.id}).getMetadata("crop")||{rect:{x:0,y:0,width:1,height:1},aspectRatio:a.height/a.width},r=e.query("GET_IMAGE_PREVIEW_MAX_HEIGHT");let o=Math.min(a.height,r),n=o/i.aspectRatio;n>e.rect.element.width&&(o=(n=e.rect.element.width)*i.aspectRatio),e.ref.imagePreview.element.style.cssText=`height:${o}px`,e.ref.panel.height=o}}))}),{options:{allowImagePreview:[!0,i.BOOLEAN],imagePreviewMaxHeight:[256,i.INT],imagePreviewMaxFileSize:[null,i.INT]}}};document&&document.dispatchEvent(new CustomEvent("FilePond:pluginloaded",{detail:plugin$1}));export default plugin$1;

dist/filepond-plugin-image-preview.js

 /*
- * FilePondPluginImagePreview 1.0.3
+ * FilePondPluginImagePreview 1.0.4
  * Licensed under MIT, https://opensource.org/licenses/MIT
@@ -278,3 +278,3 @@ * Please visit https://pqina.nl/filepond for details.
           // the max height of the preview container
-          var containerMaxHeight = root.query('GET_IMAGE_PREVIEW_MAX_HEIGHT');
+          var maxPreviewHeight = root.query('GET_IMAGE_PREVIEW_MAX_HEIGHT');
 
@@ -296,13 +296,13 @@ // calculate scaled preview image size
           // calculate crop container size
-          var clipHeight = Math.min(previewHeight, containerMaxHeight);
+          var clipHeight = Math.min(
+            containerWidth * crop.aspectRatio,
+            maxPreviewHeight
+          );
+
           var clipWidth = clipHeight / crop.aspectRatio;
+          if (clipWidth > previewWidth) {
+            clipWidth = previewWidth;
+            clipHeight = clipWidth * crop.aspectRatio;
+          }
 
-          // render image container that is fixed to crop ratio
-          root.ref.clip.style.cssText =
-            '\n                    width:' +
-            clipWidth +
-            'px;\n                    height:' +
-            clipHeight +
-            'px;\n                ';
-
           // calculate scalar based on if the clip rectangle has been scaled down
@@ -316,2 +316,11 @@ var previewScalar = clipHeight / (previewHeight * crop.rect.height);
 
+          // apply styles
+          root.ref.clip.style.cssText =
+            '\n                    width:' +
+            clipWidth +
+            'px;\n                    height:' +
+            clipHeight +
+            'px;\n                ';
+
+          // position image
           previewImage.style.cssText =
@@ -818,11 +827,25 @@ '\n                    width:' +
 
+        // we need the item to get to the crop size
+        var item = root.query('GET_ITEM', { id: props.id });
+        var crop = item.getMetadata('crop') || {
+          rect: {
+            x: 0,
+            y: 0,
+            width: 1,
+            height: 1
+          },
+          aspectRatio: action.height / action.width
+        };
+
         // maximum height
         var maxPreviewHeight = root.query('GET_IMAGE_PREVIEW_MAX_HEIGHT');
 
-        // calculate scale ratio
-        var scaleFactor = root.rect.element.width / action.width;
+        // const crop width
+        var height = Math.min(action.height, maxPreviewHeight);
+        var width = height / crop.aspectRatio;
+        if (width > root.rect.element.width) {
+          width = root.rect.element.width;
+          height = width * crop.aspectRatio;
+        }
 
-        // final height
-        var height = Math.min(maxPreviewHeight, action.height * scaleFactor);
-
         // set height
@@ -829,0 +852,0 @@ root.ref.imagePreview.element.style.cssText = 'height:' + height + 'px';

dist/filepond-plugin-image-preview.min.js

 /*
- * FilePondPluginImagePreview 1.0.3
+ * FilePondPluginImagePreview 1.0.4
  * Licensed under MIT, https://opensource.org/licenses/MIT
  * Please visit https://pqina.nl/filepond for details.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.FilePondPluginImagePreview=t()}(this,function(){"use strict";var e=function(e){return/^image/.test(e.type)&&!/svg/.test(e.type)},t=(function(){function e(e){this.value=e}function t(t){function n(e,t){return new Promise(function(n,r){var c={key:e,arg:t,resolve:n,reject:r,next:null};o?o=o.next=c:(a=o=c,i(e,t))})}function i(n,a){try{var o=t[n](a),c=o.value;c instanceof e?Promise.resolve(c.value).then(function(e){i("next",e)},function(e){i("throw",e)}):r(o.done?"return":"normal",o.value)}catch(u){r("throw",u)}}function r(e,t){switch(e){case"return":a.resolve({value:t,done:!0});break;case"throw":a.reject(t);break;default:a.resolve({value:t,done:!1})}a=a.next,a?i(a.key,a.arg):o=null}var a,o;this._invoke=n,"function"!=typeof t["return"]&&(this["return"]=void 0)}return"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype["throw"]=function(e){return this._invoke("throw",e)},t.prototype["return"]=function(e){return this._invoke("return",e)},{wrap:function(e){return function(){return new t(e.apply(this,arguments))}},await:function(t){return new e(t)}}}(),function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}),n={1:function(){return[1,0,0,1,0,0]},2:function(e){return[-1,0,0,1,e,0]},3:function(e,t){return[-1,0,0,-1,e,t]},4:function(e,t){return[1,0,0,-1,0,t]},5:[0,1,1,0,0,0],6:function(e,t){return[0,1,-1,0,t,0]},7:function(e,t){return[0,-1,-1,0,t,e]},8:function(e){return[0,-1,1,0,0,e]}},i=function(e,i,r,a){a!==-1&&e.transform.apply(e,t(n[a](i,r)))},r=function(e,t,n,r){if(r>=5&&r<=8){var a=[n,t];t=a[0],n=a[1]}var o=document.createElement("canvas"),c=o.getContext("2d");return r>=5&&r<=8?(o.width=n,o.height=t):(o.width=t,o.height=n),c.save(),i(c,t,n,r),c.drawImage(e,0,0,t,n),e.close&&e.close(),c.restore(),o},a={type:"spring",stiffness:.5,damping:.45,mass:10},o=function(e){return e.utils.createView({name:"image-preview",tag:"div",ignoreRect:!0,create:function(e){var t=e.root;t.ref.clip=document.createElement("div"),t.element.appendChild(t.ref.clip)},write:e.utils.createRoute({DID_IMAGE_PREVIEW_LOAD:function(e){var t=e.root,n=e.props,i=e.action,a=n.id,o=t.query("GET_ITEM",{id:n.id}),c=o.getMetadata("crop")||{rect:{x:0,y:0,width:1,height:1},aspectRatio:i.height/i.width},u=window.devicePixelRatio,l=t.query("GET_IMAGE_PREVIEW_MAX_HEIGHT"),d=t.rect.inner.width,f=i.height/i.width,s=d,h=d*f,p=r(i.data,s*u,h*u,i.orientation),v=Math.min(h,l),E=v/c.aspectRatio;t.ref.clip.style.cssText="\n                    width:"+E+"px;\n                    height:"+v+"px;\n                ";var I=v/(h*c.rect.height),w=s*I,m=h*I,_=-c.rect.x*s*I,g=-c.rect.y*h*I;p.style.cssText="\n                    width:"+w+"px;\n                    height:"+m+"px;\n                    transform:translate("+Math.round(_)+"px, "+Math.round(g)+"px);\n                ",t.ref.clip.appendChild(p),t.dispatch("DID_IMAGE_PREVIEW_DRAW",{id:a})}}),mixins:{styles:["scaleX","scaleY","opacity"],animations:{scaleX:a,scaleY:a,opacity:{type:"tween",duration:750}}}})},c=function(e,t){t.width=e.width,t.height=e.height;var n=t.getContext("2d");n.drawImage(e,0,0)},u=function(e){return e.utils.createView({name:"image-preview-overlay",tag:"canvas",ignoreRect:!0,create:function(e){var t=e.root,n=e.props;c(n.template,t.element)},mixins:{styles:["opacity"],animations:{opacity:{type:"spring",mass:25}}}})},l=function(e,t){var n=new Image;n.onload=function(){t(n.naturalWidth,n.naturalHeight)},n.src=e},d=function(e,t,n,i){var r=Math.min(n/e,i/t);return{width:Math.round(e*r),height:Math.round(t*r)}},f=function(e,t,n,i){l(e,function(e,r){var a=d(e,r,t,n);i(a.width,a.height)})},s=function(){self.onmessage=function(t){e(t.data.message,function(e){self.postMessage({id:t.data.id,message:e},[e])})};var e=function(e,t){fetch(e.file).then(function(e){return e.blob()}).then(function(e){return createImageBitmap(e)}).then(function(e){return t(e)})}},h=function(e){return-.5*(Math.cos(Math.PI*e)-1)},p=function(e,t){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:h,r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:10,a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,o=1-a,c=t.join(","),u=0;u<=r;u++){var l=u/r,d=a+o*l;e.addColorStop(d,"rgba("+c+", "+i(l)*n+")")}},v=function(e,t,n,i,r){e.width=t,e.height=n;var a=e.getContext("2d"),o=.5*t,c=a.createRadialGradient(o,n+110,n-100,o,n+110,n+100);p(c,i,r,void 0,8,.4),a.save(),a.translate(.5*-t,0),a.scale(2,1),a.fillStyle=c,a.fillRect(0,0,t,n),a.restore()},E=500,I=200,w=document.createElement("canvas"),m=document.createElement("canvas"),_=document.createElement("canvas");v(w,E,I,[40,40,40],.85),v(m,E,I,[196,78,71],1),v(_,E,I,[54,151,99],1);var g=function(e){var t=u(e),n=function(t){var n=t.root,i=t.props,r=e.utils,a=(r.createView,r.createWorker),o=r.loadImage,c=i.id,u=n.query("GET_ITEM",c),l=URL.createObjectURL(u.file),d=u.getMetadata("exif")||{},h=d.orientation||-1,p=function(e,t,n,i){o(l).then(function(e){var r=document.createElement("canvas");r.width=t,r.height=n;var a=r.getContext("2d");a.drawImage(e,0,0,t,n),v(r,t,n,i)})},v=function(e,t,i,r){URL.revokeObjectURL(l),n.dispatch("DID_IMAGE_PREVIEW_LOAD",{id:c,data:e,width:t,height:i,orientation:r})},E=n.rect.element.width*window.devicePixelRatio*2,I=E;f(l,E,I,function(e,t){if(h>=5&&h<=8){var i=[t,e];e=i[0],t=i[1]}if(n.dispatch("DID_IMAGE_PREVIEW_CALCULATE_SIZE",{id:c,width:e,height:t}),"createImageBitmap"in window){var r=a(s);r.post({file:l},function(n){return n?(v(n,e,t,h),void r.terminate()):void p(u,e,t,h)})}else p(u,e,t,h)})},i=function(e){var t=e.root;t.ref.overlayShadow.opacity=1},r=function(e){var t=e.root,n=t.ref.image;n.scaleX=1,n.scaleY=1,n.opacity=1},a=function(e){var t=e.root;t.ref.overlayShadow.opacity=1,t.ref.overlayError.opacity=0,t.ref.overlaySuccess.opacity=0},c=function(e){var t=e.root;t.ref.overlayShadow.opacity=.25,t.ref.overlayError.opacity=1},l=function(e){var t=e.root;t.ref.overlayShadow.opacity=.25,t.ref.overlaySuccess.opacity=1},d=function(n){var i=n.root,r=n.props,a=r.id,c=o(e);i.ref.image=i.appendChildView(i.createChildView(c,{id:r.id,scaleX:1.25,scaleY:1.25,opacity:0})),i.ref.overlayShadow=i.appendChildView(i.createChildView(t,{template:w,opacity:0})),i.ref.overlaySuccess=i.appendChildView(i.createChildView(t,{template:_,opacity:0})),i.ref.overlayError=i.appendChildView(i.createChildView(t,{template:m,opacity:0})),i.dispatch("DID_IMAGE_PREVIEW_CONTAINER_CREATE",{id:a})};return e.utils.createView({name:"image-preview-wrapper",create:d,write:e.utils.createRoute({DID_IMAGE_PREVIEW_LOAD:i,DID_IMAGE_PREVIEW_DRAW:r,DID_IMAGE_PREVIEW_CONTAINER_CREATE:n,DID_THROW_ITEM_LOAD_ERROR:c,DID_THROW_ITEM_PROCESSING_ERROR:c,DID_THROW_ITEM_INVALID:c,DID_COMPLETE_ITEM_PROCESSING:l,DID_START_ITEM_PROCESSING:a,DID_REVERT_ITEM_PROCESSING:a})})},y=function(t){var n=t.addFilter,i=t.utils,r=i.Type,a=i.createRoute,o=g(t);return n("CREATE_VIEW",function(n){var i=n.is,r=n.view,c=n.query;if(i("file")&&c("GET_ALLOW_IMAGE_PREVIEW")){var u=function(n){var i=n.root,a=n.props,u=a.id,l=c("GET_ITEM",u);if(l){var d=l.file;if(e(d)){var f="createImageBitmap"in(window||{}),s=c("GET_IMAGE_PREVIEW_MAX_FILE_SIZE");if(!(!f&&s&&d.size>s)){var h=t.views.panel;i.ref.panel=r.appendChildView(r.createChildView(h)),i.ref.panel.element.classList.add("filepond--panel-item"),i.ref.panel.height=10,i.ref.imagePreview=r.appendChildView(r.createChildView(o,{id:u}))}}}},l=function(e){var t=e.root,n=(e.props,e.action),i=t.query("GET_IMAGE_PREVIEW_MAX_HEIGHT"),r=t.rect.element.width/n.width,a=Math.min(i,n.height*r);t.ref.imagePreview.element.style.cssText="height:"+a+"px",t.ref.panel.height=a};r.registerWriter(a({DID_LOAD_ITEM:u,DID_IMAGE_PREVIEW_CALCULATE_SIZE:l}))}}),{options:{allowImagePreview:[!0,r.BOOLEAN],imagePreviewMaxHeight:[256,r.INT],imagePreviewMaxFileSize:[null,r.INT]}}};return document&&document.dispatchEvent(new CustomEvent("FilePond:pluginloaded",{detail:y})),y});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.FilePondPluginImagePreview=t()}(this,function(){"use strict";var e=function(e){return/^image/.test(e.type)&&!/svg/.test(e.type)},t=(function(){function e(e){this.value=e}function t(t){function i(e,t){return new Promise(function(i,r){var c={key:e,arg:t,resolve:i,reject:r,next:null};o?o=o.next=c:(a=o=c,n(e,t))})}function n(i,a){try{var o=t[i](a),c=o.value;c instanceof e?Promise.resolve(c.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(o.done?"return":"normal",o.value)}catch(u){r("throw",u)}}function r(e,t){switch(e){case"return":a.resolve({value:t,done:!0});break;case"throw":a.reject(t);break;default:a.resolve({value:t,done:!1})}a=a.next,a?n(a.key,a.arg):o=null}var a,o;this._invoke=i,"function"!=typeof t["return"]&&(this["return"]=void 0)}return"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype["throw"]=function(e){return this._invoke("throw",e)},t.prototype["return"]=function(e){return this._invoke("return",e)},{wrap:function(e){return function(){return new t(e.apply(this,arguments))}},await:function(t){return new e(t)}}}(),function(e){if(Array.isArray(e)){for(var t=0,i=Array(e.length);t<e.length;t++)i[t]=e[t];return i}return Array.from(e)}),i={1:function(){return[1,0,0,1,0,0]},2:function(e){return[-1,0,0,1,e,0]},3:function(e,t){return[-1,0,0,-1,e,t]},4:function(e,t){return[1,0,0,-1,0,t]},5:[0,1,1,0,0,0],6:function(e,t){return[0,1,-1,0,t,0]},7:function(e,t){return[0,-1,-1,0,t,e]},8:function(e){return[0,-1,1,0,0,e]}},n=function(e,n,r,a){a!==-1&&e.transform.apply(e,t(i[a](n,r)))},r=function(e,t,i,r){if(r>=5&&r<=8){var a=[i,t];t=a[0],i=a[1]}var o=document.createElement("canvas"),c=o.getContext("2d");return r>=5&&r<=8?(o.width=i,o.height=t):(o.width=t,o.height=i),c.save(),n(c,t,i,r),c.drawImage(e,0,0,t,i),e.close&&e.close(),c.restore(),o},a={type:"spring",stiffness:.5,damping:.45,mass:10},o=function(e){return e.utils.createView({name:"image-preview",tag:"div",ignoreRect:!0,create:function(e){var t=e.root;t.ref.clip=document.createElement("div"),t.element.appendChild(t.ref.clip)},write:e.utils.createRoute({DID_IMAGE_PREVIEW_LOAD:function(e){var t=e.root,i=e.props,n=e.action,a=i.id,o=t.query("GET_ITEM",{id:i.id}),c=o.getMetadata("crop")||{rect:{x:0,y:0,width:1,height:1},aspectRatio:n.height/n.width},u=window.devicePixelRatio,d=t.query("GET_IMAGE_PREVIEW_MAX_HEIGHT"),l=t.rect.inner.width,s=n.height/n.width,f=l,h=l*s,p=r(n.data,f*u,h*u,n.orientation),v=Math.min(l*c.aspectRatio,d),E=v/c.aspectRatio;E>f&&(E=f,v=E*c.aspectRatio);var I=v/(h*c.rect.height),w=f*I,m=h*I,_=-c.rect.x*f*I,g=-c.rect.y*h*I;t.ref.clip.style.cssText="\n                    width:"+E+"px;\n                    height:"+v+"px;\n                ",p.style.cssText="\n                    width:"+w+"px;\n                    height:"+m+"px;\n                    transform:translate("+Math.round(_)+"px, "+Math.round(g)+"px);\n                ",t.ref.clip.appendChild(p),t.dispatch("DID_IMAGE_PREVIEW_DRAW",{id:a})}}),mixins:{styles:["scaleX","scaleY","opacity"],animations:{scaleX:a,scaleY:a,opacity:{type:"tween",duration:750}}}})},c=function(e,t){t.width=e.width,t.height=e.height;var i=t.getContext("2d");i.drawImage(e,0,0)},u=function(e){return e.utils.createView({name:"image-preview-overlay",tag:"canvas",ignoreRect:!0,create:function(e){var t=e.root,i=e.props;c(i.template,t.element)},mixins:{styles:["opacity"],animations:{opacity:{type:"spring",mass:25}}}})},d=function(e,t){var i=new Image;i.onload=function(){t(i.naturalWidth,i.naturalHeight)},i.src=e},l=function(e,t,i,n){var r=Math.min(i/e,n/t);return{width:Math.round(e*r),height:Math.round(t*r)}},s=function(e,t,i,n){d(e,function(e,r){var a=l(e,r,t,i);n(a.width,a.height)})},f=function(){self.onmessage=function(t){e(t.data.message,function(e){self.postMessage({id:t.data.id,message:e},[e])})};var e=function(e,t){fetch(e.file).then(function(e){return e.blob()}).then(function(e){return createImageBitmap(e)}).then(function(e){return t(e)})}},h=function(e){return-.5*(Math.cos(Math.PI*e)-1)},p=function(e,t){for(var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:h,r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:10,a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,o=1-a,c=t.join(","),u=0;u<=r;u++){var d=u/r,l=a+o*d;e.addColorStop(l,"rgba("+c+", "+n(d)*i+")")}},v=function(e,t,i,n,r){e.width=t,e.height=i;var a=e.getContext("2d"),o=.5*t,c=a.createRadialGradient(o,i+110,i-100,o,i+110,i+100);p(c,n,r,void 0,8,.4),a.save(),a.translate(.5*-t,0),a.scale(2,1),a.fillStyle=c,a.fillRect(0,0,t,i),a.restore()},E=500,I=200,w=document.createElement("canvas"),m=document.createElement("canvas"),_=document.createElement("canvas");v(w,E,I,[40,40,40],.85),v(m,E,I,[196,78,71],1),v(_,E,I,[54,151,99],1);var g=function(e){var t=u(e),i=function(t){var i=t.root,n=t.props,r=e.utils,a=(r.createView,r.createWorker),o=r.loadImage,c=n.id,u=i.query("GET_ITEM",c),d=URL.createObjectURL(u.file),l=u.getMetadata("exif")||{},h=l.orientation||-1,p=function(e,t,i,n){o(d).then(function(e){var r=document.createElement("canvas");r.width=t,r.height=i;var a=r.getContext("2d");a.drawImage(e,0,0,t,i),v(r,t,i,n)})},v=function(e,t,n,r){URL.revokeObjectURL(d),i.dispatch("DID_IMAGE_PREVIEW_LOAD",{id:c,data:e,width:t,height:n,orientation:r})},E=i.rect.element.width*window.devicePixelRatio*2,I=E;s(d,E,I,function(e,t){if(h>=5&&h<=8){var n=[t,e];e=n[0],t=n[1]}if(i.dispatch("DID_IMAGE_PREVIEW_CALCULATE_SIZE",{id:c,width:e,height:t}),"createImageBitmap"in window){var r=a(f);r.post({file:d},function(i){return i?(v(i,e,t,h),void r.terminate()):void p(u,e,t,h)})}else p(u,e,t,h)})},n=function(e){var t=e.root;t.ref.overlayShadow.opacity=1},r=function(e){var t=e.root,i=t.ref.image;i.scaleX=1,i.scaleY=1,i.opacity=1},a=function(e){var t=e.root;t.ref.overlayShadow.opacity=1,t.ref.overlayError.opacity=0,t.ref.overlaySuccess.opacity=0},c=function(e){var t=e.root;t.ref.overlayShadow.opacity=.25,t.ref.overlayError.opacity=1},d=function(e){var t=e.root;t.ref.overlayShadow.opacity=.25,t.ref.overlaySuccess.opacity=1},l=function(i){var n=i.root,r=i.props,a=r.id,c=o(e);n.ref.image=n.appendChildView(n.createChildView(c,{id:r.id,scaleX:1.25,scaleY:1.25,opacity:0})),n.ref.overlayShadow=n.appendChildView(n.createChildView(t,{template:w,opacity:0})),n.ref.overlaySuccess=n.appendChildView(n.createChildView(t,{template:_,opacity:0})),n.ref.overlayError=n.appendChildView(n.createChildView(t,{template:m,opacity:0})),n.dispatch("DID_IMAGE_PREVIEW_CONTAINER_CREATE",{id:a})};return e.utils.createView({name:"image-preview-wrapper",create:l,write:e.utils.createRoute({DID_IMAGE_PREVIEW_LOAD:n,DID_IMAGE_PREVIEW_DRAW:r,DID_IMAGE_PREVIEW_CONTAINER_CREATE:i,DID_THROW_ITEM_LOAD_ERROR:c,DID_THROW_ITEM_PROCESSING_ERROR:c,DID_THROW_ITEM_INVALID:c,DID_COMPLETE_ITEM_PROCESSING:d,DID_START_ITEM_PROCESSING:a,DID_REVERT_ITEM_PROCESSING:a})})},y=function(t){var i=t.addFilter,n=t.utils,r=n.Type,a=n.createRoute,o=g(t);return i("CREATE_VIEW",function(i){var n=i.is,r=i.view,c=i.query;if(n("file")&&c("GET_ALLOW_IMAGE_PREVIEW")){var u=function(i){var n=i.root,a=i.props,u=a.id,d=c("GET_ITEM",u);if(d){var l=d.file;if(e(l)){var s="createImageBitmap"in(window||{}),f=c("GET_IMAGE_PREVIEW_MAX_FILE_SIZE");if(!(!s&&f&&l.size>f)){var h=t.views.panel;n.ref.panel=r.appendChildView(r.createChildView(h)),n.ref.panel.element.classList.add("filepond--panel-item"),n.ref.panel.height=10,n.ref.imagePreview=r.appendChildView(r.createChildView(o,{id:u}))}}}},d=function(e){var t=e.root,i=e.props,n=e.action,r=t.query("GET_ITEM",{id:i.id}),a=r.getMetadata("crop")||{rect:{x:0,y:0,width:1,height:1},aspectRatio:n.height/n.width},o=t.query("GET_IMAGE_PREVIEW_MAX_HEIGHT"),c=Math.min(n.height,o),u=c/a.aspectRatio;u>t.rect.element.width&&(u=t.rect.element.width,c=u*a.aspectRatio),t.ref.imagePreview.element.style.cssText="height:"+c+"px",t.ref.panel.height=c};r.registerWriter(a({DID_LOAD_ITEM:u,DID_IMAGE_PREVIEW_CALCULATE_SIZE:d}))}}),{options:{allowImagePreview:[!0,r.BOOLEAN],imagePreviewMaxHeight:[256,r.INT],imagePreviewMaxFileSize:[null,r.INT]}}};return document&&document.dispatchEvent(new CustomEvent("FilePond:pluginloaded",{detail:y})),y});

package.json

 {
     "name": "filepond-plugin-image-preview",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "Image Preview Plugin for FilePond",
@@ -5,0 +5,0 @@ "homepage": "https://pqina.nl/filepond",

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

Improved metrics

Total package byte prevSize

63055

increased by2.61%

Lines of code

1389

increased by3.27%

No dependency changes