polarvo-layout 1.0.35 → 1.0.37

package/package.json

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

package/src/components/Layout/FreeLayout.vue

@@ -7,7 +7,7 @@
       :polarvo="props.polarvo"
       :sectionKey="props.sectionKey"
     ></FreeItem>
-    
+
     <!-- 오버레이 -->
     <div v-if="activeEditMode" class="absolute inset-0 bg-black opacity-50"></div>
 
@@ -68,7 +68,8 @@ const selectedElement = inject('selectedElement');
 const activeEditMode = inject('activeEditMode');
 
 let _isElementSwitching = false;
-import { omit, cloneDeep } from 'lodash-es';
+import { omit, cloneDeep, debounce } from 'lodash-es';
+
 watch(
   () => activeElement.value?.id,
   (newId, oldId) => {
@@ -83,7 +84,6 @@ watch(
 
     // activeElement 바뀌면 편집 모드 해제
     activeEditMode.value = false;
-
   },
 );
 

package/src/components/Layout/GridLayout.vue

@@ -68,15 +68,22 @@ const filteredElements = computed(() => {
 watch(
   () => filteredElements.value,
   () => {
-    debouncedUpdate();
+    debouncedUpdateMergedData();
   },
   { deep: true },
 );
-const debouncedUpdate = debounce(() => {
+const debouncedUpdateMergedData = debounce(() => {
   setMergedData();
   // gridRows 업데이트
 }, 10);
 
+watch(
+  () => `${props.sectionData?.config?.gridColumns}-${props.sectionData?.config?.gridRows}`,
+  () => {
+    initData();
+  },
+);
+
 function setMergedData() {
   const grid = Array.from({ length: gridRows.value + 1 }, () => Array(gridColumns.value + 1).fill(false));
   // const filled = elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey);
@@ -125,7 +132,7 @@ watch(
       _isElementSwitching = false;
       return;
     }
-    updateActiveElement(selectedElement.value?.id, newElement);
+  updateActiveElement(selectedElement.value?.id, newElement);
   },
   { deep: true },
 );

package/src/components/Layout/PolarLayout.vue

@@ -11,6 +11,7 @@ const props = defineProps({
     default: 'free',
   },
 });
+
 </script>
 
 <style scoped>

package/src/core/engines/FreeDropEngine.js

@@ -129,7 +129,7 @@ class FreeDropEngine {
     });
 
     this._subscribe('system:restoredState', ({ domain, state: snapShot }) => {
-      if (domain === 'all') {
+      if (domain === 'all' || domain === 'draft') {
         this._elements = snapShot.manager.elements || [];
         this._elementsUpdate = true;
         this.setActiveElement(null);
@@ -427,7 +427,6 @@ class FreeDropEngine {
     this._activeElement = element;
     this._alreadyExist = action === 'add' ? false : true;
     // this._elementsUpdate = true;
-    console.log('setActiveElement', this._activeElement?.id, this.freeElements)
 
     this.eventBus.emit('freeDrop:setActiveElement', {
       $alreadyExist: this._alreadyExist,

package/src/core/engines/GridDropEngine.js

@@ -109,7 +109,7 @@ class GridDropEngine {
     });
 
     this._subscribe('system:restoredState', ({ domain, state: snapShot }) => {
-      if (domain === 'all') {
+      if (domain === 'all'|| domain === 'draft') {
         this._elements = snapShot.manager.elements || [];
         this._elementsUpdate = true;
 

package/src/core/managers/EngineManager.js

@@ -38,6 +38,9 @@ class EngineManager {
 
     this._subscriptions = [];
     this._initialized = false;
+
+    this._beforeUnloadHandler = () => this.saveSession();
+    window.addEventListener('beforeunload', this._beforeUnloadHandler);
   }
 
   /** activeSection 데이터 반환
@@ -72,6 +75,22 @@ class EngineManager {
 
   restoreState(domain, state) {
     switch (domain) {
+      case 'draft': {
+        // manager
+        this.setState(state.manager);
+
+        // layout
+        this.getEngine('layout').setState(state.layout);
+        this.state.layoutData = state.layout.layoutData;
+
+        // display
+        this.getEngine('display')?.setState(state.display);
+        this._displaySize = state.display.displaySize;
+
+        this.setActiveSection(state.manager?.activeSection, true);
+        break;
+      }
+
       // all
       case 'all': {
         // manager
@@ -124,6 +143,15 @@ class EngineManager {
     this.eventBus.emit('system:restoredState', { domain, state });
   }
 
+  saveSession() {
+    const snapshot = {
+      manager: this.getState(),
+      layout: this.getEngine('layout')?.getState() || null,
+      display: this.getEngine('display')?.getState() || null,
+    };
+    sessionStorage.setItem('polarvo-session', JSON.stringify(snapshot));
+  }
+
   /** [내부함수] activeSection의 설정값 업데이트
    * @param {string} type - 설정 타입 (mode, config)
    * @param {object} updates - 업데이트할 설정 값 객체
@@ -625,6 +653,21 @@ class EngineManager {
       await this._createEngines();
       await this._setupEngineConnections();
       this._initialized = true;
+
+      // 세션 복원
+      const saved = sessionStorage.getItem('polarvo-session');
+      if (saved) {
+        this.restoreState('draft', JSON.parse(saved));
+
+        this.eventBus.emit('system:historyCheckpoint', {
+          domain: 'draft',
+          state: {
+            manager: this.getState() || null,
+            layout: this.getEngine('layout')?.getState() || null,
+            display: this.getEngine('display')?.getState() || null,
+          },
+        });
+      }
     }
   }
 
@@ -701,6 +744,11 @@ class EngineManager {
       }
     });
 
+    // 가장 최신 상태를 세션 스토리지에 저장 (새로고침 대비)
+    this.eventBus.subscribe('system:historyCheckpoint', () => {
+      this.saveSession();
+    });
+
     // 모든 연결 설정 완료 후 초기화 완료 이벤트 발행
     this.eventBus.emit('system:engineInitialized', {
       state: this.state,
@@ -773,6 +821,8 @@ class EngineManager {
   destroy() {
     console.log('[EngineManager] 엔진 매니저 삭제 시작');
 
+    window.removeEventListener('beforeunload', this._beforeUnloadHandler);
+
     // 모든 구독 해제
     this._subscriptions.forEach((unsubscribe) => {
       if (typeof unsubscribe === 'function') {

package/src/library/DisplayLibrary.js

@@ -61,7 +61,7 @@ function useDisplay(api) {
     });
 
     _subscribe('system:restoredState', ({ domain, state: snapShot }) => {
-      if (domain === 'all') {
+      if (domain === 'all'|| domain === 'draft') {
         state.displayMode = snapShot.display.displayMode;
         state.displaySize = { ...snapShot.display.displaySize };
       }

package/src/library/LayoutLibrary.js

@@ -117,7 +117,7 @@ function useLayout(api) {
     });
 
     _subscribe('system:restoredState', ({ domain, state: snapShot }) => {
-      if (domain === 'all') {
+      if (domain === 'all'|| domain === 'draft') {
         state.elements = snapShot.manager.elements;
         // state.layoutData = snapShot.manager.layoutData