pds-dev-kit-web-test 0.3.32 → 0.3.34

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, activeBulkSelectMode }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, activeBulkSelectMode, activeCollisionSelectMode }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

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

@@ -25,7 +25,7 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, activeBulkSelectMode = _a.activeBulkSelectMode;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, activeBulkSelectMode = _a.activeBulkSelectMode, activeCollisionSelectMode = _a.activeCollisionSelectMode;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
@@ -37,7 +37,8 @@ function DynamicLayout(_a) {
             sectionActionHandler: sectionActionHandler,
             editingSectionId: editingSectionId,
             programmedSectionComponents: programmedSectionComponents,
-            activeBulkSelectMode: activeBulkSelectMode
+            activeBulkSelectMode: activeBulkSelectMode,
+            activeCollisionSelectMode: activeCollisionSelectMode
         } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
 }

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

@@ -75,7 +75,7 @@ var MOBILE_GRID_COLS = 8;
 var GLE_MIN_WIDTH_DESKTOP_PX = "".concat(GRID_CELL_MIN * DESKTOP_GRID_COLS, "px");
 var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
 function CustomSection(props) {
-    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, sectionActionHandler = _a.sectionActionHandler, activeBulkSelectMode = _a.activeBulkSelectMode;
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, sectionActionHandler = _a.sectionActionHandler, activeBulkSelectMode = _a.activeBulkSelectMode, activeCollisionSelectMode = _a.activeCollisionSelectMode;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
     var _b = jsonProperties, CB_PLACEMENT_PROP_SECTION = _b.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _b.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _b.CB_CONTENT_PROP_SECTION;
     var _c = (0, react_1.useState)(null), selectedCB = _c[0], setSelectedCB = _c[1];
@@ -96,7 +96,7 @@ function CustomSection(props) {
         setLayouts: setLayouts,
         device: device,
         sectionActionHandler: sectionActionHandler
-    }), setGroupCB = _g.setGroupCB, breakGroupCB = _g.breakGroupCB, makeAllInOneGroup = _g.makeAllInOneGroup, escapeFromGroup = _g.escapeFromGroup;
+    }), setGroupCB = _g.setGroupCB, breakGroupCB = _g.breakGroupCB, makeAllInOneGroup = _g.makeAllInOneGroup, escapeFromGroup = _g.escapeFromGroup, makeCollisionGroup = _g.makeCollisionGroup;
     (0, react_1.useLayoutEffect)(function () {
         var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
         setLayouts(function (prev) {
@@ -151,7 +151,20 @@ function CustomSection(props) {
             setSelectedCB('group');
             return;
         }
-        if ((0, useGroupDrag_2.getGroupCB)(layouts[layoutByDevice])) {
+        var hasAlreadyGroup = (0, useGroupDrag_2.getGroupCB)(layouts[layoutByDevice]);
+        if (activeCollisionSelectMode && !hasAlreadyGroup) {
+            makeCollisionGroup(id);
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/CB_CLICKED',
+                    payload: {
+                        id: 'group'
+                    }
+                });
+            setSelectedCB('group');
+            return;
+        }
+        if (hasAlreadyGroup) {
             breakGroupCB();
         }
         setSelectedCB(id);

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

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

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

@@ -10,8 +10,18 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.filterItemsById = exports.getGroupCB = void 0;
+var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
 var utils_1 = require("./utils");
 function useGroupDrag(_a) {
     var device = _a.device, setLayouts = _a.setLayouts, sectionActionHandler = _a.sectionActionHandler;
@@ -124,7 +134,21 @@ function useGroupDrag(_a) {
                 }
             });
     }
-    return { setGroupCB: setGroupCB, breakGroupCB: breakGroupCB, makeAllInOneGroup: makeAllInOneGroup, escapeFromGroup: escapeFromGroup };
+    function makeCollisionGroup(id) {
+        setLayouts(function (prev) {
+            var _a;
+            var currentLayoutCopy = JSON.parse(JSON.stringify(prev[layoutByDevice]));
+            var layout = (0, renderHelpers_1.getLayoutItem)(currentLayoutCopy, id.toString());
+            if (!layout) {
+                return prev;
+            }
+            var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, layout);
+            var group = (0, utils_1.getGroupForMultiple)(__spreadArray([layout], collisions, true));
+            var filtered = currentLayoutCopy.filter(function (layout) { return !group.childrenIds.includes(layout.i); });
+            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = __spreadArray([group], filtered, true), _a));
+        });
+    }
+    return { setGroupCB: setGroupCB, breakGroupCB: breakGroupCB, makeAllInOneGroup: makeAllInOneGroup, escapeFromGroup: escapeFromGroup, makeCollisionGroup: makeCollisionGroup };
 }
 function getGroupCB(layout) {
     var groupIdx = layout.findIndex(function (item) { return item.i === 'group'; });

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

@@ -225,6 +225,7 @@ export type DynamicLayoutProps = {
     programmedSectionComponents?: IProgrammedSectionComponents;
     width?: number;
     activeBulkSelectMode?: boolean;
+    activeCollisionSelectMode?: boolean;
 };
 export type NavHandlerAction = {
     openNewTab: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.32",
+  "version": "0.3.34",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,7 +22,7 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "publ-echo": "^0.0.34",
+    "publ-echo": "^0.0.38",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/release-note.md

@@ -1,9 +1,6 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.3.32]
+## [v0.3.34]
 ## 기준 pds-dev-kit-web 버전 @2.2.41
 ### sub
     * DynamicLayout
-        * 깜빡깜빡거리며 구석에 생기는(x:0,y:0으로 움직이는) 이슈 픽스
-        * 제자리 DROP / 제자리 RESIZE → action 발행 안함
-        * shift후 스스로 클릭 → action 발행 안함
-        * bulk그룹에서 제외 클릭 시 group 사이즈 조정
+      * group화/해제 시 1px의 움직임이 더해져 움찔거리는 이슈 픽스