Procházet zdrojové kódy

Internal: make the sizer UI appear next to the dragged handler.

Marek Lewandowski před 6 roky
rodič
revize
5de1c8b102

+ 14 - 3
packages/ckeditor5-widget/src/resizecontext.js

@@ -130,6 +130,8 @@ export default class ResizeContext {
 		 */
 		this.referenceHandlerPosition = this._getResizerPosition( domResizeHandler );
 
+		this.set( 'orientation', this.referenceHandlerPosition );
+
 		const reversedPosition = this._invertPosition( this.referenceHandlerPosition );
 
 		this.referenceCoordinates = getAbsoluteBoundaryPoint( resizeHost, reversedPosition );
@@ -168,7 +170,8 @@ export default class ResizeContext {
 
 		this.set( {
 			proposedX: null,
-			proposedY: null
+			proposedY: null,
+			orientation: null
 		} );
 	}
 
@@ -278,10 +281,14 @@ export default class ResizeContext {
 		sizeUi.bind( 'label' ).to( this, 'proposedX', this, 'proposedY', ( x, y ) =>
 			`${ Math.round( x ) } x ${ Math.round( y ) }` );
 
+		sizeUi.bind( 'orientation' ).to( this );
+
 		// Make sure icon#element is rendered before passing to appendChild().
 		sizeUi.render();
 
-		domElement.appendChild( sizeUi.element );
+		this.sizeElement = sizeUi.element;
+
+		domElement.appendChild( this.sizeElement );
 	}
 
 	_dismissShadow() {
@@ -360,7 +367,11 @@ class SizeView extends View {
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
-				class: [ 'ck ck-size-view' ],
+				class: [
+					'ck',
+					'ck-size-view',
+					bind.to( 'orientation', value => value ? `ck-orientation-${ value }` : '' )
+				],
 				style: {
 					display: bind.if( 'isVisible', 'none', visible => !visible )
 				}

+ 23 - 0
packages/ckeditor5-widget/theme/widget.css

@@ -129,6 +129,29 @@
 	border: 2px solid var(--ck-color-focus-border);
 	display: inline-block;
 	padding: 3px;
+
+	--ck-sizer-offset: 20px;
+
+	&.ck-orientation-top-left, &.ck-orientation-top-right, &.ck-orientation-bottom-right, &.ck-orientation-bottom-left {
+		position: absolute;
+	}
+
+	&.ck-orientation-top-left {
+		top: var( --ck-sizer-offset );
+		left: var( --ck-sizer-offset );
+	}
+	&.ck-orientation-top-right {
+		top: var( --ck-sizer-offset );
+		right: var( --ck-sizer-offset );
+	}
+	&.ck-orientation-bottom-right {
+		bottom: var( --ck-sizer-offset );
+		right: var( --ck-sizer-offset );
+	}
+	&.ck-orientation-bottom-left {
+		bottom: var( --ck-sizer-offset );
+		right: var( --ck-sizer-offset );
+	}
 }
 
 .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline {