pds-dev-kit-web-test 0.3.50 → 0.3.52

package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts

@@ -41,7 +41,7 @@ type ActionHandlerPayload = {
         id: number;
     };
     '@CUSTOMSECTION/CB_RIGHT_CLICKED': {
-        id: number;
+        id: number | 'group';
         e: React.MouseEvent;
     };
     '@CUSTOMSECTION/SECTION_CLICKED': {

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -94,7 +94,7 @@ var CommentList = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         setLayouts: setLayouts,
         device: device,
         sectionActionHandler: sectionActionHandler
-    }), setGroupCB = _g.setGroupCB, breakGroupCB = _g.breakGroupCB, escapeFromGroup = _g.escapeFromGroup, makeAllInOneGroup = _g.makeAllInOneGroup, makeCollisionGroup = _g.makeCollisionGroup;
+    }), setGroupCB = _g.setGroupCB, breakGroupCB = _g.breakGroupCB, escapeFromGroup = _g.escapeFromGroup, makeAllInOneGroup = _g.makeAllInOneGroup, makeCollisionGroup = _g.makeCollisionGroup, makeCollisionOfBulk = _g.makeCollisionOfBulk;
     (0, react_1.useImperativeHandle)(ref, function () {
         return {
             selectCB: function (cbId) {
@@ -353,15 +353,24 @@ var CommentList = (0, react_1.forwardRef)(function CustomSection(props, ref) {
     var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
     var breakpoints = device === 'DESKTOP' ? { lg: 100, sm: 0 } : { lg: 1200, sm: 480 };
     var innerRef = (0, react_1.useRef)(null);
-    var clickGroupedOne = function (id, groupLayouts) {
-        if (shortcutKeyMode !== 'BULK_SELECT') {
+    var clickOneCBInBulk = function (id, groupLayouts) {
+        if (shortcutKeyMode === 'COLLISION_SELECT') {
+            makeCollisionOfBulk();
             return;
         }
-        if (groupLayouts.length <= 2) {
-            breakGroupCB();
+        if (shortcutKeyMode === 'BULK_SELECT') {
+            if (groupLayouts.length <= 2) {
+                breakGroupCB();
+                return;
+            }
+            escapeFromGroup(id.toString());
+        }
+    };
+    var onClickBulk = function () {
+        if (shortcutKeyMode !== 'COLLISION_SELECT') {
             return;
         }
-        escapeFromGroup(id.toString());
+        makeCollisionOfBulk();
     };
     return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(S_gleStyles, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
                         minHeight: customSectionStyles.minHeight,
@@ -381,7 +390,13 @@ var CommentList = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                             }
                             var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
                             if (each.i === 'group' && each.groupLayouts) {
-                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "iamgroup", onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(WidthProvidedRGL, __assign({ cols: each.w, allowOverlap: true, layout: each.groupLayouts, rowHeight: rowHeight, containerPadding: [0, 0], margin: [10, 10], isDraggable: false, isResizable: false, style: {
+                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "iamgroup", onClick: function (e) {
+                                        e.stopPropagation();
+                                        onClickBulk();
+                                    }, onContextMenu: function (e) {
+                                        e.stopPropagation();
+                                        onContextMenuCB('group', e);
+                                    } }, { children: (0, jsx_runtime_1.jsx)(WidthProvidedRGL, __assign({ cols: each.w, allowOverlap: true, layout: each.groupLayouts, rowHeight: rowHeight, containerPadding: [0, 0], margin: [10, 10], isDraggable: false, isResizable: false, style: {
                                             width: '100%'
                                         } }, { children: (_a = each.groupLayouts) === null || _a === void 0 ? void 0 : _a.map(function (layoutItem, index, array) {
                                             var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === layoutItem.i; });
@@ -394,7 +409,7 @@ var CommentList = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                             cbCopy.jsonProperties.data.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] = 'NONE';
                                             return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-box-in-group", onClick: function (e) {
                                                     e.stopPropagation();
-                                                    clickGroupedOne(matchedCB.id, array);
+                                                    clickOneCBInBulk(matchedCB.id, array);
                                                 } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: cbCopy, device: device, index: index }) }) }), matchedCB.id));
                                         }) })) }), each.i));
                             }

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/useGroupDrag.d.ts

@@ -15,6 +15,7 @@ declare function useGroupDrag({ device, setLayouts, sectionActionHandler }: Prop
     makeAllInOneGroup: () => void;
     escapeFromGroup: (id: string) => void;
     makeCollisionGroup: (id: number, selectedCBId?: number) => void;
+    makeCollisionOfBulk: () => void;
 };
 export declare function getGroupCB(layout: Layout): LayoutItemWithGroupType | null;
 export declare const filterItemsById: (layout: Layout, idsToRemove: Array<string>) => LayoutItem[];

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/useGroupDrag.js

@@ -226,7 +226,36 @@ function useGroupDrag(_a) {
             return prev;
         });
     }
-    return { setGroupCB: setGroupCB, breakGroupCB: breakGroupCB, makeAllInOneGroup: makeAllInOneGroup, escapeFromGroup: escapeFromGroup, makeCollisionGroup: makeCollisionGroup };
+    function makeCollisionOfBulk() {
+        setLayouts(function (prev) {
+            var _a;
+            var _b, _c;
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            var prevGroupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            var groupItem = currentLayoutCopy.splice(prevGroupIdx, 1)[0];
+            var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, groupItem);
+            var groupItems = (_c = (_b = groupItem.groupLayouts) === null || _b === void 0 ? void 0 : _b.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _c !== void 0 ? _c : [];
+            var newGroup = (0, utils_1.getGroupForMultiple)(groupItems.concat(collisions));
+            var filtered = currentLayoutCopy.filter(function (layout) { return !newGroup.childrenIds.includes(layout.i); });
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/GROUP_CREATED',
+                    payload: {
+                        message: 'group generated with collision detect',
+                        data: newGroup
+                    }
+                });
+            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = __spreadArray([newGroup], filtered, true), _a));
+        });
+    }
+    return {
+        setGroupCB: setGroupCB,
+        breakGroupCB: breakGroupCB,
+        makeAllInOneGroup: makeAllInOneGroup,
+        escapeFromGroup: escapeFromGroup,
+        makeCollisionGroup: makeCollisionGroup,
+        makeCollisionOfBulk: makeCollisionOfBulk
+    };
 }
 function getGroupCB(layout) {
     var groupIdx = layout.findIndex(function (item) { return item.i === 'group'; });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.50",
+  "version": "0.3.52",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",