publ-echo-test 0.0.343 → 0.0.345

package/dist/lib/GridLayoutEditor/Placeholder.d.ts

@@ -0,0 +1,13 @@
+import { LayoutItem } from "./types";
+type PlaceholderProps = {
+    margin: [number, number];
+    width: number;
+    rowHeight: number;
+    colWidth: number;
+    backgroundWidth: string | undefined;
+    backgroundHeight: string | undefined;
+    activeDrag: LayoutItem;
+    selectedBlockId: string | null;
+};
+export declare function GridBackgroundPlaceholder({ margin, width, rowHeight, colWidth, backgroundWidth, backgroundHeight, activeDrag, selectedBlockId, }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/GridLayoutEditor/Placeholder.js

@@ -0,0 +1,41 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components"; // 1. styled-components import
+// --- 2. Styled Components 정의 ---
+// 기본 그리드 패턴용 rect
+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"])));
+// 활성화된 셀(개별)용 rect
+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"])));
+// "↕ 가변" 텍스트용 text
+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"])));
+export function GridBackgroundPlaceholder(_a) {
+    var margin = _a.margin, width = _a.width, rowHeight = _a.rowHeight, colWidth = _a.colWidth, backgroundWidth = _a.backgroundWidth, backgroundHeight = _a.backgroundHeight, activeDrag = _a.activeDrag, selectedBlockId = _a.selectedBlockId;
+    // 활성화된 행 인덱스
+    var activeRows = Array.from({ length: activeDrag.h }, function (_, i) { return activeDrag.y + i; });
+    // 모든 열 인덱스 (0부터 23까지)
+    var activeCols = Array.from({ length: 24 }, function (_, i) { return 0 + i; });
+    // 텍스트 여백
+    var textPadding = 10;
+    return (_jsx("div", { className: "grid-placeholder", style: {
+            marginTop: margin[1] + "px",
+            marginBottom: margin[1] + "px",
+            marginLeft: margin[0] + "px",
+            marginRight: margin[0] + "px",
+        }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: backgroundWidth, height: backgroundHeight, overflow: "visible" // 3. 텍스트가 잘리지 않도록 overflow="visible" 추가
+            , children: [_jsx("defs", { children: _jsx("pattern", { id: "grid-pattern", height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: "userSpaceOnUse", children: _jsx(GridPatternRect, { x: 0.5, y: 0.5, height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: "100%", fill: "url(#grid-pattern)" }), activeDrag &&
+                    activeRows.map(function (row) {
+                        // 이 행의 y 좌표 계산
+                        var y_top = row * (rowHeight + margin[1]) + 0.5;
+                        // 텍스트를 위한 행의 세로 중앙 y 좌표
+                        var y_center = y_top + rowHeight / 2;
+                        // 5. <g> 태그로 각 행의 요소들을 그룹화
+                        return (_jsxs("g", { children: [activeCols.map(function (col) {
+                                    var x = col * (colWidth + margin[0]) + 0.5;
+                                    return (_jsx(ActiveCellRect, { x: x, y: y_top, width: colWidth, height: rowHeight }, "".concat(row, "-").concat(col)));
+                                }), _jsx(IndicatorText, { x: width + textPadding, y: y_center, children: "\u2195 \uAC00\uBCC0" })] }, row));
+                    })] }) }));
+}
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -41,10 +41,11 @@ import isEqual from "../../external-lib/lodash.isEqual";
 import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, findParentGroupBlock, formatCbIdToBlockId, getBlockSpecificType, zIndexMap, } from "./group";
 import GroupItem from "../GridItem/GroupItem";
 import OutsideClickHandler from "../GridItem/OutsideClickHandler";
+import { GridBackgroundPlaceholder } from "./Placeholder";
 var layoutClassName = "react-grid-layout";
 var ReactGridLayout = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    var sectionId = props.sectionId, _b = props.autoSize, autoSize = _b === void 0 ? true : _b, _c = props.cols, cols = _c === void 0 ? 12 : _c, _d = props.className, className = _d === void 0 ? "" : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.draggableHandle, draggableHandle = _f === void 0 ? "" : _f, _g = props.draggableCancel, draggableCancel = _g === void 0 ? "" : _g, _h = props.containerPadding, containerPadding = _h === void 0 ? undefined : _h, _j = props.rowHeight, rowHeight = _j === void 0 ? 150 : _j, _k = props.maxRows, maxRows = _k === void 0 ? Infinity : _k, _l = props.margin, margin = _l === void 0 ? [10, 10] : _l, _m = props.isBounded, isBounded = _m === void 0 ? false : _m, _o = props.isDraggable, isDraggable = _o === void 0 ? true : _o, _p = props.isResizable, isResizable = _p === void 0 ? true : _p, _q = props.allowOverlap, allowOverlap = _q === void 0 ? false : _q, _r = props.isDroppable, isDroppable = _r === void 0 ? false : _r, _s = props.useCSSTransforms, useCSSTransforms = _s === void 0 ? true : _s, _t = props.transformScale, transformScale = _t === void 0 ? 1 : _t, _u = props.compactType, compactType = _u === void 0 ? "vertical" : _u, _v = props.preventCollision, preventCollision = _v === void 0 ? false : _v, _w = props.droppingItem, droppingItem = _w === void 0 ? {
+    var selectedBlockId = props.selectedBlockId, sectionId = props.sectionId, _b = props.autoSize, autoSize = _b === void 0 ? true : _b, _c = props.cols, cols = _c === void 0 ? 12 : _c, _d = props.className, className = _d === void 0 ? "" : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.draggableHandle, draggableHandle = _f === void 0 ? "" : _f, _g = props.draggableCancel, draggableCancel = _g === void 0 ? "" : _g, _h = props.containerPadding, containerPadding = _h === void 0 ? undefined : _h, _j = props.rowHeight, rowHeight = _j === void 0 ? 150 : _j, _k = props.maxRows, maxRows = _k === void 0 ? Infinity : _k, _l = props.margin, margin = _l === void 0 ? [10, 10] : _l, _m = props.isBounded, isBounded = _m === void 0 ? false : _m, _o = props.isDraggable, isDraggable = _o === void 0 ? true : _o, _p = props.isResizable, isResizable = _p === void 0 ? true : _p, _q = props.allowOverlap, allowOverlap = _q === void 0 ? false : _q, _r = props.isDroppable, isDroppable = _r === void 0 ? false : _r, _s = props.useCSSTransforms, useCSSTransforms = _s === void 0 ? true : _s, _t = props.transformScale, transformScale = _t === void 0 ? 1 : _t, _u = props.compactType, compactType = _u === void 0 ? "vertical" : _u, _v = props.preventCollision, preventCollision = _v === void 0 ? false : _v, _w = props.droppingItem, droppingItem = _w === void 0 ? {
         i: "__dropping-elem__",
         h: 1,
         w: 1,
@@ -60,12 +61,13 @@ var ReactGridLayout = function (_a) {
     var _7 = useState(), droppingPosition = _7[0], setDroppingPosition = _7[1];
     var _8 = useState(false), isMounted = _8[0], setIsMounted = _8[1];
     var editorMode = props.isDraggable && props.isResizable ? "EDIT" : "VIEW";
-    var selectedBlock = blockStructure
-        ? findBlockByBlockId(blockStructure, editingGroupBlock)
-        : null;
     var editableBlockIds = blockStructure
         ? findDirectChildrenCbIds(blockStructure, editingGroupBlock)
         : [];
+    var selectedBlock = blockStructure && selectedBlockId
+        ? findBlockByBlockId(blockStructure, selectedBlockId)
+        : null;
+    console.log("selectedBlockId:", selectedBlock);
     var editingGroupAllChildren = blockStructure && editingGroupBlock
         ? findAllChildrenCbIds(blockStructure, editingGroupBlock).map(function (i) {
             return i.toString();
@@ -745,11 +747,6 @@ var ReactGridLayout = function (_a) {
     var currentGroupBlocks = blockStructure
         ? findGroupBlocks(blockStructure, editingGroupBlock)
         : [];
-    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 || selectedBlock) && (_jsx("div", { className: "grid-placeholder", style: {
-                    marginTop: margin[1] + "px",
-                    marginBottom: margin[1] + "px",
-                    marginLeft: margin[0] + "px",
-                    marginRight: margin[0] + "px",
-                }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: getBackgroundWidth(), height: getBackgroundHeight(), 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: width, height: "100%", fill: "url(#grid-pattern)" })] }) }))] }));
+    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, width: width, rowHeight: rowHeight, colWidth: colWidth, activeDrag: activeDrag, selectedBlockId: selectedBlockId }))] }));
 };
 export default ReactGridLayout;

package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.d.ts

@@ -1,4 +1,4 @@
-import { ResponsiveGridLayoutProps } from './types';
-import { PropsWithChildren } from '../types';
+import { ResponsiveGridLayoutProps } from "./types";
+import { PropsWithChildren } from "../types";
 export declare const ResponsiveGridLayout: ({ children, ...props }: PropsWithChildren<ResponsiveGridLayoutProps>) => React.ReactElement;
 export default ResponsiveGridLayout;

package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js

@@ -21,11 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from 'react';
-import { cloneLayout, noop, synchronizeLayoutWithChildren, } from './utils/renderHelpers';
-import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, } from './utils/responsiveUtils';
-import isEqual from '../../external-lib/lodash.isEqual';
-import ReactGridLayout from './ReactGridLayout';
+import { useLayoutEffect, useRef, useState } from "react";
+import { cloneLayout, noop, synchronizeLayoutWithChildren, } from "./utils/renderHelpers";
+import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, } from "./utils/responsiveUtils";
+import isEqual from "../../external-lib/lodash.isEqual";
+import ReactGridLayout from "./ReactGridLayout";
 /**
  * Get a value of margin or containerPadding.
  *
@@ -44,7 +44,7 @@ export var ResponsiveGridLayout = function (_a) {
         var breakpoint = getBreakpointFromWidth(breakpoints, width);
         var colNo = getColsFromBreakpoint(breakpoint, cols);
         var compactType = props.compactType;
-        var initialLayout = findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType || 'vertical', false);
+        var initialLayout = findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType || "vertical", false);
         return {
             layout: initialLayout,
             layouts: layouts,
@@ -95,8 +95,8 @@ export var ResponsiveGridLayout = function (_a) {
                 breakpoints[newBreakpoint] > breakpoints[lastBreakpoint];
             var isNewLayout = layouts[newBreakpoint] == null;
             var overlap = !!props.allowOverlap && (!isNewLayout || newBreakpointIsBiggerOrEqual); //  allow resize overlap only if we are going into a larger screen
-            var layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType || 'vertical', overlap);
-            layout = synchronizeLayoutWithChildren(layout, children, newCols, compactType || 'vertical', overlap);
+            var layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType || "vertical", overlap);
+            layout = synchronizeLayoutWithChildren(layout, children, newCols, compactType || "vertical", overlap);
             newLayouts[newBreakpoint] = layout;
             setState({
                 breakpoint: newBreakpoint,

package/dist/lib/GridLayoutEditor/types.d.ts

@@ -36,6 +36,7 @@ export type UpdatedItem = {
     y: number;
 };
 export type ReactGridLayoutProps = {
+    selectedBlockId: string | null;
     sectionId: string;
     children: ReactElement<any> | ReactElement[];
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "publ-echo-test",
-  "version": "0.0.343",
+  "version": "0.0.345",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",