@byeolnaerim/flex-layout 0.0.9 → 0.0.10
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/flex-layout/components/FlexLayout.cjs +1 -110
- package/dist/flex-layout/components/FlexLayout.js +1 -85
- package/dist/flex-layout/components/FlexLayoutContainer.cjs +1 -262
- package/dist/flex-layout/components/FlexLayoutContainer.js +1 -232
- package/dist/flex-layout/components/FlexLayoutIFramePane.cjs +1 -68
- package/dist/flex-layout/components/FlexLayoutIFramePane.js +1 -44
- package/dist/flex-layout/components/FlexLayoutResizePanel.cjs +1 -246
- package/dist/flex-layout/components/FlexLayoutResizePanel.js +1 -216
- package/dist/flex-layout/components/FlexLayoutSplitScreen.cjs +1 -1252
- package/dist/flex-layout/components/FlexLayoutSplitScreen.js +1 -1236
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.cjs +1 -532
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.js +1 -509
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.cjs +1 -55
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.js +1 -25
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.cjs +1 -63
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.js +1 -33
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.cjs +1 -53
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.js +1 -23
- package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.cjs +1 -133
- package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.js +1 -107
- package/dist/flex-layout/components/FlexLayoutStickyBox.cjs +1 -245
- package/dist/flex-layout/components/FlexLayoutStickyBox.js +1 -229
- package/dist/flex-layout/components/index.cjs +1 -57
- package/dist/flex-layout/components/index.js +1 -17
- package/dist/flex-layout/hooks/index.cjs +1 -25
- package/dist/flex-layout/hooks/index.js +1 -3
- package/dist/flex-layout/hooks/useDrag.cjs +1 -289
- package/dist/flex-layout/hooks/useDrag.d.ts +15 -0
- package/dist/flex-layout/hooks/useDrag.js +1 -258
- package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.cjs +1 -139
- package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.js +1 -118
- package/dist/flex-layout/hooks/useListPaging.cjs +1 -212
- package/dist/flex-layout/hooks/useListPaging.js +1 -191
- package/dist/flex-layout/hooks/useSizes.cjs +1 -126
- package/dist/flex-layout/hooks/useSizes.js +1 -101
- package/dist/flex-layout/index.cjs +1 -31
- package/dist/flex-layout/index.js +1 -6
- package/dist/flex-layout/providers/FlexLayoutContext.cjs +1 -49
- package/dist/flex-layout/providers/FlexLayoutContext.js +1 -24
- package/dist/flex-layout/providers/FlexLayoutHooks.cjs +1 -276
- package/dist/flex-layout/providers/FlexLayoutHooks.d.ts +5 -1
- package/dist/flex-layout/providers/FlexLayoutHooks.js +1 -263
- package/dist/flex-layout/providers/index.cjs +1 -23
- package/dist/flex-layout/providers/index.js +1 -2
- package/dist/flex-layout/store/FlexLayoutContainerStore.cjs +1 -257
- package/dist/flex-layout/store/FlexLayoutContainerStore.js +1 -206
- package/dist/flex-layout/store/index.cjs +1 -23
- package/dist/flex-layout/store/index.js +1 -2
- package/dist/flex-layout/styles/FlexLayout.module.css +473 -416
- package/dist/flex-layout/types/FlexDirectionTypes.cjs +1 -17
- package/dist/flex-layout/types/FlexDirectionTypes.js +0 -1
- package/dist/flex-layout/types/FlexLayoutTypes.cjs +1 -17
- package/dist/flex-layout/types/FlexLayoutTypes.js +0 -1
- package/dist/flex-layout/utils/FlexLayoutUtils.cjs +1 -245
- package/dist/flex-layout/utils/FlexLayoutUtils.js +1 -211
- package/dist/flex-layout/utils/index.cjs +1 -23
- package/dist/flex-layout/utils/index.js +1 -2
- package/dist/index.cjs +1 -23
- package/dist/index.js +1 -2
- package/dist/types/css.d.cjs +0 -1
- package/dist/types/css.d.js +0 -1
- package/package.json +116 -113
- package/dist/flex-layout/components/FlexLayout.cjs.map +0 -1
- package/dist/flex-layout/components/FlexLayout.js.map +0 -1
- package/dist/flex-layout/components/FlexLayoutContainer.cjs.map +0 -1
- package/dist/flex-layout/components/FlexLayoutContainer.js.map +0 -1
- package/dist/flex-layout/components/FlexLayoutIFramePane.cjs.map +0 -1
- package/dist/flex-layout/components/FlexLayoutIFramePane.js.map +0 -1
- package/dist/flex-layout/components/FlexLayoutResizePanel.cjs.map +0 -1
- package/dist/flex-layout/components/FlexLayoutResizePanel.js.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreen.cjs.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreen.js.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.cjs.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.js.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.cjs.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.js.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.cjs.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.js.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.cjs.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.js.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.cjs.map +0 -1
- package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.js.map +0 -1
- package/dist/flex-layout/components/FlexLayoutStickyBox.cjs.map +0 -1
- package/dist/flex-layout/components/FlexLayoutStickyBox.js.map +0 -1
- package/dist/flex-layout/components/index.cjs.map +0 -1
- package/dist/flex-layout/components/index.js.map +0 -1
- package/dist/flex-layout/hooks/index.cjs.map +0 -1
- package/dist/flex-layout/hooks/index.js.map +0 -1
- package/dist/flex-layout/hooks/useDrag.cjs.map +0 -1
- package/dist/flex-layout/hooks/useDrag.js.map +0 -1
- package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.cjs.map +0 -1
- package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.js.map +0 -1
- package/dist/flex-layout/hooks/useListPaging.cjs.map +0 -1
- package/dist/flex-layout/hooks/useListPaging.js.map +0 -1
- package/dist/flex-layout/hooks/useSizes.cjs.map +0 -1
- package/dist/flex-layout/hooks/useSizes.js.map +0 -1
- package/dist/flex-layout/index.cjs.map +0 -1
- package/dist/flex-layout/index.js.map +0 -1
- package/dist/flex-layout/providers/FlexLayoutContext.cjs.map +0 -1
- package/dist/flex-layout/providers/FlexLayoutContext.js.map +0 -1
- package/dist/flex-layout/providers/FlexLayoutHooks.cjs.map +0 -1
- package/dist/flex-layout/providers/FlexLayoutHooks.js.map +0 -1
- package/dist/flex-layout/providers/index.cjs.map +0 -1
- package/dist/flex-layout/providers/index.js.map +0 -1
- package/dist/flex-layout/store/FlexLayoutContainerStore.cjs.map +0 -1
- package/dist/flex-layout/store/FlexLayoutContainerStore.js.map +0 -1
- package/dist/flex-layout/store/index.cjs.map +0 -1
- package/dist/flex-layout/store/index.js.map +0 -1
- package/dist/flex-layout/types/FlexDirectionTypes.cjs.map +0 -1
- package/dist/flex-layout/types/FlexDirectionTypes.js.map +0 -1
- package/dist/flex-layout/types/FlexLayoutTypes.cjs.map +0 -1
- package/dist/flex-layout/types/FlexLayoutTypes.js.map +0 -1
- package/dist/flex-layout/utils/FlexLayoutUtils.cjs.map +0 -1
- package/dist/flex-layout/utils/FlexLayoutUtils.js.map +0 -1
- package/dist/flex-layout/utils/index.cjs.map +0 -1
- package/dist/flex-layout/utils/index.js.map +0 -1
- package/dist/index.cjs.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/metafile-cjs.json +0 -1
- package/dist/metafile-esm.json +0 -1
- package/dist/types/css.d.cjs.map +0 -1
- package/dist/types/css.d.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,113 +1,116 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@byeolnaerim/flex-layout",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"type": "module",
|
|
5
|
-
"license": "Apache-2.0",
|
|
6
|
-
"author": "Joohyoung Kim (@oozu1994)",
|
|
7
|
-
"description": "A React UI layout component for building resizable split views. Wrap panes with FlexLayout and drag the divider to resize horizontally or vertically.",
|
|
8
|
-
"keywords": [
|
|
9
|
-
"react",
|
|
10
|
-
"ui",
|
|
11
|
-
"layout",
|
|
12
|
-
"flex",
|
|
13
|
-
"split",
|
|
14
|
-
"split-pane",
|
|
15
|
-
"splitter",
|
|
16
|
-
"resizable",
|
|
17
|
-
"resize",
|
|
18
|
-
"drag",
|
|
19
|
-
"divider",
|
|
20
|
-
"panel",
|
|
21
|
-
"panes",
|
|
22
|
-
"dock",
|
|
23
|
-
"flex-layout",
|
|
24
|
-
"flexLayout",
|
|
25
|
-
"vscode",
|
|
26
|
-
"rxjs",
|
|
27
|
-
"typescript"
|
|
28
|
-
],
|
|
29
|
-
"homepage": "https://byeolnaerim.com/flex-layout",
|
|
30
|
-
"repository": {
|
|
31
|
-
"type": "git",
|
|
32
|
-
"url": "git+https://github.com/joohyoungkim19940805/flex-layout.git"
|
|
33
|
-
},
|
|
34
|
-
"bugs": {
|
|
35
|
-
"url": "https://github.com/joohyoungkim19940805/flex-layout/issues"
|
|
36
|
-
},
|
|
37
|
-
"files": [
|
|
38
|
-
"dist"
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
"
|
|
42
|
-
],
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
"
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
"
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
"
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
"
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
"
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
"
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
"
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
"
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
"
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
"
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
"
|
|
89
|
-
"
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
"
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
"
|
|
96
|
-
"react": "^
|
|
97
|
-
"
|
|
98
|
-
"
|
|
99
|
-
"
|
|
100
|
-
"
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
"
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
"
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
"
|
|
112
|
-
}
|
|
113
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@byeolnaerim/flex-layout",
|
|
3
|
+
"version": "0.0.10",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"license": "Apache-2.0",
|
|
6
|
+
"author": "Joohyoung Kim (@oozu1994)",
|
|
7
|
+
"description": "A React UI layout component for building resizable split views. Wrap panes with FlexLayout and drag the divider to resize horizontally or vertically.",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"react",
|
|
10
|
+
"ui",
|
|
11
|
+
"layout",
|
|
12
|
+
"flex",
|
|
13
|
+
"split",
|
|
14
|
+
"split-pane",
|
|
15
|
+
"splitter",
|
|
16
|
+
"resizable",
|
|
17
|
+
"resize",
|
|
18
|
+
"drag",
|
|
19
|
+
"divider",
|
|
20
|
+
"panel",
|
|
21
|
+
"panes",
|
|
22
|
+
"dock",
|
|
23
|
+
"flex-layout",
|
|
24
|
+
"flexLayout",
|
|
25
|
+
"vscode",
|
|
26
|
+
"rxjs",
|
|
27
|
+
"typescript"
|
|
28
|
+
],
|
|
29
|
+
"homepage": "https://byeolnaerim.com/flex-layout",
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "git+https://github.com/joohyoungkim19940805/flex-layout.git"
|
|
33
|
+
},
|
|
34
|
+
"bugs": {
|
|
35
|
+
"url": "https://github.com/joohyoungkim19940805/flex-layout/issues"
|
|
36
|
+
},
|
|
37
|
+
"files": [
|
|
38
|
+
"dist/**/*.js",
|
|
39
|
+
"dist/**/*.cjs",
|
|
40
|
+
"dist/**/*.d.ts",
|
|
41
|
+
"dist/**/*.css"
|
|
42
|
+
],
|
|
43
|
+
"sideEffects": [
|
|
44
|
+
"**/*.css"
|
|
45
|
+
],
|
|
46
|
+
"main": "./dist/index.cjs",
|
|
47
|
+
"module": "./dist/index.js",
|
|
48
|
+
"types": "./dist/index.d.ts",
|
|
49
|
+
"exports": {
|
|
50
|
+
".": {
|
|
51
|
+
"types": "./dist/index.d.ts",
|
|
52
|
+
"import": "./dist/index.js",
|
|
53
|
+
"require": "./dist/index.cjs",
|
|
54
|
+
"default": "./dist/index.js"
|
|
55
|
+
},
|
|
56
|
+
"./components": {
|
|
57
|
+
"types": "./dist/components.d.ts",
|
|
58
|
+
"import": "./dist/components.js",
|
|
59
|
+
"require": "./dist/components.cjs",
|
|
60
|
+
"default": "./dist/components.js"
|
|
61
|
+
},
|
|
62
|
+
"./hooks": {
|
|
63
|
+
"types": "./dist/hooks.d.ts",
|
|
64
|
+
"import": "./dist/hooks.js",
|
|
65
|
+
"require": "./dist/hooks.cjs",
|
|
66
|
+
"default": "./dist/hooks.js"
|
|
67
|
+
},
|
|
68
|
+
"./providers": {
|
|
69
|
+
"types": "./dist/providers.d.ts",
|
|
70
|
+
"import": "./dist/providers.js",
|
|
71
|
+
"require": "./dist/providers.cjs",
|
|
72
|
+
"default": "./dist/providers.js"
|
|
73
|
+
},
|
|
74
|
+
"./utils": {
|
|
75
|
+
"types": "./dist/utils.d.ts",
|
|
76
|
+
"import": "./dist/utils.js",
|
|
77
|
+
"require": "./dist/utils.cjs",
|
|
78
|
+
"default": "./dist/utils.js"
|
|
79
|
+
},
|
|
80
|
+
"./store": {
|
|
81
|
+
"types": "./dist/store.d.ts",
|
|
82
|
+
"import": "./dist/store.js",
|
|
83
|
+
"require": "./dist/store.cjs",
|
|
84
|
+
"default": "./dist/store.js"
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
"scripts": {
|
|
88
|
+
"build": "tsup && tsc -p tsconfig.build.json && npm run copy:assets",
|
|
89
|
+
"copy:assets": "cpy \"src/**/*.css\" \"dist\"",
|
|
90
|
+
"dev": "tsup --watch",
|
|
91
|
+
"prepack": "npm run build",
|
|
92
|
+
"prepare": "npm run build"
|
|
93
|
+
},
|
|
94
|
+
"devDependencies": {
|
|
95
|
+
"@types/react": "^18",
|
|
96
|
+
"@types/react-dom": "^18",
|
|
97
|
+
"cpy-cli": "^5",
|
|
98
|
+
"esbuild-plugin-preserve-directives": "^0.0.11",
|
|
99
|
+
"react": "^19.2.4",
|
|
100
|
+
"react-dom": "^19.2.4",
|
|
101
|
+
"rxjs": "^7.8.2",
|
|
102
|
+
"tsup": "^8.5.1",
|
|
103
|
+
"typescript": "5.9.3"
|
|
104
|
+
},
|
|
105
|
+
"peerDependencies": {
|
|
106
|
+
"react": ">=18",
|
|
107
|
+
"react-dom": ">=18"
|
|
108
|
+
},
|
|
109
|
+
"dependencies": {
|
|
110
|
+
"fast-deep-equal": "^3.1.3",
|
|
111
|
+
"rxjs": ">=7"
|
|
112
|
+
},
|
|
113
|
+
"overrides": {
|
|
114
|
+
"esbuild": "0.27.3"
|
|
115
|
+
}
|
|
116
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/flex-layout/components/FlexLayout.tsx"],"sourcesContent":["\"use client\";\nimport {\n\tChildren,\n\tcloneElement,\n\tFragment,\n\tisValidElement,\n\tReactElement,\n\tReactNode,\n} from \"react\";\nimport { ContainerOpenCloseProvider } from \"../providers/FlexLayoutHooks\";\nimport styles from \"../styles/FlexLayout.module.css\";\nimport {\n\tFlexContainerProps,\n\tFlexLayoutChildrenType,\n\tFlexLayoutProps,\n} from \"../types/FlexLayoutTypes\";\n\nimport { FlexLayoutProvider } from \"../providers/FlexLayoutContext\";\n\nconst withFlexLayout =\n\t(\n\t\tlayoutName: string,\n\t\tfitContent: \"width\" | \"height\",\n\t\tcontainerCount: number,\n\t) =>\n\t(WrappedComponent: ReactElement<FlexLayoutChildrenType>) => {\n\t\tif (\n\t\t\tWrappedComponent.type === Fragment ||\n\t\t\tWrappedComponent.type === \"div\" ||\n\t\t\tWrappedComponent.type === \"span\"\n\t\t) {\n\t\t\treturn WrappedComponent; // Fragment는 수정 없이 반환\n\t\t}\n\t\treturn cloneElement(WrappedComponent, {\n\t\t\tlayoutName,\n\t\t\tfitContent,\n\t\t\tcontainerCount,\n\t\t} as Partial<FlexContainerProps>);\n\t};\n\nexport default function FlexLayout({\n\tlayoutName,\n\tdirection,\n\tchildren,\n\tref,\n\tclassName,\n\tpanelClassName,\n\tpanelMovementMode = \"divorce\",\n\t...props\n}: FlexLayoutProps) {\n\tconst containerCount = Children.count(children);\n\tconst fitContent = direction === \"row\" ? \"width\" : \"height\";\n\t// Flatten children and unwrap Fragments\n\ttype FragmentElement = ReactElement<\n\t\t{ children?: ReactNode },\n\t\ttypeof Fragment\n\t>;\n\tconst isFragmentElement = (node: ReactNode): node is FragmentElement =>\n\t\tisValidElement(node) && node.type === Fragment;\n\n\t// ...\n\n\t// Flatten children and unwrap Fragments (타입 안전)\n\tconst nodes = Children.toArray(children).flatMap((node) =>\n\t\tisFragmentElement(node)\n\t\t\t? Children.toArray(node.props.children)\n\t\t\t: [node],\n\t);\n\n\t// 엘리먼트만 남기고, props 타입을 FlexLayoutChildrenType으로 고정\n\tconst flattenedChildren = nodes.filter(\n\t\tisValidElement,\n\t) as ReactElement<FlexLayoutChildrenType>[];\n\n\tif (flattenedChildren.length === 0) {\n\t\treturn null;\n\t}\n\t//if (!childrenTemplate) return null;\n\treturn (\n\t\t<>\n\t\t\t<FlexLayoutProvider\n\t\t\t\tvalue={{\n\t\t\t\t\tlayoutName,\n\t\t\t\t\tdirection,\n\t\t\t\t\tpanelMovementMode,\n\t\t\t\t\tpanelClassName,\n\t\t\t\t\tcontainerCount,\n\t\t\t\t\tfitContent,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles[\"flex-layout\"]} ${className && className !== \"\" ? className : \"\"}`}\n\t\t\t\t\t{...(ref ? { ref } : {})}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdata-layout_name={layoutName}\n\t\t\t\t\tdata-direction={direction}\n\t\t\t\t>\n\t\t\t\t\t{flattenedChildren.map((child, index) => {\n\t\t\t\t\t\tif (!child || !isValidElement(child)) return null;\n\t\t\t\t\t\t//const key = child.key || `flex-child-${index}`;\n\t\t\t\t\t\t// const wrappedChild = withFlexLayout(\n\t\t\t\t\t\t// layoutName,\n\t\t\t\t\t\t// fitContent,\n\t\t\t\t\t\t// containerCount\n\t\t\t\t\t\t// )(child);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t\t\t{child}\n\t\t\t\t\t\t\t\t{/*wrappedChild*/}\n\t\t\t\t\t\t\t\t{/*<FlexLayoutContainer\n {...containerProps}\n fitContent={fitContent}\n containerCount={\n (children && children.length) || 0\n }\n layoutName={props.layoutName}\n >\n {child}\n </FlexLayoutContainer>*/}\n\t\t\t\t\t\t\t\t{/* 클라이언트 사이드에서만 리사이즈 패널 처리 */}\n\t\t\t\t\t\t\t\t<ContainerOpenCloseProvider\n\t\t\t\t\t\t\t\t\tlayoutName={layoutName}\n\t\t\t\t\t\t\t\t\tcontainerName={child.props.containerName}\n\t\t\t\t\t\t\t\t\tsizeName={fitContent}\n\t\t\t\t\t\t\t\t></ContainerOpenCloseProvider>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</FlexLayoutProvider>\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EE;AA9EF,mBAOO;AACP,6BAA2C;AAC3C,wBAAmB;AAOnB,+BAAmC;AAEnC,MAAM,iBACL,CACC,YACA,YACA,mBAED,CAAC,qBAA2D;AAC3D,MACC,iBAAiB,SAAS,yBAC1B,iBAAiB,SAAS,SAC1B,iBAAiB,SAAS,QACzB;AACD,WAAO;AAAA,EACR;AACA,aAAO,2BAAa,kBAAkB;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAgC;AACjC;AAEc,SAAR,WAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACJ,GAAoB;AACnB,QAAM,iBAAiB,sBAAS,MAAM,QAAQ;AAC9C,QAAM,aAAa,cAAc,QAAQ,UAAU;AAMnD,QAAM,oBAAoB,CAAC,aAC1B,6BAAe,IAAI,KAAK,KAAK,SAAS;AAKvC,QAAM,QAAQ,sBAAS,QAAQ,QAAQ,EAAE;AAAA,IAAQ,CAAC,SACjD,kBAAkB,IAAI,IACnB,sBAAS,QAAQ,KAAK,MAAM,QAAQ,IACpC,CAAC,IAAI;AAAA,EACT;AAGA,QAAM,oBAAoB,MAAM;AAAA,IAC/B;AAAA,EACD;AAEA,MAAI,kBAAkB,WAAW,GAAG;AACnC,WAAO;AAAA,EACR;AAEA,SACC,2EACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,kBAAAA,QAAO,aAAa,CAAC,IAAI,aAAa,cAAc,KAAK,YAAY,EAAE;AAAA,UACpF,GAAI,MAAM,EAAE,IAAI,IAAI,CAAC;AAAA,UACrB,GAAG;AAAA,UACJ,oBAAkB;AAAA,UAClB,kBAAgB;AAAA,UAEf,4BAAkB,IAAI,CAAC,OAAO,UAAU;AACxC,gBAAI,CAAC,SAAS,KAAC,6BAAe,KAAK,EAAG,QAAO;AAO7C,mBACC,6CAAC,yBACC;AAAA;AAAA,cAaD;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,eAAe,MAAM,MAAM;AAAA,kBAC3B,UAAU;AAAA;AAAA,cACV;AAAA,iBAlBa,KAmBf;AAAA,UAEF,CAAC;AAAA;AAAA,MACF;AAAA;AAAA,EACD,GACD;AAEF;","names":["styles"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/flex-layout/components/FlexLayout.tsx"],"sourcesContent":["\"use client\";\nimport {\n\tChildren,\n\tcloneElement,\n\tFragment,\n\tisValidElement,\n\tReactElement,\n\tReactNode,\n} from \"react\";\nimport { ContainerOpenCloseProvider } from \"../providers/FlexLayoutHooks\";\nimport styles from \"../styles/FlexLayout.module.css\";\nimport {\n\tFlexContainerProps,\n\tFlexLayoutChildrenType,\n\tFlexLayoutProps,\n} from \"../types/FlexLayoutTypes\";\n\nimport { FlexLayoutProvider } from \"../providers/FlexLayoutContext\";\n\nconst withFlexLayout =\n\t(\n\t\tlayoutName: string,\n\t\tfitContent: \"width\" | \"height\",\n\t\tcontainerCount: number,\n\t) =>\n\t(WrappedComponent: ReactElement<FlexLayoutChildrenType>) => {\n\t\tif (\n\t\t\tWrappedComponent.type === Fragment ||\n\t\t\tWrappedComponent.type === \"div\" ||\n\t\t\tWrappedComponent.type === \"span\"\n\t\t) {\n\t\t\treturn WrappedComponent; // Fragment는 수정 없이 반환\n\t\t}\n\t\treturn cloneElement(WrappedComponent, {\n\t\t\tlayoutName,\n\t\t\tfitContent,\n\t\t\tcontainerCount,\n\t\t} as Partial<FlexContainerProps>);\n\t};\n\nexport default function FlexLayout({\n\tlayoutName,\n\tdirection,\n\tchildren,\n\tref,\n\tclassName,\n\tpanelClassName,\n\tpanelMovementMode = \"divorce\",\n\t...props\n}: FlexLayoutProps) {\n\tconst containerCount = Children.count(children);\n\tconst fitContent = direction === \"row\" ? \"width\" : \"height\";\n\t// Flatten children and unwrap Fragments\n\ttype FragmentElement = ReactElement<\n\t\t{ children?: ReactNode },\n\t\ttypeof Fragment\n\t>;\n\tconst isFragmentElement = (node: ReactNode): node is FragmentElement =>\n\t\tisValidElement(node) && node.type === Fragment;\n\n\t// ...\n\n\t// Flatten children and unwrap Fragments (타입 안전)\n\tconst nodes = Children.toArray(children).flatMap((node) =>\n\t\tisFragmentElement(node)\n\t\t\t? Children.toArray(node.props.children)\n\t\t\t: [node],\n\t);\n\n\t// 엘리먼트만 남기고, props 타입을 FlexLayoutChildrenType으로 고정\n\tconst flattenedChildren = nodes.filter(\n\t\tisValidElement,\n\t) as ReactElement<FlexLayoutChildrenType>[];\n\n\tif (flattenedChildren.length === 0) {\n\t\treturn null;\n\t}\n\t//if (!childrenTemplate) return null;\n\treturn (\n\t\t<>\n\t\t\t<FlexLayoutProvider\n\t\t\t\tvalue={{\n\t\t\t\t\tlayoutName,\n\t\t\t\t\tdirection,\n\t\t\t\t\tpanelMovementMode,\n\t\t\t\t\tpanelClassName,\n\t\t\t\t\tcontainerCount,\n\t\t\t\t\tfitContent,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles[\"flex-layout\"]} ${className && className !== \"\" ? className : \"\"}`}\n\t\t\t\t\t{...(ref ? { ref } : {})}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdata-layout_name={layoutName}\n\t\t\t\t\tdata-direction={direction}\n\t\t\t\t>\n\t\t\t\t\t{flattenedChildren.map((child, index) => {\n\t\t\t\t\t\tif (!child || !isValidElement(child)) return null;\n\t\t\t\t\t\t//const key = child.key || `flex-child-${index}`;\n\t\t\t\t\t\t// const wrappedChild = withFlexLayout(\n\t\t\t\t\t\t// layoutName,\n\t\t\t\t\t\t// fitContent,\n\t\t\t\t\t\t// containerCount\n\t\t\t\t\t\t// )(child);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t\t\t{child}\n\t\t\t\t\t\t\t\t{/*wrappedChild*/}\n\t\t\t\t\t\t\t\t{/*<FlexLayoutContainer\n {...containerProps}\n fitContent={fitContent}\n containerCount={\n (children && children.length) || 0\n }\n layoutName={props.layoutName}\n >\n {child}\n </FlexLayoutContainer>*/}\n\t\t\t\t\t\t\t\t{/* 클라이언트 사이드에서만 리사이즈 패널 처리 */}\n\t\t\t\t\t\t\t\t<ContainerOpenCloseProvider\n\t\t\t\t\t\t\t\t\tlayoutName={layoutName}\n\t\t\t\t\t\t\t\t\tcontainerName={child.props.containerName}\n\t\t\t\t\t\t\t\t\tsizeName={fitContent}\n\t\t\t\t\t\t\t\t></ContainerOpenCloseProvider>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</FlexLayoutProvider>\n\t\t</>\n\t);\n}\n"],"mappings":";AA+EE,mBAyCM,KAdD,YA3BL;AA9EF;AAAA,EACC;AAAA,EACA;AAAA,EACA,YAAAA;AAAA,EACA;AAAA,OAGM;AACP,SAAS,kCAAkC;AAC3C,OAAO,YAAY;AAOnB,SAAS,0BAA0B;AAEnC,MAAM,iBACL,CACC,YACA,YACA,mBAED,CAAC,qBAA2D;AAC3D,MACC,iBAAiB,SAASA,aAC1B,iBAAiB,SAAS,SAC1B,iBAAiB,SAAS,QACzB;AACD,WAAO;AAAA,EACR;AACA,SAAO,aAAa,kBAAkB;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAgC;AACjC;AAEc,SAAR,WAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACJ,GAAoB;AACnB,QAAM,iBAAiB,SAAS,MAAM,QAAQ;AAC9C,QAAM,aAAa,cAAc,QAAQ,UAAU;AAMnD,QAAM,oBAAoB,CAAC,SAC1B,eAAe,IAAI,KAAK,KAAK,SAASA;AAKvC,QAAM,QAAQ,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAAQ,CAAC,SACjD,kBAAkB,IAAI,IACnB,SAAS,QAAQ,KAAK,MAAM,QAAQ,IACpC,CAAC,IAAI;AAAA,EACT;AAGA,QAAM,oBAAoB,MAAM;AAAA,IAC/B;AAAA,EACD;AAEA,MAAI,kBAAkB,WAAW,GAAG;AACnC,WAAO;AAAA,EACR;AAEA,SACC,gCACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,OAAO,aAAa,CAAC,IAAI,aAAa,cAAc,KAAK,YAAY,EAAE;AAAA,UACpF,GAAI,MAAM,EAAE,IAAI,IAAI,CAAC;AAAA,UACrB,GAAG;AAAA,UACJ,oBAAkB;AAAA,UAClB,kBAAgB;AAAA,UAEf,4BAAkB,IAAI,CAAC,OAAO,UAAU;AACxC,gBAAI,CAAC,SAAS,CAAC,eAAe,KAAK,EAAG,QAAO;AAO7C,mBACC,qBAACA,WAAA,EACC;AAAA;AAAA,cAaD;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,eAAe,MAAM,MAAM;AAAA,kBAC3B,UAAU;AAAA;AAAA,cACV;AAAA,iBAlBa,KAmBf;AAAA,UAEF,CAAC;AAAA;AAAA,MACF;AAAA;AAAA,EACD,GACD;AAEF;","names":["Fragment"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutContainer.tsx"],"sourcesContent":["\"use client\";\r\nimport { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport { useSize } from \"../hooks/useSizes\";\r\nimport { useFlexLayoutContext } from \"../providers/FlexLayoutContext\";\r\nimport { setContainerRef } from \"../store/FlexLayoutContainerStore\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexContainerProps } from \"../types/FlexLayoutTypes\";\r\nimport { getGrow, mathGrow, mathWeight } from \"../utils/FlexLayoutUtils\";\r\nimport FlexLayoutResizePanel from \"./FlexLayoutResizePanel\";\r\n\r\nexport default function FlexLayoutContainer({\r\n\tisFitContent,\r\n\tisFitResize,\r\n\t// fitContent,\r\n\t// containerCount,\r\n\t// layoutName,\r\n\tcontainerName,\r\n\tgrow: initialGrow,\r\n\tprevGrow: initialPrevGrow,\r\n\tisInitialResizable,\r\n\tisResizePanel,\r\n\tchildren,\r\n\tclassName,\r\n\tpanelMode,\r\n}: FlexContainerProps) {\r\n\tconst {\r\n\t\tdirection,\r\n\t\tpanelMovementMode,\r\n\t\tpanelClassName,\r\n\t\tlayoutName,\r\n\t\tfitContent,\r\n\t\tcontainerCount,\r\n\t} = useFlexLayoutContext();\r\n\r\n\tconst { ref, size } =\r\n\t\t// isFitContent && fitContent\r\n\t\t//?\r\n\t\tuseSize(fitContent);\r\n\t//: { ref: null, size: null };\r\n\t// 콜백 ref에서 접근하기 위한 내부 ref 생성\r\n\tconst flexContainerNodeRef = useRef<HTMLDivElement | null>(null);\r\n\r\n\tconst isUserResizingRef = useRef(false);\r\n\r\n\tconst handleResizingChange = useCallback((v: boolean) => {\r\n\t\tisUserResizingRef.current = v;\r\n\t}, []);\r\n\r\n\t// 콜백 ref 정의\r\n\tconst flexContainerRef = useCallback(\r\n\t\t(node: HTMLDivElement | null) => {\r\n\t\t\tflexContainerNodeRef.current = node;\r\n\r\n\t\t\t// 마운트: 저장 / 언마운트: 삭제\r\n\t\t\tif (node) {\r\n\t\t\t\tsetContainerRef(\r\n\t\t\t\t\tlayoutName,\r\n\t\t\t\t\tcontainerName,\r\n\t\t\t\t\tflexContainerNodeRef,\r\n\t\t\t\t);\r\n\t\t\t} else {\r\n\t\t\t\tsetContainerRef(layoutName, containerName, null);\r\n\t\t\t}\r\n\t\t},\r\n\t\t[layoutName, containerName],\r\n\t);\r\n\r\n\t// 초기 SSR 시점에는 sessionStorage를 사용할 수 없으므로 일단 initialGrow를 사용\r\n\tconst [growState, setGrowState] = useState<number | undefined>(initialGrow);\r\n\tuseEffect(() => {\r\n\t\tsetGrowState(initialGrow);\r\n\t}, [initialGrow]);\r\n\tconst [prevGrowState, setPrevGrowState] = useState<number | undefined>(\r\n\t\tinitialPrevGrow,\r\n\t);\r\n\tconst [isFirstLoad, setIsFirstLoad] = useState<boolean>(true);\r\n\r\n\t// 클라이언트 마운트 후 sessionStorage에서 grow값을 가져와 state 업데이트 (SSR/Hydration 안정화)\r\n\tuseEffect(() => {\r\n\t\tif (\r\n\t\t\ttypeof window == \"undefined\" ||\r\n\t\t\tflexContainerNodeRef.current === null\r\n\t\t)\r\n\t\t\treturn;\r\n\r\n\t\tconst storedGrow = sessionStorage.getItem(containerName);\r\n\t\tif (storedGrow !== null) {\r\n\t\t\tconst parsed = parseFloat(storedGrow);\r\n\t\t\tif (!isNaN(parsed)) {\r\n\t\t\t\tflexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;\r\n\t\t\t\tsetGrowState(parsed);\r\n\t\t\t}\r\n\t\t}\r\n\t}, [containerName]);\r\n\r\n\t// 스타일 변경 감지를 위한 MutationObserver\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\t\tconst targetNode = flexContainerNodeRef.current;\r\n\r\n\t\tconst observer = new MutationObserver((mutations) => {\r\n\t\t\tfor (const mutation of mutations) {\r\n\t\t\t\tif (\r\n\t\t\t\t\tmutation.type === \"attributes\" &&\r\n\t\t\t\t\tmutation.attributeName === \"style\" &&\r\n\t\t\t\t\ttargetNode.style.flex\r\n\t\t\t\t) {\r\n\t\t\t\t\t// style.flex = \"X 1 0%\" 형태이므로 X를 파싱\r\n\t\t\t\t\tconst flexValue = targetNode.style.flex;\r\n\t\t\t\t\tconst parsedGrow = parseFloat(flexValue.split(\" \")[0]);\r\n\t\t\t\t\tif (!isNaN(parsedGrow)) {\r\n\t\t\t\t\t\t// sessionStorage에 저장\r\n\t\t\t\t\t\t// sessionStorage.setItem(\r\n\t\t\t\t\t\t// containerName,\r\n\t\t\t\t\t\t// parsedGrow.toString()\r\n\t\t\t\t\t\t// );\r\n\t\t\t\t\t\t// state 업데이트\r\n\t\t\t\t\t\tsetGrowState(parsedGrow);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tobserver.observe(targetNode, {\r\n\t\t\tattributes: true,\r\n\t\t\tattributeFilter: [\"style\"],\r\n\t\t\tattributeOldValue: true,\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tobserver.disconnect();\r\n\t\t};\r\n\t}, [containerName]);\r\n\r\n\tuseEffect(() => {\r\n\t\t// 컴포넌트 크기 및 설정값에 따른 사이즈 재조정\r\n\t\tif (\r\n\t\t\t!flexContainerNodeRef.current ||\r\n\t\t\t!ref ||\r\n\t\t\t!ref.current ||\r\n\t\t\t!size ||\r\n\t\t\t!fitContent ||\r\n\t\t\t// getGrow(flexContainerNodeRef.current) == 0 ||\r\n\t\t\tisUserResizingRef.current // 사용자가 직접 사이즈 조정 중일 때는 자동 조정 방지\r\n\t\t)\r\n\t\t\treturn;\r\n\t\trequestAnimationFrame(() => {\r\n\t\t\tif (!flexContainerNodeRef.current) return;\r\n\t\t\tconst sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;\r\n\t\t\tconst parentSize =\r\n\t\t\t\t(flexContainerNodeRef.current.parentElement &&\r\n\t\t\t\t\tflexContainerNodeRef.current.parentElement[\r\n\t\t\t\t\t\t(\"client\" + sizeName) as \"clientWidth\" | \"clientHeight\"\r\n\t\t\t\t\t]) ||\r\n\t\t\t\t0;\r\n\t\t\tif (isFitContent) {\r\n\t\t\t\tflexContainerNodeRef.current.style[\r\n\t\t\t\t\t(\"max\" + sizeName) as \"maxWidth\" | \"maxHeight\"\r\n\t\t\t\t] = size + \"px\";\r\n\t\t\t}\r\n\t\t\tif (!isFitResize && isFirstLoad) {\r\n\t\t\t\tsetIsFirstLoad(false);\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {\r\n\t\t\t\tconst newGrow = mathGrow(size, parentSize, containerCount);\r\n\t\t\t\tsetPrevGrowState(growState);\r\n\t\t\t\tsetGrowState(newGrow);\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.prev_grow =\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.grow;\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.grow = newGrow.toString();\r\n\t\t\t\t// flexContainerNodeRef.current.style.flex = `${newGrow} 1 0%`;\r\n\t\t\t}\r\n\t\t});\r\n\t}, [size, containerCount, isFitResize, children]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\r\n\t\tlet notGrowList: Array<HTMLElement> = [];\r\n\t\tlet containerList = [\r\n\t\t\t...(flexContainerNodeRef.current.parentElement?.children || []),\r\n\t\t].filter((e) => e.hasAttribute(\"data-container_name\"));\r\n\t\tlet remainingGrow = containerList.reduce((t, e, i) => {\r\n\t\t\tlet item = e as HTMLElement;\r\n\r\n\t\t\tif (item.classList.contains(styles[\"flex-resize-panel\"])) return t;\r\n\r\n\t\t\tif (\r\n\t\t\t\te.hasAttribute(\"data-grow\") == false ||\r\n\t\t\t\te.getAttribute(\"data-is_resize\") === \"true\"\r\n\t\t\t) {\r\n\t\t\t\tnotGrowList.push(item);\r\n\t\t\t\treturn t;\r\n\t\t\t}\r\n\t\t\tlet grow = parseFloat(item.dataset.grow || \"\");\r\n\t\t\titem.style.flex = `${grow} 1 0%`;\r\n\t\t\tt -= grow;\r\n\t\t\treturn t;\r\n\t\t}, containerList.length);\r\n\t\tif (notGrowList.length != 0) {\r\n\t\t\tlet resizeWeight = mathWeight(notGrowList.length, remainingGrow);\r\n\t\t\tnotGrowList.forEach((e) => {\r\n\t\t\t\te.dataset.grow = resizeWeight.toString();\r\n\t\t\t\te.style.flex = `${resizeWeight} 1 0%`;\r\n\t\t\t});\r\n\t\t}\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (\r\n\t\t\t!flexContainerNodeRef.current ||\r\n\t\t\t!isFitContent ||\r\n\t\t\t!fitContent ||\r\n\t\t\t!size ||\r\n\t\t\tgetGrow(flexContainerNodeRef.current) == 0\r\n\t\t)\r\n\t\t\treturn;\r\n\r\n\t\tconst parent = flexContainerNodeRef.current.parentElement;\r\n\t\tif (!parent) return;\r\n\r\n\t\tconst sizeName =\r\n\t\t\tfitContent.charAt(0).toUpperCase() + fitContent.substring(1);\r\n\t\tconst parentSize =\r\n\t\t\t(parent[\r\n\t\t\t\t(\"client\" + sizeName) as \"clientWidth\" | \"clientHeight\"\r\n\t\t\t] as number) || 0;\r\n\r\n\t\tif (!parentSize || containerCount <= 0) return;\r\n\r\n\t\t// 내 grow 재계산 (0 ~ containerCount로 클램프)\r\n\t\tconst nextGrowRaw = mathGrow(size, parentSize, containerCount);\r\n\t\tconst nextGrow = Math.min(containerCount, Math.max(0, nextGrowRaw));\r\n\t\tconst currentGrow = getGrow(flexContainerNodeRef.current);\r\n\r\n\t\t// 미세 변화로 루프 도는 것 방지\r\n\t\tif (Math.abs(nextGrow - currentGrow) < 0.001) return;\r\n\r\n\t\tsetPrevGrowState(currentGrow);\r\n\t\tsetGrowState(nextGrow);\r\n\r\n\t\t// 형제 컨테이너 grow 재분배\r\n\t\tconst containers = [...(parent.children || [])].filter((el) => {\r\n\t\t\tconst item = el as HTMLElement;\r\n\t\t\treturn (\r\n\t\t\t\titem.hasAttribute(\"data-container_name\") &&\r\n\t\t\t\t!item.classList.contains(styles[\"flex-resize-panel\"])\r\n\t\t\t);\r\n\t\t}) as HTMLElement[];\r\n\r\n\t\tconst siblings = containers.filter(\r\n\t\t\t(el) => el !== (flexContainerNodeRef.current as HTMLElement),\r\n\t\t);\r\n\r\n\t\t// 닫힌 컨테이너는 건드리지 않음\r\n\t\tconst adjustable = siblings.filter((el) => el.style.flex !== \"0 1 0%\");\r\n\r\n\t\tconst remaining = containerCount - nextGrow;\r\n\t\tif (remaining <= 0 || adjustable.length === 0) return;\r\n\r\n\t\tconst oldSum = adjustable.reduce((sum, el) => sum + getGrow(el), 0);\r\n\r\n\t\tif (oldSum <= 0) {\r\n\t\t\t// 기존 grow 합이 0이면 균등분배\r\n\t\t\tconst each = remaining / adjustable.length;\r\n\t\t\tadjustable.forEach((el) => {\r\n\t\t\t\tel.dataset.grow = each.toString();\r\n\t\t\t\tel.style.flex = `${each} 1 0%`;\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\t// 기존 grow 비율대로 스케일링\r\n\t\t\tadjustable.forEach((el) => {\r\n\t\t\t\tconst g = getGrow(el);\r\n\t\t\t\tconst scaled = remaining * (g / oldSum);\r\n\t\t\t\tel.dataset.grow = scaled.toString();\r\n\t\t\t\tel.style.flex = `${scaled} 1 0%`;\r\n\t\t\t});\r\n\t\t}\r\n\t}, [size, isFitContent, fitContent, containerCount]);\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div\r\n\t\t\t\tid={containerName}\r\n\t\t\t\tdata-container_name={containerName}\r\n\t\t\t\tref={flexContainerRef}\r\n\t\t\t\tclassName={`${styles[\"flex-container\"]} ${className && className !== \"\" ? className : \"\"}`}\r\n\t\t\t\t{...(growState !== undefined\r\n\t\t\t\t\t? { [\"data-grow\"]: growState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\t{...(prevGrowState != undefined\r\n\t\t\t\t\t? { [\"data-prev_grow\"]: prevGrowState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\tdata-is_resize={isInitialResizable}\r\n\t\t\t\tdata-is_resize_panel={isResizePanel}\r\n\t\t\t\tstyle={\r\n\t\t\t\t\t(growState !== undefined && {\r\n\t\t\t\t\t\tflex: `${growState} 1 0%`,\r\n\t\t\t\t\t}) ||\r\n\t\t\t\t\t{}\r\n\t\t\t\t}\r\n\t\t\t>\r\n\t\t\t\t{(isFitContent && (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclassName={`${styles[\"flex-content-fit-wrapper\"]}`}\r\n\t\t\t\t\t\tref={ref}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{children}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)) ||\r\n\t\t\t\t\tchildren}\r\n\t\t\t</div>\r\n\t\t\t{isResizePanel && (\r\n\t\t\t\t<FlexLayoutResizePanel\r\n\t\t\t\t\tcontainerName={containerName}\r\n\t\t\t\t\tlayoutName={layoutName}\r\n\t\t\t\t\tdirection={direction}\r\n\t\t\t\t\tcontainerCount={containerCount}\r\n\t\t\t\t\tpanelMode={panelMode}\r\n\t\t\t\t\tpanelClassName={panelClassName}\r\n\t\t\t\t\tpanelMovementMode={panelMovementMode}\r\n\t\t\t\t\tonResizingChange={handleResizingChange}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t</>\r\n\t);\r\n}\r\n"],"mappings":"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","names":["styles","FlexLayoutResizePanel"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutContainer.tsx"],"sourcesContent":["\"use client\";\r\nimport { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport { useSize } from \"../hooks/useSizes\";\r\nimport { useFlexLayoutContext } from \"../providers/FlexLayoutContext\";\r\nimport { setContainerRef } from \"../store/FlexLayoutContainerStore\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexContainerProps } from \"../types/FlexLayoutTypes\";\r\nimport { getGrow, mathGrow, mathWeight } from \"../utils/FlexLayoutUtils\";\r\nimport FlexLayoutResizePanel from \"./FlexLayoutResizePanel\";\r\n\r\nexport default function FlexLayoutContainer({\r\n\tisFitContent,\r\n\tisFitResize,\r\n\t// fitContent,\r\n\t// containerCount,\r\n\t// layoutName,\r\n\tcontainerName,\r\n\tgrow: initialGrow,\r\n\tprevGrow: initialPrevGrow,\r\n\tisInitialResizable,\r\n\tisResizePanel,\r\n\tchildren,\r\n\tclassName,\r\n\tpanelMode,\r\n}: FlexContainerProps) {\r\n\tconst {\r\n\t\tdirection,\r\n\t\tpanelMovementMode,\r\n\t\tpanelClassName,\r\n\t\tlayoutName,\r\n\t\tfitContent,\r\n\t\tcontainerCount,\r\n\t} = useFlexLayoutContext();\r\n\r\n\tconst { ref, size } =\r\n\t\t// isFitContent && fitContent\r\n\t\t//?\r\n\t\tuseSize(fitContent);\r\n\t//: { ref: null, size: null };\r\n\t// 콜백 ref에서 접근하기 위한 내부 ref 생성\r\n\tconst flexContainerNodeRef = useRef<HTMLDivElement | null>(null);\r\n\r\n\tconst isUserResizingRef = useRef(false);\r\n\r\n\tconst handleResizingChange = useCallback((v: boolean) => {\r\n\t\tisUserResizingRef.current = v;\r\n\t}, []);\r\n\r\n\t// 콜백 ref 정의\r\n\tconst flexContainerRef = useCallback(\r\n\t\t(node: HTMLDivElement | null) => {\r\n\t\t\tflexContainerNodeRef.current = node;\r\n\r\n\t\t\t// 마운트: 저장 / 언마운트: 삭제\r\n\t\t\tif (node) {\r\n\t\t\t\tsetContainerRef(\r\n\t\t\t\t\tlayoutName,\r\n\t\t\t\t\tcontainerName,\r\n\t\t\t\t\tflexContainerNodeRef,\r\n\t\t\t\t);\r\n\t\t\t} else {\r\n\t\t\t\tsetContainerRef(layoutName, containerName, null);\r\n\t\t\t}\r\n\t\t},\r\n\t\t[layoutName, containerName],\r\n\t);\r\n\r\n\t// 초기 SSR 시점에는 sessionStorage를 사용할 수 없으므로 일단 initialGrow를 사용\r\n\tconst [growState, setGrowState] = useState<number | undefined>(initialGrow);\r\n\tuseEffect(() => {\r\n\t\tsetGrowState(initialGrow);\r\n\t}, [initialGrow]);\r\n\tconst [prevGrowState, setPrevGrowState] = useState<number | undefined>(\r\n\t\tinitialPrevGrow,\r\n\t);\r\n\tconst [isFirstLoad, setIsFirstLoad] = useState<boolean>(true);\r\n\r\n\t// 클라이언트 마운트 후 sessionStorage에서 grow값을 가져와 state 업데이트 (SSR/Hydration 안정화)\r\n\tuseEffect(() => {\r\n\t\tif (\r\n\t\t\ttypeof window == \"undefined\" ||\r\n\t\t\tflexContainerNodeRef.current === null\r\n\t\t)\r\n\t\t\treturn;\r\n\r\n\t\tconst storedGrow = sessionStorage.getItem(containerName);\r\n\t\tif (storedGrow !== null) {\r\n\t\t\tconst parsed = parseFloat(storedGrow);\r\n\t\t\tif (!isNaN(parsed)) {\r\n\t\t\t\tflexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;\r\n\t\t\t\tsetGrowState(parsed);\r\n\t\t\t}\r\n\t\t}\r\n\t}, [containerName]);\r\n\r\n\t// 스타일 변경 감지를 위한 MutationObserver\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\t\tconst targetNode = flexContainerNodeRef.current;\r\n\r\n\t\tconst observer = new MutationObserver((mutations) => {\r\n\t\t\tfor (const mutation of mutations) {\r\n\t\t\t\tif (\r\n\t\t\t\t\tmutation.type === \"attributes\" &&\r\n\t\t\t\t\tmutation.attributeName === \"style\" &&\r\n\t\t\t\t\ttargetNode.style.flex\r\n\t\t\t\t) {\r\n\t\t\t\t\t// style.flex = \"X 1 0%\" 형태이므로 X를 파싱\r\n\t\t\t\t\tconst flexValue = targetNode.style.flex;\r\n\t\t\t\t\tconst parsedGrow = parseFloat(flexValue.split(\" \")[0]);\r\n\t\t\t\t\tif (!isNaN(parsedGrow)) {\r\n\t\t\t\t\t\t// sessionStorage에 저장\r\n\t\t\t\t\t\t// sessionStorage.setItem(\r\n\t\t\t\t\t\t// containerName,\r\n\t\t\t\t\t\t// parsedGrow.toString()\r\n\t\t\t\t\t\t// );\r\n\t\t\t\t\t\t// state 업데이트\r\n\t\t\t\t\t\tsetGrowState(parsedGrow);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tobserver.observe(targetNode, {\r\n\t\t\tattributes: true,\r\n\t\t\tattributeFilter: [\"style\"],\r\n\t\t\tattributeOldValue: true,\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tobserver.disconnect();\r\n\t\t};\r\n\t}, [containerName]);\r\n\r\n\tuseEffect(() => {\r\n\t\t// 컴포넌트 크기 및 설정값에 따른 사이즈 재조정\r\n\t\tif (\r\n\t\t\t!flexContainerNodeRef.current ||\r\n\t\t\t!ref ||\r\n\t\t\t!ref.current ||\r\n\t\t\t!size ||\r\n\t\t\t!fitContent ||\r\n\t\t\t// getGrow(flexContainerNodeRef.current) == 0 ||\r\n\t\t\tisUserResizingRef.current // 사용자가 직접 사이즈 조정 중일 때는 자동 조정 방지\r\n\t\t)\r\n\t\t\treturn;\r\n\t\trequestAnimationFrame(() => {\r\n\t\t\tif (!flexContainerNodeRef.current) return;\r\n\t\t\tconst sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;\r\n\t\t\tconst parentSize =\r\n\t\t\t\t(flexContainerNodeRef.current.parentElement &&\r\n\t\t\t\t\tflexContainerNodeRef.current.parentElement[\r\n\t\t\t\t\t\t(\"client\" + sizeName) as \"clientWidth\" | \"clientHeight\"\r\n\t\t\t\t\t]) ||\r\n\t\t\t\t0;\r\n\t\t\tif (isFitContent) {\r\n\t\t\t\tflexContainerNodeRef.current.style[\r\n\t\t\t\t\t(\"max\" + sizeName) as \"maxWidth\" | \"maxHeight\"\r\n\t\t\t\t] = size + \"px\";\r\n\t\t\t}\r\n\t\t\tif (!isFitResize && isFirstLoad) {\r\n\t\t\t\tsetIsFirstLoad(false);\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {\r\n\t\t\t\tconst newGrow = mathGrow(size, parentSize, containerCount);\r\n\t\t\t\tsetPrevGrowState(growState);\r\n\t\t\t\tsetGrowState(newGrow);\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.prev_grow =\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.grow;\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.grow = newGrow.toString();\r\n\t\t\t\t// flexContainerNodeRef.current.style.flex = `${newGrow} 1 0%`;\r\n\t\t\t}\r\n\t\t});\r\n\t}, [size, containerCount, isFitResize, children]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\r\n\t\tlet notGrowList: Array<HTMLElement> = [];\r\n\t\tlet containerList = [\r\n\t\t\t...(flexContainerNodeRef.current.parentElement?.children || []),\r\n\t\t].filter((e) => e.hasAttribute(\"data-container_name\"));\r\n\t\tlet remainingGrow = containerList.reduce((t, e, i) => {\r\n\t\t\tlet item = e as HTMLElement;\r\n\r\n\t\t\tif (item.classList.contains(styles[\"flex-resize-panel\"])) return t;\r\n\r\n\t\t\tif (\r\n\t\t\t\te.hasAttribute(\"data-grow\") == false ||\r\n\t\t\t\te.getAttribute(\"data-is_resize\") === \"true\"\r\n\t\t\t) {\r\n\t\t\t\tnotGrowList.push(item);\r\n\t\t\t\treturn t;\r\n\t\t\t}\r\n\t\t\tlet grow = parseFloat(item.dataset.grow || \"\");\r\n\t\t\titem.style.flex = `${grow} 1 0%`;\r\n\t\t\tt -= grow;\r\n\t\t\treturn t;\r\n\t\t}, containerList.length);\r\n\t\tif (notGrowList.length != 0) {\r\n\t\t\tlet resizeWeight = mathWeight(notGrowList.length, remainingGrow);\r\n\t\t\tnotGrowList.forEach((e) => {\r\n\t\t\t\te.dataset.grow = resizeWeight.toString();\r\n\t\t\t\te.style.flex = `${resizeWeight} 1 0%`;\r\n\t\t\t});\r\n\t\t}\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (\r\n\t\t\t!flexContainerNodeRef.current ||\r\n\t\t\t!isFitContent ||\r\n\t\t\t!fitContent ||\r\n\t\t\t!size ||\r\n\t\t\tgetGrow(flexContainerNodeRef.current) == 0\r\n\t\t)\r\n\t\t\treturn;\r\n\r\n\t\tconst parent = flexContainerNodeRef.current.parentElement;\r\n\t\tif (!parent) return;\r\n\r\n\t\tconst sizeName =\r\n\t\t\tfitContent.charAt(0).toUpperCase() + fitContent.substring(1);\r\n\t\tconst parentSize =\r\n\t\t\t(parent[\r\n\t\t\t\t(\"client\" + sizeName) as \"clientWidth\" | \"clientHeight\"\r\n\t\t\t] as number) || 0;\r\n\r\n\t\tif (!parentSize || containerCount <= 0) return;\r\n\r\n\t\t// 내 grow 재계산 (0 ~ containerCount로 클램프)\r\n\t\tconst nextGrowRaw = mathGrow(size, parentSize, containerCount);\r\n\t\tconst nextGrow = Math.min(containerCount, Math.max(0, nextGrowRaw));\r\n\t\tconst currentGrow = getGrow(flexContainerNodeRef.current);\r\n\r\n\t\t// 미세 변화로 루프 도는 것 방지\r\n\t\tif (Math.abs(nextGrow - currentGrow) < 0.001) return;\r\n\r\n\t\tsetPrevGrowState(currentGrow);\r\n\t\tsetGrowState(nextGrow);\r\n\r\n\t\t// 형제 컨테이너 grow 재분배\r\n\t\tconst containers = [...(parent.children || [])].filter((el) => {\r\n\t\t\tconst item = el as HTMLElement;\r\n\t\t\treturn (\r\n\t\t\t\titem.hasAttribute(\"data-container_name\") &&\r\n\t\t\t\t!item.classList.contains(styles[\"flex-resize-panel\"])\r\n\t\t\t);\r\n\t\t}) as HTMLElement[];\r\n\r\n\t\tconst siblings = containers.filter(\r\n\t\t\t(el) => el !== (flexContainerNodeRef.current as HTMLElement),\r\n\t\t);\r\n\r\n\t\t// 닫힌 컨테이너는 건드리지 않음\r\n\t\tconst adjustable = siblings.filter((el) => el.style.flex !== \"0 1 0%\");\r\n\r\n\t\tconst remaining = containerCount - nextGrow;\r\n\t\tif (remaining <= 0 || adjustable.length === 0) return;\r\n\r\n\t\tconst oldSum = adjustable.reduce((sum, el) => sum + getGrow(el), 0);\r\n\r\n\t\tif (oldSum <= 0) {\r\n\t\t\t// 기존 grow 합이 0이면 균등분배\r\n\t\t\tconst each = remaining / adjustable.length;\r\n\t\t\tadjustable.forEach((el) => {\r\n\t\t\t\tel.dataset.grow = each.toString();\r\n\t\t\t\tel.style.flex = `${each} 1 0%`;\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\t// 기존 grow 비율대로 스케일링\r\n\t\t\tadjustable.forEach((el) => {\r\n\t\t\t\tconst g = getGrow(el);\r\n\t\t\t\tconst scaled = remaining * (g / oldSum);\r\n\t\t\t\tel.dataset.grow = scaled.toString();\r\n\t\t\t\tel.style.flex = `${scaled} 1 0%`;\r\n\t\t\t});\r\n\t\t}\r\n\t}, [size, isFitContent, fitContent, containerCount]);\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div\r\n\t\t\t\tid={containerName}\r\n\t\t\t\tdata-container_name={containerName}\r\n\t\t\t\tref={flexContainerRef}\r\n\t\t\t\tclassName={`${styles[\"flex-container\"]} ${className && className !== \"\" ? className : \"\"}`}\r\n\t\t\t\t{...(growState !== undefined\r\n\t\t\t\t\t? { [\"data-grow\"]: growState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\t{...(prevGrowState != undefined\r\n\t\t\t\t\t? { [\"data-prev_grow\"]: prevGrowState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\tdata-is_resize={isInitialResizable}\r\n\t\t\t\tdata-is_resize_panel={isResizePanel}\r\n\t\t\t\tstyle={\r\n\t\t\t\t\t(growState !== undefined && {\r\n\t\t\t\t\t\tflex: `${growState} 1 0%`,\r\n\t\t\t\t\t}) ||\r\n\t\t\t\t\t{}\r\n\t\t\t\t}\r\n\t\t\t>\r\n\t\t\t\t{(isFitContent && (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclassName={`${styles[\"flex-content-fit-wrapper\"]}`}\r\n\t\t\t\t\t\tref={ref}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{children}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)) ||\r\n\t\t\t\t\tchildren}\r\n\t\t\t</div>\r\n\t\t\t{isResizePanel && (\r\n\t\t\t\t<FlexLayoutResizePanel\r\n\t\t\t\t\tcontainerName={containerName}\r\n\t\t\t\t\tlayoutName={layoutName}\r\n\t\t\t\t\tdirection={direction}\r\n\t\t\t\t\tcontainerCount={containerCount}\r\n\t\t\t\t\tpanelMode={panelMode}\r\n\t\t\t\t\tpanelClassName={panelClassName}\r\n\t\t\t\t\tpanelMovementMode={panelMovementMode}\r\n\t\t\t\t\tonResizingChange={handleResizingChange}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t</>\r\n\t);\r\n}\r\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutIFramePane.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { combineLatest, distinctUntilChanged, map, startWith } from \"rxjs\";\r\nimport { dragStateSubject, isResizingSubject } from \"../hooks\";\r\n\r\nexport function FlexLayoutIFramePane({\r\n\turl,\r\n\tscreenKey,\r\n}: {\r\n\turl: string;\r\n\tscreenKey?: string;\r\n}) {\r\n\tconst [blockPointer, setBlockPointer] = useState(false);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst draggingSubject = dragStateSubject.pipe(\r\n\t\t\tmap((s) => !!s?.isDragging),\r\n\t\t\tstartWith(false),\r\n\t\t\tdistinctUntilChanged(),\r\n\t\t);\r\n\r\n\t\tconst sub = combineLatest([draggingSubject, isResizingSubject])\r\n\t\t\t.pipe(\r\n\t\t\t\tmap(([dragging, resizing]) => dragging || resizing),\r\n\t\t\t\tdistinctUntilChanged(),\r\n\t\t\t)\r\n\t\t\t.subscribe(setBlockPointer);\r\n\r\n\t\treturn () => sub.unsubscribe();\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t<iframe\r\n\t\t\tkey={screenKey}\r\n\t\t\tsrc={url}\r\n\t\t\tstyle={{\r\n\t\t\t\twidth: \"100%\",\r\n\t\t\t\theight: \"100%\",\r\n\t\t\t\tborder: 0,\r\n\t\t\t\t//리사이즈 및 드래깅 중 ifram이 이벤트 못먹게 방지\r\n\t\t\t\tpointerEvents: blockPointer ? \"none\" : \"auto\",\r\n\t\t\t}}\r\n\t\t\tsandbox=\"allow-same-origin allow-scripts allow-forms allow-popups\"\r\n\t\t\treferrerPolicy=\"no-referrer\"\r\n\t\t\tloading=\"lazy\"\r\n\t\t/>\r\n\t);\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCE;AA/BF,mBAAoC;AACpC,kBAAoE;AACpE,mBAAoD;AAE7C,SAAS,qBAAqB;AAAA,EACpC;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AAEtD,8BAAU,MAAM;AACf,UAAM,kBAAkB,8BAAiB;AAAA,UACxC,iBAAI,CAAC,MAAM,CAAC,CAAC,GAAG,UAAU;AAAA,UAC1B,uBAAU,KAAK;AAAA,UACf,kCAAqB;AAAA,IACtB;AAEA,UAAM,UAAM,2BAAc,CAAC,iBAAiB,8BAAiB,CAAC,EAC5D;AAAA,UACA,iBAAI,CAAC,CAAC,UAAU,QAAQ,MAAM,YAAY,QAAQ;AAAA,UAClD,kCAAqB;AAAA,IACtB,EACC,UAAU,eAAe;AAE3B,WAAO,MAAM,IAAI,YAAY;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,KAAK;AAAA,MACL,OAAO;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA;AAAA,QAER,eAAe,eAAe,SAAS;AAAA,MACxC;AAAA,MACA,SAAQ;AAAA,MACR,gBAAe;AAAA,MACf,SAAQ;AAAA;AAAA,IAXH;AAAA,EAYN;AAEF;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutIFramePane.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { combineLatest, distinctUntilChanged, map, startWith } from \"rxjs\";\r\nimport { dragStateSubject, isResizingSubject } from \"../hooks\";\r\n\r\nexport function FlexLayoutIFramePane({\r\n\turl,\r\n\tscreenKey,\r\n}: {\r\n\turl: string;\r\n\tscreenKey?: string;\r\n}) {\r\n\tconst [blockPointer, setBlockPointer] = useState(false);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst draggingSubject = dragStateSubject.pipe(\r\n\t\t\tmap((s) => !!s?.isDragging),\r\n\t\t\tstartWith(false),\r\n\t\t\tdistinctUntilChanged(),\r\n\t\t);\r\n\r\n\t\tconst sub = combineLatest([draggingSubject, isResizingSubject])\r\n\t\t\t.pipe(\r\n\t\t\t\tmap(([dragging, resizing]) => dragging || resizing),\r\n\t\t\t\tdistinctUntilChanged(),\r\n\t\t\t)\r\n\t\t\t.subscribe(setBlockPointer);\r\n\r\n\t\treturn () => sub.unsubscribe();\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t<iframe\r\n\t\t\tkey={screenKey}\r\n\t\t\tsrc={url}\r\n\t\t\tstyle={{\r\n\t\t\t\twidth: \"100%\",\r\n\t\t\t\theight: \"100%\",\r\n\t\t\t\tborder: 0,\r\n\t\t\t\t//리사이즈 및 드래깅 중 ifram이 이벤트 못먹게 방지\r\n\t\t\t\tpointerEvents: blockPointer ? \"none\" : \"auto\",\r\n\t\t\t}}\r\n\t\t\tsandbox=\"allow-same-origin allow-scripts allow-forms allow-popups\"\r\n\t\t\treferrerPolicy=\"no-referrer\"\r\n\t\t\tloading=\"lazy\"\r\n\t\t/>\r\n\t);\r\n}\r\n"],"mappings":";AAiCE;AA/BF,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe,sBAAsB,KAAK,iBAAiB;AACpE,SAAS,kBAAkB,yBAAyB;AAE7C,SAAS,qBAAqB;AAAA,EACpC;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,YAAU,MAAM;AACf,UAAM,kBAAkB,iBAAiB;AAAA,MACxC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,UAAU;AAAA,MAC1B,UAAU,KAAK;AAAA,MACf,qBAAqB;AAAA,IACtB;AAEA,UAAM,MAAM,cAAc,CAAC,iBAAiB,iBAAiB,CAAC,EAC5D;AAAA,MACA,IAAI,CAAC,CAAC,UAAU,QAAQ,MAAM,YAAY,QAAQ;AAAA,MAClD,qBAAqB;AAAA,IACtB,EACC,UAAU,eAAe;AAE3B,WAAO,MAAM,IAAI,YAAY;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,KAAK;AAAA,MACL,OAAO;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA;AAAA,QAER,eAAe,eAAe,SAAS;AAAA,MACxC;AAAA,MACA,SAAQ;AAAA,MACR,gBAAe;AAAA,MACf,SAAQ;AAAA;AAAA,IAXH;AAAA,EAYN;AAEF;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutResizePanel.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport type { TouchEvent } from \"react\";\r\nimport { MouseEvent, useEffect, useRef } from \"react\";\r\nimport { isResizingSubject } from \"../hooks\";\r\nimport { setResizePanelRef } from \"../store/FlexLayoutContainerStore\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexDirectionModelType } from \"../types/FlexDirectionTypes\";\r\nimport { FlexLayoutResizePanelProps } from \"../types/FlexLayoutTypes\";\r\nimport { findNotCloseFlexContent, isOverMove } from \"../utils/FlexLayoutUtils\";\r\n\r\nconst flexDirectionModel = {\r\n\trow: {\r\n\t\txy: \"x\",\r\n\t\ttargetDirection: \"left\",\r\n\t\tnextDirection: \"right\",\r\n\t\tsizeName: \"width\",\r\n\t\tresizeCursor: \"ew-resize\",\r\n\t} as FlexDirectionModelType,\r\n\tcolumn: {\r\n\t\txy: \"y\",\r\n\t\ttargetDirection: \"top\",\r\n\t\tnextDirection: \"bottom\",\r\n\t\tsizeName: \"height\",\r\n\t\tresizeCursor: \"ns-resize\",\r\n\t} as FlexDirectionModelType,\r\n} as Record<string, FlexDirectionModelType>;\r\n\r\nexport default function FlexLayoutResizePanel({\r\n\tdirection,\r\n\tcontainerCount,\r\n\tpanelMode = \"default\",\r\n\tcontainerName,\r\n\tlayoutName,\r\n\tpanelClassName,\r\n\tpanelMovementMode,\r\n\tonResizingChange,\r\n}: FlexLayoutResizePanelProps) {\r\n\tconst directionRef = useRef(direction);\r\n\tconst movementModeRef = useRef(panelMovementMode);\r\n\r\n\tuseEffect(() => {\r\n\t\tdirectionRef.current = direction;\r\n\t}, [direction]);\r\n\tuseEffect(() => {\r\n\t\tmovementModeRef.current = panelMovementMode;\r\n\t}, [panelMovementMode]);\r\n\r\n\tconst isResizePanelClickRef = useRef<boolean>(false);\r\n\tconst prevTouchEventRef = useRef<globalThis.TouchEvent | null>(null);\r\n\tconst parentSizeRef = useRef<number>(0);\r\n\tconst totalMovementRef = useRef<number>(0);\r\n\r\n\tconst containerCountRef = useRef<number>(containerCount);\r\n\r\n\tconst panelRef = useRef<HTMLDivElement>(null);\r\n\r\n\tuseEffect(() => {\r\n\t\treturn () => {\r\n\t\t\tisResizingSubject.next(false);\r\n\t\t\tdocument.body.style.cursor = \"\";\r\n\t\t};\r\n\t}, []);\r\n\tuseEffect(() => {\r\n\t\tcontainerCountRef.current = containerCount;\r\n\t}, [containerCount]);\r\n\r\n\tconst panelMouseDownEvent = (\r\n\t\tevent: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>,\r\n\t) => {\r\n\t\tif (!panelRef.current || !panelRef.current.parentElement) return;\r\n\t\tisResizePanelClickRef.current = true;\r\n\t\tonResizingChange?.(true);\r\n\t\tcontainerCountRef.current = [\r\n\t\t\t...panelRef.current.parentElement.children,\r\n\t\t].filter((e) => e.hasAttribute(\"data-container_name\")).length;\r\n\t\tconst sizeName = flexDirectionModel[direction].sizeName;\r\n\t\tparentSizeRef.current =\r\n\t\t\tpanelRef.current.parentElement.getBoundingClientRect()[\r\n\t\t\t\tsizeName\r\n\t\t\t] as number;\r\n\t\tprevTouchEventRef.current = null;\r\n\t\ttotalMovementRef.current = 0;\r\n\r\n\t\tisResizingSubject.next(true);\r\n\r\n\t\tif (!parentSizeRef.current) return;\r\n\t\tdocument.body.style.cursor = flexDirectionModel[direction].resizeCursor;\r\n\t};\r\n\r\n\tconst panelMouseUpEvent = () => {\r\n\t\tisResizePanelClickRef.current = false;\r\n\t\tonResizingChange?.(false);\r\n\t\tparentSizeRef.current = 0;\r\n\t\ttotalMovementRef.current = 0;\r\n\t\tprevTouchEventRef.current = null;\r\n\r\n\t\tisResizingSubject.next(false);\r\n\r\n\t\tdocument.body.style.cursor = \"\";\r\n\t};\r\n\r\n\tfunction moveMouseFlex(\r\n\t\toriginTarget: HTMLDivElement,\r\n\t\tresizePanel: HTMLDivElement,\r\n\t\tmoveEvent: { movementX: number; movementY: number },\r\n\t\tdir: string,\r\n\t\tmode: string,\r\n\t) {\r\n\t\t//return new Promise<void>(resolve => {\r\n\t\tconst model = flexDirectionModel[dir];\r\n\t\tconst movement =\r\n\t\t\tmoveEvent[\r\n\t\t\t\t(\"movement\" + model.xy.toUpperCase()) as\r\n\t\t\t\t\t| \"movementX\"\r\n\t\t\t\t\t| \"movementY\"\r\n\t\t\t];\r\n\t\ttotalMovementRef.current += movement;\r\n\r\n\t\tconst minSizeName = \"min-\" + model.sizeName;\r\n\t\tconst maxSizeName = \"max-\" + model.sizeName;\r\n\r\n\t\t// 이전 방향으로 가까운 열린 패널 찾기\r\n\t\tlet targetElement = findNotCloseFlexContent(\r\n\t\t\toriginTarget,\r\n\t\t\t\"previousElementSibling\",\r\n\t\t);\r\n\r\n\t\tif (\r\n\t\t\t(panelMovementMode === \"divorce\" && totalMovementRef.current > 0) ||\r\n\t\t\t(panelMovementMode === \"bulldozer\" && movement > 0) ||\r\n\t\t\t!targetElement\r\n\t\t)\r\n\t\t\t//if (!targetElement || movement > 0)\r\n\t\t\ttargetElement = originTarget;\r\n\r\n\t\t// 다음 방향으로 가까운 열린 패널 찾기\r\n\t\tlet nextElement = findNotCloseFlexContent(\r\n\t\t\tresizePanel.nextElementSibling,\r\n\t\t\t\"nextElementSibling\",\r\n\t\t);\r\n\r\n\t\tif (\r\n\t\t\t(panelMovementMode === \"divorce\" && totalMovementRef.current < 0) ||\r\n\t\t\t(panelMovementMode === \"bulldozer\" && movement < 0) ||\r\n\t\t\t!nextElement\r\n\t\t)\r\n\t\t\t//if (!nextElement || movement < 0)\r\n\t\t\tnextElement = resizePanel.nextElementSibling as HTMLDivElement;\r\n\r\n\t\tif (!targetElement || !nextElement) return;\r\n\r\n\t\tconst targetRect = targetElement.getBoundingClientRect();\r\n\t\tconst targetStyle = window.getComputedStyle(targetElement);\r\n\t\tconst targetMinSize =\r\n\t\t\tparseFloat(targetStyle.getPropertyValue(minSizeName)) || 0;\r\n\t\tconst targetMaxSize =\r\n\t\t\tparseFloat(targetStyle.getPropertyValue(maxSizeName)) || 0;\r\n\r\n\t\tconst nextRect = nextElement.getBoundingClientRect();\r\n\t\tconst nextStyle = window.getComputedStyle(nextElement);\r\n\t\tconst nextMinSize =\r\n\t\t\tparseFloat(nextStyle.getPropertyValue(minSizeName)) || 0;\r\n\t\tconst nextMaxSize =\r\n\t\t\tparseFloat(nextStyle.getPropertyValue(maxSizeName)) || 0;\r\n\r\n\t\t// 변경하고자 하는 target 사이즈와 next 사이즈 계산\r\n\t\tlet targetSize = (targetRect[model.sizeName] as number) + movement;\r\n\t\tlet nextElementSize = (nextRect[model.sizeName] as number) - movement;\r\n\r\n\t\t// Max size 조건 확인\r\n\t\tif (targetMaxSize > 0 && targetSize > targetMaxSize) {\r\n\t\t\t// target이 max size 초과면 조정 불가\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tif (nextMaxSize > 0 && nextElementSize > nextMaxSize) {\r\n\t\t\t// next가 max size 초과면 조정 불가\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// 2024 11 29 자기 자신이 close 상태일 때 다음 타겟을 따라가도록 하되 30px만큼 움직일 때는 자기 자신을 open 상태로 하는 코드 주석처리\r\n\t\t//if (!nextElement || 30 < movement * -1) {\r\n\t\t// nextElement = resizePanel.nextElementSibling as HTMLDivElement;\r\n\t\t//}\r\n\r\n\t\t// Min size 조건 확인 후 조정\r\n\t\tif (isOverMove(targetSize, targetMinSize)) {\r\n\t\t\t// target이 너무 작아지면 0으로 처리 (close 상태)\r\n\t\t\ttargetSize = 0;\r\n\t\t\tnextElementSize = nextRect[model.sizeName] as number; // next는 변화 없음\r\n\t\t} else if (isOverMove(nextElementSize, nextMinSize)) {\r\n\t\t\t// next가 너무 작아지면 0으로 처리 (close 상태)\r\n\t\t\tnextElementSize = 0;\r\n\t\t\ttargetSize = targetRect[model.sizeName] as number; // target은 변화 없음\r\n\t\t}\r\n\r\n\t\t// flex-grow 재계산\r\n\t\tconst targetFlexGrow =\r\n\t\t\t(targetSize / (parentSizeRef.current - 1)) *\r\n\t\t\tcontainerCountRef.current;\r\n\t\tconst nextElementFlexGrow =\r\n\t\t\t(nextElementSize / (parentSizeRef.current - 1)) *\r\n\t\t\tcontainerCountRef.current;\r\n\r\n\t\tif (!(targetElement instanceof HTMLElement)) return;\r\n\t\tif (!(nextElement instanceof HTMLElement)) return;\r\n\r\n\t\ttargetElement.style.flex = `${targetFlexGrow} 1 0%`;\r\n\t\tnextElement.style.flex = `${nextElementFlexGrow} 1 0%`;\r\n\r\n\t\t// resolve();\r\n\t\t// });\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\tconst addGlobalMoveEvent = (event: Event) => {\r\n\t\t\tif (!isResizePanelClickRef.current || !panelRef.current) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tevent.preventDefault();\r\n\r\n\t\t\tconst dir = directionRef.current;\r\n\t\t\tconst mode = movementModeRef.current;\r\n\r\n\t\t\tconst targetElement = panelRef.current\r\n\t\t\t\t.previousElementSibling as HTMLDivElement;\r\n\t\t\tconst targetPanel = panelRef.current;\r\n\t\t\tif (!targetElement || !targetPanel) return;\r\n\r\n\t\t\tlet move = { movementX: 0, movementY: 0 };\r\n\t\t\tif (window.TouchEvent && event instanceof window.TouchEvent) {\r\n\t\t\t\tconst prev = prevTouchEventRef.current;\r\n\t\t\t\tif (!prev) {\r\n\t\t\t\t\tprevTouchEventRef.current = event;\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tmove.movementX =\r\n\t\t\t\t\t(prev.touches[0].pageX - event.touches[0].pageX) * -1;\r\n\t\t\t\tmove.movementY =\r\n\t\t\t\t\t(prev.touches[0].pageY - event.touches[0].pageY) * -1;\r\n\t\t\t\tprevTouchEventRef.current = event;\r\n\t\t\t} else {\r\n\t\t\t\tmove.movementX = (event as globalThis.MouseEvent).movementX;\r\n\t\t\t\tmove.movementY = (event as globalThis.MouseEvent).movementY;\r\n\t\t\t}\r\n\r\n\t\t\tmoveMouseFlex(targetElement, targetPanel, move, dir, mode);\r\n\t\t};\r\n\r\n\t\t[\"mousemove\", \"touchmove\"].forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, addGlobalMoveEvent, {\r\n\t\t\t\tpassive: false,\r\n\t\t\t});\r\n\t\t});\r\n\t\t[\r\n\t\t\t\"mouseup\",\r\n\t\t\t\"touchend\",\r\n\t\t\t\"touchcancel\", // 터치 제스처 시스템 인터럽트\r\n\t\t\t\"pointerup\", // 범용 포인터 이벤트\r\n\t\t\t\"pointercancel\",\r\n\t\t\t\"blur\", // 윈도우 포커스 아웃 (Alt+Tab 등)\r\n\t\t].forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, panelMouseUpEvent);\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\t[\"mousemove\", \"touchmove\"].forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, addGlobalMoveEvent);\r\n\t\t\t});\r\n\t\t\t[\r\n\t\t\t\t\"mouseup\",\r\n\t\t\t\t\"touchend\",\r\n\t\t\t\t\"touchcancel\", // 터치 제스처 시스템 인터럽트\r\n\t\t\t\t\"pointerup\", // 범용 포인터 이벤트\r\n\t\t\t\t\"pointercancel\",\r\n\t\t\t\t\"blur\", // 윈도우 포커스 아웃 (Alt+Tab 등)\r\n\t\t\t].forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, panelMouseUpEvent);\r\n\t\t\t});\r\n\t\t};\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!panelRef.current) return;\r\n\t\tsetResizePanelRef(layoutName, containerName, panelRef);\r\n\t\treturn () => {\r\n\t\t\tsetResizePanelRef(layoutName, containerName, null);\r\n\t\t};\r\n\t}, [containerName, layoutName]);\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tid={containerName + \"_resize_panel\"}\r\n\t\t\tclassName={`${styles[\"flex-resize-panel\"]} ${styles[panelMode as keyof typeof styles]} ${panelClassName && panelClassName !== \"\" ? panelClassName : \"\"}`}\r\n\t\t\tref={panelRef}\r\n\t\t\tonMouseDown={panelMouseDownEvent}\r\n\t\t\tonTouchStart={panelMouseDownEvent}\r\n\t\t>\r\n\t\t\t<div className={styles.hover}></div>\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"mappings":"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","names":["styles"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutResizePanel.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport type { TouchEvent } from \"react\";\r\nimport { MouseEvent, useEffect, useRef } from \"react\";\r\nimport { isResizingSubject } from \"../hooks\";\r\nimport { setResizePanelRef } from \"../store/FlexLayoutContainerStore\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexDirectionModelType } from \"../types/FlexDirectionTypes\";\r\nimport { FlexLayoutResizePanelProps } from \"../types/FlexLayoutTypes\";\r\nimport { findNotCloseFlexContent, isOverMove } from \"../utils/FlexLayoutUtils\";\r\n\r\nconst flexDirectionModel = {\r\n\trow: {\r\n\t\txy: \"x\",\r\n\t\ttargetDirection: \"left\",\r\n\t\tnextDirection: \"right\",\r\n\t\tsizeName: \"width\",\r\n\t\tresizeCursor: \"ew-resize\",\r\n\t} as FlexDirectionModelType,\r\n\tcolumn: {\r\n\t\txy: \"y\",\r\n\t\ttargetDirection: \"top\",\r\n\t\tnextDirection: \"bottom\",\r\n\t\tsizeName: \"height\",\r\n\t\tresizeCursor: \"ns-resize\",\r\n\t} as FlexDirectionModelType,\r\n} as Record<string, FlexDirectionModelType>;\r\n\r\nexport default function FlexLayoutResizePanel({\r\n\tdirection,\r\n\tcontainerCount,\r\n\tpanelMode = \"default\",\r\n\tcontainerName,\r\n\tlayoutName,\r\n\tpanelClassName,\r\n\tpanelMovementMode,\r\n\tonResizingChange,\r\n}: FlexLayoutResizePanelProps) {\r\n\tconst directionRef = useRef(direction);\r\n\tconst movementModeRef = useRef(panelMovementMode);\r\n\r\n\tuseEffect(() => {\r\n\t\tdirectionRef.current = direction;\r\n\t}, [direction]);\r\n\tuseEffect(() => {\r\n\t\tmovementModeRef.current = panelMovementMode;\r\n\t}, [panelMovementMode]);\r\n\r\n\tconst isResizePanelClickRef = useRef<boolean>(false);\r\n\tconst prevTouchEventRef = useRef<globalThis.TouchEvent | null>(null);\r\n\tconst parentSizeRef = useRef<number>(0);\r\n\tconst totalMovementRef = useRef<number>(0);\r\n\r\n\tconst containerCountRef = useRef<number>(containerCount);\r\n\r\n\tconst panelRef = useRef<HTMLDivElement>(null);\r\n\r\n\tuseEffect(() => {\r\n\t\treturn () => {\r\n\t\t\tisResizingSubject.next(false);\r\n\t\t\tdocument.body.style.cursor = \"\";\r\n\t\t};\r\n\t}, []);\r\n\tuseEffect(() => {\r\n\t\tcontainerCountRef.current = containerCount;\r\n\t}, [containerCount]);\r\n\r\n\tconst panelMouseDownEvent = (\r\n\t\tevent: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>,\r\n\t) => {\r\n\t\tif (!panelRef.current || !panelRef.current.parentElement) return;\r\n\t\tisResizePanelClickRef.current = true;\r\n\t\tonResizingChange?.(true);\r\n\t\tcontainerCountRef.current = [\r\n\t\t\t...panelRef.current.parentElement.children,\r\n\t\t].filter((e) => e.hasAttribute(\"data-container_name\")).length;\r\n\t\tconst sizeName = flexDirectionModel[direction].sizeName;\r\n\t\tparentSizeRef.current =\r\n\t\t\tpanelRef.current.parentElement.getBoundingClientRect()[\r\n\t\t\t\tsizeName\r\n\t\t\t] as number;\r\n\t\tprevTouchEventRef.current = null;\r\n\t\ttotalMovementRef.current = 0;\r\n\r\n\t\tisResizingSubject.next(true);\r\n\r\n\t\tif (!parentSizeRef.current) return;\r\n\t\tdocument.body.style.cursor = flexDirectionModel[direction].resizeCursor;\r\n\t};\r\n\r\n\tconst panelMouseUpEvent = () => {\r\n\t\tisResizePanelClickRef.current = false;\r\n\t\tonResizingChange?.(false);\r\n\t\tparentSizeRef.current = 0;\r\n\t\ttotalMovementRef.current = 0;\r\n\t\tprevTouchEventRef.current = null;\r\n\r\n\t\tisResizingSubject.next(false);\r\n\r\n\t\tdocument.body.style.cursor = \"\";\r\n\t};\r\n\r\n\tfunction moveMouseFlex(\r\n\t\toriginTarget: HTMLDivElement,\r\n\t\tresizePanel: HTMLDivElement,\r\n\t\tmoveEvent: { movementX: number; movementY: number },\r\n\t\tdir: string,\r\n\t\tmode: string,\r\n\t) {\r\n\t\t//return new Promise<void>(resolve => {\r\n\t\tconst model = flexDirectionModel[dir];\r\n\t\tconst movement =\r\n\t\t\tmoveEvent[\r\n\t\t\t\t(\"movement\" + model.xy.toUpperCase()) as\r\n\t\t\t\t\t| \"movementX\"\r\n\t\t\t\t\t| \"movementY\"\r\n\t\t\t];\r\n\t\ttotalMovementRef.current += movement;\r\n\r\n\t\tconst minSizeName = \"min-\" + model.sizeName;\r\n\t\tconst maxSizeName = \"max-\" + model.sizeName;\r\n\r\n\t\t// 이전 방향으로 가까운 열린 패널 찾기\r\n\t\tlet targetElement = findNotCloseFlexContent(\r\n\t\t\toriginTarget,\r\n\t\t\t\"previousElementSibling\",\r\n\t\t);\r\n\r\n\t\tif (\r\n\t\t\t(panelMovementMode === \"divorce\" && totalMovementRef.current > 0) ||\r\n\t\t\t(panelMovementMode === \"bulldozer\" && movement > 0) ||\r\n\t\t\t!targetElement\r\n\t\t)\r\n\t\t\t//if (!targetElement || movement > 0)\r\n\t\t\ttargetElement = originTarget;\r\n\r\n\t\t// 다음 방향으로 가까운 열린 패널 찾기\r\n\t\tlet nextElement = findNotCloseFlexContent(\r\n\t\t\tresizePanel.nextElementSibling,\r\n\t\t\t\"nextElementSibling\",\r\n\t\t);\r\n\r\n\t\tif (\r\n\t\t\t(panelMovementMode === \"divorce\" && totalMovementRef.current < 0) ||\r\n\t\t\t(panelMovementMode === \"bulldozer\" && movement < 0) ||\r\n\t\t\t!nextElement\r\n\t\t)\r\n\t\t\t//if (!nextElement || movement < 0)\r\n\t\t\tnextElement = resizePanel.nextElementSibling as HTMLDivElement;\r\n\r\n\t\tif (!targetElement || !nextElement) return;\r\n\r\n\t\tconst targetRect = targetElement.getBoundingClientRect();\r\n\t\tconst targetStyle = window.getComputedStyle(targetElement);\r\n\t\tconst targetMinSize =\r\n\t\t\tparseFloat(targetStyle.getPropertyValue(minSizeName)) || 0;\r\n\t\tconst targetMaxSize =\r\n\t\t\tparseFloat(targetStyle.getPropertyValue(maxSizeName)) || 0;\r\n\r\n\t\tconst nextRect = nextElement.getBoundingClientRect();\r\n\t\tconst nextStyle = window.getComputedStyle(nextElement);\r\n\t\tconst nextMinSize =\r\n\t\t\tparseFloat(nextStyle.getPropertyValue(minSizeName)) || 0;\r\n\t\tconst nextMaxSize =\r\n\t\t\tparseFloat(nextStyle.getPropertyValue(maxSizeName)) || 0;\r\n\r\n\t\t// 변경하고자 하는 target 사이즈와 next 사이즈 계산\r\n\t\tlet targetSize = (targetRect[model.sizeName] as number) + movement;\r\n\t\tlet nextElementSize = (nextRect[model.sizeName] as number) - movement;\r\n\r\n\t\t// Max size 조건 확인\r\n\t\tif (targetMaxSize > 0 && targetSize > targetMaxSize) {\r\n\t\t\t// target이 max size 초과면 조정 불가\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tif (nextMaxSize > 0 && nextElementSize > nextMaxSize) {\r\n\t\t\t// next가 max size 초과면 조정 불가\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// 2024 11 29 자기 자신이 close 상태일 때 다음 타겟을 따라가도록 하되 30px만큼 움직일 때는 자기 자신을 open 상태로 하는 코드 주석처리\r\n\t\t//if (!nextElement || 30 < movement * -1) {\r\n\t\t// nextElement = resizePanel.nextElementSibling as HTMLDivElement;\r\n\t\t//}\r\n\r\n\t\t// Min size 조건 확인 후 조정\r\n\t\tif (isOverMove(targetSize, targetMinSize)) {\r\n\t\t\t// target이 너무 작아지면 0으로 처리 (close 상태)\r\n\t\t\ttargetSize = 0;\r\n\t\t\tnextElementSize = nextRect[model.sizeName] as number; // next는 변화 없음\r\n\t\t} else if (isOverMove(nextElementSize, nextMinSize)) {\r\n\t\t\t// next가 너무 작아지면 0으로 처리 (close 상태)\r\n\t\t\tnextElementSize = 0;\r\n\t\t\ttargetSize = targetRect[model.sizeName] as number; // target은 변화 없음\r\n\t\t}\r\n\r\n\t\t// flex-grow 재계산\r\n\t\tconst targetFlexGrow =\r\n\t\t\t(targetSize / (parentSizeRef.current - 1)) *\r\n\t\t\tcontainerCountRef.current;\r\n\t\tconst nextElementFlexGrow =\r\n\t\t\t(nextElementSize / (parentSizeRef.current - 1)) *\r\n\t\t\tcontainerCountRef.current;\r\n\r\n\t\tif (!(targetElement instanceof HTMLElement)) return;\r\n\t\tif (!(nextElement instanceof HTMLElement)) return;\r\n\r\n\t\ttargetElement.style.flex = `${targetFlexGrow} 1 0%`;\r\n\t\tnextElement.style.flex = `${nextElementFlexGrow} 1 0%`;\r\n\r\n\t\t// resolve();\r\n\t\t// });\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\tconst addGlobalMoveEvent = (event: Event) => {\r\n\t\t\tif (!isResizePanelClickRef.current || !panelRef.current) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tevent.preventDefault();\r\n\r\n\t\t\tconst dir = directionRef.current;\r\n\t\t\tconst mode = movementModeRef.current;\r\n\r\n\t\t\tconst targetElement = panelRef.current\r\n\t\t\t\t.previousElementSibling as HTMLDivElement;\r\n\t\t\tconst targetPanel = panelRef.current;\r\n\t\t\tif (!targetElement || !targetPanel) return;\r\n\r\n\t\t\tlet move = { movementX: 0, movementY: 0 };\r\n\t\t\tif (window.TouchEvent && event instanceof window.TouchEvent) {\r\n\t\t\t\tconst prev = prevTouchEventRef.current;\r\n\t\t\t\tif (!prev) {\r\n\t\t\t\t\tprevTouchEventRef.current = event;\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tmove.movementX =\r\n\t\t\t\t\t(prev.touches[0].pageX - event.touches[0].pageX) * -1;\r\n\t\t\t\tmove.movementY =\r\n\t\t\t\t\t(prev.touches[0].pageY - event.touches[0].pageY) * -1;\r\n\t\t\t\tprevTouchEventRef.current = event;\r\n\t\t\t} else {\r\n\t\t\t\tmove.movementX = (event as globalThis.MouseEvent).movementX;\r\n\t\t\t\tmove.movementY = (event as globalThis.MouseEvent).movementY;\r\n\t\t\t}\r\n\r\n\t\t\tmoveMouseFlex(targetElement, targetPanel, move, dir, mode);\r\n\t\t};\r\n\r\n\t\t[\"mousemove\", \"touchmove\"].forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, addGlobalMoveEvent, {\r\n\t\t\t\tpassive: false,\r\n\t\t\t});\r\n\t\t});\r\n\t\t[\r\n\t\t\t\"mouseup\",\r\n\t\t\t\"touchend\",\r\n\t\t\t\"touchcancel\", // 터치 제스처 시스템 인터럽트\r\n\t\t\t\"pointerup\", // 범용 포인터 이벤트\r\n\t\t\t\"pointercancel\",\r\n\t\t\t\"blur\", // 윈도우 포커스 아웃 (Alt+Tab 등)\r\n\t\t].forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, panelMouseUpEvent);\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\t[\"mousemove\", \"touchmove\"].forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, addGlobalMoveEvent);\r\n\t\t\t});\r\n\t\t\t[\r\n\t\t\t\t\"mouseup\",\r\n\t\t\t\t\"touchend\",\r\n\t\t\t\t\"touchcancel\", // 터치 제스처 시스템 인터럽트\r\n\t\t\t\t\"pointerup\", // 범용 포인터 이벤트\r\n\t\t\t\t\"pointercancel\",\r\n\t\t\t\t\"blur\", // 윈도우 포커스 아웃 (Alt+Tab 등)\r\n\t\t\t].forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, panelMouseUpEvent);\r\n\t\t\t});\r\n\t\t};\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!panelRef.current) return;\r\n\t\tsetResizePanelRef(layoutName, containerName, panelRef);\r\n\t\treturn () => {\r\n\t\t\tsetResizePanelRef(layoutName, containerName, null);\r\n\t\t};\r\n\t}, [containerName, layoutName]);\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tid={containerName + \"_resize_panel\"}\r\n\t\t\tclassName={`${styles[\"flex-resize-panel\"]} ${styles[panelMode as keyof typeof styles]} ${panelClassName && panelClassName !== \"\" ? panelClassName : \"\"}`}\r\n\t\t\tref={panelRef}\r\n\t\t\tonMouseDown={panelMouseDownEvent}\r\n\t\t\tonTouchStart={panelMouseDownEvent}\r\n\t\t>\r\n\t\t\t<div className={styles.hover}></div>\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"mappings":"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","names":[]}
|