polarvo-layout 1.0.19 → 1.0.21

package/package.json

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

package/src/components/FastMenu/DesignFastmenu.vue

@@ -31,8 +31,8 @@ const props = defineProps({
 const { activeDesign } = toRefs(props.polarvo.display.state);
 const { setActiveDesign } = props.polarvo.display;
 
-const { activeData, activeSection } = toRefs(props.polarvo.layout.state);
-const sectionMode = computed(() => activeData.value?.mode);
+const { activeMode, activeSection } = toRefs(props.polarvo.layout.state);
+const sectionMode = computed(() => activeMode.value);
 
 const { activeElement: freeActiveElement } = toRefs(props.polarvo.freeDrop.state);
 const { activeElement: gridActiveElement } = toRefs(props.polarvo.gridDrop.state);

package/src/components/FastMenu/DisplayFastMenu.vue

@@ -22,7 +22,7 @@
         name="px"
         aria-label="픽셀 단위 크기"
         min="600"
-        max="2400"
+        max="1200"
         step="50"
         :value="displaySize?.px"
         class="border-b-2 pr-1 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
@@ -34,7 +34,7 @@
         name="percent"
         aria-label="퍼센트 단위 크기"
         min="0"
-        max="100"
+        max="200"
         step="10"
         :value="displaySize?.percent"
         class="border-b-2 pr-1 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"

package/src/components/FastMenu/LayoutFastMenu.vue

@@ -18,8 +18,8 @@
           <div class="text-sm">보조선 표시</div>
           <input
             type="checkbox"
-            :checked="activeData?.config?.showGuideLine"
-            @change="setSectionConfig('guideLine', $event.target.checked)"
+            :checked="activeConfig?.showGuideLine"
+            @change="handleSectionConfigChange('guideLine', $event.target.checked)"
           />
         </div>
       </template>
@@ -33,8 +33,8 @@
               min="1"
               max="50"
               class="text-sm text-center w-6 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
-              :value="activeData?.config?.gridRows"
-              @change="setSectionConfig('row', $event.target.value)"
+              :value="activeConfig?.gridRows"
+              @change="handleSectionConfigChange('row', $event.target.value)"
             />
           </div>
           <div class="flex items-center gap-1">
@@ -45,8 +45,8 @@
               min="1"
               max="12"
               class="text-sm text-center w-6 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
-              :value="activeData?.config?.gridColumns"
-              @change="setSectionConfig('column', $event.target.value)"
+              :value="activeConfig?.gridColumns"
+              @change="handleSectionConfigChange('column', $event.target.value)"
             />
           </div>
           <div class="flex items-center gap-1">
@@ -57,8 +57,8 @@
               min="0"
               max="12"
               class="text-sm text-center w-6 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
-              :value="activeData?.config?.gridGap"
-              @change="setSectionConfig('gap', $event.target.value)"
+              :value="activeConfig?.gridGap"
+              @change="handleSectionConfigChange('gap', $event.target.value)"
             />
           </div>
         </div>
@@ -77,9 +77,17 @@ const props = defineProps({
   },
 });
 
-const { activeSection, activeData } = toRefs(props.polarvo.layout.state);
+const { activeSection, activeMode, activeConfig } = toRefs(props.polarvo.layout.state);
 const { setSectionMode, setSectionConfig } = props.polarvo.layout;
-const sectionMode = computed(() => activeData.value?.mode);
+const sectionMode = computed(() => activeMode.value);
+
+function handleSectionConfigChange(type, value) {
+  const { result, message } = setSectionConfig(type, value)
+
+  if (!result) {
+    alert(message)
+  }
+}
 </script>
 
 <style scoped lang="scss">

package/src/components/Layout/CanvasContainer.vue

@@ -23,10 +23,16 @@ const props = defineProps({
   },
 });
 
+const DEFAULT_DISPLAY_SIZE = {
+  px: 1200,
+  percent: 100,
+  gridSize: 16,
+  aspectRatio: '16/9',
+};
+
 // height 관련 여유 공간 추가하여 계산함 (50, 200)
 const { displaySize } = toRefs(props.polarvo.display.state);
 const { elements } = toRefs(props.polarvo.layout.state);
-const gridSize = computed(() => displaySize.value?.gridSize || 16);
 const defaultHeight = computed(() => {
   return (
     elements.value?.reduce((max, el) => {
@@ -52,19 +58,37 @@ function expandContainer() {
 }
 
 const containerStyle = computed(() => {
+  if (!displaySize.value) {
+    return {
+      aspectRatio: DEFAULT_DISPLAY_SIZE.aspectRatio,
+      width: `${DEFAULT_DISPLAY_SIZE.px}px`,
+      height: `${displayHeight.value}px`,
+      margin: '0 auto',
+      transform: `scale(${DEFAULT_DISPLAY_SIZE.percent / 100})`,
+      transformOrigin: 'top center',
+    backgroundImage: `
+      linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)
+    `,
+    backgroundSize: `${DEFAULT_DISPLAY_SIZE.gridSize}px ${DEFAULT_DISPLAY_SIZE.gridSize}px`,
+  }
+}
+
   return {
-    aspectRatio: displaySize.value?.aspectRatio,
-    width: `${displaySize.value?.px}px`,
+    aspectRatio: displaySize.value.aspectRatio,
+    width: `${displaySize.value.px}px`,
     height: `${displayHeight.value}px`,
-    margin: `0 auto`,
-    transform: `scale(${displaySize.value?.percent / 100})`,
+    margin: '0 auto',
+    transform: `scale(${displaySize.value.percent / 100})`,
     transformOrigin: 'top center',
     backgroundImage: `
       linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
       linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)
     `,
-    backgroundSize: `${gridSize.value}px ${gridSize.value}px`,
+    backgroundSize: `${displaySize.value.gridSize}px ${displaySize.value.gridSize}px`,
   };
+
+
 });
 
 // 전체 elements

package/src/components/SideBar/ElementSideBar.vue

@@ -29,8 +29,8 @@ const props = defineProps({
 const { addElement: addElementToFree } = props.polarvo.freeDrop;
 const { addElement: addElementToGrid } = props.polarvo.gridDrop;
 
-const { activeData } = toRefs(props.polarvo.layout.state);
-const sectionMode = computed(() => activeData.value?.mode);
+const { activeMode } = toRefs(props.polarvo.layout.state);
+const sectionMode = computed(() => activeMode.value);
 
 const allElements = ref([]);
 

package/src/components/SideBar/LayoutSettingSideBar.vue

@@ -25,8 +25,8 @@
             id="row-count"
             min="1"
             max="50"
-            :value="activeData?.config?.gridRows"
-            @change="setSectionConfig('row', $event.target.value)"
+            :value="activeConfig.gridRows"
+            @change="handleSectionConfigChange('row', $event.target.value)"
           />
         </div>
         <div class="flex flex-row items-center gap-4">
@@ -37,8 +37,8 @@
             id="column-count"
             min="1"
             max="12"
-            :value="activeData?.config?.gridColumns"
-            @change="setSectionConfig('column', $event.target.value)"
+            :value="activeConfig.gridColumns"
+            @change="handleSectionConfigChange('column', $event.target.value)"
           />
         </div>
         <div class="flex flex-row items-center gap-4">
@@ -49,8 +49,8 @@
             id="gap-size"
             min="0"
             max="12"
-            :value="activeData?.config?.gridGap"
-            @change="setSectionConfig('gap', $event.target.value)"
+            :value="activeConfig.gridGap"
+            @change="handleSectionConfigChange('gap', $event.target.value)"
           />
         </div>
       </div>
@@ -63,8 +63,8 @@
             class="text-sm w-4 h-4 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
             type="checkbox"
             id="guide-line"
-            :checked="activeData?.config?.showGuideLine"
-            @change="setSectionConfig('guideLine', $event.target.checked)"
+            :checked="activeConfig.showGuideLine"
+            @change="handleSectionConfigChange('guideLine', $event.target.checked)"
           />
         </div>
       </div>
@@ -81,10 +81,18 @@ const props = defineProps({
     required: true,
   },
 });
-const { activeData } = toRefs(props.polarvo.layout.state);
+const { activeMode, activeConfig } = toRefs(props.polarvo.layout.state);
 const { setSectionMode, setSectionConfig } = props.polarvo.layout;
 
-const sectionMode = computed(() => activeData.value?.mode);
+const sectionMode = computed(() => activeMode.value);
+
+function handleSectionConfigChange(type, value) {
+  const { result, message } = setSectionConfig(type, value)
+
+  if (!result) {
+    alert(message)
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>

package/src/components/SideBar/LayoutSideBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="aspect-[3/2] border border-gray-200 rounded-md bg-white ">
+    <div class="aspect-[3/2] border border-gray-200 rounded-md bg-white">
       <BaseLayout id="preview" :polarvo="polarvo" :preview="true" @click:section="setActiveSection($event)" />
       <button
         class="text-sm bg-blue-100 text-center w-full py-1 hover:cursor-pointer hover:bg-blue-200 active:opacity-80"
@@ -35,7 +35,7 @@
                 type="number"
                 :id="`col-ratio-${column}`"
                 :value="gridRatio.column[column - 1]"
-                @change="setRatio('column', column - 1, $event.target.value)"
+                @change="handleGridRatio('column', column - 1, $event)"
               />
             </template>
           </div>
@@ -48,7 +48,7 @@
                 type="number"
                 :id="`row-ratio-${row}`"
                 :value="gridRatio.row[row - 1]"
-                @change="setRatio('row', row - 1, $event.target.value)"
+                @change="handleGridRatio('row', row - 1, $event)"
               />
             </template>
           </div>
@@ -60,11 +60,7 @@
         현재 활성화 섹션:
         <span class="text-sm text-red-400 font-medium cursor-default">{{ activeSection }}</span>
       </h5>
-      <LayoutSetting
-        v-if="activeSection !== null"
-        :polarvo="polarvo"
-        class="mt-2 border border-gray-200 rounded-md bg-white"
-      />
+      <LayoutSetting v-if="activeSection !== null" :polarvo="polarvo" class="mt-2 border border-gray-200 rounded-md bg-white" />
       <div v-else>
         <div class="text-center text-sm text-red-400 bg-red-50 mt-1 py-1 cursor-default">선택된 섹션이 없습니다.</div>
       </div>
@@ -86,4 +82,19 @@ const props = defineProps({
 });
 const { layoutName, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
 const { setGapSize, setRatio, setActiveSection } = props.polarvo.layout;
+
+function handleGridRatio(type, index, event) {
+  const value = event.target.value;
+  if (Number(value) > 100 || Number(value) < 0 || isNaN(Number(value))) {
+    alert('비율은 0에서 100 사이의 숫자여야 합니다.');
+    event.target.value = gridRatio.value[type][index]; // 원래 값으로 복원
+    return;
+  }
+
+  const { result, message } = setRatio(type, index, value)
+
+  if (!result) {
+    alert(message)
+  }
+}
 </script>

package/src/configs/index.js

@@ -4,6 +4,7 @@ const createDefaultConfig = (overrides = {}) => {
   return {
     initialState: {
       elements: [], // 요소들
+      layoutData: null, // 레이아웃 데이터
       activeSection: null,
     },
     resource: {

package/src/core/engines/DisplayEngine.js

@@ -1,6 +1,16 @@
-import { omit } from 'lodash-es';
-
 // event 발행 시 'display'으로 시작하는 이름 사용
+const DISPLAY_LIMITS = {
+  percent: { max: 200, min: 0, unit: '%', name: '배율' },
+  px: { max: 1200, min: 1, unit: 'px', name: '크기' },
+};
+
+const DEFAULT_DISPLAY_SIZE = {
+  px: 1200,
+  percent: 100,
+  gridSize: 16,
+  aspectRatio: '16/9',
+};
+
 class DisplayEngine {
   constructor({ eventBus, options }) {
     this.eventBus = eventBus;
@@ -11,6 +21,8 @@ class DisplayEngine {
     this.displayMode = 'desktop'; // 현재 디스플레이 모드 (초기값 = 'desktop')
     this.displaySize = null;
 
+    this._resetDisplaySizeByMode(this.displayMode);
+
     this._subscriptions = []; // 구독 해제 함수 저장용
     this._setupSubscriptions();
   }
@@ -31,20 +43,8 @@ class DisplayEngine {
   _setupSubscriptions() {
     // 초기화 완료 이벤트 구독 - from EngineManager
     this._subscribe('system:engineInitialized', () => {
-      this._resetDisplaySizeByMode(this.displayMode);
-
       this.eventBus.emit('display:engineInitialized', {
-        displaySize: this.displaySize,
-        timestamp: Date.now(),
-      });
-    });
-
-    this._subscribe('system:enginesReset', () => {
-      this.displayMode = 'desktop';
-      this._resetDisplaySizeByMode(this.displayMode);
-
-      this.eventBus.emit('display:enginesReset', {
-        displaySize: this.displaySize,
+        $displaySize: this.displaySize,
         timestamp: Date.now(),
       });
     });
@@ -54,15 +54,9 @@ class DisplayEngine {
       this.setActiveDesign(null);
     });
 
-    this._subscribe('layout:setLayoutName', ({ screenConfig }) => {
-      this.displayMode = screenConfig.displayMode;
-      this.displaySize = { ...screenConfig.displaySize };
-
-      this.eventBus.emit('display:setLayoutName', {
-        displayMode: this.displayMode,
-        displaySize: this.displaySize,
-        timestamp: Date.now(),
-      });
+    this._subscribe('layout:setLayoutName', ({ $screenConfig }) => {
+      this.displayMode = $screenConfig.displayMode;
+      this.displaySize = { ...$screenConfig.displaySize };
     });
 
     this._subscribe('freeDrop:startDrag', () => {
@@ -72,19 +66,27 @@ class DisplayEngine {
 
     this._subscribe('gridDrop:setActiveElement', ({ action }) => {
       if (action === 'update') return;
-      // if (action === 'click') {
-      //   this.setActiveMenu('element');
-      // } else {
-        this.setActiveMenu(null);
-      // }
-
+      this.setActiveMenu(null);
       this.setActiveDesign(null);
     });
 
     this._subscribe('gridDrop:requestOpenElementBar', () => {
       this.setActiveMenu('element');
       this.setActiveDesign(null);
-    })
+    });
+  }
+
+  /** 엔진 초기화 */
+  reset() {
+    this.activeMenu = null;
+    this.activeDesign = null;
+    this.displayMode = 'desktop';
+    this._resetDisplaySizeByMode(this.displayMode);
+
+    this.eventBus.emit('display:enginesReset', {
+      $displaySize: this.displaySize,
+      timestamp: Date.now(),
+    });
   }
 
   /** 삭제 및 정리 */
@@ -95,6 +97,8 @@ class DisplayEngine {
       }
     });
 
+    this.reset();
+
     this._subscriptions = [];
     this.eventBus = null;
     this.resource = null;
@@ -130,7 +134,6 @@ class DisplayEngine {
   }
 
   /** ---------------------------------- 공통 메소드 ---------------------------------- **/
-
   /** 아이콘바 메뉴 변경
    * @param {string} name - 메뉴 이름
    */
@@ -139,7 +142,7 @@ class DisplayEngine {
     this.activeMenu = name;
 
     this.eventBus.emit('display:updateActiveMenu', {
-      menu: name,
+      $menu: name,
       timestamp: Date.now(),
     });
   }
@@ -152,7 +155,7 @@ class DisplayEngine {
     this.activeDesign = name;
 
     this.eventBus.emit('display:updateActiveDesign', {
-      design: name,
+      $design: name,
       timestamp: Date.now(),
     });
   }
@@ -168,15 +171,16 @@ class DisplayEngine {
 
     if (this.displayMode === mode) return;
 
+    const prevDisplayMode = this.displayMode;
     this.displayMode = mode;
     const prevDisplaySize = { ...this.displaySize };
     this._resetDisplaySizeByMode(mode);
 
-    // displayMode 변경 시, displaySize도 초기화 됨
-    this.eventBus.emit('display:updateDisplayMode', {
-      displayMode: this.displayMode,
-      displaySize: this.displaySize,
-      prev: { displaySize: prevDisplaySize },
+    this.eventBus.emit('display:displayChanged', {
+      type: 'mode',
+      $displayMode: this.displayMode,
+      $displaySize: this.displaySize,
+      prev: { displayMode: prevDisplayMode, displaySize: prevDisplaySize },
       timestamp: Date.now(),
     });
   }
@@ -185,14 +189,19 @@ class DisplayEngine {
    * @param {string} mode - 디스플레이 모드
    */
   _resetDisplaySizeByMode(mode) {
-    if (this.resource[mode]) {
-      this.displaySize = {
-        px: this.resource[mode]?.defaultWidth || 1200,
-        percent: 100,
-        gridSize: this.resource[mode]?.gridSize || 16,
-        aspectRatio: this.resource[mode]?.aspectRatio || '16/9',
-      };
+    const defaults = DEFAULT_DISPLAY_SIZE;
+    if (!this.resource[mode]) {
+      this.displaySize = { ...defaults };
+      return;
     }
+
+    const resource = this.resource[mode];
+    this.displaySize = {
+      px: resource.defaultWidth ?? defaults.px,
+      percent: defaults.percent,
+      gridSize: resource.gridSize ?? defaults.gridSize,
+      aspectRatio: resource.aspectRatio ?? defaults.aspectRatio,
+    };
   }
 
   /** displaySize 변경
@@ -201,34 +210,33 @@ class DisplayEngine {
    */
   setDisplaySize(type, size) {
     if (!['px', 'percent'].includes(type)) {
-      console.error('[DisplayEngine] 잘못된 사이즈 타입:', type);
-      return;
+      return { result: false, message: '입력할 수 없는 사이즈 타입입니다.' };
     }
-
     const numSize = Number(size);
-    if (isNaN(numSize) || numSize <= 0) {
-      console.error('[DisplayEngine] 잘못된 사이즈 값:', size);
-      return;
-    }
+    const limit = DISPLAY_LIMITS[type];
+    const result = {result: true, message: '사이즈가 성공적으로 변경되었습니다.'};
 
-    const limits = {
-      percent: { max: 200, unit: '%', name: '배율' },
-      px: { max: 1200, unit: 'px', name: '크기' },
-    };
+    if (isNaN(numSize) || numSize <= limit.min) {
+      result.result = false;
+      result.message = `설정 가능한 최소 ${limit.name}는 ${limit.min}${limit.unit}입니다.`;
+    }
 
-    const typeLimit = limits[type];
-    if (numSize > typeLimit.max) {
-      alert(`설정 가능한 최대 ${typeLimit.name}는 ${typeLimit.max}${typeLimit.unit}입니다.`);
+    if (isNaN(numSize) || numSize > limit.max) {
+      result.result = false;
+      result.message = `설정 가능한 최대 ${limit.name}는 ${limit.max}${limit.unit}입니다.`;
     }
 
     const prevDisplaySize = { ...this.displaySize };
-    this.displaySize[type] = Math.min(Math.max(0, numSize), typeLimit.max);
-
-    this.eventBus.emit('display:updateDisplaySize', {
-      displaySize: this.displaySize,
+    this.displaySize[type] = Math.min(Math.max(0, numSize), limit.max);
+    this.eventBus.emit('display:displayChanged', {
+      type: 'size',
+      $displayMode: this.displayMode,
+      $displaySize: this.displaySize,
       prev: { displaySize: prevDisplaySize },
       timestamp: Date.now(),
     });
+
+    return result;
   }
 }