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

package/src/components/ImageEditor/components/Slider.scss

@@ -0,0 +1,231 @@
+@import '../../../theme/constants';
+
+.image-editor-slider {
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: 380px;
+  height: 40px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 16px;
+  border-radius: 12px;
+  background: rgba(#343338, 0.5);
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px rgba(white, 0.3);
+  }
+
+  &:hover:not(&--disabled) {
+    background: rgba(#504f54, 0.6);
+  }
+
+  &--active {
+    background: rgba(#626164, 0.7);
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    * {
+      cursor: not-allowed !important;
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    width: 100%;
+    max-width: 400px;
+    align-items: center;
+  }
+
+  &__ticks {
+    position: absolute;
+    top: -8px;
+    right: 0;
+    left: 0;
+    height: 16px;
+    pointer-events: none;
+  }
+
+  &__tick {
+    position: absolute;
+    width: 1px;
+    height: 4px;
+    background: rgba(white, 0.3);
+    cursor: pointer;
+    pointer-events: auto;
+    transform: translateX(-50%);
+    transition: all 0.15s ease;
+
+    &--center {
+      width: 2px;
+      height: 6px;
+      background: rgba(white, 0.6);
+    }
+
+    &:hover {
+      height: 6px;
+      background: rgba(white, 0.8);
+
+      &.image-editor-slider__tick--center {
+        height: 8px;
+      }
+    }
+
+    .image-editor-slider--disabled & {
+      &:hover {
+        height: 4px;
+        background: rgba(white, 0.3);
+
+        &.image-editor-slider__tick--center {
+          height: 6px;
+          background: rgba(white, 0.6);
+        }
+      }
+    }
+  }
+
+  &__line {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 3px;
+    align-items: center;
+    border-radius: 2px;
+    background: rgba(white, 0.4);
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      height: 4px;
+      background: rgba(white, 0.6);
+    }
+
+    .image-editor-slider--active & {
+      height: 4px;
+      background: rgba(white, 0.7);
+    }
+
+    .image-editor-slider--disabled & {
+      &:hover {
+        height: 3px;
+        background: rgba(white, 0.4);
+      }
+    }
+  }
+  &__fill {
+    position: absolute;
+    height: 2px;
+    flex-basis: auto;
+    flex-direction: column;
+    flex-shrink: 0;
+    align-self: stretch;
+    border-radius: 2px;
+    background: white;
+    transition: all 0.2s ease;
+  }
+
+  &__dot {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transform: translate(-50%, -50%);
+    transition: all 0.2s ease;
+
+    .image-editor-slider--active & {
+      width: 12px;
+      height: 12px;
+      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  &__value {
+    position: absolute;
+    top: -30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.8);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    color: white;
+    font-size: 11px;
+    font-weight: 600;
+    transform: translate(-50%);
+    transition: all 0.2s ease;
+    white-space: nowrap;
+
+    &--hidden {
+      opacity: 0;
+      transform: translate(-50%) scale(0.8);
+    }
+  }
+
+  &__handler {
+    position: absolute;
+    top: 50%;
+    display: flex;
+    width: 20px;
+    height: 20px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    cursor: grab;
+    transform: translate(-50%, -50%);
+    transition: all 0.2s ease;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      transform: translate(-50%, -50%) scale(1.1);
+    }
+
+    &--focus {
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+      cursor: grabbing;
+      transform: translate(-50%, -50%) scale(1.2);
+    }
+
+    &--hidden {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.5);
+    }
+
+    .image-editor-slider--disabled & {
+      &:hover {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    @media (max-width: 768px), (hover: none) {
+      width: 24px;
+      height: 24px;
+
+      &:hover,
+      &--focus {
+        transform: translate(-50%, -50%) scale(1.15);
+      }
+
+      .image-editor-slider--disabled & {
+        &:hover,
+        &--focus {
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+  }
+}

package/src/components/ImageEditor/components/Slider.tsx

@@ -0,0 +1,322 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import cn from 'classnames';
+import './Slider.scss';
+
+interface Props {
+  className?: string;
+  onChange?: (value: number) => void;
+  value?: number;
+  showValue?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+}
+
+export const Slider: React.FC<Props> = ({
+  className,
+  onChange,
+  value = 0,
+  showValue = true,
+  min = -1,
+  max = 1,
+  step = 0.01,
+  disabled = false,
+}) => {
+  const lineRef = useRef<HTMLDivElement>(null);
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const [focus, setFocus] = useState(false);
+  const [width, setWidth] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const displayValue = Math.round(value * 100);
+  const internalValueToDisplay = (val: number) => Math.round(val * 100);
+
+  const recalculateWidth = useCallback(() => {
+    const line = lineRef.current;
+    if (line) {
+      setWidth(line.clientWidth);
+    }
+  }, []);
+
+  const clampValue = useCallback(
+    (val: number) => Math.max(min, Math.min(max, val)),
+    [min, max],
+  );
+
+  const snapToStep = useCallback(
+    (val: number) => Math.round(val / step) * step,
+    [step],
+  );
+
+  const onDrag = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if ((focus || isDragging) && onChange && !disabled) {
+        const position = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const line = lineRef.current;
+
+        if (line) {
+          const { left, width } = line.getBoundingClientRect();
+          const normalizedPosition = (position - left) / width;
+          const newValue = clampValue(
+            snapToStep(min + normalizedPosition * (max - min)),
+          );
+
+          onChange(newValue);
+        }
+        e.preventDefault?.();
+      }
+    },
+    [focus, isDragging, onChange, disabled, clampValue, snapToStep, min, max],
+  );
+
+  const onStop = useCallback(() => {
+    setFocus(false);
+    setIsDragging(false);
+  }, []);
+
+  const onStart = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if (disabled) return;
+      setFocus(true);
+      setIsDragging(true);
+      onDrag(e);
+    },
+    [onDrag, disabled],
+  );
+
+  const onSliderClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (onChange && !focus && !disabled && !isDragging) {
+        const line = lineRef.current;
+        if (line) {
+          const { left, width } = line.getBoundingClientRect();
+          const position = e.clientX;
+
+          if (position >= left && position <= left + width) {
+            const normalizedPosition = (position - left) / width;
+            const newValue = clampValue(
+              snapToStep(min + normalizedPosition * (max - min)),
+            );
+
+            onChange(newValue);
+          }
+        }
+      }
+    },
+    [onChange, focus, disabled, isDragging, clampValue, snapToStep, min, max],
+  );
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (disabled || !onChange) return;
+
+      let newValue = value;
+      const largeStep = step * 10;
+
+      switch (e.key) {
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          newValue = clampValue(value - step);
+          break;
+        case 'ArrowRight':
+        case 'ArrowUp':
+          newValue = clampValue(value + step);
+          break;
+        case 'PageDown':
+          newValue = clampValue(value - largeStep);
+          break;
+        case 'PageUp':
+          newValue = clampValue(value + largeStep);
+          break;
+        case 'Home':
+          newValue = min;
+          break;
+        case 'End':
+          newValue = max;
+          break;
+        case ' ':
+        case 'Enter':
+          newValue = 0;
+          break;
+        default:
+          return;
+      }
+
+      e.preventDefault();
+      onChange(snapToStep(newValue));
+    },
+    [disabled, onChange, value, step, clampValue, snapToStep, min, max],
+  );
+
+  useEffect(() => {
+    const handleResize = () => recalculateWidth();
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('orientationchange', handleResize);
+
+    recalculateWidth();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('orientationchange', handleResize);
+    };
+  }, [recalculateWidth]);
+
+  useEffect(() => {
+    if (!focus) return;
+
+    const handleMouseUp = () => onStop();
+    const handleMouseMove = (e: MouseEvent) => onDrag(e);
+    const handleTouchEnd = () => onStop();
+    const handleTouchMove = (e: TouchEvent) => onDrag(e);
+
+    window.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('touchmove', handleTouchMove);
+    window.addEventListener('touchend', handleTouchEnd);
+
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('touchmove', handleTouchMove);
+      window.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, [focus, onStop, onDrag]);
+
+  useEffect(() => {
+    const line = lineRef.current;
+    if (!line) return;
+
+    const handleMouseDown = (e: MouseEvent) => onStart(e);
+    const handleTouchStart = (e: TouchEvent) => onStart(e);
+
+    line.addEventListener('mousedown', handleMouseDown);
+    line.addEventListener('touchstart', handleTouchStart);
+
+    return () => {
+      line.removeEventListener('mousedown', handleMouseDown);
+      line.removeEventListener('touchstart', handleTouchStart);
+    };
+  }, [onStart]);
+
+  const normalizedValue = (value - min) / (max - min);
+  const centerNormalized = (0 - min) / (max - min);
+  const handleInsideDot = width
+    ? Math.abs(normalizedValue - centerNormalized) <= 16 / width
+    : true;
+
+  const fillWidth = `${Math.abs(normalizedValue - centerNormalized) * 100}%`;
+  const fillLeft =
+    normalizedValue < centerNormalized
+      ? `${normalizedValue * 100}%`
+      : `${centerNormalized * 100}%`;
+
+  const formattedValue = `${displayValue > 0 ? '+' : ''}${displayValue}`;
+
+  return (
+    <div
+      className={cn(
+        'image-editor-slider',
+        className,
+        disabled && 'image-editor-slider--disabled',
+        (focus || isDragging) && 'image-editor-slider--active',
+      )}
+      ref={sliderRef}
+      tabIndex={disabled ? -1 : 0}
+      role="slider"
+      aria-valuemin={internalValueToDisplay(min)}
+      aria-valuemax={internalValueToDisplay(max)}
+      aria-valuenow={displayValue}
+      aria-disabled={disabled}
+      onKeyDown={onKeyDown}
+      onClick={onSliderClick}
+    >
+      <div className="image-editor-slider__ticks">
+        {[-1, -0.5, 0, 0.5, 1].map((tickValue) => (
+          <div
+            key={tickValue}
+            className={cn(
+              'image-editor-slider__tick',
+              tickValue === 0 && 'image-editor-slider__tick--center',
+            )}
+            style={{ left: `${((tickValue - min) / (max - min)) * 100}%` }}
+            role="button"
+            tabIndex={disabled ? -1 : 0}
+            aria-label={`Set value to ${Math.round(tickValue * 100)}`}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (onChange && !disabled) {
+                onChange(snapToStep(tickValue));
+              }
+            }}
+            onKeyDown={(e) => {
+              if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (onChange) {
+                  onChange(snapToStep(tickValue));
+                }
+              }
+            }}
+          />
+        ))}
+      </div>
+      <div className="image-editor-slider__line" ref={lineRef}>
+        <div
+          className="image-editor-slider__fill"
+          style={{
+            width: fillWidth,
+            left: fillLeft,
+          }}
+        />
+        <div className="image-editor-slider__dot" />
+        {showValue && (
+          <div
+            className={cn(
+              'image-editor-slider__value',
+              handleInsideDot && 'image-editor-slider__value--hidden',
+            )}
+            style={{
+              left: `${normalizedValue * 100}%`,
+            }}
+          >
+            {formattedValue}
+          </div>
+        )}
+        <div
+          className={cn(
+            'image-editor-slider__handler',
+            (focus || isDragging) && 'image-editor-slider__handler--focus',
+            handleInsideDot && 'image-editor-slider__handler--hidden',
+          )}
+          style={{
+            left: `${normalizedValue * 100}%`,
+          }}
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          aria-label={`Slider handle, current value: ${formattedValue}`}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+          }}
+          onKeyDown={(e) => {
+            if (
+              e.key === 'ArrowLeft' ||
+              e.key === 'ArrowRight' ||
+              e.key === 'ArrowUp' ||
+              e.key === 'ArrowDown' ||
+              e.key === 'Home' ||
+              e.key === 'End' ||
+              e.key === ' ' ||
+              e.key === 'Enter'
+            ) {
+              e.stopPropagation();
+              if (sliderRef.current) {
+                sliderRef.current.focus();
+              }
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/ImageEditor/types/ImageSettings.ts

@@ -0,0 +1,23 @@
+export interface ImageSettings {
+  // Cropper settings
+  aspectRatio:
+    | 'free'
+    | '1:1'
+    | '1:2'
+    | '2:1'
+    | '3:4'
+    | '4:3'
+    | '16:9'
+    | '9:16'
+    | '21:9';
+  imageRestriction: 'fit-area' | 'fill-area' | 'stencil' | 'none';
+  stencilType: 'rectangle' | 'circle';
+  minWidth: number;
+  minHeight: number;
+  maxCropWidth?: number;
+  maxCropHeight?: number;
+  scalable: boolean;
+  stencilGrid: boolean;
+  minScale: number;
+  maxScale: number;
+}

package/src/components/Widgets/FileWidget.scss

@@ -0,0 +1,14 @@
+.ui.grid.image-widget-grid {
+  margin: 0 !important;
+  .image-editor-cta {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .image-widget {
+      width: 100%;
+      .image-widget-cropper {
+        margin-top: 20px;
+      }
+    }
+  }
+}