8
0
Эх сурвалжийг харах

Moved ContextualToolbar positions to the BalloonPanelView#defaultPositions.

Oskar Wróbel 8 жил өмнө
parent
commit
29720e6667

+ 60 - 0
packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js

@@ -359,6 +359,42 @@ BalloonPanelView.arrowVerticalOffset = 15;
  *		              V
  *		         [ Target ]
  *
+ *
+ * * Forward selection:
+ *
+ * 		[text range]
+ * 		           ^
+ * 		  +-----------------+
+ * 		  |     Balloon     |
+ * 		  +-----------------+
+ *
+ *
+ * * Forward selection alternative:
+ *
+ * 		  +-----------------+
+ * 		  |     Balloon     |
+ * 		  +-----------------+
+ * 		           V
+ * 		[text range]
+ *
+ *
+ * * Backward selection:
+ *
+ * 		+-----------------+
+ * 		|     Balloon     |
+ * 		+-----------------+
+ * 		         V
+ * 		         [text range]
+ *
+ *
+ * * Backward selection alternative:
+ *
+ * 		         [text range]
+ * 		         ^
+ * 		+-----------------+
+ * 		|     Balloon     |
+ * 		+-----------------+
+ *
  * See {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo}.
  *
  * Positioning functions must be compatible with {@link module:utils/dom/position~Position}.
@@ -391,5 +427,29 @@ BalloonPanelView.defaultPositions = {
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
 		name: 'arrow_nw'
+	} ),
+
+	forwardSelection: ( targetRect, balloonRect ) => ( {
+		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
+		left: targetRect.right - balloonRect.width / 2,
+		name: 'arrow_s'
+	} ),
+
+	forwardSelectionAlternative: ( targetRect, balloonRect ) => ( {
+		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
+		left: targetRect.right - balloonRect.width / 2,
+		name: 'arrow_n'
+	} ),
+
+	backwardSelection: ( targetRect, balloonRect ) => ( {
+		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
+		left: targetRect.left - balloonRect.width / 2,
+		name: 'arrow_n'
+	} ),
+
+	backwardSelectionAlternative: ( targetRect, balloonRect ) => ( {
+		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
+		left: targetRect.left - balloonRect.width / 2,
+		name: 'arrow_s'
 	} )
 };

+ 4 - 50
packages/ckeditor5-ui/src/toolbar/contextualtoolbar.js

@@ -13,6 +13,8 @@ import ToolbarView from './toolbarview';
 import BalloonPanelView from '../panel/balloon/balloonpanelview.js';
 import debounce from '@ckeditor/ckeditor5-utils/src/lib/lodash/debounce';
 
+const defaultPositions = BalloonPanelView.defaultPositions;
+
 /**
  * The contextual toolbar.
  *
@@ -194,8 +196,8 @@ export default class ContextualToolbar extends Plugin {
 		return {
 			target: rangeRect,
 			positions: isBackward ?
-				[ positions.backwardSelection, positions.backwardSelectionAlternative ] :
-				[ positions.forwardSelection, positions.forwardSelectionAlternative ],
+				[ defaultPositions.backwardSelection, defaultPositions.backwardSelectionAlternative ] :
+				[ defaultPositions.forwardSelection, defaultPositions.forwardSelectionAlternative ],
 		};
 	}
 
@@ -208,51 +210,3 @@ export default class ContextualToolbar extends Plugin {
 		super.destroy();
 	}
 }
-
-// List of available toolbar positions.
-const arrowVOffset = BalloonPanelView.arrowVerticalOffset;
-const positions = {
-	//     [text range]
-	//                ^
-	//       +-----------------+
-	//       |     Balloon     |
-	//       +-----------------+
-	forwardSelection: ( targetRect, balloonRect ) => ( {
-		top: targetRect.bottom + arrowVOffset,
-		left: targetRect.right - balloonRect.width / 2,
-		name: 's'
-	} ),
-
-	//       +-----------------+
-	//       |     Balloon     |
-	//       +-----------------+
-	//                V
-	//     [text range]
-	forwardSelectionAlternative: ( targetRect, balloonRect ) => ( {
-		top: targetRect.top - balloonRect.height - arrowVOffset,
-		left: targetRect.right - balloonRect.width / 2,
-		name: 'n'
-	} ),
-
-	//	+-----------------+
-	//	|     Balloon     |
-	//	+-----------------+
-	//	        V
-	//	        [text range]
-	backwardSelection: ( targetRect, balloonRect ) => ( {
-		top: targetRect.top - balloonRect.height - arrowVOffset,
-		left: targetRect.left - balloonRect.width / 2,
-		name: 'n'
-	} ),
-
-	//       [text range]
-	//                  ^
-	//         +-----------------+
-	//         |     Balloon     |
-	//         +-----------------+
-	backwardSelectionAlternative: ( targetRect, balloonRect ) => ( {
-		top: targetRect.bottom + arrowVOffset,
-		left: targetRect.left - balloonRect.width / 2,
-		name: 's'
-	} )
-};

+ 90 - 0
packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js

@@ -630,6 +630,96 @@ describe( 'BalloonPanelView', () => {
 			} );
 		} );
 	} );
+
+	describe( 'defaultPositions', () => {
+		let positions, balloonRect, targetRect;
+
+		beforeEach( () => {
+			positions = BalloonPanelView.defaultPositions;
+
+			targetRect = {
+				top: 100,
+				bottom: 200,
+				left: 100,
+				right: 200,
+				width: 100,
+				height: 100
+			};
+
+			balloonRect = {
+				top: 0,
+				bottom: 0,
+				left: 0,
+				right: 0,
+				width: 50,
+				height: 50
+			};
+		} );
+
+		it( 'se', () => {
+			expect( positions.se( targetRect ) ).to.deep.equal( {
+				top: 215,
+				left: 120,
+				name: 'arrow_se'
+			} );
+		} );
+
+		it( 'sw', () => {
+			expect( positions.sw( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 215,
+				left: 130,
+				name: 'arrow_sw'
+			} );
+		} );
+
+		it( 'ne', () => {
+			expect( positions.ne( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 35,
+				left: 120,
+				name: 'arrow_ne'
+			} );
+		} );
+
+		it( 'nw', () => {
+			expect( positions.nw( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 35,
+				left: 130,
+				name: 'arrow_nw'
+			} );
+		} );
+
+		it( 'forwardSelection', () => {
+			expect( positions.forwardSelection( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 215,
+				left: 175,
+				name: 'arrow_s'
+			} );
+		} );
+
+		it( 'forwardSelectionAlternative', () => {
+			expect( positions.forwardSelectionAlternative( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 35,
+				left: 175,
+				name: 'arrow_n'
+			} );
+		} );
+
+		it( 'backwardSelection', () => {
+			expect( positions.backwardSelection( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 35,
+				left: 75,
+				name: 'arrow_n'
+			} );
+		} );
+
+		it( 'backwardSelectionAlternative', () => {
+			expect( positions.backwardSelectionAlternative( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 215,
+				left: 75,
+				name: 'arrow_s'
+			} );
+		} );
+	} );
 } );
 
 function mockBoundingBox( element, data ) {