dockview-core 4.6.0 → 4.7.0

package/dist/cjs/overlay/overlayRenderContainer.js

@@ -30,6 +30,36 @@ exports.OverlayRenderContainer = void 0;
 var dnd_1 = require("../dnd/dnd");
 var dom_1 = require("../dom");
 var lifecycle_1 = require("../lifecycle");
+var PositionCache = /** @class */ (function () {
+    function PositionCache() {
+        this.cache = new Map();
+        this.currentFrameId = 0;
+        this.rafId = null;
+    }
+    PositionCache.prototype.getPosition = function (element) {
+        var cached = this.cache.get(element);
+        if (cached && cached.frameId === this.currentFrameId) {
+            return cached.rect;
+        }
+        this.scheduleFrameUpdate();
+        var rect = (0, dom_1.getDomNodePagePosition)(element);
+        this.cache.set(element, { rect: rect, frameId: this.currentFrameId });
+        return rect;
+    };
+    PositionCache.prototype.invalidate = function () {
+        this.currentFrameId++;
+    };
+    PositionCache.prototype.scheduleFrameUpdate = function () {
+        var _this = this;
+        if (this.rafId)
+            return;
+        this.rafId = requestAnimationFrame(function () {
+            _this.currentFrameId++;
+            _this.rafId = null;
+        });
+    };
+    return PositionCache;
+}());
 function createFocusableElement() {
     var element = document.createElement('div');
     element.tabIndex = -1;
@@ -43,6 +73,8 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
         _this.accessor = accessor;
         _this.map = {};
         _this._disposed = false;
+        _this.positionCache = new PositionCache();
+        _this.pendingUpdates = new Set();
         _this.addDisposables(lifecycle_1.Disposable.from(function () {
             var e_1, _a;
             try {
@@ -63,6 +95,30 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
         }));
         return _this;
     }
+    OverlayRenderContainer.prototype.updateAllPositions = function () {
+        var e_2, _a;
+        if (this._disposed) {
+            return;
+        }
+        // Invalidate position cache to force recalculation
+        this.positionCache.invalidate();
+        try {
+            // Call resize function directly for all visible panels
+            for (var _b = __values(Object.values(this.map)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var entry = _c.value;
+                if (entry.panel.api.isVisible && entry.resize) {
+                    entry.resize();
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+    };
     OverlayRenderContainer.prototype.detatch = function (panel) {
         if (this.map[panel.api.id]) {
             var _a = this.map[panel.api.id], disposable = _a.disposable, destroy = _a.destroy;
@@ -94,17 +150,33 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
             this.element.appendChild(focusContainer);
         }
         var resize = function () {
-            // TODO propagate position to avoid getDomNodePagePosition calls, possible performance bottleneck?
-            var box = (0, dom_1.getDomNodePagePosition)(referenceContainer.element);
-            var box2 = (0, dom_1.getDomNodePagePosition)(_this.element);
-            focusContainer.style.left = "".concat(box.left - box2.left, "px");
-            focusContainer.style.top = "".concat(box.top - box2.top, "px");
-            focusContainer.style.width = "".concat(box.width, "px");
-            focusContainer.style.height = "".concat(box.height, "px");
-            (0, dom_1.toggleClass)(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
+            var panelId = panel.api.id;
+            if (_this.pendingUpdates.has(panelId)) {
+                return; // Update already scheduled
+            }
+            _this.pendingUpdates.add(panelId);
+            requestAnimationFrame(function () {
+                _this.pendingUpdates.delete(panelId);
+                if (_this.isDisposed || !_this.map[panelId]) {
+                    return;
+                }
+                var box = _this.positionCache.getPosition(referenceContainer.element);
+                var box2 = _this.positionCache.getPosition(_this.element);
+                // Use traditional positioning for overlay containers
+                var left = box.left - box2.left;
+                var top = box.top - box2.top;
+                var width = box.width;
+                var height = box.height;
+                focusContainer.style.left = "".concat(left, "px");
+                focusContainer.style.top = "".concat(top, "px");
+                focusContainer.style.width = "".concat(width, "px");
+                focusContainer.style.height = "".concat(height, "px");
+                (0, dom_1.toggleClass)(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
+            });
         };
         var visibilityChanged = function () {
             if (panel.api.isVisible) {
+                _this.positionCache.invalidate();
                 resize();
             }
             focusContainer.style.display = panel.api.isVisible ? '' : 'none';
@@ -201,6 +273,8 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
         this.map[panel.api.id].disposable.dispose();
         // and reset the disposable to the active reference-container
         this.map[panel.api.id].disposable = disposable;
+        // store the resize function for direct access
+        this.map[panel.api.id].resize = resize;
         return focusContainer;
     };
     return OverlayRenderContainer;