TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inline

Browse Source
This commit is contained in:
Manav Rathi
2024-11-23 05:58:18 +05:30
parent 17bbf31049
commit 76bac5aa72
2 changed files with 123 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/FreehandCropRegion.tsx
View File

@@ -1,119 +0,0 @@
import type { Dispatch, Ref, SetStateAction } from "react";
import { forwardRef } from "react";
import { CropBoxProps } from "./";
interface FreehandCropRegionProps {
cropBox: CropBoxProps;
setIsDragging: Dispatch<SetStateAction<boolean>>;
}
const FreehandCropRegion = forwardRef(
(props: FreehandCropRegionProps, ref: Ref<HTMLDivElement>) => {
return (
<>
{/* Top overlay */}
<div
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
height: props.cropBox.y + "px", // height up to the top of the crop box
backgroundColor: "rgba(0,0,0,0.5)",
pointerEvents: "none",
}}
></div>
{/* Bottom overlay */}
<div
style={{
position: "absolute",
bottom: 0,
left: 0,
right: 0,
height: `calc(100% - ${
props.cropBox.y + props.cropBox.height
}px)`, // height from the bottom of the crop box to the bottom of the canvas
backgroundColor: "rgba(0,0,0,0.5)",
pointerEvents: "none",
}}
></div>
{/* Left overlay */}
<div
style={{
position: "absolute",
top: props.cropBox.y + "px",
left: 0,
width: props.cropBox.x + "px", // width up to the left side of the crop box
height: props.cropBox.height + "px", // same height as the crop box
backgroundColor: "rgba(0,0,0,0.5)",
pointerEvents: "none",
}}
></div>
{/* Right overlay */}
<div
style={{
position: "absolute",
top: props.cropBox.y + "px",
right: 0,
width: `calc(100% - ${
props.cropBox.x + props.cropBox.width
}px)`, // width from the right side of the crop box to the right side of the canvas
height: props.cropBox.height + "px", // same height as the crop box
backgroundColor: "rgba(0,0,0,0.5)",
pointerEvents: "none",
}}
></div>
<div
style={{
display: "grid",
position: "absolute",
left: props.cropBox.x + "px",
top: props.cropBox.y + "px",
width: props.cropBox.width + "px",
height: props.cropBox.height + "px",
border: "1px solid white",
gridTemplateColumns: "1fr 1fr 1fr",
gridTemplateRows: "1fr 1fr 1fr",
gap: "0px",
zIndex: 30, // make sure the crop box is above the overlays
}}
ref={ref}
>
{Array.from({ length: 9 }).map((_, index) => (
<div
key={index}
style={{
border: "1px solid white",
boxSizing: "border-box",
pointerEvents: "none",
}}
></div>
))}
<div
style={{
position: "absolute",
height: "10px",
width: "10px",
backgroundColor: "white",
border: "1px solid black",
right: "-5px",
bottom: "-5px",
cursor: "se-resize",
}}
onMouseDown={(e) => {
e.preventDefault();
props.setIsDragging(true);
}}
></div>
</div>
</>
);
},
);
export default FreehandCropRegion;

126
web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
View File

@@ -35,13 +35,19 @@ import {
Typography,
} from "@mui/material";
import { t } from "i18next";
import type { Dispatch, MutableRefObject, SetStateAction } from "react";
import { createContext, useContext, useEffect, useRef, useState } from "react";
import type { Dispatch, MutableRefObject, Ref, SetStateAction } from "react";
import {
createContext,
forwardRef,
useContext,
useEffect,
useRef,
useState,
} from "react";
import { getLocalCollections } from "services/collectionService";
import uploadManager from "services/upload/uploadManager";
import ColoursMenu from "./ColoursMenu";
import CropMenu, { cropRegionOfCanvas, getCropRegionArgs } from "./CropMenu";
import FreehandCropRegion from "./FreehandCropRegion";
import TransformMenu from "./TransformMenu";
interface IProps {
@@ -724,6 +730,120 @@ const ImageEditorOverlay = (props: IProps) => {
export default ImageEditorOverlay;
interface FreehandCropRegionProps {
cropBox: CropBoxProps;
setIsDragging: Dispatch<SetStateAction<boolean>>;
}
const FreehandCropRegion = forwardRef(
(props: FreehandCropRegionProps, ref: Ref<HTMLDivElement>) => {
return (
<>
{/* Top overlay */}
<div
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
height: props.cropBox.y + "px", // height up to the top of the crop box
backgroundColor: "rgba(0,0,0,0.5)",
pointerEvents: "none",
}}
></div>
{/* Bottom overlay */}
<div
style={{
position: "absolute",
bottom: 0,
left: 0,
right: 0,
height: `calc(100% - ${
props.cropBox.y + props.cropBox.height
}px)`, // height from the bottom of the crop box to the bottom of the canvas
backgroundColor: "rgba(0,0,0,0.5)",
pointerEvents: "none",
}}
></div>
{/* Left overlay */}
<div
style={{
position: "absolute",
top: props.cropBox.y + "px",
left: 0,
width: props.cropBox.x + "px", // width up to the left side of the crop box
height: props.cropBox.height + "px", // same height as the crop box
backgroundColor: "rgba(0,0,0,0.5)",
pointerEvents: "none",
}}
></div>
{/* Right overlay */}
<div
style={{
position: "absolute",
top: props.cropBox.y + "px",
right: 0,
width: `calc(100% - ${
props.cropBox.x + props.cropBox.width
}px)`, // width from the right side of the crop box to the right side of the canvas
height: props.cropBox.height + "px", // same height as the crop box
backgroundColor: "rgba(0,0,0,0.5)",
pointerEvents: "none",
}}
></div>
<div
style={{
display: "grid",
position: "absolute",
left: props.cropBox.x + "px",
top: props.cropBox.y + "px",
width: props.cropBox.width + "px",
height: props.cropBox.height + "px",
border: "1px solid white",
gridTemplateColumns: "1fr 1fr 1fr",
gridTemplateRows: "1fr 1fr 1fr",
gap: "0px",
zIndex: 30, // make sure the crop box is above the overlays
}}
ref={ref}
>
{Array.from({ length: 9 }).map((_, index) => (
<div
key={index}
style={{
border: "1px solid white",
boxSizing: "border-box",
pointerEvents: "none",
}}
></div>
))}
<div
style={{
position: "absolute",
height: "10px",
width: "10px",
backgroundColor: "white",
border: "1px solid black",
right: "-5px",
bottom: "-5px",
cursor: "se-resize",
}}
onMouseDown={(e) => {
e.preventDefault();
props.setIsDragging(true);
}}
></div>
</div>
</>
);
},
);
const confirmEditorCloseDialogAttributes = (
onConfirm: () => void,
): MiniDialogAttributes => ({