From 0d4d847421b7daecf0ed9777082b1aee71865f2d Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Sat, 11 Oct 2025 09:24:57 +0000 Subject: [PATCH] Improve image editor by correctly displaying ribbons on uploaded images Update client/src/pages/image-editor.tsx to fix ribbon positioning logic and ensure ribbons are displayed correctly based on user-defined positions. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR --- attached_assets/image_1760174660512.png | Bin 0 -> 8917 bytes client/src/pages/image-editor.tsx | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 attached_assets/image_1760174660512.png diff --git a/attached_assets/image_1760174660512.png b/attached_assets/image_1760174660512.png new file mode 100644 index 0000000000000000000000000000000000000000..e65772e134bfbcac3c79068a5a9609af39e3358d GIT binary patch literal 8917 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 = { top_left: { x: 0, y: 0, rotation: 0 }, top_right: { x: width - ribbonSize, y: 0, rotation: 90 }, bottom_left: { x: 0, y: height - ribbonSize, rotation: -90 }, bottom_right: { x: width - ribbonSize, y: height - ribbonSize, rotation: 180 } }; - const pos = positions[ribbon.position as keyof typeof positions]; + const pos = positions[ribbon.position] || positions.top_left; ctx.save(); ctx.translate(pos.x + ribbonSize / 2, pos.y + ribbonSize / 2);