polarvo-layout 1.0.87 → 1.0.89

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -11,7 +11,7 @@
       <PolarLayout
         :id="preview ? `${key}Preview` : `${key}Layout`"
         :mode="section.mode"
-        :style="getSectionStyle(section)"
+        :style="getSectionStyle(key, section)"
         :class="[getSectionClass(key, section), activeSection === key && preview ? 'text-blue-400 bg-blue-50' : 'text-gray-400']"
         @click.stop="emit('click:section', key)"
       >
@@ -19,7 +19,14 @@
           {{ key }}
         </div>
         <template v-if="section.mode === 'grid'">
-          <GridLayout :polarvo="polarvo" :preview="preview" :sectionKey="key" :sectionData="section" :elementIds="section.elementIds" />
+          <GridLayout
+            :polarvo="polarvo"
+            :preview="preview"
+            :sectionKey="key"
+            :sectionData="section"
+            :elementIds="section.elementIds"
+            :extraHeight="getSectionExtraHeight(section)"
+          />
         </template>
 
         <template v-else>
@@ -37,11 +44,12 @@
 </template>
 
 <script setup>
-import { toRefs, computed, onMounted, onUnmounted, ref, inject } from 'vue';
+import { toRefs, computed, onMounted, onUnmounted, ref, inject, unref } from 'vue';
 
 import PolarLayout from './PolarLayout.vue';
 import FreeLayout from './FreeLayout.vue';
 import GridLayout from './GridLayout.vue';
+import { getGridRowMinPx, toGridTrackSizes, toGridRowSizes, isInLastLayoutRow } from '../../utils/grid-track.js';
 
 // 우클릭 방지
 // window.oncontextmenu = () => {
@@ -69,29 +77,53 @@ const layoutType = computed(() => {
 });
 const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
 const { activeDesign } = toRefs(props.polarvo.display.state);
+const { elements: gridElements } = toRefs(props.polarvo.gridDrop.state);
 const selectedElement = inject('selectedElement');
 const activeEditMode = inject('activeEditMode');
 const activeLeaf = inject('activeLeaf');
+const canvasExtraHeight = inject('canvasExtraHeight', 0); // CanvasContainer 확장 높이 (미리보기는 0)
+
+const extraHeight = computed(() => (props.preview ? 0 : (unref(canvasExtraHeight) ?? 0)));
+
+// 확장 높이는 마지막 행 섹션만 가져감
+const getSectionExtraHeight = (section) => (isInLastLayoutRow(section, gridRatio.value?.row?.length) ? extraHeight.value : 0);
 
 const getBaseStyle = computed(() => {
   return {
     gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}fr`).join(' '),
-    gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}fr`).join(' '),
+    // 확장 높이는 마지막 행만 가져감 (min은 기존 fr과 동일하게 auto - 섹션 콘텐츠 최소 높이 유지)
+    gridTemplateRows: gridRatio.value?.row
+      ? toGridRowSizes(
+          gridRatio.value.row,
+          gridRatio.value.row.map(() => 'auto'),
+          gapSize.value ?? 0,
+          extraHeight.value,
+        )
+      : undefined,
     marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
     gap: `${gapSize.value}px`,
   };
 });
 
-const getSectionStyle = (section) => ({
-  '--grid-columns': section.config?.gridColumns ?? 3,
-  '--grid-rows': section.config?.gridRows ?? 3,
-  '--grid-gap': `${section.config?.gridGap ?? 5}px`,
-  '--grid-row-sizes': section.config?.gridRowRatio?.length ? section.config.gridRowRatio.map((r) => `${r}fr`).join(' ') : undefined, // 비어있으면 아예 안 넣어서 CSS 기본값으로 폴백
-  '--grid-column-sizes': section.config?.gridColumnRatio?.length
-    ? section.config.gridColumnRatio.map((r) => `${r}fr`).join(' ')
-    : undefined,
-  position: 'relative',
-});
+const getSectionStyle = (key, section) => {
+  const gridRows = section.config?.gridRows ?? 3;
+  const rowRatio = section.config?.gridRowRatio?.length ? section.config.gridRowRatio : Array(gridRows).fill(1);
+  const sectionElements = gridElements.value.filter((el) => el.section === key && section.elementIds?.includes(el.id));
+
+  return {
+    '--grid-columns': section.config?.gridColumns ?? 3,
+    '--grid-rows': gridRows,
+    '--grid-gap': `${section.config?.gridGap ?? 5}px`,
+    '--grid-row-sizes': toGridRowSizes(
+      rowRatio,
+      getGridRowMinPx(sectionElements, gridRows),
+      section.config?.gridGap ?? 5,
+      getSectionExtraHeight(section),
+    ),
+    '--grid-column-sizes': section.config?.gridColumnRatio?.length ? toGridTrackSizes(section.config.gridColumnRatio) : undefined, // 비어있으면 아예 안 넣어서 CSS 기본값으로 폴백
+    position: 'relative',
+  };
+};
 
 const getSectionClass = (key, section) => ({
   [key]: true,

package/src/components/Layout/CanvasContainer.vue

@@ -24,8 +24,9 @@
 </template>
 
 <script setup>
-import { toRefs, ref, computed, watch } from 'vue';
+import { toRefs, ref, computed, watch, provide, onMounted } from 'vue';
 import BaseLayout from './BaseLayout.vue';
+import { isInLastLayoutRow, getGridLastRowRequiredPx } from '../../utils/grid-track.js';
 
 const props = defineProps({
   polarvo: {
@@ -43,7 +44,9 @@ const DEFAULT_DISPLAY_SIZE = {
 
 // height 관련 여유 공간 추가하여 계산함 (50, 200)
 const { displaySize, canvasSize } = toRefs(props.polarvo.display.state);
-const { elements, activeMode } = toRefs(props.polarvo.layout.state);
+const { elements, activeMode, layoutData, gridRatio } = toRefs(props.polarvo.layout.state);
+const { elements: gridElements } = toRefs(props.polarvo.gridDrop.state);
+const { elements: freeElements } = toRefs(props.polarvo.freeDrop.state);
 
 const defaultHeight = computed(() => {
   const freeElementsBottom =
@@ -134,14 +137,59 @@ const containerStyle = computed(() => {
 
 defineExpose({ defaultHeight, additionalHeight, displayHeight });
 
+// 확장 높이는 BaseLayout/GridLayout에서 마지막 행에만 붙임
+provide('canvasExtraHeight', additionalHeight);
+
+const RESIZE_STEP = 200;
+const MIN_ROW_PX = 20; // GridLayout.vue의 MIN_ROW_PX와 동일한 값
+
 function expandContainer() {
-  additionalHeight.value += 200;
+  additionalHeight.value += RESIZE_STEP;
+}
+
+// 확장 높이를 받는 마지막 행 섹션들이 요소 최소 크기를 유지하면서 줄어들 수 있는 높이(px)
+// 확장 높이는 마지막 행만 가져가므로 마지막 행 섹션의 여유분이 곧 줄일 수 있는 최대치
+function getShrinkableHeight() {
+  let slack = additionalHeight.value;
+
+  Object.entries(layoutData.value ?? {}).forEach(([key, section]) => {
+    if (!isInLastLayoutRow(section, gridRatio.value?.row?.length)) return;
+    const sectionEl = document.getElementById(`${key}Layout`);
+    if (!sectionEl) return;
+
+    const modeElements = (section.mode === 'grid' ? gridElements.value : freeElements.value) ?? [];
+    const sectionElements = modeElements.filter((el) => el.section === key && section.elementIds?.includes(el.id));
+
+    if (section.mode === 'grid') {
+      const gridRows = section.config?.gridRows ?? 3;
+      const trackPx = getComputedStyle(sectionEl)
+        .gridTemplateRows.split(' ')
+        .map((v) => parseFloat(v));
+      const lastTrackPx = trackPx[gridRows - 1] ?? 0;
+      const required = getGridLastRowRequiredPx(sectionElements, gridRows, trackPx, section.config?.gridGap ?? 5, MIN_ROW_PX);
+      slack = Math.min(slack, lastTrackPx - required);
+    } else {
+      const bottom = sectionElements.reduce((max, el) => Math.max(max, (el.position?.y || 0) + (el.size?.h || 0)), 0);
+      slack = Math.min(slack, sectionEl.clientHeight - bottom);
+    }
+  });
+
+  return Math.max(0, Math.floor(slack));
 }
 
-// displayHeight(=defaultHeight + additionalHeight)는 항상 defaultHeight 이상으로 유지
-const canShrink = computed(() => additionalHeight.value > 0);
+// 요소 크기/배치·레이아웃·확장 높이가 바뀔 때마다 DOM 반영 후 다시 계산
+const shrinkableHeight = ref(0);
+const updateShrinkableHeight = () => {
+  shrinkableHeight.value = getShrinkableHeight();
+};
+watch([displayHeight, gridElements, freeElements, layoutData, gridRatio], updateShrinkableHeight, { deep: true, flush: 'post' });
+onMounted(updateShrinkableHeight);
+
+// displayHeight(=defaultHeight + additionalHeight)는 항상 defaultHeight 이상, 마지막 행 요소 최소 크기 이상으로 유지
+const canShrink = computed(() => shrinkableHeight.value > 0);
 function shrinkContainer() {
-  additionalHeight.value = Math.max(0, additionalHeight.value - 200);
+  const shrinkable = getShrinkableHeight();
+  additionalHeight.value -= Math.min(RESIZE_STEP, shrinkable);
 }
 </script>
 

package/src/components/Layout/GridLayout.vue

@@ -74,6 +74,7 @@
 
 <script setup>
 import GridItem from './GridItem.vue';
+import { getGridRowMinPx, toGridTrackSizes, toGridRowSizes } from '../../utils/grid-track.js';
 
 import { ref, toRefs, getCurrentInstance, onMounted, onUnmounted, inject, watch, computed } from 'vue';
 
@@ -98,6 +99,11 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  // 캔버스 확장 높이 - 마지막 행이 추가로 가져가는 px (BaseLayout에서 마지막 행 섹션에만 전달)
+  extraHeight: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const { setActiveDesign, setActiveMenu } = props.polarvo.display;
@@ -133,6 +139,11 @@ const DRAG_CONFIG = {
     clientKey: 'clientY',
     positionKey: 'y',
     cssVar: '--grid-row-sizes',
+    posKey: 'row',
+    spanKey: 'rowSpan',
+    getMinPx: (el) => el.size?.h ?? MIN_ROW_PX, // GridDropEngine.getElementStyle의 minHeight와 동일
+    extraPx: () => props.extraHeight, // 마지막 행에 붙은 확장 높이 (비율 계산에서 제외)
+    toSizes: (ratio) => toGridRowSizes(ratio, getGridRowMinPx(filteredElements.value, ratio.length), gridGap.value, props.extraHeight), // BaseLayout과 동일한 형식
   },
   col: {
     ref: gridColumns,
@@ -142,6 +153,11 @@ const DRAG_CONFIG = {
     clientKey: 'clientX',
     positionKey: 'x',
     cssVar: '--grid-column-sizes',
+    posKey: 'col',
+    spanKey: 'colSpan',
+    getMinPx: () => MIN_COL_PX,
+    extraPx: () => 0,
+    toSizes: (ratio) => toGridTrackSizes(ratio), // BaseLayout과 동일한 형식
   },
 };
 
@@ -157,7 +173,8 @@ function handleMouseDown(event, axis, index) {
   event.preventDefault();
   event.stopPropagation();
 
-  const { ref, minPx, ratioKey, gridTemplateKey, clientKey, positionKey, cssVar } = DRAG_CONFIG[axis];
+  const { ref, minPx, ratioKey, gridTemplateKey, clientKey, positionKey, cssVar, posKey, spanKey, getMinPx, extraPx, toSizes } =
+    DRAG_CONFIG[axis];
 
   dragState.value.axis = axis;
   dragState.value.activeIdx = index;
@@ -207,7 +224,7 @@ function handleMouseDown(event, axis, index) {
 
     const configured = props.sectionData?.config?.[ratioKey];
     const baselineRatio =
-      (Array.isArray(configured) && configured.length === ref.value) || configured.some((v) => typeof v !== 'number' || !(v > 0))
+      Array.isArray(configured) && configured.length === ref.value && configured.every((v) => typeof v === 'number' && v > 0)
         ? [...configured]
         : Array(ref.value).fill(1);
 
@@ -215,24 +232,58 @@ function handleMouseDown(event, axis, index) {
       [gridTemplateKey].split(' ')
       .map((v) => parseFloat(v));
 
-    // 총 Fr 계산
-    const totalFr = baselineRatio.reduce((sum, v) => sum + v, 0);
-    // 총 px 계산
-    const totalPx = trackPx.reduce((sum, v) => sum + v, 0);
-    // 1px당 Fr 계산
-    const frPerPx = totalFr / totalPx;
+    const prevIdx = index - 1; // 드래그 행 위쪽 행 인덱스
+    const nextIdx = index; // 드래그 행 인덱스
+
+    // 1px당 Fr 계산 - 드래그로 바뀌는 두 트랙 기준
+    // 마지막 트랙의 확장 높이는 비율과 무관하게 붙는 값이라 제외
+    const ratioPx = [...trackPx];
+    ratioPx[ratioPx.length - 1] -= extraPx();
+    const frPerPx = (baselineRatio[prevIdx] + baselineRatio[nextIdx]) / (ratioPx[prevIdx] + ratioPx[nextIdx]);
+
+    // 요소 최소 크기 때문에 두 트랙이 가져야 하는 최소 px
+    const { prevMinPx, nextMinPx } = _getElementMinPx(trackPx, prevIdx, nextIdx);
 
     dragSnapShot = {
       container,
       baselineRatio,
       frPerPx,
-      minFr: minPx * frPerPx, // 최소 Fr 계산
+      prevMinFr: Math.max(minPx, prevMinPx) * frPerPx,
+      // 마지막 트랙은 확장 높이가 이미 확보돼 있으므로 그만큼 비율 최소값에서 뺌
+      nextMinFr: Math.max(minPx, nextMinPx - (trackPx[nextIdx] - ratioPx[nextIdx])) * frPerPx,
     };
 
     document.addEventListener('mousemove', _startDragMove);
     document.addEventListener('mouseup', _stopDrag);
   }
 
+  // 드래그로 바뀌는 트랙(prev/next) 중 하나에만 걸친 요소 기준으로, 각 트랙이 가져야 하는 최소 px 계산
+  // (두 트랙 모두에 걸친 요소는 합이 그대로라 제약 없음)
+  function _getElementMinPx(trackPx, prevIdx, nextIdx) {
+    const gap = gridGap.value;
+    let prevMinPx = 0;
+    let nextMinPx = 0;
+
+    filteredElements.value.forEach((el) => {
+      const start = el.position[posKey] - 1; // 0-based 트랙 인덱스
+      const end = start + el.size[spanKey] - 1;
+      const coversPrev = start <= prevIdx && prevIdx <= end;
+      const coversNext = start <= nextIdx && nextIdx <= end;
+      if (coversPrev === coversNext) return;
+
+      const targetIdx = coversPrev ? prevIdx : nextIdx;
+      // 요소가 걸친 나머지 트랙 + gap 만큼은 이미 확보되어 있음
+      let otherPx = gap * (end - start);
+      for (let t = start; t <= end; t++) if (t !== targetIdx) otherPx += trackPx[t];
+
+      const required = getMinPx(el) - otherPx;
+      if (coversPrev) prevMinPx = Math.max(prevMinPx, required);
+      else nextMinPx = Math.max(nextMinPx, required);
+    });
+
+    return { prevMinPx, nextMinPx };
+  }
+
   function _startDragMove(e) {
     if (!dragSnapShot) return;
     pendingClient = e[clientKey];
@@ -243,16 +294,16 @@ function handleMouseDown(event, axis, index) {
     rafId = requestAnimationFrame(() => {
       rafId = null;
 
-      const { baselineRatio, frPerPx, minFr, container } = dragSnapShot;
+      const { baselineRatio, frPerPx, prevMinFr, nextMinFr, container } = dragSnapShot;
       const prevIdx = index - 1; // 드래그 행 위쪽 행 인덱스
       const nextIdx = index; // 드래그 행 인덱스
 
       // 순수 이동량
       let delta = (pendingClient - startPos.value[positionKey]) * frPerPx;
-      // 위쪽 행 작아지는 것 방지: 가장 커져도 minFr - baselineRatio[prevIdx] (음수값 = 위로 이동)
-      delta = Math.max(minFr - baselineRatio[prevIdx], delta);
-      // 아래쪽 행 작아지는 것 방지: 가장 작아져도 minFr (양수값 = 아래로 이동)
-      delta = Math.min(baselineRatio[nextIdx] - minFr, delta);
+      // 위쪽 행 작아지는 것 방지: 가장 커져도 prevMinFr - baselineRatio[prevIdx] (음수값 = 위로 이동)
+      delta = Math.max(prevMinFr - baselineRatio[prevIdx], delta);
+      // 아래쪽 행 작아지는 것 방지: 가장 작아져도 nextMinFr (양수값 = 아래로 이동)
+      delta = Math.min(baselineRatio[nextIdx] - nextMinFr, delta);
 
       // 미리보기용
       const preview = [...baselineRatio];
@@ -262,7 +313,7 @@ function handleMouseDown(event, axis, index) {
       liveRatio = preview;
 
       // 화면에만 즉시 반영
-      container.style.setProperty(cssVar, preview.map((v) => `${v}fr`).join(' '));
+      container.style.setProperty(cssVar, toSizes(preview));
     });
   }
   function _stopDrag() {

package/src/components/Layout/PolarLayout.vue

@@ -17,9 +17,9 @@ const props = defineProps({
 <style scoped>
 .polar-grid {
   display: grid;
-  grid-template-columns: var(--grid-column-sizes, repeat(var(--grid-columns, 3), 1fr));
+  grid-template-columns: var(--grid-column-sizes, repeat(var(--grid-columns, 3), minmax(0, 1fr)));
   /* grid-template-rows: repeat(var(--grid-rows, 3), 1fr); */
-  grid-template-rows: var(--grid-row-sizes, repeat(var(--grid-rows, 3), 1fr));
+  grid-template-rows: var(--grid-row-sizes, repeat(var(--grid-rows, 3), minmax(0, 1fr)));
   gap: var(--grid-gap, 5px);
   width: 100%;
   height: 100%;

package/src/index.js

@@ -12,7 +12,7 @@ import createPolarvoLayout from './library/index.js';
 // import LayoutFastMenu from './components/FastMenu/LayoutFastMenu.vue';
 // import DesignFastMenu from './components/FastMenu/DesignFastMenu.vue';
 
-import ElementSidebar from './components/SideBar/ElementSidebar.vue';
+// import ElementSidebar from './components/SideBar/ElementSidebar.vue';
 import LayoutSideBar from './components/SideBar/LayoutSideBar.vue';
 
 import LayoutMiniMenu from './components/MiniMenu/LayoutMiniMenu.vue';
@@ -29,7 +29,7 @@ export {
   // ActionFastMenu,
   // LayoutFastMenu,
   // DesignFastMenu,
-  ElementSidebar,
+  // ElementSidebar,
   LayoutSideBar,
   LayoutMiniMenu,
   CanvasContainer,

package/src/utils/grid-track.js

@@ -0,0 +1,52 @@
+// 그리드 행 트랙별 최소 높이(px) - 해당 행 하나만 차지하는 요소의 size.h 중 최대값
+// (여러 행에 걸친 요소는 GridLayout 행 크기 조절 시 별도로 제한)
+export function getGridRowMinPx(elements, gridRows) {
+  const mins = Array(gridRows).fill(0);
+  elements.forEach((el) => {
+    const { row } = el.position;
+    if (el.size.rowSpan !== 1 || row < 1 || row > gridRows) return;
+    mins[row - 1] = Math.max(mins[row - 1], el.size.h ?? 0);
+  });
+  return mins;
+}
+
+// fr 비율 → grid-template 값
+// min을 auto(콘텐츠 크기) 대신 명시값으로 고정 - 콘텐츠 크기가 트랙을 고정하면 남은 공간이 다른 트랙으로 재분배됨
+export function toGridTrackSizes(ratio, minPx = []) {
+  return ratio.map((r, i) => `minmax(${minPx[i] ?? 0}px, ${r}fr)`).join(' ');
+}
+
+// fr 비율 → grid-template-rows 값 (마지막 행만 추가 높이를 가져가도록)
+// 마지막 행을 제외한 행은 (컨테이너 높이 - 추가 높이 - gap 합) 기준 비율로 고정하고, 남는 높이는 마지막 행(1fr)이 전부 가져감
+// → 캔버스 확장(CanvasContainer.additionalHeight) 시 전체 행에 나눠지지 않고 마지막 행만 늘어남
+export function toGridRowSizes(ratio, minPx = [], gap = 0, extraPx = 0) {
+  const sum = ratio.reduce((acc, r) => acc + r, 0) || 1;
+  const fixedPx = extraPx + gap * (ratio.length - 1);
+  const toMin = (i) => (typeof minPx[i] === 'string' ? minPx[i] : `${minPx[i] ?? 0}px`);
+
+  return ratio
+    .map((r, i) => (i === ratio.length - 1 ? `minmax(${toMin(i)}, 1fr)` : `minmax(${toMin(i)}, calc((100% - ${fixedPx}px) * ${r / sum}))`))
+    .join(' ');
+}
+
+// 섹션이 BaseLayout의 마지막 행에 걸쳐 있는지 (layoutPosition.row는 0-based) - 캔버스 추가 높이를 받는 섹션
+export function isInLastLayoutRow(section, layoutRowCount) {
+  const { row = 0, rowSpan = 1 } = section?.layoutPosition ?? {};
+  return row + rowSpan >= (layoutRowCount || 1);
+}
+
+// 그리드 섹션 마지막 행이 가져야 하는 최소 높이(px) - 빈 셀/요소 minHeight(GridDropEngine.getElementStyle) 기준
+// 여러 행에 걸친 요소는 나머지 행(trackPx) + gap 만큼은 이미 확보된 것으로 봄
+export function getGridLastRowRequiredPx(elements, gridRows, trackPx, gap, minRowPx) {
+  let required = minRowPx;
+  elements.forEach((el) => {
+    const { row } = el.position;
+    const { rowSpan } = el.size;
+    if (row + rowSpan - 1 !== gridRows) return;
+
+    let otherPx = gap * (rowSpan - 1);
+    for (let t = row - 1; t < gridRows - 1; t++) otherPx += trackPx[t] ?? 0;
+    required = Math.max(required, (el.size.h ?? minRowPx) - otherPx);
+  });
+  return required;
+}