mirror of
https://github.com/mathuo/dockview
synced 2025-03-10 16:02:04 +00:00
refactor: cleanup
This commit is contained in:
parent
1e3462a193
commit
20f200963f
@ -1,92 +0,0 @@
|
|||||||
import { trackFocus } from './dom';
|
|
||||||
import { Emitter, Event } from './events';
|
|
||||||
import { IDisposable } from './lifecycle';
|
|
||||||
|
|
||||||
export interface HostedContainerOptions {
|
|
||||||
id: string;
|
|
||||||
parent?: HTMLElement;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class HostedContainer implements IDisposable {
|
|
||||||
private readonly _element: HTMLElement;
|
|
||||||
|
|
||||||
private readonly _onDidFocus = new Emitter<void>();
|
|
||||||
readonly onDidFocus: Event<void> = this._onDidFocus.event;
|
|
||||||
|
|
||||||
private readonly _onDidBlur = new Emitter<void>();
|
|
||||||
readonly onDidBlur: Event<void> = this._onDidBlur.event;
|
|
||||||
|
|
||||||
get element() {
|
|
||||||
return this._element;
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(private readonly options: HostedContainerOptions) {
|
|
||||||
if (!options.parent) {
|
|
||||||
options.parent = document.getElementById('app') as HTMLElement;
|
|
||||||
options.parent.style.position = 'relative';
|
|
||||||
}
|
|
||||||
|
|
||||||
this._element = document.createElement('div');
|
|
||||||
this._element.style.visibility = 'hidden';
|
|
||||||
this._element.style.overflow = 'hidden';
|
|
||||||
// this._element.style.pointerEvents = 'none';
|
|
||||||
this._element.id = `webview-${options.id}`;
|
|
||||||
this._element.tabIndex = -1;
|
|
||||||
|
|
||||||
const { onDidFocus, onDidBlur } = trackFocus(this._element);
|
|
||||||
|
|
||||||
onDidFocus(() => this._onDidFocus.fire());
|
|
||||||
onDidBlur(() => this._onDidBlur.fire());
|
|
||||||
|
|
||||||
/**
|
|
||||||
* When dragging somebody
|
|
||||||
*/
|
|
||||||
|
|
||||||
window.addEventListener('dragstart', () => {
|
|
||||||
this.element.style.pointerEvents = 'none';
|
|
||||||
});
|
|
||||||
window.addEventListener('dragend', () => {
|
|
||||||
this.element.style.pointerEvents = '';
|
|
||||||
});
|
|
||||||
window.addEventListener('mousemove', (ev) => {
|
|
||||||
if (ev.buttons === 0) {
|
|
||||||
this.element.style.pointerEvents = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
options.parent.appendChild(this._element);
|
|
||||||
}
|
|
||||||
|
|
||||||
hide() {
|
|
||||||
this._element.style.visibility = 'hidden';
|
|
||||||
}
|
|
||||||
|
|
||||||
show() {
|
|
||||||
this._element.style.visibility = 'visible';
|
|
||||||
}
|
|
||||||
|
|
||||||
layout(
|
|
||||||
element: HTMLElement,
|
|
||||||
dimension?: { width: number; height: number }
|
|
||||||
) {
|
|
||||||
if (!this.element || !this.element.parentElement) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const frameRect = element.getBoundingClientRect();
|
|
||||||
const containerRect =
|
|
||||||
this.element.parentElement.getBoundingClientRect();
|
|
||||||
this.element.style.position = 'absolute';
|
|
||||||
this.element.style.top = `${frameRect.top - containerRect.top}px`;
|
|
||||||
this.element.style.left = `${frameRect.left - containerRect.left}px`;
|
|
||||||
this.element.style.width = `${
|
|
||||||
dimension ? dimension.width : frameRect.width
|
|
||||||
}px`;
|
|
||||||
this.element.style.height = `${
|
|
||||||
dimension ? dimension.height : frameRect.height
|
|
||||||
}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispose() {
|
|
||||||
this._element.remove();
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,5 +1,3 @@
|
|||||||
export * from './hostedContainer';
|
|
||||||
|
|
||||||
export * from './dnd/dataTransfer';
|
export * from './dnd/dataTransfer';
|
||||||
|
|
||||||
export { watchElementResize } from './dom';
|
export { watchElementResize } from './dom';
|
||||||
|
@ -9,10 +9,9 @@ import {
|
|||||||
toggleClass,
|
toggleClass,
|
||||||
getElementsByTagName,
|
getElementsByTagName,
|
||||||
} from '../dom';
|
} from '../dom';
|
||||||
import { clamp } from '../math';
|
|
||||||
import { Event, Emitter } from '../events';
|
import { Event, Emitter } from '../events';
|
||||||
import { pushToStart, pushToEnd, firstIndex } from '../array';
|
import { pushToStart, pushToEnd, firstIndex } from '../array';
|
||||||
import { range } from '../math';
|
import { range, clamp } from '../math';
|
||||||
import { ViewItem } from './viewItem';
|
import { ViewItem } from './viewItem';
|
||||||
|
|
||||||
export enum Orientation {
|
export enum Orientation {
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { ReactPart, ReactPortalStore } from '../react';
|
import { ReactPart, ReactPortalStore } from '../react';
|
||||||
import { IGroupPanelBaseProps } from './dockview';
|
|
||||||
import {
|
import {
|
||||||
PanelUpdateEvent,
|
PanelUpdateEvent,
|
||||||
DockviewGroupPanel,
|
DockviewGroupPanel,
|
||||||
|
Loading…
Reference in New Issue
Block a user