ninegrid2 6.1037.0 → 6.1038.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 +39 -39
  2. package/dist/bundle.esm.js +39 -39
  3. package/dist/nx/nxSplitter.js +39 -39
  4. package/package.json +1 -1
  5. package/src/nx/nxSplitter.js +39 -39
package/dist/bundle.cjs.js CHANGED
@@ -121406,6 +121406,7 @@ class nxSplitter extends HTMLElement {
121406
121406
  const splitterRect = this.getBoundingClientRect();
121407
121407
  const isHorizontal = this.#mode === "h";
121408
121408
 
121409
+ // ⭐⭐ 마우스 포인터와 스플리터 왼쪽 끝 사이의 거리 계산 ⭐⭐
121409
121410
  const clickOffset = isHorizontal
121410
121411
  ? e.clientX - splitterRect.left
121411
121412
  : e.clientY - splitterRect.top;
@@ -121433,39 +121434,45 @@ class nxSplitter extends HTMLElement {
121433
121434
  }
121434
121435
 
121435
121436
  (parent.shadowRoot || parent).appendChild(dragBar);
121437
+ const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
121436
121438
 
121437
- const parentRect = parent.getBoundingClientRect();
121438
121439
  const prevRect = prev.getBoundingClientRect();
121439
121440
  const nextRect = next.getBoundingClientRect();
121440
121441
 
121441
- let dragBarPosInParent;
121442
+ let initialPosInOffsetParent;
121442
121443
  if (isHorizontal) {
121443
- //dragBarPosInParent = e.clientX - parentRect.left;
121444
- dragBarPosInParent = e.clientX - dragBar.offsetParent.getBoundingClientRect().left;
121444
+ initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
121445
121445
  dragBar.style.top = "0";
121446
- dragBar.style.left = `${dragBarPosInParent}px`;
121447
- dragBar.style.width = "1px";
121446
+ dragBar.style.left = `${initialPosInOffsetParent - clickOffset}px`;
121447
+ dragBar.style.width = `${splitterRect.width}px`;
121448
121448
  dragBar.style.height = "100%";
121449
121449
  } else {
121450
- //dragBarPosInParent = e.clientY - parentRect.top;
121451
- dragBarPosInParent = e.clientY - dragBar.offsetParent.getBoundingClientRect().top;
121450
+ initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
121452
121451
  dragBar.style.left = "0";
121453
- dragBar.style.top = `${dragBarPosInParent}px`;
121454
- dragBar.style.height = "1px";
121452
+ dragBar.style.top = `${initialPosInOffsetParent - clickOffset}px`;
121453
+ dragBar.style.height = `${splitterRect.height}px`;
121455
121454
  dragBar.style.width = "100%";
121456
121455
  }
121457
121456
 
121458
- const minLimit = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
121459
- const maxLimit = isHorizontal ? nextRect.right - parentRect.left : nextRect.bottom - parentRect.top;
121457
+ const minLimit = isHorizontal
121458
+ ? prevRect.left - dragBarOffsetParentRect.left
121459
+ : prevRect.top - dragBarOffsetParentRect.top;
121460
+ const maxLimit = isHorizontal
121461
+ ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
121462
+ : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
121460
121463
 
121461
121464
  const onMove = moveEvent => {
121462
121465
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
121463
- const currentPosInParent = isHorizontal ? clientPos - dragBar.offsetParent.getBoundingClientRect().left : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
121464
- const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
121466
+ const currentPosInOffsetParent = isHorizontal
121467
+ ? clientPos - dragBar.offsetParent.getBoundingClientRect().left
121468
+ : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
121469
+
121470
+ const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
121471
+
121465
121472
  if (isHorizontal) {
121466
- dragBar.style.left = `${clampedPos}px`;
121473
+ dragBar.style.left = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
121467
121474
  } else {
121468
- dragBar.style.top = `${clampedPos}px`;
121475
+ dragBar.style.top = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
121469
121476
  }
121470
121477
  };
121471
121478
 
@@ -121474,45 +121481,38 @@ class nxSplitter extends HTMLElement {
121474
121481
  window.removeEventListener("mouseup", onUp);
121475
121482
  dragBar.remove();
121476
121483
 
121477
- const parent = this.parentElement;
121478
- const isHorizontal = this.#mode === "h";
121479
-
121480
- // 모든 패널과 스플리터의 현재 크기를 가져옵니다.
121481
- const allChildren = Array.from(parent.children);
121482
- const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121484
+ const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121483
121485
 
121484
- const finalDragBarPosInParent = isHorizontal
121486
+ const finalDragBarPosInOffsetParent = isHorizontal
121485
121487
  ? parseFloat(dragBar.style.left)
121486
121488
  : parseFloat(dragBar.style.top);
121487
121489
 
121488
- const parentRect = parent.getBoundingClientRect();
121489
- const prevRect = prev.getBoundingClientRect();
121490
- const nextRect = next.getBoundingClientRect();
121491
- const splitterRect = this.getBoundingClientRect();
121490
+ // ⭐⭐ 최종 크기 계산 시 clickOffset 고려 ⭐⭐
121491
+ const newPrevSize = finalDragBarPosInOffsetParent - (isHorizontal
121492
+ ? prevRect.left - dragBarOffsetParentRect.left
121493
+ : prevRect.top - dragBarOffsetParentRect.top
121494
+ ) + clickOffset;
121492
121495
 
121493
- const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
121494
- const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
121495
-
121496
- // 새로 계산된 prev, next 패널의 픽셀 크기
121497
- const newPrevSize = finalDragBarPosInParent - prevStartPosInParent - clickOffset;
121498
- const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
121499
-
121500
- const totalContentSize = allPanels.reduce((sum, el) => {
121496
+ const totalPanelSize = allPanels.reduce((sum, el) => {
121501
121497
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
121502
121498
  return sum + size;
121503
121499
  }, 0);
121504
121500
 
121505
- const newTotalContentSize = totalContentSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
121501
+ const currentPrevSize = isHorizontal ? prevRect.width : prevRect.height;
121502
+ const currentNextSize = isHorizontal ? nextRect.width : nextRect.height;
121503
+
121504
+ const newTotalPanelSize = totalPanelSize - currentPrevSize - currentNextSize + newPrevSize + (totalPanelSize - currentPrevSize - currentNextSize);
121505
+
121506
+ const newNextSize = newTotalPanelSize - newPrevSize - (totalPanelSize - currentPrevSize - currentNextSize);
121506
121507
 
121507
121508
  allPanels.forEach(panel => {
121508
121509
  const panelRect = panel.getBoundingClientRect();
121509
- const currentSize = isHorizontal ? panelRect.width : panelRect.height;
121510
+ let newSize = isHorizontal ? panelRect.width : panelRect.height;
121510
121511
 
121511
- let newSize = currentSize;
121512
121512
  if (panel === prev) newSize = newPrevSize;
121513
121513
  if (panel === next) newSize = newNextSize;
121514
121514
 
121515
- const newFlexBasis = newSize / newTotalContentSize;
121515
+ const newFlexBasis = newSize / newTotalPanelSize;
121516
121516
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
121517
121517
  });
121518
121518
  };
package/dist/bundle.esm.js CHANGED
@@ -121402,6 +121402,7 @@ class nxSplitter extends HTMLElement {
121402
121402
  const splitterRect = this.getBoundingClientRect();
121403
121403
  const isHorizontal = this.#mode === "h";
121404
121404
 
121405
+ // ⭐⭐ 마우스 포인터와 스플리터 왼쪽 끝 사이의 거리 계산 ⭐⭐
121405
121406
  const clickOffset = isHorizontal
121406
121407
  ? e.clientX - splitterRect.left
121407
121408
  : e.clientY - splitterRect.top;
@@ -121429,39 +121430,45 @@ class nxSplitter extends HTMLElement {
121429
121430
  }
121430
121431
 
121431
121432
  (parent.shadowRoot || parent).appendChild(dragBar);
121433
+ const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
121432
121434
 
121433
- const parentRect = parent.getBoundingClientRect();
121434
121435
  const prevRect = prev.getBoundingClientRect();
121435
121436
  const nextRect = next.getBoundingClientRect();
121436
121437
 
121437
- let dragBarPosInParent;
121438
+ let initialPosInOffsetParent;
121438
121439
  if (isHorizontal) {
121439
- //dragBarPosInParent = e.clientX - parentRect.left;
121440
- dragBarPosInParent = e.clientX - dragBar.offsetParent.getBoundingClientRect().left;
121440
+ initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
121441
121441
  dragBar.style.top = "0";
121442
- dragBar.style.left = `${dragBarPosInParent}px`;
121443
- dragBar.style.width = "1px";
121442
+ dragBar.style.left = `${initialPosInOffsetParent - clickOffset}px`;
121443
+ dragBar.style.width = `${splitterRect.width}px`;
121444
121444
  dragBar.style.height = "100%";
121445
121445
  } else {
121446
- //dragBarPosInParent = e.clientY - parentRect.top;
121447
- dragBarPosInParent = e.clientY - dragBar.offsetParent.getBoundingClientRect().top;
121446
+ initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
121448
121447
  dragBar.style.left = "0";
121449
- dragBar.style.top = `${dragBarPosInParent}px`;
121450
- dragBar.style.height = "1px";
121448
+ dragBar.style.top = `${initialPosInOffsetParent - clickOffset}px`;
121449
+ dragBar.style.height = `${splitterRect.height}px`;
121451
121450
  dragBar.style.width = "100%";
121452
121451
  }
121453
121452
 
121454
- const minLimit = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
121455
- const maxLimit = isHorizontal ? nextRect.right - parentRect.left : nextRect.bottom - parentRect.top;
121453
+ const minLimit = isHorizontal
121454
+ ? prevRect.left - dragBarOffsetParentRect.left
121455
+ : prevRect.top - dragBarOffsetParentRect.top;
121456
+ const maxLimit = isHorizontal
121457
+ ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
121458
+ : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
121456
121459
 
121457
121460
  const onMove = moveEvent => {
121458
121461
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
121459
- const currentPosInParent = isHorizontal ? clientPos - dragBar.offsetParent.getBoundingClientRect().left : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
121460
- const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
121462
+ const currentPosInOffsetParent = isHorizontal
121463
+ ? clientPos - dragBar.offsetParent.getBoundingClientRect().left
121464
+ : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
121465
+
121466
+ const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
121467
+
121461
121468
  if (isHorizontal) {
121462
- dragBar.style.left = `${clampedPos}px`;
121469
+ dragBar.style.left = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
121463
121470
  } else {
121464
- dragBar.style.top = `${clampedPos}px`;
121471
+ dragBar.style.top = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
121465
121472
  }
121466
121473
  };
121467
121474
 
@@ -121470,45 +121477,38 @@ class nxSplitter extends HTMLElement {
121470
121477
  window.removeEventListener("mouseup", onUp);
121471
121478
  dragBar.remove();
121472
121479
 
121473
- const parent = this.parentElement;
121474
- const isHorizontal = this.#mode === "h";
121475
-
121476
- // 모든 패널과 스플리터의 현재 크기를 가져옵니다.
121477
- const allChildren = Array.from(parent.children);
121478
- const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121480
+ const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121479
121481
 
121480
- const finalDragBarPosInParent = isHorizontal
121482
+ const finalDragBarPosInOffsetParent = isHorizontal
121481
121483
  ? parseFloat(dragBar.style.left)
121482
121484
  : parseFloat(dragBar.style.top);
121483
121485
 
121484
- const parentRect = parent.getBoundingClientRect();
121485
- const prevRect = prev.getBoundingClientRect();
121486
- const nextRect = next.getBoundingClientRect();
121487
- const splitterRect = this.getBoundingClientRect();
121486
+ // ⭐⭐ 최종 크기 계산 시 clickOffset 고려 ⭐⭐
121487
+ const newPrevSize = finalDragBarPosInOffsetParent - (isHorizontal
121488
+ ? prevRect.left - dragBarOffsetParentRect.left
121489
+ : prevRect.top - dragBarOffsetParentRect.top
121490
+ ) + clickOffset;
121488
121491
 
121489
- const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
121490
- const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
121491
-
121492
- // 새로 계산된 prev, next 패널의 픽셀 크기
121493
- const newPrevSize = finalDragBarPosInParent - prevStartPosInParent - clickOffset;
121494
- const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
121495
-
121496
- const totalContentSize = allPanels.reduce((sum, el) => {
121492
+ const totalPanelSize = allPanels.reduce((sum, el) => {
121497
121493
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
121498
121494
  return sum + size;
121499
121495
  }, 0);
121500
121496
 
121501
- const newTotalContentSize = totalContentSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
121497
+ const currentPrevSize = isHorizontal ? prevRect.width : prevRect.height;
121498
+ const currentNextSize = isHorizontal ? nextRect.width : nextRect.height;
121499
+
121500
+ const newTotalPanelSize = totalPanelSize - currentPrevSize - currentNextSize + newPrevSize + (totalPanelSize - currentPrevSize - currentNextSize);
121501
+
121502
+ const newNextSize = newTotalPanelSize - newPrevSize - (totalPanelSize - currentPrevSize - currentNextSize);
121502
121503
 
121503
121504
  allPanels.forEach(panel => {
121504
121505
  const panelRect = panel.getBoundingClientRect();
121505
- const currentSize = isHorizontal ? panelRect.width : panelRect.height;
121506
+ let newSize = isHorizontal ? panelRect.width : panelRect.height;
121506
121507
 
121507
- let newSize = currentSize;
121508
121508
  if (panel === prev) newSize = newPrevSize;
121509
121509
  if (panel === next) newSize = newNextSize;
121510
121510
 
121511
- const newFlexBasis = newSize / newTotalContentSize;
121511
+ const newFlexBasis = newSize / newTotalPanelSize;
121512
121512
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
121513
121513
  });
121514
121514
  };
package/dist/nx/nxSplitter.js CHANGED
@@ -39,6 +39,7 @@ class nxSplitter extends HTMLElement {
39
39
  const splitterRect = this.getBoundingClientRect();
40
40
  const isHorizontal = this.#mode === "h";
41
41
 
42
+ // ⭐⭐ 마우스 포인터와 스플리터 왼쪽 끝 사이의 거리 계산 ⭐⭐
42
43
  const clickOffset = isHorizontal
43
44
  ? e.clientX - splitterRect.left
44
45
  : e.clientY - splitterRect.top;
@@ -66,39 +67,45 @@ class nxSplitter extends HTMLElement {
66
67
  }
67
68
 
68
69
  (parent.shadowRoot || parent).appendChild(dragBar);
70
+ const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
69
71
 
70
- const parentRect = parent.getBoundingClientRect();
71
72
  const prevRect = prev.getBoundingClientRect();
72
73
  const nextRect = next.getBoundingClientRect();
73
74
 
74
- let dragBarPosInParent;
75
+ let initialPosInOffsetParent;
75
76
  if (isHorizontal) {
76
- //dragBarPosInParent = e.clientX - parentRect.left;
77
- dragBarPosInParent = e.clientX - dragBar.offsetParent.getBoundingClientRect().left;
77
+ initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
78
78
  dragBar.style.top = "0";
79
- dragBar.style.left = `${dragBarPosInParent}px`;
80
- dragBar.style.width = "1px";
79
+ dragBar.style.left = `${initialPosInOffsetParent - clickOffset}px`;
80
+ dragBar.style.width = `${splitterRect.width}px`;
81
81
  dragBar.style.height = "100%";
82
82
  } else {
83
- //dragBarPosInParent = e.clientY - parentRect.top;
84
- dragBarPosInParent = e.clientY - dragBar.offsetParent.getBoundingClientRect().top;
83
+ initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
85
84
  dragBar.style.left = "0";
86
- dragBar.style.top = `${dragBarPosInParent}px`;
87
- dragBar.style.height = "1px";
85
+ dragBar.style.top = `${initialPosInOffsetParent - clickOffset}px`;
86
+ dragBar.style.height = `${splitterRect.height}px`;
88
87
  dragBar.style.width = "100%";
89
88
  }
90
89
 
91
- const minLimit = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
92
- const maxLimit = isHorizontal ? nextRect.right - parentRect.left : nextRect.bottom - parentRect.top;
90
+ const minLimit = isHorizontal
91
+ ? prevRect.left - dragBarOffsetParentRect.left
92
+ : prevRect.top - dragBarOffsetParentRect.top;
93
+ const maxLimit = isHorizontal
94
+ ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
95
+ : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
93
96
 
94
97
  const onMove = moveEvent => {
95
98
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
96
- const currentPosInParent = isHorizontal ? clientPos - dragBar.offsetParent.getBoundingClientRect().left : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
97
- const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
99
+ const currentPosInOffsetParent = isHorizontal
100
+ ? clientPos - dragBar.offsetParent.getBoundingClientRect().left
101
+ : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
102
+
103
+ const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
104
+
98
105
  if (isHorizontal) {
99
- dragBar.style.left = `${clampedPos}px`;
106
+ dragBar.style.left = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
100
107
  } else {
101
- dragBar.style.top = `${clampedPos}px`;
108
+ dragBar.style.top = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
102
109
  }
103
110
  };
104
111
 
@@ -107,45 +114,38 @@ class nxSplitter extends HTMLElement {
107
114
  window.removeEventListener("mouseup", onUp);
108
115
  dragBar.remove();
109
116
 
110
- const parent = this.parentElement;
111
- const isHorizontal = this.#mode === "h";
112
-
113
- // 모든 패널과 스플리터의 현재 크기를 가져옵니다.
114
- const allChildren = Array.from(parent.children);
115
- const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
117
+ const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
116
118
 
117
- const finalDragBarPosInParent = isHorizontal
119
+ const finalDragBarPosInOffsetParent = isHorizontal
118
120
  ? parseFloat(dragBar.style.left)
119
121
  : parseFloat(dragBar.style.top);
120
122
 
121
- const parentRect = parent.getBoundingClientRect();
122
- const prevRect = prev.getBoundingClientRect();
123
- const nextRect = next.getBoundingClientRect();
124
- const splitterRect = this.getBoundingClientRect();
123
+ // ⭐⭐ 최종 크기 계산 시 clickOffset 고려 ⭐⭐
124
+ const newPrevSize = finalDragBarPosInOffsetParent - (isHorizontal
125
+ ? prevRect.left - dragBarOffsetParentRect.left
126
+ : prevRect.top - dragBarOffsetParentRect.top
127
+ ) + clickOffset;
125
128
 
126
- const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
127
- const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
128
-
129
- // 새로 계산된 prev, next 패널의 픽셀 크기
130
- const newPrevSize = finalDragBarPosInParent - prevStartPosInParent - clickOffset;
131
- const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
132
-
133
- const totalContentSize = allPanels.reduce((sum, el) => {
129
+ const totalPanelSize = allPanels.reduce((sum, el) => {
134
130
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
135
131
  return sum + size;
136
132
  }, 0);
137
133
 
138
- const newTotalContentSize = totalContentSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
134
+ const currentPrevSize = isHorizontal ? prevRect.width : prevRect.height;
135
+ const currentNextSize = isHorizontal ? nextRect.width : nextRect.height;
136
+
137
+ const newTotalPanelSize = totalPanelSize - currentPrevSize - currentNextSize + newPrevSize + (totalPanelSize - currentPrevSize - currentNextSize);
138
+
139
+ const newNextSize = newTotalPanelSize - newPrevSize - (totalPanelSize - currentPrevSize - currentNextSize);
139
140
 
140
141
  allPanels.forEach(panel => {
141
142
  const panelRect = panel.getBoundingClientRect();
142
- const currentSize = isHorizontal ? panelRect.width : panelRect.height;
143
+ let newSize = isHorizontal ? panelRect.width : panelRect.height;
143
144
 
144
- let newSize = currentSize;
145
145
  if (panel === prev) newSize = newPrevSize;
146
146
  if (panel === next) newSize = newNextSize;
147
147
 
148
- const newFlexBasis = newSize / newTotalContentSize;
148
+ const newFlexBasis = newSize / newTotalPanelSize;
149
149
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
150
150
  });
151
151
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.1037.0",
4
+ "version": "6.1038.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxSplitter.js CHANGED
@@ -39,6 +39,7 @@ class nxSplitter extends HTMLElement {
39
39
  const splitterRect = this.getBoundingClientRect();
40
40
  const isHorizontal = this.#mode === "h";
41
41
 
42
+ // ⭐⭐ 마우스 포인터와 스플리터 왼쪽 끝 사이의 거리 계산 ⭐⭐
42
43
  const clickOffset = isHorizontal
43
44
  ? e.clientX - splitterRect.left
44
45
  : e.clientY - splitterRect.top;
@@ -66,39 +67,45 @@ class nxSplitter extends HTMLElement {
66
67
  }
67
68
 
68
69
  (parent.shadowRoot || parent).appendChild(dragBar);
70
+ const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
69
71
 
70
- const parentRect = parent.getBoundingClientRect();
71
72
  const prevRect = prev.getBoundingClientRect();
72
73
  const nextRect = next.getBoundingClientRect();
73
74
 
74
- let dragBarPosInParent;
75
+ let initialPosInOffsetParent;
75
76
  if (isHorizontal) {
76
- //dragBarPosInParent = e.clientX - parentRect.left;
77
- dragBarPosInParent = e.clientX - dragBar.offsetParent.getBoundingClientRect().left;
77
+ initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
78
78
  dragBar.style.top = "0";
79
- dragBar.style.left = `${dragBarPosInParent}px`;
80
- dragBar.style.width = "1px";
79
+ dragBar.style.left = `${initialPosInOffsetParent - clickOffset}px`;
80
+ dragBar.style.width = `${splitterRect.width}px`;
81
81
  dragBar.style.height = "100%";
82
82
  } else {
83
- //dragBarPosInParent = e.clientY - parentRect.top;
84
- dragBarPosInParent = e.clientY - dragBar.offsetParent.getBoundingClientRect().top;
83
+ initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
85
84
  dragBar.style.left = "0";
86
- dragBar.style.top = `${dragBarPosInParent}px`;
87
- dragBar.style.height = "1px";
85
+ dragBar.style.top = `${initialPosInOffsetParent - clickOffset}px`;
86
+ dragBar.style.height = `${splitterRect.height}px`;
88
87
  dragBar.style.width = "100%";
89
88
  }
90
89
 
91
- const minLimit = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
92
- const maxLimit = isHorizontal ? nextRect.right - parentRect.left : nextRect.bottom - parentRect.top;
90
+ const minLimit = isHorizontal
91
+ ? prevRect.left - dragBarOffsetParentRect.left
92
+ : prevRect.top - dragBarOffsetParentRect.top;
93
+ const maxLimit = isHorizontal
94
+ ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
95
+ : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
93
96
 
94
97
  const onMove = moveEvent => {
95
98
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
96
- const currentPosInParent = isHorizontal ? clientPos - dragBar.offsetParent.getBoundingClientRect().left : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
97
- const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
99
+ const currentPosInOffsetParent = isHorizontal
100
+ ? clientPos - dragBar.offsetParent.getBoundingClientRect().left
101
+ : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
102
+
103
+ const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
104
+
98
105
  if (isHorizontal) {
99
- dragBar.style.left = `${clampedPos}px`;
106
+ dragBar.style.left = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
100
107
  } else {
101
- dragBar.style.top = `${clampedPos}px`;
108
+ dragBar.style.top = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
102
109
  }
103
110
  };
104
111
 
@@ -107,45 +114,38 @@ class nxSplitter extends HTMLElement {
107
114
  window.removeEventListener("mouseup", onUp);
108
115
  dragBar.remove();
109
116
 
110
- const parent = this.parentElement;
111
- const isHorizontal = this.#mode === "h";
112
-
113
- // 모든 패널과 스플리터의 현재 크기를 가져옵니다.
114
- const allChildren = Array.from(parent.children);
115
- const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
117
+ const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
116
118
 
117
- const finalDragBarPosInParent = isHorizontal
119
+ const finalDragBarPosInOffsetParent = isHorizontal
118
120
  ? parseFloat(dragBar.style.left)
119
121
  : parseFloat(dragBar.style.top);
120
122
 
121
- const parentRect = parent.getBoundingClientRect();
122
- const prevRect = prev.getBoundingClientRect();
123
- const nextRect = next.getBoundingClientRect();
124
- const splitterRect = this.getBoundingClientRect();
123
+ // ⭐⭐ 최종 크기 계산 시 clickOffset 고려 ⭐⭐
124
+ const newPrevSize = finalDragBarPosInOffsetParent - (isHorizontal
125
+ ? prevRect.left - dragBarOffsetParentRect.left
126
+ : prevRect.top - dragBarOffsetParentRect.top
127
+ ) + clickOffset;
125
128
 
126
- const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
127
- const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
128
-
129
- // 새로 계산된 prev, next 패널의 픽셀 크기
130
- const newPrevSize = finalDragBarPosInParent - prevStartPosInParent - clickOffset;
131
- const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
132
-
133
- const totalContentSize = allPanels.reduce((sum, el) => {
129
+ const totalPanelSize = allPanels.reduce((sum, el) => {
134
130
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
135
131
  return sum + size;
136
132
  }, 0);
137
133
 
138
- const newTotalContentSize = totalContentSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
134
+ const currentPrevSize = isHorizontal ? prevRect.width : prevRect.height;
135
+ const currentNextSize = isHorizontal ? nextRect.width : nextRect.height;
136
+
137
+ const newTotalPanelSize = totalPanelSize - currentPrevSize - currentNextSize + newPrevSize + (totalPanelSize - currentPrevSize - currentNextSize);
138
+
139
+ const newNextSize = newTotalPanelSize - newPrevSize - (totalPanelSize - currentPrevSize - currentNextSize);
139
140
 
140
141
  allPanels.forEach(panel => {
141
142
  const panelRect = panel.getBoundingClientRect();
142
- const currentSize = isHorizontal ? panelRect.width : panelRect.height;
143
+ let newSize = isHorizontal ? panelRect.width : panelRect.height;
143
144
 
144
- let newSize = currentSize;
145
145
  if (panel === prev) newSize = newPrevSize;
146
146
  if (panel === next) newSize = newNextSize;
147
147
 
148
- const newFlexBasis = newSize / newTotalContentSize;
148
+ const newFlexBasis = newSize / newTotalPanelSize;
149
149
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
150
150
  });
151
151
  };