polarvo-layout 1.0.19 → 1.0.21

package/src/library/originals/GridDropLibrary_0402.js

@@ -0,0 +1,202 @@
+import { reactive, readonly } from 'vue';
+
+function useGridDrop(api) {
+  const state = reactive({
+    elements: [],
+    activeCell: null,
+    activeElement: null,
+    activeId: null,
+  });
+
+  const _subscriptions = [];
+
+  const syncState = () => {
+    try {
+      const gridDropState = api.getGridDropState();
+      Object.assign(state, gridDropState);
+    } catch (error) {
+      console.error('[GridDropLibrary] 상태 동기화 중 오류 발생:', error);
+    }
+  };
+
+  const _subscribe = (name, handler) => {
+    const unsubscribe = api.eventBus.subscribe(name, handler);
+    _subscriptions.push(unsubscribe);
+    return unsubscribe;
+  };
+
+  // 이벤트 구독
+  const _setupSubscriptions = () => {
+    // 다시 초기화 되는 경우를 대비
+    _subscribe('system:engineInitialized', () => {
+      syncState();
+    });
+
+    _subscribe('system:enginesReset', () => {
+      syncState();
+    });
+
+    _subscribe('gridDrop:setElements', ({ elements }) => {
+      state.elements = elements;
+    });
+
+    _subscribe('gridDrop:setActiveElement', ({ action, activeElement, elements }) => {
+      // state.elements = elements;
+      state.activeElement = activeElement;
+      state.activeId = activeElement?.id ?? null;
+    });
+
+    _subscribe('gridDrop:requestUpdateActiveElement', ({ element }) => {
+      // state.elements = elements;
+      const index = state.elements.findIndex((el) => el.id === element.id);
+      if (index !== -1) {
+        state.elements[index] = element;
+
+        state.activeElement = element;
+        state.activeId = element?.id ?? null;
+
+      }
+    });
+
+    _subscribe('gridDrop:toggleLock', ({ elementId }) => {
+      const element = state.elements.find((el) => el.id === elementId);
+      if (element) {
+        element.isLocked = !element.isLocked;
+      }
+    });
+
+    _subscribe('gridDrop:requestUpdateData', ({ elements }) => {
+      state.elements = elements;
+    });
+
+    _subscribe('system:requestUpdateElements', ({ elements }) => {
+      state.elements = elements;
+    });
+
+    _subscribe('gridDrop:requestUpdateLocalBounds', ({ elementId, position, size }) => {
+      const element = state.elements.find((el) => el.id === elementId);
+
+      if (element) {
+        state.elements = state.elements.map((element) =>
+          element.id === state.activeId ? { ...state.activeElement, position: { ...position }, size: { ...size } } : element,
+        );
+      } else {
+        state.elements.push(state.activeElement);
+      }
+    });
+
+    _subscribe('gridDrop:restoredState', ({ elements }) => {
+      state.elements = elements;
+    });
+  };
+
+  if (api.eventBus) {
+    _setupSubscriptions();
+
+    // 초기화가 이미 완료된 경우 즉시 동기화
+    if (api.isReady && api.isReady()) {
+      syncState();
+    }
+  }
+
+  // 라이브러리 cleanup
+  const cleanup = () => {
+    _subscriptions.forEach((unsubscribe) => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+
+      _subscriptions.length = 0;
+    });
+  };
+
+  // 메서드
+  const getElementStyle = (type, cell) => {
+    try {
+      return api.gridDrop.getElementStyle(type, cell);
+    } catch (error) {
+      console.warn('[GridDropLibrary] getElementStyle 호출 중 오류 발생:', error);
+      return {};
+    }
+  };
+
+  const setActiveElement = (element, type) => {
+    try {
+      api.gridDrop.setActiveElement(element, type);
+    } catch (error) {
+      console.warn('[GridDropLibrary] setActiveElement 실행 중 오류 발생:', error);
+    }
+  };
+
+  // const setActiveCell = (type, cell) => {
+  //   try {
+  //     api.gridDrop.setActiveCell(type, cell);
+  //   } catch (error) {
+  //     console.warn('[GridDropLibrary] setActiveCell 호출 중 오류 발생:', error);
+  //   }
+  // };
+
+  const addElement = (elName) => {
+    try {
+      api.gridDrop.addElement(elName);
+    } catch (error) {
+      console.warn('[GridDropLibrary] addElement 호출 중 오류 발생:', error);
+    }
+  };
+
+  const toggleLock = () => {
+    try {
+      api.gridDrop.toggleLock();
+    } catch (error) {
+      console.warn('[GridDropLibrary] toggleLock 호출 중 오류 발생:', error);
+    }
+  };
+
+  const startDrag = (event, id) => {
+    try {
+      api.gridDrop.startDrag(event, id);
+    } catch (error) {
+      console.warn('[GridDropLibrary] startDrag 호출 중 오류 발생:', error);
+    }
+  };
+
+  const handleMouseDown = (event, id) => {
+    try {
+      api.gridDrop.handleMouseDown(event, id);
+    } catch (error) {
+      console.warn('[GridDropLibrary] handleMouseDown 실행 중 오류 발생:', error);
+    }
+  };
+
+  const detectHoverCell = (cell) => {
+    try {
+      api.gridDrop.detectHoverCell(cell);
+    } catch (error) {
+      console.warn('[GridDropLibrary] detectHoverCell 호출 중 오류 발생:', error);
+    }
+  };
+
+  const startResize = (event, id) => {
+    try {
+      api.gridDrop.startResize(event, id);
+    } catch (error) {
+      console.warn('[GridDropLibrary] startResize 호출 중 오류 발생:', error);
+    }
+  };
+
+  return {
+    state: readonly(state),
+    cleanup,
+    getElementStyle,
+    setActiveElement,
+    // setActiveCell,
+    addElement,
+    toggleLock,
+    startDrag,
+    handleMouseDown,
+    detectHoverCell,
+    startResize,
+  };
+}
+
+export default useGridDrop;

package/src/library/originals/HistoryLibrary_0402.js

@@ -0,0 +1,98 @@
+import { reactive, readonly } from 'vue';
+
+function useHistory(api) {
+  const state = reactive({
+    undoable: false,
+    redoable: false,
+  });
+
+  const _subscriptions = [];
+
+  const syncState = () => {
+    try {
+      const historyState = api.getHistoryState();
+      Object.assign(state, historyState);
+    } catch (error) {
+      console.error('[HistoryLibrary] 상태 동기화 중 오류 발생:', error);
+    }
+  };
+
+  const _subscribe = (name, handler) => {
+    const unsubscribe = api.eventBus.subscribe(name, handler);
+    _subscriptions.push(unsubscribe);
+    return unsubscribe;
+  };
+
+  // 이벤트 구독
+  const _setupSubscriptions = () => {
+    // 다시 초기화 되는 경우를 대비
+    _subscribe('system:engineInitialized', () => {
+      syncState();
+    });
+
+    _subscribe('system:enginesReset', () => {
+      syncState();
+    });
+
+    _subscribe('history:requestAddHistory', ({ historyState }) => {
+      state.undoable = historyState.undoable;
+      state.redoable = historyState.redoable;
+    });
+
+    _subscribe('history:undoAction', ({ historyState }) => {
+      state.undoable = historyState.undoable;
+      state.redoable = historyState.redoable;
+    });
+
+    _subscribe('history:redoAction', ({ historyState }) => {
+      state.undoable = historyState.undoable;
+      state.redoable = historyState.redoable;
+    });
+  };
+
+  if (api.eventBus) {
+    _setupSubscriptions();
+
+    // 초기화가 이미 완료된 경우 즉시 동기화
+    if (api.isReady && api.isReady()) {
+      syncState();
+    }
+  }
+
+  // 라이브러리 cleanup
+  const cleanup = () => {
+    _subscriptions.forEach((unsubscribe) => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+
+      _subscriptions.length = 0;
+    });
+  };
+
+  // 메서드
+  const undo = () => {
+    try {
+      api.history.undo();
+    } catch (error) {
+      console.error('[HistoryLibrary] undo 중 오류 발생:', error);
+    }
+  };
+
+  const redo = () => {
+    try {
+      api.history.redo();
+    } catch (error) {
+      console.error('[HistoryLibrary] redo 중 오류 발생:', error);
+    }
+  };
+
+  return {
+    state: readonly(state),
+    cleanup,
+    undo,
+    redo,
+  };
+}
+
+export default useHistory;

package/src/library/originals/LayoutLibrary_0402.js

@@ -0,0 +1,264 @@
+import { cloneDeep } from 'lodash-es';
+import { reactive, readonly } from 'vue';
+
+function useLayout(api) {
+  const state = reactive({
+    layoutName: null,
+    layoutSource: {},
+
+    elements: null,
+    layoutData: null,
+    activeSection: null,
+    activeMode: null,
+    activeConfig: null,
+
+    activeData: null,
+
+    gapSize: null,
+    gridNumber: {},
+    gridRatio: {},
+  });
+
+  const _subscriptions = [];
+
+  const syncState = () => {
+    try {
+      const layoutState = api.getLayoutState();
+      Object.assign(state, layoutState);
+    } catch (error) {
+      console.error('[LayoutLibrary] 상태 동기화 중 오류 발생:', error);
+    }
+  };
+
+  const _subscribe = (name, handler) => {
+    const unsubscribe = api.eventBus.subscribe(name, handler);
+    _subscriptions.push(unsubscribe);
+    return unsubscribe;
+  };
+
+  // 이벤트 구독
+  const _setupSubscriptions = () => {
+    // 다시 초기화 되는 경우를 대비
+    _subscribe('system:engineInitialized', () => {
+      syncState();
+    });
+
+    _subscribe('system:enginesReset', () => {
+      syncState();
+    });
+
+    // layoutName 변경 감지 (layoutData, gridNumber, gridRatio가 함께 초기화됨)
+    _subscribe('layout:setLayoutName', ({ $screenConfig, $layoutData, $gridNumber, $gridRatio }) => {
+      state.layoutName = $screenConfig.layoutName;
+      state.layoutData = $layoutData;
+      state.gridNumber = $gridNumber;
+      state.gridRatio = $gridRatio;
+      state.gapSize = $screenConfig.gapSize;
+    });
+
+    _subscribe('layout:updateLayoutName', ({ layoutName, layoutData, gridNumber, gridRatio, gapSize }) => {
+      state.layoutName = layoutName;
+      state.layoutData = layoutData;
+      state.gridNumber = gridNumber;
+      state.gridRatio = gridRatio;
+      if (gapSize) {
+        state.gapSize = gapSize;
+      }
+    });
+
+    // gapSize 변경 감지
+    _subscribe('layout:updateGapSize', ({ $gapSize }) => {
+      state.gapSize = $gapSize;
+    });
+
+    // gridRatio 변경 감지
+    _subscribe('layout:updateRatio', ({ $gridRatio }) => {
+      state.gridRatio = $gridRatio;
+    });
+
+    // activeSection 변경 감지 (activeData가 함께 초기화됨)
+    _subscribe('system:updateActiveSection', ({ activeSection, activeData }) => {
+      state.activeSection = activeSection;
+      state.activeData = activeData;
+    });
+
+    // elements 변경 감지
+    _subscribe('system:requestUpdateActiveElement', ({ elementId, element }) => {
+      const index = state.elements.findIndex((x) => x.id === elementId);
+      if (index !== -1) {
+        state.elements[index] = element; // 업데이트
+      }
+    });
+
+    _subscribe('system:setElements', ({ elements }) => {
+      state.elements = elements;
+    });
+
+
+    _subscribe('system:updateLayoutData', ({ section, changes, $mode, $config }) => {
+      state.layoutData[section] = { ...state.layoutData[section], ...changes };
+      state.activeMode = $mode;
+      state.activeConfig = $config;
+    });
+
+    // _subscribe('system:updateActiveSectionConfig', ({ layoutData, activeData }) => {
+    //   state.layoutData = layoutData;
+    //   state.activeData = activeData;
+    // });
+
+    _subscribe('system:requestUpdateData', ({ layoutData, activeData, elements }) => {
+      state.layoutData = layoutData;
+      state.activeData = activeData;
+      state.elements = elements;
+    });
+
+    _subscribe('system:requestUpdateElements', ({ elements }) => {
+      state.elements = elements;
+    });
+
+    _subscribe('system:restoredState', ({ stateData }) => {
+      state.elements = stateData.elements;
+      state.layoutData = stateData.layoutData;
+      state.activeSection = stateData.activeSection;
+
+      // state.layoutData = cloneDeep(api.layout.getLayoutData());
+      // state.activeData = cloneDeep(api.layout.getActiveData());
+    });
+
+    _subscribe('layout:restoredState', ({ stateData }) => {
+      state.layoutName = stateData.layoutName;
+      state.layoutData = cloneDeep(stateData.layoutData);
+      state.gridNumber = { ...stateData.gridNumber };
+      state.gridRatio = { ...stateData.gridRatio };
+      state.gapSize = stateData.gapSize;
+    });
+  };
+
+  if (api.eventBus) {
+    _setupSubscriptions();
+
+    // 초기화가 이미 완료된 경우 즉시 동기화
+    if (api.isReady && api.isReady()) {
+      syncState();
+    }
+  }
+
+  // 라이브러리 cleanup
+  const cleanup = () => {
+    _subscriptions.forEach((unsubscribe) => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+
+      _subscriptions.length = 0;
+    });
+  };
+
+  // 메서드
+   const getContainerSize = () => {
+    try {
+      return api.layout.getContainerSize();
+    } catch (error) {
+      console.warn('[FreeDropLibrary] getElementStyle 실행 중 오류 발생:', error);
+      return {};
+    }
+  };
+
+  const setContainerSize = () => {
+    try {
+      api.layout.setContainerSize();
+    } catch (error) {
+      console.error('[LayoutLibrary] setContainerSize 실행 중 오류 발생:', error);
+    }
+  };
+  
+  const setLayoutName = (name, userData = null, setting = false) => {
+    try {
+      api.layout.setLayoutName(name, userData, setting);
+    } catch (error) {
+      console.error('[LayoutLibrary] setLayoutName 실행 중 오류 발생:', error);
+    }
+  };
+
+  const setGapSize = (size) => {
+    try {
+      api.layout.setGapSize(size);
+    } catch (error) {
+      console.error('[useLayout] setGapSize 실행 중 오류 발생:', error);
+    }
+  };
+
+  const setRatio = (type, index, ratio) => {
+    try {
+      api.layout.setRatio(type, index, ratio);
+    } catch (error) {
+      console.error('[useLayout] setRatio 실행 중 오류 발생:', error);
+    }
+  };
+
+  // const setUserLayoutData = (userData) => {
+  //   try {
+  //     api.layout.setUserLayoutData(userData);
+  //   } catch (error) {
+  //     console.error('[useLayout] setUserLayoutData 실행 중 오류 발생:', error);
+  //   }
+  // };
+
+  const setActiveSection = (name) => {
+    try {
+      api.layout.setActiveSection(name);
+    } catch (error) {
+      console.error('[useLayout] setActiveSection 실행 중 오류 발생:', error);
+    }
+  };
+
+  const setElements = (elements) => {
+    try {
+      api.layout.setElements(elements);
+    } catch (error) {
+      console.error('[useLayout] setElements 실행 중 오류 발생:', error);
+    }
+  };
+
+  const updateActiveElement = (id, changes) => {
+    try {
+      api.layout.updateActiveElement(id, changes);
+    } catch (error) {
+      console.error('[useLayout] updateActiveElement 실행 중 오류 발생:', error);
+    }
+  };
+
+  const setSectionMode = (mode) => {
+    try {
+      api.layout.setSectionMode(mode);
+    } catch (error) {
+      console.error('[useLayout] setSectionMode 실행 중 오류 발생:', error);
+    }
+  };
+
+  const setSectionConfig = (type, config) => {
+    try {
+      api.layout.setSectionConfig(type, config);
+    } catch (error) {
+      console.error('[useLayout] setSectionConfig 실행 중 오류 발생:', error);
+    }
+  };
+
+  return {
+    state: readonly(state),
+    cleanup,
+    getContainerSize,
+    setContainerSize,
+    setLayoutName,
+    setGapSize,
+    setRatio,
+    // setUserLayoutData,
+    setActiveSection,
+    setElements,
+    updateActiveElement,
+    setSectionMode,
+    setSectionConfig,
+  };
+}
+
+export default useLayout;

package/src/utils/index.js

@@ -1,8 +1,13 @@
 import directives from './directives/index.js';
 import dataConverter from './data-converter.js';
 
+const calculateAspectRatio = (aspectRatioString) => {
+  const [width, height] = aspectRatioString.split('/').map(Number);
+  return width / height;
+};
 const utils = {
-    directives,
-    dataConverter,
-}
+  directives,
+  dataConverter,
+  calculateAspectRatio,
+};
 export default utils;