@ckeditor/ckeditor5-widget 41.3.1 → 41.4.0-alpha.0

package/src/utils.js

@@ -5,7 +5,7 @@
 /**
  * @module widget/utils
  */
-import { CKEditorError, toArray } from '@ckeditor/ckeditor5-utils';
+import { Rect, CKEditorError, toArray } from '@ckeditor/ckeditor5-utils';
 import { IconView } from '@ckeditor/ckeditor5-ui';
 import HighlightStack from './highlightstack.js';
 import { getTypeAroundFakeCaretPosition } from './widgettypearound/utils.js';
@@ -346,3 +346,47 @@ function addSelectionHandle(widgetElement, writer) {
     writer.insert(writer.createPositionAt(widgetElement, 0), selectionHandle);
     writer.addClass(['ck-widget_with-selection-handle'], widgetElement);
 }
+/**
+ * Starting from a DOM resize host element (an element that receives dimensions as a result of resizing),
+ * this helper returns the width of the found ancestor element.
+ *
+ * **Note**: This helper searches up to 5 levels of ancestors only.
+ *
+ * @param domResizeHost Resize host DOM element that receives dimensions as a result of resizing.
+ * @returns Width of ancestor element in pixels or 0 if no ancestor with a computed width has been found.
+ */
+export function calculateResizeHostAncestorWidth(domResizeHost) {
+    const domResizeHostParent = domResizeHost.parentElement;
+    if (!domResizeHostParent) {
+        return 0;
+    }
+    // Need to use computed style as it properly excludes parent's paddings from the returned value.
+    let parentWidth = parseFloat(domResizeHostParent.ownerDocument.defaultView.getComputedStyle(domResizeHostParent).width);
+    // Sometimes parent width cannot be accessed. If that happens we should go up in the elements tree
+    // and try to get width from next ancestor.
+    // https://github.com/ckeditor/ckeditor5/issues/10776
+    const ancestorLevelLimit = 5;
+    let currentLevel = 0;
+    let checkedElement = domResizeHostParent;
+    while (isNaN(parentWidth)) {
+        checkedElement = checkedElement.parentElement;
+        if (++currentLevel > ancestorLevelLimit) {
+            return 0;
+        }
+        parentWidth = parseFloat(domResizeHostParent.ownerDocument.defaultView.getComputedStyle(checkedElement).width);
+    }
+    return parentWidth;
+}
+/**
+ * Calculates a relative width of a `domResizeHost` compared to its ancestor in percents.
+ *
+ * @param domResizeHost Resize host DOM element.
+ * @returns Percentage value between 0 and 100.
+ */
+export function calculateResizeHostPercentageWidth(domResizeHost, resizeHostRect = new Rect(domResizeHost)) {
+    const parentWidth = calculateResizeHostAncestorWidth(domResizeHost);
+    if (!parentWidth) {
+        return 0;
+    }
+    return resizeHostRect.width / parentWidth * 100;
+}

package/src/widgetresize/resizerstate.js

@@ -6,6 +6,7 @@
  * @module widget/widgetresize/resizerstate
  */
 import { ObservableMixin, Rect } from '@ckeditor/ckeditor5-utils';
+import { calculateResizeHostPercentageWidth } from '../utils.js';
 /**
  * Stores the internal state of a single resizable object.
  */
@@ -64,7 +65,7 @@ export default class ResizeState extends ObservableMixin() {
             this._originalWidthPercents = parseFloat(widthStyle);
         }
         else {
-            this._originalWidthPercents = calculateHostPercentageWidth(domResizeHost, clientRect);
+            this._originalWidthPercents = calculateResizeHostPercentageWidth(domResizeHost, clientRect);
         }
     }
     update(newSize) {
@@ -75,28 +76,6 @@ export default class ResizeState extends ObservableMixin() {
         this.proposedHandleHostHeight = newSize.handleHostHeight;
     }
 }
-/**
- * Calculates a relative width of a `domResizeHost` compared to its ancestor in percents.
- */
-function calculateHostPercentageWidth(domResizeHost, resizeHostRect) {
-    const domResizeHostParent = domResizeHost.parentElement;
-    // Need to use computed style as it properly excludes parent's paddings from the returned value.
-    let parentWidth = parseFloat(domResizeHostParent.ownerDocument.defaultView.getComputedStyle(domResizeHostParent).width);
-    // Sometimes parent width cannot be accessed. If that happens we should go up in the elements tree
-    // and try to get width from next ancestor.
-    // https://github.com/ckeditor/ckeditor5/issues/10776
-    const ancestorLevelLimit = 5;
-    let currentLevel = 0;
-    let checkedElement = domResizeHostParent;
-    while (isNaN(parentWidth)) {
-        checkedElement = checkedElement.parentElement;
-        if (++currentLevel > ancestorLevelLimit) {
-            return 0;
-        }
-        parentWidth = parseFloat(domResizeHostParent.ownerDocument.defaultView.getComputedStyle(checkedElement).width);
-    }
-    return resizeHostRect.width / parentWidth * 100;
-}
 /**
  * Returns coordinates of the top-left corner of an element, relative to the document's top-left corner.
  *