polarvo-layout 1.0.19 → 1.0.21

package/src/core/engines/LayoutEngine.js

@@ -32,29 +32,38 @@ class LayoutEngine {
   /** [내부함수] 구독 설정 */
   _setupSubscriptions() {
     // 초기화 완료 이벤트 구독 - from EngineManager
-    this._subscribe('system:engineInitialized', () => {});
-
-    this._subscribe('system:enginesReset', () => {
-      this.reset();
-    });
+    // this._subscribe('system:engineInitialized', () => {});
+
+    this._subscribe('system:updateActiveSectionConfig', ({ $section, changes }) => {
+      Object.keys(changes).forEach((key) => {
+        if (!(key in this.layoutData[$section])) {
+          if (key == 'elementIds') {
+            this.layoutData[$section][key] = [];
+          } else {
+            this.layoutData[$section][key] = null;
+          }
+        }
+      });
 
-    this._subscribe('system:updateActiveSectionConfig', ({ layoutData }) => {
-      this.layoutData = layoutData;
-      // Object.assign(this.layoutData, layoutData);
-    });
+      // 원본 데이터 업데이트
+      this.layoutData[$section] = {
+        ...this.layoutData[$section],
+        ...changes,
+      };
 
-    this._subscribe('system:requestUpdateData', ({ layoutData, activeData, elements, activeSection }) => {
-      this.layoutData = layoutData;
+      const activeData = this.layoutData[$section];
 
-      this.eventBus.emit('layout:requestUpdateData', {
-        layoutData: cloneDeep(this.layoutData),
-        activeData: activeData,
-        elements: elements,
-        activeSection: activeSection,
+      this.eventBus.emit('layout:updateLayoutData', {
+        $layoutData: this.layoutData,
+        $section: $section,
+        $mode: activeData?.mode,
+        $config: activeData?.config,
+        timestamp: Date.now(),
       });
     });
 
     this._subscribe('system:restoredState', ({ stateData }) => {
+      if (!stateData?.layoutData) return;
       Object.assign(this.layoutData, stateData.layoutData);
     });
   }
@@ -76,6 +85,8 @@ class LayoutEngine {
       }
     });
 
+    this.reset();
+
     this._subscriptions = [];
     this.eventBus = null;
     this.resource = null;
@@ -170,21 +181,23 @@ class LayoutEngine {
     // 초기 설정인 경우 설정값 전파
     if (screenConfig) {
       this.eventBus.emit('layout:setLayoutName', {
-        screenConfig: cloneDeep(screenConfig),
-        gridNumber: cloneDeep(this.gridNumber),
-        gridRatio: cloneDeep(this.gridRatio),
+        $screenConfig: screenConfig,
+        $layoutData: this.layoutData,
+        $gridNumber: this.gridNumber,
+        $gridRatio: this.gridRatio,
         timestamp: Date.now(),
       });
-    } 
+    }
     // 그 외 레이아웃 변경인 경우 레이아웃 정보 전파
     else {
       this.eventBus.emit('layout:updateLayoutName', {
-      layoutName: this.layoutName,
-      layoutData: cloneDeep(this.layoutData),
-      gridNumber: cloneDeep(this.gridNumber),
-      gridRatio: cloneDeep(this.gridRatio),
-      timestamp: Date.now(),
-    });
+        $layoutName: this.layoutName,
+        $layoutData: this.layoutData,
+        $gridNumber: this.gridNumber,
+        $gridRatio: this.gridRatio,
+        $gapSize: this.gapSize,
+        timestamp: Date.now(),
+      });
     }
   }
 
@@ -197,27 +210,17 @@ class LayoutEngine {
 
     const newLayoutData = cloneDeep(this.resource[name].sections);
 
-    // userData 있는 경우 우선 병합
-    if (userData) {
-      Object.keys(newLayoutData).forEach((sectionKey) => {
-        if (userData[sectionKey]) {
-          newLayoutData[sectionKey] = { ...newLayoutData[sectionKey], ...userData[sectionKey] };
-        }
-      });
-    }
-    // 기존 데이터 있는 경우 병합
-    else if (this.layoutData) {
-      {
-        Object.keys(newLayoutData).forEach((sectionKey) => {
-          if (this.layoutData[sectionKey]) {
-            newLayoutData[sectionKey] = {
-              ...newLayoutData[sectionKey],
-              ...this.layoutData[sectionKey],
-            };
-          }
-        });
+    // userData 있는 경우 우선 병합 - 기존 데이터 유지하면서 userData로 덮어쓰기
+    const mergeSource = userData || this.layoutData;
+
+    Object.keys(newLayoutData).forEach((sectionKey) => {
+      if (mergeSource[sectionKey]) {
+        newLayoutData[sectionKey] = {
+          ...newLayoutData[sectionKey],
+          ...mergeSource[sectionKey],
+        };
       }
-    }
+    });
 
     this.layoutData = newLayoutData;
   }
@@ -236,18 +239,26 @@ class LayoutEngine {
       this.gridRatio.column = gridRatio.column;
     } else {
       this.gridRatio.column = columnNumber === 1 ? [100] : Array(columnNumber).fill(Math.floor(100 / columnNumber));
+
+      if (columnNumber === 3) {
+        this.gridRatio.column[2] = 100 - this.gridRatio.column[0] - this.gridRatio.column[1];
+      }
     }
 
     if (gridRatio?.row) {
       this.gridRatio.row = gridRatio.row;
     } else {
       this.gridRatio.row = rowNumber === 1 ? [100] : Array(rowNumber).fill(Math.floor(100 / rowNumber));
+
+      if (rowNumber === 3) {
+        this.gridRatio.row[2] = 100 - this.gridRatio.row[0] - this.gridRatio.row[1];
+      }
     }
 
     this.gridNumber.column = columnNumber;
     this.gridNumber.row = rowNumber;
 
-    if (gapSize) {
+    if (gapSize != null) {
       this.gapSize = gapSize;
     }
   }
@@ -256,10 +267,12 @@ class LayoutEngine {
    * @param {number} size - 새로운 갭 사이즈
    */
   setGapSize(size) {
+    if (Number(size) < 0 || isNaN(Number(size))) return;
+
     this.gapSize = size;
 
     this.eventBus.emit('layout:updateGapSize', {
-      gapSize: this.gapSize,
+      $gapSize: this.gapSize,
       timestamp: Date.now(),
     });
   }
@@ -270,7 +283,7 @@ class LayoutEngine {
    * @param {number} ratio - 새로운 비율 값
    */
   setRatio(type, index, ratio) {
-    const ratioArray = type === 'column' ? this.gridRatio.column : this.gridRatio.row;
+    const ratioArray = this.gridRatio[type];
     ratioArray[index] = Number(ratio);
 
     const totalWithout = ratioArray.reduce((sum, val, idx) => {
@@ -283,34 +296,42 @@ class LayoutEngine {
     }
 
     const total = totalWithout + ratioArray[index];
+    const result = { result: true, message: '비율이 성공적으로 변경되었습니다.' };
+
     if (total == 100) {
-      return;
-    } else {
-      if (ratioArray.length == 2) {
-        index == 0 ? (ratioArray[1] = 100 - ratioArray[0]) : (ratioArray[0] = 100 - ratioArray[1]);
-      } else if (ratioArray.length == 3) {
-        const remaining = 100 - total;
-        if (remaining < 0) {
-          alert('비율의 합은 100을 초과할 수 없습니다.');
-        }
+      return result;
+    }
+
+    if (ratioArray.length == 2) {
+      index == 0 ? (ratioArray[1] = 100 - ratioArray[0]) : (ratioArray[0] = 100 - ratioArray[1]);
+    } else if (ratioArray.length == 3) {
+      const remaining = 100 - total;
+      if (remaining < 0) {
+        result.result = false;
+        result.message = '비율의 합은 100을 초과할 수 없습니다.';
+      }
 
-        if (index == 2) {
-          ratioArray[0] = remaining < 0 ? ratioArray[0] + remaining : ratioArray[0] - remaining;
-        } else {
-          ratioArray[index + 1] = remaining < 0 ? ratioArray[index + 1] + remaining : ratioArray[index + 1] - remaining;
+      if (index == 2) {
+        ratioArray[0] = ratioArray[0] - Math.abs(remaining);
+      } else {
+        ratioArray[index + 1] = ratioArray[index + 1] - Math.abs(remaining);
+
+        if (ratioArray[index + 1] < 0) {
+          ratioArray[index + 1] = 0;
+          ratioArray[2] = 100 - ratioArray[0] - ratioArray[1];
         }
       }
     }
-    if (type === 'column') {
-      this.gridRatio.column = ratioArray;
-    } else if (type === 'row') {
-      this.gridRatio.row = ratioArray;
-    }
+
+    this.gridRatio[type] = ratioArray;
 
     this.eventBus.emit('layout:updateRatio', {
-      gridRatio: cloneDeep(this.gridRatio),
+      $type: type,
+      $gridRatio: this.gridRatio,
       timestamp: Date.now(),
     });
+
+    return result;
   }
 }