publ-echo-test 0.0.346 → 0.0.349
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.
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { LayoutItem } from "./types";
|
|
2
2
|
type PlaceholderProps = {
|
|
3
3
|
margin: [number, number];
|
|
4
|
-
width: number;
|
|
5
4
|
rowHeight: number;
|
|
6
5
|
colWidth: number;
|
|
7
6
|
backgroundWidth: string | undefined;
|
|
8
7
|
backgroundHeight: string | undefined;
|
|
9
8
|
activeDrag: LayoutItem;
|
|
10
9
|
selectedBlockId: string | null;
|
|
10
|
+
totalCols: number;
|
|
11
11
|
};
|
|
12
|
-
export declare function GridBackgroundPlaceholder({ margin,
|
|
13
|
-
activeDrag, selectedBlockId, }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function GridBackgroundPlaceholder({ margin, rowHeight, colWidth, backgroundWidth, backgroundHeight, activeDrag, selectedBlockId, totalCols, }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
|
|
14
13
|
export {};
|
|
@@ -1,26 +1,36 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
export function GridBackgroundPlaceholder(_a) {
|
|
3
|
-
var margin = _a.margin,
|
|
4
|
-
|
|
3
|
+
var margin = _a.margin,
|
|
4
|
+
// width, // 🚨 제거
|
|
5
|
+
rowHeight = _a.rowHeight, colWidth = _a.colWidth, backgroundWidth = _a.backgroundWidth, backgroundHeight = _a.backgroundHeight, activeDrag = _a.activeDrag, selectedBlockId = _a.selectedBlockId, totalCols = _a.totalCols;
|
|
5
6
|
// 활성화된 행(row) 인덱스 배열
|
|
6
7
|
var activeRows = Array.from({ length: activeDrag.h }, function (_, i) { return activeDrag.y + i; });
|
|
7
|
-
//
|
|
8
|
-
|
|
8
|
+
// 🚨 activeCols도 totalCols prop으로 받아서 사용
|
|
9
|
+
// const activeCols = Array.from({ length: 24 }, (_, i) => 0 + i);
|
|
10
|
+
var activeCols = Array.from({ length: totalCols }, function (_, i) { return 0 + i; });
|
|
9
11
|
var textPadding = 10;
|
|
10
|
-
|
|
12
|
+
// 💡 SVG 캔버스 내부에서 그리드가 차지하는 '실제' 너비를 계산
|
|
13
|
+
// (총 열 수 * (각 열의 너비 + 가로 마진)) - 마지막 열의 추가 마진
|
|
14
|
+
// 패턴은 colWidth + margin[0] 단위로 반복되므로, 마지막 열에서는 margin[0]이 필요 없습니다.
|
|
15
|
+
// 또는, 마지막 요소에는 margin[0]이 없다고 가정하고 계산합니다.
|
|
16
|
+
var gridContentWidth = totalCols * (colWidth + margin[0]) - margin[0];
|
|
11
17
|
return (_jsx("div", { className: "grid-placeholder", style: {
|
|
12
18
|
marginTop: margin[1] + "px",
|
|
13
19
|
marginBottom: margin[1] + "px",
|
|
14
20
|
marginLeft: margin[0] + "px",
|
|
15
21
|
marginRight: margin[0] + "px",
|
|
16
|
-
}, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg",
|
|
17
|
-
|
|
22
|
+
}, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg",
|
|
23
|
+
// 💡 backgroundWidth는 string("100%")으로 사용하되,
|
|
24
|
+
// 내부 요소 배치에는 gridContentWidth를 사용합니다.
|
|
25
|
+
width: backgroundWidth, height: backgroundHeight, overflow: "visible", children: [_jsx("defs", { children: _jsx("pattern", { id: "grid-pattern", height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: "userSpaceOnUse", children: _jsx("rect", { x: 0.5, y: 0.5, className: "grid-pattern-rect", height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: gridContentWidth, height: "100%", fill: "url(#grid-pattern)" }), activeDrag &&
|
|
18
26
|
activeRows.map(function (row) {
|
|
19
27
|
var y_top = row * (rowHeight + margin[1]) + 0.5;
|
|
20
28
|
var y_center = y_top + rowHeight / 2;
|
|
21
29
|
return (_jsxs("g", { children: [activeCols.map(function (col) {
|
|
22
30
|
var x = col * (colWidth + margin[0]) + 0.5;
|
|
23
31
|
return (_jsx("rect", { x: x, y: y_top, width: colWidth, height: rowHeight, className: "grid-active-cell-placeholder" }, "active-".concat(row, "-").concat(col)));
|
|
24
|
-
}), _jsx("text", {
|
|
32
|
+
}), _jsx("text", {
|
|
33
|
+
// 💡 텍스트 x 위치도 gridContentWidth를 기준으로 계산
|
|
34
|
+
x: gridContentWidth + textPadding, y: y_center, className: "grid-indicator-text", children: "\u2195 \uAC00\uBCC0" })] }, "active-row-".concat(row)));
|
|
25
35
|
})] }) }));
|
|
26
36
|
}
|
|
@@ -53,6 +53,7 @@ var ReactGridLayout = function (_a) {
|
|
|
53
53
|
_x = props.resizeHandles, // TODO fix
|
|
54
54
|
resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.editingGroupBlock, editingGroupBlock = _0 === void 0 ? "ROOT" : _0, _1 = props.selectedGroupBlock, selectedGroupBlock = _1 === void 0 ? "ROOT" : _1, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup;
|
|
55
55
|
var device = cols === 24 ? "DESKTOP" : "MOBILE";
|
|
56
|
+
console.log("selectedBlockId", selectedBlockId);
|
|
56
57
|
var _2 = useState(), activeDrag = _2[0], setActiveDrag = _2[1];
|
|
57
58
|
var _3 = useState(), oldDragItem = _3[0], setOldDragItem = _3[1];
|
|
58
59
|
var _4 = useState(), oldLayout = _4[0], setOldLayout = _4[1];
|
|
@@ -746,6 +747,13 @@ var ReactGridLayout = function (_a) {
|
|
|
746
747
|
var currentGroupBlocks = blockStructure
|
|
747
748
|
? findGroupBlocks(blockStructure, editingGroupBlock)
|
|
748
749
|
: [];
|
|
749
|
-
|
|
750
|
+
var selectedLayoutItem = selectedBlockId
|
|
751
|
+
? getLayoutItem(layout, selectedBlockId)
|
|
752
|
+
: null;
|
|
753
|
+
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, "data-grid-row-height": rowHeight, "data-grid-cols": cols, "data-section-id": sectionId, 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(GridBackgroundPlaceholder, { backgroundWidth: getBackgroundWidth(), backgroundHeight: getBackgroundHeight(), margin: margin,
|
|
754
|
+
// width={width}
|
|
755
|
+
rowHeight: rowHeight, colWidth: colWidth, activeDrag: activeDrag, selectedBlockId: selectedBlockId, totalCols: cols })), selectedLayoutItem && (_jsx(GridBackgroundPlaceholder, { backgroundWidth: getBackgroundWidth(), backgroundHeight: getBackgroundHeight(), margin: margin,
|
|
756
|
+
// width={width}
|
|
757
|
+
rowHeight: rowHeight, colWidth: colWidth, activeDrag: selectedLayoutItem, selectedBlockId: selectedBlockId, totalCols: cols }))] }));
|
|
750
758
|
};
|
|
751
759
|
export default ReactGridLayout;
|