publ-echo-test 0.0.173 → 0.0.174

package/dist/lib/GridItem/GridItem.js

@@ -21,12 +21,23 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState, useCallback, } from 'react';
+import React, { useEffect, useRef, useState, useCallback, useMemo, } from 'react';
 import { DraggableCore } from '../Draggable';
 import classNames from '../../external-lib/classnames';
 import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from './utils/calculateUtils';
 import { perc, setTopLeft, setTransform, } from '../GridLayoutEditor/utils/renderHelpers';
 import { Resizable } from '../Resizable';
+// throttle 함수 추가
+var createThrottle = function (delay) {
+    var lastCall = 0;
+    return function () {
+        var now = Date.now();
+        if (now - lastCall < delay)
+            return false;
+        lastCall = now;
+        return true;
+    };
+};
 var GridItem = function (_a) {
     var _b;
     var children = _a.children, props = __rest(_a, ["children"]);
@@ -39,6 +50,8 @@ var GridItem = function (_a) {
     var _r = useState(false), pointerEventsNone = _r[0], setPointerEventsNone = _r[1];
     var elementRef = useRef(null);
     var isSelected = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.classList.contains('react-grid-item-selected');
+    // throttle 참조 추가
+    var throttleRef = useRef(createThrottle(16)); // 약 60fps
     useEffect(function () {
         var _a;
         if (!isSelected || !autoResize) {
@@ -142,7 +155,8 @@ var GridItem = function (_a) {
     //     });
     //   }
     // };
-    var getPositionParams = function (prop) {
+    // 메모이제이션된 위치 계산 함수
+    var getPositionParams = useCallback(function (prop) {
         if (prop === void 0) { prop = props; }
         return {
             cols: prop.cols,
@@ -152,8 +166,9 @@ var GridItem = function (_a) {
             maxRows: prop.maxRows,
             rowHeight: prop.rowHeight,
         };
-    };
+    }, [props.cols, props.containerPadding, props.containerWidth, props.margin, props.maxRows, props.rowHeight]);
     var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(getPositionParams());
+    // 스타일 메모이제이션
     var createStyle = useCallback(function (pos) {
         var usePercentages = props.usePercentages, containerWidth = props.containerWidth, useCSSTransforms = props.useCSSTransforms;
         var style;
@@ -243,6 +258,9 @@ var GridItem = function (_a) {
      */
     var onDrag = function (e, _a) {
         var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
+        // throttle 적용
+        if (!throttleRef.current())
+            return;
         if (!dragging) {
             throw new Error('onDrag called before onDragStart.');
         }
@@ -255,7 +273,6 @@ var GridItem = function (_a) {
             var offsetParent = node.offsetParent;
             if (offsetParent) {
                 var margin = props.margin, rowHeight = props.rowHeight;
-                // const colWidth =  calcGridColWidth(positionParams);
                 var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
                 var bottomBoundary = offsetParent.clientHeight -
                     calcGridItemWHPx(h, rowHeightNumber, margin[1]);
@@ -266,6 +283,7 @@ var GridItem = function (_a) {
         }
         var newPosition = { top: top, left: left };
         setDragging(newPosition);
+        // 계산 최적화
         var _b = calcXY(positionParams, top, left, w, h), x = _b.x, y = _b.y;
         props.onDrag && props.onDrag(i, x, y, { e: e, node: node, newPosition: newPosition });
     };
@@ -342,6 +360,9 @@ var GridItem = function (_a) {
      * @param  {Object} callbackData  an object with node and size information
      */
     var onResize = function (e, callbackData) {
+        // throttle 적용
+        if (!throttleRef.current())
+            return;
         setIsResizing(true);
         onResizeHandler(e, callbackData, 'onResize');
     };
@@ -390,10 +411,13 @@ var GridItem = function (_a) {
         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);
     };
-    var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
-        dragging: dragging,
-        resizing: resizing,
-    }, colWidth);
+    // 렌더링 최적화
+    var pos = useMemo(function () {
+        return calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
+            dragging: dragging,
+            resizing: resizing,
+        }, colWidth);
+    }, [x, y, z, w, h, dragging, resizing, colWidth, getPositionParams]);
     var child = React.Children.only(children);
     var newChild = React.cloneElement(child, {
         key: i,

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -227,6 +227,7 @@ var ReactGridLayout = function (_a) {
             i: i,
         };
         var isUserAction = true;
+        // 레이아웃 계산 최적화
         var newLayout = isGroup
             ? layout
             : moveElement({
@@ -241,19 +242,21 @@ var ReactGridLayout = function (_a) {
                 allowOverlap: allowOverlap,
             });
         if (isGroup) {
+            // 그룹 이동 시 배치 최적화
+            var movedItems_1 = new Map();
             oldGroupChildren.forEach(function (item) {
                 var layoutItem = getLayoutItem(layout, item.i);
-                newLayout = moveElement({
-                    layout: layout,
-                    l: layoutItem,
-                    x: item.x + xgap,
-                    y: item.y + ygap,
-                    isUserAction: isUserAction,
-                    preventCollision: preventCollision,
-                    compactType: compactType,
-                    cols: cols,
-                    allowOverlap: allowOverlap,
-                });
+                if (!layoutItem)
+                    return;
+                var newPos = __assign(__assign({}, layoutItem), { x: item.x + xgap, y: item.y + ygap });
+                movedItems_1.set(item.i, newPos);
+            });
+            // 한 번에 레이아웃 업데이트
+            newLayout = layout.map(function (item) {
+                if (movedItems_1.has(item.i)) {
+                    return __assign(__assign({}, item), movedItems_1.get(item.i));
+                }
+                return item;
             });
         }
         props.onDrag &&

package/package.json

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