diff --git a/astro.config.mjs b/astro.config.ts
similarity index 100%
rename from astro.config.mjs
rename to astro.config.ts
diff --git a/src/assets/ts/imgStore.ts b/src/assets/ts/imgStore.ts
index cbf2a82..63f0e2d 100644
--- a/src/assets/ts/imgStore.ts
+++ b/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;
diff --git a/src/assets/ts/modules/createImgCanvas.mts b/src/assets/ts/modules/createImgCanvas.mts
index 5fd7f8c..1b93d20 100644
--- a/src/assets/ts/modules/createImgCanvas.mts
+++ b/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);
diff --git a/src/assets/ts/modules/extractImgInfo.mts b/src/assets/ts/modules/extractImgInfo.mts
index 9b4938b..e59587b 100644
--- a/src/assets/ts/modules/extractImgInfo.mts
+++ b/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;
diff --git a/src/assets/ts/modules/renderImg.mts b/src/assets/ts/modules/renderImg.mts
index 9934dac..7a3d00e 100644
--- a/src/assets/ts/modules/renderImg.mts
+++ b/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);
diff --git a/src/assets/ts/modules/spinImg.mts b/src/assets/ts/modules/spinImg.mts
index d973c43..6c2530f 100644
--- a/src/assets/ts/modules/spinImg.mts
+++ b/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)`;
}
diff --git a/src/components/TheImagePreview.astro b/src/components/TheImagePreview.astro
index 57a111f..35564e8 100644
--- a/src/components/TheImagePreview.astro
+++ b/src/components/TheImagePreview.astro
@@ -6,16 +6,16 @@ const placeholderImgURL = `${DEV ? baseURL.slice(1) : baseURL}/img-placeholder.w
- 
+
+
+