Browse Source

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

Marek Lewandowski 6 years ago
parent
commit
26f782497c

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

@@ -68,6 +68,11 @@ export default class ImageEditing extends Plugin {
 					},
 					},
 					getAspectRatio( resizeHost ) {
 					getAspectRatio( resizeHost ) {
 						return resizeHost.naturalWidth / resizeHost.naturalHeight;
 						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 ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ImagePlugin from '../../src/image';
 import ImagePlugin from '../../src/image';
+import ImageStyle from '../../src/imagestyle';
 
 
 import {
 import {
 	getData
 	getData
 } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 
-describe( 'Image resizer', () => {
+describe.only( 'Image resizer', () => {
 	const FIXTURE_WIDTH = 100;
 	const FIXTURE_WIDTH = 100;
 	const FIXTURE_HEIGHT = 50;
 	const FIXTURE_HEIGHT = 50;
 	const MOUSE_BUTTON_MAIN = 0; // Id of left mouse button.
 	const MOUSE_BUTTON_MAIN = 0; // Id of left mouse button.
@@ -31,7 +32,7 @@ describe( 'Image resizer', () => {
 
 
 		return ClassicTestEditor
 		return ClassicTestEditor
 			.create( editorElement, {
 			.create( editorElement, {
-				plugins: [ ImagePlugin, ParagraphPlugin ]
+				plugins: [ ImagePlugin, ImageStyle, ParagraphPlugin ]
 			} )
 			} )
 			.then( newEditor => {
 			.then( newEditor => {
 				editor = newEditor;
 				editor = newEditor;
@@ -82,7 +83,7 @@ describe( 'Image resizer', () => {
 		let widget;
 		let widget;
 
 
 		beforeEach( async () => {
 		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 );
 			widget = viewDocument.getRoot().getChild( 1 );
 			const domEventDataMock = {
 			const domEventDataMock = {
@@ -92,6 +93,46 @@ describe( 'Image resizer', () => {
 
 
 			viewDocument.fire( 'mousedown', domEventDataMock );
 			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', () => {
 	describe( 'side image', () => {
@@ -135,13 +176,13 @@ describe( 'Image resizer', () => {
 				.then( () => {
 				.then( () => {
 					fireMouseEvent( domBottomLeftResizer, 'mousemove', finishPointerPosition );
 					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 );
 					fireMouseEvent( domBottomLeftResizer, 'mouseup', finishPointerPosition );
 
 
 					expect( getData( editor.model, {
 					expect( getData( editor.model, {
 						withoutSelection: true
 						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 );
 					const modelItem = editor.model.document.getRoot().getChild( 1 );
 
 
@@ -181,7 +222,11 @@ describe( 'Image resizer', () => {
 
 
 					expect( getData( editor.model, {
 					expect( getData( editor.model, {
 						withoutSelection: true
 						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
 	<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
 		et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
 		leo interdum. </p>
 		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>
 </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 TypingPlugin from '@ckeditor/ckeditor5-typing/src/typing';
 import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ImagePlugin from '../../src/image';
 import ImagePlugin from '../../src/image';
+import ImageStyle from '../../src/imagestyle';
+import ImageToolbar from '../../src/imagetoolbar';
 import UndoPlugin from '@ckeditor/ckeditor5-undo/src/undo';
 import UndoPlugin from '@ckeditor/ckeditor5-undo/src/undo';
 import ClipboardPlugin from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import ClipboardPlugin from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 
 
@@ -18,8 +20,11 @@ import ResizerSide from '@ckeditor/ckeditor5-widget/src/resizerside';
 
 
 ClassicEditor
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 	.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 => {
 	.then( editor => {
 		window.editor = editor;
 		window.editor = editor;
@@ -70,7 +75,5 @@ ClassicEditor
 		};
 		};
 
 
 		window.editor.plugins.get( 'WidgetResizer' ).set( 'resizerStrategy', strategies[ this.value ] );
 		window.editor.plugins.get( 'WidgetResizer' ).set( 'resizerStrategy', strategies[ this.value ] );
-
-		console.log( this.value, window.pocResizeStrategy );
 	} );
 	} );
 }() );
 }() );