rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-01-22 09:25:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

experiments

Browse Source
This commit is contained in:
mathuo 2024-08-27 20:53:54 +01:00
parent 7adabec088
commit b7ceaf5133
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
4 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/dockview-core/src/api/component.api.ts
View File

@ -931,4 +931,8 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
dispose(): void {
this.component.dispose();
}
anchor(): HTMLElement {
return this.component.anchor;
}
}

12
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -168,6 +168,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
readonly panels: IDockviewPanel[];
readonly orientation: Orientation;
readonly gap: number;
readonly anchor: HTMLElement;
readonly onDidDrop: Event<DockviewDidDropEvent>;
readonly onWillDrop: Event<DockviewWillDropEvent>;
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
@ -339,6 +340,10 @@ export class DockviewComponent
return this._floatingGroups;
}
get anchor(): HTMLElement {
return this.options.anchor ?? this.gridview.element;
}
constructor(parentElement: HTMLElement, options: DockviewComponentOptions) {
super(parentElement, {
proportionalLayout: true,
@ -352,8 +357,10 @@ export class DockviewComponent
className: options.className,
});
this._options = options;
this.overlayRenderContainer = new OverlayRenderContainer(
this.gridview.element,
this.anchor,
this
);
@ -423,8 +430,6 @@ export class DockviewComponent
})
);
this._options = options;
this._rootDropTarget = new Droptarget(this.element, {
canDisplayOverlay: (event, position) => {
const data = getPanelData();
@ -873,6 +878,7 @@ export class DockviewComponent
const overlay = new Overlay({
container: this.gridview.element,
anchor: this.anchor,
content: group.element,
...anchoredBox,
minimumInViewportWidth:

4
packages/dockview-core/src/dockview/options.ts
View File

@ -39,6 +39,7 @@ export interface DockviewOptions {
* Call `.layout(width, height)` to manually resize the container.
*/
disableAutoResizing?: boolean;
anchor?: HTMLElement;
hideBorders?: boolean;
singleTabMode?: 'fullwidth' | 'default';
disableFloatingGroups?: boolean;
@ -94,11 +95,12 @@ export class DockviewUnhandledDragOverEvent implements DockviewDndOverlayEvent {
export const PROPERTY_KEYS: (keyof DockviewOptions)[] = (() => {
/**
* by readong the keys from an empty value object TypeScript will error
* by reading the keys from an empty value object TypeScript will error
* when we add or remove new properties to `DockviewOptions`
*/
const properties: Record<keyof DockviewOptions, undefined> = {
disableAutoResizing: undefined,
anchor: undefined,
hideBorders: undefined,
singleTabMode: undefined,
disableFloatingGroups: undefined,

48
packages/dockview-core/src/overlay/overlay.ts
View File

@ -74,6 +74,7 @@ export class Overlay extends CompositeDisposable {
constructor(
private readonly options: AnchoredBox & {
container: HTMLElement;
anchor: HTMLElement;
content: HTMLElement;
minimumInViewportWidth?: number;
minimumInViewportHeight?: number;
@ -95,7 +96,7 @@ export class Overlay extends CompositeDisposable {
this.setupResize('bottomright');
this._element.appendChild(this.options.content);
this.options.container.appendChild(this._element);
this.options.anchor.appendChild(this._element);
// if input bad resize within acceptable boundaries
this.setBounds({
@ -115,6 +116,12 @@ export class Overlay extends CompositeDisposable {
}
setBounds(bounds: Partial<AnchoredBox> = {}): void {
const containerRect = this.options.anchor.getBoundingClientRect();
const anchorRect = this.options.anchor.getBoundingClientRect();
const dy = 0; //containerRect.top - anchorRect.top;
const dx = 0; // containerRect.left - anchorRect.left;
if (typeof bounds.height === 'number') {
this._element.style.height = `${bounds.height}px`;
}
@ -122,27 +129,26 @@ export class Overlay extends CompositeDisposable {
this._element.style.width = `${bounds.width}px`;
}
if ('top' in bounds && typeof bounds.top === 'number') {
this._element.style.top = `${bounds.top}px`;
this._element.style.top = `${bounds.top + dy}px`;
this._element.style.bottom = 'auto';
this.verticalAlignment = 'top';
}
if ('bottom' in bounds && typeof bounds.bottom === 'number') {
this._element.style.bottom = `${bounds.bottom}px`;
this._element.style.bottom = `${bounds.bottom + dy}px`;
this._element.style.top = 'auto';
this.verticalAlignment = 'bottom';
}
if ('left' in bounds && typeof bounds.left === 'number') {
this._element.style.left = `${bounds.left}px`;
this._element.style.left = `${bounds.left + dx}px`;
this._element.style.right = 'auto';
this.horiziontalAlignment = 'left';
}
if ('right' in bounds && typeof bounds.right === 'number') {
this._element.style.right = `${bounds.right}px`;
this._element.style.right = `${bounds.right + dx}px`;
this._element.style.left = 'auto';
this.horiziontalAlignment = 'right';
}
const containerRect = this.options.container.getBoundingClientRect();
const overlayRect = this._element.getBoundingClientRect();
// region: ensure bounds within allowable limits
@ -156,10 +162,14 @@ export class Overlay extends CompositeDisposable {
if (this.verticalAlignment === 'top') {
const top = clamp(
overlayRect.top - containerRect.top,
-yOffset,
Math.max(0, containerRect.height - overlayRect.height + yOffset)
dy + -yOffset,
dy +
Math.max(
0,
anchorRect.height - overlayRect.height + yOffset
)
);
this._element.style.top = `${top}px`;
this._element.style.top = `${top + dy}px`;
this._element.style.bottom = 'auto';
}
@ -167,9 +177,9 @@ export class Overlay extends CompositeDisposable {
const bottom = clamp(
containerRect.bottom - overlayRect.bottom,
-yOffset,
Math.max(0, containerRect.height - overlayRect.height + yOffset)
Math.max(0, anchorRect.height - overlayRect.height + yOffset)
);
this._element.style.bottom = `${bottom}px`;
this._element.style.bottom = `${bottom + dy}px`;
this._element.style.top = 'auto';
}
@ -177,9 +187,9 @@ export class Overlay extends CompositeDisposable {
const left = clamp(
overlayRect.left - containerRect.left,
-xOffset,
Math.max(0, containerRect.width - overlayRect.width + xOffset)
Math.max(0, anchorRect.width - overlayRect.width + xOffset)
);
this._element.style.left = `${left}px`;
this._element.style.left = `${left + dx}px`;
this._element.style.right = 'auto';
}
@ -187,9 +197,9 @@ export class Overlay extends CompositeDisposable {
const right = clamp(
containerRect.right - overlayRect.right,
-xOffset,
Math.max(0, containerRect.width - overlayRect.width + xOffset)
Math.max(0, anchorRect.width - overlayRect.width + xOffset)
);
this._element.style.right = `${right}px`;
this._element.style.right = `${right + dx}px`;
this._element.style.left = 'auto';
}
@ -243,7 +253,13 @@ export class Overlay extends CompositeDisposable {
},
addDisposableWindowListener(window, 'mousemove', (e) => {
const containerRect =
this.options.container.getBoundingClientRect();
this.options.anchor.getBoundingClientRect();
const anchorRect =
this.options.anchor.getBoundingClientRect();
const dy = containerRect.top - anchorRect.top;
const dx = containerRect.left - anchorRect.left;
const x = e.clientX - containerRect.left;
const y = e.clientY - containerRect.top;