Allow images to be moved around the cropper area when zoom is less than 1

cypress/e2e/touch_spec.js

@@ -57,7 +57,7 @@ describe('Touch assertions', function () {
         ],
       })
       .trigger('touchend')
-    cy.get('img').should('have.css', 'transform', 'matrix(1, 0, 0, 1, -36.8182, 0)')
+    cy.get('img').should('have.css', 'transform', 'matrix(0.99, 0, 0, 0.99, -145.667, -2.62)')
   })
 
   it('Move image with pinch based on the center between 2 fingers', function () {

src/lib/helpers.ts

@@ -45,7 +45,15 @@ function restrictPositionCoord(
   cropSize: number,
   zoom: number
 ) {
-  const maxPosition = (imageSize * zoom) / 2 - cropSize / 2
+  // Default max position calculation
+  let maxPosition = (imageSize * zoom) / 2 - cropSize / 2
+
+  // Allow free movement of the image inside the crop area if zoom is less than 1
+  // But limit the image's position to inside the cropBox
+  if (zoom < 1) {
+    maxPosition = cropSize / 2 - (imageSize * zoom) / 2
+  }
+
   return Math.min(maxPosition, Math.max(position, -maxPosition))
 }
 

src/routes/+page.svelte

@@ -4,9 +4,18 @@
 
   let crop = { x: 0, y: 0 }
   let zoom = 1
+  let minZoom = 0.5;
+  let maxZoom = 3;
 
   const urlArgs = typeof window !== 'undefined' ? queryString.parse(window.location.search) : null
   let image = typeof urlArgs?.img === 'string' ? urlArgs.img : '/images/dog.jpeg' // so we can change the image from our tests
 </script>
 
-<Cropper {image} bind:crop bind:zoom on:cropcomplete={e => console.log(e.detail)} />
+<Cropper
+  {image}
+  bind:crop
+  bind:zoom
+  bind:minZoom
+  bind:maxZoom
+  on:cropcomplete={e => console.log(e.detail)}
+/>