publ-echo 0.0.72 → 0.0.74

package/dist/lib/GridItem/GridItem.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { DraggableCore } from "../Draggable";
 import classNames from "../../external-lib/classnames";
 import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, calculateCharacterWidthInDiv, clamp, resolveRowHeight, } from "./utils/calculateUtils";
@@ -31,8 +31,7 @@ import { useResizeObserver } from "../hooks/useResizeobserver";
 import { shouldAutoResize, shouldBlockResize } from "./utils/autoResizeUtils";
 var GridItem = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _b = props.transformScale, transformScale = _b === void 0 ? 1 : _b, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _c = props.cancel, cancel = _c === void 0 ? "" : _c, _d = props.handle, handle = _d === void 0 ? "" : _d, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _e = props.minH, minH = _e === void 0 ? 1 : _e, _f = props.minW, minW = _f === void 0 ? 1 : _f, _g = props.maxH, maxH = _g === void 0 ? Infinity : _g, _h = props.maxW, maxW = _h === void 0 ? Infinity : _h, i = props.i, _j = props.isHiddenVisibility, isHiddenVisibility = _j === void 0 ? false : _j, containerWidth = props.containerWidth, customColWidth = props.customColWidth, rowHeight = props.rowHeight, activeResizeObserver = props.activeResizeObserver;
-    console.log(i, activeResizeObserver);
+    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _b = props.transformScale, transformScale = _b === void 0 ? 1 : _b, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _c = props.cancel, cancel = _c === void 0 ? "" : _c, _d = props.handle, handle = _d === void 0 ? "" : _d, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _e = props.minH, minH = _e === void 0 ? 1 : _e, _f = props.minW, minW = _f === void 0 ? 1 : _f, _g = props.maxH, maxH = _g === void 0 ? Infinity : _g, _h = props.maxW, maxW = _h === void 0 ? Infinity : _h, i = props.i, _j = props.isHiddenVisibility, isHiddenVisibility = _j === void 0 ? false : _j, containerWidth = props.containerWidth, customColWidth = props.customColWidth, rowHeight = props.rowHeight, activeResizeObserver = props.activeResizeObserver, activeContentObserver = props.activeContentObserver;
     var shouldAutoShrink = useRef({ shouldAutoShrink: false, initialHeight: 0 });
     var _k = useState(), resizing = _k[0], setResizing = _k[1];
     var _l = useState(), dragging = _l[0], setDragging = _l[1];
@@ -40,11 +39,26 @@ var GridItem = function (_a) {
     var _o = useState(false), isDragging = _o[0], setIsDragging = _o[1];
     var _p = useState(false), isResizing = _p[0], setIsResizing = _p[1];
     var elementRef = useRef(null);
-    var _q = useResizeObserver([isDragging, isResizing]), contentHeight = _q.contentHeight, contentWidth = _q.contentWidth, gridItemHeight = _q.gridItemHeight, gridItemWidth = _q.gridItemWidth;
-    if (activeResizeObserver) {
-        console.log('h,w: ', contentHeight, contentWidth);
-    }
+    var _q = useResizeObserver([isDragging, isResizing]), gridItemHeight = _q.gridItemHeight, gridItemWidth = _q.gridItemWidth;
+    var _r = useState(false), isHovered = _r[0], setIsHovered = _r[1];
+    useLayoutEffect(function () {
+        var node = elementRef.current;
+        if (!node) {
+            return;
+        }
+        var handleMouseEnter = function () { return setIsHovered(true); };
+        var handleMouseLeave = function () { return setIsHovered(false); };
+        node.addEventListener('mouseenter', handleMouseEnter);
+        node.addEventListener('mouseleave', handleMouseLeave);
+        return function () {
+            node.removeEventListener('mouseenter', handleMouseEnter);
+            node.removeEventListener('mouseleave', handleMouseLeave);
+        };
+    }, []);
     useEffect(function () {
+        if (isHovered) {
+            return;
+        }
         if (isDragging || isResizing) {
             return;
         }
@@ -70,7 +84,7 @@ var GridItem = function (_a) {
         return function () {
             observer.disconnect();
         };
-    }, [props.i, props.w, props.h, x, y, activeResizeObserver, isDragging, isResizing]);
+    }, [props.i, props.w, props.h, x, y, activeResizeObserver, isDragging, isResizing, isHovered]);
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -163,7 +177,7 @@ var GridItem = function (_a) {
         ];
         return (_jsx(Resizable, { draggableOpts: {
                 disabled: !isResizable,
-            }, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, minConstraints: minConstraints, maxConstraints: maxConstraints, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, transformScale: transformScale, resizeHandles: props.resizeHandles, handle: resizeHandle, children: child }));
+            }, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, minConstraints: minConstraints, maxConstraints: maxConstraints, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, transformScale: transformScale, resizeHandles: props.resizeHandles, handle: resizeHandle, placeholderObserver: activeResizeObserver, children: child }));
     };
     /**
      * onDragStart event handler
@@ -299,23 +313,24 @@ var GridItem = function (_a) {
         // NOTE: 확인필요
         shouldAutoShrink.current.initialHeight = gridItemHeight;
     };
-    var onResize = function (e, callbackData) {
-        var _a;
+    var onResize = function (e, callbackData, contentSize) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        console.log(contentSize);
         setIsResizing(true);
-        var _b = getDirectionOfMouseEvent(e), dirX = _b.dirX, dirY = _b.dirY;
+        var _j = getDirectionOfMouseEvent(e), dirX = _j.dirX, dirY = _j.dirY;
         var oneLetterSize = (_a = calculateCharacterWidthInDiv()) !== null && _a !== void 0 ? _a : 0;
         var shouldBlock = shouldBlockResize({
             handle: callbackData.handle,
             dirY: dirY,
             dirX: dirX,
-            contentHeight: contentHeight,
+            contentHeight: (_b = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _b !== void 0 ? _b : 0,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight,
             colHeight: rowHeight,
             gridItemWidth: callbackData.size.width,
             colWidth: colWidth,
-            contentWidth: contentWidth,
+            contentWidth: (_c = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width) !== null && _c !== void 0 ? _c : 0,
             oneLetterSize: oneLetterSize
         });
         if (resizing === null || resizing === void 0 ? void 0 : resizing.top) {
@@ -325,19 +340,19 @@ var GridItem = function (_a) {
             handle: callbackData.handle,
             dirX: dirX,
             dirY: dirY,
-            contentHeight: contentHeight,
+            contentHeight: (_d = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _d !== void 0 ? _d : 0,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight
         });
         if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-HEIGHT') {
-            callbackData.size.height = contentHeight;
+            callbackData.size.height = (_e = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _e !== void 0 ? _e : 0;
         }
         if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-WIDTH') {
-            callbackData.size.width = contentWidth;
+            callbackData.size.width = (_f = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width) !== null && _f !== void 0 ? _f : 0;
         }
         if (shouldResize === 'EXPAND') {
-            callbackData.size.height = contentHeight;
+            callbackData.size.height = (_g = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _g !== void 0 ? _g : 0;
             shouldAutoShrink.current.shouldAutoShrink = true;
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
@@ -348,7 +363,7 @@ var GridItem = function (_a) {
             }
         }
         if (shouldResize === 'SHRINK') {
-            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, contentHeight);
+            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, (_h = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height) !== null && _h !== void 0 ? _h : 0);
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
                 callbackData.handle = 'sw';
@@ -357,10 +372,6 @@ var GridItem = function (_a) {
                 callbackData.handle = 'se';
             }
         }
-        if (activeResizeObserver) {
-            console.log('shouldResize', shouldResize);
-            console.log('shouldBlock', shouldBlock);
-        }
         onResizeHandler(e, callbackData, "onResize");
     };
     /**
@@ -432,6 +443,7 @@ var GridItem = function (_a) {
     if (className === 'placeholder') {
         return newChild;
     }
+    console.log(activeResizeObserver);
     newChild = mixinResizable(newChild, pos, isResizable);
     newChild = mixinDraggable(newChild, isDraggable);
     return newChild;

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

@@ -79,6 +79,7 @@ export type GridItemProps = {
     isHiddenVisibility?: boolean;
     customColWidth?: number;
     activeResizeObserver?: boolean;
+    activeContentObserver?: boolean;
 };
 export type GridItemDefaultProps = {
     className: string;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -370,7 +370,9 @@ var ReactGridLayout = function (_a) {
         if (!item) {
             return null;
         }
-        return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, children: item && item }));
+        return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, 
+            // NOTE: text CB만
+            activeContentObserver: true, children: item && item }));
     };
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
@@ -393,10 +395,6 @@ var ReactGridLayout = function (_a) {
             : !l.static && isResizable;
         var resizeHandlesOptions = l.resizeHandles || resizeHandles;
         var bounded = draggable && isBounded && l.isBounded !== false;
-        console.log('------');
-        console.log('i', l.i);
-        console.log('child.props.className', child.props.className);
-        console.log('------');
         return (_jsx(GridItem, { className: "i-am-grid-item", 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, onContentSizeChange: onContentSizeChange, 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, activeResizeObserver: child.props.className === 'react-grid-item-selected', children: child }, l.i));
     };
     var onDragOverHandler = function (e) {

package/dist/lib/Resizable/Resizable.js

@@ -31,11 +31,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import DraggableCore from "../Draggable/DraggableCore";
 import { cloneElement } from "./utils/cloneElement";
 var Resizable = function (_a) {
     var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale"]);
+    var placeholderObserver = props.placeholderObserver;
     var handleRefs = useRef({
         s: useRef(null),
         n: useRef(null),
@@ -50,6 +51,31 @@ var Resizable = function (_a) {
     var startSize = useRef(null);
     var lastHandleRect = null;
     var slack = null;
+    var _j = useState({ width: 0, height: 0 }), content = _j[0], setContent = _j[1];
+    var placeholder = document.querySelector('.placeholder');
+    useEffect(function () {
+        var _a;
+        if (!placeholderObserver) {
+            return;
+        }
+        if (!placeholder) {
+            return;
+        }
+        var content = (_a = placeholder.children[0].children[0]) === null || _a === void 0 ? void 0 : _a.children[0];
+        if (!content) {
+            return;
+        }
+        var observer = new ResizeObserver(function (_a) {
+            var entry = _a[0];
+            var contentHeight = entry.target.clientHeight;
+            var contentWidth = entry.target.clientWidth;
+            setContent({ width: contentWidth, height: contentHeight });
+        });
+        observer.observe(content, { box: 'border-box' });
+        return function () {
+            observer.disconnect();
+        };
+    }, [placeholderObserver, placeholder]);
     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"]);
     var resetData = function () {
         lastHandleRect = slack = null;
@@ -209,7 +235,7 @@ var Resizable = function (_a) {
             React.Children.map(children.props.children, function (child) { return child; })
         ], resizeHandles.map(function (handleAxis) {
             var ref = (handleRefs === null || handleRefs === void 0 ? void 0 : handleRefs.current) && handleRefs.current[handleAxis];
-            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)));
+            return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler("onResizeStop", handleAxis), onStart: resizeHandler("onResizeStart", handleAxis), onDrag: resizeHandler("onResize", handleAxis, content) }), renderResizeHandle(handleAxis, ref)));
         }), true) }));
 };
 export default Resizable;

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

@@ -62,5 +62,6 @@ export type ResizableProps = {
     style?: CSSProperties;
     width: number;
     height: number;
+    placeholderObserver?: boolean;
 };
 export type ResizeHandleType = ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: Ref<HTMLElement>) => ReactElement<any>);

package/dist/lib/hooks/useResizeobserver.d.ts

@@ -4,8 +4,6 @@ type Size = {
     gridItemHeight: number;
     scrollHeight: number;
     clientHeight: number;
-    contentHeight: number;
-    contentWidth: number;
 };
 type UseResizeObserverResult = Size & {
     myHeightRef: RefObject<{

package/dist/lib/hooks/useResizeobserver.js

@@ -25,8 +25,6 @@ var initialSize = {
     gridItemHeight: 0,
     scrollHeight: 0,
     clientHeight: 0,
-    contentHeight: 0,
-    contentWidth: 0,
 };
 export function useResizeObserver(deps) {
     var previousSize = useRef(initialSize);
@@ -50,9 +48,8 @@ export function useResizeObserver(deps) {
             var newClientHeight = entry.target.clientHeight;
             var newContentHeight = (_c = (_b = entry.target.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.clientHeight;
             var newContentWidth = (_e = (_d = entry.target.children[0]) === null || _d === void 0 ? void 0 : _d.children[0]) === null || _e === void 0 ? void 0 : _e.clientWidth;
-            console.log('in observer effect', newContentHeight, newContentWidth);
             refvalue.current.myHeight = newContentHeight;
-            var newSize = { gridItemWidth: newWidth, gridItemHeight: newHeight, scrollHeight: newScrollHeight, clientHeight: newClientHeight, contentHeight: newContentHeight, contentWidth: newContentWidth };
+            var newSize = { gridItemWidth: newWidth, gridItemHeight: newHeight, scrollHeight: newScrollHeight, clientHeight: newClientHeight };
             previousSize.current = newSize;
             setSize(newSize);
         });

package/package.json

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