| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
- /**
- * @module image/imageresize/imageresizehandles
- */
- import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
- import WidgetResize from '@ckeditor/ckeditor5-widget/src/widgetresize';
- /**
- * The image resize by handles feature.
- *
- * It adds a possibility to resize each image using handles or manually by
- * {@link module:image/imageresize/imageresizebuttons~ImageResizeButtons} buttons.
- *
- * @extends module:core/plugin~Plugin
- */
- export default class ImageResizeHandles extends Plugin {
- /**
- * @inheritDoc
- */
- static get requires() {
- return [ WidgetResize ];
- }
- /**
- * @inheritDoc
- */
- static get pluginName() {
- return 'ImageResizeHandles';
- }
- /**
- * @inheritDoc
- */
- init() {
- const editor = this.editor;
- const command = editor.commands.get( 'imageResize' );
- this.bind( 'isEnabled' ).to( command );
- editor.editing.downcastDispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
- const widget = conversionApi.mapper.toViewElement( data.item );
- const resizer = editor.plugins
- .get( WidgetResize )
- .attachTo( {
- unit: editor.config.get( 'image.resizeUnit' ) || '%',
- modelElement: data.item,
- viewElement: widget,
- editor,
- getHandleHost( domWidgetElement ) {
- return domWidgetElement.querySelector( 'img' );
- },
- getResizeHost( domWidgetElement ) {
- return domWidgetElement;
- },
- // TODO consider other positions.
- isCentered() {
- const imageStyle = data.item.getAttribute( 'imageStyle' );
- return !imageStyle || imageStyle == 'full' || imageStyle == 'alignCenter';
- },
- onCommit( newValue ) {
- editor.execute( 'imageResize', { width: newValue } );
- }
- } );
- resizer.on( 'updateSize', () => {
- if ( !widget.hasClass( 'image_resized' ) ) {
- editor.editing.view.change( writer => {
- writer.addClass( 'image_resized', widget );
- } );
- }
- } );
- resizer.bind( 'isEnabled' ).to( this );
- }, { priority: 'low' } );
- }
- }
|