|
@@ -525,6 +525,15 @@ class DynamicGrouping {
|
|
|
*/
|
|
*/
|
|
|
this.cachedPadding = null;
|
|
this.cachedPadding = null;
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * A flag indicating that an items grouping update has been queued (e.g. due to the toolbar being visible)
|
|
|
|
|
+ * and should be executed immediately the next time the toolbar shows up.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {Boolean}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.shouldUpdateGroupingOnNextResize = false;
|
|
|
|
|
+
|
|
|
// Only those items that were not grouped are visible to the user.
|
|
// Only those items that were not grouped are visible to the user.
|
|
|
view.itemsView.children.bindTo( this.ungroupedItems ).using( item => item );
|
|
view.itemsView.children.bindTo( this.ungroupedItems ).using( item => item );
|
|
|
|
|
|
|
@@ -614,11 +623,23 @@ class DynamicGrouping {
|
|
|
// Do no grouping–related geometry analysis when the toolbar is detached from visible DOM,
|
|
// Do no grouping–related geometry analysis when the toolbar is detached from visible DOM,
|
|
|
// for instance before #render(), or after render but without a parent or a parent detached
|
|
// for instance before #render(), or after render but without a parent or a parent detached
|
|
|
// from DOM. DOMRects won't work anyway and there will be tons of warning in the console and
|
|
// from DOM. DOMRects won't work anyway and there will be tons of warning in the console and
|
|
|
- // nothing else.
|
|
|
|
|
|
|
+ // nothing else. This happens, for instance, when the toolbar is detached from DOM and
|
|
|
|
|
+ // some logic adds or removes its #items.
|
|
|
if ( !this.viewElement.ownerDocument.body.contains( this.viewElement ) ) {
|
|
if ( !this.viewElement.ownerDocument.body.contains( this.viewElement ) ) {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ // Do not update grouping when the element is invisible. Such toolbar has DOMRect filled with zeros
|
|
|
|
|
+ // and that would cause all items to be grouped. Instead, queue the grouping so it runs next time
|
|
|
|
|
+ // the toolbar is visible (the next ResizeObserver callback execution). This is handy because
|
|
|
|
|
+ // the grouping could be caused by increasing the #maxWidth when the toolbar was invisible and the next
|
|
|
|
|
+ // time it shows up, some items could actually be ungrouped (https://github.com/ckeditor/ckeditor5/issues/6575).
|
|
|
|
|
+ if ( !this.viewElement.offsetParent ) {
|
|
|
|
|
+ this.shouldUpdateGroupingOnNextResize = true;
|
|
|
|
|
+
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
let wereItemsGrouped;
|
|
let wereItemsGrouped;
|
|
|
|
|
|
|
|
// Group #items as long as some wrap to the next row. This will happen, for instance,
|
|
// Group #items as long as some wrap to the next row. This will happen, for instance,
|
|
@@ -701,7 +722,9 @@ class DynamicGrouping {
|
|
|
|
|
|
|
|
// TODO: Consider debounce.
|
|
// TODO: Consider debounce.
|
|
|
this.resizeObserver = new ResizeObserver( this.viewElement, entry => {
|
|
this.resizeObserver = new ResizeObserver( this.viewElement, entry => {
|
|
|
- if ( !previousWidth || previousWidth !== entry.contentRect.width ) {
|
|
|
|
|
|
|
+ if ( !previousWidth || previousWidth !== entry.contentRect.width || this.shouldUpdateGroupingOnNextResize ) {
|
|
|
|
|
+ this.shouldUpdateGroupingOnNextResize = false;
|
|
|
|
|
+
|
|
|
this._updateGrouping();
|
|
this._updateGrouping();
|
|
|
|
|
|
|
|
previousWidth = entry.contentRect.width;
|
|
previousWidth = entry.contentRect.width;
|