🩹 fix: fix minor editing issues & improve UX

src/assets/ts/imgStore.ts

@@ -17,6 +17,7 @@ interface ImgStore {
 	activeFilter: Filter;
 	_hasFilter: boolean;
 	_isRotated: boolean;
+	isLandscape: boolean;
 	_isFlipped: boolean;
 	isEdited: boolean;
 	activeFilterIndex: string;
@@ -122,13 +123,19 @@ const imgStore: ImgStore = {
 		return filters[activeFilterIndex];
 	},
 	get _hasFilter() {
-		return this.state.filters.some((filter: Filter, index: number) => {
-			filter.value !== this._defaultState.filters[index].value;
-		});
+		const isFilterValueChanged = (filter: Filter, index: number) => {
+			const defaultFilterValue = this._defaultState.filters[index].value;
+			return filter.value !== defaultFilterValue;
+		};
+
+		return this.state.filters.some(isFilterValueChanged);
 	},
 	get _isRotated() {
 		return this.state.rotationDeg % 360 !== 0;
 	},
+	get isLandscape() {
+		return this.state.rotationDeg % 180 !== 0;
+	},
 	get _isFlipped() {
 		const { verticalFlip, horizontalFlip } = this.state;
 		const { verticalFlip: defaultVerticalFlip, horizontalFlip: defaultHorizontalFlip } = this._defaultState;

src/assets/ts/modules/createImgCanvas.mts

@@ -4,13 +4,14 @@ import { DOMElements } from '@ts/app.ts';
 export default function createImgCanvas() {
 	const { selectedImg } = DOMElements;
 	const { naturalWidth, naturalHeight } = selectedImg;
+	const imgIsLandscape = imgStore.isLandscape;
 	const { rotationDeg, CSSFilters, verticalFlip, horizontalFlip } = imgStore.state;
 	const rotationRadian: number = (rotationDeg * Math.PI) / 180;
-	const imgIsLandscape: boolean = rotationDeg % 180 !== 0;
 
 	const canvas = document.createElement('canvas') as HTMLCanvasElement;
 	canvas.width = imgIsLandscape ? naturalHeight : naturalWidth;
 	canvas.height = imgIsLandscape ? naturalWidth : naturalHeight;
+
 	const centerX: number = canvas.width / 2;
 	const centerY: number = canvas.height / 2;
 	const destinationX: number = -(naturalWidth / 2);

src/assets/ts/modules/extractImgInfo.mts

@@ -1,4 +1,4 @@
-const lastDotIndex: Function = (string: string) => string.lastIndexOf('.');
+const lastDotIndex: Function = (str: string) => str.lastIndexOf('.');
 
 export default function extractImgInfo(imgFile: File) {
 	const fileName: string = imgFile.name;

src/assets/ts/modules/renderImg.mts

@@ -13,8 +13,7 @@ export default function renderImg(imgFile: File) {
 	imgStore.newNameAndExtension = extractImgInfo(imgFile);
 
 	const img = DOMElements.selectedImg.cloneNode() as HTMLImageElement;
-	img.classList.remove('object-cover');
-	img.classList.add('object-contain');
+	img.classList.replace('object-cover', 'object-contain');
 	img.removeAttribute('style'); // Remove old filters
 	img.title = img.alt = imgStore.title;
 	img.src = URL.createObjectURL(imgFile);

src/assets/ts/modules/spinImg.mts

@@ -1,14 +1,19 @@
 import imgStore from '@ts/imgStore.ts';
 import { DOMElements } from '@ts/app.ts';
 
+const { width, height } = DOMElements.selectedImg;
+
 export default function spinImg(event: Event = null) {
 	if (event?.target !== event?.currentTarget) {
 		const target = event.target as HTMLButtonElement;
 		const spinBtn = target.closest('button') as HTMLButtonElement;
-		const spinType: string = spinBtn.title.toLowerCase();
+		const spinType: string = spinBtn.title.toLowerCase().trim();
 		imgStore.spin = spinType;
 	}
 
+	const { selectedImg } = DOMElements;
 	const { verticalFlip, horizontalFlip, rotationDeg } = imgStore.state;
-	DOMElements.selectedImg.style.transform = `scale(${verticalFlip}, ${horizontalFlip}) rotate(${rotationDeg}deg)`;
+	selectedImg.style.width = imgStore.isLandscape ? `${height}px` : '100%';
+	selectedImg.style.height = imgStore.isLandscape ? `${width}px` : '100%';
+	selectedImg.style.transform = `scale(${verticalFlip}, ${horizontalFlip}) rotate(${rotationDeg}deg)`;
 }

src/components/TheImagePreview.astro

@@ -6,16 +6,16 @@ const placeholderImgURL = `${DEV ? baseURL.slice(1) : baseURL}/img-placeholder.w
 <figure
 	id="img_drop_zone"
 	class="order-1 flex h-52 min-h-full items-center justify-center overflow-hidden rounded border-2 border-gray-400 bg-none shadow-inner shadow-gray-400 md:order-2 md:col-span-8">
-	<img
-		src={placeholderImgURL}
-		alt="Placeholder"
-		height="408"
-		title=""
-		id="selected_img"
-		class="h-full object-cover transition-transform duration-300"
-	/>
+	<img src={placeholderImgURL} alt="Placeholder" height="408" title="" id="selected_img" class="h-full object-cover" />
 </figure>
 
+<style>
+	img {
+		/* prettier-ignore */
+		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0s;
+	}
+</style>
+
 <script>
 	import { DOMElements } from '@ts/app.ts';
 	import autoAnimate from '@formkit/auto-animate';

tailwind.config.ts

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
 export default {
-	content: ['./src/pages/index.astro', './src/components/*.astro', './src/assets/ts/**/*.{ts, mts}'],
+	content: ['./src/pages/index.astro', './src/components/*.astro', './src/assets/ts/modules/*.mts'],
 	future: { hoverOnlyWhenSupported: true },
 	theme: {
 		extend: {