Selaa lähdekoodia

Internal: Throttle mousemove/redraw events.

Marek Lewandowski 6 vuotta sitten
vanhempi
sitoutus
c7b9ac50f8

+ 2 - 1
packages/ckeditor5-widget/package.json

@@ -12,7 +12,8 @@
     "@ckeditor/ckeditor5-core": "^12.2.1",
     "@ckeditor/ckeditor5-engine": "^13.2.1",
     "@ckeditor/ckeditor5-ui": "^13.0.2",
-    "@ckeditor/ckeditor5-utils": "^13.0.1"
+    "@ckeditor/ckeditor5-utils": "^13.0.1",
+    "lodash-es": "^4.17.10"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-basic-styles": "^11.1.3",

+ 5 - 1
packages/ckeditor5-widget/src/resizecontext.js

@@ -234,7 +234,7 @@ export default class ResizeContext {
 	redraw() {
 		const domWrapper = this.domResizeWrapper;
 
-		if ( domWrapper && domWrapper.parentElement ) {
+		if ( existsInDom( domWrapper ) ) {
 			// Refresh only if resizer exists in the DOM.
 			const widgetWrapper = domWrapper.parentElement;
 			const resizingHost = this._getResizeHost();
@@ -255,6 +255,10 @@ export default class ResizeContext {
 				domWrapper.style.width = resizingHost.offsetWidth + 'px';
 			}
 		}
+
+		function existsInDom( element ) {
+			return element && element.ownerDocument && element.ownerDocument.contains( element );
+		}
 	}
 
 	/**

+ 18 - 9
packages/ckeditor5-widget/src/widgetresizer.js

@@ -12,6 +12,7 @@ import getAncestors from '@ckeditor/ckeditor5-utils/src/dom/getancestors';
 import ResizeContext from './resizecontext';
 import DomEmitterMixin from '@ckeditor/ckeditor5-utils/src/dom/emittermixin';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { throttle } from 'lodash-es';
 
 const WIDTH_ATTRIBUTE_NAME = 'width';
 
@@ -36,23 +37,19 @@ export default class WidgetResizer extends Plugin {
 
 		const mouseObserverHost = global.window.document;
 
+		const THROTTLE_THRESHOLD = 16; // 16ms = ~60fps
+
 		this._observers = {
 			mouseMove: Object.create( DomEmitterMixin ),
 			mouseDownUp: Object.create( DomEmitterMixin ),
+			windowResize: Object.create( DomEmitterMixin )
 		};
 
-		const mouseMoveListener = ( event, domEventData ) => {
+		const mouseMoveListener = throttle( ( event, domEventData ) => {
 			if ( this.activeContext ) {
 				this.activeContext.updateSize( domEventData );
 			}
-		};
-
-		this.editor.editing.view.document.on( 'layoutChanged', () => {
-			// Redrawing on layout change fixes issue with browser window resize or undo causing a mispositioned resizer.
-			for ( const context of this.contexts ) {
-				context.redraw();
-			}
-		} );
+		}, THROTTLE_THRESHOLD );
 
 		this._observers.mouseDownUp.listenTo( mouseObserverHost, 'mousedown', ( event, domEventData ) => {
 			const target = domEventData.target;
@@ -82,8 +79,20 @@ export default class WidgetResizer extends Plugin {
 			}
 		};
 
+		const resizeContexts = throttle( () => {
+			for ( const context of this.contexts ) {
+				context.redraw();
+			}
+		}, THROTTLE_THRESHOLD );
+
 		this._observers.mouseDownUp.listenTo( mouseObserverHost, 'mouseup', finishResizing );
 
+		// Redrawing on layout change fixes issue with browser window resize or undo causing a mispositioned resizer.
+		this.editor.editing.view.document.on( 'layoutChanged', resizeContexts );
+
+		// Resizers need to be redrawn upon window resize, because new window might shrink resize host.
+		this._observers.windowResize.listenTo( global.window, 'resize', resizeContexts );
+
 		function isResizeHandler( element ) {
 			return element.classList && element.classList.contains( 'ck-widget__resizer' );
 		}