ninegrid2 6.1041.0 → 6.1043.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 +21 -18
  2. package/dist/bundle.esm.js +21 -18
  3. package/dist/nx/nxSplitter.js +21 -18
  4. package/package.json +1 -1
  5. package/src/nx/nxSplitter.js +21 -18
package/dist/bundle.cjs.js CHANGED
@@ -121433,42 +121433,45 @@ class nxSplitter extends HTMLElement {
121433
121433
  }
121434
121434
 
121435
121435
  (parent.shadowRoot || parent).appendChild(dragBar);
121436
- const parentRect = parent.getBoundingClientRect();
121436
+ //const parentRect = parent.getBoundingClientRect();
121437
121437
  const prevRect = prev.getBoundingClientRect();
121438
121438
  const nextRect = next.getBoundingClientRect();
121439
121439
 
121440
121440
  // 드래그 바의 초기 위치와 크기 설정
121441
+ // startDrag 메서드 내부
121442
+ const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
121443
+
121441
121444
  if (isHorizontal) {
121442
121445
  dragBar.style.top = "0";
121443
- dragBar.style.left = `${e.clientX - parentRect.left - clickOffset}px`;
121444
- dragBar.style.width = `${splitterRect.width}px`;
121445
- dragBar.style.height = `${parentRect.height}px`;
121446
+ dragBar.style.left = `${e.clientX - dragBarOffsetParentRect.left}px`;
121447
+ dragBar.style.width = `1px`; // ⭐ 1px로 변경
121448
+ dragBar.style.height = "100%";
121446
121449
  } else {
121447
121450
  dragBar.style.left = "0";
121448
- dragBar.style.top = `${e.clientY - parentRect.top - clickOffset}px`;
121449
- dragBar.style.height = `${splitterRect.height}px`;
121450
- dragBar.style.width = `${parentRect.width}px`;
121451
+ dragBar.style.top = `${e.clientY - dragBarOffsetParentRect.top}px`;
121452
+ dragBar.style.height = `1px`; // ⭐ 1px로 변경
121453
+ ddragBar.style.width = "100%";
121451
121454
  }
121452
121455
 
121453
121456
  const minLimit = isHorizontal
121454
- ? prevRect.left - parentRect.left + clickOffset
121455
- : prevRect.top - parentRect.top + clickOffset;
121457
+ ? prevRect.left - dragBarOffsetParentRect.left
121458
+ : prevRect.top - dragBarOffsetParentRect.top;
121456
121459
  const maxLimit = isHorizontal
121457
- ? nextRect.right - parentRect.left - splitterRect.width + clickOffset
121458
- : nextRect.bottom - parentRect.top - splitterRect.height + clickOffset;
121460
+ ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
121461
+ : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
121459
121462
 
121460
121463
  const onMove = moveEvent => {
121461
121464
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
121462
121465
  const currentPosInParent = isHorizontal
121463
- ? clientPos - parentRect.left
121464
- : clientPos - parentRect.top;
121466
+ ? clientPos - dragBarOffsetParentRect.left
121467
+ : clientPos - dragBarOffsetParentRect.top;
121465
121468
 
121466
121469
  const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
121467
121470
 
121468
121471
  if (isHorizontal) {
121469
- dragBar.style.left = `${clampedPos - clickOffset}px`;
121472
+ dragBar.style.left = `${clampedPos}px`;
121470
121473
  } else {
121471
- dragBar.style.top = `${clampedPos - clickOffset}px`;
121474
+ dragBar.style.top = `${clampedPos}px`;
121472
121475
  }
121473
121476
  };
121474
121477
 
@@ -121485,11 +121488,11 @@ class nxSplitter extends HTMLElement {
121485
121488
 
121486
121489
  // 패널의 최종 크기 계산
121487
121490
  const newPrevSize = finalDragBarPosInParent - (isHorizontal
121488
- ? prevRect.left - parentRect.left
121489
- : prevRect.top - parentRect.top
121491
+ ? prevRect.left - dragBarOffsetParentRect.left
121492
+ : prevRect.top - dragBarOffsetParentRect.top
121490
121493
  ) + clickOffset;
121491
121494
 
121492
- const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - (newPrevSize + splitterRect.width);
121495
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? dragBarOffsetParentRect.left : dragBarOffsetParentRect.top) - (newPrevSize + splitterRect.width);
121493
121496
 
121494
121497
  const totalPanelSize = allPanels.reduce((sum, el) => {
121495
121498
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
package/dist/bundle.esm.js CHANGED
@@ -121429,42 +121429,45 @@ class nxSplitter extends HTMLElement {
121429
121429
  }
121430
121430
 
121431
121431
  (parent.shadowRoot || parent).appendChild(dragBar);
121432
- const parentRect = parent.getBoundingClientRect();
121432
+ //const parentRect = parent.getBoundingClientRect();
121433
121433
  const prevRect = prev.getBoundingClientRect();
121434
121434
  const nextRect = next.getBoundingClientRect();
121435
121435
 
121436
121436
  // 드래그 바의 초기 위치와 크기 설정
121437
+ // startDrag 메서드 내부
121438
+ const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
121439
+
121437
121440
  if (isHorizontal) {
121438
121441
  dragBar.style.top = "0";
121439
- dragBar.style.left = `${e.clientX - parentRect.left - clickOffset}px`;
121440
- dragBar.style.width = `${splitterRect.width}px`;
121441
- dragBar.style.height = `${parentRect.height}px`;
121442
+ dragBar.style.left = `${e.clientX - dragBarOffsetParentRect.left}px`;
121443
+ dragBar.style.width = `1px`; // ⭐ 1px로 변경
121444
+ dragBar.style.height = "100%";
121442
121445
  } else {
121443
121446
  dragBar.style.left = "0";
121444
- dragBar.style.top = `${e.clientY - parentRect.top - clickOffset}px`;
121445
- dragBar.style.height = `${splitterRect.height}px`;
121446
- dragBar.style.width = `${parentRect.width}px`;
121447
+ dragBar.style.top = `${e.clientY - dragBarOffsetParentRect.top}px`;
121448
+ dragBar.style.height = `1px`; // ⭐ 1px로 변경
121449
+ ddragBar.style.width = "100%";
121447
121450
  }
121448
121451
 
121449
121452
  const minLimit = isHorizontal
121450
- ? prevRect.left - parentRect.left + clickOffset
121451
- : prevRect.top - parentRect.top + clickOffset;
121453
+ ? prevRect.left - dragBarOffsetParentRect.left
121454
+ : prevRect.top - dragBarOffsetParentRect.top;
121452
121455
  const maxLimit = isHorizontal
121453
- ? nextRect.right - parentRect.left - splitterRect.width + clickOffset
121454
- : nextRect.bottom - parentRect.top - splitterRect.height + clickOffset;
121456
+ ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
121457
+ : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
121455
121458
 
121456
121459
  const onMove = moveEvent => {
121457
121460
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
121458
121461
  const currentPosInParent = isHorizontal
121459
- ? clientPos - parentRect.left
121460
- : clientPos - parentRect.top;
121462
+ ? clientPos - dragBarOffsetParentRect.left
121463
+ : clientPos - dragBarOffsetParentRect.top;
121461
121464
 
121462
121465
  const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
121463
121466
 
121464
121467
  if (isHorizontal) {
121465
- dragBar.style.left = `${clampedPos - clickOffset}px`;
121468
+ dragBar.style.left = `${clampedPos}px`;
121466
121469
  } else {
121467
- dragBar.style.top = `${clampedPos - clickOffset}px`;
121470
+ dragBar.style.top = `${clampedPos}px`;
121468
121471
  }
121469
121472
  };
121470
121473
 
@@ -121481,11 +121484,11 @@ class nxSplitter extends HTMLElement {
121481
121484
 
121482
121485
  // 패널의 최종 크기 계산
121483
121486
  const newPrevSize = finalDragBarPosInParent - (isHorizontal
121484
- ? prevRect.left - parentRect.left
121485
- : prevRect.top - parentRect.top
121487
+ ? prevRect.left - dragBarOffsetParentRect.left
121488
+ : prevRect.top - dragBarOffsetParentRect.top
121486
121489
  ) + clickOffset;
121487
121490
 
121488
- const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - (newPrevSize + splitterRect.width);
121491
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? dragBarOffsetParentRect.left : dragBarOffsetParentRect.top) - (newPrevSize + splitterRect.width);
121489
121492
 
121490
121493
  const totalPanelSize = allPanels.reduce((sum, el) => {
121491
121494
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
package/dist/nx/nxSplitter.js CHANGED
@@ -66,42 +66,45 @@ class nxSplitter extends HTMLElement {
66
66
  }
67
67
 
68
68
  (parent.shadowRoot || parent).appendChild(dragBar);
69
- const parentRect = parent.getBoundingClientRect();
69
+ //const parentRect = parent.getBoundingClientRect();
70
70
  const prevRect = prev.getBoundingClientRect();
71
71
  const nextRect = next.getBoundingClientRect();
72
72
 
73
73
  // 드래그 바의 초기 위치와 크기 설정
74
+ // startDrag 메서드 내부
75
+ const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
76
+
74
77
  if (isHorizontal) {
75
78
  dragBar.style.top = "0";
76
- dragBar.style.left = `${e.clientX - parentRect.left - clickOffset}px`;
77
- dragBar.style.width = `${splitterRect.width}px`;
78
- dragBar.style.height = `${parentRect.height}px`;
79
+ dragBar.style.left = `${e.clientX - dragBarOffsetParentRect.left}px`;
80
+ dragBar.style.width = `1px`; // ⭐ 1px로 변경
81
+ dragBar.style.height = "100%";
79
82
  } else {
80
83
  dragBar.style.left = "0";
81
- dragBar.style.top = `${e.clientY - parentRect.top - clickOffset}px`;
82
- dragBar.style.height = `${splitterRect.height}px`;
83
- dragBar.style.width = `${parentRect.width}px`;
84
+ dragBar.style.top = `${e.clientY - dragBarOffsetParentRect.top}px`;
85
+ dragBar.style.height = `1px`; // ⭐ 1px로 변경
86
+ ddragBar.style.width = "100%";
84
87
  }
85
88
 
86
89
  const minLimit = isHorizontal
87
- ? prevRect.left - parentRect.left + clickOffset
88
- : prevRect.top - parentRect.top + clickOffset;
90
+ ? prevRect.left - dragBarOffsetParentRect.left
91
+ : prevRect.top - dragBarOffsetParentRect.top;
89
92
  const maxLimit = isHorizontal
90
- ? nextRect.right - parentRect.left - splitterRect.width + clickOffset
91
- : nextRect.bottom - parentRect.top - splitterRect.height + clickOffset;
93
+ ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
94
+ : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
92
95
 
93
96
  const onMove = moveEvent => {
94
97
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
95
98
  const currentPosInParent = isHorizontal
96
- ? clientPos - parentRect.left
97
- : clientPos - parentRect.top;
99
+ ? clientPos - dragBarOffsetParentRect.left
100
+ : clientPos - dragBarOffsetParentRect.top;
98
101
 
99
102
  const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
100
103
 
101
104
  if (isHorizontal) {
102
- dragBar.style.left = `${clampedPos - clickOffset}px`;
105
+ dragBar.style.left = `${clampedPos}px`;
103
106
  } else {
104
- dragBar.style.top = `${clampedPos - clickOffset}px`;
107
+ dragBar.style.top = `${clampedPos}px`;
105
108
  }
106
109
  };
107
110
 
@@ -118,11 +121,11 @@ class nxSplitter extends HTMLElement {
118
121
 
119
122
  // 패널의 최종 크기 계산
120
123
  const newPrevSize = finalDragBarPosInParent - (isHorizontal
121
- ? prevRect.left - parentRect.left
122
- : prevRect.top - parentRect.top
124
+ ? prevRect.left - dragBarOffsetParentRect.left
125
+ : prevRect.top - dragBarOffsetParentRect.top
123
126
  ) + clickOffset;
124
127
 
125
- const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - (newPrevSize + splitterRect.width);
128
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? dragBarOffsetParentRect.left : dragBarOffsetParentRect.top) - (newPrevSize + splitterRect.width);
126
129
 
127
130
  const totalPanelSize = allPanels.reduce((sum, el) => {
128
131
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.1041.0",
4
+ "version": "6.1043.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxSplitter.js CHANGED
@@ -66,42 +66,45 @@ class nxSplitter extends HTMLElement {
66
66
  }
67
67
 
68
68
  (parent.shadowRoot || parent).appendChild(dragBar);
69
- const parentRect = parent.getBoundingClientRect();
69
+ //const parentRect = parent.getBoundingClientRect();
70
70
  const prevRect = prev.getBoundingClientRect();
71
71
  const nextRect = next.getBoundingClientRect();
72
72
 
73
73
  // 드래그 바의 초기 위치와 크기 설정
74
+ // startDrag 메서드 내부
75
+ const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
76
+
74
77
  if (isHorizontal) {
75
78
  dragBar.style.top = "0";
76
- dragBar.style.left = `${e.clientX - parentRect.left - clickOffset}px`;
77
- dragBar.style.width = `${splitterRect.width}px`;
78
- dragBar.style.height = `${parentRect.height}px`;
79
+ dragBar.style.left = `${e.clientX - dragBarOffsetParentRect.left}px`;
80
+ dragBar.style.width = `1px`; // ⭐ 1px로 변경
81
+ dragBar.style.height = "100%";
79
82
  } else {
80
83
  dragBar.style.left = "0";
81
- dragBar.style.top = `${e.clientY - parentRect.top - clickOffset}px`;
82
- dragBar.style.height = `${splitterRect.height}px`;
83
- dragBar.style.width = `${parentRect.width}px`;
84
+ dragBar.style.top = `${e.clientY - dragBarOffsetParentRect.top}px`;
85
+ dragBar.style.height = `1px`; // ⭐ 1px로 변경
86
+ ddragBar.style.width = "100%";
84
87
  }
85
88
 
86
89
  const minLimit = isHorizontal
87
- ? prevRect.left - parentRect.left + clickOffset
88
- : prevRect.top - parentRect.top + clickOffset;
90
+ ? prevRect.left - dragBarOffsetParentRect.left
91
+ : prevRect.top - dragBarOffsetParentRect.top;
89
92
  const maxLimit = isHorizontal
90
- ? nextRect.right - parentRect.left - splitterRect.width + clickOffset
91
- : nextRect.bottom - parentRect.top - splitterRect.height + clickOffset;
93
+ ? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
94
+ : nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
92
95
 
93
96
  const onMove = moveEvent => {
94
97
  const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
95
98
  const currentPosInParent = isHorizontal
96
- ? clientPos - parentRect.left
97
- : clientPos - parentRect.top;
99
+ ? clientPos - dragBarOffsetParentRect.left
100
+ : clientPos - dragBarOffsetParentRect.top;
98
101
 
99
102
  const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
100
103
 
101
104
  if (isHorizontal) {
102
- dragBar.style.left = `${clampedPos - clickOffset}px`;
105
+ dragBar.style.left = `${clampedPos}px`;
103
106
  } else {
104
- dragBar.style.top = `${clampedPos - clickOffset}px`;
107
+ dragBar.style.top = `${clampedPos}px`;
105
108
  }
106
109
  };
107
110
 
@@ -118,11 +121,11 @@ class nxSplitter extends HTMLElement {
118
121
 
119
122
  // 패널의 최종 크기 계산
120
123
  const newPrevSize = finalDragBarPosInParent - (isHorizontal
121
- ? prevRect.left - parentRect.left
122
- : prevRect.top - parentRect.top
124
+ ? prevRect.left - dragBarOffsetParentRect.left
125
+ : prevRect.top - dragBarOffsetParentRect.top
123
126
  ) + clickOffset;
124
127
 
125
- const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? parentRect.left : parentRect.top) - (newPrevSize + splitterRect.width);
128
+ const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - (isHorizontal ? dragBarOffsetParentRect.left : dragBarOffsetParentRect.top) - (newPrevSize + splitterRect.width);
126
129
 
127
130
  const totalPanelSize = allPanels.reduce((sum, el) => {
128
131
  const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;