From c44ccfa52eedf2cc217d90bf9da7707b6ba40df9 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 19 Mar 2023 22:36:12 +0400 Subject: [PATCH 1/6] test: add test --- .../__tests__/dockview/dockviewPanel.spec.ts | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts index da7555cc6..e6d7ab10e 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts @@ -50,6 +50,39 @@ describe('dockviewPanel', () => { disposable.dispose(); }); + test('that .setTitle updates the title', () => { + const dockviewApiMock = jest.fn(() => { + return { + onDidActiveChange: jest.fn(), + } as any; + }); + const accessorMock = jest.fn(() => { + return {} as any; + }); + const groupMock = jest.fn(() => { + return {} as any; + }); + const panelModelMock = jest.fn, []>(() => { + return { + update: jest.fn(), + init: jest.fn(), + }; + }); + + const api = new dockviewApiMock(); + const accessor = new accessorMock(); + const group = new groupMock(); + const model = new panelModelMock(); + + const cut = new DockviewPanel('fake-id', accessor, api, group, model); + + cut.init({ title: 'myTitle', params: {} }); + expect(cut.title).toBe('myTitle'); + + cut.setTitle('newTitle'); + expect(cut.title).toBe('newTitle'); + }); + test('dispose cleanup', () => { const dockviewApiMock = jest.fn(() => { return {} as any; From d1f67828e36f3fcf8e6df7badd1e5444e28029be Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 19 Mar 2023 22:36:24 +0400 Subject: [PATCH 2/6] chore: docs --- packages/docs/docs/components/dockview.mdx | 24 ++++++++++++++----- .../constraints-dockview/src/app.tsx | 2 +- .../sandboxes/events-dockview/src/app.tsx | 18 +++++++------- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index a61471905..ba7efe66a 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -656,8 +656,26 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => { +### Constraints + +You may wish to specify a minimum or maximum height or width for a group which can be done through the group api. + +```tsx +api.group.api.setConstraints(...) +``` + +> Constraints are currently only supported for groups and not individual panels. +> If you specific a constraint on a group and move a panel within that group to another group it will no +> longer be subject to those constraints since those constraints were on the group and not on the individual panel. + + + + + ## Events +A simple example showing events fired by `dockviewz that can be interacted with. + @@ -684,9 +702,3 @@ hello 2
- -## Contraints - - - - diff --git a/packages/docs/sandboxes/constraints-dockview/src/app.tsx b/packages/docs/sandboxes/constraints-dockview/src/app.tsx index 6de27a497..c8f6d51b4 100644 --- a/packages/docs/sandboxes/constraints-dockview/src/app.tsx +++ b/packages/docs/sandboxes/constraints-dockview/src/app.tsx @@ -71,7 +71,7 @@ const App = () => { const [api, setApi] = React.useState(); const onReady = (event: DockviewReadyEvent) => { - event.api.addPanel({ + const panel = event.api.addPanel({ id: 'panel_1', component: 'default', }); diff --git a/packages/docs/sandboxes/events-dockview/src/app.tsx b/packages/docs/sandboxes/events-dockview/src/app.tsx index a8a9bca96..a64fde351 100644 --- a/packages/docs/sandboxes/events-dockview/src/app.tsx +++ b/packages/docs/sandboxes/events-dockview/src/app.tsx @@ -182,49 +182,49 @@ const EventsDockview = () => { panels: { panel_1: { id: 'panel_1', - view: { content: { id: 'default' } }, + contentComponent: 'default', params: { title: 'Panel 1' }, title: 'panel_1', }, panel_2: { id: 'panel_2', - view: { content: { id: 'default' } }, + contentComponent: 'default', params: { title: 'Panel 2' }, title: 'panel_2', }, panel_3: { id: 'panel_3', - view: { content: { id: 'default' } }, + contentComponent: 'default', params: { title: 'Panel 3' }, title: 'panel_3', }, panel_4: { id: 'panel_4', - view: { content: { id: 'default' } }, + contentComponent: 'default', params: { title: 'Panel 4' }, title: 'panel_4', }, panel_5: { id: 'panel_5', - view: { content: { id: 'default' } }, + contentComponent: 'default', params: { title: 'Panel 5' }, title: 'panel_5', }, panel_6: { id: 'panel_6', - view: { content: { id: 'default' } }, + contentComponent: 'default', params: { title: 'Panel 6' }, title: 'panel_6', }, panel_8: { id: 'panel_8', - view: { content: { id: 'default' } }, + contentComponent: 'default', params: { title: 'Panel 8' }, title: 'panel_8', }, panel_7: { id: 'panel_7', - view: { content: { id: 'default' } }, + contentComponent: 'default', params: { title: 'Panel 7' }, title: 'panel_7', }, @@ -334,7 +334,7 @@ const EventsDockview = () => { className="dockview-theme-abyss" /> -
+
From a74daf410e01241343179ed7e06cabd454581c8b Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sat, 18 Mar 2023 23:45:23 +0400 Subject: [PATCH 3/6] fix: dockview panel group should derive constraints --- .../dockview-core/src/api/dockviewPanelApi.ts | 6 +++- .../src/dockview/dockviewGroupPanel.ts | 28 +++++------------ .../src/dockview/dockviewGroupPanelModel.ts | 30 +++++++------------ .../src/gridview/gridviewPanel.ts | 24 ++++++++++++++- 4 files changed, 46 insertions(+), 42 deletions(-) diff --git a/packages/dockview-core/src/api/dockviewPanelApi.ts b/packages/dockview-core/src/api/dockviewPanelApi.ts index 8d037d5fb..48978c688 100644 --- a/packages/dockview-core/src/api/dockviewPanelApi.ts +++ b/packages/dockview-core/src/api/dockviewPanelApi.ts @@ -12,7 +12,11 @@ export interface TitleEvent { * omit visibility modifiers since the visibility of a single group doesn't make sense * because it belongs to a groupview */ -export interface DockviewPanelApi extends Omit { +export interface DockviewPanelApi + extends Omit< + GridviewPanelApi, + 'setVisible' | 'onDidConstraintsChange' | 'setConstraints' + > { readonly group: DockviewGroupPanel; readonly isGroupActive: boolean; readonly title: string; diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts index f5e7b943f..b8391306c 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts @@ -4,13 +4,14 @@ import { GridviewPanelApi } from '../api/gridviewPanelApi'; import { DockviewGroupPanelModel, GroupOptions, + IDockviewGroupPanelModel, IHeader, } from './dockviewGroupPanelModel'; import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel'; import { IDockviewPanel } from '../dockview/dockviewPanel'; export interface IDockviewGroupPanel extends IGridviewPanel { - model: DockviewGroupPanelModel; + model: IDockviewGroupPanelModel; locked: boolean; readonly size: number; readonly panels: IDockviewPanel[]; @@ -25,7 +26,7 @@ export class DockviewGroupPanel extends GridviewPanel implements IDockviewGroupPanel { - private readonly _model: DockviewGroupPanelModel; + private readonly _model: IDockviewGroupPanelModel; get panels(): IDockviewPanel[] { return this._model.panels; @@ -39,26 +40,10 @@ export class DockviewGroupPanel return this._model.size; } - get model(): DockviewGroupPanelModel { + get model(): IDockviewGroupPanelModel { return this._model; } - get minimumHeight(): number { - return this._model.minimumHeight; - } - - get maximumHeight(): number { - return this._model.maximumHeight; - } - - get minimumWidth(): number { - return this._model.minimumWidth; - } - - get maximumWidth(): number { - return this._model.maximumWidth; - } - get locked(): boolean { return this._model.locked; } @@ -76,7 +61,10 @@ export class DockviewGroupPanel id: string, options: GroupOptions ) { - super(id, 'groupview_default'); + super(id, 'groupview_default', { + minimumHeight: 100, + minimumWidth: 100, + }); this._model = new DockviewGroupPanelModel( this.element, diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index e917f2c42..37836691d 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -4,10 +4,9 @@ import { Droptarget, Position } from '../dnd/droptarget'; import { DockviewComponent } from './dockviewComponent'; import { isAncestor, toggleClass } from '../dom'; import { addDisposableListener, Emitter, Event } from '../events'; -import { IGridPanelView } from '../gridview/baseComponentGridview'; import { IViewSize } from '../gridview/gridview'; import { CompositeDisposable } from '../lifecycle'; -import { PanelInitParameters, PanelUpdateEvent } from '../panel/types'; +import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types'; import { ContentContainer, IContentContainer, @@ -82,7 +81,7 @@ export interface IHeader { height: number | undefined; } -export interface IDockviewGroupPanelModel extends IGridPanelView { +export interface IDockviewGroupPanelModel extends IPanel { readonly isActive: boolean; readonly size: number; readonly panels: IDockviewPanel[]; @@ -95,13 +94,20 @@ export interface IDockviewGroupPanelModel extends IGridPanelView { readonly onDidActivePanelChange: Event; readonly onMove: Event; locked: boolean; + setActive(isActive: boolean): void; + initialize(): void; // state isPanelActive: (panel: IDockviewPanel) => boolean; indexOf(panel: IDockviewPanel): number; // panel lifecycle openPanel( panel: IDockviewPanel, - options?: { index?: number; skipFocus?: boolean } + options?: { + index?: number; + skipFocus?: boolean; + skipSetPanelActive?: boolean; + skipSetGroupActive?: boolean; + } ): void; closePanel(panel: IDockviewPanel): void; closeAllPanels(): void; @@ -199,22 +205,6 @@ export class DockviewGroupPanelModel return this._panels.length === 0; } - get minimumHeight(): number { - return 100; - } - - get maximumHeight(): number { - return Number.MAX_SAFE_INTEGER; - } - - get minimumWidth(): number { - return 100; - } - - get maximumWidth(): number { - return Number.MAX_SAFE_INTEGER; - } - get hasWatermark(): boolean { return !!( this.watermark && this.container.contains(this.watermark.element) diff --git a/packages/dockview-core/src/gridview/gridviewPanel.ts b/packages/dockview-core/src/gridview/gridviewPanel.ts index 8ea379901..530a3cc70 100644 --- a/packages/dockview-core/src/gridview/gridviewPanel.ts +++ b/packages/dockview-core/src/gridview/gridviewPanel.ts @@ -126,9 +126,31 @@ export abstract class GridviewPanel return this.api.isActive; } - constructor(id: string, component: string) { + constructor( + id: string, + component: string, + options?: { + minimumWidth?: number; + maximumWidth?: number; + minimumHeight?: number; + maximumHeight?: number; + } + ) { super(id, component, new GridviewPanelApiImpl(id)); + if (typeof options?.minimumWidth === 'number') { + this._minimumWidth = options.minimumWidth; + } + if (typeof options?.maximumWidth === 'number') { + this._maximumWidth = options.maximumWidth; + } + if (typeof options?.minimumHeight === 'number') { + this._minimumHeight = options.minimumHeight; + } + if (typeof options?.maximumHeight === 'number') { + this._maximumHeight = options.maximumHeight; + } + this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement this.addDisposables( From ad05a3cc25412efacf9488dbe7dd0cf67a7f60ab Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 21 Mar 2023 17:24:06 +0100 Subject: [PATCH 4/6] chore: docs --- .../constraints-dockview/src/app.tsx | 121 ++++++++++++------ .../sandboxes/vanilla-dockview/package.json | 22 ++++ .../vanilla-dockview/public/index.html | 43 +++++++ .../sandboxes/vanilla-dockview/src/app.ts | 88 +++++++++++++ .../sandboxes/vanilla-dockview/src/index.ts | 10 ++ .../sandboxes/vanilla-dockview/src/styles.css | 16 +++ .../sandboxes/vanilla-dockview/tsconfig.json | 20 +++ 7 files changed, 283 insertions(+), 37 deletions(-) create mode 100644 packages/docs/sandboxes/vanilla-dockview/package.json create mode 100644 packages/docs/sandboxes/vanilla-dockview/public/index.html create mode 100644 packages/docs/sandboxes/vanilla-dockview/src/app.ts create mode 100644 packages/docs/sandboxes/vanilla-dockview/src/index.ts create mode 100644 packages/docs/sandboxes/vanilla-dockview/src/styles.css create mode 100644 packages/docs/sandboxes/vanilla-dockview/tsconfig.json diff --git a/packages/docs/sandboxes/constraints-dockview/src/app.tsx b/packages/docs/sandboxes/constraints-dockview/src/app.tsx index c8f6d51b4..0eda69d6c 100644 --- a/packages/docs/sandboxes/constraints-dockview/src/app.tsx +++ b/packages/docs/sandboxes/constraints-dockview/src/app.tsx @@ -9,41 +9,16 @@ import { import * as React from 'react'; const components = { - default: (props: IDockviewPanelProps<{ title: string }>) => { + default: (props: IDockviewPanelProps) => { const [contraints, setContraints] = React.useState(null); React.useEffect(() => { - props.api.group.api.setConstraints({ - maximumHeight: 200, - maximumWidth: 200, + props.api.group.api.onDidConstraintsChange((event) => { + setContraints(event); }); }, []); - React.useEffect(() => { - const disposable1 = new DockviewMutableDisposable(); - - const disposable = props.api.onDidGroupChange(() => { - disposable1.value = props.api.group.api.onDidConstraintsChange( - (event) => { - setContraints(event); - } - ); - }); - - setContraints({ - maximumHeight: props.api.group.maximumHeight, - minimumHeight: props.api.group.minimumHeight, - maximumWidth: props.api.group.maximumWidth, - minimumWidth: props.api.group.minimumWidth, - }); - - return () => { - disposable1.dispose(); - disposable.dispose(); - }; - }, []); - return (
- {props.params.title} {contraints && ( -
-
{`minHeight=${contraints.minimumHeight}`}
-
{`maxHeight=${contraints.maximumHeight}`}
-
{`minWidth=${contraints.minimumWidth}`}
-
{`maxWidth=${contraints.maximumWidth}`}
+
+ {typeof contraints.maximumHeight === 'number' && ( +
+ {`Maximum Height: `} + {`${contraints.maximumHeight}px`} +
+ )} + {typeof contraints.minimumHeight === 'number' && ( +
+ {`Minimum Height: `} + {`${contraints.minimumHeight}px`} +
+ )} + {typeof contraints.maximumWidth === 'number' && ( +
+ {`Maximum Width: `} + {`${contraints.maximumWidth}px`} +
+ )} + {typeof contraints.minimumWidth === 'number' && ( +
+ {`Minimum Width: `} + {`${contraints.minimumWidth}px`} +
+ )}
)}
@@ -71,19 +97,40 @@ const App = () => { const [api, setApi] = React.useState(); const onReady = (event: DockviewReadyEvent) => { - const panel = event.api.addPanel({ + const panel1 = event.api.addPanel({ id: 'panel_1', component: 'default', }); - event.api.addPanel({ + const panel2 = event.api.addPanel({ id: 'panel_2', component: 'default', + position: { + referencePanel: panel1, + direction: 'right', + }, }); - event.api.addPanel({ + const panel3 = event.api.addPanel({ id: 'panel_3', component: 'default', + position: { + referencePanel: panel2, + direction: 'right', + }, + }); + + const panel4 = event.api.addPanel({ + id: 'panel_4', + component: 'default', + position: { + direction: 'below', + }, + }); + + panel2.api.group.api.setConstraints({ + maximumWidth: 300, + maximumHeight: 300, }); }; diff --git a/packages/docs/sandboxes/vanilla-dockview/package.json b/packages/docs/sandboxes/vanilla-dockview/package.json new file mode 100644 index 000000000..b6bf01665 --- /dev/null +++ b/packages/docs/sandboxes/vanilla-dockview/package.json @@ -0,0 +1,22 @@ +{ + "name": "vanilla-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.ts", + "dependencies": { + "dockview-core": "*" + }, + "devDependencies": { + "typescript": "^4.9.5" + }, + "scripts": {}, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/vanilla-dockview/public/index.html b/packages/docs/sandboxes/vanilla-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/vanilla-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/vanilla-dockview/src/app.ts b/packages/docs/sandboxes/vanilla-dockview/src/app.ts new file mode 100644 index 000000000..b7ffbe53d --- /dev/null +++ b/packages/docs/sandboxes/vanilla-dockview/src/app.ts @@ -0,0 +1,88 @@ +import { + DockviewComponent, + IContentRenderer, + IGroupPanelInitParameters, +} from 'dockview'; + +class DefaultPanel implements IContentRenderer { + private _element: HTMLElement; + + get element(): HTMLElement { + return this._element; + } + + constructor() { + this._element = document.createElement('div'); + } + + init(params: IGroupPanelInitParameters): void { + // + } +} + +export function attach(parent: HTMLElement): { + dispose: () => void; +} { + const element = document.createElement('div'); + element.className = 'dockview-theme-abyss'; + parent.appendChild(element); + + const dockview = new DockviewComponent(element, { + components: { + default: DefaultPanel, + }, + }); + + const observer = new ResizeObserver((entires) => { + const firstEntry = entires[0]; + + const { width, height } = firstEntry.contentRect; + dockview.layout(width, height); + }); + + observer.observe(parent); + + const panel1 = dockview.addPanel({ + id: 'panel_1', + title: 'Panel 1', + component: 'default', + }); + + const panel2 = dockview.addPanel({ + id: 'panel_2', + title: 'Panel 2', + component: 'default', + position: { + referencePanel: panel1, + direction: 'right', + }, + }); + + const panel3 = dockview.addPanel({ + id: 'panel_3', + title: 'Panel 3', + component: 'default', + position: { + referenceGroup: panel2.group, + }, + }); + + const pane4 = dockview.addPanel({ + id: 'panel_4', + title: 'Panel 4', + component: 'default', + position: { + direction: 'below', + }, + }); + + return { + dispose: () => { + observer.unobserve(element); + observer.disconnect(); + + dockview.dispose(); + element.remove(); + }, + }; +} diff --git a/packages/docs/sandboxes/vanilla-dockview/src/index.ts b/packages/docs/sandboxes/vanilla-dockview/src/index.ts new file mode 100644 index 000000000..a1bf270a5 --- /dev/null +++ b/packages/docs/sandboxes/vanilla-dockview/src/index.ts @@ -0,0 +1,10 @@ +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import { attach } from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + attach(rootElement); +} diff --git a/packages/docs/sandboxes/vanilla-dockview/src/styles.css b/packages/docs/sandboxes/vanilla-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/vanilla-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/vanilla-dockview/tsconfig.json b/packages/docs/sandboxes/vanilla-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/vanilla-dockview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true + } +} From 1e3462a193b6b42c9a8c3b212951a990b87dc1e3 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 21 Mar 2023 17:48:56 +0100 Subject: [PATCH 5/6] chore: docs --- packages/docs/docs/components/dockview.mdx | 29 ++++++------- packages/docs/src/components/container.tsx | 49 ++++++++++++++-------- 2 files changed, 44 insertions(+), 34 deletions(-) diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 8e4868e3a..ba8d5177f 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -32,7 +32,7 @@ import DockviewSetTitle from '@site/sandboxes/updatetitle-dockview/src/app'; Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels. - + @@ -209,7 +209,7 @@ const onReady = (event: DockviewReadyEvent) => { Here is an example using the above code loading from and saving to localStorage. If you refresh the page you should notice your layout is loaded as you left it. - + @@ -238,7 +238,7 @@ props.api.group.api.setSize({ You can see an example invoking both approaches below. - + @@ -248,7 +248,7 @@ When the dockview is empty you may want to display some fallback content, this i By default there the watermark has no content but you can provide as a prop to `DockviewReact` a `watermarkComponent` which will be rendered when there are no panels or groups. - + @@ -327,7 +327,7 @@ return ( ); ``` - + @@ -525,7 +525,7 @@ As a simple example the below attaches a custom event handler for the context me The below example uses a custom tab renderer to reigster a popover when the user right clicked on a tab. This still makes use of the `DockviewDefaultTab` since it's only a minor change. - + @@ -550,7 +550,7 @@ api.setTitle('my_new_custom_title'); > Note this only works when using the default tab implementation. - + @@ -599,7 +599,7 @@ to the entire width of the group. For example: ``` - + @@ -653,7 +653,7 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => { }; ``` - + @@ -669,12 +669,7 @@ api.group.api.setConstraints(...) > If you specific a constraint on a group and move a panel within that group to another group it will no > longer be subject to those constraints since those constraints were on the group and not on the individual panel. -<<<<<<< HEAD - -# - - - >>>>>>> 84e88f458f9d8e9983b7bb114160c35d36d78fcd + @@ -682,7 +677,7 @@ api.group.api.setConstraints(...) A simple example showing events fired by `dockviewz that can be interacted with. - + @@ -693,7 +688,7 @@ A simple example showing events fired by `dockviewz that can be interacted with. You can safely create multiple dockview instances within one page and nest dockviews within other dockviews. If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `showDndOverlay` and `onDidDrop` props on `DockviewReact`. - + diff --git a/packages/docs/src/components/container.tsx b/packages/docs/src/components/container.tsx index 09be369e9..432432cf6 100644 --- a/packages/docs/src/components/container.tsx +++ b/packages/docs/src/components/container.tsx @@ -1,7 +1,9 @@ -import useBaseUrl from '@docusaurus/useBaseUrl'; import * as React from 'react'; import './container.scss'; +const BASE_SANDBOX_URL = + 'https://codesandbox.io/s/github/mathuo/dockview/tree/master/packages/docs/sandboxes'; + const createSvgElementFromPath = (params: { height: string; width: string; @@ -33,9 +35,17 @@ export const Container = (props: { children?: React.ReactNode; height?: number; injectVanillaJS?: (parent: HTMLElement) => void; + sandboxId?: string; }) => { const ref = React.useRef(null); + const url = React.useMemo(() => { + if (!props.sandboxId) { + return ''; + } + return `${BASE_SANDBOX_URL}/${props.sandboxId}`; + }, [props.sandboxId]); + React.useEffect(() => { if (!props.injectVanillaJS) { return; @@ -64,24 +74,29 @@ export const Container = (props: { > - - {`Open in `} - - {`Open in `} + - CodeSandbox - - - - + + CodeSandbox + + + + + )} {/* Date: Tue, 21 Mar 2023 17:54:07 +0100 Subject: [PATCH 6/6] refactor: cleanup --- packages/dockview-core/src/hostedContainer.ts | 92 ------------------- packages/dockview-core/src/index.ts | 2 - .../dockview-core/src/splitview/splitview.ts | 3 +- .../src/dockview/reactWatermarkPart.ts | 1 - 4 files changed, 1 insertion(+), 97 deletions(-) delete mode 100644 packages/dockview-core/src/hostedContainer.ts diff --git a/packages/dockview-core/src/hostedContainer.ts b/packages/dockview-core/src/hostedContainer.ts deleted file mode 100644 index 774b12d34..000000000 --- a/packages/dockview-core/src/hostedContainer.ts +++ /dev/null @@ -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(); - readonly onDidFocus: Event = this._onDidFocus.event; - - private readonly _onDidBlur = new Emitter(); - readonly onDidBlur: Event = 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(); - } -} diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts index fb7052653..35aec243e 100644 --- a/packages/dockview-core/src/index.ts +++ b/packages/dockview-core/src/index.ts @@ -1,5 +1,3 @@ -export * from './hostedContainer'; - export * from './dnd/dataTransfer'; export { watchElementResize } from './dom'; diff --git a/packages/dockview-core/src/splitview/splitview.ts b/packages/dockview-core/src/splitview/splitview.ts index 88db24df3..447529cfe 100644 --- a/packages/dockview-core/src/splitview/splitview.ts +++ b/packages/dockview-core/src/splitview/splitview.ts @@ -9,10 +9,9 @@ import { toggleClass, getElementsByTagName, } from '../dom'; -import { clamp } from '../math'; import { Event, Emitter } from '../events'; import { pushToStart, pushToEnd, firstIndex } from '../array'; -import { range } from '../math'; +import { range, clamp } from '../math'; import { ViewItem } from './viewItem'; export enum Orientation { diff --git a/packages/dockview/src/dockview/reactWatermarkPart.ts b/packages/dockview/src/dockview/reactWatermarkPart.ts index 940bf6bec..587650568 100644 --- a/packages/dockview/src/dockview/reactWatermarkPart.ts +++ b/packages/dockview/src/dockview/reactWatermarkPart.ts @@ -1,6 +1,5 @@ import * as React from 'react'; import { ReactPart, ReactPortalStore } from '../react'; -import { IGroupPanelBaseProps } from './dockview'; import { PanelUpdateEvent, DockviewGroupPanel,