dockview 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (221) hide show
  1. package/README.md +243 -186
  2. package/dist/cjs/api/component.api.d.ts +32 -17
  3. package/dist/cjs/api/component.api.js +155 -28
  4. package/dist/cjs/api/component.api.js.map +1 -1
  5. package/dist/cjs/api/gridviewPanelApi.js +1 -0
  6. package/dist/cjs/api/gridviewPanelApi.js.map +1 -1
  7. package/dist/cjs/api/groupPanelApi.d.ts +11 -14
  8. package/dist/cjs/api/groupPanelApi.js +19 -17
  9. package/dist/cjs/api/groupPanelApi.js.map +1 -1
  10. package/dist/cjs/api/panelApi.d.ts +0 -25
  11. package/dist/cjs/api/panelApi.js +1 -20
  12. package/dist/cjs/api/panelApi.js.map +1 -1
  13. package/dist/cjs/api/paneviewPanelApi.js +1 -0
  14. package/dist/cjs/api/paneviewPanelApi.js.map +1 -1
  15. package/dist/cjs/api/splitviewPanelApi.d.ts +0 -1
  16. package/dist/cjs/api/splitviewPanelApi.js +1 -5
  17. package/dist/cjs/api/splitviewPanelApi.js.map +1 -1
  18. package/dist/cjs/dnd/abstractDragHandler.d.ts +3 -3
  19. package/dist/cjs/dnd/abstractDragHandler.js +15 -14
  20. package/dist/cjs/dnd/abstractDragHandler.js.map +1 -1
  21. package/dist/cjs/dnd/dataTransfer.d.ts +0 -25
  22. package/dist/cjs/dnd/dataTransfer.js +1 -45
  23. package/dist/cjs/dnd/dataTransfer.js.map +1 -1
  24. package/dist/cjs/dnd/dnd.d.ts +1 -14
  25. package/dist/cjs/dnd/dnd.js +1 -79
  26. package/dist/cjs/dnd/dnd.js.map +1 -1
  27. package/dist/cjs/dnd/droptarget.d.ts +4 -5
  28. package/dist/cjs/dnd/droptarget.js +70 -46
  29. package/dist/cjs/dnd/droptarget.js.map +1 -1
  30. package/dist/cjs/dockview/components/tab/defaultTab.d.ts +0 -1
  31. package/dist/cjs/dockview/components/tab/defaultTab.js +0 -8
  32. package/dist/cjs/dockview/components/tab/defaultTab.js.map +1 -1
  33. package/dist/cjs/dockview/defaultGroupPanelView.js +3 -1
  34. package/dist/cjs/dockview/defaultGroupPanelView.js.map +1 -1
  35. package/dist/cjs/dockview/dockviewComponent.d.ts +27 -19
  36. package/dist/cjs/dockview/dockviewComponent.js +67 -178
  37. package/dist/cjs/dockview/dockviewComponent.js.map +1 -1
  38. package/dist/cjs/dockview/dockviewGroupPanel.d.ts +2 -5
  39. package/dist/cjs/dockview/dockviewGroupPanel.js +2 -31
  40. package/dist/cjs/dockview/dockviewGroupPanel.js.map +1 -1
  41. package/dist/cjs/dockview/options.d.ts +2 -1
  42. package/dist/cjs/events.d.ts +7 -0
  43. package/dist/cjs/events.js +47 -5
  44. package/dist/cjs/events.js.map +1 -1
  45. package/dist/cjs/gridview/baseComponentGridview.d.ts +9 -0
  46. package/dist/cjs/gridview/baseComponentGridview.js +20 -15
  47. package/dist/cjs/gridview/baseComponentGridview.js.map +1 -1
  48. package/dist/cjs/gridview/basePanelView.d.ts +5 -8
  49. package/dist/cjs/gridview/basePanelView.js +14 -8
  50. package/dist/cjs/gridview/basePanelView.js.map +1 -1
  51. package/dist/cjs/gridview/branchNode.js +1 -1
  52. package/dist/cjs/gridview/branchNode.js.map +1 -1
  53. package/dist/cjs/gridview/gridview.js +19 -18
  54. package/dist/cjs/gridview/gridview.js.map +1 -1
  55. package/dist/cjs/gridview/gridviewComponent.d.ts +4 -0
  56. package/dist/cjs/gridview/gridviewComponent.js +5 -0
  57. package/dist/cjs/gridview/gridviewComponent.js.map +1 -1
  58. package/dist/cjs/gridview/gridviewPanel.d.ts +0 -1
  59. package/dist/cjs/gridview/gridviewPanel.js +3 -6
  60. package/dist/cjs/gridview/gridviewPanel.js.map +1 -1
  61. package/dist/cjs/gridview/leafNode.js +1 -0
  62. package/dist/cjs/gridview/leafNode.js.map +1 -1
  63. package/dist/cjs/groupview/groupPanel.d.ts +0 -7
  64. package/dist/cjs/groupview/groupview.d.ts +15 -8
  65. package/dist/cjs/groupview/groupview.js +38 -125
  66. package/dist/cjs/groupview/groupview.js.map +1 -1
  67. package/dist/cjs/groupview/groupviewPanel.d.ts +5 -2
  68. package/dist/cjs/groupview/groupviewPanel.js.map +1 -1
  69. package/dist/cjs/groupview/panel/content.js +1 -0
  70. package/dist/cjs/groupview/panel/content.js.map +1 -1
  71. package/dist/cjs/groupview/tab.d.ts +10 -13
  72. package/dist/cjs/groupview/tab.js +22 -80
  73. package/dist/cjs/groupview/tab.js.map +1 -1
  74. package/dist/cjs/groupview/titlebar/tabsContainer.js +6 -8
  75. package/dist/cjs/groupview/titlebar/tabsContainer.js.map +1 -1
  76. package/dist/cjs/index.d.ts +1 -1
  77. package/dist/cjs/lifecycle.js +2 -1
  78. package/dist/cjs/lifecycle.js.map +1 -1
  79. package/dist/cjs/panel/types.d.ts +0 -2
  80. package/dist/cjs/paneview/draggablePaneviewPanel.d.ts +2 -2
  81. package/dist/cjs/paneview/draggablePaneviewPanel.js +32 -29
  82. package/dist/cjs/paneview/draggablePaneviewPanel.js.map +1 -1
  83. package/dist/cjs/paneview/paneview.d.ts +1 -1
  84. package/dist/cjs/paneview/paneview.js +2 -5
  85. package/dist/cjs/paneview/paneview.js.map +1 -1
  86. package/dist/cjs/paneview/paneviewComponent.d.ts +6 -5
  87. package/dist/cjs/paneview/paneviewComponent.js +11 -16
  88. package/dist/cjs/paneview/paneviewComponent.js.map +1 -1
  89. package/dist/cjs/paneview/paneviewPanel.d.ts +5 -1
  90. package/dist/cjs/paneview/paneviewPanel.js +14 -2
  91. package/dist/cjs/paneview/paneviewPanel.js.map +1 -1
  92. package/dist/cjs/react/deserializer.js +1 -3
  93. package/dist/cjs/react/deserializer.js.map +1 -1
  94. package/dist/cjs/react/dockview/dockview.d.ts +9 -9
  95. package/dist/cjs/react/dockview/dockview.js +14 -1
  96. package/dist/cjs/react/dockview/dockview.js.map +1 -1
  97. package/dist/cjs/react/dockview/reactContentPart.js +4 -4
  98. package/dist/cjs/react/dockview/reactContentPart.js.map +1 -1
  99. package/dist/cjs/react/dockview/reactHeaderPart.js +1 -0
  100. package/dist/cjs/react/dockview/reactHeaderPart.js.map +1 -1
  101. package/dist/cjs/react/dockview/reactWatermarkPart.d.ts +1 -2
  102. package/dist/cjs/react/dockview/reactWatermarkPart.js +1 -2
  103. package/dist/cjs/react/dockview/reactWatermarkPart.js.map +1 -1
  104. package/dist/cjs/react/gridview/view.js +2 -2
  105. package/dist/cjs/react/gridview/view.js.map +1 -1
  106. package/dist/cjs/react/index.d.ts +1 -0
  107. package/dist/cjs/react/index.js.map +1 -1
  108. package/dist/cjs/react/react.js +1 -2
  109. package/dist/cjs/react/react.js.map +1 -1
  110. package/dist/cjs/react/splitview/view.js +2 -2
  111. package/dist/cjs/react/splitview/view.js.map +1 -1
  112. package/dist/cjs/splitview/core/splitview.js +1 -1
  113. package/dist/cjs/splitview/core/splitview.js.map +1 -1
  114. package/dist/cjs/splitview/splitviewComponent.d.ts +9 -6
  115. package/dist/cjs/splitview/splitviewComponent.js +11 -1
  116. package/dist/cjs/splitview/splitviewComponent.js.map +1 -1
  117. package/dist/cjs/splitview/splitviewPanel.d.ts +1 -6
  118. package/dist/cjs/splitview/splitviewPanel.js +5 -3
  119. package/dist/cjs/splitview/splitviewPanel.js.map +1 -1
  120. package/dist/dockview.amd.js +480 -567
  121. package/dist/dockview.amd.min.js +2 -16
  122. package/dist/dockview.amd.min.noStyle.js +2 -16
  123. package/dist/dockview.amd.noStyle.js +479 -566
  124. package/dist/dockview.cjs.js +480 -567
  125. package/dist/dockview.esm.js +480 -563
  126. package/dist/dockview.esm.min.js +2 -16
  127. package/dist/dockview.js +480 -567
  128. package/dist/dockview.min.js +2 -16
  129. package/dist/dockview.min.noStyle.js +2 -16
  130. package/dist/dockview.noStyle.js +479 -566
  131. package/dist/esm/api/component.api.d.ts +32 -17
  132. package/dist/esm/api/component.api.js +71 -20
  133. package/dist/esm/api/gridviewPanelApi.js +1 -0
  134. package/dist/esm/api/groupPanelApi.d.ts +11 -14
  135. package/dist/esm/api/groupPanelApi.js +18 -13
  136. package/dist/esm/api/panelApi.d.ts +0 -25
  137. package/dist/esm/api/panelApi.js +1 -20
  138. package/dist/esm/api/paneviewPanelApi.js +1 -0
  139. package/dist/esm/api/splitviewPanelApi.d.ts +0 -1
  140. package/dist/esm/api/splitviewPanelApi.js +1 -5
  141. package/dist/esm/dnd/abstractDragHandler.d.ts +3 -3
  142. package/dist/esm/dnd/abstractDragHandler.js +9 -8
  143. package/dist/esm/dnd/dataTransfer.d.ts +0 -25
  144. package/dist/esm/dnd/dataTransfer.js +0 -40
  145. package/dist/esm/dnd/dnd.d.ts +1 -14
  146. package/dist/esm/dnd/dnd.js +1 -69
  147. package/dist/esm/dnd/droptarget.d.ts +4 -5
  148. package/dist/esm/dnd/droptarget.js +70 -46
  149. package/dist/esm/dockview/components/tab/defaultTab.d.ts +0 -1
  150. package/dist/esm/dockview/components/tab/defaultTab.js +1 -9
  151. package/dist/esm/dockview/defaultGroupPanelView.js +3 -1
  152. package/dist/esm/dockview/dockviewComponent.d.ts +27 -19
  153. package/dist/esm/dockview/dockviewComponent.js +54 -118
  154. package/dist/esm/dockview/dockviewGroupPanel.d.ts +2 -5
  155. package/dist/esm/dockview/dockviewGroupPanel.js +2 -30
  156. package/dist/esm/dockview/options.d.ts +2 -1
  157. package/dist/esm/events.d.ts +7 -0
  158. package/dist/esm/events.js +20 -3
  159. package/dist/esm/gridview/baseComponentGridview.d.ts +9 -0
  160. package/dist/esm/gridview/baseComponentGridview.js +21 -16
  161. package/dist/esm/gridview/basePanelView.d.ts +5 -8
  162. package/dist/esm/gridview/basePanelView.js +10 -8
  163. package/dist/esm/gridview/branchNode.js +1 -1
  164. package/dist/esm/gridview/gridview.js +16 -16
  165. package/dist/esm/gridview/gridviewComponent.d.ts +4 -0
  166. package/dist/esm/gridview/gridviewComponent.js +5 -0
  167. package/dist/esm/gridview/gridviewPanel.d.ts +0 -1
  168. package/dist/esm/gridview/gridviewPanel.js +3 -6
  169. package/dist/esm/gridview/leafNode.js +1 -0
  170. package/dist/esm/groupview/groupPanel.d.ts +0 -7
  171. package/dist/esm/groupview/groupview.d.ts +15 -8
  172. package/dist/esm/groupview/groupview.js +24 -58
  173. package/dist/esm/groupview/groupviewPanel.d.ts +5 -2
  174. package/dist/esm/groupview/panel/content.js +1 -0
  175. package/dist/esm/groupview/tab.d.ts +10 -13
  176. package/dist/esm/groupview/tab.js +17 -24
  177. package/dist/esm/groupview/titlebar/tabsContainer.js +6 -8
  178. package/dist/esm/index.d.ts +1 -1
  179. package/dist/esm/lifecycle.js +2 -1
  180. package/dist/esm/panel/types.d.ts +0 -2
  181. package/dist/esm/paneview/draggablePaneviewPanel.d.ts +2 -2
  182. package/dist/esm/paneview/draggablePaneviewPanel.js +32 -29
  183. package/dist/esm/paneview/paneview.d.ts +1 -1
  184. package/dist/esm/paneview/paneview.js +2 -5
  185. package/dist/esm/paneview/paneviewComponent.d.ts +6 -5
  186. package/dist/esm/paneview/paneviewComponent.js +11 -8
  187. package/dist/esm/paneview/paneviewPanel.d.ts +5 -1
  188. package/dist/esm/paneview/paneviewPanel.js +10 -2
  189. package/dist/esm/react/deserializer.js +1 -3
  190. package/dist/esm/react/dockview/dockview.d.ts +9 -9
  191. package/dist/esm/react/dockview/dockview.js +15 -2
  192. package/dist/esm/react/dockview/reactContentPart.js +4 -4
  193. package/dist/esm/react/dockview/reactHeaderPart.js +1 -0
  194. package/dist/esm/react/dockview/reactWatermarkPart.d.ts +1 -2
  195. package/dist/esm/react/dockview/reactWatermarkPart.js +1 -2
  196. package/dist/esm/react/gridview/view.js +2 -2
  197. package/dist/esm/react/index.d.ts +1 -0
  198. package/dist/esm/react/react.js +1 -2
  199. package/dist/esm/react/splitview/view.js +2 -2
  200. package/dist/esm/splitview/core/splitview.js +1 -1
  201. package/dist/esm/splitview/splitviewComponent.d.ts +9 -6
  202. package/dist/esm/splitview/splitviewComponent.js +10 -2
  203. package/dist/esm/splitview/splitviewPanel.d.ts +1 -6
  204. package/dist/esm/splitview/splitviewPanel.js +5 -3
  205. package/dist/styles/dockview.css +5 -9
  206. package/package.json +4 -4
  207. package/dist/cjs/functions.d.ts +0 -1
  208. package/dist/cjs/functions.js +0 -42
  209. package/dist/cjs/functions.js.map +0 -1
  210. package/dist/cjs/groupview/panel/hostedPanel.d.ts +0 -22
  211. package/dist/cjs/groupview/panel/hostedPanel.js +0 -57
  212. package/dist/cjs/groupview/panel/hostedPanel.js.map +0 -1
  213. package/dist/cjs/json.d.ts +0 -1
  214. package/dist/cjs/json.js +0 -14
  215. package/dist/cjs/json.js.map +0 -1
  216. package/dist/esm/functions.d.ts +0 -1
  217. package/dist/esm/functions.js +0 -8
  218. package/dist/esm/groupview/panel/hostedPanel.d.ts +0 -22
  219. package/dist/esm/groupview/panel/hostedPanel.js +0 -43
  220. package/dist/esm/json.d.ts +0 -1
  221. package/dist/esm/json.js +0 -9
package/README.md CHANGED
@@ -1,186 +1,243 @@
1
- <div align="center">
2
- <h1>dockview</h1>
3
-
4
- <p>Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support</p>
5
-
6
- </div>
7
-
8
- ---
9
-
10
- [![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview)
11
- [![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
12
- [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
13
- [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
14
- [![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview)
15
-
16
- ##
17
-
18
- A zero dependency layout manager based on the layering of splitview with support for ReactJS components, written in TypeScript.
19
-
20
- - [➡️](https://mathuo.github.io/dockview/) Live demo
21
- - [➡️](https://mathuo.github.io/dockview/output/storybook-static) Storybook demo
22
- - [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) Code examples
23
- - [➡️](https://mathuo.github.io/dockview/output/docs/index.html) Generated TypeDocs
24
-
25
- Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
26
-
27
- ## Features
28
-
29
- - Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with
30
- dockable and tabular views
31
- - Extensive API support at the component level and view level
32
- - Themable and customizable
33
- - Serialization / deserialization support
34
- - Tabular docking and Drag and Drop support
35
- - Documentation and examples
36
-
37
- ## Table of contents
38
-
39
- - [Quick start](#quick-start)
40
- - [Sandbox examples](#sandbox-examples)
41
- - [Serializated layouts](#serializated-layouts)
42
- - [Theming](#theming)
43
- - [Performance](#performance)
44
- - [FAQ](#faq)
45
-
46
- 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).
47
-
48
- ## Quick start
49
-
50
- 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).
51
-
52
- ```
53
- npm install --save dockview
54
- ```
55
-
56
- Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css`. For example:
57
-
58
- ```css
59
- @import '~dockview/dist/styles/dockview.css';
60
- ```
61
-
62
- You should also attach a dockview theme to an element containing your components. For example:
63
-
64
- ```html
65
- <body classname="dockview-theme-dark"></body>
66
- ```
67
-
68
- Demonstrated below is a high level example of a `DockviewReact` component. You can follow a similar pattern for `GridviewReact`, `SplitviewReact` and `PaneviewReact` components too, see examples for more.
69
-
70
- ```tsx
71
- import { DockviewReact, DockviewReadyEvent, PanelCollection.IDockviewPanelProps } from 'dockview';
72
-
73
- const components: PanelCollection<IDockviewPanelProps> = {
74
- default: (props: IDockviewPanelProps<{someProps: string}>) => {
75
- return <div>{props.params.someProps}</div>
76
- }
77
- };
78
-
79
- const Component = () => {
80
- const onReady = (event: DockviewReadyEvent) => {
81
- event.api.addPanel({
82
- id: 'panel1',
83
- component: 'default',
84
- params: {
85
- someProps: 'Hello',
86
- },
87
- });
88
- event.api.addPanel({
89
- id: 'panel2',
90
- component: 'default',
91
- params: {
92
- someProps: 'World',
93
- },
94
- position: { referencePanel: 'panel1', direction: 'below' },
95
- });
96
- };
97
-
98
- return <DockviewReact components={components} onReady={onReady} />;
99
- };
100
- ```
101
-
102
- Specifically for `DockviewReact` there exists higher-order components to encapsulate both the tab and contents into one logical component for the user making state sharing between the two simple, which is an optional feature.
103
-
104
- ```tsx
105
- const components: PanelCollection<IDockviewPanelProps> = {
106
- default: (props: IDockviewPanelProps<{ someProps: string }>) => {
107
- return <div>{props.params.someProps}</div>;
108
- },
109
- fancy: (props: IDockviewPanelProps) => {
110
- const close = () => props.api.close();
111
- return (
112
- <DockviewComponents.Panel>
113
- <DockviewComponents.Tab>
114
- <div>
115
- <span>{props.api.title}</span>
116
- <span onClick={close}>{'Close'}</span>
117
- </div>
118
- </DockviewComponents.Tab>
119
- <DockviewComponents.Content>
120
- <div>{'Hello world'}</div>
121
- </DockviewComponents.Content>
122
- </DockviewComponents.Panel>
123
- );
124
- },
125
- };
126
- ```
127
-
128
- ## Sandbox examples
129
-
130
- - [Dockview](https://codesandbox.io/s/simple-dockview-t6491)
131
- - [Gridview](https://codesandbox.io/s/simple-gridview-jrp0n)
132
- - [Splitview](https://codesandbox.io/s/simple-splitview-l53nn)
133
- - [Paneview](https://codesandbox.io/s/simple-paneview-v8qvb)
134
-
135
- ## Serializated layouts
136
-
137
- All view components support the methods `toJSON()`, `fromJSON(...)` and `onDidLayoutChange()`.
138
-
139
- See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d).
140
-
141
- ## Theming
142
-
143
- The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme.
144
-
145
- | CSS Property | Description |
146
- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
147
- | **General** |
148
- | --dv-active-sash-color | The background color a dividing sash during an interaction |
149
- | --dv-separator-border | The color of the seperator between panels |
150
- | **Paneview** |
151
- | --dv-paneview-header-border-color | - |
152
- | --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews |
153
- | **Dockview -> Dragging** |
154
- | --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over |
155
- | **Dockview -> Tabs container** |
156
- | --dv-tabs-and-actions-container-font-size | - |
157
- | --dv-tabs-and-actions-container-height | Default tab height |
158
- | --dv-tabs-and-actions-container-background-color | - |
159
- | --dv-tabs-container-scrollbar-color | - |
160
- | --dv-group-view-background-color | - |
161
- | **Dockview -> Tabs** | (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) |
162
- | --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
163
- | --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
164
- | --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |
165
- | --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group |
166
- | --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group |
167
- | --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group |
168
- | --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group |
169
- | --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group |
170
- | --dv-tab-divider-color | - |
171
- | --dv-tab-close-icon | Default tab close icon |
172
- | --dv-tab-dirty-icon | Default tab dirty icon |
173
-
174
- ## Performance
175
-
176
- Consider using React.lazy(...) to defer the importing of your panels until they are required. This has the potential to reduce the initial import cost when your application starts.
177
-
178
- ## FAQ
179
-
180
- **Q: Can I use this library without React?**
181
-
182
- **A:** In theory, yes. The library is written in plain-old JS and the parts written in ReactJS are merely wrappers around the plain-old JS components. Currently everything is published as one package though so maybe that's something to change in the future.
183
-
184
- **Q: Can I use this library with AngularJS/Vue.js or any other arbitrarily named JavaScript library/framework?**
185
-
186
- **A:** Yes but with some extra work. Dockview is written in plain-old JS so you can either interact directly with the plain-old JS components or create a wrapper using your prefered library/framework. The React wrapper may give some ideas on how this wrapper implementation could be done for other libraries/frameworks. Maybe that's something to change in the future.
1
+ <div align="center">
2
+ <h1>dockview</h1>
3
+
4
+ <p>Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support</p>
5
+
6
+ </div>
7
+
8
+ ---
9
+
10
+ [![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview)
11
+ [![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
12
+ [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
13
+ [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
14
+ [![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview)
15
+
16
+ ##
17
+
18
+ A zero dependency layout manager based on the layering of splitview with support for ReactJS components, written in TypeScript.
19
+
20
+ - [➡️](https://mathuo.github.io/dockview/) Live demo
21
+ - [➡️](https://mathuo.github.io/dockview/output/storybook-static) Storybook demo
22
+ - [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) Code examples
23
+ - [➡️](https://mathuo.github.io/dockview/output/docs/index.html) Generated TypeDocs
24
+
25
+ Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
26
+
27
+ ## Features
28
+
29
+ - Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with
30
+ dockable and tabular views
31
+ - Extensive API support at the component level and view level
32
+ - Themable and customizable
33
+ - Serialization / deserialization support
34
+ - Tabular docking and Drag and Drop support
35
+ - Documentation and examples
36
+
37
+ ## Table of contents
38
+
39
+ - [Quick start](#quick-start)
40
+ - [Sandbox examples](#sandbox-examples)
41
+ - [Serializated layouts](#serializated-layouts)
42
+ - [Drag and drop](#drag-and-drop)
43
+ - [Theming](#theming)
44
+ - [Performance](#performance)
45
+ - [FAQ](#faq)
46
+
47
+ 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).
48
+
49
+ ## Quick start
50
+
51
+ 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).
52
+
53
+ ```
54
+ npm install --save dockview
55
+ ```
56
+
57
+ Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css`. For example:
58
+
59
+ ```css
60
+ @import '~dockview/dist/styles/dockview.css';
61
+ ```
62
+
63
+ You should also attach a dockview theme to an element containing your components. For example:
64
+
65
+ ```html
66
+ <body classname="dockview-theme-dark"></body>
67
+ ```
68
+
69
+ Demonstrated below is a high level example of a `DockviewReact` component. You can follow a similar pattern for `GridviewReact`, `SplitviewReact` and `PaneviewReact` components too, see examples for more.
70
+
71
+ ```tsx
72
+ import {
73
+ DockviewReact,
74
+ DockviewReadyEvent,
75
+ PanelCollection,
76
+ IDockviewPanelProps,
77
+ IDockviewPanelHeaderProps,
78
+ } from 'dockview';
79
+
80
+ const components: PanelCollection<IDockviewPanelProps> = {
81
+ default: (props: IDockviewPanelProps<{ someProps: string }>) => {
82
+ return <div>{props.params.someProps}</div>;
83
+ },
84
+ };
85
+
86
+ const headers: PanelCollection<IDockviewPanelHeaderProps> = {
87
+ customTab: (props: IDockviewPanelHeaderProps) => {
88
+ return (
89
+ <div>
90
+ <span>{props.api.title}</span>
91
+ <span onClick={() => props.api.close()}>{'[x]'}</span>
92
+ </div>
93
+ );
94
+ },
95
+ };
96
+
97
+ const Component = () => {
98
+ const onReady = (event: DockviewReadyEvent) => {
99
+ event.api.addPanel({
100
+ id: 'panel1',
101
+ component: 'default',
102
+ params: {
103
+ someProps: 'Hello',
104
+ },
105
+ });
106
+ event.api.addPanel({
107
+ id: 'panel2',
108
+ component: 'default',
109
+ params: {
110
+ someProps: 'World',
111
+ },
112
+ position: { referencePanel: 'panel1', direction: 'below' },
113
+ });
114
+ };
115
+
116
+ return (
117
+ <DockviewReact
118
+ components={components}
119
+ tabComponents={headers}
120
+ onReady={onReady}
121
+ />
122
+ );
123
+ };
124
+ ```
125
+
126
+ Specifically for `DockviewReact` there exists higher-order components to encapsulate both the tab and contents into one logical component for the user making state sharing between the two simple, which is an optional feature.
127
+
128
+ ```tsx
129
+ const components: PanelCollection<IDockviewPanelProps> = {
130
+ default: (props: IDockviewPanelProps<{ someProps: string }>) => {
131
+ return <div>{props.params.someProps}</div>;
132
+ },
133
+ fancy: (props: IDockviewPanelProps) => {
134
+ const close = () => props.api.close();
135
+ return (
136
+ <DockviewComponents.Panel>
137
+ <DockviewComponents.Tab>
138
+ <div>
139
+ <span>{props.api.title}</span>
140
+ <span onClick={close}>{'Close'}</span>
141
+ </div>
142
+ </DockviewComponents.Tab>
143
+ <DockviewComponents.Content>
144
+ <div>{'Hello world'}</div>
145
+ </DockviewComponents.Content>
146
+ </DockviewComponents.Panel>
147
+ );
148
+ },
149
+ };
150
+ ```
151
+
152
+ ## Sandbox examples
153
+
154
+ - [Dockview](https://codesandbox.io/s/simple-dockview-t6491)
155
+ - [Gridview](https://codesandbox.io/s/simple-gridview-jrp0n)
156
+ - [Splitview](https://codesandbox.io/s/simple-splitview-l53nn)
157
+ - [Paneview](https://codesandbox.io/s/simple-paneview-v8qvb)
158
+
159
+ ## Serializated layouts
160
+
161
+ All view components support the methods `toJSON()`, `fromJSON(...)` and `onDidLayoutChange()`.
162
+
163
+ See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d).
164
+
165
+ ## Drag and drop
166
+
167
+ Both `DockviewReact` and `PaneviewReact` support drag and drop functionality out of the box.
168
+
169
+ - `DockviewReact` allows tabs to be repositioned using drag and drop.
170
+ - `PaneviewReact` allows the repositioning of views using drag and drop on the header section.
171
+
172
+ You can use the utility methods `getPaneData` and `getPanelData` to manually extract the data transfer metadata associated with an active drag and drop event for either of the above components.
173
+
174
+ ```tsx
175
+ import {
176
+ getPaneData,
177
+ getPanelData,
178
+ PanelTransfer,
179
+ PaneTransfer,
180
+ } from 'dockview';
181
+
182
+ const panelData: PanelTransfer | undefined = getPanelData();
183
+
184
+ if (panelData) {
185
+ // DockviewReact: data transfer metadata associated with the active drag and drop event
186
+ const { viewId, groupId, panelId } = panelData; // deconstructed object
187
+ }
188
+
189
+ const paneData: PaneTransfer | undefined = getPaneData();
190
+
191
+ if (paneData) {
192
+ // PaneviewReact: data transfer metadata associated with the active drag and drop event
193
+ const { viewId, paneId } = paneData; // deconstructed object
194
+ }
195
+ ```
196
+
197
+ You can also intercept custom drag and drop events allowing dockview components to interact with and react to external drag events. `PaneviewReact` supports the method `onDidDrop` and `DockviewReact` supports the methods `onDidDrop` and `showDndOverlay`.
198
+
199
+ ## Theming
200
+
201
+ The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme.
202
+
203
+ | CSS Property | Description |
204
+ | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
205
+ | **General** |
206
+ | --dv-active-sash-color | The background color a dividing sash during an interaction |
207
+ | --dv-separator-border | The color of the seperator between panels |
208
+ | **Paneview** |
209
+ | --dv-paneview-header-border-color | - |
210
+ | --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews |
211
+ | **Dockview -> Dragging** |
212
+ | --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over |
213
+ | **Dockview -> Tabs container** |
214
+ | --dv-tabs-and-actions-container-font-size | - |
215
+ | --dv-tabs-and-actions-container-height | Default tab height |
216
+ | --dv-tabs-and-actions-container-background-color | - |
217
+ | --dv-tabs-container-scrollbar-color | - |
218
+ | --dv-group-view-background-color | - |
219
+ | **Dockview -> Tabs** | (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) |
220
+ | --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
221
+ | --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
222
+ | --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |
223
+ | --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group |
224
+ | --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group |
225
+ | --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group |
226
+ | --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group |
227
+ | --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group |
228
+ | --dv-tab-divider-color | - |
229
+ | --dv-tab-close-icon | Default tab close icon |
230
+
231
+ ## Performance
232
+
233
+ Consider using React.lazy(...) to defer the importing of your panels until they are required. This has the potential to reduce the initial import cost when your application starts.
234
+
235
+ ## FAQ
236
+
237
+ **Q: Can I use this library without React?**
238
+
239
+ **A:** In theory, yes. The library is written in plain-old JS and the parts written in ReactJS are merely wrappers around the plain-old JS components. Currently everything is published as one package though so maybe that's something to change in the future.
240
+
241
+ **Q: Can I use this library with AngularJS/Vue.js or any other arbitrarily named JavaScript library/framework?**
242
+
243
+ **A:** Yes but with some extra work. Dockview is written in plain-old JS so you can either interact directly with the plain-old JS components or create a wrapper using your prefered library/framework. The React wrapper may give some ideas on how this wrapper implementation could be done for other libraries/frameworks. Maybe that's something to change in the future.
package/dist/cjs/api/component.api.d.ts CHANGED
@@ -2,16 +2,17 @@ import { IDockviewComponent, SerializedDockview } from '../dockview/dockviewComp
2
2
  import { AddGroupOptions, AddPanelOptions, MovementOptions } from '../dockview/options';
3
3
  import { Direction, GroupChangeEvent } from '../gridview/baseComponentGridview';
4
4
  import { AddComponentOptions, IGridviewComponent, SerializedGridview } from '../gridview/gridviewComponent';
5
- import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
5
+ import { IGridviewPanel } from '../gridview/gridviewPanel';
6
6
  import { IGroupPanel } from '../groupview/groupPanel';
7
7
  import { AddPaneviewCompponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
8
8
  import { IPaneviewPanel } from '../paneview/paneviewPanel';
9
9
  import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview, SplitviewComponentUpdateOptions } from '../splitview/splitviewComponent';
10
- import { Orientation, Sizing } from '../splitview/core/splitview';
10
+ import { IView, Orientation, Sizing } from '../splitview/core/splitview';
11
11
  import { ISplitviewPanel } from '../splitview/splitviewPanel';
12
- import { GroupviewPanel } from '../groupview/groupviewPanel';
12
+ import { IGroupviewPanel } from '../groupview/groupviewPanel';
13
13
  import { Event } from '../events';
14
14
  import { IDisposable } from '../lifecycle';
15
+ import { PaneviewDropEvent } from '../react';
15
16
  export interface CommonApi {
16
17
  readonly height: number;
17
18
  readonly width: number;
@@ -27,8 +28,10 @@ export declare class SplitviewApi implements CommonApi {
27
28
  get height(): number;
28
29
  get width(): number;
29
30
  get length(): number;
30
- get onDidLayoutChange(): Event<void>;
31
31
  get orientation(): Orientation;
32
+ get onDidLayoutChange(): Event<void>;
33
+ get onDidAddView(): Event<IView>;
34
+ get onDidRemoveView(): Event<IView>;
32
35
  constructor(component: ISplitviewComponent);
33
36
  updateOptions(options: SplitviewComponentUpdateOptions): void;
34
37
  removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
@@ -46,11 +49,14 @@ export declare class SplitviewApi implements CommonApi {
46
49
  }
47
50
  export declare class PaneviewApi implements CommonApi {
48
51
  private readonly component;
49
- get width(): number;
50
- get height(): number;
51
52
  get minimumSize(): number;
52
53
  get maximumSize(): number;
54
+ get height(): number;
55
+ get width(): number;
53
56
  get onDidLayoutChange(): Event<void>;
57
+ get onDidAddView(): Event<IPaneviewPanel>;
58
+ get onDidRemoveView(): Event<IPaneviewPanel>;
59
+ get onDidDrop(): Event<PaneviewDropEvent>;
54
60
  constructor(component: IPaneviewComponent);
55
61
  getPanels(): IPaneviewPanel[];
56
62
  removePanel(panel: IPaneviewPanel): void;
@@ -65,15 +71,19 @@ export declare class PaneviewApi implements CommonApi {
65
71
  }
66
72
  export declare class GridviewApi implements CommonApi {
67
73
  private readonly component;
68
- get width(): number;
69
- get height(): number;
70
74
  get minimumHeight(): number;
71
75
  get maximumHeight(): number;
72
76
  get minimumWidth(): number;
73
77
  get maximumWidth(): number;
78
+ get width(): number;
79
+ get height(): number;
74
80
  get onGridEvent(): Event<GroupChangeEvent>;
75
81
  get onDidLayoutChange(): Event<void>;
76
- get panels(): GridviewPanel[];
82
+ get onDidAddGroup(): Event<IGridviewPanel>;
83
+ get onDidRemoveGroup(): Event<IGridviewPanel>;
84
+ get onDidActiveGroupChange(): Event<IGridviewPanel | undefined>;
85
+ get onDidLayoutFromJSON(): Event<void>;
86
+ get panels(): IGridviewPanel[];
77
87
  get orientation(): Orientation;
78
88
  set orientation(value: Orientation);
79
89
  constructor(component: IGridviewComponent);
@@ -87,7 +97,7 @@ export declare class GridviewApi implements CommonApi {
87
97
  size?: number;
88
98
  }): void;
89
99
  resizeToFit(): void;
90
- getPanel(id: string): GridviewPanel | undefined;
100
+ getPanel(id: string): IGridviewPanel | undefined;
91
101
  toggleVisibility(panel: IGridviewPanel): void;
92
102
  setVisible(panel: IGridviewPanel, visible: boolean): void;
93
103
  setActive(panel: IGridviewPanel): void;
@@ -105,27 +115,32 @@ export declare class DockviewApi implements CommonApi {
105
115
  get size(): number;
106
116
  get totalPanels(): number;
107
117
  get onGridEvent(): Event<GroupChangeEvent>;
118
+ get onDidActiveGroupChange(): Event<IGroupviewPanel | undefined>;
119
+ get onDidAddGroup(): Event<IGroupviewPanel>;
120
+ get onDidRemoveGroup(): Event<IGroupviewPanel>;
121
+ get onDidActivePanelChange(): Event<IGroupPanel | undefined>;
122
+ get onDidAddPanel(): Event<IGroupPanel>;
123
+ get onDidRemovePanel(): Event<IGroupPanel>;
124
+ get onDidLayoutfromJSON(): Event<void>;
108
125
  get onDidLayoutChange(): Event<void>;
109
126
  get panels(): IGroupPanel[];
110
- get groups(): GroupviewPanel[];
127
+ get groups(): IGroupviewPanel[];
111
128
  get activePanel(): IGroupPanel | undefined;
112
- get activeGroup(): GroupviewPanel | undefined;
129
+ get activeGroup(): IGroupviewPanel | undefined;
113
130
  constructor(component: IDockviewComponent);
114
131
  getTabHeight(): number | undefined;
115
132
  setTabHeight(height: number | undefined): void;
116
133
  focus(): void;
117
134
  getPanel(id: string): IGroupPanel | undefined;
118
- setActivePanel(panel: IGroupPanel): void;
119
135
  layout(width: number, height: number, force?: boolean): void;
120
136
  addPanel(options: AddPanelOptions): IGroupPanel;
121
- removePanel(panel: IGroupPanel): void;
122
137
  addEmptyGroup(options?: AddGroupOptions): void;
123
138
  moveToNext(options?: MovementOptions): void;
124
139
  moveToPrevious(options?: MovementOptions): void;
125
- closeAllGroups(): Promise<boolean>;
126
- removeGroup(group: GroupviewPanel): void;
140
+ closeAllGroups(): void;
141
+ removeGroup(group: IGroupviewPanel): void;
127
142
  resizeToFit(): void;
128
- getGroup(id: string): GroupviewPanel | undefined;
143
+ getGroup(id: string): IGroupviewPanel | undefined;
129
144
  fromJSON(data: SerializedDockview): void;
130
145
  toJSON(): SerializedDockview;
131
146
  }