docking-egid
Version:
This library is built to provide a solution for Angular enables the creation of complex layouts consisting of panels that can be floated, docked, nested, resized, pinned, unpinned and closed. Additional components can be integrated to create an IDE-like l
1,170 lines (1,153 loc) • 232 kB
JavaScript
import { r as registerInstance, h, H as Host, c as createEvent, F as Fragment, g as getElement, f as forceUpdate } from './index-cbe7fc41.js';
import { h as IgcDockingIndicatorPosition, f as IgcSplitPaneOrientation, e as IgcDockManagerPaneType, g as IgcUnpinnedLocation, i as IgcPaneDragActionType, k as IgcResizerLocation, r as resourceStringsMap, d as addResourceStrings } from './locale-7d22d721.js';
const buttonComponentCss = "button{position:static;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;height:100%;min-width:10px;padding:2px 4px;border-radius:2px;color:var(--igc-button-text, rgba(0, 0, 0, 0.72));cursor:pointer;outline-style:none;font-size:14px;font-family:inherit;background:transparent;border:none;-webkit-tap-highlight-color:transparent;opacity:0.7;-webkit-transition:background 0.25s ease-out, opacity 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, box-shadow 0.25s ease-out, -webkit-box-shadow 0.25s ease-out}:host([disabled]){pointer-events:none}:host{display:-ms-flexbox;display:flex}button{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}button:hover{opacity:1}button:focus{background:var(--igc-accent-color, #fff);-webkit-box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);opacity:1}button[disabled]{opacity:0.54}";
let IgcButtonComponent = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h(Host, { disabled: this.disabled }, h("button", { name: this.name, type: this.type, value: this.value, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null))));
}
};
IgcButtonComponent.style = buttonComponentCss;
/**
* @hidden
*/
class Utils {
static isDockingIndicatorVertical(position) {
return position === IgcDockingIndicatorPosition.top ||
position === IgcDockingIndicatorPosition.bottom ||
position === IgcDockingIndicatorPosition.outerTop ||
position === IgcDockingIndicatorPosition.outerBottom;
}
static isDockingIndicatorBefore(position) {
return position === IgcDockingIndicatorPosition.top ||
position === IgcDockingIndicatorPosition.left ||
position === IgcDockingIndicatorPosition.outerTop ||
position === IgcDockingIndicatorPosition.outerLeft;
}
static isDockingIndicatorBeforeRTL(position) {
return position === IgcDockingIndicatorPosition.top ||
position === IgcDockingIndicatorPosition.right ||
position === IgcDockingIndicatorPosition.outerTop ||
position === IgcDockingIndicatorPosition.outerRight;
}
static isDockingIndicatorOuter(position) {
return position === IgcDockingIndicatorPosition.outerLeft ||
position === IgcDockingIndicatorPosition.outerRight ||
position === IgcDockingIndicatorPosition.outerTop ||
position === IgcDockingIndicatorPosition.outerBottom;
}
static isSplitPaneVertical(splitPane) {
return splitPane.orientation === IgcSplitPaneOrientation.vertical;
}
static isAltPressed(event) {
return event.altKey || event.getModifierState('Alt') || event.getModifierState('AltGraph');
}
static isControlOrMetaPressed(event) {
return event.ctrlKey || event.metaKey || event.getModifierState('Meta') || event.getModifierState('OS');
}
static partNameMap(partNameInfo, delimiter = ' ') {
return Object.keys(partNameInfo)
.filter(key => partNameInfo[key])
.join(delimiter);
}
static getDirection(element) {
let direction = '';
if (element.dir !== '') {
direction = element.dir;
}
else {
let parent = element.parentElement;
while (parent) {
if (parent.dir !== '') {
direction = parent.dir;
break;
}
parent = parent.parentElement;
}
}
return direction;
}
}
/**
* @hidden
*/
const IGC_DEFAULT_PANE_SIZE = 100;
/**
* @hidden
*/
const IGC_DEFAULT_UNPIN_PANE_SIZE = 200;
/**
* @hidden
*/
const IGC_RESIZING_MIN_SIZE = 42;
/**
* @hidden
*/
const IGC_DEFAULT_RESIZE = 10;
/**
* @hidden
*/
const IGC_DRAG_FLYOUT_THRESHOLD = 50;
/**
* @hidden
*/
var IgcTabHeadersPosition;
(function (IgcTabHeadersPosition) {
IgcTabHeadersPosition["top"] = "top";
IgcTabHeadersPosition["bottom"] = "bottom";
})(IgcTabHeadersPosition || (IgcTabHeadersPosition = {}));
/**
* @hidden
*/
var IgcContextMenuOrientation;
(function (IgcContextMenuOrientation) {
IgcContextMenuOrientation["top"] = "top";
IgcContextMenuOrientation["bottom"] = "bottom";
})(IgcContextMenuOrientation || (IgcContextMenuOrientation = {}));
/**
* @hidden
*/
var IgcPinBehavior;
(function (IgcPinBehavior) {
IgcPinBehavior["allPanes"] = "allPanes";
IgcPinBehavior["selectedPane"] = "selectedPane";
})(IgcPinBehavior || (IgcPinBehavior = {}));
const contentPaneComponentCss = ":host{--min-pane-size:0px;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;width:100%;height:100%;min-width:var(--min-pane-size);min-height:var(--min-pane-size);-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:all}:host(:focus){outline-style:none}:host([part~=disabled]:not([part~=single-floating])),:host([part~=disabled])>slot:not([name]){pointer-events:none}";
let IgcContentPaneComponent = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.rendered = createEvent(this, "rendered", 7);
this.disabled = false;
this.isSingleFloating = false;
}
componentDidRender() {
this.rendered.emit();
}
render() {
const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;
const unpinnedSize = this.unpinnedSize ? this.unpinnedSize : IGC_DEFAULT_UNPIN_PANE_SIZE;
const parts = Utils.partNameMap({
'content-pane': true,
disabled: this.disabled,
'single-floating': this.isSingleFloating
});
return (h(Host, { role: "group", "aria-label": this.header, "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, style: {
flex: this.isFlyout ? `0 1 ${unpinnedSize}px` : `${size} 1 ${size}px`
}, part: parts }, h("slot", { name: "header" }), h("slot", null)));
}
};
IgcContentPaneComponent.style = contentPaneComponentCss;
const contextMenuComponentCss = ":host{position:absolute;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;top:0;left:0;bottom:0;right:0;z-index:10002;pointer-events:none}:host igc-icon-component svg{width:17px;height:17px}:host igc-icon-component{margin-left:8px}[part=menu-content]{position:absolute;visibility:hidden;color:var(--igc-context-menu-color, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-context-menu-background, var(--igc-accent-color, #fff));border:1px solid var(--igc-context-menu-background, var(--igc-accent-color, #fff));pointer-events:all;-webkit-box-shadow:0 5px 22px rgba(0, 0, 0, 0.08), 0 12px 17px 2px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.26);box-shadow:0 5px 22px rgba(0, 0, 0, 0.08), 0 12px 17px 2px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.26);-webkit-box-sizing:border-box;box-sizing:border-box}[part~=menu-item]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:6px 8px;font-size:0.75em;line-height:1.7;cursor:pointer;-webkit-transition:background 0.25s ease-out, color 0.25s ease-out;transition:background 0.25s ease-out, color 0.25s ease-out;outline-style:none}[part~=menu-item]:hover{background:var(--igc-context-menu-background-active, var(--igc-border-color, #F3F5F7));color:var(--igc-context-menu-color-active, #000)}[part~=menu-item]:focus{background:var(--igc-context-menu-background-active, var(--igc-border-color, #F3F5F7));color:var(--igc-context-menu-color-active, #000)}[part~=disabled]{pointer-events:none;color:var(--igc-disabled-color, rgba(0, 0, 0, 0.38))}";
let IgcContextMenuComponent = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.menuClosed = createEvent(this, "menuClosed", 7);
this.activeIndex = 0;
this.handleDocumentResize = () => {
this.menuClosed.emit();
};
this.handleDocumentMouseDown = (ev) => {
if (ev.composedPath().every(el => el !== this.elem)) {
// mousedown outside of context menu
this.menuClosed.emit();
}
};
}
emitMenuClosed() {
this.menuClosed.emit();
}
connectedCallback() {
document.defaultView.addEventListener('resize', this.handleDocumentResize, false);
document.defaultView.addEventListener('mousedown', this.handleDocumentMouseDown, false);
}
disconnectedCallback() {
document.defaultView.removeEventListener('resize', this.handleDocumentResize, false);
document.defaultView.removeEventListener('mousedown', this.handleDocumentMouseDown, false);
}
componentDidLoad() {
const isTabsMoreButton = this.target.querySelector('slot[name="tabsMoreButton"]') !== null;
const menuItemsDivRect = this.menuItemsDiv.getBoundingClientRect();
const hostRect = this.elem.getBoundingClientRect();
const rootNodeShadowHost = this.target.getRootNode();
const rootHostRect = rootNodeShadowHost.host.getBoundingClientRect();
const isTabs = rootNodeShadowHost.host.tagName.toLowerCase() === 'igc-tab-header-component';
const tabsContentHost = isTabs ? rootNodeShadowHost.host.parentElement.shadowRoot : rootNodeShadowHost;
const tabRect = tabsContentHost.host.getBoundingClientRect();
const tabsContentRect = tabsContentHost.querySelector('div[part~="tabs-content"]').getBoundingClientRect();
const isRTL = rootHostRect.right - menuItemsDivRect.right <= 0;
const shouldChangeOpenOrientation = tabRect.bottom + menuItemsDivRect.bottom >= window.innerHeight
|| tabRect.height + menuItemsDivRect.bottom >= window.innerHeight
|| (isTabsMoreButton && tabsContentRect.height - menuItemsDivRect.height > 0);
const menuToBottom = shouldChangeOpenOrientation
? tabsContentRect.top + (tabsContentRect.height - menuItemsDivRect.bottom)
: rootHostRect.top - menuItemsDivRect.top + rootHostRect.height;
const menuToTop = tabsContentRect.top - menuItemsDivRect.top;
const menuToStart = isRTL ? rootHostRect.right - menuItemsDivRect.width : rootHostRect.left;
const menuToEnd = isRTL ? rootHostRect.left : rootHostRect.right - menuItemsDivRect.width;
const menuToCenter = rootHostRect.left + (rootHostRect.width - menuItemsDivRect.width) / 2;
let menuLeft = !isRTL ? menuToStart : menuToEnd;
let menuTop = this.orientation === IgcContextMenuOrientation.bottom
? isTabs
? menuToBottom
: menuToTop
: menuToBottom;
const menuBottom = menuTop + menuItemsDivRect.height;
menuTop = menuTop >= 0 ? menuTop : menuToBottom;
switch (this.position) {
case 'start':
menuLeft = menuToStart;
break;
case 'center':
menuLeft = rootHostRect.width > menuItemsDivRect.width && menuToCenter;
break;
case 'stretch':
this.menuItemsDiv.style.width = rootHostRect.width > menuItemsDivRect.width && `${rootHostRect.width}px`;
break;
case 'end':
default:
menuLeft = menuToEnd;
}
if (this.orientation === IgcContextMenuOrientation.bottom && menuBottom > hostRect.height) {
menuTop = menuToTop;
}
menuLeft = menuLeft - menuItemsDivRect.left;
this.menuItemsDiv.style.left = `${menuLeft}px`;
this.menuItemsDiv.style.top = `${menuTop}px`;
this.menuItemsDiv.style.visibility = 'visible';
this.focusItemAndSetActiveIndex();
}
focusItemAndSetActiveIndex() {
var _a;
const firstMenuItem = this.menuItemsDiv.querySelector('div[part="menu-item"]');
(_a = firstMenuItem) === null || _a === void 0 ? void 0 : _a.focus();
}
handleKeyboardEvents(item, ev) {
const menuItemChildren = this.menuItemsDiv.querySelectorAll('div[part="menu-item"]');
if (ev.key === 'ArrowDown') {
if (this.activeIndex < menuItemChildren.length - 1) {
this.activeIndex++;
menuItemChildren[this.activeIndex].focus();
}
}
else if (ev.key === 'ArrowUp') {
if (this.activeIndex > 0) {
this.activeIndex--;
menuItemChildren[this.activeIndex].focus();
}
}
else if (ev.key === 'Enter' || ev.key === ' ') {
item.clickHandler();
this.emitMenuClosed();
}
else if (ev.key === 'Escape') {
this.emitMenuClosed();
}
}
handleMenuItemClick(item) {
item.clickHandler();
this.emitMenuClosed();
}
renderItemIcon(item) {
return (h(Fragment, null, item.iconName === 'close' && this.renderCloseButton(), item.iconName === 'unpin' && this.renderUnpinButton(), item.iconName !== null && item.iconName !== 'close' && item.iconName !== 'unpin' &&
h("igc-icon-component", { name: item.iconName })));
}
renderCloseButton() {
return (h("slot", { name: "contextMenuCloseButton" }, h("igc-icon-component", { part: "context-menu-close-button", name: "close" })));
}
renderUnpinButton() {
return (h("slot", { name: "contextMenuUnpinButton" }, h("igc-icon-component", { part: "context-menu-unpin-button", name: "unpin" })));
}
render() {
return (h(Host, { part: "context-menu", exportparts: "context-menu,\r\n menu-item: context-menu-item,\r\n menu-content: context-menu-content,\r\n context-menu-close-button,\r\n context-menu-unpin-button" }, h("div", { role: "menu", part: "menu-content", ref: el => this.menuItemsDiv = el, onMouseDown: ev => {
ev.preventDefault();
} }, this.items.map(item => {
const parts = Utils.partNameMap({
'menu-item': true,
disabled: item.disabled
});
return (h("div", { role: "menuitem", part: parts, tabindex: "-1", onKeyDown: this.handleKeyboardEvents.bind(this, item), onClick: this.handleMenuItemClick.bind(this, item) }, h("span", { style: {
flexGrow: '1',
userSelect: 'none',
} }, item.displayText), this.renderItemIcon(item)));
}))));
}
get elem() { return getElement(this); }
};
IgcContextMenuComponent.style = contextMenuComponentCss;
function _typeof(t){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},_typeof(t)}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function _createClass(t,e,r){return e&&_defineProperties(t.prototype,e),r&&_defineProperties(t,r),t}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&_setPrototypeOf(t,e)}function _createSuper(t){var e=_isNativeReflectConstruct();return function(){var r,o=_getPrototypeOf(t);if(e){var n=_getPrototypeOf(this).constructor;r=Reflect.construct(o,arguments,n)}else r=o.apply(this,arguments);return _possibleConstructorReturn(this,r)}}function _possibleConstructorReturn(t,e){return!e||"object"!==_typeof(e)&&"function"!=typeof e?_assertThisInitialized(t):e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function _wrapNativeSuper(t){var e="function"==typeof Map?new Map:void 0;return _wrapNativeSuper=function(t){if(null===t||!_isNativeFunction(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,r)}function r(){return _construct(t,arguments,_getPrototypeOf(this).constructor)}return r.prototype=Object.create(t.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),_setPrototypeOf(r,t)},_wrapNativeSuper(t)}function _construct(t,e,r){return _construct=_isNativeReflectConstruct()?Reflect.construct:function(t,e,r){var o=[null];o.push.apply(o,e);var n=new(Function.bind.apply(t,o));return r&&_setPrototypeOf(n,r.prototype),n},_construct.apply(null,arguments)}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}function _isNativeFunction(t){return-1!==Function.toString.call(t).indexOf("[native code]")}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}
/**
* @hidden
*/
class TwoWayMap {
constructor() {
this.map = new Map();
this.reversedMap = new Map();
}
set(key, value) {
this.map.set(key, value);
this.reversedMap.set(value, key);
}
get(key) {
return this.map.get(key);
}
getByValue(value) {
return this.reversedMap.get(value);
}
delete(key) {
const value = this.map.get(key);
this.map.delete(key);
this.reversedMap.delete(value);
}
has(key) {
return this.map.has(key);
}
hasValue(value) {
return this.reversedMap.has(value);
}
}
/**
* @hidden
*/
class IgcDockManagerService {
constructor(dockManager) {
this.dockManager = dockManager;
this.unpinnedLocationMap = new Map();
}
getContent(contentId) {
return this.clientContentPanesMap.get(contentId);
}
generateUuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
const r = Math.random() * 16 | 0;
const v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
populatePaneParents(splitPane, isRoot, isInDocHost) {
if (!splitPane) {
return;
}
if (!splitPane.id) {
splitPane.id = this.generateUuid();
}
for (const pane of splitPane.panes) {
this.paneParentMap.set(pane, splitPane);
if (!pane.id) {
pane.id = this.generateUuid();
}
if (pane.type === IgcDockManagerPaneType.contentPane && !pane.hidden) {
this.clientContentPanesMap.set(pane.contentId, pane);
if (isInDocHost) {
this.visibleDocuments.push(pane);
}
else {
this.visibleContentPanes.push(pane);
}
}
else if (pane.type === IgcDockManagerPaneType.splitPane) {
this.populatePaneParents(pane, isRoot, isInDocHost);
}
else if (pane.type === IgcDockManagerPaneType.tabGroupPane) {
for (const cp of pane.panes) {
if (!cp.id) {
cp.id = this.generateUuid();
}
this.paneParentMap.set(cp, pane);
if (!cp.hidden) {
this.clientContentPanesMap.set(cp.contentId, cp);
if (isInDocHost) {
this.visibleDocuments.push(cp);
}
else {
this.visibleContentPanes.push(cp);
}
}
}
}
else if (pane.type === IgcDockManagerPaneType.documentHost) {
if (isRoot) {
this.documentHosts.push(pane);
}
this.paneParentMap.set(pane.rootPane, pane);
this.populatePaneParents(pane.rootPane, isRoot, true);
}
}
}
populatePinLocations(splitPane) {
if (!splitPane) {
return;
}
for (const pane of splitPane.panes) {
if (pane.type === IgcDockManagerPaneType.splitPane) {
this.populatePinLocations(pane);
}
else if (pane.type === IgcDockManagerPaneType.tabGroupPane) {
for (const cp of pane.panes) {
this.addContentPanePinLocation(cp);
this.paneParentMap.set(cp, pane);
}
}
else if (pane.type === IgcDockManagerPaneType.contentPane) {
this.addContentPanePinLocation(pane);
}
}
}
resolvePaneUnpinLocation(pane) {
let unpinnedLocation;
if (pane.unpinnedLocation) {
unpinnedLocation = pane.unpinnedLocation;
}
else {
const documentHost = this.findClosestDocumentHost(pane);
// TODO Implement an auto-detect algorithm for unpinned location when there is no document host
unpinnedLocation = documentHost ? this.findPaneUnpinLocation(pane, documentHost) : IgcUnpinnedLocation.left;
}
return unpinnedLocation;
}
addContentPanePinLocation(pane) {
if (pane.isPinned === false) {
const unpinnedLocation = this.resolvePaneUnpinLocation(pane);
this.unpinnedLocationMap.set(pane, unpinnedLocation);
}
}
findClosestDocumentHost(pane) {
const panePath = this.getPanePath(pane);
let maxCommonParents = -1;
let closestDocHost;
for (const docHost of this.documentHosts) {
const docHostPath = this.getPanePath(docHost);
let i;
for (i = 0; i < panePath.length; i++) {
const paneParent = panePath[i];
const docHostParent = docHostPath[i];
if (paneParent !== docHostParent) {
break;
}
}
if (i > maxCommonParents) {
maxCommonParents = i;
closestDocHost = docHost;
}
}
return closestDocHost;
}
findPaneUnpinLocation(pane, docHost) {
const panePath = this.getPanePath(pane);
const docHostPath = this.getPanePath(docHost);
let commonParentIndex = -1;
for (let i = 0; i < panePath.length; i++) {
const paneParent = panePath[i];
const docHostParent = docHostPath[i];
if (paneParent === docHostParent) {
commonParentIndex = i;
}
else {
break;
}
}
if (commonParentIndex >= 0) {
const commonParent = panePath[commonParentIndex];
const paneIndex = commonParent.panes.indexOf(panePath[commonParentIndex + 1]);
const docHostIndex = commonParent.panes.indexOf(docHostPath[commonParentIndex + 1]);
return commonParent.orientation === IgcSplitPaneOrientation.horizontal ?
paneIndex < docHostIndex ? IgcUnpinnedLocation.left : IgcUnpinnedLocation.right :
paneIndex < docHostIndex ? IgcUnpinnedLocation.top : IgcUnpinnedLocation.bottom;
}
return IgcUnpinnedLocation.left;
}
removePane(pane) {
if (pane === this.dockManager.maximizedPane) {
this.dockManager.maximizedPane = null;
}
const parent = this.paneParentMap.get(pane);
if (!parent) {
if (this.dockManager.layout.floatingPanes) {
const floatingIndex = this.dockManager.layout.floatingPanes.indexOf(pane);
if (floatingIndex > -1) {
this.dockManager.layout.floatingPanes.splice(floatingIndex, 1);
}
}
return;
}
if (parent.type === IgcDockManagerPaneType.splitPane ||
parent.type === IgcDockManagerPaneType.tabGroupPane) {
const index = parent.panes.indexOf(pane);
parent.panes.splice(index, 1);
if (parent.panes.length === 0) {
if (parent.allowEmpty) {
const rootParent = this.getRootParent(pane);
if (this.isFloatingPane(rootParent)) {
this.removeFloatingPaneIfEmpty(rootParent);
}
}
else {
this.removePane(parent);
}
}
else if (parent.type === IgcDockManagerPaneType.splitPane) {
const rootParent = this.getRootParent(parent);
if (this.isFloatingPane(rootParent)) {
this.removeFloatingPaneIfEmpty(parent);
}
}
}
else if (parent.type === IgcDockManagerPaneType.documentHost) {
parent.rootPane = null;
this.removePane(parent);
}
}
removeFloatingPaneIfEmpty(pane) {
const childPanes = this.getChildContentPanes(pane);
if (childPanes.length === 0) {
this.removePane(pane);
}
}
isFloatingPane(pane) {
if (!this.dockManager.layout.floatingPanes) {
return false;
}
return this.dockManager.layout.floatingPanes.indexOf(pane) > -1;
}
addFloatingPane(content, location, width, height) {
const floatingPane = {
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
panes: [content]
};
floatingPane.floatingLocation = location;
floatingPane.floatingWidth = width;
floatingPane.floatingHeight = height;
if (!this.dockManager.layout.floatingPanes) {
this.dockManager.layout.floatingPanes = [];
}
this.dockManager.layout.floatingPanes.push(floatingPane);
this.dockManager.draggedPane = floatingPane;
this.initialFloatingPaneLocation = floatingPane.floatingLocation;
this.forceDragPane = floatingPane;
}
getChildContentPanes(pane) {
const panes = [];
this.getChildContentPanesRecursive(pane, panes);
return panes;
}
getChildContentPanesRecursive(pane, children) {
for (const child of pane.panes) {
if (child.type === IgcDockManagerPaneType.contentPane) {
children.push(child);
}
else if (child.type === IgcDockManagerPaneType.tabGroupPane ||
child.type === IgcDockManagerPaneType.splitPane) {
this.getChildContentPanesRecursive(child, children);
}
else if (child.type === IgcDockManagerPaneType.documentHost) {
this.getChildContentPanesRecursive(child.rootPane, children);
}
}
}
getChildDocHostRecursive(pane) {
for (const child of pane.panes) {
if (child.type === IgcDockManagerPaneType.documentHost) {
return child;
}
else if (child.type === IgcDockManagerPaneType.splitPane) {
const result = this.getChildDocHostRecursive(child);
if (result) {
return result;
}
}
}
return null;
}
getVisibleContentPanes(parent) {
return parent.panes.filter(t => this.isContentPaneVisible(t));
}
getPaneToDock(draggedPane) {
return draggedPane.type === IgcDockManagerPaneType.contentPane ? draggedPane :
draggedPane.type === IgcDockManagerPaneType.tabGroupPane || draggedPane.type === IgcDockManagerPaneType.splitPane ?
draggedPane.panes.length === 1 ?
draggedPane.panes[0] :
draggedPane :
draggedPane;
}
removeDocumentHost(pane) {
const docHost = this.getChildDocHostRecursive(pane);
if (docHost) {
const parent = this.getParent(docHost);
const index = parent.panes.indexOf(docHost);
parent.panes[index] = docHost.rootPane.panes.length === 1 ?
docHost.rootPane.panes[0] :
docHost.rootPane;
}
}
dockToCenter(targetPane, draggedPane) {
let targetContainer;
if (targetPane.type === IgcDockManagerPaneType.tabGroupPane) {
targetContainer = targetPane;
}
else if (targetPane.type === IgcDockManagerPaneType.contentPane) {
targetContainer = {
type: IgcDockManagerPaneType.tabGroupPane,
size: targetPane.size,
panes: [targetPane]
};
const targetParent = this.paneParentMap.get(targetPane);
const index = targetParent.panes.indexOf(targetPane);
targetParent.panes[index] = targetContainer;
}
else if (targetPane.type === IgcDockManagerPaneType.splitPane) {
targetContainer = targetPane;
}
else if (targetPane.type === IgcDockManagerPaneType.documentHost) {
targetContainer = targetPane.rootPane;
}
if (targetContainer.type === IgcDockManagerPaneType.tabGroupPane) {
const panesToDock = (draggedPane.type === IgcDockManagerPaneType.contentPane) ?
[draggedPane] :
this.getChildContentPanes(draggedPane);
targetContainer.panes.push(...panesToDock);
}
else if (targetContainer.type === IgcDockManagerPaneType.splitPane) {
let paneToDock = draggedPane;
if ((draggedPane === null || draggedPane === void 0 ? void 0 : draggedPane.type) === IgcDockManagerPaneType.splitPane && this.dockManager.documentOnlyDrag) {
this.removeDocumentHost(draggedPane);
const childPanes = this.getChildContentPanes(draggedPane);
paneToDock = childPanes.length === 1 ? childPanes[0] : paneToDock;
}
targetContainer.panes.push(paneToDock);
}
}
dockToEdge(targetPane, position) {
const targetParent = this.getParent(targetPane);
const paneIndex = targetParent.panes.indexOf(targetPane);
const isIndicatorVertical = Utils.isDockingIndicatorVertical(position);
const isSplitPaneVertical = Utils.isSplitPaneVertical(targetParent);
const isRTL = this.dockingIndicator && this.dockingIndicator.direction === 'rtl';
let draggedPane = this.dockManager.draggedPane;
if ((draggedPane === null || draggedPane === void 0 ? void 0 : draggedPane.type) === IgcDockManagerPaneType.splitPane &&
this.dockManager.documentOnlyDrag &&
!this.dockManager.dropTargetPaneInfo.floatingPaneWithoutDocHost) {
this.removeDocumentHost(draggedPane);
}
else if ((draggedPane === null || draggedPane === void 0 ? void 0 : draggedPane.type) === IgcDockManagerPaneType.contentPane &&
this.dockManager.documentOnlyDrag &&
this.dockManager.dropTargetPaneInfo.floatingPaneWithoutDocHost) {
draggedPane = {
type: IgcDockManagerPaneType.documentHost,
rootPane: {
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
panes: [draggedPane]
}
};
}
const paneToDock = draggedPane ? this.getPaneToDock(draggedPane) : this.dockManager.activePane;
if ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical)) {
const insertIndex = Utils.isDockingIndicatorBefore(position) && !isRTL ||
Utils.isDockingIndicatorBeforeRTL(position) && isRTL ?
paneIndex :
paneIndex + 1;
targetParent.panes.splice(insertIndex, 0, paneToDock);
}
else {
const newSplitPane = {
type: IgcDockManagerPaneType.splitPane,
orientation: isSplitPaneVertical ? IgcSplitPaneOrientation.horizontal : IgcSplitPaneOrientation.vertical,
panes: Utils.isDockingIndicatorBefore(position) && !isRTL ||
Utils.isDockingIndicatorBeforeRTL(position) && isRTL ?
[paneToDock, targetPane] :
[targetPane, paneToDock],
size: targetPane.size
};
targetPane.size = undefined;
paneToDock.size = undefined;
targetParent.panes[paneIndex] = newSplitPane;
}
}
updateLayout() {
this.dockManager.layout = Object.assign({}, this.dockManager.layout);
}
processLayout() {
this.paneParentMap = new Map();
this.unpinnedLocationMap = new Map();
this.clientContentPanesMap = new Map();
this.documentHosts = [];
this.visibleContentPanes = [];
this.visibleDocuments = [];
const layout = this.dockManager.layout;
if (layout) {
this.populatePaneParents(layout.rootPane, true, false);
if (layout.floatingPanes) {
const indicesToDelete = new Map(this.dockManager.floatingPaneZIndicesMap);
for (let i = 0; i < layout.floatingPanes.length; i++) {
const pane = layout.floatingPanes[i];
this.populatePaneParents(pane, false, false);
if (this.dockManager.floatingPaneZIndicesMap.has(pane)) {
indicesToDelete.delete(pane);
}
else {
this.dockManager.floatingPaneZIndicesMap.set(pane, i);
}
}
for (const key of indicesToDelete.keys()) {
this.dockManager.floatingPaneZIndicesMap.delete(key);
}
}
this.populatePinLocations(layout.rootPane);
if (this.dockManager.flyoutPane && !this.unpinnedLocationMap.has(this.dockManager.flyoutPane)) {
this.dockManager.flyoutPane = null;
}
}
}
getParent(pane) {
return this.paneParentMap.get(pane);
}
getRootParent(pane) {
return this.getPanePath(pane)[0];
}
getPanePath(pane) {
const path = [];
let currentPane = pane;
while (currentPane) {
path.splice(0, 0, currentPane);
currentPane = this.paneParentMap.get(currentPane);
}
return path;
}
getDocHostParent(pane) {
let parent = pane;
do {
parent = this.paneParentMap.get(parent);
} while (parent && parent.type !== IgcDockManagerPaneType.documentHost);
return parent;
}
resizeFlyoutPane(delta) {
const pane = this.dockManager.flyoutPane;
const location = this.unpinnedLocationMap.get(pane);
const paneSize = pane.unpinnedSize ? pane.unpinnedSize : IGC_DEFAULT_UNPIN_PANE_SIZE;
var isRtl;
const direction = $('div').attr('dir');
if (direction === 'rtl') {
isRtl = true;
console.log('The page is in RTL mode.');
} else {
isRtl = false;
console.log('The page is in LTR mode.');
}
// Adjust resizing logic for left and right if RTL is enabled
let newSize;
if (location === IgcUnpinnedLocation.left || location === IgcUnpinnedLocation.top) {
newSize = isRtl && location === IgcUnpinnedLocation.left
? paneSize - delta // Reverse logic for RTL when resizing from the left
: paneSize + delta;
} else {
newSize = isRtl && location === IgcUnpinnedLocation.right
? paneSize + delta // Reverse logic for RTL when resizing from the right
: paneSize - delta;
}
pane.unpinnedSize = newSize;
this.updateLayout();
}
resizePane(pane, deltaPercentage) {
const parentPane = this.getParent(pane);
const childPanes = this.getSplitPaneVisibleChildren(parentPane);
const paneIndex = childPanes.indexOf(pane);
const paneSizes = childPanes.map(p => p.size || p.size === 0 ? p.size : IGC_DEFAULT_PANE_SIZE);
const sizeSum = paneSizes.reduce((p, c) => c + p, 0);
const calcDelta = deltaPercentage * sizeSum;
childPanes[paneIndex - 1].size = paneSizes[paneIndex - 1] + calcDelta;
childPanes[paneIndex].size = paneSizes[paneIndex] - calcDelta;
this.updateLayout();
}
togglePin(pane, pinBehavior = IgcPinBehavior.allPanes) {
const newValue = !this.getActualIsPinned(pane);
const parent = this.paneParentMap.get(pane);
const panes = parent.type === IgcDockManagerPaneType.tabGroupPane && pinBehavior === IgcPinBehavior.allPanes ?
parent.panes.filter(p => p.allowPinning !== false) :
[pane];
const location = this.resolvePaneUnpinLocation(pane);
const args = {
sourcePane: pane,
panes,
newValue,
location
};
const event = this.dockManager.panePinnedToggle.emit(args);
if (!event.defaultPrevented) {
for (const cp of args.panes) {
cp.isPinned = newValue;
}
if (this.dockManager.maximizedPane) {
this.dockManager.maximizedPane = null;
newValue ?
this.dockManager.flyoutPane = null :
this.flyoutPane(pane);
}
else if (newValue) {
this.dockManager.flyoutPane = null;
}
this.updateLayout();
}
}
closePane(pane) {
let paneToRemove = pane;
if (pane.type === IgcDockManagerPaneType.contentPane && pane !== this.dockManager.flyoutPane) {
const parent = this.paneParentMap.get(pane);
if (parent.type === IgcDockManagerPaneType.tabGroupPane) {
paneToRemove = parent;
}
}
const paneRemoved = paneToRemove.type === IgcDockManagerPaneType.tabGroupPane ?
this.removeAllowedPanes(pane, paneToRemove) :
this.emitPaneClose(pane, [paneToRemove]);
if ((paneRemoved || pane.hidden) && pane === this.dockManager.flyoutPane) {
this.dockManager.flyoutPane = null;
}
this.updateLayout();
}
closeFloatingPane(pane) {
this.removeAllowedPanes(pane, pane);
this.updateLayout();
}
emitPaneClose(sourcePane, panes) {
let paneRemoved = false;
const args = { sourcePane, panes };
const event = this.dockManager.paneClose.emit(args);
if (!event.defaultPrevented) {
for (const pane of args.panes) {
this.removePane(pane);
paneRemoved = true;
}
}
return paneRemoved;
}
removeAllowedPanes(sourcePane, pane) {
let paneRemoved = false;
const panes = this.getChildContentPanes(pane)
.filter(p => this.getActualAllowClose(p))
.filter(p => pane.type === IgcDockManagerPaneType.tabGroupPane && sourcePane.type === IgcDockManagerPaneType.contentPane
? p.isPinned !== false
: true);
paneRemoved = this.emitPaneClose(sourcePane, panes);
return paneRemoved;
}
flyoutPane(pane) {
this.dockManager.flyoutPane = this.dockManager.flyoutPane === pane ? null : pane;
}
maximizePane(pane) {
const parent = this.getParent(pane);
const targetPane = parent && parent.type === IgcDockManagerPaneType.tabGroupPane && pane !== this.dockManager.flyoutPane ? parent : pane;
this.dockManager.maximizedPane = this.dockManager.maximizedPane === targetPane ? null : targetPane;
}
moveFloatingPane(pane, location) {
pane.floatingLocation = location;
this.updateLayout();
}
resizeFloatingPaneStart(pane, resizerLocation) {
var _a, _b, _c;
const resizeArgs = {
sourcePane: pane,
resizerLocation
};
const resizeStartEvent = this.dockManager.floatingPaneResizeStart.emit(resizeArgs);
if (resizeStartEvent.defaultPrevented) {
return false;
}
this.initialFloatingPaneLocation = (_a = pane.floatingLocation) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
this.initialFloatingPaneWidth = (_b = pane.floatingWidth) !== null && _b !== void 0 ? _b : IGC_DEFAULT_PANE_SIZE;
this.initialFloatingPaneHeight = (_c = pane.floatingHeight) !== null && _c !== void 0 ? _c : IGC_DEFAULT_PANE_SIZE;
return true;
}
resizeFloatingPane(pane, args) {
const currX = pane.floatingLocation ? pane.floatingLocation.x : 0;
const currY = pane.floatingLocation ? pane.floatingLocation.y : 0;
const currW = pane.floatingWidth ? pane.floatingWidth : IGC_DEFAULT_PANE_SIZE;
const currH = pane.floatingHeight ? pane.floatingHeight : IGC_DEFAULT_PANE_SIZE;
const minW = IGC_DEFAULT_PANE_SIZE;
const minH = IGC_DEFAULT_PANE_SIZE;
const initialWidth = this.initialFloatingPaneWidth;
const initialHeight = this.initialFloatingPaneHeight;
const initialLocation = this.initialFloatingPaneLocation;
let totalOffsetY = args.dragMoveArgs.totalOffsetY;
let totalOffsetX = args.dragMoveArgs.totalOffsetX;
let newX = currX;
let newY = currY;
let newWidth = currW;
let newHeight = currH;
const maxHeight = document.documentElement.clientHeight;
const maxWidth = document.documentElement.clientWidth;
switch (args.resizerLocation) {
case (IgcResizerLocation.top):
case (IgcResizerLocation.topLeft):
case (IgcResizerLocation.topRight):
newHeight = initialHeight - totalOffsetY;
if (newHeight < minH) {
totalOffsetY = initialHeight - minH;
newHeight = minH;
}
newY = initialLocation.y + totalOffsetY;
if (newY < 0) {
newHeight += newY;
newY = 0;
}
else if (newY >= maxHeight - 1) {
newY = maxHeight - 1;
}
break;
case (IgcResizerLocation.bottom):
case (IgcResizerLocation.bottomLeft):
case (IgcResizerLocation.bottomRight):
newHeight = initialHeight + totalOffsetY;
if (newHeight < minH) {
newHeight = minH;
}
if (newY + newHeight > maxHeight) {
newHeight = maxHeight - newY;
}
break;
}
switch (args.resizerLocation) {
case (IgcResizerLocation.left):
case (IgcResizerLocation.topLeft):
case (IgcResizerLocation.bottomLeft):
newWidth = initialWidth - totalOffsetX;
if (newWidth < minW) {
totalOffsetX = initialWidth - minW;
newWidth = minW;
}
newX = initialLocation.x + totalOffsetX;
if (newX < 0) {
newWidth += newX;
newX = 0;
}
else if (newX >= maxWidth) {
newX = maxWidth;
}
break;
case (IgcResizerLocation.right):
case (IgcResizerLocation.topRight):
case (IgcResizerLocation.bottomRight):
newWidth = initialWidth + totalOffsetX;
if (newWidth < minW) {
newWidth = minW;
}
if (newX + newWidth > maxWidth) {
newWidth = maxWidth - newX;
}
break;
}
if (currX === newX && currY === newY && currW === newWidth && currH === newHeight) {
return;
}
const resizingArgs = {
sourcePane: pane,
oldWidth: currW,
newWidth,
oldHeight: currH,
newHeight,
oldLocation: { x: currX, y: currY },
newLocation: { x: newX, y: newY },
resizerLocation: args.resizerLocation
};
const resizingEvent = this.dockManager.floatingPaneResizeMove.emit(resizingArgs);
if (resizingEvent.defaultPrevented) {
args.dragMoveArgs.cancel = true;
return;
}
else {
pane.floatingLocation = resizingArgs.newLocation;
pane.floatingWidth = resizingArgs.newWidth;
pane.floatingHeight = resizingArgs.newHeight;
this.updateLayout();
}
}
resizeFloatingPaneEnd(pane, resizerLocation) {
this.dockManager.floatingPaneResizeEnd.emit({
sourcePane: pane,
resizerLocation
});
this.dockManager.layoutChange.emit();
}
floatPane(pane, x, y, width, height) {
let panesToRemove = [pane];
let paneToAdd = pane;
const parent = this.paneParentMap.get(pane);
if (pane !== this.dockManager.flyoutPane && parent.type === IgcDockManagerPaneType.tabGroupPane) {
if (parent.allowEmpty) {
const panes = [...parent.panes];
panesToRemove = panes;
paneToAdd = parent.panes.length === 1 ?
pane :
{
type: IgcDockManagerPaneType.tabGroupPane,
panes,
selectedIndex: parent.selectedIndex
};
}
else {
panesToRemove = [parent];
paneToAdd = parent;
}
}
panesToRemove.forEach(p => this.removePane(p));
this.addFloatingPane(paneToAdd, { x, y }, width, height);
if (pane === this.dockManager.flyoutPane) {
pane.isPinned = true;
this.dockManager.flyoutPane = null;
}
this.updateLayout();
}
floatTab(pane, x, y, width, height) {
this.removePane(pane);
const isInDocHost = !!this.getDocHostParent(pane);
let content;
if (isInDocHost && pane.documentOnly) {
const docHost = {
type: IgcDockManagerPaneType.documentHost,
rootPane: {
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
panes: [pane]
}
};
content = docHost;
}
else {
content = pane;
}
this.addFloatingPane(content, { x, y }, width, height);
this.updateLayout();
}
hasFloatingPaneHeader(pane) {
const panes = this.getSplitPaneVisibleChildren(pane);
if (panes && panes.length) {
if (panes.length > 1) {
return true;
}
const childPane = panes[0];
if (childPane.type === IgcDockManagerPaneType.splitPane) {
return this.hasFloatingPaneHeader(childPane);
}
else if (childPane.type === IgcDockManagerPaneType.documentHost) {
return true;
}
}
return false;
}
rootDockPane(position) {
const layout = this.dockManager.layout;
const rootPane = layout.rootPane;
const paneToDock = this.dockManager.draggedPane ? this.getPaneToDock(this.dockManager.draggedPane) : this.dockManager.activePane;
this.removePane(paneToDock);
const isIndicatorVertical = position === IgcDockingIndicatorPosition.top || position === IgcDockingIndicatorPosition.bottom;
const isSplitPaneVertical = Utils.isSplitPaneVertical(rootPane);
const isRTL = this.dockingIndicator && this.dockingIndicator.direction === 'rtl';
if ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical)) {
const insertIndex = position === IgcDockingIndicatorPosition.left && !isRTL ||
position === IgcDockingIndicatorPosition.right && isRTL ||
position === IgcDockingIndicatorPosition.top ?
0 :
rootPane.panes.length;
rootPane.panes.splice(insertIndex, 0, paneToDock);
}
else {
const newRootPane = {
type: IgcDockManagerPaneType.splitPane,
orientation: isSplitPaneVertical ? IgcSplitPaneOrientation.horizontal : IgcSplitPaneOrientation.vertical,
panes: position === IgcDockingIndicatorPosition.left && !isRTL ||
position === IgcDockingIndicatorPosition.right && isRTL ||
position === IgcDockingIndicatorPosition.top ?
[paneToDock, rootPane] :
[rootPane, paneToDock],
};
rootPane.size = undefined;
paneToDock.size = undefined;
layout.rootPane = newRootPane;
}
this.updateLayout();
}
dockPane(position) {
var _a;
const draggedFloatingPane = (_a = this.dockManager.draggedPane) !== null && _a !== void 0 ? _a : this.dockManager.activePane;
const dropTargetPaneInfo = this.dockManager.dropTargetPaneInfo;
this.removePane(draggedFloatingPane);
const targetPane = this.dockManager.draggedPane ? dropTargetPaneInfo.pane : this.getParent(this.dockManager.activePane);
switch (position) {
case IgcDockingIndicatorPosition.center:
this.dockToCenter(targetPane, draggedFloatingPane);
break;
case IgcDockingIndicatorPosition.left:
case IgcDockingIndicatorPosition.top:
case IgcDockingIndicatorPosition.right:
case IgcDockingIndicatorPosition.bottom:
this.dockToEdge(targetPane, position);
break;
case IgcDockingIndicatorPosition.outerLeft:
case IgcDockingIndicatorPosition.outerTop:
case IgcDockingIndicatorPosition.outerRight:
case IgcDockingIndicatorPosition.outerBottom:
const docHost = this.dockManager.dropTargetPaneInfo.docHost;
this.dockToEdge(docHost, position);
break;
}
this.updateLayout();
}
getActualIsPinned(pane) {
return pane.isPinned !== false;
}
getActualAllowClose(pane) {
return pane.allowClose !== false;
}
isContentPaneVisible(pane) {
return pane.isPinned !== false && pane.hidden !== true;
}
getSplitPaneVisibleChildren(pane) {
return pane.panes.filter(p => {
if (p.type === IgcDockManagerPaneType.contentPane) {
return this.isContentPaneVisible(p);
}
else if (p.type === IgcDockManagerPaneType.splitPane) {
return p.allowEmpty || this.getSplitPaneVisibleChildren(p).length;
}
else if (p.type === IgcDockManagerPaneType.tabGroupPane) {
return p.allowEmpty || p.panes.some(cp => this.isContentPaneVisible(cp));
}
else if (p.type === IgcDockManagerPaneType.documentHost) {
return p.rootPane.allowEmpty || this.getSplitPaneVisibleChildren(p.rootPane).length;
}
});
}
closeTabPane(pane) {
this.emitPaneClose(pane, [pane]);
this.updateLayout();
}
bringFloatingPaneOnTop(pane) {
const floatingPanes = this.dockManager.layout.floatingPanes;
const floatingPaneZIndicesMap = this.dockManager.floatingPaneZIndicesMap;
const oldZIndex = floatingPaneZIndicesMap.get(pane);
for (const p of floatingPanes) {
const zIndex = floatingPaneZIndicesMap.get(p);
if (zIndex < oldZIndex) {
continue;
}
else if (zIndex > oldZIndex) {
floatingPaneZIndicesMap.set(p, zIndex - 1);
}
else {
floatingPaneZIndicesMap.set(p, floatingPanes.length - 1);
}
}
this.dockManager.floatingPaneZIndicesMap = new Map(floatingPaneZIndicesMap);
}
createContextMenuItems(pane) {
const items = [];
if (this.getActualAllowClose(pane)) {
items.push({ displayText: this.dockManager.resourceStrings.close, iconName: 'close', clickHandler: () => this.closeTabPane(pane) });
}
if (pane.allowPinning !== false) {
items.push({ displayText: this.dockManager.resourceStrings.unpin, iconName: 'unpin', clickHandler: () => this.togglePin(pane, IgcPinBehavior.selectedPane) });
}
return items;
}
dragPaneStart(pane, rect, client