303 imagecropper component

apps/docs/src/content/04-components/upload/image-cropper/develop.mdx

@@ -0,0 +1,3 @@
+# Properties
+
+<PropertiesTables />

apps/docs/src/content/04-components/upload/image-cropper/examples/aspect.tsx

@@ -0,0 +1,6 @@
+import { ImageCropper } from "@mittwald/flow-react-components";
+
+<ImageCropper
+  image="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg"
+  aspectRatio={16 / 9}
+/>;

apps/docs/src/content/04-components/upload/image-cropper/examples/crop-shape.tsx

@@ -0,0 +1,7 @@
+import { ImageCropper } from "@mittwald/flow-react-components";
+
+<ImageCropper
+  image="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg"
+  cropShape="round"
+  aspectRatio={1}
+/>;

apps/docs/src/content/04-components/upload/image-cropper/examples/default.tsx

@@ -0,0 +1,3 @@
+import { ImageCropper } from "@mittwald/flow-react-components";
+
+<ImageCropper image="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg" />;

apps/docs/src/content/04-components/upload/image-cropper/examples/file-drop-zone.tsx

@@ -0,0 +1,86 @@
+import {
+  Button,
+  Heading,
+  FileField,
+  ImageCropper,
+  IconImage,
+  Section,
+  FileDropZone,
+  Text,
+  Flex,
+  IconClose,
+  Action,
+} from "@mittwald/flow-react-components";
+import { useForm } from "react-hook-form";
+import {
+  Form,
+  SubmitButton,
+  typedField,
+} from "@mittwald/flow-react-components/react-hook-form";
+import { sleep } from "@/content/04-components/actions/action/examples/lib";
+
+export default () => {
+  const form = useForm<{
+    files: FileList | File[] | [];
+  }>({ defaultValues: { files: [] } });
+  const Field = typedField(form);
+
+  const watchedFiles = [...form.watch("files")];
+
+  return (
+    <Section>
+      <Form form={form} onSubmit={sleep}>
+        {watchedFiles.length === 0 && (
+          <FileDropZone
+            accept="image/png"
+            onChange={(f) => {
+              if (f) {
+                form.setValue("files", f);
+              }
+            }}
+          >
+            <IconImage />
+            <Heading>Bild ablegen</Heading>
+            <Text>
+              Bitte wähle ein Bild vom Typ PNG aus.
+            </Text>
+            <Field
+              name="files"
+              rules={{
+                required: "Bitte wähle ein Bild aus",
+              }}
+            >
+              <FileField>
+                <Button variant="outline" color="dark">
+                  Bild auswählen
+                </Button>
+              </FileField>
+            </Field>
+          </FileDropZone>
+        )}
+
+        {watchedFiles.length > 0 && (
+          <Flex justify="center" align="start" gap="m">
+            <ImageCropper
+              width={200}
+              height={200}
+              image={watchedFiles[0]}
+            />
+            <Action
+              onAction={() => form.setValue("files", [])}
+            >
+              <Button
+                variant="plain"
+                color="secondary"
+                aria-label="Bild entfernen"
+              >
+                <IconClose />
+              </Button>
+            </Action>
+          </Flex>
+        )}
+        <SubmitButton>Hochladen</SubmitButton>
+      </Form>
+    </Section>
+  );
+};

apps/docs/src/content/04-components/upload/image-cropper/examples/size.tsx

@@ -0,0 +1,7 @@
+import { ImageCropper } from "@mittwald/flow-react-components";
+
+<ImageCropper
+  image="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg"
+  height={200}
+  width={200}
+/>;

apps/docs/src/content/04-components/upload/image-cropper/index.mdx

@@ -0,0 +1,8 @@
+---
+component: ImageCropper
+description:
+  Die ImageCropper Component wird dafür verwendet ein Bild auf ein bestimmtes
+  Format zuzuschneiden.
+---
+
+<LiveCodeEditor editorDisabled example="size" />

apps/docs/src/content/04-components/upload/image-cropper/overview.mdx

@@ -0,0 +1,37 @@
+# Playground
+
+<LiveCodeEditor />
+
+---
+
+# Seitenverhältnis
+
+Über das Property `aspect` kann das Seitenverhältnis angegeben werden.
+
+<LiveCodeEditor example="aspect" editorCollapsed />
+
+---
+
+# Runder Ausschnitt
+
+Über das Property `cropShape` kann zwischen einer rechteckigen und runden
+Ansicht des Ausschnitts gewechselt werden.
+
+<LiveCodeEditor example="crop-shape" editorCollapsed />
+
+---
+
+# Größe
+
+Über die `width` und `height` Properties kann die Größe des Croppers angepasst
+werden.
+
+<LiveCodeEditor example="size" editorCollapsed />
+
+---
+
+# Kombiniere mit ...
+
+## FileDropZone
+
+<LiveCodeEditor example="file-drop-zone" editorCollapsed />

packages/components/package.json

@@ -94,6 +94,7 @@
     "react-aria": "^3.45.0",
     "react-aria-components": "^1.14.0",
     "react-children-utilities": "^2.10.0",
+    "react-easy-crop": "^5.5.0",
     "react-hotkeys-hook": "^5.2.3",
     "react-markdown": "^10.1.0",
     "react-stately": "^3.43.0",

packages/components/src/components/ImageCropper/ImageCropper.module.scss

@@ -0,0 +1,26 @@
+.imageCropper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--image-cropper--spacing);
+  max-width: 100%;
+
+  .cropperContainer {
+    position: relative;
+    width: 100%;
+    border-radius: var(--image-cropper--corner-radius);
+    border-color: var(--image-cropper--border-color);
+    border-style: var(--image-cropper--border-style);
+    border-width: var(--image-cropper--border-width);
+  }
+
+  :global(.reactEasyCrop_CropArea) {
+    color: var(--image-cropper--mask-color);
+    border-color: var(--image-cropper--mask-border-color);
+    box-sizing: content-box;
+  }
+
+  :global(.reactEasyCrop_CropAreaGrid::before) {
+    border-color: var(--image-cropper--grid-color);
+    border-width: var(--image-cropper--grid-width);
+  }
+}

packages/components/src/components/ImageCropper/ImageCropper.tsx

@@ -0,0 +1,99 @@
+import {
+  type CSSProperties,
+  type FC,
+  useEffect,
+  useEffectEvent,
+  useState,
+} from "react";
+import Cropper, { type Area, type CropperProps } from "react-easy-crop";
+import type { PropsWithClassName } from "@/lib/types/props";
+import clsx from "clsx";
+import styles from "./ImageCropper.module.scss";
+import { Slider } from "@/components/Slider";
+import { getCroppedImageFile } from "@/components/ImageCropper/lib/getCroppedImageFile";
+import { useLocalizedStringFormatter } from "react-aria";
+import locales from "./locales/*.locale.json";
+import { useImageSrc } from "@/lib/hooks/useImageSrc";
+
+export interface ImageCropperProps
+  extends PropsWithClassName, Partial<Pick<CropperProps, "cropShape">> {
+  /** The image file to crop. */
+  image?: File | string;
+  /** Callback on crop complete. */
+  onCropComplete?: (croppedImage: File) => void;
+  /** The width of the component. @default 300 */
+  width?: CSSProperties["width"];
+  /** The height of the component. @default 300 */
+  height?: CSSProperties["height"];
+  /** The aspect ratio of the crop shape. */
+  aspectRatio?: number;
+}
+
+/** @flr-generate all */
+export const ImageCropper: FC<ImageCropperProps> = (props) => {
+  const {
+    image,
+    className,
+    onCropComplete,
+    width = 300,
+    height = 300,
+    aspectRatio,
+    ...rest
+  } = props;
+
+  const imageSrc = useImageSrc(image);
+
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area>();
+
+  const rootClassName = clsx(styles.imageCropper, className);
+
+  const stringFormatter = useLocalizedStringFormatter(locales);
+
+  const onCropAreaPixelsChange = useEffectEvent(async () => {
+    if (croppedAreaPixels) {
+      const croppedImageFile = await getCroppedImageFile(
+        imageSrc,
+        croppedAreaPixels,
+      );
+      if (onCropComplete) {
+        onCropComplete(croppedImageFile);
+      }
+    }
+  });
+
+  useEffect(() => {
+    void onCropAreaPixelsChange();
+  }, [croppedAreaPixels]);
+
+  return (
+    <div className={rootClassName} style={{ width }}>
+      <div className={styles.cropperContainer} style={{ height }}>
+        <Cropper
+          aspect={aspectRatio}
+          crop={crop}
+          image={imageSrc}
+          onCropChange={setCrop}
+          zoom={zoom}
+          onZoomChange={setZoom}
+          onCropComplete={(_, croppedAreaPixels) =>
+            setCroppedAreaPixels(croppedAreaPixels)
+          }
+          {...rest}
+        />
+      </div>
+      <Slider
+        minValue={1}
+        maxValue={3}
+        step={0.01}
+        value={zoom}
+        sliderOnly
+        onChange={(zoom) => setZoom(zoom as number)}
+        aria-label={stringFormatter.format("zoom")}
+      />
+    </div>
+  );
+};
+
+export default ImageCropper;

packages/components/src/components/ImageCropper/index.ts

@@ -0,0 +1,2 @@
+export { type ImageCropperProps, ImageCropper } from "./ImageCropper";
+export { default } from "./ImageCropper";

packages/components/src/components/ImageCropper/lib/getCroppedImageFile.ts

@@ -0,0 +1,51 @@
+import type { Area } from "react-easy-crop";
+
+export function getCroppedImageFile(
+  imageSrc: string,
+  pixelCrop: Area,
+): Promise<File> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.src = imageSrc;
+
+    image.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = pixelCrop.width;
+      canvas.height = pixelCrop.height;
+      const ctx = canvas.getContext("2d");
+
+      if (!ctx) {
+        reject(new Error("Failed to get canvas context"));
+        return;
+      }
+
+      ctx.drawImage(
+        image,
+        pixelCrop.x,
+        pixelCrop.y,
+        pixelCrop.width,
+        pixelCrop.height,
+        0,
+        0,
+        pixelCrop.width,
+        pixelCrop.height,
+      );
+
+      canvas.toBlob((blob) => {
+        if (!blob) {
+          return;
+        }
+
+        const file = new File([blob], "cropped-image.png", {
+          type: "image/png",
+        });
+        resolve(file);
+      }, "image/png");
+    };
+
+    image.onerror = () => {
+      reject(new Error("Failed to load image"));
+    };
+  });
+}

packages/components/src/components/ImageCropper/locales/de-DE.locale.json

@@ -0,0 +1,3 @@
+{
+  "zoom": "Zoom"
+}

packages/components/src/components/ImageCropper/locales/en-US.locale.json

@@ -0,0 +1,3 @@
+{
+  "zoom": "zoom"
+}