@byeolnaerim/flex-layout 0.0.8 → 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.
Files changed (125) hide show
  1. package/dist/flex-layout/components/FlexLayout.cjs +1 -76
  2. package/dist/flex-layout/components/FlexLayout.js +1 -70
  3. package/dist/flex-layout/components/FlexLayoutContainer.cjs +1 -196
  4. package/dist/flex-layout/components/FlexLayoutContainer.js +1 -189
  5. package/dist/flex-layout/components/FlexLayoutIFramePane.cjs +1 -0
  6. package/dist/flex-layout/components/FlexLayoutIFramePane.d.ts +4 -0
  7. package/dist/flex-layout/components/FlexLayoutIFramePane.js +1 -0
  8. package/dist/flex-layout/components/FlexLayoutResizePanel.cjs +1 -192
  9. package/dist/flex-layout/components/FlexLayoutResizePanel.d.ts +1 -1
  10. package/dist/flex-layout/components/FlexLayoutResizePanel.js +1 -186
  11. package/dist/flex-layout/components/FlexLayoutSplitScreen.cjs +1 -1211
  12. package/dist/flex-layout/components/FlexLayoutSplitScreen.js +1 -1197
  13. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.cjs +1 -339
  14. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.d.ts +1 -1
  15. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.js +1 -333
  16. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.cjs +1 -32
  17. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.js +1 -25
  18. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.cjs +1 -40
  19. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.js +1 -34
  20. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.cjs +1 -30
  21. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.js +1 -24
  22. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.cjs +1 -109
  23. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.js +1 -103
  24. package/dist/flex-layout/components/FlexLayoutStickyBox.cjs +1 -226
  25. package/dist/flex-layout/components/FlexLayoutStickyBox.d.ts +1 -0
  26. package/dist/flex-layout/components/FlexLayoutStickyBox.js +1 -224
  27. package/dist/flex-layout/components/index.cjs +1 -52
  28. package/dist/flex-layout/components/index.js +1 -9
  29. package/dist/flex-layout/hooks/index.cjs +1 -21
  30. package/dist/flex-layout/hooks/index.js +1 -4
  31. package/dist/flex-layout/hooks/useDrag.cjs +1 -232
  32. package/dist/flex-layout/hooks/useDrag.d.ts +20 -0
  33. package/dist/flex-layout/hooks/useDrag.js +1 -219
  34. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.cjs +1 -118
  35. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.js +1 -116
  36. package/dist/flex-layout/hooks/useListPaging.cjs +1 -179
  37. package/dist/flex-layout/hooks/useListPaging.js +1 -175
  38. package/dist/flex-layout/hooks/useSizes.cjs +1 -104
  39. package/dist/flex-layout/hooks/useSizes.js +1 -101
  40. package/dist/flex-layout/index.cjs +1 -42
  41. package/dist/flex-layout/index.js +1 -7
  42. package/dist/flex-layout/providers/FlexLayoutContext.cjs +1 -26
  43. package/dist/flex-layout/providers/FlexLayoutContext.js +1 -23
  44. package/dist/flex-layout/providers/FlexLayoutHooks.cjs +1 -247
  45. package/dist/flex-layout/providers/FlexLayoutHooks.d.ts +5 -1
  46. package/dist/flex-layout/providers/FlexLayoutHooks.js +1 -238
  47. package/dist/flex-layout/providers/index.cjs +1 -14
  48. package/dist/flex-layout/providers/index.js +1 -3
  49. package/dist/flex-layout/store/FlexLayoutContainerStore.cjs +1 -203
  50. package/dist/flex-layout/store/FlexLayoutContainerStore.d.ts +1 -0
  51. package/dist/flex-layout/store/FlexLayoutContainerStore.js +1 -181
  52. package/dist/flex-layout/store/index.cjs +1 -14
  53. package/dist/flex-layout/store/index.js +1 -3
  54. package/dist/flex-layout/styles/FlexLayout.module.css +473 -416
  55. package/dist/flex-layout/types/FlexDirectionTypes.cjs +1 -4
  56. package/dist/flex-layout/types/FlexDirectionTypes.js +0 -3
  57. package/dist/flex-layout/types/FlexLayoutTypes.cjs +1 -4
  58. package/dist/flex-layout/types/FlexLayoutTypes.d.ts +1 -3
  59. package/dist/flex-layout/types/FlexLayoutTypes.js +0 -3
  60. package/dist/flex-layout/utils/FlexLayoutUtils.cjs +1 -208
  61. package/dist/flex-layout/utils/FlexLayoutUtils.d.ts +4 -4
  62. package/dist/flex-layout/utils/FlexLayoutUtils.js +1 -196
  63. package/dist/flex-layout/utils/index.cjs +1 -14
  64. package/dist/flex-layout/utils/index.js +1 -3
  65. package/dist/index.cjs +1 -14
  66. package/dist/index.js +1 -3
  67. package/dist/types/css.d.cjs +1 -4
  68. package/dist/types/css.d.js +0 -3
  69. package/package.json +116 -109
  70. package/dist/flex-layout/components/FlexLayout.cjs.map +0 -1
  71. package/dist/flex-layout/components/FlexLayout.js.map +0 -1
  72. package/dist/flex-layout/components/FlexLayoutContainer.cjs.map +0 -1
  73. package/dist/flex-layout/components/FlexLayoutContainer.js.map +0 -1
  74. package/dist/flex-layout/components/FlexLayoutResizePanel.cjs.map +0 -1
  75. package/dist/flex-layout/components/FlexLayoutResizePanel.js.map +0 -1
  76. package/dist/flex-layout/components/FlexLayoutSplitScreen.cjs.map +0 -1
  77. package/dist/flex-layout/components/FlexLayoutSplitScreen.js.map +0 -1
  78. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.cjs.map +0 -1
  79. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.js.map +0 -1
  80. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.cjs.map +0 -1
  81. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.js.map +0 -1
  82. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.cjs.map +0 -1
  83. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.js.map +0 -1
  84. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.cjs.map +0 -1
  85. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.js.map +0 -1
  86. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.cjs.map +0 -1
  87. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.js.map +0 -1
  88. package/dist/flex-layout/components/FlexLayoutStickyBox.cjs.map +0 -1
  89. package/dist/flex-layout/components/FlexLayoutStickyBox.js.map +0 -1
  90. package/dist/flex-layout/components/index.cjs.map +0 -1
  91. package/dist/flex-layout/components/index.js.map +0 -1
  92. package/dist/flex-layout/hooks/index.cjs.map +0 -1
  93. package/dist/flex-layout/hooks/index.js.map +0 -1
  94. package/dist/flex-layout/hooks/useDrag.cjs.map +0 -1
  95. package/dist/flex-layout/hooks/useDrag.js.map +0 -1
  96. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.cjs.map +0 -1
  97. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.js.map +0 -1
  98. package/dist/flex-layout/hooks/useListPaging.cjs.map +0 -1
  99. package/dist/flex-layout/hooks/useListPaging.js.map +0 -1
  100. package/dist/flex-layout/hooks/useSizes.cjs.map +0 -1
  101. package/dist/flex-layout/hooks/useSizes.js.map +0 -1
  102. package/dist/flex-layout/index.cjs.map +0 -1
  103. package/dist/flex-layout/index.js.map +0 -1
  104. package/dist/flex-layout/providers/FlexLayoutContext.cjs.map +0 -1
  105. package/dist/flex-layout/providers/FlexLayoutContext.js.map +0 -1
  106. package/dist/flex-layout/providers/FlexLayoutHooks.cjs.map +0 -1
  107. package/dist/flex-layout/providers/FlexLayoutHooks.js.map +0 -1
  108. package/dist/flex-layout/providers/index.cjs.map +0 -1
  109. package/dist/flex-layout/providers/index.js.map +0 -1
  110. package/dist/flex-layout/store/FlexLayoutContainerStore.cjs.map +0 -1
  111. package/dist/flex-layout/store/FlexLayoutContainerStore.js.map +0 -1
  112. package/dist/flex-layout/store/index.cjs.map +0 -1
  113. package/dist/flex-layout/store/index.js.map +0 -1
  114. package/dist/flex-layout/types/FlexDirectionTypes.cjs.map +0 -1
  115. package/dist/flex-layout/types/FlexDirectionTypes.js.map +0 -1
  116. package/dist/flex-layout/types/FlexLayoutTypes.cjs.map +0 -1
  117. package/dist/flex-layout/types/FlexLayoutTypes.js.map +0 -1
  118. package/dist/flex-layout/utils/FlexLayoutUtils.cjs.map +0 -1
  119. package/dist/flex-layout/utils/FlexLayoutUtils.js.map +0 -1
  120. package/dist/flex-layout/utils/index.cjs.map +0 -1
  121. package/dist/flex-layout/utils/index.js.map +0 -1
  122. package/dist/index.cjs.map +0 -1
  123. package/dist/index.js.map +0 -1
  124. package/dist/types/css.d.cjs.map +0 -1
  125. package/dist/types/css.d.js.map +0 -1
package/package.json CHANGED
@@ -1,109 +1,116 @@
1
- {
2
- "name": "@byeolnaerim/flex-layout",
3
- "version": "0.0.8",
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
- "sideEffects": [
41
- "**/*.css"
42
- ],
43
- "main": "./dist/index.cjs",
44
- "module": "./dist/index.js",
45
- "types": "./dist/index.d.ts",
46
- "exports": {
47
- ".": {
48
- "types": "./dist/index.d.ts",
49
- "import": "./dist/index.js",
50
- "require": "./dist/index.cjs",
51
- "default": "./dist/index.js"
52
- },
53
- "./components": {
54
- "types": "./dist/components.d.ts",
55
- "import": "./dist/components.js",
56
- "require": "./dist/components.cjs",
57
- "default": "./dist/components.js"
58
- },
59
- "./hooks": {
60
- "types": "./dist/hooks.d.ts",
61
- "import": "./dist/hooks.js",
62
- "require": "./dist/hooks.cjs",
63
- "default": "./dist/hooks.js"
64
- },
65
- "./providers": {
66
- "types": "./dist/providers.d.ts",
67
- "import": "./dist/providers.js",
68
- "require": "./dist/providers.cjs",
69
- "default": "./dist/providers.js"
70
- },
71
- "./utils": {
72
- "types": "./dist/utils.d.ts",
73
- "import": "./dist/utils.js",
74
- "require": "./dist/utils.cjs",
75
- "default": "./dist/utils.js"
76
- },
77
- "./store": {
78
- "types": "./dist/store.d.ts",
79
- "import": "./dist/store.js",
80
- "require": "./dist/store.cjs",
81
- "default": "./dist/store.js"
82
- }
83
- },
84
- "scripts": {
85
- "build": "tsup && tsc -p tsconfig.build.json && npm run copy:assets",
86
- "copy:assets": "cpy \"src/**/*.css\" \"dist\"",
87
- "dev": "tsup --watch",
88
- "prepack": "npm run build",
89
- "prepare": "npm run build"
90
- },
91
- "devDependencies": {
92
- "@types/react": "^18",
93
- "@types/react-dom": "^18",
94
- "cpy-cli": "^5",
95
- "react": "^19.2.4",
96
- "react-dom": "^19.2.4",
97
- "rxjs": "^7.8.2",
98
- "tsup": "^8.5.1",
99
- "typescript": "5.9.3"
100
- },
101
- "peerDependencies": {
102
- "react": ">=18",
103
- "react-dom": ">=18"
104
- },
105
- "dependencies": {
106
- "fast-deep-equal": "^3.1.3",
107
- "rxjs": ">=7"
108
- }
109
- }
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
+ }
package/dist/flex-layout/components/FlexLayout.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayout.tsx"],"names":["Children","isValidElement","Fragment","jsx","FlexLayoutProvider","styles","jsxs","ContainerOpenCloseProvider"],"mappings":";;;;;;;;;;;;AAuCe,SAAR,UAAA,CAA4B;AAAA,EAClC,UAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA,GAAoB,SAAA;AAAA,EACpB,GAAG;AACJ,CAAA,EAAoB;AACnB,EAAA,MAAM,cAAA,GAAiBA,cAAA,CAAS,KAAA,CAAM,QAAQ,CAAA;AAC9C,EAAA,MAAM,UAAA,GAAa,SAAA,KAAc,KAAA,GAAQ,OAAA,GAAU,QAAA;AAMnD,EAAA,MAAM,oBAAoB,CAAC,IAAA,KAC1BC,qBAAe,IAAI,CAAA,IAAK,KAAK,IAAA,KAASC,cAAAA;AAKvC,EAAA,MAAM,KAAA,GAAQF,cAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,OAAA;AAAA,IAAQ,CAAC,IAAA,KACjD,iBAAA,CAAkB,IAAI,CAAA,GACnBA,cAAA,CAAS,OAAA,CAAQ,IAAA,CAAK,KAAA,CAAM,QAAQ,CAAA,GACpC,CAAC,IAAI;AAAA,GACT;AAGA,EAAA,MAAM,oBAAoB,KAAA,CAAM,MAAA;AAAA,IAC/BC;AAAA,GACD;AAEA,EAAA,IAAI,iBAAA,CAAkB,WAAW,CAAA,EAAG;AACnC,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,uBACCE,cAAA,CAAAD,mBAAA,EAAA,EACC,QAAA,kBAAAC,cAAA;AAAA,IAACC,oCAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,UAAA;AAAA,QACA,SAAA;AAAA,QACA,iBAAA;AAAA,QACA,cAAA;AAAA,QACA,cAAA;AAAA,QACA;AAAA,OACD;AAAA,MAEA,QAAA,kBAAAD,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACA,SAAA,EAAW,CAAA,EAAGE,uBAAA,CAAO,aAAa,CAAC,IAAI,SAAA,IAAa,SAAA,KAAc,EAAA,GAAK,SAAA,GAAY,EAAE,CAAA,CAAA;AAAA,UACpF,GAAI,GAAA,GAAM,EAAE,GAAA,KAAQ,EAAC;AAAA,UACrB,GAAG,KAAA;AAAA,UACJ,kBAAA,EAAkB,UAAA;AAAA,UAClB,gBAAA,EAAgB,SAAA;AAAA,UAEf,QAAA,EAAA,iBAAA,CAAkB,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,KAAU;AACxC,YAAA,IAAI,CAAC,KAAA,IAAS,CAACJ,oBAAA,CAAe,KAAK,GAAG,OAAO,IAAA;AAO7C,YAAA,uBACCK,eAAA,CAACJ,gBAAA,EACC,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,8BAaDC,cAAA;AAAA,gBAACI,0CAAA;AAAA,gBAAA;AAAA,kBACA,UAAA;AAAA,kBACA,aAAA,EAAe,MAAM,KAAA,CAAM,aAAA;AAAA,kBAC3B,QAAA,EAAU;AAAA;AAAA;AACV,aAAA,EAAA,EAlBa,KAmBf,CAAA;AAAA,UAEF,CAAC;AAAA;AAAA;AACF;AAAA,GACD,EACD,CAAA;AAEF","file":"FlexLayout.cjs","sourcesContent":["import {\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"]}
package/dist/flex-layout/components/FlexLayout.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayout.tsx"],"names":["Fragment"],"mappings":";;;;;;AAuCe,SAAR,UAAA,CAA4B;AAAA,EAClC,UAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA,GAAoB,SAAA;AAAA,EACpB,GAAG;AACJ,CAAA,EAAoB;AACnB,EAAA,MAAM,cAAA,GAAiB,QAAA,CAAS,KAAA,CAAM,QAAQ,CAAA;AAC9C,EAAA,MAAM,UAAA,GAAa,SAAA,KAAc,KAAA,GAAQ,OAAA,GAAU,QAAA;AAMnD,EAAA,MAAM,oBAAoB,CAAC,IAAA,KAC1B,eAAe,IAAI,CAAA,IAAK,KAAK,IAAA,KAASA,UAAAA;AAKvC,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,OAAA;AAAA,IAAQ,CAAC,IAAA,KACjD,iBAAA,CAAkB,IAAI,CAAA,GACnB,QAAA,CAAS,OAAA,CAAQ,IAAA,CAAK,KAAA,CAAM,QAAQ,CAAA,GACpC,CAAC,IAAI;AAAA,GACT;AAGA,EAAA,MAAM,oBAAoB,KAAA,CAAM,MAAA;AAAA,IAC/B;AAAA,GACD;AAEA,EAAA,IAAI,iBAAA,CAAkB,WAAW,CAAA,EAAG;AACnC,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,uBACC,GAAA,CAAA,QAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,UAAA;AAAA,QACA,SAAA;AAAA,QACA,iBAAA;AAAA,QACA,cAAA;AAAA,QACA,cAAA;AAAA,QACA;AAAA,OACD;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACA,SAAA,EAAW,CAAA,EAAG,MAAA,CAAO,aAAa,CAAC,IAAI,SAAA,IAAa,SAAA,KAAc,EAAA,GAAK,SAAA,GAAY,EAAE,CAAA,CAAA;AAAA,UACpF,GAAI,GAAA,GAAM,EAAE,GAAA,KAAQ,EAAC;AAAA,UACrB,GAAG,KAAA;AAAA,UACJ,kBAAA,EAAkB,UAAA;AAAA,UAClB,gBAAA,EAAgB,SAAA;AAAA,UAEf,QAAA,EAAA,iBAAA,CAAkB,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,KAAU;AACxC,YAAA,IAAI,CAAC,KAAA,IAAS,CAAC,cAAA,CAAe,KAAK,GAAG,OAAO,IAAA;AAO7C,YAAA,uBACC,IAAA,CAACA,YAAA,EACC,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,8BAaD,GAAA;AAAA,gBAAC,0BAAA;AAAA,gBAAA;AAAA,kBACA,UAAA;AAAA,kBACA,aAAA,EAAe,MAAM,KAAA,CAAM,aAAA;AAAA,kBAC3B,QAAA,EAAU;AAAA;AAAA;AACV,aAAA,EAAA,EAlBa,KAmBf,CAAA;AAAA,UAEF,CAAC;AAAA;AAAA;AACF;AAAA,GACD,EACD,CAAA;AAEF","file":"FlexLayout.js","sourcesContent":["import {\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"]}
package/dist/flex-layout/components/FlexLayoutContainer.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutContainer.tsx"],"names":["useFlexLayoutContext","useSize","useRef","useCallback","setContainerRef","useState","useEffect","getGrow","mathGrow","styles","mathWeight","jsxs","Fragment","jsx","FlexLayoutResizePanel"],"mappings":"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","file":"FlexLayoutContainer.cjs","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\t// 콜백 ref 정의\r\n\tconst flexContainerRef = useCallback(\r\n\t\t(node: HTMLDivElement | null) => {\r\n\t\t\tflexContainerNodeRef.current = node;\r\n\t\t\tif (node !== null) {\r\n\t\t\t\tsetContainerRef(layoutName, containerName, { current: node });\r\n\t\t\t} else {\r\n\t\t\t\t// 컴포넌트가 언마운트될 때 필요한 작업이 있다면 여기에 추가\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\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\t\tsetContainerRef(layoutName, containerName, flexContainerNodeRef);\r\n\t\treturn () => {\r\n\t\t\tsetContainerRef(layoutName, containerName, {\r\n\t\t\t\tcurrent: null,\r\n\t\t\t} as any);\r\n\t\t};\r\n\t}, [containerName, layoutName]);\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(flexContainerRef.current) == 0\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\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/>\r\n\t\t\t)}\r\n\t\t</>\r\n\t);\r\n}\r\n"]}
package/dist/flex-layout/components/FlexLayoutContainer.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutContainer.tsx"],"names":[],"mappings":"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","file":"FlexLayoutContainer.js","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\t// 콜백 ref 정의\r\n\tconst flexContainerRef = useCallback(\r\n\t\t(node: HTMLDivElement | null) => {\r\n\t\t\tflexContainerNodeRef.current = node;\r\n\t\t\tif (node !== null) {\r\n\t\t\t\tsetContainerRef(layoutName, containerName, { current: node });\r\n\t\t\t} else {\r\n\t\t\t\t// 컴포넌트가 언마운트될 때 필요한 작업이 있다면 여기에 추가\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\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\t\tsetContainerRef(layoutName, containerName, flexContainerNodeRef);\r\n\t\treturn () => {\r\n\t\t\tsetContainerRef(layoutName, containerName, {\r\n\t\t\t\tcurrent: null,\r\n\t\t\t} as any);\r\n\t\t};\r\n\t}, [containerName, layoutName]);\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(flexContainerRef.current) == 0\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\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/>\r\n\t\t\t)}\r\n\t\t</>\r\n\t);\r\n}\r\n"]}
package/dist/flex-layout/components/FlexLayoutResizePanel.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutResizePanel.tsx"],"names":["useRef","useEffect","findNotCloseFlexContent","isOverMove","setResizePanelRef","jsx","styles"],"mappings":"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","file":"FlexLayoutResizePanel.cjs","sourcesContent":["\"use client\";\r\n\r\nimport type { TouchEvent } from \"react\";\r\nimport { MouseEvent, useEffect, useRef } from \"react\";\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}: 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\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\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\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\tparentSizeRef.current = 0;\r\n\t\ttotalMovementRef.current = 0;\r\n\t\tprevTouchEventRef.current = null;\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[\"mouseup\", \"touchend\"].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[\"mouseup\", \"touchend\"].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}, [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"]}
package/dist/flex-layout/components/FlexLayoutResizePanel.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutResizePanel.tsx"],"names":[],"mappings":"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","file":"FlexLayoutResizePanel.js","sourcesContent":["\"use client\";\r\n\r\nimport type { TouchEvent } from \"react\";\r\nimport { MouseEvent, useEffect, useRef } from \"react\";\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}: 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\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\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\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\tparentSizeRef.current = 0;\r\n\t\ttotalMovementRef.current = 0;\r\n\t\tprevTouchEventRef.current = null;\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[\"mouseup\", \"touchend\"].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[\"mouseup\", \"touchend\"].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}, [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"]}