import { UIElement } from './libs/ui.js';

function Resizer( editor ) {

	const signals = editor.signals;

	const dom = document.createElement( 'div' );
	dom.id = 'resizer';

	function onPointerDown( event ) {

		if ( event.isPrimary === false ) return;

		dom.ownerDocument.addEventListener( 'pointermove', onPointerMove, false );
		dom.ownerDocument.addEventListener( 'pointerup', onPointerUp, false );

	}

	function onPointerUp( event ) {

		if ( event.isPrimary === false ) return;

		dom.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
		dom.ownerDocument.removeEventListener( 'pointerup', onPointerUp );

	}

	function onPointerMove( event ) {

		// PointerEvent's movementX/movementY are 0 in WebKit

		if ( event.isPrimary === false ) return;

		const rect = dom.getBoundingClientRect();
		const x = ( document.body.offsetWidth - rect.right ) - event.movementX;

		dom.style.right = x + 'px';

		document.getElementById( 'sidebar' ).style.width = ( x + rect.width ) + 'px';
		document.getElementById( 'viewport' ).style.right = ( x + rect.width ) + 'px';

		signals.windowResize.dispatch();

	}

	dom.addEventListener( 'pointerdown', onPointerDown, false );

	return new UIElement( dom );

}

export { Resizer };

@@ -777,43 +777,82 @@
 nst 
-rect = dom.getBoundingClientRect();
+offsetWidth = document.body.offsetWidth;%0A%09%09const clientX = event.clientX;%0A
 %0A%09%09c
@@ -860,71 +860,106 @@
 nst 
-x = ( document.body.offsetWidth - rect.right ) - event.movement
+cX = clientX %3C 0 ? 0 : clientX %3E offsetWidth ? offsetWidth : clientX;%0A%0A%09%09const x = offsetWidth - c
 X;%0A%0A
@@ -1041,37 +1041,20 @@
 .width =
- (
  x +
- rect.width ) +
  'px';%0A%09
@@ -1110,26 +1110,9 @@
 t = 
-( x + rect.width )
+x
  + '

Optimize drag range for Resizer.js (#22576)