publ-echo-test 0.0.10 → 0.0.12
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.
@@ -58,7 +58,6 @@ var GridItem = function (_a) {
|
|
58
58
|
console.log("mutation", mutation);
|
59
59
|
var height = mutation.target.clientHeight;
|
60
60
|
console.log("new height", height);
|
61
|
-
var handler = props['onResize'];
|
62
61
|
var prevW = props.w;
|
63
62
|
var prevH = props.h;
|
64
63
|
var _a = calcWH(getPositionParams(), {
|
@@ -66,8 +65,7 @@ var GridItem = function (_a) {
|
|
66
65
|
height: height,
|
67
66
|
}, x, y, 'e', props.w, props.h), w_1 = _a.w, h_1 = _a.h;
|
68
67
|
var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
|
69
|
-
|
70
|
-
props.onResizeStop && props.onResizeStop(i, w_1, h_1, {}, newX, newY);
|
68
|
+
props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY);
|
71
69
|
}
|
72
70
|
};
|
73
71
|
// MutationObserver 인스턴스 생성
|
@@ -173,7 +171,7 @@ var GridItem = function (_a) {
|
|
173
171
|
];
|
174
172
|
return (_jsx(Resizable, { draggableOpts: {
|
175
173
|
disabled: !isResizable,
|
176
|
-
}, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left,
|
174
|
+
}, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, children: child }));
|
177
175
|
};
|
178
176
|
/**
|
179
177
|
* onDragStart event handler
|
@@ -306,6 +304,7 @@ var GridItem = function (_a) {
|
|
306
304
|
* @param {Object} callbackData an object with node and size information
|
307
305
|
*/
|
308
306
|
var onResize = function (e, callbackData) {
|
307
|
+
console.log('setting resizing true');
|
309
308
|
setIsResizing(true);
|
310
309
|
onResizeHandler(e, callbackData, "onResize");
|
311
310
|
};
|
@@ -329,6 +328,7 @@ var GridItem = function (_a) {
|
|
329
328
|
var onResizeHandler = function (e, _a, handlerName) {
|
330
329
|
var node = _a.node, size = _a.size, handle = _a.handle;
|
331
330
|
var handler = props[handlerName];
|
331
|
+
console.log(handlerName);
|
332
332
|
if (!handler)
|
333
333
|
return;
|
334
334
|
var prevW = props.w, prevH = props.h;
|
@@ -75,6 +75,7 @@ export type GridItemProps = {
|
|
75
75
|
onResize?: ResizeGridItemCallback<GridResizeEvent>;
|
76
76
|
onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
|
77
77
|
onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
|
78
|
+
onFitToContent?: (i: string, w: number, h: number, x: number, y: number) => void;
|
78
79
|
isHiddenVisibility?: boolean;
|
79
80
|
customColWidth?: number;
|
80
81
|
autoResize: boolean;
|
@@ -317,8 +317,7 @@ var ReactGridLayout = function (_a) {
|
|
317
317
|
node: node,
|
318
318
|
});
|
319
319
|
setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
|
320
|
-
|
321
|
-
e && setActiveDrag(placeholder);
|
320
|
+
setActiveDrag(placeholder);
|
322
321
|
};
|
323
322
|
var onResizeStopHandler = function (i, x, y, _a) {
|
324
323
|
var e = _a.e, node = _a.node;
|
@@ -334,6 +333,45 @@ var ReactGridLayout = function (_a) {
|
|
334
333
|
setOldLayout(undefined);
|
335
334
|
onLayoutMaybeChanged(newLayout, oldLayout);
|
336
335
|
};
|
336
|
+
var onFitToContentHandler = function (i, w, h, x, y) {
|
337
|
+
var _a = withLayoutItem(layout, i, function (l) {
|
338
|
+
var hasCollisions;
|
339
|
+
if (preventCollision && !allowOverlap) {
|
340
|
+
var collisions = getAllCollisions(layout, __assign(__assign({}, l), { w: x, h: y })).filter(function (layoutItem) { return layoutItem.i !== l.i; });
|
341
|
+
hasCollisions = collisions.length > 0;
|
342
|
+
if (hasCollisions) {
|
343
|
+
var leastX_2 = Infinity, leastY_2 = Infinity;
|
344
|
+
collisions.forEach(function (layoutItem) {
|
345
|
+
if (layoutItem.x > l.x)
|
346
|
+
leastX_2 = Math.min(leastX_2, layoutItem.x);
|
347
|
+
if (layoutItem.y > l.y)
|
348
|
+
leastY_2 = Math.min(leastY_2, layoutItem.y);
|
349
|
+
});
|
350
|
+
if (Number.isFinite(leastX_2))
|
351
|
+
l.w = leastX_2 - l.x;
|
352
|
+
if (Number.isFinite(leastY_2))
|
353
|
+
l.h = leastY_2 - l.y;
|
354
|
+
}
|
355
|
+
}
|
356
|
+
if (!hasCollisions) {
|
357
|
+
// NOTE - 여기서 x, y를 추가적으로 세팅해줘야 nw, w, n, sw 방향에서 placeholder가 반대로 resize되지 않고 해당 element와 똑같이 resize
|
358
|
+
l.w = w;
|
359
|
+
l.h = h;
|
360
|
+
l.x = x;
|
361
|
+
l.y = y;
|
362
|
+
}
|
363
|
+
return l;
|
364
|
+
}), newLayout = _a[0], l = _a[1];
|
365
|
+
if (!l)
|
366
|
+
return;
|
367
|
+
props.onFitToContent &&
|
368
|
+
props.onFitToContent({
|
369
|
+
layout: newLayout,
|
370
|
+
prev: oldResizeItem,
|
371
|
+
item: l,
|
372
|
+
});
|
373
|
+
setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
|
374
|
+
};
|
337
375
|
/**
|
338
376
|
* Create a placeholder object.
|
339
377
|
* @return {Element} Placeholder div.
|
@@ -379,9 +417,7 @@ var ReactGridLayout = function (_a) {
|
|
379
417
|
: !l.static && isResizable;
|
380
418
|
var resizeHandlesOptions = l.resizeHandles || resizeHandles;
|
381
419
|
var bounded = draggable && isBounded && l.isBounded !== false;
|
382
|
-
return (_jsx(GridItem, { containerWidth: width,
|
383
|
-
// className={l.i === selected}
|
384
|
-
cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: !!l.autoResize, children: child }, l.i));
|
420
|
+
return (_jsx(GridItem, { containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: !!l.autoResize, children: child }, l.i));
|
385
421
|
};
|
386
422
|
var onDragOverHandler = function (e) {
|
387
423
|
var _a;
|
@@ -55,6 +55,7 @@ var Resizable = function (_a) {
|
|
55
55
|
var extendedHeightRef = useRef(null);
|
56
56
|
useEffect(function () {
|
57
57
|
if (!isResizing) {
|
58
|
+
extendedHeightRef.current = null;
|
58
59
|
return;
|
59
60
|
}
|
60
61
|
if (!elementRef.current) {
|
@@ -203,6 +204,7 @@ var Resizable = function (_a) {
|
|
203
204
|
}
|
204
205
|
if (extendedHeightRef.current) {
|
205
206
|
height = extendedHeightRef.current;
|
207
|
+
handleAxis = removeNorthHandle(handleAxis);
|
206
208
|
}
|
207
209
|
_b = checkConstraints(width, height), width = _b[0], height = _b[1];
|
208
210
|
_c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
|
@@ -242,4 +244,14 @@ var Resizable = function (_a) {
|
|
242
244
|
return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler("onResizeStop", handleAxis), onStart: resizeHandler("onResizeStart", handleAxis), onDrag: resizeHandler("onResize", handleAxis) }), renderResizeHandle(handleAxis, ref)));
|
243
245
|
}), true) }));
|
244
246
|
};
|
247
|
+
function removeNorthHandle(axis) {
|
248
|
+
switch (axis) {
|
249
|
+
case 'ne':
|
250
|
+
return 'e';
|
251
|
+
case 'nw':
|
252
|
+
return 'w';
|
253
|
+
default:
|
254
|
+
return axis;
|
255
|
+
}
|
256
|
+
}
|
245
257
|
export default Resizable;
|