Merge branch 'develop'

mullema · Jun 26, 2022 · c2e01f2 · c2e01f2
2 parents ac6a4a4 + b832427
commit c2e01f2
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 42 deletions.
diff --git a/classes/File.php b/classes/File.php
@@ -8,15 +8,14 @@ class File extends Cms\File {
 
     /**
      * Clip Information from Field
-     * @var array
      */
-    private $clip;
+    private array $clip;
 
-    public function setClip($value) {
+    public function setClip(array $value): void {
         $this->clip = $value;
     }
 
-    public function getClip() {
+    public function getClip(): ?array {
         return $this->clip;
     }
 

diff --git a/classes/Filename.php b/classes/Filename.php
@@ -2,7 +2,7 @@
 
 namespace mullema;
 
-use Kirby\Cms;
+use Kirby\Filesystem;
 use Kirby\Toolkit\Str;
 
 /**
@@ -26,7 +26,7 @@
  * echo $filename->toString();
  * // result: some-file-300x200-q80-clip150x150-10x10.jpg
  */
-class Filename extends Cms\Filename {
+class Filename extends Filesystem\Filename {
 
     /**
      * Converts all processed attributes

diff --git a/composer.json b/composer.json
@@ -3,6 +3,7 @@
   "description": "Visual image clip for Kirby 3",
   "type": "kirby-plugin",
   "license": "MIT",
+  "version": "3.1.0",
   "authors": [
     {
       "name": "Matthias Müller",
@@ -13,6 +14,9 @@
   "require": {
     "getkirby/composer-installer": "^1.2"
   },
+  "conflict": {
+    "getkirby/cms": "<3.6"
+  },
   "extra": {
     "installer-name": "k3-image-clip"
   }

diff --git a/index.js b/index.js
diff --git a/src/facade/CropprFacade.js b/src/facade/CropprFacade.js
@@ -56,6 +56,7 @@ export default class {
           this.factor_w = this.original_dimensions.width / event.target.clientWidth
           this.factor_h = this.original_dimensions.height / event.target.clientHeight
           this.setStartPosition()
+          this.setSelectorBoundaries()
         }, false)
       },
       ...this.events
@@ -99,53 +100,46 @@ export default class {
    * Moves the crop selector to a start position
    */
   setStartPosition () {
-    let reference = {
-      width: 10,
-      height: 10
+    let reference = {}
+    if (this.saved) {
+      // set to position of saved cropped image
+      reference = {
+        width: Math.round(this.saved.width / this.factor_w),
+        height: Math.round(this.saved.height / this.factor_h),
+        left: Math.round(this.saved.left / this.factor_w),
+        top: Math.round(this.saved.top / this.factor_h)
+      }
+    } else {
+      reference = {
+        width: (this.max_width ? this.max_width : this.original_dimensions.width) / this.factor_w,
+        height: (this.max_height ? this.max_height : this.original_dimensions.height) / this.factor_h,
+        left: 0,
+        top: 0
+      }
     }
 
+    // set size and position
+    this.cropInstance.resizeTo(reference.width, reference.height)
+    this.cropInstance.moveTo(reference.left, reference.top)
+  }
+
+  /**
+   * set size of crop selector to max/min values according to current image size
+   * current image size is only known after initialisation
+   */
+  setSelectorBoundaries () {
     if (this.max_width && this.max_height) {
-      this.cropInstance.options.maxSize = reference = {
+      this.cropInstance.options.maxSize = {
         width: this.max_width / this.factor_w,
         height: this.max_height / this.factor_h
       }
     }
-
     if (this.min_width && this.min_height) {
-      this.cropInstance.options.minSize = reference = {
+      this.cropInstance.options.minSize = {
         width: this.min_width / this.factor_w,
         height: this.min_height / this.factor_h
       }
     }
-
-    if (!this.saved) {
-      const size = aspectRatioFit({
-        srcWidth: reference.width,
-        srcHeight: reference.height,
-        maxWidth: this.original_dimensions.width,
-        maxHeight: this.original_dimensions.height
-      })
-
-      reference = {
-        width: size.width / this.factor_w,
-        height: size.height / this.factor_h
-      }
-
-      // set default values
-      this.cropInstance.resizeTo(reference.width, reference.height)
-      this.cropInstance.moveTo(0, 0)
-    } else {
-      // set to position of saved cropped image
-      const calculated = {
-        width: Math.round(this.saved.width / this.factor_w),
-        height: Math.round(this.saved.height / this.factor_h),
-        left: Math.round(this.saved.left / this.factor_w),
-        top: Math.round(this.saved.top / this.factor_h)
-      }
-
-      this.cropInstance.resizeTo(calculated.width, calculated.height)
-      this.cropInstance.moveTo(calculated.left, calculated.top)
-    }
   }
 
   /**