Rotation does not persist

[fatihemergentinc]

Hello everyone i have an application and sometime people upload rotated images. I added rotation functionality but can not make it work in zoomed state. Can't exactly say it does persist but it does weird things you can check out the video

export const ZoomableImage = ({
  alt,
  sizes,
  useFallback = true,
  width,
  height,
  placeholder,
  blurDataURL,
  ...props
}: ImageWrapperProps) => {
  if (!props.src && useFallback) {
    props.src = FALLBACK_IMAGE
  }

  if (!sizes) {
    sizes =
      '300x169,600*338, 1190x669, 1660x934, 2020x1136, 2330x1311, 2600x1463, 2840x1598, 3070x1727, 3280x1845, 3480x1958, 3660x2059, 3840x2160'
  }

  if (!alt) {
    alt = 'image'
  }

  const [isZoomed, setIsZoomed] = useState(false)
  const [rotation, setRotation] = useState(0) // State for rotation

  const handleZoomChange = useCallback((shouldZoom: boolean) => {
    setIsZoomed(shouldZoom)
  }, [])

  const rotateImage = () => {
    setRotation(prevRotation => (prevRotation + 90) % 360) // Rotate by 90 degrees
  }

  return !props.src && !useFallback ? null : (
    <TransformWrapper
      initialScale={1}
      initialPositionX={0}
      initialPositionY={0}
      doubleClick={{ mode: 'reset' }}
      wheel={{ step: 0.2 }}
    >
      {({ zoomIn, zoomOut, resetTransform }) => (
        <div className="w-full h-full flex flex-col items-center justify-center">
          <div className="mb-4">
            <Button onClick={() => setIsZoomed(true)} variant={'ghost'}>
              <Icons.maximize size={20} />
            </Button>
            <Button onClick={() => zoomIn()} variant={'ghost'}>
              <Icons.plus size={20} />
            </Button>
            <Button onClick={() => zoomOut()} variant={'ghost'}>
              <Icons.minus size={20} />
            </Button>
            <Button onClick={rotateImage} variant={'ghost'}>
              <Icons.rotate size={20} />
            </Button>
          </div>
          <TransformComponent>
            <ControlledZoom isZoomed={isZoomed} onZoomChange={handleZoomChange}>
              <Image
                alt={alt}
                {...props}
                sizes={sizes}
                width={width}
                height={height}
                placeholder={blurDataURL ? 'blur' : placeholder}
                blurDataURL={blurDataURL}
                unoptimized={true}
                style={{ transform: `rotate(${rotation}deg)` }} // Apply rotation
              />
            </ControlledZoom>
          </TransformComponent>
        </div>
      )}
    </TransformWrapper>
  )
}

Screencast.from.2024-11-01.21-15-08.webm

[rpearce]

This sounds like a duplicate of #363. Unfortunately, this behavior is not currently supported because of the underlying issue.