Comparing version
@@ -1,132 +0,23 @@ | ||
import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/core/splitview'; | ||
import { LeafNode } from './leafNode'; | ||
import { Node } from './types'; | ||
import { Event } from '../events'; | ||
import { IDisposable } from '../lifecycle'; | ||
import { Position } from '../dnd/droptarget'; | ||
export declare function indexInParent(element: HTMLElement): number; | ||
/** | ||
* Find the grid location of a specific DOM element by traversing the parent | ||
* chain and finding each child index on the way. | ||
* | ||
* This will break as soon as DOM structures of the Splitview or Gridview change. | ||
*/ | ||
export declare function getGridLocation(element: HTMLElement): number[]; | ||
export declare function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Position): number[]; | ||
export declare function getDirectionOrientation(direction: Position): Orientation; | ||
export declare function getLocationOrientation(rootOrientation: Orientation, location: number[]): Orientation; | ||
export interface IViewSize { | ||
width?: number; | ||
height?: number; | ||
import * as React from 'react'; | ||
import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core'; | ||
import { PanelCollection, PanelParameters } from '../types'; | ||
export interface GridviewReadyEvent { | ||
api: GridviewApi; | ||
} | ||
export interface IGridView { | ||
readonly onDidChange: Event<IViewSize | undefined>; | ||
readonly element: HTMLElement; | ||
readonly minimumWidth: number; | ||
readonly maximumWidth: number; | ||
readonly minimumHeight: number; | ||
readonly maximumHeight: number; | ||
priority?: LayoutPriority; | ||
layout(width: number, height: number): void; | ||
toJSON(): object; | ||
fromJSON?(json: object): void; | ||
snap?: boolean; | ||
setVisible?(visible: boolean): void; | ||
export interface IGridviewPanelProps<T extends { | ||
[index: string]: any; | ||
} = any> extends PanelParameters<T> { | ||
api: GridviewPanelApi; | ||
containerApi: GridviewApi; | ||
} | ||
export declare const orthogonal: (orientation: Orientation) => Orientation; | ||
export interface GridLeafNode<T extends IGridView> { | ||
readonly view: T; | ||
readonly cachedVisibleSize: number | undefined; | ||
readonly box: { | ||
width: number; | ||
height: number; | ||
}; | ||
export interface IGridviewReactProps { | ||
orientation?: Orientation; | ||
onReady: (event: GridviewReadyEvent) => void; | ||
components: PanelCollection<IGridviewPanelProps>; | ||
hideBorders?: boolean; | ||
className?: string; | ||
proportionalLayout?: boolean; | ||
disableAutoResizing?: boolean; | ||
} | ||
export interface GridBranchNode<T extends IGridView> { | ||
readonly children: GridNode<T>[]; | ||
readonly box: { | ||
width: number; | ||
height: number; | ||
}; | ||
} | ||
export type GridNode<T extends IGridView> = GridLeafNode<T> | GridBranchNode<T>; | ||
export declare function isGridBranchNode<T extends IGridView>(node: GridNode<T>): node is GridBranchNode<T>; | ||
export interface SerializedGridObject<T> { | ||
type: 'leaf' | 'branch'; | ||
data: T | SerializedGridObject<T>[]; | ||
size?: number; | ||
visible?: boolean; | ||
} | ||
export interface ISerializedLeafNode<T = any> { | ||
type: 'leaf'; | ||
data: T; | ||
size: number; | ||
visible?: boolean; | ||
} | ||
export interface ISerializedBranchNode { | ||
type: 'branch'; | ||
data: ISerializedNode[]; | ||
size: number; | ||
} | ||
export type ISerializedNode = ISerializedLeafNode | ISerializedBranchNode; | ||
export interface INodeDescriptor { | ||
node: Node; | ||
visible?: boolean; | ||
} | ||
export interface IViewDeserializer { | ||
fromJSON: (data: ISerializedLeafNode) => IGridView; | ||
} | ||
export declare class Gridview implements IDisposable { | ||
readonly proportionalLayout: boolean; | ||
readonly styles: ISplitviewStyles | undefined; | ||
private _root; | ||
readonly element: HTMLElement; | ||
private disposable; | ||
private readonly _onDidChange; | ||
readonly onDidChange: Event<{ | ||
size?: number; | ||
orthogonalSize?: number; | ||
}>; | ||
get length(): number; | ||
serialize(): { | ||
root: SerializedGridObject<any>; | ||
width: number; | ||
height: number; | ||
orientation: Orientation; | ||
}; | ||
dispose(): void; | ||
clear(): void; | ||
deserialize(json: any, deserializer: IViewDeserializer): void; | ||
private _deserialize; | ||
private _deserializeNode; | ||
get orientation(): Orientation; | ||
set orientation(orientation: Orientation); | ||
private get root(); | ||
private set root(value); | ||
/** | ||
* If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node | ||
* If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node | ||
*/ | ||
insertOrthogonalSplitviewAtRoot(): void; | ||
next(location: number[]): LeafNode; | ||
previous(location: number[]): LeafNode; | ||
getView(): GridBranchNode<IGridView>; | ||
getView(location?: number[]): GridNode<IGridView>; | ||
private _getViews; | ||
private progmaticSelect; | ||
get width(): number; | ||
get height(): number; | ||
get minimumWidth(): number; | ||
get minimumHeight(): number; | ||
get maximumWidth(): number; | ||
get maximumHeight(): number; | ||
constructor(proportionalLayout: boolean, styles: ISplitviewStyles | undefined, orientation: Orientation); | ||
isViewVisible(location: number[]): boolean; | ||
setViewVisible(location: number[], visible: boolean): void; | ||
moveView(parentLocation: number[], from: number, to: number): void; | ||
addView(view: IGridView, size: number | Sizing, location: number[]): void; | ||
remove(view: IGridView, sizing?: Sizing): IGridView; | ||
removeView(location: number[], sizing?: Sizing): IGridView; | ||
layout(width: number, height: number): void; | ||
private getNode; | ||
} | ||
export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>; | ||
//# sourceMappingURL=gridview.d.ts.map |
"use strict"; | ||
/*--------------------------------------------------------------------------------------------- | ||
* Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at: | ||
* https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid | ||
*--------------------------------------------------------------------------------------------*/ | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
var desc = Object.getOwnPropertyDescriptor(m, k); | ||
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { | ||
desc = { enumerable: true, get: function() { return m[k]; } }; | ||
} | ||
Object.defineProperty(o, k2, desc); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { | ||
Object.defineProperty(o, "default", { enumerable: true, value: v }); | ||
}) : function(o, v) { | ||
o["default"] = v; | ||
}); | ||
var __importStar = (this && this.__importStar) || function (mod) { | ||
if (mod && mod.__esModule) return mod; | ||
var result = {}; | ||
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); | ||
__setModuleDefault(result, mod); | ||
return result; | ||
}; | ||
var __read = (this && this.__read) || function (o, n) { | ||
@@ -22,491 +41,58 @@ var m = typeof Symbol === "function" && o[Symbol.iterator]; | ||
}; | ||
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { | ||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { | ||
if (ar || !(i in from)) { | ||
if (!ar) ar = Array.prototype.slice.call(from, 0, i); | ||
ar[i] = from[i]; | ||
} | ||
} | ||
return to.concat(ar || Array.prototype.slice.call(from)); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Gridview = exports.isGridBranchNode = exports.orthogonal = exports.getLocationOrientation = exports.getDirectionOrientation = exports.getRelativeLocation = exports.getGridLocation = exports.indexInParent = void 0; | ||
var splitview_1 = require("../splitview/core/splitview"); | ||
var array_1 = require("../array"); | ||
var leafNode_1 = require("./leafNode"); | ||
var branchNode_1 = require("./branchNode"); | ||
var events_1 = require("../events"); | ||
var lifecycle_1 = require("../lifecycle"); | ||
function findLeaf(candiateNode, last) { | ||
if (candiateNode instanceof leafNode_1.LeafNode) { | ||
return candiateNode; | ||
} | ||
if (candiateNode instanceof branchNode_1.BranchNode) { | ||
return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last); | ||
} | ||
throw new Error('invalid node'); | ||
} | ||
function flipNode(node, size, orthogonalSize) { | ||
if (node instanceof branchNode_1.BranchNode) { | ||
var result = new branchNode_1.BranchNode((0, exports.orthogonal)(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize); | ||
var totalSize = 0; | ||
for (var i = node.children.length - 1; i >= 0; i--) { | ||
var child = node.children[i]; | ||
var childSize = child instanceof branchNode_1.BranchNode ? child.orthogonalSize : child.size; | ||
var newSize = node.size === 0 | ||
? 0 | ||
: Math.round((size * childSize) / node.size); | ||
totalSize += newSize; | ||
// The last view to add should adjust to rounding errors | ||
if (i === 0) { | ||
newSize += size - totalSize; | ||
} | ||
result.addChild(flipNode(child, orthogonalSize, newSize), newSize, 0, true); | ||
exports.GridviewReact = void 0; | ||
var React = __importStar(require("react")); | ||
var dockview_core_1 = require("dockview-core"); | ||
var view_1 = require("./view"); | ||
var react_1 = require("../react"); | ||
exports.GridviewReact = React.forwardRef(function (props, ref) { | ||
var domRef = React.useRef(null); | ||
var gridviewRef = React.useRef(); | ||
var _a = __read((0, react_1.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1]; | ||
React.useImperativeHandle(ref, function () { return domRef.current; }, []); | ||
React.useEffect(function () { | ||
if (!domRef.current) { | ||
return function () { | ||
// noop | ||
}; | ||
} | ||
return result; | ||
} | ||
else { | ||
return new leafNode_1.LeafNode(node.view, (0, exports.orthogonal)(node.orientation), orthogonalSize); | ||
} | ||
} | ||
function indexInParent(element) { | ||
var parentElement = element.parentElement; | ||
if (!parentElement) { | ||
throw new Error('Invalid grid element'); | ||
} | ||
var el = parentElement.firstElementChild; | ||
var index = 0; | ||
while (el !== element && el !== parentElement.lastElementChild && el) { | ||
el = el.nextElementSibling; | ||
index++; | ||
} | ||
return index; | ||
} | ||
exports.indexInParent = indexInParent; | ||
/** | ||
* Find the grid location of a specific DOM element by traversing the parent | ||
* chain and finding each child index on the way. | ||
* | ||
* This will break as soon as DOM structures of the Splitview or Gridview change. | ||
*/ | ||
function getGridLocation(element) { | ||
var parentElement = element.parentElement; | ||
if (!parentElement) { | ||
throw new Error('Invalid grid element'); | ||
} | ||
if (/\bgrid-view\b/.test(parentElement.className)) { | ||
return []; | ||
} | ||
var index = indexInParent(parentElement); | ||
var ancestor = parentElement.parentElement.parentElement.parentElement; | ||
return __spreadArray(__spreadArray([], __read(getGridLocation(ancestor)), false), [index], false); | ||
} | ||
exports.getGridLocation = getGridLocation; | ||
function getRelativeLocation(rootOrientation, location, direction) { | ||
var orientation = getLocationOrientation(rootOrientation, location); | ||
var directionOrientation = getDirectionOrientation(direction); | ||
if (orientation === directionOrientation) { | ||
var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], _index = _a[1]; | ||
var index = _index; | ||
if (direction === 'right' || direction === 'bottom') { | ||
index += 1; | ||
var gridview = new dockview_core_1.GridviewComponent({ | ||
parentElement: domRef.current, | ||
proportionalLayout: typeof props.proportionalLayout === 'boolean' | ||
? props.proportionalLayout | ||
: true, | ||
orientation: props.orientation || dockview_core_1.Orientation.HORIZONTAL, | ||
frameworkComponents: props.components, | ||
frameworkComponentFactory: { | ||
createComponent: function (id, componentId, component) { | ||
return new view_1.ReactGridPanelView(id, componentId, component, { | ||
addPortal: addPortal, | ||
}); | ||
}, | ||
}, | ||
styles: props.hideBorders | ||
? { separatorBorder: 'transparent' } | ||
: undefined, | ||
}); | ||
var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight; | ||
gridview.layout(clientWidth, clientHeight); | ||
if (props.onReady) { | ||
props.onReady({ api: new dockview_core_1.GridviewApi(gridview) }); | ||
} | ||
return __spreadArray(__spreadArray([], __read(rest), false), [index], false); | ||
} | ||
else { | ||
var index = direction === 'right' || direction === 'bottom' ? 1 : 0; | ||
return __spreadArray(__spreadArray([], __read(location), false), [index], false); | ||
} | ||
} | ||
exports.getRelativeLocation = getRelativeLocation; | ||
function getDirectionOrientation(direction) { | ||
return direction === 'top' || direction === 'bottom' | ||
? splitview_1.Orientation.VERTICAL | ||
: splitview_1.Orientation.HORIZONTAL; | ||
} | ||
exports.getDirectionOrientation = getDirectionOrientation; | ||
function getLocationOrientation(rootOrientation, location) { | ||
return location.length % 2 === 0 | ||
? (0, exports.orthogonal)(rootOrientation) | ||
: rootOrientation; | ||
} | ||
exports.getLocationOrientation = getLocationOrientation; | ||
var orthogonal = function (orientation) { | ||
return orientation === splitview_1.Orientation.HORIZONTAL | ||
? splitview_1.Orientation.VERTICAL | ||
: splitview_1.Orientation.HORIZONTAL; | ||
}; | ||
exports.orthogonal = orthogonal; | ||
function isGridBranchNode(node) { | ||
return !!node.children; | ||
} | ||
exports.isGridBranchNode = isGridBranchNode; | ||
var serializeBranchNode = function (node, orientation) { | ||
var size = orientation === splitview_1.Orientation.VERTICAL ? node.box.width : node.box.height; | ||
if (!isGridBranchNode(node)) { | ||
if (typeof node.cachedVisibleSize === 'number') { | ||
return { | ||
type: 'leaf', | ||
data: node.view.toJSON(), | ||
size: node.cachedVisibleSize, | ||
visible: false, | ||
}; | ||
} | ||
return { type: 'leaf', data: node.view.toJSON(), size: size }; | ||
} | ||
return { | ||
type: 'branch', | ||
data: node.children.map(function (c) { | ||
return serializeBranchNode(c, (0, exports.orthogonal)(orientation)); | ||
}), | ||
size: size, | ||
}; | ||
}; | ||
var Gridview = /** @class */ (function () { | ||
function Gridview(proportionalLayout, styles, orientation) { | ||
this.proportionalLayout = proportionalLayout; | ||
this.styles = styles; | ||
this.disposable = new lifecycle_1.MutableDisposable(); | ||
this._onDidChange = new events_1.Emitter(); | ||
this.onDidChange = this._onDidChange.event; | ||
this.element = document.createElement('div'); | ||
this.element.className = 'grid-view'; | ||
this.root = new branchNode_1.BranchNode(orientation, proportionalLayout, styles, 0, 0); | ||
} | ||
Object.defineProperty(Gridview.prototype, "length", { | ||
get: function () { | ||
return this._root ? this._root.children.length : 0; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Gridview.prototype.serialize = function () { | ||
var root = serializeBranchNode(this.getView(), this.orientation); | ||
return { | ||
root: root, | ||
width: this.width, | ||
height: this.height, | ||
orientation: this.orientation, | ||
gridviewRef.current = gridview; | ||
return function () { | ||
gridview.dispose(); | ||
}; | ||
}; | ||
Gridview.prototype.dispose = function () { | ||
this.disposable.dispose(); | ||
this._onDidChange.dispose(); | ||
this.root.dispose(); | ||
this.element.remove(); | ||
}; | ||
Gridview.prototype.clear = function () { | ||
var orientation = this.root.orientation; | ||
this.root = new branchNode_1.BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize); | ||
}; | ||
Gridview.prototype.deserialize = function (json, deserializer) { | ||
var orientation = json.orientation; | ||
var height = orientation === splitview_1.Orientation.VERTICAL ? json.height : json.width; | ||
this._deserialize(json.root, orientation, deserializer, height); | ||
}; | ||
Gridview.prototype._deserialize = function (root, orientation, deserializer, orthogonalSize) { | ||
this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true); | ||
}; | ||
Gridview.prototype._deserializeNode = function (node, orientation, deserializer, orthogonalSize, isRoot) { | ||
var _this = this; | ||
if (isRoot === void 0) { isRoot = false; } | ||
var result; | ||
if (node.type === 'branch') { | ||
var serializedChildren = node.data; | ||
var children = serializedChildren.map(function (serializedChild) { | ||
return { | ||
node: _this._deserializeNode(serializedChild, (0, exports.orthogonal)(orientation), deserializer, node.size), | ||
visible: serializedChild.visible, | ||
}; | ||
}); | ||
// HORIZONTAL => height=orthogonalsize width=size | ||
// VERTICAL => height=size width=orthogonalsize | ||
result = new branchNode_1.BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children); | ||
} | ||
else { | ||
result = new leafNode_1.LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size); | ||
} | ||
return result; | ||
}; | ||
Object.defineProperty(Gridview.prototype, "orientation", { | ||
get: function () { | ||
return this.root.orientation; | ||
}, | ||
set: function (orientation) { | ||
if (this.root.orientation === orientation) { | ||
return; | ||
} | ||
var _a = this.root, size = _a.size, orthogonalSize = _a.orthogonalSize; | ||
this.root = flipNode(this.root, orthogonalSize, size); | ||
this.root.layout(size, orthogonalSize); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Gridview.prototype, "root", { | ||
get: function () { | ||
return this._root; | ||
}, | ||
set: function (root) { | ||
var _this = this; | ||
var oldRoot = this._root; | ||
if (oldRoot) { | ||
oldRoot.dispose(); | ||
this.element.removeChild(oldRoot.element); | ||
} | ||
this._root = root; | ||
this.element.appendChild(this._root.element); | ||
this.disposable.value = this._root.onDidChange(function (e) { | ||
_this._onDidChange.fire(e); | ||
}); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
/** | ||
* If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node | ||
* If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node | ||
*/ | ||
Gridview.prototype.insertOrthogonalSplitviewAtRoot = function () { | ||
var _this = this; | ||
if (!this._root) { | ||
}, []); | ||
React.useEffect(function () { | ||
if (!gridviewRef.current) { | ||
return; | ||
} | ||
var oldRoot = this.root; | ||
oldRoot.element.remove(); | ||
this._root = new branchNode_1.BranchNode((0, exports.orthogonal)(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size); | ||
if (oldRoot.children.length === 1) { | ||
// can remove one level of redundant branching if there is only a single child | ||
var childReference = oldRoot.children[0]; | ||
oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root | ||
oldRoot.dispose(); | ||
this._root.addChild(childReference, splitview_1.Sizing.Distribute, 0); | ||
} | ||
else { | ||
this._root.addChild(oldRoot, splitview_1.Sizing.Distribute, 0); | ||
} | ||
this.element.appendChild(this._root.element); | ||
this.disposable.value = this._root.onDidChange(function (e) { | ||
_this._onDidChange.fire(e); | ||
gridviewRef.current.updateOptions({ | ||
frameworkComponents: props.components, | ||
}); | ||
}; | ||
Gridview.prototype.next = function (location) { | ||
return this.progmaticSelect(location); | ||
}; | ||
Gridview.prototype.previous = function (location) { | ||
return this.progmaticSelect(location, true); | ||
}; | ||
Gridview.prototype.getView = function (location) { | ||
var node = location ? this.getNode(location)[1] : this.root; | ||
return this._getViews(node, this.orientation); | ||
}; | ||
Gridview.prototype._getViews = function (node, orientation, cachedVisibleSize) { | ||
var box = { height: node.height, width: node.width }; | ||
if (node instanceof leafNode_1.LeafNode) { | ||
return { box: box, view: node.view, cachedVisibleSize: cachedVisibleSize }; | ||
} | ||
var children = []; | ||
for (var i = 0; i < node.children.length; i++) { | ||
var child = node.children[i]; | ||
var nodeCachedVisibleSize = node.getChildCachedVisibleSize(i); | ||
children.push(this._getViews(child, (0, exports.orthogonal)(orientation), nodeCachedVisibleSize)); | ||
} | ||
return { box: box, children: children }; | ||
}; | ||
Gridview.prototype.progmaticSelect = function (location, reverse) { | ||
if (reverse === void 0) { reverse = false; } | ||
var _a = __read(this.getNode(location), 2), path = _a[0], node = _a[1]; | ||
if (!(node instanceof leafNode_1.LeafNode)) { | ||
throw new Error('invalid location'); | ||
} | ||
for (var i = path.length - 1; i > -1; i--) { | ||
var n = path[i]; | ||
var l = location[i] || 0; | ||
var canProgressInCurrentLevel = reverse | ||
? l - 1 > -1 | ||
: l + 1 < n.children.length; | ||
if (canProgressInCurrentLevel) { | ||
return findLeaf(n.children[reverse ? l - 1 : l + 1], reverse); | ||
} | ||
} | ||
return findLeaf(this.root, reverse); | ||
}; | ||
Object.defineProperty(Gridview.prototype, "width", { | ||
get: function () { | ||
return this.root.width; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Gridview.prototype, "height", { | ||
get: function () { | ||
return this.root.height; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Gridview.prototype, "minimumWidth", { | ||
get: function () { | ||
return this.root.minimumWidth; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Gridview.prototype, "minimumHeight", { | ||
get: function () { | ||
return this.root.minimumHeight; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Gridview.prototype, "maximumWidth", { | ||
get: function () { | ||
return this.root.maximumHeight; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Gridview.prototype, "maximumHeight", { | ||
get: function () { | ||
return this.root.maximumHeight; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Gridview.prototype.isViewVisible = function (location) { | ||
var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1]; | ||
var _b = __read(this.getNode(rest), 2), parent = _b[1]; | ||
if (!(parent instanceof branchNode_1.BranchNode)) { | ||
throw new Error('Invalid from location'); | ||
} | ||
return parent.isChildVisible(index); | ||
}; | ||
Gridview.prototype.setViewVisible = function (location, visible) { | ||
var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1]; | ||
var _b = __read(this.getNode(rest), 2), parent = _b[1]; | ||
if (!(parent instanceof branchNode_1.BranchNode)) { | ||
throw new Error('Invalid from location'); | ||
} | ||
parent.setChildVisible(index, visible); | ||
}; | ||
Gridview.prototype.moveView = function (parentLocation, from, to) { | ||
var _a = __read(this.getNode(parentLocation), 2), parent = _a[1]; | ||
if (!(parent instanceof branchNode_1.BranchNode)) { | ||
throw new Error('Invalid location'); | ||
} | ||
parent.moveChild(from, to); | ||
}; | ||
Gridview.prototype.addView = function (view, size, location) { | ||
var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1]; | ||
var _b = __read(this.getNode(rest), 2), pathToParent = _b[0], parent = _b[1]; | ||
if (parent instanceof branchNode_1.BranchNode) { | ||
var node = new leafNode_1.LeafNode(view, (0, exports.orthogonal)(parent.orientation), parent.orthogonalSize); | ||
parent.addChild(node, size, index); | ||
} | ||
else { | ||
var _c = __read(__spreadArray([], __read(pathToParent), false).reverse()), grandParent = _c[0], _ = _c.slice(1); | ||
var _d = __read(__spreadArray([], __read(rest), false).reverse()), parentIndex = _d[0], __ = _d.slice(1); | ||
var newSiblingSize = 0; | ||
var newSiblingCachedVisibleSize = grandParent.getChildCachedVisibleSize(parentIndex); | ||
if (typeof newSiblingCachedVisibleSize === 'number') { | ||
newSiblingSize = splitview_1.Sizing.Invisible(newSiblingCachedVisibleSize); | ||
} | ||
grandParent.removeChild(parentIndex); | ||
var newParent = new branchNode_1.BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize); | ||
grandParent.addChild(newParent, parent.size, parentIndex); | ||
var newSibling = new leafNode_1.LeafNode(parent.view, grandParent.orientation, parent.size); | ||
newParent.addChild(newSibling, newSiblingSize, 0); | ||
if (typeof size !== 'number' && size.type === 'split') { | ||
size = { type: 'split', index: 0 }; | ||
} | ||
var node = new leafNode_1.LeafNode(view, grandParent.orientation, parent.size); | ||
newParent.addChild(node, size, index); | ||
} | ||
}; | ||
Gridview.prototype.remove = function (view, sizing) { | ||
var location = getGridLocation(view.element); | ||
return this.removeView(location, sizing); | ||
}; | ||
Gridview.prototype.removeView = function (location, sizing) { | ||
var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1]; | ||
var _b = __read(this.getNode(rest), 2), pathToParent = _b[0], parent = _b[1]; | ||
if (!(parent instanceof branchNode_1.BranchNode)) { | ||
throw new Error('Invalid location'); | ||
} | ||
var node = parent.children[index]; | ||
if (!(node instanceof leafNode_1.LeafNode)) { | ||
throw new Error('Invalid location'); | ||
} | ||
parent.removeChild(index, sizing); | ||
if (parent.children.length === 0) { | ||
return node.view; | ||
} | ||
if (parent.children.length > 1) { | ||
return node.view; | ||
} | ||
var sibling = parent.children[0]; | ||
if (pathToParent.length === 0) { | ||
// parent is root | ||
if (sibling instanceof leafNode_1.LeafNode) { | ||
return node.view; | ||
} | ||
// we must promote sibling to be the new root | ||
parent.removeChild(0, sizing); | ||
this.root = sibling; | ||
return node.view; | ||
} | ||
var _c = __read(__spreadArray([], __read(pathToParent), false).reverse()), grandParent = _c[0], _ = _c.slice(1); | ||
var _d = __read(__spreadArray([], __read(rest), false).reverse()), parentIndex = _d[0], __ = _d.slice(1); | ||
var isSiblingVisible = parent.isChildVisible(0); | ||
parent.removeChild(0, sizing); | ||
var sizes = grandParent.children.map(function (_size, i) { | ||
return grandParent.getChildSize(i); | ||
}); | ||
grandParent.removeChild(parentIndex, sizing); | ||
if (sibling instanceof branchNode_1.BranchNode) { | ||
sizes.splice.apply(sizes, __spreadArray([parentIndex, | ||
1], __read(sibling.children.map(function (c) { return c.size; })), false)); | ||
for (var i = 0; i < sibling.children.length; i++) { | ||
var child = sibling.children[i]; | ||
grandParent.addChild(child, child.size, parentIndex + i); | ||
} | ||
} | ||
else { | ||
var newSibling = new leafNode_1.LeafNode(sibling.view, (0, exports.orthogonal)(sibling.orientation), sibling.size); | ||
var siblingSizing = isSiblingVisible | ||
? sibling.orthogonalSize | ||
: splitview_1.Sizing.Invisible(sibling.orthogonalSize); | ||
grandParent.addChild(newSibling, siblingSizing, parentIndex); | ||
} | ||
for (var i = 0; i < sizes.length; i++) { | ||
grandParent.resizeChild(i, sizes[i]); | ||
} | ||
return node.view; | ||
}; | ||
Gridview.prototype.layout = function (width, height) { | ||
var _a = __read(this.root.orientation === splitview_1.Orientation.HORIZONTAL | ||
? [height, width] | ||
: [width, height], 2), size = _a[0], orthogonalSize = _a[1]; | ||
this.root.layout(size, orthogonalSize); | ||
}; | ||
Gridview.prototype.getNode = function (location, node, path) { | ||
if (node === void 0) { node = this.root; } | ||
if (path === void 0) { path = []; } | ||
if (location.length === 0) { | ||
return [path, node]; | ||
} | ||
if (!(node instanceof branchNode_1.BranchNode)) { | ||
throw new Error('Invalid location'); | ||
} | ||
var _a = __read(location), index = _a[0], rest = _a.slice(1); | ||
if (index < 0 || index >= node.children.length) { | ||
throw new Error('Invalid location'); | ||
} | ||
var child = node.children[index]; | ||
path.push(node); | ||
return this.getNode(rest, child, path); | ||
}; | ||
return Gridview; | ||
}()); | ||
exports.Gridview = Gridview; | ||
}, [props.components]); | ||
return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals)); | ||
}); | ||
exports.GridviewReact.displayName = 'GridviewComponent'; | ||
//# sourceMappingURL=gridview.js.map |
@@ -1,30 +0,11 @@ | ||
export * from './dnd/dataTransfer'; | ||
export * from './splitview/core/splitview'; | ||
export * from 'dockview-core'; | ||
export * from './dockview/dockview'; | ||
export * from './dockview/defaultTab'; | ||
export * from './splitview/splitview'; | ||
export * from './gridview/gridview'; | ||
export { IDockviewHeaderActionsProps } from './dockview/headerActionsRenderer'; | ||
export { IWatermarkPanelProps } from './dockview/reactWatermarkPart'; | ||
export * from './paneview/paneview'; | ||
export * from './gridview/gridview'; | ||
export * from './groupview/groupview'; | ||
export * from './gridview/baseComponentGridview'; | ||
export * from './groupview/panel/content'; | ||
export * from './groupview/tab'; | ||
export * from './groupview/dnd'; | ||
export * from './groupview/types'; | ||
export * from './dockview/options'; | ||
export * from './dockview/dockviewComponent'; | ||
export * from './gridview/gridviewComponent'; | ||
export * from './splitview/splitviewComponent'; | ||
export * from './paneview/paneviewComponent'; | ||
export { PaneviewComponentOptions } from './paneview/options'; | ||
export * from './gridview/gridviewPanel'; | ||
export * from './splitview/splitviewPanel'; | ||
export * from './paneview/paneviewPanel'; | ||
export * from './groupview/types'; | ||
export * from './types'; | ||
export * from './react'; | ||
export { Event } from './events'; | ||
export { IDisposable } from './lifecycle'; | ||
export { Position, positionToDirection, directionToPosition, } from './dnd/droptarget'; | ||
export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi'; | ||
export { SizeEvent, GridviewPanelApi, GridConstraintChangeEvent, } from './api/gridviewPanelApi'; | ||
export { TitleEvent, DockviewPanelApi } from './api/dockviewPanelApi'; | ||
export { PanelSizeEvent, PanelConstraintChangeEvent, SplitviewPanelApi, } from './api/splitviewPanelApi'; | ||
export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi'; | ||
export { CommonApi, SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api'; | ||
//# sourceMappingURL=index.d.ts.map |
@@ -17,33 +17,10 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.DockviewApi = exports.GridviewApi = exports.PaneviewApi = exports.SplitviewApi = exports.directionToPosition = exports.positionToDirection = exports.Event = void 0; | ||
__exportStar(require("./dnd/dataTransfer"), exports); | ||
__exportStar(require("./splitview/core/splitview"), exports); | ||
__exportStar(require("dockview-core"), exports); | ||
__exportStar(require("./dockview/dockview"), exports); | ||
__exportStar(require("./dockview/defaultTab"), exports); | ||
__exportStar(require("./splitview/splitview"), exports); | ||
__exportStar(require("./gridview/gridview"), exports); | ||
__exportStar(require("./paneview/paneview"), exports); | ||
__exportStar(require("./gridview/gridview"), exports); | ||
__exportStar(require("./groupview/groupview"), exports); | ||
__exportStar(require("./gridview/baseComponentGridview"), exports); | ||
__exportStar(require("./groupview/panel/content"), exports); | ||
__exportStar(require("./groupview/tab"), exports); | ||
__exportStar(require("./groupview/dnd"), exports); | ||
__exportStar(require("./groupview/types"), exports); | ||
__exportStar(require("./dockview/options"), exports); | ||
__exportStar(require("./dockview/dockviewComponent"), exports); | ||
__exportStar(require("./gridview/gridviewComponent"), exports); | ||
__exportStar(require("./splitview/splitviewComponent"), exports); | ||
__exportStar(require("./paneview/paneviewComponent"), exports); | ||
__exportStar(require("./gridview/gridviewPanel"), exports); | ||
__exportStar(require("./splitview/splitviewPanel"), exports); | ||
__exportStar(require("./paneview/paneviewPanel"), exports); | ||
__exportStar(require("./groupview/types"), exports); | ||
__exportStar(require("./react"), exports); // TODO: should be conditional on whether user wants the React wrappers | ||
var events_1 = require("./events"); | ||
Object.defineProperty(exports, "Event", { enumerable: true, get: function () { return events_1.Event; } }); | ||
var droptarget_1 = require("./dnd/droptarget"); | ||
Object.defineProperty(exports, "positionToDirection", { enumerable: true, get: function () { return droptarget_1.positionToDirection; } }); | ||
Object.defineProperty(exports, "directionToPosition", { enumerable: true, get: function () { return droptarget_1.directionToPosition; } }); | ||
var component_api_1 = require("./api/component.api"); | ||
Object.defineProperty(exports, "SplitviewApi", { enumerable: true, get: function () { return component_api_1.SplitviewApi; } }); | ||
Object.defineProperty(exports, "PaneviewApi", { enumerable: true, get: function () { return component_api_1.PaneviewApi; } }); | ||
Object.defineProperty(exports, "GridviewApi", { enumerable: true, get: function () { return component_api_1.GridviewApi; } }); | ||
Object.defineProperty(exports, "DockviewApi", { enumerable: true, get: function () { return component_api_1.DockviewApi; } }); | ||
__exportStar(require("./types"), exports); | ||
__exportStar(require("./react"), exports); | ||
//# sourceMappingURL=index.js.map |
@@ -1,40 +0,25 @@ | ||
import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/core/splitview'; | ||
import { CompositeDisposable, IDisposable } from '../lifecycle'; | ||
import { Event } from '../events'; | ||
import { PaneviewPanel } from './paneviewPanel'; | ||
interface PaneItem { | ||
pane: PaneviewPanel; | ||
disposable: IDisposable; | ||
import * as React from 'react'; | ||
import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core'; | ||
import { PanelCollection, PanelParameters } from '../types'; | ||
export interface PaneviewReadyEvent { | ||
api: PaneviewApi; | ||
} | ||
export declare class Paneview extends CompositeDisposable implements IDisposable { | ||
private element; | ||
private splitview; | ||
private paneItems; | ||
private _orientation; | ||
private animationTimer; | ||
private skipAnimation; | ||
private readonly _onDidChange; | ||
readonly onDidChange: Event<void>; | ||
get onDidAddView(): Event<PaneviewPanel>; | ||
get onDidRemoveView(): Event<PaneviewPanel>; | ||
get minimumSize(): number; | ||
get maximumSize(): number; | ||
get orientation(): Orientation; | ||
get size(): number; | ||
get orthogonalSize(): number; | ||
constructor(container: HTMLElement, options: { | ||
orientation: Orientation; | ||
descriptor?: ISplitViewDescriptor; | ||
}); | ||
addPane(pane: PaneviewPanel, size?: number | Sizing, index?: number, skipLayout?: boolean): void; | ||
getViewSize(index: number): number; | ||
getPanes(): PaneviewPanel[]; | ||
removePane(index: number, options?: { | ||
skipDispose: boolean; | ||
}): PaneItem; | ||
moveView(from: number, to: number): void; | ||
layout(size: number, orthogonalSize: number): void; | ||
private setupAnimation; | ||
dispose(): void; | ||
export interface IPaneviewPanelProps<T extends { | ||
[index: string]: any; | ||
} = any> extends PanelParameters<T> { | ||
api: PaneviewPanelApi; | ||
containerApi: PaneviewApi; | ||
title: string; | ||
} | ||
export {}; | ||
export interface IPaneviewReactProps { | ||
onReady: (event: PaneviewReadyEvent) => void; | ||
components: PanelCollection<IPaneviewPanelProps>; | ||
headerComponents?: PanelCollection<IPaneviewPanelProps>; | ||
className?: string; | ||
disableAutoResizing?: boolean; | ||
disableDnd?: boolean; | ||
showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean; | ||
onDidDrop?(event: PaneviewDropEvent): void; | ||
} | ||
export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>; | ||
//# sourceMappingURL=paneview.d.ts.map |
"use strict"; | ||
var __extends = (this && this.__extends) || (function () { | ||
var extendStatics = function (d, b) { | ||
extendStatics = Object.setPrototypeOf || | ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || | ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; | ||
return extendStatics(d, b); | ||
var __assign = (this && this.__assign) || function () { | ||
__assign = Object.assign || function(t) { | ||
for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
s = arguments[i]; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) | ||
t[p] = s[p]; | ||
} | ||
return t; | ||
}; | ||
return function (d, b) { | ||
if (typeof b !== "function" && b !== null) | ||
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); | ||
extendStatics(d, b); | ||
function __() { this.constructor = d; } | ||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); | ||
}; | ||
})(); | ||
return __assign.apply(this, arguments); | ||
}; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
var desc = Object.getOwnPropertyDescriptor(m, k); | ||
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { | ||
desc = { enumerable: true, get: function() { return m[k]; } }; | ||
} | ||
Object.defineProperty(o, k2, desc); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { | ||
Object.defineProperty(o, "default", { enumerable: true, value: v }); | ||
}) : function(o, v) { | ||
o["default"] = v; | ||
}); | ||
var __importStar = (this && this.__importStar) || function (mod) { | ||
if (mod && mod.__esModule) return mod; | ||
var result = {}; | ||
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); | ||
__setModuleDefault(result, mod); | ||
return result; | ||
}; | ||
var __read = (this && this.__read) || function (o, n) { | ||
var m = typeof Symbol === "function" && o[Symbol.iterator]; | ||
if (!m) return o; | ||
var i = m.call(o), r, ar = [], e; | ||
try { | ||
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); | ||
} | ||
catch (error) { e = { error: error }; } | ||
finally { | ||
try { | ||
if (r && !r.done && (m = i["return"])) m.call(i); | ||
} | ||
finally { if (e) throw e.error; } | ||
} | ||
return ar; | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Paneview = void 0; | ||
var splitview_1 = require("../splitview/core/splitview"); | ||
var lifecycle_1 = require("../lifecycle"); | ||
var events_1 = require("../events"); | ||
var dom_1 = require("../dom"); | ||
var Paneview = /** @class */ (function (_super) { | ||
__extends(Paneview, _super); | ||
function Paneview(container, options) { | ||
var _this = this; | ||
var _a; | ||
_this = _super.call(this) || this; | ||
_this.paneItems = []; | ||
_this.skipAnimation = false; | ||
_this._onDidChange = new events_1.Emitter(); | ||
_this.onDidChange = _this._onDidChange.event; | ||
_this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : splitview_1.Orientation.VERTICAL; | ||
_this.element = document.createElement('div'); | ||
_this.element.className = 'pane-container'; | ||
container.appendChild(_this.element); | ||
_this.splitview = new splitview_1.Splitview(_this.element, { | ||
orientation: _this._orientation, | ||
proportionalLayout: false, | ||
descriptor: options.descriptor, | ||
}); | ||
// if we've added views from the descriptor we need to | ||
// add the panes to our Pane array and setup animation | ||
_this.getPanes().forEach(function (pane) { | ||
var disposable = new lifecycle_1.CompositeDisposable(pane.onDidChangeExpansionState(function () { | ||
_this.setupAnimation(); | ||
_this._onDidChange.fire(undefined); | ||
})); | ||
var paneItem = { | ||
pane: pane, | ||
disposable: { | ||
dispose: function () { | ||
disposable.dispose(); | ||
}, | ||
exports.PaneviewReact = void 0; | ||
var React = __importStar(require("react")); | ||
var dockview_core_1 = require("dockview-core"); | ||
var react_1 = require("../react"); | ||
var view_1 = require("./view"); | ||
exports.PaneviewReact = React.forwardRef(function (props, ref) { | ||
var domRef = React.useRef(null); | ||
var paneviewRef = React.useRef(); | ||
var _a = __read((0, react_1.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1]; | ||
React.useImperativeHandle(ref, function () { return domRef.current; }, []); | ||
React.useEffect(function () { | ||
var createComponent = function (id, _componentId, component) { | ||
return new view_1.PanePanelSection(id, component, { | ||
addPortal: addPortal, | ||
}); | ||
}; | ||
var paneview = new dockview_core_1.PaneviewComponent({ | ||
parentElement: domRef.current, | ||
frameworkComponents: props.components, | ||
components: {}, | ||
headerComponents: {}, | ||
disableDnd: props.disableDnd, | ||
headerframeworkComponents: props.headerComponents, | ||
frameworkWrapper: { | ||
header: { | ||
createComponent: createComponent, | ||
}, | ||
}; | ||
_this.paneItems.push(paneItem); | ||
pane.orthogonalSize = _this.splitview.orthogonalSize; | ||
}); | ||
_this.addDisposables(_this._onDidChange, _this.splitview.onDidSashEnd(function () { | ||
_this._onDidChange.fire(undefined); | ||
}), _this.splitview.onDidAddView(function () { | ||
_this._onDidChange.fire(); | ||
}), _this.splitview.onDidRemoveView(function () { | ||
_this._onDidChange.fire(); | ||
})); | ||
return _this; | ||
} | ||
Object.defineProperty(Paneview.prototype, "onDidAddView", { | ||
get: function () { | ||
return this.splitview.onDidAddView; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Paneview.prototype, "onDidRemoveView", { | ||
get: function () { | ||
return this.splitview.onDidRemoveView; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Paneview.prototype, "minimumSize", { | ||
get: function () { | ||
return this.splitview.minimumSize; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Paneview.prototype, "maximumSize", { | ||
get: function () { | ||
return this.splitview.maximumSize; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Paneview.prototype, "orientation", { | ||
get: function () { | ||
return this.splitview.orientation; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Paneview.prototype, "size", { | ||
get: function () { | ||
return this.splitview.size; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Paneview.prototype, "orthogonalSize", { | ||
get: function () { | ||
return this.splitview.orthogonalSize; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Paneview.prototype.addPane = function (pane, size, index, skipLayout) { | ||
var _this = this; | ||
if (index === void 0) { index = this.splitview.length; } | ||
if (skipLayout === void 0) { skipLayout = false; } | ||
var disposable = pane.onDidChangeExpansionState(function () { | ||
_this.setupAnimation(); | ||
_this._onDidChange.fire(undefined); | ||
}); | ||
var paneItem = { | ||
pane: pane, | ||
disposable: { | ||
dispose: function () { | ||
disposable.dispose(); | ||
body: { | ||
createComponent: createComponent, | ||
}, | ||
}, | ||
showDndOverlay: props.showDndOverlay, | ||
}); | ||
var api = new dockview_core_1.PaneviewApi(paneview); | ||
var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight; | ||
paneview.layout(clientWidth, clientHeight); | ||
if (props.onReady) { | ||
props.onReady({ api: api }); | ||
} | ||
paneviewRef.current = paneview; | ||
return function () { | ||
paneview.dispose(); | ||
}; | ||
this.paneItems.splice(index, 0, paneItem); | ||
pane.orthogonalSize = this.splitview.orthogonalSize; | ||
this.splitview.addView(pane, size, index, skipLayout); | ||
}; | ||
Paneview.prototype.getViewSize = function (index) { | ||
return this.splitview.getViewSize(index); | ||
}; | ||
Paneview.prototype.getPanes = function () { | ||
return this.splitview.getViews(); | ||
}; | ||
Paneview.prototype.removePane = function (index, options) { | ||
if (options === void 0) { options = { skipDispose: false }; } | ||
var paneItem = this.paneItems.splice(index, 1)[0]; | ||
this.splitview.removeView(index); | ||
if (!options.skipDispose) { | ||
paneItem.disposable.dispose(); | ||
paneItem.pane.dispose(); | ||
}, []); | ||
React.useEffect(function () { | ||
if (!paneviewRef.current) { | ||
return; | ||
} | ||
return paneItem; | ||
}; | ||
Paneview.prototype.moveView = function (from, to) { | ||
if (from === to) { | ||
paneviewRef.current.updateOptions({ | ||
frameworkComponents: props.components, | ||
}); | ||
}, [props.components]); | ||
React.useEffect(function () { | ||
if (!paneviewRef.current) { | ||
return; | ||
} | ||
var view = this.removePane(from, { skipDispose: true }); | ||
this.skipAnimation = true; | ||
try { | ||
this.addPane(view.pane, view.pane.size, to, false); | ||
paneviewRef.current.updateOptions({ | ||
headerframeworkComponents: props.headerComponents, | ||
}); | ||
}, [props.headerComponents]); | ||
React.useEffect(function () { | ||
if (!paneviewRef.current) { | ||
return function () { | ||
// | ||
}; | ||
} | ||
finally { | ||
this.skipAnimation = false; | ||
} | ||
}; | ||
Paneview.prototype.layout = function (size, orthogonalSize) { | ||
this.splitview.layout(size, orthogonalSize); | ||
}; | ||
Paneview.prototype.setupAnimation = function () { | ||
var _this = this; | ||
if (this.skipAnimation) { | ||
var paneview = paneviewRef.current; | ||
var disposable = paneview.onDidDrop(function (event) { | ||
if (props.onDidDrop) { | ||
props.onDidDrop(__assign(__assign({}, event), { api: new dockview_core_1.PaneviewApi(paneview) })); | ||
} | ||
}); | ||
return function () { | ||
disposable.dispose(); | ||
}; | ||
}, [props.onDidDrop]); | ||
React.useEffect(function () { | ||
if (!paneviewRef.current) { | ||
return; | ||
} | ||
if (this.animationTimer) { | ||
clearTimeout(this.animationTimer); | ||
this.animationTimer = undefined; | ||
} | ||
(0, dom_1.addClasses)(this.element, 'animated'); | ||
this.animationTimer = setTimeout(function () { | ||
_this.animationTimer = undefined; | ||
(0, dom_1.removeClasses)(_this.element, 'animated'); | ||
}, 200); | ||
}; | ||
Paneview.prototype.dispose = function () { | ||
_super.prototype.dispose.call(this); | ||
if (this.animationTimer) { | ||
clearTimeout(this.animationTimer); | ||
this.animationTimer = undefined; | ||
} | ||
this.paneItems.forEach(function (paneItem) { | ||
paneItem.disposable.dispose(); | ||
paneItem.pane.dispose(); | ||
paneviewRef.current.updateOptions({ | ||
showDndOverlay: props.showDndOverlay, | ||
}); | ||
this.paneItems = []; | ||
this.splitview.dispose(); | ||
this.element.remove(); | ||
}; | ||
return Paneview; | ||
}(lifecycle_1.CompositeDisposable)); | ||
exports.Paneview = Paneview; | ||
}, [props.showDndOverlay]); | ||
return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals)); | ||
}); | ||
exports.PaneviewReact.displayName = 'PaneviewComponent'; | ||
//# sourceMappingURL=paneview.js.map |
@@ -1,3 +0,4 @@ | ||
export declare const createCloseButton: () => SVGSVGElement; | ||
export declare const createExpandMoreButton: () => SVGSVGElement; | ||
export declare const createChevronRightButton: () => SVGSVGElement; | ||
import * as React from 'react'; | ||
export declare const CloseButton: () => React.JSX.Element; | ||
export declare const ExpandMore: () => React.JSX.Element; | ||
//# sourceMappingURL=svg.d.ts.map |
"use strict"; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
var desc = Object.getOwnPropertyDescriptor(m, k); | ||
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { | ||
desc = { enumerable: true, get: function() { return m[k]; } }; | ||
} | ||
Object.defineProperty(o, k2, desc); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { | ||
Object.defineProperty(o, "default", { enumerable: true, value: v }); | ||
}) : function(o, v) { | ||
o["default"] = v; | ||
}); | ||
var __importStar = (this && this.__importStar) || function (mod) { | ||
if (mod && mod.__esModule) return mod; | ||
var result = {}; | ||
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); | ||
__setModuleDefault(result, mod); | ||
return result; | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.createChevronRightButton = exports.createExpandMoreButton = exports.createCloseButton = void 0; | ||
var createSvgElementFromPath = function (params) { | ||
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | ||
svg.setAttributeNS(null, 'height', params.height); | ||
svg.setAttributeNS(null, 'width', params.width); | ||
svg.setAttributeNS(null, 'viewBox', params.viewbox); | ||
svg.setAttributeNS(null, 'aria-hidden', 'false'); | ||
svg.setAttributeNS(null, 'focusable', 'false'); | ||
svg.classList.add('dockview-svg'); | ||
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); | ||
path.setAttributeNS(null, 'd', params.path); | ||
svg.appendChild(path); | ||
return svg; | ||
exports.ExpandMore = exports.CloseButton = void 0; | ||
var React = __importStar(require("react")); | ||
var CloseButton = function () { return (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" }, | ||
React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" }))); }; | ||
exports.CloseButton = CloseButton; | ||
var ExpandMore = function () { | ||
return (React.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 15", "aria-hidden": 'false', focusable: false, className: "dockview-svg" }, | ||
React.createElement("path", { d: "M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z" }))); | ||
}; | ||
var createCloseButton = function () { | ||
return createSvgElementFromPath({ | ||
width: '11', | ||
height: '11', | ||
viewbox: '0 0 28 28', | ||
path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z', | ||
}); | ||
}; | ||
exports.createCloseButton = createCloseButton; | ||
var createExpandMoreButton = function () { | ||
return createSvgElementFromPath({ | ||
width: '11', | ||
height: '11', | ||
viewbox: '0 0 24 15', | ||
path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z', | ||
}); | ||
}; | ||
exports.createExpandMoreButton = createExpandMoreButton; | ||
var createChevronRightButton = function () { | ||
return createSvgElementFromPath({ | ||
width: '11', | ||
height: '11', | ||
viewbox: '0 0 15 25', | ||
path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z', | ||
}); | ||
}; | ||
exports.createChevronRightButton = createChevronRightButton; | ||
exports.ExpandMore = ExpandMore; | ||
//# sourceMappingURL=svg.js.map |
@@ -1,8 +0,9 @@ | ||
export interface Constructor<T> { | ||
new (): T; | ||
import * as React from 'react'; | ||
import { Parameters } from 'dockview-core'; | ||
export interface PanelCollection<T extends object> { | ||
[name: string]: React.FunctionComponent<T>; | ||
} | ||
export interface FrameworkFactory<T> { | ||
createComponent: (id: string, componentId: string, component: any) => T; | ||
export interface PanelParameters<T extends {} = Parameters> { | ||
params: T; | ||
} | ||
export type FunctionOrValue<T> = (() => T) | T; | ||
export declare function isBooleanValue(value: any): value is boolean; | ||
//# sourceMappingURL=types.d.ts.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.isBooleanValue = void 0; | ||
function isBooleanValue(value) { | ||
return typeof value === 'boolean'; | ||
} | ||
exports.isBooleanValue = isBooleanValue; | ||
//# sourceMappingURL=types.js.map |
@@ -1,132 +0,23 @@ | ||
import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/core/splitview'; | ||
import { LeafNode } from './leafNode'; | ||
import { Node } from './types'; | ||
import { Event } from '../events'; | ||
import { IDisposable } from '../lifecycle'; | ||
import { Position } from '../dnd/droptarget'; | ||
export declare function indexInParent(element: HTMLElement): number; | ||
/** | ||
* Find the grid location of a specific DOM element by traversing the parent | ||
* chain and finding each child index on the way. | ||
* | ||
* This will break as soon as DOM structures of the Splitview or Gridview change. | ||
*/ | ||
export declare function getGridLocation(element: HTMLElement): number[]; | ||
export declare function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Position): number[]; | ||
export declare function getDirectionOrientation(direction: Position): Orientation; | ||
export declare function getLocationOrientation(rootOrientation: Orientation, location: number[]): Orientation; | ||
export interface IViewSize { | ||
width?: number; | ||
height?: number; | ||
import * as React from 'react'; | ||
import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core'; | ||
import { PanelCollection, PanelParameters } from '../types'; | ||
export interface GridviewReadyEvent { | ||
api: GridviewApi; | ||
} | ||
export interface IGridView { | ||
readonly onDidChange: Event<IViewSize | undefined>; | ||
readonly element: HTMLElement; | ||
readonly minimumWidth: number; | ||
readonly maximumWidth: number; | ||
readonly minimumHeight: number; | ||
readonly maximumHeight: number; | ||
priority?: LayoutPriority; | ||
layout(width: number, height: number): void; | ||
toJSON(): object; | ||
fromJSON?(json: object): void; | ||
snap?: boolean; | ||
setVisible?(visible: boolean): void; | ||
export interface IGridviewPanelProps<T extends { | ||
[index: string]: any; | ||
} = any> extends PanelParameters<T> { | ||
api: GridviewPanelApi; | ||
containerApi: GridviewApi; | ||
} | ||
export declare const orthogonal: (orientation: Orientation) => Orientation; | ||
export interface GridLeafNode<T extends IGridView> { | ||
readonly view: T; | ||
readonly cachedVisibleSize: number | undefined; | ||
readonly box: { | ||
width: number; | ||
height: number; | ||
}; | ||
export interface IGridviewReactProps { | ||
orientation?: Orientation; | ||
onReady: (event: GridviewReadyEvent) => void; | ||
components: PanelCollection<IGridviewPanelProps>; | ||
hideBorders?: boolean; | ||
className?: string; | ||
proportionalLayout?: boolean; | ||
disableAutoResizing?: boolean; | ||
} | ||
export interface GridBranchNode<T extends IGridView> { | ||
readonly children: GridNode<T>[]; | ||
readonly box: { | ||
width: number; | ||
height: number; | ||
}; | ||
} | ||
export type GridNode<T extends IGridView> = GridLeafNode<T> | GridBranchNode<T>; | ||
export declare function isGridBranchNode<T extends IGridView>(node: GridNode<T>): node is GridBranchNode<T>; | ||
export interface SerializedGridObject<T> { | ||
type: 'leaf' | 'branch'; | ||
data: T | SerializedGridObject<T>[]; | ||
size?: number; | ||
visible?: boolean; | ||
} | ||
export interface ISerializedLeafNode<T = any> { | ||
type: 'leaf'; | ||
data: T; | ||
size: number; | ||
visible?: boolean; | ||
} | ||
export interface ISerializedBranchNode { | ||
type: 'branch'; | ||
data: ISerializedNode[]; | ||
size: number; | ||
} | ||
export type ISerializedNode = ISerializedLeafNode | ISerializedBranchNode; | ||
export interface INodeDescriptor { | ||
node: Node; | ||
visible?: boolean; | ||
} | ||
export interface IViewDeserializer { | ||
fromJSON: (data: ISerializedLeafNode) => IGridView; | ||
} | ||
export declare class Gridview implements IDisposable { | ||
readonly proportionalLayout: boolean; | ||
readonly styles: ISplitviewStyles | undefined; | ||
private _root; | ||
readonly element: HTMLElement; | ||
private disposable; | ||
private readonly _onDidChange; | ||
readonly onDidChange: Event<{ | ||
size?: number; | ||
orthogonalSize?: number; | ||
}>; | ||
get length(): number; | ||
serialize(): { | ||
root: SerializedGridObject<any>; | ||
width: number; | ||
height: number; | ||
orientation: Orientation; | ||
}; | ||
dispose(): void; | ||
clear(): void; | ||
deserialize(json: any, deserializer: IViewDeserializer): void; | ||
private _deserialize; | ||
private _deserializeNode; | ||
get orientation(): Orientation; | ||
set orientation(orientation: Orientation); | ||
private get root(); | ||
private set root(value); | ||
/** | ||
* If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node | ||
* If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node | ||
*/ | ||
insertOrthogonalSplitviewAtRoot(): void; | ||
next(location: number[]): LeafNode; | ||
previous(location: number[]): LeafNode; | ||
getView(): GridBranchNode<IGridView>; | ||
getView(location?: number[]): GridNode<IGridView>; | ||
private _getViews; | ||
private progmaticSelect; | ||
get width(): number; | ||
get height(): number; | ||
get minimumWidth(): number; | ||
get minimumHeight(): number; | ||
get maximumWidth(): number; | ||
get maximumHeight(): number; | ||
constructor(proportionalLayout: boolean, styles: ISplitviewStyles | undefined, orientation: Orientation); | ||
isViewVisible(location: number[]): boolean; | ||
setViewVisible(location: number[], visible: boolean): void; | ||
moveView(parentLocation: number[], from: number, to: number): void; | ||
addView(view: IGridView, size: number | Sizing, location: number[]): void; | ||
remove(view: IGridView, sizing?: Sizing): IGridView; | ||
removeView(location: number[], sizing?: Sizing): IGridView; | ||
layout(width: number, height: number): void; | ||
private getNode; | ||
} | ||
export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>; | ||
//# sourceMappingURL=gridview.d.ts.map |
@@ -1,423 +0,55 @@ | ||
/*--------------------------------------------------------------------------------------------- | ||
* Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at: | ||
* https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid | ||
*--------------------------------------------------------------------------------------------*/ | ||
import { Orientation, Sizing, } from '../splitview/core/splitview'; | ||
import { tail } from '../array'; | ||
import { LeafNode } from './leafNode'; | ||
import { BranchNode } from './branchNode'; | ||
import { Emitter } from '../events'; | ||
import { MutableDisposable } from '../lifecycle'; | ||
function findLeaf(candiateNode, last) { | ||
if (candiateNode instanceof LeafNode) { | ||
return candiateNode; | ||
} | ||
if (candiateNode instanceof BranchNode) { | ||
return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last); | ||
} | ||
throw new Error('invalid node'); | ||
} | ||
function flipNode(node, size, orthogonalSize) { | ||
if (node instanceof BranchNode) { | ||
const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize); | ||
let totalSize = 0; | ||
for (let i = node.children.length - 1; i >= 0; i--) { | ||
const child = node.children[i]; | ||
const childSize = child instanceof BranchNode ? child.orthogonalSize : child.size; | ||
let newSize = node.size === 0 | ||
? 0 | ||
: Math.round((size * childSize) / node.size); | ||
totalSize += newSize; | ||
// The last view to add should adjust to rounding errors | ||
if (i === 0) { | ||
newSize += size - totalSize; | ||
} | ||
result.addChild(flipNode(child, orthogonalSize, newSize), newSize, 0, true); | ||
import * as React from 'react'; | ||
import { GridviewComponent, Orientation, GridviewApi, } from 'dockview-core'; | ||
import { ReactGridPanelView } from './view'; | ||
import { usePortalsLifecycle } from '../react'; | ||
export const GridviewReact = React.forwardRef((props, ref) => { | ||
const domRef = React.useRef(null); | ||
const gridviewRef = React.useRef(); | ||
const [portals, addPortal] = usePortalsLifecycle(); | ||
React.useImperativeHandle(ref, () => domRef.current, []); | ||
React.useEffect(() => { | ||
if (!domRef.current) { | ||
return () => { | ||
// noop | ||
}; | ||
} | ||
return result; | ||
} | ||
else { | ||
return new LeafNode(node.view, orthogonal(node.orientation), orthogonalSize); | ||
} | ||
} | ||
export function indexInParent(element) { | ||
const parentElement = element.parentElement; | ||
if (!parentElement) { | ||
throw new Error('Invalid grid element'); | ||
} | ||
let el = parentElement.firstElementChild; | ||
let index = 0; | ||
while (el !== element && el !== parentElement.lastElementChild && el) { | ||
el = el.nextElementSibling; | ||
index++; | ||
} | ||
return index; | ||
} | ||
/** | ||
* Find the grid location of a specific DOM element by traversing the parent | ||
* chain and finding each child index on the way. | ||
* | ||
* This will break as soon as DOM structures of the Splitview or Gridview change. | ||
*/ | ||
export function getGridLocation(element) { | ||
const parentElement = element.parentElement; | ||
if (!parentElement) { | ||
throw new Error('Invalid grid element'); | ||
} | ||
if (/\bgrid-view\b/.test(parentElement.className)) { | ||
return []; | ||
} | ||
const index = indexInParent(parentElement); | ||
const ancestor = parentElement.parentElement.parentElement.parentElement; | ||
return [...getGridLocation(ancestor), index]; | ||
} | ||
export function getRelativeLocation(rootOrientation, location, direction) { | ||
const orientation = getLocationOrientation(rootOrientation, location); | ||
const directionOrientation = getDirectionOrientation(direction); | ||
if (orientation === directionOrientation) { | ||
const [rest, _index] = tail(location); | ||
let index = _index; | ||
if (direction === 'right' || direction === 'bottom') { | ||
index += 1; | ||
const gridview = new GridviewComponent({ | ||
parentElement: domRef.current, | ||
proportionalLayout: typeof props.proportionalLayout === 'boolean' | ||
? props.proportionalLayout | ||
: true, | ||
orientation: props.orientation || Orientation.HORIZONTAL, | ||
frameworkComponents: props.components, | ||
frameworkComponentFactory: { | ||
createComponent: (id, componentId, component) => { | ||
return new ReactGridPanelView(id, componentId, component, { | ||
addPortal, | ||
}); | ||
}, | ||
}, | ||
styles: props.hideBorders | ||
? { separatorBorder: 'transparent' } | ||
: undefined, | ||
}); | ||
const { clientWidth, clientHeight } = domRef.current; | ||
gridview.layout(clientWidth, clientHeight); | ||
if (props.onReady) { | ||
props.onReady({ api: new GridviewApi(gridview) }); | ||
} | ||
return [...rest, index]; | ||
} | ||
else { | ||
const index = direction === 'right' || direction === 'bottom' ? 1 : 0; | ||
return [...location, index]; | ||
} | ||
} | ||
export function getDirectionOrientation(direction) { | ||
return direction === 'top' || direction === 'bottom' | ||
? Orientation.VERTICAL | ||
: Orientation.HORIZONTAL; | ||
} | ||
export function getLocationOrientation(rootOrientation, location) { | ||
return location.length % 2 === 0 | ||
? orthogonal(rootOrientation) | ||
: rootOrientation; | ||
} | ||
export const orthogonal = (orientation) => orientation === Orientation.HORIZONTAL | ||
? Orientation.VERTICAL | ||
: Orientation.HORIZONTAL; | ||
export function isGridBranchNode(node) { | ||
return !!node.children; | ||
} | ||
const serializeBranchNode = (node, orientation) => { | ||
const size = orientation === Orientation.VERTICAL ? node.box.width : node.box.height; | ||
if (!isGridBranchNode(node)) { | ||
if (typeof node.cachedVisibleSize === 'number') { | ||
return { | ||
type: 'leaf', | ||
data: node.view.toJSON(), | ||
size: node.cachedVisibleSize, | ||
visible: false, | ||
}; | ||
} | ||
return { type: 'leaf', data: node.view.toJSON(), size }; | ||
} | ||
return { | ||
type: 'branch', | ||
data: node.children.map((c) => serializeBranchNode(c, orthogonal(orientation))), | ||
size, | ||
}; | ||
}; | ||
export class Gridview { | ||
get length() { | ||
return this._root ? this._root.children.length : 0; | ||
} | ||
serialize() { | ||
const root = serializeBranchNode(this.getView(), this.orientation); | ||
return { | ||
root, | ||
width: this.width, | ||
height: this.height, | ||
orientation: this.orientation, | ||
gridviewRef.current = gridview; | ||
return () => { | ||
gridview.dispose(); | ||
}; | ||
} | ||
dispose() { | ||
this.disposable.dispose(); | ||
this._onDidChange.dispose(); | ||
this.root.dispose(); | ||
this.element.remove(); | ||
} | ||
clear() { | ||
const orientation = this.root.orientation; | ||
this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize); | ||
} | ||
deserialize(json, deserializer) { | ||
const orientation = json.orientation; | ||
const height = orientation === Orientation.VERTICAL ? json.height : json.width; | ||
this._deserialize(json.root, orientation, deserializer, height); | ||
} | ||
_deserialize(root, orientation, deserializer, orthogonalSize) { | ||
this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true); | ||
} | ||
_deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) { | ||
let result; | ||
if (node.type === 'branch') { | ||
const serializedChildren = node.data; | ||
const children = serializedChildren.map((serializedChild) => { | ||
return { | ||
node: this._deserializeNode(serializedChild, orthogonal(orientation), deserializer, node.size), | ||
visible: serializedChild.visible, | ||
}; | ||
}); | ||
// HORIZONTAL => height=orthogonalsize width=size | ||
// VERTICAL => height=size width=orthogonalsize | ||
result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children); | ||
} | ||
else { | ||
result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size); | ||
} | ||
return result; | ||
} | ||
get orientation() { | ||
return this.root.orientation; | ||
} | ||
set orientation(orientation) { | ||
if (this.root.orientation === orientation) { | ||
}, []); | ||
React.useEffect(() => { | ||
if (!gridviewRef.current) { | ||
return; | ||
} | ||
const { size, orthogonalSize } = this.root; | ||
this.root = flipNode(this.root, orthogonalSize, size); | ||
this.root.layout(size, orthogonalSize); | ||
} | ||
get root() { | ||
return this._root; | ||
} | ||
set root(root) { | ||
const oldRoot = this._root; | ||
if (oldRoot) { | ||
oldRoot.dispose(); | ||
this.element.removeChild(oldRoot.element); | ||
} | ||
this._root = root; | ||
this.element.appendChild(this._root.element); | ||
this.disposable.value = this._root.onDidChange((e) => { | ||
this._onDidChange.fire(e); | ||
gridviewRef.current.updateOptions({ | ||
frameworkComponents: props.components, | ||
}); | ||
} | ||
/** | ||
* If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node | ||
* If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node | ||
*/ | ||
insertOrthogonalSplitviewAtRoot() { | ||
if (!this._root) { | ||
return; | ||
} | ||
const oldRoot = this.root; | ||
oldRoot.element.remove(); | ||
this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size); | ||
if (oldRoot.children.length === 1) { | ||
// can remove one level of redundant branching if there is only a single child | ||
const childReference = oldRoot.children[0]; | ||
oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root | ||
oldRoot.dispose(); | ||
this._root.addChild(childReference, Sizing.Distribute, 0); | ||
} | ||
else { | ||
this._root.addChild(oldRoot, Sizing.Distribute, 0); | ||
} | ||
this.element.appendChild(this._root.element); | ||
this.disposable.value = this._root.onDidChange((e) => { | ||
this._onDidChange.fire(e); | ||
}); | ||
} | ||
next(location) { | ||
return this.progmaticSelect(location); | ||
} | ||
previous(location) { | ||
return this.progmaticSelect(location, true); | ||
} | ||
getView(location) { | ||
const node = location ? this.getNode(location)[1] : this.root; | ||
return this._getViews(node, this.orientation); | ||
} | ||
_getViews(node, orientation, cachedVisibleSize) { | ||
const box = { height: node.height, width: node.width }; | ||
if (node instanceof LeafNode) { | ||
return { box, view: node.view, cachedVisibleSize }; | ||
} | ||
const children = []; | ||
for (let i = 0; i < node.children.length; i++) { | ||
const child = node.children[i]; | ||
const nodeCachedVisibleSize = node.getChildCachedVisibleSize(i); | ||
children.push(this._getViews(child, orthogonal(orientation), nodeCachedVisibleSize)); | ||
} | ||
return { box, children }; | ||
} | ||
progmaticSelect(location, reverse = false) { | ||
const [path, node] = this.getNode(location); | ||
if (!(node instanceof LeafNode)) { | ||
throw new Error('invalid location'); | ||
} | ||
for (let i = path.length - 1; i > -1; i--) { | ||
const n = path[i]; | ||
const l = location[i] || 0; | ||
const canProgressInCurrentLevel = reverse | ||
? l - 1 > -1 | ||
: l + 1 < n.children.length; | ||
if (canProgressInCurrentLevel) { | ||
return findLeaf(n.children[reverse ? l - 1 : l + 1], reverse); | ||
} | ||
} | ||
return findLeaf(this.root, reverse); | ||
} | ||
get width() { | ||
return this.root.width; | ||
} | ||
get height() { | ||
return this.root.height; | ||
} | ||
get minimumWidth() { | ||
return this.root.minimumWidth; | ||
} | ||
get minimumHeight() { | ||
return this.root.minimumHeight; | ||
} | ||
get maximumWidth() { | ||
return this.root.maximumHeight; | ||
} | ||
get maximumHeight() { | ||
return this.root.maximumHeight; | ||
} | ||
constructor(proportionalLayout, styles, orientation) { | ||
this.proportionalLayout = proportionalLayout; | ||
this.styles = styles; | ||
this.disposable = new MutableDisposable(); | ||
this._onDidChange = new Emitter(); | ||
this.onDidChange = this._onDidChange.event; | ||
this.element = document.createElement('div'); | ||
this.element.className = 'grid-view'; | ||
this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0); | ||
} | ||
isViewVisible(location) { | ||
const [rest, index] = tail(location); | ||
const [, parent] = this.getNode(rest); | ||
if (!(parent instanceof BranchNode)) { | ||
throw new Error('Invalid from location'); | ||
} | ||
return parent.isChildVisible(index); | ||
} | ||
setViewVisible(location, visible) { | ||
const [rest, index] = tail(location); | ||
const [, parent] = this.getNode(rest); | ||
if (!(parent instanceof BranchNode)) { | ||
throw new Error('Invalid from location'); | ||
} | ||
parent.setChildVisible(index, visible); | ||
} | ||
moveView(parentLocation, from, to) { | ||
const [, parent] = this.getNode(parentLocation); | ||
if (!(parent instanceof BranchNode)) { | ||
throw new Error('Invalid location'); | ||
} | ||
parent.moveChild(from, to); | ||
} | ||
addView(view, size, location) { | ||
const [rest, index] = tail(location); | ||
const [pathToParent, parent] = this.getNode(rest); | ||
if (parent instanceof BranchNode) { | ||
const node = new LeafNode(view, orthogonal(parent.orientation), parent.orthogonalSize); | ||
parent.addChild(node, size, index); | ||
} | ||
else { | ||
const [grandParent, ..._] = [...pathToParent].reverse(); | ||
const [parentIndex, ...__] = [...rest].reverse(); | ||
let newSiblingSize = 0; | ||
const newSiblingCachedVisibleSize = grandParent.getChildCachedVisibleSize(parentIndex); | ||
if (typeof newSiblingCachedVisibleSize === 'number') { | ||
newSiblingSize = Sizing.Invisible(newSiblingCachedVisibleSize); | ||
} | ||
grandParent.removeChild(parentIndex); | ||
const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize); | ||
grandParent.addChild(newParent, parent.size, parentIndex); | ||
const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size); | ||
newParent.addChild(newSibling, newSiblingSize, 0); | ||
if (typeof size !== 'number' && size.type === 'split') { | ||
size = { type: 'split', index: 0 }; | ||
} | ||
const node = new LeafNode(view, grandParent.orientation, parent.size); | ||
newParent.addChild(node, size, index); | ||
} | ||
} | ||
remove(view, sizing) { | ||
const location = getGridLocation(view.element); | ||
return this.removeView(location, sizing); | ||
} | ||
removeView(location, sizing) { | ||
const [rest, index] = tail(location); | ||
const [pathToParent, parent] = this.getNode(rest); | ||
if (!(parent instanceof BranchNode)) { | ||
throw new Error('Invalid location'); | ||
} | ||
const node = parent.children[index]; | ||
if (!(node instanceof LeafNode)) { | ||
throw new Error('Invalid location'); | ||
} | ||
parent.removeChild(index, sizing); | ||
if (parent.children.length === 0) { | ||
return node.view; | ||
} | ||
if (parent.children.length > 1) { | ||
return node.view; | ||
} | ||
const sibling = parent.children[0]; | ||
if (pathToParent.length === 0) { | ||
// parent is root | ||
if (sibling instanceof LeafNode) { | ||
return node.view; | ||
} | ||
// we must promote sibling to be the new root | ||
parent.removeChild(0, sizing); | ||
this.root = sibling; | ||
return node.view; | ||
} | ||
const [grandParent, ..._] = [...pathToParent].reverse(); | ||
const [parentIndex, ...__] = [...rest].reverse(); | ||
const isSiblingVisible = parent.isChildVisible(0); | ||
parent.removeChild(0, sizing); | ||
const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i)); | ||
grandParent.removeChild(parentIndex, sizing); | ||
if (sibling instanceof BranchNode) { | ||
sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size)); | ||
for (let i = 0; i < sibling.children.length; i++) { | ||
const child = sibling.children[i]; | ||
grandParent.addChild(child, child.size, parentIndex + i); | ||
} | ||
} | ||
else { | ||
const newSibling = new LeafNode(sibling.view, orthogonal(sibling.orientation), sibling.size); | ||
const siblingSizing = isSiblingVisible | ||
? sibling.orthogonalSize | ||
: Sizing.Invisible(sibling.orthogonalSize); | ||
grandParent.addChild(newSibling, siblingSizing, parentIndex); | ||
} | ||
for (let i = 0; i < sizes.length; i++) { | ||
grandParent.resizeChild(i, sizes[i]); | ||
} | ||
return node.view; | ||
} | ||
layout(width, height) { | ||
const [size, orthogonalSize] = this.root.orientation === Orientation.HORIZONTAL | ||
? [height, width] | ||
: [width, height]; | ||
this.root.layout(size, orthogonalSize); | ||
} | ||
getNode(location, node = this.root, path = []) { | ||
if (location.length === 0) { | ||
return [path, node]; | ||
} | ||
if (!(node instanceof BranchNode)) { | ||
throw new Error('Invalid location'); | ||
} | ||
const [index, ...rest] = location; | ||
if (index < 0 || index >= node.children.length) { | ||
throw new Error('Invalid location'); | ||
} | ||
const child = node.children[index]; | ||
path.push(node); | ||
return this.getNode(rest, child, path); | ||
} | ||
} | ||
}, [props.components]); | ||
return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals)); | ||
}); | ||
GridviewReact.displayName = 'GridviewComponent'; | ||
//# sourceMappingURL=gridview.js.map |
@@ -1,30 +0,11 @@ | ||
export * from './dnd/dataTransfer'; | ||
export * from './splitview/core/splitview'; | ||
export * from 'dockview-core'; | ||
export * from './dockview/dockview'; | ||
export * from './dockview/defaultTab'; | ||
export * from './splitview/splitview'; | ||
export * from './gridview/gridview'; | ||
export { IDockviewHeaderActionsProps } from './dockview/headerActionsRenderer'; | ||
export { IWatermarkPanelProps } from './dockview/reactWatermarkPart'; | ||
export * from './paneview/paneview'; | ||
export * from './gridview/gridview'; | ||
export * from './groupview/groupview'; | ||
export * from './gridview/baseComponentGridview'; | ||
export * from './groupview/panel/content'; | ||
export * from './groupview/tab'; | ||
export * from './groupview/dnd'; | ||
export * from './groupview/types'; | ||
export * from './dockview/options'; | ||
export * from './dockview/dockviewComponent'; | ||
export * from './gridview/gridviewComponent'; | ||
export * from './splitview/splitviewComponent'; | ||
export * from './paneview/paneviewComponent'; | ||
export { PaneviewComponentOptions } from './paneview/options'; | ||
export * from './gridview/gridviewPanel'; | ||
export * from './splitview/splitviewPanel'; | ||
export * from './paneview/paneviewPanel'; | ||
export * from './groupview/types'; | ||
export * from './types'; | ||
export * from './react'; | ||
export { Event } from './events'; | ||
export { IDisposable } from './lifecycle'; | ||
export { Position, positionToDirection, directionToPosition, } from './dnd/droptarget'; | ||
export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi'; | ||
export { SizeEvent, GridviewPanelApi, GridConstraintChangeEvent, } from './api/gridviewPanelApi'; | ||
export { TitleEvent, DockviewPanelApi } from './api/dockviewPanelApi'; | ||
export { PanelSizeEvent, PanelConstraintChangeEvent, SplitviewPanelApi, } from './api/splitviewPanelApi'; | ||
export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi'; | ||
export { CommonApi, SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api'; | ||
//# sourceMappingURL=index.d.ts.map |
@@ -1,23 +0,9 @@ | ||
export * from './dnd/dataTransfer'; | ||
export * from './splitview/core/splitview'; | ||
export * from 'dockview-core'; | ||
export * from './dockview/dockview'; | ||
export * from './dockview/defaultTab'; | ||
export * from './splitview/splitview'; | ||
export * from './gridview/gridview'; | ||
export * from './paneview/paneview'; | ||
export * from './gridview/gridview'; | ||
export * from './groupview/groupview'; | ||
export * from './gridview/baseComponentGridview'; | ||
export * from './groupview/panel/content'; | ||
export * from './groupview/tab'; | ||
export * from './groupview/dnd'; | ||
export * from './groupview/types'; | ||
export * from './dockview/options'; | ||
export * from './dockview/dockviewComponent'; | ||
export * from './gridview/gridviewComponent'; | ||
export * from './splitview/splitviewComponent'; | ||
export * from './paneview/paneviewComponent'; | ||
export * from './gridview/gridviewPanel'; | ||
export * from './splitview/splitviewPanel'; | ||
export * from './paneview/paneviewPanel'; | ||
export * from './groupview/types'; | ||
export * from './react'; // TODO: should be conditional on whether user wants the React wrappers | ||
export { Event } from './events'; | ||
export { positionToDirection, directionToPosition, } from './dnd/droptarget'; | ||
export { SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api'; | ||
export * from './types'; | ||
export * from './react'; | ||
//# sourceMappingURL=index.js.map |
@@ -1,40 +0,25 @@ | ||
import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/core/splitview'; | ||
import { CompositeDisposable, IDisposable } from '../lifecycle'; | ||
import { Event } from '../events'; | ||
import { PaneviewPanel } from './paneviewPanel'; | ||
interface PaneItem { | ||
pane: PaneviewPanel; | ||
disposable: IDisposable; | ||
import * as React from 'react'; | ||
import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core'; | ||
import { PanelCollection, PanelParameters } from '../types'; | ||
export interface PaneviewReadyEvent { | ||
api: PaneviewApi; | ||
} | ||
export declare class Paneview extends CompositeDisposable implements IDisposable { | ||
private element; | ||
private splitview; | ||
private paneItems; | ||
private _orientation; | ||
private animationTimer; | ||
private skipAnimation; | ||
private readonly _onDidChange; | ||
readonly onDidChange: Event<void>; | ||
get onDidAddView(): Event<PaneviewPanel>; | ||
get onDidRemoveView(): Event<PaneviewPanel>; | ||
get minimumSize(): number; | ||
get maximumSize(): number; | ||
get orientation(): Orientation; | ||
get size(): number; | ||
get orthogonalSize(): number; | ||
constructor(container: HTMLElement, options: { | ||
orientation: Orientation; | ||
descriptor?: ISplitViewDescriptor; | ||
}); | ||
addPane(pane: PaneviewPanel, size?: number | Sizing, index?: number, skipLayout?: boolean): void; | ||
getViewSize(index: number): number; | ||
getPanes(): PaneviewPanel[]; | ||
removePane(index: number, options?: { | ||
skipDispose: boolean; | ||
}): PaneItem; | ||
moveView(from: number, to: number): void; | ||
layout(size: number, orthogonalSize: number): void; | ||
private setupAnimation; | ||
dispose(): void; | ||
export interface IPaneviewPanelProps<T extends { | ||
[index: string]: any; | ||
} = any> extends PanelParameters<T> { | ||
api: PaneviewPanelApi; | ||
containerApi: PaneviewApi; | ||
title: string; | ||
} | ||
export {}; | ||
export interface IPaneviewReactProps { | ||
onReady: (event: PaneviewReadyEvent) => void; | ||
components: PanelCollection<IPaneviewPanelProps>; | ||
headerComponents?: PanelCollection<IPaneviewPanelProps>; | ||
className?: string; | ||
disableAutoResizing?: boolean; | ||
disableDnd?: boolean; | ||
showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean; | ||
onDidDrop?(event: PaneviewDropEvent): void; | ||
} | ||
export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>; | ||
//# sourceMappingURL=paneview.d.ts.map |
@@ -1,145 +0,85 @@ | ||
import { Splitview, Orientation, } from '../splitview/core/splitview'; | ||
import { CompositeDisposable } from '../lifecycle'; | ||
import { Emitter } from '../events'; | ||
import { addClasses, removeClasses } from '../dom'; | ||
export class Paneview extends CompositeDisposable { | ||
get onDidAddView() { | ||
return this.splitview.onDidAddView; | ||
} | ||
get onDidRemoveView() { | ||
return this.splitview.onDidRemoveView; | ||
} | ||
get minimumSize() { | ||
return this.splitview.minimumSize; | ||
} | ||
get maximumSize() { | ||
return this.splitview.maximumSize; | ||
} | ||
get orientation() { | ||
return this.splitview.orientation; | ||
} | ||
get size() { | ||
return this.splitview.size; | ||
} | ||
get orthogonalSize() { | ||
return this.splitview.orthogonalSize; | ||
} | ||
constructor(container, options) { | ||
var _a; | ||
super(); | ||
this.paneItems = []; | ||
this.skipAnimation = false; | ||
this._onDidChange = new Emitter(); | ||
this.onDidChange = this._onDidChange.event; | ||
this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.VERTICAL; | ||
this.element = document.createElement('div'); | ||
this.element.className = 'pane-container'; | ||
container.appendChild(this.element); | ||
this.splitview = new Splitview(this.element, { | ||
orientation: this._orientation, | ||
proportionalLayout: false, | ||
descriptor: options.descriptor, | ||
import * as React from 'react'; | ||
import { PaneviewComponent, PaneviewApi, } from 'dockview-core'; | ||
import { usePortalsLifecycle } from '../react'; | ||
import { PanePanelSection } from './view'; | ||
export const PaneviewReact = React.forwardRef((props, ref) => { | ||
const domRef = React.useRef(null); | ||
const paneviewRef = React.useRef(); | ||
const [portals, addPortal] = usePortalsLifecycle(); | ||
React.useImperativeHandle(ref, () => domRef.current, []); | ||
React.useEffect(() => { | ||
const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, { | ||
addPortal, | ||
}); | ||
// if we've added views from the descriptor we need to | ||
// add the panes to our Pane array and setup animation | ||
this.getPanes().forEach((pane) => { | ||
const disposable = new CompositeDisposable(pane.onDidChangeExpansionState(() => { | ||
this.setupAnimation(); | ||
this._onDidChange.fire(undefined); | ||
})); | ||
const paneItem = { | ||
pane, | ||
disposable: { | ||
dispose: () => { | ||
disposable.dispose(); | ||
}, | ||
const paneview = new PaneviewComponent({ | ||
parentElement: domRef.current, | ||
frameworkComponents: props.components, | ||
components: {}, | ||
headerComponents: {}, | ||
disableDnd: props.disableDnd, | ||
headerframeworkComponents: props.headerComponents, | ||
frameworkWrapper: { | ||
header: { | ||
createComponent, | ||
}, | ||
}; | ||
this.paneItems.push(paneItem); | ||
pane.orthogonalSize = this.splitview.orthogonalSize; | ||
}); | ||
this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => { | ||
this._onDidChange.fire(undefined); | ||
}), this.splitview.onDidAddView(() => { | ||
this._onDidChange.fire(); | ||
}), this.splitview.onDidRemoveView(() => { | ||
this._onDidChange.fire(); | ||
})); | ||
} | ||
addPane(pane, size, index = this.splitview.length, skipLayout = false) { | ||
const disposable = pane.onDidChangeExpansionState(() => { | ||
this.setupAnimation(); | ||
this._onDidChange.fire(undefined); | ||
}); | ||
const paneItem = { | ||
pane, | ||
disposable: { | ||
dispose: () => { | ||
disposable.dispose(); | ||
body: { | ||
createComponent, | ||
}, | ||
}, | ||
showDndOverlay: props.showDndOverlay, | ||
}); | ||
const api = new PaneviewApi(paneview); | ||
const { clientWidth, clientHeight } = domRef.current; | ||
paneview.layout(clientWidth, clientHeight); | ||
if (props.onReady) { | ||
props.onReady({ api }); | ||
} | ||
paneviewRef.current = paneview; | ||
return () => { | ||
paneview.dispose(); | ||
}; | ||
this.paneItems.splice(index, 0, paneItem); | ||
pane.orthogonalSize = this.splitview.orthogonalSize; | ||
this.splitview.addView(pane, size, index, skipLayout); | ||
} | ||
getViewSize(index) { | ||
return this.splitview.getViewSize(index); | ||
} | ||
getPanes() { | ||
return this.splitview.getViews(); | ||
} | ||
removePane(index, options = { skipDispose: false }) { | ||
const paneItem = this.paneItems.splice(index, 1)[0]; | ||
this.splitview.removeView(index); | ||
if (!options.skipDispose) { | ||
paneItem.disposable.dispose(); | ||
paneItem.pane.dispose(); | ||
}, []); | ||
React.useEffect(() => { | ||
if (!paneviewRef.current) { | ||
return; | ||
} | ||
return paneItem; | ||
} | ||
moveView(from, to) { | ||
if (from === to) { | ||
paneviewRef.current.updateOptions({ | ||
frameworkComponents: props.components, | ||
}); | ||
}, [props.components]); | ||
React.useEffect(() => { | ||
if (!paneviewRef.current) { | ||
return; | ||
} | ||
const view = this.removePane(from, { skipDispose: true }); | ||
this.skipAnimation = true; | ||
try { | ||
this.addPane(view.pane, view.pane.size, to, false); | ||
paneviewRef.current.updateOptions({ | ||
headerframeworkComponents: props.headerComponents, | ||
}); | ||
}, [props.headerComponents]); | ||
React.useEffect(() => { | ||
if (!paneviewRef.current) { | ||
return () => { | ||
// | ||
}; | ||
} | ||
finally { | ||
this.skipAnimation = false; | ||
} | ||
} | ||
layout(size, orthogonalSize) { | ||
this.splitview.layout(size, orthogonalSize); | ||
} | ||
setupAnimation() { | ||
if (this.skipAnimation) { | ||
const paneview = paneviewRef.current; | ||
const disposable = paneview.onDidDrop((event) => { | ||
if (props.onDidDrop) { | ||
props.onDidDrop(Object.assign(Object.assign({}, event), { api: new PaneviewApi(paneview) })); | ||
} | ||
}); | ||
return () => { | ||
disposable.dispose(); | ||
}; | ||
}, [props.onDidDrop]); | ||
React.useEffect(() => { | ||
if (!paneviewRef.current) { | ||
return; | ||
} | ||
if (this.animationTimer) { | ||
clearTimeout(this.animationTimer); | ||
this.animationTimer = undefined; | ||
} | ||
addClasses(this.element, 'animated'); | ||
this.animationTimer = setTimeout(() => { | ||
this.animationTimer = undefined; | ||
removeClasses(this.element, 'animated'); | ||
}, 200); | ||
} | ||
dispose() { | ||
super.dispose(); | ||
if (this.animationTimer) { | ||
clearTimeout(this.animationTimer); | ||
this.animationTimer = undefined; | ||
} | ||
this.paneItems.forEach((paneItem) => { | ||
paneItem.disposable.dispose(); | ||
paneItem.pane.dispose(); | ||
paneviewRef.current.updateOptions({ | ||
showDndOverlay: props.showDndOverlay, | ||
}); | ||
this.paneItems = []; | ||
this.splitview.dispose(); | ||
this.element.remove(); | ||
} | ||
} | ||
}, [props.showDndOverlay]); | ||
return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals)); | ||
}); | ||
PaneviewReact.displayName = 'PaneviewComponent'; | ||
//# sourceMappingURL=paneview.js.map |
@@ -1,3 +0,4 @@ | ||
export declare const createCloseButton: () => SVGSVGElement; | ||
export declare const createExpandMoreButton: () => SVGSVGElement; | ||
export declare const createChevronRightButton: () => SVGSVGElement; | ||
import * as React from 'react'; | ||
export declare const CloseButton: () => React.JSX.Element; | ||
export declare const ExpandMore: () => React.JSX.Element; | ||
//# sourceMappingURL=svg.d.ts.map |
@@ -1,31 +0,8 @@ | ||
const createSvgElementFromPath = (params) => { | ||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | ||
svg.setAttributeNS(null, 'height', params.height); | ||
svg.setAttributeNS(null, 'width', params.width); | ||
svg.setAttributeNS(null, 'viewBox', params.viewbox); | ||
svg.setAttributeNS(null, 'aria-hidden', 'false'); | ||
svg.setAttributeNS(null, 'focusable', 'false'); | ||
svg.classList.add('dockview-svg'); | ||
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); | ||
path.setAttributeNS(null, 'd', params.path); | ||
svg.appendChild(path); | ||
return svg; | ||
import * as React from 'react'; | ||
export const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" }, | ||
React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" }))); | ||
export const ExpandMore = () => { | ||
return (React.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 15", "aria-hidden": 'false', focusable: false, className: "dockview-svg" }, | ||
React.createElement("path", { d: "M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z" }))); | ||
}; | ||
export const createCloseButton = () => createSvgElementFromPath({ | ||
width: '11', | ||
height: '11', | ||
viewbox: '0 0 28 28', | ||
path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z', | ||
}); | ||
export const createExpandMoreButton = () => createSvgElementFromPath({ | ||
width: '11', | ||
height: '11', | ||
viewbox: '0 0 24 15', | ||
path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z', | ||
}); | ||
export const createChevronRightButton = () => createSvgElementFromPath({ | ||
width: '11', | ||
height: '11', | ||
viewbox: '0 0 15 25', | ||
path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z', | ||
}); | ||
//# sourceMappingURL=svg.js.map |
@@ -1,8 +0,9 @@ | ||
export interface Constructor<T> { | ||
new (): T; | ||
import * as React from 'react'; | ||
import { Parameters } from 'dockview-core'; | ||
export interface PanelCollection<T extends object> { | ||
[name: string]: React.FunctionComponent<T>; | ||
} | ||
export interface FrameworkFactory<T> { | ||
createComponent: (id: string, componentId: string, component: any) => T; | ||
export interface PanelParameters<T extends {} = Parameters> { | ||
params: T; | ||
} | ||
export type FunctionOrValue<T> = (() => T) | T; | ||
export declare function isBooleanValue(value: any): value is boolean; | ||
//# sourceMappingURL=types.d.ts.map |
@@ -1,3 +0,2 @@ | ||
export function isBooleanValue(value) { | ||
return typeof value === 'boolean'; | ||
} | ||
export {}; | ||
//# sourceMappingURL=types.js.map |
{ | ||
"name": "dockview", | ||
"version": "0.0.0-experimental-4ff77d46-20230221", | ||
"version": "0.0.0-experimental-806ff2a9-20230927", | ||
"description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support", | ||
@@ -44,3 +44,8 @@ "main": "./dist/cjs/index.js", | ||
"license": "MIT", | ||
"dependencies": { | ||
"dockview-core": "0.0.0-experimental-806ff2a9-20230927" | ||
}, | ||
"devDependencies": { | ||
"@rollup/plugin-node-resolve": "^15.0.1", | ||
"@rollup/plugin-terser": "^0.4.0", | ||
"@rollup/plugin-typescript": "^11.0.0", | ||
@@ -56,6 +61,4 @@ "@testing-library/react": "^13.4.0", | ||
"rollup": "^3.15.0", | ||
"rollup-plugin-postcss": "^4.0.2", | ||
"rollup-plugin-terser": "^7.0.2", | ||
"typedoc": "^0.23.25" | ||
"rollup-plugin-postcss": "^4.0.2" | ||
} | ||
} |
<div align="center"> | ||
<h1>dockview</h1> | ||
<p>Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support written in TypeScript</p> | ||
<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews with ReactJS support written in TypeScript</p> | ||
@@ -20,4 +20,2 @@ </div> | ||
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/ | ||
## Features | ||
@@ -31,9 +29,10 @@ | ||
- Tabular docking and Drag and Drop support | ||
- Floating groups, customized header bars and tab | ||
- Documentation and examples | ||
This project was inspired by many popular IDE editors. Some parts of the core resizable panelling are inspired by code found in the VSCode codebase, [splitview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview) and [gridview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid). | ||
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/ | ||
## Quick start | ||
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). Please see the [Getting Started Guide](https://mathuo.github.io/dockview/docs/). | ||
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). | ||
@@ -40,0 +39,0 @@ ``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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 too big to display
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 too big to display
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 too big to display
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 too big to display
Sorry, the diff of this file is not supported yet
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
9370637
148.86%0
-100%1
Infinity%153
-62.59%54123
-24.85%52
-1.89%+ Added