ninegrid2 6.1038.0 → 6.1040.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 +30 -46
  2. package/dist/bundle.esm.js +30 -46
  3. package/dist/nx/nxSplitter.js +30 -46
  4. package/package.json +1 -1
  5. package/src/nx/nxSplitter.js +30 -46
package/dist/bundle.cjs.js CHANGED
@@ -121406,7 +121406,7 @@ class nxSplitter extends HTMLElement {
121406
121406
  const splitterRect = this.getBoundingClientRect();
121407
121407
  const isHorizontal = this.#mode === "h";
121408
121408
 
121409
- // ⭐⭐ 마우스 포인터와 스플리터 왼쪽 끝 사이의 거리 계산 ⭐⭐
121409
+ // 마우스 포인터와 스플리터 시작점 사이의 거리
121410
121410
  const clickOffset = isHorizontal
121411
121411
  ? e.clientX - splitterRect.left
121412
121412
  : e.clientY - splitterRect.top;
@@ -121424,7 +121424,6 @@ class nxSplitter extends HTMLElement {
121424
121424
 
121425
121425
  const root = this.getRootNode({ composed: true });
121426
121426
  const parent = root instanceof ShadowRoot ? root.host : this.parentElement;
121427
-
121428
121427
  const prev = this.previousElementSibling;
121429
121428
  const next = this.nextElementSibling;
121430
121429
 
@@ -121434,45 +121433,42 @@ class nxSplitter extends HTMLElement {
121434
121433
  }
121435
121434
 
121436
121435
  (parent.shadowRoot || parent).appendChild(dragBar);
121437
- const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
121438
-
121436
+ const parentRect = parent.getBoundingClientRect();
121439
121437
  const prevRect = prev.getBoundingClientRect();
121440
121438
  const nextRect = next.getBoundingClientRect();
121441
121439
 
121442
- let initialPosInOffsetParent;
121440
+ // 드래그 바의 초기 위치와 크기 설정
121443
121441
  if (isHorizontal) {
121444
- initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
121445
- dragBar.style.top = "0";
121446
- dragBar.style.left = `${initialPosInOffsetParent - clickOffset}px`;
121442
+ dragBar.style.top = `${parentRect.top - parentRect.top}px`;
121443
+ dragBar.style.left = `${e.clientX - parentRect.left - clickOffset}px`;
121447
121444
  dragBar.style.width = `${splitterRect.width}px`;
121448
- dragBar.style.height = "100%";
121445
+ dragBar.style.height = `${parentRect.height}px`;
121449
121446
  } else {
121450
- initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
121451
- dragBar.style.left = "0";
121452
- dragBar.style.top = `${initialPosInOffsetParent - clickOffset}px`;
121447
+ dragBar.style.left = `${parentRect.left - parentRect.left}px`;
121448
+ dragBar.style.top = `${e.clientY - parentRect.top - clickOffset}px`;
121453
121449
  dragBar.style.height = `${splitterRect.height}px`;
121454
- dragBar.style.width = "100%";
121450
+ dragBar.style.width = `${parentRect.width}px`;
121455
121451
  }
121456
121452
 
121457
121453
  const minLimit = isHorizontal
121458
- ? prevRect.left - dragBarOffsetParentRect.left
121459
- : prevRect.top - dragBarOffsetParentRect.top;
121454
+ ? prevRect.left - parentRect.left + clickOffset
121455
+ : prevRect.top - parentRect.top + clickOffset;
121460
121456
  const maxLimit = isHorizontal
121461
- ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
121462
- : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
121457
+ ? nextRect.right - parentRect.left - splitterRect.width + clickOffset
121458
+ : nextRect.bottom - parentRect.top - splitterRect.height + clickOffset;
121463
121459
 
121464
121460
  const onMove = moveEvent => {
121465
121461
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
121466
- const currentPosInOffsetParent = isHorizontal
121467
- ? clientPos - dragBar.offsetParent.getBoundingClientRect().left
121468
- : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
121462
+ const currentPosInParent = isHorizontal
121463
+ ? clientPos - parentRect.left
121464
+ : clientPos - parentRect.top;
121469
121465
 
121470
- const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
121466
+ const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
121471
121467
 
121472
121468
  if (isHorizontal) {
121473
- dragBar.style.left = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
121469
+ dragBar.style.left = `${clampedPos - clickOffset}px`;
121474
121470
  } else {
121475
- dragBar.style.top = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
121471
+ dragBar.style.top = `${clampedPos - clickOffset}px`;
121476
121472
  }
121477
121473
  };
121478
121474
 
@@ -121483,36 +121479,28 @@ class nxSplitter extends HTMLElement {
121483
121479
 
121484
121480
  const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121485
121481
 
121486
- const finalDragBarPosInOffsetParent = isHorizontal
121482
+ const finalDragBarPosInParent = isHorizontal
121487
121483
  ? parseFloat(dragBar.style.left)
121488
121484
  : parseFloat(dragBar.style.top);
121489
121485
 
121490
- // ⭐⭐ 최종 크기 계산 시 clickOffset 고려 ⭐⭐
121491
- const newPrevSize = finalDragBarPosInOffsetParent - (isHorizontal
121492
- ? prevRect.left - dragBarOffsetParentRect.left
121493
- : prevRect.top - dragBarOffsetParentRect.top
121486
+ // 패널의 최종 크기 계산
121487
+ const newPrevSize = finalDragBarPosInParent - (isHorizontal
121488
+ ? prevRect.left - parentRect.left
121489
+ : prevRect.top - parentRect.top
121494
121490
  ) + clickOffset;
121495
121491
 
121496
- const totalPanelSize = allPanels.reduce((sum, el) => {
121497
- const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
121498
- return sum + size;
121499
- }, 0);
121500
-
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);
121492
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - (newPrevSize + splitterRect.width);
121505
121493
 
121506
- const newNextSize = newTotalPanelSize - newPrevSize - (totalPanelSize - currentPrevSize - currentNextSize);
121494
+ // 모든 패널의 총 크기를 계산
121495
+ const totalContentSize = isHorizontal ? parentRect.width : parentRect.height;
121507
121496
 
121508
121497
  allPanels.forEach(panel => {
121509
- const panelRect = panel.getBoundingClientRect();
121510
- let newSize = isHorizontal ? panelRect.width : panelRect.height;
121498
+ let newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
121511
121499
 
121512
121500
  if (panel === prev) newSize = newPrevSize;
121513
- if (panel === next) newSize = newNextSize;
121501
+ else if (panel === next) newSize = newNextSize;
121514
121502
 
121515
- const newFlexBasis = newSize / newTotalPanelSize;
121503
+ const newFlexBasis = newSize / totalContentSize;
121516
121504
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
121517
121505
  });
121518
121506
  };
@@ -121523,7 +121511,6 @@ class nxSplitter extends HTMLElement {
121523
121511
 
121524
121512
  #init = () => {
121525
121513
  this.#detectMode(this);
121526
-
121527
121514
  this.classList.add(this.#mode);
121528
121515
 
121529
121516
  const contents = this.innerHTML.trim();
@@ -121555,16 +121542,13 @@ class nxSplitter extends HTMLElement {
121555
121542
  const isHorizontal = this.#mode === "h";
121556
121543
  const parent = this.parentElement;
121557
121544
  const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121558
-
121559
121545
  if (allPanels.length < 2) return;
121560
121546
 
121561
121547
  const parentRect = parent.getBoundingClientRect();
121562
-
121563
121548
  const totalContentSize = allPanels.reduce((sum, el) => {
121564
121549
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
121565
121550
  return sum + size;
121566
121551
  }, 0);
121567
-
121568
121552
  const totalParentSize = isHorizontal ? parentRect.width : parentRect.height;
121569
121553
 
121570
121554
  allPanels.forEach(panel => {
package/dist/bundle.esm.js CHANGED
@@ -121402,7 +121402,7 @@ class nxSplitter extends HTMLElement {
121402
121402
  const splitterRect = this.getBoundingClientRect();
121403
121403
  const isHorizontal = this.#mode === "h";
121404
121404
 
121405
- // ⭐⭐ 마우스 포인터와 스플리터 왼쪽 끝 사이의 거리 계산 ⭐⭐
121405
+ // 마우스 포인터와 스플리터 시작점 사이의 거리
121406
121406
  const clickOffset = isHorizontal
121407
121407
  ? e.clientX - splitterRect.left
121408
121408
  : e.clientY - splitterRect.top;
@@ -121420,7 +121420,6 @@ class nxSplitter extends HTMLElement {
121420
121420
 
121421
121421
  const root = this.getRootNode({ composed: true });
121422
121422
  const parent = root instanceof ShadowRoot ? root.host : this.parentElement;
121423
-
121424
121423
  const prev = this.previousElementSibling;
121425
121424
  const next = this.nextElementSibling;
121426
121425
 
@@ -121430,45 +121429,42 @@ class nxSplitter extends HTMLElement {
121430
121429
  }
121431
121430
 
121432
121431
  (parent.shadowRoot || parent).appendChild(dragBar);
121433
- const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
121434
-
121432
+ const parentRect = parent.getBoundingClientRect();
121435
121433
  const prevRect = prev.getBoundingClientRect();
121436
121434
  const nextRect = next.getBoundingClientRect();
121437
121435
 
121438
- let initialPosInOffsetParent;
121436
+ // 드래그 바의 초기 위치와 크기 설정
121439
121437
  if (isHorizontal) {
121440
- initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
121441
- dragBar.style.top = "0";
121442
- dragBar.style.left = `${initialPosInOffsetParent - clickOffset}px`;
121438
+ dragBar.style.top = `${parentRect.top - parentRect.top}px`;
121439
+ dragBar.style.left = `${e.clientX - parentRect.left - clickOffset}px`;
121443
121440
  dragBar.style.width = `${splitterRect.width}px`;
121444
- dragBar.style.height = "100%";
121441
+ dragBar.style.height = `${parentRect.height}px`;
121445
121442
  } else {
121446
- initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
121447
- dragBar.style.left = "0";
121448
- dragBar.style.top = `${initialPosInOffsetParent - clickOffset}px`;
121443
+ dragBar.style.left = `${parentRect.left - parentRect.left}px`;
121444
+ dragBar.style.top = `${e.clientY - parentRect.top - clickOffset}px`;
121449
121445
  dragBar.style.height = `${splitterRect.height}px`;
121450
- dragBar.style.width = "100%";
121446
+ dragBar.style.width = `${parentRect.width}px`;
121451
121447
  }
121452
121448
 
121453
121449
  const minLimit = isHorizontal
121454
- ? prevRect.left - dragBarOffsetParentRect.left
121455
- : prevRect.top - dragBarOffsetParentRect.top;
121450
+ ? prevRect.left - parentRect.left + clickOffset
121451
+ : prevRect.top - parentRect.top + clickOffset;
121456
121452
  const maxLimit = isHorizontal
121457
- ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
121458
- : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
121453
+ ? nextRect.right - parentRect.left - splitterRect.width + clickOffset
121454
+ : nextRect.bottom - parentRect.top - splitterRect.height + clickOffset;
121459
121455
 
121460
121456
  const onMove = moveEvent => {
121461
121457
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
121462
- const currentPosInOffsetParent = isHorizontal
121463
- ? clientPos - dragBar.offsetParent.getBoundingClientRect().left
121464
- : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
121458
+ const currentPosInParent = isHorizontal
121459
+ ? clientPos - parentRect.left
121460
+ : clientPos - parentRect.top;
121465
121461
 
121466
- const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
121462
+ const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
121467
121463
 
121468
121464
  if (isHorizontal) {
121469
- dragBar.style.left = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
121465
+ dragBar.style.left = `${clampedPos - clickOffset}px`;
121470
121466
  } else {
121471
- dragBar.style.top = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
121467
+ dragBar.style.top = `${clampedPos - clickOffset}px`;
121472
121468
  }
121473
121469
  };
121474
121470
 
@@ -121479,36 +121475,28 @@ class nxSplitter extends HTMLElement {
121479
121475
 
121480
121476
  const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121481
121477
 
121482
- const finalDragBarPosInOffsetParent = isHorizontal
121478
+ const finalDragBarPosInParent = isHorizontal
121483
121479
  ? parseFloat(dragBar.style.left)
121484
121480
  : parseFloat(dragBar.style.top);
121485
121481
 
121486
- // ⭐⭐ 최종 크기 계산 시 clickOffset 고려 ⭐⭐
121487
- const newPrevSize = finalDragBarPosInOffsetParent - (isHorizontal
121488
- ? prevRect.left - dragBarOffsetParentRect.left
121489
- : prevRect.top - dragBarOffsetParentRect.top
121482
+ // 패널의 최종 크기 계산
121483
+ const newPrevSize = finalDragBarPosInParent - (isHorizontal
121484
+ ? prevRect.left - parentRect.left
121485
+ : prevRect.top - parentRect.top
121490
121486
  ) + clickOffset;
121491
121487
 
121492
- const totalPanelSize = allPanels.reduce((sum, el) => {
121493
- const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
121494
- return sum + size;
121495
- }, 0);
121496
-
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);
121488
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - (newPrevSize + splitterRect.width);
121501
121489
 
121502
- const newNextSize = newTotalPanelSize - newPrevSize - (totalPanelSize - currentPrevSize - currentNextSize);
121490
+ // 모든 패널의 총 크기를 계산
121491
+ const totalContentSize = isHorizontal ? parentRect.width : parentRect.height;
121503
121492
 
121504
121493
  allPanels.forEach(panel => {
121505
- const panelRect = panel.getBoundingClientRect();
121506
- let newSize = isHorizontal ? panelRect.width : panelRect.height;
121494
+ let newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
121507
121495
 
121508
121496
  if (panel === prev) newSize = newPrevSize;
121509
- if (panel === next) newSize = newNextSize;
121497
+ else if (panel === next) newSize = newNextSize;
121510
121498
 
121511
- const newFlexBasis = newSize / newTotalPanelSize;
121499
+ const newFlexBasis = newSize / totalContentSize;
121512
121500
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
121513
121501
  });
121514
121502
  };
@@ -121519,7 +121507,6 @@ class nxSplitter extends HTMLElement {
121519
121507
 
121520
121508
  #init = () => {
121521
121509
  this.#detectMode(this);
121522
-
121523
121510
  this.classList.add(this.#mode);
121524
121511
 
121525
121512
  const contents = this.innerHTML.trim();
@@ -121551,16 +121538,13 @@ class nxSplitter extends HTMLElement {
121551
121538
  const isHorizontal = this.#mode === "h";
121552
121539
  const parent = this.parentElement;
121553
121540
  const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
121554
-
121555
121541
  if (allPanels.length < 2) return;
121556
121542
 
121557
121543
  const parentRect = parent.getBoundingClientRect();
121558
-
121559
121544
  const totalContentSize = allPanels.reduce((sum, el) => {
121560
121545
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
121561
121546
  return sum + size;
121562
121547
  }, 0);
121563
-
121564
121548
  const totalParentSize = isHorizontal ? parentRect.width : parentRect.height;
121565
121549
 
121566
121550
  allPanels.forEach(panel => {
package/dist/nx/nxSplitter.js CHANGED
@@ -39,7 +39,7 @@ class nxSplitter extends HTMLElement {
39
39
  const splitterRect = this.getBoundingClientRect();
40
40
  const isHorizontal = this.#mode === "h";
41
41
 
42
- // ⭐⭐ 마우스 포인터와 스플리터 왼쪽 끝 사이의 거리 계산 ⭐⭐
42
+ // 마우스 포인터와 스플리터 시작점 사이의 거리
43
43
  const clickOffset = isHorizontal
44
44
  ? e.clientX - splitterRect.left
45
45
  : e.clientY - splitterRect.top;
@@ -57,7 +57,6 @@ class nxSplitter extends HTMLElement {
57
57
 
58
58
  const root = this.getRootNode({ composed: true });
59
59
  const parent = root instanceof ShadowRoot ? root.host : this.parentElement;
60
-
61
60
  const prev = this.previousElementSibling;
62
61
  const next = this.nextElementSibling;
63
62
 
@@ -67,45 +66,42 @@ class nxSplitter extends HTMLElement {
67
66
  }
68
67
 
69
68
  (parent.shadowRoot || parent).appendChild(dragBar);
70
- const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
71
-
69
+ const parentRect = parent.getBoundingClientRect();
72
70
  const prevRect = prev.getBoundingClientRect();
73
71
  const nextRect = next.getBoundingClientRect();
74
72
 
75
- let initialPosInOffsetParent;
73
+ // 드래그 바의 초기 위치와 크기 설정
76
74
  if (isHorizontal) {
77
- initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
78
- dragBar.style.top = "0";
79
- dragBar.style.left = `${initialPosInOffsetParent - clickOffset}px`;
75
+ dragBar.style.top = `${parentRect.top - parentRect.top}px`;
76
+ dragBar.style.left = `${e.clientX - parentRect.left - clickOffset}px`;
80
77
  dragBar.style.width = `${splitterRect.width}px`;
81
- dragBar.style.height = "100%";
78
+ dragBar.style.height = `${parentRect.height}px`;
82
79
  } else {
83
- initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
84
- dragBar.style.left = "0";
85
- dragBar.style.top = `${initialPosInOffsetParent - clickOffset}px`;
80
+ dragBar.style.left = `${parentRect.left - parentRect.left}px`;
81
+ dragBar.style.top = `${e.clientY - parentRect.top - clickOffset}px`;
86
82
  dragBar.style.height = `${splitterRect.height}px`;
87
- dragBar.style.width = "100%";
83
+ dragBar.style.width = `${parentRect.width}px`;
88
84
  }
89
85
 
90
86
  const minLimit = isHorizontal
91
- ? prevRect.left - dragBarOffsetParentRect.left
92
- : prevRect.top - dragBarOffsetParentRect.top;
87
+ ? prevRect.left - parentRect.left + clickOffset
88
+ : prevRect.top - parentRect.top + clickOffset;
93
89
  const maxLimit = isHorizontal
94
- ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
95
- : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
90
+ ? nextRect.right - parentRect.left - splitterRect.width + clickOffset
91
+ : nextRect.bottom - parentRect.top - splitterRect.height + clickOffset;
96
92
 
97
93
  const onMove = moveEvent => {
98
94
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
99
- const currentPosInOffsetParent = isHorizontal
100
- ? clientPos - dragBar.offsetParent.getBoundingClientRect().left
101
- : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
95
+ const currentPosInParent = isHorizontal
96
+ ? clientPos - parentRect.left
97
+ : clientPos - parentRect.top;
102
98
 
103
- const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
99
+ const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
104
100
 
105
101
  if (isHorizontal) {
106
- dragBar.style.left = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
102
+ dragBar.style.left = `${clampedPos - clickOffset}px`;
107
103
  } else {
108
- dragBar.style.top = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
104
+ dragBar.style.top = `${clampedPos - clickOffset}px`;
109
105
  }
110
106
  };
111
107
 
@@ -116,36 +112,28 @@ class nxSplitter extends HTMLElement {
116
112
 
117
113
  const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
118
114
 
119
- const finalDragBarPosInOffsetParent = isHorizontal
115
+ const finalDragBarPosInParent = isHorizontal
120
116
  ? parseFloat(dragBar.style.left)
121
117
  : parseFloat(dragBar.style.top);
122
118
 
123
- // ⭐⭐ 최종 크기 계산 시 clickOffset 고려 ⭐⭐
124
- const newPrevSize = finalDragBarPosInOffsetParent - (isHorizontal
125
- ? prevRect.left - dragBarOffsetParentRect.left
126
- : prevRect.top - dragBarOffsetParentRect.top
119
+ // 패널의 최종 크기 계산
120
+ const newPrevSize = finalDragBarPosInParent - (isHorizontal
121
+ ? prevRect.left - parentRect.left
122
+ : prevRect.top - parentRect.top
127
123
  ) + clickOffset;
128
124
 
129
- const totalPanelSize = allPanels.reduce((sum, el) => {
130
- const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
131
- return sum + size;
132
- }, 0);
133
-
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);
125
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - (newPrevSize + splitterRect.width);
138
126
 
139
- const newNextSize = newTotalPanelSize - newPrevSize - (totalPanelSize - currentPrevSize - currentNextSize);
127
+ // 모든 패널의 총 크기를 계산
128
+ const totalContentSize = isHorizontal ? parentRect.width : parentRect.height;
140
129
 
141
130
  allPanels.forEach(panel => {
142
- const panelRect = panel.getBoundingClientRect();
143
- let newSize = isHorizontal ? panelRect.width : panelRect.height;
131
+ let newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
144
132
 
145
133
  if (panel === prev) newSize = newPrevSize;
146
- if (panel === next) newSize = newNextSize;
134
+ else if (panel === next) newSize = newNextSize;
147
135
 
148
- const newFlexBasis = newSize / newTotalPanelSize;
136
+ const newFlexBasis = newSize / totalContentSize;
149
137
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
150
138
  });
151
139
  };
@@ -156,7 +144,6 @@ class nxSplitter extends HTMLElement {
156
144
 
157
145
  #init = () => {
158
146
  this.#detectMode(this);
159
-
160
147
  this.classList.add(this.#mode);
161
148
 
162
149
  const contents = this.innerHTML.trim();
@@ -188,16 +175,13 @@ class nxSplitter extends HTMLElement {
188
175
  const isHorizontal = this.#mode === "h";
189
176
  const parent = this.parentElement;
190
177
  const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
191
-
192
178
  if (allPanels.length < 2) return;
193
179
 
194
180
  const parentRect = parent.getBoundingClientRect();
195
-
196
181
  const totalContentSize = allPanels.reduce((sum, el) => {
197
182
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
198
183
  return sum + size;
199
184
  }, 0);
200
-
201
185
  const totalParentSize = isHorizontal ? parentRect.width : parentRect.height;
202
186
 
203
187
  allPanels.forEach(panel => {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.1038.0",
4
+ "version": "6.1040.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxSplitter.js CHANGED
@@ -39,7 +39,7 @@ class nxSplitter extends HTMLElement {
39
39
  const splitterRect = this.getBoundingClientRect();
40
40
  const isHorizontal = this.#mode === "h";
41
41
 
42
- // ⭐⭐ 마우스 포인터와 스플리터 왼쪽 끝 사이의 거리 계산 ⭐⭐
42
+ // 마우스 포인터와 스플리터 시작점 사이의 거리
43
43
  const clickOffset = isHorizontal
44
44
  ? e.clientX - splitterRect.left
45
45
  : e.clientY - splitterRect.top;
@@ -57,7 +57,6 @@ class nxSplitter extends HTMLElement {
57
57
 
58
58
  const root = this.getRootNode({ composed: true });
59
59
  const parent = root instanceof ShadowRoot ? root.host : this.parentElement;
60
-
61
60
  const prev = this.previousElementSibling;
62
61
  const next = this.nextElementSibling;
63
62
 
@@ -67,45 +66,42 @@ class nxSplitter extends HTMLElement {
67
66
  }
68
67
 
69
68
  (parent.shadowRoot || parent).appendChild(dragBar);
70
- const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
71
-
69
+ const parentRect = parent.getBoundingClientRect();
72
70
  const prevRect = prev.getBoundingClientRect();
73
71
  const nextRect = next.getBoundingClientRect();
74
72
 
75
- let initialPosInOffsetParent;
73
+ // 드래그 바의 초기 위치와 크기 설정
76
74
  if (isHorizontal) {
77
- initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
78
- dragBar.style.top = "0";
79
- dragBar.style.left = `${initialPosInOffsetParent - clickOffset}px`;
75
+ dragBar.style.top = `${parentRect.top - parentRect.top}px`;
76
+ dragBar.style.left = `${e.clientX - parentRect.left - clickOffset}px`;
80
77
  dragBar.style.width = `${splitterRect.width}px`;
81
- dragBar.style.height = "100%";
78
+ dragBar.style.height = `${parentRect.height}px`;
82
79
  } else {
83
- initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
84
- dragBar.style.left = "0";
85
- dragBar.style.top = `${initialPosInOffsetParent - clickOffset}px`;
80
+ dragBar.style.left = `${parentRect.left - parentRect.left}px`;
81
+ dragBar.style.top = `${e.clientY - parentRect.top - clickOffset}px`;
86
82
  dragBar.style.height = `${splitterRect.height}px`;
87
- dragBar.style.width = "100%";
83
+ dragBar.style.width = `${parentRect.width}px`;
88
84
  }
89
85
 
90
86
  const minLimit = isHorizontal
91
- ? prevRect.left - dragBarOffsetParentRect.left
92
- : prevRect.top - dragBarOffsetParentRect.top;
87
+ ? prevRect.left - parentRect.left + clickOffset
88
+ : prevRect.top - parentRect.top + clickOffset;
93
89
  const maxLimit = isHorizontal
94
- ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
95
- : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
90
+ ? nextRect.right - parentRect.left - splitterRect.width + clickOffset
91
+ : nextRect.bottom - parentRect.top - splitterRect.height + clickOffset;
96
92
 
97
93
  const onMove = moveEvent => {
98
94
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
99
- const currentPosInOffsetParent = isHorizontal
100
- ? clientPos - dragBar.offsetParent.getBoundingClientRect().left
101
- : clientPos - dragBar.offsetParent.getBoundingClientRect().top;
95
+ const currentPosInParent = isHorizontal
96
+ ? clientPos - parentRect.left
97
+ : clientPos - parentRect.top;
102
98
 
103
- const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
99
+ const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
104
100
 
105
101
  if (isHorizontal) {
106
- dragBar.style.left = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
102
+ dragBar.style.left = `${clampedPos - clickOffset}px`;
107
103
  } else {
108
- dragBar.style.top = `${clampedPos - clickOffset}px`; // ⭐⭐ 마우스 위치 보정 ⭐⭐
104
+ dragBar.style.top = `${clampedPos - clickOffset}px`;
109
105
  }
110
106
  };
111
107
 
@@ -116,36 +112,28 @@ class nxSplitter extends HTMLElement {
116
112
 
117
113
  const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
118
114
 
119
- const finalDragBarPosInOffsetParent = isHorizontal
115
+ const finalDragBarPosInParent = isHorizontal
120
116
  ? parseFloat(dragBar.style.left)
121
117
  : parseFloat(dragBar.style.top);
122
118
 
123
- // ⭐⭐ 최종 크기 계산 시 clickOffset 고려 ⭐⭐
124
- const newPrevSize = finalDragBarPosInOffsetParent - (isHorizontal
125
- ? prevRect.left - dragBarOffsetParentRect.left
126
- : prevRect.top - dragBarOffsetParentRect.top
119
+ // 패널의 최종 크기 계산
120
+ const newPrevSize = finalDragBarPosInParent - (isHorizontal
121
+ ? prevRect.left - parentRect.left
122
+ : prevRect.top - parentRect.top
127
123
  ) + clickOffset;
128
124
 
129
- const totalPanelSize = allPanels.reduce((sum, el) => {
130
- const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
131
- return sum + size;
132
- }, 0);
133
-
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);
125
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - (newPrevSize + splitterRect.width);
138
126
 
139
- const newNextSize = newTotalPanelSize - newPrevSize - (totalPanelSize - currentPrevSize - currentNextSize);
127
+ // 모든 패널의 총 크기를 계산
128
+ const totalContentSize = isHorizontal ? parentRect.width : parentRect.height;
140
129
 
141
130
  allPanels.forEach(panel => {
142
- const panelRect = panel.getBoundingClientRect();
143
- let newSize = isHorizontal ? panelRect.width : panelRect.height;
131
+ let newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
144
132
 
145
133
  if (panel === prev) newSize = newPrevSize;
146
- if (panel === next) newSize = newNextSize;
134
+ else if (panel === next) newSize = newNextSize;
147
135
 
148
- const newFlexBasis = newSize / newTotalPanelSize;
136
+ const newFlexBasis = newSize / totalContentSize;
149
137
  panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
150
138
  });
151
139
  };
@@ -156,7 +144,6 @@ class nxSplitter extends HTMLElement {
156
144
 
157
145
  #init = () => {
158
146
  this.#detectMode(this);
159
-
160
147
  this.classList.add(this.#mode);
161
148
 
162
149
  const contents = this.innerHTML.trim();
@@ -188,16 +175,13 @@ class nxSplitter extends HTMLElement {
188
175
  const isHorizontal = this.#mode === "h";
189
176
  const parent = this.parentElement;
190
177
  const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
191
-
192
178
  if (allPanels.length < 2) return;
193
179
 
194
180
  const parentRect = parent.getBoundingClientRect();
195
-
196
181
  const totalContentSize = allPanels.reduce((sum, el) => {
197
182
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
198
183
  return sum + size;
199
184
  }, 0);
200
-
201
185
  const totalParentSize = isHorizontal ? parentRect.width : parentRect.height;
202
186
 
203
187
  allPanels.forEach(panel => {