diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index d727a6c89..a6a13434a 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -20,9 +20,13 @@ "/packages/docs/sandboxes/resize-dockview", "/packages/docs/sandboxes/resizecontainer-dockview", "/packages/docs/sandboxes/simple-dockview", + "/packages/docs/sandboxes/tabheight-dockview", "/packages/docs/sandboxes/updatetitle-dockview", - "/packages/docs/sandboxes/vanilla-dockview", - "/packages/docs/sandboxes/watermark-dockview" + "/packages/docs/sandboxes/watermark-dockview", + "/packages/docs/sandboxes/typescript/fullwidthtab-dockview", + "/packages/docs/sandboxes/typescript/simple-dockview", + "/packages/docs/sandboxes/typescript/tabheight-dockview", + "/packages/docs/sandboxes/typescript/vanilla-dockview" ], "node": "16" } \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 000000000..e8cd8f889 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,33 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +[dockview.dev](https://dockview.dev) provides a number of examples with Code Sandbox templates. Are you able to produce the bug by forking one of those templates? Sharing a link to the forked sandbox with the bug would be extremely helpful. + +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + - Browser [e.g. chrome, safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 000000000..bbcbbe7d6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,20 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '' +labels: '' +assignees: '' + +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml index 9c242d324..6b82733a6 100644 --- a/.github/workflows/deploy-docs.yml +++ b/.github/workflows/deploy-docs.yml @@ -33,8 +33,10 @@ jobs: working-directory: packages/dockview - run: npm run build working-directory: packages/docs - - run: npm run deploy-docs - working-directory: packages/docs + - run: npm run docs + working-directory: . + - run: npm run package-docs + working-directory: . - name: Deploy 🚀 uses: JamesIves/github-pages-deploy-action@3.7.1 with: diff --git a/.gitignore b/.gitignore index 5f1ae726d..e3f290550 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,4 @@ test-report.xml *.code-workspace yarn-error.log /build +/docs/ diff --git a/README.md b/README.md index 214dc0e75..cf7eece3a 100644 --- a/README.md +++ b/README.md @@ -15,9 +15,9 @@ ## -Please see the website: https://dockview.dev +![](packages/docs/static/img/splashscreen.gif) -Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/ +Please see the website: https://dockview.dev ## Features @@ -29,11 +29,11 @@ Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@l - Tabular docking and Drag and Drop support - 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). ``` npm install --save dockview diff --git a/lerna.json b/lerna.json index e1f41352e..b2d59ced6 100644 --- a/lerna.json +++ b/lerna.json @@ -3,7 +3,7 @@ "packages/*" ], "useWorkspaces": true, - "version": "1.7.0", + "version": "1.7.2", "npmClient": "yarn", "command": { "publish": { diff --git a/module-build/tsconfig.esm.json b/module-build/tsconfig.esm.json deleted file mode 100644 index 1520dd78c..000000000 --- a/module-build/tsconfig.esm.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "compilerOptions": { - "module": "ES2020", - "declaration": true, - "target": "es6", - "moduleResolution": "node", - "esModuleInterop": true, - "downlevelIteration": true, - "incremental": true, - "noImplicitReturns": true, - "noImplicitAny": true, - "allowUnreachableCode": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "declarationMap": true, - "lib": [ - "ES2015", - "ES2016.Array.Include", - "ES2017.String", - "ES2018.Promise", - "ES2019", - "DOM", - ] - } -} diff --git a/package.json b/package.json index 8d35430d0..cf33e48ae 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,9 @@ "bootstrap": "lerna bootstrap", "test:cov": "jest --coverage", "version-beta-build": "lerna version prerelease --preid beta", - "publish-app": "lerna publish" + "publish-app": "lerna publish", + "docs": "typedoc", + "package-docs": "node scripts/package-docs.js" }, "repository": { "type": "git", @@ -56,6 +58,7 @@ "ts-jest": "^29.0.5", "ts-loader": "^9.4.2", "tslib": "^2.5.0", + "typedoc": "^0.24.7", "typescript": "^4.9.5", "webpack": "^5.75.0", "webpack-cli": "^5.0.1", @@ -65,4 +68,4 @@ "jest": "^29.5.0", "ts-node": "^10.9.1" } -} \ No newline at end of file +} diff --git a/packages/dockview-core/README.md b/packages/dockview-core/README.md index 214dc0e75..57d14843e 100644 --- a/packages/dockview-core/README.md +++ b/packages/dockview-core/README.md @@ -1,7 +1,7 @@

dockview

-

Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support written in TypeScript

+

Zero dependency layout manager supporting tabs, grids and splitviews written in TypeScript

@@ -17,8 +17,6 @@ Please see the website: https://dockview.dev -Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/ - ## Features - Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with @@ -29,20 +27,20 @@ Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@l - Tabular docking and Drag and Drop support - 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-core@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/). +You can install dockview-core from [npm](https://www.npmjs.com/package/dockview-core). ``` -npm install --save dockview +npm install --save dockview-core ``` -Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css` and attach a theme. +Within your project you must import or reference the stylesheet at `dockview-core/dist/styles/dockview.css` and attach a theme. ```css -@import '~dockview/dist/styles/dockview.css'; +@import '~dockview-core/dist/styles/dockview.css'; ``` You should also attach a dockview theme to an element containing your components. For example: diff --git a/packages/dockview-core/jest.config.ts b/packages/dockview-core/jest.config.ts index e047e27b2..d5aa1ca7f 100644 --- a/packages/dockview-core/jest.config.ts +++ b/packages/dockview-core/jest.config.ts @@ -20,6 +20,14 @@ const config: JestConfigWithTsJest = { coverageDirectory: '/packages/dockview-core/coverage/', testResultsProcessor: 'jest-sonar-reporter', testEnvironment: 'jsdom', + transform: { + '^.+\\.tsx?$': [ + 'ts-jest', + { + tsconfig: '/tsconfig.test.json', + }, + ], + }, }; export default config; diff --git a/packages/dockview-core/package.json b/packages/dockview-core/package.json index e2a05b339..cdceee251 100644 --- a/packages/dockview-core/package.json +++ b/packages/dockview-core/package.json @@ -1,6 +1,6 @@ { "name": "dockview-core", - "version": "1.7.0", + "version": "1.7.2", "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support", "main": "./dist/cjs/index.js", "types": "./dist/cjs/index.d.ts", @@ -20,7 +20,7 @@ "build:esm": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.esm.json --extendedDiagnostics", "build:modulefiles": "rollup -c", "build": "npm run build:ci && npm run build:modulefiles", - "clean": "rimraf dist/ .build/", + "clean": "rimraf dist/ .build/ .rollup.cache/", "prepublishOnly": "npm run rebuild && npm run test", "docs": "typedoc", "rebuild": "npm run clean && npm run build", diff --git a/packages/dockview-core/rollup.config.js b/packages/dockview-core/rollup.config.js index ad925e4ff..cd38f7e4b 100644 --- a/packages/dockview-core/rollup.config.js +++ b/packages/dockview-core/rollup.config.js @@ -57,9 +57,13 @@ function createBundle(format, options) { ].join('\n'), }; + const plugins = [ typescript({ tsconfig: 'tsconfig.esm.json', + compilerOptions: { + declaration: false, + }, }), ]; diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 25206344b..253cd4f1e 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -473,7 +473,6 @@ describe('dockviewComponent', () => { title: 'panel5', }, }, - options: { tabHeight: 25 }, }); expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({ @@ -558,7 +557,6 @@ describe('dockviewComponent', () => { title: 'panel5', }, }, - options: { tabHeight: 25 }, }); }); @@ -989,7 +987,6 @@ describe('dockviewComponent', () => { title: 'view_3_title', }, }, - options: {}, }); expect(removedGroups.length).toBe(2); @@ -1512,7 +1509,6 @@ describe('dockviewComponent', () => { title: 'panel5', }, }, - options: { tabHeight: 25 }, }); jest.runAllTimers(); @@ -1547,7 +1543,6 @@ describe('dockviewComponent', () => { orientation: Orientation.VERTICAL, }, panels: {}, - options: { tabHeight: 25 }, }); jest.runAllTimers(); @@ -1647,7 +1642,6 @@ describe('dockviewComponent', () => { title: 'panel5', }, }, - options: { tabHeight: 25 }, }); }); @@ -1709,7 +1703,6 @@ describe('dockviewComponent', () => { title: 'panel2', }, }, - options: { tabHeight: 25 }, }); expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({ @@ -1756,7 +1749,6 @@ describe('dockviewComponent', () => { title: 'panel2', }, }, - options: { tabHeight: 25 }, }); }); @@ -1822,7 +1814,6 @@ describe('dockviewComponent', () => { title: 'panel3', }, }, - options: { tabHeight: 25 }, }); const group = dockview.getGroupPanel('panel2')!.api.group; @@ -1928,7 +1919,7 @@ describe('dockviewComponent', () => { id: 'group-1', activeView: 'panel1', }, - size: 1000, + size: 500, }, ], size: 1000, @@ -1949,7 +1940,6 @@ describe('dockviewComponent', () => { title: 'panel2', }, }, - options: {}, }); }); @@ -2090,7 +2080,6 @@ describe('dockviewComponent', () => { title: 'panel3', }, }, - options: {}, }); }); @@ -2218,7 +2207,6 @@ describe('dockviewComponent', () => { title: 'panel3', }, }, - options: {}, }); }); @@ -2304,7 +2292,6 @@ describe('dockviewComponent', () => { size: 0, }, }, - options: {}, panels: {}, }); }); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts index b1cf604b0..aacf0ca93 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts @@ -4,27 +4,39 @@ import { } from '../../dockview/dockviewComponent'; import { DockviewPanelModel } from '../../dockview/dockviewPanelModel'; import { IContentRenderer, ITabRenderer } from '../../dockview/types'; +import { GroupPanelFrameworkComponentFactory } from '../../dockview/options'; +import { DefaultTab } from '../../dockview/components/tab/defaultTab'; describe('dockviewGroupPanel', () => { - test('that dispose is called on content and tab renderers when present', () => { - const contentMock = jest.fn(() => { + let contentMock: jest.Mock; + let tabMock: jest.Mock; + let accessorMock: jest.Mock; + + beforeEach(() => { + contentMock = jest.fn(() => { const partial: Partial = { element: document.createElement('div'), dispose: jest.fn(), + update: jest.fn(), + onGroupChange: jest.fn(), + onPanelVisibleChange: jest.fn(), }; return partial as IContentRenderer; }); - const tabMock = jest.fn(() => { + tabMock = jest.fn(() => { const partial: Partial = { element: document.createElement('div'), dispose: jest.fn(), + update: jest.fn(), + onGroupChange: jest.fn(), + onPanelVisibleChange: jest.fn(), }; return partial as IContentRenderer; }); - const accessorMock = jest.fn, []>(() => { - return { + accessorMock = jest.fn(() => { + const partial: Partial = { options: { components: { contentComponent: contentMock, @@ -34,8 +46,12 @@ describe('dockviewGroupPanel', () => { }, }, }; - }); + return partial as DockviewComponent; + }); + }); + + test('that dispose is called on content and tab renderers when present', () => { const cut = new DockviewPanelModel( new accessorMock(), 'id', @@ -50,34 +66,6 @@ describe('dockviewGroupPanel', () => { }); test('that update is called on content and tab renderers when present', () => { - const contentMock = jest.fn(() => { - const partial: Partial = { - element: document.createElement('div'), - update: jest.fn(), - }; - return partial as IContentRenderer; - }); - - const tabMock = jest.fn(() => { - const partial: Partial = { - element: document.createElement('div'), - update: jest.fn(), - }; - return partial as IContentRenderer; - }); - - const accessorMock = jest.fn, []>(() => { - return { - options: { - components: { - contentComponent: contentMock, - }, - tabComponents: { - tabComponent: tabMock, - }, - }, - }; - }); const cut = new DockviewPanelModel( new accessorMock(), 'id', @@ -94,36 +82,6 @@ describe('dockviewGroupPanel', () => { }); test('that events are fired', () => { - const contentMock = jest.fn(() => { - const partial: Partial = { - element: document.createElement('div'), - onGroupChange: jest.fn(), - onPanelVisibleChange: jest.fn(), - }; - return partial as IContentRenderer; - }); - - const tabMock = jest.fn(() => { - const partial: Partial = { - element: document.createElement('div'), - onGroupChange: jest.fn(), - onPanelVisibleChange: jest.fn(), - }; - return partial as IContentRenderer; - }); - - const accessorMock = jest.fn, []>(() => { - return { - options: { - components: { - contentComponent: contentMock, - }, - tabComponents: { - tabComponent: tabMock, - }, - }, - }; - }); const cut = new DockviewPanelModel( new accessorMock(), 'id', @@ -168,4 +126,176 @@ describe('dockviewGroupPanel', () => { expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(2); expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(2); }); + + test('that the default tab is created', () => { + accessorMock = jest.fn(() => { + const partial: Partial = { + options: { + components: { + contentComponent: contentMock, + }, + tabComponents: { + tabComponent: jest + .fn() + .mockImplementation(() => tabMock), + }, + }, + }; + + return partial as DockviewComponent; + }); + + const cut = new DockviewPanelModel( + new accessorMock(), + 'id', + 'contentComponent', + 'tabComponent' + ); + + expect(cut.tab).toEqual(tabMock); + }); + + test('that the provided default tab is chosen when no implementation is provided', () => { + accessorMock = jest.fn(() => { + const partial: Partial = { + options: { + components: { + contentComponent: contentMock, + }, + tabComponents: { + tabComponent: jest + .fn() + .mockImplementation(() => tabMock), + }, + defaultTabComponent: 'tabComponent', + }, + }; + + return partial as DockviewComponent; + }); + + const cut = new DockviewPanelModel( + new accessorMock(), + 'id', + 'contentComponent' + ); + + expect(cut.tab).toEqual(tabMock); + }); + + test('that the framework tab is created when provided tab is a framework tab', () => { + const tab = jest.fn(); + const tabFactory = jest.fn().mockImplementation(() => tab); + + accessorMock = jest.fn(() => { + const partial: Partial = { + options: { + components: { + contentComponent: contentMock, + }, + frameworkTabComponents: { + tabComponent: tabMock, + }, + frameworkComponentFactory: (< + Partial + >{ + tab: { createComponent: tabFactory }, + }) as GroupPanelFrameworkComponentFactory, + }, + }; + + return partial as DockviewComponent; + }); + + const cut = new DockviewPanelModel( + new accessorMock(), + 'id', + 'contentComponent', + 'tabComponent' + ); + + expect(tabFactory).toHaveBeenCalledWith('id', 'tabComponent', tabMock); + expect(cut.tab).toEqual(tab); + }); + + test('that is library default tab instance is created when no alternative exists', () => { + accessorMock = jest.fn(() => { + const partial: Partial = { + options: { + components: { + contentComponent: contentMock, + }, + }, + }; + + return partial as DockviewComponent; + }); + + const cut = new DockviewPanelModel( + new accessorMock(), + 'id', + 'contentComponent' + ); + + expect(cut.tab instanceof DefaultTab).toBeTruthy(); + }); + + test('that the default content is created', () => { + accessorMock = jest.fn(() => { + const partial: Partial = { + options: { + components: { + contentComponent: jest.fn().mockImplementation(() => { + return contentMock; + }), + }, + }, + }; + + return partial as DockviewComponent; + }); + + const cut = new DockviewPanelModel( + new accessorMock(), + 'id', + 'contentComponent' + ); + + expect(cut.content).toEqual(contentMock); + }); + + test('that the framework content is created', () => { + const content = jest.fn(); + const contentFactory = jest.fn().mockImplementation(() => content); + + accessorMock = jest.fn(() => { + const partial: Partial = { + options: { + frameworkComponents: { + contentComponent: contentMock, + }, + frameworkComponentFactory: (< + Partial + >{ + content: { createComponent: contentFactory }, + }) as GroupPanelFrameworkComponentFactory, + }, + }; + + return partial as DockviewComponent; + }); + + const cut = new DockviewPanelModel( + new accessorMock(), + 'id', + 'contentComponent' + ); + + expect(contentFactory).toHaveBeenCalledWith( + 'id', + 'contentComponent', + contentMock + ); + expect(cut.content).toEqual(content); + }); }); diff --git a/packages/dockview-core/src/__tests__/gridview/baseComponentGridview.spec.ts b/packages/dockview-core/src/__tests__/gridview/baseComponentGridview.spec.ts index 592598807..27e8925b1 100644 --- a/packages/dockview-core/src/__tests__/gridview/baseComponentGridview.spec.ts +++ b/packages/dockview-core/src/__tests__/gridview/baseComponentGridview.spec.ts @@ -114,7 +114,7 @@ describe('baseComponentGridview', () => { proportionalLayout: true, }); - const events: TestPanel[] = []; + const events: (TestPanel | undefined)[] = []; const disposable = new CompositeDisposable( cut.onDidAddGroup((event) => { diff --git a/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts index d796b888a..79cdd3de5 100644 --- a/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts +++ b/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts @@ -1,5 +1,31 @@ -import { Gridview } from '../../gridview/gridview'; -import { Orientation } from '../../splitview/splitview'; +import { Emitter, Event } from '../../events'; +import { BranchNode } from '../../gridview/branchNode'; +import { + Gridview, + IGridView, + IViewSize, + orthogonal, +} from '../../gridview/gridview'; +import { Orientation, Sizing } from '../../splitview/splitview'; + +class MockGridview implements IGridView { + minimumWidth: number = 0; + maximumWidth: number = Number.MAX_VALUE; + minimumHeight: number = 0; + maximumHeight: number = Number.MAX_VALUE; + onDidChange: Event = new Emitter< + IViewSize | undefined + >().event; + element: HTMLElement = document.createElement('div'); + + layout(width: number, height: number): void { + // + } + + toJSON(): object { + return {}; + } +} describe('gridview', () => { let container: HTMLElement; @@ -25,4 +51,69 @@ describe('gridview', () => { expect(container.childNodes.length).toBe(0); }); + + test('insertOrthogonalSplitviewAtRoot #1', () => { + const gridview = new Gridview( + false, + { separatorBorder: '' }, + Orientation.HORIZONTAL + ); + gridview.layout(1000, 1000); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0]); + + gridview.insertOrthogonalSplitviewAtRoot(); + + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0, 1]); + + function checkOrientationFlipsAtEachLevel(root: BranchNode) { + const orientation = root.orientation; + const orthogonalOrientation = orthogonal(orientation); + + for (const child of root.children) { + if (child.orientation !== orthogonalOrientation) { + fail('child cannot have the same orientation as parent'); + } + if (child instanceof BranchNode) { + checkOrientationFlipsAtEachLevel(child); + } + } + } + + checkOrientationFlipsAtEachLevel((gridview as any).root as BranchNode); + }); + + test('insertOrthogonalSplitviewAtRoot #2', () => { + const gridview = new Gridview( + false, + { separatorBorder: '' }, + Orientation.HORIZONTAL + ); + gridview.layout(1000, 1000); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + gridview.insertOrthogonalSplitviewAtRoot(); + + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + function checkOrientationFlipsAtEachLevel(root: BranchNode) { + const orientation = root.orientation; + const orthogonalOrientation = orthogonal(orientation); + + for (const child of root.children) { + if (child.orientation !== orthogonalOrientation) { + fail('child cannot have the same orientation as parent'); + } + if (child instanceof BranchNode) { + checkOrientationFlipsAtEachLevel(child); + } + } + } + + checkOrientationFlipsAtEachLevel((gridview as any).root as BranchNode); + }); }); diff --git a/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts index 4bbc0237f..b00522d05 100644 --- a/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts @@ -18,11 +18,9 @@ import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer'; import { CompositeDisposable } from '../../lifecycle'; import { DockviewPanelApi } from '../../api/dockviewPanelApi'; import { IDockviewPanel } from '../../dockview/dockviewPanel'; -import { - IDockviewPanelModel, - DockviewPanelModel, -} from '../../dockview/dockviewPanelModel'; +import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel'; import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; +import { WatermarkRendererInitParameters } from '../../dockview/types'; enum GroupChangeKind2 { ADD_PANEL, @@ -76,7 +74,7 @@ class Watermark implements IWatermarkRenderer { return 'watermark-id'; } - init(params: GroupPanelPartInitParameters) { + init(params: WatermarkRendererInitParameters) { // } @@ -170,7 +168,7 @@ class TestHeaderPart implements ITabRenderer { export class TestPanel implements IDockviewPanel { private _group: DockviewGroupPanel | undefined; - private _params: IGroupPanelInitParameters; + private _params: IGroupPanelInitParameters | undefined; readonly view: IDockviewPanelModel; get title() { @@ -237,6 +235,8 @@ describe('groupview', () => { removePanelMock = jest.fn(); removeGroupMock = jest.fn(); + options = {}; + dockview = (>{ options: {}, createWatermarkComponent: () => new Watermark(), @@ -248,9 +248,6 @@ describe('groupview', () => { onDidRemovePanel: jest.fn(), }) as DockviewComponent; - options = { - tabHeight: 30, - }; groupview = new DockviewGroupPanel(dockview, 'groupview-1', options); groupview.initialize(); }); @@ -261,7 +258,6 @@ describe('groupview', () => { const panel3 = new TestPanel('panel3', jest.fn() as any); const groupview2 = new DockviewGroupPanel(dockview, 'groupview-2', { - tabHeight: 25, panels: [panel1, panel2, panel3], activePanel: panel2, }); @@ -518,7 +514,7 @@ describe('groupview', () => { dockviewComponent, 'id', {}, - null + null as any ); expect(cut.toJSON()).toEqual({ @@ -541,7 +537,7 @@ describe('groupview', () => { dockviewComponent, 'id', {}, - null + null as any ); cut.locked = true; @@ -570,25 +566,25 @@ describe('groupview', () => { dockviewComponent, 'id', {}, - null + null as any ); const contentContainer = groupviewContainer .getElementsByClassName('content-container') .item(0)!.childNodes; - const panel1 = new TestPanel('id_1', null); + const panel1 = new TestPanel('id_1', null as any); cut.openPanel(panel1); expect(contentContainer.length).toBe(1); expect(contentContainer.item(0)).toBe(panel1.view.content.element); - const panel2 = new TestPanel('id_2', null); + const panel2 = new TestPanel('id_2', null as any); cut.openPanel(panel2); expect(contentContainer.length).toBe(1); expect(contentContainer.item(0)).toBe(panel2.view.content.element); - const panel3 = new TestPanel('id_2', null); + const panel3 = new TestPanel('id_2', null as any); cut.openPanel(panel3, { skipSetPanelActive: true }); expect(contentContainer.length).toBe(1); diff --git a/packages/dockview-core/src/api/component.api.ts b/packages/dockview-core/src/api/component.api.ts index 66b10e7fa..d4c072351 100644 --- a/packages/dockview-core/src/api/component.api.ts +++ b/packages/dockview-core/src/api/component.api.ts @@ -423,14 +423,6 @@ export class DockviewApi implements CommonApi { constructor(private readonly component: IDockviewComponent) {} - getTabHeight(): number | undefined { - return this.component.tabHeight; - } - - setTabHeight(height: number | undefined): void { - this.component.tabHeight = height; - } - focus(): void { this.component.focus(); } diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts index 2472945a4..debdf42e0 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts @@ -20,7 +20,6 @@ export interface ITabsContainer extends IDisposable { readonly element: HTMLElement; readonly panels: string[]; readonly size: number; - height: number | undefined; delete: (id: string) => void; indexOf: (id: string) => number; onDrop: Event; @@ -48,7 +47,6 @@ export class TabsContainer private selectedIndex = -1; private actions: HTMLElement | undefined; - private _height: number | undefined; private _hidden = false; private readonly _onDrop = new Emitter(); @@ -62,24 +60,6 @@ export class TabsContainer return this.tabs.length; } - get height(): number | undefined { - return this._height; - } - - set height(value: number | undefined) { - this._height = value; - if (typeof value !== 'number') { - this.element.style.removeProperty( - '--dv-tabs-and-actions-container-height' - ); - } else { - this.element.style.setProperty( - '--dv-tabs-and-actions-container-height', - `${value}px` - ); - } - } - get hidden(): boolean { return this._hidden; } @@ -139,8 +119,6 @@ export class TabsContainer this._element = document.createElement('div'); this._element.className = 'tabs-and-actions-container'; - this.height = accessor.options.tabHeight; - toggleClass( this._element, 'dv-full-width-single-tab', diff --git a/packages/dockview-core/src/dockview/deserializer.ts b/packages/dockview-core/src/dockview/deserializer.ts index 5c6936c4d..82daa7381 100644 --- a/packages/dockview-core/src/dockview/deserializer.ts +++ b/packages/dockview-core/src/dockview/deserializer.ts @@ -1,9 +1,7 @@ -import { GroupviewPanelState, ITabRenderer } from './types'; +import { GroupviewPanelState } from './types'; import { DockviewGroupPanel } from './dockviewGroupPanel'; import { DockviewPanel, IDockviewPanel } from './dockviewPanel'; import { IDockviewComponent } from './dockviewComponent'; -import { createComponent } from '../panel/componentFactory'; -import { DefaultTab } from './components/tab/defaultTab'; import { DockviewPanelModel } from './dockviewPanelModel'; import { DockviewApi } from '../api/component.api'; @@ -14,7 +12,7 @@ export interface IPanelDeserializer { ): IDockviewPanel; } -// depreciated +// @depreciated interface LegacyState extends GroupviewPanelState { view?: { tab?: { id: string }; @@ -42,30 +40,6 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer { ? viewData.tab?.id : panelData.tabComponent; - let tab: ITabRenderer; - - if (tabComponent) { - tab = createComponent( - panelId, - tabComponent, - this.layout.options.tabComponents, - this.layout.options.frameworkTabComponents, - this.layout.options.frameworkComponentFactory?.tab, - () => new DefaultTab() - ); - } else if (this.layout.options.defaultTabComponent) { - tab = createComponent( - panelId, - this.layout.options.defaultTabComponent, - this.layout.options.tabComponents, - this.layout.options.frameworkTabComponents, - this.layout.options.frameworkComponentFactory?.tab, - () => new DefaultTab() - ); - } else { - tab = new DefaultTab(); - } - const view = new DockviewPanelModel( this.layout, panelId, diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 3a0131c1b..e4065844c 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -60,7 +60,6 @@ export interface SerializedDockview { }; panels: { [key: string]: GroupviewPanelState }; activeGroup?: string; - options?: { tabHeight?: number }; } export type DockviewComponentUpdateOptions = Pick< @@ -87,7 +86,6 @@ export interface IDockviewComponent extends IBaseGrid { readonly panels: IDockviewPanel[]; readonly onDidDrop: Event; readonly orientation: Orientation; - tabHeight: number | undefined; updateOptions(options: DockviewComponentUpdateOptions): void; moveGroupOrPanel( referenceGroup: DockviewGroupPanel, @@ -176,17 +174,6 @@ export class DockviewComponent return activeGroup.activePanel; } - set tabHeight(height: number | undefined) { - this.options.tabHeight = height; - this._groups.forEach((value) => { - value.value.model.header.height = height; - }); - } - - get tabHeight(): number | undefined { - return this.options.tabHeight; - } - constructor(options: DockviewComponentOptions) { super({ proportionalLayout: true, @@ -417,18 +404,13 @@ export class DockviewComponent grid: data, panels, activeGroup: this.activeGroup?.id, - options: { tabHeight: this.tabHeight }, }; } fromJSON(data: SerializedDockview): void { this.clear(); - const { grid, panels, options, activeGroup } = data; - - if (typeof options?.tabHeight === 'number') { - this.tabHeight = options.tabHeight; - } + const { grid, panels, activeGroup } = data; if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) { throw new Error('root must be of type branch'); @@ -739,7 +721,7 @@ export class DockviewComponent if (itemId === undefined) { if (sourceGroup) { - this.moveGroup(sourceGroup, referenceGroup, target); + this.moveGroup(sourceGroup, referenceGroup, target); } return; } @@ -873,10 +855,7 @@ export class DockviewComponent createGroup(options?: GroupOptions): DockviewGroupPanel { if (!options) { - options = { tabHeight: this.tabHeight }; - } - if (typeof options.tabHeight !== 'number') { - options.tabHeight = this.tabHeight; + options = {}; } let id = options?.id; @@ -929,10 +908,6 @@ export class DockviewComponent // not an ideal pattern view.initialize(); - if (typeof this.options.tabHeight === 'number') { - view.model.header.height = this.options.tabHeight; - } - return view; } diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index 37836691d..5e9773a73 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -56,7 +56,6 @@ export interface GroupOptions extends CoreGroupOptions { readonly panels?: IDockviewPanel[]; readonly activePanel?: IDockviewPanel; readonly id?: string; - tabHeight?: number; } export interface GroupPanelViewState extends CoreGroupOptions { @@ -78,7 +77,6 @@ export interface GroupviewDropEvent { export interface IHeader { hidden: boolean; - height: number | undefined; } export interface IDockviewGroupPanelModel extends IPanel { diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index 36c621a16..66ac5be5f 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanel.ts @@ -78,7 +78,7 @@ export class DockviewPanel this.setTitle(params.title); - this.view?.init({ + this.view.init({ ...params, api: this.api, containerApi: this.containerApi, @@ -165,15 +165,14 @@ export class DockviewPanel // the obtain the correct dimensions of the content panel we must deduct the tab height this.api._onDidDimensionChange.fire({ width, - height: height - (this.group.model.header.height || 0), + height: height, }); - this.view?.layout(width, height); + this.view.layout(width, height); } public dispose(): void { this.api.dispose(); - - this.view?.dispose(); + this.view.dispose(); } } diff --git a/packages/dockview-core/src/dockview/dockviewPanelModel.ts b/packages/dockview-core/src/dockview/dockviewPanelModel.ts index c8e2aee8f..b29bcd12c 100644 --- a/packages/dockview-core/src/dockview/dockviewPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanelModel.ts @@ -43,8 +43,7 @@ export class DockviewPanelModel implements IDockviewPanelModel { readonly tabComponent?: string ) { this._content = this.createContentComponent(this.id, contentComponent); - this._tab = - this.createTabComponent(this.id, tabComponent) ?? new DefaultTab(); + this._tab = this.createTabComponent(this.id, tabComponent); } init(params: GroupPanelPartInitParameters): void { @@ -108,13 +107,26 @@ export class DockviewPanelModel implements IDockviewPanelModel { id: string, componentName?: string ): ITabRenderer { - return createComponent( - id, - componentName, - this.accessor.options.tabComponents || {}, - this.accessor.options.frameworkTabComponents, - this.accessor.options.frameworkComponentFactory?.tab, - () => new DefaultTab() - ); + if (componentName) { + return createComponent( + id, + componentName, + this.accessor.options.tabComponents, + this.accessor.options.frameworkTabComponents, + this.accessor.options.frameworkComponentFactory?.tab, + () => new DefaultTab() + ); + } else if (this.accessor.options.defaultTabComponent) { + return createComponent( + id, + this.accessor.options.defaultTabComponent, + this.accessor.options.tabComponents, + this.accessor.options.frameworkTabComponents, + this.accessor.options.frameworkComponentFactory?.tab, + () => new DefaultTab() + ); + } else { + return new DefaultTab(); + } } } diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index f1751c7fb..1e9b66db1 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -75,7 +75,6 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions { watermarkComponent?: WatermarkConstructor; watermarkFrameworkComponent?: any; frameworkComponentFactory?: GroupPanelFrameworkComponentFactory; - tabHeight?: number; orientation?: Orientation; styles?: ISplitviewStyles; defaultTabComponent?: string; diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts index 2e45405c1..37242cc33 100644 --- a/packages/dockview-core/src/gridview/gridview.ts +++ b/packages/dockview-core/src/gridview/gridview.ts @@ -464,7 +464,22 @@ export class Gridview implements IDisposable { 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); + + this._root.addChild( + /** + * the child node will have the same orientation as the new root since + * we are removing the inbetween node. + * the entire 'tree' must be flipped recursively to ensure that the orientation + * flips at each level + */ + flipNode( + childReference, + childReference.orthogonalSize, + childReference.size + ), + Sizing.Distribute, + 0 + ); } else { this._root.addChild(oldRoot, Sizing.Distribute, 0); } diff --git a/packages/dockview-core/src/gridview/options.ts b/packages/dockview-core/src/gridview/options.ts index 7596bb0b2..461ab6c66 100644 --- a/packages/dockview-core/src/gridview/options.ts +++ b/packages/dockview-core/src/gridview/options.ts @@ -14,7 +14,6 @@ export interface GridviewComponentOptions { [componentName: string]: any; }; frameworkComponentFactory?: FrameworkFactory; - tabHeight?: number; styles?: ISplitviewStyles; parentElement?: HTMLElement; } diff --git a/packages/dockview-core/src/splitview/splitview.scss b/packages/dockview-core/src/splitview/splitview.scss index 99b91b925..c46ceb250 100644 --- a/packages/dockview-core/src/splitview/splitview.scss +++ b/packages/dockview-core/src/splitview/splitview.scss @@ -102,6 +102,10 @@ position: absolute; z-index: 99; outline: none; + user-select: none; + -webkit-user-select: none; // Safari + -moz-user-select: none; // Firefox + -ms-user-select: none; // IE 10 and IE 11 &:active { transition: background-color 0.1s ease-in-out; diff --git a/packages/dockview-core/tsconfig.esm.json b/packages/dockview-core/tsconfig.esm.json index b48538b62..156f7d124 100644 --- a/packages/dockview-core/tsconfig.esm.json +++ b/packages/dockview-core/tsconfig.esm.json @@ -1,6 +1,9 @@ { - "extends": "../../module-build/tsconfig.esm.json", + "extends": "../../tsconfig.base.json", "compilerOptions": { + "module": "ES2020", + "moduleResolution": "node", + "target": "es6", "outDir": "dist/esm", "tsBuildInfoFile": ".build/tsconfig.tsbuildinfo.esm", "jsx": "react", diff --git a/packages/dockview-core/tsconfig.json b/packages/dockview-core/tsconfig.json index 9ff78cef1..023097d12 100644 --- a/packages/dockview-core/tsconfig.json +++ b/packages/dockview-core/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../module-build/tsconfig.json", + "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "dist/cjs", "tsBuildInfoFile": ".build/tsconfig.tsbuildinfo.cjs", @@ -8,4 +8,4 @@ }, "include": ["src"], "exclude": ["**/node_modules", "src/__tests__"] -} \ No newline at end of file +} diff --git a/packages/dockview-core/typedoc.json b/packages/dockview-core/typedoc.json index 51c05e659..952d2032e 100644 --- a/packages/dockview-core/typedoc.json +++ b/packages/dockview-core/typedoc.json @@ -1,7 +1,4 @@ { - "out": "typedocs", - "entryPoints": ["./src/index.ts"], - "exclude": ["**/_test/**/*.*", "**/index.ts"], - "excludeExternals": true, - "excludePrivate": true + "extends": ["../../typedoc.base.json"], + "entryPoints": ["src/index.ts"] } diff --git a/packages/dockview/README.md b/packages/dockview/README.md index 214dc0e75..e96b3b5e3 100644 --- a/packages/dockview/README.md +++ b/packages/dockview/README.md @@ -17,8 +17,6 @@ Please see the website: https://dockview.dev -Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/ - ## Features - Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with @@ -29,11 +27,11 @@ Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@l - Tabular docking and Drag and Drop support - 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). ``` npm install --save dockview diff --git a/packages/dockview/jest.config.ts b/packages/dockview/jest.config.ts index f6b1969ca..b909c68ef 100644 --- a/packages/dockview/jest.config.ts +++ b/packages/dockview/jest.config.ts @@ -27,7 +27,7 @@ const config: JestConfigWithTsJest = { '^.+\\.tsx?$': [ 'ts-jest', { - tsconfig, + tsconfig: '/tsconfig.test.json', }, ], }, diff --git a/packages/dockview/package.json b/packages/dockview/package.json index dce0840c5..19ec29c99 100644 --- a/packages/dockview/package.json +++ b/packages/dockview/package.json @@ -1,6 +1,6 @@ { "name": "dockview", - "version": "1.7.0", + "version": "1.7.2", "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support", "main": "./dist/cjs/index.js", "types": "./dist/cjs/index.d.ts", @@ -20,7 +20,7 @@ "build:esm": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.esm.json --extendedDiagnostics", "build:modulefiles": "rollup -c", "build": "npm run build:ci && npm run build:modulefiles", - "clean": "rimraf dist/ .build/", + "clean": "rimraf dist/ .build/ .rollup.cache/", "docs": "typedoc", "prepublishOnly": "npm run rebuild && npm run test", "rebuild": "npm run clean && npm run build", @@ -56,7 +56,7 @@ "author": "https://github.com/mathuo", "license": "MIT", "dependencies": { - "dockview-core": "^1.7.0" + "dockview-core": "^1.7.2" }, "devDependencies": { "@rollup/plugin-node-resolve": "^15.0.1", @@ -71,7 +71,6 @@ "react-dom": "^18.2.0", "rimraf": "^4.1.2", "rollup": "^3.15.0", - "rollup-plugin-postcss": "^4.0.2", - "typedoc": "^0.23.25" + "rollup-plugin-postcss": "^4.0.2" } } diff --git a/packages/dockview/rollup.config.js b/packages/dockview/rollup.config.js index ba0fb90fd..7554e9fb1 100644 --- a/packages/dockview/rollup.config.js +++ b/packages/dockview/rollup.config.js @@ -64,6 +64,9 @@ function createBundle(format, options) { }), typescript({ tsconfig: 'tsconfig.esm.json', + compilerOptions: { + declaration: false, + }, }), ]; diff --git a/packages/dockview/src/__tests__/__test_utils__/utils.ts b/packages/dockview/src/__tests__/__test_utils__/utils.ts index ab8dc0a9e..675a30c17 100644 --- a/packages/dockview/src/__tests__/__test_utils__/utils.ts +++ b/packages/dockview/src/__tests__/__test_utils__/utils.ts @@ -1,5 +1,3 @@ -import * as React from 'react'; - export function setMockRefElement(node: Partial): void { const mockRef = { get current() { @@ -10,5 +8,5 @@ export function setMockRefElement(node: Partial): void { }, }; - jest.spyOn(React, 'useRef').mockReturnValueOnce(mockRef); + jest.spyOn(require('react'), 'useRef').mockReturnValueOnce(mockRef); } diff --git a/packages/dockview/src/__tests__/dockview/dockview.spec.tsx b/packages/dockview/src/__tests__/dockview/dockview.spec.tsx index 2c55b29b7..6fe0872a7 100644 --- a/packages/dockview/src/__tests__/dockview/dockview.spec.tsx +++ b/packages/dockview/src/__tests__/dockview/dockview.spec.tsx @@ -48,7 +48,7 @@ describe('gridview react', () => { render(); - expect(api.width).toBe(650); - expect(api.height).toBe(450); + expect(api!.width).toBe(650); + expect(api!.height).toBe(450); }); }); diff --git a/packages/dockview/src/__tests__/gridview/gridview.spec.tsx b/packages/dockview/src/__tests__/gridview/gridview.spec.tsx index 92f81f4c3..0881e00b4 100644 --- a/packages/dockview/src/__tests__/gridview/gridview.spec.tsx +++ b/packages/dockview/src/__tests__/gridview/gridview.spec.tsx @@ -59,7 +59,7 @@ describe('gridview react', () => { /> ); - expect(api.width).toBe(650); - expect(api.height).toBe(450); + expect(api!.width).toBe(650); + expect(api!.height).toBe(450); }); }); diff --git a/packages/dockview/src/__tests__/paneview/paneview.spec.tsx b/packages/dockview/src/__tests__/paneview/paneview.spec.tsx index 0a69965f0..830861e89 100644 --- a/packages/dockview/src/__tests__/paneview/paneview.spec.tsx +++ b/packages/dockview/src/__tests__/paneview/paneview.spec.tsx @@ -46,7 +46,7 @@ describe('gridview react', () => { render(); - expect(api.width).toBe(650); - expect(api.height).toBe(450); + expect(api!.width).toBe(650); + expect(api!.height).toBe(450); }); }); diff --git a/packages/dockview/src/__tests__/react.spec.tsx b/packages/dockview/src/__tests__/react.spec.tsx index 2abf76845..298d96fed 100644 --- a/packages/dockview/src/__tests__/react.spec.tsx +++ b/packages/dockview/src/__tests__/react.spec.tsx @@ -18,7 +18,7 @@ describe('react', () => { render(); - expect(api).toBeTruthy(); + expect(api!).toBeTruthy(); expect(screen.getByTestId('valueA').textContent).toBe('stringA'); expect(screen.getByTestId('valueB').textContent).toBe('42'); @@ -60,7 +60,7 @@ const TestWrapper = (props: { React.useEffect(() => { const cut = new ReactPart( - ref.current, + ref.current!, { addPortal: (portal: React.ReactPortal) => { setPortal((_) => [..._, portal]); diff --git a/packages/dockview/src/__tests__/react/dockview/dockview.spec.tsx b/packages/dockview/src/__tests__/react/dockview/dockview.spec.tsx index b8e9f1bcb..12048cac5 100644 --- a/packages/dockview/src/__tests__/react/dockview/dockview.spec.tsx +++ b/packages/dockview/src/__tests__/react/dockview/dockview.spec.tsx @@ -47,7 +47,7 @@ describe('dockview', () => { render(); - expect(api.width).toBe(650); - expect(api.height).toBe(450); + expect(api!.width).toBe(650); + expect(api!.height).toBe(450); }); }); diff --git a/packages/dockview/src/__tests__/react/gridview/gridview.spec.tsx b/packages/dockview/src/__tests__/react/gridview/gridview.spec.tsx index 8e76030d9..5e5ff70e9 100644 --- a/packages/dockview/src/__tests__/react/gridview/gridview.spec.tsx +++ b/packages/dockview/src/__tests__/react/gridview/gridview.spec.tsx @@ -58,7 +58,7 @@ describe('gridview react', () => { /> ); - expect(api.width).toBe(650); - expect(api.height).toBe(450); + expect(api!.width).toBe(650); + expect(api!.height).toBe(450); }); }); diff --git a/packages/dockview/src/__tests__/react/paneview/paneview.spec.tsx b/packages/dockview/src/__tests__/react/paneview/paneview.spec.tsx index 3223a8503..4dc8b8198 100644 --- a/packages/dockview/src/__tests__/react/paneview/paneview.spec.tsx +++ b/packages/dockview/src/__tests__/react/paneview/paneview.spec.tsx @@ -46,7 +46,7 @@ describe('gridview react', () => { render(); - expect(api.width).toBe(650); - expect(api.height).toBe(450); + expect(api!.width).toBe(650); + expect(api!.height).toBe(450); }); }); diff --git a/packages/dockview/src/__tests__/react/react.spec.tsx b/packages/dockview/src/__tests__/react/react.spec.tsx index f9799c0a5..b89d09d74 100644 --- a/packages/dockview/src/__tests__/react/react.spec.tsx +++ b/packages/dockview/src/__tests__/react/react.spec.tsx @@ -18,7 +18,7 @@ describe('react', () => { render(); - expect(api).toBeTruthy(); + expect(api!).toBeTruthy(); expect(screen.getByTestId('valueA').textContent).toBe('stringA'); expect(screen.getByTestId('valueB').textContent).toBe('42'); @@ -60,7 +60,7 @@ const TestWrapper = (props: { React.useEffect(() => { const cut = new ReactPart( - ref.current, + ref.current!, { addPortal: (portal: React.ReactPortal) => { setPortal((_) => [..._, portal]); diff --git a/packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx b/packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx index 852171aa9..9ffc01974 100644 --- a/packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx +++ b/packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx @@ -58,7 +58,7 @@ describe('splitview react', () => { /> ); - expect(api.width).toBe(650); - expect(api.height).toBe(450); + expect(api!.width).toBe(650); + expect(api!.height).toBe(450); }); }); diff --git a/packages/dockview/src/__tests__/splitview/splitview.spec.tsx b/packages/dockview/src/__tests__/splitview/splitview.spec.tsx index e0da9dd72..34e0027db 100644 --- a/packages/dockview/src/__tests__/splitview/splitview.spec.tsx +++ b/packages/dockview/src/__tests__/splitview/splitview.spec.tsx @@ -58,7 +58,7 @@ describe('splitview react', () => { /> ); - expect(api.width).toBe(650); - expect(api.height).toBe(450); + expect(api!.width).toBe(650); + expect(api!.height).toBe(450); }); }); diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx index 93ebef368..8998c770d 100644 --- a/packages/dockview/src/dockview/dockview.tsx +++ b/packages/dockview/src/dockview/dockview.tsx @@ -37,7 +37,7 @@ function createGroupControlElement( : undefined; } -export interface IGroupPanelBaseProps> +export interface IGroupPanelBaseProps extends PanelParameters { api: DockviewPanelApi; containerApi: DockviewApi; @@ -59,7 +59,6 @@ export interface IDockviewReactProps { components: PanelCollection; tabComponents?: PanelCollection; watermarkComponent?: React.FunctionComponent; - tabHeight?: number; onDidDrop?: (event: DockviewDropEvent) => void; showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean; hideBorders?: boolean; @@ -143,7 +142,6 @@ export const DockviewReact = React.forwardRef( frameworkComponentFactory: factory, frameworkComponents: props.components, frameworkTabComponents, - tabHeight: props.tabHeight, watermarkFrameworkComponent: props.watermarkComponent, defaultTabComponent: props.defaultTabComponent ? DEFAULT_REACT_TAB diff --git a/packages/dockview/tsconfig.esm.json b/packages/dockview/tsconfig.esm.json index b48538b62..156f7d124 100644 --- a/packages/dockview/tsconfig.esm.json +++ b/packages/dockview/tsconfig.esm.json @@ -1,6 +1,9 @@ { - "extends": "../../module-build/tsconfig.esm.json", + "extends": "../../tsconfig.base.json", "compilerOptions": { + "module": "ES2020", + "moduleResolution": "node", + "target": "es6", "outDir": "dist/esm", "tsBuildInfoFile": ".build/tsconfig.tsbuildinfo.esm", "jsx": "react", diff --git a/packages/dockview/tsconfig.json b/packages/dockview/tsconfig.json index 932770600..023097d12 100644 --- a/packages/dockview/tsconfig.json +++ b/packages/dockview/tsconfig.json @@ -1,14 +1,11 @@ { - "extends": "../../module-build/tsconfig.json", + "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "dist/cjs", "tsBuildInfoFile": ".build/tsconfig.tsbuildinfo.cjs", "jsx": "react", "rootDir": "src" }, - "paths": { - "dockview-core": "../dockview-core" - }, "include": ["src"], "exclude": ["**/node_modules", "src/__tests__"] } diff --git a/packages/dockview/typedoc.json b/packages/dockview/typedoc.json index 51c05e659..b97dde02c 100644 --- a/packages/dockview/typedoc.json +++ b/packages/dockview/typedoc.json @@ -1,7 +1,5 @@ { - "out": "typedocs", - "entryPoints": ["./src/index.ts"], - "exclude": ["**/_test/**/*.*", "**/index.ts"], - "excludeExternals": true, - "excludePrivate": true + "extends": ["../../typedoc.base.json"], + "entryPoints": ["src/index.ts"], + "exclude": ["**/dist/**"] } diff --git a/packages/docs/blog/2023-04-11-dockview-1.7.1.md b/packages/docs/blog/2023-04-11-dockview-1.7.1.md new file mode 100644 index 000000000..7c7b0815a --- /dev/null +++ b/packages/docs/blog/2023-04-11-dockview-1.7.1.md @@ -0,0 +1,27 @@ +--- +slug: dockview-1.7.1-release +title: Dockview 1.7.1 +tags: [release] +--- + +# Release Notes + +Please reference to docs @ [dockview.dev](https://dockview.dev). +If you feel anything is missing or unclear please let me know. + +## 🚀 Features + +- Resize observer [#227](https://github.com/mathuo/dockview/pull/227) +- Minor type fix [#237](https://github.com/mathuo/dockview/pull/237) +- Fix close button on default watermark [#225](https://github.com/mathuo/dockview/pull/225) +- Fix edge-case bug when dropping a panel on far corners [#243](https://github.com/mathuo/dockview/pull/243) + +## 🛠 Miscs + +- Additional documentation and examples [#217](https://github.com/mathuo/dockview/pull/217) [#221](https://github.com/mathuo/dockview/pull/221) [#228](https://github.com/mathuo/dockview/pull/228) [#229](https://github.com/mathuo/dockview/pull/229) [#240](https://github.com/mathuo/dockview/pull/240) [#241](https://github.com/mathuo/dockview/pull/241) +- Adjust build configurations [#223](https://github.com/mathuo/dockview/pull/223) [#235](https://github.com/mathuo/dockview/pull/235) [#244](https://github.com/mathuo/dockview/pull/244) + +## 🔥 Breaking changes + +- Remove tab height control as prop to `DockviewReact` component. Please control via CSS instead, see docs for tab height. [#236](https://github.com/mathuo/dockview/pull/236) + diff --git a/packages/docs/blog/2023-05-07-dockview-1.7.2.md b/packages/docs/blog/2023-05-07-dockview-1.7.2.md new file mode 100644 index 000000000..e50745c10 --- /dev/null +++ b/packages/docs/blog/2023-05-07-dockview-1.7.2.md @@ -0,0 +1,18 @@ +--- +slug: dockview-1.7.2-release +title: Dockview 1.7.2 +tags: [release] +--- + +# Release Notes + +Please reference to docs @ [dockview.dev](https://dockview.dev). +If you feel anything is missing or unclear please let me know. + +## 🚀 Features + +## 🛠 Miscs + +- Fix bug with panel resize drag elements [#249](https://github.com/mathuo/dockview/issues/249) + +## 🔥 Breaking changes diff --git a/packages/docs/docs/basics.mdx b/packages/docs/docs/basics.mdx index 91fdcbfd9..b2c8ebcdb 100644 --- a/packages/docs/docs/basics.mdx +++ b/packages/docs/docs/basics.mdx @@ -8,7 +8,6 @@ import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2'; # Basics -asd This section will take you through a number of concepts that can be applied to all dockview components. ## Panels @@ -53,19 +52,16 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { const disposable = props.api.onDidActiveChange((event) => { console.log(`is panel active: ${event.isActive}`); }); - return () => { disposable.dispose(); // remember to dispose of any subscriptions }; }, [props.api]); - const addAnotherPanel = React.useCallback(() => { props.containerApi.addPanel({ id: 'another_id', component: 'anotherComponent', }); }, [props.containerApi]); - return (
{`My first panel has the title: ${props.params.title}`} @@ -98,7 +94,6 @@ React.useEffect(() => { const disposable = api.onDidFocusChange(() => { // write some code }); - return () => { disposable.dispose(); }; diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 61fcf4e2f..835dee189 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -2,7 +2,10 @@ description: Dockview Documentation --- -import { Container } from '@site/src/components/ui/container'; +import { + Container, + MultiFrameworkContainer, +} from '@site/src/components/ui/container'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; @@ -23,7 +26,12 @@ import DockviewSetTitle from '@site/sandboxes/updatetitle-dockview/src/app'; import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app'; import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app'; import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app'; -import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app'; +import DockviewTabheight from '@site/sandboxes/tabheight-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'; +import { attach as attachTabHeightDockview } from '@site/sandboxes/javascript/tabheight-dockview/src/app'; +import { attach as attachNativeDockview } from '@site/sandboxes/javascript/fullwidthtab-dockview/src/app'; # Dockview @@ -31,12 +39,16 @@ import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockvie Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels. - - - + -You can access the panels associated group through the `panel.group` variable. -The group will always be defined and will change if a panel is moved into another group. +
+ +> You can access the panels associated group through the `panel.group` variable. +> The group will always be defined and will change if a panel is moved into another group. ## DockviewReact Component @@ -59,7 +71,6 @@ import { DockviewReact } from 'dockview'; | showDndOverlay | Event | Yes | false | | | defaultTabComponent | object | Yes | | | | groupControlComponent | object | Yes | | | -| tabHeight | number | Yes | | | | singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | ## Dockview API @@ -113,8 +124,6 @@ const onReady = (event: DockviewReadyEvent) => { | removeGroup | `(group: GroupPanel): void` | | | getGroup | `(id: string): GroupPanel \| undefined` | | | | | | -| getTabHeight | `(): number \| undefined` | | -| setTabHeight | `(height: number \| undefined): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | focus | `(): void` | | | layout | `(width: number, height:number): void` | Auto Resizing | @@ -342,7 +351,9 @@ return ( ### Third Party Dnd Libraries -To be completed... +This shows a simple example of a third-party library used inside a panel that relies on drag +and drop functionalities. This examples serves to show that `dockview` doesn't interfer with +any drag and drop logic for other controls. @@ -608,9 +619,21 @@ to the entire width of the group. For example: ``` - - - + + +### Tab Height + +Tab height can be controlled through CSS. + + ## Groups @@ -701,19 +724,11 @@ If you wish to interact with the drop event from one dockview instance in anothe -### Example - -hello +### Window-like mananger with tabs -hello 2 - -
- -
- -## VanillaJS +## Vanilla JS > Note: This section is experimental and support for Vanilla JS is a work in progress. @@ -723,4 +738,7 @@ The core library is published as an independant package under the name `dockview > When using `dockview` there is no need to also install `dockview-core`. > `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`. - + diff --git a/packages/docs/package.json b/packages/docs/package.json index b13f0c8d5..a5a509892 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "dockview-docs", - "version": "1.7.0", + "version": "1.7.2", "private": true, "scripts": { "docusaurus": "docusaurus", @@ -12,8 +12,7 @@ "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", - "typecheck": "tsc", - "deploy-docs": "node scripts/package-docs.js" + "typecheck": "tsc" }, "dependencies": { "@docusaurus/core": "^2.4.0", @@ -23,7 +22,7 @@ "@minoru/react-dnd-treeview": "^3.4.3", "axios": "^1.3.3", "clsx": "^1.2.1", - "dockview": "^1.7.0", + "dockview": "^1.7.2", "prism-react-renderer": "^1.3.5", "react": "^18.2.0", "react-dnd": "^16.0.1", diff --git a/packages/docs/sandboxes/constraints-dockview/tsconfig.json b/packages/docs/sandboxes/constraints-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/constraints-dockview/tsconfig.json +++ b/packages/docs/sandboxes/constraints-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/customheader-dockview/src/app.tsx b/packages/docs/sandboxes/customheader-dockview/src/app.tsx index eb2ecfffc..fe21c5307 100644 --- a/packages/docs/sandboxes/customheader-dockview/src/app.tsx +++ b/packages/docs/sandboxes/customheader-dockview/src/app.tsx @@ -7,25 +7,25 @@ import { } from 'dockview'; import * as React from 'react'; +interface CustomProps { + valueA: string; +} + const components = { - default: (props: IDockviewPanelProps<{ title: string }>) => { - return
{props.params.title}
; + default: (props: IDockviewPanelProps) => { + return
{props.api.title}
; }, }; -const MyCustomheader = (props: IDockviewPanelHeaderProps) => { - const onContextMenu = (event: React.MouseEvent) => { - event.preventDefault(); - alert('context menu'); - }; - return ; -}; - const headerComponents = { - default: (props: IDockviewPanelHeaderProps) => { + default: (props: IDockviewPanelHeaderProps) => { const onContextMenu = (event: React.MouseEvent) => { event.preventDefault(); - alert('context menu'); + alert( + `This custom header was parsed the params ${JSON.stringify( + props.params + )}` + ); }; return ; }, @@ -39,34 +39,52 @@ const CustomHeadersDockview = () => { id: 'panel_1', component: 'default', title: 'Panel 1', + params: { + valueA: 'test value', + }, }); event.api.addPanel({ id: 'panel_2', component: 'default', title: 'Panel 2', + params: { + valueA: 'test value', + }, }); event.api.addPanel({ id: 'panel_3', component: 'default', title: 'Panel 3', + params: { + valueA: 'test value', + }, }); event.api.addPanel({ id: 'panel_4', component: 'default', title: 'Panel 4', position: { referencePanel: 'panel_3', direction: 'right' }, + params: { + valueA: 'test value', + }, }); event.api.addPanel({ id: 'panel_5', component: 'default', title: 'Panel 5', position: { referencePanel: 'panel_4', direction: 'within' }, + params: { + valueA: 'test value', + }, }); const panel6 = event.api.addPanel({ id: 'panel_6', component: 'default', title: 'Panel 6', position: { referencePanel: 'panel_4', direction: 'below' }, + params: { + valueA: 'test value', + }, }); panel6.group.locked = true; panel6.group.header.hidden = true; @@ -75,6 +93,9 @@ const CustomHeadersDockview = () => { component: 'default', title: 'Panel 7', position: { referencePanel: 'panel_6', direction: 'right' }, + params: { + valueA: 'test value', + }, }); event.api.addPanel({ id: 'panel_8', @@ -82,6 +103,9 @@ const CustomHeadersDockview = () => { title: 'Panel 8', position: { referencePanel: 'panel_7', direction: 'within' }, + params: { + valueA: 'test value', + }, }); event.api.addGroup(); diff --git a/packages/docs/sandboxes/customheader-dockview/tsconfig.json b/packages/docs/sandboxes/customheader-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/customheader-dockview/tsconfig.json +++ b/packages/docs/sandboxes/customheader-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/demo-dockview/tsconfig.json b/packages/docs/sandboxes/demo-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/demo-dockview/tsconfig.json +++ b/packages/docs/sandboxes/demo-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/dnd-dockview/src/app.tsx b/packages/docs/sandboxes/dnd-dockview/src/app.tsx index 7e3269c08..b5d4ad11a 100644 --- a/packages/docs/sandboxes/dnd-dockview/src/app.tsx +++ b/packages/docs/sandboxes/dnd-dockview/src/app.tsx @@ -18,6 +18,29 @@ const components = { }, }; +const DraggableElement = () => ( + { + if (event.dataTransfer) { + event.dataTransfer.effectAllowed = 'move'; + + event.dataTransfer.setData('text/plain', 'nothing'); + } + }} + style={{ + backgroundColor: 'orange', + padding: '0px 8px', + borderRadius: '4px', + width: '100px', + cursor: 'pointer', + }} + draggable={true} + > + Drag me + +); + const DndDockview = (props: { renderVisibleOnly: boolean }) => { const onReady = (event: DockviewReadyEvent) => { event.api.addPanel({ @@ -77,19 +100,9 @@ const DndDockview = (props: { renderVisibleOnly: boolean }) => { height: '100%', }} > -
- Drag me +
+
- { const [treeData, setTreeData] = useState(SampleData); const handleDrop = (newTreeData: any) => { - console.log('handleDrop'); setTreeData(newTreeData); }; return ( diff --git a/packages/docs/sandboxes/externaldnd-dockview/tsconfig.json b/packages/docs/sandboxes/externaldnd-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/externaldnd-dockview/tsconfig.json +++ b/packages/docs/sandboxes/externaldnd-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json b/packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json +++ b/packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json b/packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json +++ b/packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/javascript/fullwidthtab-dockview/package.json b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/package.json new file mode 100644 index 000000000..c4d975c1a --- /dev/null +++ b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/package.json @@ -0,0 +1,27 @@ +{ + "name": "javascript-fullwidthtab-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.ts", + "dependencies": { + "dockview-core": "*" + }, + "devDependencies": { + "typescript": "^4.9.5" + }, + "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/vanilla-dockview/public/index.html b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/public/index.html similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/public/index.html rename to packages/docs/sandboxes/javascript/fullwidthtab-dockview/public/index.html diff --git a/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.scss b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.scss new file mode 100644 index 000000000..1b1438ec2 --- /dev/null +++ b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.scss @@ -0,0 +1,17 @@ +.my-custom-tab { + padding: 0px 8px; + width: 100%; + display: flex; + height: 100%; + align-items: center; + background-color: var(--dv-tabs-and-actions-container-background-color); + + .my-custom-tab-icon { + font-size: 16px; + + &:hover { + border-radius: 2px; + background-color: var(--dv-icon-hover-background-color); + } + } +} diff --git a/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.ts b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.ts new file mode 100644 index 000000000..40eba745d --- /dev/null +++ b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.ts @@ -0,0 +1,171 @@ +import { + IGroupPanelInitParameters, + IContentRenderer, + PanelUpdateEvent, + Parameters, + ITabRenderer, + DockviewComponent, +} from 'dockview-core'; +import './app.scss'; + +class DefaultPanel implements IContentRenderer { + private _element: HTMLElement; + private _titleElement: HTMLElement; + private _paramsElement: HTMLElement; + + get element(): HTMLElement { + return this._element; + } + + constructor() { + this._element = document.createElement('div'); + this._element.style.display = 'flex'; + this._element.style.justifyContent = 'center'; + this._element.style.alignItems = 'center'; + this._element.style.color = 'white'; + this._element.style.height = '100%'; + + this._titleElement = document.createElement('span'); + this._paramsElement = document.createElement('span'); + + this._element.appendChild(this._titleElement); + } + + init(params: IGroupPanelInitParameters): void { + this.render(params.params); + } + + update(event: PanelUpdateEvent): void { + this.render(event.params); + } + + private render(params: Record) { + this._titleElement.textContent = params.title; + + if (params.x) { + if (!this._paramsElement.parentElement) { + this._element.appendChild(this._paramsElement); + } + this._paramsElement.textContent = params.x; + } else { + this._paramsElement.parentElement?.removeChild(this._paramsElement); + } + } +} + +class DefaultTab implements ITabRenderer { + private _element: HTMLElement; + private _title: HTMLElement; + + get element(): HTMLElement { + return this._element; + } + + constructor() { + this._element = document.createElement('div'); + this._element.className = 'my-custom-tab'; + + this._title = document.createElement('span'); + + const spacer = document.createElement('span'); + spacer.style.flexGrow = '1'; + + const btn1 = document.createElement('span'); + btn1.className = 'my-custom-tab-icon material-symbols-outlined'; + btn1.textContent = 'minimize'; + + const btn2 = document.createElement('span'); + btn2.className = 'my-custom-tab-icon material-symbols-outlined'; + btn2.textContent = 'maximize'; + + const btn3 = document.createElement('span'); + btn3.className = 'my-custom-tab-icon material-symbols-outlined'; + btn3.textContent = 'close'; + + this._element.appendChild(this._title); + this._element.appendChild(spacer); + this._element.appendChild(btn1); + this._element.appendChild(btn2); + this._element.appendChild(btn3); + } + + init(params: IGroupPanelInitParameters): void { + this.render(params.params); + } + + update(event: PanelUpdateEvent): void { + this.render(event.params); + } + + private render(params: Record) { + this._title = params.title; + } +} + +export function attach(parent: HTMLElement): { + dispose: () => void; +} { + const element = document.createElement('div'); + element.className = 'dockview-theme-abyss'; + element.style.height = '100%'; + element.style.width = '100%'; + + const dockview = new DockviewComponent({ + components: { + default: DefaultPanel, + }, + tabComponents: { + default: DefaultTab, + }, + singleTabMode: 'fullwidth', + parentElement: element, + }); + + parent.appendChild(element); + + const { clientWidth, clientHeight } = parent; + dockview.layout(clientWidth, clientHeight); + + const panel1 = dockview.addPanel({ + id: 'panel_1', + component: 'default', + tabComponent: 'default', + params: { + title: 'Window 1', + }, + }); + panel1.group.locked = true; + + const panel2 = dockview.addPanel({ + id: 'panel_2', + component: 'default', + tabComponent: 'default', + params: { + title: 'Window 2', + }, + position: { + direction: 'right', + }, + }); + panel2.group.locked = true; + + const panel3 = dockview.addPanel({ + id: 'panel_3', + component: 'default', + tabComponent: 'default', + params: { + title: 'Window 3', + }, + position: { + direction: 'below', + }, + }); + panel3.group.locked = true; + + return { + dispose: () => { + dockview.dispose(); + element.remove(); + }, + }; +} diff --git a/packages/docs/sandboxes/vanilla-dockview/src/index.ts b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/index.ts similarity index 76% rename from packages/docs/sandboxes/vanilla-dockview/src/index.ts rename to packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/index.ts index a1bf270a5..249b56017 100644 --- a/packages/docs/sandboxes/vanilla-dockview/src/index.ts +++ b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/index.ts @@ -1,5 +1,5 @@ import './styles.css'; -import 'dockview/dist/styles/dockview.css'; +import 'dockview-core/dist/styles/dockview.css'; import { attach } from './app'; diff --git a/packages/docs/sandboxes/vanilla-dockview/src/styles.css b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/styles.css similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/src/styles.css rename to packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/styles.css diff --git a/packages/docs/sandboxes/javascript/fullwidthtab-dockview/tsconfig.json b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/tsconfig.json new file mode 100644 index 000000000..8aebe3efe --- /dev/null +++ b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/tsconfig.json @@ -0,0 +1,19 @@ +{ + "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, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/javascript/simple-dockview/package.json b/packages/docs/sandboxes/javascript/simple-dockview/package.json new file mode 100644 index 000000000..bc36e6b5d --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/package.json @@ -0,0 +1,27 @@ +{ + "name": "javascript-simple-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.ts", + "dependencies": { + "dockview-core": "*" + }, + "devDependencies": { + "typescript": "^4.9.5" + }, + "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/javascript/simple-dockview/public/index.html b/packages/docs/sandboxes/javascript/simple-dockview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/javascript/simple-dockview/src/app.ts b/packages/docs/sandboxes/javascript/simple-dockview/src/app.ts new file mode 100644 index 000000000..ecce95e0e --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/src/app.ts @@ -0,0 +1,120 @@ +import { + DockviewComponent, + IContentRenderer, + IGroupPanelInitParameters, + PanelUpdateEvent, + Parameters, +} from 'dockview-core'; + +class DefaultPanel implements IContentRenderer { + private _element: HTMLElement; + + get element(): HTMLElement { + return this._element; + } + + constructor() { + this._element = document.createElement('div'); + this._element.style.padding = '20px'; + this._element.style.color = 'white'; + } + + init(params: IGroupPanelInitParameters): void { + this._element.textContent = params.params.title; + } + + update(event: PanelUpdateEvent): void { + this._element.textContent = event.params.title; + } +} + +export function attach(parent: HTMLElement): { + dispose: () => void; +} { + const element = document.createElement('div'); + element.className = 'dockview-theme-abyss'; + element.style.height = '100%'; + element.style.width = '100%'; + + const dockview = new DockviewComponent({ + components: { + default: DefaultPanel, + }, + parentElement: element, + }); + + parent.appendChild(element); + + const { clientWidth, clientHeight } = parent; + dockview.layout(clientWidth, clientHeight); + + const panel = dockview.addPanel({ + id: 'panel_1', + component: 'default', + params: { + title: 'Panel 1', + }, + }); + + panel.group.locked = true; + panel.group.header.hidden = true; + + dockview.addPanel({ + id: 'panel_2', + component: 'default', + params: { + title: 'Panel 2', + }, + }); + + dockview.addPanel({ + id: 'panel_3', + component: 'default', + params: { + title: 'Panel 3', + }, + }); + + dockview.addPanel({ + id: 'panel_4', + component: 'default', + params: { + title: 'Panel 4', + }, + position: { referencePanel: 'panel_1', direction: 'right' }, + }); + + const panel5 = dockview.addPanel({ + id: 'panel_5', + component: 'default', + params: { + title: 'Panel 5', + }, + position: { referencePanel: 'panel_3', direction: 'right' }, + }); + + dockview.addPanel({ + id: 'panel_6', + component: 'default', + params: { + title: 'Panel 6', + }, + position: { referencePanel: 'panel_5', direction: 'below' }, + }); + + dockview.addPanel({ + id: 'panel_7', + component: 'default', + params: { + title: 'Panel 7', + }, + position: { referencePanel: 'panel_6', direction: 'right' }, + }); + + return { + dispose: () => { + dockview.dispose(); + element.remove(); + }, + }; +} diff --git a/packages/docs/sandboxes/javascript/simple-dockview/src/index.ts b/packages/docs/sandboxes/javascript/simple-dockview/src/index.ts new file mode 100644 index 000000000..249b56017 --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/src/index.ts @@ -0,0 +1,10 @@ +import './styles.css'; +import 'dockview-core/dist/styles/dockview.css'; + +import { attach } from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + attach(rootElement); +} diff --git a/packages/docs/sandboxes/javascript/simple-dockview/src/styles.css b/packages/docs/sandboxes/javascript/simple-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-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/javascript/simple-dockview/tsconfig.json b/packages/docs/sandboxes/javascript/simple-dockview/tsconfig.json new file mode 100644 index 000000000..8aebe3efe --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/tsconfig.json @@ -0,0 +1,19 @@ +{ + "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, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/package.json b/packages/docs/sandboxes/javascript/tabheight-dockview/package.json new file mode 100644 index 000000000..5aeba5d4d --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/package.json @@ -0,0 +1,27 @@ +{ + "name": "javascript-tabheight-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.ts", + "dependencies": { + "dockview-core": "*" + }, + "devDependencies": { + "typescript": "^4.9.5" + }, + "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/javascript/tabheight-dockview/public/index.html b/packages/docs/sandboxes/javascript/tabheight-dockview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.scss b/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.scss new file mode 100644 index 000000000..315d564ac --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.scss @@ -0,0 +1,3 @@ +.skinny-tabs { + --dv-tabs-and-actions-container-height: 20px; +} diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.ts b/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.ts new file mode 100644 index 000000000..ca3535611 --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.ts @@ -0,0 +1,110 @@ +import { + DockviewComponent, + IContentRenderer, + IGroupPanelInitParameters, + PanelUpdateEvent, + Parameters, +} from 'dockview-core'; +import './app.scss'; + +class DefaultPanel implements IContentRenderer { + private _element: HTMLElement; + + get element(): HTMLElement { + return this._element; + } + + constructor() { + this._element = document.createElement('div'); + this._element.style.padding = '20px'; + this._element.style.color = 'white'; + } + + init(params: IGroupPanelInitParameters): void { + this._element.textContent = params.params.title; + } + + update(event: PanelUpdateEvent): void { + this._element.textContent = event.params.title; + } +} + +export function attach(parent: HTMLElement): { + dispose: () => void; +} { + const element = document.createElement('div'); + element.className = 'dockview-theme-abyss skinny-tabs'; + element.style.height = '100%'; + element.style.width = '100%'; + + const dockview = new DockviewComponent({ + components: { + default: DefaultPanel, + }, + parentElement: element, + }); + + parent.appendChild(element); + + const { clientWidth, clientHeight } = parent; + dockview.layout(clientWidth, clientHeight); + + dockview.addPanel({ + id: 'panel_1', + component: 'default', + params: { + title: 'Panel 1', + }, + }); + + dockview.addPanel({ + id: 'panel_2', + component: 'default', + params: { + title: 'Panel 2', + }, + }); + + dockview.addPanel({ + id: 'panel_3', + component: 'default', + params: { + title: 'Panel 3', + }, + position: { referencePanel: 'panel_1', direction: 'right' }, + }); + + dockview.addPanel({ + id: 'panel_4', + component: 'default', + params: { + title: 'Panel 4', + }, + position: { referencePanel: 'panel_3', direction: 'right' }, + }); + + dockview.addPanel({ + id: 'panel_5', + component: 'default', + params: { + title: 'Panel 5', + }, + position: { referencePanel: 'panel_4', direction: 'below' }, + }); + + dockview.addPanel({ + id: 'panel_6', + component: 'default', + params: { + title: 'Panel 6', + }, + position: { referencePanel: 'panel_5', direction: 'right' }, + }); + + return { + dispose: () => { + dockview.dispose(); + element.remove(); + }, + }; +} diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/src/index.ts b/packages/docs/sandboxes/javascript/tabheight-dockview/src/index.ts new file mode 100644 index 000000000..249b56017 --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/src/index.ts @@ -0,0 +1,10 @@ +import './styles.css'; +import 'dockview-core/dist/styles/dockview.css'; + +import { attach } from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + attach(rootElement); +} diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/src/styles.css b/packages/docs/sandboxes/javascript/tabheight-dockview/src/styles.css new file mode 100644 index 000000000..a1d49a9b6 --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-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/javascript/tabheight-dockview/tsconfig.json b/packages/docs/sandboxes/javascript/tabheight-dockview/tsconfig.json new file mode 100644 index 000000000..8aebe3efe --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/tsconfig.json @@ -0,0 +1,19 @@ +{ + "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, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/vanilla-dockview/package.json b/packages/docs/sandboxes/javascript/vanilla-dockview/package.json similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/package.json rename to packages/docs/sandboxes/javascript/vanilla-dockview/package.json diff --git a/packages/docs/sandboxes/javascript/vanilla-dockview/public/index.html b/packages/docs/sandboxes/javascript/vanilla-dockview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/javascript/vanilla-dockview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/vanilla-dockview/src/app.ts b/packages/docs/sandboxes/javascript/vanilla-dockview/src/app.ts similarity index 98% rename from packages/docs/sandboxes/vanilla-dockview/src/app.ts rename to packages/docs/sandboxes/javascript/vanilla-dockview/src/app.ts index 79479e1ae..f1dc31cd6 100644 --- a/packages/docs/sandboxes/vanilla-dockview/src/app.ts +++ b/packages/docs/sandboxes/javascript/vanilla-dockview/src/app.ts @@ -2,7 +2,7 @@ import { DockviewComponent, IContentRenderer, IGroupPanelInitParameters, -} from 'dockview'; +} from 'dockview-core'; class DefaultPanel implements IContentRenderer { private _element: HTMLElement; diff --git a/packages/docs/sandboxes/javascript/vanilla-dockview/src/index.ts b/packages/docs/sandboxes/javascript/vanilla-dockview/src/index.ts new file mode 100644 index 000000000..249b56017 --- /dev/null +++ b/packages/docs/sandboxes/javascript/vanilla-dockview/src/index.ts @@ -0,0 +1,10 @@ +import './styles.css'; +import 'dockview-core/dist/styles/dockview.css'; + +import { attach } from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + attach(rootElement); +} diff --git a/packages/docs/sandboxes/javascript/vanilla-dockview/src/styles.css b/packages/docs/sandboxes/javascript/vanilla-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/javascript/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/javascript/vanilla-dockview/tsconfig.json similarity index 90% rename from packages/docs/sandboxes/vanilla-dockview/tsconfig.json rename to packages/docs/sandboxes/javascript/vanilla-dockview/tsconfig.json index 6e13e47b5..728865f76 100644 --- a/packages/docs/sandboxes/vanilla-dockview/tsconfig.json +++ b/packages/docs/sandboxes/javascript/vanilla-dockview/tsconfig.json @@ -14,7 +14,6 @@ "noImplicitThis": true, "noImplicitAny": true, "strictNullChecks": true, - "suppressImplicitAnyIndexErrors": true, "noUnusedLocals": true } } diff --git a/packages/docs/sandboxes/layout-dockview/tsconfig.json b/packages/docs/sandboxes/layout-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/layout-dockview/tsconfig.json +++ b/packages/docs/sandboxes/layout-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/nativeapp-dockview/tsconfig.json b/packages/docs/sandboxes/nativeapp-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/nativeapp-dockview/tsconfig.json +++ b/packages/docs/sandboxes/nativeapp-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/nested-dockview/tsconfig.json b/packages/docs/sandboxes/nested-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/nested-dockview/tsconfig.json +++ b/packages/docs/sandboxes/nested-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/rendering-dockview/tsconfig.json b/packages/docs/sandboxes/rendering-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/rendering-dockview/tsconfig.json +++ b/packages/docs/sandboxes/rendering-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/resize-dockview/tsconfig.json b/packages/docs/sandboxes/resize-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/resize-dockview/tsconfig.json +++ b/packages/docs/sandboxes/resize-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/resizecontainer-dockview/tsconfig.json b/packages/docs/sandboxes/resizecontainer-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/resizecontainer-dockview/tsconfig.json +++ b/packages/docs/sandboxes/resizecontainer-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/simple-dockview/tsconfig.json b/packages/docs/sandboxes/simple-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/simple-dockview/tsconfig.json +++ b/packages/docs/sandboxes/simple-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/tabheight-dockview/package.json b/packages/docs/sandboxes/tabheight-dockview/package.json new file mode 100644 index 000000000..af6d19d63 --- /dev/null +++ b/packages/docs/sandboxes/tabheight-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "tabheight-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" + }, + "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" + ] +} diff --git a/packages/docs/sandboxes/tabheight-dockview/public/index.html b/packages/docs/sandboxes/tabheight-dockview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/tabheight-dockview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/tabheight-dockview/src/app.scss b/packages/docs/sandboxes/tabheight-dockview/src/app.scss new file mode 100644 index 000000000..315d564ac --- /dev/null +++ b/packages/docs/sandboxes/tabheight-dockview/src/app.scss @@ -0,0 +1,3 @@ +.skinny-tabs { + --dv-tabs-and-actions-container-height: 20px; +} diff --git a/packages/docs/sandboxes/tabheight-dockview/src/app.tsx b/packages/docs/sandboxes/tabheight-dockview/src/app.tsx new file mode 100644 index 000000000..bd053a990 --- /dev/null +++ b/packages/docs/sandboxes/tabheight-dockview/src/app.tsx @@ -0,0 +1,83 @@ +import { + DockviewReact, + DockviewReadyEvent, + IDockviewPanelProps, +} from 'dockview'; +import * as React from 'react'; +import './app.scss'; + +const components = { + default: (props: IDockviewPanelProps<{ title: string }>) => { + return ( +
+ {props.params.title} +
+ ); + }, +}; + +export const App: React.FC = () => { + const onReady = (event: DockviewReadyEvent) => { + event.api.addPanel({ + id: 'panel_1', + component: 'default', + params: { + title: 'Panel 1', + }, + }); + + event.api.addPanel({ + id: 'panel_2', + component: 'default', + params: { + title: 'Panel 2', + }, + }); + + event.api.addPanel({ + id: 'panel_3', + component: 'default', + params: { + title: 'Panel 3', + }, + position: { referencePanel: 'panel_1', direction: 'right' }, + }); + + event.api.addPanel({ + id: 'panel_4', + component: 'default', + params: { + title: 'Panel 4', + }, + position: { referencePanel: 'panel_3', direction: 'right' }, + }); + + event.api.addPanel({ + id: 'panel_5', + component: 'default', + params: { + title: 'Panel 5', + }, + position: { referencePanel: 'panel_4', direction: 'below' }, + }); + + event.api.addPanel({ + id: 'panel_6', + component: 'default', + params: { + title: 'Panel 6', + }, + position: { referencePanel: 'panel_5', direction: 'right' }, + }); + }; + + return ( + + ); +}; + +export default App; diff --git a/packages/docs/sandboxes/tabheight-dockview/src/index.tsx b/packages/docs/sandboxes/tabheight-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/tabheight-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/tabheight-dockview/src/styles.css b/packages/docs/sandboxes/tabheight-dockview/src/styles.css new file mode 100644 index 000000000..a1d49a9b6 --- /dev/null +++ b/packages/docs/sandboxes/tabheight-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/tabheight-dockview/tsconfig.json b/packages/docs/sandboxes/tabheight-dockview/tsconfig.json new file mode 100644 index 000000000..8aebe3efe --- /dev/null +++ b/packages/docs/sandboxes/tabheight-dockview/tsconfig.json @@ -0,0 +1,19 @@ +{ + "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, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx b/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx index 93a3b1762..8c9115df6 100644 --- a/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx +++ b/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx @@ -6,10 +6,8 @@ import { import * as React from 'react'; const components = { - default: ( - props: IDockviewPanelProps<{ title: string; myValue: string }> - ) => { - const [title, setTitle] = React.useState(props.params.title); + default: (props: IDockviewPanelProps<{ myValue: string }>) => { + const [title, setTitle] = React.useState(props.api.title); const onChange = (event: React.ChangeEvent) => { setTitle(event.target.value); @@ -27,6 +25,7 @@ const components = {
+ {JSON.stringify(Object.keys(props.params))}
); }, @@ -44,7 +43,6 @@ export const App: React.FC = () => { id: 'panel_2', component: 'default', title: 'Panel 2', - position: { referencePanel: panel }, }); @@ -60,7 +58,6 @@ export const App: React.FC = () => { id: 'panel_4', component: 'default', title: 'Panel 4', - position: { referencePanel: panel3 }, }); }; diff --git a/packages/docs/sandboxes/updatetitle-dockview/tsconfig.json b/packages/docs/sandboxes/updatetitle-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/updatetitle-dockview/tsconfig.json +++ b/packages/docs/sandboxes/updatetitle-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/sandboxes/watermark-dockview/tsconfig.json b/packages/docs/sandboxes/watermark-dockview/tsconfig.json index 6e13e47b5..8aebe3efe 100644 --- a/packages/docs/sandboxes/watermark-dockview/tsconfig.json +++ b/packages/docs/sandboxes/watermark-dockview/tsconfig.json @@ -1,20 +1,19 @@ { - "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 - } + "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, + "noUnusedLocals": true + } } diff --git a/packages/docs/scripts/package-docs.js b/packages/docs/scripts/package-docs.js deleted file mode 100644 index 23ce40038..000000000 --- a/packages/docs/scripts/package-docs.js +++ /dev/null @@ -1,8 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); - -const output = path.join(__dirname, '../../../build'); - -const docsDir = path.join(__dirname, '../build'); - -fs.copySync(docsDir, path.join(output)); diff --git a/packages/docs/src/components/ui/container.scss b/packages/docs/src/components/ui/container.scss new file mode 100644 index 000000000..e69de29bb diff --git a/packages/docs/src/components/ui/container.tsx b/packages/docs/src/components/ui/container.tsx index 1345315bf..5ad78067e 100644 --- a/packages/docs/src/components/ui/container.tsx +++ b/packages/docs/src/components/ui/container.tsx @@ -1,5 +1,8 @@ import * as React from 'react'; import { CodeSandboxButton } from './codeSandboxButton'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import './container.scss'; +import { Spinner } from './spinner'; export const Container = (props: { children?: React.ReactNode; @@ -41,3 +44,147 @@ export const Container = (props: { ); }; + +const ReactIcon = (props: { height: number; width: number }) => { + return ( + + ); +}; + +const JavascriptIcon = (props: { height: number; width: number }) => { + return ( + + ); +}; + +export const MultiFrameworkContainer = (props: { + react: React.FC; + typescript: (parent: HTMLElement) => { dispose: () => void }; + sandboxId: string; + height?: number; +}) => { + const ref = React.useRef(null); + + const [framework, setFramework] = React.useState('React'); + + const [animation, setAnimation] = React.useState(false); + + React.useEffect(() => { + setAnimation(true); + + setTimeout(() => { + setAnimation(false); + }, 500); + }, [framework]); + + React.useEffect(() => { + if (!ref.current) { + return; + } + + if (framework === 'Javascript') { + const disposable = props.typescript(ref.current); + + return () => { + disposable.dispose(); + }; + } + + return; + }, [props.typescript, framework]); + + const sandboxId = React.useMemo(() => { + if (framework === 'Javascript') { + return `javascript/${props.sandboxId}`; + } + return props.sandboxId; + }, [props.sandboxId, framework]); + + return ( + <> +
+ {animation && ( +
+ +
+ )} + {framework === 'React' && } +
+
+
+ {framework === 'React' ? ( + + ) : ( + + )} + +
+ + +
+ + ); +}; diff --git a/packages/docs/src/components/ui/referenceTable.tsx b/packages/docs/src/components/ui/referenceTable.tsx new file mode 100644 index 000000000..1423122cc --- /dev/null +++ b/packages/docs/src/components/ui/referenceTable.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; + +export interface ReferenceProps { + props: { + prop: string; + default?: string; + type: string; + }[]; +} + +export const ReferenceTable = (props: ReferenceProps) => { + return ( + + + + + + + + + + {props.props.map((property) => { + return ( + + + + + + ); + })} + +
PropertyTypeDefault
+ {property.prop} + + {property.type} + + {property.default !== undefined && ( + {property.default} + )} +
+ ); +}; diff --git a/packages/docs/src/components/ui/spinner.scss b/packages/docs/src/components/ui/spinner.scss new file mode 100644 index 000000000..847ee4d22 --- /dev/null +++ b/packages/docs/src/components/ui/spinner.scss @@ -0,0 +1,55 @@ +.lds-ellipsis { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-ellipsis div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + border-radius: 50%; + background: #fff; + animation-timing-function: cubic-bezier(0, 1, 1, 0); +} +.lds-ellipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; +} +.lds-ellipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; +} +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} diff --git a/packages/docs/src/components/ui/spinner.tsx b/packages/docs/src/components/ui/spinner.tsx new file mode 100644 index 000000000..9627e3762 --- /dev/null +++ b/packages/docs/src/components/ui/spinner.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import './spinner.scss'; + +export const Spinner = () => { + return ( +
+
+
+
+
+
+ ); +}; diff --git a/packages/docs/static/img/js-icon.svg b/packages/docs/static/img/js-icon.svg new file mode 100644 index 000000000..9650ca78e --- /dev/null +++ b/packages/docs/static/img/js-icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/docs/static/img/react-icon.svg b/packages/docs/static/img/react-icon.svg new file mode 100644 index 000000000..ea77a618d --- /dev/null +++ b/packages/docs/static/img/react-icon.svg @@ -0,0 +1,9 @@ + + React Logo + + + + + + + diff --git a/packages/docs/static/img/splashscreen.gif b/packages/docs/static/img/splashscreen.gif new file mode 100644 index 000000000..df6b90557 Binary files /dev/null and b/packages/docs/static/img/splashscreen.gif differ diff --git a/packages/docs/versioned_docs/version-1.7.0/basics.mdx b/packages/docs/versioned_docs/version-1.7.2/basics.mdx similarity index 99% rename from packages/docs/versioned_docs/version-1.7.0/basics.mdx rename to packages/docs/versioned_docs/version-1.7.2/basics.mdx index 91fdcbfd9..33d0270c0 100644 --- a/packages/docs/versioned_docs/version-1.7.0/basics.mdx +++ b/packages/docs/versioned_docs/version-1.7.2/basics.mdx @@ -53,19 +53,16 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { const disposable = props.api.onDidActiveChange((event) => { console.log(`is panel active: ${event.isActive}`); }); - return () => { disposable.dispose(); // remember to dispose of any subscriptions }; }, [props.api]); - const addAnotherPanel = React.useCallback(() => { props.containerApi.addPanel({ id: 'another_id', component: 'anotherComponent', }); }, [props.containerApi]); - return (
{`My first panel has the title: ${props.params.title}`} @@ -98,7 +95,6 @@ React.useEffect(() => { const disposable = api.onDidFocusChange(() => { // write some code }); - return () => { disposable.dispose(); }; diff --git a/packages/docs/versioned_docs/version-1.7.0/components/_category_.json b/packages/docs/versioned_docs/version-1.7.2/components/_category_.json similarity index 100% rename from packages/docs/versioned_docs/version-1.7.0/components/_category_.json rename to packages/docs/versioned_docs/version-1.7.2/components/_category_.json diff --git a/packages/docs/versioned_docs/version-1.7.0/components/dockview.mdx b/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx similarity index 98% rename from packages/docs/versioned_docs/version-1.7.0/components/dockview.mdx rename to packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx index 61fcf4e2f..8097910eb 100644 --- a/packages/docs/versioned_docs/version-1.7.0/components/dockview.mdx +++ b/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx @@ -23,7 +23,8 @@ import DockviewSetTitle from '@site/sandboxes/updatetitle-dockview/src/app'; import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app'; import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app'; import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app'; -import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app'; +import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app'; +import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app'; # Dockview @@ -59,7 +60,6 @@ import { DockviewReact } from 'dockview'; | showDndOverlay | Event | Yes | false | | | defaultTabComponent | object | Yes | | | | groupControlComponent | object | Yes | | | -| tabHeight | number | Yes | | | | singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | ## Dockview API @@ -113,8 +113,6 @@ const onReady = (event: DockviewReadyEvent) => { | removeGroup | `(group: GroupPanel): void` | | | getGroup | `(id: string): GroupPanel \| undefined` | | | | | | -| getTabHeight | `(): number \| undefined` | | -| setTabHeight | `(height: number \| undefined): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | focus | `(): void` | | | layout | `(width: number, height:number): void` | Auto Resizing | @@ -612,6 +610,12 @@ to the entire width of the group. For example: +### Tab Height + + + + + ## Groups ### Locked group @@ -723,4 +727,7 @@ The core library is published as an independant package under the name `dockview > When using `dockview` there is no need to also install `dockview-core`. > `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`. - + diff --git a/packages/docs/versioned_docs/version-1.7.0/components/gridview.mdx b/packages/docs/versioned_docs/version-1.7.2/components/gridview.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.7.0/components/gridview.mdx rename to packages/docs/versioned_docs/version-1.7.2/components/gridview.mdx diff --git a/packages/docs/versioned_docs/version-1.7.0/components/paneview.mdx b/packages/docs/versioned_docs/version-1.7.2/components/paneview.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.7.0/components/paneview.mdx rename to packages/docs/versioned_docs/version-1.7.2/components/paneview.mdx diff --git a/packages/docs/versioned_docs/version-1.7.0/components/splitview.mdx b/packages/docs/versioned_docs/version-1.7.2/components/splitview.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.7.0/components/splitview.mdx rename to packages/docs/versioned_docs/version-1.7.2/components/splitview.mdx diff --git a/packages/docs/versioned_docs/version-1.7.0/index.mdx b/packages/docs/versioned_docs/version-1.7.2/index.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.7.0/index.mdx rename to packages/docs/versioned_docs/version-1.7.2/index.mdx diff --git a/packages/docs/versioned_docs/version-1.7.0/theme.mdx b/packages/docs/versioned_docs/version-1.7.2/theme.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.7.0/theme.mdx rename to packages/docs/versioned_docs/version-1.7.2/theme.mdx diff --git a/packages/docs/versioned_sidebars/version-1.7.0-sidebars.json b/packages/docs/versioned_sidebars/version-1.7.2-sidebars.json similarity index 100% rename from packages/docs/versioned_sidebars/version-1.7.0-sidebars.json rename to packages/docs/versioned_sidebars/version-1.7.2-sidebars.json diff --git a/packages/docs/versions.json b/packages/docs/versions.json index 48883d079..519af9b47 100644 --- a/packages/docs/versions.json +++ b/packages/docs/versions.json @@ -1,3 +1,3 @@ [ - "1.7.0" + "1.7.2" ] diff --git a/scripts/package-docs.js b/scripts/package-docs.js index 11ac3cf51..92c469bac 100644 --- a/scripts/package-docs.js +++ b/scripts/package-docs.js @@ -1,8 +1,11 @@ const fs = require('fs-extra'); const path = require('path'); -const output = path.join(__dirname, '../'); +const output = path.join(__dirname, '../build'); -const docsDir = path.join(__dirname, '../docs/build'); +const websiteDir = path.join(__dirname, '../packages/docs/build'); -fs.copySync(docsDir, path.join(output, 'docs')); +const docsDir = path.join(__dirname, '../docs'); + +fs.copySync(websiteDir, output); +fs.copySync(docsDir, path.join(output, 'typedocs')); diff --git a/scripts/package.js b/scripts/package.js deleted file mode 100644 index 9b0238063..000000000 --- a/scripts/package.js +++ /dev/null @@ -1,15 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); - -const output = path.join(__dirname, '../output'); - -const docsDir = path.join(__dirname, '../packages/dockview/typedocs'); -const webpackAppDir = path.join(__dirname, '../packages/dockview-demo/dist'); -// const storybookAppDir = path.join( -// __dirname, -// '../packages/dockview-demo/storybook-static' -// ); - -fs.copySync(docsDir, path.join(output, 'typedocs')); -fs.copySync(webpackAppDir, path.join(output, 'build')); -// fs.copySync(storybookAppDir, path.join(output, 'storybook-static')); diff --git a/module-build/tsconfig.json b/tsconfig.base.json similarity index 69% rename from module-build/tsconfig.json rename to tsconfig.base.json index e89bd96f9..2ca86a1c1 100644 --- a/module-build/tsconfig.json +++ b/tsconfig.base.json @@ -1,25 +1,26 @@ { "compilerOptions": { "module": "commonjs", - "declaration": true, "target": "es5", + "declaration": true, + "declarationMap": true, + "sourceMap": true, + "strict": true, + "allowUnreachableCode": false, + "forceConsistentCasingInFileNames": true, "esModuleInterop": true, "downlevelIteration": true, "incremental": true, - "sourceMap": true, "noImplicitReturns": true, "noImplicitAny": true, - "allowUnreachableCode": false, - "forceConsistentCasingInFileNames": true, - "strict": true, - "declarationMap": true, "lib": [ - "ES2015", - "ES2016.Array.Include", - "ES2017.String", - "ES2018.Promise", - "ES2019", - "DOM", - ] - } + "ES2015", + "ES2016.Array.Include", + "ES2017.String", + "ES2018.Promise", + "ES2019", + "DOM" + ] + }, + "exclude": ["**/*.spec.ts"] } diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json index 4343d501d..0703d75a7 100644 --- a/tsconfig.eslint.json +++ b/tsconfig.eslint.json @@ -1,9 +1,9 @@ { - "compilerOptions": { - "types": ["@types/node"], - "noEmit": true, - "allowJs": true - }, - "extends": "./module-build/tsconfig.esm.json", - "include": ["tests/**/*.ts", "tools/**/*.ts", ".eslintrc.js"] + "compilerOptions": { + "types": ["@types/node"], + "noEmit": true, + "allowJs": true + }, + "extends": "./tsconfig.base.json", + "include": ["tests/**/*.ts", "tools/**/*.ts", ".eslintrc.js"] } diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000..a9ac894b9 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./packages/dockview" + }, + { + "path": "./packages/dockview-core" + } + ] +} diff --git a/tsconfig.test.json b/tsconfig.test.json index d58b7d79f..5001874b2 100644 --- a/tsconfig.test.json +++ b/tsconfig.test.json @@ -1,22 +1,7 @@ - { + "extends": "./tsconfig.base.json", "compilerOptions": { - "module": "commonjs", - "target": "es2019", - "sourceMap": true, - "declaration": true, - "jsx": "react", - "noImplicitReturns": true, - "noImplicitAny": true, - "allowUnreachableCode": false, - "forceConsistentCasingInFileNames": true, - // "strict": true, - "strictBindCallApply": true, // pass - "alwaysStrict": true, // pass - "noImplicitThis": true, // pass - "strictFunctionTypes": true, // pass - "strictNullChecks": false, - "strictPropertyInitialization": false, + "jsx": "react-jsx" }, - "exclude": ["node_modules", "dist"] -} \ No newline at end of file + "include": ["**/*.spec.ts"] +} diff --git a/typedoc.base.json b/typedoc.base.json new file mode 100644 index 000000000..34bcb3e09 --- /dev/null +++ b/typedoc.base.json @@ -0,0 +1,4 @@ +{ + "$schema": "https://typedoc.org/schema.json", + "includeVersion": true +} \ No newline at end of file diff --git a/typedoc.json b/typedoc.json new file mode 100644 index 000000000..5b8c53b5d --- /dev/null +++ b/typedoc.json @@ -0,0 +1,7 @@ +{ + "entryPoints": ["packages/dockview", "packages/dockview-core"], + "name": "Dockview", + "entryPointStrategy": "packages", + "includeVersion": true, + "logLevel": "Verbose" +} diff --git a/yarn.lock b/yarn.lock index f28480a93..cf1e11427 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9918,7 +9918,7 @@ markdown-escapes@^1.0.0: resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535" integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg== -marked@^4.2.12: +marked@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3" integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A== @@ -10136,13 +10136,20 @@ minimatch@^6.1.6: dependencies: brace-expansion "^2.0.1" -minimatch@^7.1.3, minimatch@^7.4.1, minimatch@^7.4.2: +minimatch@^7.4.1, minimatch@^7.4.2: version "7.4.3" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-7.4.3.tgz#012cbf110a65134bb354ae9773b55256cdb045a2" integrity sha512-5UB4yYusDtkRPbRiy1cqZ1IpGNcJCGlEMG17RKzPddpyiPKoCdwohbED8g4QXT0ewCt8LTkQXuljsUfQ3FKM4A== dependencies: brace-expansion "^2.0.1" +minimatch@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.0.tgz#bfc8e88a1c40ffd40c172ddac3decb8451503b56" + integrity sha512-0jJj8AvgKqWN05mrwuqi8QYKx1WmYSUoKSxu5Qhs9prezTz10sxAHGNZe9J9cqIJzta8DWsleh2KaVaLl6Ru2w== + dependencies: + brace-expansion "^2.0.1" + minimist-options@4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619" @@ -13180,9 +13187,9 @@ shelljs@^0.8.5: rechoir "^0.6.2" shiki@^0.14.1: - version "0.14.1" - resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.1.tgz#9fbe082d0a8aa2ad63df4fbf2ee11ec924aa7ee1" - integrity sha512-+Jz4nBkCBe0mEDqo1eKRcCdjRtrCjozmcbTUjbPTX7OOJfEbTZzlUWlZtGe3Gb5oV1/jnojhG//YZc3rs9zSEw== + version "0.14.2" + resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.2.tgz#d51440800b701392b31ce2336036058e338247a1" + integrity sha512-ltSZlSLOuSY0M0Y75KA+ieRaZ0Trf5Wl3gutE7jzLuIcWxLp5i/uEnLoQWNvgKXQ5OMpGkJnVMRLAuzjc0LJ2A== dependencies: ansi-sequence-parser "^1.1.0" jsonc-parser "^3.2.0" @@ -14249,14 +14256,14 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA== -typedoc@^0.23.25: - version "0.23.28" - resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.23.28.tgz#3ce9c36ef1c273fa849d2dea18651855100d3ccd" - integrity sha512-9x1+hZWTHEQcGoP7qFmlo4unUoVJLB0H/8vfO/7wqTnZxg4kPuji9y3uRzEu0ZKez63OJAUmiGhUrtukC6Uj3w== +typedoc@^0.24.7: + version "0.24.7" + resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.24.7.tgz#7eeb272a1894b3789acc1a94b3f2ae8e7330ee39" + integrity sha512-zzfKDFIZADA+XRIp2rMzLe9xZ6pt12yQOhCr7cD7/PBTjhPmMyMvGrkZ2lPNJitg3Hj1SeiYFNzCsSDrlpxpKw== dependencies: lunr "^2.3.9" - marked "^4.2.12" - minimatch "^7.1.3" + marked "^4.3.0" + minimatch "^9.0.0" shiki "^0.14.1" "typescript@^3 || ^4", typescript@^4.9.5: