@aiquants/resize-panels 2.0.0 → 2.0.1
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.
- package/dist/GlobalDebugOverlay.d.ts +4 -0
- package/dist/Panel.d.ts +13 -0
- package/dist/{src/PanelDebugInfo.d.ts → PanelDebugInfo.d.ts} +2 -14
- package/dist/PanelGroup.d.ts +2 -0
- package/dist/PanelResizeHandle.d.ts +2 -0
- package/dist/allocateLayout.d.ts +12 -0
- package/dist/context.d.ts +3 -0
- package/dist/debugOverlayStore.d.ts +32 -0
- package/dist/{src/hooks.d.ts → hooks.d.ts} +8 -23
- package/dist/index.d.ts +13 -2
- package/dist/reducer.d.ts +8 -0
- package/dist/roundHalfToEven.d.ts +1 -0
- package/dist/types.d.ts +183 -0
- package/dist/utils/simple-logger.d.ts +37 -0
- package/dist/utils.d.ts +16 -0
- package/package.json +2 -3
- package/dist/src/GlobalDebugOverlay.d.ts +0 -21
- package/dist/src/GlobalDebugOverlay.d.ts.map +0 -1
- package/dist/src/Panel.d.ts +0 -46
- package/dist/src/Panel.d.ts.map +0 -1
- package/dist/src/PanelDebugInfo.d.ts.map +0 -1
- package/dist/src/PanelGroup.d.ts +0 -7
- package/dist/src/PanelGroup.d.ts.map +0 -1
- package/dist/src/PanelResizeHandle.d.ts +0 -7
- package/dist/src/PanelResizeHandle.d.ts.map +0 -1
- package/dist/src/allocateLayout.d.ts +0 -60
- package/dist/src/allocateLayout.d.ts.map +0 -1
- package/dist/src/context.d.ts +0 -12
- package/dist/src/context.d.ts.map +0 -1
- package/dist/src/debugOverlayStore.d.ts +0 -69
- package/dist/src/debugOverlayStore.d.ts.map +0 -1
- package/dist/src/hooks.d.ts.map +0 -1
- package/dist/src/index.d.ts +0 -32
- package/dist/src/index.d.ts.map +0 -1
- package/dist/src/reducer.d.ts +0 -49
- package/dist/src/reducer.d.ts.map +0 -1
- package/dist/src/roundHalfToEven.d.ts +0 -10
- package/dist/src/roundHalfToEven.d.ts.map +0 -1
- package/dist/src/types.d.ts +0 -481
- package/dist/src/types.d.ts.map +0 -1
- package/dist/src/utils/simple-logger.d.ts +0 -111
- package/dist/src/utils/simple-logger.d.ts.map +0 -1
- package/dist/src/utils.d.ts +0 -164
- package/dist/src/utils.d.ts.map +0 -1
- package/dist/tests/support/dom-harness.d.ts +0 -89
- package/dist/tests/support/dom-harness.d.ts.map +0 -1
- package/src/GlobalDebugOverlay.tsx +0 -284
- package/src/Panel.tsx +0 -297
- package/src/PanelDebugInfo.tsx +0 -94
- package/src/PanelGroup.tsx +0 -245
- package/src/PanelResizeHandle.tsx +0 -758
- package/src/allocateLayout.ts +0 -412
- package/src/context.ts +0 -25
- package/src/debugOverlayStore.ts +0 -355
- package/src/hooks.ts +0 -376
- package/src/index.ts +0 -93
- package/src/reducer.ts +0 -472
- package/src/roundHalfToEven.ts +0 -40
- package/src/styles/components.entry.css +0 -10
- package/src/styles/resize-panels.css +0 -1
- package/src/styles/standalone.entry.css +0 -12
- package/src/types.ts +0 -505
- package/src/utils/simple-logger.ts +0 -186
- package/src/utils.ts +0 -320
package/dist/Panel.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { CSSProperties } from "react";
|
|
2
|
+
import { PanelLayoutData, PanelProps, PanelRegistration } from "./types";
|
|
3
|
+
type PanelFlexStyle = Required<Pick<CSSProperties, "flexBasis" | "flexGrow" | "flexShrink">>;
|
|
4
|
+
type ResolvePanelFlexArgs = {
|
|
5
|
+
size: number;
|
|
6
|
+
panel: PanelLayoutData | undefined;
|
|
7
|
+
registration: PanelRegistration;
|
|
8
|
+
containerSize: number;
|
|
9
|
+
isCollapsed: boolean;
|
|
10
|
+
};
|
|
11
|
+
export declare const resolvePanelFlex: ({ size, panel, registration, containerSize, isCollapsed }: ResolvePanelFlexArgs) => PanelFlexStyle;
|
|
12
|
+
export declare const Panel: import("react").MemoExoticComponent<({ id: providedId, defaultSize, minSize, maxSize, className, style, children, collapsible, defaultCollapsed, pixelAdjustPriority, flexAdjustPriority, contentOverflow, ...elementProps }: PanelProps) => import("react").JSX.Element>;
|
|
13
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PanelDirection, PanelLayoutData } from
|
|
1
|
+
import { PanelDirection, PanelLayoutData } from "./types";
|
|
2
2
|
type PanelDebugInfoProps = {
|
|
3
3
|
panel: PanelLayoutData | undefined;
|
|
4
4
|
containerAxisSize: number;
|
|
@@ -17,18 +17,6 @@ type FormattedPanelDebugInfo = {
|
|
|
17
17
|
headlineLabel: string;
|
|
18
18
|
titleText: string;
|
|
19
19
|
};
|
|
20
|
-
/**
|
|
21
|
-
* Format one panel's allocation for the debug overlay.
|
|
22
|
-
* デバッグ表示用に 1 枚のパネルの配分結果を整形する処理。
|
|
23
|
-
*
|
|
24
|
-
* @param args - Panel, container length and the axis label / パネル・コンテナ長・軸ラベル
|
|
25
|
-
* @returns Display strings for the overlay / オーバーレイ表示用の文字列群
|
|
26
|
-
*/
|
|
27
20
|
export declare const formatPanelDebugInfo: ({ panel, containerAxisSize, containerLabel }: FormatPanelDebugInfoArgs) => FormattedPanelDebugInfo;
|
|
28
|
-
|
|
29
|
-
* Render the per-panel debug badge inside a panel.
|
|
30
|
-
* パネル内にパネル単位のデバッグバッジを描画するコンポーネント。
|
|
31
|
-
*/
|
|
32
|
-
export declare const PanelDebugInfo: import('react').MemoExoticComponent<({ panel, containerAxisSize, direction }: PanelDebugInfoProps) => import("react").JSX.Element>;
|
|
21
|
+
export declare const PanelDebugInfo: import("react").MemoExoticComponent<({ panel, containerAxisSize, direction }: PanelDebugInfoProps) => import("react").JSX.Element>;
|
|
33
22
|
export {};
|
|
34
|
-
//# sourceMappingURL=PanelDebugInfo.d.ts.map
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { LayoutConstraintViolation, PanelLayoutData } from "./types";
|
|
2
|
+
export type PanelBounds = {
|
|
3
|
+
min: number;
|
|
4
|
+
max: number;
|
|
5
|
+
};
|
|
6
|
+
export declare const isPixelPanel: (panel: PanelLayoutData) => boolean;
|
|
7
|
+
export declare const resolvePanelBounds: (panel: PanelLayoutData, containerSize: number) => PanelBounds;
|
|
8
|
+
export type LayoutAllocation = {
|
|
9
|
+
sizes: number[];
|
|
10
|
+
violation: LayoutConstraintViolation | null;
|
|
11
|
+
};
|
|
12
|
+
export declare const allocatePanelSizes: (panels: ReadonlyArray<PanelLayoutData>, containerSize: number) => LayoutAllocation;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { ContainerSize, PanelDirection, PanelLayoutData, ResizeHandleLayoutData } from "./types";
|
|
2
|
+
export type DebugPanelSnapshot = PanelLayoutData & {
|
|
3
|
+
measuredPixelSize?: number;
|
|
4
|
+
measuredPercentageSize?: number;
|
|
5
|
+
};
|
|
6
|
+
export type DebugOverlaySnapshot = {
|
|
7
|
+
ownerId: string | null;
|
|
8
|
+
groups: DebugGroupState[];
|
|
9
|
+
};
|
|
10
|
+
export type DebugGroupState = {
|
|
11
|
+
groupId: string;
|
|
12
|
+
displayName: string;
|
|
13
|
+
direction: PanelDirection;
|
|
14
|
+
containerSize: ContainerSize;
|
|
15
|
+
panels: DebugPanelSnapshot[];
|
|
16
|
+
handles: ResizeHandleLayoutData[];
|
|
17
|
+
index: number;
|
|
18
|
+
};
|
|
19
|
+
type DebugGroupUpdate = {
|
|
20
|
+
displayName: string;
|
|
21
|
+
direction: PanelDirection;
|
|
22
|
+
containerSize: ContainerSize;
|
|
23
|
+
panels: DebugPanelSnapshot[];
|
|
24
|
+
handles: ResizeHandleLayoutData[];
|
|
25
|
+
};
|
|
26
|
+
export declare const useDebugOverlayOwnerId: () => string | null;
|
|
27
|
+
export declare const useDebugOverlaySnapshot: () => DebugOverlaySnapshot;
|
|
28
|
+
export declare const enableDebugOverlayGroup: (groupId: string) => void;
|
|
29
|
+
export declare const disableDebugOverlayGroup: (groupId: string) => void;
|
|
30
|
+
export declare const updateDebugOverlayGroup: (groupId: string, update: DebugGroupUpdate) => void;
|
|
31
|
+
export declare const removeDebugOverlayGroup: (groupId: string) => void;
|
|
32
|
+
export {};
|
|
@@ -1,17 +1,10 @@
|
|
|
1
|
-
import { CSSProperties } from
|
|
2
|
-
import { PanelCollapseDirection, PanelGroupProps, PanelMeasurement, PanelRegistration, ResizeHandleLayoutData } from
|
|
3
|
-
/**
|
|
4
|
-
* Orchestrate measurement, ordering, persistence and user intent for one panel group.
|
|
5
|
-
* 1 つのパネルグループにおける計測・順序同期・永続化・利用者操作の統括。
|
|
6
|
-
*
|
|
7
|
-
* @param props - Panel group props / パネルグループのプロパティ
|
|
8
|
-
* @returns Group ref, context value and the group's base style / グループ ref・コンテキスト値・基準スタイル
|
|
9
|
-
*/
|
|
1
|
+
import { CSSProperties } from "react";
|
|
2
|
+
import { PanelCollapseDirection, PanelGroupProps, PanelMeasurement, PanelRegistration, ResizeHandleLayoutData } from "./types";
|
|
10
3
|
export declare const useResizablePanels: ({ direction, style, onLayout, autoSaveId, showDebugInfo }: PanelGroupProps) => {
|
|
11
|
-
groupRef: import(
|
|
4
|
+
groupRef: import("react").RefObject<HTMLDivElement | null>;
|
|
12
5
|
contextValue: {
|
|
13
|
-
direction: import(
|
|
14
|
-
panels: import(
|
|
6
|
+
direction: import("./types").PanelDirection;
|
|
7
|
+
panels: import("./types").PanelLayoutData[];
|
|
15
8
|
containerSize: number;
|
|
16
9
|
layoutOrderKey: string;
|
|
17
10
|
showDebugInfo: boolean;
|
|
@@ -20,24 +13,17 @@ export declare const useResizablePanels: ({ direction, style, onLayout, autoSave
|
|
|
20
13
|
resizePanels: (startId: string, endId: string, startSize: number) => void;
|
|
21
14
|
collapsePanel: (id: string, from: PanelCollapseDirection) => void;
|
|
22
15
|
expandPanel: (id: string, from: PanelCollapseDirection, targetSize?: number) => void;
|
|
23
|
-
getPanel: (id: string) => import(
|
|
16
|
+
getPanel: (id: string) => import("./types").PanelLayoutData | undefined;
|
|
24
17
|
reportPanelMeasurement: (panelId: string, measurement: PanelMeasurement | null) => void;
|
|
25
18
|
panelMeasurements: Record<string, PanelMeasurement>;
|
|
26
19
|
reportHandleMeasurement: (handleId: string, measurement: ResizeHandleLayoutData | null) => void;
|
|
27
20
|
handleMeasurements: Record<string, ResizeHandleLayoutData>;
|
|
28
|
-
layoutConstraintViolation: import(
|
|
21
|
+
layoutConstraintViolation: import("./types").LayoutConstraintViolation | null;
|
|
29
22
|
};
|
|
30
23
|
groupStyle: CSSProperties;
|
|
31
24
|
};
|
|
32
|
-
/**
|
|
33
|
-
* Provide imperative helpers for toggling a specific panel while preserving its stored preference.
|
|
34
|
-
* 特定パネルの希望値を保ったまま開閉を制御する命令型ユーティリティを提供するカスタムフック。
|
|
35
|
-
*
|
|
36
|
-
* @param panelId - Identifier of the panel to control / 操作対象パネルの識別子
|
|
37
|
-
* @returns Panel state and collapse/expand/toggle helpers / パネル状態と開閉ヘルパー
|
|
38
|
-
*/
|
|
39
25
|
export declare const usePanelControls: (panelId: string) => {
|
|
40
|
-
panel: import(
|
|
26
|
+
panel: import("./types").PanelLayoutData | undefined;
|
|
41
27
|
isCollapsed: boolean;
|
|
42
28
|
canCollapseFromStart: boolean;
|
|
43
29
|
canCollapseFromEnd: boolean;
|
|
@@ -45,4 +31,3 @@ export declare const usePanelControls: (panelId: string) => {
|
|
|
45
31
|
expand: (from: PanelCollapseDirection, targetSize?: number) => void;
|
|
46
32
|
toggle: (from: PanelCollapseDirection, targetSize?: number) => void;
|
|
47
33
|
};
|
|
48
|
-
//# sourceMappingURL=hooks.d.ts.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,13 @@
|
|
|
1
|
-
export
|
|
2
|
-
export {}
|
|
1
|
+
export type { LayoutAllocation, PanelBounds } from "./allocateLayout";
|
|
2
|
+
export { allocatePanelSizes, isPixelPanel, resolvePanelBounds } from "./allocateLayout";
|
|
3
|
+
export { PanelGroupContext, usePanelGroup } from "./context";
|
|
4
|
+
export { usePanelControls, useResizablePanels } from "./hooks";
|
|
5
|
+
export { Panel } from "./Panel";
|
|
6
|
+
export { PanelGroup } from "./PanelGroup";
|
|
7
|
+
export { PanelResizeHandle } from "./PanelResizeHandle";
|
|
8
|
+
export { findLayoutInvariantBreach, getPanelPreferenceInPixels, initialPanelGroupLayoutState, panelReducer } from "./reducer";
|
|
9
|
+
export type { CollapsibleConfig, CollapsibleDirection, ContainerAxisMeasurement, FlexibleSize, LayoutConstraintViolation, LayoutConstraintViolationReason, PanelAction, PanelCollapseDirection, PanelDirection, PanelGroupContextValue, PanelGroupLayoutState, PanelGroupProps, PanelLayoutData, PanelMeasurement, PanelProps, PanelRegistration, PanelResizeHandleIndicatorConfig, PanelResizeHandleProps, PersistedPanelSize, ResizeHandleLayoutData, SizeConfig, SizeUnit, } from "./types";
|
|
10
|
+
export { calculateSnapThreshold, clamp, findOwningGroup, getConstraintInPixels, getContainerSize, getGroupLayoutElements, loadLayout, normalizeSizeConfig, percentageToPixels, saveLayout, toRoundedPercentage, } from "./utils";
|
|
11
|
+
export declare const getPanelElement: (id: string) => HTMLElement | null;
|
|
12
|
+
export declare const getPanelGroupElement: (id: string) => HTMLElement | null;
|
|
13
|
+
export declare const getResizeHandleElement: (id: string) => HTMLElement | null;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { PanelAction, PanelGroupLayoutState, PanelLayoutData } from "./types";
|
|
2
|
+
export declare const initialPanelGroupLayoutState: PanelGroupLayoutState;
|
|
3
|
+
export declare const findLayoutInvariantBreach: (state: PanelGroupLayoutState) => {
|
|
4
|
+
allocatedTotal: number;
|
|
5
|
+
containerSize: number;
|
|
6
|
+
} | null;
|
|
7
|
+
export declare const getPanelPreferenceInPixels: (panel: PanelLayoutData, containerSize: number) => number;
|
|
8
|
+
export declare const panelReducer: (state: PanelGroupLayoutState, action: PanelAction) => PanelGroupLayoutState;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const roundHalfToEven: (value: number, digits?: number) => number;
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import { CSSProperties, HTMLAttributes, ReactNode } from "react";
|
|
2
|
+
export declare const PANEL_SNAP_THRESHOLD = 12;
|
|
3
|
+
export declare const PANEL_ALLOCATION_EPSILON = 0.000001;
|
|
4
|
+
export declare const PANEL_HANDLE_THICKNESS = 8;
|
|
5
|
+
export declare const PANEL_INDICATOR_THICKNESS = 6;
|
|
6
|
+
export declare const PANEL_INDICATOR_LENGTH_HORIZONTAL = 48;
|
|
7
|
+
export declare const PANEL_INDICATOR_LENGTH_VERTICAL = 80;
|
|
8
|
+
export declare const PANEL_INDICATOR_BAR_THICKNESS = 2;
|
|
9
|
+
export declare const PANEL_INDICATOR_BAR_LENGTH_HORIZONTAL = 32;
|
|
10
|
+
export declare const PANEL_INDICATOR_BAR_LENGTH_VERTICAL = 64;
|
|
11
|
+
export declare const PANEL_VISIBLE_INDICATOR_SPACING = 8;
|
|
12
|
+
export declare const PANEL_HANDLE_DRAG_THROTTLE_MS = 8;
|
|
13
|
+
export declare const PANEL_KEYBOARD_RESIZE_STEP = 10;
|
|
14
|
+
export declare const PANEL_COLLAPSE_THRESHOLD_RATIO = 0.05;
|
|
15
|
+
export declare const PANEL_COLLAPSE_THRESHOLD_MAX = 10;
|
|
16
|
+
export declare const PANEL_EXPAND_THRESHOLD_RATIO = 0.05;
|
|
17
|
+
export declare const PANEL_EXPAND_THRESHOLD_MAX = 20;
|
|
18
|
+
export declare const PANEL_HANDLE_VISIBILITY_THRESHOLD = 0.05;
|
|
19
|
+
export type PanelDirection = "horizontal" | "vertical";
|
|
20
|
+
export type SizeUnit = "percentage" | "pixels";
|
|
21
|
+
export type SizeConfig = {
|
|
22
|
+
value: number;
|
|
23
|
+
unit: SizeUnit;
|
|
24
|
+
};
|
|
25
|
+
export type FlexibleSize = SizeConfig | number;
|
|
26
|
+
export type ContainerSize = {
|
|
27
|
+
width: number;
|
|
28
|
+
height: number;
|
|
29
|
+
};
|
|
30
|
+
export type PanelCollapseDirection = "start" | "end";
|
|
31
|
+
export type CollapsibleDirection = PanelCollapseDirection | "both";
|
|
32
|
+
export type CollapsibleConfig = {
|
|
33
|
+
from: CollapsibleDirection;
|
|
34
|
+
};
|
|
35
|
+
export type ContainerAxisMeasurement = {
|
|
36
|
+
content: number;
|
|
37
|
+
border: number;
|
|
38
|
+
};
|
|
39
|
+
export type LayoutConstraintViolationReason = "minimum-exceeded" | "maximum-insufficient";
|
|
40
|
+
export type LayoutConstraintViolation = {
|
|
41
|
+
reason: LayoutConstraintViolationReason;
|
|
42
|
+
totalMinimumSize: number;
|
|
43
|
+
totalMaximumSize: number;
|
|
44
|
+
availableContainerSize: number;
|
|
45
|
+
};
|
|
46
|
+
export interface PanelLayoutData {
|
|
47
|
+
id: string;
|
|
48
|
+
sizeUnit: SizeUnit;
|
|
49
|
+
size: number;
|
|
50
|
+
preferredPercentageSize: number;
|
|
51
|
+
preferredPixelSize: number;
|
|
52
|
+
minSize?: FlexibleSize;
|
|
53
|
+
maxSize?: FlexibleSize;
|
|
54
|
+
collapseFromStart: boolean;
|
|
55
|
+
collapseFromEnd: boolean;
|
|
56
|
+
collapsed: boolean;
|
|
57
|
+
collapsedByDirection: PanelCollapseDirection | null;
|
|
58
|
+
preferenceBeforeCollapse: number;
|
|
59
|
+
authoredPreference: number;
|
|
60
|
+
pixelAdjustPriority?: number;
|
|
61
|
+
flexAdjustPriority?: number;
|
|
62
|
+
}
|
|
63
|
+
export interface PanelGroupLayoutState {
|
|
64
|
+
containerSize: number;
|
|
65
|
+
panels: PanelLayoutData[];
|
|
66
|
+
violation: LayoutConstraintViolation | null;
|
|
67
|
+
}
|
|
68
|
+
export type PanelRegistration = Omit<PanelLayoutData, "size" | "collapsedByDirection" | "preferenceBeforeCollapse" | "authoredPreference">;
|
|
69
|
+
export type PersistedPanelSize = {
|
|
70
|
+
id: string;
|
|
71
|
+
size: number;
|
|
72
|
+
collapsed: boolean;
|
|
73
|
+
};
|
|
74
|
+
export type PanelAction = {
|
|
75
|
+
type: "SET_CONTAINER_SIZE";
|
|
76
|
+
containerSize: number;
|
|
77
|
+
} | {
|
|
78
|
+
type: "REGISTER_PANEL";
|
|
79
|
+
panel: PanelRegistration;
|
|
80
|
+
} | {
|
|
81
|
+
type: "UNREGISTER_PANEL";
|
|
82
|
+
id: string;
|
|
83
|
+
} | {
|
|
84
|
+
type: "REORDER_PANELS";
|
|
85
|
+
ids: string[];
|
|
86
|
+
} | {
|
|
87
|
+
type: "RESIZE_PANELS";
|
|
88
|
+
startId: string;
|
|
89
|
+
endId: string;
|
|
90
|
+
startSize: number;
|
|
91
|
+
} | {
|
|
92
|
+
type: "COLLAPSE_PANEL";
|
|
93
|
+
id: string;
|
|
94
|
+
from: PanelCollapseDirection;
|
|
95
|
+
} | {
|
|
96
|
+
type: "EXPAND_PANEL";
|
|
97
|
+
id: string;
|
|
98
|
+
from: PanelCollapseDirection;
|
|
99
|
+
targetSize?: number;
|
|
100
|
+
} | {
|
|
101
|
+
type: "RESTORE_LAYOUT";
|
|
102
|
+
entries: PersistedPanelSize[];
|
|
103
|
+
};
|
|
104
|
+
export interface PanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "id" | "children" | "className" | "style" | "aria-hidden"> {
|
|
105
|
+
id?: string;
|
|
106
|
+
defaultSize?: FlexibleSize;
|
|
107
|
+
minSize?: FlexibleSize;
|
|
108
|
+
maxSize?: FlexibleSize;
|
|
109
|
+
className?: string;
|
|
110
|
+
style?: CSSProperties;
|
|
111
|
+
children?: ReactNode;
|
|
112
|
+
collapsible?: CollapsibleConfig;
|
|
113
|
+
defaultCollapsed?: boolean;
|
|
114
|
+
pixelAdjustPriority?: number;
|
|
115
|
+
flexAdjustPriority?: number;
|
|
116
|
+
contentOverflow?: CSSProperties["overflow"];
|
|
117
|
+
}
|
|
118
|
+
export interface PanelGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "id" | "children" | "className" | "style"> {
|
|
119
|
+
id?: string;
|
|
120
|
+
direction: PanelDirection;
|
|
121
|
+
className?: string;
|
|
122
|
+
style?: CSSProperties;
|
|
123
|
+
children?: ReactNode;
|
|
124
|
+
showDebugInfo?: boolean;
|
|
125
|
+
onLayout?: (panelSizes: number[]) => void;
|
|
126
|
+
autoSaveId?: string;
|
|
127
|
+
}
|
|
128
|
+
export interface PanelGroupContextValue {
|
|
129
|
+
direction: PanelDirection;
|
|
130
|
+
registerPanel: (panel: PanelRegistration) => void;
|
|
131
|
+
unregisterPanel: (id: string) => void;
|
|
132
|
+
getPanel: (id: string) => PanelLayoutData | undefined;
|
|
133
|
+
panels: PanelLayoutData[];
|
|
134
|
+
containerSize: number;
|
|
135
|
+
layoutOrderKey: string;
|
|
136
|
+
showDebugInfo: boolean;
|
|
137
|
+
resizePanels: (startId: string, endId: string, startSize: number) => void;
|
|
138
|
+
collapsePanel: (id: string, from: PanelCollapseDirection) => void;
|
|
139
|
+
expandPanel: (id: string, from: PanelCollapseDirection, targetSize?: number) => void;
|
|
140
|
+
reportPanelMeasurement: (id: string, measurement: PanelMeasurement | null) => void;
|
|
141
|
+
panelMeasurements: Record<string, PanelMeasurement>;
|
|
142
|
+
reportHandleMeasurement: (id: string, measurement: ResizeHandleLayoutData | null) => void;
|
|
143
|
+
handleMeasurements: Record<string, ResizeHandleLayoutData>;
|
|
144
|
+
layoutConstraintViolation: LayoutConstraintViolation | null;
|
|
145
|
+
}
|
|
146
|
+
export interface PanelResizeHandleIndicatorConfig {
|
|
147
|
+
thickness?: number;
|
|
148
|
+
length?: number;
|
|
149
|
+
barThickness?: number;
|
|
150
|
+
barLength?: number;
|
|
151
|
+
visible?: boolean;
|
|
152
|
+
className?: string;
|
|
153
|
+
barClassName?: string;
|
|
154
|
+
}
|
|
155
|
+
type OwnedSeparatorAria = "role" | "aria-orientation" | "aria-valuenow" | "aria-valuemin" | "aria-valuemax" | "aria-disabled" | "aria-hidden";
|
|
156
|
+
export interface PanelResizeHandleProps extends Omit<HTMLAttributes<HTMLButtonElement>, "id" | "children" | "className" | "style" | "title" | OwnedSeparatorAria> {
|
|
157
|
+
id?: string;
|
|
158
|
+
disabled?: boolean;
|
|
159
|
+
onDragging?: (isDragging: boolean) => void;
|
|
160
|
+
className?: string;
|
|
161
|
+
style?: CSSProperties;
|
|
162
|
+
children?: ReactNode;
|
|
163
|
+
thickness?: number;
|
|
164
|
+
indicator?: boolean | PanelResizeHandleIndicatorConfig;
|
|
165
|
+
indicatorThickness?: number;
|
|
166
|
+
indicatorLength?: number;
|
|
167
|
+
indicatorBarThickness?: number;
|
|
168
|
+
indicatorBarLength?: number;
|
|
169
|
+
title?: string;
|
|
170
|
+
}
|
|
171
|
+
export interface PanelMeasurement {
|
|
172
|
+
pixelSize: number;
|
|
173
|
+
percentageSize: number;
|
|
174
|
+
}
|
|
175
|
+
export interface ResizeHandleLayoutData {
|
|
176
|
+
id: string;
|
|
177
|
+
thickness: number;
|
|
178
|
+
direction: PanelDirection;
|
|
179
|
+
visible: boolean;
|
|
180
|
+
startPanelId: string | null;
|
|
181
|
+
endPanelId: string | null;
|
|
182
|
+
}
|
|
183
|
+
export {};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export declare enum LogLevel {
|
|
2
|
+
DEBUG = 0,
|
|
3
|
+
INFO = 1,
|
|
4
|
+
WARN = 2,
|
|
5
|
+
ERROR = 3,
|
|
6
|
+
NONE = 4
|
|
7
|
+
}
|
|
8
|
+
export interface ILogger {
|
|
9
|
+
debug(message?: unknown, ...optionalParams: unknown[]): void;
|
|
10
|
+
info(message?: unknown, ...optionalParams: unknown[]): void;
|
|
11
|
+
warn(message?: unknown, ...optionalParams: unknown[]): void;
|
|
12
|
+
error(message?: unknown, ...optionalParams: unknown[]): void;
|
|
13
|
+
}
|
|
14
|
+
export declare class Logger implements ILogger {
|
|
15
|
+
private level;
|
|
16
|
+
private prefix;
|
|
17
|
+
private impl;
|
|
18
|
+
private static readonly instances;
|
|
19
|
+
constructor(level?: LogLevel, prefix?: string, impl?: ILogger);
|
|
20
|
+
private static instance;
|
|
21
|
+
static setLevel(level: LogLevel): void;
|
|
22
|
+
setLevel(level: LogLevel): void;
|
|
23
|
+
static setImplementation(impl: ILogger): void;
|
|
24
|
+
setImplementation(impl: ILogger): void;
|
|
25
|
+
static setPrefix(prefix: string): void;
|
|
26
|
+
setPrefix(prefix: string): void;
|
|
27
|
+
enabledFor(level: LogLevel): boolean;
|
|
28
|
+
private formatMessage;
|
|
29
|
+
static debug(message?: unknown, ...optionalParams: unknown[]): void;
|
|
30
|
+
debug(message?: unknown, ...optionalParams: unknown[]): void;
|
|
31
|
+
static info(message?: unknown, ...optionalParams: unknown[]): void;
|
|
32
|
+
info(message?: unknown, ...optionalParams: unknown[]): void;
|
|
33
|
+
static warn(message?: unknown, ...optionalParams: unknown[]): void;
|
|
34
|
+
warn(message?: unknown, ...optionalParams: unknown[]): void;
|
|
35
|
+
static error(message?: unknown, ...optionalParams: unknown[]): void;
|
|
36
|
+
error(message?: unknown, ...optionalParams: unknown[]): void;
|
|
37
|
+
}
|
package/dist/utils.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ContainerAxisMeasurement, FlexibleSize, PanelDirection, PersistedPanelSize, SizeConfig, SizeUnit } from "./types";
|
|
2
|
+
export declare const PERCENTAGE_DIGITS = 6;
|
|
3
|
+
export declare const toRoundedPercentage: (size: number, base: number) => number;
|
|
4
|
+
export declare const percentageToPixels: (percentage: number, base: number) => number;
|
|
5
|
+
export declare const normalizeSizeConfig: (size: FlexibleSize | undefined, defaultUnit?: SizeUnit) => SizeConfig | undefined;
|
|
6
|
+
export declare const getConstraintInPixels: (size: FlexibleSize | undefined, defaultValue: number, containerSize: number) => number;
|
|
7
|
+
export declare const clamp: (value: number, min: number, max: number) => number;
|
|
8
|
+
export declare const calculateSnapThreshold: (axisSize: number) => number;
|
|
9
|
+
export declare const getContainerSize: (element: HTMLElement, direction: PanelDirection, entry?: ResizeObserverEntry) => ContainerAxisMeasurement;
|
|
10
|
+
export declare const LAYOUT_ELEMENT_SELECTOR = "[data-panel-id], [data-resize-handle-anchor]";
|
|
11
|
+
export declare const findOwningGroup: (element: HTMLElement | null | undefined) => HTMLElement | null;
|
|
12
|
+
export declare const getGroupLayoutElements: (group: HTMLElement) => HTMLElement[];
|
|
13
|
+
export declare const touchesLayoutElements: (records: ReadonlyArray<MutationRecord>) => boolean;
|
|
14
|
+
export declare const getVisualScale: (element: HTMLElement, direction: PanelDirection) => number;
|
|
15
|
+
export declare const saveLayout: (id: string, entries: PersistedPanelSize[]) => void;
|
|
16
|
+
export declare const loadLayout: (id: string) => PersistedPanelSize[] | null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aiquants/resize-panels",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "Reusable resizable panel components and utilities for React",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"**/*.css"
|
|
@@ -34,7 +34,6 @@
|
|
|
34
34
|
},
|
|
35
35
|
"files": [
|
|
36
36
|
"dist",
|
|
37
|
-
"src",
|
|
38
37
|
"README.md",
|
|
39
38
|
"LICENSE"
|
|
40
39
|
],
|
|
@@ -69,7 +68,7 @@
|
|
|
69
68
|
"access": "public"
|
|
70
69
|
},
|
|
71
70
|
"scripts": {
|
|
72
|
-
"build": "pnpm run clean && vite build && pnpm run build:css",
|
|
71
|
+
"build": "pnpm run clean && vite build && pnpm run build:css && node ../../.config/scripts/strip-dts-comments.mjs dist",
|
|
73
72
|
"build:css": "tailwindcss -i src/styles/components.entry.css -o dist/styles/resize-panels.css --minify && tailwindcss -i src/styles/standalone.entry.css -o dist/styles/resize-panels.standalone.css --minify",
|
|
74
73
|
"dev": "vite build --watch",
|
|
75
74
|
"watch": "vite build --watch",
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file Global debug overlay for resizable panel groups.
|
|
3
|
-
* リサイズパネルグループ用のグローバルデバッグオーバーレイ。
|
|
4
|
-
*
|
|
5
|
-
* PanelGroup 本体から dynamic import で遅延読み込みされる。
|
|
6
|
-
* showDebugInfo を使わないアプリのバンドルにオーバーレイ UI とストア購読を含めないための分離。
|
|
7
|
-
*/
|
|
8
|
-
/**
|
|
9
|
-
* Render the overlay only for the group that currently owns it.
|
|
10
|
-
* オーバーレイの所有権を持つグループの場合のみ描画するゲート。
|
|
11
|
-
* 所有権ストアの購読をこの遅延モジュール内へ閉じ込め、非デバッグ利用時の購読を発生させない。
|
|
12
|
-
*/
|
|
13
|
-
export declare const GlobalDebugOverlayGate: ({ groupId }: {
|
|
14
|
-
groupId: string;
|
|
15
|
-
}) => import("react").JSX.Element | null;
|
|
16
|
-
/**
|
|
17
|
-
* Render global debug overlay displaying state for all active panel groups.
|
|
18
|
-
* すべてのアクティブなパネルグループの状態を表示するグローバルデバッグオーバーレイを描画。
|
|
19
|
-
*/
|
|
20
|
-
export declare const GlobalDebugOverlay: () => import('react').ReactPortal | null;
|
|
21
|
-
//# sourceMappingURL=GlobalDebugOverlay.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalDebugOverlay.d.ts","sourceRoot":"","sources":["../../src/GlobalDebugOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAyGH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GAAI,aAAa;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,uCAMtE,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,0CA2J9B,CAAA"}
|
package/dist/src/Panel.d.ts
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
import { PanelLayoutData, PanelProps, PanelRegistration } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* Flex triple a panel renders: the allocated length plus the weights that absorb a container change.
|
|
5
|
-
* パネルが描画する flex の三つ組: 配分された長さと、コンテナ変化を吸収する重み。
|
|
6
|
-
*/
|
|
7
|
-
type PanelFlexStyle = Required<Pick<CSSProperties, "flexBasis" | "flexGrow" | "flexShrink">>;
|
|
8
|
-
type ResolvePanelFlexArgs = {
|
|
9
|
-
size: number;
|
|
10
|
-
panel: PanelLayoutData | undefined;
|
|
11
|
-
registration: PanelRegistration;
|
|
12
|
-
containerSize: number;
|
|
13
|
-
isCollapsed: boolean;
|
|
14
|
-
};
|
|
15
|
-
/**
|
|
16
|
-
* Resolve the flex triple that renders a panel's current state.
|
|
17
|
-
* パネルの現在の状態を描画する flex の三つ組を解決する処理。
|
|
18
|
-
*
|
|
19
|
-
* The basis is always the allocated length, so the rendered geometry is the allocator's answer and nothing
|
|
20
|
-
* else. The weights are the first-order continuation of that answer: a panel grows with its ratio weight
|
|
21
|
-
* until it reaches its maximum and shrinks only while it is strictly between its bounds, which is exactly
|
|
22
|
-
* how the allocator would move it for a small container change.
|
|
23
|
-
* basis は常に配分された長さであり、描画される幾何は配分器の答えそのものとなる。重みはその答えの
|
|
24
|
-
* 一次近似であり、上限に達するまでは比率の重みで伸び、上下限の内側にいる間だけ縮む。これは小さな
|
|
25
|
-
* コンテナ変化に対して配分器が動かす量と一致する。
|
|
26
|
-
*
|
|
27
|
-
* @param args - Allocated size, panel state, registration and container length / 配分サイズ・パネル状態・登録情報・コンテナ長
|
|
28
|
-
* @returns Flex basis, grow and shrink to render / 描画する flex basis・grow・shrink
|
|
29
|
-
*/
|
|
30
|
-
export declare const resolvePanelFlex: ({ size, panel, registration, containerSize, isCollapsed }: ResolvePanelFlexArgs) => PanelFlexStyle;
|
|
31
|
-
/**
|
|
32
|
-
* Render a resizable panel whose size is decided by the group's allocator.
|
|
33
|
-
* グループの配分器が決めたサイズで描画されるリサイズ可能パネル。
|
|
34
|
-
*
|
|
35
|
-
* The panel publishes what it wants (its preference and constraints) and renders what it was given. Its
|
|
36
|
-
* flex basis is the allocated length itself, while `flex-grow` / `flex-shrink` describe how it should
|
|
37
|
-
* absorb a container change during the frames before the allocator runs again — a growth weight that
|
|
38
|
-
* vanishes at the panel's maximum and a shrink weight that vanishes at either bound, which is exactly how
|
|
39
|
-
* the allocator would move this panel for a small change.
|
|
40
|
-
* パネルは希望と制約を公開し、与えられたサイズで描画する。flex basis は配分結果そのもので、
|
|
41
|
-
* `flex-grow` / `flex-shrink` は配分器が再実行されるまでの数フレームでコンテナ変化をどう吸収するかを表す
|
|
42
|
-
* (上限で消える成長重みと、上下限のいずれかで消える縮小重み)。これは小さな変化に対して配分器が動かす量と一致する。
|
|
43
|
-
*/
|
|
44
|
-
export declare const Panel: import('react').MemoExoticComponent<({ id: providedId, defaultSize, minSize, maxSize, className, style, children, collapsible, defaultCollapsed, pixelAdjustPriority, flexAdjustPriority, contentOverflow, ...elementProps }: PanelProps) => import("react").JSX.Element>;
|
|
45
|
-
export {};
|
|
46
|
-
//# sourceMappingURL=Panel.d.ts.map
|
package/dist/src/Panel.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/Panel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,aAAa,EAAyE,MAAM,OAAO,CAAA;AAKjH,OAAO,EAAoD,KAAK,eAAe,EAAE,KAAK,UAAU,EAAE,KAAK,iBAAiB,EAAmB,MAAM,SAAS,CAAA;AAwD1J;;;GAGG;AACH,KAAK,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC,CAAA;AAE5F,KAAK,oBAAoB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,eAAe,GAAG,SAAS,CAAA;IAClC,YAAY,EAAE,iBAAiB,CAAA;IAC/B,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,OAAO,CAAA;CACvB,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,GAAI,2DAA2D,oBAAoB,KAAG,cA2BlH,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,gOACiO,UAAU,iCA8J5P,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PanelDebugInfo.d.ts","sourceRoot":"","sources":["../../src/PanelDebugInfo.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9D,KAAK,mBAAmB,GAAG;IACvB,KAAK,EAAE,eAAe,GAAG,SAAS,CAAA;IAClC,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,EAAE,cAAc,CAAA;CAC5B,CAAA;AAED,KAAK,wBAAwB,GAAG;IAC5B,KAAK,EAAE,eAAe,GAAG,SAAS,CAAA;IAClC,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC3B,WAAW,EAAE,MAAM,CAAA;IACnB,iBAAiB,EAAE,MAAM,CAAA;IACzB,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,8CAA8C,wBAAwB,KAAG,uBAe7G,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,gFAAkD,mBAAmB,iCAkC9F,CAAA"}
|
package/dist/src/PanelGroup.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { PanelGroupProps } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Provide layout context and container for coordinated panels.
|
|
4
|
-
* 連動するパネルのためのレイアウトコンテキストとコンテナを提供するコンポーネント。
|
|
5
|
-
*/
|
|
6
|
-
export declare const PanelGroup: (props: PanelGroupProps) => import("react").JSX.Element;
|
|
7
|
-
//# sourceMappingURL=PanelGroup.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PanelGroup.d.ts","sourceRoot":"","sources":["../../src/PanelGroup.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAA;AAiE/D;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAqKhD,CAAA"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { PanelResizeHandleProps } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Render an interactive divider that manages adjacent panel resizing gestures.
|
|
4
|
-
* 隣接パネルのリサイズ操作を管理するインタラクティブなディバイダーを描画するコンポーネント。
|
|
5
|
-
*/
|
|
6
|
-
export declare const PanelResizeHandle: import('react').MemoExoticComponent<(props: PanelResizeHandleProps) => import("react").JSX.Element>;
|
|
7
|
-
//# sourceMappingURL=PanelResizeHandle.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PanelResizeHandle.d.ts","sourceRoot":"","sources":["../../src/PanelResizeHandle.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAMH,OAAO,EAkBH,KAAK,sBAAsB,EAE9B,MAAM,SAAS,CAAA;AAyHhB;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8CAAgB,sBAAsB,iCAklBlE,CAAA"}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { LayoutConstraintViolation, PanelLayoutData } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Resolved pixel bounds of a panel for a given container length.
|
|
4
|
-
* 指定コンテナ長におけるパネルのピクセル境界。
|
|
5
|
-
*/
|
|
6
|
-
export type PanelBounds = {
|
|
7
|
-
min: number;
|
|
8
|
-
max: number;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* Report whether a panel is sized in pixels rather than as a share of the container.
|
|
12
|
-
* パネルがコンテナ比ではなくピクセルでサイズ指定されているかの判定。
|
|
13
|
-
*
|
|
14
|
-
* @param panel - Panel layout data / パネルレイアウトデータ
|
|
15
|
-
* @returns True when the panel keeps an absolute pixel size / 絶対ピクセル指定なら true
|
|
16
|
-
*/
|
|
17
|
-
export declare const isPixelPanel: (panel: PanelLayoutData) => boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Resolve a panel's bounds in pixels for the given container length.
|
|
20
|
-
* 指定コンテナ長に対するパネルの境界をピクセルで解決する処理。
|
|
21
|
-
*
|
|
22
|
-
* The same bounds govern the allocator and an explicit drag: a size the user cannot reach by hand but the
|
|
23
|
-
* allocator may produce (or the reverse) would make the two disagree about where a panel is allowed to be.
|
|
24
|
-
* 配分器と明示的なドラッグは同じ境界に従う。片方だけが到達できるサイズがあると、パネルが居てよい範囲について
|
|
25
|
-
* 両者の認識が食い違うためである。
|
|
26
|
-
*
|
|
27
|
-
* @param panel - Panel layout data / パネルレイアウトデータ
|
|
28
|
-
* @param containerSize - Container content-box length in pixels / コンテナ内容領域長 (px)
|
|
29
|
-
* @returns Pixel bounds with `min <= max` guaranteed / `min <= max` を保証したピクセル境界
|
|
30
|
-
*/
|
|
31
|
-
export declare const resolvePanelBounds: (panel: PanelLayoutData, containerSize: number) => PanelBounds;
|
|
32
|
-
/**
|
|
33
|
-
* Result of one allocation pass.
|
|
34
|
-
* 1 回の配分結果。
|
|
35
|
-
*/
|
|
36
|
-
export type LayoutAllocation = {
|
|
37
|
-
/** Pixel size per panel, index-aligned with the input, collapsed panels at 0. パネルごとのピクセルサイズ。 */
|
|
38
|
-
sizes: number[];
|
|
39
|
-
/** Constraint conflict detected while allocating, or null. 配分中に検出した制約矛盾。 */
|
|
40
|
-
violation: LayoutConstraintViolation | null;
|
|
41
|
-
};
|
|
42
|
-
/**
|
|
43
|
-
* Allocate pixel sizes to every panel of a group for a given container length.
|
|
44
|
-
* 指定コンテナ長に対してグループ内の全パネルへピクセルサイズを配分する処理。
|
|
45
|
-
*
|
|
46
|
-
* The allocation runs in three stages: collapsed panels take no space, panels with an absolute target
|
|
47
|
-
* (pixel panels first, then flexible panels that declare a priority) are filled in order, and the rest of
|
|
48
|
-
* the container is shared by the remaining flexible panels in proportion to their weights. Any residue
|
|
49
|
-
* left because every ratio panel hit its maximum is offered back to the sequential panels up to their own
|
|
50
|
-
* maximum, so the container is filled whenever the constraints allow it.
|
|
51
|
-
* 配分は 3 段階: 折りたたみパネルは領域を取らず、絶対目標を持つパネル (ピクセル → 優先度つき柔軟) を順に
|
|
52
|
-
* 充当し、残りを柔軟パネルが重みに比例して分け合う。全ての比例パネルが上限に達して余りが出た場合は逐次段の
|
|
53
|
-
* パネルへ上限まで戻すため、制約が許す限りコンテナは満たされる。
|
|
54
|
-
*
|
|
55
|
-
* @param panels - Panels in DOM order / DOM 順のパネル一覧
|
|
56
|
-
* @param containerSize - Container content-box length in pixels / コンテナ内容領域長 (px)
|
|
57
|
-
* @returns Sizes and the constraint violation detected, if any / 配分結果と検出した制約違反
|
|
58
|
-
*/
|
|
59
|
-
export declare const allocatePanelSizes: (panels: ReadonlyArray<PanelLayoutData>, containerSize: number) => LayoutAllocation;
|
|
60
|
-
//# sourceMappingURL=allocateLayout.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"allocateLayout.d.ts","sourceRoot":"","sources":["../../src/allocateLayout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,KAAK,yBAAyB,EAA4B,KAAK,eAAe,EAAE,MAAM,SAAS,CAAA;AAqBxG;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACd,CAAA;AA4BD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,eAAe,KAAG,OAAsC,CAAA;AAE5F;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,eAAe,EAAE,eAAe,MAAM,KAAG,WAIlF,CAAA;AAmMD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC3B,gGAAgG;IAChG,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,4EAA4E;IAC5E,SAAS,EAAE,yBAAyB,GAAG,IAAI,CAAA;CAC9C,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,aAAa,CAAC,eAAe,CAAC,EAAE,eAAe,MAAM,KAAG,gBAgElG,CAAA"}
|
package/dist/src/context.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { PanelGroupContextValue } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Provide shared panel group state to descendant components.
|
|
4
|
-
* 子孫コンポーネントへパネルグループの共有状態を提供するコンテキスト。
|
|
5
|
-
*/
|
|
6
|
-
export declare const PanelGroupContext: import('react').Context<PanelGroupContextValue | null>;
|
|
7
|
-
/**
|
|
8
|
-
* Access panel group behaviors and layout data from the nearest provider.
|
|
9
|
-
* 最も近いプロバイダーからパネルグループの振る舞いとレイアウトデータを取得するフック。
|
|
10
|
-
*/
|
|
11
|
-
export declare const usePanelGroup: () => PanelGroupContextValue;
|
|
12
|
-
//# sourceMappingURL=context.d.ts.map
|