publ-echo 0.0.62 → 0.0.64

package/dist/lib/GridItem/GridItem.js

@@ -21,10 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { DraggableCore } from "../Draggable";
 import classNames from "../../external-lib/classnames";
-import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from "./utils/calculateUtils";
+import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, calculateCharacterWidthInDiv, clamp, resolveRowHeight, } from "./utils/calculateUtils";
 import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/renderHelpers";
 import { Resizable } from "../Resizable";
 import { useResizeObserver } from "../hooks/useResizeobserver";
@@ -42,7 +42,31 @@ 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, textContentHeight = _q.textContentHeight;
+    }, [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.contentHeight;
+    useEffect(function () {
+        if (!elementRef.current || !props.onContentSizeChange) {
+            return;
+        }
+        var observer = new ResizeObserver(function (_a) {
+            var _b, _c, _d, _e;
+            var entry = _a[0];
+            var newClientHeight = entry.target.clientHeight;
+            var newClientWidth = entry.target.clientWidth;
+            var _f = entry.target, clientTop = _f.clientTop, clientLeft = _f.clientLeft;
+            var containerHeight = (_c = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) !== null && _c !== void 0 ? _c : 0;
+            var containerWidth = (_e = (_d = elementRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth) !== null && _e !== void 0 ? _e : 0;
+            if (newClientHeight < containerHeight && newClientWidth < containerWidth) {
+                return;
+            }
+            var _g = calcWH(getPositionParams(), { width: newClientWidth, height: newClientHeight }, x, y, 'se', props.w, props.h), w = _g.w, h = _g.h;
+            props.onContentSizeChange(props.i, { x: x, y: y, w: w, h: h });
+        });
+        observer.observe(elementRef.current.children[0].children[0].children[0], { box: 'border-box' });
+        return function () {
+            observer.disconnect();
+        };
+    }, [scrollHeight, props]);
+    console.log(textContentHeight);
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -331,17 +355,24 @@ var GridItem = function (_a) {
     //   }
     //   onResizeHandler(e, callbackData, "onResize");
     // }, [textContentHeight])
-    var onResize = function (e, callbackData, gridItemHeight) {
+    var onResize = function (e, callbackData, contentSize) {
+        var _a;
         setIsResizing(true);
-        var _a = getDirectionOfMouseEvent(e), dirX = _a.dirX, dirY = _a.dirY;
+        var _b = getDirectionOfMouseEvent(e), dirX = _b.dirX, dirY = _b.dirY;
+        var oneLetterSize = (_a = calculateCharacterWidthInDiv()) !== null && _a !== void 0 ? _a : 0;
         var shouldBlock = shouldBlockResize({
             handle: callbackData.handle,
-            direction: dirY,
-            contentHeight: gridItemHeight,
+            dirY: dirY,
+            dirX: dirX,
+            contentHeight: contentSize === null || contentSize === void 0 ? void 0 : contentSize.height,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight,
-            colHeight: rowHeight
+            colHeight: rowHeight,
+            gridItemWidth: callbackData.size.width,
+            colWidth: colWidth,
+            contentWidth: contentSize === null || contentSize === void 0 ? void 0 : contentSize.width,
+            oneLetterSize: oneLetterSize
         });
         if (resizing === null || resizing === void 0 ? void 0 : resizing.top) {
             callbackData.size.top = resizing === null || resizing === void 0 ? void 0 : resizing.top;
@@ -350,17 +381,19 @@ var GridItem = function (_a) {
             handle: callbackData.handle,
             dirX: dirX,
             dirY: dirY,
-            contentHeight: gridItemHeight,
+            contentHeight: contentSize === null || contentSize === void 0 ? void 0 : contentSize.height,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight
         });
-        console.log(shouldResize);
-        if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK') {
-            callbackData.size.height = gridItemHeight;
+        if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-HEIGHT') {
+            callbackData.size.height = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height;
+        }
+        if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-WIDTH') {
+            callbackData.size.width = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width;
         }
         if (shouldResize === 'EXPAND') {
-            callbackData.size.height = gridItemHeight;
+            callbackData.size.height = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height;
             shouldAutoShrink.current.shouldAutoShrink = true;
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
@@ -371,7 +404,7 @@ var GridItem = function (_a) {
             }
         }
         if (shouldResize === 'SHRINK') {
-            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, gridItemHeight);
+            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, contentSize === null || contentSize === void 0 ? void 0 : contentSize.height);
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
                 callbackData.handle = 'sw';
@@ -447,6 +480,7 @@ var GridItem = function (_a) {
         }),
         style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
     });
+    // NOTE: 제외
     if (className === 'placeholder') {
         return newChild;
     }

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

@@ -75,6 +75,7 @@ export type GridItemProps = {
     onResize?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
+    onContentSizeChange?: any;
     isHiddenVisibility?: boolean;
     customColWidth?: number;
 };

package/dist/lib/GridItem/utils/autoResizeUtils.d.ts

@@ -13,12 +13,17 @@ type Props = {
 export declare function shouldAutoResize({ handle, dirX, dirY, contentHeight, gridItemHeight, shouldAutoShrink, initialHeight }: Props): "SHRINK" | "EXPAND" | "NONE";
 type BlockDetectProp = {
     handle: Handle;
-    direction: DirectionY;
+    dirY: DirectionY;
+    dirX: DirectionX;
     contentHeight: number;
     gridItemHeight: number;
     shouldAutoShrink: boolean;
     initialHeight: number;
     colHeight: number;
+    gridItemWidth: number;
+    colWidth: number;
+    contentWidth: number;
+    oneLetterSize: number;
 };
-export declare function shouldBlockResize({ handle, direction, contentHeight, gridItemHeight, shouldAutoShrink, initialHeight, colHeight }: BlockDetectProp): "NONE" | "BLOCK";
+export declare function shouldBlockResize({ handle, dirY, dirX, contentHeight, gridItemHeight, shouldAutoShrink, initialHeight, colHeight, gridItemWidth, colWidth, contentWidth, oneLetterSize }: BlockDetectProp): "NONE" | "BLOCK-HEIGHT" | "BLOCK-WIDTH";
 export {};

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

@@ -28,15 +28,22 @@ export function shouldAutoResize(_a) {
     return 'NONE';
 }
 export function shouldBlockResize(_a) {
-    var handle = _a.handle, direction = _a.direction, contentHeight = _a.contentHeight, gridItemHeight = _a.gridItemHeight, shouldAutoShrink = _a.shouldAutoShrink, initialHeight = _a.initialHeight, colHeight = _a.colHeight;
+    var handle = _a.handle, dirY = _a.dirY, dirX = _a.dirX, contentHeight = _a.contentHeight, gridItemHeight = _a.gridItemHeight, shouldAutoShrink = _a.shouldAutoShrink, initialHeight = _a.initialHeight, colHeight = _a.colHeight, gridItemWidth = _a.gridItemWidth, colWidth = _a.colWidth, contentWidth = _a.contentWidth, oneLetterSize = _a.oneLetterSize;
     var nextGridHeight = gridItemHeight - colHeight;
-    var shouldBlock = contentHeight > nextGridHeight;
-    var shouldShrink = gridItemHeight > contentHeight;
-    if (handle.includes('n') && direction === 'down' && shouldBlock) {
-        return 'BLOCK';
+    var shouldBlockHeight = contentHeight > nextGridHeight;
+    var nextGridWidth = gridItemWidth - colWidth;
+    var shouldBlockWidth = oneLetterSize > nextGridWidth;
+    if (handle.includes('n') && dirY === 'down' && shouldBlockHeight) {
+        return 'BLOCK-HEIGHT';
+    }
+    if (handle.includes('s') && dirY === 'up' && shouldBlockHeight) {
+        return 'BLOCK-HEIGHT';
+    }
+    if (handle.includes('e') && dirX === 'left' && shouldBlockWidth) {
+        return 'BLOCK-WIDTH';
     }
-    if (handle.includes('s') && direction === 'up' && shouldBlock) {
-        return 'BLOCK';
+    if (handle.includes('w') && dirX === 'right' && shouldBlockWidth) {
+        return 'BLOCK-WIDTH';
     }
     // if (handle.includes('e') && direction === 'right' && shouldShrink && shouldAutoShrink) {
     //   return 'SHRINK';

package/dist/lib/GridItem/utils/calculateUtils.d.ts

@@ -28,3 +28,4 @@ export declare function calcWH(positionParams: PositionParams, { width, height }
     h: number;
 };
 export declare function clamp(num: number, lowerBound: number, upperBound: number): number;
+export declare function calculateCharacterWidthInDiv(): number | undefined;

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

@@ -106,3 +106,31 @@ export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH) {
 export function clamp(num, lowerBound, upperBound) {
     return Math.max(Math.min(num, upperBound), lowerBound);
 }
+export function calculateCharacterWidthInDiv() {
+    var _a, _b, _c, _d;
+    var div = document.querySelector('.react-grid-item.isResizing');
+    if (!div)
+        return;
+    var contentDiv = (_b = (_a = div.children[0]) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.children[0];
+    if (!contentDiv)
+        return;
+    // Clone the contentDiv for measurement
+    var span = document.createElement('span');
+    document.body.appendChild(span);
+    // Use a sample character for measurement
+    span.textContent = (_d = (_c = contentDiv.textContent) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : 'M';
+    // Apply necessary styles to mimic the original environment
+    // Note: Add any other styles that affect text size and rendering
+    var computedStyle = window.getComputedStyle(contentDiv);
+    span.style.fontFamily = computedStyle.fontFamily;
+    span.style.fontSize = computedStyle.fontSize;
+    span.style.fontWeight = computedStyle.fontWeight;
+    span.style.letterSpacing = computedStyle.letterSpacing;
+    span.style.padding = computedStyle.padding;
+    span.style.border = computedStyle.border;
+    span.style.position = 'absolute';
+    span.style.visibility = 'hidden';
+    var spanWidth = span.getBoundingClientRect().width;
+    document.body.removeChild(span);
+    return spanWidth;
+}

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -266,6 +266,20 @@ var ReactGridLayout = function (_a) {
                 node: node,
             });
     };
+    // NOTE: 임시
+    var onContentSizeChange = function (i, pos) {
+        var _a = withLayoutItem(layout, i, function (l) {
+            l.w = pos.w;
+            l.h = pos.h;
+            l.x = pos.x;
+            l.y = pos.y;
+            return l;
+        }), newLayout = _a[0], l = _a[1];
+        if (!l) {
+            return;
+        }
+        setLayout(newLayout);
+    };
     var onResizeHandler = function (i, w, h, _a, x, y) {
         var e = _a.e, node = _a.node;
         var _b = withLayoutItem(layout, i, function (l) {
@@ -378,7 +392,7 @@ var ReactGridLayout = function (_a) {
             : !l.static && isResizable;
         var resizeHandlesOptions = l.resizeHandles || resizeHandles;
         var bounded = draggable && isBounded && l.isBounded !== false;
-        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, 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, children: child }, l.i));
+        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, children: child }, l.i));
     };
     var onDragOverHandler = function (e) {
         var _a;

package/dist/lib/Resizable/Resizable.js

@@ -51,8 +51,7 @@ var Resizable = function (_a) {
     var _j = useResizeObserver({
         ref: elementRef,
         box: 'border-box',
-    }, [props.onResize]), textContentHeight = _j.textContentHeight, myHeightRef = _j.myHeightRef;
-    console.log("%c ".concat(textContentHeight), 'background: #ff0000; color: #ffffff');
+    }, [props.onResize]), contentHeight = _j.contentHeight, contentWidth = _j.contentWidth;
     var startPosition = useRef(null);
     var startSize = useRef(null);
     var lastHandleRect = null;
@@ -133,8 +132,8 @@ var Resizable = function (_a) {
         }
         return [newTop, newLeft];
     };
-    var resizeHandler = function (handlerName, handleAxis, textContentHeight) {
-        return function (e, _a, textContent) {
+    var resizeHandler = function (handlerName, handleAxis, contentSize) {
+        return function (e, _a) {
             var _b, _c;
             var _d, _e, _f, _g, _h, _j;
             var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
@@ -191,7 +190,7 @@ var Resizable = function (_a) {
             var cb = typeof props[handlerName] === "function" ? props[handlerName] : null;
             var isCbSkipped = handlerName === "onResize" && !isDimensionsChanged;
             if (cb && !isCbSkipped) {
-                cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis }, textContentHeight !== null && textContentHeight !== void 0 ? textContentHeight : -1);
+                cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis }, contentSize);
             }
             if (handlerName === "onResizeStop") {
                 startPosition.current = null;
@@ -216,7 +215,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, textContentHeight) }), 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, { height: contentHeight !== null && contentHeight !== void 0 ? contentHeight : 0, width: contentWidth !== null && contentWidth !== void 0 ? contentWidth : 0 }) }), renderResizeHandle(handleAxis, ref)));
         }), true) }));
 };
 export default Resizable;

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

@@ -49,7 +49,10 @@ export type ResizableProps = {
     handle?: ResizeHandleType;
     onResizeStop?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
     onResizeStart?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
-    onResize?: (e: SyntheticEvent<any>, data: ResizeCallbackData, gridItemHeight?: number) => any;
+    onResize?: (e: SyntheticEvent<any>, data: ResizeCallbackData, contentSize?: {
+        height: number;
+        width: number;
+    }) => any;
     handleSize?: [number, number];
     lockAspectRatio?: boolean;
     minConstraints?: [number, number];

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

@@ -4,7 +4,8 @@ type Size = {
     height: number | undefined;
     scrollHeight: number | undefined;
     clientHeight: number | undefined;
-    textContentHeight: number | undefined;
+    contentHeight: number | undefined;
+    contentWidth: number | undefined;
 };
 type ResizeHandler = (size: Size) => void;
 type BoxOptions = 'border-box' | 'content-box' | 'device-pixel-content-box';

package/dist/lib/hooks/useResizeobserver.js

@@ -25,7 +25,8 @@ var initialSize = {
     height: undefined,
     scrollHeight: undefined,
     clientHeight: undefined,
-    textContentHeight: undefined,
+    contentHeight: undefined,
+    contentWidth: undefined,
 };
 /**
  * Custom hook for observing the size of an element using the ResizeObserver API.
@@ -49,10 +50,10 @@ var initialSize = {
  */
 export function useResizeObserver(options, deps) {
     var ref = options.ref, _a = options.box, box = _a === void 0 ? 'content-box' : _a;
+    var previousSize = useRef(initialSize);
     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;
     useLayoutEffect(function () {
@@ -66,7 +67,7 @@ export function useResizeObserver(options, deps) {
             return;
         }
         var observer = new ResizeObserver(function (_a) {
-            var _b, _c, _d;
+            var _b, _c, _d, _e, _f, _g;
             var entry = _a[0];
             var boxProp = box === 'border-box'
                 ? 'borderBoxSize'
@@ -77,15 +78,16 @@ export function useResizeObserver(options, deps) {
             var newHeight = extractSize(entry, boxProp, 'blockSize');
             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 newContentHeight = (_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;
+            var newContentWidth = (_g = (_f = (_e = entry.target.children[0]) === null || _e === void 0 ? void 0 : _e.children[0]) === null || _f === void 0 ? void 0 : _f.clientWidth) !== null && _g !== void 0 ? _g : 0;
+            refvalue.current.myHeight = newContentHeight;
             // const hasChanged =
             //   previousSize.current.width !== newWidth ||
             //   previousSize.current.height !== newHeight ||
             //   previousSize.current.scrollHeight !== newScrollHeight ||
             //   previousSize.current.clientHeight !== newClientHeight ||
             //   previousSize.current.textContentHeight !== newTextContentHeight
-            var newSize = { width: newWidth, height: newHeight, scrollHeight: newScrollHeight, clientHeight: newClientHeight, textContentHeight: newTextContentHeight };
+            var newSize = { width: newWidth, height: newHeight, scrollHeight: newScrollHeight, clientHeight: newClientHeight, contentHeight: newContentHeight, contentWidth: newContentWidth };
             previousSize.current = newSize;
             setSize(newSize);
             // if (hasChanged) {
@@ -106,7 +108,6 @@ export function useResizeObserver(options, deps) {
             observer.disconnect();
         };
     }, __spreadArray([box, ref, isMounted], deps, true));
-    console.log('--SIZE FROM OBSERVER--', size.textContentHeight);
     return __assign(__assign({}, size), { myHeightRef: refvalue });
 }
 function extractSize(entry, box, sizeType) {

package/package.json

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