dockview
Version:
Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support
634 lines • 26.3 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
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));
};
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.");
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Groupview = exports.GroupChangeKind2 = void 0;
var component_api_1 = require("../api/component.api");
var dataTransfer_1 = require("../dnd/dataTransfer");
var droptarget_1 = require("../dnd/droptarget");
var dom_1 = require("../dom");
var events_1 = require("../events");
var lifecycle_1 = require("../lifecycle");
var content_1 = require("./panel/content");
var tabsContainer_1 = require("./titlebar/tabsContainer");
var dnd_1 = require("./dnd");
var GroupChangeKind2;
(function (GroupChangeKind2) {
GroupChangeKind2["ADD_PANEL"] = "ADD_PANEL";
GroupChangeKind2["REMOVE_PANEL"] = "REMOVE_PANEL";
GroupChangeKind2["PANEL_ACTIVE"] = "PANEL_ACTIVE";
GroupChangeKind2["GROUP_ACTIVE"] = "GROUP_ACTIVE";
})(GroupChangeKind2 = exports.GroupChangeKind2 || (exports.GroupChangeKind2 = {}));
var Groupview = /** @class */ (function (_super) {
__extends(Groupview, _super);
function Groupview(container, accessor, id, options, parent) {
var _this = _super.call(this) || this;
_this.container = container;
_this.accessor = accessor;
_this.id = id;
_this.options = options;
_this.parent = parent;
_this._isGroupActive = false;
_this.mostRecentlyUsed = [];
_this._onDidChange = new events_1.Emitter();
_this.onDidChange = _this._onDidChange.event;
_this._width = 0;
_this._height = 0;
_this._panels = [];
_this._onMove = new events_1.Emitter();
_this.onMove = _this._onMove.event;
_this._onDidGroupChange = new events_1.Emitter();
_this.onDidGroupChange = _this._onDidGroupChange.event;
_this.closePanel = function (panel) { return __awaiter(_this, void 0, void 0, function () {
var _a;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
_a = panel.close;
if (!_a) return [3 /*break*/, 2];
return [4 /*yield*/, panel.close()];
case 1:
_a = !(_b.sent());
_b.label = 2;
case 2:
if (_a) {
return [2 /*return*/, false];
}
this.doClose(panel);
return [2 /*return*/, true];
}
});
}); };
_this.container.classList.add('groupview');
_this.addDisposables(_this._onMove, _this._onDidGroupChange);
_this.tabsContainer = new tabsContainer_1.TabsContainer(_this.accessor, _this.parent, {
tabHeight: options.tabHeight,
});
_this.contentContainer = new content_1.ContentContainer();
_this.dropTarget = new droptarget_1.Droptarget(_this.contentContainer.element, {
validOverlays: 'all',
canDisplayOverlay: function (event) {
var data = (0, dataTransfer_1.getPanelData)();
if (data) {
var groupHasOnePanelAndIsActiveDragElement = _this._panels.length === 1 && data.groupId === _this.id;
return !groupHasOnePanelAndIsActiveDragElement;
}
return _this.canDisplayOverlay(event, dnd_1.DockviewDropTargets.Panel);
},
});
container.append(_this.tabsContainer.element, _this.contentContainer.element);
_this.addDisposables(_this._onMove, _this._onDidGroupChange, _this.tabsContainer.onDrop(function (event) {
_this.handleDropEvent(event.event, droptarget_1.Position.Center, event.index);
}), _this.contentContainer.onDidFocus(function () {
_this.accessor.doSetGroupActive(_this.parent, true);
}), _this.contentContainer.onDidBlur(function () {
// this._activePanel?.api._ondid
}), _this.dropTarget.onDrop(function (event) {
_this.handleDropEvent(event.event, event.position);
}));
return _this;
}
Object.defineProperty(Groupview.prototype, "element", {
get: function () {
throw new Error('not supported');
},
enumerable: false,
configurable: true
});
Object.defineProperty(Groupview.prototype, "activePanel", {
get: function () {
return this._activePanel;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Groupview.prototype, "tabHeight", {
get: function () {
return this.tabsContainer.height;
},
set: function (height) {
this.tabsContainer.height = height;
this.layout(this._width, this._height);
},
enumerable: false,
configurable: true
});
Object.defineProperty(Groupview.prototype, "isActive", {
get: function () {
return this._isGroupActive;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Groupview.prototype, "panels", {
get: function () {
return this._panels;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Groupview.prototype, "size", {
get: function () {
return this._panels.length;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Groupview.prototype, "isEmpty", {
get: function () {
return this._panels.length === 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Groupview.prototype, "minimumHeight", {
get: function () {
return 100;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Groupview.prototype, "maximumHeight", {
get: function () {
return Number.MAX_SAFE_INTEGER;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Groupview.prototype, "minimumWidth", {
get: function () {
return 100;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Groupview.prototype, "maximumWidth", {
get: function () {
return Number.MAX_SAFE_INTEGER;
},
enumerable: false,
configurable: true
});
Groupview.prototype.initialize = function () {
var _this = this;
var _a, _b;
if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
this.options.panels.forEach(function (panel) {
_this.doAddPanel(panel);
});
}
if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.activePanel) {
this.openPanel(this.options.activePanel);
}
// must be run after the constructor otherwise this.parent may not be
// correctly initialized
this.setActive(this.isActive, true, true);
this.updateContainer();
};
Groupview.prototype.isContentFocused = function () {
if (!document.activeElement) {
return false;
}
return (0, dom_1.isAncestor)(document.activeElement, this.contentContainer.element);
};
Groupview.prototype.indexOf = function (panel) {
return this.tabsContainer.indexOf(panel.id);
};
Groupview.prototype.toJSON = function () {
var _a;
return {
views: this.tabsContainer.panels,
activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
id: this.id,
};
};
Groupview.prototype.moveToNext = function (options) {
if (!options) {
options = {};
}
if (!options.panel) {
options.panel = this.activePanel;
}
var index = options.panel ? this.panels.indexOf(options.panel) : -1;
var normalizedIndex;
if (index < this.panels.length - 1) {
normalizedIndex = index + 1;
}
else if (!options.suppressRoll) {
normalizedIndex = 0;
}
else {
return;
}
this.openPanel(this.panels[normalizedIndex]);
};
Groupview.prototype.moveToPrevious = function (options) {
if (!options) {
options = {};
}
if (!options.panel) {
options.panel = this.activePanel;
}
if (!options.panel) {
return;
}
var index = this.panels.indexOf(options.panel);
var normalizedIndex;
if (index > 0) {
normalizedIndex = index - 1;
}
else if (!options.suppressRoll) {
normalizedIndex = this.panels.length - 1;
}
else {
return;
}
this.openPanel(this.panels[normalizedIndex]);
};
Groupview.prototype.containsPanel = function (panel) {
return this.panels.includes(panel);
};
Groupview.prototype.init = function (params) {
//noop
};
Groupview.prototype.update = function (params) {
//noop
};
Groupview.prototype.focus = function () {
var _a;
(_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
};
Groupview.prototype.openPanel = function (panel, options) {
if (options === void 0) { options = {}; }
if (typeof options.index !== 'number' ||
options.index > this.panels.length) {
options.index = this.panels.length;
}
if (this._activePanel === panel) {
this.accessor.doSetGroupActive(this.parent);
return;
}
this.doAddPanel(panel, options.index);
this.doSetActivePanel(panel);
this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
this.updateContainer();
};
Groupview.prototype.removePanel = function (groupItemOrId) {
var id = typeof groupItemOrId === 'string'
? groupItemOrId
: groupItemOrId.id;
var panelToRemove = this._panels.find(function (panel) { return panel.id === id; });
if (!panelToRemove) {
throw new Error('invalid operation');
}
return this._removePanel(panelToRemove);
};
Groupview.prototype.closeAllPanels = function () {
var _a;
return __awaiter(this, void 0, void 0, function () {
var index, canClose, _b, i, panel, canClose, arrPanelCpy;
var _this = this;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
index = this._activePanel
? this.panels.indexOf(this._activePanel)
: -1;
if (!(this._activePanel && index > -1)) return [3 /*break*/, 3];
if (this.panels.indexOf(this._activePanel) < 0) {
console.warn('active panel not tracked');
}
_b = !((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.close);
if (_b) return [3 /*break*/, 2];
return [4 /*yield*/, this._activePanel.close()];
case 1:
_b = (_c.sent());
_c.label = 2;
case 2:
canClose = _b;
if (!canClose) {
return [2 /*return*/, false];
}
_c.label = 3;
case 3:
i = 0;
_c.label = 4;
case 4:
if (!(i < this.panels.length)) return [3 /*break*/, 7];
if (i === index) {
return [3 /*break*/, 6];
}
panel = this.panels[i];
this.openPanel(panel);
if (!panel.close) return [3 /*break*/, 6];
return [4 /*yield*/, panel.close()];
case 5:
canClose = _c.sent();
if (!canClose) {
return [2 /*return*/, false];
}
_c.label = 6;
case 6:
i++;
return [3 /*break*/, 4];
case 7:
if (!(this.panels.length > 0)) return [3 /*break*/, 9];
arrPanelCpy = __spreadArray([], __read(this.panels), false);
return [4 /*yield*/, Promise.all(arrPanelCpy.map(function (p) { return _this.doClose(p); }))];
case 8:
_c.sent();
return [3 /*break*/, 10];
case 9:
this.accessor.removeGroup(this.parent);
_c.label = 10;
case 10: return [2 /*return*/, true];
}
});
});
};
Groupview.prototype.doClose = function (panel) {
this.accessor.removePanel(panel);
};
Groupview.prototype.isPanelActive = function (panel) {
return this._activePanel === panel;
};
Groupview.prototype.updateActions = function () {
var _a, _b;
if (this.isActive && ((_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.actions)) {
this.tabsContainer.setActionElement(this._activePanel.view.actions.element);
}
else {
this.tabsContainer.setActionElement(undefined);
}
};
Groupview.prototype.setActive = function (isGroupActive, skipFocus, force) {
var _a, _b;
if (skipFocus === void 0) { skipFocus = false; }
if (force === void 0) { force = false; }
if (!force && this.isActive === isGroupActive) {
if (!skipFocus) {
(_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
}
return;
}
this._isGroupActive = isGroupActive;
(0, dom_1.toggleClass)(this.container, 'active-group', isGroupActive);
(0, dom_1.toggleClass)(this.container, 'inactive-group', !isGroupActive);
this.tabsContainer.setActive(this.isActive);
if (!this._activePanel && this.panels.length > 0) {
this.doSetActivePanel(this.panels[0]);
}
this.updateContainer();
if (isGroupActive) {
if (!skipFocus) {
(_b = this._activePanel) === null || _b === void 0 ? void 0 : _b.focus();
}
}
};
Groupview.prototype.layout = function (width, height) {
var _a;
this._width = width;
this._height = height;
this.contentContainer.layout(this._width, this._height);
if ((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.layout) {
this._activePanel.layout(this._width, this._height);
}
};
Groupview.prototype._removePanel = function (panel) {
var isActivePanel = this._activePanel === panel;
this.doRemovePanel(panel);
if (isActivePanel && this.panels.length > 0) {
var nextPanel = this.mostRecentlyUsed[0];
this.openPanel(nextPanel);
}
if (this._activePanel && this.panels.length === 0) {
this.doSetActivePanel(undefined);
}
this.updateContainer();
return panel;
};
Groupview.prototype.doRemovePanel = function (panel) {
var index = this.panels.indexOf(panel);
if (this._activePanel === panel) {
this.contentContainer.closePanel();
}
this.tabsContainer.delete(panel.id);
this._panels.splice(index, 1);
if (this.mostRecentlyUsed.includes(panel)) {
this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
}
this._onDidGroupChange.fire({
kind: GroupChangeKind2.REMOVE_PANEL,
panel: panel,
});
};
Groupview.prototype.doAddPanel = function (panel, index) {
if (index === void 0) { index = this.panels.length; }
var existingPanel = this._panels.indexOf(panel);
var hasExistingPanel = existingPanel > -1;
this.tabsContainer.openPanel(panel, index);
this.contentContainer.openPanel(panel);
this.tabsContainer.show();
this.contentContainer.show();
if (hasExistingPanel) {
// TODO - need to ensure ordering hasn't changed and if it has need to re-order this.panels
return;
}
this.updateMru(panel);
this.panels.splice(index, 0, panel);
this._onDidGroupChange.fire({
kind: GroupChangeKind2.ADD_PANEL,
panel: panel,
});
};
Groupview.prototype.doSetActivePanel = function (panel) {
this._activePanel = panel;
if (panel) {
this.tabsContainer.setActivePanel(panel);
panel.layout(this._width, this._height);
this.updateMru(panel);
this._onDidGroupChange.fire({
kind: GroupChangeKind2.PANEL_ACTIVE,
panel: panel,
});
}
};
Groupview.prototype.updateMru = function (panel) {
if (this.mostRecentlyUsed.includes(panel)) {
this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
}
this.mostRecentlyUsed = __spreadArray([panel], __read(this.mostRecentlyUsed), false);
};
Groupview.prototype.updateContainer = function () {
var _this = this;
this.updateActions();
(0, dom_1.toggleClass)(this.container, 'empty', this.isEmpty);
this.panels.forEach(function (panel) {
return panel.updateParentGroup(_this.parent, _this.isActive);
});
if (this.isEmpty && !this.watermark) {
var watermark = this.accessor.createWatermarkComponent();
watermark.init({
containerApi: new component_api_1.DockviewApi(this.accessor),
params: {},
title: '',
api: null,
});
this.watermark = watermark;
(0, events_1.addDisposableListener)(this.watermark.element, 'click', function () {
if (!_this.isActive) {
_this.accessor.doSetGroupActive(_this.parent);
}
});
this.contentContainer.hide();
this.tabsContainer.hide();
this.container.appendChild(this.watermark.element);
this.watermark.updateParentGroup(this.parent, true);
}
if (!this.isEmpty && this.watermark) {
this.watermark.element.remove();
this.watermark.dispose();
this.watermark = undefined;
this.contentContainer.show();
this.tabsContainer.show();
}
};
Groupview.prototype.canDisplayOverlay = function (dragOverEvent, target) {
// custom overlay handler
return false;
};
Groupview.prototype.handleDropEvent = function (event, position, index) {
var data = (0, dataTransfer_1.getPanelData)();
if (data) {
var fromSameGroup = this.tabsContainer.indexOf(data.panelId) !== -1;
if (fromSameGroup && this.tabsContainer.size === 1) {
return;
}
var groupId = data.groupId, panelId = data.panelId;
var isSameGroup = this.id === groupId;
if (isSameGroup && !position) {
var oldIndex = this.tabsContainer.indexOf(panelId);
if (oldIndex === index) {
return;
}
}
this._onMove.fire({
target: position,
groupId: data.groupId,
itemId: data.panelId,
index: index,
});
}
else {
// custom drop handler
}
};
Groupview.prototype.dispose = function () {
var e_1, _a;
try {
for (var _b = __values(this.panels), _c = _b.next(); !_c.done; _c = _b.next()) {
var panel = _c.value;
panel.dispose();
}
}
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; }
}
_super.prototype.dispose.call(this);
this.dropTarget.dispose();
this.tabsContainer.dispose();
this.contentContainer.dispose();
};
return Groupview;
}(lifecycle_1.CompositeDisposable));
exports.Groupview = Groupview;
//# sourceMappingURL=groupview.js.map