polarvo-layout 1.0.71 → 1.0.73

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -71,8 +71,8 @@ const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio }
 
 const getBaseStyle = computed(() => {
   return {
-    gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}%`).join(' '),
-    gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}%`).join(' '),
+    gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}fr`).join(' '),
+    gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}fr`).join(' '),
     marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
     gap: `${gapSize.value}px`,
   };

package/src/components/Layout/FreeItem.vue

@@ -46,7 +46,6 @@
       :isHovable="isHovable"
       class="hover:opacity-80"
       :class="activeEditMode || isHovable ? `pointer-events-auto ` : `pointer-events-none`"
-      @set:defaultStyle="setDefaultStyle"
     />
   </div>
 </template>
@@ -101,10 +100,6 @@ function setRef(el) {
     props.polarvo.components.unregister('elements', `${props.sectionKey}-${props.item.id}`);
   }
 }
-
-function setDefaultStyle(defaultStyle) {
-  updateActiveElement(props.item.id, { customStyle: defaultStyle });
-}
 </script>
 
 <style lang="scss" scoped>

package/src/components/Layout/GridItem.vue

@@ -44,7 +44,6 @@
         :isHovable="isHovable"
         class="hover:opacity-80"
         :class="activeEditMode || isHovable ? `pointer-events-auto ` : `pointer-events-none`"
-        @set:defaultStyle="setDefaultStyle"
       />
       <!-- 오버레이 -->
       <div v-if="activeEditMode && item.id !== activeId" class="absolute inset-0 bg-black opacity-50 z-30"></div>
@@ -108,8 +107,4 @@ function setRef(el) {
     props.polarvo.components.unregister('elements', `${props.sectionKey}-${props.item.id}`);
   }
 }
-
-function setDefaultStyle(defaultStyle) {
-  updateActiveElement(props.item.id, { customStyle: defaultStyle });
-}
 </script>

package/src/core/managers/EngineManager.js

@@ -201,6 +201,10 @@ class EngineManager {
     };
   }
 
+  getElements() {
+    return this.state.elements;
+  }
+
   /** elements 초기화
    * @param {Array} elements - 새로운 elements 배열
    */
@@ -474,14 +478,14 @@ class EngineManager {
     //   };
     // }
 
-      updates.config = {
-        gridColumns: this.activeData.config?.gridColumns || 2,
-        gridRows: this.activeData.config?.gridRows || 2,
-        gridGap: this.activeData.config?.gridGap || 4,
-        gridRowRatio: this.activeData.config?.gridRowRatio || [],
-        gridColumnRatio: this.activeData.config?.gridColumnRatio || [],
-        showGuideLine: this.activeData.config?.showGuideLine || false,
-    }
+    updates.config = {
+      gridColumns: this.activeData.config?.gridColumns || 2,
+      gridRows: this.activeData.config?.gridRows || 2,
+      gridGap: this.activeData.config?.gridGap || 4,
+      gridRowRatio: this.activeData.config?.gridRowRatio || [],
+      gridColumnRatio: this.activeData.config?.gridColumnRatio || [],
+      showGuideLine: this.activeData.config?.showGuideLine || false,
+    };
 
     this._updateActiveSectionConfig('mode', updates);
   }
@@ -1033,6 +1037,7 @@ class EngineManager {
         // getLayoutName: () => layoutEngine.layoutName,
         // getActiveData: () => this.activeData,
         // getLayoutData: () => layoutEngine.layoutData,
+        getElements: () => this.getElements(),
         getContainerSize: () => this.getContainerSize(),
         setContainerSize: () => this.setContainerSize(),
 

package/src/library/LayoutLibrary.js

@@ -171,6 +171,15 @@ function useLayout(api) {
   };
 
   // 메서드
+  const getElements =() => {
+   try {
+      return api.layout.getElements();
+    } catch (error) {
+      console.warn('[FreeDropLibrary] getElements 실행 중 오류 발생:', error);
+      return {};
+    }
+  };
+
   const getContainerSize = () => {
     try {
       return api.layout.getContainerSize();
@@ -255,6 +264,7 @@ function useLayout(api) {
   return {
     state: readonly(state),
     cleanup,
+    getElements,
     getContainerSize,
     setContainerSize,
     setLayoutName,