浏览代码

Internal: Added a possibility to specify whether resized object is central or side aligned.

Marek Lewandowski 6 年之前
父节点
当前提交
26f782497c

+ 5 - 0
packages/ckeditor5-image/src/image/imageediting.js

@@ -68,6 +68,11 @@ export default class ImageEditing extends Plugin {
 					},
 					getAspectRatio( resizeHost ) {
 						return resizeHost.naturalWidth / resizeHost.naturalHeight;
+					},
+					isCentered( context ) {
+						const imageStyle = context._getModel( editor, context.widgetWrapperElement ).getAttribute( 'imageStyle' );
+
+						return !imageStyle || imageStyle == 'full';
 					}
 				} );
 

+ 51 - 6
packages/ckeditor5-image/tests/imageresize/resize.js

@@ -9,12 +9,13 @@ import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictest
 
 import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ImagePlugin from '../../src/image';
+import ImageStyle from '../../src/imagestyle';
 
 import {
 	getData
 } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
-describe( 'Image resizer', () => {
+describe.only( 'Image resizer', () => {
 	const FIXTURE_WIDTH = 100;
 	const FIXTURE_HEIGHT = 50;
 	const MOUSE_BUTTON_MAIN = 0; // Id of left mouse button.
@@ -31,7 +32,7 @@ describe( 'Image resizer', () => {
 
 		return ClassicTestEditor
 			.create( editorElement, {
-				plugins: [ ImagePlugin, ParagraphPlugin ]
+				plugins: [ ImagePlugin, ImageStyle, ParagraphPlugin ]
 			} )
 			.then( newEditor => {
 				editor = newEditor;
@@ -82,7 +83,7 @@ describe( 'Image resizer', () => {
 		let widget;
 
 		beforeEach( async () => {
-			await editor.setData( `<p>foo</p><figure class="image image-style-side"><img src="${ imageFixture }"></figure>` );
+			await editor.setData( `<p>foo</p><figure><img src="${ imageFixture }"></figure>` );
 
 			widget = viewDocument.getRoot().getChild( 1 );
 			const domEventDataMock = {
@@ -92,6 +93,46 @@ describe( 'Image resizer', () => {
 
 			viewDocument.fire( 'mousedown', domEventDataMock );
 		} );
+
+		it( 'shrinks correctly with left-bottom handler', () => {
+			const expectedWidth = 80;
+
+			const domResizeWrapper = view.domConverter.mapViewToDom( widget.getChild( 1 ) );
+			const domBottomLeftResizer = domResizeWrapper.querySelector( '.ck-widget__resizer-bottom-left' );
+			const domImage = view.domConverter.mapViewToDom( widget ).querySelector( 'img' );
+			const imageTopLeftPosition = getElementPosition( domImage );
+
+			const initialPointerPosition = {
+				pageX: imageTopLeftPosition.x,
+				pageY: imageTopLeftPosition.y + FIXTURE_HEIGHT
+			};
+
+			const finishPointerPosition = {
+				pageX: imageTopLeftPosition.x + 10,
+				pageY: imageTopLeftPosition.y + FIXTURE_HEIGHT - 10
+			};
+
+			fireMouseEvent( domBottomLeftResizer, 'mousedown', initialPointerPosition );
+			fireMouseEvent( domBottomLeftResizer, 'mousemove', initialPointerPosition );
+
+			// We need to wait as mousemove events are throttled.
+			return wait( 30 )
+				.then( () => {
+					fireMouseEvent( domBottomLeftResizer, 'mousemove', finishPointerPosition );
+
+					expect( domImage.width ).to.be.closeTo( expectedWidth, 1, 'View width check' );
+
+					fireMouseEvent( domBottomLeftResizer, 'mouseup', finishPointerPosition );
+
+					expect( getData( editor.model, {
+						withoutSelection: true
+					} ) ).to.match( /<paragraph>foo<\/paragraph><image src=".+?" width="(\d+)"><\/image>/ );
+
+					const modelItem = editor.model.document.getRoot().getChild( 1 );
+
+					expect( modelItem.getAttribute( 'width' ) ).to.be.closeTo( expectedWidth, 1, 'Model check' );
+				} );
+		} );
 	} );
 
 	describe( 'side image', () => {
@@ -135,13 +176,13 @@ describe( 'Image resizer', () => {
 				.then( () => {
 					fireMouseEvent( domBottomLeftResizer, 'mousemove', finishPointerPosition );
 
-					expect( domImage.width ).to.be.closeTo( 80, 1, 'View width check' );
+					expect( domImage.width ).to.be.closeTo( expectedWidth, 1, 'View width check' );
 
 					fireMouseEvent( domBottomLeftResizer, 'mouseup', finishPointerPosition );
 
 					expect( getData( editor.model, {
 						withoutSelection: true
-					} ) ).to.match( /<paragraph>foo<\/paragraph><image src=".+?" width="(\d+)"><\/image>/ );
+					} ) ).to.match( /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="(\d+)"><\/image>/ );
 
 					const modelItem = editor.model.document.getRoot().getChild( 1 );
 
@@ -181,7 +222,11 @@ describe( 'Image resizer', () => {
 
 					expect( getData( editor.model, {
 						withoutSelection: true
-					} ) ).to.equal( `<paragraph>foo</paragraph><image src="${ imageFixture }" width="${ expectedWidth }"></image>` );
+					} ) ).to.match( /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="(\d+)"><\/image>/ );
+
+					const modelItem = editor.model.document.getRoot().getChild( 1 );
+
+					expect( modelItem.getAttribute( 'width' ) ).to.be.closeTo( expectedWidth, 1, 'Model check' );
 				} );
 		} );
 	} );

+ 9 - 0
packages/ckeditor5-image/tests/manual/resize.html

@@ -39,4 +39,13 @@
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
 		et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
 		leo interdum. </p>
+
+	<style>
+		.ck-content .image-style-side,
+		.ck-content .image-style-align-left,
+		.ck-content .image-style-align-center,
+		.ck-content .image-style-align-right {
+			max-width: 100%;
+		}
+	</style>
 </div>

+ 7 - 4
packages/ckeditor5-image/tests/manual/resize.js

@@ -10,6 +10,8 @@ import EnterPlugin from '@ckeditor/ckeditor5-enter/src/enter';
 import TypingPlugin from '@ckeditor/ckeditor5-typing/src/typing';
 import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ImagePlugin from '../../src/image';
+import ImageStyle from '../../src/imagestyle';
+import ImageToolbar from '../../src/imagetoolbar';
 import UndoPlugin from '@ckeditor/ckeditor5-undo/src/undo';
 import ClipboardPlugin from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 
@@ -18,8 +20,11 @@ import ResizerSide from '@ckeditor/ckeditor5-widget/src/resizerside';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin ],
-		toolbar: [ 'undo', 'redo' ]
+		plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, ImagePlugin, ImageStyle, ImageToolbar, UndoPlugin, ClipboardPlugin ],
+		toolbar: [ 'undo', 'redo' ],
+		image: {
+			toolbar: [ 'imageStyle:full', 'imageStyle:side' ]
+		}
 	} )
 	.then( editor => {
 		window.editor = editor;
@@ -70,7 +75,5 @@ ClassicEditor
 		};
 
 		window.editor.plugins.get( 'WidgetResizer' ).set( 'resizerStrategy', strategies[ this.value ] );
-
-		console.log( this.value, window.pocResizeStrategy );
 	} );
 }() );