publ-echo-test 0.0.345 → 0.0.346
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.
|
@@ -9,5 +9,6 @@ type PlaceholderProps = {
|
|
|
9
9
|
activeDrag: LayoutItem;
|
|
10
10
|
selectedBlockId: string | null;
|
|
11
11
|
};
|
|
12
|
-
export declare function GridBackgroundPlaceholder({ margin, width, rowHeight, colWidth, backgroundWidth, backgroundHeight,
|
|
12
|
+
export declare function GridBackgroundPlaceholder({ margin, width, rowHeight, colWidth, backgroundWidth, backgroundHeight, // 부모로부터 "1500px" 같은 정확한 값을 받음
|
|
13
|
+
activeDrag, selectedBlockId, }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
export {};
|
|
@@ -1,41 +1,26 @@
|
|
|
1
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
-
return cooked;
|
|
4
|
-
};
|
|
5
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
-
import styled from "styled-components"; // 1. styled-components import
|
|
7
|
-
// --- 2. Styled Components 정의 ---
|
|
8
|
-
// 기본 그리드 패턴용 rect
|
|
9
|
-
var GridPatternRect = styled.rect(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n fill: #f0f0f0;\n stroke: #ddd;\n stroke-width: 1px;\n"], ["\n fill: #f0f0f0;\n stroke: #ddd;\n stroke-width: 1px;\n"])));
|
|
10
|
-
// 활성화된 셀(개별)용 rect
|
|
11
|
-
var ActiveCellRect = styled.rect(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n fill: rgba(0, 255, 0, 0.2);\n stroke: rgba(0, 255, 8, 0.5);\n stroke-width: 1px;\n"], ["\n fill: rgba(0, 255, 0, 0.2);\n stroke: rgba(0, 255, 8, 0.5);\n stroke-width: 1px;\n"])));
|
|
12
|
-
// "↕ 가변" 텍스트용 text
|
|
13
|
-
var IndicatorText = styled.text(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n fill: rgba(0, 255, 8, 0.5);\n font-size: 12px;\n font-weight: 600;\n /* y \uC88C\uD45C \uAE30\uC900 \uC138\uB85C \uC911\uC559 \uC815\uB82C */\n dominant-baseline: central;\n /* x \uC88C\uD45C \uAE30\uC900 \uC67C\uCABD \uC815\uB82C */\n text-anchor: start;\n"], ["\n fill: rgba(0, 255, 8, 0.5);\n font-size: 12px;\n font-weight: 600;\n /* y \uC88C\uD45C \uAE30\uC900 \uC138\uB85C \uC911\uC559 \uC815\uB82C */\n dominant-baseline: central;\n /* x \uC88C\uD45C \uAE30\uC900 \uC67C\uCABD \uC815\uB82C */\n text-anchor: start;\n"])));
|
|
14
2
|
export function GridBackgroundPlaceholder(_a) {
|
|
15
|
-
var margin = _a.margin, width = _a.width, rowHeight = _a.rowHeight, colWidth = _a.colWidth, backgroundWidth = _a.backgroundWidth, backgroundHeight = _a.backgroundHeight,
|
|
16
|
-
|
|
3
|
+
var margin = _a.margin, width = _a.width, rowHeight = _a.rowHeight, colWidth = _a.colWidth, backgroundWidth = _a.backgroundWidth, backgroundHeight = _a.backgroundHeight, // 부모로부터 "1500px" 같은 정확한 값을 받음
|
|
4
|
+
activeDrag = _a.activeDrag, selectedBlockId = _a.selectedBlockId;
|
|
5
|
+
// 활성화된 행(row) 인덱스 배열
|
|
17
6
|
var activeRows = Array.from({ length: activeDrag.h }, function (_, i) { return activeDrag.y + i; });
|
|
18
|
-
//
|
|
7
|
+
// 활성화된 열(column) 인덱스 배열 (24개 하드코딩)
|
|
19
8
|
var activeCols = Array.from({ length: 24 }, function (_, i) { return 0 + i; });
|
|
20
|
-
// 텍스트 여백
|
|
21
9
|
var textPadding = 10;
|
|
10
|
+
console.log("bg-width", backgroundWidth);
|
|
22
11
|
return (_jsx("div", { className: "grid-placeholder", style: {
|
|
23
12
|
marginTop: margin[1] + "px",
|
|
24
13
|
marginBottom: margin[1] + "px",
|
|
25
14
|
marginLeft: margin[0] + "px",
|
|
26
15
|
marginRight: margin[0] + "px",
|
|
27
|
-
}, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: backgroundWidth, height: backgroundHeight, overflow: "visible"
|
|
28
|
-
|
|
16
|
+
}, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", 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" // 기본 셀 스타일
|
|
17
|
+
, height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: "100%", fill: "url(#grid-pattern)" }), activeDrag &&
|
|
29
18
|
activeRows.map(function (row) {
|
|
30
|
-
// 이 행의 y 좌표 계산
|
|
31
19
|
var y_top = row * (rowHeight + margin[1]) + 0.5;
|
|
32
|
-
// 텍스트를 위한 행의 세로 중앙 y 좌표
|
|
33
20
|
var y_center = y_top + rowHeight / 2;
|
|
34
|
-
// 5. <g> 태그로 각 행의 요소들을 그룹화
|
|
35
21
|
return (_jsxs("g", { children: [activeCols.map(function (col) {
|
|
36
22
|
var x = col * (colWidth + margin[0]) + 0.5;
|
|
37
|
-
return (_jsx(
|
|
38
|
-
}), _jsx(
|
|
23
|
+
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", { x: width + textPadding, y: y_center, className: "grid-indicator-text", children: "\u2195 \uAC00\uBCC0" })] }, "active-row-".concat(row)));
|
|
39
25
|
})] }) }));
|
|
40
26
|
}
|
|
41
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -67,7 +67,6 @@ var ReactGridLayout = function (_a) {
|
|
|
67
67
|
var selectedBlock = blockStructure && selectedBlockId
|
|
68
68
|
? findBlockByBlockId(blockStructure, selectedBlockId)
|
|
69
69
|
: null;
|
|
70
|
-
console.log("selectedBlockId:", selectedBlock);
|
|
71
70
|
var editingGroupAllChildren = blockStructure && editingGroupBlock
|
|
72
71
|
? findAllChildrenCbIds(blockStructure, editingGroupBlock).map(function (i) {
|
|
73
72
|
return i.toString();
|