pds-dev-kit-web-test 2.5.706 → 2.5.708

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

@@ -1,55 +1,73 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+
+var __makeTemplateObject = this && this.__makeTemplateObject || function (cooked, raw) {
+  if (Object.defineProperty) {
+    Object.defineProperty(cooked, "raw", {
+      value: raw
+    });
+  } else {
+    cooked.raw = raw;
+  }
+  return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    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]; } };
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
-    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;
+    return t;
+  };
+  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 __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)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
+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)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
     }
-    return to.concat(ar || Array.prototype.slice.call(from));
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-unused-vars */
 var publ_echo_test_1 = require("publ-echo-test");
@@ -72,1063 +90,1181 @@ var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/u
 var parseCompositionPlacement_1 = __importDefault(require("../sections/CustomSection/util/parseCompositionPlacement"));
 var Responsive = (0, publ_echo_test_1.WidthProvider)(publ_echo_test_1.ResponsiveGridEditor);
 var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas(props, ref) {
-    var _a, _b, _c, _d;
-    var _e = props.editorProps, device = _e.device, shortcutKeyMode = _e.shortcutKeyMode, placementRestriction = _e.placementRestriction, compositionActionHandler = _e.compositionActionHandler;
-    // const GLE_MIN_WIDTH_DESKTOP_PX = `${GRID_CELL_MIN * cols}px`;
-    // const GLE_MIN_WIDTH_MOBILE_PX = `${GRID_CELL_MIN * rows}px`;
-    var editingSectionId = props.compositionData.id;
-    var mode = 'EDIT';
-    var _f = props.compositionData, componentBlocks = _f.componentBlocks, jsonProperties = _f.jsonProperties;
-    var sectionPedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
-    var _g = (0, react_1.useState)(sectionPedigree), pedigreeState = _g[0], setPedigreeState = _g[1];
-    (0, react_1.useEffect)(function () {
-        setPedigreeState(sectionPedigree);
-    }, [sectionPedigree]);
-    var _h = jsonProperties, _j = _h.data, CB_PLACEMENT_PROP_COMPOSITION = _j.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _j.CB_LAYOUT_PROP_PADDING, zOrders = _h.zOrders;
-    var _k = (0, react_1.useState)(null), selectedBlockId = _k[0], setSelectedBlockId = _k[1];
-    var gleRef = (0, react_1.useRef)(null);
-    var _l = (0, react_1.useState)(50), rowHeight = _l[0], setRowHeight = _l[1];
-    var _m = (0, react_1.useState)(16), baseFontSize = _m[0], setBaseFontSize = _m[1];
-    var isMobile = device === 'MOBILE';
-    var isEditMode = mode === 'EDIT';
-    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
-    var colsDesktop = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS;
-    var colsMobile = (_a = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS:MOBILE']) !== null && _a !== void 0 ? _a : colsDesktop;
-    var rowsDesktop = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS;
-    var rowsMobile = (_b = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _b !== void 0 ? _b : rowsDesktop;
-    var rows = isMobile ? rowsMobile : rowsDesktop;
-    var cols = isMobile ? colsMobile : colsDesktop;
-    var canvasWidth = 50 * cols;
-    var _o = (0, react_1.useState)(function () {
-        var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders, placementRestriction), lg = _a.lg, sm = _a.sm;
-        return {
-            lg: lg,
-            sm: sm
-        };
-    }), layouts = _o[0], setLayouts = _o[1];
-    var _p = (0, react_1.useState)('ROOT'), editingGroupBlock = _p[0], setEditingGroupBlock = _p[1];
-    var _q = (0, react_1.useState)([]), bulkBlockIds = _q[0], setBulkBlockIds = _q[1];
-    (0, react_1.useEffect)(function () {
-        if (editingGroupBlock) {
-            var found = (0, group_1.findBlockByBlockId)(sectionPedigree, editingGroupBlock);
-            if (!found) {
-                setEditingGroupBlock('ROOT');
-                return;
+  var _a, _b, _c, _d;
+  var _e = props.editorProps,
+    device = _e.device,
+    shortcutKeyMode = _e.shortcutKeyMode,
+    placementRestriction = _e.placementRestriction,
+    compositionActionHandler = _e.compositionActionHandler;
+  // const GLE_MIN_WIDTH_DESKTOP_PX = `${GRID_CELL_MIN * cols}px`;
+  // const GLE_MIN_WIDTH_MOBILE_PX = `${GRID_CELL_MIN * rows}px`;
+  var editingSectionId = props.compositionData.id;
+  var mode = 'EDIT';
+  var _f = props.compositionData,
+    componentBlocks = _f.componentBlocks,
+    jsonProperties = _f.jsonProperties;
+  var sectionPedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
+  var _g = (0, react_1.useState)(sectionPedigree),
+    pedigreeState = _g[0],
+    setPedigreeState = _g[1];
+  (0, react_1.useEffect)(function () {
+    setPedigreeState(sectionPedigree);
+  }, [sectionPedigree]);
+  var _h = jsonProperties,
+    _j = _h.data,
+    CB_PLACEMENT_PROP_COMPOSITION = _j.CB_PLACEMENT_PROP_COMPOSITION,
+    CB_LAYOUT_PROP_PADDING = _j.CB_LAYOUT_PROP_PADDING,
+    zOrders = _h.zOrders;
+  var _k = (0, react_1.useState)(null),
+    selectedBlockId = _k[0],
+    setSelectedBlockId = _k[1];
+  var gleRef = (0, react_1.useRef)(null);
+  var _l = (0, react_1.useState)(50),
+    rowHeight = _l[0],
+    setRowHeight = _l[1];
+  var _m = (0, react_1.useState)(16),
+    baseFontSize = _m[0],
+    setBaseFontSize = _m[1];
+  var isMobile = device === 'MOBILE';
+  var isEditMode = mode === 'EDIT';
+  var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+  var colsDesktop = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS;
+  var colsMobile = (_a = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS:MOBILE']) !== null && _a !== void 0 ? _a : colsDesktop;
+  var rowsDesktop = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS;
+  var rowsMobile = (_b = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _b !== void 0 ? _b : rowsDesktop;
+  var rows = isMobile ? rowsMobile : rowsDesktop;
+  var cols = isMobile ? colsMobile : colsDesktop;
+  var canvasWidth = 50 * cols;
+  var _o = (0, react_1.useState)(function () {
+      var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders, placementRestriction),
+        lg = _a.lg,
+        sm = _a.sm;
+      return {
+        lg: lg,
+        sm: sm
+      };
+    }),
+    layouts = _o[0],
+    setLayouts = _o[1];
+  var _p = (0, react_1.useState)('ROOT'),
+    editingGroupBlock = _p[0],
+    setEditingGroupBlock = _p[1];
+  var _q = (0, react_1.useState)([]),
+    bulkBlockIds = _q[0],
+    setBulkBlockIds = _q[1];
+  (0, react_1.useEffect)(function () {
+    if (editingGroupBlock) {
+      var found = (0, group_1.findBlockByBlockId)(sectionPedigree, editingGroupBlock);
+      if (!found) {
+        setEditingGroupBlock('ROOT');
+        return;
+      }
+      if (found.type === 'GROUP_BLOCK' && found.children.length === 0) {
+        setEditingGroupBlock('ROOT');
+        return;
+      }
+    }
+  }, [editingGroupBlock, sectionPedigree]);
+  var newblock = bulkBlockIds.length > 0 ? (0, group_1.addBulkToTarget)(pedigreeState, editingGroupBlock, bulkBlockIds) : pedigreeState;
+  (0, react_1.useImperativeHandle)(ref, function () {
+    return {
+      selectCB: function (blockId) {
+        setSelectedBlockId(blockId);
+      },
+      selectCBInBulk: function (blockIds) {
+        setBulkBlockIds(blockIds);
+      },
+      selectGroup: function (groupBlockId) {
+        setBulkBlockIds([]);
+        setSelectedBlockId(groupBlockId);
+      }
+    };
+  }, [componentBlocks]);
+  (0, react_1.useLayoutEffect)(function () {
+    var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders, placementRestriction);
+    setLayouts(function (prev) {
+      var _a;
+      var _b;
+      var group = (0, group_2.getGroupCB)(prev[layoutByDevice]);
+      var groupedCBIds = (_b = group === null || group === void 0 ? void 0 : group.childrenIds) !== null && _b !== void 0 ? _b : [];
+      var filteredLayout = (0, group_2.filterItemsById)(parsedLayouts[layoutByDevice], groupedCBIds);
+      if (group === null || group === void 0 ? void 0 : group.groupLayouts) {
+        var groupCbs = parsedLayouts[layoutByDevice].filter(function (each) {
+          return groupedCBIds.includes(each.i);
+        });
+        if (groupCbs.length > 0) {
+          var newGroupLayout = (0, group_2.getGroupForMultiple)(groupCbs);
+          filteredLayout.push(newGroupLayout);
+        }
+      }
+      return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
+    });
+  }, [componentBlocks, group_2.getGroupCB, layoutByDevice, zOrders]);
+  (0, react_1.useEffect)(function () {
+    if (editingSectionId !== props.compositionData.id) {
+      setSelectedBlockId(null);
+      setBulkBlockIds([]);
+      setEditingGroupBlock('ROOT');
+    }
+  }, [editingSectionId]);
+  var workDir = (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : '/ROOT';
+  (0, react_1.useEffect)(function () {
+    compositionActionHandler && compositionActionHandler({
+      type: '@COMPOSITION/WORKDIR_CHANGED',
+      payload: {
+        workDir: workDir
+      }
+    });
+  }, [workDir]);
+  // NOTE: 추후에 event를 외부에서 전달받게하거나, 아예 상태를 끌어올리거나 해야합니다.
+  (0, react_1.useLayoutEffect)(function () {
+    var _a, _b, _c, _d, _e, _f;
+    if (props.compositionData.id !== editingSectionId) {
+      return;
+    }
+    if (!shortcutKeyMode) {
+      return;
+    }
+    if (shortcutKeyMode === 'SELECT_ALL') {
+      makeAllInOneGroup();
+      return;
+    }
+    // esc
+    if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
+      if (selectedBlockId && editingGroupBlock !== selectedBlockId && editingGroupBlock !== 'ROOT') {
+        setSelectedBlockId(null);
+        compositionActionHandler && compositionActionHandler({
+          type: '@COMPOSITION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: editingGroupBlock,
+              type: 'GROUP_BLOCK',
+              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
+              childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : [],
+              childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : []
             }
-            if (found.type === 'GROUP_BLOCK' && found.children.length === 0) {
-                setEditingGroupBlock('ROOT');
-                return;
+          }
+        });
+        return;
+      }
+      if (bulkBlockIds.length > 0) {
+        setBulkBlockIds([]);
+        setSelectedBlockId(null);
+        compositionActionHandler && compositionActionHandler({
+          type: '@COMPOSITION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: editingGroupBlock,
+              type: 'GROUP_BLOCK',
+              workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
+              childrenBlockIds: (_e = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : [],
+              childrenCBIds: (_f = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _f !== void 0 ? _f : []
             }
+          }
+        });
+        return;
+      }
+      if (editingGroupBlock !== 'ROOT') {
+        setEditingGroupBlock('ROOT');
+        setSelectedBlockId(null);
+        compositionActionHandler && compositionActionHandler({
+          type: '@COMPOSITION/BULK_DISMISSED',
+          payload: {
+            message: 'MANUAL_BULK_BREAK_OR_ESC',
+            editingGroupBlock: 'ROOT'
+          }
+        });
+        return;
+      }
+      if (editingGroupBlock === 'ROOT') {
+        setSelectedBlockId(null);
+        compositionActionHandler && compositionActionHandler({
+          type: '@COMPOSITION/BULK_DISMISSED',
+          payload: {
+            message: 'MANUAL_BULK_BREAK_OR_ESC',
+            editingGroupBlock: 'ROOT'
+          }
+        });
+      }
+    }
+  }, [shortcutKeyMode, setSelectedBlockId]);
+  (0, react_1.useLayoutEffect)(function () {
+    var _a;
+    if (props.compositionData.id !== editingSectionId) {
+      return;
+    }
+    if (shortcutKeyMode === 'MANUAL_COLLISION_SELECT') {
+      if (!selectedBlockId || selectedBlockId === 'BULK') {
+        return;
+      }
+      var selectedCBId = selectedBlockId ? (0, group_1.formatBlockIdToCbId)(selectedBlockId) : undefined;
+      if (!selectedCBId) {
+        return;
+      }
+      var bulks_1 = getCollisionGroupIds(selectedCBId);
+      if (selectedBlockId) {
+        bulks_1.push(selectedBlockId);
+      }
+      setBulkBlockIds(function (prev) {
+        var set = new Set(__spreadArray(__spreadArray([], prev, true), bulks_1, true));
+        return Array.from(set);
+      });
+      setSelectedBlockId(null);
+      var newBulkCBIds = bulks_1.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      var childrenCBIds = [];
+      if (newBulkCBIds.length === 0) {
+        var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks_1[0]);
+        childrenCBIds = oneCB ? [oneCB] : [];
+      } else {
+        childrenCBIds = newBulkCBIds;
+      }
+      var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), bulks_1, true).length;
+      compositionActionHandler && compositionActionHandler({
+        type: '@COMPOSITION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            type: 'BULK',
+            blockId: 'BULK',
+            childrenBlockIds: bulks_1,
+            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
+            childrenCBIds: childrenCBIds,
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-    }, [editingGroupBlock, sectionPedigree]);
-    var newblock = bulkBlockIds.length > 0
-        ? (0, group_1.addBulkToTarget)(pedigreeState, editingGroupBlock, bulkBlockIds)
-        : pedigreeState;
-    (0, react_1.useImperativeHandle)(ref, function () {
-        return {
-            selectCB: function (blockId) {
-                setSelectedBlockId(blockId);
-            },
-            selectCBInBulk: function (blockIds) {
-                setBulkBlockIds(blockIds);
-            },
-            selectGroup: function (groupBlockId) {
-                setBulkBlockIds([]);
-                setSelectedBlockId(groupBlockId);
+      });
+      return;
+    }
+  }, [selectedBlockId, shortcutKeyMode, compositionActionHandler, bulkBlockIds, setSelectedBlockId]);
+  var makeAllInOneGroup = function () {
+    var _a, _b, _c, _d, _e;
+    var allRootChildIds = (0, group_1.findDirectChildrenBlockIds)(pedigreeState, editingGroupBlock);
+    if (allRootChildIds.length === 1) {
+      var block = (0, group_1.findBlockByBlockId)(newblock, allRootChildIds[0]);
+      if (!block) {
+        return;
+      }
+      setSelectedBlockId(block.blockId);
+      setBulkBlockIds([]);
+      if (block.type === 'COMPONENT_BLOCK') {
+        compositionActionHandler && compositionActionHandler({
+          type: '@COMPOSITION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: block.blockId,
+              type: block.type,
+              cbId: block.componentBlockId,
+              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
             }
-        };
-    }, [componentBlocks]);
-    (0, react_1.useLayoutEffect)(function () {
-        var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders, placementRestriction);
-        setLayouts(function (prev) {
-            var _a;
-            var _b;
-            var group = (0, group_2.getGroupCB)(prev[layoutByDevice]);
-            var groupedCBIds = (_b = group === null || group === void 0 ? void 0 : group.childrenIds) !== null && _b !== void 0 ? _b : [];
-            var filteredLayout = (0, group_2.filterItemsById)(parsedLayouts[layoutByDevice], groupedCBIds);
-            if (group === null || group === void 0 ? void 0 : group.groupLayouts) {
-                var groupCbs = parsedLayouts[layoutByDevice].filter(function (each) {
-                    return groupedCBIds.includes(each.i);
-                });
-                if (groupCbs.length > 0) {
-                    var newGroupLayout = (0, group_2.getGroupForMultiple)(groupCbs);
-                    filteredLayout.push(newGroupLayout);
-                }
+          }
+        });
+        return;
+      }
+      if (block.type === 'GROUP_BLOCK') {
+        compositionActionHandler && compositionActionHandler({
+          type: '@COMPOSITION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: block.blockId,
+              type: 'GROUP_BLOCK',
+              workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
+              childrenBlockIds: (_c = (0, group_1.findDirectChildrenBlockIds)(newblock, block.blockId)) !== null && _c !== void 0 ? _c : [],
+              childrenCBIds: (_d = (0, group_1.findDirectChildrenCbIds)(newblock, block.blockId)) !== null && _d !== void 0 ? _d : []
             }
-            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
+          }
         });
-    }, [componentBlocks, group_2.getGroupCB, layoutByDevice, zOrders]);
-    (0, react_1.useEffect)(function () {
-        if (editingSectionId !== props.compositionData.id) {
-            setSelectedBlockId(null);
-            setBulkBlockIds([]);
-            setEditingGroupBlock('ROOT');
-        }
-    }, [editingSectionId]);
-    var workDir = (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : '/ROOT';
-    (0, react_1.useEffect)(function () {
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/WORKDIR_CHANGED',
-                payload: {
-                    workDir: workDir
-                }
-            });
-    }, [workDir]);
-    // NOTE: 추후에 event를 외부에서 전달받게하거나, 아예 상태를 끌어올리거나 해야합니다.
-    (0, react_1.useLayoutEffect)(function () {
-        var _a, _b, _c, _d, _e, _f;
-        if (props.compositionData.id !== editingSectionId) {
-            return;
-        }
-        if (!shortcutKeyMode) {
-            return;
+      }
+      return;
+    }
+    setBulkBlockIds(allRootChildIds);
+    var newBulkCBIds = allRootChildIds.map(function (id) {
+      return (0, group_1.formatBlockIdToCbId)(id);
+    }).filter(function (each) {
+      return each !== null;
+    });
+    var childrenCBIds = [];
+    if (newBulkCBIds.length === 0) {
+      var oneCB = (0, group_1.findOneComponentBlock)(newblock, allRootChildIds[0]);
+      childrenCBIds = oneCB ? [oneCB] : [];
+    } else {
+      childrenCBIds = newBulkCBIds;
+    }
+    var groupDisabled = getWorkDirDirectChildrenLength() === allRootChildIds.length;
+    compositionActionHandler && compositionActionHandler({
+      type: '@COMPOSITION/BLOCK_CLICKED',
+      payload: {
+        block: {
+          type: 'BULK',
+          blockId: 'BULK',
+          childrenBlockIds: allRootChildIds,
+          workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
+          childrenCBIds: childrenCBIds,
+          groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
         }
-        if (shortcutKeyMode === 'SELECT_ALL') {
-            makeAllInOneGroup();
-            return;
+      }
+    });
+  };
+  var getCollisionGroupIds = function (cdId1) {
+    var layoutItem = (0, renderHelpers_1.getLayoutItem)(layouts[layoutByDevice], cdId1.toString());
+    if (!layoutItem) {
+      return [];
+    }
+    var allCollisions = (0, renderHelpers_1.getAllCollisions)(layouts[layoutByDevice], layoutItem);
+    var allCollisionsCbIds = allCollisions.map(function (each) {
+      return Number(each.i);
+    });
+    var workDirChildrenBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock);
+    var collisions = workDirChildrenBlockIds.filter(function (each) {
+      var cbId = (0, group_1.formatBlockIdToCbId)(each);
+      var allCollisions = (0, group_1.findAllChildrenCbIds)(newblock, each);
+      if (cbId !== null && allCollisionsCbIds.includes(cbId)) {
+        return true;
+      }
+      var hasCollision = allCollisions.some(function (each) {
+        return allCollisionsCbIds.includes(each);
+      });
+      return hasCollision;
+    });
+    return __spreadArray(__spreadArray([], collisions, true), [(0, group_1.formatCbIdToBlockId)(cdId1)], false);
+  };
+  var _r = (0, parseCompositionPlacement_1.default)({
+      isMobile: isMobile,
+      compositionProps: CB_PLACEMENT_PROP_COMPOSITION
+    }),
+    minHeight = _r.minHeight,
+    maxWidth = _r.maxWidth,
+    maxHeight = _r.maxHeight,
+    minWidth = _r.minWidth;
+  var customSectionStyles = {
+    minHeight: "".concat(minHeight, "px"),
+    maxHeight: "".concat(maxHeight, "px"),
+    width: "".concat(canvasWidth, "px"),
+    maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
+    minWidth: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px")
+  };
+  var breakpoint = device === 'MOBILE' ? 'sm' : 'lg';
+  var onClickCB = function (id) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var blockId = (0, group_1.formatCbIdToBlockId)(id);
+    if (!isEditMode) {
+      return;
+    }
+    var added = function () {
+      if (selectedBlockId === editingGroupBlock) {
+        return [blockId];
+      }
+      if (selectedBlockId === 'BULK') {
+        return [blockId];
+      }
+      return selectedBlockId ? [selectedBlockId, blockId] : [blockId];
+    }();
+    if (shortcutKeyMode === 'BULK_SELECT') {
+      setBulkBlockIds(function (prev) {
+        var set = new Set(__spreadArray(__spreadArray([], prev, true), added, true));
+        return Array.from(set);
+      });
+      setSelectedBlockId(null);
+      var newBulkBlockIds = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
+      var newBulkCBIds = newBulkBlockIds.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      var childrenCBIds = [];
+      if (newBulkCBIds.length === 0) {
+        var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
+        childrenCBIds = oneCB ? [oneCB] : [];
+      } else {
+        childrenCBIds = newBulkCBIds;
+      }
+      var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), added, true).length;
+      compositionActionHandler && compositionActionHandler({
+        type: '@COMPOSITION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            type: 'BULK',
+            blockId: 'BULK',
+            childrenBlockIds: newBulkBlockIds,
+            childrenCBIds: childrenCBIds,
+            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-        // esc
-        if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
-            if (selectedBlockId &&
-                editingGroupBlock !== selectedBlockId &&
-                editingGroupBlock !== 'ROOT') {
-                setSelectedBlockId(null);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: editingGroupBlock,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                                childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : [],
-                                childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : []
-                            }
-                        }
-                    });
-                return;
-            }
-            if (bulkBlockIds.length > 0) {
-                setBulkBlockIds([]);
-                setSelectedBlockId(null);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: editingGroupBlock,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
-                                childrenBlockIds: (_e = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : [],
-                                childrenCBIds: (_f = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _f !== void 0 ? _f : []
-                            }
-                        }
-                    });
-                return;
-            }
-            if (editingGroupBlock !== 'ROOT') {
-                setEditingGroupBlock('ROOT');
-                setSelectedBlockId(null);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BULK_DISMISSED',
-                        payload: {
-                            message: 'MANUAL_BULK_BREAK_OR_ESC',
-                            editingGroupBlock: 'ROOT'
-                        }
-                    });
-                return;
-            }
-            if (editingGroupBlock === 'ROOT') {
-                setSelectedBlockId(null);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BULK_DISMISSED',
-                        payload: {
-                            message: 'MANUAL_BULK_BREAK_OR_ESC',
-                            editingGroupBlock: 'ROOT'
-                        }
-                    });
+      });
+      return;
+    }
+    if (shortcutKeyMode === 'COLLISION_SELECT') {
+      var bulks = getCollisionGroupIds(id);
+      var newBulksSet = new Set(__spreadArray(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true), bulks, true));
+      var newBulks = Array.from(newBulksSet);
+      if (newBulks.length === 1) {
+        var blockId_1 = newBulks[0];
+        setSelectedBlockId(blockId_1);
+        setBulkBlockIds([]);
+        compositionActionHandler && compositionActionHandler({
+          type: '@COMPOSITION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              type: 'COMPONENT_BLOCK',
+              blockId: blockId_1,
+              cbId: id,
+              workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
             }
+          }
+        });
+        return;
+      }
+      setBulkBlockIds(newBulks);
+      setSelectedBlockId(null);
+      var newBulkCBIds = newBulks.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      var childrenCBIds = [];
+      if (newBulkCBIds.length === 0) {
+        var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks[0]);
+        childrenCBIds = oneCB ? [oneCB] : [];
+      } else {
+        childrenCBIds = newBulkCBIds;
+      }
+      var groupDisabled = getWorkDirDirectChildrenLength() === newBulks.length;
+      compositionActionHandler && compositionActionHandler({
+        type: '@COMPOSITION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            type: 'BULK',
+            blockId: 'BULK',
+            childrenBlockIds: newBulks,
+            workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND',
+            childrenCBIds: childrenCBIds,
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-    }, [shortcutKeyMode, setSelectedBlockId]);
-    (0, react_1.useLayoutEffect)(function () {
-        var _a;
-        if (props.compositionData.id !== editingSectionId) {
-            return;
+      });
+      return;
+    }
+    var blockType = blockId.startsWith('GB_') ? 'GROUP_BLOCK' : 'COMPONENT_BLOCK';
+    setSelectedBlockId(blockId);
+    setBulkBlockIds([]);
+    if (blockType === 'COMPONENT_BLOCK') {
+      compositionActionHandler && compositionActionHandler({
+        type: '@COMPOSITION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            blockId: blockId,
+            type: blockType,
+            cbId: id,
+            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND'
+          }
         }
-        if (shortcutKeyMode === 'MANUAL_COLLISION_SELECT') {
-            if (!selectedBlockId || selectedBlockId === 'BULK') {
-                return;
-            }
-            var selectedCBId = selectedBlockId ? (0, group_1.formatBlockIdToCbId)(selectedBlockId) : undefined;
-            if (!selectedCBId) {
-                return;
-            }
-            var bulks_1 = getCollisionGroupIds(selectedCBId);
-            if (selectedBlockId) {
-                bulks_1.push(selectedBlockId);
-            }
-            setBulkBlockIds(function (prev) {
-                var set = new Set(__spreadArray(__spreadArray([], prev, true), bulks_1, true));
-                return Array.from(set);
-            });
-            setSelectedBlockId(null);
-            var newBulkCBIds = bulks_1
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds = [];
-            if (newBulkCBIds.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks_1[0]);
-                childrenCBIds = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds = newBulkCBIds;
-            }
-            var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), bulks_1, true).length;
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: bulks_1,
-                            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                            childrenCBIds: childrenCBIds,
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
+      });
+      return;
+    }
+    if (blockType === 'GROUP_BLOCK') {
+      compositionActionHandler && compositionActionHandler({
+        type: '@COMPOSITION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            blockId: blockId,
+            type: 'GROUP_BLOCK',
+            workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
+            childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _f !== void 0 ? _f : [],
+            childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _g !== void 0 ? _g : []
+          }
         }
-    }, [
-        selectedBlockId,
-        shortcutKeyMode,
-        compositionActionHandler,
-        bulkBlockIds,
-        setSelectedBlockId
-    ]);
-    var makeAllInOneGroup = function () {
-        var _a, _b, _c, _d, _e;
-        var allRootChildIds = (0, group_1.findDirectChildrenBlockIds)(pedigreeState, editingGroupBlock);
-        if (allRootChildIds.length === 1) {
-            var block = (0, group_1.findBlockByBlockId)(newblock, allRootChildIds[0]);
-            if (!block) {
-                return;
-            }
-            setSelectedBlockId(block.blockId);
-            setBulkBlockIds([]);
-            if (block.type === 'COMPONENT_BLOCK') {
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: block.blockId,
-                                type: block.type,
-                                cbId: block.componentBlockId,
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-                            }
-                        }
-                    });
-                return;
-            }
-            if (block.type === 'GROUP_BLOCK') {
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: block.blockId,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-                                childrenBlockIds: (_c = (0, group_1.findDirectChildrenBlockIds)(newblock, block.blockId)) !== null && _c !== void 0 ? _c : [],
-                                childrenCBIds: (_d = (0, group_1.findDirectChildrenCbIds)(newblock, block.blockId)) !== null && _d !== void 0 ? _d : []
-                            }
-                        }
-                    });
-            }
-            return;
+      });
+    }
+  };
+  var onContextMenuCB = function (id, e) {
+    var _a;
+    var blockId = (0, group_1.formatCbIdToBlockId)(id);
+    if (!isEditMode) {
+      return;
+    }
+    if (selectedBlockId === 'BULK' && blockId !== selectedBlockId) {
+      setBulkBlockIds([]);
+    }
+    // if (!['COLLISION_SELECT', 'BULK_SELECT'].includes(shortcutKeyMode ?? '')) {
+    //   if (blockId !== selectedBlockId) {
+    //     setBulkBlockIds([]);
+    //   }
+    // }
+    setSelectedBlockId(blockId);
+    if (compositionActionHandler) {
+      compositionActionHandler({
+        type: '@COMPOSITION/CB_RIGHT_CLICKED',
+        payload: {
+          e: e,
+          block: {
+            blockId: blockId,
+            cbId: id,
+            type: 'COMPONENT_BLOCK',
+            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
+          }
         }
-        setBulkBlockIds(allRootChildIds);
-        var newBulkCBIds = allRootChildIds
-            .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-            .filter(function (each) { return each !== null; });
-        var childrenCBIds = [];
-        if (newBulkCBIds.length === 0) {
-            var oneCB = (0, group_1.findOneComponentBlock)(newblock, allRootChildIds[0]);
-            childrenCBIds = oneCB ? [oneCB] : [];
+      });
+    }
+  };
+  var onLayoutChange = function (props) {
+    if (!isEditMode) {
+      return;
+    }
+    if (compositionActionHandler) {
+      compositionActionHandler({
+        type: '@COMPOSITION/PLACEMENT_CHANGED',
+        payload: props
+      });
+    }
+    setLayouts(props.layouts);
+  };
+  var onDragStart = function (props) {
+    compositionActionHandler && compositionActionHandler({
+      type: '@COMPOSITION/CB_DRAG_START',
+      payload: __assign({}, props)
+    });
+  };
+  var onDragStop = function (props) {
+    var _a, _b, _c;
+    if (!isEditMode || !props.item) {
+      return;
+    }
+    var item = props.item,
+      prev = props.prev;
+    var isShiftOn = shortcutKeyMode === 'BULK_SELECT' || shortcutKeyMode === 'COLLISION_SELECT';
+    if (isLayoutPlacementSame(item, prev) && isShiftOn) {
+      setTimeout(function () {
+        onClickCB(Number(item.i));
+      }, 0);
+      return;
+    }
+    // NOTE 미사용시 삭제
+    // if (item.i === 'BULK' && props.compositionData.item.groupLayouts) {
+    //   setSelectedBlockId('BULK');
+    //   const outerBasedChildrenPositions = props.compositionData.item.groupLayouts.map((cb) => ({
+    //     ...cb,
+    //     x: item.x + cb.x,
+    //     y: item.y + cb.y
+    //   }));
+    //   compositionActionHandler &&
+    //     compositionActionHandler({
+    //       type: '@COMPOSITION/BULK_DRAG_STOP',
+    //       payload: {
+    //         updatedBlocks: props.compositionData.
+    //         ...props,
+    //         outerBasedChildrenPositions,
+    //         workDir: getBlockWorkDirPath(newblock, editingGroupBlock) ?? 'NOT-FOUND'
+    //       }
+    //     });
+    //   return;
+    // }
+    var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
+    var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
+    var isIdNumber = !Number.isNaN(numberId);
+    if (blockId) {
+      if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
+        setTimeout(function () {
+          setBulkBlockIds([]);
+        }, 100);
+      }
+      setSelectedBlockId(blockId);
+    }
+    if (isLayoutPlacementSame(item, prev)) {
+      // 확인 필요.. 그룹과 벌크
+      compositionActionHandler && compositionActionHandler({
+        type: '@COMPOSITION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            blockId: blockId,
+            cbId: numberId,
+            type: 'COMPONENT_BLOCK',
+            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
+          }
         }
-        else {
-            childrenCBIds = newBulkCBIds;
+      });
+      return;
+    }
+    if (compositionActionHandler && isIdNumber) {
+      compositionActionHandler({
+        type: '@COMPOSITION/CB_DRAG_STOP',
+        payload: __assign(__assign({}, props), {
+          blockId: blockId,
+          workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND'
+        })
+      });
+    }
+  };
+  var onResizeStop = function (props) {
+    var _a;
+    var prev = props.prev,
+      item = props.item;
+    if (!isEditMode || !item) {
+      return;
+    }
+    var numberId = Number(item.i);
+    var isIdNumber = !Number.isNaN(numberId);
+    if (isLayoutPlacementSame(item, prev)) {
+      return;
+    }
+    if (isIdNumber) {
+      var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
+      setSelectedBlockId(blockId);
+    }
+    if (compositionActionHandler && isIdNumber) {
+      compositionActionHandler({
+        type: '@COMPOSITION/CB_RESIZE_STOP',
+        payload: __assign(__assign({}, props), {
+          blockId: (0, group_1.formatCbIdToBlockId)(numberId),
+          workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
+        })
+      });
+    }
+  };
+  var onAutoFitContent = function (props) {
+    var _a;
+    var prev = props.prev,
+      item = props.item;
+    if (!isEditMode || !item) {
+      return;
+    }
+    var numberId = Number(item.i);
+    var isIdNumber = !Number.isNaN(numberId);
+    if (isLayoutPlacementSame(item, prev)) {
+      return;
+    }
+    if (isIdNumber) {
+      var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
+      setSelectedBlockId(blockId);
+    }
+    if (compositionActionHandler && isIdNumber) {
+      compositionActionHandler({
+        type: '@COMPOSITION/CB_AUTO_FIT_CONTENT',
+        payload: __assign(__assign({}, props), {
+          details: {
+            hadPaddingChanged: props.hasPaddingChanged
+          },
+          blockId: (0, group_1.formatCbIdToBlockId)(numberId),
+          workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
+        })
+      });
+    }
+  };
+  var onClickSection = function (e) {
+    if (!isEditMode) {
+      return;
+    }
+    if (editingGroupBlock !== 'ROOT') {
+      onClickGroup(e, editingGroupBlock);
+      return;
+    }
+    setBulkBlockIds([]);
+    setSelectedBlockId(null);
+    compositionActionHandler && compositionActionHandler({
+      type: '@COMPOSITION/COMPOSITION_CLICKED',
+      payload: {
+        compositionId: props.compositionData.id
+      }
+    });
+  };
+  var onContextGroup = function (e, blockId, isEditingGroup) {
+    var _a, _b, _c;
+    setSelectedBlockId(blockId);
+    var block = (0, group_1.findBlockByBlockId)(newblock, blockId);
+    if ((block === null || block === void 0 ? void 0 : block.type) === 'COMPONENT_BLOCK') {
+      return;
+    }
+    compositionActionHandler && compositionActionHandler({
+      type: '@COMPOSITION/GROUP_RIGHT_CLICKED',
+      payload: {
+        block: {
+          blockId: blockId,
+          type: 'GROUP_BLOCK',
+          workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
+          childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _b !== void 0 ? _b : [],
+          childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _c !== void 0 ? _c : []
+        },
+        e: e,
+        isEditingGroup: isEditingGroup
+      }
+    });
+  };
+  var onContextSection = function (e) {
+    if (editingGroupBlock !== 'ROOT') {
+      e.preventDefault();
+      return;
+    }
+    if (!isEditMode) {
+      return;
+    }
+    if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
+      setBulkBlockIds([]);
+    }
+    setSelectedBlockId(null);
+    compositionActionHandler && compositionActionHandler({
+      type: '@COMPOSITION/COMPOSITION_RIGHT_CLICKED',
+      payload: {
+        compositionId: props.compositionData.id,
+        e: e
+      }
+    });
+  };
+  var onWidthChange = function (width) {
+    // const responsiveFontMode =
+    //   // NOTE: local환경에서 CB_CONTENT_PROP_COMPOSITION이 없는 경우가 있음.
+    //   !!CB_CONTENT_PROP_COMPOSITION?.CB_CONTENT_PROP_COMPOSITION_SPEC_VARIABLEROOTFONTSIZE;
+    var responsiveFontMode = true;
+    if (device === 'MOBILE') {
+      // const cellWidth = width / rows;
+      var cellWidth_1 = 50;
+      setRowHeight(cellWidth_1 * 0.56);
+      baseFontSize !== 16 && setBaseFontSize(width * 0.0133);
+      responsiveFontMode ? setBaseFontSize(width * 0.0421) : setBaseFontSize(16);
+      return;
+    }
+    // const cellWidth = width / cols;
+    var cellWidth = 50;
+    setRowHeight(cellWidth * 0.56);
+    responsiveFontMode ? setBaseFontSize(width * 0.0133) : setBaseFontSize(16);
+  };
+  var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
+  var breakpoints = device === 'DESKTOP' ? {
+    lg: 100,
+    sm: 0
+  } : {
+    lg: 1200,
+    sm: 480
+  };
+  var innerRef = (0, react_1.useRef)(null);
+  var clickOneCBInBulk = function (id) {
+    var _a, _b;
+    var blockId = (0, group_1.formatCbIdToBlockId)(id);
+    if (shortcutKeyMode === 'COLLISION_SELECT') {
+      return;
+    }
+    if (shortcutKeyMode === 'BULK_SELECT') {
+      if (bulkBlockIds.length <= 2) {
+        var oneLastBlockId = bulkBlockIds.filter(function (each) {
+          return each !== blockId;
+        })[0];
+        setBulkBlockIds([]);
+        if (!oneLastBlockId) {
+          return;
         }
-        var groupDisabled = getWorkDirDirectChildrenLength() === allRootChildIds.length;
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/BLOCK_CLICKED',
-                payload: {
-                    block: {
-                        type: 'BULK',
-                        blockId: 'BULK',
-                        childrenBlockIds: allRootChildIds,
-                        workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-                        childrenCBIds: childrenCBIds,
-                        groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                    }
-                }
-            });
-    };
-    var getCollisionGroupIds = function (cdId1) {
-        var layoutItem = (0, renderHelpers_1.getLayoutItem)(layouts[layoutByDevice], cdId1.toString());
-        if (!layoutItem) {
-            return [];
+        var cbId = (0, group_1.formatBlockIdToCbId)(oneLastBlockId);
+        if (!cbId) {
+          return;
         }
-        var allCollisions = (0, renderHelpers_1.getAllCollisions)(layouts[layoutByDevice], layoutItem);
-        var allCollisionsCbIds = allCollisions.map(function (each) { return Number(each.i); });
-        var workDirChildrenBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock);
-        var collisions = workDirChildrenBlockIds.filter(function (each) {
-            var cbId = (0, group_1.formatBlockIdToCbId)(each);
-            var allCollisions = (0, group_1.findAllChildrenCbIds)(newblock, each);
-            if (cbId !== null && allCollisionsCbIds.includes(cbId)) {
-                return true;
+        setSelectedBlockId(oneLastBlockId);
+        compositionActionHandler && compositionActionHandler({
+          type: '@COMPOSITION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: oneLastBlockId,
+              cbId: cbId,
+              type: 'COMPONENT_BLOCK',
+              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
             }
-            var hasCollision = allCollisions.some(function (each) { return allCollisionsCbIds.includes(each); });
-            return hasCollision;
+          }
         });
-        return __spreadArray(__spreadArray([], collisions, true), [(0, group_1.formatCbIdToBlockId)(cdId1)], false);
-    };
-    var _r = (0, parseCompositionPlacement_1.default)({
-        isMobile: isMobile,
-        compositionProps: CB_PLACEMENT_PROP_COMPOSITION
-    }), minHeight = _r.minHeight, maxWidth = _r.maxWidth, maxHeight = _r.maxHeight, minWidth = _r.minWidth;
-    var customSectionStyles = {
-        minHeight: "".concat(minHeight, "px"),
-        maxHeight: "".concat(maxHeight, "px"),
-        width: "".concat(canvasWidth, "px"),
-        maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
-        minWidth: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px")
-    };
-    var breakpoint = device === 'MOBILE' ? 'sm' : 'lg';
-    var onClickCB = function (id) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var blockId = (0, group_1.formatCbIdToBlockId)(id);
-        if (!isEditMode) {
-            return;
+        return;
+      }
+      var filtered = bulkBlockIds.filter(function (each) {
+        return each !== blockId;
+      });
+      setBulkBlockIds(filtered);
+      var groupDisabled = getWorkDirDirectChildrenLength() === filtered.length;
+      var newBulkCBIds = filtered.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      compositionActionHandler && compositionActionHandler({
+        type: '@COMPOSITION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            type: 'BULK',
+            blockId: 'BULK',
+            childrenBlockIds: filtered,
+            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
+            childrenCBIds: newBulkCBIds,
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-        var added = (function () {
-            if (selectedBlockId === editingGroupBlock) {
-                return [blockId];
-            }
-            if (selectedBlockId === 'BULK') {
-                return [blockId];
-            }
-            return selectedBlockId ? [selectedBlockId, blockId] : [blockId];
-        })();
-        if (shortcutKeyMode === 'BULK_SELECT') {
-            setBulkBlockIds(function (prev) {
-                var set = new Set(__spreadArray(__spreadArray([], prev, true), added, true));
-                return Array.from(set);
-            });
-            setSelectedBlockId(null);
-            var newBulkBlockIds = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
-            var newBulkCBIds = newBulkBlockIds
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds = [];
-            if (newBulkCBIds.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
-                childrenCBIds = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds = newBulkCBIds;
+      });
+    }
+  };
+  var showSectionHiddenCover = function () {
+    if (mode === 'EDIT') {
+      var visibilityKey = device === 'DESKTOP' ? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP' : 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
+      // const isSectionVisible = jsonProperties?.CB_CONTENT_PROP_VISIBILITY[visibilityKey];
+      // 가시성 상태를 반전하여 숨겨진 커버를 표시할지 결정
+      // const shouldShowHiddenCover = !isSectionVisible;
+      // return shouldShowHiddenCover;
+    }
+    return false;
+  }();
+  var onDoubleClickGroup = function (e, id) {
+    e.stopPropagation();
+    if (id === 'BULK') {
+      return;
+    }
+    setEditingGroupBlock(id);
+  };
+  var onDoubleClickOutsideGroup = function () {
+    setEditingGroupBlock('ROOT');
+    setSelectedBlockId(null);
+  };
+  var onClickGroup = function (e, id) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    e.stopPropagation();
+    if (id === 'BULK') {
+      return;
+    }
+    if (editingGroupBlock === id && shortcutKeyMode === 'BULK_SELECT') {
+      return;
+    }
+    if (bulkBlockIds.includes(id) && shortcutKeyMode === 'BULK_SELECT') {
+      if (bulkBlockIds.length <= 2) {
+        var oneLastBlockId = bulkBlockIds.filter(function (each) {
+          return each !== id;
+        })[0];
+        setBulkBlockIds([]);
+        setSelectedBlockId(oneLastBlockId);
+        compositionActionHandler && compositionActionHandler({
+          type: '@COMPOSITION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: oneLastBlockId,
+              type: 'GROUP_BLOCK',
+              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
+              childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, oneLastBlockId)) !== null && _b !== void 0 ? _b : [],
+              childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, oneLastBlockId)) !== null && _c !== void 0 ? _c : []
             }
-            var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), added, true).length;
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: newBulkBlockIds,
-                            childrenCBIds: childrenCBIds,
-                            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
+          }
+        });
+        return;
+      }
+      var newBulkBlockIds_1 = bulkBlockIds.filter(function (each) {
+        return each !== id;
+      });
+      var newBulkCBIds_1 = newBulkBlockIds_1.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      var childrenCBIds_1 = [];
+      if (newBulkCBIds_1.length === 0) {
+        var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_1[0]);
+        childrenCBIds_1 = oneCB ? [oneCB] : [];
+      } else {
+        childrenCBIds_1 = newBulkCBIds_1;
+      }
+      setBulkBlockIds(newBulkBlockIds_1);
+      var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_1.length;
+      compositionActionHandler && compositionActionHandler({
+        type: '@COMPOSITION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            blockId: 'BULK',
+            type: 'BULK',
+            childrenBlockIds: newBulkBlockIds_1,
+            childrenCBIds: childrenCBIds_1,
+            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-        if (shortcutKeyMode === 'COLLISION_SELECT') {
-            var bulks = getCollisionGroupIds(id);
-            var newBulksSet = new Set(__spreadArray(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true), bulks, true));
-            var newBulks = Array.from(newBulksSet);
-            if (newBulks.length === 1) {
-                var blockId_1 = newBulks[0];
-                setSelectedBlockId(blockId_1);
-                setBulkBlockIds([]);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                type: 'COMPONENT_BLOCK',
-                                blockId: blockId_1,
-                                cbId: id,
-                                workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
-                            }
-                        }
-                    });
-                return;
-            }
-            setBulkBlockIds(newBulks);
-            setSelectedBlockId(null);
-            var newBulkCBIds = newBulks
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds = [];
-            if (newBulkCBIds.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks[0]);
-                childrenCBIds = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds = newBulkCBIds;
-            }
-            var groupDisabled = getWorkDirDirectChildrenLength() === newBulks.length;
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: newBulks,
-                            workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND',
-                            childrenCBIds: childrenCBIds,
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
+      });
+      return;
+    }
+    if (shortcutKeyMode === 'BULK_SELECT') {
+      var added = function () {
+        if (selectedBlockId === editingGroupBlock) {
+          return [id];
         }
-        var blockType = blockId.startsWith('GB_') ? 'GROUP_BLOCK' : 'COMPONENT_BLOCK';
-        setSelectedBlockId(blockId);
+        return selectedBlockId ? [selectedBlockId, id] : [id];
+      }();
+      if (bulkBlockIds.length === 0 && added.length === 1) {
+        setSelectedBlockId(id);
         setBulkBlockIds([]);
-        if (blockType === 'COMPONENT_BLOCK') {
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: blockId,
-                            type: blockType,
-                            cbId: id,
-                            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND'
-                        }
-                    }
-                });
-            return;
-        }
-        if (blockType === 'GROUP_BLOCK') {
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: blockId,
-                            type: 'GROUP_BLOCK',
-                            workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-                            childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _f !== void 0 ? _f : [],
-                            childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _g !== void 0 ? _g : []
-                        }
-                    }
-                });
-        }
-    };
-    var onContextMenuCB = function (id, e) {
-        var _a;
-        var blockId = (0, group_1.formatCbIdToBlockId)(id);
-        if (!isEditMode) {
-            return;
-        }
-        if (selectedBlockId === 'BULK' && blockId !== selectedBlockId) {
-            setBulkBlockIds([]);
-        }
-        // if (!['COLLISION_SELECT', 'BULK_SELECT'].includes(shortcutKeyMode ?? '')) {
-        //   if (blockId !== selectedBlockId) {
-        //     setBulkBlockIds([]);
-        //   }
-        // }
-        setSelectedBlockId(blockId);
-        if (compositionActionHandler) {
-            compositionActionHandler({
-                type: '@COMPOSITION/CB_RIGHT_CLICKED',
-                payload: {
-                    e: e,
-                    block: {
-                        blockId: blockId,
-                        cbId: id,
-                        type: 'COMPONENT_BLOCK',
-                        workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-                    }
-                }
-            });
-        }
-    };
-    var onLayoutChange = function (props) {
-        if (!isEditMode) {
-            return;
-        }
-        if (compositionActionHandler) {
-            compositionActionHandler({
-                type: '@COMPOSITION/PLACEMENT_CHANGED',
-                payload: props
-            });
-        }
-        setLayouts(props.layouts);
-    };
-    var onDragStart = function (props) {
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/CB_DRAG_START',
-                payload: __assign({}, props)
-            });
-    };
-    var onDragStop = function (props) {
-        var _a, _b, _c;
-        if (!isEditMode || !props.item) {
-            return;
-        }
-        var item = props.item, prev = props.prev;
-        var isShiftOn = shortcutKeyMode === 'BULK_SELECT' || shortcutKeyMode === 'COLLISION_SELECT';
-        if (isLayoutPlacementSame(item, prev) && isShiftOn) {
-            setTimeout(function () {
-                onClickCB(Number(item.i));
-            }, 0);
-            return;
-        }
-        // NOTE 미사용시 삭제
-        // if (item.i === 'BULK' && props.compositionData.item.groupLayouts) {
-        //   setSelectedBlockId('BULK');
-        //   const outerBasedChildrenPositions = props.compositionData.item.groupLayouts.map((cb) => ({
-        //     ...cb,
-        //     x: item.x + cb.x,
-        //     y: item.y + cb.y
-        //   }));
-        //   compositionActionHandler &&
-        //     compositionActionHandler({
-        //       type: '@COMPOSITION/BULK_DRAG_STOP',
-        //       payload: {
-        //         updatedBlocks: props.compositionData.
-        //         ...props,
-        //         outerBasedChildrenPositions,
-        //         workDir: getBlockWorkDirPath(newblock, editingGroupBlock) ?? 'NOT-FOUND'
-        //       }
-        //     });
-        //   return;
-        // }
-        var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
-        var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-        var isIdNumber = !Number.isNaN(numberId);
-        if (blockId) {
-            if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
-                setTimeout(function () {
-                    setBulkBlockIds([]);
-                }, 100);
+        compositionActionHandler && compositionActionHandler({
+          type: '@COMPOSITION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: id,
+              type: 'GROUP_BLOCK',
+              workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
+              childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, id)) !== null && _f !== void 0 ? _f : [],
+              childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, id)) !== null && _g !== void 0 ? _g : []
             }
-            setSelectedBlockId(blockId);
-        }
-        if (isLayoutPlacementSame(item, prev)) {
-            // 확인 필요.. 그룹과 벌크
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: blockId,
-                            cbId: numberId,
-                            type: 'COMPONENT_BLOCK',
-                            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
-                        }
-                    }
-                });
-            return;
-        }
-        if (compositionActionHandler && isIdNumber) {
-            compositionActionHandler({
-                type: '@COMPOSITION/CB_DRAG_STOP',
-                payload: __assign(__assign({}, props), { blockId: blockId, workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND' })
-            });
-        }
-    };
-    var onResizeStop = function (props) {
-        var _a;
-        var prev = props.prev, item = props.item;
-        if (!isEditMode || !item) {
-            return;
-        }
-        var numberId = Number(item.i);
-        var isIdNumber = !Number.isNaN(numberId);
-        if (isLayoutPlacementSame(item, prev)) {
-            return;
-        }
-        if (isIdNumber) {
-            var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-            setSelectedBlockId(blockId);
-        }
-        if (compositionActionHandler && isIdNumber) {
-            compositionActionHandler({
-                type: '@COMPOSITION/CB_RESIZE_STOP',
-                payload: __assign(__assign({}, props), { blockId: (0, group_1.formatCbIdToBlockId)(numberId), workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND' })
-            });
-        }
-    };
-    var onAutoFitContent = function (props) {
-        var _a;
-        var prev = props.prev, item = props.item;
-        if (!isEditMode || !item) {
-            return;
-        }
-        var numberId = Number(item.i);
-        var isIdNumber = !Number.isNaN(numberId);
-        if (isLayoutPlacementSame(item, prev)) {
-            return;
-        }
-        if (isIdNumber) {
-            var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-            setSelectedBlockId(blockId);
-        }
-        if (compositionActionHandler && isIdNumber) {
-            compositionActionHandler({
-                type: '@COMPOSITION/CB_AUTO_FIT_CONTENT',
-                payload: __assign(__assign({}, props), { details: { hadPaddingChanged: props.hasPaddingChanged }, blockId: (0, group_1.formatCbIdToBlockId)(numberId), workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND' })
-            });
+          }
+        });
+        return;
+      }
+      var newBulkBlockIds_2 = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
+      var newBulkCBIds_2 = newBulkBlockIds_2.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      setBulkBlockIds(newBulkBlockIds_2);
+      setSelectedBlockId(null);
+      var childrenCBIds_2 = [];
+      if (newBulkCBIds_2.length === 0) {
+        var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_2[0]);
+        childrenCBIds_2 = oneCB ? [oneCB] : [];
+      } else {
+        childrenCBIds_2 = newBulkCBIds_2;
+      }
+      var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_2.length;
+      compositionActionHandler && compositionActionHandler({
+        type: '@COMPOSITION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            blockId: 'BULK',
+            type: 'BULK',
+            childrenBlockIds: newBulkBlockIds_2,
+            childrenCBIds: childrenCBIds_2,
+            workDir: (_h = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _h !== void 0 ? _h : 'NOT-FOUND',
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-    };
-    var onClickSection = function (e) {
-        if (!isEditMode) {
-            return;
+      });
+      return;
+    }
+    setBulkBlockIds([]);
+    setSelectedBlockId(id);
+    var newBulkBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, id);
+    var newBulkCBIds = newBulkBlockIds.map(function (id) {
+      return (0, group_1.formatBlockIdToCbId)(id);
+    }).filter(function (each) {
+      return each !== null;
+    });
+    var childrenCBIds = [];
+    if (newBulkCBIds.length === 0) {
+      var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
+      childrenCBIds = oneCB ? [oneCB] : [];
+    } else {
+      childrenCBIds = newBulkCBIds;
+    }
+    compositionActionHandler && compositionActionHandler({
+      type: '@COMPOSITION/BLOCK_CLICKED',
+      payload: {
+        block: {
+          blockId: id,
+          type: 'GROUP_BLOCK',
+          workDir: (_j = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _j !== void 0 ? _j : 'NOT-FOUND',
+          childrenBlockIds: newBulkBlockIds,
+          childrenCBIds: childrenCBIds
         }
-        if (editingGroupBlock !== 'ROOT') {
-            onClickGroup(e, editingGroupBlock);
-            return;
+      }
+    });
+  };
+  var onBulkDragStop = function (_a) {
+    var _b;
+    var updatedItems = _a.updatedItems,
+      item = _a.item;
+    if ((item === null || item === void 0 ? void 0 : item.i) === 'BULK') {
+      compositionActionHandler && compositionActionHandler({
+        type: '@COMPOSITION/BULK_DRAG_STOP',
+        payload: {
+          updatedBlocks: updatedItems.map(function (i) {
+            return {
+              cbId: Number(i.id),
+              blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
+              x: i.x,
+              y: i.y
+            };
+          })
         }
-        setBulkBlockIds([]);
-        setSelectedBlockId(null);
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/COMPOSITION_CLICKED',
-                payload: {
-                    compositionId: props.compositionData.id
-                }
-            });
-    };
-    var onContextGroup = function (e, blockId, isEditingGroup) {
-        var _a, _b, _c;
-        setSelectedBlockId(blockId);
-        var block = (0, group_1.findBlockByBlockId)(newblock, blockId);
-        if ((block === null || block === void 0 ? void 0 : block.type) === 'COMPONENT_BLOCK') {
-            return;
+      });
+      return;
+    }
+    if (item) {
+      compositionActionHandler && compositionActionHandler({
+        type: '@COMPOSITION/GROUP_DRAG_STOP',
+        payload: {
+          workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, item.i)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
+          updatedBlocks: updatedItems.map(function (i) {
+            return {
+              cbId: Number(i.id),
+              blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
+              x: i.x,
+              y: i.y
+            };
+          })
         }
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/GROUP_RIGHT_CLICKED',
-                payload: {
-                    block: {
-                        blockId: blockId,
-                        type: 'GROUP_BLOCK',
-                        workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                        childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _b !== void 0 ? _b : [],
-                        childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _c !== void 0 ? _c : []
-                    },
-                    e: e,
-                    isEditingGroup: isEditingGroup
-                }
-            });
-    };
-    var onContextSection = function (e) {
-        if (editingGroupBlock !== 'ROOT') {
+      });
+    }
+  };
+  (0, react_1.useLayoutEffect)(function () {
+    if (innerRef.current) {
+      innerRef.current.setAttribute('data-section-id', props.compositionData.id.toString());
+    }
+  }, []);
+  function getWorkDirDirectChildrenLength() {
+    var ids = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock).filter(function (each) {
+      return each !== 'BULK';
+    });
+    return ids.length + bulkBlockIds.length;
+  }
+  var editableCBIDs = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock);
+  return (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, {
+    children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({
+      value: {
+        device: device
+        // mode,
+        // isPreview,
+        // navigationHandler,
+        // sectionActionHandler,
+        // editingSectionId,
+        // programmedSectionComponents,
+        // shortcutKeyMode,
+        // zoomScale,
+        // queryData
+      }
+    }, {
+      children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({
+        isBulkMode: shortcutKeyMode === 'BULK_SELECT'
+      }, {
+        children: (0, jsx_runtime_1.jsx)(S_COMPOSITIONWrapper, __assign({
+          ref: gleRef,
+          "x-dlayout-section-type": "NO_NAME",
+          onClick: onClickSection,
+          onContextMenu: function (e) {
+            e.stopPropagation();
             e.preventDefault();
-            return;
-        }
-        if (!isEditMode) {
-            return;
-        }
-        if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
-            setBulkBlockIds([]);
-        }
-        setSelectedBlockId(null);
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/COMPOSITION_RIGHT_CLICKED',
-                payload: {
-                    compositionId: props.compositionData.id,
-                    e: e
+            onContextSection(e);
+          }
+        }, {
+          children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, {
+            children: (0, jsx_runtime_1.jsx)(compositionQueryContext_1.CCBQueryPathContext.Provider, __assign({
+              value: {
+                queryData: props.queryDataItem
+              }
+            }, {
+              children: (0, jsx_runtime_1.jsx)(CompositionBackground_1.default, __assign({}, props.compositionData, {
+                isMobile: isMobile,
+                overrideStyles: {
+                  minHeight: customSectionStyles.minHeight,
+                  paddingTop: padding.top,
+                  paddingBottom: padding.bottom,
+                  paddingRight: padding.right,
+                  paddingLeft: padding.left
                 }
-            });
-    };
-    var onWidthChange = function (width) {
-        // const responsiveFontMode =
-        //   // NOTE: local환경에서 CB_CONTENT_PROP_COMPOSITION이 없는 경우가 있음.
-        //   !!CB_CONTENT_PROP_COMPOSITION?.CB_CONTENT_PROP_COMPOSITION_SPEC_VARIABLEROOTFONTSIZE;
-        var responsiveFontMode = true;
-        if (device === 'MOBILE') {
-            // const cellWidth = width / rows;
-            var cellWidth_1 = 50;
-            setRowHeight(cellWidth_1 * 0.56);
-            baseFontSize !== 16 && setBaseFontSize(width * 0.0133);
-            responsiveFontMode ? setBaseFontSize(width * 0.0421) : setBaseFontSize(16);
-            return;
-        }
-        // const cellWidth = width / cols;
-        var cellWidth = 50;
-        setRowHeight(cellWidth * 0.56);
-        responsiveFontMode ? setBaseFontSize(width * 0.0133) : setBaseFontSize(16);
-    };
-    var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
-    var breakpoints = device === 'DESKTOP' ? { lg: 100, sm: 0 } : { lg: 1200, sm: 480 };
-    var innerRef = (0, react_1.useRef)(null);
-    var clickOneCBInBulk = function (id) {
-        var _a, _b;
-        var blockId = (0, group_1.formatCbIdToBlockId)(id);
-        if (shortcutKeyMode === 'COLLISION_SELECT') {
-            return;
-        }
-        if (shortcutKeyMode === 'BULK_SELECT') {
-            if (bulkBlockIds.length <= 2) {
-                var oneLastBlockId = bulkBlockIds.filter(function (each) { return each !== blockId; })[0];
-                setBulkBlockIds([]);
-                if (!oneLastBlockId) {
-                    return;
-                }
-                var cbId = (0, group_1.formatBlockIdToCbId)(oneLastBlockId);
-                if (!cbId) {
-                    return;
-                }
-                setSelectedBlockId(oneLastBlockId);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: oneLastBlockId,
-                                cbId: cbId,
-                                type: 'COMPONENT_BLOCK',
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-                            }
-                        }
+              }, {
+                children: (0, jsx_runtime_1.jsx)(Responsive, __assign({
+                  sectionId: props.compositionData.id.toString(),
+                  innerRef: innerRef,
+                  className: (0, clsx_1.clsx)({
+                    'selected-grid-layout': editingSectionId === props.compositionData.id
+                  }),
+                  allowOverlap: true,
+                  layouts: layouts,
+                  resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'],
+                  breakpoints: breakpoints,
+                  breakpoint: breakpoint,
+                  cols: {
+                    lg: colsDesktop,
+                    sm: colsMobile
+                  },
+                  rowHeight: rowHeight,
+                  margin: [10, 10],
+                  style: {
+                    width: customSectionStyles.width,
+                    maxWidth: customSectionStyles.maxWidth,
+                    // minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
+                    // fontSize: `${baseFontSize}px`
+                    fontSize: "".concat(16, "px")
+                  },
+                  onLayoutChange: onLayoutChange,
+                  onDragStart: onDragStart,
+                  onDragStop: onDragStop,
+                  onResizeStop: onResizeStop,
+                  onDragStopForGroup: onBulkDragStop,
+                  onFitToContent: onAutoFitContent,
+                  onWidthChange: onWidthChange,
+                  minNbRow: rows,
+                  isDraggable: isEditMode,
+                  isResizable: isEditMode,
+                  zoom: props.editorProps.zoomScale,
+                  // GROUP
+                  selectedGroupBlock: (_d = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _d !== void 0 ? _d : 'ROOT',
+                  editingGroupBlock: editingGroupBlock,
+                  blockStructure: newblock,
+                  bulkIds: bulkBlockIds,
+                  onDoubleClickGroup: onDoubleClickGroup,
+                  onClickGroup: onClickGroup,
+                  onDoubleClickOutsideGroup: onDoubleClickOutsideGroup,
+                  onContextGroup: onContextGroup
+                }, {
+                  children: layouts[layoutByDevice].map(function (each, index) {
+                    var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) {
+                      return cb.id.toString() === each.i;
                     });
-                return;
-            }
-            var filtered = bulkBlockIds.filter(function (each) { return each !== blockId; });
-            setBulkBlockIds(filtered);
-            var groupDisabled = getWorkDirDirectChildrenLength() === filtered.length;
-            var newBulkCBIds = filtered
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: filtered,
-                            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-                            childrenCBIds: newBulkCBIds,
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
+                    var isInBulk = bulkBlockIds.includes((0, group_1.formatCbIdToBlockId)(Number(each.i)));
+                    if (!matchedCB) {
+                      return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                     }
-                });
-        }
-    };
-    var showSectionHiddenCover = (function () {
-        if (mode === 'EDIT') {
-            var visibilityKey = device === 'DESKTOP'
-                ? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP'
-                : 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
-            // const isSectionVisible = jsonProperties?.CB_CONTENT_PROP_VISIBILITY[visibilityKey];
-            // 가시성 상태를 반전하여 숨겨진 커버를 표시할지 결정
-            // const shouldShowHiddenCover = !isSectionVisible;
-            // return shouldShowHiddenCover;
-        }
-        return false;
-    })();
-    var onDoubleClickGroup = function (e, id) {
-        e.stopPropagation();
-        if (id === 'BULK') {
-            return;
-        }
-        setEditingGroupBlock(id);
-    };
-    var onDoubleClickOutsideGroup = function () {
-        setEditingGroupBlock('ROOT');
-        setSelectedBlockId(null);
-    };
-    var onClickGroup = function (e, id) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        e.stopPropagation();
-        if (id === 'BULK') {
-            return;
-        }
-        if (editingGroupBlock === id && shortcutKeyMode === 'BULK_SELECT') {
-            return;
-        }
-        if (bulkBlockIds.includes(id) && shortcutKeyMode === 'BULK_SELECT') {
-            if (bulkBlockIds.length <= 2) {
-                var oneLastBlockId = bulkBlockIds.filter(function (each) { return each !== id; })[0];
-                setBulkBlockIds([]);
-                setSelectedBlockId(oneLastBlockId);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: oneLastBlockId,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                                childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, oneLastBlockId)) !== null && _b !== void 0 ? _b : [],
-                                childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, oneLastBlockId)) !== null && _c !== void 0 ? _c : []
+                    return (0, jsx_runtime_1.jsx)("div", __assign({
+                      className: (0, clsx_1.clsx)({
+                        'react-grid-item-selected': selectedBlockId === (0, group_1.formatCbIdToBlockId)(matchedCB.id)
+                      })
+                    }, {
+                      children: (0, jsx_runtime_1.jsx)("div", __assign({
+                        className: (0, clsx_1.clsx)({
+                          'grid-item-child': true
+                        }),
+                        style: {
+                          width: '100%',
+                          height: '100%'
+                        },
+                        onClick: function (e) {
+                          e.stopPropagation();
+                          if (isInBulk) {
+                            clickOneCBInBulk(matchedCB.id);
+                            return;
+                          }
+                          if (editingGroupBlock !== 'ROOT') {
+                            if (!editableCBIDs.includes(matchedCB.id)) {
+                              e.preventDefault();
+                              return;
                             }
+                          }
+                          onClickCB(matchedCB.id);
+                        },
+                        onContextMenu: function (e) {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          onContextMenuCB(matchedCB.id, e);
                         }
-                    });
-                return;
-            }
-            var newBulkBlockIds_1 = bulkBlockIds.filter(function (each) { return each !== id; });
-            var newBulkCBIds_1 = newBulkBlockIds_1
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds_1 = [];
-            if (newBulkCBIds_1.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_1[0]);
-                childrenCBIds_1 = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds_1 = newBulkCBIds_1;
-            }
-            setBulkBlockIds(newBulkBlockIds_1);
-            var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_1.length;
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: 'BULK',
-                            type: 'BULK',
-                            childrenBlockIds: newBulkBlockIds_1,
-                            childrenCBIds: childrenCBIds_1,
-                            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
-        }
-        if (shortcutKeyMode === 'BULK_SELECT') {
-            var added = (function () {
-                if (selectedBlockId === editingGroupBlock) {
-                    return [id];
-                }
-                return selectedBlockId ? [selectedBlockId, id] : [id];
-            })();
-            if (bulkBlockIds.length === 0 && added.length === 1) {
-                setSelectedBlockId(id);
-                setBulkBlockIds([]);
-                compositionActionHandler &&
-                    compositionActionHandler({
-                        type: '@COMPOSITION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: id,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-                                childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, id)) !== null && _f !== void 0 ? _f : [],
-                                childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, id)) !== null && _g !== void 0 ? _g : []
-                            }
-                        }
-                    });
-                return;
-            }
-            var newBulkBlockIds_2 = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
-            var newBulkCBIds_2 = newBulkBlockIds_2
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            setBulkBlockIds(newBulkBlockIds_2);
-            setSelectedBlockId(null);
-            var childrenCBIds_2 = [];
-            if (newBulkCBIds_2.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_2[0]);
-                childrenCBIds_2 = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds_2 = newBulkCBIds_2;
-            }
-            var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_2.length;
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: 'BULK',
-                            type: 'BULK',
-                            childrenBlockIds: newBulkBlockIds_2,
-                            childrenCBIds: childrenCBIds_2,
-                            workDir: (_h = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _h !== void 0 ? _h : 'NOT-FOUND',
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
-        }
-        setBulkBlockIds([]);
-        setSelectedBlockId(id);
-        var newBulkBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, id);
-        var newBulkCBIds = newBulkBlockIds
-            .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-            .filter(function (each) { return each !== null; });
-        var childrenCBIds = [];
-        if (newBulkCBIds.length === 0) {
-            var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
-            childrenCBIds = oneCB ? [oneCB] : [];
-        }
-        else {
-            childrenCBIds = newBulkCBIds;
-        }
-        compositionActionHandler &&
-            compositionActionHandler({
-                type: '@COMPOSITION/BLOCK_CLICKED',
-                payload: {
-                    block: {
-                        blockId: id,
-                        type: 'GROUP_BLOCK',
-                        workDir: (_j = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _j !== void 0 ? _j : 'NOT-FOUND',
-                        childrenBlockIds: newBulkBlockIds,
-                        childrenCBIds: childrenCBIds
-                    }
-                }
-            });
-    };
-    var onBulkDragStop = function (_a) {
-        var _b;
-        var updatedItems = _a.updatedItems, item = _a.item;
-        if ((item === null || item === void 0 ? void 0 : item.i) === 'BULK') {
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/BULK_DRAG_STOP',
-                    payload: {
-                        updatedBlocks: updatedItems.map(function (i) { return ({
-                            cbId: Number(i.id),
-                            blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
-                            x: i.x,
-                            y: i.y
-                        }); })
-                    }
-                });
-            return;
-        }
-        if (item) {
-            compositionActionHandler &&
-                compositionActionHandler({
-                    type: '@COMPOSITION/GROUP_DRAG_STOP',
-                    payload: {
-                        workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, item.i)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-                        updatedBlocks: updatedItems.map(function (i) { return ({
-                            cbId: Number(i.id),
-                            blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
-                            x: i.x,
-                            y: i.y
-                        }); })
-                    }
-                });
-        }
-    };
-    (0, react_1.useLayoutEffect)(function () {
-        if (innerRef.current) {
-            innerRef.current.setAttribute('data-section-id', props.compositionData.id.toString());
-        }
-    }, []);
-    function getWorkDirDirectChildrenLength() {
-        var ids = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock).filter(function (each) { return each !== 'BULK'; });
-        return ids.length + bulkBlockIds.length;
-    }
-    var editableCBIDs = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock);
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
-                device: device
-                // mode,
-                // isPreview,
-                // navigationHandler,
-                // sectionActionHandler,
-                // editingSectionId,
-                // programmedSectionComponents,
-                // shortcutKeyMode,
-                // zoomScale,
-                // queryData
-            } }, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ isBulkMode: shortcutKeyMode === 'BULK_SELECT' }, { children: (0, jsx_runtime_1.jsx)(S_COMPOSITIONWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, onContextMenu: function (e) {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        onContextSection(e);
-                    } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(compositionQueryContext_1.CCBQueryPathContext.Provider, __assign({ value: { queryData: props.queryDataItem } }, { children: (0, jsx_runtime_1.jsx)(CompositionBackground_1.default, __assign({}, props.compositionData, { isMobile: isMobile, overrideStyles: {
-                                    minHeight: customSectionStyles.minHeight,
-                                    paddingTop: padding.top,
-                                    paddingBottom: padding.bottom,
-                                    paddingRight: padding.right,
-                                    paddingLeft: padding.left
-                                } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ sectionId: props.compositionData.id.toString(), innerRef: innerRef, className: (0, clsx_1.clsx)({
-                                        'selected-grid-layout': editingSectionId === props.compositionData.id
-                                    }), allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: colsDesktop, sm: colsMobile }, rowHeight: rowHeight, margin: [10, 10], style: {
-                                        width: customSectionStyles.width,
-                                        maxWidth: customSectionStyles.maxWidth,
-                                        // minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
-                                        // fontSize: `${baseFontSize}px`
-                                        fontSize: "".concat(16, "px")
-                                    }, onLayoutChange: onLayoutChange, onDragStart: onDragStart, onDragStop: onDragStop, onResizeStop: onResizeStop, onDragStopForGroup: onBulkDragStop, onFitToContent: onAutoFitContent, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode, zoom: props.editorProps.zoomScale, 
-                                    // GROUP
-                                    selectedGroupBlock: (_d = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _d !== void 0 ? _d : 'ROOT', editingGroupBlock: editingGroupBlock, blockStructure: newblock, bulkIds: bulkBlockIds, onDoubleClickGroup: onDoubleClickGroup, onClickGroup: onClickGroup, onDoubleClickOutsideGroup: onDoubleClickOutsideGroup, onContextGroup: onContextGroup }, { children: layouts[layoutByDevice].map(function (each, index) {
-                                        var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
-                                        var isInBulk = bulkBlockIds.includes((0, group_1.formatCbIdToBlockId)(Number(each.i)));
-                                        if (!matchedCB) {
-                                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                                        }
-                                        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, clsx_1.clsx)({
-                                                'react-grid-item-selected': selectedBlockId === (0, group_1.formatCbIdToBlockId)(matchedCB.id)
-                                            }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, clsx_1.clsx)({
-                                                    'grid-item-child': true
-                                                }), style: {
-                                                    width: '100%',
-                                                    height: '100%'
-                                                }, onClick: function (e) {
-                                                    e.stopPropagation();
-                                                    if (isInBulk) {
-                                                        clickOneCBInBulk(matchedCB.id);
-                                                        return;
-                                                    }
-                                                    if (editingGroupBlock !== 'ROOT') {
-                                                        if (!editableCBIDs.includes(matchedCB.id)) {
-                                                            e.preventDefault();
-                                                            return;
-                                                        }
-                                                    }
-                                                    onClickCB(matchedCB.id);
-                                                }, onContextMenu: function (e) {
-                                                    e.stopPropagation();
-                                                    e.preventDefault();
-                                                    onContextMenuCB(matchedCB.id, e);
-                                                } }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: matchedCB, device: device, rowHeight: rowHeight, index: index }) })) }), each.i));
-                                    }) })) })) })) }) })) })) })) }));
+                      }, {
+                        children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, {
+                          cbProps: matchedCB,
+                          device: device,
+                          rowHeight: rowHeight,
+                          index: index
+                        })
+                      }))
+                    }), each.i);
+                  })
+                }))
+              }))
+            }))
+          })
+        }))
+      }))
+    }))
+  });
 });
 function isLayoutPlacementSame(current, prev) {
-    if (!prev) {
-        return false;
-    }
-    return (prev.w === current.w &&
-        prev.h === current.h &&
-        prev.x === current.x &&
-        prev.y === current.y &&
-        prev.z === current.z &&
-        prev.i === current.i);
+  if (!prev) {
+    return false;
+  }
+  return prev.w === current.w && prev.h === current.h && prev.x === current.x && prev.y === current.y && prev.z === current.z && prev.i === current.i;
 }
 var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.default = react_1.default.memo(CompositionEditor);
-var templateObject_1;
+var templateObject_1;