pds-dev-kit-web-test 2.7.99 → 2.7.101

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

@@ -310,7 +310,7 @@ function GroupBlockRender(_a) {
                     right: 0,
                     bottom: 0,
                     boxShadow: '0 0 0 3px #e602ff'
-                } }), children === null || children === void 0 ? void 0 : children.map(function (cb, index) { return ((0, jsx_runtime_1.jsxs)(ErrorBoundary_1.ErrorBoundary, { children: [cb.id, (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: "DESKTOP", rowHeight: 50, zIndex: 0, style: { pointerEvents: 'none', opacity: isEditing ? 1 : 0.3 }, showPinned: isEditing, isParentGroupPinned: isPinned })] }, cb.id)); })] })));
+                } }), children === null || children === void 0 ? void 0 : children.map(function (cb, index) { return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: "DESKTOP", rowHeight: 50, zIndex: 0, style: { pointerEvents: 'none', opacity: isEditing ? 1 : 0.3 }, showPinned: isEditing, isParentGroupPinned: isPinned }) }, cb.id)); })] })));
 }
 var S_Pinned = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"], ["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"])));
 function getGridAreaFromGroup(position) {

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

@@ -14,6 +14,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)) {
@@ -31,7 +54,8 @@ exports.findAllChildrenCbIds = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var renderHelpers_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
 var styled_components_1 = __importDefault(require("styled-components"));
-var FlexGridItem_1 = require("../CompositionRenderer/FlexGridItem");
+var ErrorBoundary_1 = require("../components/Section/ErrorBoundary");
+var FlexGridItem_1 = __importStar(require("../CompositionRenderer/FlexGridItem"));
 function findAllChildrenCbIds(block, targetGroupId) {
     // 현재 블록이 target group이면, 모든 하위 컴포넌트 블록 ID를 수집
     if (block.blockId === targetGroupId) {
@@ -68,9 +92,11 @@ function RenderPedigreeRecursively(_a) {
             cols: bounding.w,
             rows: bounding.h
         });
+        var relativeGridArea_1 = parentGroupArea
+            ? calculateRelativeGridArea(gridArea_1, parentGroupArea)
+            : gridArea_1;
         return ((0, jsx_runtime_1.jsxs)(S_GroupItem, __assign({ cols: bounding.w, sectionRow: bounding.h, rowHeight: rowHeight, selectedRows: [], style: {
-                gridArea: gridAreaObjToString(gridArea_1),
-                border: '1px solid red',
+                gridArea: gridAreaObjToString(relativeGridArea_1),
                 display: 'grid'
             } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: {
                         position: 'absolute',
@@ -86,17 +112,25 @@ function RenderPedigreeRecursively(_a) {
                     } }, { children: block.blockId })), block.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(RenderPedigreeRecursively, { rowHeight: rowHeight, block: child, layoutItems: layoutItems, cbs: cbs, parentGroupArea: gridArea_1 }, child.blockId)); })] })));
     }
     // default: TYPE === 'COMPONENT_BLOCK'
-    var cb = cbs.find(function (c) { return c.blockId === block.blockId; });
+    var cbIndex = cbs.findIndex(function (c) { return c.blockId === block.blockId; });
+    var cb = cbs[cbIndex];
+    if (!cb) {
+        return (0, jsx_runtime_1.jsxs)("div", { children: ["NO CB FOUND FOR ", block.blockId] });
+    }
     var originalGridAreaString = (0, FlexGridItem_1.getGridAreaFromCB)(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, 'DESKTOP');
     var originalGridArea = parseGridArea(originalGridAreaString);
     // 부모 그룹이 있는 경우, 상대적 위치 계산
     var relativeGridArea = parentGroupArea
         ? calculateRelativeGridArea(originalGridArea, parentGroupArea)
         : originalGridArea;
+    var isEditing = false;
+    var isPinned = false;
     return ((0, jsx_runtime_1.jsx)(S_GridItem, __assign({ style: {
-            gridArea: gridAreaObjToString(relativeGridArea),
-            border: '1px solid blue'
-        }, "data-og-grid-area": originalGridAreaString, "data-rel-grid-area": gridAreaObjToString(relativeGridArea) }, { children: block.blockId })));
+            gridArea: gridAreaObjToString(relativeGridArea)
+        }, "data-og-grid-area": originalGridAreaString, "data-rel-grid-area": gridAreaObjToString(relativeGridArea) }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: cbIndex, device: "DESKTOP", rowHeight: 50, zIndex: 0, style: {
+                    pointerEvents: 'none'
+                    // opacity: isEditing ? 1 : 0.3
+                }, showPinned: isEditing, isParentGroupPinned: isPinned }) }, cb.id) })));
 }
 exports.default = RenderPedigreeRecursively;
 function clamp(num, min, max) {
@@ -152,8 +186,8 @@ function calculateRelativeGridArea(componentArea, parentArea) {
         colEnd: componentArea.colEnd - parentArea.colStart + 1
     };
 }
-var S_GridItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
-var S_GroupItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"], ["\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"])), function (props) { return props.cols; }, function (props) {
+var S_GridItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-shadow: 0 0 0 2px red;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  box-shadow: 0 0 0 2px red;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
+var S_GroupItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-shadow: 0 0 0 3px blue;\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"], ["\n  box-shadow: 0 0 0 3px blue;\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"])), function (props) { return props.cols; }, function (props) {
     //     // 전체 행 개수만큼 배열을 생성하여 각 행의 CSS 값을 정의합니다.
     return Array.from({ length: props.sectionRow })
         .map(function (_, index) {

package/package.json

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