polarvo-layout 1.0.85 → 1.0.87

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -131,6 +131,12 @@ function onHover(e) {
     return;
   }
 
+  // 선택 대상에서 제외하도록 마킹된 요소는 무시 (예: 폼 하단 고정 제출 버튼)
+  if (e.target.closest('[data-no-select]')) {
+    setHovered(null);
+    return;
+  }
+
   const leafEl = e.target.closest('[data-leaf]');
   const ownerEl = e.target.closest('[data-style-owner]');
   if (!leafEl || !ownerEl) {
@@ -145,11 +151,17 @@ function onClick(e) {
   const activeElRoot = isEligible(e);
   if (!activeElRoot) return;
 
+  // 선택 대상에서 제외하도록 마킹된 요소는 무시 (예: 폼 하단 고정 제출 버튼)
+  if (e.target.closest('[data-no-select]')) {
+    e.preventDefault();
+    e.stopPropagation();
+    return;
+  }
+
   const leafEl = e.target.closest('[data-leaf]');
   const ownerEl = e.target.closest('[data-style-owner]');
   if (!leafEl || !ownerEl) return;
 
-
   // leaf 내부의 실제 버튼/링크/폼 제출 등 기본 동작 막기
   e.preventDefault();
   e.stopPropagation();

package/src/components/Layout/CanvasContainer.vue

@@ -5,12 +5,20 @@
         <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 class="flex gap-2 shrink-0" :style="{ width: `${displayWidth}px`, margin: '8px auto' }">
+      <div
+        class="flex-1 py-2 px-2 bg-white border border-gray-300 flex items-center justify-center text-gray-500 rounded-lg hover:bg-gray-100 cursor-pointer"
+        @click="expandContainer()"
+      >
+        <font-awesome-icon :icon="['fas', 'plus']" class="h-8 text-xs" />
+      </div>
+      <div
+        class="flex-1 py-2 px-2 bg-white border border-gray-300 flex items-center justify-center rounded-lg"
+        :class="canShrink ? 'text-gray-500 hover:bg-gray-100 cursor-pointer' : 'text-gray-300 cursor-not-allowed'"
+        @click="shrinkContainer()"
+      >
+        <font-awesome-icon :icon="['fas', 'minus']" class="h-8 text-xs" />
+      </div>
     </div>
   </div>
 </template>
@@ -34,29 +42,55 @@ const DEFAULT_DISPLAY_SIZE = {
 };
 
 // height 관련 여유 공간 추가하여 계산함 (50, 200)
-const { displaySize } = toRefs(props.polarvo.display.state);
-const { elements } = toRefs(props.polarvo.layout.state);
+const { displaySize, canvasSize } = toRefs(props.polarvo.display.state);
+const { elements, activeMode } = toRefs(props.polarvo.layout.state);
+
 const defaultHeight = computed(() => {
-  return (
+  const freeElementsBottom =
     elements.value?.reduce((max, el) => {
-      const bottom = (el.position?.y || 0) + (el.size?.h || 0);
+      // 50은 버퍼값
+      let bottom = (el.position?.y || 0) + (el.size?.h || 0);
+      if (bottom > 750) {
+        bottom += 50;
+      }
       return Math.max(max, bottom);
-    }, 750) || 750
-  );
+    }, 750) || 750;
+
+  // 저장된 canvasSize가 없으면 free 요소 기준 계산값만 사용 (grid 섹션은 기본값 750으로 취급)
+  if (!canvasSize.value) return freeElementsBottom;
+
+  // grid: 라이브로 정확히 계산할 방법이 없어 저장된 값을 그대로 신뢰
+  if (activeMode.value === 'grid') {
+    return canvasSize.value.defaultHeight ?? freeElementsBottom;
+  }
+
+  // free: 라이브 계산값과 저장된 값 중 작은 쪽을 실제 최소 높이로 사용
+  return Math.min(freeElementsBottom, canvasSize.value.defaultHeight ?? freeElementsBottom);
 });
 
+// canvasSize 저장 시점의 총 높이(defaultHeight+additionalHeight)는 유지하면서,
+// 위에서 다시 계산한 defaultHeight와의 차이를 additionalHeight로 재배분
+function restoreAdditionalHeight() {
+  if (!canvasSize.value) return 0;
+
+  if (activeMode.value === 'grid') {
+    return canvasSize.value.additionalHeight ?? 0;
+  }
+
+  const savedTotal = (canvasSize.value.defaultHeight ?? 0) + (canvasSize.value.additionalHeight ?? 0);
+  return Math.max(0, savedTotal - defaultHeight.value);
+}
+
+const additionalHeight = ref(restoreAdditionalHeight());
+
+// canvasSize(저장된 캔버스 크기)가 바뀌면(=화면 전환) 그 값으로 복원, 없으면 0
 watch(
-  () => defaultHeight.value,
-  (newHeight, oldHeight) => {
-    if (newHeight <= oldHeight) {
-      additionalHeight.value = 0;
-      return;
-    }
-    additionalHeight.value = 200;
+  () => canvasSize.value,
+  () => {
+    additionalHeight.value = restoreAdditionalHeight();
   },
 );
 
-const additionalHeight = ref(0);
 const displayHeight = computed(() => defaultHeight.value + additionalHeight.value);
 const displayWidth = computed(() => {
   const px = displaySize.value?.px ?? DEFAULT_DISPLAY_SIZE.px;
@@ -64,10 +98,6 @@ const displayWidth = computed(() => {
   return px * (percent / 100);
 });
 
-function expandContainer() {
-  additionalHeight.value += 200;
-}
-
 const containerStyle = computed(() => {
   if (!displaySize.value) {
     return {
@@ -101,6 +131,18 @@ const containerStyle = computed(() => {
     backgroundPosition: '10px 10px', // BaseLayout의 p-[10px]와 맞춰 좌상단 기준으로 정렬 (gridSize와 무관한 고정값)
   };
 });
+
+defineExpose({ defaultHeight, additionalHeight, displayHeight });
+
+function expandContainer() {
+  additionalHeight.value += 200;
+}
+
+// displayHeight(=defaultHeight + additionalHeight)는 항상 defaultHeight 이상으로 유지
+const canShrink = computed(() => additionalHeight.value > 0);
+function shrinkContainer() {
+  additionalHeight.value = Math.max(0, additionalHeight.value - 200);
+}
 </script>
 
 <style scoped lang="scss">

package/src/components/Layout/GridLayout.vue

@@ -294,7 +294,17 @@ function initData() {
 
 const mergedData = ref([]); // 필드 데이터 + 빈 데이터 통합 리스트
 const filteredElements = computed(() => {
-  return elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey) ?? [];
+  return (
+    elements.value.filter((el) => {
+      if (!props.elementIds?.includes(el.id) || el.section !== props.sectionKey) return false;
+
+      // gridRows/gridColumns가 줄어든 뒤에도 예전 좌표를 들고 있는 요소는 제외 —
+      // 그대로 두면 CSS grid가 암묵적 행/열(grid-auto-rows/columns)을 만들어 그리드 박스 밖으로 밀려난다
+      const { row, col } = el.position;
+      const { rowSpan, colSpan } = el.size;
+      return row >= 1 && col >= 1 && row + rowSpan - 1 <= gridRows.value && col + colSpan - 1 <= gridColumns.value;
+    }) ?? []
+  );
 });
 watch(
   () => filteredElements.value,

package/src/core/engines/DisplayEngine.js

@@ -22,6 +22,7 @@ class DisplayEngine {
     this.activeDesign = null; // 현재 활성화된 디자인 메뉴
     this.displayMode = 'desktop'; // 현재 디스플레이 모드 (초기값 = 'desktop')
     this.displaySize = null;
+    this.canvasSize = null;
 
     this._resetDisplaySizeByMode(this.displayMode);
 
@@ -59,6 +60,7 @@ class DisplayEngine {
     this._subscribe('layout:setLayoutName', ({ $screenConfig }) => {
       this.displayMode = $screenConfig.displayMode;
       this.displaySize = { ...$screenConfig.displaySize };
+      this.canvasSize = { ...$screenConfig.canvasSize };
     });
 
     this._subscribe('freeDrop:setActiveElement', ({ action }) => {

package/src/core/engines/GridDropEngine.js

@@ -245,9 +245,12 @@ class GridDropEngine {
    * @returns {object} - 스타일 객체
    */
   getElementStyle(type, cell) {
+    const MIN_CELL_PX = 20; // GridLayout.vue의 MIN_ROW_PX와 동일한 값
+
     if (type == 'empty') {
       return {
         gridArea: `${cell.row} / ${cell.col} / span 1 / span 1`,
+        minHeight: `${MIN_CELL_PX}px`,
       };
     } else if (type == 'element') {
       const { row, col } = cell.position;
@@ -255,6 +258,7 @@ class GridDropEngine {
 
       return {
         gridArea: `${row} / ${col} / span ${rowSpan} / span ${colSpan}`,
+        minHeight: `${cell.size?.h ?? MIN_CELL_PX}px`,
       };
     }
   }

package/src/core/managers/EngineManager.js

@@ -35,6 +35,7 @@ class EngineManager {
     this._containerWidth = 1920;
     this._containerHeight = 1080;
     this._displaySize = { px: 1920, aspectRatio: '16/9' };
+    this._canvasSize = null;
 
     this._subscriptions = [];
     this._initialized = false;
@@ -201,7 +202,6 @@ class EngineManager {
     };
   }
 
-
   /** elements 초기화
    * @param {Array} elements - 새로운 elements 배열
    */
@@ -340,6 +340,7 @@ class EngineManager {
     // layoutName 변경에 따른 activeSection 초기화
     this._subscribe('layout:setLayoutName', ({ $layoutData, $screenConfig }) => {
       this._displaySize = { ...$screenConfig.displaySize };
+      this._canvasSize = { ...$screenConfig.canvasSize };
 
       this.state.layoutData = $layoutData;
       this.setActiveSection('section1', true);
@@ -487,6 +488,73 @@ class EngineManager {
     this._updateActiveSectionConfig('mode', updates);
   }
 
+  _calculateGridRatio(axis, newCount) {
+    if (!this.activeData) return [];
+
+    const config = this.activeData?.config;
+    if (!config) return [];
+
+    const oldCount = axis === 'row' ? config.gridRows || 1 : config.gridColumns || 1;
+
+    const ratioKey = axis == 'row' ? 'gridRowRatio' : 'gridColumnRatio';
+    const oldRatio = config[ratioKey];
+    const oldWeight = Array.isArray(oldRatio) && oldRatio.length === oldCount ? oldRatio : Array(oldCount).fill(1);
+    if (newCount === oldCount) return [...oldWeight];
+
+    // 기존 대비 증가 - 새로 추가되는 행/열(oldCount+1 ~ newCount) 각각에 대해 점유 여부를 확인하고 weight 계산
+    if (oldCount < newCount) {
+      // 현재 섹션 데이터
+      const sectionData = this.state.elements.filter((el) => el.section === this.state.activeSection);
+
+      const sectionEl = document.getElementById(`${this.state.activeSection}Layout`); // 예: 'section2Layout'
+      if (!sectionEl) {
+        console.warn(`[EngineManager] 요소를 찾을 수 없습니다.`);
+        return [...oldWeight, ...Array(newCount - oldCount).fill(1)];
+      }
+
+      const sectionRect = sectionEl.getBoundingClientRect();
+      const style = getComputedStyle(sectionEl);
+      const paddingY = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+      const paddingX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+
+      const totalPx = axis === 'row' ? sectionRect.height - paddingY : sectionRect.width - paddingX;
+
+      const newWeights = [];
+      for (let newIndex = oldCount + 1; newIndex <= newCount; newIndex++) {
+        const occupyingElement =
+          axis === 'row'
+            ? sectionData.find((el) => el.position.row <= newIndex && newIndex <= el.position.row + el.size.rowSpan - 1)
+            : sectionData.find((el) => el.position.col <= newIndex && newIndex <= el.position.col + el.size.colSpan - 1);
+
+        // 데이터 있으면
+        if (occupyingElement) {
+          const sizePx = axis === 'row' ? occupyingElement.size.h : occupyingElement.size.w;
+          newWeights.push(sizePx / totalPx);
+        } else {
+          newWeights.push(20 / totalPx);
+        }
+      }
+
+      return [...oldWeight, ...newWeights];
+    }
+
+    // 기존 대비 감소 - 마지막 행/열 제거, 남은 항목의 비율은 유지한 채 합계가 newCount가 되도록 재스케일
+    if (oldCount > newCount) {
+      const keptWeight = oldWeight.slice(0, newCount);
+      const keptSum = keptWeight.reduce((sum, w) => sum + w, 0);
+
+      // 남은 항목이 전부 0이면 비율을 유지할 수 없어 균등값(1)으로 폴백
+      if (keptSum === 0) {
+        return Array(newCount).fill(1);
+      }
+
+      const scale = newCount / keptSum;
+      return keptWeight.map((w) => w * scale);
+    }
+
+    return [];
+  }
+
   /** sectionConfig 변경
    * @param {string} type - config 타입 (column, row, gap, guideLine)
    * @param {number|boolean} config - 새로운 설정 값
@@ -541,10 +609,12 @@ class EngineManager {
 
       if (type === 'column') {
         // gridColumns 변경되면 gridColumnRatio 초기화
-        newConfig = { gridColumns: value, gridColumnRatio: [] };
+        // newConfig = { gridColumns: value, gridColumnRatio: [] };
+        newConfig = { gridColumns: value, gridColumnRatio: this._calculateGridRatio(type, value) };
       } else if (type === 'row') {
         // gridRows 변경되면 gridRowRatio 초기화
-        newConfig = { gridRows: value, gridRowRatio: [] };
+        // newConfig = { gridRows: value, gridRowRatio: [] };
+        newConfig = { gridRows: value, gridRowRatio: this._calculateGridRatio(type, value) };
       } else if (type === 'gap') {
         newConfig = { gridGap: value };
       }

package/src/library/DisplayLibrary.js

@@ -6,6 +6,7 @@ function useDisplay(api) {
     activeDesign: null,
     displayMode: 'desktop',
     displaySize: null,
+    canvasSize: null,
   });
 
   const _subscriptions = [];
@@ -40,6 +41,7 @@ function useDisplay(api) {
     _subscribe('layout:setLayoutName', ({ $screenConfig }) => {
       state.displayMode = $screenConfig.displayMode;
       state.displaySize = { ...$screenConfig.displaySize };
+      state.canvasSize = { ...$screenConfig.canvasSize };
     });
 
     // activeMenu 변경 감지
@@ -61,7 +63,7 @@ function useDisplay(api) {
     });
 
     _subscribe('system:restoredState', ({ domain, state: snapShot }) => {
-      if (domain === 'all'|| domain === 'draft') {
+      if (domain === 'all' || domain === 'draft') {
         state.displayMode = snapShot.display.displayMode;
         state.displaySize = { ...snapShot.display.displaySize };
       }