RotationHandle

The Rotation Handle component displays a click handler for a rotation interaction, which get attached to the bottom center of its parent element.

name	type	required	comment
onChange	(rotation: number) => void	yes
label	ReactNode	no	Renders a label on the left side of the rotation handle.
onEnd	(rotation: number) => void	no
onInteractEnd	() => void	no
onInteractStart	() => void	no
onStart	() => void	no

Result

Loading...

Live Editor

function RotationHandleDemo() { const [rotation, setRotation] = useState(0); const [isRotating, setIsRotating] = useState(false); const globalRotation = useGlobalRotation(); const position = { position: { x: 300, y: 100 }, dimensions: { width: 150, height: 150 }, rotation, zIndex: 1, }; const labelStyle = { display: 'block', transform: `rotate(${-(rotation + globalRotation)}deg)`, textShadow: '-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white', }; return ( <DesignLayer style={{ position: 'relative', height: 500, transform: `rotate(${globalRotation}deg)` }}> <ItemPosition {...position} style={{ border: '1px solid black' }}> <RotationHandle onChange={(rotation) => setRotation(rotation)} onInteractStart={() => setIsRotating(true)} onInteractEnd={() => setIsRotating(false)} onEnd={(rotation) => { setRotation(rotation); }} label={isRotating && <span style={labelStyle}>{`${rotation}°`}</span>} /> </ItemPosition> </DesignLayer> ); }

function RotationHandleDemo() {
    const [rotation, setRotation] = useState(0);
    const [isRotating, setIsRotating] = useState(false);
    const globalRotation = useGlobalRotation();

    const position = {
        position: { x: 300, y: 100 },
        dimensions: { width: 150, height: 150 },
        rotation,
        zIndex: 1,
    };

    const labelStyle = {
        display: 'block',
        transform: `rotate(${-(rotation + globalRotation)}deg)`,
        textShadow: '-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white',
    };

    return (
        <DesignLayer style={{ position: 'relative', height: 500, transform: `rotate(${globalRotation}deg)` }}>
            <ItemPosition {...position} style={{ border: '1px solid black' }}>
                <RotationHandle
                    onChange={(rotation) => setRotation(rotation)}
                    onInteractStart={() => setIsRotating(true)}
                    onInteractEnd={() => setIsRotating(false)}
                    onEnd={(rotation) => {
                        setRotation(rotation);
                    }}
                    label={isRotating && <span style={labelStyle}>{`${rotation}°`}</span>}
                />
            </ItemPosition>
        </DesignLayer>
    );
}