ninegrid2 6.1050.0 → 6.1051.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/bundle.cjs.js +17 -13
  2. package/dist/bundle.esm.js +17 -13
  3. package/dist/nx/nxSplitter.js +17 -13
  4. package/package.json +1 -1
  5. package/src/nx/nxSplitter.js +17 -13
package/dist/bundle.cjs.js CHANGED
@@ -121482,30 +121482,36 @@ class nxSplitter extends HTMLElement {
121482
121482
  window.removeEventListener("mouseup", onUp);
121483
121483
  dragBar.remove();
121484
121484
 
121485
- const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121485
+ const allChildren = Array.from(parent.children);
121486
+ const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121487
+ allChildren.filter(el => el.tagName.toLowerCase() === 'nx-splitter');
121486
121488
 
121487
121489
  const finalDragBarPosInParent = isHorizontal
121488
121490
  ? parseFloat(dragBar.style.left)
121489
121491
  : parseFloat(dragBar.style.top);
121490
121492
 
121491
- // 패널의 최종 크기 계산 (클릭 오프셋 고려)
121493
+ const prevRect = prev.getBoundingClientRect();
121494
+ const nextRect = next.getBoundingClientRect();
121495
+ const parentRect = parent.getBoundingClientRect();
121496
+
121497
+ // 패널의 최종 크기 계산
121492
121498
  const newPrevSize = finalDragBarPosInParent - (isHorizontal
121493
- ? prevRect.left - dragBarOffsetParentRect.left
121494
- : prevRect.top - dragBarOffsetParentRect.top
121499
+ ? prevRect.left - parentRect.left
121500
+ : prevRect.top - parentRect.top
121495
121501
  ) + clickOffset;
121496
121502
 
121497
- // ⭐⭐⭐ 세로 모드(v)에 대한 newNextSize 계산 로직 수정 ⭐⭐⭐
121498
- const newNextSize = (isHorizontal
121499
- ? nextRect.right - dragBarOffsetParentRect.left
121500
- : nextRect.bottom - dragBarOffsetParentRect.top
121501
- ) - finalDragBarPosInParent - (isHorizontal ? splitterRect.width : splitterRect.height);
121503
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - newPrevSize - (isHorizontal ? splitterRect.width : splitterRect.height);
121502
121504
 
121503
- const totalPanelSize = allPanels.reduce((sum, el) => {
121505
+ // ⭐⭐⭐ 모든 패널과 스플리터의 총 크기를 계산에 포함 ⭐⭐⭐
121506
+ const totalPanelsAndSplittersSize = allChildren.reduce((sum, el) => {
121504
121507
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
121505
121508
  return sum + size;
121506
121509
  }, 0);
121507
121510
 
121508
- const newTotalPanelSize = totalPanelSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
121511
+ // ⭐⭐ 모든 패널의 새로운 총 크기 계산 ⭐⭐
121512
+ const currentPrevSize = isHorizontal ? prevRect.width : prevRect.height;
121513
+ const currentNextSize = isHorizontal ? nextRect.width : nextRect.height;
121514
+ const newTotalPanelSize = totalPanelsAndSplittersSize - (currentPrevSize + currentNextSize + (isHorizontal ? splitterRect.width : splitterRect.height)) + newPrevSize + newNextSize;
121509
121515
 
121510
121516
  allPanels.forEach(panel => {
121511
121517
  let newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
@@ -121515,8 +121521,6 @@ class nxSplitter extends HTMLElement {
121515
121521
 
121516
121522
  const newFlexBasis = newSize / newTotalPanelSize;
121517
121523
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
121518
-
121519
- console.log(panel, panel.style.flex, newTotalPanelSize);
121520
121524
  });
121521
121525
  };
121522
121526
 
package/dist/bundle.esm.js CHANGED
@@ -121478,30 +121478,36 @@ class nxSplitter extends HTMLElement {
121478
121478
  window.removeEventListener("mouseup", onUp);
121479
121479
  dragBar.remove();
121480
121480
 
121481
- const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121481
+ const allChildren = Array.from(parent.children);
121482
+ const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121483
+ allChildren.filter(el => el.tagName.toLowerCase() === 'nx-splitter');
121482
121484
 
121483
121485
  const finalDragBarPosInParent = isHorizontal
121484
121486
  ? parseFloat(dragBar.style.left)
121485
121487
  : parseFloat(dragBar.style.top);
121486
121488
 
121487
- // 패널의 최종 크기 계산 (클릭 오프셋 고려)
121489
+ const prevRect = prev.getBoundingClientRect();
121490
+ const nextRect = next.getBoundingClientRect();
121491
+ const parentRect = parent.getBoundingClientRect();
121492
+
121493
+ // 패널의 최종 크기 계산
121488
121494
  const newPrevSize = finalDragBarPosInParent - (isHorizontal
121489
- ? prevRect.left - dragBarOffsetParentRect.left
121490
- : prevRect.top - dragBarOffsetParentRect.top
121495
+ ? prevRect.left - parentRect.left
121496
+ : prevRect.top - parentRect.top
121491
121497
  ) + clickOffset;
121492
121498
 
121493
- // ⭐⭐⭐ 세로 모드(v)에 대한 newNextSize 계산 로직 수정 ⭐⭐⭐
121494
- const newNextSize = (isHorizontal
121495
- ? nextRect.right - dragBarOffsetParentRect.left
121496
- : nextRect.bottom - dragBarOffsetParentRect.top
121497
- ) - finalDragBarPosInParent - (isHorizontal ? splitterRect.width : splitterRect.height);
121499
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - newPrevSize - (isHorizontal ? splitterRect.width : splitterRect.height);
121498
121500
 
121499
- const totalPanelSize = allPanels.reduce((sum, el) => {
121501
+ // ⭐⭐⭐ 모든 패널과 스플리터의 총 크기를 계산에 포함 ⭐⭐⭐
121502
+ const totalPanelsAndSplittersSize = allChildren.reduce((sum, el) => {
121500
121503
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
121501
121504
  return sum + size;
121502
121505
  }, 0);
121503
121506
 
121504
- const newTotalPanelSize = totalPanelSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
121507
+ // ⭐⭐ 모든 패널의 새로운 총 크기 계산 ⭐⭐
121508
+ const currentPrevSize = isHorizontal ? prevRect.width : prevRect.height;
121509
+ const currentNextSize = isHorizontal ? nextRect.width : nextRect.height;
121510
+ const newTotalPanelSize = totalPanelsAndSplittersSize - (currentPrevSize + currentNextSize + (isHorizontal ? splitterRect.width : splitterRect.height)) + newPrevSize + newNextSize;
121505
121511
 
121506
121512
  allPanels.forEach(panel => {
121507
121513
  let newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
@@ -121511,8 +121517,6 @@ class nxSplitter extends HTMLElement {
121511
121517
 
121512
121518
  const newFlexBasis = newSize / newTotalPanelSize;
121513
121519
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
121514
-
121515
- console.log(panel, panel.style.flex, newTotalPanelSize);
121516
121520
  });
121517
121521
  };
121518
121522
 
package/dist/nx/nxSplitter.js CHANGED
@@ -115,30 +115,36 @@ class nxSplitter extends HTMLElement {
115
115
  window.removeEventListener("mouseup", onUp);
116
116
  dragBar.remove();
117
117
 
118
- const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
118
+ const allChildren = Array.from(parent.children);
119
+ const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
120
+ const allSplitters = allChildren.filter(el => el.tagName.toLowerCase() === 'nx-splitter');
119
121
 
120
122
  const finalDragBarPosInParent = isHorizontal
121
123
  ? parseFloat(dragBar.style.left)
122
124
  : parseFloat(dragBar.style.top);
123
125
 
124
- // 패널의 최종 크기 계산 (클릭 오프셋 고려)
126
+ const prevRect = prev.getBoundingClientRect();
127
+ const nextRect = next.getBoundingClientRect();
128
+ const parentRect = parent.getBoundingClientRect();
129
+
130
+ // 패널의 최종 크기 계산
125
131
  const newPrevSize = finalDragBarPosInParent - (isHorizontal
126
- ? prevRect.left - dragBarOffsetParentRect.left
127
- : prevRect.top - dragBarOffsetParentRect.top
132
+ ? prevRect.left - parentRect.left
133
+ : prevRect.top - parentRect.top
128
134
  ) + clickOffset;
129
135
 
130
- // ⭐⭐⭐ 세로 모드(v)에 대한 newNextSize 계산 로직 수정 ⭐⭐⭐
131
- const newNextSize = (isHorizontal
132
- ? nextRect.right - dragBarOffsetParentRect.left
133
- : nextRect.bottom - dragBarOffsetParentRect.top
134
- ) - finalDragBarPosInParent - (isHorizontal ? splitterRect.width : splitterRect.height);
136
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - newPrevSize - (isHorizontal ? splitterRect.width : splitterRect.height);
135
137
 
136
- const totalPanelSize = allPanels.reduce((sum, el) => {
138
+ // ⭐⭐⭐ 모든 패널과 스플리터의 총 크기를 계산에 포함 ⭐⭐⭐
139
+ const totalPanelsAndSplittersSize = allChildren.reduce((sum, el) => {
137
140
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
138
141
  return sum + size;
139
142
  }, 0);
140
143
 
141
- const newTotalPanelSize = totalPanelSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
144
+ // ⭐⭐ 모든 패널의 새로운 총 크기 계산 ⭐⭐
145
+ const currentPrevSize = isHorizontal ? prevRect.width : prevRect.height;
146
+ const currentNextSize = isHorizontal ? nextRect.width : nextRect.height;
147
+ const newTotalPanelSize = totalPanelsAndSplittersSize - (currentPrevSize + currentNextSize + (isHorizontal ? splitterRect.width : splitterRect.height)) + newPrevSize + newNextSize;
142
148
 
143
149
  allPanels.forEach(panel => {
144
150
  let newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
@@ -148,8 +154,6 @@ class nxSplitter extends HTMLElement {
148
154
 
149
155
  const newFlexBasis = newSize / newTotalPanelSize;
150
156
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
151
-
152
- console.log(panel, panel.style.flex, newTotalPanelSize);
153
157
  });
154
158
  };
155
159
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.1050.0",
4
+ "version": "6.1051.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxSplitter.js CHANGED
@@ -115,30 +115,36 @@ class nxSplitter extends HTMLElement {
115
115
  window.removeEventListener("mouseup", onUp);
116
116
  dragBar.remove();
117
117
 
118
- const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
118
+ const allChildren = Array.from(parent.children);
119
+ const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
120
+ const allSplitters = allChildren.filter(el => el.tagName.toLowerCase() === 'nx-splitter');
119
121
 
120
122
  const finalDragBarPosInParent = isHorizontal
121
123
  ? parseFloat(dragBar.style.left)
122
124
  : parseFloat(dragBar.style.top);
123
125
 
124
- // 패널의 최종 크기 계산 (클릭 오프셋 고려)
126
+ const prevRect = prev.getBoundingClientRect();
127
+ const nextRect = next.getBoundingClientRect();
128
+ const parentRect = parent.getBoundingClientRect();
129
+
130
+ // 패널의 최종 크기 계산
125
131
  const newPrevSize = finalDragBarPosInParent - (isHorizontal
126
- ? prevRect.left - dragBarOffsetParentRect.left
127
- : prevRect.top - dragBarOffsetParentRect.top
132
+ ? prevRect.left - parentRect.left
133
+ : prevRect.top - parentRect.top
128
134
  ) + clickOffset;
129
135
 
130
- // ⭐⭐⭐ 세로 모드(v)에 대한 newNextSize 계산 로직 수정 ⭐⭐⭐
131
- const newNextSize = (isHorizontal
132
- ? nextRect.right - dragBarOffsetParentRect.left
133
- : nextRect.bottom - dragBarOffsetParentRect.top
134
- ) - finalDragBarPosInParent - (isHorizontal ? splitterRect.width : splitterRect.height);
136
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - newPrevSize - (isHorizontal ? splitterRect.width : splitterRect.height);
135
137
 
136
- const totalPanelSize = allPanels.reduce((sum, el) => {
138
+ // ⭐⭐⭐ 모든 패널과 스플리터의 총 크기를 계산에 포함 ⭐⭐⭐
139
+ const totalPanelsAndSplittersSize = allChildren.reduce((sum, el) => {
137
140
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
138
141
  return sum + size;
139
142
  }, 0);
140
143
 
141
- const newTotalPanelSize = totalPanelSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
144
+ // ⭐⭐ 모든 패널의 새로운 총 크기 계산 ⭐⭐
145
+ const currentPrevSize = isHorizontal ? prevRect.width : prevRect.height;
146
+ const currentNextSize = isHorizontal ? nextRect.width : nextRect.height;
147
+ const newTotalPanelSize = totalPanelsAndSplittersSize - (currentPrevSize + currentNextSize + (isHorizontal ? splitterRect.width : splitterRect.height)) + newPrevSize + newNextSize;
142
148
 
143
149
  allPanels.forEach(panel => {
144
150
  let newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
@@ -148,8 +154,6 @@ class nxSplitter extends HTMLElement {
148
154
 
149
155
  const newFlexBasis = newSize / newTotalPanelSize;
150
156
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
151
-
152
- console.log(panel, panel.style.flex, newTotalPanelSize);
153
157
  });
154
158
  };
155
159