dockview
Version:
Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support
261 lines • 10.9 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 __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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.TabsContainer = void 0;
var lifecycle_1 = require("../../lifecycle");
var events_1 = require("../../events");
var tab_1 = require("../tab");
var array_1 = require("../../array");
var dataTransfer_1 = require("../../dnd/dataTransfer");
var droptarget_1 = require("../../dnd/droptarget");
var dnd_1 = require("../dnd");
var TabsContainer = /** @class */ (function (_super) {
__extends(TabsContainer, _super);
function TabsContainer(accessor, group, options) {
var _this = _super.call(this) || this;
_this.accessor = accessor;
_this.group = group;
_this.tabs = [];
_this.selectedIndex = -1;
_this.active = false;
_this._onDrop = new events_1.Emitter();
_this.onDrop = _this._onDrop.event;
_this.addDisposables(_this._onDrop);
_this._element = document.createElement('div');
_this._element.className = 'tabs-and-actions-container';
_this.height = options.tabHeight;
_this.actionContainer = document.createElement('div');
_this.actionContainer.className = 'action-container';
_this.tabContainer = document.createElement('div');
_this.tabContainer.className = 'tabs-container';
_this.voidContainer = document.createElement('div');
_this.voidContainer.className = 'void-container';
_this._element.appendChild(_this.tabContainer);
_this._element.appendChild(_this.voidContainer);
_this._element.appendChild(_this.actionContainer);
_this.voidDropTarget = new droptarget_1.Droptarget(_this.voidContainer, {
validOverlays: 'none',
canDisplayOverlay: function (event) {
var _a;
var data = (0, dataTransfer_1.getPanelData)();
if (data) {
// don't show the overlay if the tab being dragged is the last panel of this group
return ((_a = (0, array_1.last)(_this.tabs)) === null || _a === void 0 ? void 0 : _a.value.panelId) !== data.panelId;
}
return group.model.canDisplayOverlay(event, dnd_1.DockviewDropTargets.Panel);
},
});
_this.addDisposables(_this.voidDropTarget.onDrop(function (event) {
_this._onDrop.fire({
event: event.event,
index: _this.tabs.length,
});
}), _this.voidDropTarget, (0, events_1.addDisposableListener)(_this.tabContainer, 'mousedown', function (event) {
if (event.defaultPrevented) {
return;
}
var isLeftClick = event.button === 0;
if (isLeftClick) {
_this.accessor.doSetGroupActive(_this.group);
}
}));
return _this;
}
Object.defineProperty(TabsContainer.prototype, "panels", {
get: function () {
return this.tabs.map(function (_) { return _.value.panelId; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(TabsContainer.prototype, "size", {
get: function () {
return this.tabs.length;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TabsContainer.prototype, "height", {
get: function () {
return this._height;
},
set: function (value) {
this._height = value;
if (typeof value !== 'number') {
this.element.style.removeProperty('--dv-tabs-and-actions-container-height');
}
else {
this.element.style.setProperty('--dv-tabs-and-actions-container-height', "".concat(value, "px"));
}
},
enumerable: false,
configurable: true
});
TabsContainer.prototype.show = function () {
this.element.style.display = '';
};
TabsContainer.prototype.hide = function () {
this.element.style.display = 'none';
};
TabsContainer.prototype.setActionElement = function (element) {
if (this.actions === element) {
return;
}
if (this.actions) {
this.actions.remove();
this.actions = undefined;
}
if (element) {
this.actionContainer.appendChild(element);
this.actions = element;
}
};
Object.defineProperty(TabsContainer.prototype, "element", {
get: function () {
return this._element;
},
enumerable: false,
configurable: true
});
TabsContainer.prototype.isActive = function (tab) {
return (this.selectedIndex > -1 &&
this.tabs[this.selectedIndex].value === tab);
};
TabsContainer.prototype.at = function (index) {
var _a;
return (_a = this.tabs[index]) === null || _a === void 0 ? void 0 : _a.value;
};
TabsContainer.prototype.indexOf = function (id) {
return this.tabs.findIndex(function (tab) { return tab.value.panelId === id; });
};
TabsContainer.prototype.setActive = function (isGroupActive) {
this.active = isGroupActive;
};
TabsContainer.prototype.addTab = function (tab, index) {
if (index === void 0) { index = this.tabs.length; }
if (index < 0 || index > this.tabs.length) {
throw new Error('invalid location');
}
this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
this.tabs = __spreadArray(__spreadArray(__spreadArray([], __read(this.tabs.slice(0, index)), false), [
tab
], false), __read(this.tabs.slice(index)), false);
if (this.selectedIndex < 0) {
this.selectedIndex = index;
}
};
TabsContainer.prototype.delete = function (id) {
var index = this.tabs.findIndex(function (tab) { return tab.value.panelId === id; });
var tabToRemove = this.tabs.splice(index, 1)[0];
var value = tabToRemove.value, disposable = tabToRemove.disposable;
disposable.dispose();
value.element.remove();
};
TabsContainer.prototype.setActivePanel = function (panel) {
this.tabs.forEach(function (tab) {
var isActivePanel = panel.id === tab.value.panelId;
tab.value.setActive(isActivePanel);
});
};
TabsContainer.prototype.openPanel = function (panel, index) {
var _this = this;
var _a;
if (index === void 0) { index = this.tabs.length; }
if (this.tabs.find(function (tab) { return tab.value.panelId === panel.id; })) {
return;
}
var tabToAdd = new tab_1.Tab(panel.id, this.accessor, this.group);
if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
throw new Error('invalid header component');
}
tabToAdd.setContent(panel.view.tab);
var disposable = lifecycle_1.CompositeDisposable.from(tabToAdd.onChanged(function (event) {
var _a;
var alreadyFocused = panel.id === ((_a = _this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) &&
_this.group.model.isContentFocused();
_this.accessor.fireMouseEvent(__assign(__assign({}, event), { panel: panel, tab: true }));
var isLeftClick = event.event.button === 0;
if (!isLeftClick || event.event.defaultPrevented) {
return;
}
switch (event.kind) {
case tab_1.MouseEventKind.CLICK:
_this.group.model.openPanel(panel, {
skipFocus: alreadyFocused,
});
break;
}
}), tabToAdd.onDrop(function (event) {
_this._onDrop.fire({
event: event.event,
index: _this.tabs.findIndex(function (x) { return x.value === tabToAdd; }),
});
}));
var value = { value: tabToAdd, disposable: disposable };
this.addTab(value, index);
this.activePanel = panel;
};
TabsContainer.prototype.closePanel = function (panel) {
this.delete(panel.id);
};
TabsContainer.prototype.dispose = function () {
_super.prototype.dispose.call(this);
this.tabs.forEach(function (tab) {
tab.disposable.dispose();
});
this.tabs = [];
};
return TabsContainer;
}(lifecycle_1.CompositeDisposable));
exports.TabsContainer = TabsContainer;
//# sourceMappingURL=tabsContainer.js.map