polarvo-layout 1.0.19 → 1.0.21

package/src/core/managers/EngineManager.js

@@ -4,11 +4,16 @@ import { nextTick } from 'vue';
 import EventBus from './EventBus.js';
 import ApiManager from './ApiManager.js';
 import utils from '../../utils/index.js';
-const { dataConverter } = utils;
+const { dataConverter, calculateAspectRatio } = utils;
 
 import createDefaultConfig from '../../configs/index.js';
 const { initialState, resource } = createDefaultConfig();
 
+const CONFIG_LIMITS = {
+  column: { min: 1, max: 12, name: '열 개수' },
+  row: { min: 1, max: 50, name: '행 개수' },
+  gap: { min: 0, max: 12, name: '갭 크기' },
+};
 // event 발행 시 'system'으로 시작하는 이름 사용
 class EngineManager {
   constructor(config = {}) {
@@ -26,9 +31,6 @@ class EngineManager {
       ...config.initialState,
     };
 
-    // (캐시) layoutData 및 activeSection 변경 감지용 -> activeData getter에서 사용
-    this._layoutData = null;
-
     // (캐시) dataConverter에서 사용하는 현재 컨테이너 크기
     this._containerWidth = 1920;
     this._containerHeight = 1080;
@@ -41,10 +43,11 @@ class EngineManager {
    * @return {object} - layoutData 중 activeSection 데이터 객체
    */
   get activeData() {
-    if (!this._layoutData || !this.state.activeSection) {
+    if (!this.state.layoutData || !this.state.activeSection) {
       return null;
     }
-    return this._layoutData[this.state.activeSection];
+
+    return this.state.layoutData[this.state.activeSection];
   }
 
   /** 상태 정보 반환
@@ -53,7 +56,7 @@ class EngineManager {
   getState() {
     return {
       elements: this.state.elements,
-      layoutData: cloneDeep(this._layoutData),
+      layoutData: cloneDeep(this.state.layoutData),
       activeData: cloneDeep(this.activeData),
       activeSection: this.state.activeSection,
     };
@@ -64,7 +67,7 @@ class EngineManager {
    */
   setState(state) {
     this.state.elements = state.elements;
-    this._layoutData = state.layoutData;
+    this.state.layoutData = state.layoutData;
     this.setActiveSection(state.activeSection);
 
     this.eventBus.emit('system:restoredState', {
@@ -78,52 +81,18 @@ class EngineManager {
    * @param {object} updates - 업데이트할 설정 값 객체
    */
   _updateActiveSectionConfig(type, updates) {
-    if (!this._layoutData || !this.state.activeSection) {
+    if (!this.state.layoutData || !this.state.activeSection) {
       console.error('[EngineManager] activeData를 업데이트할 수 없습니다.');
       return;
     }
 
-    Object.keys(updates).forEach((key) => {
-      if (!(key in this._layoutData[this.state.activeSection])) {
-        if (key == 'elementIds') {
-          this._layoutData[this.state.activeSection][key] = [];
-        } else {
-          this._layoutData[this.state.activeSection][key] = null;
-        }
-      }
-    });
-
-    // 원본 데이터 업데이트
-    this._layoutData[this.state.activeSection] = {
-      ...this._layoutData[this.state.activeSection],
-      ...updates,
-    };
-
-    // 이벤트 발행
     this.eventBus.emit('system:updateActiveSectionConfig', {
-      type: type,
-      layoutData: cloneDeep(this._layoutData),
-      activeData: cloneDeep(this.activeData),
+      $section: this.state.activeSection,
+      changes: { ...updates },
       timestamp: Date.now(),
     });
   }
 
-  // /** [내부함수] activeSection의 elementIds 업데이트
-  //  * @param {Array} elementIds - 새로운 elementIds 배열
-  //  */
-  // _updateActiveElementIds(elementIds) {
-  //   if (!this._layoutData || !this.state.activeSection) {
-  //     console.error('[EngineManager] activeData를 업데이트할 수 없습니다.');
-  //     return;
-  //   }
-
-  //   if (!('elementIds' in this._layoutData[this.state.activeSection])) {
-  //     this._layoutData[this.state.activeSection].elementIds = [];
-  //   }
-
-  //   this._layoutData[this.state.activeSection].elementIds = elementIds;
-  // }
-
   /** 현재 컨테이너 크기 설정 */
   setContainerSize() {
     try {
@@ -164,8 +133,7 @@ class EngineManager {
     this.state.elements = denormalizedElements.map((x) => (x.section ? { ...x } : { ...x, section: 'section1' }));
 
     this.eventBus.emit('system:setElements', {
-      layoutData: cloneDeep(this._layoutData),
-      elements: this.state.elements,
+      $elements: this.state.elements,
       timestamp: Date.now(),
     });
   }
@@ -203,31 +171,17 @@ class EngineManager {
   /** ---------------------------------- display Engine ---------------------------------- **/
   /** [내부함수] displayEngine 연결 설정 */
   _setupDisplayEngineConnections() {
-    this._subscribe('display:updateDisplayMode', ({ displaySize, prev }) => {
-      this._updateElementsScale(prev.displaySize, displaySize);
-    });
-
-    this._subscribe('display:updateDisplaySize', ({ displaySize, prev }) => {
-      this._updateElementsScale(prev.displaySize, displaySize);
+    this._subscribe('display:displayChanged', ({ $displaySize, prev }) => {
+      this._updateElementsScale(prev.displaySize, $displaySize);
     });
   }
 
   _updateElementsScale(oldValue, newValue) {
     const oldWidth = oldValue.px;
-    const oldHeight =
-      oldValue.px /
-      oldValue.aspectRatio
-        .split('/')
-        .map(Number)
-        .reduce((a, b) => a / b);
+    const oldHeight = oldValue.px / calculateAspectRatio(oldValue.aspectRatio);
 
     const newWidth = newValue.px;
-    const newHeight =
-      newValue.px /
-      newValue.aspectRatio
-        .split('/')
-        .map(Number)
-        .reduce((a, b) => a / b);
+    const newHeight = newValue.px / calculateAspectRatio(newValue.aspectRatio);
 
     nextTick(() => {
       this.setContainerSize();
@@ -235,11 +189,11 @@ class EngineManager {
       const normalizeElements = dataConverter.normalize(this.state.elements, oldWidth, oldHeight);
       const denormalizedElements = dataConverter.denormalize(normalizeElements, newWidth, newHeight);
 
-      this.state.elements = cloneDeep(denormalizedElements);
+      this.state.elements = denormalizedElements;
 
-      this.eventBus.emit('system:requestUpdateElements', {
+      this.eventBus.emit('system:requestElementsScale', {
         historyEvent: true,
-        elements: cloneDeep(this.state.elements),
+        $elements: this.state.elements,
         timestamp: Date.now(),
       });
     });
@@ -249,25 +203,17 @@ class EngineManager {
   /** [내부함수] layoutEngine 연결 설정 */
   _setupLayoutEngineConnections() {
     // layoutName 변경에 따른 activeSection 초기화
-    this._subscribe('layout:setLayoutName', ({ screenConfig }) => {
-      this._layoutData = screenConfig.layoutData;
+    this._subscribe('layout:setLayoutName', ({ $layoutData }) => {
+      this.state.layoutData = $layoutData;
       this.setActiveSection('section1', true);
-
-      this.eventBus.emit('system:updateLayoutData', {
-        layoutData: cloneDeep(this._layoutData),
-        activeData: cloneDeep(this.activeData),
-        timestamp: Date.now(),
-      });
     });
-    this._subscribe('layout:updateLayoutName', ({ layoutData }) => {
-      this._layoutData = layoutData;
+    this._subscribe('layout:updateLayoutName', ({ $layoutData }) => {
+      this.state.layoutData = $layoutData;
       this.setActiveSection(null, true);
+    });
 
-      this.eventBus.emit('system:updateLayoutData', {
-        layoutData: cloneDeep(this._layoutData),
-        activeData: cloneDeep(this.activeData),
-        timestamp: Date.now(),
-      });
+    this._subscribe('layout:updateLayoutData', ({ $layoutData, activeSection }) => {
+      this.state.layoutData = $layoutData;
     });
   }
 
@@ -281,8 +227,9 @@ class EngineManager {
     this.state.activeSection = name;
 
     this.eventBus.emit('system:updateActiveSection', {
-      activeSection: name,
-      activeData: cloneDeep(this.activeData),
+      $section: name,
+      $mode: this.activeData?.mode,
+      $config: this.activeData?.config,
       timestamp: Date.now(),
     });
   }
@@ -299,9 +246,23 @@ class EngineManager {
     if (!this.activeData || this.activeData.mode === mode) return;
     const updates = {
       mode: mode,
-      elementIds: this.state.elements.filter((x) => x.mode === mode).map((x) => x.id),
+      elementIds: this.state.elements.filter((x) => x.section === this.state.activeSection && x.mode === mode).map((x) => x.id),
     };
 
+    if (mode === 'grid') {
+      updates.config = {
+        gridColumns: this.activeData.config?.gridColumns || 2,
+        gridRows: this.activeData.config?.gridRows || 2,
+        gridGap: this.activeData.config?.gridGap || 4,
+        gridRowRatio: this.activeData.config?.gridRowRatio || [],
+        gridColumnRatio: this.activeData.config?.gridColumnRatio || [],
+      };
+    } else if (mode === 'free') {
+      updates.config = {
+        showGuideLine: this.activeData.config?.showGuideLine || false,
+      };
+    }
+
     this._updateActiveSectionConfig('mode', updates);
   }
 
@@ -311,17 +272,18 @@ class EngineManager {
    */
   setSectionConfig(type, config) {
     if (!['column', 'row', 'gap', 'guideLine'].includes(type)) {
-      console.error('[EngineManager] 잘못된 config 타입:', type);
-      return;
+      return { result: false, message: '입력할 수 없는 config 타입입니다.' };
     }
 
     if (!this.activeData) return;
 
-    const limits = {
-      column: { min: 1, max: 12, name: '열 개수' },
-      row: { min: 1, max: 50, name: '행 개수' },
-      gap: { min: 0, max: 12, name: '갭 크기' },
-    };
+    const limit = CONFIG_LIMITS[type];
+    const result = { result: true, message: 'config가 성공적으로 변경되었습니다.' };
+    // const limits = {
+    //   column: { min: 1, max: 12, name: '열 개수' },
+    //   row: { min: 1, max: 50, name: '행 개수' },
+    //   gap: { min: 0, max: 12, name: '갭 크기' },
+    // };
 
     let newConfig = {};
     let value = config;
@@ -329,13 +291,15 @@ class EngineManager {
     if (type === 'guideLine') {
       newConfig = { showGuideLine: value };
     } else {
-      if (value < limits[type].min) {
-        alert(`설정 가능한 최소 ${limits[type].name}는 ${limits[type].min}입니다.`);
+      if (value < limit.min) {
+        result.result = false;
+        result.message = `설정 가능한 최소 ${limit.name}는 ${limit.min}입니다.`;
       }
-      if (value > limits[type].max) {
-        alert(`설정 가능한 최대 ${limits[type].name}는 ${limits[type].max}입니다.`);
+      if (value > limit.max) {
+        result.result = false;
+        result.message = `설정 가능한 최대 ${limit.name}는 ${limit.max}입니다.`;
       }
-      value = Math.min(Math.max(limits[type].min, value), limits[type].max);
+      value = Math.min(Math.max(limit.min, value), limit.max);
 
       if (type === 'column') {
         newConfig = { gridColumns: value };
@@ -348,6 +312,8 @@ class EngineManager {
 
     const updates = { config: { ...this.activeData.config, ...newConfig } };
     this._updateActiveSectionConfig('config', updates);
+
+    return result;
   }
 
   /** ---------------------------------- freeDrop Engine ---------------------------------- **/
@@ -358,19 +324,14 @@ class EngineManager {
       if (this.state.elements.some((el) => el.id === element.id)) {
         return;
       }
-      
+
       this.state.elements.push(element);
       this._updateActiveSectionConfig('elementIds', { elementIds: [...this.activeData.elementIds, element.id] });
-      // this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
 
-      console.log('this.state.elements', this.state.elements)
-      this.eventBus.emit('system:requestUpdateData', {
+      this.eventBus.emit('system:requestUpdateElement', {
         action: 'add',
-        elements: this.state.elements,
-        elementId: element.id,
-        layoutData: cloneDeep(this._layoutData),
-        activeData: cloneDeep(this.activeData),
-        activeSection: this.state.activeSection,
+        $elements: this.state.elements,
+        $elementId: element.id,
         timestamp: Date.now(),
       });
     });
@@ -381,13 +342,10 @@ class EngineManager {
       this._updateActiveSectionConfig('elementIds', { elementIds: this.activeData.elementIds.filter((elId) => elId !== elementId) });
       // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
-      this.eventBus.emit('system:requestUpdateData', {
+      this.eventBus.emit('system:requestUpdateElement', {
         action: 'delete',
-        elements: this.state.elements,
-        elementId: null,
-        layoutData: cloneDeep(this._layoutData),
-        activeData: cloneDeep(this.activeData),
-        activeSection: this.state.activeSection,
+        $elements: this.state.elements,
+        $elementId: null,
         timestamp: Date.now(),
       });
     });
@@ -400,9 +358,9 @@ class EngineManager {
         element.size = size;
       }
 
-      this.eventBus.emit('system:requestUpdateElements', {
+      this.eventBus.emit('system:requestElementsScale', {
         historyEvent: historyEvent,
-        elements: cloneDeep(this.state.elements),
+        $elements: this.state.elements,
         guides: guides,
         timestamp: Date.now(),
       });
@@ -418,13 +376,10 @@ class EngineManager {
       this._updateActiveSectionConfig('elementIds', { elementIds: [...this.activeData.elementIds, element.id] });
       // this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
 
-      this.eventBus.emit('system:requestUpdateData', {
+      this.eventBus.emit('system:requestUpdateElement', {
         action: 'add',
-        elements: this.state.elements,
-        elementId: element.id,
-        layoutData: cloneDeep(this._layoutData),
-        activeData: cloneDeep(this.activeData),
-        activeSection: this.state.activeSection,
+        $elements: this.state.elements,
+        $elementId: element.id,
         timestamp: Date.now(),
       });
     });
@@ -435,13 +390,10 @@ class EngineManager {
       this._updateActiveSectionConfig('elementIds', { elementIds: this.activeData.elementIds.filter((elId) => elId !== elementId) });
       // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
-      this.eventBus.emit('system:requestUpdateData', {
+      this.eventBus.emit('system:requestUpdateElement', {
         action: 'delete',
-        elements: this.state.elements,
-        elementId: null,
-        layoutData: cloneDeep(this._layoutData),
-        activeData: cloneDeep(this.activeData),
-        activeSection: this.state.activeSection,
+        $elements: this.state.elements,
+        $elementId: null,
         timestamp: Date.now(),
       });
     });
@@ -456,9 +408,9 @@ class EngineManager {
         }
       }
 
-      this.eventBus.emit('system:requestUpdateElements', {
+      this.eventBus.emit('system:requestElementsScale', {
         historyEvent: historyEvent,
-        elements: cloneDeep(this.state.elements),
+        $elements: this.state.elements,
         timestamp: Date.now(),
       });
     });
@@ -648,7 +600,7 @@ class EngineManager {
     this.engines.clear();
     this._initialized = false;
 
-    this._layoutData = null;
+    this.state.layoutData = null;
 
     this.state = {};
     this.eventBus = null;
@@ -658,16 +610,26 @@ class EngineManager {
 
   /** 엔진 초기화 */
   resetEngines() {
+    console.log('[EngineManager] 엔진 초기화 시작');
+
+    for (const [name, engine] of this.engines) {
+      if (typeof engine.reset === 'function') {
+        engine.reset();
+      }
+    }
+
     this.state = {
       ...initialState,
       ...this.config.initialState,
     };
-
+    this._dataUpdate = false;
     this._layoutData = null;
 
     this.eventBus.emit('system:enginesReset', {
       timestamp: Date.now(),
     });
+
+    console.log('[EngineManager] 엔진 리셋 완료');
   }
 
   /** ---------------------------------- 캡슐화 API 메소드 ---------------------------------- **/