polarvo-layout 1.0.52 → 1.0.54

package/package.json

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

package/src/components/FastMenu/ActionFastMenu.vue

@@ -58,7 +58,7 @@ async function saveSetting() {
     },
   };
 
-  const result = await props.polarvo.userApi.save(saveData);
+  const result = await props.polarvo.userApi?.save(saveData);
   //   저장 성공 시 실행할 액션이 있다면 아래에 작성
   if (result) {
   }

package/src/components/FastMenu/DisplayFastMenu.vue

@@ -21,8 +21,8 @@
         type="number"
         name="px"
         aria-label="픽셀 단위 크기"
-        min="600"
-        max="1200"
+        min="1"
+        max="1920"
         step="50"
         :value="displaySize?.px"
         class="border-b-2 pr-1 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"

package/src/components/IconBar/IconBar.vue

@@ -182,7 +182,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 
 async function logout() {
-  const result = await props.polarvo.userApi.logout();
+  const result = await props.polarvo.userApi?.logout();
   if (result) {
     // 로그아웃 성공 시 라우터 이동
     //서브도메인 제거하기위해 아래와 같이 코드 짰습니다

package/src/components/Layout/CanvasContainer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="canvas-wrapper w-full h-full max-h-[765px] p-4 overflow-y-auto overflow-x-hidden">
     <div id="canvas-container" class="border rounded-md w-full h-full bg-white" :style="containerStyle">
-      <BaseLayout ref="baseLayoutRef" :polarvo="polarvo" class="relative" />
+      <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()"
@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import { toRefs, ref, computed, watch, onMounted } from 'vue';
+import { toRefs, ref, computed, watch } from 'vue';
 import BaseLayout from './BaseLayout.vue';
 
 const props = defineProps({
@@ -91,9 +91,6 @@ const containerStyle = computed(() => {
     backgroundSize: `${displaySize.value.gridSize}px ${displaySize.value.gridSize}px`,
   };
 });
-
-// 전체 elements
-// provide('elements', elements);
 </script>
 
 <style scoped lang="scss">

package/src/configs/resources/elementResource.js

@@ -17,7 +17,7 @@ export const elementResource = {
   },
   searchBar: {
     w: 660,
-    h: 40,
+    h: 32,
   },
   table: {
     w: 300,

package/src/core/engines/DisplayEngine.js

@@ -66,10 +66,11 @@ class DisplayEngine {
       this.setActiveDesign(null);
     })
 
-    this._subscribe('freeDrop:startDrag', () => {
-      this.setActiveMenu(null);
-      this.setActiveDesign(null);
-    });
+    // freeDrop:setActiveElement가 항상 먼저 발행되어 아래 처리가 중복되므로 주석 처리
+    // this._subscribe('freeDrop:startDrag', () => {
+    //   this.setActiveMenu(null);
+    //   this.setActiveDesign(null);
+    // });
 
     this._subscribe('gridDrop:setActiveElement', ({ action }) => {
       if (action === 'update') return;

package/src/core/engines/FreeDropEngine.js

@@ -30,6 +30,7 @@ class FreeDropEngine {
     this._startPos = { x: 0, y: 0 }; // 드래그 시작 위치
     this._startSize = { w: 0, h: 0 }; // 드래그 시작 크기
     this._offsetPos = { x: 0, y: 0 }; // 마우스 오프셋 위치
+    this._dragOriginPos = { x: 0, y: 0 }; // 드래그 의도 감지용 마우스 시작 위치(뷰포트 기준)
     this._alreadyExist = false; // 배치요소 기존재 여부
 
     this._subscriptions = []; // 구독 해제 함수 저장용
@@ -75,7 +76,6 @@ class FreeDropEngine {
       this._activeConfig = $config;
 
       this.setActiveElement(null);
-
     });
 
     this._subscribe('system:setElements', ({ $elements }) => {
@@ -240,6 +240,7 @@ class FreeDropEngine {
     this._startPos = { x: 0, y: 0 };
     this._startSize = { w: 0, h: 0 };
     this._offsetPos = { x: 0, y: 0 };
+    this._dragOriginPos = { x: 0, y: 0 };
 
     this._activeSection = null;
     this._activeMode = null;
@@ -466,6 +467,11 @@ class FreeDropEngine {
       return { x: 0, y: 0 };
     }
 
+    if (!this._activeElement) {
+      console.error('[FreeDropEngine] 활성화된 배치요소를 찾을 수 없습니다.');
+      return { x: 0, y: 0 };
+    }
+
     const layoutRect = layoutEl.getBoundingClientRect();
     const rawX = event.clientX - layoutRect.left - offsetPos.x;
     const rawY = event.clientY - layoutRect.top - offsetPos.y;
@@ -535,7 +541,7 @@ class FreeDropEngine {
 
     // 최소 크기 제한
     newW = Math.max(40, newW);
-    newH = Math.max(40, newH);
+    newH = Math.max(20, newH);
 
     return { newX, newY, newW, newH };
   }
@@ -547,6 +553,10 @@ class FreeDropEngine {
       if (rafId) return;
 
       rafId = requestAnimationFrame(() => {
+        if (!this._activeElement) {
+          rafId = null;
+          return;
+        }
         this._activeElement.position.x = position.x;
         this._activeElement.position.y = position.y;
 
@@ -619,6 +629,7 @@ class FreeDropEngine {
     // 배치요소 잠겨 있으면 드래그/삭제 불가
     if (element.isLocked) return;
     this._startPos = { x: element.position.x, y: element.position.y };
+    this._dragOriginPos = { x: event.clientX, y: event.clientY };
 
     const elementEl = document.getElementById(id);
     if (!elementEl) {
@@ -644,8 +655,8 @@ class FreeDropEngine {
 
   // [내부함수] 드래그 의도 감지 - 최소 드래그 거리 이상으로 마우스가 이동한 경우
   _detectDragIntent = (event) => {
-    const deltaX = Math.abs(event.clientX - this._startPos.x);
-    const deltaY = Math.abs(event.clientY - this._startPos.y);
+    const deltaX = Math.abs(event.clientX - this._dragOriginPos.x);
+    const deltaY = Math.abs(event.clientY - this._dragOriginPos.y);
 
     // 최소 드래그 거리(gridSize) 이상 이동 여부
     const isMoved = deltaX >= this._gridSize || deltaY >= this._gridSize;
@@ -703,21 +714,27 @@ class FreeDropEngine {
     // 1) 기존 배치요소인 경우
     if (this._alreadyExist) {
       // 충돌 시 기존 위치로 복귀
+      if (!this._activeElement) {
+        console.error('[FreeDropEngine] 활성화된 배치요소를 찾을 수 없습니다.');
+        this._resetDrag();
+        return;
+      }
+
       // if (this._detectElementCollision()) {
       //   alert('아이템이 겹칩니다. 다른 위치로 드래그해주세요.');
       //   this._activeElement.position.x = this._startPos.x;
       //   this._activeElement.position.y = this._startPos.y;
       //   this._resetDrag(true);
       // } else {
-        // 로컬에서 position, size 업데이트
-        this.eventBus.emit('freeDrop:requestUpdateLocalBounds', {
-          elementId: this._activeElement.id,
-          position: this._activeElement.position,
-          size: this._activeElement.size,
-          guides: this.guides,
-          timestamp: Date.now(),
-        });
-        this._resetDrag(true, true);
+      // 로컬에서 position, size 업데이트
+      this.eventBus.emit('freeDrop:requestUpdateLocalBounds', {
+        elementId: this._activeElement.id,
+        position: this._activeElement.position,
+        size: this._activeElement.size,
+        guides: this.guides,
+        timestamp: Date.now(),
+      });
+      this._resetDrag(true, true);
       // }
 
       return;
@@ -751,16 +768,19 @@ class FreeDropEngine {
     this._startPos = { x: 0, y: 0 };
     this._startSize = { w: 0, h: 0 };
     this._offsetPos = { x: 0, y: 0 };
+    this._dragOriginPos = { x: 0, y: 0 };
 
     if (emitEvent) {
-      this.eventBus.emit('freeDrop:requestUpdateElement', {
-        historyEvent: historyEvent,
-        elementId: this._activeElement.id,
-        position: this._activeElement.position,
-        size: this._activeElement.size,
-        guides: this.guides,
-        timestamp: Date.now(),
-      });
+      if (this._activeElement) {
+        this.eventBus.emit('freeDrop:requestUpdateElement', {
+          historyEvent: historyEvent,
+          elementId: this._activeElement.id,
+          position: this._activeElement.position,
+          size: this._activeElement.size,
+          guides: this.guides,
+          timestamp: Date.now(),
+        });
+      }
     }
 
     document.removeEventListener('mousemove', this._startDragMove);
@@ -812,7 +832,7 @@ class FreeDropEngine {
     //   this._activeElement.size = this._startSize;
     //   this._resetResize();
     // } else {
-      this._resetResize(true);
+    this._resetResize(true);
     // }
 
     return;
@@ -831,14 +851,16 @@ class FreeDropEngine {
     this._startSize = { w: 0, h: 0 };
     this._offsetPos = { x: 0, y: 0 };
 
-    this.eventBus.emit('freeDrop:requestUpdateElement', {
-      historyEvent: historyEvent,
-      elementId: this._activeElement.id,
-      position: this._activeElement.position,
-      size: this._activeElement.size,
-      guides: this.guides,
-      timestamp: Date.now(),
-    });
+    if (this._activeElement) {
+      this.eventBus.emit('freeDrop:requestUpdateElement', {
+        historyEvent: historyEvent,
+        elementId: this._activeElement.id,
+        position: this._activeElement.position,
+        size: this._activeElement.size,
+        guides: this.guides,
+        timestamp: Date.now(),
+      });
+    }
 
     document.removeEventListener('mousemove', this._startResizeMove);
     document.removeEventListener('mouseup', this._stopResize);

package/src/core/engines/GridDropEngine.js

@@ -56,7 +56,7 @@ class GridDropEngine {
       this._activeSection = $section;
       this._activeMode = $mode;
       this._activeConfig = $config;
-      
+
       this.setActiveElement(null);
     });
 
@@ -111,7 +111,7 @@ class GridDropEngine {
     });
 
     this._subscribe('system:restoredState', ({ domain, state: snapShot }) => {
-      if (domain === 'all'|| domain === 'draft') {
+      if (domain === 'all' || domain === 'draft') {
         this._elements = snapShot.manager.elements || [];
         this._elementsUpdate = true;
 
@@ -355,7 +355,7 @@ class GridDropEngine {
       size: { colSpan: 1, rowSpan: 1 },
       section: this._activeSection,
       isLocked: false,
-      ...item.propDefaults || {}, // 아이템의 기본 props 설정
+      ...(item.propDefaults || {}), // 아이템의 기본 props 설정
     };
 
     this.setActiveElement(null, 'add');
@@ -407,7 +407,12 @@ class GridDropEngine {
         return false;
       }
       const element = this.gridElements.find((el) => el.id === item.id);
+      if (!element) {
+        console.error('[GridDropEngine] 배치요소를 찾을 수 없습니다. ID:', item.id);
+        return false;
+      }
       this.setActiveElement(element, 'click');
+
       this._dragState.activeCell = { ...element.position };
       this._alreadyExist = true;
 
@@ -457,6 +462,10 @@ class GridDropEngine {
     // 단순 클릭 시에는 위치 변경 없음
     const { col, row } = this._targetCell;
     if (this._dragState.isDragging) {
+      if (!this._activeElement) {
+        console.error('[GridDropEngine] 활성화된 배치요소를 찾을 수 없습니다.');
+        return false;
+      }
       if (col === this._activeElement.position.col && row === this._activeElement.position.row) return;
 
       this._activeElement.position.col = col;
@@ -474,13 +483,15 @@ class GridDropEngine {
   /** [내부함수] 드래그 종료 */
   _stopDrag = () => {
     if (this._dragState.isDragging) {
-      this.eventBus.emit('gridDrop:requestUpdateElement', {
-        historyEvent: true,
-        elementId: this._activeElement.id,
-        position: this._activeElement.position,
-        size: this._activeElement.size,
-        timestamp: Date.now(),
-      });
+      if (this._activeElement) {
+        this.eventBus.emit('gridDrop:requestUpdateElement', {
+          historyEvent: true,
+          elementId: this._activeElement.id,
+          position: this._activeElement.position,
+          size: this._activeElement.size,
+          timestamp: Date.now(),
+        });
+      }
     }
 
     this._dragState.isDragging = false;
@@ -518,7 +529,8 @@ class GridDropEngine {
    */
   _startResizeMove = (event) => {
     // 리사이징 중인 경우에만 드래그 가능
-    if (!this._dragState.isResizing) return;
+    // if (!this._dragState.isResizing) return;
+    if (!this._dragState.isResizing || !this._activeElement || !this._activeConfig) return;
 
     const { gridColumns, gridRows } = this._activeConfig;
 
@@ -555,13 +567,15 @@ class GridDropEngine {
   /** [내부함수] 리사이징 종료 */
   _stopResize = () => {
     if (this._dragState.isResizing) {
-      this.eventBus.emit('gridDrop:requestUpdateElement', {
-        historyEvent: true,
-        elementId: this._activeElement.id,
-        position: this._activeElement.position,
-        size: this._activeElement.size,
-        timestamp: Date.now(),
-      });
+      if (this._activeElement) {
+        this.eventBus.emit('gridDrop:requestUpdateElement', {
+          historyEvent: true,
+          elementId: this._activeElement.id,
+          position: this._activeElement.position,
+          size: this._activeElement.size,
+          timestamp: Date.now(),
+        });
+      }
     }
 
     this._dragState.isResizing = false;

package/src/core/engines/LayoutEngine.js

@@ -283,12 +283,22 @@ class LayoutEngine {
    * @param {number} ratio - 새로운 비율 값
    */
   setRatio(type, index, ratio) {
+    if (type !== 'column' && type !== 'row') {
+      console.error('[LayoutEngine] 잘못된 type입니다:', type);
+      return { result: false, message: '잘못된 비율 타입입니다.' };
+    }
+
     const prevRatio = {
       column: [...this.gridRatio.column],
       row: [...this.gridRatio.row],
     };
 
     const ratioArray = this.gridRatio[type];
+    if (!Number.isInteger(index) || index < 0 || index >= ratioArray.length) {
+      console.error('[LayoutEngine] 잘못된 index입니다:', index);
+      return { result: false, message: '잘못된 비율 인덱스입니다.' };
+    }
+
     ratioArray[index] = Number(ratio);
 
     const totalWithout = ratioArray.reduce((sum, val, idx) => {

package/src/core/managers/EngineManager.js

@@ -655,7 +655,7 @@ class EngineManager {
     if (!this._initialized) {
       await this._createEngines();
       await this._setupEngineConnections();
-      this._initialized = true;
+      // this._initialized = true;
 
       // 세션 복원
       const saved = sessionStorage.getItem('polarvo-session');
@@ -742,7 +742,7 @@ class EngineManager {
     this._setupHistoryEngineConnections();
 
     // engineManager
-    this.eventBus.subscribe('system:restoredState', ({ domain, state: snapShot }) => {
+    this._subscribe('system:restoredState', ({ domain, state: snapShot }) => {
       if (domain === 'display') {
         this._updateElementsScale(this._displaySize, snapShot.displaySize); // _displaySize = 이전 값
         this._displaySize = snapShot.displaySize;
@@ -750,10 +750,12 @@ class EngineManager {
     });
 
     // 가장 최신 상태를 세션 스토리지에 저장 (새로고침 대비)
-    this.eventBus.subscribe('system:historyCheckpoint', () => {
+    this._subscribe('system:historyCheckpoint', () => {
       this.saveSession();
     });
 
+    this._initialized = true;
+
     // 모든 연결 설정 완료 후 초기화 완료 이벤트 발행
     this.eventBus.emit('system:engineInitialized', {
       state: this.state,
@@ -984,7 +986,6 @@ class EngineManager {
 
         addElement: (item) => gridDropEngine.addElement(item),
         toggleLock: () => gridDropEngine.toggleLock(),
-        startDrag: (event, id) => gridDropEngine.startDrag(event, id),
         handleMouseDown: (event, id) => gridDropEngine.handleMouseDown(event, id),
         startResize: (event, id) => gridDropEngine.startResize(event, id),
       },

package/src/library/GridDropLibrary.js

@@ -150,13 +150,13 @@ function useGridDrop(api) {
     }
   };
 
-  const startDrag = (event, id) => {
-    try {
-      api.gridDrop.startDrag(event, id);
-    } catch (error) {
-      console.warn('[GridDropLibrary] startDrag 호출 중 오류 발생:', error);
-    }
-  };
+  // const startDrag = (event, id) => {
+  //   try {
+  //     api.gridDrop.startDrag(event, id);
+  //   } catch (error) {
+  //     console.warn('[GridDropLibrary] startDrag 호출 중 오류 발생:', error);
+  //   }
+  // };
 
   const handleMouseDown = (event, id) => {
     try {
@@ -190,7 +190,6 @@ function useGridDrop(api) {
     // setActiveCell,
     addElement,
     toggleLock,
-    startDrag,
     handleMouseDown,
     detectHoverCell,
     startResize,

package/src/library/LayoutLibrary.js

@@ -108,7 +108,8 @@ function useLayout(api) {
       state.activeConfig = $config;
     });
 
-    _subscribe('system:requestUpdateData', ({ $elements }) => {
+    // _subscribe('system:requestUpdateData', ({ $elements }) => {
+    _subscribe('system:requestUpdateElement', ({ $elements }) => {
       state.elements = $elements;
     });
 

package/src/library/index.js

@@ -7,7 +7,6 @@ import useGridDrop from './GridDropLibrary.js';
 import useHistory from './HistoryLibrary.js';
 import utils from '../utils/index.js';
 
-
 async function createPolarvoLayout(config = {}) {
   let manager = new EngineManager(config);
   await manager.initialize();
@@ -20,15 +19,21 @@ async function createPolarvoLayout(config = {}) {
     elements: new Map(),
   };
 
+  const displayLib = useDisplay(api);
+  const layoutLib = useLayout(api);
+  const freeDropLib = useFreeDrop(api);
+  const gridDropLib = useGridDrop(api);
+  const historyLib = useHistory(api);
+
   return {
-    display: useDisplay(api),
-    layout: useLayout(api),
-    freeDrop: useFreeDrop(api),
-    gridDrop: useGridDrop(api),
-    history: useHistory(api),
+    display: displayLib,
+    layout: layoutLib,
+    freeDrop: freeDropLib,
+    gridDrop: gridDropLib,
+    history: historyLib,
     userApi: api.userApi,
     utils: utils,
-    
+
     resetEngines: () => api.resetEngines(),
 
     components: {
@@ -43,6 +48,13 @@ async function createPolarvoLayout(config = {}) {
     destroy: () => {
       componentRegistry.sections.clear();
       componentRegistry.elements.clear();
+
+      displayLib.cleanup();
+      layoutLib.cleanup();
+      freeDropLib.cleanup();
+      gridDropLib.cleanup();
+      historyLib.cleanup();
+
       if (manager) {
         manager.destroy();
         manager = null;