Clean up and force a rebuild of thumbnails when customising a crop region.

controllers/EditAsset.php

@@ -149,18 +149,19 @@ class EditAsset extends HTMLController
 		$crop_value = $data->crop_width . ',' . $data->crop_height . ',' . $data->source_x . ',' . $data->source_y;
 		$meta[$crop_key] = $crop_value;
 
-		// If we uploaded a custom thumbnail, stop considering it such.
+		// If we previously uploaded a custom thumbnail, stop considering it such.
 		$custom_key = 'custom_' . $data->thumb_width . 'x' . $data->thumb_height;
 		if (isset($meta[$custom_key]))
+		{
+			// TODO: delete from disk
 			unset($meta[$custom_key]);
+		}
+
+		// Save meta changes so far.
+		$image->setMetaData($meta);
 
 		// Force a rebuild of related thumbnails.
-		$thumb_key = 'thumb_' . $data->thumb_width . 'x' . $data->thumb_height;
+		$image->removeThumbnailsOfSize($data->thumb_width, $data->thumb_height);
-		foreach ($meta as $meta_key => $meta_value)
-			if ($meta_key === $thumb_key || strpos($meta_key, $thumb_key . '_') !== false)
-				unset($meta[$meta_key]);
-
-		$image->setMetaData($meta);
 
 		$payload = [
 			'key' => $crop_key,

models/Image.php

@@ -133,9 +133,9 @@ class Image extends Asset
 
 	public function removeAllThumbnails()
 	{
-		foreach ($this->thumbnails as $key => $value)
+		foreach ($this->thumbnails as $key => $filename)
 		{
-			$thumb_path = THUMBSDIR . '/' . $this->subdir . '/' . $value;
+			$thumb_path = THUMBSDIR . '/' . $this->subdir . '/' . $filename;
 			if (is_file($thumb_path))
 				unlink($thumb_path);
 		}
@@ -146,6 +146,30 @@ class Image extends Asset
 			['id_asset' => $this->id_asset]);
 	}
 
+	public function removeThumbnailsOfSize($width, $height)
+	{
+		foreach ($this->thumbnails as $key => $filename)
+		{
+			if (strpos($key, $width . 'x' . $height) !== 0)
+				continue;
+
+			$thumb_path = THUMBSDIR . '/' . $this->subdir . '/' . $filename;
+			if (is_file($thumb_path))
+				unlink($thumb_path);
+		}
+
+		return Registry::get('db')->query('
+			DELETE FROM assets_thumbs
+			WHERE id_asset = {int:id_asset} AND
+				width = {int:width} AND
+				height = {int:height}',
+			[
+				'height' => $height,
+				'id_asset' => $this->id_asset,
+				'width' => $width,
+			]);
+	}
+
 	public function replaceThumbnail($descriptor, $tmp_file)
 	{
 		if (!is_file($tmp_file))

templates/EditAssetForm.php

@@ -141,9 +141,6 @@ class EditAssetForm extends SubTemplate
 		$first = INF;
 		foreach ($this->thumbs as $i => $thumb)
 		{
-			if (!$thumb['status'])
-				continue;
-
 			$first = min($i, $first);
 
 			echo '
@@ -178,14 +175,12 @@ class EditAssetForm extends SubTemplate
 						<img id="thumbnail" src="', $this->thumbs[$first]['url'], '" alt="Thumbnail" style="width: 100%; height: auto;">
 					</a>
 				</div>
-				<script type="text/javascript">
+				<script type="text/javascript" defer="defer">
-					setTimeout(function() {
+					document.getElementById("thumbnail_src").addEventListener("change", event => {
-						document.getElementById("thumbnail_src").addEventListener("change", function(event) {
+						let selection = event.target.options[event.target.selectedIndex];
-							var selection = event.target.options[event.target.selectedIndex];
+						document.getElementById("thumbnail_link").href = selection.dataset.url;
-							document.getElementById("thumbnail_link").href = selection.dataset.url;
+						document.getElementById("thumbnail").src = selection.dataset.url;
-							document.getElementById("thumbnail").src = selection.dataset.url;
+					});
-						});
-					}, 100);
 				</script>';
 	}
 
@@ -196,27 +191,27 @@ class EditAssetForm extends SubTemplate
 
 		echo '
 				<script type="text/javascript" src="', BASEURL, '/js/crop_editor.js"></script>
-				<script type="text/javascript">
+				<script type="text/javascript" defer="defer">
-					setTimeout(function() {
+					let editor = new CropEditor({
-						var editor = new CropEditor({
+						submit_url: "', BASEURL, '/editasset/",
-							submit_url: "', BASEURL, '/editasset/",
+						original_image_src: "', $this->asset->getUrl(), '",
-							original_image_src: "', $this->asset->getUrl(), '",
+						editor_container_parent_id: "asset_form",
-							editor_container_parent_id: "asset_form",
+						thumbnail_select_id: "thumbnail_src",
-							thumbnail_select_id: "thumbnail_src",
+						drag_target: ".crop_image_container",
-							drag_target: ".crop_image_container",
+						asset_id: ', $this->asset->getId(), ',
-							asset_id: ', $this->asset->getId(), ',
+						after_save: function(data) {
-							after_save: function(data) {
+							// Update thumbnail
-								// Update thumbnail
+							document.getElementById("thumbnail").src = data.url + "?" + (new Date()).getTime();
-								document.getElementById("thumbnail").src = data.url + "?" + (new Date()).getTime();
 
-								// Update select
+							// Update select
-								var src = document.getElementById("thumbnail_src");
+							let src = document.getElementById("thumbnail_src");
-								src.options[src.selectedIndex].dataset.crop_region = data.value;
+							let option = src.options[src.selectedIndex];
+							option.dataset.crop_region = data.value;
+							option.textContent = option.textContent.replace(/top|bottom|centre|slice/, "exact");
 
-								// TODO: update meta
+							// TODO: update meta
-							}
+						}
-						});
+					});
-					}, 100);
 				</script>';
 	}
 
@@ -259,9 +254,6 @@ class EditAssetForm extends SubTemplate
 
 		foreach ($this->thumbs as $thumb)
 		{
-			if (!$thumb['status'])
-				continue;
-
 			echo '
 						<option value="thumb_', implode('x', $thumb['dimensions']);