-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Show nearest zone to mouse by hooking into resizeable box events
- Loading branch information
Showing
3 changed files
with
135 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
packages/block-library/src/image/resizable-image-controls.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useState } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __experimentalBlockAlignmentVisualizer as BlockAlignmentVisualizer } from '@wordpress/block-editor'; | ||
| import { ResizableBox } from '@wordpress/components'; | ||
| import { isRTL } from '@wordpress/i18n'; | ||
|
|
||
| export default function ResizableImageControls( { | ||
| align, | ||
| children, | ||
| clientId, | ||
| minWidth, | ||
| maxWidth, | ||
| minHeight, | ||
| maxHeight, | ||
| showHandle, | ||
| onResizeStart, | ||
| onResizeStop, | ||
| size, | ||
| } ) { | ||
| let showRightHandle = false; | ||
| let showLeftHandle = false; | ||
| const [ isResizingImage, setIsResizingImage ] = useState( false ); | ||
| const [ mousePosition, setMousePosition ] = useState(); | ||
|
|
||
| /* eslint-disable no-lonely-if */ | ||
| // See https://github.com/WordPress/gutenberg/issues/7584. | ||
| if ( align === 'center' ) { | ||
| // When the image is centered, show both handles. | ||
| showRightHandle = true; | ||
| showLeftHandle = true; | ||
| } else if ( isRTL() ) { | ||
| // In RTL mode the image is on the right by default. | ||
| // Show the right handle and hide the left handle only when it is | ||
| // aligned left. Otherwise always show the left handle. | ||
| if ( align === 'left' ) { | ||
| showRightHandle = true; | ||
| } else { | ||
| showLeftHandle = true; | ||
| } | ||
| } else { | ||
| // Show the left handle and hide the right handle only when the | ||
| // image is aligned right. Otherwise always show the right handle. | ||
| if ( align === 'right' ) { | ||
| showLeftHandle = true; | ||
| } else { | ||
| showRightHandle = true; | ||
| } | ||
| } | ||
| /* eslint-enable no-lonely-if */ | ||
|
|
||
| return ( | ||
| <> | ||
| { isResizingImage && ( | ||
| <BlockAlignmentVisualizer | ||
| clientId={ clientId } | ||
| allowedAlignments={ [ 'none', 'wide', 'full' ] } | ||
| showNearestAlignmentToCoords={ mousePosition } | ||
| /> | ||
| ) } | ||
| <ResizableBox | ||
| size={ size } | ||
| showHandle={ showHandle } | ||
| minWidth={ minWidth } | ||
| maxWidth={ maxWidth } | ||
| minHeight={ minHeight } | ||
| maxHeight={ maxHeight } | ||
| lockAspectRatio | ||
| enable={ { | ||
| top: false, | ||
| right: showRightHandle, | ||
| bottom: true, | ||
| left: showLeftHandle, | ||
| } } | ||
| onResizeStart={ ( ...resizeArgs ) => { | ||
| onResizeStart( ...resizeArgs ); | ||
| setIsResizingImage( true ); | ||
| } } | ||
| onResize={ ( event ) => { | ||
| setMousePosition( { x: event.clientX, y: event.clientY } ); | ||
| } } | ||
| onResizeStop={ ( ...resizeArgs ) => { | ||
| onResizeStop( ...resizeArgs ); | ||
| setIsResizingImage( false ); | ||
| } } | ||
| > | ||
| { children } | ||
| </ResizableBox> | ||
| </> | ||
| ); | ||
| } |