polarvo-layout 1.0.19 → 1.0.21

package/src/core/engines/FreeDropEngine.js

@@ -14,8 +14,10 @@ class FreeDropEngine {
     this._elementsUpdate = false; // 원본 요소 목록 변경 플래그
     this._freeElements = []; // 로컬에서 사용하는 요소 목록
 
-    this._activeData = null;
     this._activeSection = null;
+    this._activeMode = null;
+    this._activeConfig = null;
+
     this._activeElement = null; // 드래그 중인 배치요소
 
     this.guides = { x: null, y: null, w: null, h: null }; // 가이드 라인 위치
@@ -50,43 +52,43 @@ class FreeDropEngine {
   /** [내부함수] 구독 설정 */
   _setupSubscriptions() {
     // 초기화 완료 이벤트 구독 - from DisplayEngine
-    this._subscribe('display:engineInitialized', ({ displaySize }) => {
-      const { gridSize } = displaySize;
+    this._subscribe('display:engineInitialized', ({ $displaySize }) => {
+      const { gridSize } = $displaySize;
       this._gridSize = gridSize;
 
       this._initialize();
     });
 
-    this._subscribe('display:enginesReset', ({ displaySize }) => {
-      const { gridSize } = displaySize;
+    this._subscribe('display:enginesReset', ({ $displaySize }) => {
+      const { gridSize } = $displaySize;
       this._gridSize = gridSize;
 
       this._initialize();
     });
 
     // displayMode 변경 감지 (displaySize가 함께 초기화됨)
-    this._subscribe('display:updateDisplayMode', ({ displaySize }) => {
-      const { gridSize } = displaySize;
+    this._subscribe('display:displayChanged', ({ $displaySize }) => {
+      const { gridSize } = $displaySize;
       this._gridSize = gridSize;
     });
 
     // layoutName 변경 감지 (gridNumber가 함께 초기화됨)
-    this._subscribe('layout:setLayoutName', ({ gridNumber }) => {
-      this._gridNumber = gridNumber;
+    this._subscribe('layout:setLayoutName', ({ $gridNumber }) => {
+      this._gridNumber = $gridNumber;
     });
-    this._subscribe('layout:updateLayoutName', ({ gridNumber }) => {
-      this._gridNumber = gridNumber;
+    this._subscribe('layout:updateLayoutName', ({ $gridNumber }) => {
+      this._gridNumber = $gridNumber;
     });
 
-    // activeSection 변경 감지 (activeData가 함께 초기화됨)
-    this._subscribe('system:updateActiveSection', ({ activeSection, activeData }) => {
-      this._activeSection = activeSection;
-      this._activeData = activeData;
-      // this.setActiveElement(null);
+    // activeSection 변경 감지
+    this._subscribe('system:updateActiveSection', ({ $section, $mode, $config }) => {
+      this._activeSection = $section;
+      this._activeMode = $mode;
+      this._activeConfig = $config;
     });
 
-    this._subscribe('system:setElements', ({ elements }) => {
-      this._elements = elements;
+    this._subscribe('system:setElements', ({ $elements }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
 
       // 활성화 요소 초기화
@@ -98,23 +100,16 @@ class FreeDropEngine {
       });
     });
 
-    // sectionConfig 변경 감지 (free 모드인 경우에만 activeData 갱신)
-    this._subscribe('system:updateActiveSectionConfig', ({ activeData }) => {
-      if (activeData?.mode == 'free') {
-        this._activeData = activeData;
-      }
+    this._subscribe('layout:updateLayoutData', ({ $mode, $config }) => {
+      this._activeMode = $mode;
+      this._activeConfig = $config;
     });
 
-    this._subscribe('system:requestUpdateData', ({ elements, elementId, activeData }) => {
-      this._elements = elements;
+    this._subscribe('system:requestUpdateElement', ({ $elements, $elementId }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
 
-      this.setActiveElement(this._elements.find((x) => x.id === elementId));
-
-      if (activeData?.mode == 'free') {
-        this._activeData = activeData;
-      }
-
+      this.setActiveElement(this._elements.find((x) => x.id === $elementId));
       this.eventBus.emit('freeDrop:requestUpdateData', {
         elements: cloneDeep(this.freeElements),
         guides: this.guides,
@@ -138,8 +133,8 @@ class FreeDropEngine {
       });
     });
 
-    this._subscribe('system:requestUpdateElements', ({ elements }) => {
-      this._elements = elements;
+    this._subscribe('system:requestElementsScale', ({ $elements }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
     });
 
@@ -155,6 +150,11 @@ class FreeDropEngine {
     });
   }
 
+  /** 엔진 초기화 */
+  reset() {
+    this._initialize();
+  }
+
   /** 삭제 및 정리 */
   destroy() {
     this._subscriptions.forEach((unsubscribe) => {
@@ -163,7 +163,8 @@ class FreeDropEngine {
       }
     });
 
-    this._initialize();
+    this.reset();
+    
     this._subscriptions = [];
     this.eventBus = null;
     this.resource = null;
@@ -223,8 +224,9 @@ class FreeDropEngine {
     this._startSize = { w: 0, h: 0 };
     this._offsetPos = { x: 0, y: 0 };
 
-    this._activeData = null;
     this._activeSection = null;
+    this._activeMode = null;
+    this._activeConfig = null;
     this._activeElement = null;
     this._alreadyExist = false;
 
@@ -309,8 +311,8 @@ class FreeDropEngine {
    * @return {boolean} - 가이드라인 표시 여부
    */
   _getGuideLineConfig() {
-    if (this._activeData && this._activeData.config) {
-      return this._activeData?.config?.showGuideLine;
+    if (this._activeConfig) {
+      return this._activeConfig?.showGuideLine;
     } else {
       return false;
     }
@@ -337,11 +339,7 @@ class FreeDropEngine {
    * @param {string} elName - 추가할 아이템 이름
    */
   addElement(event, elName) {
-    if (!this._activeData) {
-      console.error('[FreeDropEngine] 활성화된 데이터가 없습니다.');
-      return;
-    }
-    if (this._activeData.mode !== 'free') return;
+    if (this._activeMode !== 'free') return;
 
     this._startPos = { x: event.clientX, y: event.clientY };
 

package/src/core/engines/GridDropEngine.js

@@ -1,4 +1,4 @@
-import { cloneDeep, debounce } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 
 // event 발행 시 'gridDrop'으로 시작하는 이름 사용
 class GridDropEngine {
@@ -10,9 +10,10 @@ class GridDropEngine {
     this._elementsUpdate = false; // 원본 요소 목록 변경 플래그
     this._gridElements = []; // 로컬에서 사용하는 요소 목록
 
-    this._layoutData = null;
-    this._activeData = null;
+    // this._activeData = null;
     this._activeSection = null;
+    this._activeMode = null;
+    this._activeConfig = null;
     this._activeElement = null;
 
     this._targetCell = null; // 드래그 대상 셀
@@ -50,25 +51,15 @@ class GridDropEngine {
       this._initialize();
     });
 
-    this._subscribe('system:enginesReset', () => {
-      this._initialize();
-    });
-
-    // layoutData 변경 감지
-    this._subscribe('system:updateLayoutData', ({ layoutData, activeData }) => {
-      this._layoutData = layoutData;
-      this._activeData = activeData;
-    });
-
     // activeSection 변경 감지 (activeData가 함께 초기화됨)
-    this._subscribe('system:updateActiveSection', ({ activeSection, activeData }) => {
-      this._activeSection = activeSection;
-      this._activeData = activeData;
-      // this.setActiveElement(null);
+    this._subscribe('system:updateActiveSection', ({ $section, $mode, $config }) => {
+      this._activeSection = $section;
+      this._activeMode = $mode;
+      this._activeConfig = $config;
     });
 
-    this._subscribe('system:setElements', ({ elements }) => {
-      this._elements = elements;
+    this._subscribe('system:setElements', ({ $elements }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
 
       // 활성화 요소 초기화
@@ -80,22 +71,15 @@ class GridDropEngine {
       });
     });
 
-    this._subscribe('system:updateActiveSectionConfig', ({ layoutData, activeData }) => {
-      if (activeData?.mode == 'grid') {
-        this._layoutData = layoutData;
-        this._activeData = activeData;
-      }
+    this._subscribe('layout:updateLayoutData', ({ $mode, $config }) => {
+      this._activeMode = $mode;
+      this._activeConfig = $config;
     });
 
-    this._subscribe('system:requestUpdateData', ({ action, elements, elementId, layoutData, activeData }) => {
-      this._elements = elements;
+    this._subscribe('system:requestUpdateElement', ({ action, $elements, $elementId }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
-      this.setActiveElement(this._elements.find((x) => x.id === elementId) || null, action);
-
-      if (activeData?.mode == 'grid') {
-        this._layoutData = layoutData;
-        this._activeData = activeData;
-      }
+      this.setActiveElement(this._elements.find((x) => x.id === $elementId) || null, action);
 
       this.eventBus.emit('gridDrop:requestUpdateData', {
         elements: cloneDeep(this.gridElements),
@@ -119,13 +103,12 @@ class GridDropEngine {
       });
     });
 
-    this._subscribe('system:requestUpdateElements', ({ elements }) => {
-      this._elements = elements;
+    this._subscribe('system:requestElementsScale', ({ $elements }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
     });
 
     this._subscribe('system:restoredState', ({ stateData }) => {
-      this._layoutData = stateData.layoutData;
       this._elements = stateData.elements;
       this._elementsUpdate = true;
       this.setActiveElement(null);
@@ -137,6 +120,11 @@ class GridDropEngine {
     });
   }
 
+  /** 엔진 초기화 */
+  reset() {
+    this._initialize();
+  }
+
   /** 삭제 및 정리 */
   destroy() {
     this._subscriptions.forEach((unsubscribe) => {
@@ -145,7 +133,7 @@ class GridDropEngine {
       }
     });
 
-    this._initialize();
+    this.reset();
 
     this._subscriptions = [];
     this.eventBus = null;
@@ -203,8 +191,10 @@ class GridDropEngine {
     this._startPos = { x: 0, y: 0 };
     this._startSize = { w: 0, h: 0 };
 
-    this._activeData = null;
+    // this._activeData = null;
     this._activeSection = null;
+    this._activeMode = null;
+    this._activeConfig = null;
     this._activeElement = null;
 
     this._elementsUpdate = false;
@@ -270,7 +260,7 @@ class GridDropEngine {
    * @returns {object} - 드래그된 셀 수 ({ dx: , dy: })
    */
   _calculateDrag(currentPos, cellSize) {
-    const { gridGap } = this._activeData.config;
+    const { gridGap } = this._activeConfig;
 
     const dx = Math.round((currentPos.x - this._startPos.x) / (cellSize.w + gridGap));
     const dy = Math.round((currentPos.y - this._startPos.y) / (cellSize.h + gridGap));
@@ -283,7 +273,7 @@ class GridDropEngine {
    * @returns {number} - 그리드 셀 너비
    */
   _getGridCellWidth(element) {
-    const { gridGap, gridColumns } = this._activeData.config;
+    const { gridGap, gridColumns } = this._activeConfig;
     const totalWidth = element.clientWidth - gridGap * (gridColumns - 1);
     return totalWidth / gridColumns;
   }
@@ -293,7 +283,7 @@ class GridDropEngine {
    * @returns {number} - 그리드 셀 높이
    */
   _getGridCellHeight(element) {
-    const { gridGap, gridRows } = this._activeData.config;
+    const { gridGap, gridRows } = this._activeConfig;
     const totalHeight = element.clientHeight - gridGap * (gridRows - 1);
     return totalHeight / gridRows;
   }
@@ -331,11 +321,11 @@ class GridDropEngine {
    * @param {string} elName - 추가할 아이템 이름
    */
   addElement(elName) {
-    if (!this._activeData || !this._dragState.activeCell) {
+    if (!this._dragState.activeCell) {
       console.error('[GridDropEngine] 활성화된 데이터가 없습니다.');
       return;
     }
-    if (this._activeData.mode !== 'grid') return;
+    if (this._activeMode !== 'grid') return;
 
     const element = {
       id: elName + '_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7),
@@ -507,7 +497,7 @@ class GridDropEngine {
     // 리사이징 중인 경우에만 드래그 가능
     if (!this._dragState.isResizing) return;
 
-    const { gridColumns, gridRows } = this._activeData.config;
+    const { gridColumns, gridRows } = this._activeConfig;
 
     const activeSection = document.querySelector('.section-active');
     const { dx, dy } = this._calculateDrag(

package/src/core/engines/HistoryEngine.js

@@ -34,106 +34,108 @@ class HistoryEngine {
       this._initialize();
     });
 
-    this._subscribe('system:enginesReset', () => {
-      this._initialize();
-    });
-
     // 초기 상태 저장 - elements 설정 시점
-    this._subscribe('system:setElements', ({ layoutData, elements }) => {
+    this._subscribe('system:setElements', ({ $elements }) => {
       this._addHistory({
         engine: 'all',
         stateData: {
-          layoutData,
-          elements,
+          elements: $elements,
         },
       });
     });
 
     // layoutEngine
-    this._subscribe('layout:updateLayoutName', ({ layoutName, layoutData, gridNumber, gridRatio }) => {
+    this._subscribe('layout:updateLayoutName', ({ $layoutName, $layoutData, $gridNumber, $gridRatio, $gapSize }) => {
       this._addHistory({
         engine: 'layout',
         stateData: {
-          layoutName,
-          layoutData,
-          gridNumber,
-          gridRatio,
+          layoutName: $layoutName,
+          layoutData: $layoutData,
+          gridNumber: $gridNumber,
+          gridRatio: $gridRatio,
+          gapSize: $gapSize,
         },
       });
     });
 
-    this._subscribe('layout:updateGapSize', ({ gapSize }) => {
+    this._subscribe('layout:updateGapSize', ({ $gapSize }) => {
       this._addHistory({
         engine: 'layout',
         stateData: {
-          gapSize,
+          gapSize: $gapSize,
         },
       });
     });
 
-    this._subscribe('layout:updateRatio', ({ gridRatio }) => {
+    this._subscribe('layout:updateRatio', ({ $gridRatio }) => {
       this._addHistory({
         engine: 'layout',
         stateData: {
-          gridRatio,
+          gridRatio: $gridRatio,
         },
       });
     });
 
     // DisplayEngine
-    this._subscribe('display:updateDisplayMode', ({ displayMode, displaySize }) => {
-      this._addHistory({
-        engine: 'display',
-        stateData: {
-          displayMode,
-          displaySize,
-        },
-      });
-    });
-
-    this._subscribe('display:updateDisplaySize', ({ displaySize }) => {
-      this._addHistory({
-        engine: 'display',
-        stateData: {
-          displaySize,
-        },
-      });
+    this._subscribe('display:displayChanged', ({ type, $displayMode, $displaySize }) => {
+      if (type === 'mode') {
+        this._addHistory({
+          engine: 'display',
+          stateData: {
+            displayMode: $displayMode,
+            displaySize: $displaySize,
+          },
+        });
+      } else if (type === 'size') {
+        this._addHistory({
+          engine: 'display',
+          stateData: {
+            displaySize: $displaySize,
+          },
+        });
+      }
     });
 
     // engineManager
-    this._subscribe('system:updateActiveSectionConfig', ({ activeData }) => {
+    this._subscribe('system:updateActiveSectionConfig', ({ $section, changes }) => {
       this._addHistory({
         engine: 'engineManager',
         stateData: {
-          activeData,
+          section: $section,
+          changes,
         },
       });
     });
 
     // 요소 추가 또는 삭제
-    this._subscribe('layout:requestUpdateData', ({ layoutData, activeData, elements, activeSection }) => {
-      this._addHistory({
-        engine: 'engineManager',
-        stateData: {
-          layoutData,
-          activeData,
-          elements,
-          activeSection,
-        },
-      });
-    });
-
-    this._subscribe('system:requestUpdateElements', ({ historyEvent, elements }) => {
+    // this._subscribe('layout:requestUpdateData', ({ layoutData, activeData, elements, activeSection }) => {
+    //   this._addHistory({
+    //     engine: 'engineManager',
+    //     stateData: {
+    //       layoutData,
+    //       activeData,
+    //       elements,
+    //       activeSection,
+    //     },
+    //   });
+    // });
+
+    this._subscribe('system:requestElementsScale', ({ historyEvent, $elements }) => {
       if (!historyEvent) return;
       this._addHistory({
         engine: 'engineManager',
         stateData: {
-          elements,
+          elements: $elements,
         },
       });
     });
   }
 
+  /** 엔진 초기화 */
+  reset() {
+    this._initialize();
+  }
+
   /** 삭제 및 정리 */
   destroy() {
     this._subscriptions.forEach((unsubscribe) => {
@@ -142,6 +144,8 @@ class HistoryEngine {
       }
     });
 
+    this.reset();
+
     this._subscriptions = [];
     this.eventBus = null;
 
@@ -176,8 +180,8 @@ class HistoryEngine {
 
       // engineManager 상태 저장
       const managerState = this.manager.getState();
-      managerState.layoutData = cloneDeep(stateData.layoutData);
-      managerState.elements = cloneDeep(stateData.elements);
+      managerState.layoutData = stateData.layoutData;
+      managerState.elements = stateData.elements;
       allStates['engineManager'] = managerState;
 
       // 각 엔진 상태 저장