football2801/pictureFrame-webApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: orientation toggle and mismatch indicator in crop editor
CI / test (push) Has been cancelled
Details

Browse Source 
The crop tool now exposes a landscape/portrait toggle next to the
device-name label, and the canvas crop frame snaps to the chosen
aspect when toggled. Choosing an orientation that does not match
the target frame's current orientation surfaces a yellow informational
chip — purely informational, no action required, clears as soon as
the user toggles back to the matching orientation (or changes the
frame in Settings).

The chosen orientation rides along on the upload/reprocess request
as a new cropOrientation form field and is persisted on the Image
entity, so the library view and rotation logic can later surface
the same mismatch state for already-uploaded photos. Existing photos
without a stored orientation get null and are unaffected.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Edholm
2026-05-06 14:45:59 -04:00
parent c387260ee7
commit 52e85703f7
11 changed files with 225 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/stores/images.ts
+9 -6
View File
@@ -6,6 +6,7 @@ interface UploadExtras {
original?: File
cropParams?: CropParams
stickerState?: StickerLayer[]
cropOrientation?: 'landscape' | 'portrait'
}
export const useImagesStore = defineStore('images', () => {
@@ -31,9 +32,10 @@ export const useImagesStore = defineStore('images', () => {
async function uploadImage(file: File, extras?: UploadExtras): Promise<Image> {
const form = new FormData()
form.append('file', file)
if (extras?.original) form.append('original', extras.original)
if (extras?.cropParams) form.append('cropParams', JSON.stringify(extras.cropParams))
if (extras?.stickerState) form.append('stickerState', JSON.stringify(extras.stickerState))
if (extras?.original) form.append('original', extras.original)
if (extras?.cropParams) form.append('cropParams', JSON.stringify(extras.cropParams))
if (extras?.stickerState) form.append('stickerState', JSON.stringify(extras.stickerState))
if (extras?.cropOrientation) form.append('cropOrientation', extras.cropOrientation)
const res = await fetch('/api/images', { method: 'POST', body: form })
if (!res.ok) {
@@ -45,11 +47,12 @@ export const useImagesStore = defineStore('images', () => {
return image
}
async function reprocessImage(imageId: number, composited: File, extras?: { cropParams?: CropParams; stickerState?: StickerLayer[] }): Promise<Image> {
async function reprocessImage(imageId: number, composited: File, extras?: { cropParams?: CropParams; stickerState?: StickerLayer[]; cropOrientation?: 'landscape' | 'portrait' }): Promise<Image> {
const form = new FormData()
form.append('file', composited)
if (extras?.cropParams) form.append('cropParams', JSON.stringify(extras.cropParams))
if (extras?.stickerState) form.append('stickerState', JSON.stringify(extras.stickerState))
if (extras?.cropParams) form.append('cropParams', JSON.stringify(extras.cropParams))
if (extras?.stickerState) form.append('stickerState', JSON.stringify(extras.stickerState))
if (extras?.cropOrientation) form.append('cropOrientation', extras.cropOrientation)
const res = await fetch(`/api/images/${imageId}/reprocess`, { method: 'POST', body: form })
if (!res.ok) {
frontend/src/stores/upload.ts
+9 -5
View File
@@ -8,6 +8,7 @@ export const useUploadStore = defineStore('upload', () => {
const croppedBlob = ref<Blob | null>(null)
const croppedUrl = ref<string | null>(null)
const cropParams = ref<CropParams | null>(null)
const cropOrientation = ref<'landscape' | 'portrait' | null>(null)
const stickers = ref<StickerLayer[]>([])
const contextDeviceId = ref<number | null>(null)
const selectedDeviceIds = ref<number[]>([])
@@ -29,16 +30,18 @@ export const useUploadStore = defineStore('upload', () => {
originalUrl.value = URL.createObjectURL(blob)
editingImageId.value = image.id
cropParams.value = image.cropParams ?? null
cropOrientation.value = image.cropOrientation ?? null
stickers.value = image.stickerState ? [...image.stickerState] : []
selectedDeviceIds.value = image.approvedDeviceIds
contextDeviceId.value = deviceId ?? null
}
function setCrop(blob: Blob, params: CropParams) {
function setCrop(blob: Blob, params: CropParams, orientation: 'landscape' | 'portrait') {
if (croppedUrl.value) URL.revokeObjectURL(croppedUrl.value)
croppedBlob.value = blob
croppedUrl.value = URL.createObjectURL(blob)
cropParams.value = params
croppedBlob.value = blob
croppedUrl.value = URL.createObjectURL(blob)
cropParams.value = params
cropOrientation.value = orientation
}
function addSticker(s: StickerLayer) {
@@ -61,6 +64,7 @@ export const useUploadStore = defineStore('upload', () => {
croppedBlob.value = null
croppedUrl.value = null
cropParams.value = null
cropOrientation.value = null
stickers.value = []
contextDeviceId.value = null
selectedDeviceIds.value = []
@@ -69,7 +73,7 @@ export const useUploadStore = defineStore('upload', () => {
return {
originalFile, originalUrl,
croppedBlob, croppedUrl, cropParams,
croppedBlob, croppedUrl, cropParams, cropOrientation,
stickers, contextDeviceId, selectedDeviceIds, editingImageId,
init, initEdit, setCrop, addSticker, updateSticker, removeSticker, cleanup,
}