dockview 1.0.3 → 1.3.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 (261) hide show
  1. package/README.md +243 -186
  2. package/dist/cjs/api/component.api.d.ts +31 -25
  3. package/dist/cjs/api/component.api.js +97 -40
  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 +2 -2
  19. package/dist/cjs/dnd/abstractDragHandler.js +15 -15
  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 +3 -0
  28. package/dist/cjs/dnd/droptarget.js +72 -48
  29. package/dist/cjs/dnd/droptarget.js.map +1 -1
  30. package/dist/cjs/dockview/components/tab/defaultTab.d.ts +1 -2
  31. package/dist/cjs/dockview/components/tab/defaultTab.js +1 -9
  32. package/dist/cjs/dockview/components/tab/defaultTab.js.map +1 -1
  33. package/dist/cjs/dockview/components/watermark/watermark.d.ts +3 -3
  34. package/dist/cjs/dockview/components/watermark/watermark.js +4 -4
  35. package/dist/cjs/dockview/components/watermark/watermark.js.map +1 -1
  36. package/dist/cjs/dockview/deserializer.js.map +1 -1
  37. package/dist/cjs/dockview/dockviewComponent.d.ts +34 -23
  38. package/dist/cjs/dockview/dockviewComponent.js +117 -209
  39. package/dist/cjs/dockview/dockviewComponent.js.map +1 -1
  40. package/dist/cjs/dockview/dockviewGroupPanel.d.ts +3 -5
  41. package/dist/cjs/dockview/dockviewGroupPanel.js +10 -31
  42. package/dist/cjs/dockview/dockviewGroupPanel.js.map +1 -1
  43. package/dist/cjs/dockview/options.d.ts +2 -1
  44. package/dist/cjs/events.js +25 -4
  45. package/dist/cjs/events.js.map +1 -1
  46. package/dist/cjs/gridview/baseComponentGridview.d.ts +12 -20
  47. package/dist/cjs/gridview/baseComponentGridview.js +49 -45
  48. package/dist/cjs/gridview/baseComponentGridview.js.map +1 -1
  49. package/dist/cjs/gridview/basePanelView.d.ts +5 -8
  50. package/dist/cjs/gridview/basePanelView.js +16 -8
  51. package/dist/cjs/gridview/basePanelView.js.map +1 -1
  52. package/dist/cjs/gridview/branchNode.js +3 -3
  53. package/dist/cjs/gridview/branchNode.js.map +1 -1
  54. package/dist/cjs/gridview/gridview.js +21 -18
  55. package/dist/cjs/gridview/gridview.js.map +1 -1
  56. package/dist/cjs/gridview/gridviewComponent.d.ts +5 -6
  57. package/dist/cjs/gridview/gridviewComponent.js +33 -9
  58. package/dist/cjs/gridview/gridviewComponent.js.map +1 -1
  59. package/dist/cjs/gridview/gridviewPanel.d.ts +0 -1
  60. package/dist/cjs/gridview/gridviewPanel.js +3 -6
  61. package/dist/cjs/gridview/gridviewPanel.js.map +1 -1
  62. package/dist/cjs/gridview/leafNode.js +2 -1
  63. package/dist/cjs/gridview/leafNode.js.map +1 -1
  64. package/dist/cjs/groupview/groupPanel.d.ts +1 -7
  65. package/dist/cjs/groupview/groupview.d.ts +18 -10
  66. package/dist/cjs/groupview/groupview.js +51 -129
  67. package/dist/cjs/groupview/groupview.js.map +1 -1
  68. package/dist/cjs/groupview/groupviewPanel.d.ts +5 -2
  69. package/dist/cjs/groupview/groupviewPanel.js.map +1 -1
  70. package/dist/cjs/groupview/panel/content.d.ts +1 -1
  71. package/dist/cjs/groupview/panel/content.js +2 -1
  72. package/dist/cjs/groupview/panel/content.js.map +1 -1
  73. package/dist/cjs/groupview/tab.d.ts +10 -13
  74. package/dist/cjs/groupview/tab.js +22 -80
  75. package/dist/cjs/groupview/tab.js.map +1 -1
  76. package/dist/cjs/groupview/titlebar/tabsContainer.js +4 -6
  77. package/dist/cjs/groupview/titlebar/tabsContainer.js.map +1 -1
  78. package/dist/cjs/hostedContainer.js +2 -2
  79. package/dist/cjs/hostedContainer.js.map +1 -1
  80. package/dist/cjs/index.d.ts +3 -3
  81. package/dist/cjs/index.js +8 -4
  82. package/dist/cjs/index.js.map +1 -1
  83. package/dist/cjs/lifecycle.js +2 -1
  84. package/dist/cjs/lifecycle.js.map +1 -1
  85. package/dist/cjs/panel/types.d.ts +0 -2
  86. package/dist/cjs/paneview/defaultPaneviewHeader.d.ts +1 -1
  87. package/dist/cjs/paneview/defaultPaneviewHeader.js +1 -1
  88. package/dist/cjs/paneview/defaultPaneviewHeader.js.map +1 -1
  89. package/dist/cjs/paneview/draggablePaneviewPanel.d.ts +2 -2
  90. package/dist/cjs/paneview/draggablePaneviewPanel.js +32 -29
  91. package/dist/cjs/paneview/draggablePaneviewPanel.js.map +1 -1
  92. package/dist/cjs/paneview/paneview.d.ts +3 -1
  93. package/dist/cjs/paneview/paneview.js +13 -7
  94. package/dist/cjs/paneview/paneview.js.map +1 -1
  95. package/dist/cjs/paneview/paneviewComponent.d.ts +7 -6
  96. package/dist/cjs/paneview/paneviewComponent.js +65 -8
  97. package/dist/cjs/paneview/paneviewComponent.js.map +1 -1
  98. package/dist/cjs/paneview/paneviewPanel.js +1 -1
  99. package/dist/cjs/paneview/paneviewPanel.js.map +1 -1
  100. package/dist/cjs/react/deserializer.js +1 -3
  101. package/dist/cjs/react/deserializer.js.map +1 -1
  102. package/dist/cjs/react/dockview/components.js +5 -1
  103. package/dist/cjs/react/dockview/components.js.map +1 -1
  104. package/dist/cjs/react/dockview/dockview.d.ts +9 -9
  105. package/dist/cjs/react/dockview/dockview.js +40 -5
  106. package/dist/cjs/react/dockview/dockview.js.map +1 -1
  107. package/dist/cjs/react/dockview/reactContentPart.d.ts +2 -2
  108. package/dist/cjs/react/dockview/reactContentPart.js +6 -17
  109. package/dist/cjs/react/dockview/reactContentPart.js.map +1 -1
  110. package/dist/cjs/react/dockview/reactHeaderPart.d.ts +2 -2
  111. package/dist/cjs/react/dockview/reactHeaderPart.js +3 -2
  112. package/dist/cjs/react/dockview/reactHeaderPart.js.map +1 -1
  113. package/dist/cjs/react/dockview/reactWatermarkPart.d.ts +3 -4
  114. package/dist/cjs/react/dockview/reactWatermarkPart.js +3 -4
  115. package/dist/cjs/react/dockview/reactWatermarkPart.js.map +1 -1
  116. package/dist/cjs/react/dockview/v2/reactContentRenderer.d.ts +2 -2
  117. package/dist/cjs/react/dockview/v2/reactContentRenderer.js +2 -2
  118. package/dist/cjs/react/dockview/v2/reactContentRenderer.js.map +1 -1
  119. package/dist/cjs/react/dockview/v2/webviewContentRenderer.d.ts +2 -2
  120. package/dist/cjs/react/dockview/v2/webviewContentRenderer.js +2 -2
  121. package/dist/cjs/react/dockview/v2/webviewContentRenderer.js.map +1 -1
  122. package/dist/cjs/react/gridview/gridview.js +9 -2
  123. package/dist/cjs/react/gridview/gridview.js.map +1 -1
  124. package/dist/cjs/react/gridview/view.d.ts +3 -2
  125. package/dist/cjs/react/gridview/view.js +2 -2
  126. package/dist/cjs/react/gridview/view.js.map +1 -1
  127. package/dist/cjs/react/index.d.ts +1 -0
  128. package/dist/cjs/react/index.js +5 -1
  129. package/dist/cjs/react/index.js.map +1 -1
  130. package/dist/cjs/react/paneview/paneview.js +6 -2
  131. package/dist/cjs/react/paneview/paneview.js.map +1 -1
  132. package/dist/cjs/react/react.js +6 -3
  133. package/dist/cjs/react/react.js.map +1 -1
  134. package/dist/cjs/react/splitview/splitview.js +8 -2
  135. package/dist/cjs/react/splitview/splitview.js.map +1 -1
  136. package/dist/cjs/react/splitview/view.js +2 -2
  137. package/dist/cjs/react/splitview/view.js.map +1 -1
  138. package/dist/cjs/splitview/core/splitview.js +1 -1
  139. package/dist/cjs/splitview/core/splitview.js.map +1 -1
  140. package/dist/cjs/splitview/splitviewComponent.d.ts +0 -3
  141. package/dist/cjs/splitview/splitviewComponent.js +50 -6
  142. package/dist/cjs/splitview/splitviewComponent.js.map +1 -1
  143. package/dist/cjs/splitview/splitviewPanel.d.ts +1 -6
  144. package/dist/cjs/splitview/splitviewPanel.js +5 -3
  145. package/dist/cjs/splitview/splitviewPanel.js.map +1 -1
  146. package/dist/dockview.amd.js +666 -791
  147. package/dist/dockview.amd.min.js +2 -16
  148. package/dist/dockview.amd.min.noStyle.js +2 -16
  149. package/dist/dockview.amd.noStyle.js +665 -790
  150. package/dist/dockview.cjs.js +666 -791
  151. package/dist/dockview.esm.js +666 -780
  152. package/dist/dockview.esm.min.js +2 -16
  153. package/dist/dockview.js +666 -791
  154. package/dist/dockview.min.js +2 -16
  155. package/dist/dockview.min.noStyle.js +2 -16
  156. package/dist/dockview.noStyle.js +665 -790
  157. package/dist/esm/api/component.api.d.ts +31 -25
  158. package/dist/esm/api/component.api.js +47 -26
  159. package/dist/esm/api/gridviewPanelApi.js +1 -0
  160. package/dist/esm/api/groupPanelApi.d.ts +11 -14
  161. package/dist/esm/api/groupPanelApi.js +18 -13
  162. package/dist/esm/api/panelApi.d.ts +0 -25
  163. package/dist/esm/api/panelApi.js +1 -20
  164. package/dist/esm/api/paneviewPanelApi.js +1 -0
  165. package/dist/esm/api/splitviewPanelApi.d.ts +0 -1
  166. package/dist/esm/api/splitviewPanelApi.js +1 -5
  167. package/dist/esm/dnd/abstractDragHandler.d.ts +2 -2
  168. package/dist/esm/dnd/abstractDragHandler.js +10 -10
  169. package/dist/esm/dnd/dataTransfer.d.ts +0 -25
  170. package/dist/esm/dnd/dataTransfer.js +0 -40
  171. package/dist/esm/dnd/dnd.d.ts +1 -14
  172. package/dist/esm/dnd/dnd.js +1 -69
  173. package/dist/esm/dnd/droptarget.d.ts +3 -0
  174. package/dist/esm/dnd/droptarget.js +72 -48
  175. package/dist/esm/dockview/components/tab/defaultTab.d.ts +1 -2
  176. package/dist/esm/dockview/components/tab/defaultTab.js +2 -10
  177. package/dist/esm/dockview/components/watermark/watermark.d.ts +3 -3
  178. package/dist/esm/dockview/components/watermark/watermark.js +4 -4
  179. package/dist/esm/dockview/dockviewComponent.d.ts +34 -23
  180. package/dist/esm/dockview/dockviewComponent.js +82 -150
  181. package/dist/esm/dockview/dockviewGroupPanel.d.ts +3 -5
  182. package/dist/esm/dockview/dockviewGroupPanel.js +6 -30
  183. package/dist/esm/dockview/options.d.ts +2 -1
  184. package/dist/esm/events.js +2 -3
  185. package/dist/esm/gridview/baseComponentGridview.d.ts +12 -20
  186. package/dist/esm/gridview/baseComponentGridview.js +27 -45
  187. package/dist/esm/gridview/basePanelView.d.ts +5 -8
  188. package/dist/esm/gridview/basePanelView.js +12 -8
  189. package/dist/esm/gridview/branchNode.js +3 -3
  190. package/dist/esm/gridview/gridview.js +18 -16
  191. package/dist/esm/gridview/gridviewComponent.d.ts +5 -6
  192. package/dist/esm/gridview/gridviewComponent.js +12 -10
  193. package/dist/esm/gridview/gridviewPanel.d.ts +0 -1
  194. package/dist/esm/gridview/gridviewPanel.js +3 -6
  195. package/dist/esm/gridview/leafNode.js +1 -0
  196. package/dist/esm/groupview/groupPanel.d.ts +1 -7
  197. package/dist/esm/groupview/groupview.d.ts +18 -10
  198. package/dist/esm/groupview/groupview.js +30 -59
  199. package/dist/esm/groupview/groupviewPanel.d.ts +5 -2
  200. package/dist/esm/groupview/panel/content.d.ts +1 -1
  201. package/dist/esm/groupview/panel/content.js +2 -1
  202. package/dist/esm/groupview/tab.d.ts +10 -13
  203. package/dist/esm/groupview/tab.js +17 -24
  204. package/dist/esm/groupview/titlebar/tabsContainer.js +4 -6
  205. package/dist/esm/hostedContainer.js +2 -2
  206. package/dist/esm/index.d.ts +3 -3
  207. package/dist/esm/index.js +1 -2
  208. package/dist/esm/lifecycle.js +2 -1
  209. package/dist/esm/panel/types.d.ts +0 -2
  210. package/dist/esm/paneview/defaultPaneviewHeader.d.ts +1 -1
  211. package/dist/esm/paneview/defaultPaneviewHeader.js +1 -1
  212. package/dist/esm/paneview/draggablePaneviewPanel.d.ts +2 -2
  213. package/dist/esm/paneview/draggablePaneviewPanel.js +32 -29
  214. package/dist/esm/paneview/paneview.d.ts +3 -1
  215. package/dist/esm/paneview/paneview.js +10 -6
  216. package/dist/esm/paneview/paneviewComponent.d.ts +7 -6
  217. package/dist/esm/paneview/paneviewComponent.js +31 -7
  218. package/dist/esm/paneview/paneviewPanel.js +1 -1
  219. package/dist/esm/react/deserializer.js +1 -3
  220. package/dist/esm/react/dockview/dockview.d.ts +9 -9
  221. package/dist/esm/react/dockview/dockview.js +36 -5
  222. package/dist/esm/react/dockview/reactContentPart.d.ts +2 -2
  223. package/dist/esm/react/dockview/reactContentPart.js +6 -17
  224. package/dist/esm/react/dockview/reactHeaderPart.d.ts +2 -2
  225. package/dist/esm/react/dockview/reactHeaderPart.js +3 -2
  226. package/dist/esm/react/dockview/reactWatermarkPart.d.ts +3 -4
  227. package/dist/esm/react/dockview/reactWatermarkPart.js +3 -4
  228. package/dist/esm/react/dockview/v2/reactContentRenderer.d.ts +2 -2
  229. package/dist/esm/react/dockview/v2/reactContentRenderer.js +2 -2
  230. package/dist/esm/react/dockview/v2/webviewContentRenderer.d.ts +2 -2
  231. package/dist/esm/react/dockview/v2/webviewContentRenderer.js +2 -2
  232. package/dist/esm/react/gridview/gridview.js +4 -1
  233. package/dist/esm/react/gridview/view.d.ts +3 -2
  234. package/dist/esm/react/gridview/view.js +2 -2
  235. package/dist/esm/react/index.d.ts +1 -0
  236. package/dist/esm/react/paneview/paneview.js +1 -1
  237. package/dist/esm/react/react.js +1 -2
  238. package/dist/esm/react/splitview/splitview.js +3 -1
  239. package/dist/esm/react/splitview/view.js +2 -2
  240. package/dist/esm/splitview/core/splitview.js +1 -1
  241. package/dist/esm/splitview/splitviewComponent.d.ts +0 -3
  242. package/dist/esm/splitview/splitviewComponent.js +17 -6
  243. package/dist/esm/splitview/splitviewPanel.d.ts +1 -6
  244. package/dist/esm/splitview/splitviewPanel.js +5 -3
  245. package/dist/styles/dockview.css +14 -17
  246. package/package.json +13 -13
  247. package/dist/cjs/functions.d.ts +0 -1
  248. package/dist/cjs/functions.js +0 -42
  249. package/dist/cjs/functions.js.map +0 -1
  250. package/dist/cjs/groupview/panel/hostedPanel.d.ts +0 -22
  251. package/dist/cjs/groupview/panel/hostedPanel.js +0 -57
  252. package/dist/cjs/groupview/panel/hostedPanel.js.map +0 -1
  253. package/dist/cjs/json.d.ts +0 -1
  254. package/dist/cjs/json.js +0 -14
  255. package/dist/cjs/json.js.map +0 -1
  256. package/dist/esm/functions.d.ts +0 -1
  257. package/dist/esm/functions.js +0 -8
  258. package/dist/esm/groupview/panel/hostedPanel.d.ts +0 -22
  259. package/dist/esm/groupview/panel/hostedPanel.js +0 -43
  260. package/dist/esm/json.d.ts +0 -1
  261. 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
@@ -1,17 +1,16 @@
1
1
  import { IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
2
2
  import { AddGroupOptions, AddPanelOptions, MovementOptions } from '../dockview/options';
3
- import { Direction, GroupChangeEvent } from '../gridview/baseComponentGridview';
3
+ import { Direction } 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
- import { AddPaneviewCompponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
8
- import { IPaneviewPanel, PaneviewPanel } from '../paneview/paneviewPanel';
7
+ import { AddPaneviewComponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
8
+ import { IPaneviewPanel } from '../paneview/paneviewPanel';
9
9
  import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview, SplitviewComponentUpdateOptions } from '../splitview/splitviewComponent';
10
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
- import { IDisposable } from '../lifecycle';
15
14
  import { PaneviewDropEvent } from '../react';
16
15
  export interface CommonApi {
17
16
  readonly height: number;
@@ -28,10 +27,10 @@ export declare class SplitviewApi implements CommonApi {
28
27
  get height(): number;
29
28
  get width(): number;
30
29
  get length(): number;
30
+ get orientation(): Orientation;
31
31
  get onDidLayoutChange(): Event<void>;
32
32
  get onDidAddView(): Event<IView>;
33
33
  get onDidRemoveView(): Event<IView>;
34
- get orientation(): Orientation;
35
34
  constructor(component: ISplitviewComponent);
36
35
  updateOptions(options: SplitviewComponentUpdateOptions): void;
37
36
  removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
@@ -49,13 +48,13 @@ export declare class SplitviewApi implements CommonApi {
49
48
  }
50
49
  export declare class PaneviewApi implements CommonApi {
51
50
  private readonly component;
52
- get width(): number;
53
- get height(): number;
54
51
  get minimumSize(): number;
55
52
  get maximumSize(): number;
53
+ get height(): number;
54
+ get width(): number;
56
55
  get onDidLayoutChange(): Event<void>;
57
- get onDidAddView(): Event<PaneviewPanel>;
58
- get onDidRemoveView(): Event<PaneviewPanel>;
56
+ get onDidAddView(): Event<IPaneviewPanel>;
57
+ get onDidRemoveView(): Event<IPaneviewPanel>;
59
58
  get onDidDrop(): Event<PaneviewDropEvent>;
60
59
  constructor(component: IPaneviewComponent);
61
60
  getPanels(): IPaneviewPanel[];
@@ -64,22 +63,25 @@ export declare class PaneviewApi implements CommonApi {
64
63
  movePanel(from: number, to: number): void;
65
64
  focus(): void;
66
65
  layout(width: number, height: number): void;
67
- addPanel(options: AddPaneviewCompponentOptions): IDisposable;
66
+ addPanel(options: AddPaneviewComponentOptions): void;
68
67
  resizeToFit(): void;
69
68
  fromJSON(data: SerializedPaneview, deferComponentLayout?: boolean): void;
70
69
  toJSON(): SerializedPaneview;
71
70
  }
72
71
  export declare class GridviewApi implements CommonApi {
73
72
  private readonly component;
74
- get width(): number;
75
- get height(): number;
76
73
  get minimumHeight(): number;
77
74
  get maximumHeight(): number;
78
75
  get minimumWidth(): number;
79
76
  get maximumWidth(): number;
80
- get onGridEvent(): Event<GroupChangeEvent>;
77
+ get width(): number;
78
+ get height(): number;
81
79
  get onDidLayoutChange(): Event<void>;
82
- get panels(): GridviewPanel[];
80
+ get onDidAddGroup(): Event<IGridviewPanel>;
81
+ get onDidRemoveGroup(): Event<IGridviewPanel>;
82
+ get onDidActiveGroupChange(): Event<IGridviewPanel | undefined>;
83
+ get onDidLayoutFromJSON(): Event<void>;
84
+ get panels(): IGridviewPanel[];
83
85
  get orientation(): Orientation;
84
86
  set orientation(value: Orientation);
85
87
  constructor(component: IGridviewComponent);
@@ -93,7 +95,7 @@ export declare class GridviewApi implements CommonApi {
93
95
  size?: number;
94
96
  }): void;
95
97
  resizeToFit(): void;
96
- getPanel(id: string): GridviewPanel | undefined;
98
+ getPanel(id: string): IGridviewPanel | undefined;
97
99
  toggleVisibility(panel: IGridviewPanel): void;
98
100
  setVisible(panel: IGridviewPanel, visible: boolean): void;
99
101
  setActive(panel: IGridviewPanel): void;
@@ -110,28 +112,32 @@ export declare class DockviewApi implements CommonApi {
110
112
  get maximumWidth(): number;
111
113
  get size(): number;
112
114
  get totalPanels(): number;
113
- get onGridEvent(): Event<GroupChangeEvent>;
115
+ get onDidActiveGroupChange(): Event<IGroupviewPanel | undefined>;
116
+ get onDidAddGroup(): Event<IGroupviewPanel>;
117
+ get onDidRemoveGroup(): Event<IGroupviewPanel>;
118
+ get onDidActivePanelChange(): Event<IGroupPanel | undefined>;
119
+ get onDidAddPanel(): Event<IGroupPanel>;
120
+ get onDidRemovePanel(): Event<IGroupPanel>;
121
+ get onDidLayoutfromJSON(): Event<void>;
114
122
  get onDidLayoutChange(): Event<void>;
115
123
  get panels(): IGroupPanel[];
116
- get groups(): GroupviewPanel[];
124
+ get groups(): IGroupviewPanel[];
117
125
  get activePanel(): IGroupPanel | undefined;
118
- get activeGroup(): GroupviewPanel | undefined;
126
+ get activeGroup(): IGroupviewPanel | undefined;
119
127
  constructor(component: IDockviewComponent);
120
128
  getTabHeight(): number | undefined;
121
129
  setTabHeight(height: number | undefined): void;
122
130
  focus(): void;
123
131
  getPanel(id: string): IGroupPanel | undefined;
124
- setActivePanel(panel: IGroupPanel): void;
125
132
  layout(width: number, height: number, force?: boolean): void;
126
133
  addPanel(options: AddPanelOptions): IGroupPanel;
127
- removePanel(panel: IGroupPanel): void;
128
134
  addEmptyGroup(options?: AddGroupOptions): void;
129
135
  moveToNext(options?: MovementOptions): void;
130
136
  moveToPrevious(options?: MovementOptions): void;
131
- closeAllGroups(): Promise<boolean>;
132
- removeGroup(group: GroupviewPanel): void;
137
+ closeAllGroups(): void;
138
+ removeGroup(group: IGroupviewPanel): void;
133
139
  resizeToFit(): void;
134
- getGroup(id: string): GroupviewPanel | undefined;
140
+ getGroup(id: string): IGroupviewPanel | undefined;
135
141
  fromJSON(data: SerializedDockview): void;
136
142
  toJSON(): SerializedDockview;
137
143
  }