dockview-core 1.7.5 → 1.8.0

package/dist/cjs/dockview/dockviewComponent.js

@@ -81,6 +81,9 @@ var splitview_1 = require("../splitview/splitview");
 var dockviewGroupPanel_1 = require("./dockviewGroupPanel");
 var dockviewPanelModel_1 = require("./dockviewPanelModel");
 var dataTransfer_1 = require("../dnd/dataTransfer");
+var overlay_1 = require("../dnd/overlay");
+var dom_1 = require("../dom");
+var dockviewFloatingGroupPanel_1 = require("./dockviewFloatingGroupPanel");
 var DockviewComponent = /** @class */ (function (_super) {
     __extends(DockviewComponent, _super);
     function DockviewComponent(options) {
@@ -103,7 +106,8 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onDidLayoutFromJSON = _this._onDidLayoutFromJSON.event;
         _this._onDidActivePanelChange = new events_1.Emitter();
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
-        _this.element.classList.add('dv-dockview');
+        _this.floatingGroups = [];
+        (0, dom_1.toggleClass)(_this.gridview.element, 'dv-dockview', true);
         _this.addDisposables(_this._onDidDrop, events_1.Event.any(_this.onDidAddGroup, _this.onDidRemoveGroup)(function () {
             _this.updateWatermark();
         }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidActivePanelChange)(function () {
@@ -133,6 +137,11 @@ var DockviewComponent = /** @class */ (function (_super) {
                     if (data.viewId !== _this.id) {
                         return false;
                     }
+                    if (position === 'center') {
+                        // center drop target is only allowed if there are no panels in the grid
+                        // floating panels are allowed
+                        return _this.gridview.length === 0;
+                    }
                     return true;
                 }
                 if (_this.options.showDndOverlay) {
@@ -145,7 +154,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 }
                 return false;
             },
-            acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: {
                 activationSize: { type: 'pixels', value: 10 },
                 size: { type: 'pixels', value: 20 },
@@ -203,6 +212,76 @@ var DockviewComponent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    DockviewComponent.prototype.addFloatingGroup = function (item, coord, options) {
+        var _this = this;
+        var _a, _b;
+        var group;
+        if (item instanceof dockviewPanel_1.DockviewPanel) {
+            group = this.createGroup();
+            this.removePanel(item, {
+                removeEmptyGroup: true,
+                skipDispose: true,
+            });
+            group.model.openPanel(item);
+        }
+        else {
+            group = item;
+            var skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                options.skipRemoveGroup;
+            if (!skip) {
+                this.doRemoveGroup(item, { skipDispose: true });
+            }
+        }
+        group.model.isFloating = true;
+        var overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
+        var overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+        var overlay = new overlay_1.Overlay({
+            container: this.gridview.element,
+            content: group.element,
+            height: (_a = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _a !== void 0 ? _a : 300,
+            width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
+            left: overlayLeft,
+            top: overlayTop,
+            minimumInViewportWidth: 100,
+            minimumInViewportHeight: 100,
+        });
+        var el = group.element.querySelector('.void-container');
+        if (!el) {
+            throw new Error('failed to find drag handle');
+        }
+        overlay.setupDrag(el, {
+            inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
+                ? options.inDragMode
+                : false,
+        });
+        var floatingGroupPanel = new dockviewFloatingGroupPanel_1.DockviewFloatingGroupPanel(group, overlay);
+        var disposable = (0, dom_1.watchElementResize)(group.element, function (entry) {
+            var _a = entry.contentRect, width = _a.width, height = _a.height;
+            group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
+        });
+        floatingGroupPanel.addDisposables(overlay.onDidChange(function () {
+            // this is either a resize or a move
+            // to inform the panels .layout(...) the group with it's current size
+            // don't care about resize since the above watcher handles that
+            group.layout(group.height, group.width);
+        }), overlay.onDidChangeEnd(function () {
+            _this._bufferOnDidLayoutChange.fire();
+        }), group.onDidChange(function (event) {
+            overlay.setBounds({
+                height: event === null || event === void 0 ? void 0 : event.height,
+                width: event === null || event === void 0 ? void 0 : event.width,
+            });
+        }), {
+            dispose: function () {
+                disposable.dispose();
+                group.model.isFloating = false;
+                (0, array_1.remove)(_this.floatingGroups, floatingGroupPanel);
+                _this.updateWatermark();
+            },
+        });
+        this.floatingGroups.push(floatingGroupPanel);
+        this.updateWatermark();
+    };
     DockviewComponent.prototype.orthogonalize = function (position) {
         switch (position) {
             case 'top':
@@ -227,6 +306,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         switch (position) {
             case 'top':
             case 'left':
+            case 'center':
                 return this.createGroupAtLocation([0]); // insert into first position
             case 'bottom':
             case 'right':
@@ -244,6 +324,26 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         this.layout(this.gridview.width, this.gridview.height, true);
     };
+    DockviewComponent.prototype.layout = function (width, height, forceResize) {
+        var e_1, _a;
+        _super.prototype.layout.call(this, width, height, forceResize);
+        if (this.floatingGroups) {
+            try {
+                for (var _b = __values(this.floatingGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var floating = _c.value;
+                    // ensure floting groups stay within visible boundaries
+                    floating.overlay.setBounds();
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }
+    };
     DockviewComponent.prototype.focus = function () {
         var _a;
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
@@ -308,67 +408,118 @@ var DockviewComponent = /** @class */ (function (_super) {
             collection[panel.id] = panel.toJSON();
             return collection;
         }, {});
-        return {
+        var floats = this.floatingGroups.map(function (floatingGroup) {
+            return {
+                data: floatingGroup.group.toJSON(),
+                position: floatingGroup.overlay.toJSON(),
+            };
+        });
+        var result = {
             grid: data,
             panels: panels,
             activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
         };
+        if (floats.length > 0) {
+            result.floatingGroups = floats;
+        }
+        return result;
     };
     DockviewComponent.prototype.fromJSON = function (data) {
+        var e_2, _a, e_3, _b;
         var _this = this;
+        var _c;
         this.clear();
         var grid = data.grid, panels = data.panels, activeGroup = data.activeGroup;
         if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
             throw new Error('root must be of type branch');
         }
-        this.gridview.deserialize(grid, {
-            fromJSON: function (node) {
-                var e_1, _a;
-                var _b = node.data, id = _b.id, locked = _b.locked, hideHeader = _b.hideHeader, views = _b.views, activeView = _b.activeView;
-                var group = _this.createGroup({
-                    id: id,
-                    locked: !!locked,
-                    hideHeader: !!hideHeader,
-                });
-                _this._onDidAddGroup.fire(group);
-                try {
-                    for (var views_1 = __values(views), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
-                        var child = views_1_1.value;
-                        var panel = _this._deserializer.fromJSON(panels[child], group);
-                        var isActive = typeof activeView === 'string' &&
-                            activeView === panel.id;
-                        group.model.openPanel(panel, {
-                            skipSetPanelActive: !isActive,
-                            skipSetGroupActive: true,
-                        });
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-                if (!group.activePanel && group.panels.length > 0) {
-                    group.model.openPanel(group.panels[group.panels.length - 1], {
+        // take note of the existing dimensions
+        var width = this.width;
+        var height = this.height;
+        var createGroupFromSerializedState = function (data) {
+            var e_4, _a;
+            var id = data.id, locked = data.locked, hideHeader = data.hideHeader, views = data.views, activeView = data.activeView;
+            var group = _this.createGroup({
+                id: id,
+                locked: !!locked,
+                hideHeader: !!hideHeader,
+            });
+            _this._onDidAddGroup.fire(group);
+            try {
+                for (var views_1 = __values(views), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
+                    var child = views_1_1.value;
+                    var panel = _this._deserializer.fromJSON(panels[child], group);
+                    var isActive = typeof activeView === 'string' && activeView === panel.id;
+                    group.model.openPanel(panel, {
+                        skipSetPanelActive: !isActive,
                         skipSetGroupActive: true,
                     });
                 }
-                return group;
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            if (!group.activePanel && group.panels.length > 0) {
+                group.model.openPanel(group.panels[group.panels.length - 1], {
+                    skipSetGroupActive: true,
+                });
+            }
+            return group;
+        };
+        this.gridview.deserialize(grid, {
+            fromJSON: function (node) {
+                return createGroupFromSerializedState(node.data);
             },
         });
+        this.layout(width, height, true);
+        var serializedFloatingGroups = (_c = data.floatingGroups) !== null && _c !== void 0 ? _c : [];
+        try {
+            for (var serializedFloatingGroups_1 = __values(serializedFloatingGroups), serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next(); !serializedFloatingGroups_1_1.done; serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next()) {
+                var serializedFloatingGroup = serializedFloatingGroups_1_1.value;
+                var data_1 = serializedFloatingGroup.data, position = serializedFloatingGroup.position;
+                var group = createGroupFromSerializedState(data_1);
+                this.addFloatingGroup(group, {
+                    x: position.left,
+                    y: position.top,
+                    height: position.height,
+                    width: position.width,
+                }, { skipRemoveGroup: true, inDragMode: false });
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (serializedFloatingGroups_1_1 && !serializedFloatingGroups_1_1.done && (_a = serializedFloatingGroups_1.return)) _a.call(serializedFloatingGroups_1);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        try {
+            for (var _d = __values(this.floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var floatingGroup = _e.value;
+                floatingGroup.overlay.setBounds();
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
         if (typeof activeGroup === 'string') {
             var panel = this.getPanel(activeGroup);
             if (panel) {
                 this.doSetGroupActive(panel);
             }
         }
-        this.gridview.layout(this.width, this.height);
         this._onDidLayoutFromJSON.fire();
     };
     DockviewComponent.prototype.clear = function () {
-        var e_2, _a;
+        var e_5, _a;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
         var hasActiveGroup = !!this.activeGroup;
         var hasActivePanel = !!this.activePanel;
@@ -376,15 +527,15 @@ var DockviewComponent = /** @class */ (function (_super) {
             for (var groups_1 = __values(groups), groups_1_1 = groups_1.next(); !groups_1_1.done; groups_1_1 = groups_1.next()) {
                 var group = groups_1_1.value;
                 // remove the group will automatically remove the panels
-                this.removeGroup(group, true);
+                this.removeGroup(group, { skipActive: true });
             }
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (groups_1_1 && !groups_1_1.done && (_a = groups_1.return)) _a.call(groups_1);
             }
-            finally { if (e_2) throw e_2.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         if (hasActiveGroup) {
             this.doSetGroupActive(undefined);
@@ -395,7 +546,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.gridview.clear();
     };
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_3, _a;
+        var e_6, _a;
         try {
             for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var entry = _c.value;
@@ -403,12 +554,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.value.model.closeAllPanels();
             }
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_6) throw e_6.error; }
         }
     };
     DockviewComponent.prototype.addPanel = function (options) {
@@ -417,6 +568,9 @@ var DockviewComponent = /** @class */ (function (_super) {
             throw new Error("panel with id ".concat(options.id, " already exists"));
         }
         var referenceGroup;
+        if (options.position && options.floating) {
+            throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
+        }
         if (options.position) {
             if ((0, options_1.isPanelOptionsWithPanel)(options.position)) {
                 var referencePanel = typeof options.position.referencePanel === 'string'
@@ -449,7 +603,20 @@ var DockviewComponent = /** @class */ (function (_super) {
         var panel;
         if (referenceGroup) {
             var target = (0, baseComponentGridview_1.toTarget)(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
-            if (target === 'center') {
+            if (options.floating) {
+                var group = this.createGroup();
+                panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
+                var o = typeof options.floating === 'object' &&
+                    options.floating !== null
+                    ? options.floating
+                    : {};
+                this.addFloatingGroup(group, o, {
+                    inDragMode: false,
+                    skipRemoveGroup: true,
+                });
+            }
+            else if (referenceGroup.api.isFloating || target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
             }
@@ -461,6 +628,19 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.openPanel(panel);
             }
         }
+        else if (options.floating) {
+            var group = this.createGroup();
+            panel = this.createPanel(options, group);
+            group.model.openPanel(panel);
+            var o = typeof options.floating === 'object' &&
+                options.floating !== null
+                ? options.floating
+                : {};
+            this.addFloatingGroup(group, o, {
+                inDragMode: false,
+                skipRemoveGroup: true,
+            });
+        }
         else {
             var group = this.createGroupAtLocation();
             panel = this.createPanel(options, group);
@@ -478,7 +658,9 @@ var DockviewComponent = /** @class */ (function (_super) {
             throw new Error("cannot remove panel ".concat(panel.id, ". it's missing a group."));
         }
         group.model.removePanel(panel);
-        panel.dispose();
+        if (!options.skipDispose) {
+            panel.dispose();
+        }
         if (group.size === 0 && options.removeEmptyGroup) {
             this.removeGroup(group);
         }
@@ -493,7 +675,7 @@ var DockviewComponent = /** @class */ (function (_super) {
     };
     DockviewComponent.prototype.updateWatermark = function () {
         var _a, _b;
-        if (this.groups.length === 0) {
+        if (this.groups.filter(function (x) { return !x.api.isFloating; }).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -502,7 +684,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 var watermarkContainer = document.createElement('div');
                 watermarkContainer.className = 'dv-watermark-container';
                 watermarkContainer.appendChild(this.watermark.element);
-                this.element.appendChild(watermarkContainer);
+                this.gridview.element.appendChild(watermarkContainer);
             }
         }
         else if (this.watermark) {
@@ -552,27 +734,39 @@ var DockviewComponent = /** @class */ (function (_super) {
             return group;
         }
     };
-    DockviewComponent.prototype.removeGroup = function (group, skipActive) {
-        var e_4, _a;
-        if (skipActive === void 0) { skipActive = false; }
+    DockviewComponent.prototype.removeGroup = function (group, options) {
+        var e_7, _a;
+        var _b;
         var panels = __spreadArray([], __read(group.panels), false); // reassign since group panels will mutate
         try {
             for (var panels_1 = __values(panels), panels_1_1 = panels_1.next(); !panels_1_1.done; panels_1_1 = panels_1.next()) {
                 var panel = panels_1_1.value;
                 this.removePanel(panel, {
                     removeEmptyGroup: false,
-                    skipDispose: false,
+                    skipDispose: (_b = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _b !== void 0 ? _b : false,
                 });
             }
         }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
         finally {
             try {
                 if (panels_1_1 && !panels_1_1.done && (_a = panels_1.return)) _a.call(panels_1);
             }
-            finally { if (e_4) throw e_4.error; }
+            finally { if (e_7) throw e_7.error; }
         }
-        _super.prototype.doRemoveGroup.call(this, group, { skipActive: skipActive });
+        this.doRemoveGroup(group, options);
+    };
+    DockviewComponent.prototype.doRemoveGroup = function (group, options) {
+        var floatingGroup = this.floatingGroups.find(function (_) { return _.group === group; });
+        if (floatingGroup) {
+            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                floatingGroup.group.dispose();
+                this._groups.delete(group.id);
+            }
+            floatingGroup.dispose();
+            return floatingGroup.group;
+        }
+        return _super.prototype.doRemoveGroup.call(this, group, options);
     };
     DockviewComponent.prototype.moveGroupOrPanel = function (destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
         var _a;
@@ -603,25 +797,26 @@ var DockviewComponent = /** @class */ (function (_super) {
             var targetLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, destinationTarget);
             if (sourceGroup && sourceGroup.size < 2) {
                 var _b = __read((0, array_1.tail)(targetLocation), 2), targetParentLocation = _b[0], to = _b[1];
-                var sourceLocation = (0, gridview_1.getGridLocation)(sourceGroup.element);
-                var _c = __read((0, array_1.tail)(sourceLocation), 2), sourceParentLocation = _c[0], from = _c[1];
-                if ((0, array_1.sequenceEquals)(sourceParentLocation, targetParentLocation)) {
-                    // special case when 'swapping' two views within same grid location
-                    // if a group has one tab - we are essentially moving the 'group'
-                    // which is equivalent to swapping two views in this case
-                    this.gridview.moveView(sourceParentLocation, from, to);
-                }
-                else {
-                    // source group will become empty so delete the group
-                    var targetGroup = this.doRemoveGroup(sourceGroup, {
-                        skipActive: true,
-                        skipDispose: true,
-                    });
-                    // after deleting the group we need to re-evaulate the ref location
-                    var updatedReferenceLocation = (0, gridview_1.getGridLocation)(destinationGroup.element);
-                    var location_3 = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                    this.doAddGroup(targetGroup, location_3);
+                var isFloating = this.floatingGroups.find(function (x) { return x.group === sourceGroup; });
+                if (!isFloating) {
+                    var sourceLocation = (0, gridview_1.getGridLocation)(sourceGroup.element);
+                    var _c = __read((0, array_1.tail)(sourceLocation), 2), sourceParentLocation = _c[0], from = _c[1];
+                    if ((0, array_1.sequenceEquals)(sourceParentLocation, targetParentLocation)) {
+                        // special case when 'swapping' two views within same grid location
+                        // if a group has one tab - we are essentially moving the 'group'
+                        // which is equivalent to swapping two views in this case
+                        this.gridview.moveView(sourceParentLocation, from, to);
+                    }
                 }
+                // source group will become empty so delete the group
+                var targetGroup = this.doRemoveGroup(sourceGroup, {
+                    skipActive: true,
+                    skipDispose: true,
+                });
+                // after deleting the group we need to re-evaulate the ref location
+                var updatedReferenceLocation = (0, gridview_1.getGridLocation)(destinationGroup.element);
+                var location_3 = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
+                this.doAddGroup(targetGroup, location_3);
             }
             else {
                 var groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
@@ -636,7 +831,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.moveGroup = function (sourceGroup, referenceGroup, target) {
-        var e_5, _a;
+        var e_8, _a;
         if (sourceGroup) {
             if (!target || target === 'center') {
                 var activePanel = sourceGroup.activePanel;
@@ -654,16 +849,22 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                     }
                 }
-                catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                catch (e_8_1) { e_8 = { error: e_8_1 }; }
                 finally {
                     try {
                         if (panels_2_1 && !panels_2_1.done && (_a = panels_2.return)) _a.call(panels_2);
                     }
-                    finally { if (e_5) throw e_5.error; }
+                    finally { if (e_8) throw e_8.error; }
                 }
             }
             else {
-                this.gridview.removeView((0, gridview_1.getGridLocation)(sourceGroup.element));
+                var floatingGroup = this.floatingGroups.find(function (x) { return x.group === sourceGroup; });
+                if (floatingGroup) {
+                    floatingGroup.dispose();
+                }
+                else {
+                    this.gridview.removeView((0, gridview_1.getGridLocation)(sourceGroup.element));
+                }
                 var referenceLocation = (0, gridview_1.getGridLocation)(referenceGroup.element);
                 var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
                 this.gridview.addView(sourceGroup, splitview_1.Sizing.Distribute, dropLocation);