Adding objectFit property

src/lib/Cropper.svelte

@@ -2,7 +2,7 @@
   import { createEventDispatcher, onDestroy, onMount } from 'svelte'
   import type { HTMLImgAttributes } from 'svelte/elements'
   import * as helpers from './helpers'
-  import type { Point, CropShape, Size, DispatchEvents, ImageSize } from './types'
+  import type { Point, CropShape, Size, DispatchEvents, ImageSize, ObjectFit } from './types'
 
   export let image: string
   export let crop: Point = { x: 0, y: 0 }
@@ -17,6 +17,8 @@
   export let crossOrigin: HTMLImgAttributes['crossorigin'] = null
   export let restrictPosition = true
   export let tabindex: number | undefined = undefined
+  export let objectFit: ObjectFit = 'contain'
+  export let mediaObjectFit: ObjectFit = objectFit
 
   let cropperSize: Size | null = null
   let imageSize: ImageSize = { width: 0, height: 0, naturalWidth: 0, naturalHeight: 0 }
@@ -29,6 +31,7 @@
   let rafDragTimeout: number | null = null
   let rafZoomTimeout: number | null = null
 
+  const imageObjectFitClass = {"contain": 'image_contain', "cover": "horizontal-cover", "horizontal-cover": "image_horizontal_cover", 'vertical-cover': "image_vertical_cover"};
   const dispatch = createEventDispatcher<DispatchEvents>()
 
   onMount(() => {
@@ -63,6 +66,7 @@
   }
 
   const onImgLoad = () => {
+    mediaObjectFit = getObjectFit()
     computeSizes()
     emitCropData()
   }
@@ -74,6 +78,20 @@
     return aspect
   }
 
+  const getObjectFit = () => {
+    if (objectFit === 'cover') {
+      if (imgEl && containerRect) {
+        const containerAspect = containerRect.width / containerRect.height;
+        const mediaAspect = imgEl.naturalWidth / imgEl.naturalHeight;
+
+        return mediaAspect < containerAspect ? 'horizontal-cover' : 'vertical-cover'
+      }
+      return 'horizontal-cover'
+    }
+
+    return objectFit;
+  }
+
   const computeSizes = () => {
     if (imgEl) {
       imageSize = {
@@ -180,7 +198,8 @@
 
   const onWheel = (e: WheelEvent) => {
     const point = getMousePoint(e)
-    const newZoom = zoom - (e.deltaY * zoomSpeed) / 200
+    // const newZoom = zoom - (e.deltaY * zoomSpeed) / 200 // Can give 1.01 due to rounding errors
+    const newZoom = (e.deltaY > 0) ? zoom - (zoomSpeed / 2) : zoom + (zoomSpeed / 2);
     setNewZoom(newZoom, point)
   }
 
@@ -239,10 +258,15 @@
   //when aspect changes, we reset the cropperSize
   $: if (imgEl) {
     cropperSize = cropSize ? cropSize : helpers.getCropSize(imgEl.width, imgEl.height, aspect)
+    const newObjectFit = getObjectFit();
+    if (newObjectFit !== mediaObjectFit) {
+      mediaObjectFit = newObjectFit;
+    }
   }
 
   // when zoom changes, we recompute the cropped area
   $: zoom && emitCropData()
+  $: classes = 'image ' + imageObjectFitClass[mediaObjectFit];
 </script>
 
 <svelte:window on:resize={computeSizes} />
@@ -258,7 +282,7 @@
 >
   <img
     bind:this={imgEl}
-    class="image"
+    class={classes}
     src={image}
     on:load={onImgLoad}
     alt=""
@@ -287,20 +311,34 @@
     user-select: none;
     touch-action: none;
     cursor: move;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .image {
-    max-width: 100%;
-    max-height: 100%;
-    margin: auto;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
     will-change: transform;
   }
 
+  .image_contain {
+      max-width: 100%;
+      max-height: 100%;
+      margin: auto;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+  }
+  .image_horizontal_cover {
+      width: 100%;
+      height: auto;
+  }
+  .image_vertical_cover {
+      width: auto;
+      height: 100%;
+  }
+
   .cropperArea {
     position: absolute;
     left: 50%;

src/lib/helpers.ts

@@ -65,7 +65,7 @@ export function getDistanceBetweenPoints(pointA: Point, pointB: Point) {
  * Compute the output cropped area of the image in percentages and pixels.
  * x/y are the top-left coordinates on the src image
  * @param  crop x/y position of the current center of the image
- * @param  imageSize width/height of the src image (default is size on the screen, natural is the original size)
+ * @param  imgSize width/height of the src image (default is size on the screen, natural is the original size)
  * @param  cropSize width/height of the crop area
  * @param aspect aspect value
  * @param zoom zoom value

src/lib/types.ts

@@ -1,4 +1,5 @@
 export type CropShape = 'rect' | 'round'
+export type ObjectFit = 'contain' | 'cover' | 'horizontal-cover' | 'vertical-cover'
 
 export interface Size {
   width: number

src/routes/+page.svelte

@@ -1,21 +1,118 @@
 <script lang="ts">
   import queryString from 'query-string'
   import Cropper from '../lib'
+  import type { ObjectFit } from "$lib/types"
 
   let crop = { x: 0, y: 0 }
   let zoom = 1
+  let zoomSpeed = 0.5;
   let minZoom = 0.5;
   let maxZoom = 3;
+  let objectFit: ObjectFit = 'contain';
+  let mediaObjectFit: ObjectFit;
+
+  let croppedSize = 450;
 
   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
-  bind:minZoom
-  bind:maxZoom
-  on:cropcomplete={e => console.log(e.detail)}
-/>
+<div class="properties">
+  <b>Properties</b><br />
+  <ul>
+    <li>Crop: {crop.x}, {crop.y}</li>
+    <li>Zoom: {zoom}</li>
+    <li>Zoomspeed: {zoomSpeed}</li>
+    <li>objectFit: {mediaObjectFit}</li>
+  </ul>
+</div>
+<div class="cropperContainer" style={`width: ${croppedSize}px; height: ${croppedSize}px`}>
+  <Cropper
+    {image}
+    bind:crop
+    bind:zoom
+    bind:zoomSpeed
+    bind:minZoom
+    bind:maxZoom
+    bind:objectFit={objectFit}
+    bind:mediaObjectFit
+    on:cropcomplete={e => console.log(e.detail)}
+  />
+</div>
+<div class="settingsContainer flex flex-col gap-4">
+  <h2>Settings:</h2>
+  <div class="flex gap-4">
+    <div class="setting flex flex-col gap-2">
+      <label for="zoomSpeed">zoomSpeed</label>
+      <input id="zoomSpeed" type="number" bind:value={zoomSpeed} />
+    </div>
+    <div class="setting flex flex-col gap-2">
+        <label for="minZoom">minZoom</label>
+        <input id="minZoom" type="number" bind:value={minZoom} />
+    </div>
+    <div class="setting flex flex-col gap-2">
+      <label for="maxZoom">maxZoom</label>
+      <input id="maxZoom" type="number" bind:value={maxZoom} />
+    </div>
+  </div>
+
+  <div class="flex gap-4">
+    <div class="setting flex flex-col gap-2">
+      <label for="zoomSpeed">Image</label>
+      <select bind:value={image}>
+        <option value="/images/dog.jpeg">horizontal</option>
+        <option value="/images/cat.jpeg">vertical</option>
+      </select>
+    </div>
+    <div class="setting flex flex-col gap-2">
+      <label for="width">Width</label>
+      <input type="number" bind:value={croppedSize} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .properties{
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 30;
+      background: rgba(0,0,0,0.3);
+      padding: 16px;
+      border-bottom-right-radius: 10px;
+      color: white;
+  }
+  .properties ul{
+      padding-left: 20px;
+  }
+  .cropperContainer{
+      position: relative;
+      background: lightgray;
+      margin: 0 auto 16px;
+  }
+  .settingsContainer{
+      position: relative;
+      width: 450px;
+      height: 450px;
+      margin: auto;
+  }
+  .settingsContainer .setting{
+      width: 100px;
+  }
+  .settingsContainer .setting label{
+
+      font-weight:  bold;
+  }
+  .flex{
+      display: flex;
+  }
+  .flex-col{
+      flex-direction: column;
+  }
+  .gap-2{
+      gap: 8px;
+  }
+  .gap-4{
+      gap: 16px;
+  }
+</style>