Slightly increase default boundary and viewport size

CHANGELOG.md

@@ -1,12 +1,20 @@
 # Changelog
 
+## [0.8.8] - 2023-11-21
+
+### Fixed
+- Correctly handle uncached pointer move events.
+    - Resolves janky behavior in Safari when a pinch zoom is initiated with one pointer outside the preview image.
+
+### Changed
+- Slightly increased default boundary and viewport size.
+
+
 ## [0.8.6] - 2023-11-14
 
 ### Changed
 - For browsers that don't support WebP output (Safari), fall back to JPEG instead of PNG when `quality < 1` to avoid unexpectedly large files.
 
-(v0.8.5 was skipped due to a mistake when publishing).
-
 
 ## [0.8.4] - 2023-11-12
 
@@ -46,6 +54,7 @@ This is the initial pre-release after forking from [Foliotek/Croppie](https://gi
 - `showZoomer` option (hide via CSS instead if desired).
 
 
-[Unreleased]: https://github.com/theodorejb/cropt/compare/v0.8.6...HEAD
+[Unreleased]: https://github.com/theodorejb/cropt/compare/v0.8.8...HEAD
+[0.8.8]: https://github.com/theodorejb/cropt/compare/v0.8.6...v0.8.8
 [0.8.6]: https://github.com/theodorejb/cropt/compare/v0.8.4...v0.8.6
 [0.8.4]: https://github.com/theodorejb/cropt/releases/tag/v0.8.4

README.md

@@ -25,7 +25,7 @@ c.bind("path/to/image.jpg");
 
 ### Sizing
 
-The Cropt boundary defaults to 300px wide and 300px high.
+The Cropt boundary defaults to 320px wide and 320px high.
 To customize this, override the `.cropt-container .cr-boundary` width and height via CSS.
 
 ## Options
@@ -40,7 +40,7 @@ If set to `"off"`, the mouse wheel cannot be used to zoom in and out of the imag
 ### `viewport`
 
 Type: `{ width: number, height: number, type: "square" | "circle" }`  
-Default value: `{ width: 200, height: 200, type: "square" }`
+Default value: `{ width: 220, height: 220, type: "square" }`
 
 Defines the size and shape of the crop box.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cropt",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "description": "A lightweight JavaScript image cropper",
   "files": [
     "src/cropt.*"
@@ -10,14 +10,14 @@
   "main": "./src/cropt.js",
   "devDependencies": {
     "bootstrap": "^5.3.2",
-    "gh-pages": "^6.0.0",
+    "gh-pages": "^6.1.0",
     "grunt": "^1.6.1",
     "grunt-cli": "^1.4.3",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-sass": "^2.0.0",
     "http-server": "^14.1.1",
     "sass": "^1.69.5",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.2"
   },
   "scripts": {
     "deploy": "gh-pages -d ./demo",

src/cropt.css

@@ -20,12 +20,12 @@
     overflow: hidden;
     margin: 0 auto;
     z-index: 1;
-    height: 300px;
+    height: 320px;
 }
 
 .cropt-container .cr-boundary,
 .cropt-container .cr-slider-wrap {
-    width: 300px;
+    width: 320px;
 }
 
 .cropt-container .cr-viewport {

src/cropt.ts

@@ -141,8 +141,8 @@ export class Cropt {
     options: CroptOptions = {
         mouseWheelZoom: "on",
         viewport: {
-            width: 200,
-            height: 200,
+            width: 220,
+            height: 220,
             type: 'square',
         },
         zoomerInputClass: 'cr-slider',

src/demo.ts

@@ -32,8 +32,8 @@ let photoSrc = "photos/" + photos[Math.floor(Math.random() * photos.length)];
 
 let options: CroptOptions = {
     viewport: {
-        width: 200,
-        height: 200,
+        width: 220,
+        height: 220,
         type: "circle",
     },
     mouseWheelZoom: "on",