polarvo-layout 1.0.79 → 1.0.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polarvo-layout",
-  "version": "1.0.79",
+  "version": "1.0.81",
   "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

@@ -1,14 +1,17 @@
 <template>
-  <div class="canvas-wrapper w-full h-full max-h-[765px] overflow-y-auto overflow-x-hidden">
-    <div id="canvas-container" class="border rounded-md w-full h-full bg-white" :style="containerStyle">
-      <BaseLayout :polarvo="polarvo" class="relative" />
-      <div
-        class="absolute bottom-4 left-4 right-4 bg-gray-50 flex items-center justify-center text-gray-400 rounded-lg hover:bg-gray-100 hover:text-gray-600 cursor-pointer"
-        @click="expandContainer()"
-      >
-        <font-awesome-icon :icon="['fas', 'plus']" class="h-8 text-xs" />
+  <div class="w-full h-full flex flex-col bg-gray-50">
+    <div class="canvas-wrapper w-full flex-1 min-h-0 overflow-y-auto overflow-x-hidden bg-gray-50">
+      <div id="canvas-container" class="border rounded-md w-full bg-white" :style="containerStyle">
+        <BaseLayout :polarvo="polarvo" class="relative" />
       </div>
     </div>
+    <div
+      class="py-2 px-2 shrink-0 bg-white border border-gray-300 flex items-center justify-center text-gray-500 rounded-lg hover:bg-gray-100 cursor-pointer"
+      :style="{ width: `${displayWidth}px`, margin: '8px auto ' }"
+      @click="expandContainer()"
+    >
+      <font-awesome-icon :icon="['fas', 'plus']" class="h-8 text-xs" />
+    </div>
   </div>
 </template>
 
@@ -26,7 +29,7 @@ const props = defineProps({
 const DEFAULT_DISPLAY_SIZE = {
   px: 1200,
   percent: 100,
-  gridSize: 16,
+  gridSize: 10,
   aspectRatio: '16/9',
 };
 
@@ -55,6 +58,11 @@ watch(
 
 const additionalHeight = ref(0);
 const displayHeight = computed(() => defaultHeight.value + additionalHeight.value);
+const displayWidth = computed(() => {
+  const px = displaySize.value?.px ?? DEFAULT_DISPLAY_SIZE.px;
+  const percent = displaySize.value?.percent ?? DEFAULT_DISPLAY_SIZE.percent;
+  return px * (percent / 100);
+});
 
 function expandContainer() {
   additionalHeight.value += 200;
@@ -74,7 +82,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 +98,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/Layout/FreeItem.vue

@@ -7,7 +7,7 @@
     @mousedown.stop="activeEditMode ? null : handleMouseDown($event, item.id)"
   >
     <!-- 크기-->
-    <div v-if="item.id === activeId" class="absolute bg-blue-400 px-2 py-1 text-sm text-white right-0 z-10">
+    <div v-if="item.id === activeId" class="absolute bg-blue-400 px-2 py-1 text-sm text-white right-0 z-20">
       가로: {{ Math.round(size.w) }} 세로: {{ Math.round(size.h) }}
     </div>
 
@@ -16,17 +16,17 @@
       <div
         v-for="handle in handles"
         :key="handle.name"
-        :class="`handle absolute bg-blue-400 z-10 pointer-events-auto hover:bg-blue-700 ${handle.name}`"
+        :class="`handle absolute bg-blue-400 z-20 pointer-events-auto hover:bg-blue-700 ${handle.name}`"
         @mousedown="startResize($event, handle.name)"
       ></div>
       <div class="flex flex-row m-1 gap-1">
         <!-- 잠금 토글-->
-        <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+        <div class="z-20 pointer-events-auto cursor-pointer" @click="toggleLock()">
           <LockIcon v-if="item.isLocked" />
           <UnlockIcon v-else />
         </div>
         <!-- 편집 토글-->
-        <div class="z-10 pointer-events-auto cursor-pointer">
+        <div class="z-20 pointer-events-auto cursor-pointer">
           <div v-if="item.type === 'inputForm'" @click="toggleEditMode">
             <div v-if="activeEditMode" class="bg-red-100 text-red-400 px-2 py-1 text-sm rounded-md hover:opacity-80 animate-pulse">
               편집모드 on

package/src/components/Layout/GridItem.vue

@@ -14,17 +14,17 @@
       <!-- 리사이즈 핸들 -->
       <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
         <div
-          class="absolute w-2 h-2 bottom-0 right-0 bg-blue-400 z-10 pointer-events-auto cursor-se-resize"
+          class="absolute w-2 h-2 bottom-0 right-0 bg-blue-400 z-20 pointer-events-auto cursor-se-resize"
           @mousedown="startResize($event, item.id)"
         ></div>
         <div class="flex gap-1 m-1">
           <!-- 잠금 토글-->
-          <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+          <div class="z-20 pointer-events-auto cursor-pointer" @click="toggleLock()">
             <LockIcon v-if="item.isLocked" />
             <UnlockIcon v-else />
           </div>
           <!-- 편집 토글-->
-          <div class="z-10 pointer-events-auto cursor-pointer">
+          <div class="z-20 pointer-events-auto cursor-pointer">
             <div v-if="item.type === 'inputForm'" @click="toggleEditMode">
               <div v-if="activeEditMode" class="bg-red-100 text-red-400 px-2 py-1 text-sm rounded-md hover:opacity-80 animate-pulse">
                 편집모드 on

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

@@ -542,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 };
   }
 
   /** [내부함수] 새로운 크기와 위치 계산