polarvo-layout 1.0.18 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polarvo-layout",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "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/LayoutFastMenu.vue

@@ -18,7 +18,7 @@
           <div class="text-sm">보조선 표시</div>
           <input
             type="checkbox"
-            :checked="activeData?.config?.showGuideLine"
+            :checked="activeConfig?.showGuideLine"
             @change="setSectionConfig('guideLine', $event.target.checked)"
           />
         </div>
@@ -33,7 +33,7 @@
               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"
+              :value="activeConfig?.gridRows"
               @change="setSectionConfig('row', $event.target.value)"
             />
           </div>
@@ -45,7 +45,7 @@
               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"
+              :value="activeConfig?.gridColumns"
               @change="setSectionConfig('column', $event.target.value)"
             />
           </div>
@@ -57,7 +57,7 @@
               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"
+              :value="activeConfig?.gridGap"
               @change="setSectionConfig('gap', $event.target.value)"
             />
           </div>
@@ -77,9 +77,9 @@ 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);
 </script>
 
 <style scoped lang="scss">

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,7 +25,7 @@
             id="row-count"
             min="1"
             max="50"
-            :value="activeData?.config?.gridRows"
+            :value="activeConfig.gridRows"
             @change="setSectionConfig('row', $event.target.value)"
           />
         </div>
@@ -37,7 +37,7 @@
             id="column-count"
             min="1"
             max="12"
-            :value="activeData?.config?.gridColumns"
+            :value="activeConfig.gridColumns"
             @change="setSectionConfig('column', $event.target.value)"
           />
         </div>
@@ -49,7 +49,7 @@
             id="gap-size"
             min="0"
             max="12"
-            :value="activeData?.config?.gridGap"
+            :value="activeConfig.gridGap"
             @change="setSectionConfig('gap', $event.target.value)"
           />
         </div>
@@ -63,7 +63,7 @@
             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"
+            :checked="activeConfig.showGuideLine"
             @change="setSectionConfig('guideLine', $event.target.checked)"
           />
         </div>
@@ -81,10 +81,10 @@ 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);
 </script>
 
 <style lang="scss" scoped></style>

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,5 +1,3 @@
-import { omit } from 'lodash-es';
-
 // event 발행 시 'display'으로 시작하는 이름 사용
 class DisplayEngine {
   constructor({ eventBus, options }) {
@@ -34,17 +32,7 @@ class DisplayEngine {
       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 +42,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 +54,29 @@ 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);
+
+    console.log('[DisplayEngine] 리셋 완료');
+
+    this.eventBus.emit('display:enginesReset', {
+      $displaySize: this.displaySize,
+      timestamp: Date.now(),
+    });
   }
 
   /** 삭제 및 정리 */
@@ -95,6 +87,8 @@ class DisplayEngine {
       }
     });
 
+    this.reset();
+
     this._subscriptions = [];
     this.eventBus = null;
     this.resource = null;
@@ -139,7 +133,7 @@ class DisplayEngine {
     this.activeMenu = name;
 
     this.eventBus.emit('display:updateActiveMenu', {
-      menu: name,
+      $menu: name,
       timestamp: Date.now(),
     });
   }
@@ -152,7 +146,7 @@ class DisplayEngine {
     this.activeDesign = name;
 
     this.eventBus.emit('display:updateActiveDesign', {
-      design: name,
+      $design: name,
       timestamp: Date.now(),
     });
   }
@@ -168,15 +162,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(),
     });
   }
@@ -224,8 +219,10 @@ class DisplayEngine {
     const prevDisplaySize = { ...this.displaySize };
     this.displaySize[type] = Math.min(Math.max(0, numSize), typeLimit.max);
 
-    this.eventBus.emit('display:updateDisplaySize', {
-      displaySize: this.displaySize,
+    this.eventBus.emit('display:displayChanged', {
+      type: 'size',
+      $displayMode: this.displayMode,
+      $displaySize: this.displaySize,
       prev: { displaySize: prevDisplaySize },
       timestamp: Date.now(),
     });

package/src/core/engines/FreeDropEngine.js

@@ -14,8 +14,10 @@ class FreeDropEngine {
     this._elementsUpdate = false; // 원본 요소 목록 변경 플래그
     this._freeElements = []; // 로컬에서 사용하는 요소 목록
 
-    this._activeData = null;
     this._activeSection = null;
+    this._activeMode = null;
+    this._activeConfig = null;
+
     this._activeElement = null; // 드래그 중인 배치요소
 
     this.guides = { x: null, y: null, w: null, h: null }; // 가이드 라인 위치
@@ -50,43 +52,43 @@ class FreeDropEngine {
   /** [내부함수] 구독 설정 */
   _setupSubscriptions() {
     // 초기화 완료 이벤트 구독 - from DisplayEngine
-    this._subscribe('display:engineInitialized', ({ displaySize }) => {
-      const { gridSize } = displaySize;
+    this._subscribe('display:engineInitialized', ({ $displaySize }) => {
+      const { gridSize } = $displaySize;
       this._gridSize = gridSize;
 
       this._initialize();
     });
 
-    this._subscribe('display:enginesReset', ({ displaySize }) => {
-      const { gridSize } = displaySize;
+    this._subscribe('display:enginesReset', ({ $displaySize }) => {
+      const { gridSize } = $displaySize;
       this._gridSize = gridSize;
 
       this._initialize();
     });
 
     // displayMode 변경 감지 (displaySize가 함께 초기화됨)
-    this._subscribe('display:updateDisplayMode', ({ displaySize }) => {
-      const { gridSize } = displaySize;
+    this._subscribe('display:displayChanged', ({ $displaySize }) => {
+      const { gridSize } = $displaySize;
       this._gridSize = gridSize;
     });
 
     // layoutName 변경 감지 (gridNumber가 함께 초기화됨)
-    this._subscribe('layout:setLayoutName', ({ gridNumber }) => {
-      this._gridNumber = gridNumber;
+    this._subscribe('layout:setLayoutName', ({ $gridNumber }) => {
+      this._gridNumber = $gridNumber;
     });
-    this._subscribe('layout:updateLayoutName', ({ gridNumber }) => {
-      this._gridNumber = gridNumber;
+    this._subscribe('layout:updateLayoutName', ({ $gridNumber }) => {
+      this._gridNumber = $gridNumber;
     });
 
-    // activeSection 변경 감지 (activeData가 함께 초기화됨)
-    this._subscribe('system:updateActiveSection', ({ activeSection, activeData }) => {
-      this._activeSection = activeSection;
-      this._activeData = activeData;
-      // this.setActiveElement(null);
+    // activeSection 변경 감지
+    this._subscribe('system:updateActiveSection', ({ $section, $mode, $config }) => {
+      this._activeSection = $section;
+      this._activeMode = $mode;
+      this._activeConfig = $config;
     });
 
-    this._subscribe('system:setElements', ({ elements }) => {
-      this._elements = elements;
+    this._subscribe('system:setElements', ({ $elements }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
 
       // 활성화 요소 초기화
@@ -98,23 +100,16 @@ class FreeDropEngine {
       });
     });
 
-    // sectionConfig 변경 감지 (free 모드인 경우에만 activeData 갱신)
-    this._subscribe('system:updateActiveSectionConfig', ({ activeData }) => {
-      if (activeData?.mode == 'free') {
-        this._activeData = activeData;
-      }
+    this._subscribe('layout:updateLayoutData', ({ $mode, $config }) => {
+      this._activeMode = $mode;
+      this._activeConfig = $config;
     });
 
-    this._subscribe('system:requestUpdateData', ({ elements, elementId, activeData }) => {
-      this._elements = elements;
+    this._subscribe('system:requestUpdateElement', ({ $elements, $elementId }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
 
-      this.setActiveElement(this._elements.find((x) => x.id === elementId));
-
-      if (activeData?.mode == 'free') {
-        this._activeData = activeData;
-      }
-
+      this.setActiveElement(this._elements.find((x) => x.id === $elementId));
       this.eventBus.emit('freeDrop:requestUpdateData', {
         elements: cloneDeep(this.freeElements),
         guides: this.guides,
@@ -138,8 +133,8 @@ class FreeDropEngine {
       });
     });
 
-    this._subscribe('system:requestUpdateElements', ({ elements }) => {
-      this._elements = elements;
+    this._subscribe('system:requestElementsScale', ({ $elements }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
     });
 
@@ -155,6 +150,12 @@ class FreeDropEngine {
     });
   }
 
+  /** 엔진 초기화 */
+  reset() {
+    this._initialize();
+    console.log('[FreeDropEngine] 리셋 완료');
+  }
+
   /** 삭제 및 정리 */
   destroy() {
     this._subscriptions.forEach((unsubscribe) => {
@@ -163,7 +164,8 @@ class FreeDropEngine {
       }
     });
 
-    this._initialize();
+    this.reset();
+    
     this._subscriptions = [];
     this.eventBus = null;
     this.resource = null;
@@ -223,8 +225,9 @@ class FreeDropEngine {
     this._startSize = { w: 0, h: 0 };
     this._offsetPos = { x: 0, y: 0 };
 
-    this._activeData = null;
     this._activeSection = null;
+    this._activeMode = null;
+    this._activeConfig = null;
     this._activeElement = null;
     this._alreadyExist = false;
 
@@ -309,8 +312,8 @@ class FreeDropEngine {
    * @return {boolean} - 가이드라인 표시 여부
    */
   _getGuideLineConfig() {
-    if (this._activeData && this._activeData.config) {
-      return this._activeData?.config?.showGuideLine;
+    if (this._activeConfig) {
+      return this._activeConfig?.showGuideLine;
     } else {
       return false;
     }
@@ -337,11 +340,7 @@ class FreeDropEngine {
    * @param {string} elName - 추가할 아이템 이름
    */
   addElement(event, elName) {
-    if (!this._activeData) {
-      console.error('[FreeDropEngine] 활성화된 데이터가 없습니다.');
-      return;
-    }
-    if (this._activeData.mode !== 'free') return;
+    if (this._activeMode !== 'free') return;
 
     this._startPos = { x: event.clientX, y: event.clientY };
 

package/src/core/engines/GridDropEngine.js

@@ -1,4 +1,4 @@
-import { cloneDeep, debounce } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 
 // event 발행 시 'gridDrop'으로 시작하는 이름 사용
 class GridDropEngine {
@@ -10,9 +10,10 @@ class GridDropEngine {
     this._elementsUpdate = false; // 원본 요소 목록 변경 플래그
     this._gridElements = []; // 로컬에서 사용하는 요소 목록
 
-    this._layoutData = null;
-    this._activeData = null;
+    // this._activeData = null;
     this._activeSection = null;
+    this._activeMode = null;
+    this._activeConfig = null;
     this._activeElement = null;
 
     this._targetCell = null; // 드래그 대상 셀
@@ -50,25 +51,15 @@ class GridDropEngine {
       this._initialize();
     });
 
-    this._subscribe('system:enginesReset', () => {
-      this._initialize();
-    });
-
-    // layoutData 변경 감지
-    this._subscribe('system:updateLayoutData', ({ layoutData, activeData }) => {
-      this._layoutData = layoutData;
-      this._activeData = activeData;
-    });
-
     // activeSection 변경 감지 (activeData가 함께 초기화됨)
-    this._subscribe('system:updateActiveSection', ({ activeSection, activeData }) => {
-      this._activeSection = activeSection;
-      this._activeData = activeData;
-      // this.setActiveElement(null);
+    this._subscribe('system:updateActiveSection', ({ $section, $mode, $config }) => {
+      this._activeSection = $section;
+      this._activeMode = $mode;
+      this._activeConfig = $config;
     });
 
-    this._subscribe('system:setElements', ({ elements }) => {
-      this._elements = elements;
+    this._subscribe('system:setElements', ({ $elements }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
 
       // 활성화 요소 초기화
@@ -80,22 +71,15 @@ class GridDropEngine {
       });
     });
 
-    this._subscribe('system:updateActiveSectionConfig', ({ layoutData, activeData }) => {
-      if (activeData?.mode == 'grid') {
-        this._layoutData = layoutData;
-        this._activeData = activeData;
-      }
+    this._subscribe('layout:updateLayoutData', ({ $mode, $config }) => {
+      this._activeMode = $mode;
+      this._activeConfig = $config;
     });
 
-    this._subscribe('system:requestUpdateData', ({ action, elements, elementId, layoutData, activeData }) => {
-      this._elements = elements;
+    this._subscribe('system:requestUpdateElement', ({ action, $elements, $elementId }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
-      this.setActiveElement(this._elements.find((x) => x.id === elementId) || null, action);
-
-      if (activeData?.mode == 'grid') {
-        this._layoutData = layoutData;
-        this._activeData = activeData;
-      }
+      this.setActiveElement(this._elements.find((x) => x.id === $elementId) || null, action);
 
       this.eventBus.emit('gridDrop:requestUpdateData', {
         elements: cloneDeep(this.gridElements),
@@ -119,13 +103,12 @@ class GridDropEngine {
       });
     });
 
-    this._subscribe('system:requestUpdateElements', ({ elements }) => {
-      this._elements = elements;
+    this._subscribe('system:requestElementsScale', ({ $elements }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
     });
 
     this._subscribe('system:restoredState', ({ stateData }) => {
-      this._layoutData = stateData.layoutData;
       this._elements = stateData.elements;
       this._elementsUpdate = true;
       this.setActiveElement(null);
@@ -137,6 +120,12 @@ class GridDropEngine {
     });
   }
 
+  /** 엔진 초기화 */
+  reset() {
+    this._initialize();
+    console.log('[GridDropEngine] 리셋 완료');
+  }
+
   /** 삭제 및 정리 */
   destroy() {
     this._subscriptions.forEach((unsubscribe) => {
@@ -145,7 +134,7 @@ class GridDropEngine {
       }
     });
 
-    this._initialize();
+    this.reset();
 
     this._subscriptions = [];
     this.eventBus = null;
@@ -203,8 +192,10 @@ class GridDropEngine {
     this._startPos = { x: 0, y: 0 };
     this._startSize = { w: 0, h: 0 };
 
-    this._activeData = null;
+    // this._activeData = null;
     this._activeSection = null;
+    this._activeMode = null;
+    this._activeConfig = null;
     this._activeElement = null;
 
     this._elementsUpdate = false;
@@ -270,7 +261,7 @@ class GridDropEngine {
    * @returns {object} - 드래그된 셀 수 ({ dx: , dy: })
    */
   _calculateDrag(currentPos, cellSize) {
-    const { gridGap } = this._activeData.config;
+    const { gridGap } = this._activeConfig;
 
     const dx = Math.round((currentPos.x - this._startPos.x) / (cellSize.w + gridGap));
     const dy = Math.round((currentPos.y - this._startPos.y) / (cellSize.h + gridGap));
@@ -283,7 +274,7 @@ class GridDropEngine {
    * @returns {number} - 그리드 셀 너비
    */
   _getGridCellWidth(element) {
-    const { gridGap, gridColumns } = this._activeData.config;
+    const { gridGap, gridColumns } = this._activeConfig;
     const totalWidth = element.clientWidth - gridGap * (gridColumns - 1);
     return totalWidth / gridColumns;
   }
@@ -293,7 +284,7 @@ class GridDropEngine {
    * @returns {number} - 그리드 셀 높이
    */
   _getGridCellHeight(element) {
-    const { gridGap, gridRows } = this._activeData.config;
+    const { gridGap, gridRows } = this._activeConfig;
     const totalHeight = element.clientHeight - gridGap * (gridRows - 1);
     return totalHeight / gridRows;
   }
@@ -331,11 +322,11 @@ class GridDropEngine {
    * @param {string} elName - 추가할 아이템 이름
    */
   addElement(elName) {
-    if (!this._activeData || !this._dragState.activeCell) {
+    if (!this._dragState.activeCell) {
       console.error('[GridDropEngine] 활성화된 데이터가 없습니다.');
       return;
     }
-    if (this._activeData.mode !== 'grid') return;
+    if (this._activeMode !== 'grid') return;
 
     const element = {
       id: elName + '_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7),
@@ -507,7 +498,7 @@ class GridDropEngine {
     // 리사이징 중인 경우에만 드래그 가능
     if (!this._dragState.isResizing) return;
 
-    const { gridColumns, gridRows } = this._activeData.config;
+    const { gridColumns, gridRows } = this._activeConfig;
 
     const activeSection = document.querySelector('.section-active');
     const { dx, dy } = this._calculateDrag(