@wordpress/block-editor/build/components/image-editor/use-transform-image.cjs.map

Generic block editor.

{
  "version": 3,
  "sources": ["../../../src/components/image-editor/use-transform-image.js"],
  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useMemo, useState } from '@wordpress/element';\nimport { applyFilters } from '@wordpress/hooks';\nimport { useImageCropper } from '@wordpress/image-cropper';\n\nexport default function useTransformImage( {\n\turl,\n\tnaturalWidth,\n\tnaturalHeight,\n} ) {\n\tconst [ editedUrl, setEditedUrl ] = useState();\n\tconst { cropperState, setCropperState } = useImageCropper();\n\tconst { zoom, aspectRatio, crop, croppedArea } = cropperState;\n\n\tconst setZoom = useCallback(\n\t\t( newZoom ) => {\n\t\t\tsetCropperState( { zoom: newZoom } );\n\t\t},\n\t\t[ setCropperState ]\n\t);\n\n\tconst setAspectRatio = useCallback(\n\t\t( newAspect ) => {\n\t\t\tsetCropperState( { aspectRatio: newAspect } );\n\t\t},\n\t\t[ setCropperState ]\n\t);\n\n\tconst defaultAspect = naturalWidth / naturalHeight;\n\tconst rotatedAspect = naturalHeight / naturalWidth;\n\n\t// Initialize aspect ratio on mount or when defaultAspect changes\n\tuseEffect( () => {\n\t\tsetAspectRatio( defaultAspect );\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n\n\t/**\n\t * rotateClockwise rotates the image by 90\u00B0 clockwise by drawing the original image onto a canvas with rotation applied,\n\t * then saves it as a new blob URL (editedUrl).\n\t * This creates a new rotated image file, bypassing the image-cropper\u2019s CSS transform rotation.\n\t * It's a bespoke solution to ensure that the rotated image fills the content width.\n\t */\n\tconst [ internalRotation, setInternalRotation ] = useState( 0 );\n\tconst rotateClockwise = useCallback( () => {\n\t\tconst angle = ( internalRotation + 90 ) % 360;\n\n\t\tlet naturalAspectRatio = defaultAspect;\n\t\tconst isDefaultAspect =\n\t\t\tdefaultAspect === aspectRatio || rotatedAspect === aspectRatio;\n\t\tconst shouldResetAspect = zoom !== 1 || ! isDefaultAspect;\n\n\t\tif ( internalRotation % 180 === 90 ) {\n\t\t\tnaturalAspectRatio = 1 / defaultAspect;\n\t\t}\n\n\t\tif ( angle === 0 ) {\n\t\t\tsetEditedUrl();\n\t\t\tsetInternalRotation( angle );\n\t\t\tconst newAspectRatio = shouldResetAspect\n\t\t\t\t? aspectRatio\n\t\t\t\t: defaultAspect;\n\t\t\tsetCropperState( {\n\t\t\t\taspectRatio: newAspectRatio,\n\t\t\t\tcrop: {\n\t\t\t\t\tx: -( crop.y * naturalAspectRatio ),\n\t\t\t\t\ty: crop.x * naturalAspectRatio,\n\t\t\t\t},\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\tfunction editImage( event ) {\n\t\t\tconst canvas = document.createElement( 'canvas' );\n\n\t\t\tlet translateX = 0;\n\t\t\tlet translateY = 0;\n\n\t\t\tif ( angle % 180 ) {\n\t\t\t\tcanvas.width = event.target.height;\n\t\t\t\tcanvas.height = event.target.width;\n\t\t\t} else {\n\t\t\t\tcanvas.width = event.target.width;\n\t\t\t\tcanvas.height = event.target.height;\n\t\t\t}\n\n\t\t\tif ( angle === 90 || angle === 180 ) {\n\t\t\t\ttranslateX = canvas.width;\n\t\t\t}\n\n\t\t\tif ( angle === 270 || angle === 180 ) {\n\t\t\t\ttranslateY = canvas.height;\n\t\t\t}\n\n\t\t\tconst context = canvas.getContext( '2d' );\n\n\t\t\tcontext.translate( translateX, translateY );\n\t\t\tcontext.rotate( ( angle * Math.PI ) / 180 );\n\t\t\tcontext.drawImage( event.target, 0, 0 );\n\n\t\t\tcanvas.toBlob( ( blob ) => {\n\t\t\t\tsetEditedUrl( URL.createObjectURL( blob ) );\n\t\t\t\tsetInternalRotation( angle );\n\t\t\t\tconst newAspectRatio = shouldResetAspect\n\t\t\t\t\t? aspectRatio\n\t\t\t\t\t: canvas.width / canvas.height;\n\t\t\t\tsetCropperState( {\n\t\t\t\t\taspectRatio: newAspectRatio,\n\t\t\t\t\tcrop: {\n\t\t\t\t\t\tx: -( crop.y * naturalAspectRatio ),\n\t\t\t\t\t\ty: crop.x * naturalAspectRatio,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} );\n\t\t}\n\n\t\tconst el = new window.Image();\n\t\tel.src = url;\n\t\tel.onload = editImage;\n\n\t\tconst imgCrossOrigin = applyFilters(\n\t\t\t'media.crossOrigin',\n\t\t\tundefined,\n\t\t\turl\n\t\t);\n\t\tif ( typeof imgCrossOrigin === 'string' ) {\n\t\t\tel.crossOrigin = imgCrossOrigin;\n\t\t}\n\t}, [\n\t\tinternalRotation,\n\t\tdefaultAspect,\n\t\turl,\n\t\tsetCropperState,\n\t\tcrop,\n\t\tzoom,\n\t\taspectRatio,\n\t\trotatedAspect,\n\t\tsetInternalRotation,\n\t] );\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\teditedUrl,\n\t\t\tsetEditedUrl,\n\t\t\tcrop: croppedArea,\n\t\t\tzoom,\n\t\t\tsetZoom,\n\t\t\trotation: internalRotation,\n\t\t\trotateClockwise,\n\t\t\taspect: aspectRatio,\n\t\t\tsetAspect: setAspectRatio,\n\t\t\tdefaultAspect,\n\t\t} ),\n\t\t[\n\t\t\teditedUrl,\n\t\t\tcroppedArea,\n\t\t\tzoom,\n\t\t\tsetZoom,\n\t\t\tinternalRotation,\n\t\t\trotateClockwise,\n\t\t\taspectRatio,\n\t\t\tsetAspectRatio,\n\t\t\tdefaultAspect,\n\t\t]\n\t);\n}\n"],
  "mappings": "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",
  "names": []
}