pds-dev-kit-web-test 2.7.100 → 2.7.103

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/src/sub/DynamicLayout/GridAutoRowEditor/GridAutoRowEditor.js +2 -2
  2. package/dist/src/sub/DynamicLayout/utils/groupUtils.d.ts +3 -1
  3. package/dist/src/sub/DynamicLayout/utils/groupUtils.js +58 -12
  4. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/GridAutoRowEditor/GridAutoRowEditor.js CHANGED
@@ -265,7 +265,7 @@ var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, re
265
265
  backgroundColor: '#e8e1e189',
266
266
  border: '1px solid #6b666688'
267
267
  }, "data-row": rIdx + 1, "data-col": cIdx + 1 }, "bg-grid-item-".concat(rIdx + 1, "-").concat(cIdx + 1))); }) }), "bg-grid-row-".concat(rIdx + 1)));
268
- }), pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks }, child.blockId)); })] })) })) })) }) })) }));
268
+ }), pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks, device: device }, child.blockId)); })] })) })) })) }) })) }));
269
269
  });
270
270
  function GroupBlockRender(_a) {
271
271
  var block = _a.block, layouts = _a.layouts, pedigree = _a.pedigree, isEditing = _a.isEditing, isPinned = _a.isPinned, componentBlocks = _a.componentBlocks, onTogglePinned = _a.onTogglePinned, onDoubleClick = _a.onDoubleClick, onDoubleClickOutside = _a.onDoubleClickOutside;
@@ -310,7 +310,7 @@ function GroupBlockRender(_a) {
310
310
  right: 0,
311
311
  bottom: 0,
312
312
  boxShadow: '0 0 0 3px #e602ff'
313
- } }), 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)); })] })));
313
+ } }), 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)); })] })));
314
314
  }
315
315
  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"])));
316
316
  function getGridAreaFromGroup(position) {
package/dist/src/sub/DynamicLayout/utils/groupUtils.d.ts CHANGED
@@ -1,13 +1,15 @@
1
1
  /// <reference types="react" />
2
2
  import type { ComponentBlock } from '../sections/CustomSection/types';
3
+ import type { Device } from '../sections/CustomSection/util/types';
3
4
  import type { LayoutItem } from 'publ-echo/dist/lib';
4
5
  import type { Block } from 'publ-echo/dist/lib/GridLayoutEditor/group';
5
6
  export declare function findAllChildrenCbIds(block: Block, targetGroupId: string): number[];
6
- export default function RenderPedigreeRecursively({ block, layoutItems, cbs, parentGroupArea, rowHeight }: {
7
+ export default function RenderPedigreeRecursively({ block, layoutItems, cbs, parentGroupArea, rowHeight, device }: {
7
8
  block: Block;
8
9
  layoutItems: LayoutItem[];
9
10
  cbs: ComponentBlock[];
10
11
  rowHeight: number;
12
+ device: Device;
11
13
  parentGroupArea?: {
12
14
  rowStart: number;
13
15
  colStart: number;
package/dist/src/sub/DynamicLayout/utils/groupUtils.js CHANGED
@@ -14,6 +14,29 @@ var __assign = (this && this.__assign) || function () {
14
14
  };
15
15
  return __assign.apply(this, arguments);
16
16
  };
17
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
+ if (k2 === undefined) k2 = k;
19
+ var desc = Object.getOwnPropertyDescriptor(m, k);
20
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
21
+ desc = { enumerable: true, get: function() { return m[k]; } };
22
+ }
23
+ Object.defineProperty(o, k2, desc);
24
+ }) : (function(o, m, k, k2) {
25
+ if (k2 === undefined) k2 = k;
26
+ o[k2] = m[k];
27
+ }));
28
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
29
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
30
+ }) : function(o, v) {
31
+ o["default"] = v;
32
+ });
33
+ var __importStar = (this && this.__importStar) || function (mod) {
34
+ if (mod && mod.__esModule) return mod;
35
+ var result = {};
36
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
37
+ __setModuleDefault(result, mod);
38
+ return result;
39
+ };
17
40
  var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
18
41
  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
19
42
  if (ar || !(i in from)) {
@@ -31,7 +54,8 @@ exports.findAllChildrenCbIds = void 0;
31
54
  var jsx_runtime_1 = require("react/jsx-runtime");
32
55
  var renderHelpers_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
33
56
  var styled_components_1 = __importDefault(require("styled-components"));
34
- var FlexGridItem_1 = require("../CompositionRenderer/FlexGridItem");
57
+ var ErrorBoundary_1 = require("../components/Section/ErrorBoundary");
58
+ var FlexGridItem_1 = __importStar(require("../CompositionRenderer/FlexGridItem"));
35
59
  function findAllChildrenCbIds(block, targetGroupId) {
36
60
  // 현재 블록이 target group이면, 모든 하위 컴포넌트 블록 ID를 수집
37
61
  if (block.blockId === targetGroupId) {
@@ -54,7 +78,7 @@ function findAllChildrenCbIds(block, targetGroupId) {
54
78
  }
55
79
  exports.findAllChildrenCbIds = findAllChildrenCbIds;
56
80
  function RenderPedigreeRecursively(_a) {
57
- var block = _a.block, layoutItems = _a.layoutItems, cbs = _a.cbs, parentGroupArea = _a.parentGroupArea, rowHeight = _a.rowHeight;
81
+ var block = _a.block, layoutItems = _a.layoutItems, cbs = _a.cbs, parentGroupArea = _a.parentGroupArea, rowHeight = _a.rowHeight, device = _a.device;
58
82
  var type = block.type;
59
83
  if (type === 'GROUP_BLOCK') {
60
84
  var childrenIds = findAllChildrenCbIds(block, block.blockId).map(function (i) { return i.toString(); });
@@ -73,8 +97,10 @@ function RenderPedigreeRecursively(_a) {
73
97
  : gridArea_1;
74
98
  return ((0, jsx_runtime_1.jsxs)(S_GroupItem, __assign({ cols: bounding.w, sectionRow: bounding.h, rowHeight: rowHeight, selectedRows: [], style: {
75
99
  gridArea: gridAreaObjToString(relativeGridArea_1),
76
- border: '1px solid red',
77
- display: 'grid'
100
+ display: 'grid',
101
+ zIndex: device === 'DESKTOP'
102
+ ? block.zOrderDesktopInternal
103
+ : block.zOrderMobileInternal
78
104
  } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: {
79
105
  position: 'absolute',
80
106
  top: 4,
@@ -86,20 +112,40 @@ function RenderPedigreeRecursively(_a) {
86
112
  fontSize: '12px',
87
113
  zIndex: 1,
88
114
  pointerEvents: 'none'
89
- } }, { 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)); })] })));
115
+ } }, { 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, device: device }, child.blockId)); })] })));
90
116
  }
91
117
  // default: TYPE === 'COMPONENT_BLOCK'
92
- var cb = cbs.find(function (c) { return c.blockId === block.blockId; });
118
+ var cbIndex = cbs.findIndex(function (c) { return c.blockId === block.blockId; });
119
+ var cb = cbs[cbIndex];
120
+ if (!cb) {
121
+ return (0, jsx_runtime_1.jsxs)("div", { children: ["NO CB FOUND FOR ", block.blockId] });
122
+ }
93
123
  var originalGridAreaString = (0, FlexGridItem_1.getGridAreaFromCB)(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, 'DESKTOP');
94
124
  var originalGridArea = parseGridArea(originalGridAreaString);
95
125
  // 부모 그룹이 있는 경우, 상대적 위치 계산
96
126
  var relativeGridArea = parentGroupArea
97
127
  ? calculateRelativeGridArea(originalGridArea, parentGroupArea)
98
128
  : originalGridArea;
99
- return ((0, jsx_runtime_1.jsx)(S_GridItem, __assign({ style: {
100
- gridArea: gridAreaObjToString(relativeGridArea),
101
- border: '1px solid blue'
102
- }, "data-og-grid-area": originalGridAreaString, "data-rel-grid-area": gridAreaObjToString(relativeGridArea) }, { children: block.blockId })));
129
+ var isEditing = false;
130
+ var isPinned = false;
131
+ return (
132
+ // <S_GridItem
133
+ // style={{
134
+ // gridArea: gridAreaObjToString(relativeGridArea)
135
+ // }}
136
+ // data-og-grid-area={originalGridAreaString}
137
+ // data-rel-grid-area={gridAreaObjToString(relativeGridArea)}
138
+ // >
139
+ (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: cbIndex, device: device, rowHeight: 50, zIndex: device === 'DESKTOP'
140
+ ? block.zOrderDesktopInternal
141
+ : block.zOrderMobileInternal, style: {
142
+ pointerEvents: 'none',
143
+ gridArea: gridAreaObjToString(relativeGridArea),
144
+ boxShadow: '0 0 0 2px red'
145
+ // opacity: isEditing ? 1 : 0.3
146
+ }, showPinned: isEditing, isParentGroupPinned: isPinned }) }, cb.id)
147
+ // </S_GridItem>
148
+ );
103
149
  }
104
150
  exports.default = RenderPedigreeRecursively;
105
151
  function clamp(num, min, max) {
@@ -155,8 +201,8 @@ function calculateRelativeGridArea(componentArea, parentArea) {
155
201
  colEnd: componentArea.colEnd - parentArea.colStart + 1
156
202
  };
157
203
  }
158
- 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"])));
159
- 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) {
204
+ 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"])));
205
+ 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) {
160
206
  // // 전체 행 개수만큼 배열을 생성하여 각 행의 CSS 값을 정의합니다.
161
207
  return Array.from({ length: props.sectionRow })
162
208
  .map(function (_, index) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.7.100",
3
+ "version": "2.7.103",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",