polarvo-layout 1.0.21 → 1.0.23

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -2,8 +2,9 @@
   <div
     :id="preview ? 'previewLayout' : 'baseLayout'"
     class="grid h-full p-2 bg-transparent rounded-lg"
-    :class="[layoutType + '-layout', `grid-cols-${gridNumber?.column}`, 'mb-4' ? layoutType === 'three-column-split' : '']"
+    :class="[layoutType + '-layout', `grid-cols-${gridNumber?.column}`, { 'mb-4': layoutType === 'three-column-split' }]"
     :style="getBaseStyle"
+    @contextmenu.prevent
   >
     <template v-for="(section, key) in layoutData" :key="key">
       <PolarLayout
@@ -50,9 +51,9 @@ import FreeLayout from './FreeLayout.vue';
 import GridLayout from './GridLayout.vue';
 
 // 우클릭 방지
-window.oncontextmenu = () => {
-  return false;
-};
+// window.oncontextmenu = () => {
+//   return false;
+// };
 
 const emit = defineEmits(['click:section']);
 const props = defineProps({
@@ -67,7 +68,7 @@ const props = defineProps({
 });
 
 const layoutType = computed(() => {
-  if (layoutName.value.eng == null) return 'no-split';
+  if (layoutName.value.eng === null) return 'no-split';
   return layoutName.value.eng
     .replace(/([A-Z])/g, '-$1')
     .toLowerCase()
@@ -86,8 +87,8 @@ const getBaseStyle = computed(() => {
 });
 
 const getSectionStyle = (section) => ({
-  '--grid-columns': section.config?.gridColumns || 3,
-  '--grid-gap': `${section.config?.gridGap || 5}px`,
+  '--grid-columns': section.config?.gridColumns ?? 3,
+  '--grid-gap': `${section.config?.gridGap ?? 5}px`,
   position: 'relative',
 });
 
@@ -95,7 +96,7 @@ const getSectionClass = (key, section) => ({
   [key]: true,
   [section.mode]: true,
   'section-active': activeSection.value === key,
-  disabled: activeSection.value != key && !props.preview,
+  disabled: activeSection.value !== key && !props.preview,
 });
 </script>
 

package/src/components/MiniMenu/LayoutMiniMenu.vue

@@ -5,7 +5,7 @@
     <div class="grid gap-1 grid-cols-1 mx-1 mb-3">
       <div
         class="item flex flex-col items-center gap-1 p-2 border border-gray-200 rounded-md bg-white cursor-pointer hover:border-gray-400"
-        :class="{ active: layoutName.eng == 'NoSplit' }"
+        :class="{ active: layoutName.eng === 'NoSplit' }"
         @click="setLayoutName('NoSplit')"
       >
         <component class="text-gray-600" :is="layoutSource.noSplit.icon"></component>
@@ -18,7 +18,7 @@
         v-for="(layout, key) in layoutSource.split"
         :key="key"
         class="item flex flex-col items-center gap-1 p-2 border border-gray-200 rounded-md bg-white cursor-pointer hover:border-gray-400"
-        :class="{ active: layoutName.eng == key }"
+        :class="{ active: layoutName.eng === key }"
         @click="setLayoutName(key)"
       >
         <component class="text-gray-600" :is="layout.icon"></component>
@@ -46,7 +46,6 @@ watch(
   () => {
     emits('click:layout');
   },
-  { deep: true }
 );
 </script>
 

package/src/components/SideBar/LayoutSideBar.vue

@@ -10,7 +10,7 @@
       </button>
     </div>
 
-    <div v-if="layoutName.eng != 'NoSplit'">
+    <div v-if="layoutName.eng !== 'NoSplit'">
       <h5 class="mt-4 block text-sm font-bold text-gray-600">레이아웃 설정</h5>
       <div class="mt-2 border border-gray-200 rounded-md bg-gray-100">
         <div class="px-4 py-2">
@@ -21,7 +21,7 @@
               type="number"
               id="section-gap"
               :value="gapSize"
-              @change="setGapSize($event.target.value)"
+              @change="handleGapSize($event)"
             />
           </div>
         </div>
@@ -91,10 +91,25 @@ function handleGridRatio(type, index, event) {
     return;
   }
 
-  const { result, message } = setRatio(type, index, value)
+  const { result, message } = setRatio(type, index, Number(value));
 
   if (!result) {
-    alert(message)
+    alert(message);
+  }
+}
+
+function handleGapSize(event) {
+  const value = event.target.value;
+  if (Number(value) < 0 || isNaN(Number(value))) {
+    alert('갭 크기는 0 이상의 숫자여야 합니다.');
+    event.target.value = gapSize.value; // 원래 값으로 복원
+    return;
+  }
+
+  const { result, message } = setGapSize(Number(value));
+
+  if (!result) {
+    alert(message);
   }
 }
 </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(),
       });
     }
@@ -267,14 +269,14 @@ 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,
       timestamp: Date.now(),
     });
+
+    return { result: true, message: '갭 사이즈가 성공적으로 변경되었습니다.' };
   }
 
   /** 섹션 비율 변경
@@ -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 - 설정모드 여부

package/src/library/LayoutLibrary.js

@@ -177,7 +177,7 @@ function useLayout(api) {
 
   const setGapSize = (size) => {
     try {
-      api.layout.setGapSize(size);
+      return api.layout.setGapSize(size);
     } catch (error) {
       console.error('[useLayout] setGapSize 실행 중 오류 발생:', error);
     }