publ-echo 0.0.56 → 0.0.58

package/dist/lib/GridItem/GridItem.js

@@ -42,7 +42,7 @@ var GridItem = function (_a) {
     var _q = useResizeObserver({
         ref: elementRef,
         box: 'border-box',
-    }, [isDragging, isResizing]), _r = _q.width, width = _r === void 0 ? 0 : _r, _s = _q.height, height = _s === void 0 ? 0 : _s, _t = _q.clientHeight, clientHeight = _t === void 0 ? 0 : _t, _u = _q.scrollHeight, scrollHeight = _u === void 0 ? 0 : _u;
+    }, [isDragging, isResizing]), _r = _q.width, width = _r === void 0 ? 0 : _r, _s = _q.height, height = _s === void 0 ? 0 : _s, _t = _q.clientHeight, clientHeight = _t === void 0 ? 0 : _t, _u = _q.scrollHeight, scrollHeight = _u === void 0 ? 0 : _u, textContentHeight = _q.textContentHeight, myHeightRef = _q.myHeightRef;
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -275,16 +275,70 @@ var GridItem = function (_a) {
      * @param  {ResizeEventType}  e             event data
      * @param  {Object} callbackData  an object with node and size information
      */
+    // const onResizeCallback = useCallback((
+    //   e:ResizeEventType,
+    //   callbackData:ResizeCallbackData
+    // ) => {
+    //   setIsResizing(true);
+    //   const { dirX, dirY } = getDirectionOfMouseEvent(e as MouseEvent);
+    //   const shouldBlock = shouldBlockResize({
+    //     handle: callbackData.handle, 
+    //     direction: dirY!, 
+    //     contentHeight: textContentHeight!,
+    //     gridItemHeight: callbackData.size.height,
+    //     shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
+    //     initialHeight: shouldAutoShrink.current.initialHeight,
+    //     colHeight: rowHeight as number
+    //   })
+    //   if (resizing?.top) {
+    //     callbackData.size.top = resizing?.top
+    //   }
+    //   const shouldResize = shouldAutoResize({ 
+    //     handle: callbackData.handle, 
+    //     dirX: dirX!, 
+    //     dirY: dirY!,
+    //     contentHeight: textContentHeight!,
+    //     gridItemHeight: callbackData.size.height,
+    //     shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
+    //     initialHeight: shouldAutoShrink.current.initialHeight
+    //   })
+    //   console.log(shouldResize)
+    //   if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK') {
+    //     callbackData.size.height = textContentHeight!;
+    //   }
+    //   if (shouldResize === 'EXPAND') {
+    //     callbackData.size.height = textContentHeight!;
+    //     shouldAutoShrink.current.shouldAutoShrink = true;
+    //     // NOTE: 배포전에 무조건 변경
+    //     if (callbackData.handle === 'nw') {
+    //       callbackData.handle = 'w';
+    //     }
+    //     if (callbackData.handle === 'ne') {
+    //       callbackData.handle = 'se';
+    //     }
+    //   }
+    //   if (shouldResize === 'SHRINK') {
+    //     callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, textContentHeight!);
+    //     // NOTE: 배포전에 무조건 변경
+    //     if (callbackData.handle === 'nw') {
+    //       callbackData.handle = 'sw'
+    //     }
+    //     if (callbackData.handle === 'ne') {
+    //       callbackData.handle = 'se'
+    //     }
+    //   }
+    //   onResizeHandler(e, callbackData, "onResize");
+    // }, [textContentHeight])
     var onResize = function (e, callbackData) {
-        var _a, _b;
+        var _a;
         setIsResizing(true);
-        var _c = getDirectionOfMouseEvent(e), dirX = _c.dirX, dirY = _c.dirY;
-        var contentHeight = (_b = (_a = callbackData.node.parentNode) === null || _a === void 0 ? void 0 : _a.children[0].children[0].children[0].clientHeight) !== null && _b !== void 0 ? _b : 0;
-        console.log(contentHeight);
+        var _b = getDirectionOfMouseEvent(e), dirX = _b.dirX, dirY = _b.dirY;
+        var myh = (_a = myHeightRef.current) === null || _a === void 0 ? void 0 : _a.myHeight;
+        console.log('myh: ', myh);
         var shouldBlock = shouldBlockResize({
             handle: callbackData.handle,
             direction: dirY,
-            contentHeight: contentHeight,
+            contentHeight: myh,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight,
@@ -297,17 +351,17 @@ var GridItem = function (_a) {
             handle: callbackData.handle,
             dirX: dirX,
             dirY: dirY,
-            contentHeight: contentHeight,
+            contentHeight: myh,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight
         });
         console.log(shouldResize);
         if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK') {
-            callbackData.size.height = contentHeight;
+            callbackData.size.height = myh;
         }
         if (shouldResize === 'EXPAND') {
-            callbackData.size.height = contentHeight;
+            callbackData.size.height = myh;
             shouldAutoShrink.current.shouldAutoShrink = true;
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
@@ -318,7 +372,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, myh);
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
                 callbackData.handle = 'sw';

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

@@ -13,7 +13,11 @@ type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
     onResize?: ResizeHandler;
     box?: BoxOptions;
 };
-type UseResizeObserverResult = Size;
+type UseResizeObserverResult = Size & {
+    myHeightRef: RefObject<{
+        myHeight: number;
+    }>;
+};
 /**
  * Custom hook for observing the size of an element using the ResizeObserver API.
  *

package/dist/lib/hooks/useResizeobserver.js

@@ -18,7 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { useEffect, useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { useIsMounted } from './useIsMounted';
 var initialSize = {
     width: undefined,
@@ -50,11 +50,12 @@ var initialSize = {
 export function useResizeObserver(options, deps) {
     var ref = options.ref, _a = options.box, box = _a === void 0 ? 'content-box' : _a;
     var _b = useState(initialSize), size = _b[0], setSize = _b[1];
+    var refvalue = useRef({ myHeight: 0 });
     var isMounted = useIsMounted();
     var previousSize = useRef(__assign({}, initialSize));
     var onResize = useRef(undefined);
     onResize.current = options === null || options === void 0 ? void 0 : options.onResize;
-    useEffect(function () {
+    useLayoutEffect(function () {
         if (!(ref === null || ref === void 0 ? void 0 : ref.current))
             return;
         var placeholder = document.querySelector('.placeholder');
@@ -77,6 +78,7 @@ export function useResizeObserver(options, deps) {
             var newScrollHeight = entry.target.scrollHeight;
             var newClientHeight = entry.target.clientHeight;
             var newTextContentHeight = (_d = (_c = (_b = entry.target.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
+            refvalue.current.myHeight = newTextContentHeight;
             var hasChanged = previousSize.current.width !== newWidth ||
                 previousSize.current.height !== newHeight ||
                 previousSize.current.scrollHeight !== newScrollHeight ||
@@ -101,7 +103,7 @@ export function useResizeObserver(options, deps) {
             observer.disconnect();
         };
     }, __spreadArray([box, ref, isMounted], deps, true));
-    return size;
+    return __assign(__assign({}, size), { myHeightRef: refvalue });
 }
 function extractSize(entry, box, sizeType) {
     if (!entry[box]) {

package/package.json

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