publ-echo-test 0.0.105 → 0.0.107

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { GridItemProps } from "./types";
 import { PropsWithChildren } from "../types";
-declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & {
+    onContextGroup: (e: React.MouseEvent) => void;
+}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default GroupItem;

package/dist/lib/GridItem/GroupItem.js

@@ -26,11 +26,10 @@ 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";
 var GroupItem = function (_a) {
     var _b;
     var children = _a.children, props = __rest(_a, ["children"]);
-    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
+    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize, onContextGroup = props.onContextGroup;
     var _l = useState(), resizing = _l[0], setResizing = _l[1];
     var _m = useState(), dragging = _m[0], setDragging = _m[1];
     var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
@@ -173,33 +172,58 @@ var GroupItem = function (_a) {
     var mixinDraggable = function (child, isDraggable) {
         return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
     };
-    /**
-     * Mix a Resizable instance into a child.
-     * @param  {Element} child    Child element.
-     * @param  {Object} position  Position object (pixel values)
-     * @return {Element}          Child wrapped in Resizable.
-     */
-    var mixinResizable = function (child, position, isResizable) {
-        var positionParams = getPositionParams();
-        // const maxWidth = calcGridItemPosition(
-        //   positionParams,
-        //   x,
-        //   y,
-        //   z,
-        //   cols - x, // TODO - 수정 필요
-        //   h
-        // ).width;
-        var mins = calcGridItemPosition(positionParams, x, y, z, minW, minH);
-        var maxes = calcGridItemPosition(positionParams, x, y, z, maxW, maxH);
-        var minConstraints = [mins.width, mins.height];
-        var maxConstraints = [
-            Math.min(maxes.width, containerWidth),
-            Math.min(maxes.height, Infinity),
-        ];
-        return (_jsx(Resizable, { draggableOpts: {
-                disabled: !isResizable,
-            }, className: "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
-    };
+    // /**
+    //  * Mix a Resizable instance into a child.
+    //  * @param  {Element} child    Child element.
+    //  * @param  {Object} position  Position object (pixel values)
+    //  * @return {Element}          Child wrapped in Resizable.
+    //  */
+    // const mixinResizable = (
+    //   child: ReactElement<any>,
+    //   position: Position,
+    //   isResizable: boolean
+    // ): ReactElement<any> => {
+    //   const positionParams = getPositionParams();
+    //   // const maxWidth = calcGridItemPosition(
+    //   //   positionParams,
+    //   //   x,
+    //   //   y,
+    //   //   z,
+    //   //   cols - x, // TODO - 수정 필요
+    //   //   h
+    //   // ).width;
+    //   const mins = calcGridItemPosition(positionParams, x, y, z, minW, minH);
+    //   const maxes = calcGridItemPosition(positionParams, x, y, z, maxW, maxH);
+    //   const minConstraints = [mins.width, mins.height] as [number, number];
+    //   const maxConstraints = [
+    //     Math.min(maxes.width, containerWidth),
+    //     Math.min(maxes.height, Infinity),
+    //   ] as [number, number];
+    //   return (
+    //     <Resizable
+    //       draggableOpts={{
+    //         disabled: !isResizable,
+    //       }}
+    //       className={"react-resizable-hide"}
+    //       width={position.width}
+    //       height={position.height}
+    //       top={position.top}
+    //       left={position.left}
+    //       onResizeStop={onResizeStop}
+    //       onResizeStart={onResizeStart}
+    //       onResize={onResize}
+    //       minConstraints={minConstraints}
+    //       maxConstraints={maxConstraints}
+    //       transformScale={transformScale}
+    //       isResizing={isResizing}
+    //       autoResize={autoResize}
+    //       colWidth={colWidth}
+    //       margin={props.margin}
+    //     >
+    //       {child}
+    //     </Resizable>
+    //   );
+    // };
     /**
      * onDragStart event handler
      * @param  {Event}  e             event data
@@ -397,8 +421,11 @@ var GroupItem = function (_a) {
             cssTransforms: useCSSTransforms,
         }),
         style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
+        onContextMenu: function (e) {
+            onContextGroup(e);
+        },
     });
-    newChild = mixinResizable(newChild, pos, isResizable);
+    // newChild = mixinResizable(newChild, pos, isResizable);
     newChild = mixinDraggable(newChild, isDraggable);
     return newChild;
 };

package/dist/lib/GridLayoutEditor/ReactGridLayout.d.ts

@@ -2,5 +2,7 @@ import * as React from "react";
 import type { ReactElement } from "react";
 import { PropsWithChildren } from "../types";
 import { ReactGridLayoutProps } from "./types";
-declare const ReactGridLayout: ({ children, ...props }: PropsWithChildren<ReactGridLayoutProps>) => React.ReactElement;
+declare const ReactGridLayout: ({ children, ...props }: PropsWithChildren<ReactGridLayoutProps & {
+    onContextGroup?: ((e: React.MouseEvent, blockId: string, isEditingGroup: boolean) => void) | undefined;
+}>) => React.ReactElement;
 export default ReactGridLayout;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -310,6 +310,59 @@ var ReactGridLayout = function (_a) {
         setOldGroupChildren([]);
         props.onLayoutChange && props.onLayoutChange(newLayout);
     };
+    var onDragStopGroupHandler = function (i, x, y, _a) {
+        var _b;
+        var e = _a.e, node = _a.node;
+        if (!activeDrag || !oldDragItem) {
+            return;
+        }
+        ;
+        var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
+        if (!l)
+            return;
+        // NOTE: z-index 원래대로 복귀
+        l.z = oldDragItem.z;
+        var isUserAction = true;
+        var movedLayout = moveElement({
+            layout: layout,
+            l: l,
+            x: x,
+            y: y,
+            isUserAction: isUserAction,
+            preventCollision: preventCollision,
+            compactType: compactType,
+            cols: cols,
+            allowOverlap: allowOverlap,
+            overrideZ: oldDragItem.z
+        });
+        var updatedItems = oldGroupChildren.map(function (item) {
+            var layoutItem = getLayoutItem(layout, item.i);
+            return {
+                id: layoutItem.i,
+                x: layoutItem.x,
+                y: layoutItem.y,
+            };
+        });
+        props.onDragStopForGroup &&
+            props.onDragStopForGroup({
+                layout: movedLayout,
+                prev: oldDragItem,
+                item: l,
+                placeholder: undefined,
+                e: e,
+                node: node,
+                updatedItems: updatedItems
+            });
+        var newLayout = allowOverlap
+            ? movedLayout
+            : compact(movedLayout, compactType, cols);
+        setActiveDrag(undefined);
+        setLayout(newLayout);
+        setOldDragItem(undefined);
+        setOldLayout(undefined);
+        setOldGroupChildren([]);
+        props.onLayoutChange && props.onLayoutChange(newLayout);
+    };
     var onLayoutMaybeChanged = function (newLayout, oldLayout) {
         if (!oldLayout) {
             oldLayout = layout;
@@ -626,12 +679,15 @@ var ReactGridLayout = function (_a) {
         var handleDoubleClick = function (e) {
             onDoubleClickGroup && onDoubleClickGroup(e, block.blockId, type);
         };
+        var handleClickContextGroup = function (e) {
+            (props === null || props === void 0 ? void 0 : props.onContextGroup) && props.onContextGroup(e, block.blockId, isEditingGroup);
+        };
         return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classNames({
                     'bulk-child-item': isInBulk,
                     'grid-bulk-block': block.blockId === 'BULK',
                     'editing': editingGroupBlock === block.blockId,
                     'selected': selectedGroupBlock === block.blockId
-                }), 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, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, z: z, i: block.blockId, 
+                }), containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopGroupHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, z: z, i: block.blockId, 
                 // minH={l.minH}
                 // minW={l.minW}
                 // maxH={l.maxH}
@@ -640,7 +696,7 @@ var ReactGridLayout = function (_a) {
                 // droppingPosition={isDroppingItem ? droppingPosition : undefined}
                 // resizeHandles={resizeHandlesOptions}
                 // resizeHandle={resizeHandle}
-                isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
+                isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, onContextGroup: handleClickContextGroup, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
     };
     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: {

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

@@ -29,6 +29,11 @@ export type DroppedEvent = {
     item?: LayoutItem;
     event?: DragEvent<HTMLDivElement>;
 };
+export type UpdatedItem = {
+    id: string;
+    x: number;
+    y: number;
+};
 export type ReactGridLayoutProps = {
     children: ReactElement<any> | ReactElement[];
     className?: string;
@@ -60,6 +65,7 @@ export type ReactGridLayoutProps = {
     onDrag?: EventCallback;
     onDragStart?: EventCallback;
     onDragStop?: EventCallback;
+    onDragStopForGroup?: EventCallbackForGroup;
     onResize?: EventCallback;
     onResizeStart?: EventCallback;
     onResizeStop?: EventCallback;
@@ -104,6 +110,15 @@ export type EventCallback = (properties: {
     e?: ResizeEventType;
     node?: HTMLElement;
 }) => void;
+export type EventCallbackForGroup = (properties: {
+    layout: Layout;
+    prev?: LayoutItem;
+    item?: LayoutItem;
+    placeholder?: LayoutItem;
+    e?: ResizeEventType;
+    node?: HTMLElement;
+    updatedItems: UpdatedItem[];
+}) => void;
 export type RowHeight = number | ((width: number) => number);
 export type Position = {
     left: number;

package/package.json

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