Procházet zdrojové kódy

Simplified the implementation by removing the "inside-bottom" position of the balloon.

Aleksander Nowodzinski před 5 roky
rodič
revize
abc194e5ed

+ 20 - 37
packages/ckeditor5-widget/src/utils.js

@@ -348,25 +348,21 @@ export function viewToModelPositionOutsideModelElement( model, viewElementMatche
  * It comes in handy when a widget is longer than the visual viewport of the web browser and/or upper/lower boundaries
  * It comes in handy when a widget is longer than the visual viewport of the web browser and/or upper/lower boundaries
  * of a widget are off screen because of the web page scroll.
  * of a widget are off screen because of the web page scroll.
  *
  *
- *	               (A)                                 (B)                                 (C)
- *
- *	                                                                           ┌─┄┄┄┄┄┄┄┄Widget┄┄┄┄┄┄┄┄┄┄┐
- *	                                                                           ┊                         ┊
- *	                                       ┌─┄┄┄┄┄┄┄┄┄Widget┄┄┄┄┄┄┄┄┄┐         ┊                         ┊
- *	                                       ┊                         ┊         ┊                         ┊
- *	┌────────────Viewport───────────┐   ┌──╁─────────Viewport────────╁──┐   ┌──╁────────Viewport─────────╁──┐
- *	│  ┏━━━━━━━━━━Widget━━━━━━━━━┓  │   │  ┃            ^            ┃  │   │  ┃                         ┃  │
- *	│  ┃            ^            ┃  │   │  ┃   ╭───────/ \───────╮   ┃  │   │  ┃                         ┃  │
- *	│  ┃   ╭───────/ \───────╮   ┃  │   │  ┃   │     Balloon     │   ┃  │   │  ┃                         ┃  │
- *	│  ┃   │     Balloon     │   ┃  │   │  ┃   ╰─────────────────╯   ┃  │   │  ┃                         ┃  │
- *	│  ┃   ╰─────────────────╯   ┃  │   │  ┃                         ┃  │   │  ┃                         ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │   │  ┃                         ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │   │  ┃   ╭─────────────────╮   ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │   │  ┃   │     Balloon     │   ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │   │  ┃   ╰───────\ /───────╯   ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │   │  ┃            V            ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │   │  ┗━━━━━━━━━━━━━━━━━━━━━━━━━┛  │
- *	└──╀─────────────────────────╀──┘   └──╀─────────────────────────╀──┘   └───────────────────────────────┘
+ *	                                       ┌─┄┄┄┄┄┄┄┄┄Widget┄┄┄┄┄┄┄┄┄┐
+ *	                                       ┊                         ┊
+ *	┌────────────Viewport───────────┐   ┌──╁─────────Viewport────────╁──┐
+ *	│  ┏━━━━━━━━━━Widget━━━━━━━━━┓  │   │  ┃            ^            ┃  │
+ *	│  ┃            ^            ┃  │   │  ┃   ╭───────/ \───────╮   ┃  │
+ *	│  ┃   ╭───────/ \───────╮   ┃  │   │  ┃   │     Balloon     │   ┃  │
+ *	│  ┃   │     Balloon     │   ┃  │   │  ┃   ╰─────────────────╯   ┃  │
+ *	│  ┃   ╰─────────────────╯   ┃  │   │  ┃                         ┃  │
+ *	│  ┃                         ┃  │   │  ┃                         ┃  │
+ *	│  ┃                         ┃  │   │  ┃                         ┃  │
+ *	│  ┃                         ┃  │   │  ┃                         ┃  │
+ *	│  ┃                         ┃  │   │  ┃                         ┃  │
+ *	│  ┃                         ┃  │   │  ┃                         ┃  │
+ *	│  ┃                         ┃  │   │  ┃                         ┃  │
+ *	└──╀─────────────────────────╀──┘   └──╀─────────────────────────╀──┘
  *	   ┊                         ┊         ┊                         ┊
  *	   ┊                         ┊         ┊                         ┊
  *	   ┊                         ┊         └┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┘
  *	   ┊                         ┊         └┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┘
  *	   ┊                         ┊
  *	   ┊                         ┊
@@ -383,8 +379,6 @@ export function viewToModelPositionOutsideModelElement( model, viewElementMatche
 export function centeredBalloonPositionForLongWidgets( widgetRect, balloonRect ) {
 export function centeredBalloonPositionForLongWidgets( widgetRect, balloonRect ) {
 	const viewportRect = new Rect( global.window );
 	const viewportRect = new Rect( global.window );
 	const viewportWidgetInsersectionRect = viewportRect.getIntersection( widgetRect );
 	const viewportWidgetInsersectionRect = viewportRect.getIntersection( widgetRect );
-	const isUpperTargetEdgeOffViewport = widgetRect.top < viewportRect.top;
-	const isLowerTargetEdgeOffViewport = widgetRect.bottom > viewportRect.bottom;
 
 
 	// Because this is a last resort positioning, to keep things simple we're not playing with positions of the arrow
 	// Because this is a last resort positioning, to keep things simple we're not playing with positions of the arrow
 	// like, for instance, "south west" or whatever. Just try to keep the balloon in the middle of the visible area of
 	// like, for instance, "south west" or whatever. Just try to keep the balloon in the middle of the visible area of
@@ -393,22 +387,11 @@ export function centeredBalloonPositionForLongWidgets( widgetRect, balloonRect )
 	const targetRect = viewportWidgetInsersectionRect || widgetRect;
 	const targetRect = viewportWidgetInsersectionRect || widgetRect;
 	const left = targetRect.left + targetRect.width / 2 - balloonRect.width / 2;
 	const left = targetRect.left + targetRect.width / 2 - balloonRect.width / 2;
 
 
-	// Case (C).
-	if ( isUpperTargetEdgeOffViewport && !isLowerTargetEdgeOffViewport ) {
-		return {
-			top: Math.min( widgetRect.bottom, viewportRect.bottom ) - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
-			left,
-			name: 'arrow_s'
-		};
-	}
-	// Cases (A) and (B).
-	else {
-		return {
-			top: Math.max( widgetRect.top, 0 ) + BalloonPanelView.arrowVerticalOffset,
-			left,
-			name: 'arrow_n'
-		};
-	}
+	return {
+		top: Math.max( widgetRect.top, 0 ) + BalloonPanelView.arrowVerticalOffset,
+		left,
+		name: 'arrow_n'
+	};
 }
 }
 
 
 // Default filler offset function applied to all widget elements.
 // Default filler offset function applied to all widget elements.

+ 1 - 21
packages/ckeditor5-widget/tests/utils.js

@@ -532,7 +532,7 @@ describe( 'widget utils', () => {
 			} );
 			} );
 		} );
 		} );
 
 
-		it( 'should stick the balloon to the top of the viewport when the top (just as the bottom) of a widget is off-screen', () => {
+		it( 'should stick the balloon to the top of the viewport when the top of a widget is off-screen', () => {
 			// Widget is a 50x150 rect, translated (25,-25) from viewport's beginning (0,0).
 			// Widget is a 50x150 rect, translated (25,-25) from viewport's beginning (0,0).
 			const widgetRect = new Rect( {
 			const widgetRect = new Rect( {
 				top: -25,
 				top: -25,
@@ -552,26 +552,6 @@ describe( 'widget utils', () => {
 			} );
 			} );
 		} );
 		} );
 
 
-		it( 'should position the balloon inside a widget at the bottom if the top of a widget is off-screen (but bottom is not)', () => {
-			// Widget is a 50x150 rect, translated (25,-100) from viewport's beginning (0,0).
-			const widgetRect = new Rect( {
-				top: -100,
-				left: 25,
-				right: 75,
-				bottom: 50,
-				width: 50,
-				height: 150
-			} );
-
-			const position = centeredBalloonPositionForLongWidgets( widgetRect, balloonRect );
-
-			expect( position ).to.deep.equal( {
-				top: 50 - balloonRect.height - arrowVerticalOffset,
-				left: 45,
-				name: 'arrow_s'
-			} );
-		} );
-
 		it( 'should horizontally center the balloon in the visible area when the widget is cropped by the viewport', () => {
 		it( 'should horizontally center the balloon in the visible area when the widget is cropped by the viewport', () => {
 			// Widget is a 50x150 rect, translated (25,-25) from viewport's beginning (0,0).
 			// Widget is a 50x150 rect, translated (25,-25) from viewport's beginning (0,0).
 			const widgetRect = new Rect( {
 			const widgetRect = new Rect( {