polarvo-layout 1.0.78 → 1.0.80

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :id="preview ? 'previewLayout' : 'baseLayout'"
-    class="grid h-full p-2 bg-transparent rounded-lg"
+    class="grid h-full p-[10px] bg-transparent rounded-lg"
     :class="[layoutType + '-layout', `grid-cols-${gridNumber?.column}`, { 'mb-4': layoutType === 'three-column-split' }]"
     :style="getBaseStyle"
     @contextmenu.prevent

package/src/components/Layout/CanvasContainer.vue

@@ -26,7 +26,7 @@ const props = defineProps({
 const DEFAULT_DISPLAY_SIZE = {
   px: 1200,
   percent: 100,
-  gridSize: 16,
+  gridSize: 10,
   aspectRatio: '16/9',
 };
 
@@ -74,7 +74,7 @@ const containerStyle = computed(() => {
       linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)
     `,
       backgroundSize: `${DEFAULT_DISPLAY_SIZE.gridSize}px ${DEFAULT_DISPLAY_SIZE.gridSize}px`,
-      backgroundPosition: '8px 8px', // BaseLayout의 p-2(8px)와 맞춰 좌상단 기준으로 정렬
+      backgroundPosition: '10px 10px', // BaseLayout의 p-[10px]와 맞춰 좌상단 기준으로 정렬 (gridSize와 무관한 고정값)
     };
   }
 
@@ -90,7 +90,7 @@ const containerStyle = computed(() => {
       linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)
     `,
     backgroundSize: `${displaySize.value.gridSize}px ${displaySize.value.gridSize}px`,
-    backgroundPosition: '8px 8px', // BaseLayout의 p-2(8px)와 맞춰 좌상단 기준으로 정렬
+    backgroundPosition: '10px 10px', // BaseLayout의 p-[10px]와 맞춰 좌상단 기준으로 정렬 (gridSize와 무관한 고정값)
   };
 });
 </script>

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/configs/resources/displayResource.js

@@ -7,7 +7,7 @@ import MobileIcon from '../../icons/display/MobileIcon.vue';
 
 export const displayResource = (icon = {}) => ({
   desktop: {
-    gridSize: 16,
+    gridSize: 10,
     aspectRatio: '16/9',
     defaultWidth: 1200,
     icon: markRaw(icon.DesktopIcon || DesktopIcon),

package/src/core/engines/DisplayEngine.js

@@ -9,7 +9,7 @@ const DISPLAY_LIMITS = {
 const DEFAULT_DISPLAY_SIZE = {
   px: 1200,
   percent: 100,
-  gridSize: 16,
+  gridSize: 10,
   aspectRatio: '16/9',
 };
 

package/src/core/engines/FreeDropEngine.js

@@ -432,6 +432,7 @@ class FreeDropEngine {
       section: this._activeSection,
       isLocked: false,
       ...(item.propDefaults || {}), // 아이템의 기본 props 설정
+      customStyle: {...item.customStyle ?? null},
     };
 
     this.setActiveElement(element, 'add');
@@ -541,22 +542,15 @@ class FreeDropEngine {
     const rawX = event.clientX - layoutRect.left - offsetPos.x;
     const rawY = event.clientY - layoutRect.top - offsetPos.y;
 
-    // const maxX = layoutRect.width - this._activeElement.size.w;
-    // const maxY = layoutRect.height - this._activeElement.size.h;
+    // grid snap을 먼저 적용한 뒤 경계로 clamp해야 함
+    // (clamp 후 snap하면 반올림으로 인해 경계값(maxX/maxY, grid 배수가 아님)보다 커질 수 있어
+    //  우측/하단 경계를 넘어가는 문제가 발생함)
+    const gridX = this._snapToGrid(rawX);
+    const gridY = this._snapToGrid(rawY);
 
-    // // 클램핑: 경계 밖으로 나가도 경계에서 멈추고 마우스를 계속 추적
-    // const clampedX = Math.min(Math.max(0, rawX), maxX);
-    // const clampedY = Math.min(Math.max(0, rawY), maxY);
+    const clamped = this._clampToLayoutBounds(gridX, gridY, layoutRect);
 
-    const clamped = this._clampToLayoutBounds(rawX, rawY, layoutRect);
-
-    // const gridX = this._snapToGrid(rawX);
-    // const gridY = this._snapToGrid(rawY);
-
-    const gridX = this._snapToGrid(clamped.x);
-    const gridY = this._snapToGrid(clamped.y);
-
-    return { x: gridX, y: gridY };
+    return { x: clamped.x, y: clamped.y };
   }
 
   /** [내부함수] 새로운 크기와 위치 계산

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[index] = element; // 업데이트
+        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');