From 17c0f6e575eec301f607719a61c84f3fc1e7f694 Mon Sep 17 00:00:00 2001 From: Peter Bech Date: Wed, 26 Jul 2023 21:40:13 +0200 Subject: [PATCH 1/4] feat: added the option for 'no-drop-target' for locked on dockview groups --- .../src/dockview/dockviewGroupPanel.ts | 7 +- .../src/dockview/dockviewGroupPanelModel.ts | 33 ++++++--- packages/docs/docs/components/dockview.mdx | 13 ++++ .../lockedgroup-dockview/package.json | 32 +++++++++ .../lockedgroup-dockview/public/index.html | 44 ++++++++++++ .../lockedgroup-dockview/src/app.tsx | 71 +++++++++++++++++++ .../lockedgroup-dockview/src/index.tsx | 20 ++++++ .../lockedgroup-dockview/src/styles.css | 16 +++++ .../lockedgroup-dockview/tsconfig.json | 18 +++++ 9 files changed, 241 insertions(+), 13 deletions(-) create mode 100644 packages/docs/sandboxes/lockedgroup-dockview/package.json create mode 100644 packages/docs/sandboxes/lockedgroup-dockview/public/index.html create mode 100644 packages/docs/sandboxes/lockedgroup-dockview/src/app.tsx create mode 100644 packages/docs/sandboxes/lockedgroup-dockview/src/index.tsx create mode 100644 packages/docs/sandboxes/lockedgroup-dockview/src/styles.css create mode 100644 packages/docs/sandboxes/lockedgroup-dockview/tsconfig.json diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts index 0a1ccd52f..6823cbd4d 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts @@ -5,6 +5,7 @@ import { GroupOptions, IDockviewGroupPanelModel, IHeader, + DockviewGroupPanelLocked, } from './dockviewGroupPanelModel'; import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel'; import { IDockviewPanel } from '../dockview/dockviewPanel'; @@ -16,7 +17,7 @@ import { export interface IDockviewGroupPanel extends IGridviewPanel { model: IDockviewGroupPanelModel; - locked: boolean; + locked: DockviewGroupPanelLocked; readonly size: number; readonly panels: IDockviewPanel[]; readonly activePanel: IDockviewPanel | undefined; @@ -46,11 +47,11 @@ export class DockviewGroupPanel return this._model; } - get locked(): boolean { + get locked(): DockviewGroupPanelLocked { return this._model.locked; } - set locked(value: boolean) { + set locked(value: DockviewGroupPanelLocked) { this._model.locked = value; } diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index fb15a8895..5bf54d466 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -48,7 +48,7 @@ interface GroupMoveEvent { } interface CoreGroupOptions { - locked?: boolean; + locked?: DockviewGroupPanelLocked; hideHeader?: boolean; } @@ -79,6 +79,8 @@ export interface IHeader { hidden: boolean; } +export type DockviewGroupPanelLocked = boolean | 'no-drop-target'; + export interface IDockviewGroupPanelModel extends IPanel { readonly isActive: boolean; readonly size: number; @@ -91,7 +93,7 @@ export interface IDockviewGroupPanelModel extends IPanel { readonly onDidRemovePanel: Event; readonly onDidActivePanelChange: Event; readonly onMove: Event; - locked: boolean; + locked: DockviewGroupPanelLocked; setActive(isActive: boolean): void; initialize(): void; // state @@ -136,7 +138,7 @@ export class DockviewGroupPanelModel private _activePanel: IDockviewPanel | undefined; private watermark?: IWatermarkRenderer; private _isGroupActive = false; - private _locked = false; + private _locked: DockviewGroupPanelLocked = false; private _isFloating = false; private _rightHeaderActions: IHeaderActionsRenderer | undefined; private _leftHeaderActions: IHeaderActionsRenderer | undefined; @@ -179,14 +181,18 @@ export class DockviewGroupPanelModel return this._activePanel; } - get locked(): boolean { + get locked(): DockviewGroupPanelLocked { return this._locked; } - set locked(value: boolean) { + set locked(value: DockviewGroupPanelLocked) { this._locked = value; - toggleClass(this.container, 'locked-groupview', value); + toggleClass( + this.container, + 'locked-groupview', + value === 'no-drop-target' || value + ); } get isActive(): boolean { @@ -261,7 +267,10 @@ export class DockviewGroupPanelModel this.dropTarget = new Droptarget(this.contentContainer.element, { acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'], canDisplayOverlay: (event, position) => { - if (this.locked && position === 'center') { + if ( + this.locked === 'no-drop-target' || + (this.locked && position === 'center') + ) { return false; } @@ -303,7 +312,7 @@ export class DockviewGroupPanelModel ); this.header.hidden = !!options.hideHeader; - this.locked = !!options.locked; + this.locked = options.locked || false; this.addDisposables( this.tabsContainer.onDrop((event) => { @@ -385,8 +394,8 @@ export class DockviewGroupPanelModel id: this.id, }; - if (this.locked) { - result.locked = true; + if (this.locked !== false) { + result.locked = this.locked; } if (this.header.hidden) { @@ -746,6 +755,10 @@ export class DockviewGroupPanelModel position: Position, index?: number ): void { + if (this.locked === 'no-drop-target') { + return; + } + const data = getPanelData(); if (data && data.viewId === this.accessor.id) { diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index b26720281..cf82ec4f5 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -26,6 +26,7 @@ import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/sr import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app'; import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app'; import DockviewFloating from '@site/sandboxes/floatinggroup-dockview/src/app'; +import DockviewLockedGroup from '@site/sandboxes/lockedgroup-dockview/src/app'; import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app'; import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app'; @@ -776,8 +777,20 @@ You can still add groups to a locked panel programatically using the API though. ```tsx panel.group.locked = true; + +// Or + +panel.group.locked = 'no-drop-target`; ``` +Use `true` to keep drop zones top, right, bottom, left for the group. Use `no-drop-target` to disable all drop zones. For you to get a +better understanding of what this means, try and drag the panels in the example below to the locked groups. + + + ### Group Controls Panel `DockviewReact` accepts `leftHeaderActionsComponent` and `rightHeaderActionsComponent` which expect a React component with props `IDockviewHeaderActionsProps`. diff --git a/packages/docs/sandboxes/lockedgroup-dockview/package.json b/packages/docs/sandboxes/lockedgroup-dockview/package.json new file mode 100644 index 000000000..ab2f1757f --- /dev/null +++ b/packages/docs/sandboxes/lockedgroup-dockview/package.json @@ -0,0 +1,32 @@ +{ + "name": "simple-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "typescript": "^4.9.5", + "react-scripts": "*" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/lockedgroup-dockview/public/index.html b/packages/docs/sandboxes/lockedgroup-dockview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/lockedgroup-dockview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/lockedgroup-dockview/src/app.tsx b/packages/docs/sandboxes/lockedgroup-dockview/src/app.tsx new file mode 100644 index 000000000..f63584d52 --- /dev/null +++ b/packages/docs/sandboxes/lockedgroup-dockview/src/app.tsx @@ -0,0 +1,71 @@ +import { + DockviewReact, + DockviewReadyEvent, + IDockviewPanelProps, +} from 'dockview'; +import * as React from 'react'; + +const components = { + default: (props: IDockviewPanelProps<{ title: string }>) => { + return ( +
+ {props.params.title} +
+ ); + }, +}; + +export const App: React.FC = (props: { theme?: string }) => { + const onReady = (event: DockviewReadyEvent) => { + const panel1 = event.api.addPanel({ + id: 'locked1', + component: 'default', + params: { + title: 'Locked', + }, + }); + + panel1.group.locked = true; + panel1.group.header.hidden = true; + + event.api.addPanel({ + id: 'Drag me', + component: 'default', + params: { + title: '', + }, + position: { referencePanel: 'locked1', direction: 'right' }, + }); + + event.api.addPanel({ + id: 'Drag me too', + component: 'default', + params: { + title: '', + }, + position: { referencePanel: 'Drag me', direction: 'right' }, + }); + + const panel3 = event.api.addPanel({ + id: 'locked2', + component: 'default', + params: { + title: 'Locked with no drop target', + }, + position: { referencePanel: 'Drag me too', direction: 'right' }, + }); + + panel3.group.locked = 'no-drop-target'; + panel3.group.header.hidden = true; + }; + + return ( + + ); +}; + +export default App; diff --git a/packages/docs/sandboxes/lockedgroup-dockview/src/index.tsx b/packages/docs/sandboxes/lockedgroup-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/lockedgroup-dockview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/lockedgroup-dockview/src/styles.css b/packages/docs/sandboxes/lockedgroup-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/lockedgroup-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/lockedgroup-dockview/tsconfig.json b/packages/docs/sandboxes/lockedgroup-dockview/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/lockedgroup-dockview/tsconfig.json @@ -0,0 +1,18 @@ +{ + "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 + } +} From 55802a7a165f7c55bb9e62260ab56ce9425a2f63 Mon Sep 17 00:00:00 2001 From: Peter Bech Date: Wed, 26 Jul 2023 21:52:29 +0200 Subject: [PATCH 2/4] patch: renamed lockedgroup-dockview sandbox package name to match directory name --- packages/docs/sandboxes/lockedgroup-dockview/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/sandboxes/lockedgroup-dockview/package.json b/packages/docs/sandboxes/lockedgroup-dockview/package.json index ab2f1757f..3f7605d60 100644 --- a/packages/docs/sandboxes/lockedgroup-dockview/package.json +++ b/packages/docs/sandboxes/lockedgroup-dockview/package.json @@ -1,5 +1,5 @@ { - "name": "simple-dockview", + "name": "lockedgroup-dockview", "description": "", "keywords": [ "dockview" From b551d93dacf80d0bf81b8b5cc31b90d73d583362 Mon Sep 17 00:00:00 2001 From: Peter Bech Date: Wed, 26 Jul 2023 22:03:51 +0200 Subject: [PATCH 3/4] added lockedgroup-dockview to the codesandbox ci configuration --- .codesandbox/ci.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index f04bc5e88..52156e5a1 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -15,6 +15,7 @@ "/packages/docs/sandboxes/groupcontol-dockview", "/packages/docs/sandboxes/iframe-dockview", "/packages/docs/sandboxes/layout-dockview", + "/packages/docs/sandboxes/lockedgroup-dockview", "/packages/docs/sandboxes/nativeapp-dockview", "/packages/docs/sandboxes/nested-dockview", "/packages/docs/sandboxes/rendering-dockview", From d577f0238c514c9f8e5d83e2500fce6c988e7ddf Mon Sep 17 00:00:00 2001 From: Peter Bech <1520592+techbech@users.noreply.github.com> Date: Thu, 27 Jul 2023 10:28:24 +0200 Subject: [PATCH 4/4] Fix wrong quotation sign in docs --- packages/docs/docs/components/dockview.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index cf82ec4f5..64092733d 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -780,7 +780,7 @@ panel.group.locked = true; // Or -panel.group.locked = 'no-drop-target`; +panel.group.locked = 'no-drop-target'; ``` Use `true` to keep drop zones top, right, bottom, left for the group. Use `no-drop-target` to disable all drop zones. For you to get a