polarvo-layout 1.0.19 → 1.0.21

package/src/core/engines/originals/GridDropEngine_0402.js

@@ -0,0 +1,557 @@
+import { cloneDeep, debounce } from 'lodash-es';
+
+// event 발행 시 'gridDrop'으로 시작하는 이름 사용
+class GridDropEngine {
+  constructor({ eventBus, options }) {
+    this.eventBus = eventBus;
+    this.resource = options.resource;
+
+    this._elements = []; // 원본 요소 목록 (EngineManager과 동기화)
+    this._elementsUpdate = false; // 원본 요소 목록 변경 플래그
+    this._gridElements = []; // 로컬에서 사용하는 요소 목록
+
+    this._activeData = null;
+    this._activeSection = null;
+    this._activeElement = null;
+
+    this._targetCell = null; // 드래그 대상 셀
+
+    this._dragState = {
+      isDragging: false, // 드래그 상태
+      isResizing: false, // 리사이징 상태
+      activeCell: null, // 현재 선택한 셀 정보
+    };
+
+    this._startPos = { x: 0, y: 0 }; // 드래그 시작 위치
+    this._startSize = { w: 0, h: 0 }; // 드래그 시작 크기
+    this._alreadyExist = false; // 배치요소 기존재 여부
+
+    this._subscriptions = []; // 구독 해제 함수 저장용
+    this._setupSubscriptions();
+  }
+
+  /** ---------------------------------- 구독 관련 메소드 ---------------------------------- **/
+  /** [내부함수] 구독 및 unsubscribe 함수 저장
+   * @param {string} name - 이벤트 이름
+   * @param {function} handler - 이벤트 핸들러 함수
+   * @return {function} - unsubscribe 함수
+   */
+  _subscribe(name, handler) {
+    const unsubscribe = this.eventBus.subscribe(name, handler);
+    this._subscriptions.push(unsubscribe);
+    return unsubscribe;
+  }
+
+  /** [내부함수] 구독 설정 */
+  _setupSubscriptions() {
+    // 초기화 완료 이벤트 구독 - from EngineManager
+    this._subscribe('system:engineInitialized', () => {
+      this._initialize();
+    });
+
+    this._subscribe('system:enginesReset', () => {
+      this._initialize();
+    });
+
+    // layoutData 변경 감지
+    this._subscribe('system:updateLayoutData', ({ layoutData, activeData }) => {
+      this._activeData = activeData;
+    });
+
+    // activeSection 변경 감지 (activeData가 함께 초기화됨)
+    this._subscribe('system:updateActiveSection', ({ activeSection, activeData }) => {
+      this._activeSection = activeSection;
+      this._activeData = activeData;
+      // this.setActiveElement(null);
+    });
+
+    this._subscribe('system:setElements', ({ elements }) => {
+      this._elements = elements;
+      this._elementsUpdate = true;
+
+      // 활성화 요소 초기화
+      this.setActiveElement(null);
+
+      this.eventBus.emit('gridDrop:setElements', {
+        elements: cloneDeep(this.gridElements),
+        timestamp: Date.now(),
+      });
+    });
+
+    this._subscribe('system:updateActiveSectionConfig', ({  activeData }) => {
+      if (activeData?.mode == 'grid') {
+        this._activeData = activeData;
+      }
+    });
+
+    this._subscribe('system:requestUpdateData', ({ action, elements, elementId,  activeData }) => {
+      this._elements = elements;
+      this._elementsUpdate = true;
+      this.setActiveElement(this._elements.find((x) => x.id === elementId) || null, action);
+
+      if (activeData?.mode == 'grid') {
+        this._activeData = activeData;
+      }
+
+      this.eventBus.emit('gridDrop:requestUpdateData', {
+        elements: cloneDeep(this.gridElements),
+        timestamp: Date.now(),
+      });
+    });
+
+    this._subscribe('system:requestUpdateActiveElement', ({ elementId, element }) => {
+      const index = this._elements.findIndex((x) => x.id === elementId);
+
+      if (index !== -1) {
+        this._elements[index] = element; // 업데이트
+        this._elementsUpdate = true;
+      }
+
+      this.setActiveElement(element, 'update');
+
+      this.eventBus.emit('gridDrop:requestUpdateActiveElement', {
+        element: element,
+        timestamp: Date.now(),
+      });
+    });
+
+    this._subscribe('system:requestUpdateElements', ({ elements }) => {
+      this._elements = elements;
+      this._elementsUpdate = true;
+    });
+
+    this._subscribe('system:restoredState', ({ stateData }) => {
+      this._elements = stateData.elements;
+      this._elementsUpdate = true;
+      this.setActiveElement(null);
+
+      this.eventBus.emit('gridDrop:restoredState', {
+        elements: cloneDeep(this.gridElements),
+        timestamp: Date.now(),
+      });
+    });
+  }
+
+  /** 삭제 및 정리 */
+  destroy() {
+    this._subscriptions.forEach((unsubscribe) => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+    });
+
+    this._initialize();
+
+    this._subscriptions = [];
+    this.eventBus = null;
+    this.resource = null;
+
+    console.log('[GridDropEngine] 삭제 완료');
+  }
+
+  /** 리소스 가져오기
+   * @return {Array} - 레이아웃 리소스의 요소 배열
+   */
+  get elementResource() {
+    if (!this.resource) {
+      console.error('[GridDropEngine] 리소스가 설정되지 않았습니다.');
+      return [];
+    }
+    return this.resource.elements || [];
+  }
+
+  /** 전체 요소 중 그리드 배치 요소만 반환
+   * @return {Array} - 그리드 배치 요소 배열
+   */
+  get gridElements() {
+    if (this._elementsUpdate) {
+      this._elementsUpdate = false;
+
+      const base = this._elements.filter((x) => x.mode === 'grid');
+
+      if (this._activeElement) {
+        const exists = base.find((x) => x.id === this._activeElement?.id);
+
+        // 기존 배치요소인 경우
+        if (exists) {
+          // 기존 배치요소와 activeElement 교체
+          this._gridElements = base.map((element) => (element.id === this._activeElement.id ? this._activeElement : element));
+        } else {
+          this._gridElements = [...base, this._activeElement];
+        }
+      } else {
+        this._gridElements = base;
+      }
+    }
+
+    return this._gridElements;
+  }
+
+  /** ---------------------------------- 공통 메소드 ---------------------------------- **/
+  /** [내부함수] 내부 변수 초기화 */
+  _initialize() {
+    this._dragState = {
+      isDragging: false,
+      isResizing: false,
+    };
+
+    this._startPos = { x: 0, y: 0 };
+    this._startSize = { w: 0, h: 0 };
+
+    this._activeData = null;
+    this._activeSection = null;
+    this._activeElement = null;
+
+    this._elementsUpdate = false;
+  }
+
+  /** 활성화 배치요소 변경
+   * @param {object|null} element - 활성화할 배치요소 객체 (null인 경우 비활성화)
+   * @param {string|null} action - 변경 액션 (예: 'click', 'reset' 등)
+   */
+  setActiveElement(element, action = null) {
+    // 이미 활성화된 요소를 다시 활성화하려는 경우 무시
+    if (element && this._activeElement?.id === element?.id) return;
+
+    this._activeElement = element;
+    this._elementsUpdate = true;
+
+    this.eventBus.emit('gridDrop:setActiveElement', {
+      action: action,
+      activeElement: this._activeElement,
+      // elements: cloneDeep(this.gridElements),
+      timestamp: Date.now(),
+    });
+  }
+
+  /** 그리드 요소 스타일 반환
+   * @param {string} type - 요소 타입 ('empty' 또는 'element')
+   * @param {object} cell - 셀 정보
+   * @returns {object} - 스타일 객체
+   */
+  getElementStyle(type, cell) {
+    if (type == 'empty') {
+      return {
+        gridArea: `${cell.row} / ${cell.col} / span 1 / span 1`,
+      };
+    } else if (type == 'element') {
+      const { row, col } = cell.position;
+      const { rowSpan, colSpan } = cell.size;
+
+      return {
+        gridArea: `${row} / ${col} / span ${rowSpan} / span ${colSpan}`,
+      };
+    }
+  }
+
+  /** isLocked 값 변경 */
+  toggleLock() {
+    if (!this._activeElement) {
+      console.error('[GridDropEngine] 활성화된 요소가 없습니다.');
+      return;
+    }
+    this._activeElement.isLocked = !this._activeElement.isLocked;
+    // this._elementsUpdate = true;
+
+    this.eventBus.emit('gridDrop:toggleLock', {
+      elementId: this._activeElement.id,
+      timestamp: Date.now(),
+    });
+  }
+
+  /** [내부함수] 드래그 계산
+   * @param {object} currentPos - 현재 마우스 위치 ({ x: , y: })
+   * @param {object} cellSize - 그리드 셀 크기 ({ w: , h: })
+   * @returns {object} - 드래그된 셀 수 ({ dx: , dy: })
+   */
+  _calculateDrag(currentPos, cellSize) {
+    const { gridGap } = this._activeData.config;
+
+    const dx = Math.round((currentPos.x - this._startPos.x) / (cellSize.w + gridGap));
+    const dy = Math.round((currentPos.y - this._startPos.y) / (cellSize.h + gridGap));
+
+    return { dx, dy };
+  }
+
+  /** [내부함수] 그리드 셀 너비 계산
+   * @param {HTMLElement} element - 활성 섹션 엘리먼트
+   * @returns {number} - 그리드 셀 너비
+   */
+  _getGridCellWidth(element) {
+    const { gridGap, gridColumns } = this._activeData.config;
+    const totalWidth = element.clientWidth - gridGap * (gridColumns - 1);
+    return totalWidth / gridColumns;
+  }
+
+  /** [내부함수] 그리드 셀 높이 계산
+   * @param {HTMLElement} element - 활성 섹션 엘리먼트
+   * @returns {number} - 그리드 셀 높이
+   */
+  _getGridCellHeight(element) {
+    const { gridGap, gridRows } = this._activeData.config;
+    const totalHeight = element.clientHeight - gridGap * (gridRows - 1);
+    return totalHeight / gridRows;
+  }
+
+  /** [내부함수] 기존 아이템과 충돌 여부 감지
+   * @param {object} position - 검사할 위치 정보 ({ column: , row: })
+   * @param {object} size - 검사할 크기 정보 ({ colSpan: , rowSpan: })
+   * @returns {boolean} - 충돌 여부
+   */
+  _detectElementCollision(position, size) {
+    if (!this._activeElement) {
+      console.error('[GridDropEngine] 충돌 검사를 위한 요소 정보를 찾을 수 없습니다:');
+      return false;
+    }
+
+    return this.gridElements
+      .filter((item) => item.section === this._activeElement.section)
+      .some((item) => {
+        if (item.id === this._activeElement.id) return false; // 자기 자신은 무시
+
+        const itemPosition = item.position;
+        const itemSize = item.size;
+
+        return !(
+          position.row >= itemPosition.row + itemSize.rowSpan ||
+          position.row + size.rowSpan <= itemPosition.row ||
+          position.col >= itemPosition.col + itemSize.colSpan ||
+          position.col + size.colSpan <= itemPosition.col
+        );
+      });
+  }
+
+  /** ---------------------------------- 배치요소 관련 메소드 ---------------------------------- **/
+  /** 배치요소 신규 추가 - 메뉴에서 추가 아이템 선택
+   * @param {string} elName - 추가할 아이템 이름
+   */
+  addElement(elName) {
+    if (!this._activeData || !this._dragState.activeCell) {
+      console.error('[GridDropEngine] 활성화된 데이터가 없습니다.');
+      return;
+    }
+    if (this._activeData.mode !== 'grid') return;
+
+    const element = {
+      id: elName + '_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7),
+      type: elName,
+      mode: 'grid',
+      position: { ...this._dragState.activeCell },
+      size: { colSpan: 1, rowSpan: 1 },
+      section: this._activeSection,
+      isLocked: false,
+    };
+
+    this.setActiveElement(null, 'add');
+
+    this.eventBus.emit('gridDrop:requestAddElement', {
+      element: element,
+      timestamp: Date.now(),
+    });
+  }
+
+  /** [내부함수] 배치요소 삭제
+   * @param {string} id - 삭제할 배치요소 ID
+   */
+  _deleteElement(id) {
+    const element = this.gridElements.find((el) => el.id === id);
+    if (!element) {
+      console.error('[GridDropEngine] 삭제할 아이템을 찾을 수 없습니다:', id);
+      return;
+    }
+
+    if (confirm(`선택하신 ${element.type} 아이템을 삭제하시겠습니까?`)) {
+      this.eventBus.emit('gridDrop:requestDeleteElement', {
+        elementId: id,
+        timestamp: Date.now(),
+      });
+    }
+  }
+
+  /** 호버 중인 셀 감지
+   * @param {object} cell - 호버 중인 셀 정보
+   */
+  detectHoverCell(cell) {
+    if (!this._activeElement) return;
+    // if (!this._dragState.isDragging) return;
+    this._targetCell = cell;
+  }
+
+  /** ---------------------------------- 드래그 관련 메소드 ---------------------------------- **/
+  /** mousedown 실행 */
+  handleMouseDown(event, item = null) {
+    // 리사이징 중이면 드래그 불가
+    if (this._dragState.isResizing) return;
+
+    // 기존 아이템인 경우
+    if (item.id) {
+      // 우클릭 시 해당 아이템 삭제
+      if (event.button === 2) {
+        this._deleteElement(item.id);
+        return false;
+      }
+      const element = this.gridElements.find((el) => el.id === item.id);
+      this.setActiveElement(element, 'click');
+      this._dragState.activeCell = { ...element.position };
+      this._alreadyExist = true;
+
+      // 배치요소 잠겨 있으면 드래그/삭제 불가
+      if (element.isLocked) return;
+    } else {
+      this._dragState.activeCell = { ...item };
+      this._alreadyExist = false;
+    }
+
+    document.addEventListener('mousemove', this._detectDragIntent);
+    document.addEventListener('mouseup', this._cancelDragIntent);
+  }
+
+  _detectDragIntent = () => {
+    if (this._targetCell && this._activeElement) {
+      const { col, row } = this._targetCell;
+      if (this._activeElement.position.col !== col || this._activeElement.position.row !== row) {
+        // 의도 감지 리스너 제거
+        document.removeEventListener('mousemove', this._detectDragIntent);
+        document.removeEventListener('mouseup', this._cancelDragIntent);
+
+        this._dragState.isDragging = true;
+
+        this.eventBus.emit('gridDrop:startDrag', { timestamp: Date.now() });
+        document.addEventListener('mousemove', this._startDragMove);
+        document.addEventListener('mouseup', this._stopDrag);
+      }
+    }
+  };
+  _cancelDragIntent = () => {
+    if (!this._alreadyExist) {
+      this.eventBus.emit('gridDrop:requestOpenElementBar', {
+        timestamp: Date.now(),
+      });
+
+      this._activeElement = null;
+    }
+
+    document.removeEventListener('mousemove', this._detectDragIntent);
+    document.removeEventListener('mouseup', this._cancelDragIntent);
+  };
+
+  /** [내부함수] 드래그 진행 */
+  _startDragMove = () => {
+    if (this._dragState.isResizing || !this._targetCell) return;
+    // 단순 클릭 시에는 위치 변경 없음
+    const { col, row } = this._targetCell;
+    if (this._dragState.isDragging) {
+      this._activeElement.position.col = col;
+      this._activeElement.position.row = row;
+
+      this.eventBus.emit('gridDrop:requestUpdateLocalBounds', {
+        elementId: this._activeElement.id,
+        position: this._activeElement.position,
+        size: this._activeElement.size,
+        timestamp: Date.now(),
+      });
+    }
+  };
+
+  /** [내부함수] 드래그 종료 */
+  _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(),
+      });
+    }
+
+    this._dragState.isDragging = false;
+    this._targetCell = null;
+
+    document.removeEventListener('mousemove', this._startDragMove);
+    document.removeEventListener('mouseup', this._stopDrag);
+  };
+
+  /** ---------------------------------- 리사이징 관련 메소드 ---------------------------------- **/
+  /** 리사이징 시작
+   * @param {MouseEvent} event - 마우스 이벤트
+   * @param {string} id - 배치요소 ID
+   */
+  startResize(event, id) {
+    if (!this._activeElement) {
+      console.error('[GridDropEngine] 활성화된 배치요소를 찾을 수 없습니다.');
+      return false;
+    }
+    if (this._activeElement.id !== id) return false;
+
+    // 배치요소 잠겨 있으면 리사이즈 불가
+    if (this._activeElement.isLocked) return;
+
+    this._startPos = { x: event.clientX, y: event.clientY };
+    this._startSize = { w: this._activeElement.size.colSpan, h: this._activeElement.size.rowSpan };
+    this._dragState.isResizing = true;
+
+    document.addEventListener('mousemove', this._startResizeMove);
+    document.addEventListener('mouseup', this._stopResize);
+  }
+
+  /** [내부함수] 리사이징 진행
+   * @param {MouseEvent} event - 마우스 이벤트
+   */
+  _startResizeMove = (event) => {
+    // 리사이징 중인 경우에만 드래그 가능
+    if (!this._dragState.isResizing) return;
+
+    const { gridColumns, gridRows } = this._activeData.config;
+
+    const activeSection = document.querySelector('.section-active');
+    const { dx, dy } = this._calculateDrag(
+      { x: event.clientX, y: event.clientY },
+      {
+        w: this._getGridCellWidth(activeSection),
+        h: this._getGridCellHeight(activeSection),
+      },
+    );
+
+    if (dx !== 0 || dy !== 0) {
+      const { col, row } = this._activeElement.position;
+      const newColSpan = Math.max(1, Math.min(gridColumns - col + 1, this._startSize.w + dx));
+      const newRowSpan = Math.max(1, Math.min(gridRows - row + 1, this._startSize.h + dy));
+
+      if (!this._detectElementCollision(this._activeElement.position, { colSpan: newColSpan, rowSpan: newRowSpan })) {
+        this._activeElement.size.colSpan = newColSpan;
+        this._activeElement.size.rowSpan = newRowSpan;
+
+        this.eventBus.emit('gridDrop:requestUpdateLocalBounds', {
+          elementId: this._activeElement.id,
+          position: this._activeElement.position,
+          size: this._activeElement.size,
+          timestamp: Date.now(),
+        });
+      }
+    }
+  };
+
+  /** [내부함수] 리사이징 종료 */
+  _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(),
+      });
+    }
+
+    this._dragState.isResizing = false;
+    this._targetCell = null;
+    this._startPos = { x: 0, y: 0 };
+    this._startSize = { w: 0, h: 0 };
+
+    document.removeEventListener('mousemove', this._startResizeMove);
+    document.removeEventListener('mouseup', this._stopResize);
+  };
+}
+
+export default GridDropEngine;