dockview-core
Advanced tools
Comparing version 0.0.0-experimental-c2d65db-20231228 to 0.0.0-experimental-d2baa13-20240225
@@ -1,2 +0,2 @@ | ||
import { DockviewDropEvent, IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent'; | ||
import { IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent'; | ||
import { AddGroupOptions, AddPanelOptions, MovementOptions } from '../dockview/options'; | ||
@@ -17,2 +17,4 @@ import { Parameters } from '../panel/types'; | ||
import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer'; | ||
import { Box } from '../types'; | ||
import { DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent } from '../dockview/dockviewGroupPanelModel'; | ||
export interface CommonApi<T = any> { | ||
@@ -367,4 +369,15 @@ readonly height: number; | ||
*/ | ||
get onDidDrop(): Event<DockviewDropEvent>; | ||
get onDidDrop(): Event<DockviewDidDropEvent>; | ||
/** | ||
* Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and | ||
* prevent the event from occuring using the standard `preventDefault()` syntax. | ||
* | ||
* Preventing certain events may causes unexpected behaviours, use carefully. | ||
*/ | ||
get onWillDrop(): Event<DockviewWillDropEvent>; | ||
/** | ||
* | ||
*/ | ||
get onWillShowOverlay(): Event<WillShowOverlayLocationEvent>; | ||
/** | ||
* Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality. | ||
@@ -457,3 +470,21 @@ */ | ||
moveToPrevious(options?: MovementOptions): void; | ||
maximizeGroup(panel: IDockviewPanel): void; | ||
hasMaximizedGroup(): boolean; | ||
exitMaximizedGroup(): void; | ||
get onDidMaximizedGroupChange(): Event<void>; | ||
/** | ||
* Add a popout group in a new Window | ||
*/ | ||
addPopoutGroup(item: IDockviewPanel | DockviewGroupPanel, options?: { | ||
position?: Box; | ||
popoutUrl?: string; | ||
onDidOpen?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
onWillClose?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
}): Promise<void>; | ||
} | ||
//# sourceMappingURL=component.api.d.ts.map |
@@ -742,2 +742,25 @@ "use strict"; | ||
}); | ||
Object.defineProperty(DockviewApi.prototype, "onWillDrop", { | ||
/** | ||
* Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and | ||
* prevent the event from occuring using the standard `preventDefault()` syntax. | ||
* | ||
* Preventing certain events may causes unexpected behaviours, use carefully. | ||
*/ | ||
get: function () { | ||
return this.component.onWillDrop; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(DockviewApi.prototype, "onWillShowOverlay", { | ||
/** | ||
* | ||
*/ | ||
get: function () { | ||
return this.component.onWillShowOverlay; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(DockviewApi.prototype, "onWillDragGroup", { | ||
@@ -894,5 +917,26 @@ /** | ||
}; | ||
DockviewApi.prototype.maximizeGroup = function (panel) { | ||
this.component.maximizeGroup(panel.group); | ||
}; | ||
DockviewApi.prototype.hasMaximizedGroup = function () { | ||
return this.component.hasMaximizedGroup(); | ||
}; | ||
DockviewApi.prototype.exitMaximizedGroup = function () { | ||
this.component.exitMaximizedGroup(); | ||
}; | ||
Object.defineProperty(DockviewApi.prototype, "onDidMaximizedGroupChange", { | ||
get: function () { | ||
return this.component.onDidMaximizedGroupChange; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
/** | ||
* Add a popout group in a new Window | ||
*/ | ||
DockviewApi.prototype.addPopoutGroup = function (item, options) { | ||
return this.component.addPopoutGroup(item, options); | ||
}; | ||
return DockviewApi; | ||
}()); | ||
exports.DockviewApi = DockviewApi; | ||
//# sourceMappingURL=component.api.js.map |
import { Position } from '../dnd/droptarget'; | ||
import { DockviewComponent } from '../dockview/dockviewComponent'; | ||
import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel'; | ||
import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel'; | ||
import { Emitter, Event } from '../events'; | ||
import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi'; | ||
export interface DockviewGroupPanelApi extends GridviewPanelApi { | ||
readonly onDidFloatingStateChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
readonly isFloating: boolean; | ||
readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
readonly location: DockviewGroupLocation; | ||
/** | ||
* If you require the Window object | ||
*/ | ||
getWindow(): Window; | ||
moveTo(options: { | ||
group: DockviewGroupPanel; | ||
group?: DockviewGroupPanel; | ||
position?: Position; | ||
}): void; | ||
maximize(): void; | ||
isMaximized(): boolean; | ||
exitMaximized(): void; | ||
close(): void; | ||
} | ||
export interface DockviewGroupPanelFloatingChangeEvent { | ||
readonly isFloating: boolean; | ||
readonly location: DockviewGroupLocation; | ||
} | ||
@@ -20,12 +29,16 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl { | ||
private _group; | ||
readonly _onDidFloatingStateChange: Emitter<DockviewGroupPanelFloatingChangeEvent>; | ||
readonly onDidFloatingStateChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
get isFloating(): boolean; | ||
readonly _onDidLocationChange: Emitter<DockviewGroupPanelFloatingChangeEvent>; | ||
readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
get location(): DockviewGroupLocation; | ||
constructor(id: string, accessor: DockviewComponent); | ||
close(): void; | ||
getWindow(): Window; | ||
moveTo(options: { | ||
group: DockviewGroupPanel; | ||
group?: DockviewGroupPanel; | ||
position?: Position; | ||
}): void; | ||
maximize(): void; | ||
isMaximized(): boolean; | ||
exitMaximized(): void; | ||
initialize(group: DockviewGroupPanel): void; | ||
} | ||
//# sourceMappingURL=dockviewGroupPanelApi.d.ts.map |
@@ -19,4 +19,7 @@ "use strict"; | ||
exports.DockviewGroupPanelApiImpl = void 0; | ||
var droptarget_1 = require("../dnd/droptarget"); | ||
var events_1 = require("../events"); | ||
var gridviewPanelApi_1 = require("./gridviewPanelApi"); | ||
// TODO find a better way to initialize and avoid needing null checks | ||
var NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized'; | ||
var DockviewGroupPanelApiImpl = /** @class */ (function (_super) { | ||
@@ -27,13 +30,13 @@ __extends(DockviewGroupPanelApiImpl, _super); | ||
_this.accessor = accessor; | ||
_this._onDidFloatingStateChange = new events_1.Emitter(); | ||
_this.onDidFloatingStateChange = _this._onDidFloatingStateChange.event; | ||
_this.addDisposables(_this._onDidFloatingStateChange); | ||
_this._onDidLocationChange = new events_1.Emitter(); | ||
_this.onDidLocationChange = _this._onDidLocationChange.event; | ||
_this.addDisposables(_this._onDidLocationChange); | ||
return _this; | ||
} | ||
Object.defineProperty(DockviewGroupPanelApiImpl.prototype, "isFloating", { | ||
Object.defineProperty(DockviewGroupPanelApiImpl.prototype, "location", { | ||
get: function () { | ||
if (!this._group) { | ||
throw new Error("DockviewGroupPanelApiImpl not initialized"); | ||
throw new Error(NOT_INITIALIZED_MESSAGE); | ||
} | ||
return this._group.model.isFloating; | ||
return this._group.model.location; | ||
}, | ||
@@ -43,9 +46,56 @@ enumerable: false, | ||
}); | ||
DockviewGroupPanelApiImpl.prototype.close = function () { | ||
if (!this._group) { | ||
return; | ||
} | ||
return this.accessor.removeGroup(this._group); | ||
}; | ||
DockviewGroupPanelApiImpl.prototype.getWindow = function () { | ||
return this.location.type === 'popout' | ||
? this.location.getWindow() | ||
: window; | ||
}; | ||
DockviewGroupPanelApiImpl.prototype.moveTo = function (options) { | ||
var _a; | ||
var _a, _b, _c; | ||
if (!this._group) { | ||
throw new Error("DockviewGroupPanelApiImpl not initialized"); | ||
throw new Error(NOT_INITIALIZED_MESSAGE); | ||
} | ||
this.accessor.moveGroupOrPanel(options.group, this._group.id, undefined, (_a = options.position) !== null && _a !== void 0 ? _a : 'center'); | ||
var group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({ | ||
direction: (0, droptarget_1.positionToDirection)((_b = options.position) !== null && _b !== void 0 ? _b : 'right'), | ||
skipSetActive: true, | ||
}); | ||
this.accessor.moveGroupOrPanel({ | ||
from: { groupId: this._group.id }, | ||
to: { | ||
group: group, | ||
position: options.group | ||
? (_c = options.position) !== null && _c !== void 0 ? _c : 'center' | ||
: 'center', | ||
}, | ||
}); | ||
}; | ||
DockviewGroupPanelApiImpl.prototype.maximize = function () { | ||
if (!this._group) { | ||
throw new Error(NOT_INITIALIZED_MESSAGE); | ||
} | ||
if (this.location.type !== 'grid') { | ||
// only grid groups can be maximized | ||
return; | ||
} | ||
this.accessor.maximizeGroup(this._group); | ||
}; | ||
DockviewGroupPanelApiImpl.prototype.isMaximized = function () { | ||
if (!this._group) { | ||
throw new Error(NOT_INITIALIZED_MESSAGE); | ||
} | ||
return this.accessor.isMaximizedGroup(this._group); | ||
}; | ||
DockviewGroupPanelApiImpl.prototype.exitMaximized = function () { | ||
if (!this._group) { | ||
throw new Error(NOT_INITIALIZED_MESSAGE); | ||
} | ||
if (this.isMaximized()) { | ||
this.accessor.exitMaximizedGroup(); | ||
} | ||
}; | ||
DockviewGroupPanelApiImpl.prototype.initialize = function (group) { | ||
@@ -57,2 +107,1 @@ this._group = group; | ||
exports.DockviewGroupPanelApiImpl = DockviewGroupPanelApiImpl; | ||
//# sourceMappingURL=dockviewGroupPanelApi.js.map |
@@ -7,3 +7,5 @@ import { Emitter, Event } from '../events'; | ||
import { Position } from '../dnd/droptarget'; | ||
import { DockviewPanelRenderer } from '../dockview/components/greadyRenderContainer'; | ||
import { DockviewPanelRenderer } from '../overlayRenderContainer'; | ||
import { DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi'; | ||
import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel'; | ||
export interface TitleEvent { | ||
@@ -13,4 +15,9 @@ readonly title: string; | ||
export interface RendererChangedEvent { | ||
renderer: DockviewPanelRenderer; | ||
readonly renderer: DockviewPanelRenderer; | ||
} | ||
export interface ActiveGroupEvent { | ||
readonly isActive: boolean; | ||
} | ||
export interface GroupChangedEvent { | ||
} | ||
export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' | 'onDidConstraintsChange' | 'setConstraints'> { | ||
@@ -21,5 +28,7 @@ readonly group: DockviewGroupPanel; | ||
readonly title: string | undefined; | ||
readonly onDidActiveGroupChange: Event<void>; | ||
readonly onDidGroupChange: Event<void>; | ||
readonly onDidActiveGroupChange: Event<ActiveGroupEvent>; | ||
readonly onDidGroupChange: Event<GroupChangedEvent>; | ||
readonly onDidRendererChange: Event<RendererChangedEvent>; | ||
readonly location: DockviewGroupLocation; | ||
readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
close(): void; | ||
@@ -33,2 +42,9 @@ setTitle(title: string): void; | ||
}): void; | ||
maximize(): void; | ||
isMaximized(): boolean; | ||
exitMaximized(): void; | ||
/** | ||
* If you require the Window object | ||
*/ | ||
getWindow(): Window; | ||
} | ||
@@ -42,8 +58,11 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implements DockviewPanelApi { | ||
private readonly _onDidActiveGroupChange; | ||
readonly onDidActiveGroupChange: Event<void>; | ||
readonly onDidActiveGroupChange: Event<ActiveGroupEvent>; | ||
private readonly _onDidGroupChange; | ||
readonly onDidGroupChange: Event<void>; | ||
readonly onDidGroupChange: Event<GroupChangedEvent>; | ||
readonly _onDidRendererChange: Emitter<RendererChangedEvent>; | ||
readonly onDidRendererChange: Event<RendererChangedEvent>; | ||
private readonly disposable; | ||
private readonly _onDidLocationChange; | ||
readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
private readonly groupEventsDisposable; | ||
get location(): DockviewGroupLocation; | ||
get title(): string | undefined; | ||
@@ -55,2 +74,3 @@ get isGroupActive(): boolean; | ||
constructor(panel: DockviewPanel, group: DockviewGroupPanel, accessor: DockviewComponent); | ||
getWindow(): Window; | ||
moveTo(options: { | ||
@@ -64,3 +84,5 @@ group: DockviewGroupPanel; | ||
close(): void; | ||
maximize(): void; | ||
isMaximized(): boolean; | ||
exitMaximized(): void; | ||
} | ||
//# sourceMappingURL=dockviewPanelApi.d.ts.map |
@@ -36,8 +36,17 @@ "use strict"; | ||
_this.onDidRendererChange = _this._onDidRendererChange.event; | ||
_this.disposable = new lifecycle_1.MutableDisposable(); | ||
_this._onDidLocationChange = new events_1.Emitter(); | ||
_this.onDidLocationChange = _this._onDidLocationChange.event; | ||
_this.groupEventsDisposable = new lifecycle_1.MutableDisposable(); | ||
_this.initialize(panel); | ||
_this._group = group; | ||
_this.addDisposables(_this.disposable, _this._onDidRendererChange, _this._onDidTitleChange, _this._onDidGroupChange, _this._onDidActiveGroupChange); | ||
_this.addDisposables(_this.groupEventsDisposable, _this._onDidRendererChange, _this._onDidTitleChange, _this._onDidGroupChange, _this._onDidActiveGroupChange, _this._onDidLocationChange); | ||
return _this; | ||
} | ||
Object.defineProperty(DockviewPanelApiImpl.prototype, "location", { | ||
get: function () { | ||
return this.group.api.location; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(DockviewPanelApiImpl.prototype, "title", { | ||
@@ -52,4 +61,3 @@ get: function () { | ||
get: function () { | ||
var _a; | ||
return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive); | ||
return this.group.isActive; | ||
}, | ||
@@ -73,11 +81,30 @@ enumerable: false, | ||
var isOldGroupActive = this.isGroupActive; | ||
this._group = value; | ||
this._onDidGroupChange.fire(); | ||
if (this._group) { | ||
this.disposable.value = this._group.api.onDidActiveChange(function () { | ||
_this._onDidActiveGroupChange.fire(); | ||
if (this._group !== value) { | ||
this._group = value; | ||
this._onDidGroupChange.fire({}); | ||
var _trackGroupActive_1 = isOldGroupActive; // prevent duplicate events with same state | ||
this.groupEventsDisposable.value = new lifecycle_1.CompositeDisposable(this.group.api.onDidLocationChange(function (event) { | ||
if (_this.group !== _this.panel.group) { | ||
return; | ||
} | ||
_this._onDidLocationChange.fire(event); | ||
}), this.group.api.onDidActiveChange(function () { | ||
if (_this.group !== _this.panel.group) { | ||
return; | ||
} | ||
if (_trackGroupActive_1 !== _this.isGroupActive) { | ||
_trackGroupActive_1 = _this.isGroupActive; | ||
_this._onDidActiveGroupChange.fire({ | ||
isActive: _this.isGroupActive, | ||
}); | ||
} | ||
})); | ||
// if (this.isGroupActive !== isOldGroupActive) { | ||
// this._onDidActiveGroupChange.fire({ | ||
// isActive: this.isGroupActive, | ||
// }); | ||
// } | ||
this._onDidLocationChange.fire({ | ||
location: this.group.api.location, | ||
}); | ||
if (this.isGroupActive !== isOldGroupActive) { | ||
this._onDidActiveGroupChange.fire(); | ||
} | ||
} | ||
@@ -88,5 +115,15 @@ }, | ||
}); | ||
DockviewPanelApiImpl.prototype.getWindow = function () { | ||
return this.group.api.getWindow(); | ||
}; | ||
DockviewPanelApiImpl.prototype.moveTo = function (options) { | ||
var _a; | ||
this.accessor.moveGroupOrPanel(options.group, this._group.id, this.panel.id, (_a = options.position) !== null && _a !== void 0 ? _a : 'center', options.index); | ||
this.accessor.moveGroupOrPanel({ | ||
from: { groupId: this._group.id, panelId: this.panel.id }, | ||
to: { | ||
group: options.group, | ||
position: (_a = options.position) !== null && _a !== void 0 ? _a : 'center', | ||
index: options.index, | ||
}, | ||
}); | ||
}; | ||
@@ -102,5 +139,13 @@ DockviewPanelApiImpl.prototype.setTitle = function (title) { | ||
}; | ||
DockviewPanelApiImpl.prototype.maximize = function () { | ||
this.group.api.maximize(); | ||
}; | ||
DockviewPanelApiImpl.prototype.isMaximized = function () { | ||
return this.group.api.isMaximized(); | ||
}; | ||
DockviewPanelApiImpl.prototype.exitMaximized = function () { | ||
this.group.api.exitMaximized(); | ||
}; | ||
return DockviewPanelApiImpl; | ||
}(gridviewPanelApi_1.GridviewPanelApiImpl)); | ||
exports.DockviewPanelApiImpl = DockviewPanelApiImpl; | ||
//# sourceMappingURL=dockviewPanelApi.js.map |
@@ -38,2 +38,1 @@ import { Emitter, Event } from '../events'; | ||
export {}; | ||
//# sourceMappingURL=gridviewPanelApi.d.ts.map |
@@ -27,5 +27,3 @@ "use strict"; | ||
_this.onDidConstraintsChangeInternal = _this._onDidConstraintsChangeInternal.event; | ||
_this._onDidConstraintsChange = new events_1.Emitter({ | ||
replay: true, | ||
}); | ||
_this._onDidConstraintsChange = new events_1.Emitter(); | ||
_this.onDidConstraintsChange = _this._onDidConstraintsChange.event; | ||
@@ -49,2 +47,1 @@ _this._onDidSizeChange = new events_1.Emitter(); | ||
exports.GridviewPanelApiImpl = GridviewPanelApiImpl; | ||
//# sourceMappingURL=gridviewPanelApi.js.map |
@@ -1,2 +0,2 @@ | ||
import { Emitter, Event } from '../events'; | ||
import { DockviewEvent, Emitter, Event } from '../events'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
@@ -14,2 +14,5 @@ import { IPanel, Parameters } from '../panel/types'; | ||
} | ||
export interface HiddenEvent { | ||
readonly isHidden: boolean; | ||
} | ||
export interface ActiveEvent { | ||
@@ -23,3 +26,3 @@ readonly isActive: boolean; | ||
readonly onDidActiveChange: Event<ActiveEvent>; | ||
setVisible(isVisible: boolean): void; | ||
readonly onDidHiddenChange: Event<HiddenEvent>; | ||
setActive(): void; | ||
@@ -44,2 +47,6 @@ updateParameters(parameters: Parameters): void; | ||
/** | ||
* Whether the panel is hidden | ||
*/ | ||
readonly isHidden: boolean; | ||
/** | ||
* The panel width in pixels | ||
@@ -52,3 +59,7 @@ */ | ||
readonly height: number; | ||
readonly onWillFocus: Event<WillFocusEvent>; | ||
} | ||
export declare class WillFocusEvent extends DockviewEvent { | ||
constructor(); | ||
} | ||
/** | ||
@@ -62,2 +73,3 @@ * A core api implementation that should be used across all panel-like objects | ||
private _isVisible; | ||
private _isHidden; | ||
private _width; | ||
@@ -70,8 +82,8 @@ private _height; | ||
readonly onDidFocusChange: Event<FocusEvent>; | ||
readonly _onFocusEvent: Emitter<void>; | ||
readonly onFocusEvent: Event<void>; | ||
readonly _onWillFocus: Emitter<WillFocusEvent>; | ||
readonly onWillFocus: Event<WillFocusEvent>; | ||
readonly _onDidVisibilityChange: Emitter<VisibilityEvent>; | ||
readonly onDidVisibilityChange: Event<VisibilityEvent>; | ||
readonly _onVisibilityChange: Emitter<VisibilityEvent>; | ||
readonly onVisibilityChange: Event<VisibilityEvent>; | ||
readonly _onDidHiddenChange: Emitter<HiddenEvent>; | ||
readonly onDidHiddenChange: Event<HiddenEvent>; | ||
readonly _onDidActiveChange: Emitter<ActiveEvent>; | ||
@@ -86,2 +98,3 @@ readonly onDidActiveChange: Event<ActiveEvent>; | ||
get isVisible(): boolean; | ||
get isHidden(): boolean; | ||
get width(): number; | ||
@@ -91,7 +104,5 @@ get height(): number; | ||
initialize(panel: IPanel): void; | ||
setVisible(isVisible: boolean): void; | ||
setHidden(isHidden: boolean): void; | ||
setActive(): void; | ||
updateParameters(parameters: Parameters): void; | ||
dispose(): void; | ||
} | ||
//# sourceMappingURL=panelApi.d.ts.map |
@@ -18,5 +18,13 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.PanelApiImpl = void 0; | ||
exports.PanelApiImpl = exports.WillFocusEvent = void 0; | ||
var events_1 = require("../events"); | ||
var lifecycle_1 = require("../lifecycle"); | ||
var WillFocusEvent = /** @class */ (function (_super) { | ||
__extends(WillFocusEvent, _super); | ||
function WillFocusEvent() { | ||
return _super.call(this) || this; | ||
} | ||
return WillFocusEvent; | ||
}(events_1.DockviewEvent)); | ||
exports.WillFocusEvent = WillFocusEvent; | ||
/** | ||
@@ -33,34 +41,22 @@ * A core api implementation that should be used across all panel-like objects | ||
_this._isVisible = true; | ||
_this._isHidden = false; | ||
_this._width = 0; | ||
_this._height = 0; | ||
_this.panelUpdatesDisposable = new lifecycle_1.MutableDisposable(); | ||
_this._onDidDimensionChange = new events_1.Emitter({ | ||
replay: true, | ||
}); | ||
_this._onDidDimensionChange = new events_1.Emitter(); | ||
_this.onDidDimensionsChange = _this._onDidDimensionChange.event; | ||
// | ||
_this._onDidChangeFocus = new events_1.Emitter({ | ||
replay: true, | ||
}); | ||
_this._onDidChangeFocus = new events_1.Emitter(); | ||
_this.onDidFocusChange = _this._onDidChangeFocus.event; | ||
// | ||
_this._onFocusEvent = new events_1.Emitter(); | ||
_this.onFocusEvent = _this._onFocusEvent.event; | ||
_this._onWillFocus = new events_1.Emitter(); | ||
_this.onWillFocus = _this._onWillFocus.event; | ||
// | ||
_this._onDidVisibilityChange = new events_1.Emitter({ | ||
replay: true, | ||
}); | ||
_this._onDidVisibilityChange = new events_1.Emitter(); | ||
_this.onDidVisibilityChange = _this._onDidVisibilityChange.event; | ||
// | ||
_this._onVisibilityChange = new events_1.Emitter(); | ||
_this.onVisibilityChange = _this._onVisibilityChange.event; | ||
// | ||
_this._onDidActiveChange = new events_1.Emitter({ | ||
replay: true, | ||
}); | ||
_this._onDidHiddenChange = new events_1.Emitter(); | ||
_this.onDidHiddenChange = _this._onDidHiddenChange.event; | ||
_this._onDidActiveChange = new events_1.Emitter(); | ||
_this.onDidActiveChange = _this._onDidActiveChange.event; | ||
// | ||
_this._onActiveChange = new events_1.Emitter(); | ||
_this.onActiveChange = _this._onActiveChange.event; | ||
// | ||
_this._onUpdateParameters = new events_1.Emitter(); | ||
@@ -74,10 +70,11 @@ _this.onUpdateParameters = _this._onUpdateParameters.event; | ||
_this._isVisible = event.isVisible; | ||
}), _this.onDidHiddenChange(function (event) { | ||
_this._isHidden = event.isHidden; | ||
}), _this.onDidDimensionsChange(function (event) { | ||
_this._width = event.width; | ||
_this._height = event.height; | ||
}), _this.panelUpdatesDisposable, _this._onDidDimensionChange, _this._onDidChangeFocus, _this._onDidVisibilityChange, _this._onDidActiveChange, _this._onFocusEvent, _this._onActiveChange, _this._onVisibilityChange, _this._onUpdateParameters); | ||
}), _this.panelUpdatesDisposable, _this._onDidDimensionChange, _this._onDidChangeFocus, _this._onDidVisibilityChange, _this._onDidActiveChange, _this._onWillFocus, _this._onActiveChange, _this._onUpdateParameters, _this._onWillFocus, _this._onDidHiddenChange, _this._onUpdateParameters); | ||
return _this; | ||
} | ||
Object.defineProperty(PanelApiImpl.prototype, "isFocused", { | ||
// | ||
get: function () { | ||
@@ -103,2 +100,9 @@ return this._isFocused; | ||
}); | ||
Object.defineProperty(PanelApiImpl.prototype, "isHidden", { | ||
get: function () { | ||
return this._isHidden; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(PanelApiImpl.prototype, "width", { | ||
@@ -125,4 +129,4 @@ get: function () { | ||
}; | ||
PanelApiImpl.prototype.setVisible = function (isVisible) { | ||
this._onVisibilityChange.fire({ isVisible: isVisible }); | ||
PanelApiImpl.prototype.setHidden = function (isHidden) { | ||
this._onDidHiddenChange.fire({ isHidden: isHidden }); | ||
}; | ||
@@ -135,8 +139,4 @@ PanelApiImpl.prototype.setActive = function () { | ||
}; | ||
PanelApiImpl.prototype.dispose = function () { | ||
_super.prototype.dispose.call(this); | ||
}; | ||
return PanelApiImpl; | ||
}(lifecycle_1.CompositeDisposable)); | ||
exports.PanelApiImpl = PanelApiImpl; | ||
//# sourceMappingURL=panelApi.js.map |
@@ -27,2 +27,1 @@ import { Emitter, Event } from '../events'; | ||
} | ||
//# sourceMappingURL=paneviewPanelApi.d.ts.map |
@@ -58,2 +58,1 @@ "use strict"; | ||
exports.PaneviewPanelApiImpl = PaneviewPanelApiImpl; | ||
//# sourceMappingURL=paneviewPanelApi.js.map |
@@ -33,2 +33,1 @@ import { Emitter, Event } from '../events'; | ||
export {}; | ||
//# sourceMappingURL=splitviewPanelApi.d.ts.map |
@@ -48,2 +48,1 @@ "use strict"; | ||
exports.SplitviewPanelApiImpl = SplitviewPanelApiImpl; | ||
//# sourceMappingURL=splitviewPanelApi.js.map |
@@ -14,2 +14,1 @@ export declare function tail<T>(arr: T[]): [T[], T]; | ||
export declare function remove<T>(array: T[], value: T): boolean; | ||
//# sourceMappingURL=array.d.ts.map |
@@ -68,2 +68,1 @@ "use strict"; | ||
exports.remove = remove; | ||
//# sourceMappingURL=array.js.map |
@@ -13,2 +13,1 @@ import { CompositeDisposable, IDisposable } from '../lifecycle'; | ||
} | ||
//# sourceMappingURL=abstractDragHandler.d.ts.map |
@@ -142,2 +142,1 @@ "use strict"; | ||
exports.DragHandler = DragHandler; | ||
//# sourceMappingURL=abstractDragHandler.js.map |
@@ -31,2 +31,1 @@ declare class TransferObject { | ||
export {}; | ||
//# sourceMappingURL=dataTransfer.d.ts.map |
@@ -100,2 +100,1 @@ "use strict"; | ||
exports.getPaneData = getPaneData; | ||
//# sourceMappingURL=dataTransfer.js.map |
@@ -33,2 +33,1 @@ import { CompositeDisposable } from '../lifecycle'; | ||
} | ||
//# sourceMappingURL=dnd.d.ts.map |
@@ -75,2 +75,1 @@ "use strict"; | ||
exports.DragAndDropObserver = DragAndDropObserver; | ||
//# sourceMappingURL=dnd.js.map |
@@ -1,7 +0,5 @@ | ||
import { Event } from '../events'; | ||
import { DockviewEvent, Event } from '../events'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
import { DragAndDropObserver } from './dnd'; | ||
import { Direction } from '../gridview/baseComponentGridview'; | ||
export declare function directionToPosition(direction: Direction): Position; | ||
export declare function positionToDirection(position: Position): Direction; | ||
export interface DroptargetEvent { | ||
@@ -11,4 +9,28 @@ readonly position: Position; | ||
} | ||
export declare class WillShowOverlayEvent extends DockviewEvent implements DroptargetEvent { | ||
private readonly options; | ||
get nativeEvent(): DragEvent; | ||
get position(): Position; | ||
constructor(options: { | ||
nativeEvent: DragEvent; | ||
position: Position; | ||
}); | ||
} | ||
export declare function directionToPosition(direction: Direction): Position; | ||
export declare function positionToDirection(position: Position): Direction; | ||
export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center'; | ||
export type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Position) => boolean); | ||
export type MeasuredValue = { | ||
value: number; | ||
type: 'pixels' | 'percentage'; | ||
}; | ||
export type DroptargetOverlayModel = { | ||
size?: MeasuredValue; | ||
activationSize?: MeasuredValue; | ||
}; | ||
export interface DroptargetOptions { | ||
canDisplayOverlay: CanDisplayOverlay; | ||
acceptedTargetZones: Position[]; | ||
overlayModel?: DroptargetOverlayModel; | ||
} | ||
export declare class Droptarget extends CompositeDisposable { | ||
@@ -23,20 +45,10 @@ private readonly element; | ||
readonly onDrop: Event<DroptargetEvent>; | ||
private readonly _onWillShowOverlay; | ||
readonly onWillShowOverlay: Event<WillShowOverlayEvent>; | ||
readonly dnd: DragAndDropObserver; | ||
private static USED_EVENT_ID; | ||
get state(): Position | undefined; | ||
constructor(element: HTMLElement, options: { | ||
canDisplayOverlay: CanDisplayOverlay; | ||
acceptedTargetZones: Position[]; | ||
overlayModel?: { | ||
size?: { | ||
value: number; | ||
type: 'pixels' | 'percentage'; | ||
}; | ||
activationSize?: { | ||
value: number; | ||
type: 'pixels' | 'percentage'; | ||
}; | ||
}; | ||
}); | ||
constructor(element: HTMLElement, options: DroptargetOptions); | ||
setTargetZones(acceptedTargetZones: Position[]): void; | ||
setOverlayModel(model: DroptargetOverlayModel): void; | ||
dispose(): void; | ||
@@ -48,7 +60,6 @@ /** | ||
/** | ||
* Check is the event has already been used by another instance od DropTarget | ||
* Check is the event has already been used by another instance of DropTarget | ||
*/ | ||
private isAlreadyUsed; | ||
private toggleClasses; | ||
private setState; | ||
private calculateQuadrant; | ||
@@ -59,2 +70,1 @@ private removeDropTarget; | ||
export declare function calculateQuadrantAsPixels(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null; | ||
//# sourceMappingURL=droptarget.d.ts.map |
@@ -18,3 +18,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.calculateQuadrantAsPixels = exports.calculateQuadrantAsPercentage = exports.Droptarget = exports.positionToDirection = exports.directionToPosition = void 0; | ||
exports.calculateQuadrantAsPixels = exports.calculateQuadrantAsPercentage = exports.Droptarget = exports.positionToDirection = exports.directionToPosition = exports.WillShowOverlayEvent = void 0; | ||
var dom_1 = require("../dom"); | ||
@@ -25,5 +25,26 @@ var events_1 = require("../events"); | ||
var math_1 = require("../math"); | ||
function numberOrFallback(maybeNumber, fallback) { | ||
return typeof maybeNumber === 'number' ? maybeNumber : fallback; | ||
} | ||
var WillShowOverlayEvent = /** @class */ (function (_super) { | ||
__extends(WillShowOverlayEvent, _super); | ||
function WillShowOverlayEvent(options) { | ||
var _this = _super.call(this) || this; | ||
_this.options = options; | ||
return _this; | ||
} | ||
Object.defineProperty(WillShowOverlayEvent.prototype, "nativeEvent", { | ||
get: function () { | ||
return this.options.nativeEvent; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(WillShowOverlayEvent.prototype, "position", { | ||
get: function () { | ||
return this.options.position; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
return WillShowOverlayEvent; | ||
}(events_1.DockviewEvent)); | ||
exports.WillShowOverlayEvent = WillShowOverlayEvent; | ||
function directionToPosition(direction) { | ||
@@ -63,2 +84,12 @@ switch (direction) { | ||
exports.positionToDirection = positionToDirection; | ||
var DEFAULT_ACTIVATION_SIZE = { | ||
value: 20, | ||
type: 'percentage', | ||
}; | ||
var DEFAULT_SIZE = { | ||
value: 50, | ||
type: 'percentage', | ||
}; | ||
var SMALL_WIDTH_BOUNDARY = 100; | ||
var SMALL_HEIGHT_BOUNDARY = 100; | ||
var Droptarget = /** @class */ (function (_super) { | ||
@@ -72,2 +103,4 @@ __extends(Droptarget, _super); | ||
_this.onDrop = _this._onDrop.event; | ||
_this._onWillShowOverlay = new events_1.Emitter(); | ||
_this.onWillShowOverlay = _this._onWillShowOverlay.event; | ||
// use a set to take advantage of #<set>.has | ||
@@ -101,2 +134,15 @@ _this._acceptedTargetZonesSet = new Set(_this.options.acceptedTargetZones); | ||
} | ||
var willShowOverlayEvent = new WillShowOverlayEvent({ | ||
nativeEvent: e, | ||
position: quadrant, | ||
}); | ||
/** | ||
* Provide an opportunity to prevent the overlay appearing and in turn | ||
* any dnd behaviours | ||
*/ | ||
_this._onWillShowOverlay.fire(willShowOverlayEvent); | ||
if (willShowOverlayEvent.defaultPrevented) { | ||
_this.removeDropTarget(); | ||
return; | ||
} | ||
if (typeof _this.options.canDisplayOverlay === 'boolean') { | ||
@@ -124,3 +170,3 @@ if (!_this.options.canDisplayOverlay) { | ||
_this.toggleClasses(quadrant, width, height); | ||
_this.setState(quadrant); | ||
_this._state = quadrant; | ||
}, | ||
@@ -145,3 +191,3 @@ onDragLeave: function () { | ||
}); | ||
_this.addDisposables(_this._onDrop, _this.dnd); | ||
_this.addDisposables(_this._onDrop, _this._onWillShowOverlay, _this.dnd); | ||
return _this; | ||
@@ -159,2 +205,5 @@ } | ||
}; | ||
Droptarget.prototype.setOverlayModel = function (model) { | ||
this.options.overlayModel = model; | ||
}; | ||
Droptarget.prototype.dispose = function () { | ||
@@ -171,3 +220,3 @@ this.removeDropTarget(); | ||
/** | ||
* Check is the event has already been used by another instance od DropTarget | ||
* Check is the event has already been used by another instance of DropTarget | ||
*/ | ||
@@ -179,8 +228,8 @@ Droptarget.prototype.isAlreadyUsed = function (event) { | ||
Droptarget.prototype.toggleClasses = function (quadrant, width, height) { | ||
var _a, _b, _c, _d; | ||
var _a, _b; | ||
if (!this.overlayElement) { | ||
return; | ||
} | ||
var isSmallX = width < 100; | ||
var isSmallY = height < 100; | ||
var isSmallX = width < SMALL_WIDTH_BOUNDARY; | ||
var isSmallY = height < SMALL_HEIGHT_BOUNDARY; | ||
var isLeft = quadrant === 'left'; | ||
@@ -194,70 +243,69 @@ var isRight = quadrant === 'right'; | ||
var bottomClass = !isSmallY && isBottom; | ||
var size = 0.5; | ||
if (((_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.type) === 'percentage') { | ||
size = (0, math_1.clamp)(this.options.overlayModel.size.value, 0, 100) / 100; | ||
var size = 1; | ||
var sizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DEFAULT_SIZE; | ||
if (sizeOptions.type === 'percentage') { | ||
size = (0, math_1.clamp)(sizeOptions.value, 0, 100) / 100; | ||
} | ||
if (((_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.type) === 'pixels') { | ||
else { | ||
if (rightClass || leftClass) { | ||
size = | ||
(0, math_1.clamp)(0, this.options.overlayModel.size.value, width) / | ||
width; | ||
size = (0, math_1.clamp)(0, sizeOptions.value, width) / width; | ||
} | ||
if (topClass || bottomClass) { | ||
size = | ||
(0, math_1.clamp)(0, this.options.overlayModel.size.value, height) / | ||
height; | ||
size = (0, math_1.clamp)(0, sizeOptions.value, height) / height; | ||
} | ||
} | ||
var translate = (1 - size) / 2; | ||
var scale = size; | ||
var transform; | ||
var box = { top: '0px', left: '0px', width: '100%', height: '100%' }; | ||
/** | ||
* You can also achieve the overlay placement using the transform CSS property | ||
* to translate and scale the element however this has the undesired effect of | ||
* 'skewing' the element. Comment left here for anybody that ever revisits this. | ||
* | ||
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform | ||
* | ||
* right | ||
* translateX(${100 * (1 - size) / 2}%) scaleX(${scale}) | ||
* | ||
* left | ||
* translateX(-${100 * (1 - size) / 2}%) scaleX(${scale}) | ||
* | ||
* top | ||
* translateY(-${100 * (1 - size) / 2}%) scaleY(${scale}) | ||
* | ||
* bottom | ||
* translateY(${100 * (1 - size) / 2}%) scaleY(${scale}) | ||
*/ | ||
if (rightClass) { | ||
transform = "translateX(".concat(100 * translate, "%) scaleX(").concat(scale, ")"); | ||
box.left = "".concat(100 * (1 - size), "%"); | ||
box.width = "".concat(100 * size, "%"); | ||
} | ||
else if (leftClass) { | ||
transform = "translateX(-".concat(100 * translate, "%) scaleX(").concat(scale, ")"); | ||
box.width = "".concat(100 * size, "%"); | ||
} | ||
else if (topClass) { | ||
transform = "translateY(-".concat(100 * translate, "%) scaleY(").concat(scale, ")"); | ||
box.height = "".concat(100 * size, "%"); | ||
} | ||
else if (bottomClass) { | ||
transform = "translateY(".concat(100 * translate, "%) scaleY(").concat(scale, ")"); | ||
box.top = "".concat(100 * (1 - size), "%"); | ||
box.height = "".concat(100 * size, "%"); | ||
} | ||
else { | ||
transform = ''; | ||
} | ||
this.overlayElement.style.transform = transform; | ||
(0, dom_1.toggleClass)(this.overlayElement, 'small-right', isSmallX && isRight); | ||
(0, dom_1.toggleClass)(this.overlayElement, 'small-left', isSmallX && isLeft); | ||
(0, dom_1.toggleClass)(this.overlayElement, 'small-top', isSmallY && isTop); | ||
(0, dom_1.toggleClass)(this.overlayElement, 'small-bottom', isSmallY && isBottom); | ||
this.overlayElement.style.top = box.top; | ||
this.overlayElement.style.left = box.left; | ||
this.overlayElement.style.width = box.width; | ||
this.overlayElement.style.height = box.height; | ||
(0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY); | ||
(0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX); | ||
(0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-left', isLeft); | ||
(0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-right', isRight); | ||
(0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-top', isTop); | ||
(0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-bottom', isBottom); | ||
(0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-center', quadrant === 'center'); | ||
}; | ||
Droptarget.prototype.setState = function (quadrant) { | ||
switch (quadrant) { | ||
case 'top': | ||
this._state = 'top'; | ||
break; | ||
case 'left': | ||
this._state = 'left'; | ||
break; | ||
case 'bottom': | ||
this._state = 'bottom'; | ||
break; | ||
case 'right': | ||
this._state = 'right'; | ||
break; | ||
case 'center': | ||
this._state = 'center'; | ||
break; | ||
} | ||
}; | ||
Droptarget.prototype.calculateQuadrant = function (overlayType, x, y, width, height) { | ||
var _a, _b, _c, _d, _e, _f; | ||
var isPercentage = ((_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) === undefined || | ||
((_c = (_b = this.options.overlayModel) === null || _b === void 0 ? void 0 : _b.activationSize) === null || _c === void 0 ? void 0 : _c.type) === 'percentage'; | ||
var value = numberOrFallback((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.overlayModel) === null || _e === void 0 ? void 0 : _e.activationSize) === null || _f === void 0 ? void 0 : _f.value, 20); | ||
var _a, _b; | ||
var activationSizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE; | ||
var isPercentage = activationSizeOptions.type === 'percentage'; | ||
if (isPercentage) { | ||
return calculateQuadrantAsPercentage(overlayType, x, y, width, height, value); | ||
return calculateQuadrantAsPercentage(overlayType, x, y, width, height, activationSizeOptions.value); | ||
} | ||
return calculateQuadrantAsPixels(overlayType, x, y, width, height, value); | ||
return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value); | ||
}; | ||
@@ -317,2 +365,1 @@ Droptarget.prototype.removeDropTarget = function () { | ||
exports.calculateQuadrantAsPixels = calculateQuadrantAsPixels; | ||
//# sourceMappingURL=droptarget.js.map |
export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void; | ||
//# sourceMappingURL=ghost.d.ts.map |
@@ -16,2 +16,1 @@ "use strict"; | ||
exports.addGhostImage = addGhostImage; | ||
//# sourceMappingURL=ghost.js.map |
@@ -13,2 +13,1 @@ import { DockviewComponent } from '../dockview/dockviewComponent'; | ||
} | ||
//# sourceMappingURL=groupDragHandler.d.ts.map |
@@ -44,3 +44,3 @@ "use strict"; | ||
GroupDragHandler.prototype.isCancelled = function (_event) { | ||
if (this.group.api.isFloating && !_event.shiftKey) { | ||
if (this.group.api.location.type === 'floating' && !_event.shiftKey) { | ||
return true; | ||
@@ -79,2 +79,1 @@ } | ||
exports.GroupDragHandler = GroupDragHandler; | ||
//# sourceMappingURL=groupDragHandler.js.map |
import { Event } from '../events'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
import { Box } from '../types'; | ||
export declare class Overlay extends CompositeDisposable { | ||
@@ -14,7 +15,3 @@ private readonly options; | ||
set minimumInViewportHeight(value: number | undefined); | ||
constructor(options: { | ||
height: number; | ||
width: number; | ||
left: number; | ||
top: number; | ||
constructor(options: Box & { | ||
container: HTMLElement; | ||
@@ -25,14 +22,4 @@ content: HTMLElement; | ||
}); | ||
setBounds(bounds?: Partial<{ | ||
height: number; | ||
width: number; | ||
top: number; | ||
left: number; | ||
}>): void; | ||
toJSON(): { | ||
top: number; | ||
left: number; | ||
height: number; | ||
width: number; | ||
}; | ||
setBounds(bounds?: Partial<Box>): void; | ||
toJSON(): Box; | ||
setupDrag(dragTarget: HTMLElement, options?: { | ||
@@ -46,2 +33,1 @@ inDragMode: boolean; | ||
} | ||
//# sourceMappingURL=overlay.d.ts.map |
@@ -413,2 +413,1 @@ "use strict"; | ||
exports.Overlay = Overlay; | ||
//# sourceMappingURL=overlay.js.map |
@@ -17,3 +17,5 @@ import { CompositeDisposable, IDisposable } from '../../../lifecycle'; | ||
hide(): void; | ||
renderPanel(panel: IDockviewPanel): void; | ||
renderPanel(panel: IDockviewPanel, options: { | ||
asActive: boolean; | ||
}): void; | ||
} | ||
@@ -35,3 +37,5 @@ export declare class ContentContainer extends CompositeDisposable implements IContentContainer { | ||
hide(): void; | ||
renderPanel(panel: IDockviewPanel): void; | ||
renderPanel(panel: IDockviewPanel, options?: { | ||
asActive: boolean; | ||
}): void; | ||
openPanel(panel: IDockviewPanel): void; | ||
@@ -42,2 +46,1 @@ layout(_width: number, _height: number): void; | ||
} | ||
//# sourceMappingURL=content.d.ts.map |
@@ -24,3 +24,2 @@ "use strict"; | ||
var dataTransfer_1 = require("../../../dnd/dataTransfer"); | ||
var types_1 = require("../../types"); | ||
var ContentContainer = /** @class */ (function (_super) { | ||
@@ -41,7 +40,2 @@ __extends(ContentContainer, _super); | ||
_this.addDisposables(_this._onDidFocus, _this._onDidBlur); | ||
// for hosted containers | ||
// 1) register a drop target on the host | ||
// 2) register window dragStart events to disable pointer events | ||
// 3) register dragEnd events | ||
// 4) register mouseMove events (if no buttons are present we take this as a dragEnd event) | ||
_this.dropTarget = new droptarget_1.Droptarget(_this.element, { | ||
@@ -55,3 +49,5 @@ acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'], | ||
var data = (0, dataTransfer_1.getPanelData)(); | ||
if (!data && event.shiftKey && !_this.group.isFloating) { | ||
if (!data && | ||
event.shiftKey && | ||
_this.group.location.type !== 'floating') { | ||
return false; | ||
@@ -74,3 +70,3 @@ } | ||
} | ||
return _this.group.canDisplayOverlay(event, position, types_1.DockviewDropTargets.Panel); | ||
return _this.group.canDisplayOverlay(event, position, 'panel'); | ||
}, | ||
@@ -94,11 +90,21 @@ }); | ||
}; | ||
ContentContainer.prototype.renderPanel = function (panel) { | ||
ContentContainer.prototype.renderPanel = function (panel, options) { | ||
var _this = this; | ||
var isActive = panel === this.group.activePanel; | ||
if (options === void 0) { options = { asActive: true }; } | ||
var doRender = options.asActive || | ||
(this.panel && this.group.isPanelActive(this.panel)); | ||
if (this.panel && | ||
this.panel.view.content.element.parentElement === this._element) { | ||
/** | ||
* If the currently attached panel is mounted directly to the content then remove it | ||
*/ | ||
this._element.removeChild(this.panel.view.content.element); | ||
} | ||
this.panel = panel; | ||
var container; | ||
switch (panel.api.renderer) { | ||
case 'onlyWhenVisibile': | ||
this.accessor.greadyRenderContainer.remove(panel); | ||
if (isActive) { | ||
if (this.panel) { | ||
this.group.renderContainer.detatch(panel); | ||
if (this.panel) { | ||
if (doRender) { | ||
this._element.appendChild(this.panel.view.content.element); | ||
@@ -113,7 +119,9 @@ } | ||
} | ||
container = | ||
this.accessor.greadyRenderContainer.setReferenceContentContainer(panel, this); | ||
container = this.group.renderContainer.attach({ | ||
panel: panel, | ||
referenceContainer: this, | ||
}); | ||
break; | ||
} | ||
if (isActive) { | ||
if (doRender) { | ||
var _onDidFocus = panel.view.content.onDidFocus; | ||
@@ -134,38 +142,6 @@ var _onDidBlur = panel.view.content.onDidBlur; | ||
ContentContainer.prototype.openPanel = function (panel) { | ||
var _this = this; | ||
if (this.panel === panel) { | ||
return; | ||
} | ||
var renderer = panel.api.renderer; | ||
if (this.panel && | ||
this.panel.view.content.element.parentElement === this._element) { | ||
/** | ||
* If the currently attached panel is mounted directly to the content then remove it | ||
*/ | ||
this._element.removeChild(this.panel.view.content.element); | ||
} | ||
this.panel = panel; | ||
var container; | ||
switch (renderer) { | ||
case 'always': | ||
container = | ||
this.accessor.greadyRenderContainer.setReferenceContentContainer(panel, this); | ||
break; | ||
case 'onlyWhenVisibile': | ||
this._element.appendChild(this.panel.view.content.element); | ||
container = this._element; | ||
break; | ||
} | ||
var _onDidFocus = this.panel.view.content.onDidFocus; | ||
var _onDidBlur = this.panel.view.content.onDidBlur; | ||
var disposable = new lifecycle_1.CompositeDisposable(); | ||
var focusTracker = (0, dom_1.trackFocus)(container); | ||
disposable.addDisposables(focusTracker, focusTracker.onDidFocus(function () { return _this._onDidFocus.fire(); }), focusTracker.onDidBlur(function () { return _this._onDidBlur.fire(); })); | ||
if (_onDidFocus) { | ||
disposable.addDisposables(_onDidFocus(function () { return _this._onDidFocus.fire(); })); | ||
} | ||
if (_onDidBlur) { | ||
disposable.addDisposables(_onDidBlur(function () { return _this._onDidBlur.fire(); })); | ||
} | ||
this.disposable.value = disposable; | ||
this.renderPanel(panel); | ||
}; | ||
@@ -176,8 +152,9 @@ ContentContainer.prototype.layout = function (_width, _height) { | ||
ContentContainer.prototype.closePanel = function () { | ||
var _a; | ||
if (this.panel) { | ||
if (this.accessor.options.defaultRenderer === 'onlyWhenVisibile') { | ||
this._element.removeChild(this.panel.view.content.element); | ||
if (this.panel.api.renderer === 'onlyWhenVisibile') { | ||
(_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element); | ||
} | ||
this.panel = undefined; | ||
} | ||
this.panel = undefined; | ||
}; | ||
@@ -191,2 +168,1 @@ ContentContainer.prototype.dispose = function () { | ||
exports.ContentContainer = ContentContainer; | ||
//# sourceMappingURL=content.js.map |
@@ -22,2 +22,1 @@ import { CompositeDisposable } from '../../../lifecycle'; | ||
} | ||
//# sourceMappingURL=defaultTab.d.ts.map |
@@ -106,2 +106,1 @@ "use strict"; | ||
exports.DefaultTab = DefaultTab; | ||
//# sourceMappingURL=defaultTab.js.map |
import { Event } from '../../../events'; | ||
import { CompositeDisposable, IDisposable } from '../../../lifecycle'; | ||
import { CompositeDisposable } from '../../../lifecycle'; | ||
import { DockviewComponent } from '../../dockviewComponent'; | ||
import { ITabRenderer } from '../../types'; | ||
import { DockviewGroupPanel } from '../../dockviewGroupPanel'; | ||
import { DroptargetEvent } from '../../../dnd/droptarget'; | ||
import { DroptargetEvent, WillShowOverlayEvent } from '../../../dnd/droptarget'; | ||
import { IDockviewPanel } from '../../dockviewPanel'; | ||
export interface ITab extends IDisposable { | ||
export declare class Tab extends CompositeDisposable { | ||
readonly panel: IDockviewPanel; | ||
readonly element: HTMLElement; | ||
setContent: (element: ITabRenderer) => void; | ||
onChanged: Event<MouseEvent>; | ||
onDrop: Event<DroptargetEvent>; | ||
setActive(isActive: boolean): void; | ||
} | ||
export declare class Tab extends CompositeDisposable implements ITab { | ||
readonly panel: IDockviewPanel; | ||
private readonly accessor; | ||
private readonly group; | ||
private readonly _element; | ||
private readonly droptarget; | ||
private readonly dropTarget; | ||
private content; | ||
@@ -29,2 +21,3 @@ private readonly _onChanged; | ||
readonly onDragStart: Event<DragEvent>; | ||
readonly onWillShowOverlay: Event<WillShowOverlayEvent>; | ||
get element(): HTMLElement; | ||
@@ -36,2 +29,1 @@ constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel); | ||
} | ||
//# sourceMappingURL=tab.d.ts.map |
@@ -23,3 +23,2 @@ "use strict"; | ||
var dom_1 = require("../../../dom"); | ||
var types_1 = require("../../types"); | ||
var droptarget_1 = require("../../../dnd/droptarget"); | ||
@@ -68,3 +67,3 @@ var abstractDragHandler_1 = require("../../../dnd/abstractDragHandler"); | ||
var dragHandler = new TabDragHandler(_this._element, _this.accessor, _this.group, _this.panel); | ||
_this.droptarget = new droptarget_1.Droptarget(_this._element, { | ||
_this.dropTarget = new droptarget_1.Droptarget(_this._element, { | ||
acceptedTargetZones: ['center'], | ||
@@ -84,5 +83,6 @@ canDisplayOverlay: function (event, position) { | ||
} | ||
return _this.group.model.canDisplayOverlay(event, position, types_1.DockviewDropTargets.Tab); | ||
return _this.group.model.canDisplayOverlay(event, position, 'tab'); | ||
}, | ||
}); | ||
_this.onWillShowOverlay = _this.dropTarget.onWillShowOverlay; | ||
_this.addDisposables(_this._onChanged, _this._onDropped, _this._onDragStart, dragHandler.onDragStart(function (event) { | ||
@@ -95,5 +95,5 @@ _this._onDragStart.fire(event); | ||
_this._onChanged.fire(event); | ||
}), _this.droptarget.onDrop(function (event) { | ||
}), _this.dropTarget.onDrop(function (event) { | ||
_this._onDropped.fire(event); | ||
}), _this.droptarget); | ||
}), _this.dropTarget); | ||
return _this; | ||
@@ -125,2 +125,1 @@ } | ||
exports.Tab = Tab; | ||
//# sourceMappingURL=tab.js.map |
import { IDisposable, CompositeDisposable } from '../../../lifecycle'; | ||
import { Event } from '../../../events'; | ||
import { ITab } from '../tab/tab'; | ||
import { DockviewComponent } from '../../dockviewComponent'; | ||
import { Tab } from '../tab/tab'; | ||
import { DockviewGroupPanel } from '../../dockviewGroupPanel'; | ||
import { IDockviewPanel } from '../../dockviewPanel'; | ||
import { DockviewComponent } from '../../dockviewComponent'; | ||
import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel'; | ||
export interface TabDropIndexEvent { | ||
@@ -23,13 +24,14 @@ readonly event: DragEvent; | ||
readonly size: number; | ||
readonly onDrop: Event<TabDropIndexEvent>; | ||
readonly onTabDragStart: Event<TabDragEvent>; | ||
readonly onGroupDragStart: Event<GroupDragEvent>; | ||
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>; | ||
hidden: boolean; | ||
delete: (id: string) => void; | ||
indexOf: (id: string) => number; | ||
onDrop: Event<TabDropIndexEvent>; | ||
onTabDragStart: Event<TabDragEvent>; | ||
onGroupDragStart: Event<GroupDragEvent>; | ||
setActive: (isGroupActive: boolean) => void; | ||
setActivePanel: (panel: IDockviewPanel) => void; | ||
isActive: (tab: ITab) => boolean; | ||
closePanel: (panel: IDockviewPanel) => void; | ||
openPanel: (panel: IDockviewPanel, index?: number) => void; | ||
delete(id: string): void; | ||
indexOf(id: string): number; | ||
setActive(isGroupActive: boolean): void; | ||
setActivePanel(panel: IDockviewPanel): void; | ||
isActive(tab: Tab): boolean; | ||
closePanel(panel: IDockviewPanel): void; | ||
openPanel(panel: IDockviewPanel, index?: number): void; | ||
setRightActionsElement(element: HTMLElement | undefined): void; | ||
@@ -62,2 +64,4 @@ setLeftActionsElement(element: HTMLElement | undefined): void; | ||
readonly onGroupDragStart: Event<GroupDragEvent>; | ||
private readonly _onWillShowOverlay; | ||
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>; | ||
get panels(): string[]; | ||
@@ -73,3 +77,3 @@ get size(): number; | ||
get element(): HTMLElement; | ||
isActive(tab: ITab): boolean; | ||
isActive(tab: Tab): boolean; | ||
indexOf(id: string): number; | ||
@@ -85,2 +89,1 @@ constructor(accessor: DockviewComponent, group: DockviewGroupPanel); | ||
} | ||
//# sourceMappingURL=tabsContainer.d.ts.map |
@@ -60,2 +60,3 @@ "use strict"; | ||
var dom_1 = require("../../../dom"); | ||
var dockviewGroupPanelModel_1 = require("../../dockviewGroupPanelModel"); | ||
var TabsContainer = /** @class */ (function (_super) { | ||
@@ -76,15 +77,7 @@ __extends(TabsContainer, _super); | ||
_this.onGroupDragStart = _this._onGroupDragStart.event; | ||
_this.addDisposables(_this._onDrop, _this._onTabDragStart, _this._onGroupDragStart); | ||
_this._onWillShowOverlay = new events_1.Emitter(); | ||
_this.onWillShowOverlay = _this._onWillShowOverlay.event; | ||
_this._element = document.createElement('div'); | ||
_this._element.className = 'tabs-and-actions-container'; | ||
(0, dom_1.toggleClass)(_this._element, 'dv-full-width-single-tab', _this.accessor.options.singleTabMode === 'fullwidth'); | ||
_this.addDisposables(_this.accessor.onDidAddPanel(function (e) { | ||
if (e.api.group === _this.group) { | ||
(0, dom_1.toggleClass)(_this._element, 'dv-single-tab', _this.size === 1); | ||
} | ||
}), _this.accessor.onDidRemovePanel(function (e) { | ||
if (e.api.group === _this.group) { | ||
(0, dom_1.toggleClass)(_this._element, 'dv-single-tab', _this.size === 1); | ||
} | ||
})); | ||
_this.rightActionsContainer = document.createElement('div'); | ||
@@ -104,3 +97,11 @@ _this.rightActionsContainer.className = 'right-actions-container'; | ||
_this._element.appendChild(_this.rightActionsContainer); | ||
_this.addDisposables(_this.voidContainer, _this.voidContainer.onDragStart(function (event) { | ||
_this.addDisposables(_this.accessor.onDidAddPanel(function (e) { | ||
if (e.api.group === _this.group) { | ||
(0, dom_1.toggleClass)(_this._element, 'dv-single-tab', _this.size === 1); | ||
} | ||
}), _this.accessor.onDidRemovePanel(function (e) { | ||
if (e.api.group === _this.group) { | ||
(0, dom_1.toggleClass)(_this._element, 'dv-single-tab', _this.size === 1); | ||
} | ||
}), _this._onWillShowOverlay, _this._onDrop, _this._onTabDragStart, _this._onGroupDragStart, _this.voidContainer, _this.voidContainer.onDragStart(function (event) { | ||
_this._onGroupDragStart.fire({ | ||
@@ -115,2 +116,6 @@ nativeEvent: event, | ||
}); | ||
}), _this.voidContainer.onWillShowOverlay(function (event) { | ||
_this._onWillShowOverlay.fire(new dockviewGroupPanelModel_1.WillShowOverlayLocationEvent(event, { | ||
kind: 'header_space', | ||
})); | ||
}), (0, events_1.addDisposableListener)(_this.voidContainer.element, 'mousedown', function (event) { | ||
@@ -120,8 +125,8 @@ var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups; | ||
event.shiftKey && | ||
!_this.group.api.isFloating) { | ||
_this.group.api.location.type !== 'floating') { | ||
event.preventDefault(); | ||
var _a = _this.element.getBoundingClientRect(), top_1 = _a.top, left = _a.left, right = _a.right; | ||
var _b = _this.accessor.element.getBoundingClientRect(), rootTop = _b.top, rootLeft = _b.left, rootRight = _b.right; | ||
var _a = _this.element.getBoundingClientRect(), top_1 = _a.top, left = _a.left; | ||
var _b = _this.accessor.element.getBoundingClientRect(), rootTop = _b.top, rootLeft = _b.left; | ||
_this.accessor.addFloatingGroup(_this.group, { | ||
x: (_this.accessor.options.isRtl ? (right - rootRight) : (left - rootLeft)) + 20, | ||
x: left - rootLeft + 20, | ||
y: top_1 - rootTop + 20, | ||
@@ -272,5 +277,5 @@ }, { inDragMode: true }); | ||
}), tab.onChanged(function (event) { | ||
var _a; | ||
var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups; | ||
var isFloatingWithOnePanel = _this.group.api.isFloating && _this.size === 1; | ||
var isFloatingWithOnePanel = _this.group.api.location.type === 'floating' && | ||
_this.size === 1; | ||
if (isFloatingGroupsEnabled && | ||
@@ -281,6 +286,6 @@ !isFloatingWithOnePanel && | ||
var panel_1 = _this.accessor.getGroupPanel(tab.panel.id); | ||
var _b = tab.element.getBoundingClientRect(), top_2 = _b.top, left = _b.left, right = _b.right; | ||
var _c = _this.accessor.element.getBoundingClientRect(), rootTop = _c.top, rootLeft = _c.left, rootRight = _c.right; | ||
var _a = tab.element.getBoundingClientRect(), top_2 = _a.top, left = _a.left; | ||
var _b = _this.accessor.element.getBoundingClientRect(), rootTop = _b.top, rootLeft = _b.left; | ||
_this.accessor.addFloatingGroup(panel_1, { | ||
x: (_this.accessor.options.isRtl ? (right - rootRight) : (left - rootLeft)) + 20, | ||
x: left - rootLeft, | ||
y: top_2 - rootTop, | ||
@@ -290,4 +295,2 @@ }, { inDragMode: true }); | ||
} | ||
var alreadyFocused = panel.id === ((_a = _this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) && | ||
_this.group.model.isContentFocused; | ||
var isLeftClick = event.button === 0; | ||
@@ -297,5 +300,5 @@ if (!isLeftClick || event.defaultPrevented) { | ||
} | ||
_this.group.model.openPanel(panel, { | ||
skipFocus: alreadyFocused, | ||
}); | ||
if (_this.group.activePanel !== panel) { | ||
_this.group.model.openPanel(panel); | ||
} | ||
}), tab.onDrop(function (event) { | ||
@@ -306,2 +309,4 @@ _this._onDrop.fire({ | ||
}); | ||
}), tab.onWillShowOverlay(function (event) { | ||
_this._onWillShowOverlay.fire(new dockviewGroupPanelModel_1.WillShowOverlayLocationEvent(event, { kind: 'tab' })); | ||
})); | ||
@@ -336,2 +341,1 @@ var value = { value: tab, disposable: disposable }; | ||
exports.TabsContainer = TabsContainer; | ||
//# sourceMappingURL=tabsContainer.js.map |
@@ -1,2 +0,2 @@ | ||
import { DroptargetEvent } from '../../../dnd/droptarget'; | ||
import { DroptargetEvent, WillShowOverlayEvent } from '../../../dnd/droptarget'; | ||
import { DockviewComponent } from '../../dockviewComponent'; | ||
@@ -10,3 +10,3 @@ import { Event } from '../../../events'; | ||
private readonly _element; | ||
private readonly voidDropTarget; | ||
private readonly dropTraget; | ||
private readonly _onDrop; | ||
@@ -16,5 +16,5 @@ readonly onDrop: Event<DroptargetEvent>; | ||
readonly onDragStart: Event<DragEvent>; | ||
readonly onWillShowOverlay: Event<WillShowOverlayEvent>; | ||
get element(): HTMLElement; | ||
constructor(accessor: DockviewComponent, group: DockviewGroupPanel); | ||
} | ||
//# sourceMappingURL=voidContainer.d.ts.map |
@@ -25,3 +25,2 @@ "use strict"; | ||
var lifecycle_1 = require("../../../lifecycle"); | ||
var types_1 = require("../../types"); | ||
var VoidContainer = /** @class */ (function (_super) { | ||
@@ -45,3 +44,3 @@ __extends(VoidContainer, _super); | ||
var handler = new groupDragHandler_1.GroupDragHandler(_this._element, accessor, group); | ||
_this.voidDropTarget = new droptarget_1.Droptarget(_this._element, { | ||
_this.dropTraget = new droptarget_1.Droptarget(_this._element, { | ||
acceptedTargetZones: ['center'], | ||
@@ -60,10 +59,11 @@ canDisplayOverlay: function (event, position) { | ||
} | ||
return group.model.canDisplayOverlay(event, position, types_1.DockviewDropTargets.Panel); | ||
return group.model.canDisplayOverlay(event, position, 'panel'); | ||
}, | ||
}); | ||
_this.onWillShowOverlay = _this.dropTraget.onWillShowOverlay; | ||
_this.addDisposables(handler, handler.onDragStart(function (event) { | ||
_this._onDragStart.fire(event); | ||
}), _this.voidDropTarget.onDrop(function (event) { | ||
}), _this.dropTraget.onDrop(function (event) { | ||
_this._onDrop.fire(event); | ||
}), _this.voidDropTarget); | ||
}), _this.dropTraget); | ||
return _this; | ||
@@ -81,2 +81,1 @@ } | ||
exports.VoidContainer = VoidContainer; | ||
//# sourceMappingURL=voidContainer.js.map |
@@ -19,2 +19,1 @@ import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types'; | ||
} | ||
//# sourceMappingURL=watermark.d.ts.map |
@@ -88,2 +88,1 @@ "use strict"; | ||
exports.Watermark = Watermark; | ||
//# sourceMappingURL=watermark.js.map |
@@ -13,2 +13,1 @@ import { GroupviewPanelState } from './types'; | ||
} | ||
//# sourceMappingURL=deserializer.d.ts.map |
@@ -36,2 +36,1 @@ "use strict"; | ||
exports.DefaultDockviewDeserialzier = DefaultDockviewDeserialzier; | ||
//# sourceMappingURL=deserializer.js.map |
import { SerializedGridObject } from '../gridview/gridview'; | ||
import { Position } from '../dnd/droptarget'; | ||
import { DockviewPanel, IDockviewPanel } from './dockviewPanel'; | ||
import { Event } from '../events'; | ||
import { Event, Emitter } from '../events'; | ||
import { IWatermarkRenderer, GroupviewPanelState } from './types'; | ||
import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, MovementOptions } from './options'; | ||
import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview'; | ||
import { DockviewApi } from '../api/component.api'; | ||
import { Orientation } from '../splitview/splitview'; | ||
import { GroupOptions, GroupPanelViewState, GroupviewDropEvent } from './dockviewGroupPanelModel'; | ||
import { GroupOptions, GroupPanelViewState, DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent } from './dockviewGroupPanelModel'; | ||
import { DockviewGroupPanel } from './dockviewGroupPanel'; | ||
import { Parameters } from '../panel/types'; | ||
import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel'; | ||
import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer'; | ||
import { GreadyRenderContainer, DockviewPanelRenderer } from './components/greadyRenderContainer'; | ||
import { Box } from '../types'; | ||
import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlayRenderContainer'; | ||
export interface PanelReference { | ||
@@ -26,9 +25,9 @@ update: (event: { | ||
data: GroupPanelViewState; | ||
position: { | ||
height: number; | ||
width: number; | ||
left: number; | ||
top: number; | ||
}; | ||
position: Box; | ||
} | ||
export interface SerializedPopoutGroup { | ||
data: GroupPanelViewState; | ||
gridReferenceGroup?: string; | ||
position: Box | null; | ||
} | ||
export interface SerializedDockview { | ||
@@ -44,8 +43,25 @@ grid: { | ||
floatingGroups?: SerializedFloatingGroup[]; | ||
popoutGroups?: SerializedPopoutGroup[]; | ||
} | ||
export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds'>; | ||
export interface DockviewDropEvent extends GroupviewDropEvent { | ||
api: DockviewApi; | ||
group: DockviewGroupPanel | null; | ||
} | ||
export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds' | 'rootOverlayModel' | 'disableDnd'>; | ||
type MoveGroupOptions = { | ||
from: { | ||
group: DockviewGroupPanel; | ||
}; | ||
to: { | ||
group: DockviewGroupPanel; | ||
position: Position; | ||
}; | ||
}; | ||
type MoveGroupOrPanelOptions = { | ||
from: { | ||
groupId: string; | ||
panelId?: string; | ||
}; | ||
to: { | ||
group: DockviewGroupPanel; | ||
position: Position; | ||
index?: number; | ||
}; | ||
}; | ||
export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> { | ||
@@ -55,10 +71,21 @@ readonly activePanel: IDockviewPanel | undefined; | ||
readonly panels: IDockviewPanel[]; | ||
readonly floatingGroups: IDockviewFloatingGroupPanel[]; | ||
readonly onDidDrop: Event<DockviewDropEvent>; | ||
readonly orientation: Orientation; | ||
readonly onDidDrop: Event<DockviewDidDropEvent>; | ||
readonly onWillDrop: Event<DockviewWillDropEvent>; | ||
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>; | ||
readonly onDidRemovePanel: Event<IDockviewPanel>; | ||
readonly onDidAddPanel: Event<IDockviewPanel>; | ||
readonly onDidLayoutFromJSON: Event<void>; | ||
readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>; | ||
readonly onWillDragPanel: Event<TabDragEvent>; | ||
readonly onWillDragGroup: Event<GroupDragEvent>; | ||
readonly onDidRemoveGroup: Event<DockviewGroupPanel>; | ||
readonly onDidAddGroup: Event<DockviewGroupPanel>; | ||
readonly onDidActiveGroupChange: Event<DockviewGroupPanel | undefined>; | ||
readonly options: DockviewComponentOptions; | ||
updateOptions(options: DockviewComponentUpdateOptions): void; | ||
moveGroupOrPanel(referenceGroup: DockviewGroupPanel, groupId: string, itemId: string, target: Position, index?: number): void; | ||
moveGroupOrPanel(options: MoveGroupOrPanelOptions): void; | ||
moveGroup(options: MoveGroupOptions): void; | ||
doSetGroupActive: (group: DockviewGroupPanel, skipFocus?: boolean) => void; | ||
removeGroup: (group: DockviewGroupPanel) => void; | ||
options: DockviewComponentOptions; | ||
addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): IDockviewPanel; | ||
@@ -76,8 +103,2 @@ removePanel(panel: IDockviewPanel): void; | ||
fromJSON(data: SerializedDockview): void; | ||
readonly onDidRemovePanel: Event<IDockviewPanel>; | ||
readonly onDidAddPanel: Event<IDockviewPanel>; | ||
readonly onDidLayoutFromJSON: Event<void>; | ||
readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>; | ||
readonly onWillDragPanel: Event<TabDragEvent>; | ||
readonly onWillDragGroup: Event<GroupDragEvent>; | ||
addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: { | ||
@@ -87,2 +108,14 @@ x: number; | ||
}): void; | ||
addPopoutGroup(item: IDockviewPanel | DockviewGroupPanel, options?: { | ||
position?: Box; | ||
popoutUrl?: string; | ||
onDidOpen?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
onWillClose?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
}): Promise<void>; | ||
} | ||
@@ -95,3 +128,3 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> implements IDockviewComponent { | ||
private watermark; | ||
readonly greadyRenderContainer: GreadyRenderContainer; | ||
readonly overlayRenderContainer: OverlayRenderContainer; | ||
private readonly _onWillDragPanel; | ||
@@ -102,3 +135,7 @@ readonly onWillDragPanel: Event<TabDragEvent>; | ||
private readonly _onDidDrop; | ||
readonly onDidDrop: Event<DockviewDropEvent>; | ||
readonly onDidDrop: Event<DockviewDidDropEvent>; | ||
private readonly _onWillDrop; | ||
readonly onWillDrop: Event<DockviewWillDropEvent>; | ||
private readonly _onWillShowOverlay; | ||
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>; | ||
private readonly _onDidRemovePanel; | ||
@@ -112,3 +149,13 @@ readonly onDidRemovePanel: Event<IDockviewPanel>; | ||
readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>; | ||
readonly floatingGroups: DockviewFloatingGroupPanel[]; | ||
private readonly _onDidMovePanel; | ||
private readonly _floatingGroups; | ||
private readonly _popoutGroups; | ||
private readonly _rootDropTarget; | ||
private _ignoreEvents; | ||
private readonly _onDidRemoveGroup; | ||
readonly onDidRemoveGroup: Event<DockviewGroupPanel>; | ||
protected readonly _onDidAddGroup: Emitter<DockviewGroupPanel>; | ||
readonly onDidAddGroup: Event<DockviewGroupPanel>; | ||
private readonly _onDidActiveGroupChange; | ||
readonly onDidActiveGroupChange: Event<DockviewGroupPanel | undefined>; | ||
get orientation(): Orientation; | ||
@@ -121,2 +168,16 @@ get totalPanels(): number; | ||
constructor(options: DockviewComponentOptions); | ||
addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { | ||
skipRemoveGroup?: boolean; | ||
position?: Box; | ||
popoutUrl?: string; | ||
onDidOpen?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
onWillClose?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
overridePopoutGroup?: DockviewGroupPanel; | ||
}): Promise<void>; | ||
addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, coord?: { | ||
@@ -130,2 +191,3 @@ x?: number; | ||
inDragMode: boolean; | ||
skipActiveGroup?: boolean; | ||
}): void; | ||
@@ -153,2 +215,3 @@ private orthogonalize; | ||
skipDispose: boolean; | ||
skipSetActiveGroup?: boolean; | ||
}): void; | ||
@@ -161,2 +224,4 @@ createWatermarkComponent(): IWatermarkRenderer; | ||
skipDispose?: boolean; | ||
skipPopoutAssociated?: boolean; | ||
skipPopoutReturn?: boolean; | ||
} | undefined): void; | ||
@@ -166,6 +231,12 @@ protected doRemoveGroup(group: DockviewGroupPanel, options?: { | ||
skipDispose?: boolean; | ||
skipPopoutAssociated?: boolean; | ||
skipPopoutReturn?: boolean; | ||
} | undefined): DockviewGroupPanel; | ||
moveGroupOrPanel(destinationGroup: DockviewGroupPanel, sourceGroupId: string, sourceItemId: string | undefined, destinationTarget: Position, destinationIndex?: number): void; | ||
private moveGroup; | ||
doSetGroupAndPanelActive(group: DockviewGroupPanel | undefined, skipFocus?: boolean): void; | ||
private _moving; | ||
movingLock<T>(func: () => T): T; | ||
moveGroupOrPanel(options: MoveGroupOrPanelOptions): void; | ||
moveGroup(options: MoveGroupOptions): void; | ||
doSetGroupActive(group: DockviewGroupPanel | undefined): void; | ||
doSetGroupAndPanelActive(group: DockviewGroupPanel | undefined): void; | ||
private getNextGroupId; | ||
createGroup(options?: GroupOptions): DockviewGroupPanel; | ||
@@ -176,2 +247,2 @@ private createPanel; | ||
} | ||
//# sourceMappingURL=dockviewComponent.d.ts.map | ||
export {}; |
@@ -8,3 +8,3 @@ import { Overlay } from '../dnd/overlay'; | ||
top: number; | ||
side: number; | ||
left: number; | ||
height: number; | ||
@@ -20,3 +20,3 @@ width: number; | ||
top: number; | ||
side: number; | ||
left: number; | ||
height: number; | ||
@@ -26,2 +26,1 @@ width: number; | ||
} | ||
//# sourceMappingURL=dockviewFloatingGroupPanel.d.ts.map |
@@ -35,2 +35,1 @@ "use strict"; | ||
exports.DockviewFloatingGroupPanel = DockviewFloatingGroupPanel; | ||
//# sourceMappingURL=dockviewFloatingGroupPanel.js.map |
@@ -25,2 +25,3 @@ import { IFrameworkPart } from '../panel/types'; | ||
constructor(accessor: DockviewComponent, id: string, options: GroupOptions); | ||
focus(): void; | ||
initialize(): void; | ||
@@ -32,2 +33,1 @@ setActive(isActive: boolean): void; | ||
} | ||
//# sourceMappingURL=dockviewGroupPanel.d.ts.map |
@@ -22,2 +22,4 @@ "use strict"; | ||
var dockviewGroupPanelApi_1 = require("../api/dockviewGroupPanelApi"); | ||
var MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100; | ||
var MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100; | ||
var DockviewGroupPanel = /** @class */ (function (_super) { | ||
@@ -27,4 +29,4 @@ __extends(DockviewGroupPanel, _super); | ||
var _this = _super.call(this, id, 'groupview_default', { | ||
minimumHeight: 100, | ||
minimumWidth: 100, | ||
minimumHeight: MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT, | ||
minimumWidth: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH, | ||
}, new dockviewGroupPanelApi_1.DockviewGroupPanelApiImpl(id, accessor)) || this; | ||
@@ -80,2 +82,8 @@ _this.api.initialize(_this); // cannot use 'this' after after 'super' call | ||
}); | ||
DockviewGroupPanel.prototype.focus = function () { | ||
if (!this.api.isActive) { | ||
this.api.setActive(); | ||
} | ||
_super.prototype.focus.call(this); | ||
}; | ||
DockviewGroupPanel.prototype.initialize = function () { | ||
@@ -101,2 +109,1 @@ this._model.initialize(); | ||
exports.DockviewGroupPanel = DockviewGroupPanel; | ||
//# sourceMappingURL=dockviewGroupPanel.js.map |
@@ -0,5 +1,6 @@ | ||
import { DockviewApi } from '../api/component.api'; | ||
import { PanelTransfer } from '../dnd/dataTransfer'; | ||
import { Position } from '../dnd/droptarget'; | ||
import { Position, WillShowOverlayEvent } from '../dnd/droptarget'; | ||
import { DockviewComponent } from './dockviewComponent'; | ||
import { Event } from '../events'; | ||
import { DockviewEvent, Event, IDockviewEvent } from '../events'; | ||
import { IViewSize } from '../gridview/gridview'; | ||
@@ -12,15 +13,3 @@ import { CompositeDisposable } from '../lifecycle'; | ||
import { IDockviewPanel } from './dockviewPanel'; | ||
export interface DndService { | ||
canDisplayOverlay(group: IDockviewGroupPanelModel, event: DragEvent, target: DockviewDropTargets): boolean; | ||
onDrop(group: IDockviewGroupPanelModel, event: DragEvent, position: Position, index?: number): void; | ||
} | ||
export interface IGroupItem { | ||
id: string; | ||
header: { | ||
element: HTMLElement; | ||
}; | ||
body: { | ||
element: HTMLElement; | ||
}; | ||
} | ||
import { OverlayRenderContainer } from '../overlayRenderContainer'; | ||
interface GroupMoveEvent { | ||
@@ -35,2 +24,3 @@ groupId: string; | ||
hideHeader?: boolean; | ||
skipSetActive?: boolean; | ||
} | ||
@@ -47,11 +37,35 @@ export interface GroupOptions extends CoreGroupOptions { | ||
} | ||
export interface GroupviewChangeEvent { | ||
export interface DockviewGroupChangeEvent { | ||
readonly panel: IDockviewPanel; | ||
} | ||
export interface GroupviewDropEvent { | ||
readonly nativeEvent: DragEvent; | ||
readonly position: Position; | ||
readonly index?: number; | ||
export declare class DockviewDidDropEvent extends DockviewEvent { | ||
private readonly options; | ||
get nativeEvent(): DragEvent; | ||
get position(): Position; | ||
get panel(): IDockviewPanel | undefined; | ||
get group(): DockviewGroupPanel | undefined; | ||
get api(): DockviewApi; | ||
constructor(options: { | ||
readonly nativeEvent: DragEvent; | ||
readonly position: Position; | ||
readonly panel?: IDockviewPanel; | ||
getData(): PanelTransfer | undefined; | ||
group?: DockviewGroupPanel; | ||
api: DockviewApi; | ||
}); | ||
getData(): PanelTransfer | undefined; | ||
} | ||
export declare class DockviewWillDropEvent extends DockviewDidDropEvent { | ||
private readonly _kind; | ||
get kind(): DockviewGroupDropLocation; | ||
constructor(options: { | ||
readonly nativeEvent: DragEvent; | ||
readonly position: Position; | ||
readonly panel?: IDockviewPanel; | ||
getData(): PanelTransfer | undefined; | ||
kind: DockviewGroupDropLocation; | ||
group?: DockviewGroupPanel; | ||
api: DockviewApi; | ||
}); | ||
} | ||
export interface IHeader { | ||
@@ -61,2 +75,3 @@ hidden: boolean; | ||
export type DockviewGroupPanelLocked = boolean | 'no-drop-target'; | ||
export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content'; | ||
export interface IDockviewGroupPanelModel extends IPanel { | ||
@@ -69,6 +84,7 @@ readonly isActive: boolean; | ||
readonly isContentFocused: boolean; | ||
readonly onDidDrop: Event<GroupviewDropEvent>; | ||
readonly onDidAddPanel: Event<GroupviewChangeEvent>; | ||
readonly onDidRemovePanel: Event<GroupviewChangeEvent>; | ||
readonly onDidActivePanelChange: Event<GroupviewChangeEvent>; | ||
readonly onDidDrop: Event<DockviewDidDropEvent>; | ||
readonly onWillDrop: Event<DockviewWillDropEvent>; | ||
readonly onDidAddPanel: Event<DockviewGroupChangeEvent>; | ||
readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>; | ||
readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>; | ||
readonly onMove: Event<GroupMoveEvent>; | ||
@@ -100,2 +116,22 @@ locked: DockviewGroupPanelLocked; | ||
} | ||
export type DockviewGroupLocation = { | ||
type: 'grid'; | ||
} | { | ||
type: 'floating'; | ||
} | { | ||
type: 'popout'; | ||
getWindow: () => Window; | ||
}; | ||
export declare class WillShowOverlayLocationEvent implements IDockviewEvent { | ||
private readonly event; | ||
private _kind; | ||
get kind(): DockviewGroupDropLocation; | ||
get nativeEvent(): DragEvent; | ||
get position(): Position; | ||
get defaultPrevented(): boolean; | ||
preventDefault(): void; | ||
constructor(event: WillShowOverlayEvent, options: { | ||
kind: DockviewGroupDropLocation; | ||
}); | ||
} | ||
export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel { | ||
@@ -113,6 +149,6 @@ private readonly container; | ||
private _locked; | ||
private _isFloating; | ||
private _rightHeaderActions; | ||
private _leftHeaderActions; | ||
private _prefixHeaderActions; | ||
private _location; | ||
private mostRecentlyUsed; | ||
@@ -127,3 +163,7 @@ private readonly _onDidChange; | ||
private readonly _onDidDrop; | ||
readonly onDidDrop: Event<GroupviewDropEvent>; | ||
readonly onDidDrop: Event<DockviewDidDropEvent>; | ||
private readonly _onWillDrop; | ||
readonly onWillDrop: Event<DockviewWillDropEvent>; | ||
private readonly _onWillShowOverlay; | ||
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>; | ||
private readonly _onTabDragStart; | ||
@@ -134,7 +174,8 @@ readonly onTabDragStart: Event<TabDragEvent>; | ||
private readonly _onDidAddPanel; | ||
readonly onDidAddPanel: Event<GroupviewChangeEvent>; | ||
readonly onDidAddPanel: Event<DockviewGroupChangeEvent>; | ||
private readonly _onDidRemovePanel; | ||
readonly onDidRemovePanel: Event<GroupviewChangeEvent>; | ||
readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>; | ||
private readonly _onDidActivePanelChange; | ||
readonly onDidActivePanelChange: Event<GroupviewChangeEvent>; | ||
readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>; | ||
private readonly _api; | ||
get element(): HTMLElement; | ||
@@ -151,5 +192,9 @@ get activePanel(): IDockviewPanel | undefined; | ||
get isContentFocused(): boolean; | ||
get isFloating(): boolean; | ||
set isFloating(value: boolean); | ||
get location(): DockviewGroupLocation; | ||
set location(value: DockviewGroupLocation); | ||
constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: DockviewGroupPanel); | ||
focusContent(): void; | ||
private _overwriteRenderContainer; | ||
set renderContainer(value: OverlayRenderContainer | null); | ||
get renderContainer(): OverlayRenderContainer; | ||
initialize(): void; | ||
@@ -173,7 +218,9 @@ rerender(panel: IDockviewPanel): void; | ||
index?: number; | ||
skipFocus?: boolean; | ||
skipSetPanelActive?: boolean; | ||
skipSetActive?: boolean; | ||
skipSetGroupActive?: boolean; | ||
}): void; | ||
removePanel(groupItemOrId: IDockviewPanel | string): IDockviewPanel; | ||
removePanel(groupItemOrId: IDockviewPanel | string, options?: { | ||
skipSetActive?: boolean; | ||
skipSetActiveGroup?: boolean; | ||
}): IDockviewPanel; | ||
closeAllPanels(): void; | ||
@@ -184,3 +231,3 @@ closePanel(panel: IDockviewPanel): void; | ||
updateActions(element: HTMLElement | undefined): void; | ||
setActive(isGroupActive: boolean, skipFocus?: boolean, force?: boolean): void; | ||
setActive(isGroupActive: boolean, force?: boolean): void; | ||
layout(width: number, height: number): void; | ||
@@ -198,2 +245,1 @@ private _removePanel; | ||
export {}; | ||
//# sourceMappingURL=dockviewGroupPanelModel.d.ts.map |
@@ -54,3 +54,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.DockviewGroupPanelModel = void 0; | ||
exports.DockviewGroupPanelModel = exports.WillShowOverlayLocationEvent = exports.DockviewWillDropEvent = exports.DockviewDidDropEvent = void 0; | ||
var component_api_1 = require("../api/component.api"); | ||
@@ -63,2 +63,106 @@ var dataTransfer_1 = require("../dnd/dataTransfer"); | ||
var tabsContainer_1 = require("./components/titlebar/tabsContainer"); | ||
var DockviewDidDropEvent = /** @class */ (function (_super) { | ||
__extends(DockviewDidDropEvent, _super); | ||
function DockviewDidDropEvent(options) { | ||
var _this = _super.call(this) || this; | ||
_this.options = options; | ||
return _this; | ||
} | ||
Object.defineProperty(DockviewDidDropEvent.prototype, "nativeEvent", { | ||
get: function () { | ||
return this.options.nativeEvent; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(DockviewDidDropEvent.prototype, "position", { | ||
get: function () { | ||
return this.options.position; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(DockviewDidDropEvent.prototype, "panel", { | ||
get: function () { | ||
return this.options.panel; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(DockviewDidDropEvent.prototype, "group", { | ||
get: function () { | ||
return this.options.group; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(DockviewDidDropEvent.prototype, "api", { | ||
get: function () { | ||
return this.options.api; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
DockviewDidDropEvent.prototype.getData = function () { | ||
return this.options.getData(); | ||
}; | ||
return DockviewDidDropEvent; | ||
}(events_1.DockviewEvent)); | ||
exports.DockviewDidDropEvent = DockviewDidDropEvent; | ||
var DockviewWillDropEvent = /** @class */ (function (_super) { | ||
__extends(DockviewWillDropEvent, _super); | ||
function DockviewWillDropEvent(options) { | ||
var _this = _super.call(this, options) || this; | ||
_this._kind = options.kind; | ||
return _this; | ||
} | ||
Object.defineProperty(DockviewWillDropEvent.prototype, "kind", { | ||
get: function () { | ||
return this._kind; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
return DockviewWillDropEvent; | ||
}(DockviewDidDropEvent)); | ||
exports.DockviewWillDropEvent = DockviewWillDropEvent; | ||
var WillShowOverlayLocationEvent = /** @class */ (function () { | ||
function WillShowOverlayLocationEvent(event, options) { | ||
this.event = event; | ||
this._kind = options.kind; | ||
} | ||
Object.defineProperty(WillShowOverlayLocationEvent.prototype, "kind", { | ||
get: function () { | ||
return this._kind; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(WillShowOverlayLocationEvent.prototype, "nativeEvent", { | ||
get: function () { | ||
return this.event.nativeEvent; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(WillShowOverlayLocationEvent.prototype, "position", { | ||
get: function () { | ||
return this.event.position; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(WillShowOverlayLocationEvent.prototype, "defaultPrevented", { | ||
get: function () { | ||
return this.event.defaultPrevented; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
WillShowOverlayLocationEvent.prototype.preventDefault = function () { | ||
this.event.preventDefault(); | ||
}; | ||
return WillShowOverlayLocationEvent; | ||
}()); | ||
exports.WillShowOverlayLocationEvent = WillShowOverlayLocationEvent; | ||
var DockviewGroupPanelModel = /** @class */ (function (_super) { | ||
@@ -76,3 +180,3 @@ __extends(DockviewGroupPanelModel, _super); | ||
_this._locked = false; | ||
_this._isFloating = false; | ||
_this._location = { type: 'grid' }; | ||
_this.mostRecentlyUsed = []; | ||
@@ -88,2 +192,6 @@ _this._onDidChange = new events_1.Emitter(); | ||
_this.onDidDrop = _this._onDidDrop.event; | ||
_this._onWillDrop = new events_1.Emitter(); | ||
_this.onWillDrop = _this._onWillDrop.event; | ||
_this._onWillShowOverlay = new events_1.Emitter(); | ||
_this.onWillShowOverlay = _this._onWillShowOverlay.event; | ||
_this._onTabDragStart = new events_1.Emitter(); | ||
@@ -99,3 +207,5 @@ _this.onTabDragStart = _this._onTabDragStart.event; | ||
_this.onDidActivePanelChange = _this._onDidActivePanelChange.event; | ||
_this._overwriteRenderContainer = null; | ||
(0, dom_1.toggleClass)(_this.container, 'groupview', true); | ||
_this._api = new component_api_1.DockviewApi(_this.accessor); | ||
_this.tabsContainer = new tabsContainer_1.TabsContainer(_this.accessor, _this.groupPanel); | ||
@@ -106,3 +216,3 @@ _this.contentContainer = new content_1.ContentContainer(_this.accessor, _this); | ||
_this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false; | ||
_this.addDisposables(_this._onTabDragStart, _this._onGroupDragStart, _this.tabsContainer.onTabDragStart(function (event) { | ||
_this.addDisposables(_this._onTabDragStart, _this._onGroupDragStart, _this._onWillShowOverlay, _this.tabsContainer.onTabDragStart(function (event) { | ||
_this._onTabDragStart.fire(event); | ||
@@ -112,10 +222,16 @@ }), _this.tabsContainer.onGroupDragStart(function (event) { | ||
}), _this.tabsContainer.onDrop(function (event) { | ||
_this.handleDropEvent(event.event, 'center', event.index); | ||
_this.handleDropEvent('header', event.event, 'center', event.index); | ||
}), _this.contentContainer.onDidFocus(function () { | ||
_this.accessor.doSetGroupActive(_this.groupPanel, true); | ||
_this.accessor.doSetGroupActive(_this.groupPanel); | ||
}), _this.contentContainer.onDidBlur(function () { | ||
// noop | ||
}), _this.contentContainer.dropTarget.onDrop(function (event) { | ||
_this.handleDropEvent(event.nativeEvent, event.position); | ||
}), _this._onMove, _this._onDidChange, _this._onDidDrop, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidActivePanelChange); | ||
_this.handleDropEvent('content', event.nativeEvent, event.position); | ||
}), _this.tabsContainer.onWillShowOverlay(function (event) { | ||
_this._onWillShowOverlay.fire(event); | ||
}), _this.contentContainer.dropTarget.onWillShowOverlay(function (event) { | ||
_this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, { | ||
kind: 'content', | ||
})); | ||
}), _this._onMove, _this._onDidChange, _this._onDidDrop, _this._onWillDrop, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidActivePanelChange); | ||
return _this; | ||
@@ -200,12 +316,34 @@ } | ||
}); | ||
Object.defineProperty(DockviewGroupPanelModel.prototype, "isFloating", { | ||
Object.defineProperty(DockviewGroupPanelModel.prototype, "location", { | ||
get: function () { | ||
return this._isFloating; | ||
return this._location; | ||
}, | ||
set: function (value) { | ||
this._isFloating = value; | ||
this.contentContainer.dropTarget.setTargetZones(value ? ['center'] : ['top', 'bottom', 'left', 'right', 'center']); | ||
(0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', value); | ||
this.groupPanel.api._onDidFloatingStateChange.fire({ | ||
isFloating: this.isFloating, | ||
this._location = value; | ||
(0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', false); | ||
(0, dom_1.toggleClass)(this.container, 'dv-groupview-popout', false); | ||
switch (value.type) { | ||
case 'grid': | ||
this.contentContainer.dropTarget.setTargetZones([ | ||
'top', | ||
'bottom', | ||
'left', | ||
'right', | ||
'center', | ||
]); | ||
break; | ||
case 'floating': | ||
this.contentContainer.dropTarget.setTargetZones(['center']); | ||
this.contentContainer.dropTarget.setTargetZones(value | ||
? ['center'] | ||
: ['top', 'bottom', 'left', 'right', 'center']); | ||
(0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', true); | ||
break; | ||
case 'popout': | ||
this.contentContainer.dropTarget.setTargetZones(['center']); | ||
(0, dom_1.toggleClass)(this.container, 'dv-groupview-popout', true); | ||
break; | ||
} | ||
this.groupPanel.api._onDidLocationChange.fire({ | ||
location: this.location, | ||
}); | ||
@@ -216,6 +354,26 @@ }, | ||
}); | ||
DockviewGroupPanelModel.prototype.focusContent = function () { | ||
this.contentContainer.element.focus(); | ||
}; | ||
Object.defineProperty(DockviewGroupPanelModel.prototype, "renderContainer", { | ||
get: function () { | ||
var _a; | ||
return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer); | ||
}, | ||
set: function (value) { | ||
var _this = this; | ||
this.panels.forEach(function (panel) { | ||
_this.renderContainer.detatch(panel); | ||
}); | ||
this._overwriteRenderContainer = value; | ||
this.panels.forEach(function (panel) { | ||
_this.rerender(panel); | ||
}); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
DockviewGroupPanelModel.prototype.initialize = function () { | ||
var _this = this; | ||
var _a, _b; | ||
if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) { | ||
if (this.options.panels) { | ||
this.options.panels.forEach(function (panel) { | ||
@@ -225,3 +383,3 @@ _this.doAddPanel(panel); | ||
} | ||
if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.activePanel) { | ||
if (this.options.activePanel) { | ||
this.openPanel(this.options.activePanel); | ||
@@ -231,3 +389,3 @@ } | ||
// correctly initialized | ||
this.setActive(this.isActive, true, true); | ||
this.setActive(this.isActive, true); | ||
this.updateContainer(); | ||
@@ -239,3 +397,3 @@ if (this.accessor.options.createRightHeaderActionsElement) { | ||
this._rightHeaderActions.init({ | ||
containerApi: new component_api_1.DockviewApi(this.accessor), | ||
containerApi: this._api, | ||
api: this.groupPanel.api, | ||
@@ -250,3 +408,3 @@ }); | ||
this._leftHeaderActions.init({ | ||
containerApi: new component_api_1.DockviewApi(this.accessor), | ||
containerApi: this._api, | ||
api: this.groupPanel.api, | ||
@@ -261,3 +419,3 @@ }); | ||
this._prefixHeaderActions.init({ | ||
containerApi: new component_api_1.DockviewApi(this.accessor), | ||
containerApi: this._api, | ||
api: this.groupPanel.api, | ||
@@ -269,3 +427,3 @@ }); | ||
DockviewGroupPanelModel.prototype.rerender = function (panel) { | ||
this.contentContainer.renderPanel(panel); | ||
this.contentContainer.renderPanel(panel, { asActive: false }); | ||
}; | ||
@@ -343,6 +501,12 @@ DockviewGroupPanelModel.prototype.indexOf = function (panel) { | ||
DockviewGroupPanelModel.prototype.focus = function () { | ||
var _a, _b; | ||
(_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a); | ||
var _a; | ||
(_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus(); | ||
}; | ||
DockviewGroupPanelModel.prototype.openPanel = function (panel, options) { | ||
/** | ||
* set the panel group | ||
* add the panel | ||
* check if group active | ||
* check if panel active | ||
*/ | ||
if (options === void 0) { options = {}; } | ||
@@ -353,22 +517,28 @@ if (typeof options.index !== 'number' || | ||
} | ||
var skipSetPanelActive = !!options.skipSetPanelActive; | ||
var skipSetGroupActive = !!options.skipSetGroupActive; | ||
var skipSetActive = !!options.skipSetActive; | ||
// ensure the group is updated before we fire any events | ||
panel.updateParentGroup(this.groupPanel, true); | ||
panel.updateParentGroup(this.groupPanel, { | ||
skipSetActive: options.skipSetActive, | ||
}); | ||
this.doAddPanel(panel, options.index, { | ||
skipSetActive: skipSetActive, | ||
}); | ||
if (this._activePanel === panel) { | ||
if (!skipSetGroupActive) { | ||
this.accessor.doSetGroupActive(this.groupPanel); | ||
} | ||
this.contentContainer.renderPanel(panel, { asActive: true }); | ||
return; | ||
} | ||
this.doAddPanel(panel, options.index, skipSetPanelActive); | ||
if (!skipSetPanelActive) { | ||
if (!skipSetActive) { | ||
this.doSetActivePanel(panel); | ||
} | ||
if (!skipSetGroupActive) { | ||
this.accessor.doSetGroupActive(this.groupPanel, !!options.skipFocus); | ||
if (!options.skipSetGroupActive) { | ||
this.accessor.doSetGroupActive(this.groupPanel); | ||
} | ||
this.updateContainer(); | ||
if (!options.skipSetActive) { | ||
this.updateContainer(); | ||
} | ||
}; | ||
DockviewGroupPanelModel.prototype.removePanel = function (groupItemOrId) { | ||
DockviewGroupPanelModel.prototype.removePanel = function (groupItemOrId, options) { | ||
if (options === void 0) { options = { | ||
skipSetActive: false, | ||
}; } | ||
var id = typeof groupItemOrId === 'string' | ||
@@ -381,3 +551,3 @@ ? groupItemOrId | ||
} | ||
return this._removePanel(panelToRemove); | ||
return this._removePanel(panelToRemove, options); | ||
}; | ||
@@ -419,10 +589,5 @@ DockviewGroupPanelModel.prototype.closeAllPanels = function () { | ||
}; | ||
DockviewGroupPanelModel.prototype.setActive = function (isGroupActive, skipFocus, force) { | ||
var _a, _b, _c, _d; | ||
if (skipFocus === void 0) { skipFocus = false; } | ||
DockviewGroupPanelModel.prototype.setActive = function (isGroupActive, force) { | ||
if (force === void 0) { force = false; } | ||
if (!force && this.isActive === isGroupActive) { | ||
if (!skipFocus) { | ||
(_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a); | ||
} | ||
return; | ||
@@ -438,7 +603,2 @@ } | ||
this.updateContainer(); | ||
if (isGroupActive) { | ||
if (!skipFocus) { | ||
(_d = (_c = this._activePanel) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c); | ||
} | ||
} | ||
}; | ||
@@ -454,3 +614,3 @@ DockviewGroupPanelModel.prototype.layout = function (width, height) { | ||
}; | ||
DockviewGroupPanelModel.prototype._removePanel = function (panel) { | ||
DockviewGroupPanelModel.prototype._removePanel = function (panel, options) { | ||
var isActivePanel = this._activePanel === panel; | ||
@@ -460,3 +620,6 @@ this.doRemovePanel(panel); | ||
var nextPanel = this.mostRecentlyUsed[0]; | ||
this.openPanel(nextPanel); | ||
this.openPanel(nextPanel, { | ||
skipSetActive: options.skipSetActive, | ||
skipSetGroupActive: options.skipSetActiveGroup, | ||
}); | ||
} | ||
@@ -466,3 +629,5 @@ if (this._activePanel && this.panels.length === 0) { | ||
} | ||
this.updateContainer(); | ||
if (!options.skipSetActive) { | ||
this.updateContainer(); | ||
} | ||
return panel; | ||
@@ -482,5 +647,5 @@ }; | ||
}; | ||
DockviewGroupPanelModel.prototype.doAddPanel = function (panel, index, skipSetActive) { | ||
DockviewGroupPanelModel.prototype.doAddPanel = function (panel, index, options) { | ||
if (index === void 0) { index = this.panels.length; } | ||
if (skipSetActive === void 0) { skipSetActive = false; } | ||
if (options === void 0) { options = { skipSetActive: false }; } | ||
var existingPanel = this._panels.indexOf(panel); | ||
@@ -491,3 +656,3 @@ var hasExistingPanel = existingPanel > -1; | ||
this.tabsContainer.openPanel(panel, index); | ||
if (!skipSetActive) { | ||
if (!options.skipSetActive) { | ||
this.contentContainer.openPanel(panel); | ||
@@ -504,2 +669,5 @@ } | ||
DockviewGroupPanelModel.prototype.doSetActivePanel = function (panel) { | ||
if (this._activePanel === panel) { | ||
return; | ||
} | ||
this._activePanel = panel; | ||
@@ -510,3 +678,5 @@ if (panel) { | ||
this.updateMru(panel); | ||
this._onDidActivePanelChange.fire({ panel: panel }); | ||
this._onDidActivePanelChange.fire({ | ||
panel: panel, | ||
}); | ||
} | ||
@@ -524,9 +694,7 @@ }; | ||
(0, dom_1.toggleClass)(this.container, 'empty', this.isEmpty); | ||
this.panels.forEach(function (panel) { | ||
return panel.updateParentGroup(_this.groupPanel, _this.isActive); | ||
}); | ||
this.panels.forEach(function (panel) { return panel.runEvents(); }); | ||
if (this.isEmpty && !this.watermark) { | ||
var watermark = this.accessor.createWatermarkComponent(); | ||
watermark.init({ | ||
containerApi: new component_api_1.DockviewApi(this.accessor), | ||
containerApi: this._api, | ||
group: this.groupPanel, | ||
@@ -564,6 +732,28 @@ }); | ||
}; | ||
DockviewGroupPanelModel.prototype.handleDropEvent = function (event, position, index) { | ||
DockviewGroupPanelModel.prototype.handleDropEvent = function (type, event, position, index) { | ||
if (this.locked === 'no-drop-target') { | ||
return; | ||
} | ||
function getKind() { | ||
switch (type) { | ||
case 'header': | ||
return typeof index === 'number' ? 'tab' : 'header_space'; | ||
case 'content': | ||
return 'content'; | ||
} | ||
} | ||
var panel = typeof index === 'number' ? this.panels[index] : undefined; | ||
var willDropEvent = new DockviewWillDropEvent({ | ||
nativeEvent: event, | ||
position: position, | ||
panel: panel, | ||
getData: function () { return (0, dataTransfer_1.getPanelData)(); }, | ||
kind: getKind(), | ||
group: this.groupPanel, | ||
api: this._api, | ||
}); | ||
this._onWillDrop.fire(willDropEvent); | ||
if (willDropEvent.defaultPrevented) { | ||
return; | ||
} | ||
var data = (0, dataTransfer_1.getPanelData)(); | ||
@@ -601,8 +791,10 @@ if (data && data.viewId === this.accessor.id) { | ||
else { | ||
this._onDidDrop.fire({ | ||
this._onDidDrop.fire(new DockviewDidDropEvent({ | ||
nativeEvent: event, | ||
position: position, | ||
index: index, | ||
panel: panel, | ||
getData: function () { return (0, dataTransfer_1.getPanelData)(); }, | ||
}); | ||
group: this.groupPanel, | ||
api: this._api, | ||
})); | ||
} | ||
@@ -616,2 +808,3 @@ }; | ||
(_d = (_c = this.watermark) === null || _c === void 0 ? void 0 : _c.dispose) === null || _d === void 0 ? void 0 : _d.call(_c); | ||
this.watermark = undefined; | ||
try { | ||
@@ -630,3 +823,2 @@ for (var _e = __values(this.panels), _f = _e.next(); !_f.done; _f = _e.next()) { | ||
} | ||
// this.dropTarget.dispose(); | ||
this.tabsContainer.dispose(); | ||
@@ -638,2 +830,1 @@ this.contentContainer.dispose(); | ||
exports.DockviewGroupPanelModel = DockviewGroupPanelModel; | ||
//# sourceMappingURL=dockviewGroupPanelModel.js.map |
@@ -9,3 +9,3 @@ import { DockviewApi } from '../api/component.api'; | ||
import { DockviewComponent } from './dockviewComponent'; | ||
import { DockviewPanelRenderer } from './components/greadyRenderContainer'; | ||
import { DockviewPanelRenderer } from '../overlayRenderContainer'; | ||
export interface IDockviewPanel extends IDisposable, IPanel { | ||
@@ -17,3 +17,5 @@ readonly view: IDockviewPanelModel; | ||
readonly params: Parameters | undefined; | ||
updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void; | ||
updateParentGroup(group: DockviewGroupPanel, options?: { | ||
skipSetActive?: boolean; | ||
}): void; | ||
init(params: IGroupPanelInitParameters): void; | ||
@@ -23,2 +25,3 @@ toJSON(): GroupviewPanelState; | ||
update(event: PanelUpdateEvent): void; | ||
runEvents(): void; | ||
} | ||
@@ -48,6 +51,8 @@ export declare class DockviewPanel extends CompositeDisposable implements IDockviewPanel { | ||
update(event: PanelUpdateEvent): void; | ||
updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void; | ||
updateParentGroup(group: DockviewGroupPanel, options?: { | ||
skipSetActive?: boolean; | ||
}): void; | ||
runEvents(): void; | ||
layout(width: number, height: number): void; | ||
dispose(): void; | ||
} | ||
//# sourceMappingURL=dockviewPanel.d.ts.map |
@@ -43,2 +43,3 @@ "use strict"; | ||
var lifecycle_1 = require("../lifecycle"); | ||
var panelApi_1 = require("../api/panelApi"); | ||
var DockviewPanel = /** @class */ (function (_super) { | ||
@@ -101,3 +102,10 @@ __extends(DockviewPanel, _super); | ||
DockviewPanel.prototype.focus = function () { | ||
this.api._onFocusEvent.fire(); | ||
var event = new panelApi_1.WillFocusEvent(); | ||
this.api._onWillFocus.fire(event); | ||
if (event.defaultPrevented) { | ||
return; | ||
} | ||
if (!this.api.isActive) { | ||
this.api.setActive(); | ||
} | ||
}; | ||
@@ -170,16 +178,36 @@ DockviewPanel.prototype.toJSON = function () { | ||
}; | ||
DockviewPanel.prototype.updateParentGroup = function (group, isGroupActive) { | ||
DockviewPanel.prototype.updateParentGroup = function (group, options) { | ||
this._group = group; | ||
this.api.group = group; | ||
this.api.group = this._group; | ||
var isPanelVisible = this._group.model.isPanelActive(this); | ||
this.api._onDidActiveChange.fire({ | ||
isActive: isGroupActive && isPanelVisible, | ||
}); | ||
this.api._onDidVisibilityChange.fire({ | ||
isVisible: isPanelVisible, | ||
}); | ||
this.view.updateParentGroup(this._group, this._group.model.isPanelActive(this)); | ||
var isActive = this.group.api.isActive && isPanelVisible; | ||
if (!(options === null || options === void 0 ? void 0 : options.skipSetActive)) { | ||
if (this.api.isActive !== isActive) { | ||
this.api._onDidActiveChange.fire({ | ||
isActive: this.group.api.isActive && isPanelVisible, | ||
}); | ||
} | ||
} | ||
if (this.api.isVisible !== isPanelVisible) { | ||
this.api._onDidVisibilityChange.fire({ | ||
isVisible: isPanelVisible, | ||
}); | ||
} | ||
}; | ||
DockviewPanel.prototype.runEvents = function () { | ||
var isPanelVisible = this._group.model.isPanelActive(this); | ||
var isActive = this.group.api.isActive && isPanelVisible; | ||
if (this.api.isActive !== isActive) { | ||
this.api._onDidActiveChange.fire({ | ||
isActive: this.group.api.isActive && isPanelVisible, | ||
}); | ||
} | ||
if (this.api.isVisible !== isPanelVisible) { | ||
this.api._onDidVisibilityChange.fire({ | ||
isVisible: isPanelVisible, | ||
}); | ||
} | ||
}; | ||
DockviewPanel.prototype.layout = function (width, height) { | ||
// the obtain the correct dimensions of the content panel we must deduct the tab height | ||
// TODO: Can we somehow do height without header height or indicate what the header height is? | ||
this.api._onDidDimensionChange.fire({ | ||
@@ -198,2 +226,1 @@ width: width, | ||
exports.DockviewPanel = DockviewPanel; | ||
//# sourceMappingURL=dockviewPanel.js.map |
@@ -23,4 +23,2 @@ import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from './types'; | ||
private readonly _tab; | ||
private _group; | ||
private _isPanelVisible; | ||
get content(): IContentRenderer; | ||
@@ -30,3 +28,3 @@ get tab(): ITabRenderer; | ||
init(params: GroupPanelPartInitParameters): void; | ||
updateParentGroup(group: DockviewGroupPanel, isPanelVisible: boolean): void; | ||
updateParentGroup(_group: DockviewGroupPanel, _isPanelVisible: boolean): void; | ||
layout(width: number, height: number): void; | ||
@@ -38,2 +36,1 @@ update(event: PanelUpdateEvent): void; | ||
} | ||
//# sourceMappingURL=dockviewPanelModel.d.ts.map |
@@ -23,4 +23,2 @@ "use strict"; | ||
this.tabComponent = tabComponent; | ||
this._group = null; | ||
this._isPanelVisible = null; | ||
this._content = this.createContentComponent(this.id, contentComponent); | ||
@@ -47,21 +45,4 @@ this._tab = this.createTabComponent(this.id, tabComponent); | ||
}; | ||
DockviewPanelModel.prototype.updateParentGroup = function (group, isPanelVisible) { | ||
if (group !== this._group) { | ||
this._group = group; | ||
if (this._content.onGroupChange) { | ||
this._content.onGroupChange(group); | ||
} | ||
if (this._tab.onGroupChange) { | ||
this._tab.onGroupChange(group); | ||
} | ||
} | ||
if (isPanelVisible !== this._isPanelVisible) { | ||
this._isPanelVisible = isPanelVisible; | ||
if (this._content.onPanelVisibleChange) { | ||
this._content.onPanelVisibleChange(isPanelVisible); | ||
} | ||
if (this._tab.onPanelVisibleChange) { | ||
this._tab.onPanelVisibleChange(isPanelVisible); | ||
} | ||
} | ||
DockviewPanelModel.prototype.updateParentGroup = function (_group, _isPanelVisible) { | ||
// noop | ||
}; | ||
@@ -101,2 +82,1 @@ DockviewPanelModel.prototype.layout = function (width, height) { | ||
exports.DockviewPanelModel = DockviewPanelModel; | ||
//# sourceMappingURL=dockviewPanelModel.js.map |
@@ -10,7 +10,8 @@ import { DockviewApi } from '../api/component.api'; | ||
import { IDisposable } from '../lifecycle'; | ||
import { Position } from '../dnd/droptarget'; | ||
import { DroptargetOverlayModel, Position } from '../dnd/droptarget'; | ||
import { GroupOptions } from './dockviewGroupPanelModel'; | ||
import { IDockviewPanel } from './dockviewPanel'; | ||
import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory'; | ||
import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi'; | ||
import { DockviewPanelRenderer } from './components/greadyRenderContainer'; | ||
import { DockviewPanelRenderer } from '../overlayRenderContainer'; | ||
export interface IHeaderActionsRenderer extends IDisposable { | ||
@@ -71,3 +72,3 @@ readonly element: HTMLElement; | ||
singleTabMode?: 'fullwidth' | 'default'; | ||
parentElement?: HTMLElement; | ||
parentElement: HTMLElement; | ||
disableFloatingGroups?: boolean; | ||
@@ -78,5 +79,8 @@ floatingGroupBounds?: 'boundedWithinViewport' | { | ||
}; | ||
popoutUrl?: string; | ||
defaultRenderer?: DockviewPanelRenderer; | ||
isRtl?: boolean; | ||
debug?: boolean; | ||
rootOverlayModel?: DroptargetOverlayModel; | ||
locked?: boolean; | ||
disableDnd?: boolean; | ||
} | ||
@@ -118,3 +122,6 @@ export interface PanelOptions<P extends object = Parameters> { | ||
type AddPanelOptionsUnion = AddPanelFloatingGroupUnion | AddPanelPositionUnion; | ||
export type AddPanelOptions<P extends object = Parameters> = Omit<PanelOptions<P>, 'component' | 'tabComponent'> & { | ||
export type AddPanelOptions<P extends object = Parameters> = { | ||
params?: P; | ||
id: string; | ||
title?: string; | ||
component: string; | ||
@@ -132,3 +139,3 @@ tabComponent?: string; | ||
}; | ||
export type AddGroupOptions = AddGroupOptionsWithGroup | AddGroupOptionsWithPanel | AbsolutePosition; | ||
export type AddGroupOptions = (AddGroupOptionsWithGroup | AddGroupOptionsWithPanel | AbsolutePosition) & GroupOptions; | ||
export declare function isGroupOptionsWithPanel(data: AddGroupOptions): data is AddGroupOptionsWithPanel; | ||
@@ -144,2 +151,1 @@ export declare function isGroupOptionsWithGroup(data: AddGroupOptions): data is AddGroupOptionsWithGroup; | ||
export {}; | ||
//# sourceMappingURL=options.d.ts.map |
@@ -32,2 +32,1 @@ "use strict"; | ||
exports.isGroupOptionsWithGroup = isGroupOptionsWithGroup; | ||
//# sourceMappingURL=options.js.map |
@@ -8,9 +8,4 @@ import { IDockviewComponent } from './dockviewComponent'; | ||
import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel'; | ||
import { DockviewPanelRenderer } from './components/greadyRenderContainer'; | ||
export declare enum DockviewDropTargets { | ||
Tab = 0, | ||
Panel = 1, | ||
TabContainer = 2, | ||
Edge = 3 | ||
} | ||
import { DockviewPanelRenderer } from '../overlayRenderContainer'; | ||
export type DockviewDropTargets = 'tab' | 'panel' | 'tabContainer' | 'edge'; | ||
export interface HeaderPartInitParameters { | ||
@@ -38,4 +33,2 @@ title: string; | ||
init(parameters: GroupPanelPartInitParameters): void; | ||
onGroupChange?(group: DockviewGroupPanel): void; | ||
onPanelVisibleChange?(isPanelVisible: boolean): void; | ||
} | ||
@@ -47,4 +40,2 @@ export interface IContentRenderer extends Optional<Omit<IPanel, 'id'>, 'dispose' | 'update' | 'layout' | 'toJSON'> { | ||
init(parameters: GroupPanelContentPartInitParameters): void; | ||
onGroupChange?(group: DockviewGroupPanel): void; | ||
onPanelVisibleChange?(isPanelVisible: boolean): void; | ||
} | ||
@@ -69,2 +60,1 @@ export interface WatermarkPartInitParameters { | ||
} | ||
//# sourceMappingURL=types.d.ts.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.DockviewDropTargets = void 0; | ||
var DockviewDropTargets; | ||
(function (DockviewDropTargets) { | ||
DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab"; | ||
DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel"; | ||
DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer"; | ||
DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge"; | ||
})(DockviewDropTargets || (exports.DockviewDropTargets = DockviewDropTargets = {})); | ||
//# sourceMappingURL=types.js.map |
@@ -17,6 +17,5 @@ import { Event as DockviewEvent } from './events'; | ||
export declare function quasiDefaultPrevented(event: Event): boolean; | ||
export declare function hasClassInTree(domNode: Element, className: string): boolean; | ||
export declare function addStyles(document: Document, styleSheetList: StyleSheetList): void; | ||
export declare function getDomNodePagePosition(domNode: Element): { | ||
left?: number; | ||
right?: number; | ||
left: number; | ||
top: number; | ||
@@ -26,2 +25,6 @@ width: number; | ||
}; | ||
//# sourceMappingURL=dom.d.ts.map | ||
/** | ||
* Check whether an element is in the DOM (including the Shadow DOM) | ||
* @see https://terodox.tech/how-to-tell-if-an-element-is-in-the-dom-including-the-shadow-dom/ | ||
*/ | ||
export declare function isInDocument(element: Element): boolean; |
@@ -29,3 +29,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getDomNodePagePosition = exports.hasClassInTree = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = void 0; | ||
exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = void 0; | ||
var events_1 = require("./events"); | ||
@@ -199,19 +199,54 @@ var lifecycle_1 = require("./lifecycle"); | ||
exports.quasiDefaultPrevented = quasiDefaultPrevented; | ||
// Gets whether the given class exists in the element or its parent tree | ||
function hasClassInTree(domNode, className) { | ||
if (domNode.classList.contains(className)) { | ||
return true; | ||
function addStyles(document, styleSheetList) { | ||
var e_3, _a, e_4, _b; | ||
var styleSheets = Array.from(styleSheetList); | ||
try { | ||
for (var styleSheets_1 = __values(styleSheets), styleSheets_1_1 = styleSheets_1.next(); !styleSheets_1_1.done; styleSheets_1_1 = styleSheets_1.next()) { | ||
var styleSheet = styleSheets_1_1.value; | ||
if (styleSheet.href) { | ||
var link = document.createElement('link'); | ||
link.href = styleSheet.href; | ||
link.type = styleSheet.type; | ||
link.rel = 'stylesheet'; | ||
document.head.appendChild(link); | ||
} | ||
var cssTexts = []; | ||
try { | ||
if (styleSheet.cssRules) { | ||
cssTexts = Array.from(styleSheet.cssRules).map(function (rule) { return rule.cssText; }); | ||
} | ||
} | ||
catch (err) { | ||
// security errors (lack of permissions), ignore | ||
} | ||
try { | ||
for (var cssTexts_1 = (e_4 = void 0, __values(cssTexts)), cssTexts_1_1 = cssTexts_1.next(); !cssTexts_1_1.done; cssTexts_1_1 = cssTexts_1.next()) { | ||
var rule = cssTexts_1_1.value; | ||
var style = document.createElement('style'); | ||
style.appendChild(document.createTextNode(rule)); | ||
document.head.appendChild(style); | ||
} | ||
} | ||
catch (e_4_1) { e_4 = { error: e_4_1 }; } | ||
finally { | ||
try { | ||
if (cssTexts_1_1 && !cssTexts_1_1.done && (_b = cssTexts_1.return)) _b.call(cssTexts_1); | ||
} | ||
finally { if (e_4) throw e_4.error; } | ||
} | ||
} | ||
} | ||
if (domNode.parentElement) { | ||
return hasClassInTree(domNode.parentElement, className); | ||
catch (e_3_1) { e_3 = { error: e_3_1 }; } | ||
finally { | ||
try { | ||
if (styleSheets_1_1 && !styleSheets_1_1.done && (_a = styleSheets_1.return)) _a.call(styleSheets_1); | ||
} | ||
finally { if (e_3) throw e_3.error; } | ||
} | ||
return false; | ||
} | ||
exports.hasClassInTree = hasClassInTree; | ||
exports.addStyles = addStyles; | ||
function getDomNodePagePosition(domNode) { | ||
var isRtl = hasClassInTree(domNode, 'dv-rtl'); | ||
var _a = domNode.getBoundingClientRect(), left = _a.left, right = _a.right, top = _a.top, width = _a.width, height = _a.height; | ||
var _a = domNode.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height; | ||
return { | ||
left: isRtl ? undefined : left + window.scrollX, | ||
right: isRtl ? right + window.scrollX : undefined, | ||
left: left + window.scrollX, | ||
top: top + window.scrollY, | ||
@@ -223,2 +258,22 @@ width: width, | ||
exports.getDomNodePagePosition = getDomNodePagePosition; | ||
//# sourceMappingURL=dom.js.map | ||
/** | ||
* Check whether an element is in the DOM (including the Shadow DOM) | ||
* @see https://terodox.tech/how-to-tell-if-an-element-is-in-the-dom-including-the-shadow-dom/ | ||
*/ | ||
function isInDocument(element) { | ||
var currentElement = element; | ||
while (currentElement === null || currentElement === void 0 ? void 0 : currentElement.parentNode) { | ||
if (currentElement.parentNode === document) { | ||
return true; | ||
} | ||
else if (currentElement.parentNode instanceof DocumentFragment) { | ||
// handle shadow DOMs | ||
currentElement = currentElement.parentNode.host; | ||
} | ||
else { | ||
currentElement = currentElement.parentNode; | ||
} | ||
} | ||
return false; | ||
} | ||
exports.isInDocument = isInDocument; |
@@ -11,2 +11,11 @@ import { IDisposable } from './lifecycle'; | ||
} | ||
export interface IDockviewEvent { | ||
readonly defaultPrevented: boolean; | ||
preventDefault(): void; | ||
} | ||
export declare class DockviewEvent implements IDockviewEvent { | ||
private _defaultPrevented; | ||
get defaultPrevented(): boolean; | ||
preventDefault(): void; | ||
} | ||
declare class LeakageMonitor { | ||
@@ -34,2 +43,3 @@ readonly events: Map<Event<any>, Stacktrace>; | ||
static setLeakageMonitorEnabled(isEnabled: boolean): void; | ||
get value(): T | undefined; | ||
constructor(options?: EmitterOptions | undefined); | ||
@@ -50,2 +60,1 @@ get event(): Event<T>; | ||
export {}; | ||
//# sourceMappingURL=events.d.ts.map |
@@ -14,3 +14,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.TickDelayedEvent = exports.addDisposableListener = exports.addDisposableWindowListener = exports.Emitter = exports.Event = void 0; | ||
exports.TickDelayedEvent = exports.addDisposableListener = exports.addDisposableWindowListener = exports.Emitter = exports.DockviewEvent = exports.Event = void 0; | ||
var Event; | ||
@@ -35,2 +35,19 @@ (function (Event) { | ||
})(Event || (exports.Event = Event = {})); | ||
var DockviewEvent = /** @class */ (function () { | ||
function DockviewEvent() { | ||
this._defaultPrevented = false; | ||
} | ||
Object.defineProperty(DockviewEvent.prototype, "defaultPrevented", { | ||
get: function () { | ||
return this._defaultPrevented; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
DockviewEvent.prototype.preventDefault = function () { | ||
this._defaultPrevented = true; | ||
}; | ||
return DockviewEvent; | ||
}()); | ||
exports.DockviewEvent = DockviewEvent; | ||
var LeakageMonitor = /** @class */ (function () { | ||
@@ -91,2 +108,9 @@ function LeakageMonitor() { | ||
}; | ||
Object.defineProperty(Emitter.prototype, "value", { | ||
get: function () { | ||
return this._last; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Emitter.prototype, "event", { | ||
@@ -220,2 +244,1 @@ get: function () { | ||
exports.TickDelayedEvent = TickDelayedEvent; | ||
//# sourceMappingURL=events.js.map |
@@ -1,2 +0,2 @@ | ||
import { Emitter, Event, TickDelayedEvent } from '../events'; | ||
import { Event, TickDelayedEvent } from '../events'; | ||
import { Gridview, IGridView } from './gridview'; | ||
@@ -15,5 +15,5 @@ import { Position } from '../dnd/droptarget'; | ||
readonly styles?: ISplitviewStyles; | ||
readonly parentElement?: HTMLElement; | ||
readonly parentElement: HTMLElement; | ||
readonly disableAutoResizing?: boolean; | ||
readonly isRtl?: boolean; | ||
readonly locked?: boolean; | ||
} | ||
@@ -36,6 +36,2 @@ export interface IGridPanelView extends IGridView, IPanel { | ||
readonly groups: T[]; | ||
readonly onDidLayoutChange: Event<void>; | ||
readonly onDidRemoveGroup: Event<T>; | ||
readonly onDidAddGroup: Event<T>; | ||
readonly onDidActiveGroupChange: Event<T | undefined>; | ||
getPanel(id: string): T | undefined; | ||
@@ -48,2 +44,8 @@ toJSON(): object; | ||
isVisible(panel: T): boolean; | ||
maximizeGroup(panel: T): void; | ||
isMaximizedGroup(panel: T): boolean; | ||
exitMaximizedGroup(): void; | ||
hasMaximizedGroup(): boolean; | ||
readonly onDidMaximizedGroupChange: Event<void>; | ||
readonly onDidLayoutChange: Event<void>; | ||
} | ||
@@ -57,8 +59,8 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizable implements IBaseGrid<T> { | ||
readonly onDidLayoutChange: Event<void>; | ||
protected readonly _onDidRemoveGroup: Emitter<T>; | ||
readonly onDidRemoveGroup: Event<T>; | ||
protected readonly _onDidAddGroup: Emitter<T>; | ||
readonly onDidAddGroup: Event<T>; | ||
private readonly _onDidActiveGroupChange; | ||
readonly onDidActiveGroupChange: Event<T | undefined>; | ||
private readonly _onDidRemove; | ||
readonly onDidRemove: Event<T>; | ||
private readonly _onDidAdd; | ||
readonly onDidAdd: Event<T>; | ||
private readonly _onDidActiveChange; | ||
readonly onDidActiveChange: Event<T | undefined>; | ||
protected readonly _bufferOnDidLayoutChange: TickDelayedEvent; | ||
@@ -75,2 +77,4 @@ get id(): string; | ||
get activeGroup(): T | undefined; | ||
get locked(): boolean; | ||
set locked(value: boolean); | ||
constructor(options: BaseGridOptions); | ||
@@ -82,2 +86,7 @@ abstract toJSON(): object; | ||
isVisible(panel: T): boolean; | ||
maximizeGroup(panel: T): void; | ||
isMaximizedGroup(panel: T): boolean; | ||
exitMaximizedGroup(): void; | ||
hasMaximizedGroup(): boolean; | ||
get onDidMaximizedGroupChange(): Event<void>; | ||
protected doAddGroup(group: T, location?: number[], size?: number): void; | ||
@@ -89,3 +98,3 @@ protected doRemoveGroup(group: T, options?: { | ||
getPanel(id: string): T | undefined; | ||
doSetGroupActive(group: T | undefined, skipFocus?: boolean): void; | ||
doSetGroupActive(group: T | undefined): void; | ||
removeGroup(group: T): void; | ||
@@ -97,2 +106,1 @@ moveToNext(options?: MovementOptions2): void; | ||
} | ||
//# sourceMappingURL=baseComponentGridview.d.ts.map |
@@ -32,6 +32,6 @@ "use strict"; | ||
var gridview_1 = require("./gridview"); | ||
var lifecycle_1 = require("../lifecycle"); | ||
var math_1 = require("../math"); | ||
var splitview_1 = require("../splitview/splitview"); | ||
var resizable_1 = require("../resizable"); | ||
var dom_1 = require("../dom"); | ||
var nextLayoutId = (0, math_1.sequentialNumberGenerator)(); | ||
@@ -57,3 +57,3 @@ function toTarget(direction) { | ||
function BaseGrid(options) { | ||
var _this = _super.call(this, options.parentElement, options.disableAutoResizing) || this; | ||
var _this = _super.call(this, document.createElement('div'), options.disableAutoResizing) || this; | ||
_this._id = nextLayoutId.next(); | ||
@@ -63,17 +63,22 @@ _this._groups = new Map(); | ||
_this.onDidLayoutChange = _this._onDidLayoutChange.event; | ||
_this._onDidRemoveGroup = new events_1.Emitter(); | ||
_this.onDidRemoveGroup = _this._onDidRemoveGroup.event; | ||
_this._onDidAddGroup = new events_1.Emitter(); | ||
_this.onDidAddGroup = _this._onDidAddGroup.event; | ||
_this._onDidActiveGroupChange = new events_1.Emitter(); | ||
_this.onDidActiveGroupChange = _this._onDidActiveGroupChange.event; | ||
_this._onDidRemove = new events_1.Emitter(); | ||
_this.onDidRemove = _this._onDidRemove.event; | ||
_this._onDidAdd = new events_1.Emitter(); | ||
_this.onDidAdd = _this._onDidAdd.event; | ||
_this._onDidActiveChange = new events_1.Emitter(); | ||
_this.onDidActiveChange = _this._onDidActiveChange.event; | ||
_this._bufferOnDidLayoutChange = new events_1.TickDelayedEvent(); | ||
_this.element.style.height = '100%'; | ||
_this.element.style.width = '100%'; | ||
options.parentElement.appendChild(_this.element); | ||
_this.gridview = new gridview_1.Gridview(!!options.proportionalLayout, options.styles, options.orientation); | ||
(0, dom_1.toggleClass)(_this.gridview.element, 'dv-rtl', options.isRtl === true); | ||
(0, dom_1.toggleClass)(_this.gridview.element, 'dv-ltr', options.isRtl === false); | ||
_this.gridview.locked = !!options.locked; | ||
_this.element.appendChild(_this.gridview.element); | ||
_this.layout(0, 0, true); // set some elements height/widths | ||
_this.addDisposables(_this.gridview.onDidChange(function () { | ||
_this.addDisposables(lifecycle_1.Disposable.from(function () { | ||
var _a; | ||
(_a = _this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(_this.element); | ||
}), _this.gridview.onDidChange(function () { | ||
_this._bufferOnDidLayoutChange.fire(); | ||
}), events_1.Event.any(_this.onDidAddGroup, _this.onDidRemoveGroup, _this.onDidActiveGroupChange)(function () { | ||
}), events_1.Event.any(_this.onDidAdd, _this.onDidRemove, _this.onDidActiveChange)(function () { | ||
_this._bufferOnDidLayoutChange.fire(); | ||
@@ -155,2 +160,12 @@ }), _this._bufferOnDidLayoutChange.onEvent(function () { | ||
}); | ||
Object.defineProperty(BaseGrid.prototype, "locked", { | ||
get: function () { | ||
return this.gridview.locked; | ||
}, | ||
set: function (value) { | ||
this.gridview.locked = value; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
BaseGrid.prototype.setVisible = function (panel, visible) { | ||
@@ -163,7 +178,26 @@ this.gridview.setViewVisible((0, gridview_1.getGridLocation)(panel.element), visible); | ||
}; | ||
BaseGrid.prototype.maximizeGroup = function (panel) { | ||
this.gridview.maximizeView(panel); | ||
this.doSetGroupActive(panel); | ||
}; | ||
BaseGrid.prototype.isMaximizedGroup = function (panel) { | ||
return this.gridview.maximizedView() === panel; | ||
}; | ||
BaseGrid.prototype.exitMaximizedGroup = function () { | ||
this.gridview.exitMaximizedView(); | ||
}; | ||
BaseGrid.prototype.hasMaximizedGroup = function () { | ||
return this.gridview.hasMaximizedView(); | ||
}; | ||
Object.defineProperty(BaseGrid.prototype, "onDidMaximizedGroupChange", { | ||
get: function () { | ||
return this.gridview.onDidMaximizedNodeChange; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
BaseGrid.prototype.doAddGroup = function (group, location, size) { | ||
if (location === void 0) { location = [0]; } | ||
this.gridview.addView(group, size !== null && size !== void 0 ? size : splitview_1.Sizing.Distribute, location); | ||
this._onDidAddGroup.fire(group); | ||
this.doSetGroupActive(group); | ||
this._onDidAdd.fire(group); | ||
}; | ||
@@ -180,4 +214,4 @@ BaseGrid.prototype.doRemoveGroup = function (group, options) { | ||
this._groups.delete(group.id); | ||
this._onDidRemove.fire(group); | ||
} | ||
this._onDidRemoveGroup.fire(group); | ||
if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) { | ||
@@ -193,4 +227,3 @@ var groups = Array.from(this._groups.values()); | ||
}; | ||
BaseGrid.prototype.doSetGroupActive = function (group, skipFocus) { | ||
var _a, _b, _c; | ||
BaseGrid.prototype.doSetGroupActive = function (group) { | ||
if (this._activeGroup === group) { | ||
@@ -201,14 +234,8 @@ return; | ||
this._activeGroup.setActive(false); | ||
if (!skipFocus) { | ||
(_b = (_a = this._activeGroup).focus) === null || _b === void 0 ? void 0 : _b.call(_a); | ||
} | ||
} | ||
if (group) { | ||
group.setActive(true); | ||
if (!skipFocus) { | ||
(_c = group.focus) === null || _c === void 0 ? void 0 : _c.call(group); | ||
} | ||
} | ||
this._activeGroup = group; | ||
this._onDidActiveGroupChange.fire(group); | ||
this._onDidActiveChange.fire(group); | ||
}; | ||
@@ -259,5 +286,5 @@ BaseGrid.prototype.removeGroup = function (group) { | ||
var e_1, _a; | ||
this._onDidActiveGroupChange.dispose(); | ||
this._onDidAddGroup.dispose(); | ||
this._onDidRemoveGroup.dispose(); | ||
this._onDidActiveChange.dispose(); | ||
this._onDidAdd.dispose(); | ||
this._onDidRemove.dispose(); | ||
this._onDidLayoutChange.dispose(); | ||
@@ -283,2 +310,1 @@ try { | ||
exports.BaseGrid = BaseGrid; | ||
//# sourceMappingURL=baseComponentGridview.js.map |
@@ -41,2 +41,1 @@ import { CompositeDisposable } from '../lifecycle'; | ||
} | ||
//# sourceMappingURL=basePanelView.d.ts.map |
@@ -43,2 +43,3 @@ "use strict"; | ||
var lifecycle_1 = require("../lifecycle"); | ||
var panelApi_1 = require("../api/panelApi"); | ||
var BasePanelView = /** @class */ (function (_super) { | ||
@@ -97,3 +98,8 @@ __extends(BasePanelView, _super); | ||
BasePanelView.prototype.focus = function () { | ||
this.api._onFocusEvent.fire(); | ||
var event = new panelApi_1.WillFocusEvent(); | ||
this.api._onWillFocus.fire(event); | ||
if (event.defaultPrevented) { | ||
return; | ||
} | ||
this._element.focus(); | ||
}; | ||
@@ -159,2 +165,1 @@ BasePanelView.prototype.layout = function (width, height) { | ||
exports.BasePanelView = BasePanelView; | ||
//# sourceMappingURL=basePanelView.js.map |
@@ -21,2 +21,4 @@ import { IView, Orientation, Sizing, LayoutPriority, ISplitviewStyles } from '../splitview/splitview'; | ||
}>; | ||
private readonly _onDidVisibilityChange; | ||
readonly onDidVisibilityChange: Event<boolean>; | ||
get width(): number; | ||
@@ -35,3 +37,5 @@ get height(): number; | ||
get priority(): LayoutPriority; | ||
constructor(orientation: Orientation, proportionalLayout: boolean, styles: ISplitviewStyles | undefined, size: number, orthogonalSize: number, childDescriptors?: INodeDescriptor[]); | ||
get disabled(): boolean; | ||
set disabled(value: boolean); | ||
constructor(orientation: Orientation, proportionalLayout: boolean, styles: ISplitviewStyles | undefined, size: number, orthogonalSize: number, disabled: boolean, childDescriptors?: INodeDescriptor[]); | ||
setVisible(visible: boolean): void; | ||
@@ -52,2 +56,1 @@ isChildVisible(index: number): boolean; | ||
} | ||
//# sourceMappingURL=branchNode.d.ts.map |
@@ -65,3 +65,3 @@ "use strict"; | ||
__extends(BranchNode, _super); | ||
function BranchNode(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) { | ||
function BranchNode(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, childDescriptors) { | ||
var _this = _super.call(this) || this; | ||
@@ -75,2 +75,4 @@ _this.orientation = orientation; | ||
_this.onDidChange = _this._onDidChange.event; | ||
_this._onDidVisibilityChange = new events_1.Emitter(); | ||
_this.onDidVisibilityChange = _this._onDidVisibilityChange.event; | ||
_this._orthogonalSize = orthogonalSize; | ||
@@ -110,3 +112,4 @@ _this._size = size; | ||
} | ||
_this.addDisposables(_this._onDidChange, _this.splitview.onDidSashEnd(function () { | ||
_this.disabled = disabled; | ||
_this.addDisposables(_this._onDidChange, _this._onDidVisibilityChange, _this.splitview.onDidSashEnd(function () { | ||
_this._onDidChange.fire({}); | ||
@@ -137,5 +140,10 @@ })); | ||
get: function () { | ||
var _this = this; | ||
return this.children.length === 0 | ||
? 0 | ||
: Math.max.apply(Math, __spreadArray([], __read(this.children.map(function (c) { return c.minimumOrthogonalSize; })), false)); | ||
: Math.max.apply(Math, __spreadArray([], __read(this.children.map(function (c, index) { | ||
return _this.splitview.isViewVisible(index) | ||
? c.minimumOrthogonalSize | ||
: 0; | ||
})), false)); | ||
}, | ||
@@ -147,3 +155,8 @@ enumerable: false, | ||
get: function () { | ||
return Math.min.apply(Math, __spreadArray([], __read(this.children.map(function (c) { return c.maximumOrthogonalSize; })), false)); | ||
var _this = this; | ||
return Math.min.apply(Math, __spreadArray([], __read(this.children.map(function (c, index) { | ||
return _this.splitview.isViewVisible(index) | ||
? c.maximumOrthogonalSize | ||
: Number.POSITIVE_INFINITY; | ||
})), false)); | ||
}, | ||
@@ -238,2 +251,12 @@ enumerable: false, | ||
}); | ||
Object.defineProperty(BranchNode.prototype, "disabled", { | ||
get: function () { | ||
return this.splitview.disabled; | ||
}, | ||
set: function (value) { | ||
this.splitview.disabled = value; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
BranchNode.prototype.setVisible = function (visible) { | ||
@@ -268,3 +291,11 @@ var e_1, _a; | ||
} | ||
var wereAllChildrenHidden = this.splitview.contentSize === 0; | ||
this.splitview.setViewVisible(index, visible); | ||
var areAllChildrenHidden = this.splitview.contentSize === 0; | ||
// If all children are hidden then the parent should hide the entire splitview | ||
// If the entire splitview is hidden then the parent should show the splitview when a child is shown | ||
if ((visible && wereAllChildrenHidden) || | ||
(!visible && areAllChildrenHidden)) { | ||
this._onDidVisibilityChange.fire(visible); | ||
} | ||
}; | ||
@@ -334,9 +365,16 @@ BranchNode.prototype.moveChild = function (from, to) { | ||
this._childrenDisposable.dispose(); | ||
this._childrenDisposable = events_1.Event.any.apply(events_1.Event, __spreadArray([], __read(this.children.map(function (c) { return c.onDidChange; })), false))(function (e) { | ||
/** | ||
* indicate a change has occured to allows any re-rendering but don't bubble | ||
* event because that was specific to this branch | ||
*/ | ||
_this._onDidChange.fire({ size: e.orthogonalSize }); | ||
}); | ||
this._childrenDisposable = new (lifecycle_1.CompositeDisposable.bind.apply(lifecycle_1.CompositeDisposable, __spreadArray([void 0, events_1.Event.any.apply(events_1.Event, __spreadArray([], __read(this.children.map(function (c) { return c.onDidChange; })), false))(function (e) { | ||
/** | ||
* indicate a change has occured to allows any re-rendering but don't bubble | ||
* event because that was specific to this branch | ||
*/ | ||
_this._onDidChange.fire({ size: e.orthogonalSize }); | ||
})], __read(this.children.map(function (c, i) { | ||
if (c instanceof BranchNode) { | ||
return c.onDidVisibilityChange(function (visible) { | ||
_this.setChildVisible(i, visible); | ||
}); | ||
} | ||
return lifecycle_1.Disposable.NONE; | ||
})), false)))(); | ||
}; | ||
@@ -352,2 +390,1 @@ BranchNode.prototype.dispose = function () { | ||
exports.BranchNode = BranchNode; | ||
//# sourceMappingURL=branchNode.js.map |
@@ -15,3 +15,3 @@ import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/splitview'; | ||
export declare function getGridLocation(element: HTMLElement): number[]; | ||
export declare function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Position, isRtl?: boolean): number[]; | ||
export declare function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Position): number[]; | ||
export declare function getDirectionOrientation(direction: Position): Orientation; | ||
@@ -89,5 +89,7 @@ export declare function getLocationOrientation(rootOrientation: Orientation, location: number[]): Orientation; | ||
readonly styles: ISplitviewStyles | undefined; | ||
readonly element: HTMLElement; | ||
private _root; | ||
readonly element: HTMLElement; | ||
private disposable; | ||
private _locked; | ||
private _maximizedNode; | ||
private readonly disposable; | ||
private readonly _onDidChange; | ||
@@ -98,2 +100,4 @@ readonly onDidChange: Event<{ | ||
}>; | ||
private readonly _onDidMaximizedNodeChange; | ||
readonly onDidMaximizedNodeChange: Event<void>; | ||
get length(): number; | ||
@@ -108,6 +112,12 @@ get orientation(): Orientation; | ||
get maximumHeight(): number; | ||
get locked(): boolean; | ||
set locked(value: boolean); | ||
maximizedView(): IGridView | undefined; | ||
hasMaximizedView(): boolean; | ||
maximizeView(view: IGridView): void; | ||
exitMaximizedView(): void; | ||
serialize(): SerializedGridview<any>; | ||
dispose(): void; | ||
clear(): void; | ||
deserialize(json: any, deserializer: IViewDeserializer): void; | ||
deserialize<T>(json: SerializedGridview<T>, deserializer: IViewDeserializer): void; | ||
private _deserialize; | ||
@@ -138,2 +148,1 @@ private _deserializeNode; | ||
} | ||
//# sourceMappingURL=gridview.d.ts.map |
@@ -50,3 +50,3 @@ "use strict"; | ||
if (node instanceof branchNode_1.BranchNode) { | ||
var result = new branchNode_1.BranchNode((0, exports.orthogonal)(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize); | ||
var result = new branchNode_1.BranchNode((0, exports.orthogonal)(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled); | ||
var totalSize = 0; | ||
@@ -105,3 +105,3 @@ for (var i = node.children.length - 1; i >= 0; i--) { | ||
exports.getGridLocation = getGridLocation; | ||
function getRelativeLocation(rootOrientation, location, direction, isRtl) { | ||
function getRelativeLocation(rootOrientation, location, direction) { | ||
var orientation = getLocationOrientation(rootOrientation, location); | ||
@@ -112,3 +112,3 @@ var directionOrientation = getDirectionOrientation(direction); | ||
var index = _index; | ||
if ((isRtl ? direction === 'left' : direction === 'right') || direction === 'bottom') { | ||
if (direction === 'right' || direction === 'bottom') { | ||
index += 1; | ||
@@ -119,3 +119,3 @@ } | ||
else { | ||
var index = (isRtl ? direction === 'left' : direction === 'right') || direction === 'bottom' ? 1 : 0; | ||
var index = direction === 'right' || direction === 'bottom' ? 1 : 0; | ||
return __spreadArray(__spreadArray([], __read(location), false), [index], false); | ||
@@ -172,8 +172,12 @@ } | ||
this.styles = styles; | ||
this._locked = false; | ||
this._maximizedNode = undefined; | ||
this.disposable = new lifecycle_1.MutableDisposable(); | ||
this._onDidChange = new events_1.Emitter(); | ||
this.onDidChange = this._onDidChange.event; | ||
this._onDidMaximizedNodeChange = new events_1.Emitter(); | ||
this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event; | ||
this.element = document.createElement('div'); | ||
this.element.className = 'grid-view'; | ||
this.root = new branchNode_1.BranchNode(orientation, proportionalLayout, styles, 0, 0); | ||
this.root = new branchNode_1.BranchNode(orientation, proportionalLayout, styles, 0, 0, this._locked); | ||
} | ||
@@ -244,3 +248,98 @@ Object.defineProperty(Gridview.prototype, "length", { | ||
}); | ||
Object.defineProperty(Gridview.prototype, "locked", { | ||
get: function () { | ||
return this._locked; | ||
}, | ||
set: function (value) { | ||
this._locked = value; | ||
var branch = [this.root]; | ||
/** | ||
* simple depth-first-search to cover all nodes | ||
* | ||
* @see https://en.wikipedia.org/wiki/Depth-first_search | ||
*/ | ||
while (branch.length > 0) { | ||
var node = branch.pop(); | ||
if (node instanceof branchNode_1.BranchNode) { | ||
node.disabled = value; | ||
branch.push.apply(branch, __spreadArray([], __read(node.children), false)); | ||
} | ||
} | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Gridview.prototype.maximizedView = function () { | ||
var _a; | ||
return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf.view; | ||
}; | ||
Gridview.prototype.hasMaximizedView = function () { | ||
return this._maximizedNode !== undefined; | ||
}; | ||
Gridview.prototype.maximizeView = function (view) { | ||
var _a; | ||
var location = getGridLocation(view.element); | ||
var _b = __read(this.getNode(location), 2), _ = _b[0], node = _b[1]; | ||
if (!(node instanceof leafNode_1.LeafNode)) { | ||
return; | ||
} | ||
if (((_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf) === node) { | ||
return; | ||
} | ||
if (this.hasMaximizedView()) { | ||
this.exitMaximizedView(); | ||
} | ||
var hiddenOnMaximize = []; | ||
function hideAllViewsBut(parent, exclude) { | ||
for (var i = 0; i < parent.children.length; i++) { | ||
var child = parent.children[i]; | ||
if (child instanceof leafNode_1.LeafNode) { | ||
if (child !== exclude) { | ||
if (parent.isChildVisible(i)) { | ||
parent.setChildVisible(i, false); | ||
} | ||
else { | ||
hiddenOnMaximize.push(child); | ||
} | ||
} | ||
} | ||
else { | ||
hideAllViewsBut(child, exclude); | ||
} | ||
} | ||
} | ||
hideAllViewsBut(this.root, node); | ||
this._maximizedNode = { leaf: node, hiddenOnMaximize: hiddenOnMaximize }; | ||
this._onDidMaximizedNodeChange.fire(); | ||
}; | ||
Gridview.prototype.exitMaximizedView = function () { | ||
if (!this._maximizedNode) { | ||
return; | ||
} | ||
var hiddenOnMaximize = this._maximizedNode.hiddenOnMaximize; | ||
function showViewsInReverseOrder(parent) { | ||
for (var index = parent.children.length - 1; index >= 0; index--) { | ||
var child = parent.children[index]; | ||
if (child instanceof leafNode_1.LeafNode) { | ||
if (!hiddenOnMaximize.includes(child)) { | ||
parent.setChildVisible(index, true); | ||
} | ||
} | ||
else { | ||
showViewsInReverseOrder(child); | ||
} | ||
} | ||
} | ||
showViewsInReverseOrder(this.root); | ||
this._maximizedNode = undefined; | ||
this._onDidMaximizedNodeChange.fire(); | ||
}; | ||
Gridview.prototype.serialize = function () { | ||
if (this.hasMaximizedView()) { | ||
/** | ||
* do not persist maximized view state | ||
* firstly exit any maximized views to ensure the correct dimensions are persisted | ||
*/ | ||
this.exitMaximizedView(); | ||
} | ||
var root = serializeBranchNode(this.getView(), this.orientation); | ||
@@ -257,3 +356,5 @@ return { | ||
this._onDidChange.dispose(); | ||
this._onDidMaximizedNodeChange.dispose(); | ||
this.root.dispose(); | ||
this._maximizedNode = undefined; | ||
this.element.remove(); | ||
@@ -263,3 +364,3 @@ }; | ||
var orientation = this.root.orientation; | ||
this.root = new branchNode_1.BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize); | ||
this.root = new branchNode_1.BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this._locked); | ||
}; | ||
@@ -286,4 +387,4 @@ Gridview.prototype.deserialize = function (json, deserializer) { | ||
result = new branchNode_1.BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth | ||
orthogonalSize, // <- size - flips at each depth | ||
children); | ||
orthogonalSize, // <- size - flips at each depth, | ||
this._locked, children); | ||
} | ||
@@ -304,2 +405,3 @@ else { | ||
oldRoot.dispose(); | ||
this._maximizedNode = undefined; | ||
this.element.removeChild(oldRoot.element); | ||
@@ -327,3 +429,3 @@ } | ||
oldRoot.element.remove(); | ||
this._root = new branchNode_1.BranchNode((0, exports.orthogonal)(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size); | ||
this._root = new branchNode_1.BranchNode((0, exports.orthogonal)(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this._locked); | ||
if (oldRoot.children.length === 0) { | ||
@@ -405,2 +507,5 @@ // no data so no need to add anything back in | ||
Gridview.prototype.setViewVisible = function (location, visible) { | ||
if (this.hasMaximizedView()) { | ||
this.exitMaximizedView(); | ||
} | ||
var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1]; | ||
@@ -414,2 +519,5 @@ var _b = __read(this.getNode(rest), 2), parent = _b[1]; | ||
Gridview.prototype.moveView = function (parentLocation, from, to) { | ||
if (this.hasMaximizedView()) { | ||
this.exitMaximizedView(); | ||
} | ||
var _a = __read(this.getNode(parentLocation), 2), parent = _a[1]; | ||
@@ -422,2 +530,5 @@ if (!(parent instanceof branchNode_1.BranchNode)) { | ||
Gridview.prototype.addView = function (view, size, location) { | ||
if (this.hasMaximizedView()) { | ||
this.exitMaximizedView(); | ||
} | ||
var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1]; | ||
@@ -439,3 +550,3 @@ var _b = __read(this.getNode(rest), 2), pathToParent = _b[0], parent = _b[1]; | ||
child.dispose(); | ||
var newParent = new branchNode_1.BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize); | ||
var newParent = new branchNode_1.BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this._locked); | ||
grandParent.addChild(newParent, parent.size, parentIndex); | ||
@@ -456,2 +567,5 @@ var newSibling = new leafNode_1.LeafNode(parent.view, grandParent.orientation, parent.size); | ||
Gridview.prototype.removeView = function (location, sizing) { | ||
if (this.hasMaximizedView()) { | ||
this.exitMaximizedView(); | ||
} | ||
var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1]; | ||
@@ -564,2 +678,1 @@ var _b = __read(this.getNode(rest), 2), pathToParent = _b[0], parent = _b[1]; | ||
exports.Gridview = Gridview; | ||
//# sourceMappingURL=gridview.js.map |
@@ -8,3 +8,3 @@ import { SerializedGridview } from './gridview'; | ||
import { Orientation, Sizing } from '../splitview/splitview'; | ||
import { Event } from '../events'; | ||
import { Emitter, Event } from '../events'; | ||
import { Position } from '../dnd/droptarget'; | ||
@@ -46,2 +46,5 @@ export interface SerializedGridviewComponent { | ||
setActive(panel: IGridviewPanel): void; | ||
readonly onDidRemoveGroup: Event<GridviewPanel>; | ||
readonly onDidAddGroup: Event<GridviewPanel>; | ||
readonly onDidActiveGroupChange: Event<GridviewPanel | undefined>; | ||
} | ||
@@ -53,2 +56,8 @@ export declare class GridviewComponent extends BaseGrid<GridviewPanel> implements IGridviewComponent { | ||
readonly onDidLayoutFromJSON: Event<void>; | ||
private readonly _onDidRemoveGroup; | ||
readonly onDidRemoveGroup: Event<GridviewPanel>; | ||
protected readonly _onDidAddGroup: Emitter<GridviewPanel<import("../api/gridviewPanelApi").GridviewPanelApiImpl>>; | ||
readonly onDidAddGroup: Event<GridviewPanel>; | ||
private readonly _onDidActiveGroupChange; | ||
readonly onDidActiveGroupChange: Event<GridviewPanel | undefined>; | ||
get orientation(): Orientation; | ||
@@ -84,2 +93,1 @@ set orientation(value: Orientation); | ||
} | ||
//# sourceMappingURL=gridviewComponent.d.ts.map |
@@ -72,7 +72,19 @@ "use strict"; | ||
disableAutoResizing: options.disableAutoResizing, | ||
isRtl: options.isRtl, | ||
}) || this; | ||
_this._onDidLayoutfromJSON = new events_1.Emitter(); | ||
_this.onDidLayoutFromJSON = _this._onDidLayoutfromJSON.event; | ||
_this._onDidRemoveGroup = new events_1.Emitter(); | ||
_this.onDidRemoveGroup = _this._onDidRemoveGroup.event; | ||
_this._onDidAddGroup = new events_1.Emitter(); | ||
_this.onDidAddGroup = _this._onDidAddGroup.event; | ||
_this._onDidActiveGroupChange = new events_1.Emitter(); | ||
_this.onDidActiveGroupChange = _this._onDidActiveGroupChange.event; | ||
_this._options = options; | ||
_this.addDisposables(_this._onDidAddGroup, _this._onDidRemoveGroup, _this._onDidActiveGroupChange, _this.onDidAdd(function (event) { | ||
_this._onDidAddGroup.fire(event); | ||
}), _this.onDidRemove(function (event) { | ||
_this._onDidRemoveGroup.fire(event); | ||
}), _this.onDidActiveChange(function (event) { | ||
_this._onDidActiveGroupChange.fire(event); | ||
})); | ||
if (!_this.options.components) { | ||
@@ -265,3 +277,3 @@ _this.options.components = {}; | ||
var location_1 = (0, gridview_1.getGridLocation)(referenceGroup.element); | ||
relativeLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, location_1, target, this.options.isRtl); | ||
relativeLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, location_1, target); | ||
} | ||
@@ -284,3 +296,3 @@ this.doAddGroup(removedPanel, relativeLocation, options.size); | ||
var location_2 = (0, gridview_1.getGridLocation)(referenceGroup.element); | ||
relativeLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, location_2, target, this.options.isRtl); | ||
relativeLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, location_2, target); | ||
} | ||
@@ -307,2 +319,3 @@ } | ||
this.doAddGroup(view, relativeLocation, options.size); | ||
this.doSetGroupActive(view); | ||
return view; | ||
@@ -337,3 +350,3 @@ }; | ||
var referenceLocation = (0, gridview_1.getGridLocation)(referenceGroup.element); | ||
var targetLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target, this.options.isRtl); | ||
var targetLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target); | ||
var _a = __read((0, array_1.tail)(targetLocation), 2), targetParentLocation = _a[0], to = _a[1]; | ||
@@ -356,3 +369,3 @@ var sourceLocation = (0, gridview_1.getGridLocation)(sourceGroup.element); | ||
var updatedReferenceLocation = (0, gridview_1.getGridLocation)(referenceGroup.element); | ||
var location = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, updatedReferenceLocation, target, this.options.isRtl); | ||
var location = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, updatedReferenceLocation, target); | ||
this.doAddGroup(targetGroup, location); | ||
@@ -370,2 +383,1 @@ }; | ||
exports.GridviewComponent = GridviewComponent; | ||
//# sourceMappingURL=gridviewComponent.js.map |
import { PanelInitParameters } from '../panel/types'; | ||
import { GridviewComponent, IGridPanelComponentView } from './gridviewComponent'; | ||
import { IGridPanelComponentView } from './gridviewComponent'; | ||
import { BasePanelView, BasePanelViewExported, BasePanelViewState } from './basePanelView'; | ||
@@ -8,2 +8,3 @@ import { GridviewPanelApi, GridviewPanelApiImpl } from '../api/gridviewPanelApi'; | ||
import { IViewSize } from './gridview'; | ||
import { BaseGrid, IGridPanelView } from './baseComponentGridview'; | ||
export interface GridviewInitParameters extends PanelInitParameters { | ||
@@ -16,3 +17,3 @@ minimumWidth?: number; | ||
snap?: boolean; | ||
accessor: GridviewComponent; | ||
accessor: BaseGrid<IGridPanelView>; | ||
isVisible?: boolean; | ||
@@ -68,2 +69,1 @@ } | ||
} | ||
//# sourceMappingURL=gridviewPanel.d.ts.map |
@@ -61,9 +61,9 @@ "use strict"; | ||
_this.api.initialize(_this); // TODO: required to by-pass 'super before this' requirement | ||
_this.addDisposables(_this.api.onVisibilityChange(function (event) { | ||
var isVisible = event.isVisible; | ||
_this.addDisposables(_this.api.onDidHiddenChange(function (event) { | ||
var isHidden = event.isHidden; | ||
var accessor = _this._params.accessor; | ||
accessor.setVisible(_this, isVisible); | ||
accessor.setVisible(_this, !isHidden); | ||
}), _this.api.onActiveChange(function () { | ||
var accessor = _this._params.accessor; | ||
accessor.setActive(_this); | ||
accessor.doSetGroupActive(_this); | ||
}), _this.api.onDidConstraintsChangeInternal(function (event) { | ||
@@ -216,2 +216,1 @@ if (typeof event.minimumWidth === 'number' || | ||
exports.GridviewPanel = GridviewPanel; | ||
//# sourceMappingURL=gridviewPanel.js.map |
@@ -35,2 +35,1 @@ import { IView, LayoutPriority, Orientation } from '../splitview/splitview'; | ||
} | ||
//# sourceMappingURL=leafNode.d.ts.map |
@@ -12,4 +12,4 @@ "use strict"; | ||
function LeafNode(view, orientation, orthogonalSize, size) { | ||
if (size === void 0) { size = 0; } | ||
var _this = this; | ||
if (size === void 0) { size = 0; } | ||
this.view = view; | ||
@@ -157,3 +157,2 @@ this.orientation = orientation; | ||
this.view.setVisible(visible); | ||
this._onDidChange.fire({}); | ||
} | ||
@@ -173,2 +172,1 @@ }; | ||
exports.LeafNode = LeafNode; | ||
//# sourceMappingURL=leafNode.js.map |
@@ -16,5 +16,3 @@ import { GridviewPanel } from './gridviewPanel'; | ||
styles?: ISplitviewStyles; | ||
isRtl?: boolean; | ||
parentElement?: HTMLElement; | ||
parentElement: HTMLElement; | ||
} | ||
//# sourceMappingURL=options.d.ts.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
//# sourceMappingURL=options.js.map |
import { BranchNode } from './branchNode'; | ||
import { LeafNode } from './leafNode'; | ||
export type Node = BranchNode | LeafNode; | ||
//# sourceMappingURL=types.d.ts.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
//# sourceMappingURL=types.js.map |
@@ -11,5 +11,6 @@ export * from './dnd/dataTransfer'; | ||
export * from './splitview/splitview'; | ||
export * from './splitview/options'; | ||
export { SplitviewComponentOptions, PanelViewInitParameters, } from './splitview/options'; | ||
export * from './paneview/paneview'; | ||
export * from './gridview/gridview'; | ||
export { GridviewComponentOptions } from './gridview/options'; | ||
export * from './dockview/dockviewGroupPanelModel'; | ||
@@ -36,4 +37,4 @@ export * from './gridview/baseComponentGridview'; | ||
export * from './dockview/types'; | ||
export { DockviewPanelRenderer } from './dockview/components/greadyRenderContainer'; | ||
export { Position, positionToDirection, directionToPosition, } from './dnd/droptarget'; | ||
export { DockviewPanelRenderer } from './overlayRenderContainer'; | ||
export { Position, positionToDirection, directionToPosition, MeasuredValue, DroptargetOverlayModel, } from './dnd/droptarget'; | ||
export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi'; | ||
@@ -46,2 +47,1 @@ export { SizeEvent, GridviewPanelApi, GridConstraintChangeEvent, } from './api/gridviewPanelApi'; | ||
export { CommonApi, SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api'; | ||
//# sourceMappingURL=index.d.ts.map |
@@ -32,3 +32,2 @@ "use strict"; | ||
__exportStar(require("./splitview/splitview"), exports); | ||
__exportStar(require("./splitview/options"), exports); | ||
__exportStar(require("./paneview/paneview"), exports); | ||
@@ -63,2 +62,1 @@ __exportStar(require("./gridview/gridview"), exports); | ||
Object.defineProperty(exports, "DockviewApi", { enumerable: true, get: function () { return component_api_1.DockviewApi; } }); | ||
//# sourceMappingURL=index.js.map |
@@ -10,7 +10,8 @@ export interface IDisposable { | ||
const NONE: IDisposable; | ||
function from(func: () => void): IDisposable; | ||
} | ||
export declare class CompositeDisposable { | ||
private readonly _disposables; | ||
private _disposables; | ||
private _isDisposed; | ||
protected get isDisposed(): boolean; | ||
get isDisposed(): boolean; | ||
constructor(...args: IDisposable[]); | ||
@@ -25,2 +26,1 @@ addDisposables(...args: IDisposable[]): void; | ||
} | ||
//# sourceMappingURL=lifecycle.d.ts.map |
@@ -11,2 +11,10 @@ "use strict"; | ||
}; | ||
function from(func) { | ||
return { | ||
dispose: function () { | ||
func(); | ||
}, | ||
}; | ||
} | ||
Disposable.from = from; | ||
})(Disposable || (exports.Disposable = Disposable = {})); | ||
@@ -38,4 +46,8 @@ var CompositeDisposable = /** @class */ (function () { | ||
CompositeDisposable.prototype.dispose = function () { | ||
if (this._isDisposed) { | ||
return; | ||
} | ||
this._isDisposed = true; | ||
this._disposables.forEach(function (arg) { return arg.dispose(); }); | ||
this._isDisposed = true; | ||
this._disposables = []; | ||
}; | ||
@@ -68,2 +80,1 @@ return CompositeDisposable; | ||
exports.MutableDisposable = MutableDisposable; | ||
//# sourceMappingURL=lifecycle.js.map |
@@ -6,2 +6,1 @@ export declare const clamp: (value: number, min: number, max: number) => number; | ||
export declare const range: (from: number, to?: number) => number[]; | ||
//# sourceMappingURL=math.d.ts.map |
@@ -35,2 +35,1 @@ "use strict"; | ||
exports.range = range; | ||
//# sourceMappingURL=math.js.map |
@@ -12,2 +12,1 @@ export interface FrameworkFactory<T> { | ||
}, createFrameworkComponent?: FrameworkFactory<T>, fallback?: () => T): T; | ||
//# sourceMappingURL=componentFactory.d.ts.map |
@@ -31,2 +31,1 @@ "use strict"; | ||
exports.createComponent = createComponent; | ||
//# sourceMappingURL=componentFactory.js.map |
@@ -21,3 +21,3 @@ import { IDisposable } from '../lifecycle'; | ||
toJSON(): object; | ||
focus?(): void; | ||
focus(): void; | ||
} | ||
@@ -35,2 +35,1 @@ export interface IFrameworkPart extends IDisposable { | ||
} | ||
//# sourceMappingURL=types.d.ts.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
//# sourceMappingURL=types.js.map |
@@ -22,2 +22,1 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi'; | ||
} | ||
//# sourceMappingURL=defaultPaneviewHeader.d.ts.map |
@@ -91,2 +91,1 @@ "use strict"; | ||
exports.DefaultHeader = DefaultHeader; | ||
//# sourceMappingURL=defaultPaneviewHeader.js.map |
@@ -22,2 +22,1 @@ import { PaneviewApi } from '../api/component.api'; | ||
} | ||
//# sourceMappingURL=draggablePaneviewPanel.d.ts.map |
@@ -118,24 +118,10 @@ "use strict"; | ||
var toIndex = containerApi.panels.indexOf(this); | ||
console.log('onDrop', this.accessor.options.isRtl, fromIndex, toIndex, event.position); | ||
if (event.position === 'left' || event.position === 'top') { | ||
if (this.accessor.options.isRtl) { | ||
if (fromIndex > toIndex) { | ||
toIndex++; | ||
} | ||
toIndex = Math.min(allPanels.length - 1, toIndex); | ||
} | ||
else { | ||
toIndex = Math.max(0, toIndex - 1); | ||
} | ||
toIndex = Math.max(0, toIndex - 1); | ||
} | ||
if (event.position === 'right' || event.position === 'bottom') { | ||
if (this.accessor.options.isRtl) { | ||
toIndex = Math.max(0, toIndex - 1); | ||
if (fromIndex > toIndex) { | ||
toIndex++; | ||
} | ||
else { | ||
if (fromIndex > toIndex) { | ||
toIndex++; | ||
} | ||
toIndex = Math.min(allPanels.length - 1, toIndex); | ||
} | ||
toIndex = Math.min(allPanels.length - 1, toIndex); | ||
} | ||
@@ -147,2 +133,1 @@ containerApi.movePanel(fromIndex, toIndex); | ||
exports.DraggablePaneviewPanel = DraggablePaneviewPanel; | ||
//# sourceMappingURL=draggablePaneviewPanel.js.map |
@@ -24,5 +24,3 @@ import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory'; | ||
showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean; | ||
parentElement?: HTMLElement; | ||
isRtl?: boolean; | ||
parentElement: HTMLElement; | ||
} | ||
//# sourceMappingURL=options.d.ts.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
//# sourceMappingURL=options.js.map |
@@ -27,3 +27,2 @@ import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/splitview'; | ||
orientation: Orientation; | ||
isRtl?: boolean; | ||
descriptor?: ISplitViewDescriptor; | ||
@@ -43,2 +42,1 @@ }); | ||
export {}; | ||
//# sourceMappingURL=paneview.d.ts.map |
@@ -35,4 +35,2 @@ "use strict"; | ||
_this.element.className = 'pane-container'; | ||
(0, dom_1.toggleClass)(_this.element, 'dv-rtl', options.isRtl === true); | ||
(0, dom_1.toggleClass)(_this.element, 'dv-ltr', options.isRtl === false); | ||
container.appendChild(_this.element); | ||
@@ -43,3 +41,2 @@ _this.splitview = new splitview_1.Splitview(_this.element, { | ||
descriptor: options.descriptor, | ||
isRtl: options.isRtl, | ||
}); | ||
@@ -206,2 +203,1 @@ // if we've added views from the descriptor we need to | ||
exports.Paneview = Paneview; | ||
//# sourceMappingURL=paneview.js.map |
@@ -129,2 +129,1 @@ import { Event } from '../events'; | ||
} | ||
//# sourceMappingURL=paneviewComponent.d.ts.map |
@@ -112,3 +112,2 @@ "use strict"; | ||
orientation: splitview_1.Orientation.VERTICAL, | ||
isRtl: options.isRtl, | ||
}); | ||
@@ -290,3 +289,2 @@ _this.addDisposables(_this._disposable); | ||
orientation: splitview_1.Orientation.VERTICAL, | ||
isRtl: this.options.isRtl, | ||
descriptor: { | ||
@@ -405,2 +403,1 @@ size: size, | ||
exports.PaneviewComponent = PaneviewComponent; | ||
//# sourceMappingURL=paneviewComponent.js.map |
@@ -93,2 +93,1 @@ import { PaneviewApi } from '../api/component.api'; | ||
} | ||
//# sourceMappingURL=paneviewPanel.d.ts.map |
@@ -276,2 +276,1 @@ "use strict"; | ||
exports.PaneviewPanel = PaneviewPanel; | ||
//# sourceMappingURL=paneviewPanel.js.map |
@@ -8,5 +8,4 @@ import { CompositeDisposable } from './lifecycle'; | ||
set disableResizing(value: boolean); | ||
constructor(parentElement?: HTMLElement, disableResizing?: boolean); | ||
constructor(parentElement: HTMLElement, disableResizing?: boolean); | ||
abstract layout(width: number, height: number): void; | ||
} | ||
//# sourceMappingURL=resizable.d.ts.map |
@@ -27,11 +27,3 @@ "use strict"; | ||
_this._disableResizing = disableResizing; | ||
if (parentElement) { | ||
_this._element = parentElement; | ||
} | ||
else { | ||
_this._element = document.createElement('div'); | ||
_this._element.style.height = '100%'; | ||
_this._element.style.width = '100%'; | ||
_this._element.className = 'dv-resizable-container'; | ||
} | ||
_this._element = parentElement; | ||
_this.addDisposables((0, dom_1.watchElementResize)(_this._element, function (entry) { | ||
@@ -48,4 +40,19 @@ if (_this.isDisposed) { | ||
} | ||
if (!document.body.contains(_this._element)) { | ||
if (!_this._element.offsetParent) { | ||
/** | ||
* offsetParent === null is equivalent to display: none being set on the element or one | ||
* of it's parents. In the display: none case the size will become (0, 0) which we do | ||
* not want to propagate. | ||
* | ||
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent | ||
* | ||
* You could use checkVisibility() but at the time of writing it's not supported across | ||
* all Browsers | ||
* | ||
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility | ||
*/ | ||
return; | ||
} | ||
if (!(0, dom_1.isInDocument)(_this._element)) { | ||
/** | ||
* since the event is dispatched through requestAnimationFrame there is a small chance | ||
@@ -82,2 +89,1 @@ * the component is no longer attached to the DOM, if that is the case the dimensions | ||
exports.Resizable = Resizable; | ||
//# sourceMappingURL=resizable.js.map |
@@ -1,3 +0,3 @@ | ||
import { IPanel, PanelInitParameters } from '../panel/types'; | ||
import { IView, SplitViewOptions, LayoutPriority } from './splitview'; | ||
import { PanelInitParameters } from '../panel/types'; | ||
import { SplitViewOptions, LayoutPriority } from './splitview'; | ||
import { SplitviewPanel } from './splitviewPanel'; | ||
@@ -13,5 +13,2 @@ import { SplitviewComponent } from './splitviewComponent'; | ||
} | ||
export interface ISerializableView extends IView, IPanel { | ||
init: (params: PanelViewInitParameters) => void; | ||
} | ||
export interface SplitviewComponentOptions extends SplitViewOptions { | ||
@@ -26,4 +23,3 @@ disableAutoResizing?: boolean; | ||
frameworkWrapper?: FrameworkFactory<SplitviewPanel>; | ||
parentElement?: HTMLElement; | ||
parentElement: HTMLElement; | ||
} | ||
//# sourceMappingURL=options.d.ts.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
//# sourceMappingURL=options.js.map |
@@ -21,7 +21,6 @@ import { Event } from '../events'; | ||
readonly styles?: ISplitviewStyles; | ||
readonly isRtl?: boolean; | ||
} | ||
export declare enum LayoutPriority { | ||
Low = "low", | ||
High = "high", | ||
Low = "low",// view is offered space last | ||
High = "high",// view is offered space first | ||
Normal = "normal" | ||
@@ -79,3 +78,3 @@ } | ||
private _orthogonalSize; | ||
private contentSize; | ||
private _contentSize; | ||
private _proportions; | ||
@@ -85,2 +84,3 @@ private proportionalLayout; | ||
private _endSnappingEnabled; | ||
private _disabled; | ||
private readonly _onDidSashEnd; | ||
@@ -92,2 +92,3 @@ readonly onDidSashEnd: Event<void>; | ||
readonly onDidRemoveView: Event<IView>; | ||
get contentSize(): number; | ||
get size(): number; | ||
@@ -98,3 +99,3 @@ set size(value: number); | ||
get length(): number; | ||
get proportions(): number[] | undefined; | ||
get proportions(): (number | undefined)[] | undefined; | ||
get orientation(): Orientation; | ||
@@ -108,2 +109,4 @@ set orientation(value: Orientation); | ||
set endSnappingEnabled(endSnappingEnabled: boolean); | ||
get disabled(): boolean; | ||
set disabled(value: boolean); | ||
constructor(container: HTMLElement, options: SplitViewOptions); | ||
@@ -136,2 +139,1 @@ style(styles?: ISplitviewStyles): void; | ||
} | ||
//# sourceMappingURL=splitview.d.ts.map |
@@ -87,6 +87,7 @@ "use strict"; | ||
this._orthogonalSize = 0; | ||
this.contentSize = 0; | ||
this._contentSize = 0; | ||
this._proportions = undefined; | ||
this._startSnappingEnabled = true; | ||
this._endSnappingEnabled = true; | ||
this._disabled = false; | ||
this._onDidSashEnd = new events_1.Emitter(); | ||
@@ -106,6 +107,4 @@ this.onDidSashEnd = this._onDidSashEnd.event; | ||
} | ||
var isHorizontal = _this._orientation === Orientation.HORIZONTAL; | ||
var isRtl = (0, dom_1.hasClassInTree)(_this.element, 'dv-rtl'); | ||
var upIndexes = isHorizontal && isRtl && _this.viewItems.length > 1 ? (0, math_1.range)(index + 1, _this.viewItems.length) : (0, math_1.range)(index, -1); | ||
var downIndexes = isHorizontal && isRtl && _this.viewItems.length > 1 ? (0, math_1.range)(index, -1) : (0, math_1.range)(index + 1, _this.viewItems.length); | ||
var upIndexes = (0, math_1.range)(index, -1); | ||
var downIndexes = (0, math_1.range)(index + 1, _this.viewItems.length); | ||
// | ||
@@ -206,3 +205,3 @@ if (highPriorityIndexes) { | ||
this._orientation = options.orientation; | ||
this.element = this.createContainer(options.isRtl); | ||
this.element = this.createContainer(); | ||
this.proportionalLayout = | ||
@@ -235,6 +234,13 @@ options.proportionalLayout === undefined | ||
// Initialize content size and proportions for first layout | ||
this.contentSize = this.viewItems.reduce(function (r, i) { return r + i.size; }, 0); | ||
this._contentSize = this.viewItems.reduce(function (r, i) { return r + i.size; }, 0); | ||
this.saveProportions(); | ||
} | ||
} | ||
Object.defineProperty(Splitview.prototype, "contentSize", { | ||
get: function () { | ||
return this._contentSize; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Splitview.prototype, "size", { | ||
@@ -335,2 +341,13 @@ get: function () { | ||
}); | ||
Object.defineProperty(Splitview.prototype, "disabled", { | ||
get: function () { | ||
return this._disabled; | ||
}, | ||
set: function (value) { | ||
this._disabled = value; | ||
(0, dom_1.toggleClass)(this.element, 'dv-splitview-disabled', value); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Splitview.prototype.style = function (styles) { | ||
@@ -680,3 +697,3 @@ if ((styles === null || styles === void 0 ? void 0 : styles.separatorBorder) === 'transparent') { | ||
var _this = this; | ||
var previousSize = Math.max(this.size, this.contentSize); | ||
var previousSize = Math.max(this.size, this._contentSize); | ||
this.size = size; | ||
@@ -691,6 +708,20 @@ this.orthogonalSize = orthogonalSize; | ||
else { | ||
var total = 0; | ||
for (var i = 0; i < this.viewItems.length; i++) { | ||
var item = this.viewItems[i]; | ||
item.size = (0, math_1.clamp)(Math.round(this.proportions[i] * size), item.minimumSize, item.maximumSize); | ||
var proportion = this.proportions[i]; | ||
if (typeof proportion === 'number') { | ||
total += proportion; | ||
} | ||
else { | ||
size -= item.size; | ||
} | ||
} | ||
for (var i = 0; i < this.viewItems.length; i++) { | ||
var item = this.viewItems[i]; | ||
var proportion = this.proportions[i]; | ||
if (typeof proportion === 'number' && total > 0) { | ||
item.size = (0, math_1.clamp)(Math.round((proportion * size) / total), item.minimumSize, item.maximumSize); | ||
} | ||
} | ||
} | ||
@@ -754,4 +785,6 @@ this.distributeEmptySpace(); | ||
var _this = this; | ||
if (this.proportionalLayout && this.contentSize > 0) { | ||
this._proportions = this.viewItems.map(function (i) { return i.size / _this.contentSize; }); | ||
if (this.proportionalLayout && this._contentSize > 0) { | ||
this._proportions = this.viewItems.map(function (i) { | ||
return i.visible ? i.size / _this._contentSize : undefined; | ||
}); | ||
} | ||
@@ -761,4 +794,3 @@ }; | ||
var _this = this; | ||
this.contentSize = this.viewItems.reduce(function (r, i) { return r + i.size; }, 0); | ||
var isRtl = (0, dom_1.hasClassInTree)(this.element, 'dv-rtl'); | ||
this._contentSize = this.viewItems.reduce(function (r, i) { return r + i.size; }, 0); | ||
var sum = 0; | ||
@@ -772,9 +804,7 @@ var x = []; | ||
if (this._orientation === Orientation.HORIZONTAL) { | ||
this.sashes[i].container.style.left = isRtl ? '' : "".concat(offset, "px"); | ||
this.sashes[i].container.style.right = isRtl ? "".concat(offset, "px") : ''; | ||
this.sashes[i].container.style.left = "".concat(offset, "px"); | ||
this.sashes[i].container.style.top = "0px"; | ||
} | ||
if (this._orientation === Orientation.VERTICAL) { | ||
this.sashes[i].container.style.left = isRtl ? '' : "0px"; | ||
this.sashes[i].container.style.right = isRtl ? "0px" : ''; | ||
this.sashes[i].container.style.left = "0px"; | ||
this.sashes[i].container.style.top = "".concat(offset, "px"); | ||
@@ -786,4 +816,3 @@ } | ||
view.container.style.width = "".concat(view.size, "px"); | ||
view.container.style.left = isRtl ? '' : (i == 0 ? '0px' : "".concat(x[i - 1], "px")); | ||
view.container.style.right = isRtl ? (i == 0 ? '0px' : "".concat(x[i - 1], "px")) : ''; | ||
view.container.style.left = i == 0 ? '0px' : "".concat(x[i - 1], "px"); | ||
view.container.style.top = ''; | ||
@@ -797,3 +826,2 @@ view.container.style.height = ''; | ||
view.container.style.left = ''; | ||
view.container.style.right = ''; | ||
} | ||
@@ -885,3 +913,3 @@ view.view.layout(view.size, _this._orthogonalSize); | ||
collapsesDown[index] && | ||
(position < this.contentSize || this.endSnappingEnabled)) { | ||
(position < this._contentSize || this.endSnappingEnabled)) { | ||
this.updateSash(sash, SashState.MAXIMUM); | ||
@@ -920,3 +948,3 @@ } | ||
}; | ||
Splitview.prototype.createContainer = function (isRtl) { | ||
Splitview.prototype.createContainer = function () { | ||
var element = document.createElement('div'); | ||
@@ -927,4 +955,2 @@ var orientationClassname = this._orientation === Orientation.HORIZONTAL | ||
element.className = "split-view-container ".concat(orientationClassname); | ||
(0, dom_1.toggleClass)(element, 'dv-rtl', isRtl === true); | ||
(0, dom_1.toggleClass)(element, 'dv-ltr', isRtl === false); | ||
return element; | ||
@@ -961,2 +987,1 @@ }; | ||
exports.Splitview = Splitview; | ||
//# sourceMappingURL=splitview.js.map |
@@ -102,2 +102,1 @@ import { IDisposable } from '../lifecycle'; | ||
} | ||
//# sourceMappingURL=splitviewComponent.d.ts.map |
@@ -293,3 +293,2 @@ "use strict"; | ||
proportionalLayout: this.options.proportionalLayout, | ||
isRtl: this.options.isRtl, | ||
descriptor: { | ||
@@ -398,2 +397,1 @@ size: size, | ||
exports.SplitviewComponent = SplitviewComponent; | ||
//# sourceMappingURL=splitviewComponent.js.map |
@@ -1,2 +0,2 @@ | ||
import { ISerializableView, PanelViewInitParameters } from './options'; | ||
import { PanelViewInitParameters } from './options'; | ||
import { BasePanelView, BasePanelViewExported } from '../gridview/basePanelView'; | ||
@@ -13,3 +13,3 @@ import { SplitviewPanelApiImpl } from '../api/splitviewPanelApi'; | ||
} | ||
export declare abstract class SplitviewPanel extends BasePanelView<SplitviewPanelApiImpl> implements ISerializableView, ISplitviewPanel { | ||
export declare abstract class SplitviewPanel extends BasePanelView<SplitviewPanelApiImpl> implements ISplitviewPanel { | ||
private _evaluatedMinimumSize; | ||
@@ -47,2 +47,1 @@ private _evaluatedMaximumSize; | ||
} | ||
//# sourceMappingURL=splitviewPanel.d.ts.map |
@@ -62,6 +62,6 @@ "use strict"; | ||
_this.api.initialize(_this); | ||
_this.addDisposables(_this._onDidChange, _this.api.onVisibilityChange(function (event) { | ||
var isVisible = event.isVisible; | ||
_this.addDisposables(_this._onDidChange, _this.api.onDidHiddenChange(function (event) { | ||
var isHidden = event.isHidden; | ||
var accessor = _this._params.accessor; | ||
accessor.setVisible(_this, isVisible); | ||
accessor.setVisible(_this, !isHidden); | ||
}), _this.api.onActiveChange(function () { | ||
@@ -181,2 +181,1 @@ var accessor = _this._params.accessor; | ||
exports.SplitviewPanel = SplitviewPanel; | ||
//# sourceMappingURL=splitviewPanel.js.map |
@@ -26,2 +26,1 @@ import { IDisposable } from '../lifecycle'; | ||
} | ||
//# sourceMappingURL=viewItem.d.ts.map |
@@ -120,2 +120,1 @@ "use strict"; | ||
exports.ViewItem = ViewItem; | ||
//# sourceMappingURL=viewItem.js.map |
export declare const createCloseButton: () => SVGSVGElement; | ||
export declare const createExpandMoreButton: () => SVGSVGElement; | ||
export declare const createChevronRightButton: () => SVGSVGElement; | ||
//# sourceMappingURL=svg.d.ts.map |
@@ -44,2 +44,1 @@ "use strict"; | ||
exports.createChevronRightButton = createChevronRightButton; | ||
//# sourceMappingURL=svg.js.map |
export type FunctionOrValue<T> = (() => T) | T; | ||
export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>; | ||
//# sourceMappingURL=types.d.ts.map | ||
export interface Box { | ||
left: number; | ||
top: number; | ||
height: number; | ||
width: number; | ||
} |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
//# sourceMappingURL=types.js.map |
@@ -1,2 +0,2 @@ | ||
import { DockviewDropEvent, IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent'; | ||
import { IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent'; | ||
import { AddGroupOptions, AddPanelOptions, MovementOptions } from '../dockview/options'; | ||
@@ -17,2 +17,4 @@ import { Parameters } from '../panel/types'; | ||
import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer'; | ||
import { Box } from '../types'; | ||
import { DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent } from '../dockview/dockviewGroupPanelModel'; | ||
export interface CommonApi<T = any> { | ||
@@ -367,4 +369,15 @@ readonly height: number; | ||
*/ | ||
get onDidDrop(): Event<DockviewDropEvent>; | ||
get onDidDrop(): Event<DockviewDidDropEvent>; | ||
/** | ||
* Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and | ||
* prevent the event from occuring using the standard `preventDefault()` syntax. | ||
* | ||
* Preventing certain events may causes unexpected behaviours, use carefully. | ||
*/ | ||
get onWillDrop(): Event<DockviewWillDropEvent>; | ||
/** | ||
* | ||
*/ | ||
get onWillShowOverlay(): Event<WillShowOverlayLocationEvent>; | ||
/** | ||
* Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality. | ||
@@ -457,3 +470,21 @@ */ | ||
moveToPrevious(options?: MovementOptions): void; | ||
maximizeGroup(panel: IDockviewPanel): void; | ||
hasMaximizedGroup(): boolean; | ||
exitMaximizedGroup(): void; | ||
get onDidMaximizedGroupChange(): Event<void>; | ||
/** | ||
* Add a popout group in a new Window | ||
*/ | ||
addPopoutGroup(item: IDockviewPanel | DockviewGroupPanel, options?: { | ||
position?: Box; | ||
popoutUrl?: string; | ||
onDidOpen?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
onWillClose?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
}): Promise<void>; | ||
} | ||
//# sourceMappingURL=component.api.d.ts.map |
@@ -510,2 +510,17 @@ import { Emitter } from '../events'; | ||
/** | ||
* Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and | ||
* prevent the event from occuring using the standard `preventDefault()` syntax. | ||
* | ||
* Preventing certain events may causes unexpected behaviours, use carefully. | ||
*/ | ||
get onWillDrop() { | ||
return this.component.onWillDrop; | ||
} | ||
/** | ||
* | ||
*/ | ||
get onWillShowOverlay() { | ||
return this.component.onWillShowOverlay; | ||
} | ||
/** | ||
* Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality. | ||
@@ -639,3 +654,20 @@ */ | ||
} | ||
maximizeGroup(panel) { | ||
this.component.maximizeGroup(panel.group); | ||
} | ||
hasMaximizedGroup() { | ||
return this.component.hasMaximizedGroup(); | ||
} | ||
exitMaximizedGroup() { | ||
this.component.exitMaximizedGroup(); | ||
} | ||
get onDidMaximizedGroupChange() { | ||
return this.component.onDidMaximizedGroupChange; | ||
} | ||
/** | ||
* Add a popout group in a new Window | ||
*/ | ||
addPopoutGroup(item, options) { | ||
return this.component.addPopoutGroup(item, options); | ||
} | ||
} | ||
//# sourceMappingURL=component.api.js.map |
import { Position } from '../dnd/droptarget'; | ||
import { DockviewComponent } from '../dockview/dockviewComponent'; | ||
import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel'; | ||
import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel'; | ||
import { Emitter, Event } from '../events'; | ||
import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi'; | ||
export interface DockviewGroupPanelApi extends GridviewPanelApi { | ||
readonly onDidFloatingStateChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
readonly isFloating: boolean; | ||
readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
readonly location: DockviewGroupLocation; | ||
/** | ||
* If you require the Window object | ||
*/ | ||
getWindow(): Window; | ||
moveTo(options: { | ||
group: DockviewGroupPanel; | ||
group?: DockviewGroupPanel; | ||
position?: Position; | ||
}): void; | ||
maximize(): void; | ||
isMaximized(): boolean; | ||
exitMaximized(): void; | ||
close(): void; | ||
} | ||
export interface DockviewGroupPanelFloatingChangeEvent { | ||
readonly isFloating: boolean; | ||
readonly location: DockviewGroupLocation; | ||
} | ||
@@ -20,12 +29,16 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl { | ||
private _group; | ||
readonly _onDidFloatingStateChange: Emitter<DockviewGroupPanelFloatingChangeEvent>; | ||
readonly onDidFloatingStateChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
get isFloating(): boolean; | ||
readonly _onDidLocationChange: Emitter<DockviewGroupPanelFloatingChangeEvent>; | ||
readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
get location(): DockviewGroupLocation; | ||
constructor(id: string, accessor: DockviewComponent); | ||
close(): void; | ||
getWindow(): Window; | ||
moveTo(options: { | ||
group: DockviewGroupPanel; | ||
group?: DockviewGroupPanel; | ||
position?: Position; | ||
}): void; | ||
maximize(): void; | ||
isMaximized(): boolean; | ||
exitMaximized(): void; | ||
initialize(group: DockviewGroupPanel): void; | ||
} | ||
//# sourceMappingURL=dockviewGroupPanelApi.d.ts.map |
@@ -0,9 +1,12 @@ | ||
import { positionToDirection } from '../dnd/droptarget'; | ||
import { Emitter } from '../events'; | ||
import { GridviewPanelApiImpl } from './gridviewPanelApi'; | ||
// TODO find a better way to initialize and avoid needing null checks | ||
const NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized'; | ||
export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl { | ||
get isFloating() { | ||
get location() { | ||
if (!this._group) { | ||
throw new Error(`DockviewGroupPanelApiImpl not initialized`); | ||
throw new Error(NOT_INITIALIZED_MESSAGE); | ||
} | ||
return this._group.model.isFloating; | ||
return this._group.model.location; | ||
} | ||
@@ -13,13 +16,60 @@ constructor(id, accessor) { | ||
this.accessor = accessor; | ||
this._onDidFloatingStateChange = new Emitter(); | ||
this.onDidFloatingStateChange = this._onDidFloatingStateChange.event; | ||
this.addDisposables(this._onDidFloatingStateChange); | ||
this._onDidLocationChange = new Emitter(); | ||
this.onDidLocationChange = this._onDidLocationChange.event; | ||
this.addDisposables(this._onDidLocationChange); | ||
} | ||
close() { | ||
if (!this._group) { | ||
return; | ||
} | ||
return this.accessor.removeGroup(this._group); | ||
} | ||
getWindow() { | ||
return this.location.type === 'popout' | ||
? this.location.getWindow() | ||
: window; | ||
} | ||
moveTo(options) { | ||
var _a; | ||
var _a, _b, _c; | ||
if (!this._group) { | ||
throw new Error(`DockviewGroupPanelApiImpl not initialized`); | ||
throw new Error(NOT_INITIALIZED_MESSAGE); | ||
} | ||
this.accessor.moveGroupOrPanel(options.group, this._group.id, undefined, (_a = options.position) !== null && _a !== void 0 ? _a : 'center'); | ||
const group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({ | ||
direction: positionToDirection((_b = options.position) !== null && _b !== void 0 ? _b : 'right'), | ||
skipSetActive: true, | ||
}); | ||
this.accessor.moveGroupOrPanel({ | ||
from: { groupId: this._group.id }, | ||
to: { | ||
group, | ||
position: options.group | ||
? (_c = options.position) !== null && _c !== void 0 ? _c : 'center' | ||
: 'center', | ||
}, | ||
}); | ||
} | ||
maximize() { | ||
if (!this._group) { | ||
throw new Error(NOT_INITIALIZED_MESSAGE); | ||
} | ||
if (this.location.type !== 'grid') { | ||
// only grid groups can be maximized | ||
return; | ||
} | ||
this.accessor.maximizeGroup(this._group); | ||
} | ||
isMaximized() { | ||
if (!this._group) { | ||
throw new Error(NOT_INITIALIZED_MESSAGE); | ||
} | ||
return this.accessor.isMaximizedGroup(this._group); | ||
} | ||
exitMaximized() { | ||
if (!this._group) { | ||
throw new Error(NOT_INITIALIZED_MESSAGE); | ||
} | ||
if (this.isMaximized()) { | ||
this.accessor.exitMaximizedGroup(); | ||
} | ||
} | ||
initialize(group) { | ||
@@ -29,2 +79,1 @@ this._group = group; | ||
} | ||
//# sourceMappingURL=dockviewGroupPanelApi.js.map |
@@ -7,3 +7,5 @@ import { Emitter, Event } from '../events'; | ||
import { Position } from '../dnd/droptarget'; | ||
import { DockviewPanelRenderer } from '../dockview/components/greadyRenderContainer'; | ||
import { DockviewPanelRenderer } from '../overlayRenderContainer'; | ||
import { DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi'; | ||
import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel'; | ||
export interface TitleEvent { | ||
@@ -13,4 +15,9 @@ readonly title: string; | ||
export interface RendererChangedEvent { | ||
renderer: DockviewPanelRenderer; | ||
readonly renderer: DockviewPanelRenderer; | ||
} | ||
export interface ActiveGroupEvent { | ||
readonly isActive: boolean; | ||
} | ||
export interface GroupChangedEvent { | ||
} | ||
export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' | 'onDidConstraintsChange' | 'setConstraints'> { | ||
@@ -21,5 +28,7 @@ readonly group: DockviewGroupPanel; | ||
readonly title: string | undefined; | ||
readonly onDidActiveGroupChange: Event<void>; | ||
readonly onDidGroupChange: Event<void>; | ||
readonly onDidActiveGroupChange: Event<ActiveGroupEvent>; | ||
readonly onDidGroupChange: Event<GroupChangedEvent>; | ||
readonly onDidRendererChange: Event<RendererChangedEvent>; | ||
readonly location: DockviewGroupLocation; | ||
readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
close(): void; | ||
@@ -33,2 +42,9 @@ setTitle(title: string): void; | ||
}): void; | ||
maximize(): void; | ||
isMaximized(): boolean; | ||
exitMaximized(): void; | ||
/** | ||
* If you require the Window object | ||
*/ | ||
getWindow(): Window; | ||
} | ||
@@ -42,8 +58,11 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implements DockviewPanelApi { | ||
private readonly _onDidActiveGroupChange; | ||
readonly onDidActiveGroupChange: Event<void>; | ||
readonly onDidActiveGroupChange: Event<ActiveGroupEvent>; | ||
private readonly _onDidGroupChange; | ||
readonly onDidGroupChange: Event<void>; | ||
readonly onDidGroupChange: Event<GroupChangedEvent>; | ||
readonly _onDidRendererChange: Emitter<RendererChangedEvent>; | ||
readonly onDidRendererChange: Event<RendererChangedEvent>; | ||
private readonly disposable; | ||
private readonly _onDidLocationChange; | ||
readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>; | ||
private readonly groupEventsDisposable; | ||
get location(): DockviewGroupLocation; | ||
get title(): string | undefined; | ||
@@ -55,2 +74,3 @@ get isGroupActive(): boolean; | ||
constructor(panel: DockviewPanel, group: DockviewGroupPanel, accessor: DockviewComponent); | ||
getWindow(): Window; | ||
moveTo(options: { | ||
@@ -64,3 +84,5 @@ group: DockviewGroupPanel; | ||
close(): void; | ||
maximize(): void; | ||
isMaximized(): boolean; | ||
exitMaximized(): void; | ||
} | ||
//# sourceMappingURL=dockviewPanelApi.d.ts.map |
import { Emitter } from '../events'; | ||
import { GridviewPanelApiImpl } from './gridviewPanelApi'; | ||
import { MutableDisposable } from '../lifecycle'; | ||
import { CompositeDisposable, MutableDisposable } from '../lifecycle'; | ||
export class DockviewPanelApiImpl extends GridviewPanelApiImpl { | ||
get location() { | ||
return this.group.api.location; | ||
} | ||
get title() { | ||
@@ -9,4 +12,3 @@ return this.panel.title; | ||
get isGroupActive() { | ||
var _a; | ||
return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive); | ||
return this.group.isActive; | ||
} | ||
@@ -18,11 +20,30 @@ get renderer() { | ||
const isOldGroupActive = this.isGroupActive; | ||
this._group = value; | ||
this._onDidGroupChange.fire(); | ||
if (this._group) { | ||
this.disposable.value = this._group.api.onDidActiveChange(() => { | ||
this._onDidActiveGroupChange.fire(); | ||
if (this._group !== value) { | ||
this._group = value; | ||
this._onDidGroupChange.fire({}); | ||
let _trackGroupActive = isOldGroupActive; // prevent duplicate events with same state | ||
this.groupEventsDisposable.value = new CompositeDisposable(this.group.api.onDidLocationChange((event) => { | ||
if (this.group !== this.panel.group) { | ||
return; | ||
} | ||
this._onDidLocationChange.fire(event); | ||
}), this.group.api.onDidActiveChange(() => { | ||
if (this.group !== this.panel.group) { | ||
return; | ||
} | ||
if (_trackGroupActive !== this.isGroupActive) { | ||
_trackGroupActive = this.isGroupActive; | ||
this._onDidActiveGroupChange.fire({ | ||
isActive: this.isGroupActive, | ||
}); | ||
} | ||
})); | ||
// if (this.isGroupActive !== isOldGroupActive) { | ||
// this._onDidActiveGroupChange.fire({ | ||
// isActive: this.isGroupActive, | ||
// }); | ||
// } | ||
this._onDidLocationChange.fire({ | ||
location: this.group.api.location, | ||
}); | ||
if (this.isGroupActive !== isOldGroupActive) { | ||
this._onDidActiveGroupChange.fire(); | ||
} | ||
} | ||
@@ -45,10 +66,22 @@ } | ||
this.onDidRendererChange = this._onDidRendererChange.event; | ||
this.disposable = new MutableDisposable(); | ||
this._onDidLocationChange = new Emitter(); | ||
this.onDidLocationChange = this._onDidLocationChange.event; | ||
this.groupEventsDisposable = new MutableDisposable(); | ||
this.initialize(panel); | ||
this._group = group; | ||
this.addDisposables(this.disposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange); | ||
this.addDisposables(this.groupEventsDisposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange, this._onDidLocationChange); | ||
} | ||
getWindow() { | ||
return this.group.api.getWindow(); | ||
} | ||
moveTo(options) { | ||
var _a; | ||
this.accessor.moveGroupOrPanel(options.group, this._group.id, this.panel.id, (_a = options.position) !== null && _a !== void 0 ? _a : 'center', options.index); | ||
this.accessor.moveGroupOrPanel({ | ||
from: { groupId: this._group.id, panelId: this.panel.id }, | ||
to: { | ||
group: options.group, | ||
position: (_a = options.position) !== null && _a !== void 0 ? _a : 'center', | ||
index: options.index, | ||
}, | ||
}); | ||
} | ||
@@ -64,3 +97,11 @@ setTitle(title) { | ||
} | ||
maximize() { | ||
this.group.api.maximize(); | ||
} | ||
isMaximized() { | ||
return this.group.api.isMaximized(); | ||
} | ||
exitMaximized() { | ||
this.group.api.exitMaximized(); | ||
} | ||
} | ||
//# sourceMappingURL=dockviewPanelApi.js.map |
@@ -38,2 +38,1 @@ import { Emitter, Event } from '../events'; | ||
export {}; | ||
//# sourceMappingURL=gridviewPanelApi.d.ts.map |
@@ -8,5 +8,3 @@ import { Emitter } from '../events'; | ||
this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event; | ||
this._onDidConstraintsChange = new Emitter({ | ||
replay: true, | ||
}); | ||
this._onDidConstraintsChange = new Emitter(); | ||
this.onDidConstraintsChange = this._onDidConstraintsChange.event; | ||
@@ -27,2 +25,1 @@ this._onDidSizeChange = new Emitter(); | ||
} | ||
//# sourceMappingURL=gridviewPanelApi.js.map |
@@ -1,2 +0,2 @@ | ||
import { Emitter, Event } from '../events'; | ||
import { DockviewEvent, Emitter, Event } from '../events'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
@@ -14,2 +14,5 @@ import { IPanel, Parameters } from '../panel/types'; | ||
} | ||
export interface HiddenEvent { | ||
readonly isHidden: boolean; | ||
} | ||
export interface ActiveEvent { | ||
@@ -23,3 +26,3 @@ readonly isActive: boolean; | ||
readonly onDidActiveChange: Event<ActiveEvent>; | ||
setVisible(isVisible: boolean): void; | ||
readonly onDidHiddenChange: Event<HiddenEvent>; | ||
setActive(): void; | ||
@@ -44,2 +47,6 @@ updateParameters(parameters: Parameters): void; | ||
/** | ||
* Whether the panel is hidden | ||
*/ | ||
readonly isHidden: boolean; | ||
/** | ||
* The panel width in pixels | ||
@@ -52,3 +59,7 @@ */ | ||
readonly height: number; | ||
readonly onWillFocus: Event<WillFocusEvent>; | ||
} | ||
export declare class WillFocusEvent extends DockviewEvent { | ||
constructor(); | ||
} | ||
/** | ||
@@ -62,2 +73,3 @@ * A core api implementation that should be used across all panel-like objects | ||
private _isVisible; | ||
private _isHidden; | ||
private _width; | ||
@@ -70,8 +82,8 @@ private _height; | ||
readonly onDidFocusChange: Event<FocusEvent>; | ||
readonly _onFocusEvent: Emitter<void>; | ||
readonly onFocusEvent: Event<void>; | ||
readonly _onWillFocus: Emitter<WillFocusEvent>; | ||
readonly onWillFocus: Event<WillFocusEvent>; | ||
readonly _onDidVisibilityChange: Emitter<VisibilityEvent>; | ||
readonly onDidVisibilityChange: Event<VisibilityEvent>; | ||
readonly _onVisibilityChange: Emitter<VisibilityEvent>; | ||
readonly onVisibilityChange: Event<VisibilityEvent>; | ||
readonly _onDidHiddenChange: Emitter<HiddenEvent>; | ||
readonly onDidHiddenChange: Event<HiddenEvent>; | ||
readonly _onDidActiveChange: Emitter<ActiveEvent>; | ||
@@ -86,2 +98,3 @@ readonly onDidActiveChange: Event<ActiveEvent>; | ||
get isVisible(): boolean; | ||
get isHidden(): boolean; | ||
get width(): number; | ||
@@ -91,7 +104,5 @@ get height(): number; | ||
initialize(panel: IPanel): void; | ||
setVisible(isVisible: boolean): void; | ||
setHidden(isHidden: boolean): void; | ||
setActive(): void; | ||
updateParameters(parameters: Parameters): void; | ||
dispose(): void; | ||
} | ||
//# sourceMappingURL=panelApi.d.ts.map |
@@ -1,3 +0,8 @@ | ||
import { Emitter } from '../events'; | ||
import { DockviewEvent, Emitter } from '../events'; | ||
import { CompositeDisposable, MutableDisposable } from '../lifecycle'; | ||
export class WillFocusEvent extends DockviewEvent { | ||
constructor() { | ||
super(); | ||
} | ||
} | ||
/** | ||
@@ -7,3 +12,2 @@ * A core api implementation that should be used across all panel-like objects | ||
export class PanelApiImpl extends CompositeDisposable { | ||
// | ||
get isFocused() { | ||
@@ -18,2 +22,5 @@ return this._isFocused; | ||
} | ||
get isHidden() { | ||
return this._isHidden; | ||
} | ||
get width() { | ||
@@ -31,34 +38,22 @@ return this._width; | ||
this._isVisible = true; | ||
this._isHidden = false; | ||
this._width = 0; | ||
this._height = 0; | ||
this.panelUpdatesDisposable = new MutableDisposable(); | ||
this._onDidDimensionChange = new Emitter({ | ||
replay: true, | ||
}); | ||
this._onDidDimensionChange = new Emitter(); | ||
this.onDidDimensionsChange = this._onDidDimensionChange.event; | ||
// | ||
this._onDidChangeFocus = new Emitter({ | ||
replay: true, | ||
}); | ||
this._onDidChangeFocus = new Emitter(); | ||
this.onDidFocusChange = this._onDidChangeFocus.event; | ||
// | ||
this._onFocusEvent = new Emitter(); | ||
this.onFocusEvent = this._onFocusEvent.event; | ||
this._onWillFocus = new Emitter(); | ||
this.onWillFocus = this._onWillFocus.event; | ||
// | ||
this._onDidVisibilityChange = new Emitter({ | ||
replay: true, | ||
}); | ||
this._onDidVisibilityChange = new Emitter(); | ||
this.onDidVisibilityChange = this._onDidVisibilityChange.event; | ||
// | ||
this._onVisibilityChange = new Emitter(); | ||
this.onVisibilityChange = this._onVisibilityChange.event; | ||
// | ||
this._onDidActiveChange = new Emitter({ | ||
replay: true, | ||
}); | ||
this._onDidHiddenChange = new Emitter(); | ||
this.onDidHiddenChange = this._onDidHiddenChange.event; | ||
this._onDidActiveChange = new Emitter(); | ||
this.onDidActiveChange = this._onDidActiveChange.event; | ||
// | ||
this._onActiveChange = new Emitter(); | ||
this.onActiveChange = this._onActiveChange.event; | ||
// | ||
this._onUpdateParameters = new Emitter(); | ||
@@ -72,6 +67,8 @@ this.onUpdateParameters = this._onUpdateParameters.event; | ||
this._isVisible = event.isVisible; | ||
}), this.onDidHiddenChange((event) => { | ||
this._isHidden = event.isHidden; | ||
}), this.onDidDimensionsChange((event) => { | ||
this._width = event.width; | ||
this._height = event.height; | ||
}), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters); | ||
}), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onUpdateParameters, this._onWillFocus, this._onDidHiddenChange, this._onUpdateParameters); | ||
} | ||
@@ -85,4 +82,4 @@ initialize(panel) { | ||
} | ||
setVisible(isVisible) { | ||
this._onVisibilityChange.fire({ isVisible }); | ||
setHidden(isHidden) { | ||
this._onDidHiddenChange.fire({ isHidden }); | ||
} | ||
@@ -95,6 +92,2 @@ setActive() { | ||
} | ||
dispose() { | ||
super.dispose(); | ||
} | ||
} | ||
//# sourceMappingURL=panelApi.js.map |
@@ -27,2 +27,1 @@ import { Emitter, Event } from '../events'; | ||
} | ||
//# sourceMappingURL=paneviewPanelApi.d.ts.map |
@@ -28,2 +28,1 @@ import { Emitter } from '../events'; | ||
} | ||
//# sourceMappingURL=paneviewPanelApi.js.map |
@@ -33,2 +33,1 @@ import { Emitter, Event } from '../events'; | ||
export {}; | ||
//# sourceMappingURL=splitviewPanelApi.d.ts.map |
@@ -26,2 +26,1 @@ import { Emitter } from '../events'; | ||
} | ||
//# sourceMappingURL=splitviewPanelApi.js.map |
@@ -14,2 +14,1 @@ export declare function tail<T>(arr: T[]): [T[], T]; | ||
export declare function remove<T>(array: T[], value: T): boolean; | ||
//# sourceMappingURL=array.d.ts.map |
@@ -58,2 +58,1 @@ export function tail(arr) { | ||
} | ||
//# sourceMappingURL=array.js.map |
@@ -13,2 +13,1 @@ import { CompositeDisposable, IDisposable } from '../lifecycle'; | ||
} | ||
//# sourceMappingURL=abstractDragHandler.d.ts.map |
@@ -64,2 +64,1 @@ import { getElementsByTagName } from '../dom'; | ||
} | ||
//# sourceMappingURL=abstractDragHandler.js.map |
@@ -31,2 +31,1 @@ declare class TransferObject { | ||
export {}; | ||
//# sourceMappingURL=dataTransfer.d.ts.map |
@@ -67,2 +67,1 @@ class TransferObject { | ||
} | ||
//# sourceMappingURL=dataTransfer.js.map |
@@ -33,2 +33,1 @@ import { CompositeDisposable } from '../lifecycle'; | ||
} | ||
//# sourceMappingURL=dnd.d.ts.map |
@@ -52,2 +52,1 @@ import { addDisposableListener } from '../events'; | ||
} | ||
//# sourceMappingURL=dnd.js.map |
@@ -1,7 +0,5 @@ | ||
import { Event } from '../events'; | ||
import { DockviewEvent, Event } from '../events'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
import { DragAndDropObserver } from './dnd'; | ||
import { Direction } from '../gridview/baseComponentGridview'; | ||
export declare function directionToPosition(direction: Direction): Position; | ||
export declare function positionToDirection(position: Position): Direction; | ||
export interface DroptargetEvent { | ||
@@ -11,4 +9,28 @@ readonly position: Position; | ||
} | ||
export declare class WillShowOverlayEvent extends DockviewEvent implements DroptargetEvent { | ||
private readonly options; | ||
get nativeEvent(): DragEvent; | ||
get position(): Position; | ||
constructor(options: { | ||
nativeEvent: DragEvent; | ||
position: Position; | ||
}); | ||
} | ||
export declare function directionToPosition(direction: Direction): Position; | ||
export declare function positionToDirection(position: Position): Direction; | ||
export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center'; | ||
export type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Position) => boolean); | ||
export type MeasuredValue = { | ||
value: number; | ||
type: 'pixels' | 'percentage'; | ||
}; | ||
export type DroptargetOverlayModel = { | ||
size?: MeasuredValue; | ||
activationSize?: MeasuredValue; | ||
}; | ||
export interface DroptargetOptions { | ||
canDisplayOverlay: CanDisplayOverlay; | ||
acceptedTargetZones: Position[]; | ||
overlayModel?: DroptargetOverlayModel; | ||
} | ||
export declare class Droptarget extends CompositeDisposable { | ||
@@ -23,20 +45,10 @@ private readonly element; | ||
readonly onDrop: Event<DroptargetEvent>; | ||
private readonly _onWillShowOverlay; | ||
readonly onWillShowOverlay: Event<WillShowOverlayEvent>; | ||
readonly dnd: DragAndDropObserver; | ||
private static USED_EVENT_ID; | ||
get state(): Position | undefined; | ||
constructor(element: HTMLElement, options: { | ||
canDisplayOverlay: CanDisplayOverlay; | ||
acceptedTargetZones: Position[]; | ||
overlayModel?: { | ||
size?: { | ||
value: number; | ||
type: 'pixels' | 'percentage'; | ||
}; | ||
activationSize?: { | ||
value: number; | ||
type: 'pixels' | 'percentage'; | ||
}; | ||
}; | ||
}); | ||
constructor(element: HTMLElement, options: DroptargetOptions); | ||
setTargetZones(acceptedTargetZones: Position[]): void; | ||
setOverlayModel(model: DroptargetOverlayModel): void; | ||
dispose(): void; | ||
@@ -48,7 +60,6 @@ /** | ||
/** | ||
* Check is the event has already been used by another instance od DropTarget | ||
* Check is the event has already been used by another instance of DropTarget | ||
*/ | ||
private isAlreadyUsed; | ||
private toggleClasses; | ||
private setState; | ||
private calculateQuadrant; | ||
@@ -59,2 +70,1 @@ private removeDropTarget; | ||
export declare function calculateQuadrantAsPixels(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null; | ||
//# sourceMappingURL=droptarget.d.ts.map |
import { toggleClass } from '../dom'; | ||
import { Emitter } from '../events'; | ||
import { DockviewEvent, Emitter } from '../events'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
import { DragAndDropObserver } from './dnd'; | ||
import { clamp } from '../math'; | ||
function numberOrFallback(maybeNumber, fallback) { | ||
return typeof maybeNumber === 'number' ? maybeNumber : fallback; | ||
export class WillShowOverlayEvent extends DockviewEvent { | ||
get nativeEvent() { | ||
return this.options.nativeEvent; | ||
} | ||
get position() { | ||
return this.options.position; | ||
} | ||
constructor(options) { | ||
super(); | ||
this.options = options; | ||
} | ||
} | ||
@@ -41,2 +50,12 @@ export function directionToPosition(direction) { | ||
} | ||
const DEFAULT_ACTIVATION_SIZE = { | ||
value: 20, | ||
type: 'percentage', | ||
}; | ||
const DEFAULT_SIZE = { | ||
value: 50, | ||
type: 'percentage', | ||
}; | ||
const SMALL_WIDTH_BOUNDARY = 100; | ||
const SMALL_HEIGHT_BOUNDARY = 100; | ||
export class Droptarget extends CompositeDisposable { | ||
@@ -52,2 +71,4 @@ get state() { | ||
this.onDrop = this._onDrop.event; | ||
this._onWillShowOverlay = new Emitter(); | ||
this.onWillShowOverlay = this._onWillShowOverlay.event; | ||
// use a set to take advantage of #<set>.has | ||
@@ -81,2 +102,15 @@ this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones); | ||
} | ||
const willShowOverlayEvent = new WillShowOverlayEvent({ | ||
nativeEvent: e, | ||
position: quadrant, | ||
}); | ||
/** | ||
* Provide an opportunity to prevent the overlay appearing and in turn | ||
* any dnd behaviours | ||
*/ | ||
this._onWillShowOverlay.fire(willShowOverlayEvent); | ||
if (willShowOverlayEvent.defaultPrevented) { | ||
this.removeDropTarget(); | ||
return; | ||
} | ||
if (typeof this.options.canDisplayOverlay === 'boolean') { | ||
@@ -104,3 +138,3 @@ if (!this.options.canDisplayOverlay) { | ||
this.toggleClasses(quadrant, width, height); | ||
this.setState(quadrant); | ||
this._state = quadrant; | ||
}, | ||
@@ -125,3 +159,3 @@ onDragLeave: () => { | ||
}); | ||
this.addDisposables(this._onDrop, this.dnd); | ||
this.addDisposables(this._onDrop, this._onWillShowOverlay, this.dnd); | ||
} | ||
@@ -131,2 +165,5 @@ setTargetZones(acceptedTargetZones) { | ||
} | ||
setOverlayModel(model) { | ||
this.options.overlayModel = model; | ||
} | ||
dispose() { | ||
@@ -143,3 +180,3 @@ this.removeDropTarget(); | ||
/** | ||
* Check is the event has already been used by another instance od DropTarget | ||
* Check is the event has already been used by another instance of DropTarget | ||
*/ | ||
@@ -151,8 +188,8 @@ isAlreadyUsed(event) { | ||
toggleClasses(quadrant, width, height) { | ||
var _a, _b, _c, _d; | ||
var _a, _b; | ||
if (!this.overlayElement) { | ||
return; | ||
} | ||
const isSmallX = width < 100; | ||
const isSmallY = height < 100; | ||
const isSmallX = width < SMALL_WIDTH_BOUNDARY; | ||
const isSmallY = height < SMALL_HEIGHT_BOUNDARY; | ||
const isLeft = quadrant === 'left'; | ||
@@ -166,70 +203,69 @@ const isRight = quadrant === 'right'; | ||
const bottomClass = !isSmallY && isBottom; | ||
let size = 0.5; | ||
if (((_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.type) === 'percentage') { | ||
size = clamp(this.options.overlayModel.size.value, 0, 100) / 100; | ||
let size = 1; | ||
const sizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DEFAULT_SIZE; | ||
if (sizeOptions.type === 'percentage') { | ||
size = clamp(sizeOptions.value, 0, 100) / 100; | ||
} | ||
if (((_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.type) === 'pixels') { | ||
else { | ||
if (rightClass || leftClass) { | ||
size = | ||
clamp(0, this.options.overlayModel.size.value, width) / | ||
width; | ||
size = clamp(0, sizeOptions.value, width) / width; | ||
} | ||
if (topClass || bottomClass) { | ||
size = | ||
clamp(0, this.options.overlayModel.size.value, height) / | ||
height; | ||
size = clamp(0, sizeOptions.value, height) / height; | ||
} | ||
} | ||
const translate = (1 - size) / 2; | ||
const scale = size; | ||
let transform; | ||
const box = { top: '0px', left: '0px', width: '100%', height: '100%' }; | ||
/** | ||
* You can also achieve the overlay placement using the transform CSS property | ||
* to translate and scale the element however this has the undesired effect of | ||
* 'skewing' the element. Comment left here for anybody that ever revisits this. | ||
* | ||
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform | ||
* | ||
* right | ||
* translateX(${100 * (1 - size) / 2}%) scaleX(${scale}) | ||
* | ||
* left | ||
* translateX(-${100 * (1 - size) / 2}%) scaleX(${scale}) | ||
* | ||
* top | ||
* translateY(-${100 * (1 - size) / 2}%) scaleY(${scale}) | ||
* | ||
* bottom | ||
* translateY(${100 * (1 - size) / 2}%) scaleY(${scale}) | ||
*/ | ||
if (rightClass) { | ||
transform = `translateX(${100 * translate}%) scaleX(${scale})`; | ||
box.left = `${100 * (1 - size)}%`; | ||
box.width = `${100 * size}%`; | ||
} | ||
else if (leftClass) { | ||
transform = `translateX(-${100 * translate}%) scaleX(${scale})`; | ||
box.width = `${100 * size}%`; | ||
} | ||
else if (topClass) { | ||
transform = `translateY(-${100 * translate}%) scaleY(${scale})`; | ||
box.height = `${100 * size}%`; | ||
} | ||
else if (bottomClass) { | ||
transform = `translateY(${100 * translate}%) scaleY(${scale})`; | ||
box.top = `${100 * (1 - size)}%`; | ||
box.height = `${100 * size}%`; | ||
} | ||
else { | ||
transform = ''; | ||
} | ||
this.overlayElement.style.transform = transform; | ||
toggleClass(this.overlayElement, 'small-right', isSmallX && isRight); | ||
toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft); | ||
toggleClass(this.overlayElement, 'small-top', isSmallY && isTop); | ||
toggleClass(this.overlayElement, 'small-bottom', isSmallY && isBottom); | ||
this.overlayElement.style.top = box.top; | ||
this.overlayElement.style.left = box.left; | ||
this.overlayElement.style.width = box.width; | ||
this.overlayElement.style.height = box.height; | ||
toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY); | ||
toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX); | ||
toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft); | ||
toggleClass(this.overlayElement, 'dv-drop-target-right', isRight); | ||
toggleClass(this.overlayElement, 'dv-drop-target-top', isTop); | ||
toggleClass(this.overlayElement, 'dv-drop-target-bottom', isBottom); | ||
toggleClass(this.overlayElement, 'dv-drop-target-center', quadrant === 'center'); | ||
} | ||
setState(quadrant) { | ||
switch (quadrant) { | ||
case 'top': | ||
this._state = 'top'; | ||
break; | ||
case 'left': | ||
this._state = 'left'; | ||
break; | ||
case 'bottom': | ||
this._state = 'bottom'; | ||
break; | ||
case 'right': | ||
this._state = 'right'; | ||
break; | ||
case 'center': | ||
this._state = 'center'; | ||
break; | ||
} | ||
} | ||
calculateQuadrant(overlayType, x, y, width, height) { | ||
var _a, _b, _c, _d, _e, _f; | ||
const isPercentage = ((_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) === undefined || | ||
((_c = (_b = this.options.overlayModel) === null || _b === void 0 ? void 0 : _b.activationSize) === null || _c === void 0 ? void 0 : _c.type) === 'percentage'; | ||
const value = numberOrFallback((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.overlayModel) === null || _e === void 0 ? void 0 : _e.activationSize) === null || _f === void 0 ? void 0 : _f.value, 20); | ||
var _a, _b; | ||
const activationSizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE; | ||
const isPercentage = activationSizeOptions.type === 'percentage'; | ||
if (isPercentage) { | ||
return calculateQuadrantAsPercentage(overlayType, x, y, width, height, value); | ||
return calculateQuadrantAsPercentage(overlayType, x, y, width, height, activationSizeOptions.value); | ||
} | ||
return calculateQuadrantAsPixels(overlayType, x, y, width, height, value); | ||
return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value); | ||
} | ||
@@ -285,2 +321,1 @@ removeDropTarget() { | ||
} | ||
//# sourceMappingURL=droptarget.js.map |
export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void; | ||
//# sourceMappingURL=ghost.d.ts.map |
@@ -12,2 +12,1 @@ import { addClasses, removeClasses } from '../dom'; | ||
} | ||
//# sourceMappingURL=ghost.js.map |
@@ -13,2 +13,1 @@ import { DockviewComponent } from '../dockview/dockviewComponent'; | ||
} | ||
//# sourceMappingURL=groupDragHandler.d.ts.map |
@@ -24,3 +24,3 @@ import { quasiPreventDefault } from '../dom'; | ||
isCancelled(_event) { | ||
if (this.group.api.isFloating && !_event.shiftKey) { | ||
if (this.group.api.location.type === 'floating' && !_event.shiftKey) { | ||
return true; | ||
@@ -56,2 +56,1 @@ } | ||
} | ||
//# sourceMappingURL=groupDragHandler.js.map |
import { Event } from '../events'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
import { Box } from '../types'; | ||
export declare class Overlay extends CompositeDisposable { | ||
@@ -14,7 +15,3 @@ private readonly options; | ||
set minimumInViewportHeight(value: number | undefined); | ||
constructor(options: { | ||
height: number; | ||
width: number; | ||
left: number; | ||
top: number; | ||
constructor(options: Box & { | ||
container: HTMLElement; | ||
@@ -25,14 +22,4 @@ content: HTMLElement; | ||
}); | ||
setBounds(bounds?: Partial<{ | ||
height: number; | ||
width: number; | ||
top: number; | ||
left: number; | ||
}>): void; | ||
toJSON(): { | ||
top: number; | ||
left: number; | ||
height: number; | ||
width: number; | ||
}; | ||
setBounds(bounds?: Partial<Box>): void; | ||
toJSON(): Box; | ||
setupDrag(dragTarget: HTMLElement, options?: { | ||
@@ -46,2 +33,1 @@ inDragMode: boolean; | ||
} | ||
//# sourceMappingURL=overlay.d.ts.map |
@@ -305,2 +305,1 @@ import { getElementsByTagName, quasiDefaultPrevented, toggleClass, } from '../dom'; | ||
Overlay.MINIMUM_WIDTH = 20; | ||
//# sourceMappingURL=overlay.js.map |
@@ -17,3 +17,5 @@ import { CompositeDisposable, IDisposable } from '../../../lifecycle'; | ||
hide(): void; | ||
renderPanel(panel: IDockviewPanel): void; | ||
renderPanel(panel: IDockviewPanel, options: { | ||
asActive: boolean; | ||
}): void; | ||
} | ||
@@ -35,3 +37,5 @@ export declare class ContentContainer extends CompositeDisposable implements IContentContainer { | ||
hide(): void; | ||
renderPanel(panel: IDockviewPanel): void; | ||
renderPanel(panel: IDockviewPanel, options?: { | ||
asActive: boolean; | ||
}): void; | ||
openPanel(panel: IDockviewPanel): void; | ||
@@ -42,2 +46,1 @@ layout(_width: number, _height: number): void; | ||
} | ||
//# sourceMappingURL=content.d.ts.map |
@@ -6,3 +6,2 @@ import { CompositeDisposable, MutableDisposable, } from '../../../lifecycle'; | ||
import { getPanelData } from '../../../dnd/dataTransfer'; | ||
import { DockviewDropTargets } from '../../types'; | ||
export class ContentContainer extends CompositeDisposable { | ||
@@ -25,7 +24,2 @@ get element() { | ||
this.addDisposables(this._onDidFocus, this._onDidBlur); | ||
// for hosted containers | ||
// 1) register a drop target on the host | ||
// 2) register window dragStart events to disable pointer events | ||
// 3) register dragEnd events | ||
// 4) register mouseMove events (if no buttons are present we take this as a dragEnd event) | ||
this.dropTarget = new Droptarget(this.element, { | ||
@@ -39,3 +33,5 @@ acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'], | ||
const data = getPanelData(); | ||
if (!data && event.shiftKey && !this.group.isFloating) { | ||
if (!data && | ||
event.shiftKey && | ||
this.group.location.type !== 'floating') { | ||
return false; | ||
@@ -58,3 +54,3 @@ } | ||
} | ||
return this.group.canDisplayOverlay(event, position, DockviewDropTargets.Panel); | ||
return this.group.canDisplayOverlay(event, position, 'panel'); | ||
}, | ||
@@ -70,10 +66,19 @@ }); | ||
} | ||
renderPanel(panel) { | ||
const isActive = panel === this.group.activePanel; | ||
renderPanel(panel, options = { asActive: true }) { | ||
const doRender = options.asActive || | ||
(this.panel && this.group.isPanelActive(this.panel)); | ||
if (this.panel && | ||
this.panel.view.content.element.parentElement === this._element) { | ||
/** | ||
* If the currently attached panel is mounted directly to the content then remove it | ||
*/ | ||
this._element.removeChild(this.panel.view.content.element); | ||
} | ||
this.panel = panel; | ||
let container; | ||
switch (panel.api.renderer) { | ||
case 'onlyWhenVisibile': | ||
this.accessor.greadyRenderContainer.remove(panel); | ||
if (isActive) { | ||
if (this.panel) { | ||
this.group.renderContainer.detatch(panel); | ||
if (this.panel) { | ||
if (doRender) { | ||
this._element.appendChild(this.panel.view.content.element); | ||
@@ -88,7 +93,9 @@ } | ||
} | ||
container = | ||
this.accessor.greadyRenderContainer.setReferenceContentContainer(panel, this); | ||
container = this.group.renderContainer.attach({ | ||
panel, | ||
referenceContainer: this, | ||
}); | ||
break; | ||
} | ||
if (isActive) { | ||
if (doRender) { | ||
const _onDidFocus = panel.view.content.onDidFocus; | ||
@@ -112,34 +119,3 @@ const _onDidBlur = panel.view.content.onDidBlur; | ||
} | ||
const renderer = panel.api.renderer; | ||
if (this.panel && | ||
this.panel.view.content.element.parentElement === this._element) { | ||
/** | ||
* If the currently attached panel is mounted directly to the content then remove it | ||
*/ | ||
this._element.removeChild(this.panel.view.content.element); | ||
} | ||
this.panel = panel; | ||
let container; | ||
switch (renderer) { | ||
case 'always': | ||
container = | ||
this.accessor.greadyRenderContainer.setReferenceContentContainer(panel, this); | ||
break; | ||
case 'onlyWhenVisibile': | ||
this._element.appendChild(this.panel.view.content.element); | ||
container = this._element; | ||
break; | ||
} | ||
const _onDidFocus = this.panel.view.content.onDidFocus; | ||
const _onDidBlur = this.panel.view.content.onDidBlur; | ||
const disposable = new CompositeDisposable(); | ||
const focusTracker = trackFocus(container); | ||
disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire())); | ||
if (_onDidFocus) { | ||
disposable.addDisposables(_onDidFocus(() => this._onDidFocus.fire())); | ||
} | ||
if (_onDidBlur) { | ||
disposable.addDisposables(_onDidBlur(() => this._onDidBlur.fire())); | ||
} | ||
this.disposable.value = disposable; | ||
this.renderPanel(panel); | ||
} | ||
@@ -150,8 +126,9 @@ layout(_width, _height) { | ||
closePanel() { | ||
var _a; | ||
if (this.panel) { | ||
if (this.accessor.options.defaultRenderer === 'onlyWhenVisibile') { | ||
this._element.removeChild(this.panel.view.content.element); | ||
if (this.panel.api.renderer === 'onlyWhenVisibile') { | ||
(_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element); | ||
} | ||
this.panel = undefined; | ||
} | ||
this.panel = undefined; | ||
} | ||
@@ -163,2 +140,1 @@ dispose() { | ||
} | ||
//# sourceMappingURL=content.js.map |
@@ -22,2 +22,1 @@ import { CompositeDisposable } from '../../../lifecycle'; | ||
} | ||
//# sourceMappingURL=defaultTab.d.ts.map |
@@ -68,2 +68,1 @@ import { CompositeDisposable } from '../../../lifecycle'; | ||
} | ||
//# sourceMappingURL=defaultTab.js.map |
import { Event } from '../../../events'; | ||
import { CompositeDisposable, IDisposable } from '../../../lifecycle'; | ||
import { CompositeDisposable } from '../../../lifecycle'; | ||
import { DockviewComponent } from '../../dockviewComponent'; | ||
import { ITabRenderer } from '../../types'; | ||
import { DockviewGroupPanel } from '../../dockviewGroupPanel'; | ||
import { DroptargetEvent } from '../../../dnd/droptarget'; | ||
import { DroptargetEvent, WillShowOverlayEvent } from '../../../dnd/droptarget'; | ||
import { IDockviewPanel } from '../../dockviewPanel'; | ||
export interface ITab extends IDisposable { | ||
export declare class Tab extends CompositeDisposable { | ||
readonly panel: IDockviewPanel; | ||
readonly element: HTMLElement; | ||
setContent: (element: ITabRenderer) => void; | ||
onChanged: Event<MouseEvent>; | ||
onDrop: Event<DroptargetEvent>; | ||
setActive(isActive: boolean): void; | ||
} | ||
export declare class Tab extends CompositeDisposable implements ITab { | ||
readonly panel: IDockviewPanel; | ||
private readonly accessor; | ||
private readonly group; | ||
private readonly _element; | ||
private readonly droptarget; | ||
private readonly dropTarget; | ||
private content; | ||
@@ -29,2 +21,3 @@ private readonly _onChanged; | ||
readonly onDragStart: Event<DragEvent>; | ||
readonly onWillShowOverlay: Event<WillShowOverlayEvent>; | ||
get element(): HTMLElement; | ||
@@ -36,2 +29,1 @@ constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel); | ||
} | ||
//# sourceMappingURL=tab.d.ts.map |
@@ -5,4 +5,3 @@ import { addDisposableListener, Emitter } from '../../../events'; | ||
import { toggleClass } from '../../../dom'; | ||
import { DockviewDropTargets } from '../../types'; | ||
import { Droptarget } from '../../../dnd/droptarget'; | ||
import { Droptarget, } from '../../../dnd/droptarget'; | ||
import { DragHandler } from '../../../dnd/abstractDragHandler'; | ||
@@ -48,3 +47,3 @@ class TabDragHandler extends DragHandler { | ||
const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel); | ||
this.droptarget = new Droptarget(this._element, { | ||
this.dropTarget = new Droptarget(this._element, { | ||
acceptedTargetZones: ['center'], | ||
@@ -64,5 +63,6 @@ canDisplayOverlay: (event, position) => { | ||
} | ||
return this.group.model.canDisplayOverlay(event, position, DockviewDropTargets.Tab); | ||
return this.group.model.canDisplayOverlay(event, position, 'tab'); | ||
}, | ||
}); | ||
this.onWillShowOverlay = this.dropTarget.onWillShowOverlay; | ||
this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => { | ||
@@ -75,5 +75,5 @@ this._onDragStart.fire(event); | ||
this._onChanged.fire(event); | ||
}), this.droptarget.onDrop((event) => { | ||
}), this.dropTarget.onDrop((event) => { | ||
this._onDropped.fire(event); | ||
}), this.droptarget); | ||
}), this.dropTarget); | ||
} | ||
@@ -95,2 +95,1 @@ setActive(isActive) { | ||
} | ||
//# sourceMappingURL=tab.js.map |
import { IDisposable, CompositeDisposable } from '../../../lifecycle'; | ||
import { Event } from '../../../events'; | ||
import { ITab } from '../tab/tab'; | ||
import { DockviewComponent } from '../../dockviewComponent'; | ||
import { Tab } from '../tab/tab'; | ||
import { DockviewGroupPanel } from '../../dockviewGroupPanel'; | ||
import { IDockviewPanel } from '../../dockviewPanel'; | ||
import { DockviewComponent } from '../../dockviewComponent'; | ||
import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel'; | ||
export interface TabDropIndexEvent { | ||
@@ -23,13 +24,14 @@ readonly event: DragEvent; | ||
readonly size: number; | ||
readonly onDrop: Event<TabDropIndexEvent>; | ||
readonly onTabDragStart: Event<TabDragEvent>; | ||
readonly onGroupDragStart: Event<GroupDragEvent>; | ||
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>; | ||
hidden: boolean; | ||
delete: (id: string) => void; | ||
indexOf: (id: string) => number; | ||
onDrop: Event<TabDropIndexEvent>; | ||
onTabDragStart: Event<TabDragEvent>; | ||
onGroupDragStart: Event<GroupDragEvent>; | ||
setActive: (isGroupActive: boolean) => void; | ||
setActivePanel: (panel: IDockviewPanel) => void; | ||
isActive: (tab: ITab) => boolean; | ||
closePanel: (panel: IDockviewPanel) => void; | ||
openPanel: (panel: IDockviewPanel, index?: number) => void; | ||
delete(id: string): void; | ||
indexOf(id: string): number; | ||
setActive(isGroupActive: boolean): void; | ||
setActivePanel(panel: IDockviewPanel): void; | ||
isActive(tab: Tab): boolean; | ||
closePanel(panel: IDockviewPanel): void; | ||
openPanel(panel: IDockviewPanel, index?: number): void; | ||
setRightActionsElement(element: HTMLElement | undefined): void; | ||
@@ -62,2 +64,4 @@ setLeftActionsElement(element: HTMLElement | undefined): void; | ||
readonly onGroupDragStart: Event<GroupDragEvent>; | ||
private readonly _onWillShowOverlay; | ||
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>; | ||
get panels(): string[]; | ||
@@ -73,3 +77,3 @@ get size(): number; | ||
get element(): HTMLElement; | ||
isActive(tab: ITab): boolean; | ||
isActive(tab: Tab): boolean; | ||
indexOf(id: string): number; | ||
@@ -85,2 +89,1 @@ constructor(accessor: DockviewComponent, group: DockviewGroupPanel); | ||
} | ||
//# sourceMappingURL=tabsContainer.d.ts.map |
@@ -6,2 +6,3 @@ import { CompositeDisposable, } from '../../../lifecycle'; | ||
import { toggleClass } from '../../../dom'; | ||
import { WillShowOverlayLocationEvent, } from '../../dockviewGroupPanelModel'; | ||
export class TabsContainer extends CompositeDisposable { | ||
@@ -91,15 +92,7 @@ get panels() { | ||
this.onGroupDragStart = this._onGroupDragStart.event; | ||
this.addDisposables(this._onDrop, this._onTabDragStart, this._onGroupDragStart); | ||
this._onWillShowOverlay = new Emitter(); | ||
this.onWillShowOverlay = this._onWillShowOverlay.event; | ||
this._element = document.createElement('div'); | ||
this._element.className = 'tabs-and-actions-container'; | ||
toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth'); | ||
this.addDisposables(this.accessor.onDidAddPanel((e) => { | ||
if (e.api.group === this.group) { | ||
toggleClass(this._element, 'dv-single-tab', this.size === 1); | ||
} | ||
}), this.accessor.onDidRemovePanel((e) => { | ||
if (e.api.group === this.group) { | ||
toggleClass(this._element, 'dv-single-tab', this.size === 1); | ||
} | ||
})); | ||
this.rightActionsContainer = document.createElement('div'); | ||
@@ -119,3 +112,11 @@ this.rightActionsContainer.className = 'right-actions-container'; | ||
this._element.appendChild(this.rightActionsContainer); | ||
this.addDisposables(this.voidContainer, this.voidContainer.onDragStart((event) => { | ||
this.addDisposables(this.accessor.onDidAddPanel((e) => { | ||
if (e.api.group === this.group) { | ||
toggleClass(this._element, 'dv-single-tab', this.size === 1); | ||
} | ||
}), this.accessor.onDidRemovePanel((e) => { | ||
if (e.api.group === this.group) { | ||
toggleClass(this._element, 'dv-single-tab', this.size === 1); | ||
} | ||
}), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => { | ||
this._onGroupDragStart.fire({ | ||
@@ -130,2 +131,6 @@ nativeEvent: event, | ||
}); | ||
}), this.voidContainer.onWillShowOverlay((event) => { | ||
this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, { | ||
kind: 'header_space', | ||
})); | ||
}), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => { | ||
@@ -135,8 +140,8 @@ const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups; | ||
event.shiftKey && | ||
!this.group.api.isFloating) { | ||
this.group.api.location.type !== 'floating') { | ||
event.preventDefault(); | ||
const { top, left, right } = this.element.getBoundingClientRect(); | ||
const { top: rootTop, left: rootLeft, right: rootRight } = this.accessor.element.getBoundingClientRect(); | ||
const { top, left } = this.element.getBoundingClientRect(); | ||
const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect(); | ||
this.accessor.addFloatingGroup(this.group, { | ||
x: (this.accessor.options.isRtl ? (right - rootRight) : (left - rootLeft)) + 20, | ||
x: left - rootLeft + 20, | ||
y: top - rootTop + 20, | ||
@@ -199,5 +204,5 @@ }, { inDragMode: true }); | ||
}), tab.onChanged((event) => { | ||
var _a; | ||
const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups; | ||
const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1; | ||
const isFloatingWithOnePanel = this.group.api.location.type === 'floating' && | ||
this.size === 1; | ||
if (isFloatingGroupsEnabled && | ||
@@ -208,6 +213,6 @@ !isFloatingWithOnePanel && | ||
const panel = this.accessor.getGroupPanel(tab.panel.id); | ||
const { top, left, right } = tab.element.getBoundingClientRect(); | ||
const { top: rootTop, left: rootLeft, right: rootRight } = this.accessor.element.getBoundingClientRect(); | ||
const { top, left } = tab.element.getBoundingClientRect(); | ||
const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect(); | ||
this.accessor.addFloatingGroup(panel, { | ||
x: (this.accessor.options.isRtl ? (right - rootRight) : (left - rootLeft)) + 20, | ||
x: left - rootLeft, | ||
y: top - rootTop, | ||
@@ -217,4 +222,2 @@ }, { inDragMode: true }); | ||
} | ||
const alreadyFocused = panel.id === ((_a = this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) && | ||
this.group.model.isContentFocused; | ||
const isLeftClick = event.button === 0; | ||
@@ -224,5 +227,5 @@ if (!isLeftClick || event.defaultPrevented) { | ||
} | ||
this.group.model.openPanel(panel, { | ||
skipFocus: alreadyFocused, | ||
}); | ||
if (this.group.activePanel !== panel) { | ||
this.group.model.openPanel(panel); | ||
} | ||
}), tab.onDrop((event) => { | ||
@@ -233,2 +236,4 @@ this._onDrop.fire({ | ||
}); | ||
}), tab.onWillShowOverlay((event) => { | ||
this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, { kind: 'tab' })); | ||
})); | ||
@@ -250,2 +255,1 @@ const value = { value: tab, disposable }; | ||
} | ||
//# sourceMappingURL=tabsContainer.js.map |
@@ -1,2 +0,2 @@ | ||
import { DroptargetEvent } from '../../../dnd/droptarget'; | ||
import { DroptargetEvent, WillShowOverlayEvent } from '../../../dnd/droptarget'; | ||
import { DockviewComponent } from '../../dockviewComponent'; | ||
@@ -10,3 +10,3 @@ import { Event } from '../../../events'; | ||
private readonly _element; | ||
private readonly voidDropTarget; | ||
private readonly dropTraget; | ||
private readonly _onDrop; | ||
@@ -16,5 +16,5 @@ readonly onDrop: Event<DroptargetEvent>; | ||
readonly onDragStart: Event<DragEvent>; | ||
readonly onWillShowOverlay: Event<WillShowOverlayEvent>; | ||
get element(): HTMLElement; | ||
constructor(accessor: DockviewComponent, group: DockviewGroupPanel); | ||
} | ||
//# sourceMappingURL=voidContainer.d.ts.map |
import { last } from '../../../array'; | ||
import { getPanelData } from '../../../dnd/dataTransfer'; | ||
import { Droptarget } from '../../../dnd/droptarget'; | ||
import { Droptarget, } from '../../../dnd/droptarget'; | ||
import { GroupDragHandler } from '../../../dnd/groupDragHandler'; | ||
import { addDisposableListener, Emitter } from '../../../events'; | ||
import { CompositeDisposable } from '../../../lifecycle'; | ||
import { DockviewDropTargets } from '../../types'; | ||
export class VoidContainer extends CompositeDisposable { | ||
@@ -28,3 +27,3 @@ get element() { | ||
const handler = new GroupDragHandler(this._element, accessor, group); | ||
this.voidDropTarget = new Droptarget(this._element, { | ||
this.dropTraget = new Droptarget(this._element, { | ||
acceptedTargetZones: ['center'], | ||
@@ -43,12 +42,12 @@ canDisplayOverlay: (event, position) => { | ||
} | ||
return group.model.canDisplayOverlay(event, position, DockviewDropTargets.Panel); | ||
return group.model.canDisplayOverlay(event, position, 'panel'); | ||
}, | ||
}); | ||
this.onWillShowOverlay = this.dropTraget.onWillShowOverlay; | ||
this.addDisposables(handler, handler.onDragStart((event) => { | ||
this._onDragStart.fire(event); | ||
}), this.voidDropTarget.onDrop((event) => { | ||
}), this.dropTraget.onDrop((event) => { | ||
this._onDrop.fire(event); | ||
}), this.voidDropTarget); | ||
}), this.dropTraget); | ||
} | ||
} | ||
//# sourceMappingURL=voidContainer.js.map |
@@ -19,2 +19,1 @@ import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types'; | ||
} | ||
//# sourceMappingURL=watermark.d.ts.map |
@@ -62,2 +62,1 @@ import { addDisposableListener } from '../../../events'; | ||
} | ||
//# sourceMappingURL=watermark.js.map |
@@ -13,2 +13,1 @@ import { GroupviewPanelState } from './types'; | ||
} | ||
//# sourceMappingURL=deserializer.d.ts.map |
@@ -31,2 +31,1 @@ import { DockviewPanel } from './dockviewPanel'; | ||
} | ||
//# sourceMappingURL=deserializer.js.map |
import { SerializedGridObject } from '../gridview/gridview'; | ||
import { Position } from '../dnd/droptarget'; | ||
import { DockviewPanel, IDockviewPanel } from './dockviewPanel'; | ||
import { Event } from '../events'; | ||
import { Event, Emitter } from '../events'; | ||
import { IWatermarkRenderer, GroupviewPanelState } from './types'; | ||
import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, MovementOptions } from './options'; | ||
import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview'; | ||
import { DockviewApi } from '../api/component.api'; | ||
import { Orientation } from '../splitview/splitview'; | ||
import { GroupOptions, GroupPanelViewState, GroupviewDropEvent } from './dockviewGroupPanelModel'; | ||
import { GroupOptions, GroupPanelViewState, DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent } from './dockviewGroupPanelModel'; | ||
import { DockviewGroupPanel } from './dockviewGroupPanel'; | ||
import { Parameters } from '../panel/types'; | ||
import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel'; | ||
import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer'; | ||
import { GreadyRenderContainer, DockviewPanelRenderer } from './components/greadyRenderContainer'; | ||
import { Box } from '../types'; | ||
import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlayRenderContainer'; | ||
export interface PanelReference { | ||
@@ -26,9 +25,9 @@ update: (event: { | ||
data: GroupPanelViewState; | ||
position: { | ||
height: number; | ||
width: number; | ||
left: number; | ||
top: number; | ||
}; | ||
position: Box; | ||
} | ||
export interface SerializedPopoutGroup { | ||
data: GroupPanelViewState; | ||
gridReferenceGroup?: string; | ||
position: Box | null; | ||
} | ||
export interface SerializedDockview { | ||
@@ -44,8 +43,25 @@ grid: { | ||
floatingGroups?: SerializedFloatingGroup[]; | ||
popoutGroups?: SerializedPopoutGroup[]; | ||
} | ||
export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds'>; | ||
export interface DockviewDropEvent extends GroupviewDropEvent { | ||
api: DockviewApi; | ||
group: DockviewGroupPanel | null; | ||
} | ||
export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds' | 'rootOverlayModel' | 'disableDnd'>; | ||
type MoveGroupOptions = { | ||
from: { | ||
group: DockviewGroupPanel; | ||
}; | ||
to: { | ||
group: DockviewGroupPanel; | ||
position: Position; | ||
}; | ||
}; | ||
type MoveGroupOrPanelOptions = { | ||
from: { | ||
groupId: string; | ||
panelId?: string; | ||
}; | ||
to: { | ||
group: DockviewGroupPanel; | ||
position: Position; | ||
index?: number; | ||
}; | ||
}; | ||
export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> { | ||
@@ -55,10 +71,21 @@ readonly activePanel: IDockviewPanel | undefined; | ||
readonly panels: IDockviewPanel[]; | ||
readonly floatingGroups: IDockviewFloatingGroupPanel[]; | ||
readonly onDidDrop: Event<DockviewDropEvent>; | ||
readonly orientation: Orientation; | ||
readonly onDidDrop: Event<DockviewDidDropEvent>; | ||
readonly onWillDrop: Event<DockviewWillDropEvent>; | ||
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>; | ||
readonly onDidRemovePanel: Event<IDockviewPanel>; | ||
readonly onDidAddPanel: Event<IDockviewPanel>; | ||
readonly onDidLayoutFromJSON: Event<void>; | ||
readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>; | ||
readonly onWillDragPanel: Event<TabDragEvent>; | ||
readonly onWillDragGroup: Event<GroupDragEvent>; | ||
readonly onDidRemoveGroup: Event<DockviewGroupPanel>; | ||
readonly onDidAddGroup: Event<DockviewGroupPanel>; | ||
readonly onDidActiveGroupChange: Event<DockviewGroupPanel | undefined>; | ||
readonly options: DockviewComponentOptions; | ||
updateOptions(options: DockviewComponentUpdateOptions): void; | ||
moveGroupOrPanel(referenceGroup: DockviewGroupPanel, groupId: string, itemId: string, target: Position, index?: number): void; | ||
moveGroupOrPanel(options: MoveGroupOrPanelOptions): void; | ||
moveGroup(options: MoveGroupOptions): void; | ||
doSetGroupActive: (group: DockviewGroupPanel, skipFocus?: boolean) => void; | ||
removeGroup: (group: DockviewGroupPanel) => void; | ||
options: DockviewComponentOptions; | ||
addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): IDockviewPanel; | ||
@@ -76,8 +103,2 @@ removePanel(panel: IDockviewPanel): void; | ||
fromJSON(data: SerializedDockview): void; | ||
readonly onDidRemovePanel: Event<IDockviewPanel>; | ||
readonly onDidAddPanel: Event<IDockviewPanel>; | ||
readonly onDidLayoutFromJSON: Event<void>; | ||
readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>; | ||
readonly onWillDragPanel: Event<TabDragEvent>; | ||
readonly onWillDragGroup: Event<GroupDragEvent>; | ||
addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: { | ||
@@ -87,2 +108,14 @@ x: number; | ||
}): void; | ||
addPopoutGroup(item: IDockviewPanel | DockviewGroupPanel, options?: { | ||
position?: Box; | ||
popoutUrl?: string; | ||
onDidOpen?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
onWillClose?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
}): Promise<void>; | ||
} | ||
@@ -95,3 +128,3 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> implements IDockviewComponent { | ||
private watermark; | ||
readonly greadyRenderContainer: GreadyRenderContainer; | ||
readonly overlayRenderContainer: OverlayRenderContainer; | ||
private readonly _onWillDragPanel; | ||
@@ -102,3 +135,7 @@ readonly onWillDragPanel: Event<TabDragEvent>; | ||
private readonly _onDidDrop; | ||
readonly onDidDrop: Event<DockviewDropEvent>; | ||
readonly onDidDrop: Event<DockviewDidDropEvent>; | ||
private readonly _onWillDrop; | ||
readonly onWillDrop: Event<DockviewWillDropEvent>; | ||
private readonly _onWillShowOverlay; | ||
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>; | ||
private readonly _onDidRemovePanel; | ||
@@ -112,3 +149,13 @@ readonly onDidRemovePanel: Event<IDockviewPanel>; | ||
readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>; | ||
readonly floatingGroups: DockviewFloatingGroupPanel[]; | ||
private readonly _onDidMovePanel; | ||
private readonly _floatingGroups; | ||
private readonly _popoutGroups; | ||
private readonly _rootDropTarget; | ||
private _ignoreEvents; | ||
private readonly _onDidRemoveGroup; | ||
readonly onDidRemoveGroup: Event<DockviewGroupPanel>; | ||
protected readonly _onDidAddGroup: Emitter<DockviewGroupPanel>; | ||
readonly onDidAddGroup: Event<DockviewGroupPanel>; | ||
private readonly _onDidActiveGroupChange; | ||
readonly onDidActiveGroupChange: Event<DockviewGroupPanel | undefined>; | ||
get orientation(): Orientation; | ||
@@ -121,2 +168,16 @@ get totalPanels(): number; | ||
constructor(options: DockviewComponentOptions); | ||
addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { | ||
skipRemoveGroup?: boolean; | ||
position?: Box; | ||
popoutUrl?: string; | ||
onDidOpen?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
onWillClose?: (event: { | ||
id: string; | ||
window: Window; | ||
}) => void; | ||
overridePopoutGroup?: DockviewGroupPanel; | ||
}): Promise<void>; | ||
addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, coord?: { | ||
@@ -130,2 +191,3 @@ x?: number; | ||
inDragMode: boolean; | ||
skipActiveGroup?: boolean; | ||
}): void; | ||
@@ -153,2 +215,3 @@ private orthogonalize; | ||
skipDispose: boolean; | ||
skipSetActiveGroup?: boolean; | ||
}): void; | ||
@@ -161,2 +224,4 @@ createWatermarkComponent(): IWatermarkRenderer; | ||
skipDispose?: boolean; | ||
skipPopoutAssociated?: boolean; | ||
skipPopoutReturn?: boolean; | ||
} | undefined): void; | ||
@@ -166,6 +231,12 @@ protected doRemoveGroup(group: DockviewGroupPanel, options?: { | ||
skipDispose?: boolean; | ||
skipPopoutAssociated?: boolean; | ||
skipPopoutReturn?: boolean; | ||
} | undefined): DockviewGroupPanel; | ||
moveGroupOrPanel(destinationGroup: DockviewGroupPanel, sourceGroupId: string, sourceItemId: string | undefined, destinationTarget: Position, destinationIndex?: number): void; | ||
private moveGroup; | ||
doSetGroupAndPanelActive(group: DockviewGroupPanel | undefined, skipFocus?: boolean): void; | ||
private _moving; | ||
movingLock<T>(func: () => T): T; | ||
moveGroupOrPanel(options: MoveGroupOrPanelOptions): void; | ||
moveGroup(options: MoveGroupOptions): void; | ||
doSetGroupActive(group: DockviewGroupPanel | undefined): void; | ||
doSetGroupAndPanelActive(group: DockviewGroupPanel | undefined): void; | ||
private getNextGroupId; | ||
createGroup(options?: GroupOptions): DockviewGroupPanel; | ||
@@ -176,2 +247,2 @@ private createPanel; | ||
} | ||
//# sourceMappingURL=dockviewComponent.d.ts.map | ||
export {}; |
@@ -8,3 +8,3 @@ import { Overlay } from '../dnd/overlay'; | ||
top: number; | ||
side: number; | ||
left: number; | ||
height: number; | ||
@@ -20,3 +20,3 @@ width: number; | ||
top: number; | ||
side: number; | ||
left: number; | ||
height: number; | ||
@@ -26,2 +26,1 @@ width: number; | ||
} | ||
//# sourceMappingURL=dockviewFloatingGroupPanel.d.ts.map |
@@ -13,2 +13,1 @@ import { CompositeDisposable } from '../lifecycle'; | ||
} | ||
//# sourceMappingURL=dockviewFloatingGroupPanel.js.map |
@@ -25,2 +25,3 @@ import { IFrameworkPart } from '../panel/types'; | ||
constructor(accessor: DockviewComponent, id: string, options: GroupOptions); | ||
focus(): void; | ||
initialize(): void; | ||
@@ -32,2 +33,1 @@ setActive(isActive: boolean): void; | ||
} | ||
//# sourceMappingURL=dockviewGroupPanel.d.ts.map |
import { DockviewGroupPanelModel, } from './dockviewGroupPanelModel'; | ||
import { GridviewPanel } from '../gridview/gridviewPanel'; | ||
import { DockviewGroupPanelApiImpl, } from '../api/dockviewGroupPanelApi'; | ||
const MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100; | ||
const MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100; | ||
export class DockviewGroupPanel extends GridviewPanel { | ||
@@ -28,4 +30,4 @@ get panels() { | ||
super(id, 'groupview_default', { | ||
minimumHeight: 100, | ||
minimumWidth: 100, | ||
minimumHeight: MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT, | ||
minimumWidth: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH, | ||
}, new DockviewGroupPanelApiImpl(id, accessor)); | ||
@@ -35,2 +37,8 @@ this.api.initialize(this); // cannot use 'this' after after 'super' call | ||
} | ||
focus() { | ||
if (!this.api.isActive) { | ||
this.api.setActive(); | ||
} | ||
super.focus(); | ||
} | ||
initialize() { | ||
@@ -54,2 +62,1 @@ this._model.initialize(); | ||
} | ||
//# sourceMappingURL=dockviewGroupPanel.js.map |
@@ -0,5 +1,6 @@ | ||
import { DockviewApi } from '../api/component.api'; | ||
import { PanelTransfer } from '../dnd/dataTransfer'; | ||
import { Position } from '../dnd/droptarget'; | ||
import { Position, WillShowOverlayEvent } from '../dnd/droptarget'; | ||
import { DockviewComponent } from './dockviewComponent'; | ||
import { Event } from '../events'; | ||
import { DockviewEvent, Event, IDockviewEvent } from '../events'; | ||
import { IViewSize } from '../gridview/gridview'; | ||
@@ -12,15 +13,3 @@ import { CompositeDisposable } from '../lifecycle'; | ||
import { IDockviewPanel } from './dockviewPanel'; | ||
export interface DndService { | ||
canDisplayOverlay(group: IDockviewGroupPanelModel, event: DragEvent, target: DockviewDropTargets): boolean; | ||
onDrop(group: IDockviewGroupPanelModel, event: DragEvent, position: Position, index?: number): void; | ||
} | ||
export interface IGroupItem { | ||
id: string; | ||
header: { | ||
element: HTMLElement; | ||
}; | ||
body: { | ||
element: HTMLElement; | ||
}; | ||
} | ||
import { OverlayRenderContainer } from '../overlayRenderContainer'; | ||
interface GroupMoveEvent { | ||
@@ -35,2 +24,3 @@ groupId: string; | ||
hideHeader?: boolean; | ||
skipSetActive?: boolean; | ||
} | ||
@@ -47,11 +37,35 @@ export interface GroupOptions extends CoreGroupOptions { | ||
} | ||
export interface GroupviewChangeEvent { | ||
export interface DockviewGroupChangeEvent { | ||
readonly panel: IDockviewPanel; | ||
} | ||
export interface GroupviewDropEvent { | ||
readonly nativeEvent: DragEvent; | ||
readonly position: Position; | ||
readonly index?: number; | ||
export declare class DockviewDidDropEvent extends DockviewEvent { | ||
private readonly options; | ||
get nativeEvent(): DragEvent; | ||
get position(): Position; | ||
get panel(): IDockviewPanel | undefined; | ||
get group(): DockviewGroupPanel | undefined; | ||
get api(): DockviewApi; | ||
constructor(options: { | ||
readonly nativeEvent: DragEvent; | ||
readonly position: Position; | ||
readonly panel?: IDockviewPanel; | ||
getData(): PanelTransfer | undefined; | ||
group?: DockviewGroupPanel; | ||
api: DockviewApi; | ||
}); | ||
getData(): PanelTransfer | undefined; | ||
} | ||
export declare class DockviewWillDropEvent extends DockviewDidDropEvent { | ||
private readonly _kind; | ||
get kind(): DockviewGroupDropLocation; | ||
constructor(options: { | ||
readonly nativeEvent: DragEvent; | ||
readonly position: Position; | ||
readonly panel?: IDockviewPanel; | ||
getData(): PanelTransfer | undefined; | ||
kind: DockviewGroupDropLocation; | ||
group?: DockviewGroupPanel; | ||
api: DockviewApi; | ||
}); | ||
} | ||
export interface IHeader { | ||
@@ -61,2 +75,3 @@ hidden: boolean; | ||
export type DockviewGroupPanelLocked = boolean | 'no-drop-target'; | ||
export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content'; | ||
export interface IDockviewGroupPanelModel extends IPanel { | ||
@@ -69,6 +84,7 @@ readonly isActive: boolean; | ||
readonly isContentFocused: boolean; | ||
readonly onDidDrop: Event<GroupviewDropEvent>; | ||
readonly onDidAddPanel: Event<GroupviewChangeEvent>; | ||
readonly onDidRemovePanel: Event<GroupviewChangeEvent>; | ||
readonly onDidActivePanelChange: Event<GroupviewChangeEvent>; | ||
readonly onDidDrop: Event<DockviewDidDropEvent>; | ||
readonly onWillDrop: Event<DockviewWillDropEvent>; | ||
readonly onDidAddPanel: Event<DockviewGroupChangeEvent>; | ||
readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>; | ||
readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>; | ||
readonly onMove: Event<GroupMoveEvent>; | ||
@@ -100,2 +116,22 @@ locked: DockviewGroupPanelLocked; | ||
} | ||
export type DockviewGroupLocation = { | ||
type: 'grid'; | ||
} | { | ||
type: 'floating'; | ||
} | { | ||
type: 'popout'; | ||
getWindow: () => Window; | ||
}; | ||
export declare class WillShowOverlayLocationEvent implements IDockviewEvent { | ||
private readonly event; | ||
private _kind; | ||
get kind(): DockviewGroupDropLocation; | ||
get nativeEvent(): DragEvent; | ||
get position(): Position; | ||
get defaultPrevented(): boolean; | ||
preventDefault(): void; | ||
constructor(event: WillShowOverlayEvent, options: { | ||
kind: DockviewGroupDropLocation; | ||
}); | ||
} | ||
export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel { | ||
@@ -113,6 +149,6 @@ private readonly container; | ||
private _locked; | ||
private _isFloating; | ||
private _rightHeaderActions; | ||
private _leftHeaderActions; | ||
private _prefixHeaderActions; | ||
private _location; | ||
private mostRecentlyUsed; | ||
@@ -127,3 +163,7 @@ private readonly _onDidChange; | ||
private readonly _onDidDrop; | ||
readonly onDidDrop: Event<GroupviewDropEvent>; | ||
readonly onDidDrop: Event<DockviewDidDropEvent>; | ||
private readonly _onWillDrop; | ||
readonly onWillDrop: Event<DockviewWillDropEvent>; | ||
private readonly _onWillShowOverlay; | ||
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>; | ||
private readonly _onTabDragStart; | ||
@@ -134,7 +174,8 @@ readonly onTabDragStart: Event<TabDragEvent>; | ||
private readonly _onDidAddPanel; | ||
readonly onDidAddPanel: Event<GroupviewChangeEvent>; | ||
readonly onDidAddPanel: Event<DockviewGroupChangeEvent>; | ||
private readonly _onDidRemovePanel; | ||
readonly onDidRemovePanel: Event<GroupviewChangeEvent>; | ||
readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>; | ||
private readonly _onDidActivePanelChange; | ||
readonly onDidActivePanelChange: Event<GroupviewChangeEvent>; | ||
readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>; | ||
private readonly _api; | ||
get element(): HTMLElement; | ||
@@ -151,5 +192,9 @@ get activePanel(): IDockviewPanel | undefined; | ||
get isContentFocused(): boolean; | ||
get isFloating(): boolean; | ||
set isFloating(value: boolean); | ||
get location(): DockviewGroupLocation; | ||
set location(value: DockviewGroupLocation); | ||
constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: DockviewGroupPanel); | ||
focusContent(): void; | ||
private _overwriteRenderContainer; | ||
set renderContainer(value: OverlayRenderContainer | null); | ||
get renderContainer(): OverlayRenderContainer; | ||
initialize(): void; | ||
@@ -173,7 +218,9 @@ rerender(panel: IDockviewPanel): void; | ||
index?: number; | ||
skipFocus?: boolean; | ||
skipSetPanelActive?: boolean; | ||
skipSetActive?: boolean; | ||
skipSetGroupActive?: boolean; | ||
}): void; | ||
removePanel(groupItemOrId: IDockviewPanel | string): IDockviewPanel; | ||
removePanel(groupItemOrId: IDockviewPanel | string, options?: { | ||
skipSetActive?: boolean; | ||
skipSetActiveGroup?: boolean; | ||
}): IDockviewPanel; | ||
closeAllPanels(): void; | ||
@@ -184,3 +231,3 @@ closePanel(panel: IDockviewPanel): void; | ||
updateActions(element: HTMLElement | undefined): void; | ||
setActive(isGroupActive: boolean, skipFocus?: boolean, force?: boolean): void; | ||
setActive(isGroupActive: boolean, force?: boolean): void; | ||
layout(width: number, height: number): void; | ||
@@ -198,2 +245,1 @@ private _removePanel; | ||
export {}; | ||
//# sourceMappingURL=dockviewGroupPanelModel.d.ts.map |
import { DockviewApi } from '../api/component.api'; | ||
import { getPanelData } from '../dnd/dataTransfer'; | ||
import { isAncestor, toggleClass } from '../dom'; | ||
import { addDisposableListener, Emitter } from '../events'; | ||
import { addDisposableListener, DockviewEvent, Emitter, } from '../events'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
import { ContentContainer, } from './components/panel/content'; | ||
import { TabsContainer, } from './components/titlebar/tabsContainer'; | ||
export class DockviewDidDropEvent extends DockviewEvent { | ||
get nativeEvent() { | ||
return this.options.nativeEvent; | ||
} | ||
get position() { | ||
return this.options.position; | ||
} | ||
get panel() { | ||
return this.options.panel; | ||
} | ||
get group() { | ||
return this.options.group; | ||
} | ||
get api() { | ||
return this.options.api; | ||
} | ||
constructor(options) { | ||
super(); | ||
this.options = options; | ||
} | ||
getData() { | ||
return this.options.getData(); | ||
} | ||
} | ||
export class DockviewWillDropEvent extends DockviewDidDropEvent { | ||
get kind() { | ||
return this._kind; | ||
} | ||
constructor(options) { | ||
super(options); | ||
this._kind = options.kind; | ||
} | ||
} | ||
export class WillShowOverlayLocationEvent { | ||
get kind() { | ||
return this._kind; | ||
} | ||
get nativeEvent() { | ||
return this.event.nativeEvent; | ||
} | ||
get position() { | ||
return this.event.position; | ||
} | ||
get defaultPrevented() { | ||
return this.event.defaultPrevented; | ||
} | ||
preventDefault() { | ||
this.event.preventDefault(); | ||
} | ||
constructor(event, options) { | ||
this.event = event; | ||
this._kind = options.kind; | ||
} | ||
} | ||
export class DockviewGroupPanelModel extends CompositeDisposable { | ||
@@ -46,11 +100,33 @@ get element() { | ||
} | ||
get isFloating() { | ||
return this._isFloating; | ||
get location() { | ||
return this._location; | ||
} | ||
set isFloating(value) { | ||
this._isFloating = value; | ||
this.contentContainer.dropTarget.setTargetZones(value ? ['center'] : ['top', 'bottom', 'left', 'right', 'center']); | ||
toggleClass(this.container, 'dv-groupview-floating', value); | ||
this.groupPanel.api._onDidFloatingStateChange.fire({ | ||
isFloating: this.isFloating, | ||
set location(value) { | ||
this._location = value; | ||
toggleClass(this.container, 'dv-groupview-floating', false); | ||
toggleClass(this.container, 'dv-groupview-popout', false); | ||
switch (value.type) { | ||
case 'grid': | ||
this.contentContainer.dropTarget.setTargetZones([ | ||
'top', | ||
'bottom', | ||
'left', | ||
'right', | ||
'center', | ||
]); | ||
break; | ||
case 'floating': | ||
this.contentContainer.dropTarget.setTargetZones(['center']); | ||
this.contentContainer.dropTarget.setTargetZones(value | ||
? ['center'] | ||
: ['top', 'bottom', 'left', 'right', 'center']); | ||
toggleClass(this.container, 'dv-groupview-floating', true); | ||
break; | ||
case 'popout': | ||
this.contentContainer.dropTarget.setTargetZones(['center']); | ||
toggleClass(this.container, 'dv-groupview-popout', true); | ||
break; | ||
} | ||
this.groupPanel.api._onDidLocationChange.fire({ | ||
location: this.location, | ||
}); | ||
@@ -68,3 +144,3 @@ } | ||
this._locked = false; | ||
this._isFloating = false; | ||
this._location = { type: 'grid' }; | ||
this.mostRecentlyUsed = []; | ||
@@ -80,2 +156,6 @@ this._onDidChange = new Emitter(); | ||
this.onDidDrop = this._onDidDrop.event; | ||
this._onWillDrop = new Emitter(); | ||
this.onWillDrop = this._onWillDrop.event; | ||
this._onWillShowOverlay = new Emitter(); | ||
this.onWillShowOverlay = this._onWillShowOverlay.event; | ||
this._onTabDragStart = new Emitter(); | ||
@@ -91,3 +171,5 @@ this.onTabDragStart = this._onTabDragStart.event; | ||
this.onDidActivePanelChange = this._onDidActivePanelChange.event; | ||
this._overwriteRenderContainer = null; | ||
toggleClass(this.container, 'groupview', true); | ||
this._api = new DockviewApi(this.accessor); | ||
this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel); | ||
@@ -98,3 +180,3 @@ this.contentContainer = new ContentContainer(this.accessor, this); | ||
this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false; | ||
this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this.tabsContainer.onTabDragStart((event) => { | ||
this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => { | ||
this._onTabDragStart.fire(event); | ||
@@ -104,14 +186,35 @@ }), this.tabsContainer.onGroupDragStart((event) => { | ||
}), this.tabsContainer.onDrop((event) => { | ||
this.handleDropEvent(event.event, 'center', event.index); | ||
this.handleDropEvent('header', event.event, 'center', event.index); | ||
}), this.contentContainer.onDidFocus(() => { | ||
this.accessor.doSetGroupActive(this.groupPanel, true); | ||
this.accessor.doSetGroupActive(this.groupPanel); | ||
}), this.contentContainer.onDidBlur(() => { | ||
// noop | ||
}), this.contentContainer.dropTarget.onDrop((event) => { | ||
this.handleDropEvent(event.nativeEvent, event.position); | ||
}), this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange); | ||
this.handleDropEvent('content', event.nativeEvent, event.position); | ||
}), this.tabsContainer.onWillShowOverlay((event) => { | ||
this._onWillShowOverlay.fire(event); | ||
}), this.contentContainer.dropTarget.onWillShowOverlay((event) => { | ||
this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, { | ||
kind: 'content', | ||
})); | ||
}), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange); | ||
} | ||
focusContent() { | ||
this.contentContainer.element.focus(); | ||
} | ||
set renderContainer(value) { | ||
this.panels.forEach((panel) => { | ||
this.renderContainer.detatch(panel); | ||
}); | ||
this._overwriteRenderContainer = value; | ||
this.panels.forEach((panel) => { | ||
this.rerender(panel); | ||
}); | ||
} | ||
get renderContainer() { | ||
var _a; | ||
return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer); | ||
} | ||
initialize() { | ||
var _a, _b; | ||
if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) { | ||
if (this.options.panels) { | ||
this.options.panels.forEach((panel) => { | ||
@@ -121,3 +224,3 @@ this.doAddPanel(panel); | ||
} | ||
if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.activePanel) { | ||
if (this.options.activePanel) { | ||
this.openPanel(this.options.activePanel); | ||
@@ -127,3 +230,3 @@ } | ||
// correctly initialized | ||
this.setActive(this.isActive, true, true); | ||
this.setActive(this.isActive, true); | ||
this.updateContainer(); | ||
@@ -135,3 +238,3 @@ if (this.accessor.options.createRightHeaderActionsElement) { | ||
this._rightHeaderActions.init({ | ||
containerApi: new DockviewApi(this.accessor), | ||
containerApi: this._api, | ||
api: this.groupPanel.api, | ||
@@ -146,3 +249,3 @@ }); | ||
this._leftHeaderActions.init({ | ||
containerApi: new DockviewApi(this.accessor), | ||
containerApi: this._api, | ||
api: this.groupPanel.api, | ||
@@ -157,3 +260,3 @@ }); | ||
this._prefixHeaderActions.init({ | ||
containerApi: new DockviewApi(this.accessor), | ||
containerApi: this._api, | ||
api: this.groupPanel.api, | ||
@@ -165,3 +268,3 @@ }); | ||
rerender(panel) { | ||
this.contentContainer.renderPanel(panel); | ||
this.contentContainer.renderPanel(panel, { asActive: false }); | ||
} | ||
@@ -239,6 +342,12 @@ indexOf(panel) { | ||
focus() { | ||
var _a, _b; | ||
(_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a); | ||
var _a; | ||
(_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus(); | ||
} | ||
openPanel(panel, options = {}) { | ||
/** | ||
* set the panel group | ||
* add the panel | ||
* check if group active | ||
* check if panel active | ||
*/ | ||
if (typeof options.index !== 'number' || | ||
@@ -248,22 +357,27 @@ options.index > this.panels.length) { | ||
} | ||
const skipSetPanelActive = !!options.skipSetPanelActive; | ||
const skipSetGroupActive = !!options.skipSetGroupActive; | ||
const skipSetActive = !!options.skipSetActive; | ||
// ensure the group is updated before we fire any events | ||
panel.updateParentGroup(this.groupPanel, true); | ||
panel.updateParentGroup(this.groupPanel, { | ||
skipSetActive: options.skipSetActive, | ||
}); | ||
this.doAddPanel(panel, options.index, { | ||
skipSetActive: skipSetActive, | ||
}); | ||
if (this._activePanel === panel) { | ||
if (!skipSetGroupActive) { | ||
this.accessor.doSetGroupActive(this.groupPanel); | ||
} | ||
this.contentContainer.renderPanel(panel, { asActive: true }); | ||
return; | ||
} | ||
this.doAddPanel(panel, options.index, skipSetPanelActive); | ||
if (!skipSetPanelActive) { | ||
if (!skipSetActive) { | ||
this.doSetActivePanel(panel); | ||
} | ||
if (!skipSetGroupActive) { | ||
this.accessor.doSetGroupActive(this.groupPanel, !!options.skipFocus); | ||
if (!options.skipSetGroupActive) { | ||
this.accessor.doSetGroupActive(this.groupPanel); | ||
} | ||
this.updateContainer(); | ||
if (!options.skipSetActive) { | ||
this.updateContainer(); | ||
} | ||
} | ||
removePanel(groupItemOrId) { | ||
removePanel(groupItemOrId, options = { | ||
skipSetActive: false, | ||
}) { | ||
const id = typeof groupItemOrId === 'string' | ||
@@ -276,3 +390,3 @@ ? groupItemOrId | ||
} | ||
return this._removePanel(panelToRemove); | ||
return this._removePanel(panelToRemove, options); | ||
} | ||
@@ -303,8 +417,4 @@ closeAllPanels() { | ||
} | ||
setActive(isGroupActive, skipFocus = false, force = false) { | ||
var _a, _b, _c, _d; | ||
setActive(isGroupActive, force = false) { | ||
if (!force && this.isActive === isGroupActive) { | ||
if (!skipFocus) { | ||
(_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a); | ||
} | ||
return; | ||
@@ -320,7 +430,2 @@ } | ||
this.updateContainer(); | ||
if (isGroupActive) { | ||
if (!skipFocus) { | ||
(_d = (_c = this._activePanel) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c); | ||
} | ||
} | ||
} | ||
@@ -336,3 +441,3 @@ layout(width, height) { | ||
} | ||
_removePanel(panel) { | ||
_removePanel(panel, options) { | ||
const isActivePanel = this._activePanel === panel; | ||
@@ -342,3 +447,6 @@ this.doRemovePanel(panel); | ||
const nextPanel = this.mostRecentlyUsed[0]; | ||
this.openPanel(nextPanel); | ||
this.openPanel(nextPanel, { | ||
skipSetActive: options.skipSetActive, | ||
skipSetGroupActive: options.skipSetActiveGroup, | ||
}); | ||
} | ||
@@ -348,3 +456,5 @@ if (this._activePanel && this.panels.length === 0) { | ||
} | ||
this.updateContainer(); | ||
if (!options.skipSetActive) { | ||
this.updateContainer(); | ||
} | ||
return panel; | ||
@@ -364,3 +474,3 @@ } | ||
} | ||
doAddPanel(panel, index = this.panels.length, skipSetActive = false) { | ||
doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) { | ||
const existingPanel = this._panels.indexOf(panel); | ||
@@ -371,3 +481,3 @@ const hasExistingPanel = existingPanel > -1; | ||
this.tabsContainer.openPanel(panel, index); | ||
if (!skipSetActive) { | ||
if (!options.skipSetActive) { | ||
this.contentContainer.openPanel(panel); | ||
@@ -384,2 +494,5 @@ } | ||
doSetActivePanel(panel) { | ||
if (this._activePanel === panel) { | ||
return; | ||
} | ||
this._activePanel = panel; | ||
@@ -390,3 +503,5 @@ if (panel) { | ||
this.updateMru(panel); | ||
this._onDidActivePanelChange.fire({ panel }); | ||
this._onDidActivePanelChange.fire({ | ||
panel, | ||
}); | ||
} | ||
@@ -403,7 +518,7 @@ } | ||
toggleClass(this.container, 'empty', this.isEmpty); | ||
this.panels.forEach((panel) => panel.updateParentGroup(this.groupPanel, this.isActive)); | ||
this.panels.forEach((panel) => panel.runEvents()); | ||
if (this.isEmpty && !this.watermark) { | ||
const watermark = this.accessor.createWatermarkComponent(); | ||
watermark.init({ | ||
containerApi: new DockviewApi(this.accessor), | ||
containerApi: this._api, | ||
group: this.groupPanel, | ||
@@ -441,6 +556,28 @@ }); | ||
} | ||
handleDropEvent(event, position, index) { | ||
handleDropEvent(type, event, position, index) { | ||
if (this.locked === 'no-drop-target') { | ||
return; | ||
} | ||
function getKind() { | ||
switch (type) { | ||
case 'header': | ||
return typeof index === 'number' ? 'tab' : 'header_space'; | ||
case 'content': | ||
return 'content'; | ||
} | ||
} | ||
const panel = typeof index === 'number' ? this.panels[index] : undefined; | ||
const willDropEvent = new DockviewWillDropEvent({ | ||
nativeEvent: event, | ||
position, | ||
panel, | ||
getData: () => getPanelData(), | ||
kind: getKind(), | ||
group: this.groupPanel, | ||
api: this._api, | ||
}); | ||
this._onWillDrop.fire(willDropEvent); | ||
if (willDropEvent.defaultPrevented) { | ||
return; | ||
} | ||
const data = getPanelData(); | ||
@@ -478,8 +615,10 @@ if (data && data.viewId === this.accessor.id) { | ||
else { | ||
this._onDidDrop.fire({ | ||
this._onDidDrop.fire(new DockviewDidDropEvent({ | ||
nativeEvent: event, | ||
position, | ||
index, | ||
panel, | ||
getData: () => getPanelData(), | ||
}); | ||
group: this.groupPanel, | ||
api: this._api, | ||
})); | ||
} | ||
@@ -492,6 +631,6 @@ } | ||
(_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b); | ||
this.watermark = undefined; | ||
for (const panel of this.panels) { | ||
panel.dispose(); | ||
} | ||
// this.dropTarget.dispose(); | ||
this.tabsContainer.dispose(); | ||
@@ -501,2 +640,1 @@ this.contentContainer.dispose(); | ||
} | ||
//# sourceMappingURL=dockviewGroupPanelModel.js.map |
@@ -9,3 +9,3 @@ import { DockviewApi } from '../api/component.api'; | ||
import { DockviewComponent } from './dockviewComponent'; | ||
import { DockviewPanelRenderer } from './components/greadyRenderContainer'; | ||
import { DockviewPanelRenderer } from '../overlayRenderContainer'; | ||
export interface IDockviewPanel extends IDisposable, IPanel { | ||
@@ -17,3 +17,5 @@ readonly view: IDockviewPanelModel; | ||
readonly params: Parameters | undefined; | ||
updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void; | ||
updateParentGroup(group: DockviewGroupPanel, options?: { | ||
skipSetActive?: boolean; | ||
}): void; | ||
init(params: IGroupPanelInitParameters): void; | ||
@@ -23,2 +25,3 @@ toJSON(): GroupviewPanelState; | ||
update(event: PanelUpdateEvent): void; | ||
runEvents(): void; | ||
} | ||
@@ -48,6 +51,8 @@ export declare class DockviewPanel extends CompositeDisposable implements IDockviewPanel { | ||
update(event: PanelUpdateEvent): void; | ||
updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void; | ||
updateParentGroup(group: DockviewGroupPanel, options?: { | ||
skipSetActive?: boolean; | ||
}): void; | ||
runEvents(): void; | ||
layout(width: number, height: number): void; | ||
dispose(): void; | ||
} | ||
//# sourceMappingURL=dockviewPanel.d.ts.map |
import { DockviewPanelApiImpl, } from '../api/dockviewPanelApi'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
import { WillFocusEvent } from '../api/panelApi'; | ||
export class DockviewPanel extends CompositeDisposable { | ||
@@ -42,3 +43,10 @@ get params() { | ||
focus() { | ||
this.api._onFocusEvent.fire(); | ||
const event = new WillFocusEvent(); | ||
this.api._onWillFocus.fire(event); | ||
if (event.defaultPrevented) { | ||
return; | ||
} | ||
if (!this.api.isActive) { | ||
this.api.setActive(); | ||
} | ||
} | ||
@@ -100,16 +108,36 @@ toJSON() { | ||
} | ||
updateParentGroup(group, isGroupActive) { | ||
updateParentGroup(group, options) { | ||
this._group = group; | ||
this.api.group = group; | ||
this.api.group = this._group; | ||
const isPanelVisible = this._group.model.isPanelActive(this); | ||
this.api._onDidActiveChange.fire({ | ||
isActive: isGroupActive && isPanelVisible, | ||
}); | ||
this.api._onDidVisibilityChange.fire({ | ||
isVisible: isPanelVisible, | ||
}); | ||
this.view.updateParentGroup(this._group, this._group.model.isPanelActive(this)); | ||
const isActive = this.group.api.isActive && isPanelVisible; | ||
if (!(options === null || options === void 0 ? void 0 : options.skipSetActive)) { | ||
if (this.api.isActive !== isActive) { | ||
this.api._onDidActiveChange.fire({ | ||
isActive: this.group.api.isActive && isPanelVisible, | ||
}); | ||
} | ||
} | ||
if (this.api.isVisible !== isPanelVisible) { | ||
this.api._onDidVisibilityChange.fire({ | ||
isVisible: isPanelVisible, | ||
}); | ||
} | ||
} | ||
runEvents() { | ||
const isPanelVisible = this._group.model.isPanelActive(this); | ||
const isActive = this.group.api.isActive && isPanelVisible; | ||
if (this.api.isActive !== isActive) { | ||
this.api._onDidActiveChange.fire({ | ||
isActive: this.group.api.isActive && isPanelVisible, | ||
}); | ||
} | ||
if (this.api.isVisible !== isPanelVisible) { | ||
this.api._onDidVisibilityChange.fire({ | ||
isVisible: isPanelVisible, | ||
}); | ||
} | ||
} | ||
layout(width, height) { | ||
// the obtain the correct dimensions of the content panel we must deduct the tab height | ||
// TODO: Can we somehow do height without header height or indicate what the header height is? | ||
this.api._onDidDimensionChange.fire({ | ||
@@ -126,2 +154,1 @@ width, | ||
} | ||
//# sourceMappingURL=dockviewPanel.js.map |
@@ -23,4 +23,2 @@ import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from './types'; | ||
private readonly _tab; | ||
private _group; | ||
private _isPanelVisible; | ||
get content(): IContentRenderer; | ||
@@ -30,3 +28,3 @@ get tab(): ITabRenderer; | ||
init(params: GroupPanelPartInitParameters): void; | ||
updateParentGroup(group: DockviewGroupPanel, isPanelVisible: boolean): void; | ||
updateParentGroup(_group: DockviewGroupPanel, _isPanelVisible: boolean): void; | ||
layout(width: number, height: number): void; | ||
@@ -38,2 +36,1 @@ update(event: PanelUpdateEvent): void; | ||
} | ||
//# sourceMappingURL=dockviewPanelModel.d.ts.map |
@@ -15,4 +15,2 @@ import { DefaultTab } from './components/tab/defaultTab'; | ||
this.tabComponent = tabComponent; | ||
this._group = null; | ||
this._isPanelVisible = null; | ||
this._content = this.createContentComponent(this.id, contentComponent); | ||
@@ -25,21 +23,4 @@ this._tab = this.createTabComponent(this.id, tabComponent); | ||
} | ||
updateParentGroup(group, isPanelVisible) { | ||
if (group !== this._group) { | ||
this._group = group; | ||
if (this._content.onGroupChange) { | ||
this._content.onGroupChange(group); | ||
} | ||
if (this._tab.onGroupChange) { | ||
this._tab.onGroupChange(group); | ||
} | ||
} | ||
if (isPanelVisible !== this._isPanelVisible) { | ||
this._isPanelVisible = isPanelVisible; | ||
if (this._content.onPanelVisibleChange) { | ||
this._content.onPanelVisibleChange(isPanelVisible); | ||
} | ||
if (this._tab.onPanelVisibleChange) { | ||
this._tab.onPanelVisibleChange(isPanelVisible); | ||
} | ||
} | ||
updateParentGroup(_group, _isPanelVisible) { | ||
// noop | ||
} | ||
@@ -77,2 +58,1 @@ layout(width, height) { | ||
} | ||
//# sourceMappingURL=dockviewPanelModel.js.map |
@@ -10,7 +10,8 @@ import { DockviewApi } from '../api/component.api'; | ||
import { IDisposable } from '../lifecycle'; | ||
import { Position } from '../dnd/droptarget'; | ||
import { DroptargetOverlayModel, Position } from '../dnd/droptarget'; | ||
import { GroupOptions } from './dockviewGroupPanelModel'; | ||
import { IDockviewPanel } from './dockviewPanel'; | ||
import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory'; | ||
import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi'; | ||
import { DockviewPanelRenderer } from './components/greadyRenderContainer'; | ||
import { DockviewPanelRenderer } from '../overlayRenderContainer'; | ||
export interface IHeaderActionsRenderer extends IDisposable { | ||
@@ -71,3 +72,3 @@ readonly element: HTMLElement; | ||
singleTabMode?: 'fullwidth' | 'default'; | ||
parentElement?: HTMLElement; | ||
parentElement: HTMLElement; | ||
disableFloatingGroups?: boolean; | ||
@@ -78,5 +79,8 @@ floatingGroupBounds?: 'boundedWithinViewport' | { | ||
}; | ||
popoutUrl?: string; | ||
defaultRenderer?: DockviewPanelRenderer; | ||
isRtl?: boolean; | ||
debug?: boolean; | ||
rootOverlayModel?: DroptargetOverlayModel; | ||
locked?: boolean; | ||
disableDnd?: boolean; | ||
} | ||
@@ -118,3 +122,6 @@ export interface PanelOptions<P extends object = Parameters> { | ||
type AddPanelOptionsUnion = AddPanelFloatingGroupUnion | AddPanelPositionUnion; | ||
export type AddPanelOptions<P extends object = Parameters> = Omit<PanelOptions<P>, 'component' | 'tabComponent'> & { | ||
export type AddPanelOptions<P extends object = Parameters> = { | ||
params?: P; | ||
id: string; | ||
title?: string; | ||
component: string; | ||
@@ -132,3 +139,3 @@ tabComponent?: string; | ||
}; | ||
export type AddGroupOptions = AddGroupOptionsWithGroup | AddGroupOptionsWithPanel | AbsolutePosition; | ||
export type AddGroupOptions = (AddGroupOptionsWithGroup | AddGroupOptionsWithPanel | AbsolutePosition) & GroupOptions; | ||
export declare function isGroupOptionsWithPanel(data: AddGroupOptions): data is AddGroupOptionsWithPanel; | ||
@@ -144,2 +151,1 @@ export declare function isGroupOptionsWithGroup(data: AddGroupOptions): data is AddGroupOptionsWithGroup; | ||
export {}; | ||
//# sourceMappingURL=options.d.ts.map |
@@ -25,2 +25,1 @@ export function isPanelOptionsWithPanel(data) { | ||
} | ||
//# sourceMappingURL=options.js.map |
@@ -8,9 +8,4 @@ import { IDockviewComponent } from './dockviewComponent'; | ||
import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel'; | ||
import { DockviewPanelRenderer } from './components/greadyRenderContainer'; | ||
export declare enum DockviewDropTargets { | ||
Tab = 0, | ||
Panel = 1, | ||
TabContainer = 2, | ||
Edge = 3 | ||
} | ||
import { DockviewPanelRenderer } from '../overlayRenderContainer'; | ||
export type DockviewDropTargets = 'tab' | 'panel' | 'tabContainer' | 'edge'; | ||
export interface HeaderPartInitParameters { | ||
@@ -38,4 +33,2 @@ title: string; | ||
init(parameters: GroupPanelPartInitParameters): void; | ||
onGroupChange?(group: DockviewGroupPanel): void; | ||
onPanelVisibleChange?(isPanelVisible: boolean): void; | ||
} | ||
@@ -47,4 +40,2 @@ export interface IContentRenderer extends Optional<Omit<IPanel, 'id'>, 'dispose' | 'update' | 'layout' | 'toJSON'> { | ||
init(parameters: GroupPanelContentPartInitParameters): void; | ||
onGroupChange?(group: DockviewGroupPanel): void; | ||
onPanelVisibleChange?(isPanelVisible: boolean): void; | ||
} | ||
@@ -69,2 +60,1 @@ export interface WatermarkPartInitParameters { | ||
} | ||
//# sourceMappingURL=types.d.ts.map |
@@ -1,8 +0,1 @@ | ||
export var DockviewDropTargets; | ||
(function (DockviewDropTargets) { | ||
DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab"; | ||
DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel"; | ||
DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer"; | ||
DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge"; | ||
})(DockviewDropTargets || (DockviewDropTargets = {})); | ||
//# sourceMappingURL=types.js.map | ||
export {}; |
@@ -17,6 +17,5 @@ import { Event as DockviewEvent } from './events'; | ||
export declare function quasiDefaultPrevented(event: Event): boolean; | ||
export declare function hasClassInTree(domNode: Element, className: string): boolean; | ||
export declare function addStyles(document: Document, styleSheetList: StyleSheetList): void; | ||
export declare function getDomNodePagePosition(domNode: Element): { | ||
left?: number; | ||
right?: number; | ||
left: number; | ||
top: number; | ||
@@ -26,2 +25,6 @@ width: number; | ||
}; | ||
//# sourceMappingURL=dom.d.ts.map | ||
/** | ||
* Check whether an element is in the DOM (including the Shadow DOM) | ||
* @see https://terodox.tech/how-to-tell-if-an-element-is-in-the-dom-including-the-shadow-dom/ | ||
*/ | ||
export declare function isInDocument(element: Element): boolean; |
@@ -127,18 +127,32 @@ import { Emitter, addDisposableListener, addDisposableWindowListener, } from './events'; | ||
} | ||
// Gets whether the given class exists in the element or its parent tree | ||
export function hasClassInTree(domNode, className) { | ||
if (domNode.classList.contains(className)) { | ||
return true; | ||
export function addStyles(document, styleSheetList) { | ||
const styleSheets = Array.from(styleSheetList); | ||
for (const styleSheet of styleSheets) { | ||
if (styleSheet.href) { | ||
const link = document.createElement('link'); | ||
link.href = styleSheet.href; | ||
link.type = styleSheet.type; | ||
link.rel = 'stylesheet'; | ||
document.head.appendChild(link); | ||
} | ||
let cssTexts = []; | ||
try { | ||
if (styleSheet.cssRules) { | ||
cssTexts = Array.from(styleSheet.cssRules).map((rule) => rule.cssText); | ||
} | ||
} | ||
catch (err) { | ||
// security errors (lack of permissions), ignore | ||
} | ||
for (const rule of cssTexts) { | ||
const style = document.createElement('style'); | ||
style.appendChild(document.createTextNode(rule)); | ||
document.head.appendChild(style); | ||
} | ||
} | ||
if (domNode.parentElement) { | ||
return hasClassInTree(domNode.parentElement, className); | ||
} | ||
return false; | ||
} | ||
export function getDomNodePagePosition(domNode) { | ||
const isRtl = hasClassInTree(domNode, 'dv-rtl'); | ||
const { left, right, top, width, height } = domNode.getBoundingClientRect(); | ||
const { left, top, width, height } = domNode.getBoundingClientRect(); | ||
return { | ||
left: isRtl ? undefined : left + window.scrollX, | ||
right: isRtl ? right + window.scrollX : undefined, | ||
left: left + window.scrollX, | ||
top: top + window.scrollY, | ||
@@ -149,2 +163,21 @@ width: width, | ||
} | ||
//# sourceMappingURL=dom.js.map | ||
/** | ||
* Check whether an element is in the DOM (including the Shadow DOM) | ||
* @see https://terodox.tech/how-to-tell-if-an-element-is-in-the-dom-including-the-shadow-dom/ | ||
*/ | ||
export function isInDocument(element) { | ||
let currentElement = element; | ||
while (currentElement === null || currentElement === void 0 ? void 0 : currentElement.parentNode) { | ||
if (currentElement.parentNode === document) { | ||
return true; | ||
} | ||
else if (currentElement.parentNode instanceof DocumentFragment) { | ||
// handle shadow DOMs | ||
currentElement = currentElement.parentNode.host; | ||
} | ||
else { | ||
currentElement = currentElement.parentNode; | ||
} | ||
} | ||
return false; | ||
} |
@@ -11,2 +11,11 @@ import { IDisposable } from './lifecycle'; | ||
} | ||
export interface IDockviewEvent { | ||
readonly defaultPrevented: boolean; | ||
preventDefault(): void; | ||
} | ||
export declare class DockviewEvent implements IDockviewEvent { | ||
private _defaultPrevented; | ||
get defaultPrevented(): boolean; | ||
preventDefault(): void; | ||
} | ||
declare class LeakageMonitor { | ||
@@ -34,2 +43,3 @@ readonly events: Map<Event<any>, Stacktrace>; | ||
static setLeakageMonitorEnabled(isEnabled: boolean): void; | ||
get value(): T | undefined; | ||
constructor(options?: EmitterOptions | undefined); | ||
@@ -50,2 +60,1 @@ get event(): Event<T>; | ||
export {}; | ||
//# sourceMappingURL=events.d.ts.map |
@@ -16,2 +16,13 @@ export var Event; | ||
})(Event || (Event = {})); | ||
export class DockviewEvent { | ||
constructor() { | ||
this._defaultPrevented = false; | ||
} | ||
get defaultPrevented() { | ||
return this._defaultPrevented; | ||
} | ||
preventDefault() { | ||
this._defaultPrevented = true; | ||
} | ||
} | ||
class LeakageMonitor { | ||
@@ -60,2 +71,5 @@ constructor() { | ||
} | ||
get value() { | ||
return this._last; | ||
} | ||
constructor(options) { | ||
@@ -159,2 +173,1 @@ this.options = options; | ||
} | ||
//# sourceMappingURL=events.js.map |
@@ -1,2 +0,2 @@ | ||
import { Emitter, Event, TickDelayedEvent } from '../events'; | ||
import { Event, TickDelayedEvent } from '../events'; | ||
import { Gridview, IGridView } from './gridview'; | ||
@@ -15,5 +15,5 @@ import { Position } from '../dnd/droptarget'; | ||
readonly styles?: ISplitviewStyles; | ||
readonly parentElement?: HTMLElement; | ||
readonly parentElement: HTMLElement; | ||
readonly disableAutoResizing?: boolean; | ||
readonly isRtl?: boolean; | ||
readonly locked?: boolean; | ||
} | ||
@@ -36,6 +36,2 @@ export interface IGridPanelView extends IGridView, IPanel { | ||
readonly groups: T[]; | ||
readonly onDidLayoutChange: Event<void>; | ||
readonly onDidRemoveGroup: Event<T>; | ||
readonly onDidAddGroup: Event<T>; | ||
readonly onDidActiveGroupChange: Event<T | undefined>; | ||
getPanel(id: string): T | undefined; | ||
@@ -48,2 +44,8 @@ toJSON(): object; | ||
isVisible(panel: T): boolean; | ||
maximizeGroup(panel: T): void; | ||
isMaximizedGroup(panel: T): boolean; | ||
exitMaximizedGroup(): void; | ||
hasMaximizedGroup(): boolean; | ||
readonly onDidMaximizedGroupChange: Event<void>; | ||
readonly onDidLayoutChange: Event<void>; | ||
} | ||
@@ -57,8 +59,8 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizable implements IBaseGrid<T> { | ||
readonly onDidLayoutChange: Event<void>; | ||
protected readonly _onDidRemoveGroup: Emitter<T>; | ||
readonly onDidRemoveGroup: Event<T>; | ||
protected readonly _onDidAddGroup: Emitter<T>; | ||
readonly onDidAddGroup: Event<T>; | ||
private readonly _onDidActiveGroupChange; | ||
readonly onDidActiveGroupChange: Event<T | undefined>; | ||
private readonly _onDidRemove; | ||
readonly onDidRemove: Event<T>; | ||
private readonly _onDidAdd; | ||
readonly onDidAdd: Event<T>; | ||
private readonly _onDidActiveChange; | ||
readonly onDidActiveChange: Event<T | undefined>; | ||
protected readonly _bufferOnDidLayoutChange: TickDelayedEvent; | ||
@@ -75,2 +77,4 @@ get id(): string; | ||
get activeGroup(): T | undefined; | ||
get locked(): boolean; | ||
set locked(value: boolean); | ||
constructor(options: BaseGridOptions); | ||
@@ -82,2 +86,7 @@ abstract toJSON(): object; | ||
isVisible(panel: T): boolean; | ||
maximizeGroup(panel: T): void; | ||
isMaximizedGroup(panel: T): boolean; | ||
exitMaximizedGroup(): void; | ||
hasMaximizedGroup(): boolean; | ||
get onDidMaximizedGroupChange(): Event<void>; | ||
protected doAddGroup(group: T, location?: number[], size?: number): void; | ||
@@ -89,3 +98,3 @@ protected doRemoveGroup(group: T, options?: { | ||
getPanel(id: string): T | undefined; | ||
doSetGroupActive(group: T | undefined, skipFocus?: boolean): void; | ||
doSetGroupActive(group: T | undefined): void; | ||
removeGroup(group: T): void; | ||
@@ -97,2 +106,1 @@ moveToNext(options?: MovementOptions2): void; | ||
} | ||
//# sourceMappingURL=baseComponentGridview.d.ts.map |
import { Emitter, Event, TickDelayedEvent } from '../events'; | ||
import { getGridLocation, Gridview } from './gridview'; | ||
import { Disposable } from '../lifecycle'; | ||
import { sequentialNumberGenerator } from '../math'; | ||
import { Sizing } from '../splitview/splitview'; | ||
import { Resizable } from '../resizable'; | ||
import { toggleClass } from '../dom'; | ||
const nextLayoutId = sequentialNumberGenerator(); | ||
@@ -54,4 +54,10 @@ export function toTarget(direction) { | ||
} | ||
get locked() { | ||
return this.gridview.locked; | ||
} | ||
set locked(value) { | ||
this.gridview.locked = value; | ||
} | ||
constructor(options) { | ||
super(options.parentElement, options.disableAutoResizing); | ||
super(document.createElement('div'), options.disableAutoResizing); | ||
this._id = nextLayoutId.next(); | ||
@@ -61,17 +67,22 @@ this._groups = new Map(); | ||
this.onDidLayoutChange = this._onDidLayoutChange.event; | ||
this._onDidRemoveGroup = new Emitter(); | ||
this.onDidRemoveGroup = this._onDidRemoveGroup.event; | ||
this._onDidAddGroup = new Emitter(); | ||
this.onDidAddGroup = this._onDidAddGroup.event; | ||
this._onDidActiveGroupChange = new Emitter(); | ||
this.onDidActiveGroupChange = this._onDidActiveGroupChange.event; | ||
this._onDidRemove = new Emitter(); | ||
this.onDidRemove = this._onDidRemove.event; | ||
this._onDidAdd = new Emitter(); | ||
this.onDidAdd = this._onDidAdd.event; | ||
this._onDidActiveChange = new Emitter(); | ||
this.onDidActiveChange = this._onDidActiveChange.event; | ||
this._bufferOnDidLayoutChange = new TickDelayedEvent(); | ||
this.element.style.height = '100%'; | ||
this.element.style.width = '100%'; | ||
options.parentElement.appendChild(this.element); | ||
this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation); | ||
toggleClass(this.gridview.element, 'dv-rtl', options.isRtl === true); | ||
toggleClass(this.gridview.element, 'dv-ltr', options.isRtl === false); | ||
this.gridview.locked = !!options.locked; | ||
this.element.appendChild(this.gridview.element); | ||
this.layout(0, 0, true); // set some elements height/widths | ||
this.addDisposables(this.gridview.onDidChange(() => { | ||
this.addDisposables(Disposable.from(() => { | ||
var _a; | ||
(_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element); | ||
}), this.gridview.onDidChange(() => { | ||
this._bufferOnDidLayoutChange.fire(); | ||
}), Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => { | ||
}), Event.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => { | ||
this._bufferOnDidLayoutChange.fire(); | ||
@@ -89,6 +100,21 @@ }), this._bufferOnDidLayoutChange.onEvent(() => { | ||
} | ||
maximizeGroup(panel) { | ||
this.gridview.maximizeView(panel); | ||
this.doSetGroupActive(panel); | ||
} | ||
isMaximizedGroup(panel) { | ||
return this.gridview.maximizedView() === panel; | ||
} | ||
exitMaximizedGroup() { | ||
this.gridview.exitMaximizedView(); | ||
} | ||
hasMaximizedGroup() { | ||
return this.gridview.hasMaximizedView(); | ||
} | ||
get onDidMaximizedGroupChange() { | ||
return this.gridview.onDidMaximizedNodeChange; | ||
} | ||
doAddGroup(group, location = [0], size) { | ||
this.gridview.addView(group, size !== null && size !== void 0 ? size : Sizing.Distribute, location); | ||
this._onDidAddGroup.fire(group); | ||
this.doSetGroupActive(group); | ||
this._onDidAdd.fire(group); | ||
} | ||
@@ -105,4 +131,4 @@ doRemoveGroup(group, options) { | ||
this._groups.delete(group.id); | ||
this._onDidRemove.fire(group); | ||
} | ||
this._onDidRemoveGroup.fire(group); | ||
if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) { | ||
@@ -118,4 +144,3 @@ const groups = Array.from(this._groups.values()); | ||
} | ||
doSetGroupActive(group, skipFocus) { | ||
var _a, _b, _c; | ||
doSetGroupActive(group) { | ||
if (this._activeGroup === group) { | ||
@@ -126,14 +151,8 @@ return; | ||
this._activeGroup.setActive(false); | ||
if (!skipFocus) { | ||
(_b = (_a = this._activeGroup).focus) === null || _b === void 0 ? void 0 : _b.call(_a); | ||
} | ||
} | ||
if (group) { | ||
group.setActive(true); | ||
if (!skipFocus) { | ||
(_c = group.focus) === null || _c === void 0 ? void 0 : _c.call(group); | ||
} | ||
} | ||
this._activeGroup = group; | ||
this._onDidActiveGroupChange.fire(group); | ||
this._onDidActiveChange.fire(group); | ||
} | ||
@@ -183,5 +202,5 @@ removeGroup(group) { | ||
dispose() { | ||
this._onDidActiveGroupChange.dispose(); | ||
this._onDidAddGroup.dispose(); | ||
this._onDidRemoveGroup.dispose(); | ||
this._onDidActiveChange.dispose(); | ||
this._onDidAdd.dispose(); | ||
this._onDidRemove.dispose(); | ||
this._onDidLayoutChange.dispose(); | ||
@@ -195,2 +214,1 @@ for (const group of this.groups) { | ||
} | ||
//# sourceMappingURL=baseComponentGridview.js.map |
@@ -41,2 +41,1 @@ import { CompositeDisposable } from '../lifecycle'; | ||
} | ||
//# sourceMappingURL=basePanelView.d.ts.map |
import { trackFocus } from '../dom'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
import { WillFocusEvent } from '../api/panelApi'; | ||
export class BasePanelView extends CompositeDisposable { | ||
@@ -38,3 +39,8 @@ get element() { | ||
focus() { | ||
this.api._onFocusEvent.fire(); | ||
const event = new WillFocusEvent(); | ||
this.api._onWillFocus.fire(event); | ||
if (event.defaultPrevented) { | ||
return; | ||
} | ||
this._element.focus(); | ||
} | ||
@@ -87,2 +93,1 @@ layout(width, height) { | ||
} | ||
//# sourceMappingURL=basePanelView.js.map |
@@ -21,2 +21,4 @@ import { IView, Orientation, Sizing, LayoutPriority, ISplitviewStyles } from '../splitview/splitview'; | ||
}>; | ||
private readonly _onDidVisibilityChange; | ||
readonly onDidVisibilityChange: Event<boolean>; | ||
get width(): number; | ||
@@ -35,3 +37,5 @@ get height(): number; | ||
get priority(): LayoutPriority; | ||
constructor(orientation: Orientation, proportionalLayout: boolean, styles: ISplitviewStyles | undefined, size: number, orthogonalSize: number, childDescriptors?: INodeDescriptor[]); | ||
get disabled(): boolean; | ||
set disabled(value: boolean); | ||
constructor(orientation: Orientation, proportionalLayout: boolean, styles: ISplitviewStyles | undefined, size: number, orthogonalSize: number, disabled: boolean, childDescriptors?: INodeDescriptor[]); | ||
setVisible(visible: boolean): void; | ||
@@ -52,2 +56,1 @@ isChildVisible(index: number): boolean; | ||
} | ||
//# sourceMappingURL=branchNode.d.ts.map |
@@ -23,6 +23,10 @@ /*--------------------------------------------------------------------------------------------- | ||
? 0 | ||
: Math.max(...this.children.map((c) => c.minimumOrthogonalSize)); | ||
: Math.max(...this.children.map((c, index) => this.splitview.isViewVisible(index) | ||
? c.minimumOrthogonalSize | ||
: 0)); | ||
} | ||
get maximumSize() { | ||
return Math.min(...this.children.map((c) => c.maximumOrthogonalSize)); | ||
return Math.min(...this.children.map((c, index) => this.splitview.isViewVisible(index) | ||
? c.maximumOrthogonalSize | ||
: Number.POSITIVE_INFINITY)); | ||
} | ||
@@ -76,3 +80,9 @@ get minimumOrthogonalSize() { | ||
} | ||
constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) { | ||
get disabled() { | ||
return this.splitview.disabled; | ||
} | ||
set disabled(value) { | ||
this.splitview.disabled = value; | ||
} | ||
constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, childDescriptors) { | ||
super(); | ||
@@ -86,2 +96,4 @@ this.orientation = orientation; | ||
this.onDidChange = this._onDidChange.event; | ||
this._onDidVisibilityChange = new Emitter(); | ||
this.onDidVisibilityChange = this._onDidVisibilityChange.event; | ||
this._orthogonalSize = orthogonalSize; | ||
@@ -121,3 +133,4 @@ this._size = size; | ||
} | ||
this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => { | ||
this.disabled = disabled; | ||
this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => { | ||
this._onDidChange.fire({}); | ||
@@ -145,3 +158,11 @@ })); | ||
} | ||
const wereAllChildrenHidden = this.splitview.contentSize === 0; | ||
this.splitview.setViewVisible(index, visible); | ||
const areAllChildrenHidden = this.splitview.contentSize === 0; | ||
// If all children are hidden then the parent should hide the entire splitview | ||
// If the entire splitview is hidden then the parent should show the splitview when a child is shown | ||
if ((visible && wereAllChildrenHidden) || | ||
(!visible && areAllChildrenHidden)) { | ||
this._onDidVisibilityChange.fire(visible); | ||
} | ||
} | ||
@@ -210,3 +231,3 @@ moveChild(from, to) { | ||
this._childrenDisposable.dispose(); | ||
this._childrenDisposable = Event.any(...this.children.map((c) => c.onDidChange))((e) => { | ||
this._childrenDisposable = new CompositeDisposable(Event.any(...this.children.map((c) => c.onDidChange))((e) => { | ||
/** | ||
@@ -217,3 +238,10 @@ * indicate a change has occured to allows any re-rendering but don't bubble | ||
this._onDidChange.fire({ size: e.orthogonalSize }); | ||
}); | ||
}), ...this.children.map((c, i) => { | ||
if (c instanceof BranchNode) { | ||
return c.onDidVisibilityChange((visible) => { | ||
this.setChildVisible(i, visible); | ||
}); | ||
} | ||
return Disposable.NONE; | ||
})); | ||
} | ||
@@ -227,2 +255,1 @@ dispose() { | ||
} | ||
//# sourceMappingURL=branchNode.js.map |
@@ -15,3 +15,3 @@ import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/splitview'; | ||
export declare function getGridLocation(element: HTMLElement): number[]; | ||
export declare function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Position, isRtl?: boolean): number[]; | ||
export declare function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Position): number[]; | ||
export declare function getDirectionOrientation(direction: Position): Orientation; | ||
@@ -89,5 +89,7 @@ export declare function getLocationOrientation(rootOrientation: Orientation, location: number[]): Orientation; | ||
readonly styles: ISplitviewStyles | undefined; | ||
readonly element: HTMLElement; | ||
private _root; | ||
readonly element: HTMLElement; | ||
private disposable; | ||
private _locked; | ||
private _maximizedNode; | ||
private readonly disposable; | ||
private readonly _onDidChange; | ||
@@ -98,2 +100,4 @@ readonly onDidChange: Event<{ | ||
}>; | ||
private readonly _onDidMaximizedNodeChange; | ||
readonly onDidMaximizedNodeChange: Event<void>; | ||
get length(): number; | ||
@@ -108,6 +112,12 @@ get orientation(): Orientation; | ||
get maximumHeight(): number; | ||
get locked(): boolean; | ||
set locked(value: boolean); | ||
maximizedView(): IGridView | undefined; | ||
hasMaximizedView(): boolean; | ||
maximizeView(view: IGridView): void; | ||
exitMaximizedView(): void; | ||
serialize(): SerializedGridview<any>; | ||
dispose(): void; | ||
clear(): void; | ||
deserialize(json: any, deserializer: IViewDeserializer): void; | ||
deserialize<T>(json: SerializedGridview<T>, deserializer: IViewDeserializer): void; | ||
private _deserialize; | ||
@@ -138,2 +148,1 @@ private _deserializeNode; | ||
} | ||
//# sourceMappingURL=gridview.d.ts.map |
@@ -22,3 +22,3 @@ /*--------------------------------------------------------------------------------------------- | ||
if (node instanceof BranchNode) { | ||
const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize); | ||
const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled); | ||
let totalSize = 0; | ||
@@ -75,3 +75,3 @@ for (let i = node.children.length - 1; i >= 0; i--) { | ||
} | ||
export function getRelativeLocation(rootOrientation, location, direction, isRtl) { | ||
export function getRelativeLocation(rootOrientation, location, direction) { | ||
const orientation = getLocationOrientation(rootOrientation, location); | ||
@@ -82,3 +82,3 @@ const directionOrientation = getDirectionOrientation(direction); | ||
let index = _index; | ||
if ((isRtl ? direction === 'left' : direction === 'right') || direction === 'bottom') { | ||
if (direction === 'right' || direction === 'bottom') { | ||
index += 1; | ||
@@ -89,3 +89,3 @@ } | ||
else { | ||
const index = (isRtl ? direction === 'left' : direction === 'right') || direction === 'bottom' ? 1 : 0; | ||
const index = direction === 'right' || direction === 'bottom' ? 1 : 0; | ||
return [...location, index]; | ||
@@ -162,3 +162,94 @@ } | ||
} | ||
get locked() { | ||
return this._locked; | ||
} | ||
set locked(value) { | ||
this._locked = value; | ||
const branch = [this.root]; | ||
/** | ||
* simple depth-first-search to cover all nodes | ||
* | ||
* @see https://en.wikipedia.org/wiki/Depth-first_search | ||
*/ | ||
while (branch.length > 0) { | ||
const node = branch.pop(); | ||
if (node instanceof BranchNode) { | ||
node.disabled = value; | ||
branch.push(...node.children); | ||
} | ||
} | ||
} | ||
maximizedView() { | ||
var _a; | ||
return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf.view; | ||
} | ||
hasMaximizedView() { | ||
return this._maximizedNode !== undefined; | ||
} | ||
maximizeView(view) { | ||
var _a; | ||
const location = getGridLocation(view.element); | ||
const [_, node] = this.getNode(location); | ||
if (!(node instanceof LeafNode)) { | ||
return; | ||
} | ||
if (((_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf) === node) { | ||
return; | ||
} | ||
if (this.hasMaximizedView()) { | ||
this.exitMaximizedView(); | ||
} | ||
const hiddenOnMaximize = []; | ||
function hideAllViewsBut(parent, exclude) { | ||
for (let i = 0; i < parent.children.length; i++) { | ||
const child = parent.children[i]; | ||
if (child instanceof LeafNode) { | ||
if (child !== exclude) { | ||
if (parent.isChildVisible(i)) { | ||
parent.setChildVisible(i, false); | ||
} | ||
else { | ||
hiddenOnMaximize.push(child); | ||
} | ||
} | ||
} | ||
else { | ||
hideAllViewsBut(child, exclude); | ||
} | ||
} | ||
} | ||
hideAllViewsBut(this.root, node); | ||
this._maximizedNode = { leaf: node, hiddenOnMaximize }; | ||
this._onDidMaximizedNodeChange.fire(); | ||
} | ||
exitMaximizedView() { | ||
if (!this._maximizedNode) { | ||
return; | ||
} | ||
const hiddenOnMaximize = this._maximizedNode.hiddenOnMaximize; | ||
function showViewsInReverseOrder(parent) { | ||
for (let index = parent.children.length - 1; index >= 0; index--) { | ||
const child = parent.children[index]; | ||
if (child instanceof LeafNode) { | ||
if (!hiddenOnMaximize.includes(child)) { | ||
parent.setChildVisible(index, true); | ||
} | ||
} | ||
else { | ||
showViewsInReverseOrder(child); | ||
} | ||
} | ||
} | ||
showViewsInReverseOrder(this.root); | ||
this._maximizedNode = undefined; | ||
this._onDidMaximizedNodeChange.fire(); | ||
} | ||
serialize() { | ||
if (this.hasMaximizedView()) { | ||
/** | ||
* do not persist maximized view state | ||
* firstly exit any maximized views to ensure the correct dimensions are persisted | ||
*/ | ||
this.exitMaximizedView(); | ||
} | ||
const root = serializeBranchNode(this.getView(), this.orientation); | ||
@@ -175,3 +266,5 @@ return { | ||
this._onDidChange.dispose(); | ||
this._onDidMaximizedNodeChange.dispose(); | ||
this.root.dispose(); | ||
this._maximizedNode = undefined; | ||
this.element.remove(); | ||
@@ -181,3 +274,3 @@ } | ||
const orientation = this.root.orientation; | ||
this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize); | ||
this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this._locked); | ||
} | ||
@@ -203,4 +296,4 @@ deserialize(json, deserializer) { | ||
result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth | ||
orthogonalSize, // <- size - flips at each depth | ||
children); | ||
orthogonalSize, // <- size - flips at each depth, | ||
this._locked, children); | ||
} | ||
@@ -219,2 +312,3 @@ else { | ||
oldRoot.dispose(); | ||
this._maximizedNode = undefined; | ||
this.element.removeChild(oldRoot.element); | ||
@@ -238,3 +332,3 @@ } | ||
oldRoot.element.remove(); | ||
this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size); | ||
this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this._locked); | ||
if (oldRoot.children.length === 0) { | ||
@@ -309,8 +403,12 @@ // no data so no need to add anything back in | ||
this.styles = styles; | ||
this._locked = false; | ||
this._maximizedNode = undefined; | ||
this.disposable = new MutableDisposable(); | ||
this._onDidChange = new Emitter(); | ||
this.onDidChange = this._onDidChange.event; | ||
this._onDidMaximizedNodeChange = new Emitter(); | ||
this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event; | ||
this.element = document.createElement('div'); | ||
this.element.className = 'grid-view'; | ||
this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0); | ||
this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this._locked); | ||
} | ||
@@ -326,2 +424,5 @@ isViewVisible(location) { | ||
setViewVisible(location, visible) { | ||
if (this.hasMaximizedView()) { | ||
this.exitMaximizedView(); | ||
} | ||
const [rest, index] = tail(location); | ||
@@ -335,2 +436,5 @@ const [, parent] = this.getNode(rest); | ||
moveView(parentLocation, from, to) { | ||
if (this.hasMaximizedView()) { | ||
this.exitMaximizedView(); | ||
} | ||
const [, parent] = this.getNode(parentLocation); | ||
@@ -343,2 +447,5 @@ if (!(parent instanceof BranchNode)) { | ||
addView(view, size, location) { | ||
if (this.hasMaximizedView()) { | ||
this.exitMaximizedView(); | ||
} | ||
const [rest, index] = tail(location); | ||
@@ -360,3 +467,3 @@ const [pathToParent, parent] = this.getNode(rest); | ||
child.dispose(); | ||
const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize); | ||
const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this._locked); | ||
grandParent.addChild(newParent, parent.size, parentIndex); | ||
@@ -377,2 +484,5 @@ const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size); | ||
removeView(location, sizing) { | ||
if (this.hasMaximizedView()) { | ||
this.exitMaximizedView(); | ||
} | ||
const [rest, index] = tail(location); | ||
@@ -478,2 +588,1 @@ const [pathToParent, parent] = this.getNode(rest); | ||
} | ||
//# sourceMappingURL=gridview.js.map |
@@ -8,3 +8,3 @@ import { SerializedGridview } from './gridview'; | ||
import { Orientation, Sizing } from '../splitview/splitview'; | ||
import { Event } from '../events'; | ||
import { Emitter, Event } from '../events'; | ||
import { Position } from '../dnd/droptarget'; | ||
@@ -46,2 +46,5 @@ export interface SerializedGridviewComponent { | ||
setActive(panel: IGridviewPanel): void; | ||
readonly onDidRemoveGroup: Event<GridviewPanel>; | ||
readonly onDidAddGroup: Event<GridviewPanel>; | ||
readonly onDidActiveGroupChange: Event<GridviewPanel | undefined>; | ||
} | ||
@@ -53,2 +56,8 @@ export declare class GridviewComponent extends BaseGrid<GridviewPanel> implements IGridviewComponent { | ||
readonly onDidLayoutFromJSON: Event<void>; | ||
private readonly _onDidRemoveGroup; | ||
readonly onDidRemoveGroup: Event<GridviewPanel>; | ||
protected readonly _onDidAddGroup: Emitter<GridviewPanel<import("../api/gridviewPanelApi").GridviewPanelApiImpl>>; | ||
readonly onDidAddGroup: Event<GridviewPanel>; | ||
private readonly _onDidActiveGroupChange; | ||
readonly onDidActiveGroupChange: Event<GridviewPanel | undefined>; | ||
get orientation(): Orientation; | ||
@@ -84,2 +93,1 @@ set orientation(value: Orientation); | ||
} | ||
//# sourceMappingURL=gridviewComponent.d.ts.map |
@@ -30,7 +30,19 @@ import { getRelativeLocation, getGridLocation, } from './gridview'; | ||
disableAutoResizing: options.disableAutoResizing, | ||
isRtl: options.isRtl, | ||
}); | ||
this._onDidLayoutfromJSON = new Emitter(); | ||
this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event; | ||
this._onDidRemoveGroup = new Emitter(); | ||
this.onDidRemoveGroup = this._onDidRemoveGroup.event; | ||
this._onDidAddGroup = new Emitter(); | ||
this.onDidAddGroup = this._onDidAddGroup.event; | ||
this._onDidActiveGroupChange = new Emitter(); | ||
this.onDidActiveGroupChange = this._onDidActiveGroupChange.event; | ||
this._options = options; | ||
this.addDisposables(this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => { | ||
this._onDidAddGroup.fire(event); | ||
}), this.onDidRemove((event) => { | ||
this._onDidRemoveGroup.fire(event); | ||
}), this.onDidActiveChange((event) => { | ||
this._onDidActiveGroupChange.fire(event); | ||
})); | ||
if (!this.options.components) { | ||
@@ -170,3 +182,3 @@ this.options.components = {}; | ||
const location = getGridLocation(referenceGroup.element); | ||
relativeLocation = getRelativeLocation(this.gridview.orientation, location, target, this.options.isRtl); | ||
relativeLocation = getRelativeLocation(this.gridview.orientation, location, target); | ||
} | ||
@@ -189,3 +201,3 @@ this.doAddGroup(removedPanel, relativeLocation, options.size); | ||
const location = getGridLocation(referenceGroup.element); | ||
relativeLocation = getRelativeLocation(this.gridview.orientation, location, target, this.options.isRtl); | ||
relativeLocation = getRelativeLocation(this.gridview.orientation, location, target); | ||
} | ||
@@ -212,2 +224,3 @@ } | ||
this.doAddGroup(view, relativeLocation, options.size); | ||
this.doSetGroupActive(view); | ||
return view; | ||
@@ -241,3 +254,3 @@ } | ||
const referenceLocation = getGridLocation(referenceGroup.element); | ||
const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target, this.options.isRtl); | ||
const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target); | ||
const [targetParentLocation, to] = tail(targetLocation); | ||
@@ -260,3 +273,3 @@ const sourceLocation = getGridLocation(sourceGroup.element); | ||
const updatedReferenceLocation = getGridLocation(referenceGroup.element); | ||
const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, target, this.options.isRtl); | ||
const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, target); | ||
this.doAddGroup(targetGroup, location); | ||
@@ -272,2 +285,1 @@ } | ||
} | ||
//# sourceMappingURL=gridviewComponent.js.map |
import { PanelInitParameters } from '../panel/types'; | ||
import { GridviewComponent, IGridPanelComponentView } from './gridviewComponent'; | ||
import { IGridPanelComponentView } from './gridviewComponent'; | ||
import { BasePanelView, BasePanelViewExported, BasePanelViewState } from './basePanelView'; | ||
@@ -8,2 +8,3 @@ import { GridviewPanelApi, GridviewPanelApiImpl } from '../api/gridviewPanelApi'; | ||
import { IViewSize } from './gridview'; | ||
import { BaseGrid, IGridPanelView } from './baseComponentGridview'; | ||
export interface GridviewInitParameters extends PanelInitParameters { | ||
@@ -16,3 +17,3 @@ minimumWidth?: number; | ||
snap?: boolean; | ||
accessor: GridviewComponent; | ||
accessor: BaseGrid<IGridPanelView>; | ||
isVisible?: boolean; | ||
@@ -68,2 +69,1 @@ } | ||
} | ||
//# sourceMappingURL=gridviewPanel.d.ts.map |
@@ -80,9 +80,9 @@ import { BasePanelView, } from './basePanelView'; | ||
this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement | ||
this.addDisposables(this.api.onVisibilityChange((event) => { | ||
const { isVisible } = event; | ||
this.addDisposables(this.api.onDidHiddenChange((event) => { | ||
const { isHidden } = event; | ||
const { accessor } = this._params; | ||
accessor.setVisible(this, isVisible); | ||
accessor.setVisible(this, !isHidden); | ||
}), this.api.onActiveChange(() => { | ||
const { accessor } = this._params; | ||
accessor.setActive(this); | ||
accessor.doSetGroupActive(this); | ||
}), this.api.onDidConstraintsChangeInternal((event) => { | ||
@@ -153,2 +153,1 @@ if (typeof event.minimumWidth === 'number' || | ||
} | ||
//# sourceMappingURL=gridviewPanel.js.map |
@@ -35,2 +35,1 @@ import { IView, LayoutPriority, Orientation } from '../splitview/splitview'; | ||
} | ||
//# sourceMappingURL=leafNode.d.ts.map |
@@ -91,3 +91,2 @@ /*--------------------------------------------------------------------------------------------- | ||
this.view.setVisible(visible); | ||
this._onDidChange.fire({}); | ||
} | ||
@@ -105,2 +104,1 @@ } | ||
} | ||
//# sourceMappingURL=leafNode.js.map |
@@ -16,5 +16,3 @@ import { GridviewPanel } from './gridviewPanel'; | ||
styles?: ISplitviewStyles; | ||
isRtl?: boolean; | ||
parentElement?: HTMLElement; | ||
parentElement: HTMLElement; | ||
} | ||
//# sourceMappingURL=options.d.ts.map |
export {}; | ||
//# sourceMappingURL=options.js.map |
import { BranchNode } from './branchNode'; | ||
import { LeafNode } from './leafNode'; | ||
export type Node = BranchNode | LeafNode; | ||
//# sourceMappingURL=types.d.ts.map |
export {}; | ||
//# sourceMappingURL=types.js.map |
@@ -11,5 +11,6 @@ export * from './dnd/dataTransfer'; | ||
export * from './splitview/splitview'; | ||
export * from './splitview/options'; | ||
export { SplitviewComponentOptions, PanelViewInitParameters, } from './splitview/options'; | ||
export * from './paneview/paneview'; | ||
export * from './gridview/gridview'; | ||
export { GridviewComponentOptions } from './gridview/options'; | ||
export * from './dockview/dockviewGroupPanelModel'; | ||
@@ -36,4 +37,4 @@ export * from './gridview/baseComponentGridview'; | ||
export * from './dockview/types'; | ||
export { DockviewPanelRenderer } from './dockview/components/greadyRenderContainer'; | ||
export { Position, positionToDirection, directionToPosition, } from './dnd/droptarget'; | ||
export { DockviewPanelRenderer } from './overlayRenderContainer'; | ||
export { Position, positionToDirection, directionToPosition, MeasuredValue, DroptargetOverlayModel, } from './dnd/droptarget'; | ||
export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi'; | ||
@@ -46,2 +47,1 @@ export { SizeEvent, GridviewPanelApi, GridConstraintChangeEvent, } from './api/gridviewPanelApi'; | ||
export { CommonApi, SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api'; | ||
//# sourceMappingURL=index.d.ts.map |
@@ -11,3 +11,2 @@ export * from './dnd/dataTransfer'; | ||
export * from './splitview/splitview'; | ||
export * from './splitview/options'; | ||
export * from './paneview/paneview'; | ||
@@ -36,2 +35,1 @@ export * from './gridview/gridview'; | ||
export { SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api'; | ||
//# sourceMappingURL=index.js.map |
@@ -10,7 +10,8 @@ export interface IDisposable { | ||
const NONE: IDisposable; | ||
function from(func: () => void): IDisposable; | ||
} | ||
export declare class CompositeDisposable { | ||
private readonly _disposables; | ||
private _disposables; | ||
private _isDisposed; | ||
protected get isDisposed(): boolean; | ||
get isDisposed(): boolean; | ||
constructor(...args: IDisposable[]); | ||
@@ -25,2 +26,1 @@ addDisposables(...args: IDisposable[]): void; | ||
} | ||
//# sourceMappingURL=lifecycle.d.ts.map |
@@ -8,2 +8,10 @@ export var Disposable; | ||
}; | ||
function from(func) { | ||
return { | ||
dispose: () => { | ||
func(); | ||
}, | ||
}; | ||
} | ||
Disposable.from = from; | ||
})(Disposable || (Disposable = {})); | ||
@@ -22,4 +30,8 @@ export class CompositeDisposable { | ||
dispose() { | ||
if (this._isDisposed) { | ||
return; | ||
} | ||
this._isDisposed = true; | ||
this._disposables.forEach((arg) => arg.dispose()); | ||
this._isDisposed = true; | ||
this._disposables = []; | ||
} | ||
@@ -44,2 +56,1 @@ } | ||
} | ||
//# sourceMappingURL=lifecycle.js.map |
@@ -6,2 +6,1 @@ export declare const clamp: (value: number, min: number, max: number) => number; | ||
export declare const range: (from: number, to?: number) => number[]; | ||
//# sourceMappingURL=math.d.ts.map |
@@ -29,2 +29,1 @@ export const clamp = (value, min, max) => { | ||
}; | ||
//# sourceMappingURL=math.js.map |
@@ -12,2 +12,1 @@ export interface FrameworkFactory<T> { | ||
}, createFrameworkComponent?: FrameworkFactory<T>, fallback?: () => T): T; | ||
//# sourceMappingURL=componentFactory.d.ts.map |
@@ -25,2 +25,1 @@ export function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) { | ||
} | ||
//# sourceMappingURL=componentFactory.js.map |
@@ -21,3 +21,3 @@ import { IDisposable } from '../lifecycle'; | ||
toJSON(): object; | ||
focus?(): void; | ||
focus(): void; | ||
} | ||
@@ -35,2 +35,1 @@ export interface IFrameworkPart extends IDisposable { | ||
} | ||
//# sourceMappingURL=types.d.ts.map |
export {}; | ||
//# sourceMappingURL=types.js.map |
@@ -22,2 +22,1 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi'; | ||
} | ||
//# sourceMappingURL=defaultPaneviewHeader.d.ts.map |
@@ -64,2 +64,1 @@ import { addDisposableListener } from '../events'; | ||
} | ||
//# sourceMappingURL=defaultPaneviewHeader.js.map |
@@ -22,2 +22,1 @@ import { PaneviewApi } from '../api/component.api'; | ||
} | ||
//# sourceMappingURL=draggablePaneviewPanel.d.ts.map |
@@ -81,24 +81,10 @@ import { PaneviewApi } from '../api/component.api'; | ||
let toIndex = containerApi.panels.indexOf(this); | ||
console.log('onDrop', this.accessor.options.isRtl, fromIndex, toIndex, event.position); | ||
if (event.position === 'left' || event.position === 'top') { | ||
if (this.accessor.options.isRtl) { | ||
if (fromIndex > toIndex) { | ||
toIndex++; | ||
} | ||
toIndex = Math.min(allPanels.length - 1, toIndex); | ||
} | ||
else { | ||
toIndex = Math.max(0, toIndex - 1); | ||
} | ||
toIndex = Math.max(0, toIndex - 1); | ||
} | ||
if (event.position === 'right' || event.position === 'bottom') { | ||
if (this.accessor.options.isRtl) { | ||
toIndex = Math.max(0, toIndex - 1); | ||
if (fromIndex > toIndex) { | ||
toIndex++; | ||
} | ||
else { | ||
if (fromIndex > toIndex) { | ||
toIndex++; | ||
} | ||
toIndex = Math.min(allPanels.length - 1, toIndex); | ||
} | ||
toIndex = Math.min(allPanels.length - 1, toIndex); | ||
} | ||
@@ -108,2 +94,1 @@ containerApi.movePanel(fromIndex, toIndex); | ||
} | ||
//# sourceMappingURL=draggablePaneviewPanel.js.map |
@@ -24,5 +24,3 @@ import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory'; | ||
showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean; | ||
parentElement?: HTMLElement; | ||
isRtl?: boolean; | ||
parentElement: HTMLElement; | ||
} | ||
//# sourceMappingURL=options.d.ts.map |
export {}; | ||
//# sourceMappingURL=options.js.map |
@@ -27,3 +27,2 @@ import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/splitview'; | ||
orientation: Orientation; | ||
isRtl?: boolean; | ||
descriptor?: ISplitViewDescriptor; | ||
@@ -43,2 +42,1 @@ }); | ||
export {}; | ||
//# sourceMappingURL=paneview.d.ts.map |
import { Splitview, Orientation, } from '../splitview/splitview'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
import { Emitter } from '../events'; | ||
import { addClasses, removeClasses, toggleClass } from '../dom'; | ||
import { addClasses, removeClasses } from '../dom'; | ||
export class Paneview extends CompositeDisposable { | ||
@@ -37,4 +37,2 @@ get onDidAddView() { | ||
this.element.className = 'pane-container'; | ||
toggleClass(this.element, 'dv-rtl', options.isRtl === true); | ||
toggleClass(this.element, 'dv-ltr', options.isRtl === false); | ||
container.appendChild(this.element); | ||
@@ -45,3 +43,2 @@ this.splitview = new Splitview(this.element, { | ||
descriptor: options.descriptor, | ||
isRtl: options.isRtl, | ||
}); | ||
@@ -151,2 +148,1 @@ // if we've added views from the descriptor we need to | ||
} | ||
//# sourceMappingURL=paneview.js.map |
@@ -129,2 +129,1 @@ import { Event } from '../events'; | ||
} | ||
//# sourceMappingURL=paneviewComponent.d.ts.map |
@@ -85,3 +85,2 @@ import { PaneviewApi } from '../api/component.api'; | ||
orientation: Orientation.VERTICAL, | ||
isRtl: options.isRtl, | ||
}); | ||
@@ -191,3 +190,2 @@ this.addDisposables(this._disposable); | ||
orientation: Orientation.VERTICAL, | ||
isRtl: this.options.isRtl, | ||
descriptor: { | ||
@@ -281,2 +279,1 @@ size, | ||
} | ||
//# sourceMappingURL=paneviewComponent.js.map |
@@ -93,2 +93,1 @@ import { PaneviewApi } from '../api/component.api'; | ||
} | ||
//# sourceMappingURL=paneviewPanel.d.ts.map |
@@ -193,2 +193,1 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi'; | ||
} | ||
//# sourceMappingURL=paneviewPanel.js.map |
@@ -8,5 +8,4 @@ import { CompositeDisposable } from './lifecycle'; | ||
set disableResizing(value: boolean); | ||
constructor(parentElement?: HTMLElement, disableResizing?: boolean); | ||
constructor(parentElement: HTMLElement, disableResizing?: boolean); | ||
abstract layout(width: number, height: number): void; | ||
} | ||
//# sourceMappingURL=resizable.d.ts.map |
@@ -1,2 +0,2 @@ | ||
import { watchElementResize } from './dom'; | ||
import { isInDocument, watchElementResize } from './dom'; | ||
import { CompositeDisposable } from './lifecycle'; | ||
@@ -16,11 +16,3 @@ export class Resizable extends CompositeDisposable { | ||
this._disableResizing = disableResizing; | ||
if (parentElement) { | ||
this._element = parentElement; | ||
} | ||
else { | ||
this._element = document.createElement('div'); | ||
this._element.style.height = '100%'; | ||
this._element.style.width = '100%'; | ||
this._element.className = 'dv-resizable-container'; | ||
} | ||
this._element = parentElement; | ||
this.addDisposables(watchElementResize(this._element, (entry) => { | ||
@@ -37,4 +29,19 @@ if (this.isDisposed) { | ||
} | ||
if (!document.body.contains(this._element)) { | ||
if (!this._element.offsetParent) { | ||
/** | ||
* offsetParent === null is equivalent to display: none being set on the element or one | ||
* of it's parents. In the display: none case the size will become (0, 0) which we do | ||
* not want to propagate. | ||
* | ||
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent | ||
* | ||
* You could use checkVisibility() but at the time of writing it's not supported across | ||
* all Browsers | ||
* | ||
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility | ||
*/ | ||
return; | ||
} | ||
if (!isInDocument(this._element)) { | ||
/** | ||
* since the event is dispatched through requestAnimationFrame there is a small chance | ||
@@ -51,2 +58,1 @@ * the component is no longer attached to the DOM, if that is the case the dimensions | ||
} | ||
//# sourceMappingURL=resizable.js.map |
@@ -1,3 +0,3 @@ | ||
import { IPanel, PanelInitParameters } from '../panel/types'; | ||
import { IView, SplitViewOptions, LayoutPriority } from './splitview'; | ||
import { PanelInitParameters } from '../panel/types'; | ||
import { SplitViewOptions, LayoutPriority } from './splitview'; | ||
import { SplitviewPanel } from './splitviewPanel'; | ||
@@ -13,5 +13,2 @@ import { SplitviewComponent } from './splitviewComponent'; | ||
} | ||
export interface ISerializableView extends IView, IPanel { | ||
init: (params: PanelViewInitParameters) => void; | ||
} | ||
export interface SplitviewComponentOptions extends SplitViewOptions { | ||
@@ -26,4 +23,3 @@ disableAutoResizing?: boolean; | ||
frameworkWrapper?: FrameworkFactory<SplitviewPanel>; | ||
parentElement?: HTMLElement; | ||
parentElement: HTMLElement; | ||
} | ||
//# sourceMappingURL=options.d.ts.map |
export {}; | ||
//# sourceMappingURL=options.js.map |
@@ -21,7 +21,6 @@ import { Event } from '../events'; | ||
readonly styles?: ISplitviewStyles; | ||
readonly isRtl?: boolean; | ||
} | ||
export declare enum LayoutPriority { | ||
Low = "low", | ||
High = "high", | ||
Low = "low",// view is offered space last | ||
High = "high",// view is offered space first | ||
Normal = "normal" | ||
@@ -79,3 +78,3 @@ } | ||
private _orthogonalSize; | ||
private contentSize; | ||
private _contentSize; | ||
private _proportions; | ||
@@ -85,2 +84,3 @@ private proportionalLayout; | ||
private _endSnappingEnabled; | ||
private _disabled; | ||
private readonly _onDidSashEnd; | ||
@@ -92,2 +92,3 @@ readonly onDidSashEnd: Event<void>; | ||
readonly onDidRemoveView: Event<IView>; | ||
get contentSize(): number; | ||
get size(): number; | ||
@@ -98,3 +99,3 @@ set size(value: number); | ||
get length(): number; | ||
get proportions(): number[] | undefined; | ||
get proportions(): (number | undefined)[] | undefined; | ||
get orientation(): Orientation; | ||
@@ -108,2 +109,4 @@ set orientation(value: Orientation); | ||
set endSnappingEnabled(endSnappingEnabled: boolean); | ||
get disabled(): boolean; | ||
set disabled(value: boolean); | ||
constructor(container: HTMLElement, options: SplitViewOptions); | ||
@@ -136,2 +139,1 @@ style(styles?: ISplitviewStyles): void; | ||
} | ||
//# sourceMappingURL=splitview.d.ts.map |
@@ -5,3 +5,3 @@ /*--------------------------------------------------------------------------------------------- | ||
*--------------------------------------------------------------------------------------------*/ | ||
import { removeClasses, addClasses, toggleClass, getElementsByTagName, hasClassInTree, } from '../dom'; | ||
import { removeClasses, addClasses, toggleClass, getElementsByTagName, } from '../dom'; | ||
import { Emitter } from '../events'; | ||
@@ -42,2 +42,5 @@ import { pushToStart, pushToEnd, firstIndex } from '../array'; | ||
export class Splitview { | ||
get contentSize() { | ||
return this._contentSize; | ||
} | ||
get size() { | ||
@@ -102,2 +105,9 @@ return this._size; | ||
} | ||
get disabled() { | ||
return this._disabled; | ||
} | ||
set disabled(value) { | ||
this._disabled = value; | ||
toggleClass(this.element, 'dv-splitview-disabled', value); | ||
} | ||
constructor(container, options) { | ||
@@ -109,6 +119,7 @@ this.container = container; | ||
this._orthogonalSize = 0; | ||
this.contentSize = 0; | ||
this._contentSize = 0; | ||
this._proportions = undefined; | ||
this._startSnappingEnabled = true; | ||
this._endSnappingEnabled = true; | ||
this._disabled = false; | ||
this._onDidSashEnd = new Emitter(); | ||
@@ -124,6 +135,4 @@ this.onDidSashEnd = this._onDidSashEnd.event; | ||
} | ||
const isHorizontal = this._orientation === Orientation.HORIZONTAL; | ||
const isRtl = hasClassInTree(this.element, 'dv-rtl'); | ||
const upIndexes = isHorizontal && isRtl && this.viewItems.length > 1 ? range(index + 1, this.viewItems.length) : range(index, -1); | ||
const downIndexes = isHorizontal && isRtl && this.viewItems.length > 1 ? range(index, -1) : range(index + 1, this.viewItems.length); | ||
const upIndexes = range(index, -1); | ||
const downIndexes = range(index + 1, this.viewItems.length); | ||
// | ||
@@ -204,3 +213,3 @@ if (highPriorityIndexes) { | ||
this._orientation = options.orientation; | ||
this.element = this.createContainer(options.isRtl); | ||
this.element = this.createContainer(); | ||
this.proportionalLayout = | ||
@@ -233,3 +242,3 @@ options.proportionalLayout === undefined | ||
// Initialize content size and proportions for first layout | ||
this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0); | ||
this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0); | ||
this.saveProportions(); | ||
@@ -508,3 +517,3 @@ } | ||
layout(size, orthogonalSize) { | ||
const previousSize = Math.max(this.size, this.contentSize); | ||
const previousSize = Math.max(this.size, this._contentSize); | ||
this.size = size; | ||
@@ -519,6 +528,20 @@ this.orthogonalSize = orthogonalSize; | ||
else { | ||
let total = 0; | ||
for (let i = 0; i < this.viewItems.length; i++) { | ||
const item = this.viewItems[i]; | ||
item.size = clamp(Math.round(this.proportions[i] * size), item.minimumSize, item.maximumSize); | ||
const proportion = this.proportions[i]; | ||
if (typeof proportion === 'number') { | ||
total += proportion; | ||
} | ||
else { | ||
size -= item.size; | ||
} | ||
} | ||
for (let i = 0; i < this.viewItems.length; i++) { | ||
const item = this.viewItems[i]; | ||
const proportion = this.proportions[i]; | ||
if (typeof proportion === 'number' && total > 0) { | ||
item.size = clamp(Math.round((proportion * size) / total), item.minimumSize, item.maximumSize); | ||
} | ||
} | ||
} | ||
@@ -559,9 +582,8 @@ this.distributeEmptySpace(); | ||
saveProportions() { | ||
if (this.proportionalLayout && this.contentSize > 0) { | ||
this._proportions = this.viewItems.map((i) => i.size / this.contentSize); | ||
if (this.proportionalLayout && this._contentSize > 0) { | ||
this._proportions = this.viewItems.map((i) => i.visible ? i.size / this._contentSize : undefined); | ||
} | ||
} | ||
layoutViews() { | ||
this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0); | ||
const isRtl = hasClassInTree(this.element, 'dv-rtl'); | ||
this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0); | ||
let sum = 0; | ||
@@ -575,9 +597,7 @@ const x = []; | ||
if (this._orientation === Orientation.HORIZONTAL) { | ||
this.sashes[i].container.style.left = isRtl ? '' : `${offset}px`; | ||
this.sashes[i].container.style.right = isRtl ? `${offset}px` : ''; | ||
this.sashes[i].container.style.left = `${offset}px`; | ||
this.sashes[i].container.style.top = `0px`; | ||
} | ||
if (this._orientation === Orientation.VERTICAL) { | ||
this.sashes[i].container.style.left = isRtl ? '' : `0px`; | ||
this.sashes[i].container.style.right = isRtl ? `0px` : ''; | ||
this.sashes[i].container.style.left = `0px`; | ||
this.sashes[i].container.style.top = `${offset}px`; | ||
@@ -589,4 +609,3 @@ } | ||
view.container.style.width = `${view.size}px`; | ||
view.container.style.left = isRtl ? '' : (i == 0 ? '0px' : `${x[i - 1]}px`); | ||
view.container.style.right = isRtl ? (i == 0 ? '0px' : `${x[i - 1]}px`) : ''; | ||
view.container.style.left = i == 0 ? '0px' : `${x[i - 1]}px`; | ||
view.container.style.top = ''; | ||
@@ -600,3 +619,2 @@ view.container.style.height = ''; | ||
view.container.style.left = ''; | ||
view.container.style.right = ''; | ||
} | ||
@@ -667,3 +685,3 @@ view.view.layout(view.size, this._orthogonalSize); | ||
collapsesDown[index] && | ||
(position < this.contentSize || this.endSnappingEnabled)) { | ||
(position < this._contentSize || this.endSnappingEnabled)) { | ||
this.updateSash(sash, SashState.MAXIMUM); | ||
@@ -702,3 +720,3 @@ } | ||
} | ||
createContainer(isRtl) { | ||
createContainer() { | ||
const element = document.createElement('div'); | ||
@@ -709,4 +727,2 @@ const orientationClassname = this._orientation === Orientation.HORIZONTAL | ||
element.className = `split-view-container ${orientationClassname}`; | ||
toggleClass(element, 'dv-rtl', isRtl === true); | ||
toggleClass(element, 'dv-ltr', isRtl === false); | ||
return element; | ||
@@ -730,2 +746,1 @@ } | ||
} | ||
//# sourceMappingURL=splitview.js.map |
@@ -102,2 +102,1 @@ import { IDisposable } from '../lifecycle'; | ||
} | ||
//# sourceMappingURL=splitviewComponent.d.ts.map |
@@ -193,3 +193,2 @@ import { CompositeDisposable, MutableDisposable, } from '../lifecycle'; | ||
proportionalLayout: this.options.proportionalLayout, | ||
isRtl: this.options.isRtl, | ||
descriptor: { | ||
@@ -264,2 +263,1 @@ size, | ||
} | ||
//# sourceMappingURL=splitviewComponent.js.map |
@@ -1,2 +0,2 @@ | ||
import { ISerializableView, PanelViewInitParameters } from './options'; | ||
import { PanelViewInitParameters } from './options'; | ||
import { BasePanelView, BasePanelViewExported } from '../gridview/basePanelView'; | ||
@@ -13,3 +13,3 @@ import { SplitviewPanelApiImpl } from '../api/splitviewPanelApi'; | ||
} | ||
export declare abstract class SplitviewPanel extends BasePanelView<SplitviewPanelApiImpl> implements ISerializableView, ISplitviewPanel { | ||
export declare abstract class SplitviewPanel extends BasePanelView<SplitviewPanelApiImpl> implements ISplitviewPanel { | ||
private _evaluatedMinimumSize; | ||
@@ -47,2 +47,1 @@ private _evaluatedMaximumSize; | ||
} | ||
//# sourceMappingURL=splitviewPanel.d.ts.map |
@@ -48,6 +48,6 @@ import { BasePanelView, } from '../gridview/basePanelView'; | ||
this.api.initialize(this); | ||
this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => { | ||
const { isVisible } = event; | ||
this.addDisposables(this._onDidChange, this.api.onDidHiddenChange((event) => { | ||
const { isHidden } = event; | ||
const { accessor } = this._params; | ||
accessor.setVisible(this, isVisible); | ||
accessor.setVisible(this, !isHidden); | ||
}), this.api.onActiveChange(() => { | ||
@@ -110,2 +110,1 @@ const { accessor } = this._params; | ||
} | ||
//# sourceMappingURL=splitviewPanel.js.map |
@@ -26,2 +26,1 @@ import { IDisposable } from '../lifecycle'; | ||
} | ||
//# sourceMappingURL=viewItem.d.ts.map |
@@ -75,2 +75,1 @@ import { clamp } from '../math'; | ||
} | ||
//# sourceMappingURL=viewItem.js.map |
export declare const createCloseButton: () => SVGSVGElement; | ||
export declare const createExpandMoreButton: () => SVGSVGElement; | ||
export declare const createChevronRightButton: () => SVGSVGElement; | ||
//# sourceMappingURL=svg.d.ts.map |
@@ -32,2 +32,1 @@ const createSvgElementFromPath = (params) => { | ||
}); | ||
//# sourceMappingURL=svg.js.map |
export type FunctionOrValue<T> = (() => T) | T; | ||
export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>; | ||
//# sourceMappingURL=types.d.ts.map | ||
export interface Box { | ||
left: number; | ||
top: number; | ||
height: number; | ||
width: number; | ||
} |
export {}; | ||
//# sourceMappingURL=types.js.map |
{ | ||
"name": "dockview-core", | ||
"version": "0.0.0-experimental-c2d65db-20231228", | ||
"version": "0.0.0-experimental-d2baa13-20240225", | ||
"description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support", | ||
@@ -46,5 +46,5 @@ "keywords": [ | ||
"build:bundles": "rollup -c", | ||
"build:cjs": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.json --extendedDiagnostics", | ||
"build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics", | ||
"build:css": "gulp sass", | ||
"build:esm": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.esm.json --extendedDiagnostics", | ||
"build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics", | ||
"build:package": "npm run build:cjs && npm run build:esm && npm run build:css", | ||
@@ -51,0 +51,0 @@ "clean": "rimraf dist/ .build/ .rollup.cache/", |
@@ -11,2 +11,3 @@ <div align="center"> | ||
[![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview) | ||
[![npm](https://img.shields.io/npm/dm/dockview)](https://www.npmjs.com/package/dockview) | ||
[![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) | ||
@@ -19,2 +20,4 @@ [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) | ||
![](packages/docs/static/img/splashscreen.gif) | ||
Please see the website: https://dockview.dev | ||
@@ -24,16 +27,20 @@ | ||
- Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with | ||
dockable and tabular views | ||
- Extensive API support at the component level and view level | ||
- Themable and customizable | ||
- Serialization / deserialization support | ||
- Tabular docking and Drag and Drop support | ||
- Floating groups, customized header bars and tab | ||
- Documentation and examples | ||
- Serialization / deserialization with full layout management | ||
- Support for split-views, grid-views and 'dockable' views | ||
- Themeable and customizable | ||
- Tab and Group docking / Drag n' Drop | ||
- Popout Windows | ||
- Floating Groups | ||
- Extensive API | ||
- Supports Shadow DOMs | ||
- High test coverage | ||
- Documentation website with live examples | ||
- Transparent builds and Code Analysis | ||
- Security at mind - verifed publishing and builds through GitHub Actions | ||
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview-core@latest/ | ||
Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance). | ||
## Quick start | ||
You can install dockview-core from [npm](https://www.npmjs.com/package/dockview-core). | ||
Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview-core). | ||
@@ -40,0 +47,0 @@ ``` |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
11750330
89143
59
277