publ-echo-test 0.0.38 → 0.0.39

package/dist/lib/GridItem/GridItem.js

@@ -30,9 +30,8 @@ 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, droppingPosition = props.droppingPosition;
+    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 _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];
@@ -107,6 +106,35 @@ 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 {
@@ -178,7 +206,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;
+        var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
         var newPosition = { top: 0, left: 0 };
         var offsetParent = node.offsetParent;
         if (!offsetParent)
@@ -349,47 +377,16 @@ var GridItem = function (_a) {
         h = clamp(h, tempMinH, maxH);
         setResizing(handlerName === "onResizeStop" ? undefined : size);
         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,
-                });
+        // NOTE: test to fix
+        if (handle === 'nw' || handle === 'ne' || handle === 'sw' || handle === 'se') {
+            if (prevH === h) {
+                newX = x;
             }
-            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]);
+        handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
+    };
     var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
-        // dragging,
+        dragging: dragging,
         resizing: resizing,
     }, colWidth);
     var child = React.Children.only(children);
@@ -402,8 +399,7 @@ 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/GridLayoutEditor/ReactGridLayout.js

@@ -434,17 +434,16 @@ var ReactGridLayout = function (_a) {
             return false;
         }
         var finalDroppingItem = __assign(__assign({}, droppingItem), onDragOverResult);
-        var gridRect = e.currentTarget.getBoundingClientRect();
-        var layerX = e.clientX - gridRect.left;
-        var layerY = e.clientY - gridRect.top;
+        var _b = e.nativeEvent, layerX = _b.layerX, layerY = _b.layerY; // TODO fix
+        var droppingPosition = {
+            left: layerX / transformScale,
+            top: layerY / transformScale,
+            e: e,
+        };
         if (!droppingDOMNode) {
             var calculatedPosition = calcXY(getPositionParams(), layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
-            setDroppingDOMNode(_jsx("div", { children: "\uC5EC\uAE30\uC5D0 \uB4DC\uB889" }, finalDroppingItem.i));
-            setDroppingPosition({
-                left: layerX / transformScale,
-                top: layerY / transformScale,
-                e: e,
-            });
+            setDroppingDOMNode(_jsx("div", {}, finalDroppingItem.i));
+            setDroppingPosition(droppingPosition);
             setLayout(__spreadArray(__spreadArray([], layout, true), [
                 __assign(__assign({}, finalDroppingItem), { x: calculatedPosition.x, y: calculatedPosition.y, static: false, isDraggable: true }),
             ], false));
@@ -453,11 +452,7 @@ var ReactGridLayout = function (_a) {
             var left = droppingPosition.left, top_1 = droppingPosition.top;
             var shouldUpdatePosition = left != layerX || top_1 != layerY;
             if (shouldUpdatePosition) {
-                setDroppingPosition({
-                    left: layerX / transformScale,
-                    top: layerY / transformScale,
-                    e: e,
-                });
+                setDroppingPosition(droppingPosition);
             }
         }
     };
@@ -493,7 +488,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(), droppingDOMNode && processGridItem(droppingDOMNode, true), 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(), 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.38",
+  "version": "0.0.39",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",