polarvo-layout 1.0.77 → 1.0.79

package/package.json

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

package/src/components/SideBar/ElementSideBar.vue

@@ -4,7 +4,7 @@
       v-for="(item, index) in currentElements"
       :key="index"
       class="flex flex-col items-center justify-center border border-gray-200 rounded-lg p-2 hover:bg-gray-50 transition-colors cursor-pointer active:scale-95"
-      @mousedown.stop="sectionMode == 'free' ? addElementToFree($event, item) : addElementToGrid(item)"
+      @mousedown.stop="handleAddElement($event, item)"
     >
       <img :src="item.imgurl" alt="" class="w-24 h-auto rounded" />
       <h4 class="text-sm">{{ item.label }}</h4>
@@ -39,8 +39,23 @@ const props = defineProps({
     required: false,
     default: () => [],
   },
+  generalStyle: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 
+function resolveCustomStyle(item) {
+  // custom 요소는 기존 세팅된 customStyle을 따름
+  const base = props.elType === 'custom' ? item.propDefaults?.customStyle : props.generalStyle?.[item.elName];
+  return { ...(base ?? {}) };
+}
+
+function handleAddElement(event, item) {
+  const payload = { ...item, customStyle: resolveCustomStyle(item) };
+  sectionMode.value === 'free' ? addElementToFree(event, payload) : addElementToGrid(payload);
+}
+
 const { addElement: addElementToFree } = props.polarvo.freeDrop;
 const { addElement: addElementToGrid } = props.polarvo.gridDrop;
 

package/src/core/engines/FreeDropEngine.js

@@ -127,7 +127,7 @@ class FreeDropEngine {
       const index = this._elements.findIndex((x) => x.id === elementId);
 
       if (index !== -1) {
-        this._elements = [...this._elements.slice(0, index), element, ...this._elements.slice(index + 1)]; // 배열 자체를 교체하여 갱신
+        this._elements[index] = element; // 업데이트
         this._activeElement = element;
         this._elementsUpdate = true;
       }
@@ -432,6 +432,7 @@ class FreeDropEngine {
       section: this._activeSection,
       isLocked: false,
       ...(item.propDefaults || {}), // 아이템의 기본 props 설정
+      customStyle: {...item.customStyle ?? null},
     };
 
     this.setActiveElement(element, 'add');
@@ -899,6 +900,7 @@ class FreeDropEngine {
       });
       // }
       this._resetDrag();
+      this._alreadyExist = true;
       return;
     }
   };

package/src/core/engines/GridDropEngine.js

@@ -94,7 +94,7 @@ class GridDropEngine {
       const index = this._elements.findIndex((x) => x.id === elementId);
 
       if (index !== -1) {
-        this._elements = [...this._elements.slice(0, index), element, ...this._elements.slice(index + 1)]; // 배열 자체를 교체하여 갱신
+        this._elements[index] = element; // 업데이트
         this._elementsUpdate = true;
       }
 
@@ -362,6 +362,7 @@ class GridDropEngine {
       section: this._activeSection,
       isLocked: false,
       ...(item.propDefaults || {}), // 아이템의 기본 props 설정
+      customStyle: { ...(item.customStyle ?? null) },
     };
 
     this.setActiveElement(null, 'add');

package/src/library/FreeDropLibrary.js

@@ -62,7 +62,7 @@ function useFreeDrop(api) {
       const index = state.elements.findIndex((el) => el.id === element.id);
 
       if (index !== -1) {
-        state.elements = [...state.elements.slice(0, index), element, ...state.elements.slice(index + 1)]; // 배열 자체를 교체하여 갱신
+        state.elements[index] = element;
         state.activeElement = element;
         state.activeId = element?.id ?? null;
       }

package/src/library/GridDropLibrary.js

@@ -50,7 +50,7 @@ function useGridDrop(api) {
       // state.elements = elements;
       const index = state.elements.findIndex((el) => el.id === element.id);
       if (index !== -1) {
-        state.elements = [...state.elements.slice(0, index), element, ...state.elements.slice(index + 1)]; // 배열 자체를 교체하여 갱신
+        state.elements[index] = element;
         state.activeElement = element;
         state.activeId = element?.id ?? null;
       }

package/src/library/LayoutLibrary.js

@@ -93,6 +93,7 @@ function useLayout(api) {
     _subscribe('system:requestUpdateActiveElement', ({ elementId, element }) => {
       const index = state.elements.findIndex((x) => x.id === elementId);
       if (index !== -1) {
+        // state.elements[index] = element; // 업데이트
         state.elements = [...state.elements.slice(0, index), element, ...state.elements.slice(index + 1)]; // 배열 자체를 교체하여 갱신
       }
     });