@plone-collective/volto-image-editor 1.0.0-alpha.1

package/src/components/ImageEditor/ImageEditor.tsx

@@ -0,0 +1,290 @@
+import React, { useState, useRef, useLayoutEffect } from 'react';
+import cn from 'classnames';
+import {
+  Cropper,
+  CropperPreview,
+  RectangleStencil,
+  CircleStencil,
+  ImageRestriction,
+} from 'react-advanced-cropper';
+import type { CropperRef, CropperPreviewRef } from 'react-advanced-cropper';
+import { AdjustablePreviewBackground } from './components/AdjustablePreviewBackground';
+import { Navigation } from './components/Navigation';
+import { Slider } from './components/Slider';
+import { AdjustableCropperBackground } from './components/AdjustableCropperBackground';
+import { Button } from './components/Button';
+import { SettingsModal } from './components/SettingsModal';
+import type { ImageSettings } from './types/ImageSettings';
+import { ResetIcon } from '@plone-collective/volto-image-editor/icons/ResetIcon';
+import './ImageEditor.scss';
+
+if (typeof window !== 'undefined') {
+  require('context-filter-polyfill');
+}
+
+const ImageEditor = ({ src, onImageSave, onCancel }) => {
+  const cropperRef = useRef<CropperRef>(null);
+  const previewRef = useRef<CropperPreviewRef>(null);
+
+  const [mode, setMode] = useState('crop');
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [hasRotationChanges, setHasRotationChanges] = useState(false);
+
+  const [adjustments, setAdjustments] = useState({
+    brightness: 0,
+    hue: 0,
+    saturation: 0,
+    contrast: 0,
+  });
+
+  const [imageSettings, setImageSettings] = useState<ImageSettings>({
+    aspectRatio: 'free',
+    imageRestriction: 'fit-area',
+    stencilType: 'rectangle',
+    minWidth: 50,
+    minHeight: 50,
+    maxCropWidth: undefined,
+    maxCropHeight: undefined,
+    scalable: true,
+    stencilGrid: false,
+    minScale: 0.1,
+    maxScale: 3,
+  });
+
+  const onAction = (action: string) => {
+    switch (action) {
+      case 'rotate-left':
+        rotate(-90);
+        setHasRotationChanges(true);
+        break;
+      case 'rotate-right':
+        rotate(90);
+        setHasRotationChanges(true);
+        break;
+      case 'flip-horizontal':
+        flip(true, false);
+        setHasRotationChanges(true);
+        break;
+      case 'flip-vertical':
+        flip(false, true);
+        setHasRotationChanges(true);
+        break;
+    }
+  };
+
+  const onChangeValue = (value: number) => {
+    if (mode && mode in adjustments) {
+      setAdjustments((previousValue) => ({
+        ...previousValue,
+        [mode]: value,
+      }));
+    }
+  };
+
+  const onReset = () => {
+    setMode('crop');
+    setAdjustments({
+      brightness: 0,
+      hue: 0,
+      saturation: 0,
+      contrast: 0,
+    });
+    if (cropperRef.current) {
+      cropperRef.current.reset();
+    }
+  };
+
+  const onResetRotation = () => {
+    if (cropperRef.current) {
+      const coordinates = cropperRef.current.getCoordinates();
+      cropperRef.current.reset();
+      if (coordinates && coordinates.width > 0 && coordinates.height > 0) {
+        cropperRef.current.setCoordinates(coordinates);
+      }
+    }
+    setHasRotationChanges(false);
+  };
+
+  useLayoutEffect(() => {
+    const timer = setTimeout(() => {
+      if (cropperRef.current) {
+        onResetRotation();
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [src]);
+
+  const onSave = () => {
+    if (cropperRef.current) {
+      const canvas = cropperRef.current.getCanvas();
+      if (canvas) {
+        let finalCanvas = canvas;
+
+        if (imageSettings.maxWidth || imageSettings.maxHeight) {
+          const tempCanvas = document.createElement('canvas');
+          const ctx = tempCanvas.getContext('2d');
+
+          if (ctx) {
+            let { width, height } = canvas;
+
+            if (imageSettings.maxWidth && width > imageSettings.maxWidth) {
+              const ratio = imageSettings.maxWidth / width;
+              width = imageSettings.maxWidth;
+              height = imageSettings.maintainAspectRatio
+                ? height * ratio
+                : height;
+            }
+
+            if (imageSettings.maxHeight && height > imageSettings.maxHeight) {
+              const ratio = imageSettings.maxHeight / height;
+              height = imageSettings.maxHeight;
+              width = imageSettings.maintainAspectRatio ? width * ratio : width;
+            }
+
+            tempCanvas.width = width;
+            tempCanvas.height = height;
+            ctx.drawImage(canvas, 0, 0, width, height);
+            finalCanvas = tempCanvas;
+          }
+        }
+
+        const mimeType = `image/${imageSettings.format}`;
+        const newData = finalCanvas.toDataURL(mimeType, imageSettings.quality);
+        onImageSave(newData);
+      }
+    }
+  };
+
+  const flip = (horizontal: boolean, vertical: boolean) => {
+    if (cropperRef.current) {
+      cropperRef.current.flipImage(horizontal, vertical);
+    }
+  };
+  const rotate = (angle: number) => {
+    if (cropperRef.current) {
+      cropperRef.current.rotateImage(angle);
+    }
+  };
+
+  const onUpdate = (cropper: CropperRef) => {
+    previewRef.current?.update(cropper);
+  };
+
+  const changed = Object.values(adjustments).some(
+    (el: number) => Math.abs(el) > 0.01,
+  );
+
+  const cropperEnabled = mode === 'crop';
+
+  const getAspectRatio = (): number | undefined => {
+    if (imageSettings.aspectRatio === 'free') return undefined;
+    const [width, height] = imageSettings.aspectRatio.split(':').map(Number);
+    return width / height;
+  };
+
+  const getImageRestriction = () => {
+    switch (imageSettings.imageRestriction) {
+      case 'fill-area':
+        return ImageRestriction.fillArea;
+      case 'fit-area':
+        return ImageRestriction.fitArea;
+      case 'stencil':
+        return ImageRestriction.stencil;
+      case 'none':
+        return ImageRestriction.none;
+      default:
+        return ImageRestriction.fillArea;
+    }
+  };
+
+  return (
+    <div className={'image-editor'}>
+      <div className="image-editor__cropper">
+        <Cropper
+          src={src}
+          ref={cropperRef}
+          stencilComponent={
+            imageSettings.stencilType === 'circle'
+              ? CircleStencil
+              : RectangleStencil
+          }
+          stencilProps={{
+            movable: cropperEnabled,
+            resizable: cropperEnabled,
+            lines: cropperEnabled,
+            handlers: cropperEnabled,
+            grid: imageSettings.stencilGrid,
+            aspectRatio:
+              imageSettings.aspectRatio === 'free'
+                ? undefined
+                : getAspectRatio(),
+            overlayClassName: cn(
+              'image-editor__cropper-overlay',
+              !cropperEnabled && 'image-editor__cropper-overlay--faded',
+            ),
+          }}
+          sizeRestrictions={{
+            minWidth: imageSettings.minWidth,
+            minHeight: imageSettings.minHeight,
+            maxWidth: imageSettings.maxCropWidth,
+            maxHeight: imageSettings.maxCropHeight,
+          }}
+          imageRestriction={getImageRestriction()}
+          backgroundWrapperProps={{
+            scaleImage: cropperEnabled && imageSettings.scalable,
+            moveImage: cropperEnabled,
+          }}
+          backgroundComponent={AdjustableCropperBackground}
+          backgroundProps={adjustments}
+          onUpdate={onUpdate}
+          onReady={() => {
+            if (cropperRef.current) {
+              cropperRef.current.refresh();
+            }
+          }}
+        />
+        {mode !== 'crop' && mode && mode in adjustments && (
+          <Slider
+            className="image-editor__slider"
+            value={adjustments[mode as keyof typeof adjustments]}
+            onChange={onChangeValue}
+          />
+        )}
+        <CropperPreview
+          className={'image-editor__preview'}
+          ref={previewRef}
+          backgroundComponent={AdjustablePreviewBackground}
+          backgroundProps={adjustments}
+        />
+        <Button
+          className={cn(
+            'image-editor__reset-button',
+            !changed && 'image-editor__reset-button--hidden',
+          )}
+          onClick={onReset}
+        >
+          <ResetIcon />
+        </Button>
+
+        <SettingsModal
+          settings={imageSettings}
+          onChange={setImageSettings}
+          isOpen={settingsOpen}
+          onToggle={() => setSettingsOpen(!settingsOpen)}
+        />
+      </div>
+      <Navigation
+        mode={mode}
+        onAction={onAction}
+        onResetRotation={onResetRotation}
+        hasRotationChanges={hasRotationChanges}
+        onChange={setMode}
+        onSave={onSave}
+        onCancel={onCancel}
+      />
+    </div>
+  );
+};
+
+export default ImageEditor;

package/src/components/ImageEditor/ImageEditorWrapper.scss

@@ -0,0 +1,13 @@
+.react-aria-ModalOverlay {
+  .react-aria-Modal.image-cropper-modal {
+    max-width: 70vw;
+    border: 0;
+    background-color: black;
+    .react-aria-Dialog {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+  }
+}

package/src/components/ImageEditor/ImageEditorWrapper.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Button, Dialog, Modal } from '@plone/components';
+import { DialogTrigger } from 'react-aria-components';
+import ImageEditor from '@plone-collective/volto-image-editor/components/ImageEditor/ImageEditor';
+import '@plone/components/dist/basic.css';
+import './ImageEditorWrapper.scss';
+
+function parseDataURL(
+  dataURL: string,
+  value: object,
+): {
+  data: string;
+  encoding: string;
+  'content-type': string;
+  filename: string;
+} {
+  const match = /^data:(.+?);(base64),(.+)$/.exec(dataURL);
+  if (!match) {
+    throw new Error('Invalid data URL format');
+  }
+
+  const [, contentType, encoding, data] = match;
+
+  const extension = contentType.split('/')[1] || 'bin';
+  const filename = value?.filename
+    ? value.filename
+    : `image-${Math.floor(Math.random() * 100)
+        .toString()
+        .padStart(2, '0')}.${extension}`;
+
+  return {
+    data,
+    encoding,
+    'content-type': contentType,
+    filename,
+  };
+}
+
+const ImageEditorWrapper = ({ value, setData }) => {
+  const [src, setSrc] = useState('');
+
+  useEffect(() => {
+    if (value?.download) {
+      setSrc(value.download);
+    } else if (value?.data) {
+      const newSrc = `data:${value['content-type']};base64,${value.data}`;
+      setSrc(newSrc);
+    } else {
+      setSrc('');
+    }
+  }, [value]);
+
+  const [isOpen, setOpen] = useState(false);
+  const onClose = () => setOpen(false);
+  const onImageSave = (newData) => {
+    setOpen(false);
+    const newValue = parseDataURL(newData, value);
+    setData(newValue);
+  };
+
+  return (
+    <div className="image-widget">
+      <div className="image-widget-cropper">
+        <DialogTrigger>
+          <Button onPress={() => setOpen(true)}>
+            <FormattedMessage id="Edit image" defaultMessage="Edit image" />
+          </Button>
+          <Modal
+            className={'react-aria-Modal image-cropper-modal'}
+            isDismissable={true}
+            isOpen={isOpen}
+          >
+            <Dialog>
+              {() => (
+                <ImageEditor
+                  key={'default-cropper'}
+                  src={src}
+                  onImageSave={onImageSave}
+                  onCancel={onClose}
+                />
+              )}
+            </Dialog>
+          </Modal>
+        </DialogTrigger>
+      </div>
+    </div>
+  );
+};
+
+export default ImageEditorWrapper;

package/src/components/ImageEditor/components/AdjustableCropperBackground.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef } from 'react';
+import type {
+  CropperTransitions,
+  CropperImage,
+  CropperState,
+} from 'react-advanced-cropper';
+import { getBackgroundStyle } from 'advanced-cropper';
+import { AdjustableImage } from './AdjustableImage';
+
+interface DesiredCropperRef {
+  getState: () => CropperState;
+  getTransitions: () => CropperTransitions;
+  getImage: () => CropperImage;
+}
+
+interface Props {
+  className?: string;
+  cropper: DesiredCropperRef;
+  crossOrigin?: 'anonymous' | 'use-credentials' | boolean;
+  brightness?: number;
+  saturation?: number;
+  hue?: number;
+  contrast?: number;
+}
+
+export const AdjustableCropperBackground = forwardRef<HTMLCanvasElement, Props>(
+  (
+    {
+      className,
+      cropper,
+      crossOrigin,
+      brightness = 0,
+      saturation = 0,
+      hue = 0,
+      contrast = 0,
+    }: Props,
+    ref,
+  ) => {
+    const state = cropper.getState();
+    const transitions = cropper.getTransitions();
+    const image = cropper.getImage();
+
+    const style =
+      image && state ? getBackgroundStyle(image, state, transitions) : {};
+
+    return (
+      <AdjustableImage
+        src={image?.src}
+        crossOrigin={crossOrigin}
+        brightness={brightness}
+        saturation={saturation}
+        hue={hue}
+        contrast={contrast}
+        ref={ref}
+        className={className}
+        style={style}
+      />
+    );
+  },
+);

package/src/components/ImageEditor/components/AdjustableImage.scss

@@ -0,0 +1,3 @@
+.adjustable-image-source {
+  display: none;
+}

package/src/components/ImageEditor/components/AdjustableImage.tsx

@@ -0,0 +1,85 @@
+import React, {
+  forwardRef,
+  useRef,
+  CSSProperties,
+  useLayoutEffect,
+} from 'react';
+import cn from 'classnames';
+import { mergeRefs, CropperSource } from 'react-advanced-cropper';
+import './AdjustableImage.scss';
+
+interface Props {
+  src?: string;
+  className?: string;
+  crossOrigin?: 'anonymous' | 'use-credentials' | boolean;
+  brightness?: number;
+  saturation?: number;
+  hue?: number;
+  contrast?: number;
+  style?: CSSProperties;
+}
+
+export const AdjustableImage = forwardRef<HTMLCanvasElement, Props>(
+  (
+    {
+      src,
+      className,
+      crossOrigin,
+      brightness = 0,
+      saturation = 0,
+      hue = 0,
+      contrast = 0,
+      style,
+    }: Props,
+    ref,
+  ) => {
+    const imageRef = useRef<HTMLImageElement>(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    const drawImage = React.useCallback(() => {
+      const image = imageRef.current;
+      const canvas = canvasRef.current;
+      if (canvas && image && image.complete) {
+        const ctx = canvas.getContext('2d');
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+
+        if (ctx) {
+          ctx.filter = [
+            `brightness(${100 + brightness * 100}%)`,
+            `contrast(${100 + contrast * 100}%)`,
+            `saturate(${100 + saturation * 100}%)`,
+            `hue-rotate(${hue * 360}deg)`,
+          ].join(' ');
+
+          ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
+        }
+      }
+    }, [brightness, contrast, hue, saturation]);
+
+    useLayoutEffect(() => {
+      drawImage();
+    }, [src, brightness, saturation, hue, contrast, drawImage]);
+
+    return (
+      <>
+        <canvas
+          key={`${src}-canvas`}
+          ref={mergeRefs([ref, canvasRef])}
+          className={cn('adjustable-image-element', className)}
+          style={style}
+        />
+        <CropperSource
+          key={`${src}-img`}
+          ref={imageRef}
+          className={'adjustable-image-source'}
+          src={src}
+          crossOrigin={crossOrigin}
+          onLoad={drawImage}
+        />
+      </>
+    );
+  },
+);
+
+AdjustableImage.displayName = 'AdjustableImage';

package/src/components/ImageEditor/components/AdjustablePreviewBackground.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import type {
+  CropperTransitions,
+  CropperImage,
+  CropperState,
+  Size,
+} from 'react-advanced-cropper';
+import { getPreviewStyle } from 'advanced-cropper';
+import { AdjustableImage } from './AdjustableImage';
+
+interface DesiredCropperRef {
+  getState: () => CropperState;
+  getTransitions: () => CropperTransitions;
+  getImage: () => CropperImage;
+}
+
+interface Props {
+  className?: string;
+  cropper: DesiredCropperRef;
+  crossOrigin?: 'anonymous' | 'use-credentials' | boolean;
+  brightness?: number;
+  saturation?: number;
+  hue?: number;
+  contrast?: number;
+  size?: Size | null;
+}
+
+export const AdjustablePreviewBackground = ({
+  className,
+  cropper,
+  crossOrigin,
+  brightness = 0,
+  saturation = 0,
+  hue = 0,
+  contrast = 0,
+  size,
+}: Props) => {
+  const state = cropper.getState();
+  const transitions = cropper.getTransitions();
+  const image = cropper.getImage();
+
+  const style =
+    image && state && size
+      ? getPreviewStyle(image, state, size, transitions)
+      : {};
+
+  return (
+    <AdjustableImage
+      src={image?.src}
+      crossOrigin={crossOrigin}
+      brightness={brightness}
+      saturation={saturation}
+      hue={hue}
+      contrast={contrast}
+      className={className}
+      style={style}
+    />
+  );
+};

package/src/components/ImageEditor/components/Button.scss

@@ -0,0 +1,30 @@
+@import '../../../theme/mixins';
+
+.image-editor-button {
+  display: flex;
+  width: 46px;
+  height: 46px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  fill: #88888b;
+  outline: none;
+  transition: 0.5s;
+  &--active {
+    background: rgba(white, 0.03);
+    fill: currentColor;
+  }
+  &:hover,
+  &:focus {
+    background: rgba(white, 0.03);
+  }
+  @include small-mobile() {
+    width: 32px;
+    height: 32px;
+  }
+}

package/src/components/ImageEditor/components/Button.tsx

@@ -0,0 +1,27 @@
+import React, { FC, ButtonHTMLAttributes } from 'react';
+import cn from 'classnames';
+import './Button.scss';
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+}
+
+export const Button: FC<Props> = ({
+  className,
+  active,
+  children,
+  ...props
+}) => {
+  return (
+    <button
+      className={cn(
+        'image-editor-button',
+        active && 'image-editor-button--active',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

package/src/components/ImageEditor/components/Navigation.scss

@@ -0,0 +1,38 @@
+@import '../../../theme/mixins';
+
+.image-editor-navigation {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-top: solid 1px #2b2a30;
+  background: #1b1a21;
+  &__button {
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+      pointer-events: none;
+    }
+  }
+
+  &__reset-rotation {
+    border-left: 1px solid rgba(white, 0.1);
+    margin-left: 12px;
+  }
+  &__buttons {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+  &__upload-input {
+    display: none;
+  }
+
+  @include small-mobile() {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
+}