polarvo-layout 1.0.22 → 1.0.23

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -79,9 +79,9 @@ const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio }
 
 const getBaseStyle = computed(() => {
   return {
-    // gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}%`).join(' '),
-    // gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}%`).join(' '),
-    // marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
+    gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}%`).join(' '),
+    gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}%`).join(' '),
+    marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
     gap: `${gapSize.value}px`,
   };
 });

package/src/components/MiniMenu/LayoutMiniMenu.vue

@@ -45,7 +45,7 @@ watch(
   () => layoutName.value,
   () => {
     emits('click:layout');
-  }
+  },
 );
 </script>
 

package/src/core/engines/LayoutEngine.js

@@ -171,6 +171,7 @@ class LayoutEngine {
     // 1. layoutName(내부 변수) 변경
     this._layoutName = name;
 
+    const currentGridRatio = { ...this.gridRatio };
     const { layoutData: userData, gridRatio, gapSize } = screenConfig || {};
     // 2. layoutData 기본값 세팅
     this._prepareLayoutData(name, userData);
@@ -179,7 +180,7 @@ class LayoutEngine {
     this._prepareLayoutConfig(name, gridRatio ?? null, gapSize ?? null);
 
     // 초기 설정인 경우 설정값 전파
-    if (screenConfig) {
+    if (setting) {
       this.eventBus.emit('layout:setLayoutName', {
         $screenConfig: screenConfig,
         $layoutData: this.layoutData,
@@ -196,6 +197,7 @@ class LayoutEngine {
         $gridNumber: this.gridNumber,
         $gridRatio: this.gridRatio,
         $gapSize: this.gapSize,
+        $prev: { gridRatio: currentGridRatio },
         timestamp: Date.now(),
       });
     }
@@ -283,6 +285,11 @@ class LayoutEngine {
    * @param {number} ratio - 새로운 비율 값
    */
   setRatio(type, index, ratio) {
+    const prevRatio = {
+      column: [...this.gridRatio.column],
+      row: [...this.gridRatio.row],
+    };
+    
     const ratioArray = this.gridRatio[type];
     ratioArray[index] = Number(ratio);
 
@@ -328,6 +335,7 @@ class LayoutEngine {
     this.eventBus.emit('layout:updateRatio', {
       $type: type,
       $gridRatio: this.gridRatio,
+      $prev: { gridRatio: prevRatio },
       timestamp: Date.now(),
     });
 

package/src/core/managers/EngineManager.js

@@ -34,6 +34,7 @@ class EngineManager {
     // (캐시) dataConverter에서 사용하는 현재 컨테이너 크기
     this._containerWidth = 1920;
     this._containerHeight = 1080;
+    this._displaySize = { px: 1920, aspectRatio: '16/9' };
 
     this._subscriptions = [];
     this._initialized = false;
@@ -172,6 +173,7 @@ class EngineManager {
   /** [내부함수] displayEngine 연결 설정 */
   _setupDisplayEngineConnections() {
     this._subscribe('display:displayChanged', ({ $displaySize, prev }) => {
+      this._displaySize = $displaySize;
       this._updateElementsScale(prev.displaySize, $displaySize);
     });
   }
@@ -202,14 +204,25 @@ class EngineManager {
   /** ---------------------------------- layout Engine ---------------------------------- **/
   /** [내부함수] layoutEngine 연결 설정 */
   _setupLayoutEngineConnections() {
+    this._subscribe('layout:updateRatio', ({ $type, $gridRatio, $prev }) => {
+      const prevGridRatio = $prev?.gridRatio || { column: [100], row: [100] };
+      this._updateElementsScaleByRatio($type, prevGridRatio, $gridRatio);
+    });
+
     // layoutName 변경에 따른 activeSection 초기화
-    this._subscribe('layout:setLayoutName', ({ $layoutData }) => {
+    this._subscribe('layout:setLayoutName', ({ $layoutData, $screenConfig }) => {
+      this._displaySize = { ...$screenConfig.displaySize };
+
       this.state.layoutData = $layoutData;
       this.setActiveSection('section1', true);
     });
-    this._subscribe('layout:updateLayoutName', ({ $layoutData }) => {
+
+    this._subscribe('layout:updateLayoutName', ({ $layoutData, $gridRatio, $prev }) => {
       this.state.layoutData = $layoutData;
       this.setActiveSection(null, true);
+
+      const prevGridRatio = $prev?.gridRatio || { column: [100], row: [100] };
+      this._updateElementsScaleByRatio('column', prevGridRatio, $gridRatio);
     });
 
     this._subscribe('layout:updateLayoutData', ({ $layoutData, activeSection }) => {
@@ -217,6 +230,53 @@ class EngineManager {
     });
   }
 
+  _updateElementsScaleByRatio(type, oldValue, newValue) {
+    const oldLength = oldValue[type].length;
+    const newLength = newValue[type].length;
+
+    let newDisplaySize = { ...this._displaySize };
+
+    // 열 또는 행 개수가 늘어나는 경우 - 요소 크기 줄이기
+    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 },
+            };
+      });
+    }
+
+    // nextTick(() => {
+    this.eventBus.emit('system:requestElementsScale', {
+      historyEvent: true,
+      $elements: this.state.elements,
+      timestamp: Date.now(),
+    });
+    // });
+  }
+
   /** activeSection 변경
    * @param {string} name - 섹션 이름
    * @param {boolean} setting - 설정모드 여부