polarvo-layout 1.0.58 → 1.0.60

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -18,19 +18,11 @@
           {{ key }}
         </div>
         <template v-if="section.mode === 'grid'">
-          <GridLayout
-            :id="`grid-${key}`"
-            :polarvo="polarvo"
-            :preview="preview"
-            :sectionKey="key"
-            :sectionData="section"
-            :elementIds="section.elementIds"
-          />
+          <GridLayout :polarvo="polarvo" :preview="preview" :sectionKey="key" :sectionData="section" :elementIds="section.elementIds" />
         </template>
 
         <template v-else>
           <FreeLayout
-            :id="`free-${key}`"
             :polarvo="polarvo"
             :preview="preview"
             :sectionKey="key"
@@ -91,6 +83,9 @@ const getSectionStyle = (section) => ({
   '--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',
 });
 

package/src/components/Layout/GridLayout.vue

@@ -8,29 +8,61 @@
       :sectionKey="props.sectionKey"
     ></GridItem>
 
+    <!-- 행 크기 조절 -->
     <div
       v-for="r in gridRows - 1"
       :key="`row-handle-${r}`"
       :id="`row-handle-${r}`"
-      class="z-[60] relative self-end justify-self-stretch cursor-s-resize "
+      class="z-[60] relative self-end justify-self-stretch cursor-s-resize"
       :style="{
         gridRow: r,
         gridColumn: '1 / -1',
         height: `${gridGap}px`,
         transform: 'translateY(100%)',
       }"
-      @mousedown="handleMouseDown($event, r)"
+      @mousedown="handleMouseDown($event, 'row', r)"
     >
       <!-- 점선 -->
       <div
-        class="pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 border-t border-dashed border-blue-700 "
-        :class="{ 'opacity-100': rowState.activeRow === r, 'opacity-0': rowState.activeRow !== r }"
+        class="pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 border-t border-dashed border-blue-700"
+        :class="{
+          'opacity-100': dragState.axis === 'row' && dragState.activeIdx === r,
+          'opacity-0': !(dragState.axis === 'row' && dragState.activeIdx === r),
+        }"
+      ></div>
+
+      <!-- 핸들 -->
+      <!-- <div
+        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 cursor-s-resize rounded-full bg-violet-400 opacity-30 hover:opacity-100"
+      ></div> -->
+    </div>
+
+    <!-- 열 크기 조절 -->
+    <div
+      v-for="c in gridColumns - 1"
+      :key="`col-handle-${c}`"
+      :id="`col-handle-${c}`"
+      class="z-[60] relative self-stretch justify-self-end cursor-e-resize"
+      :style="{
+        gridRow: '1 / -1',
+        gridColumn: c,
+        width: `${gridGap}px`,
+        transform: 'translateX(100%)',
+      }"
+      @mousedown="handleMouseDown($event, 'col', c)"
+    >
+      <!-- 점선 -->
+      <div
+        class="pointer-events-none absolute top-0 bottom-0 left-1/2 -translate-x-1/2 border-l border-dashed border-blue-700"
+        :class="{
+          'opacity-100': dragState.axis === 'col' && dragState.activeIdx === c,
+          'opacity-0': !(dragState.axis === 'col' && dragState.activeIdx === c),
+        }"
       ></div>
 
       <!-- 핸들 -->
       <!-- <div
         class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 cursor-s-resize rounded-full bg-violet-400 opacity-30 hover:opacity-100"
-        @mousedown="handleMouseDown($event, r)"
       ></div> -->
     </div>
 
@@ -81,36 +113,62 @@ const gridColumns = ref(3); // 동적으로 계산
 const gridRows = ref(1); // 동적으로 계산
 const gridGap = computed(() => props.sectionData?.config?.gridGap ?? 5); // BaseLayout.vue --grid-gap과 동일한 소스/기본값
 
-// row Resize
+// row, col Resize
 const MIN_ROW_PX = 20; // 행 최소 높이(px)
+const MIN_COL_PX = 20; // 열 최소 너비(px)
+
+const DRAG_CONFIG = {
+  row: {
+    ref: gridRows,
+    minPx: MIN_ROW_PX,
+    ratioKey: 'gridRowRatio',
+    gridTemplateKey: 'gridTemplateRows',
+    clientKey: 'clientY',
+    positionKey: 'y',
+    cssVar: '--grid-row-sizes',
+  },
+  col: {
+    ref: gridColumns,
+    minPx: MIN_COL_PX,
+    ratioKey: 'gridColumnRatio',
+    gridTemplateKey: 'gridTemplateColumns',
+    clientKey: 'clientX',
+    positionKey: 'x',
+    cssVar: '--grid-column-sizes',
+  },
+};
 
-const rowState = ref({
-  activeRow: null,
+const dragState = ref({
+  axis: null, // 'row' | 'col'
+  activeIdx: null,
   isDragging: false,
 });
 const startPos = ref({ x: 0, y: 0 });
 
-function handleMouseDown(event, row) {
-  if (!row) return;
+function handleMouseDown(event, axis, index) {
+  if (!index) return;
   event.preventDefault();
   event.stopPropagation();
 
-  rowState.value.activeRow = row;
+  const { ref, minPx, ratioKey, gridTemplateKey, clientKey, positionKey, cssVar } = DRAG_CONFIG[axis];
+
+  dragState.value.axis = axis;
+  dragState.value.activeIdx = index;
   startPos.value = { x: event.clientX, y: event.clientY };
 
   setActiveMenu(null); // 메뉴 닫기
   setActiveDesign(null); // 디자인 닫기
 
   let dragSnapShot = null; // 드래그 시작 시 스냅샷
-  let liveRowRatio = null; // 미리보기 중 계산된 최종 fr 배열 (stopDrag에서 커밋)
-  let pendingClientY = null;
+  let liveRatio = null; // 미리보기 중 계산된 최종 fr 배열 (stopDrag에서 커밋)
+  let pendingClient = null;
   let rafId = null;
 
   document.addEventListener('mousemove', _detectDragIntent);
   document.addEventListener('mouseup', _cancelDragIntent);
 
   function _detectDragIntent(e) {
-    if (rowState.value.activeRow !== row) return;
+    if (dragState.value.axis !== axis || dragState.value.activeIdx !== index) return;
     const deltaX = Math.abs(e.clientX - startPos.value.x);
     const deltaY = Math.abs(e.clientY - startPos.value.y);
 
@@ -127,26 +185,27 @@ function handleMouseDown(event, row) {
   }
 
   function _cancelDragIntent() {
-    rowState.value.activeRow = null;
+    dragState.value.axis = null;
+    dragState.value.activeIdx = null;
 
     document.removeEventListener('mousemove', _detectDragIntent);
     document.removeEventListener('mouseup', _cancelDragIntent);
   }
 
   function _startDrag() {
-    rowState.value.isDragging = true;
+    dragState.value.isDragging = true;
 
     const container = document.getElementById(`${props.sectionKey}Layout`);
     if (!container) return _stopDrag();
 
-    const configured = props.sectionData?.config?.gridRowRatio;
+    const configured = props.sectionData?.config?.[ratioKey];
     const baselineRatio =
-      (Array.isArray(configured) && configured.length === gridRows.value) || configured.some((v) => typeof v !== 'number' || !(v > 0))
+      (Array.isArray(configured) && configured.length === ref.value) || configured.some((v) => typeof v !== 'number' || !(v > 0))
         ? [...configured]
-        : Array(gridRows.value).fill(1);
+        : Array(ref.value).fill(1);
 
     const trackPx = getComputedStyle(container)
-      .gridTemplateRows.split(' ')
+      [gridTemplateKey].split(' ')
       .map((v) => parseFloat(v));
 
     // 총 Fr 계산
@@ -160,7 +219,7 @@ function handleMouseDown(event, row) {
       container,
       baselineRatio,
       frPerPx,
-      minFr: MIN_ROW_PX * frPerPx, // 최소 Fr 계산
+      minFr: minPx * frPerPx, // 최소 Fr 계산
     };
 
     document.addEventListener('mousemove', _startDragMove);
@@ -169,7 +228,7 @@ function handleMouseDown(event, row) {
 
   function _startDragMove(e) {
     if (!dragSnapShot) return;
-    pendingClientY = e.clientY;
+    pendingClient = e[clientKey];
 
     // rafId 중복 예약 방지
     if (rafId) return;
@@ -178,39 +237,40 @@ function handleMouseDown(event, row) {
       rafId = null;
 
       const { baselineRatio, frPerPx, minFr, container } = dragSnapShot;
-      const topIdx = row - 1; // 드래그 행 위쪽 행 인덱스
-      const bottomIdx = row; // 드래그 행 인덱스
+      const prevIdx = index - 1; // 드래그 행 위쪽 행 인덱스
+      const nextIdx = index; // 드래그 행 인덱스
 
       // 순수 이동량
-      let delta = (pendingClientY - startPos.value.y) * frPerPx;
-      // 위쪽 행 작아지는 것 방지: 가장 커져도 minFr - baselineRatio[topIdx] (음수값 = 위로 이동)
-      delta = Math.max(minFr - baselineRatio[topIdx], delta);
+      let delta = (pendingClient - startPos.value[positionKey]) * frPerPx;
+      // 위쪽 행 작아지는 것 방지: 가장 커져도 minFr - baselineRatio[prevIdx] (음수값 = 위로 이동)
+      delta = Math.max(minFr - baselineRatio[prevIdx], delta);
       // 아래쪽 행 작아지는 것 방지: 가장 작아져도 minFr (양수값 = 아래로 이동)
-      delta = Math.min(baselineRatio[bottomIdx] - minFr, delta);
+      delta = Math.min(baselineRatio[nextIdx] - minFr, delta);
 
       // 미리보기용
       const preview = [...baselineRatio];
-      preview[topIdx] += delta;
-      preview[bottomIdx] -= delta;
+      preview[prevIdx] += delta;
+      preview[nextIdx] -= delta;
 
-      liveRowRatio = preview;
+      liveRatio = preview;
 
       // 화면에만 즉시 반영
-      container.style.setProperty('--grid-row-sizes', preview.map((v) => `${v}fr`).join(' '));
+      container.style.setProperty(cssVar, preview.map((v) => `${v}fr`).join(' '));
     });
   }
   function _stopDrag() {
-    rowState.value.isDragging = false;
-    rowState.value.activeRow = null;
+    dragState.value.isDragging = false;
+    dragState.value.axis = null;
+    dragState.value.activeIdx = null;
 
-    if (liveRowRatio) {
-      setSectionConfig('gridRowRatio', liveRowRatio);
+    if (liveRatio) {
+      setSectionConfig(ratioKey, liveRatio);
     }
 
     startPos.value = { x: 0, y: 0 };
     dragSnapShot = null;
-    liveRowRatio = null;
-    pendingClientY = null;
+    liveRatio = null;
+    pendingClient = null;
     rafId = null;
 
     document.removeEventListener('mousemove', _startDragMove);

package/src/components/Layout/PolarLayout.vue

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

package/src/core/managers/EngineManager.js

@@ -156,14 +156,14 @@ class EngineManager {
    * @param {string} type - 설정 타입 (mode, config)
    * @param {object} updates - 업데이트할 설정 값 객체
    */
-  _updateActiveSectionConfig(type, updates) {
-    if (!this.state.layoutData || !this.state.activeSection) {
+  _updateActiveSectionConfig(type, updates, section = this.state.activeSection) {
+    if (!this.state.layoutData || !section) {
       console.error('[EngineManager] activeData를 업데이트할 수 없습니다.');
       return;
     }
 
     this.eventBus.emit('system:updateActiveSectionConfig', {
-      $section: this.state.activeSection,
+      $section: section,
       changes: { type: type, ...updates },
       timestamp: Date.now(),
     });
@@ -460,7 +460,7 @@ class EngineManager {
    * @param {number|boolean} config - 새로운 설정 값
    */
   setSectionConfig(type, config) {
-    if (!['column', 'row', 'gap', 'guideLine', 'gridRowRatio'].includes(type)) {
+    if (!['column', 'row', 'gap', 'guideLine', 'gridRowRatio', 'gridColumnRatio'].includes(type)) {
       return { result: false, message: '입력할 수 없는 config 타입입니다.' };
     }
 
@@ -486,6 +486,14 @@ class EngineManager {
       }
 
       newConfig = { gridRowRatio: value };
+    } else if (type === 'gridColumnRatio') {
+      // gridColumnRatio 배열은 gridColumns 길이와 일치해야 함
+      const gridColumns = this.activeData.config?.gridColumns || 1;
+      if (!Array.isArray(value) || value.length !== gridColumns || value.some((v) => typeof v !== 'number' || !(v > 0))) {
+        return { result: false, message: '잘못된 열 비율 값입니다.' };
+      }
+
+      newConfig = { gridColumnRatio: value };
     } else {
       const limit = CONFIG_LIMITS[type];
 
@@ -500,7 +508,8 @@ class EngineManager {
       value = Math.min(Math.max(limit.min, value), limit.max);
 
       if (type === 'column') {
-        newConfig = { gridColumns: value };
+        // gridColumns 변경되면 gridColumnRatio 초기화
+        newConfig = { gridColumns: value, gridColumnRatio: [] };
       } else if (type === 'row') {
         // gridRows 변경되면 gridRowRatio 초기화
         newConfig = { gridRows: value, gridRowRatio: [] };
@@ -525,7 +534,8 @@ class EngineManager {
       }
 
       this.state.elements.push(element);
-      this._updateActiveSectionConfig('elementIds', { elementIds: [...(this.activeData?.elementIds || []), element.id] });
+      const targetSectionData = this.state.layoutData?.[element.section];
+      this._updateActiveSectionConfig('elementIds', { elementIds: [...(targetSectionData?.elementIds || []), element.id] }, element.section);
 
       this.eventBus.emit('system:requestUpdateElement', {
         action: 'add',
@@ -542,10 +552,12 @@ class EngineManager {
 
     // 배치요소 삭제 요청
     this._subscribe('freeDrop:requestDeleteElement', ({ elementId }) => {
+      const target = this.state.elements.find((el) => el.id === elementId);
       this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
+      const targetSectionData = this.state.layoutData?.[target?.section];
       this._updateActiveSectionConfig('elementIds', {
-        elementIds: (this.activeData?.elementIds || []).filter((elId) => elId !== elementId),
-      });
+        elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
+      }, target?.section);
       // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
       this.eventBus.emit('system:requestUpdateElement', {
@@ -557,11 +569,7 @@ class EngineManager {
 
       this.eventBus.emit('system:historyCheckpoint', {
         domain: 'manager',
-        state: {
-          manager: this.getState() || null,
-          layout: this.getEngine('layout')?.getState() || null,
-          display: this.getEngine('display')?.getState() || null,
-        },
+        state: this.getState(),
       });
     });
 
@@ -600,7 +608,8 @@ class EngineManager {
       }
 
       this.state.elements.push(element);
-      this._updateActiveSectionConfig('elementIds', { elementIds: [...(this.activeData?.elementIds || []), element.id] });
+      const targetSectionData = this.state.layoutData?.[element.section];
+      this._updateActiveSectionConfig('elementIds', { elementIds: [...(targetSectionData?.elementIds || []), element.id] }, element.section);
       // this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
 
       this.eventBus.emit('system:requestUpdateElement', {
@@ -618,10 +627,12 @@ class EngineManager {
 
     // 배치요소 삭제 요청
     this._subscribe('gridDrop:requestDeleteElement', ({ elementId }) => {
+      const target = this.state.elements.find((el) => el.id === elementId);
       this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
+      const targetSectionData = this.state.layoutData?.[target?.section];
       this._updateActiveSectionConfig('elementIds', {
-        elementIds: (this.activeData?.elementIds || []).filter((elId) => elId !== elementId),
-      });
+        elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
+      }, target?.section);
       // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
       this.eventBus.emit('system:requestUpdateElement', {

package/src/library/LayoutLibrary.js

@@ -120,11 +120,11 @@ function useLayout(api) {
 
     _subscribe('system:restoredState', ({ domain, state: snapShot }) => {
       if (domain === 'all'|| domain === 'draft') {
-        state.elements = snapShot.manager.elements;
+        state.elements = cloneDeep(snapShot.manager.elements);
         // state.layoutData = snapShot.manager.layoutData
 
         state.layoutName = snapShot.layout.layoutName;
-        state.layoutData = snapShot.layout.layoutData;
+        state.layoutData = cloneDeep(snapShot.layout.layoutData);
         state.gridNumber = { ...snapShot.layout.gridNumber };
         state.gridRatio = {
           column: [...snapShot.layout.gridRatio.column],
@@ -134,13 +134,13 @@ function useLayout(api) {
       }
 
       if (domain === 'manager') {
-        state.elements = snapShot.elements;
-        state.layoutData = snapShot.layoutData;
+        state.elements = cloneDeep(snapShot.elements);
+        state.layoutData = cloneDeep(snapShot.layoutData);
       }
 
       if (domain === 'layout') {
         state.layoutName = snapShot.layoutName;
-        state.layoutData = snapShot.layoutData;
+        state.layoutData = cloneDeep(snapShot.layoutData);
         state.gridNumber = { ...snapShot.gridNumber };
         state.gridRatio = {
           column: [...snapShot.gridRatio.column],