polarvo-layout 1.0.59 → 1.0.61

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -18,19 +18,11 @@
           {{ key }}
         </div>
         <template v-if="section.mode === 'grid'">
-          <GridLayout
-            :id="`grid-${key}`"
-            :polarvo="polarvo"
-            :preview="preview"
-            :sectionKey="key"
-            :sectionData="section"
-            :elementIds="section.elementIds"
-          />
+          <GridLayout :polarvo="polarvo" :preview="preview" :sectionKey="key" :sectionData="section" :elementIds="section.elementIds" />
         </template>
 
         <template v-else>
           <FreeLayout
-            :id="`free-${key}`"
             :polarvo="polarvo"
             :preview="preview"
             :sectionKey="key"

package/src/core/managers/EngineManager.js

@@ -156,14 +156,14 @@ class EngineManager {
    * @param {string} type - 설정 타입 (mode, config)
    * @param {object} updates - 업데이트할 설정 값 객체
    */
-  _updateActiveSectionConfig(type, updates) {
-    if (!this.state.layoutData || !this.state.activeSection) {
+  _updateActiveSectionConfig(type, updates, section = this.state.activeSection) {
+    if (!this.state.layoutData || !section) {
       console.error('[EngineManager] activeData를 업데이트할 수 없습니다.');
       return;
     }
 
     this.eventBus.emit('system:updateActiveSectionConfig', {
-      $section: this.state.activeSection,
+      $section: section,
       changes: { type: type, ...updates },
       timestamp: Date.now(),
     });
@@ -333,6 +333,7 @@ class EngineManager {
 
       const prevGridRatio = $prev?.gridRatio || { column: [100], row: [100] };
       this._updateElementsScaleByRatio('column', prevGridRatio, $gridRatio);
+      this._updateElementsScaleByRatio('row', prevGridRatio, $gridRatio);
 
       nextTick(() => {
         this.eventBus.emit('system:historyCheckpoint', {
@@ -534,7 +535,8 @@ class EngineManager {
       }
 
       this.state.elements.push(element);
-      this._updateActiveSectionConfig('elementIds', { elementIds: [...(this.activeData?.elementIds || []), element.id] });
+      const targetSectionData = this.state.layoutData?.[element.section];
+      this._updateActiveSectionConfig('elementIds', { elementIds: [...(targetSectionData?.elementIds || []), element.id] }, element.section);
 
       this.eventBus.emit('system:requestUpdateElement', {
         action: 'add',
@@ -551,10 +553,12 @@ class EngineManager {
 
     // 배치요소 삭제 요청
     this._subscribe('freeDrop:requestDeleteElement', ({ elementId }) => {
+      const target = this.state.elements.find((el) => el.id === elementId);
       this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
+      const targetSectionData = this.state.layoutData?.[target?.section];
       this._updateActiveSectionConfig('elementIds', {
-        elementIds: (this.activeData?.elementIds || []).filter((elId) => elId !== elementId),
-      });
+        elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
+      }, target?.section);
       // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
       this.eventBus.emit('system:requestUpdateElement', {
@@ -566,11 +570,7 @@ class EngineManager {
 
       this.eventBus.emit('system:historyCheckpoint', {
         domain: 'manager',
-        state: {
-          manager: this.getState() || null,
-          layout: this.getEngine('layout')?.getState() || null,
-          display: this.getEngine('display')?.getState() || null,
-        },
+        state: this.getState(),
       });
     });
 
@@ -609,7 +609,8 @@ class EngineManager {
       }
 
       this.state.elements.push(element);
-      this._updateActiveSectionConfig('elementIds', { elementIds: [...(this.activeData?.elementIds || []), element.id] });
+      const targetSectionData = this.state.layoutData?.[element.section];
+      this._updateActiveSectionConfig('elementIds', { elementIds: [...(targetSectionData?.elementIds || []), element.id] }, element.section);
       // this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
 
       this.eventBus.emit('system:requestUpdateElement', {
@@ -627,10 +628,12 @@ class EngineManager {
 
     // 배치요소 삭제 요청
     this._subscribe('gridDrop:requestDeleteElement', ({ elementId }) => {
+      const target = this.state.elements.find((el) => el.id === elementId);
       this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
+      const targetSectionData = this.state.layoutData?.[target?.section];
       this._updateActiveSectionConfig('elementIds', {
-        elementIds: (this.activeData?.elementIds || []).filter((elId) => elId !== elementId),
-      });
+        elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
+      }, target?.section);
       // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
       this.eventBus.emit('system:requestUpdateElement', {

package/src/library/LayoutLibrary.js

@@ -120,11 +120,11 @@ function useLayout(api) {
 
     _subscribe('system:restoredState', ({ domain, state: snapShot }) => {
       if (domain === 'all'|| domain === 'draft') {
-        state.elements = snapShot.manager.elements;
+        state.elements = cloneDeep(snapShot.manager.elements);
         // state.layoutData = snapShot.manager.layoutData
 
         state.layoutName = snapShot.layout.layoutName;
-        state.layoutData = snapShot.layout.layoutData;
+        state.layoutData = cloneDeep(snapShot.layout.layoutData);
         state.gridNumber = { ...snapShot.layout.gridNumber };
         state.gridRatio = {
           column: [...snapShot.layout.gridRatio.column],
@@ -134,13 +134,13 @@ function useLayout(api) {
       }
 
       if (domain === 'manager') {
-        state.elements = snapShot.elements;
-        state.layoutData = snapShot.layoutData;
+        state.elements = cloneDeep(snapShot.elements);
+        state.layoutData = cloneDeep(snapShot.layoutData);
       }
 
       if (domain === 'layout') {
         state.layoutName = snapShot.layoutName;
-        state.layoutData = snapShot.layoutData;
+        state.layoutData = cloneDeep(snapShot.layoutData);
         state.gridNumber = { ...snapShot.gridNumber };
         state.gridRatio = {
           column: [...snapShot.gridRatio.column],