[6.x] Fix focal point editor performance with large images

resources/js/components/assets/Editor/Editor.vue

@@ -167,7 +167,7 @@
             <focal-point-editor
                 v-if="showFocalPointEditor && isFocalPointEditorEnabled"
                 :data="values.focus"
-                :image="asset.preview"
+                :image="asset.large_thumbnail"
                 @selected="selectFocalPoint"
                 @closed="closeFocalPointEditor"
             />

src/Http/Resources/CP/Assets/HasThumbnails.php

@@ -27,6 +27,7 @@ private function getImageThumbnail(): array
             'is_image' => true,
             'preview' => $this->previewUrl(),
             'thumbnail' => $this->thumbnailUrl('small'),
+            'large_thumbnail' => $this->thumbnailUrl('large'),
             'can_be_transparent' => $this->isSvg() || $this->extensionIsOneOf(['svg', 'png', 'webp', 'avif']),
             'alt' => $this->alt,
             'orientation' => $this->orientation(),

src/Imaging/Manager.php

@@ -86,7 +86,7 @@ public function userManipulationPresets()
     public function cpManipulationPresets()
     {
         $presets = array_merge(
-            ['small' => 400],
+            ['small' => 400, 'large' => 1600],
             config('statamic.cp.thumbnail_presets', [])
         );
 

tests/Feature/Assets/ImageThumbnailTest.php

@@ -3,8 +3,10 @@
 namespace Tests\Feature\Assets;
 
 use Illuminate\Http\UploadedFile;
+use PHPUnit\Framework\Attributes\DataProvider;
 use PHPUnit\Framework\Attributes\Test;
 use Statamic\Facades\AssetContainer;
+use Statamic\Facades\Glide;
 use Statamic\Facades\User;
 use Tests\FakesRoles;
 use Tests\PreventSavingStacheItemsToDisk;
@@ -21,6 +23,8 @@ public function setUp(): void
     {
         parent::setUp();
 
+        Glide::cacheStore()->flush();
+
         config(['filesystems.disks.test' => [
             'driver' => 'local',
             'root' => $this->tempDir = __DIR__.'/tmp',
@@ -51,6 +55,32 @@ public function it_returns_thumbnail()
             ->assertSuccessful();
     }
 
+    #[Test]
+    #[DataProvider('presetProvider')]
+    public function it_returns_thumbnail_using_a_preset($preset)
+    {
+        $container = AssetContainer::make('test')->disk('test')->save();
+        $container
+            ->makeAsset('one.png')
+            ->upload(UploadedFile::fake()->image('one.png'));
+
+        $this->setTestRoles(['test' => ['access cp', 'view test assets']]);
+        $user = User::make()->assignRole('test')->save();
+
+        $this
+            ->actingAs($user)
+            ->getJson('/cp/thumbnails/'.base64_encode('test::one.png').'/'.$preset)
+            ->assertSuccessful();
+    }
+
+    public static function presetProvider()
+    {
+        return [
+            'small' => ['small'],
+            'large' => ['large'],
+        ];
+    }
+
     #[Test]
     public function it_404s_when_the_asset_doesnt_exist()
     {

tests/Feature/Assets/ShowAssetTest.php

@@ -52,6 +52,29 @@ public function it_returns_json()
             ->assertJson(['data' => ['id' => 'test::one.txt']]);
     }
 
+    #[Test]
+    public function it_returns_thumbnail_urls_for_images()
+    {
+        $container = AssetContainer::make('test')->disk('test')->save();
+        $container
+            ->makeAsset('one.png')
+            ->upload(UploadedFile::fake()->image('one.png'));
+
+        $this->setTestRoles(['test' => ['access cp', 'view test assets']]);
+        $user = User::make()->assignRole('test')->save();
+
+        $encodedAsset = base64_encode('test::one.png');
+
+        $this
+            ->actingAs($user)
+            ->getJson('/cp/assets/'.$encodedAsset)
+            ->assertSuccessful()
+            ->assertJson(['data' => [
+                'thumbnail' => "http://localhost/cp/thumbnails/{$encodedAsset}/small",
+                'large_thumbnail' => "http://localhost/cp/thumbnails/{$encodedAsset}/large",
+            ]]);
+    }
+
     #[Test]
     public function it_404s_when_the_asset_doesnt_exist()
     {

tests/Imaging/ManagerTest.php

@@ -69,6 +69,9 @@ public function it_gets_manipulation_presets()
             'cp_thumbnail_small_landscape' => ['w' => '400', 'h' => '400', 'fit' => 'contain'],
             'cp_thumbnail_small_portrait' => ['h' => '400', 'fit' => 'contain'],
             'cp_thumbnail_small_square' => ['w' => '400', 'h' => '400'],
+            'cp_thumbnail_large_landscape' => ['w' => '1600', 'h' => '1600', 'fit' => 'contain'],
+            'cp_thumbnail_large_portrait' => ['h' => '1600', 'fit' => 'contain'],
+            'cp_thumbnail_large_square' => ['w' => '1600', 'h' => '1600'],
         ], $this->manager->cpManipulationPresets());
 
         $this->manager->registerCustomManipulationPresets([
@@ -87,6 +90,9 @@ public function it_gets_manipulation_presets()
             'cp_thumbnail_small_landscape' => ['w' => '400', 'h' => '400', 'fit' => 'contain'],
             'cp_thumbnail_small_portrait' => ['h' => '400', 'fit' => 'contain'],
             'cp_thumbnail_small_square' => ['w' => '400', 'h' => '400'],
+            'cp_thumbnail_large_landscape' => ['w' => '1600', 'h' => '1600', 'fit' => 'contain'],
+            'cp_thumbnail_large_portrait' => ['h' => '1600', 'fit' => 'contain'],
+            'cp_thumbnail_large_square' => ['w' => '1600', 'h' => '1600'],
             'og_image' => ['w' => 1146, 'h' => 600],
             'twitter_image' => ['w' => 1200, 'h' => 600],
         ], $this->manager->manipulationPresets());