mirror of
https://github.com/immich-app/immich.git
synced 2025-11-07 23:33:04 -05:00
7f7fec2cea
* cropping, panel * fix presets * types * prettier * fix lint * fix aspect ratio, performance optimization * improved tool selection, removed placeholder * fix the mouse's exit from canvas * fix error * the "save" button and change tracking * lint, format * the mini functionality of the save button * fix aspect ratio * hide editor button on mobiles * strict equality Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * Use the dollar sign syntax for stores inside components * unobtrusive grid lines, circles at the corners * more correct image load, handleError * more strict equality * fix styles. unused and tailwind Co-Authored-By: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * dont store isShowEditor * if showEditor - hide navbar & shortcuts * crop-canvas decomposition (danger) I could have accidentally broken something.. but I checked the work and it seems ok. * fix lint * fix ts * callback function as props * correctly disabling shortcuts * convenient canvas borders • you can use the mouse to go beyond the boundaries and freely change the crop. • the circles on the corners of the canvas are not cut off. * -the editor button for video files, -save button * hide editor btn if panoramic || gif || live * corners instead of circles (preview), fix lint&format * confirm close editor without save * vertical aspect ratios * recovery after merge. editor's closing shortcut * fix format * move from canvas to html elements * fix changes detections * rotation * hide detail panel if showing editor * fix aspect ratios near min size * fix crop area when changing image size when rotate * fix of fix * better layout - grouping https://github.com/user-attachments/assets/48f15172-9666-4588-acb6-3cb5eda873a8 * hide the button * fix i18n, format * hide button * hide button v2 --------- Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
41 lines
932 B
TypeScript
41 lines
932 B
TypeScript
import type { CropSettings } from '$lib/stores/asset-editor.store';
|
|
import { get } from 'svelte/store';
|
|
import { cropFrame, overlayEl } from './crop-store';
|
|
|
|
export function draw(crop: CropSettings) {
|
|
const mCropFrame = get(cropFrame);
|
|
|
|
if (!mCropFrame) {
|
|
return;
|
|
}
|
|
|
|
mCropFrame.style.left = `${crop.x}px`;
|
|
mCropFrame.style.top = `${crop.y}px`;
|
|
mCropFrame.style.width = `${crop.width}px`;
|
|
mCropFrame.style.height = `${crop.height}px`;
|
|
|
|
drawOverlay(crop);
|
|
}
|
|
|
|
export function drawOverlay(crop: CropSettings) {
|
|
const overlay = get(overlayEl);
|
|
if (!overlay) {
|
|
return;
|
|
}
|
|
|
|
overlay.style.clipPath = `
|
|
polygon(
|
|
0% 0%,
|
|
0% 100%,
|
|
100% 100%,
|
|
100% 0%,
|
|
0% 0%,
|
|
${crop.x}px ${crop.y}px,
|
|
${crop.x + crop.width}px ${crop.y}px,
|
|
${crop.x + crop.width}px ${crop.y + crop.height}px,
|
|
${crop.x}px ${crop.y + crop.height}px,
|
|
${crop.x}px ${crop.y}px
|
|
)
|
|
`;
|
|
}
|