polarvo-layout 1.0.68 → 1.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polarvo-layout",
-  "version": "1.0.68",
+  "version": "1.0.70",
   "type": "module",
   "author": "unigence <unigencelab@gmail.com>",
   "repository": {

package/src/components/Layout/FreeLayout.vue

@@ -85,9 +85,8 @@ watch(
     if (newId && activeElement.value?.section !== props.sectionKey) return;
 
     if (!newId) {
-      console.l;
       setActiveDesign(null);
-      setActiveMenu(null);
+      // setActiveMenu(null);
     }
     _isElementSwitching = true;
     // selectedElement.value = structuredClone(toRaw(activeElement.value));

package/src/components/Layout/GridLayout.vue

@@ -344,6 +344,7 @@ watch(
 
     if (!newId) {
       setActiveDesign(null);
+      // setActiveMenu(null);
     }
     _isElementSwitching = true;
     // selectedElement.value = structuredClone(toRaw(activeElement.value));

package/src/components/SideBar/ElementSideBar.vue

@@ -145,8 +145,6 @@ function buildCustomElements() {
 function getElements() {
   allElements.value.default = buildDefaultElements();
   allElements.value.custom = buildCustomElements();
-
-  console.log("allElements.value.default", allElements.value);
 }
 
 onBeforeMount(() => {

package/src/configs/resources/layoutResource.js

@@ -15,9 +15,13 @@ const defaultConfig = {
   },
 };
 
-const createSections = (count, customConfig = {}) => {
-  const config = { ...defaultConfig, ...customConfig };
-  return Object.fromEntries(Array.from({ length: count }, (_, i) => [`section${i + 1}`, { ...config }]));
+const createSections = (count, positions = {}) => {
+  return Object.fromEntries(
+    Array.from({ length: count }, (_, i) => {
+      const key = `section${i + 1}`;
+      return [key, { ...defaultConfig, layoutPosition: positions[key] }];
+    }),
+  );
 };
 
 // 기본 아이콘 import
@@ -34,49 +38,57 @@ export const layoutResource = (icons = {}) => ({
     name: '전체화면',
     columnNumber: 1,
     rowNumber: 1,
-    sections: createSections(1),
+    sections: createSections(1, { section1: { col: 0, row: 0 } }),
     icon: markRaw(icons.NoSplitIcon || NoSplitIcon),
   },
   TopBottomSplit: {
     name: '상하 분할',
     columnNumber: 1,
     rowNumber: 2,
-    sections: createSections(2),
+    sections: createSections(2, { section1: { col: 0, row: 0 }, section2: { col: 0, row: 1 } }),
     icon: markRaw(icons.TopBottomSplitIcon || TopBottomSplitIcon),
   },
   LeftRightSplit: {
     name: '좌우 분할',
     columnNumber: 2,
     rowNumber: 1,
-    sections: createSections(2),
+    sections: createSections(2, { section1: { col: 0, row: 0 }, section2: { col: 1, row: 0 } }),
     icon: markRaw(icons.LeftRightSplitIcon || LeftRightSplitIcon),
   },
   ThreeRowSplit: {
     name: '수평 3분할',
     columnNumber: 1,
     rowNumber: 3,
-    sections: createSections(3),
+    sections: createSections(3, { section1: { col: 0, row: 0 }, section2: { col: 0, row: 1 }, section3: { col: 0, row: 2 } }),
     icon: markRaw(icons.ThreeRowSplitIcon || ThreeRowSplitIcon),
   },
   ThreeColumnSplit: {
     name: '수직 3분할',
     columnNumber: 3,
     rowNumber: 1,
-    sections: createSections(3),
+    sections: createSections(3, { section1: { col: 0, row: 0 }, section2: { col: 1, row: 0 }, section3: { col: 2, row: 0 } }),
     icon: markRaw(icons.ThreeColumnSplitIcon || ThreeColumnSplitIcon),
   },
   MainBottomSplit: {
     name: '메인-하단 분할',
     columnNumber: 2,
     rowNumber: 2,
-    sections: createSections(3),
+    sections: createSections(3, {
+      section1: { col: 0, row: 0, colSpan: 2 },
+      section2: { col: 0, row: 1 },
+      section3: { col: 1, row: 1 },
+    }),
     icon: markRaw(icons.MainBottomSplitIcon || MainBottomSplitIcon),
   },
   MainTopSplit: {
     name: '메인-상단 분할',
     columnNumber: 2,
     rowNumber: 2,
-    sections: createSections(3),
+    sections: createSections(3, {
+      section1: { col: 0, row: 0 },
+      section2: { col: 1, row: 0 },
+      section3: { col: 0, row: 1, colSpan: 2 },
+    }),
     icon: markRaw(icons.MainTopSplitIcon || MainTopSplitIcon),
   },
 });

package/src/core/engines/DisplayEngine.js

@@ -62,7 +62,9 @@ class DisplayEngine {
     });
 
     this._subscribe('freeDrop:setActiveElement', ({ action }) => {
-      if (action === 'update') return;
+      if (['update', 'sectionChange'].includes(action)) return;
+      if (action === 'click' && this.activeMenu === 'layout') return;
+
       this.setActiveMenu(null);
       this.setActiveDesign(null);
     });
@@ -74,7 +76,8 @@ class DisplayEngine {
     // });
 
     this._subscribe('gridDrop:setActiveElement', ({ action }) => {
-      if (action === 'update') return;
+      if (['update', 'sectionChange'].includes(action)) return;
+      if (action === 'click' && this.activeMenu === 'layout') return;
       this.setActiveMenu(null);
       this.setActiveDesign(null);
     });

package/src/core/engines/FreeDropEngine.js

@@ -89,7 +89,7 @@ class FreeDropEngine {
       this._activeMode = $mode;
       this._activeConfig = $config;
 
-      this.setActiveElement(null);
+      this.setActiveElement(null, 'sectionChange');
     });
 
     this._subscribe('system:setElements', ({ $elements }) => {
@@ -114,7 +114,7 @@ class FreeDropEngine {
       this._elements = $elements;
       this._elementsUpdate = true;
 
-      this.setActiveElement(this._elements.find((x) => x.id === $elementId));
+      this.setActiveElement(this._elements.find((x) => x.id === $elementId) ?? null);
 
       this.eventBus.emit('freeDrop:requestUpdateData', {
         elements: cloneDeep(this.freeElements),
@@ -578,6 +578,22 @@ class FreeDropEngine {
       newW = this._snapToGrid(this._startSize.w + deltaX);
     }
 
+    // 섹션 경계 제한 (반대쪽 끝은 고정한 채 넘친 만큼만 축소)
+    const layoutRect = this._getLayoutRect();
+    if (layoutRect) {
+      if (newY < 0) {
+        newH += newY;
+        newY = 0;
+      }
+      if (newX < 0) {
+        newW += newX;
+        newX = 0;
+      }
+
+      newH = Math.round(Math.min(newH, layoutRect.height - newY));
+      newW = Math.round(Math.min(newW, layoutRect.width - newX));
+    }
+
     // 최소 크기 제한
     newW = Math.max(40, newW);
     newH = Math.max(20, newH);

package/src/core/engines/GridDropEngine.js

@@ -57,7 +57,7 @@ class GridDropEngine {
       this._activeMode = $mode;
       this._activeConfig = $config;
 
-      this.setActiveElement(null);
+      this.setActiveElement(null, 'sectionChange');
     });
 
     this._subscribe('system:setElements', ({ $elements }) => {
@@ -82,7 +82,8 @@ class GridDropEngine {
       this._elements = $elements;
       this._elementsUpdate = true;
 
-      this.setActiveElement(this._elements.find((x) => x.id === $elementId));
+      this.setActiveElement(this._elements.find((x) => x.id === $elementId) ?? null);
+
       this.eventBus.emit('gridDrop:requestUpdateData', {
         elements: cloneDeep(this.gridElements),
         timestamp: Date.now(),

package/src/core/engines/LayoutEngine.js

@@ -218,6 +218,7 @@ class LayoutEngine {
         newLayoutData[sectionKey] = {
           ...newLayoutData[sectionKey],
           ...mergeSource[sectionKey],
+          layoutPosition: newLayoutData[sectionKey].layoutPosition, // 항상 새 레이아웃 기준으로 고정
         };
       }
     });

package/src/core/managers/EngineManager.js

@@ -121,6 +121,7 @@ class EngineManager {
       // layoutEngine
       case 'layout': {
         const prevRatio = this.getEngine('layout').gridRatio; // 복원 전 현재 비율
+        const prevLayoutData = this.state.layoutData; // 복원 전 layoutData (섹션 layoutPosition 비교용)
         this.getEngine('layout')?.setState(state);
         this.state.layoutData = state.layoutData;
         this.setActiveSection(null, true);
@@ -129,7 +130,7 @@ class EngineManager {
           prevRatio.column.length !== state.gridRatio.column.length || prevRatio.column.some((v, i) => v !== state.gridRatio.column[i]);
 
         if (ratioChanged) {
-          this._updateElementsScaleByRatio('column', prevRatio, state.gridRatio);
+          this._updateElementsScaleByRatio('column', prevRatio, state.gridRatio, prevLayoutData);
         }
         break;
       }
@@ -249,6 +250,22 @@ class EngineManager {
       ...safeChanges,
     };
 
+    // free 모드 요소의 크기 직접 입력 시, 섹션 경계를 넘지 않도록 제한
+    if (updatedElement.mode === 'free' && safeChanges.size) {
+      const layoutEl = document.getElementById(`${updatedElement.section}Layout`);
+      if (layoutEl) {
+        const { width, height } = layoutEl.getBoundingClientRect();
+        const maxW = width - updatedElement.position.x;
+        const maxH = height - updatedElement.position.y;
+
+        updatedElement.size = {
+          ...updatedElement.size,
+          w: Math.round(Math.max(40, Math.min(updatedElement.size.w, maxW))),
+          h: Math.round(Math.max(20, Math.min(updatedElement.size.h, maxH))),
+        };
+      }
+    }
+
     this.state.elements = [...this.state.elements.slice(0, index), updatedElement, ...this.state.elements.slice(index + 1)];
 
     // 변경된 element만 전달
@@ -328,12 +345,14 @@ class EngineManager {
     });
 
     this._subscribe('layout:updateLayoutName', ({ $layoutData, $gridRatio, $prev }) => {
+      const prevLayoutData = this.state.layoutData; // 레이아웃 전환 전 layoutData (섹션 layoutPosition 비교용)
       this.state.layoutData = $layoutData;
+
       this.setActiveSection(null, true);
 
       const prevGridRatio = $prev?.gridRatio || { column: [100], row: [100] };
-      this._updateElementsScaleByRatio('column', prevGridRatio, $gridRatio);
-      this._updateElementsScaleByRatio('row', prevGridRatio, $gridRatio);
+      this._updateElementsScaleByRatio('column', prevGridRatio, $gridRatio, prevLayoutData);
+      this._updateElementsScaleByRatio('row', prevGridRatio, $gridRatio, prevLayoutData);
 
       nextTick(() => {
         this.eventBus.emit('system:historyCheckpoint', {
@@ -361,50 +380,51 @@ class EngineManager {
     });
   }
 
-  _updateElementsScaleByRatio(type, oldValue, newValue) {
-    const oldLength = oldValue[type].length;
-    const newLength = newValue[type].length;
+  /** [내부함수] gridRatio 변경에 따라 요소 position/size 재계산
+   * @param {string} type - 'column' | 'row'
+   * @param {object} oldValue - 변경 전 gridRatio ({ column, row })
+   * @param {object} newValue - 변경 후 gridRatio ({ column, row })
+   * @param {object} oldLayoutData - 변경 전 layoutData. 
+   * 생략 시: 섹션 비율만 조정하는 경우
+   * 레이아웃 자체가 바뀌는 호출은 변경 전 layoutData를 넘겨야 함
+   */
+  _updateElementsScaleByRatio(type, oldValue, newValue, oldLayoutData = this.state.layoutData) {
+    // 축(column, row)에 따라 positionKey, sizeKey 결정
+    const positionKey = type === 'column' ? 'x' : 'y';
+    const sizeKey = type === 'column' ? 'w' : 'h';
+
+    // 요소를 받아서 좌표, 크기에 대해 배율을 곱해 새 요소 객체 반환하는 헬퍼
+    // column이면 x, w만 수정 / row면 y, h만 수정
+    const scaleElement = (el, scaleFactor) => ({
+      ...el,
+      position: { ...el.position, [positionKey]: el.position[positionKey] * scaleFactor },
+      size: { ...el.size, [sizeKey]: el.size[sizeKey] * scaleFactor },
+    });
 
-    let newDisplaySize = { ...this._displaySize };
+    // 섹션이 전체 너비/높이에서 차지하는 퍼센트 계산
+    const axisRatio = (ratios, pos) => {
+      const start = type === 'column' ? pos.col : pos.row; // 섹션이 시작하는 인덱스
+      const span = (type === 'column' ? pos.colSpan : pos.rowSpan) ?? 1; // 섹션이 차지하는 칸 수
+      return ratios.slice(start, start + span).reduce((sum, v) => sum + v, 0) / 100;
+    };
 
-    // 열 또는 행 개수가 늘어나는 경우 - 요소 크기 줄이기
-    if (oldLength < newLength) {
-      newDisplaySize.px = newDisplaySize.px / newLength;
-      this._updateElementsScale(this._displaySize, newDisplaySize);
-    }
-    // 열 또는 행 개수가 줄어드는 경우 - 요소 크기 늘리기
-    else if (oldLength > newLength) {
-      newDisplaySize.px = newDisplaySize.px / oldLength;
-      this._updateElementsScale(newDisplaySize, this._displaySize);
-    }
-    // 열 또는 행 개수는 동일하지만 비율이 변경되는 경우 - 요소 크기 조정
-    else {
-      this.state.elements = this.state.elements.map((el) => {
-        const sectionIndex = el.section ? parseInt(el.section.replace('section', '')) - 1 : 0;
-        const oldRatio = oldValue[type][sectionIndex] / 100;
-        const newRatio = newValue[type][sectionIndex] / 100;
-
-        const scaleFactor = newRatio / oldRatio;
-        return type === 'column'
-          ? {
-              ...el,
-              position: { ...el.position, x: el.position.x * scaleFactor },
-              size: { ...el.size, w: el.size.w * scaleFactor },
-            }
-          : {
-              ...el,
-              position: { ...el.position, y: el.position.y * scaleFactor },
-              size: { ...el.size, h: el.size.h * scaleFactor },
-            };
-      });
+   
+    this.state.elements = this.state.elements.map((el) => {
+      const oldPos = oldLayoutData?.[el.section]?.layoutPosition; // 변경 전 요소의 섹션 위치
+      const newPos = this.state.layoutData?.[el.section]?.layoutPosition; // 변경 후 요소의 섹션 위치
+      if (!oldPos || !newPos) return el;
 
-      // nextTick(() => {
-      this.eventBus.emit('system:requestElementsScale', {
-        $elements: this.state.elements,
-        timestamp: Date.now(),
-      });
-      // });
-    }
+      const oldRatio = axisRatio(oldValue[type], oldPos);
+      if (!oldRatio) return el;
+      const newRatio = axisRatio(newValue[type], newPos);
+
+      return scaleElement(el, newRatio / oldRatio);
+    });
+
+    this.eventBus.emit('system:requestElementsScale', {
+      $elements: this.state.elements,
+      timestamp: Date.now(),
+    });
   }
 
   /** activeSection 변경

package/src/library/FreeDropLibrary.js

@@ -143,9 +143,9 @@ function useFreeDrop(api) {
     }
   };
 
-  const setActiveElement = (element, type) => {
+  const setActiveElement = (element, action) => {
     try {
-      api.freeDrop.setActiveElement(element, type);
+      api.freeDrop.setActiveElement(element, action);
     } catch (error) {
       console.warn('[FreeDropLibrary] setActiveElement 실행 중 오류 발생:', error);
     }

package/src/library/GridDropLibrary.js

@@ -118,9 +118,9 @@ function useGridDrop(api) {
     }
   };
 
-  const setActiveElement = (element, type) => {
+  const setActiveElement = (element, action) => {
     try {
-      api.gridDrop.setActiveElement(element, type);
+      api.gridDrop.setActiveElement(element, action);
     } catch (error) {
       console.warn('[GridDropLibrary] setActiveElement 실행 중 오류 발생:', error);
     }