publ-echo-test 0.0.49 → 0.0.51
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.
- package/dist/lib/Resizable/Resizable.js +26 -19
- package/package.json +1 -1
@@ -48,8 +48,8 @@ var Resizable = function (_a) {
|
|
48
48
|
});
|
49
49
|
var startPosition = useRef(null);
|
50
50
|
var startSize = useRef(null);
|
51
|
-
var
|
52
|
-
var slack = null;
|
51
|
+
var lastHandleRectRef = useRef(null);
|
52
|
+
var slack = useRef(null);
|
53
53
|
var className = props.className, draggableOpts = props.draggableOpts, width = props.width, height = props.height, handle = props.handle, onResize = props.onResize, onResizeStop = props.onResizeStop, onResizeStart = props.onResizeStart, restProps = __rest(props, ["className", "draggableOpts", "width", "height", "handle", "onResize", "onResizeStop", "onResizeStart"]);
|
54
54
|
var elementRef = children.ref;
|
55
55
|
var extendedHeightRef = useRef(null);
|
@@ -95,11 +95,13 @@ var Resizable = function (_a) {
|
|
95
95
|
}
|
96
96
|
}, [isResizing, autoResize, children, elementRef]);
|
97
97
|
var resetData = function () {
|
98
|
-
|
98
|
+
lastHandleRectRef.current = null;
|
99
|
+
slack.current = null;
|
99
100
|
};
|
100
101
|
// NOTE - 최소 또는 최대 제약 조건 width와 height 계산, 비율 고정 계산
|
101
102
|
var checkConstraints = function (width, height) {
|
102
|
-
|
103
|
+
var _a;
|
104
|
+
if (!maxConstraints && !lockAspectRatio) {
|
103
105
|
return [width, height];
|
104
106
|
}
|
105
107
|
if (lockAspectRatio) {
|
@@ -113,10 +115,12 @@ var Resizable = function (_a) {
|
|
113
115
|
width = height * ratio;
|
114
116
|
}
|
115
117
|
}
|
116
|
-
var
|
117
|
-
var
|
118
|
+
var _b = [width, height], oldW = _b[0], oldH = _b[1];
|
119
|
+
var _c = (_a = slack.current) !== null && _a !== void 0 ? _a : [0, 0], slackW = _c[0], slackH = _c[1];
|
118
120
|
width += slackW;
|
119
121
|
height += slackH;
|
122
|
+
var minConstraints = [minWidth.current, minHeight.current];
|
123
|
+
// const maxConstraints = [300, 300];
|
120
124
|
if (minConstraints) {
|
121
125
|
width = Math.max(minConstraints[0], width);
|
122
126
|
height = Math.max(minConstraints[1], height);
|
@@ -125,7 +129,9 @@ var Resizable = function (_a) {
|
|
125
129
|
width = Math.min(maxConstraints[0], width);
|
126
130
|
height = Math.min(maxConstraints[1], height);
|
127
131
|
}
|
128
|
-
|
132
|
+
console.log(oldW, width);
|
133
|
+
slack.current = [slackW + (oldW - width), slackH + (oldH - height)];
|
134
|
+
// console.log([slackW, slackH]);
|
129
135
|
return [width, height];
|
130
136
|
};
|
131
137
|
var checkTopLeft = function (deltaX, deltaY, top, left, width, height, handleAxis) {
|
@@ -172,7 +178,7 @@ var Resizable = function (_a) {
|
|
172
178
|
var resizeHandler = function (handlerName, handleAxis) {
|
173
179
|
return function (e, _a) {
|
174
180
|
var _b, _c;
|
175
|
-
var _d, _e, _f, _g, _h, _j
|
181
|
+
var _d, _e, _f, _g, _h, _j;
|
176
182
|
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
177
183
|
if (handlerName === "onResizeStart") {
|
178
184
|
var position = { top: (_d = props.top) !== null && _d !== void 0 ? _d : 0, left: (_e = props.left) !== null && _e !== void 0 ? _e : 0 };
|
@@ -194,17 +200,18 @@ var Resizable = function (_a) {
|
|
194
200
|
var axisV = handleAxis[0];
|
195
201
|
var axisH = handleAxis[handleAxis.length - 1];
|
196
202
|
var handleRect = node.getBoundingClientRect();
|
197
|
-
// if (
|
203
|
+
// if (lastHandleRectRef.current !== null) {
|
198
204
|
// if (axisH === "w") {
|
199
|
-
// const deltaLeftSinceLast = handleRect.left -
|
205
|
+
// const deltaLeftSinceLast = handleRect.left - lastHandleRectRef.current.left;
|
206
|
+
// console.log('delta, :', deltaLeftSinceLast);
|
200
207
|
// deltaX += deltaLeftSinceLast;
|
201
208
|
// }
|
202
209
|
// if (axisV === "n") {
|
203
|
-
// const deltaTopSinceLast = handleRect.top -
|
210
|
+
// const deltaTopSinceLast = handleRect.top - lastHandleRectRef.current.top;
|
204
211
|
// deltaY += deltaTopSinceLast;
|
205
212
|
// }
|
206
213
|
// }
|
207
|
-
|
214
|
+
lastHandleRectRef.current = handleRect;
|
208
215
|
if (axisH === "w") {
|
209
216
|
deltaX = -deltaX;
|
210
217
|
}
|
@@ -223,20 +230,20 @@ var Resizable = function (_a) {
|
|
223
230
|
}
|
224
231
|
// width = Math.max(width, minWidth.current);
|
225
232
|
// const isOverMin = calcWH()
|
226
|
-
if (minHeight.current) {
|
227
|
-
|
228
|
-
}
|
229
|
-
|
230
|
-
|
233
|
+
// if (minHeight.current) {
|
234
|
+
// height = Math.max(minHeight.current, height);
|
235
|
+
// }
|
236
|
+
_b = checkConstraints(width, height), width = _b[0], height = _b[1];
|
237
|
+
if (extendedHeightRef.current === height) {
|
231
238
|
handleAxis = removeNorthHandle(handleAxis);
|
232
239
|
}
|
233
|
-
_b = checkConstraints(width, height), width = _b[0], height = _b[1];
|
234
240
|
_c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
|
235
241
|
var isDimensionsChanged = width !== props.width || height !== props.height;
|
236
242
|
var cb = typeof props[handlerName] === "function" ? props[handlerName] : null;
|
237
243
|
var isCbSkipped = handlerName === "onResize" && !isDimensionsChanged;
|
238
244
|
if (cb && !isCbSkipped) {
|
239
|
-
cb(e, { node
|
245
|
+
// cb(e, { node, size: { width, height, top, left }, handle: handleAxis, minWidth: minWidth.current, minHeight: minHeight.current ?? 0 });
|
246
|
+
cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis });
|
240
247
|
}
|
241
248
|
if (handlerName === "onResizeStop") {
|
242
249
|
startPosition.current = null;
|