publ-echo-test 0.0.172 → 0.0.174

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { GridItemProps } from './types';
 import { PropsWithChildren } from '../types';
-declare const GridItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export default GridItem;
+declare const _default: React.MemoExoticComponent<({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default _default;

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, } 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,9 +166,10 @@ 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 = function (pos) {
+    // 스타일 메모이제이션
+    var createStyle = useCallback(function (pos) {
         var usePercentages = props.usePercentages, containerWidth = props.containerWidth, useCSSTransforms = props.useCSSTransforms;
         var style;
         if (useCSSTransforms) {
@@ -170,8 +185,12 @@ var GridItem = function (_a) {
                 style.width = perc(pos.width / containerWidth);
             }
         }
+        // 드래그나 리사이즈 중일 때만 will-change 추가
+        if (isDragging || isResizing) {
+            style.willChange = 'transform';
+        }
         return style;
-    };
+    }, [props.usePercentages, props.containerWidth, props.useCSSTransforms, isDragging, isResizing]);
     /**
      * Mix a Draggable instance into a child.
      * @param  {Element} child    Child element.
@@ -239,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.');
         }
@@ -251,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]);
@@ -262,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 });
     };
@@ -338,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');
     };
@@ -386,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,
@@ -415,4 +443,12 @@ var GridItem = function (_a) {
     newChild = mixinDraggable(newChild, isDraggable);
     return newChild;
 };
-export default GridItem;
+export default React.memo(GridItem, function (prevProps, nextProps) {
+    // 필요한 속성만 비교하여 불필요한 리렌더링 방지
+    return (prevProps.x === nextProps.x &&
+        prevProps.y === nextProps.y &&
+        prevProps.w === nextProps.w &&
+        prevProps.h === nextProps.h &&
+        prevProps.isDraggable === nextProps.isDraggable &&
+        prevProps.isResizable === nextProps.isResizable);
+});

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -34,7 +34,7 @@ import * as React from 'react';
 import { useState, useRef, useLayoutEffect } from 'react';
 import classNames from '../../external-lib/classnames';
 import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from './utils/renderHelpers';
-import { calcGridColWidth, calcXY, resolveRowHeight, } from '../GridItem/utils/calculateUtils';
+import { calcGridColWidth, calcGridItemPosition, calcXY, resolveRowHeight, } from '../GridItem/utils/calculateUtils';
 import GridItem from '../GridItem/GridItem';
 import isEqual from '../../external-lib/lodash.isEqual';
 import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, findParentGroupBlock, formatCbIdToBlockId, getBlockSpecificType, zIndexMap, } from './group';
@@ -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 &&
@@ -739,7 +742,31 @@ var ReactGridLayout = function (_a) {
     var currentGroupBlocks = blockStructure
         ? findGroupBlocks(blockStructure, editingGroupBlock)
         : [];
-    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: 'grid-guide-line-center' }), activeDrag && (_jsx("div", { className: 'grid-placeholder', style: {
+    // 화면에 보이는 아이템만 렌더링
+    var visibleItems = React.useMemo(function () {
+        if (!containerHeight)
+            return layout;
+        // 화면에 보이는 영역 계산
+        var visibleTop = window.scrollY;
+        var visibleBottom = visibleTop + window.innerHeight;
+        // 여유 공간 추가 (스크롤 시 부드러운 전환을 위해)
+        var buffer = resolveRowHeight(rowHeight, colWidth) * 2;
+        return layout.filter(function (item) {
+            var _a;
+            var itemPos = calcGridItemPosition(getPositionParams(), item.x, item.y, (_a = item.z) !== null && _a !== void 0 ? _a : 0, item.w, item.h);
+            return (itemPos.top < visibleBottom + buffer) && (itemPos.top + itemPos.height > visibleTop - buffer);
+        });
+    }, [layout, window.scrollY, window.innerHeight, rowHeight, colWidth]);
+    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) {
+                var _a;
+                var key = (_a = child.key) === null || _a === void 0 ? void 0 : _a.toString();
+                if (!key)
+                    return null;
+                var item = visibleItems.find(function (item) { return item.i === key; });
+                if (!item)
+                    return null;
+                return processGridItem(child);
+            }), placeholder(), activeDrag && _jsx("div", { className: 'grid-guide-line-center' }), activeDrag && (_jsx("div", { className: 'grid-placeholder', style: {
                     marginTop: margin[1] + 'px',
                     marginBottom: margin[1] + 'px',
                     marginLeft: margin[0] + 'px',

package/package.json

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