react-headless-dock-layout 0.2.1 → 0.2.2

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 (6) hide show
  1. package/dist/index.cjs +1 -294
  2. package/dist/index.d.cts +120 -0
  3. package/dist/index.d.ts +120 -0
  4. package/dist/index.js +1 -294
  5. package/package.json +1 -1
  6. package/dist/index.css +0 -1
package/dist/index.d.cts ADDED
@@ -0,0 +1,120 @@
1
+ import * as react from 'react';
2
+ import { MouseEvent } from 'react';
3
+
4
+ interface Size {
5
+ width: number;
6
+ height: number;
7
+ }
8
+ interface Rect {
9
+ x: number;
10
+ y: number;
11
+ width: number;
12
+ height: number;
13
+ }
14
+ type Orientation = "horizontal" | "vertical";
15
+ type Direction = "top" | "bottom" | "left" | "right";
16
+
17
+ interface LayoutManagerOptions {
18
+ size?: Size;
19
+ gap?: number;
20
+ }
21
+ interface PanelLayoutRect extends Pick<PanelNode, "id" | "type">, Rect {
22
+ }
23
+ interface SplitLayoutRect extends Pick<SplitNode, "id" | "type" | "orientation">, Rect {
24
+ }
25
+ type LayoutRect = PanelLayoutRect | SplitLayoutRect;
26
+ interface PanelNode {
27
+ type: "panel";
28
+ id: string;
29
+ minSize?: Partial<Size>;
30
+ }
31
+ interface SplitNode {
32
+ type: "split";
33
+ id: string;
34
+ left: LayoutNode;
35
+ right: LayoutNode;
36
+ orientation: Orientation;
37
+ ratio: number;
38
+ }
39
+ type LayoutNode = PanelNode | SplitNode;
40
+
41
+ interface AddPanelStrategy {
42
+ getPlacement(root: LayoutNode): {
43
+ targetId: string;
44
+ direction: Direction;
45
+ ratio: number;
46
+ };
47
+ }
48
+ declare const evenlyDividedHorizontalStrategy: AddPanelStrategy;
49
+ declare const bspStrategy: AddPanelStrategy;
50
+
51
+ declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode | null, options?: LayoutManagerOptions): {
52
+ containerRef: react.RefObject<T | null>;
53
+ layoutRects: LayoutRect[];
54
+ getRectProps: (rect: LayoutRect) => {
55
+ readonly style: {
56
+ readonly position: "absolute";
57
+ readonly left: number;
58
+ readonly top: number;
59
+ readonly width: number;
60
+ readonly height: number;
61
+ readonly cursor: string;
62
+ };
63
+ readonly onMouseDown: () => void;
64
+ readonly onMouseUp: () => void;
65
+ readonly onMouseMove?: undefined;
66
+ } | {
67
+ readonly style: {
68
+ readonly position: "absolute";
69
+ readonly left: number;
70
+ readonly top: number;
71
+ readonly width: number;
72
+ readonly height: number;
73
+ readonly cursor?: undefined;
74
+ };
75
+ readonly onMouseMove: (event: MouseEvent<T>) => void;
76
+ readonly onMouseUp: (event: MouseEvent<T>) => void;
77
+ readonly onMouseDown?: undefined;
78
+ };
79
+ getDropZoneProps: (rect: PanelLayoutRect) => {
80
+ style: {
81
+ readonly position: "absolute";
82
+ readonly left: 0;
83
+ readonly top: 0;
84
+ readonly width: "100%";
85
+ readonly height: "50%";
86
+ } | {
87
+ readonly position: "absolute";
88
+ readonly left: 0;
89
+ readonly top: "50%";
90
+ readonly width: "100%";
91
+ readonly height: "50%";
92
+ } | {
93
+ readonly position: "absolute";
94
+ readonly left: 0;
95
+ readonly top: 0;
96
+ readonly width: "50%";
97
+ readonly height: "100%";
98
+ } | {
99
+ readonly position: "absolute";
100
+ readonly left: "50%";
101
+ readonly top: 0;
102
+ readonly width: "50%";
103
+ readonly height: "100%";
104
+ };
105
+ } | null;
106
+ getDragHandleProps: (rect: PanelLayoutRect) => {
107
+ onMouseDown: () => void;
108
+ };
109
+ draggingRect: PanelLayoutRect | null;
110
+ addPanel: (options?: {
111
+ id?: string;
112
+ targetId?: string;
113
+ direction?: Direction;
114
+ ratio?: number;
115
+ }) => void;
116
+ removePanel: (id: string) => void;
117
+ serialize: () => string;
118
+ };
119
+
120
+ export { type AddPanelStrategy, type LayoutManagerOptions, type LayoutNode, type LayoutRect, type PanelLayoutRect, type PanelNode, type SplitLayoutRect, type SplitNode, bspStrategy, evenlyDividedHorizontalStrategy, useDockLayout };
package/dist/index.d.ts ADDED
@@ -0,0 +1,120 @@
1
+ import * as react from 'react';
2
+ import { MouseEvent } from 'react';
3
+
4
+ interface Size {
5
+ width: number;
6
+ height: number;
7
+ }
8
+ interface Rect {
9
+ x: number;
10
+ y: number;
11
+ width: number;
12
+ height: number;
13
+ }
14
+ type Orientation = "horizontal" | "vertical";
15
+ type Direction = "top" | "bottom" | "left" | "right";
16
+
17
+ interface LayoutManagerOptions {
18
+ size?: Size;
19
+ gap?: number;
20
+ }
21
+ interface PanelLayoutRect extends Pick<PanelNode, "id" | "type">, Rect {
22
+ }
23
+ interface SplitLayoutRect extends Pick<SplitNode, "id" | "type" | "orientation">, Rect {
24
+ }
25
+ type LayoutRect = PanelLayoutRect | SplitLayoutRect;
26
+ interface PanelNode {
27
+ type: "panel";
28
+ id: string;
29
+ minSize?: Partial<Size>;
30
+ }
31
+ interface SplitNode {
32
+ type: "split";
33
+ id: string;
34
+ left: LayoutNode;
35
+ right: LayoutNode;
36
+ orientation: Orientation;
37
+ ratio: number;
38
+ }
39
+ type LayoutNode = PanelNode | SplitNode;
40
+
41
+ interface AddPanelStrategy {
42
+ getPlacement(root: LayoutNode): {
43
+ targetId: string;
44
+ direction: Direction;
45
+ ratio: number;
46
+ };
47
+ }
48
+ declare const evenlyDividedHorizontalStrategy: AddPanelStrategy;
49
+ declare const bspStrategy: AddPanelStrategy;
50
+
51
+ declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode | null, options?: LayoutManagerOptions): {
52
+ containerRef: react.RefObject<T | null>;
53
+ layoutRects: LayoutRect[];
54
+ getRectProps: (rect: LayoutRect) => {
55
+ readonly style: {
56
+ readonly position: "absolute";
57
+ readonly left: number;
58
+ readonly top: number;
59
+ readonly width: number;
60
+ readonly height: number;
61
+ readonly cursor: string;
62
+ };
63
+ readonly onMouseDown: () => void;
64
+ readonly onMouseUp: () => void;
65
+ readonly onMouseMove?: undefined;
66
+ } | {
67
+ readonly style: {
68
+ readonly position: "absolute";
69
+ readonly left: number;
70
+ readonly top: number;
71
+ readonly width: number;
72
+ readonly height: number;
73
+ readonly cursor?: undefined;
74
+ };
75
+ readonly onMouseMove: (event: MouseEvent<T>) => void;
76
+ readonly onMouseUp: (event: MouseEvent<T>) => void;
77
+ readonly onMouseDown?: undefined;
78
+ };
79
+ getDropZoneProps: (rect: PanelLayoutRect) => {
80
+ style: {
81
+ readonly position: "absolute";
82
+ readonly left: 0;
83
+ readonly top: 0;
84
+ readonly width: "100%";
85
+ readonly height: "50%";
86
+ } | {
87
+ readonly position: "absolute";
88
+ readonly left: 0;
89
+ readonly top: "50%";
90
+ readonly width: "100%";
91
+ readonly height: "50%";
92
+ } | {
93
+ readonly position: "absolute";
94
+ readonly left: 0;
95
+ readonly top: 0;
96
+ readonly width: "50%";
97
+ readonly height: "100%";
98
+ } | {
99
+ readonly position: "absolute";
100
+ readonly left: "50%";
101
+ readonly top: 0;
102
+ readonly width: "50%";
103
+ readonly height: "100%";
104
+ };
105
+ } | null;
106
+ getDragHandleProps: (rect: PanelLayoutRect) => {
107
+ onMouseDown: () => void;
108
+ };
109
+ draggingRect: PanelLayoutRect | null;
110
+ addPanel: (options?: {
111
+ id?: string;
112
+ targetId?: string;
113
+ direction?: Direction;
114
+ ratio?: number;
115
+ }) => void;
116
+ removePanel: (id: string) => void;
117
+ serialize: () => string;
118
+ };
119
+
120
+ export { type AddPanelStrategy, type LayoutManagerOptions, type LayoutNode, type LayoutRect, type PanelLayoutRect, type PanelNode, type SplitLayoutRect, type SplitNode, bspStrategy, evenlyDividedHorizontalStrategy, useDockLayout };