polarvo-layout 1.0.34 → 1.0.36

package/package.json

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

package/src/components/Layout/FreeLayout.vue

@@ -77,13 +77,13 @@ watch(
       setActiveDesign(null);
       setActiveMenu(null);
     }
-
     _isElementSwitching = true;
     // selectedElement.value = structuredClone(toRaw(activeElement.value));
     selectedElement.value = cloneDeep(activeElement.value);
 
     // activeElement 바뀌면 편집 모드 해제
     activeEditMode.value = false;
+
   },
 );
 

package/src/components/Layout/GridLayout.vue

@@ -77,6 +77,13 @@ const debouncedUpdate = debounce(() => {
   // 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);

package/src/components/SideBar/ElementSideBar.vue

@@ -43,7 +43,7 @@ function getPropsDefaults(props) {
   if (!props) return {};
 
   return Object.fromEntries(Object.entries(props).map(([key, prop]) => {
-    if (['size'].includes(key)) return null;
+    if (['size', 'preview'].includes(key)) return null;
 
     if (prop.default !== undefined) {
       return [key, typeof prop.default === 'function' ? prop.default() : prop.default];

package/src/core/engines/FreeDropEngine.js

@@ -1,5 +1,4 @@
 import { cloneDeep } from 'lodash-es';
-import { nextTick } from 'vue';
 
 // event 발행 시 'freeDrop'으로 시작하는 이름 사용
 class FreeDropEngine {
@@ -130,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);

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

@@ -72,6 +72,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
@@ -625,6 +641,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 +732,16 @@ class EngineManager {
       }
     });
 
+    // 가장 최신 상태를 세션 스토리지에 저장 (새로고침 대비)
+    this.eventBus.subscribe('system:historyCheckpoint', () => {
+      const snapshot = {
+        manager: this.getState(),
+        layout: this.getEngine('layout')?.getState() || null,
+        display: this.getEngine('display')?.getState() || null,
+      };
+      sessionStorage.setItem('polarvo-session', JSON.stringify(snapshot));
+    });
+
     // 모든 연결 설정 완료 후 초기화 완료 이벤트 발행
     this.eventBus.emit('system:engineInitialized', {
       state: this.state,

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/FreeDropLibrary.js

@@ -81,7 +81,7 @@ function useFreeDrop(api) {
     });
 
     _subscribe('system:requestElementsScale', ({ $elements, guides }) => {
-      state.elements = $elements;
+      state.elements = [...$elements];
       state.guides = guides ?? { x: null, y: null, w: null, h: null };
     });
 

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