Fixed: Dont crop svg files

formwidgets/Responsiveimage.php

@@ -75,15 +75,20 @@ class Responsiveimage extends FormWidgetBase
     protected function prepareVars()
     {
         $this->vars['aspectRatio'] = $this->aspectRatio
-            ? str_replace('"', "'", json_encode(explode(' / ', $this->aspectRatio)))
+            ? $this->vueParam(explode(' / ', $this->aspectRatio))
             : 'null';
         $this->vars['minWidth'] = $this->minWidth ?: '0';
         $this->vars['name'] = $this->formField->getName();
         $this->vars['value'] = $this->getLoadValue() ?: 'null';
         $this->vars['meta'] = $this->getLoadValue()
-            ? str_replace('"', "'", json_encode(app(UploadStorage::class)->getFileData($this->getLoadValue())))
+            ? $this->vueParam(app(UploadStorage::class)->getFileData($this->getLoadValue()))
             : 'null';
         $this->vars['model'] = $this->model;
+        $this->vars['croppableTypes'] = $this->vueParam(SourceFile::$croppableTypes);
+    }
+
+    private function vueParam($config) {
+        return str_replace('"', "'", json_encode($config));
     }
 
     /**
@@ -100,11 +105,11 @@ class Responsiveimage extends FormWidgetBase
      */
     public function getSaveValue($value)
     {
-        return $value;
+        return is_numeric($value) ? $value : null;
     }
 
     public function getLoadValue() {
-        return is_numeric(parent::getLoadValue()) ? parent::getLoadValue() : null;
+        return is_numeric(parent::getLoadValue()) ? parent::getLoadValue() : '';
     }
 
     /**

formwidgets/responsiveimage/assets/src/popup.mixin.js

@@ -11,7 +11,7 @@ export default {
         onChangeCrop() {
             this.popup.values.crop = this.jcrop.tellSelect();
         },
-        showPopup(file) {
+        showPopup(file, cro) {
             var _cls = this;
             this.popup = {
                 file: file,
@@ -31,6 +31,7 @@ export default {
                     imageElement.src = file.dataURL;
                     $cropContainer.append(imageElement);
 
+                    if (_cls.cropOptions.types.some(type => type == file.type)) {
                         var jcropOptions = {
                             shade: true,
                             boxWidth: $cropContainer.width(),
@@ -40,6 +41,7 @@ export default {
                         };
 
                         _cls.jcrop = $.Jcrop($popup.find('[data-jcrop] img').get(0), jcropOptions);
+                    }
 
                     $popup.on('change', '[name=title]', (e) => { _cls.popup.values.title = e.target.value });
                     $popup.on('change', '[name=description]', (e) => { _cls.popup.values.description = e.target.value });

formwidgets/responsiveimage/partials/_responsiveimage.htm

@@ -13,6 +13,7 @@
                 :crop-options="{
                     aspectRatio: <?= $aspectRatio ?>,
                     minWidth: <?= $minWidth ?>,
+                    types: <?= $croppableTypes; ?>
                 }"
                 :value="<?= $value; ?>"
                 :meta="<?= $meta; ?>"

models/SourceFile.php

@@ -12,7 +12,7 @@ class SourceFile extends Model
 
     protected $slugs = ['slug' => 'basename'];
 
-    protected $croppableTypes = [ 'image/jpeg', 'image/gif', 'image/png', 'image/webp' ];
+    public static $croppableTypes = [ 'image/jpeg', 'image/gif', 'image/png', 'image/webp' ];
 
     /**
      * @var string The database table used by the model.
@@ -63,6 +63,6 @@ class SourceFile extends Model
     }
 
     public function isCroppable(): bool {
-        return in_array($this->type, $this->croppableTypes);
+        return in_array($this->type, static::$croppableTypes);
     }
 }