publ-echo 0.0.63 → 0.0.64

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, { 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, calculateCharacterWidthInDiv, clamp, resolveRowHeight, } from "./utils/calculateUtils";
@@ -43,6 +43,30 @@ var GridItem = function (_a) {
         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.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;
@@ -365,7 +389,6 @@ var GridItem = function (_a) {
         if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-HEIGHT') {
             callbackData.size.height = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height;
         }
-        console.log(shouldBlock);
         if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-WIDTH') {
             callbackData.size.width = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width;
         }

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/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/package.json

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