polarvo-layout 1.0.55 → 1.0.56

package/package.json

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

package/src/components/Layout/GridLayout.vue

@@ -43,8 +43,7 @@ const props = defineProps({
 
 const { setActiveDesign } = props.polarvo.display;
 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 { elements, activeElement } = toRefs(props.polarvo.gridDrop.state);
 
 const selectedElement = inject('selectedElement');
 const activeEditMode = inject('activeEditMode');

package/src/core/engines/FreeDropEngine.js

@@ -1,5 +1,13 @@
 import { cloneDeep } from 'lodash-es';
 
+const ARROW_KEY_DELTA = {
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 },
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 },
+};
+const KEY_MOVE_COMMIT_DELAY = 500; // keyup 후 이 시간(ms) 동안 추가 입력 없으면 커밋
+
 // event 발행 시 'freeDrop'으로 시작하는 이름 사용
 class FreeDropEngine {
   constructor({ eventBus, options }) {
@@ -27,6 +35,9 @@ class FreeDropEngine {
       direction: null, // 리사이징 방향
     };
 
+    this._keyMoveActive = false; // 방향키 이동 세션 진행 여부
+    this._keyMoveCommitTimer = null;
+
     this._startPos = { x: 0, y: 0 }; // 드래그 시작 위치
     this._startSize = { w: 0, h: 0 }; // 드래그 시작 크기
     this._offsetPos = { x: 0, y: 0 }; // 마우스 오프셋 위치
@@ -35,6 +46,9 @@ class FreeDropEngine {
 
     this._subscriptions = []; // 구독 해제 함수 저장용
     this._setupSubscriptions();
+
+    document.addEventListener('keydown', this._handleKeyDown);
+    document.addEventListener('keyup', this._handleKeyUp);
   }
 
   /** ---------------------------------- 구독 관련 메소드 ---------------------------------- **/
@@ -174,6 +188,11 @@ class FreeDropEngine {
 
   /** 삭제 및 정리 */
   destroy() {
+    clearTimeout(this._keyMoveCommitTimer);
+
+    document.removeEventListener('keydown', this._handleKeyDown);
+    document.removeEventListener('keyup', this._handleKeyUp);
+
     this._subscriptions.forEach((unsubscribe) => {
       if (typeof unsubscribe === 'function') {
         unsubscribe();
@@ -235,6 +254,8 @@ class FreeDropEngine {
       isResizing: false,
       direction: null,
     };
+    this._keyMoveActive = false; // 방향키 이동 세션 진행 여부
+    this._keyMoveCommitTimer = null;
 
     this.guides = { x: null, y: null, w: null, h: null };
     this._startPos = { x: 0, y: 0 };
@@ -455,39 +476,56 @@ class FreeDropEngine {
     };
   }
 
+  _getLayoutRect() {
+    const layoutEl = document.getElementById(`${this._activeSection}Layout`);
+    if (!layoutEl) {
+      console.error('[FreeDropEngine] 레이아웃 요소를 찾을 수 없습니다:', this._activeSection);
+      return null;
+    }
+    return layoutEl.getBoundingClientRect();
+  }
+
+  _clampToLayoutBounds(rawX, rawY, layoutRect) {
+    const maxX = layoutRect.width - this._activeElement.size.w;
+    const maxY = layoutRect.height - this._activeElement.size.h;
+
+    return {
+      x: Math.min(Math.max(0, rawX), maxX),
+      y: Math.min(Math.max(0, rawY), maxY),
+    };
+  }
+
   /** [내부함수] 활성화 배치요소의 현재 위치 가져오기
    * @param {MouseEvent} event - 마우스 이벤트
    * @param {Object} offsetPos - 오프셋 위치 { x, y }
    * @return {Object} - 활성화 배치요소의 그리드 스냅 위치 { x, y }
    */
   _getActiveElementPosition(event, offsetPos) {
-    const layoutEl = document.getElementById(`${this._activeSection}Layout`);
-    if (!layoutEl) {
-      console.error('[FreeDropEngine] 레이아웃 요소를 찾을 수 없습니다:', this._activeSection);
-      return { x: 0, y: 0 };
-    }
+    const layoutRect = this._getLayoutRect();
+    if (!layoutRect) 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;
 
-    const maxX = layoutRect.width - this._activeElement.size.w;
-    const maxY = layoutRect.height - this._activeElement.size.h;
+    // 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 clampedX = Math.min(Math.max(0, rawX), maxX);
-    const clampedY = Math.min(Math.max(0, rawY), maxY);
+    const clamped = this._clampToLayoutBounds(rawX, rawY, layoutRect);
 
     // const gridX = this._snapToGrid(rawX);
     // const gridY = this._snapToGrid(rawY);
 
-    const gridX = this._snapToGrid(clampedX);
-    const gridY = this._snapToGrid(clampedY);
+    const gridX = this._snapToGrid(clamped.x);
+    const gridY = this._snapToGrid(clamped.y);
 
     return { x: gridX, y: gridY };
   }
@@ -604,6 +642,68 @@ class FreeDropEngine {
     };
   })();
 
+  /** ---------------------------------- 키보드 이동 관련 메소드 ---------------------------------- **/
+  _handleKeyDown = (event) => {
+    const delta = ARROW_KEY_DELTA[event.key];
+    if (!delta) return;
+
+    // 텍스트 입력 중이면 방향키를 그대로 입력창에 넘김
+    const activeTag = document.activeElement?.tagName;
+    if (activeTag === 'INPUT' || activeTag === 'TEXTAREA' || document.activeElement?.isContentEditable) return;
+
+    if (this._activeMode !== 'free') return;
+    if (!this._activeElement || this._activeElement.isLocked) return;
+
+    // 마우스 드래그/리사이즈 중이면 방향키 이동 무시
+    if (this._dragState.isDragging || this._dragState.isResizing) return;
+
+    // 방향키로 인한 페이지 스크롤 등 기본 동작 방지
+    event.preventDefault();
+
+    // 새로운 keydown -> 기존 keyMoveCommitTimer 초기화
+    clearTimeout(this._keyMoveCommitTimer);
+
+    const layoutRect = this._getLayoutRect();
+    if (!layoutRect) return;
+
+    const step = this._gridSize || 1;
+    const rawX = this._activeElement.position.x + delta.x * step;
+    const rawY = this._activeElement.position.y + delta.y * step;
+
+    const clamped = this._clampToLayoutBounds(rawX, rawY, layoutRect);
+
+    this._keyMoveActive = true;
+    this._updateElementBounds(clamped);
+  };
+
+  _handleKeyUp = (event) => {
+    const delta = ARROW_KEY_DELTA[event.key];
+    if (!delta) return;
+    if (!this._keyMoveActive) return;
+
+    clearTimeout(this._keyMoveCommitTimer);
+    this._keyMoveCommitTimer = setTimeout(() => {
+      this._commitKeyMove();
+    }, KEY_MOVE_COMMIT_DELAY);
+  };
+
+  _commitKeyMove() {
+    this._keyMoveActive = false;
+    this._keyMoveCommitTimer = null;
+    this.guides = { x: null, y: null, w: null, h: null };
+
+    if (!this._activeElement) return;
+
+    this.eventBus.emit('freeDrop:requestUpdateElement', {
+      historyEvent: true,
+      elementId: this._activeElement.id,
+      position: this._activeElement.position,
+      size: this._activeElement.size,
+      guides: this.guides,
+      timestamp: Date.now(),
+    });
+  }
+
   /** ---------------------------------- 드래그 관련 메소드 ---------------------------------- **/
   /** mousedown 실행
    * @param {MouseEvent} event - 마우스 이벤트