feat(new tool): Crop Image#404
Open
sYnVerse wants to merge 6 commits into
Open
Conversation
Introduce a new Crop Image tool: adds an interactive Vue cropper component (src/tools/crop-image/crop-image.vue) with drag/drop upload, viewport cropping, zoom, rotation, horizontal/vertical flip, aspect-ratio presets/custom ratio, rule-of-thirds grid, background color, and export options (PNG/JPEG/WebP, quality and width modes). Also adds tool registration (src/tools/crop-image/index.ts), a placeholder service (crop-image.service.ts), a Vitest unit test (crop-image.service.test.ts) and a Playwright e2e spec stub (crop-image.e2e.spec.ts).
Introduce getViewportDimensions and getBaseDimensions utility functions (src/tools/crop-image/crop-image.service.ts) to centralize viewport/base sizing logic and handle missing natural dimensions. Refactor crop-image.vue to consume these utilities for computed viewport and base dimensions. Add unit tests covering landscape/portrait calculations and cover scaling (src/tools/crop-image/crop-image.service.test.ts) and expand the e2e spec to upload a 1x1 PNG and assert presence of the cropper, sliders and control buttons (src/tools/crop-image/crop-image.e2e.spec.ts). Improves testability and keeps sizing logic consistent across the component.
Resolves an issue where exporting cropped images on small/mobile screens resulted in a different crop than shown in the preview. - Added reactive viewport scaling tracking using `@vueuse/core` `useElementSize`. - Wrapped the cropper viewport in a container that scales down via CSS `transform: scale()` to maintain aspect ratios and layout without shrinking coordinates. - Scaled pointer dragging deltas (`dx`, `dy`) by the scale factor to preserve movement tracking accuracy. - Cleaned up related ESLint warnings/errors and unused imports in the `crop-image` files."
Add localization entries for a new 'crop-image' tool across multiple locale YAML files (ar, da, de, el, en, es, fr, ga, it, ko, nl, no, pl, pt, ru, tr, uk, vi, zh). Each file adds title and description strings for cropping, resizing, and rotating images with custom background colors.
Add 'texts' translation entries for the crop-image tool across multiple locales (ar, da, de, el, en, es, fr, ga, it, ko, nl, no, pl, pt, ru, tr, uk, vi, zh). Adds UI strings such as drag/drop hints, flip/reset/fit controls, aspect ratio and custom ratio labels, background color, zoom/rotate, rule-of-thirds grid, export settings (format, quality, width), ratio presets and width options. Also fixes a small typo in the Turkish description (và → ve).
Add vue-i18n integration to crop-image.vue and replace hardcoded UI text with t() translation calls. Import useI18n and use t() for button labels, form labels, hints (with interpolation for zoom), and action text. Convert aspect ratio and export width option arrays into computed properties so they can use translated labels. These changes prepare the component for localization without changing functionality.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
This PR introduces a new Crop Image tool that allows users to crop, resize, rotate, and flip images. It integrates fully with the app's existing 19 locales and includes a layout scaling fix to ensure cropped coordinates match precisely on small and mobile screens.
Features
transform: scale()dynamically calculated via VueUse'suseElementSizeResizeObserver.locales/*.yml).Changes
src/tools/crop-image/crop-image.vuesrc/tools/crop-image/crop-image.service.tssrc/tools/crop-image/crop-image.service.test.ts,src/tools/crop-image/crop-image.e2e.spec.tssrc/tools/crop-image/index.ts,src/tools/index.tslocales/(re-formatting has been avoided to keep diffs clean).Pre-submission Verification
The changes have been verified using pre-commit validation checklist:
Dependency Installation: Completed successfully without script issues.
Linting: Verified that the entire src/tools/crop-image folder passes with zero warnings or errors.
Typecheck: Compiled successfully with no TypeScript compilation errors.
Unit Tests: All unit tests pass successfully (npx vitest run src/tools/crop-image).