dockview-core
Version:
Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript
232 lines (231 loc) • 10.1 kB
JavaScript
;
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FloatingGroupModule = exports.FloatingGroupService = void 0;
var lifecycle_1 = require("../lifecycle");
var array_1 = require("../array");
var dom_1 = require("../dom");
var constants_1 = require("../constants");
var dockviewFloatingGroupPanel_1 = require("./dockviewFloatingGroupPanel");
var modules_1 = require("./modules");
var FloatingGroupService = /** @class */ (function () {
function FloatingGroupService(host) {
this._floatingGroups = [];
this._host = host;
}
Object.defineProperty(FloatingGroupService.prototype, "floatingGroups", {
get: function () {
return this._floatingGroups;
},
enumerable: false,
configurable: true
});
FloatingGroupService.prototype.add = function (group, overlay, gridview) {
var _this = this;
var floatingGroupPanel = new dockviewFloatingGroupPanel_1.DockviewFloatingGroupPanel(group, overlay, gridview);
var disposable = new lifecycle_1.CompositeDisposable(group.api.onDidActiveChange(function (event) {
if (event.isActive) {
overlay.bringToFront();
}
}), (function () {
// The floating window's nested gridview fills the overlay
// beneath the (optional) title bar; size it from its own
// measured box so it follows the overlay as the user drags
// / resizes the window.
var lastWidth = -1;
var lastHeight = -1;
return (0, dom_1.watchElementResize)(gridview.element, function (entry) {
var width = Math.round(entry.contentRect.width);
var height = Math.round(entry.contentRect.height);
if (width === lastWidth && height === lastHeight) {
return;
}
lastWidth = width;
lastHeight = height;
gridview.layout(width, height);
});
})());
// Floating windows are non-modal dialogs (role set in Overlay). Give
// the dialog an accessible name from the representative group's active
// panel, refreshed as the active panel changes. An untitled panel
// leaves the dialog unnamed rather than hard-coding a label string.
var updateDialogLabel = function () {
var _a;
var title = (_a = group.activePanel) === null || _a === void 0 ? void 0 : _a.title;
if (title) {
overlay.element.setAttribute('aria-label', title);
}
else {
overlay.element.removeAttribute('aria-label');
}
};
updateDialogLabel();
floatingGroupPanel.addDisposables(group.api.onDidActivePanelChange(function () { return updateDialogLabel(); }), overlay.onDidChange(function () {
gridview.layout(gridview.width, gridview.height);
}), overlay.onDidChangeEnd(function () {
_this._host.fireLayoutChange();
}), group.onDidChange(function (event) {
// `event.height` is the group's requested *content* height.
// When a dedicated title bar is present the overlay's outer
// box is taller by the header, so add it back to preserve the
// requested content size.
overlay.setBounds({
height: typeof (event === null || event === void 0 ? void 0 : event.height) === 'number'
? event.height + overlay.headerHeight
: event === null || event === void 0 ? void 0 : event.height,
width: event === null || event === void 0 ? void 0 : event.width,
});
}), {
dispose: function () {
disposable.dispose();
(0, array_1.remove)(_this._floatingGroups, floatingGroupPanel);
group.model.location = { type: 'grid' };
},
});
this._floatingGroups.push(floatingGroupPanel);
return floatingGroupPanel;
};
FloatingGroupService.prototype.findByGroup = function (group) {
// A floating window may host several groups in a nested gridview, so
// match by membership (DOM containment) rather than only the anchor
// group. `floating.group === group` covers the brief window before the
// anchor's element is attached to the gridview.
return this._floatingGroups.find(function (floating) {
return floating.group === group ||
floating.gridview.element.contains(group.element);
});
};
FloatingGroupService.prototype.serialize = function () {
return this._floatingGroups.map(function (floating) {
var grid = floating.gridview.serialize();
var position = floating.overlay.toJSON();
var root = grid.root;
// A single-group window keeps the legacy `data` shape so layouts
// round-trip byte-stably and older readers keep working; only
// genuine multi-group windows emit the nested `grid` form.
if (root.type === 'branch' &&
root.data.length === 1 &&
root.data[0].type === 'leaf') {
return {
data: root.data[0].data,
position: position,
};
}
return { grid: grid, position: position };
});
};
FloatingGroupService.prototype.constrainBounds = function () {
var e_1, _a;
try {
for (var _b = __values(this._floatingGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
var floating = _c.value;
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; }
}
};
FloatingGroupService.prototype.updateBounds = function (options) {
var e_2, _a;
var _b, _c;
if (!('floatingGroupBounds' in options)) {
return;
}
try {
for (var _d = __values(this._floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
var group = _e.value;
switch (options.floatingGroupBounds) {
case 'boundedWithinViewport':
group.overlay.minimumInViewportHeight = undefined;
group.overlay.minimumInViewportWidth = undefined;
break;
case undefined:
group.overlay.minimumInViewportHeight =
constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
group.overlay.minimumInViewportWidth =
constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
break;
default:
group.overlay.minimumInViewportHeight =
(_b = options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumHeightWithinViewport;
group.overlay.minimumInViewportWidth =
(_c = options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport;
}
group.overlay.setBounds();
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
}
finally { if (e_2) throw e_2.error; }
}
};
FloatingGroupService.prototype.disposeAll = function () {
var e_3, _a;
try {
for (var _b = __values(__spreadArray([], __read(this._floatingGroups), false)), _c = _b.next(); !_c.done; _c = _b.next()) {
var floating = _c.value;
floating.dispose();
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_3) throw e_3.error; }
}
};
FloatingGroupService.prototype.dispose = function () {
this.disposeAll();
};
return FloatingGroupService;
}());
exports.FloatingGroupService = FloatingGroupService;
exports.FloatingGroupModule = (0, modules_1.defineModule)({
name: 'FloatingGroup',
serviceKey: 'floatingGroupService',
create: function (host) { return new FloatingGroupService(host); },
});