polarvo-layout 1.0.26 → 1.0.27

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -68,9 +68,9 @@ const props = defineProps({
 });
 
 const layoutType = computed(() => {
-  if (layoutName.value.eng === null) return 'no-split';
-  return layoutName.value.eng
-    .replace(/([A-Z])/g, '-$1')
+  if (layoutName.value?.eng === null) return 'no-split';
+  return layoutName.value?.eng
+    ?.replace(/([A-Z])/g, '-$1')
     .toLowerCase()
     .substring(1);
 });
@@ -88,6 +88,7 @@ const getBaseStyle = computed(() => {
 
 const getSectionStyle = (section) => ({
   '--grid-columns': section.config?.gridColumns ?? 3,
+  '--grid-rows': section.config?.gridRows ?? 3,
   '--grid-gap': `${section.config?.gridGap ?? 5}px`,
   position: 'relative',
 });

package/src/components/Layout/CanvasContainer.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import { toRefs, ref, computed, watch, provide } from 'vue';
+import { toRefs, ref, computed, watch } from 'vue';
 import BaseLayout from './BaseLayout.vue';
 
 const props = defineProps({
@@ -36,7 +36,7 @@ const { elements } = toRefs(props.polarvo.layout.state);
 const defaultHeight = computed(() => {
   return (
     elements.value?.reduce((max, el) => {
-      const bottom = (el.position?.y || 0) + (el.size?.h || 0) ;
+      const bottom = (el.position?.y || 0) + (el.size?.h || 0);
       return Math.max(max, bottom);
     }, 750) || 750
   );
@@ -66,13 +66,13 @@ const containerStyle = computed(() => {
       margin: '0 auto',
       transform: `scale(${DEFAULT_DISPLAY_SIZE.percent / 100})`,
       transformOrigin: 'top center',
-    backgroundImage: `
+      backgroundImage: `
       linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
       linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)
     `,
-    backgroundSize: `${DEFAULT_DISPLAY_SIZE.gridSize}px ${DEFAULT_DISPLAY_SIZE.gridSize}px`,
+      backgroundSize: `${DEFAULT_DISPLAY_SIZE.gridSize}px ${DEFAULT_DISPLAY_SIZE.gridSize}px`,
+    };
   }
-}
 
   return {
     aspectRatio: displaySize.value.aspectRatio,
@@ -87,8 +87,6 @@ const containerStyle = computed(() => {
     `,
     backgroundSize: `${displaySize.value.gridSize}px ${displaySize.value.gridSize}px`,
   };
-
-
 });
 
 // 전체 elements

package/src/components/Layout/FreeLayout.vue

@@ -61,7 +61,7 @@ const { setActiveDesign } = props.polarvo.display;
 const { updateActiveElement } = props.polarvo.layout;
 const { elements, guides, activeElement } = toRefs(props.polarvo.freeDrop.state);
 const filteredElements = computed(() => {
-  return elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey);
+  return elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey) ?? [];
 });
 
 const selectedElement = inject('selectedElement');

package/src/components/Layout/GridLayout.vue

@@ -16,7 +16,7 @@
 <script setup>
 import GridItem from './GridItem.vue';
 
-import { toRefs, getCurrentInstance, onMounted, onUnmounted, inject, watch, computed } from 'vue';
+import { ref, toRefs, getCurrentInstance, onMounted, onUnmounted, inject, watch, computed } from 'vue';
 
 const props = defineProps({
   polarvo: {
@@ -46,16 +46,45 @@ const { updateActiveElement } = props.polarvo.layout;
 const { elements, activeId, activeCell, activeElement } = toRefs(props.polarvo.gridDrop.state);
 const { getElementStyle, setActiveElement, toggleLock, handleMouseDown, detectHoverCell, startResize } = props.polarvo.gridDrop;
 
-const mergedData = computed(() => {
-  const { gridColumns, gridRows } = props.sectionData?.config ?? { gridColumns: 3, gridRows: 3 };
-  const grid = Array.from({ length: gridRows + 1 }, () => Array(gridColumns + 1).fill(false));
+const selectedElement = inject('selectedElement');
+const activeEditMode = inject('activeEditMode');
+
+import { omit, cloneDeep, debounce } from 'lodash-es';
+
+const gridColumns = ref(3); // 동적으로 계산
+const gridRows = ref(1); // 동적으로 계산
+
+function initData() {
+  gridColumns.value = props.sectionData?.config?.gridColumns || 3;
+  gridRows.value = props.sectionData?.config?.gridRows || 1;
 
-  const filled = elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey);
+  setMergedData();
+}
 
-  filled.forEach(({ position: { col, row }, size: { colSpan, rowSpan } }) => {
+const mergedData = ref([]); // 필드 데이터 + 빈 데이터 통합 리스트
+const filteredElements = computed(() => {
+  return elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey) ?? [];
+});
+watch(
+  () => filteredElements.value,
+  () => {
+    debouncedUpdate();
+  },
+  { deep: true },
+);
+const debouncedUpdate = debounce(() => {
+  setMergedData();
+  // gridRows 업데이트
+}, 10);
+
+function setMergedData() {
+  const grid = Array.from({ length: gridRows.value + 1 }, () => Array(gridColumns.value + 1).fill(false));
+  // const filled = elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey);
+
+  filteredElements.value.forEach(({ position: { col, row }, size: { colSpan, rowSpan } }) => {
     for (let r = row; r < row + rowSpan; r++) {
       for (let c = col; c < col + colSpan; c++) {
-        if (r >= 1 && c >= 1 && r <= gridRows && c <= gridColumns) {
+        if (r >= 1 && c >= 1 && r <= gridRows.value && c <= gridColumns.value) {
           grid[r][c] = true;
         }
       }
@@ -63,16 +92,12 @@ const mergedData = computed(() => {
   });
 
   const empty = [];
-  for (let r = 1; r <= gridRows; r++) for (let c = 1; c <= gridColumns; c++) if (!grid[r][c]) empty.push({ row: r, col: c });
-
-  return [...filled, ...empty];
-});
+  for (let r = 1; r <= gridRows.value; r++) for (let c = 1; c <= gridColumns.value; c++) if (!grid[r][c]) empty.push({ row: r, col: c });
 
-const selectedElement = inject('selectedElement');
-const activeEditMode = inject('activeEditMode');
+  mergedData.value = [...filteredElements.value, ...empty];
+}
 
 let _isElementSwitching = false;
-import { omit, cloneDeep } from 'lodash-es';
 watch(
   () => activeElement.value?.id,
   (newId, oldId) => {
@@ -108,6 +133,8 @@ watch(
 onMounted(() => {
   props.polarvo.components.register('sections', props.sectionKey, getCurrentInstance());
   activeEditMode.value = false;
+
+  initData();
 });
 
 onUnmounted(() => {

package/src/components/Layout/PolarLayout.vue

@@ -17,6 +17,7 @@ const props = defineProps({
 .polar-grid {
   display: grid;
   grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
+  grid-template-rows: repeat(var(--grid-rows, 3), 1fr);
   gap: var(--grid-gap, 5px);
   width: 100%;
   height: 100%;

package/src/core/engines/DisplayEngine.js

@@ -1,3 +1,5 @@
+import { cloneDeep } from 'lodash';
+
 // event 발행 시 'display'으로 시작하는 이름 사용
 const DISPLAY_LIMITS = {
   percent: { max: 200, min: 0, unit: '%', name: '배율' },
@@ -110,12 +112,10 @@ class DisplayEngine {
    * @return {object} - 현재 상태 객체
    */
   getState() {
-    return {
+    return cloneDeep({
       displayMode: this.displayMode,
-      displaySize: { ...this.displaySize },
-      activeMenu: this.activeMenu,
-      activeDesign: this.activeDesign,
-    };
+      displaySize: this.displaySize,
+    });
   }
 
   /** 상태 정보 설정
@@ -124,13 +124,6 @@ class DisplayEngine {
   setState(state) {
     this.displayMode = state.displayMode;
     this.displaySize = { ...state.displaySize };
-    this.activeMenu = state.activeMenu;
-    this.activeDesign = state.activeDesign;
-
-    this.eventBus.emit('display:restoredState', {
-      stateData: state,
-      timestamp: Date.now(),
-    });
   }
 
   /** ---------------------------------- 공통 메소드 ---------------------------------- **/
@@ -214,14 +207,18 @@ class DisplayEngine {
     }
     const numSize = Number(size);
     const limit = DISPLAY_LIMITS[type];
-    const result = {result: true, message: '사이즈가 성공적으로 변경되었습니다.'};
+    const result = { result: true, message: '사이즈가 성공적으로 변경되었습니다.' };
+
+    if (isNaN(numSize)) {
+      return { result: false, message: '유효한 숫자를 입력해주세요.' };
+    }
 
-    if (isNaN(numSize) || numSize <= limit.min) {
+    if (numSize <= limit.min) {
       result.result = false;
       result.message = `설정 가능한 최소 ${limit.name}는 ${limit.min}${limit.unit}입니다.`;
     }
 
-    if (isNaN(numSize) || numSize > limit.max) {
+    if (numSize > limit.max) {
       result.result = false;
       result.message = `설정 가능한 최대 ${limit.name}는 ${limit.max}${limit.unit}입니다.`;
     }

package/src/core/engines/FreeDropEngine.js

@@ -52,19 +52,8 @@ class FreeDropEngine {
   /** [내부함수] 구독 설정 */
   _setupSubscriptions() {
     // 초기화 완료 이벤트 구독 - from DisplayEngine
-    this._subscribe('display:engineInitialized', ({ $displaySize }) => {
-      const { gridSize } = $displaySize;
-      this._gridSize = gridSize;
-
-      this._initialize();
-    });
-
-    this._subscribe('display:enginesReset', ({ $displaySize }) => {
-      const { gridSize } = $displaySize;
-      this._gridSize = gridSize;
-
-      this._initialize();
-    });
+    this._subscribe('display:engineInitialized', this._handleDisplayInit.bind(this));
+    this._subscribe('display:enginesReset', this._handleDisplayInit.bind(this));
 
     // displayMode 변경 감지 (displaySize가 함께 초기화됨)
     this._subscribe('display:displayChanged', ({ $displaySize }) => {
@@ -110,6 +99,7 @@ class FreeDropEngine {
       this._elementsUpdate = true;
 
       this.setActiveElement(this._elements.find((x) => x.id === $elementId));
+
       this.eventBus.emit('freeDrop:requestUpdateData', {
         elements: cloneDeep(this.freeElements),
         guides: this.guides,
@@ -133,20 +123,45 @@ class FreeDropEngine {
       });
     });
 
-    // this._subscribe('system:requestElementsScale', ({ $elements }) => {
-    //   this._elements = $elements;
-    //   this._elementsUpdate = true;
-    // });
-
-    this._subscribe('system:restoredState', ({ stateData }) => {
-      this._elements = stateData.elements;
+    this._subscribe('system:requestElementsScale', ({ $elements }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
-      this.setActiveElement(null);
+    });
 
-      this.eventBus.emit('freeDrop:restoredState', {
-        elements: cloneDeep(this.freeElements),
-        timestamp: Date.now(),
-      });
+    this._subscribe('system:restoredState', ({ domain, state: snapShot }) => {
+      if (domain === 'all') {
+        this._elements = snapShot.manager.elements || [];
+        this._elementsUpdate = true;
+        this.setActiveElement(null);
+
+        this.eventBus.emit('freeDrop:restoredState', {
+          elements: cloneDeep(this.freeElements),
+          timestamp: Date.now(),
+        });
+
+
+        this._gridNumber = snapShot.layout.gridNumber || null;
+        this._gridSize = snapShot.display.displaySize?.gridSize || null;
+      }
+
+      if (domain === 'manager') {
+        this._elements = snapShot.elements || [];
+        this._elementsUpdate = true;
+        this.setActiveElement(null);
+
+        this.eventBus.emit('freeDrop:restoredState', {
+          elements: cloneDeep(this.freeElements),
+          timestamp: Date.now(),
+        });
+      }
+
+      if (domain === 'layout') {
+        this._gridNumber = snapShot.gridNumber || null;
+      }
+
+      if (domain === 'display') {
+        this._gridSize = snapShot.displaySize?.gridSize || null;
+      }
     });
   }
 
@@ -231,6 +246,13 @@ class FreeDropEngine {
     this._alreadyExist = false;
 
     this._elementsUpdate = false;
+    this._elements = [];
+    this._freeElements = [];
+  }
+
+  _handleDisplayInit({ $displaySize }) {
+    this._gridSize = $displaySize.gridSize;
+    this._initialize();
   }
 
   /** [내부함수] 그리드 스냅
@@ -265,7 +287,11 @@ class FreeDropEngine {
     const x = event.clientX - offsetPos.x + size.w;
     const y = event.clientY - offsetPos.y + size.h;
 
-    const result = event.clientX >= layoutRect.left && event.clientY >= layoutRect.top && x <= layoutRect.right && y <= layoutRect.bottom;
+    const result =
+      event.clientX - offsetPos.x >= layoutRect.left &&
+      event.clientY - offsetPos.y >= layoutRect.top &&
+      x <= layoutRect.right &&
+      y <= layoutRect.bottom;
 
     return result;
   }
@@ -275,7 +301,7 @@ class FreeDropEngine {
    */
   _detectElementCollision() {
     if (!this._activeElement) {
-      console.error('[FreeDropEngine] 충돌 검사를 위한 아이템 정보를 찾을 수 없습니다:', this._activeElement.id);
+      console.error('[FreeDropEngine] 충돌 검사를 위한 아이템 정보를 찾을 수 없습니다:', this._activeElement?.id || 'unknown');
       return false;
     }
 
@@ -359,13 +385,13 @@ class FreeDropEngine {
     this._offsetPos.x = element.size.w / 2;
     this._offsetPos.y = element.size.h / 2;
 
-    // this.startDrag(event, null);
-    // 신규 아이템 추가 시 바로 드래그 상태로 진입 (단, 기존 아이템과 달리 위치 기준이 마우스 포인터가 됨)
-    this.eventBus.emit('freeDrop:startDrag', { timestamp: Date.now() });
+    this._startDrag();
+    // // 신규 아이템 추가 시 바로 드래그 상태로 진입 (단, 기존 아이템과 달리 위치 기준이 마우스 포인터가 됨)
+    // this.eventBus.emit('freeDrop:startDrag', { timestamp: Date.now() });
 
-    this._dragState.isDragging = true;
-    document.addEventListener('mousemove', this._startDragMove);
-    document.addEventListener('mouseup', this._stopDrag);
+    // this._dragState.isDragging = true;
+    // document.addEventListener('mousemove', this._startDragMove);
+    // document.addEventListener('mouseup', this._stopDrag);
   }
 
   /** [내부함수] 배치요소 삭제
@@ -398,12 +424,11 @@ class FreeDropEngine {
 
     this._activeElement = element;
     this._alreadyExist = action === 'add' ? false : true;
-    this._elementsUpdate = true;
+    // this._elementsUpdate = true;
 
     this.eventBus.emit('freeDrop:setActiveElement', {
-      action: action,
+      $alreadyExist: this._alreadyExist,
       activeElement: this._activeElement,
-      // elements: cloneDeep(this.freeElements),
       timestamp: Date.now(),
     });
   }
@@ -413,6 +438,7 @@ class FreeDropEngine {
    * @returns {object} - 스타일 객체
    */
   getElementStyle(element) {
+    if (!element?.position || !element?.size) return {};
     const { x, y } = element.position;
     const { w, h } = element.size;
 
@@ -440,8 +466,18 @@ class FreeDropEngine {
     const rawX = event.clientX - layoutRect.left - offsetPos.x;
     const rawY = event.clientY - layoutRect.top - offsetPos.y;
 
-    const gridX = this._snapToGrid(rawX);
-    const gridY = this._snapToGrid(rawY);
+    const maxX = layoutRect.width - this._activeElement.size.w;
+    const maxY = layoutRect.height - this._activeElement.size.h;
+
+    // 클램핑: 경계 밖으로 나가도 경계에서 멈추고 마우스를 계속 추적
+    const clampedX = Math.min(Math.max(0, rawX), maxX);
+    const clampedY = Math.min(Math.max(0, rawY), maxY);
+
+    // const gridX = this._snapToGrid(rawX);
+    // const gridY = this._snapToGrid(rawY);
+
+    const gridX = this._snapToGrid(clampedX);
+    const gridY = this._snapToGrid(clampedY);
 
     return { x: gridX, y: gridY };
   }
@@ -523,7 +559,6 @@ class FreeDropEngine {
           this.guides.h = this._activeElement.size.h;
         }
 
-
         // Vue 반응성 사이클 없이 직접 DOM 조작
         const el = document.getElementById(this._activeElement.id);
         if (el) {
@@ -550,7 +585,6 @@ class FreeDropEngine {
         //   timestamp: Date.now(),
         // });
 
-
         rafId = null;
       });
     };
@@ -572,6 +606,10 @@ class FreeDropEngine {
     }
 
     const element = this.freeElements.find((el) => el.id === id);
+    if (!element) {
+      console.error('[FreeDropEngine] 배치요소를 찾을 수 없습니다. ID:', id);
+      return false;
+    }
     this.setActiveElement(element, 'click');
 
     // 배치요소 잠겨 있으면 드래그/삭제 불가
@@ -587,10 +625,13 @@ class FreeDropEngine {
     // 배치요소 위치 기준 오프셋 계산
     const elementRect = elementEl.getBoundingClientRect();
     if (elementRect) {
-      const { column, row } = this._gridNumber;
+      // const { column, row } = this._gridNumber;
 
-      this._offsetPos.x = (event.clientX - elementRect.left) / column;
-      this._offsetPos.y = (event.clientY - elementRect.top) / row;
+      // this._offsetPos.x = (event.clientX - elementRect.left) / column;
+      // this._offsetPos.y = (event.clientY - elementRect.top) / row;
+
+      this._offsetPos.x = event.clientX - elementRect.left;
+      this._offsetPos.y = event.clientY - elementRect.top;
     }
 
     document.addEventListener('mousemove', this._detectDragIntent);
@@ -610,12 +651,7 @@ class FreeDropEngine {
       document.removeEventListener('mousemove', this._detectDragIntent);
       document.removeEventListener('mouseup', this._cancelDragIntent);
 
-      // 드래그 확정 후 실제 드래그 리스너 등록
-      this._dragState.isDragging = true;
-
-      this.eventBus.emit('freeDrop:startDrag', { timestamp: Date.now() });
-      document.addEventListener('mousemove', this._startDragMove);
-      document.addEventListener('mouseup', this._stopDrag);
+      this._startDrag();
       // const position = this._getActiveElementPosition(event, this._offsetPos);
       // this._updateElementBounds(position);
     }
@@ -627,6 +663,15 @@ class FreeDropEngine {
     document.removeEventListener('mouseup', this._cancelDragIntent);
   };
 
+  _startDrag() {
+    // 드래그 확정 후 실제 드래그 리스너 등록
+    this._dragState.isDragging = true;
+
+    this.eventBus.emit('freeDrop:startDrag', { timestamp: Date.now() });
+    document.addEventListener('mousemove', this._startDragMove);
+    document.addEventListener('mouseup', this._stopDrag);
+  }
+
   /** [내부함수] 드래그 진행
    * @param {MouseEvent} event - 마우스 이벤트
    */
@@ -635,12 +680,12 @@ class FreeDropEngine {
     if (this._dragState.isResizing) return;
 
     // 레이아웃 내부 진입 여부
-    const isInsideLayout = this._detectLayoutEntry(event, this._offsetPos);
+    // const isInsideLayout = this._detectLayoutEntry(event, this._offsetPos);
 
-    if (isInsideLayout) {
-      const position = this._getActiveElementPosition(event, this._offsetPos);
-      this._updateElementBounds(position);
-    }
+    // if (isInsideLayout) {
+    const position = this._getActiveElementPosition(event, this._offsetPos);
+    this._updateElementBounds(position);
+    // }
   };
 
   /** [내부함수] 드래그 종료 */
@@ -665,7 +710,7 @@ class FreeDropEngine {
           elementId: this._activeElement.id,
           position: this._activeElement.position,
           size: this._activeElement.size,
-          // guides: this.guides,
+          guides: this.guides,
           timestamp: Date.now(),
         });
         this._resetDrag(true, true);

package/src/core/engines/GridDropEngine.js

@@ -103,20 +103,35 @@ class GridDropEngine {
       });
     });
 
-    // this._subscribe('system:requestElementsScale', ({ $elements }) => {
-    //   this._elements = $elements;
-    //   this._elementsUpdate = true;
-    // });
-
-    this._subscribe('system:restoredState', ({ stateData }) => {
-      this._elements = stateData.elements;
+    this._subscribe('system:requestElementsScale', ({ $elements }) => {
+      this._elements = $elements;
       this._elementsUpdate = true;
-      this.setActiveElement(null);
+    });
 
-      this.eventBus.emit('gridDrop:restoredState', {
-        elements: cloneDeep(this.gridElements),
-        timestamp: Date.now(),
-      });
+    this._subscribe('system:restoredState', ({ domain, state: snapShot }) => {
+      if (domain === 'all') {
+        this._elements = snapShot.manager.elements || [];
+        this._elementsUpdate = true;
+
+        this.setActiveElement(null);
+
+        this.eventBus.emit('gridDrop:restoredState', {
+          elements: cloneDeep(this.gridElements),
+          timestamp: Date.now(),
+        });
+      }
+
+      if (domain === 'manager') {
+        this._elements = snapShot.elements || [];
+        this._elementsUpdate = true;
+
+        this.setActiveElement(null);
+
+        this.eventBus.emit('gridDrop:restoredState', {
+          elements: cloneDeep(this.gridElements),
+          timestamp: Date.now(),
+        });
+      }
     });
   }
 
@@ -246,6 +261,7 @@ class GridDropEngine {
       return;
     }
     this._activeElement.isLocked = !this._activeElement.isLocked;
+    this._elementsUpdate = true;
 
     this.eventBus.emit('gridDrop:toggleLock', {
       elementId: this._activeElement.id,
@@ -436,6 +452,8 @@ class GridDropEngine {
     // 단순 클릭 시에는 위치 변경 없음
     const { col, row } = this._targetCell;
     if (this._dragState.isDragging) {
+      if (col === this._activeElement.position.col && row === this._activeElement.position.row) return;
+
       this._activeElement.position.col = col;
       this._activeElement.position.row = row;
 
@@ -500,6 +518,8 @@ class GridDropEngine {
     const { gridColumns, gridRows } = this._activeConfig;
 
     const activeSection = document.querySelector('.section-active');
+    if (!activeSection) return;
+
     const { dx, dy } = this._calculateDrag(
       { x: event.clientX, y: event.clientY },
       {