Browse Source

Internal: Initial resizer API mocks.

Marek Lewandowski 6 years ago
parent
commit
d3ab730418

+ 7 - 1
packages/ckeditor5-image/src/image/utils.js

@@ -8,6 +8,7 @@
  */
 
 import { findOptimalInsertionPosition, isWidget, toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
+import WidgetResizeFeature from '@ckeditor/ckeditor5-widget/src/widgetresizefeature';
 
 /**
  * Converts a given {@link module:engine/view/element~Element} to an image widget:
@@ -22,7 +23,12 @@ import { findOptimalInsertionPosition, isWidget, toWidget } from '@ckeditor/cked
 export function toImageWidget( viewElement, writer, label ) {
 	writer.setCustomProperty( 'image', true, viewElement );
 
-	return toWidget( viewElement, writer, { label: labelCreator } );
+	return toWidget( viewElement, writer, {
+		label: labelCreator,
+		features: [
+			new WidgetResizeFeature()
+		]
+	} );
 
 	function labelCreator() {
 		const imgElement = viewElement.getChild( 0 );

+ 37 - 1
packages/ckeditor5-image/tests/manual/image.js

@@ -14,9 +14,45 @@ import ImagePlugin from '../../src/image';
 import UndoPlugin from '@ckeditor/ckeditor5-undo/src/undo';
 import ClipboardPlugin from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+class ResizeFeaturePlugin extends Plugin {
+	init() {
+		const view = this.editor.editing.view;
+		const viewDocument = view.document;
+
+		this.listenTo( viewDocument, 'selectionChange', ( ...args ) => this._onSelectionChange( ...args ) );
+		// viewDocument.selection.on( 'change', this._onSelectionChange );
+	}
+
+	_onSelectionChange( eventInfo, data ) {
+		console.log( 'sel change' );
+		const selection = data.newSelection;
+		const selectedElement = selection.getSelectedElement();
+
+		if ( selectedElement && selectedElement.hasClass( 'ck-widget' ) ) {
+
+			// const mapper = this.editor.editing.mapper;
+			// const modelElement = mapper.toModelElement( selectedElement );
+			// foo
+		}
+
+		console.log( selectedElement );
+	}
+}
+
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin ],
+		plugins: [
+			EnterPlugin,
+			TypingPlugin,
+			ParagraphPlugin,
+			HeadingPlugin,
+			ImagePlugin,
+			UndoPlugin,
+			ClipboardPlugin,
+			ResizeFeaturePlugin
+		],
 		toolbar: [ 'heading', '|', 'undo', 'redo' ]
 	} )
 	.then( editor => {