publ-echo-test 0.0.37 → 0.0.38

package/dist/lib/GridItem/GridItem.js

@@ -30,8 +30,9 @@ import { Resizable } from "../Resizable";
 var GridItem = function (_a) {
     var _b;
     var children = _a.children, props = __rest(_a, ["children"]);
-    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
+    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize, droppingPosition = props.droppingPosition;
     var _l = useState(), resizing = _l[0], setResizing = _l[1];
+    var prevProps = useRef();
     var _m = useState(), dragging = _m[0], setDragging = _m[1];
     var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
     var _p = useState(false), isDragging = _p[0], setIsDragging = _p[1];
@@ -81,14 +82,13 @@ var GridItem = function (_a) {
                 var _a = calcWH(getPositionParams(), {
                     width: width,
                     height: height,
-                }, x, y, 'e', props.w, props.h, true), w_1 = _a.w, h_1 = _a.h;
+                }, x, y, 'e', props.w, props.h, false), w_1 = _a.w, h_1 = _a.h;
                 if (keepWidth) {
                     w_1 = prevW;
                 }
                 if (prevH > h_1) {
                     h_1 = prevH;
                 }
-                console.log('keep width?', keepWidth);
                 var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
                 if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
                     return;
@@ -107,35 +107,6 @@ var GridItem = function (_a) {
             observer.disconnect();
         };
     }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
-    // const moveDroppingItem = (prevProps: GridItemProps) => {
-    //   const { droppingPosition } = props;
-    //   if (!droppingPosition) return;
-    //   const node = elementRef.current;
-    //   // Can't find DOM node (are we unmounted?)
-    //   if (!node) return;
-    //   const prevDroppingPosition = prevProps.droppingPosition || {
-    //     left: 0,
-    //     top: 0,
-    //   };
-    //   const shouldDrag =
-    //     (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
-    //     droppingPosition.top !== prevDroppingPosition.top;
-    //   if (!dragging) {
-    //     onDragStart(droppingPosition.e, {
-    //       node,
-    //       deltaX: droppingPosition.left,
-    //       deltaY: droppingPosition.top,
-    //     });
-    //   } else if (shouldDrag) {
-    //     const deltaX = droppingPosition.left - dragging.left;
-    //     const deltaY = droppingPosition.top - dragging.top;
-    //     onDrag(droppingPosition.e, {
-    //       node,
-    //       deltaX,
-    //       deltaY,
-    //     });
-    //   }
-    // };
     var getPositionParams = function (prop) {
         if (prop === void 0) { prop = props; }
         return {
@@ -207,7 +178,7 @@ var GridItem = function (_a) {
      * @param  {Object} callbackData  an object with node, delta and position information
      */
     var onDragStart = function (e, _a) {
-        var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
+        var node = _a.node;
         var newPosition = { top: 0, left: 0 };
         var offsetParent = node.offsetParent;
         if (!offsetParent)
@@ -380,8 +351,45 @@ var GridItem = function (_a) {
         var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
         handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
     };
+    useEffect(function () {
+        var moveDroppingItem = function (prevProps) {
+            var droppingPosition = props.droppingPosition;
+            if (!droppingPosition)
+                return;
+            var node = elementRef.current;
+            if (!node)
+                return;
+            var prevDroppingPosition = prevProps.droppingPosition || {
+                left: 0,
+                top: 0,
+            };
+            var shouldDrag = (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
+                droppingPosition.top !== prevDroppingPosition.top;
+            // const shouldDrag = true;
+            if (!dragging) {
+                onDragStart(droppingPosition.e, {
+                    node: node,
+                    deltaX: droppingPosition.left,
+                    deltaY: droppingPosition.top,
+                });
+            }
+            else if (shouldDrag) {
+                var deltaX = droppingPosition.left - dragging.left;
+                var deltaY = droppingPosition.top - dragging.top;
+                onDrag(droppingPosition.e, {
+                    node: node,
+                    deltaX: deltaX,
+                    deltaY: deltaY,
+                });
+            }
+        };
+        if (prevProps.current) {
+            moveDroppingItem(prevProps.current);
+        }
+        prevProps.current = props;
+    }, [props, dragging, onDragStart, onDrag]);
     var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
-        dragging: dragging,
+        // dragging,
         resizing: resizing,
     }, colWidth);
     var child = React.Children.only(children);
@@ -394,7 +402,8 @@ var GridItem = function (_a) {
             isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
             resizing: Boolean(resizing),
             "react-draggable": isDraggable,
-            isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
+            // isDragging:
+            //   Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
             "react-draggable-dragging": Boolean(dragging),
             // dropping: Boolean(droppingPosition),
             cssTransforms: useCSSTransforms,

package/dist/lib/GridItem/types.d.ts

@@ -99,12 +99,12 @@ export type DroppingPosition = {
 };
 export type ReactDraggableCallbackData = {
     node: HTMLElement;
-    x: number;
-    y: number;
+    x?: number;
+    y?: number;
     deltaX: number;
     deltaY: number;
-    lastX: number;
-    lastY: number;
+    lastX?: number;
+    lastY?: number;
 };
 export type ResizeHandlerNameType = "onResizeStart" | "onResize" | "onResizeStop";
 export {};

package/dist/lib/GridItem/utils/calculateUtils.js

@@ -59,7 +59,7 @@ export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH, shoul
     var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
     var roundOrCeil = shouldCeil ? Math.ceil : Math.round;
     var w = roundOrCeil((width + margin[0]) / (colWidth + margin[0]));
-    var h = roundOrCeil((height + margin[1]) / (rowHeightNumber + margin[1]));
+    var h = roundOrCeil(roundToOneDecimal((height + margin[1]) / (rowHeightNumber + margin[1])));
     // // Capping
     // w = clamp(w, 0, cols - x);
     // h = clamp(h, 0, maxRows - y);
@@ -107,3 +107,6 @@ export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH, shoul
 export function clamp(num, lowerBound, upperBound) {
     return Math.max(Math.min(num, upperBound), lowerBound);
 }
+function roundToOneDecimal(num) {
+    return Math.floor(num * 10) / 10;
+}

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -434,16 +434,17 @@ var ReactGridLayout = function (_a) {
             return false;
         }
         var finalDroppingItem = __assign(__assign({}, droppingItem), onDragOverResult);
-        var _b = e.nativeEvent, layerX = _b.layerX, layerY = _b.layerY; // TODO fix
-        var droppingPosition = {
-            left: layerX / transformScale,
-            top: layerY / transformScale,
-            e: e,
-        };
+        var gridRect = e.currentTarget.getBoundingClientRect();
+        var layerX = e.clientX - gridRect.left;
+        var layerY = e.clientY - gridRect.top;
         if (!droppingDOMNode) {
             var calculatedPosition = calcXY(getPositionParams(), layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
-            setDroppingDOMNode(_jsx("div", {}, finalDroppingItem.i));
-            setDroppingPosition(droppingPosition);
+            setDroppingDOMNode(_jsx("div", { children: "\uC5EC\uAE30\uC5D0 \uB4DC\uB889" }, finalDroppingItem.i));
+            setDroppingPosition({
+                left: layerX / transformScale,
+                top: layerY / transformScale,
+                e: e,
+            });
             setLayout(__spreadArray(__spreadArray([], layout, true), [
                 __assign(__assign({}, finalDroppingItem), { x: calculatedPosition.x, y: calculatedPosition.y, static: false, isDraggable: true }),
             ], false));
@@ -452,7 +453,11 @@ var ReactGridLayout = function (_a) {
             var left = droppingPosition.left, top_1 = droppingPosition.top;
             var shouldUpdatePosition = left != layerX || top_1 != layerY;
             if (shouldUpdatePosition) {
-                setDroppingPosition(droppingPosition);
+                setDroppingPosition({
+                    left: layerX / transformScale,
+                    top: layerY / transformScale,
+                    e: e,
+                });
             }
         }
     };
@@ -488,7 +493,7 @@ var ReactGridLayout = function (_a) {
     };
     var mergedClassName = classNames(layoutClassName, className);
     var mergedStyle = __assign({ height: containerHeight() }, style);
-    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
+    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), droppingDOMNode && processGridItem(droppingDOMNode, true), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
                     marginTop: margin[1] + "px",
                     marginBottom: margin[1] + "px",
                     marginLeft: margin[0] + "px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "publ-echo-test",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",