Răsfoiți Sursa

Removed the shadow thing concept.

Piotrek Koszuliński 6 ani în urmă
părinte
comite
c1f3881c4b

+ 16 - 50
packages/ckeditor5-widget/src/widgetresizer/resizer.js

@@ -46,7 +46,7 @@ export default class Resizer {
 		 * @private
 		 * @private
 		 * @type {HTMLElement|null}
 		 * @type {HTMLElement|null}
 		 */
 		 */
-		this._domResizeWrapper = null;
+		this._domResizerWrapper = null;
 
 
 		/**
 		/**
 		 * View to a wrapper containing all the resizer-related views.
 		 * View to a wrapper containing all the resizer-related views.
@@ -54,13 +54,7 @@ export default class Resizer {
 		 * @private
 		 * @private
 		 * @type {module:engine/view/uielement~UIElement}
 		 * @type {module:engine/view/uielement~UIElement}
 		 */
 		 */
-		this._resizeWrapperElement = null;
-
-		/**
-		 * @private
-		 * @type {HTMLElement|null}
-		 */
-		this._domResizeShadow = null;
+		this._viewResizerWrapper = null;
 
 
 		this.decorate( 'begin' );
 		this.decorate( 'begin' );
 		this.decorate( 'cancel' );
 		this.decorate( 'cancel' );
@@ -76,22 +70,21 @@ export default class Resizer {
 		const viewElement = this._options.viewElement;
 		const viewElement = this._options.viewElement;
 		const writer = this._options.downcastWriter;
 		const writer = this._options.downcastWriter;
 
 
-		this._resizeWrapperElement = writer.createUIElement( 'div', {
+		this._viewResizerWrapper = writer.createUIElement( 'div', {
 			class: 'ck ck-widget__resizer-wrapper'
 			class: 'ck ck-widget__resizer-wrapper'
 		}, function( domDocument ) {
 		}, function( domDocument ) {
 			const domElement = this.toDomElement( domDocument );
 			const domElement = this.toDomElement( domDocument );
 
 
-			that._domResizeShadow = that._appendShadowElement( domElement );
-			that._appendResizers( that._domResizeShadow );
-			that._appendSizeUi( that._domResizeShadow );
+			that._appendResizers( domElement );
+			that._appendSizeUi( domElement );
 
 
-			that._domResizeWrapper = domElement;
+			that._domResizerWrapper = domElement;
 
 
 			return domElement;
 			return domElement;
 		} );
 		} );
 
 
 		// Append resizer wrapper to the widget's wrapper.
 		// Append resizer wrapper to the widget's wrapper.
-		writer.insert( writer.createPositionAt( viewElement, 'end' ), this._resizeWrapperElement );
+		writer.insert( writer.createPositionAt( viewElement, 'end' ), this._viewResizerWrapper );
 		writer.addClass( [ 'ck-widget_with-resizer' ], viewElement );
 		writer.addClass( [ 'ck-widget_with-resizer' ], viewElement );
 	}
 	}
 
 
@@ -113,17 +106,15 @@ export default class Resizer {
 
 
 		this.state.fetchSizeFromElement( resizeHost );
 		this.state.fetchSizeFromElement( resizeHost );
 
 
-		// Refresh values based on real image. Real image might be limited by max-width, and thus fetching it
-		// here will reflect this limitation on resizer shadow later on.
-		this._domResizeWrapper.style.width = this.state.proposedWidth + 'px';
-		this._domResizeWrapper.style.height = this.state.proposedHeight + 'px';
+		// Refresh values based on the real image. Real image might be limited by max-width, and thus fetching it
+		// here will reflect this limitation.
+		this._domResizerWrapper.style.width = this.state.proposedWidth + 'px';
+		this._domResizerWrapper.style.height = this.state.proposedHeight + 'px';
 	}
 	}
 
 
 	commit( editor ) {
 	commit( editor ) {
 		const modelElement = this._options.modelElement;
 		const modelElement = this._options.modelElement;
-		const newWidth = this._domResizeShadow.clientWidth;
-
-		this._dismissShadow();
+		const newWidth = this._domResizerWrapper.clientWidth;
 
 
 		this.redraw();
 		this.redraw();
 
 
@@ -138,7 +129,6 @@ export default class Resizer {
 	 * Cancels and rejects proposed resize dimensions hiding all the UI.
 	 * Cancels and rejects proposed resize dimensions hiding all the UI.
 	 */
 	 */
 	cancel() {
 	cancel() {
-		this._dismissShadow();
 		this._cleanup();
 		this._cleanup();
 	}
 	}
 
 
@@ -147,7 +137,7 @@ export default class Resizer {
 	}
 	}
 
 
 	redraw() {
 	redraw() {
-		const domWrapper = this._domResizeWrapper;
+		const domWrapper = this._domResizerWrapper;
 
 
 		if ( existsInDom( domWrapper ) ) {
 		if ( existsInDom( domWrapper ) ) {
 			// Refresh only if resizer exists in the DOM.
 			// Refresh only if resizer exists in the DOM.
@@ -177,7 +167,7 @@ export default class Resizer {
 	}
 	}
 
 
 	containsHandle( domElement ) {
 	containsHandle( domElement ) {
-		return this._domResizeWrapper.contains( domElement );
+		return this._domResizerWrapper.contains( domElement );
 	}
 	}
 
 
 	static isResizeHandle( domElement ) {
 	static isResizeHandle( domElement ) {
@@ -276,41 +266,17 @@ export default class Resizer {
 	 * @returns {HTMLElement}
 	 * @returns {HTMLElement}
 	 */
 	 */
 	_getResizeHost() {
 	_getResizeHost() {
-		const widgetWrapper = this._domResizeWrapper.parentElement;
+		const widgetWrapper = this._domResizerWrapper.parentElement;
 
 
 		return this._options.getResizeHost ?
 		return this._options.getResizeHost ?
 			this._options.getResizeHost( widgetWrapper ) : widgetWrapper;
 			this._options.getResizeHost( widgetWrapper ) : widgetWrapper;
 	}
 	}
 
 
-	/**
-	 * @protected
-	 */
-	_dismissShadow() {
-		this._domResizeShadow.removeAttribute( 'style' );
-	}
-
-	/**
-	 * @private
-	 * @param {HTMLElement} domElement The outer wrapper of resize UI within a given widget.
-	 */
-	_appendShadowElement( domElement ) {
-		const shadowElement = new Template( {
-			tag: 'div',
-			attributes: {
-				class: 'ck ck-widget__resizer-shadow'
-			}
-		} ).render();
-
-		domElement.appendChild( shadowElement );
-
-		return shadowElement;
-	}
-
 	/**
 	/**
 	 * Renders the resize handles in DOM.
 	 * Renders the resize handles in DOM.
 	 *
 	 *
 	 * @private
 	 * @private
-	 * @param {HTMLElement} domElement Resize shadow where the resizers should be appended to.
+	 * @param {HTMLElement} domElement The resizer wrapper.
 	 */
 	 */
 	_appendResizers( domElement ) {
 	_appendResizers( domElement ) {
 		const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];
 		const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];

+ 7 - 21
packages/ckeditor5-widget/theme/widget.css

@@ -22,18 +22,8 @@
 	position: relative;
 	position: relative;
 }
 }
 
 
-.ck-focused .ck-widget_with-resizer.ck-widget_selected {
-	& > .ck-widget__resizer-wrapper {
-		visibility: visible;
-	}
-
-	& .ck-widget__resizer-shadow {
-		display: block;
-	}
-}
-
 .ck .ck-widget__resizer-wrapper {
 .ck .ck-widget__resizer-wrapper {
-	visibility: hidden;
+	display: none;
 	position: absolute;
 	position: absolute;
 
 
 	/* The wrapper itself should not interfere with pointer device, only the handlers. */
 	/* The wrapper itself should not interfere with pointer device, only the handlers. */
@@ -41,20 +31,16 @@
 
 
 	left: 0;
 	left: 0;
 	top: 0;
 	top: 0;
-}
-
-.ck .ck-widget__resizer-shadow {
-	display: none;
-	position: absolute;
-
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
 
 
 	outline: 1px solid var(--ck-color-resizer);
 	outline: 1px solid var(--ck-color-resizer);
 }
 }
 
 
+.ck-focused .ck-widget_with-resizer.ck-widget_selected {
+	& > .ck-widget__resizer-wrapper {
+		display: block;
+	}
+}
+
 .ck .ck-widget__resizer {
 .ck .ck-widget__resizer {
 	position: absolute;
 	position: absolute;