polarvo-layout 1.0.19 → 1.0.21

package/src/library/DisplayLibrary.js

@@ -37,30 +37,27 @@ function useDisplay(api) {
     });
 
     // layoutName 세팅 감지
-    _subscribe('display:setLayoutName', ({ displayMode, displaySize }) => {
-      state.displayMode = displayMode;
-      state.displaySize = { ...displaySize };
+    _subscribe('layout:setLayoutName', ({ $screenConfig }) => {
+      state.displayMode = $screenConfig.displayMode;
+      state.displaySize = { ...$screenConfig.displaySize };
     });
 
     // activeMenu 변경 감지
-    _subscribe('display:updateActiveMenu', ({ menu }) => {
-      state.activeMenu = menu;
+    _subscribe('display:updateActiveMenu', ({ $menu }) => {
+      state.activeMenu = $menu;
     });
 
     // activeDesign 변경 감지
-    _subscribe('display:updateActiveDesign', ({ design }) => {
-      state.activeDesign = design;
+    _subscribe('display:updateActiveDesign', ({ $design }) => {
+      state.activeDesign = $design;
     });
 
     // displayMode 변경 감지 (displaySize가 함께 초기화됨)
-    _subscribe('display:updateDisplayMode', ({ displayMode, displaySize }) => {
-      state.displayMode = displayMode;
-      state.displaySize = { ...displaySize };
-    });
-
-    // displaySize 변경 감지 (px 또는 percent 값 변경 감지)
-    _subscribe('display:updateDisplaySize', ({ displaySize }) => {
-      state.displaySize = { ...displaySize };
+    _subscribe('display:displayChanged', ({ type, $displayMode, $displaySize }) => {
+      if (type === 'mode') {
+        state.displayMode = $displayMode;
+      }
+      state.displaySize = { ...$displaySize };
     });
 
     _subscribe('display:restoredState', ({ stateData }) => {
@@ -118,9 +115,9 @@ function useDisplay(api) {
 
   const setDisplaySize = (type, size) => {
     try {
-      api.display.setDisplaySize(type, size);
+      return api.display.setDisplaySize(type, size);
     } catch (error) {
-      console.error('[useDisplay] setDisplaySize 실행 중 오류 발생:', error);
+      console.error('[DisplayLibrary] setDisplaySize 실행 중 오류 발생:', error);
     }
   };
 

package/src/library/FreeDropLibrary.js

@@ -62,6 +62,8 @@ function useFreeDrop(api) {
       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;
       }
     });
 
@@ -74,12 +76,12 @@ function useFreeDrop(api) {
 
     _subscribe('freeDrop:requestUpdateData', ({ elements, guides }) => {
       state.elements = elements;
-      state.guides = guides;
+      state.guides = guides ?? { x: null, y: null, w: null, h: null };
     });
 
-    _subscribe('system:requestUpdateElements', ({ elements, guides }) => {
-      state.elements = elements;
-      state.guides = guides;
+    _subscribe('system:requestElementsScale', ({ $elements, guides }) => {
+      state.elements = $elements;
+      state.guides = guides ?? { x: null, y: null, w: null, h: null };
     });
 
     _subscribe('freeDrop:requestUpdateLocalBounds', ({ elementId, position, size, guides }) => {

package/src/library/GridDropLibrary.js

@@ -51,11 +51,9 @@ function useGridDrop(api) {
       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 }) => {
@@ -69,8 +67,8 @@ function useGridDrop(api) {
       state.elements = elements;
     });
 
-    _subscribe('system:requestUpdateElements', ({ elements }) => {
-      state.elements = elements;
+    _subscribe('system:requestElementsScale', ({ $elements }) => {
+      state.elements = $elements;
     });
 
     _subscribe('gridDrop:requestUpdateLocalBounds', ({ elementId, position, size }) => {

package/src/library/LayoutLibrary.js

@@ -9,6 +9,9 @@ function useLayout(api) {
     elements: null,
     layoutData: null,
     activeSection: null,
+    activeMode: null,
+    activeConfig: null,
+
     activeData: null,
 
     gapSize: null,
@@ -45,37 +48,43 @@ function useLayout(api) {
     });
 
     // layoutName 변경 감지 (layoutData, gridNumber, gridRatio가 함께 초기화됨)
-    _subscribe('layout:setLayoutName', ({ screenConfig, gridNumber, gridRatio }) => {
-      state.layoutName = screenConfig.layoutName;
-      state.layoutData = screenConfig.layoutData;
-      state.gridNumber = gridNumber;
-      state.gridRatio = gridRatio;
-      state.gapSize = screenConfig.gapSize;
+    _subscribe('layout:setLayoutName', ({ $screenConfig, $layoutData, $gridNumber, $gridRatio }) => {
+      state.layoutName = $screenConfig.layoutName;
+      state.layoutData = $layoutData;
+      state.gridNumber = $gridNumber;
+      state.gridRatio = $gridRatio;
+      state.gapSize = $screenConfig.gapSize;
+
+      state.activeSection = 'section1'; // 초기 활성 섹션 설정 (필요에 따라 조정)
+      state.activeMode = $layoutData.section1?.mode || 'free';
+      state.activeConfig = $layoutData.section1?.config || {};
     });
-    _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;
+
+    _subscribe('layout:updateLayoutName', ({ $layoutName, $layoutData, $gridNumber, $gridRatio, $gapSize }) => {
+      state.layoutName = $layoutName;
+      state.layoutData = $layoutData;
+      state.gridNumber = $gridNumber;
+      state.gridRatio = $gridRatio;
+      if ($gapSize != null) {
+        state.gapSize = $gapSize;
       }
     });
 
     // gapSize 변경 감지
-    _subscribe('layout:updateGapSize', ({ gapSize }) => {
-      state.gapSize = gapSize;
+    _subscribe('layout:updateGapSize', ({ $gapSize }) => {
+      state.gapSize = $gapSize;
     });
 
-    // gridNumber 변경 감지
-    _subscribe('layout:updateRatio', ({ gridRatio }) => {
-      state.gridRatio = gridRatio;
+    // gridRatio 변경 감지
+    _subscribe('layout:updateRatio', ({ $type, $gridRatio }) => {
+      state.gridRatio[$type] = [...$gridRatio[$type]];
     });
 
     // activeSection 변경 감지 (activeData가 함께 초기화됨)
-    _subscribe('system:updateActiveSection', ({ activeSection, activeData }) => {
-      state.activeSection = activeSection;
-      state.activeData = activeData;
+    _subscribe('system:updateActiveSection', ({ $section, $mode, $config }) => {
+      state.activeSection = $section;
+      state.activeMode = $mode;
+      state.activeConfig = $config;
     });
 
     // elements 변경 감지
@@ -86,32 +95,29 @@ function useLayout(api) {
       }
     });
 
-    _subscribe('system:setElements', ({ elements }) => {
-      state.elements = elements;
+    _subscribe('system:setElements', ({ $elements }) => {
+      state.elements = $elements;
     });
 
-    _subscribe('system:updateActiveSectionConfig', ({ layoutData, activeData }) => {
-      state.layoutData = layoutData;
-      state.activeData = activeData;
+    _subscribe('layout:updateLayoutData', ({ $layoutData, $section, $mode, $config }) => {
+      state.activeSection = $section;
+      state.layoutData[$section] = { ...$layoutData[$section] };
+      state.activeMode = $mode;
+      state.activeConfig = $config;
     });
 
-    _subscribe('system:requestUpdateData', ({ layoutData, activeData, elements }) => {
-      state.layoutData = layoutData;
-      state.activeData = activeData;
-      state.elements = elements;
+    _subscribe('system:requestUpdateData', ({ $elements }) => {
+      state.elements = $elements;
     });
 
-    _subscribe('system:requestUpdateElements', ({ elements }) => {
-      state.elements = elements;
+    _subscribe('system:requestElementsScale', ({ $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 }) => {
@@ -144,7 +150,7 @@ function useLayout(api) {
   };
 
   // 메서드
-   const getContainerSize = () => {
+  const getContainerSize = () => {
     try {
       return api.layout.getContainerSize();
     } catch (error) {
@@ -160,7 +166,7 @@ function useLayout(api) {
       console.error('[LayoutLibrary] setContainerSize 실행 중 오류 발생:', error);
     }
   };
-  
+
   const setLayoutName = (name, userData = null, setting = false) => {
     try {
       api.layout.setLayoutName(name, userData, setting);
@@ -179,20 +185,12 @@ function useLayout(api) {
 
   const setRatio = (type, index, ratio) => {
     try {
-      api.layout.setRatio(type, index, ratio);
+      return 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);
@@ -227,7 +225,7 @@ function useLayout(api) {
 
   const setSectionConfig = (type, config) => {
     try {
-      api.layout.setSectionConfig(type, config);
+      return api.layout.setSectionConfig(type, config);
     } catch (error) {
       console.error('[useLayout] setSectionConfig 실행 중 오류 발생:', error);
     }
@@ -241,7 +239,6 @@ function useLayout(api) {
     setLayoutName,
     setGapSize,
     setRatio,
-    // setUserLayoutData,
     setActiveSection,
     setElements,
     updateActiveElement,

package/src/library/originals/DisplayLibrary_0402.js

@@ -0,0 +1,137 @@
+import { reactive, readonly } from 'vue';
+
+function useDisplay(api) {
+  const state = reactive({
+    activeMenu: null,
+    activeDesign: null,
+    displayMode: 'desktop',
+    displaySize: null,
+  });
+
+  const _subscriptions = [];
+
+  const syncState = () => {
+    try {
+      const displayState = api.getDisplayState();
+      Object.assign(state, displayState);
+    } catch (error) {
+      console.error('[DisplayLibrary] 상태 동기화 중 오류 발생:', 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 세팅 감지
+    _subscribe('display:setLayoutName', ({ displayMode, displaySize }) => {
+      state.displayMode = displayMode;
+      state.displaySize = { ...displaySize };
+    });
+
+    // activeMenu 변경 감지
+    _subscribe('display:updateActiveMenu', ({ menu }) => {
+      state.activeMenu = menu;
+    });
+
+    // activeDesign 변경 감지
+    _subscribe('display:updateActiveDesign', ({ design }) => {
+      state.activeDesign = design;
+    });
+
+    // displayMode 변경 감지 (displaySize가 함께 초기화됨)
+    _subscribe('display:updateDisplayMode', ({ displayMode, displaySize }) => {
+      state.displayMode = displayMode;
+      state.displaySize = { ...displaySize };
+    });
+
+    // displaySize 변경 감지 (px 또는 percent 값 변경 감지)
+    _subscribe('display:updateDisplaySize', ({ displaySize }) => {
+      state.displaySize = { ...displaySize };
+    });
+
+    _subscribe('display:restoredState', ({ stateData }) => {
+      state.displayMode = stateData.displayMode;
+      state.displaySize = { ...stateData.displaySize };
+      state.activeMenu = stateData.activeMenu;
+      state.activeDesign = stateData.activeDesign;
+    });
+  };
+
+  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 setActiveMenu = (name) => {
+    try {
+      api.display.setActiveMenu(name);
+    } catch (error) {
+      console.error('[DisplayLibrary] setActiveMenu 실행 중 오류 발생:', error);
+    }
+  };
+
+  const setActiveDesign = (name) => {
+    try {
+      api.display.setActiveDesign(name);
+    } catch (error) {
+      console.error('[DisplayLibrary] setActiveDesign 실행 중 오류 발생:', error);
+    }
+  };
+
+  const setDisplayMode = (mode) => {
+    try {
+      api.display.setDisplayMode(mode);
+    } catch (error) {
+      console.error('[DisplayLibrary] setDisplayMode 실행 중 오류 발생:', error);
+    }
+  };
+
+  const setDisplaySize = (type, size) => {
+    try {
+      api.display.setDisplaySize(type, size);
+    } catch (error) {
+      console.error('[useDisplay] setDisplaySize 실행 중 오류 발생:', error);
+    }
+  };
+
+  return {
+    state: readonly(state),
+    cleanup,
+    setActiveMenu,
+    setActiveDesign,
+    setDisplayMode,
+    setDisplaySize,
+  };
+}
+
+export default useDisplay;

package/src/library/originals/FreeDropLibrary_0402.js

@@ -0,0 +1,185 @@
+import { cloneDeep } from 'lodash-es';
+import { reactive, readonly } from 'vue';
+
+function useFreeDrop(api) {
+  const state = reactive({
+    handles: [],
+    elements: [],
+    guides: { x: null, y: null, w: null, h: null },
+    activeElement: null,
+    activeId: null,
+  });
+
+  const _subscriptions = [];
+
+  const syncState = () => {
+    try {
+      const freeDropState = api.getFreeDropState();
+      Object.assign(state, freeDropState);
+    } catch (error) {
+      console.error('[FreeDropLibrary] 상태 동기화 중 오류 발생:', 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('freeDrop:setElements', ({ elements }) => {
+      state.elements = elements;
+    });
+
+    _subscribe('freeDrop:setActiveElement', ({ action, activeElement }) => {
+      if (!activeElement) {
+        state.guides = { x: null, y: null, w: null, h: null };
+      }
+
+      // 신규 추가인 경우에만 elements 업데이트 (새 요소 1개만 추가)
+      if (action === 'add' && activeElement) {
+        state.elements = [...state.elements, activeElement];
+      }
+
+      // state.elements = elements;
+      state.activeElement = activeElement;
+      state.activeId = activeElement?.id ?? null;
+    });
+
+    _subscribe('freeDrop:requestUpdateActiveElement', ({ element }) => {
+      // state.elements = elements;
+      const index = state.elements.findIndex((el) => el.id === element.id);
+      if (index !== -1) {
+        state.elements[index] = element;
+      }
+    });
+
+    _subscribe('freeDrop:toggleLock', ({ elementId }) => {
+      const element = state.elements.find((el) => el.id === elementId);
+      if (element) {
+        element.isLocked = !element.isLocked;
+      }
+    });
+
+    _subscribe('freeDrop:requestUpdateData', ({ elements, guides }) => {
+      state.elements = elements;
+      state.guides = guides;
+    });
+
+    _subscribe('system:requestUpdateElements', ({ elements, guides }) => {
+      state.elements = elements;
+      state.guides = guides;
+    });
+
+    _subscribe('freeDrop:requestUpdateLocalBounds', ({ elementId, position, size, guides }) => {
+      const element = state.elements.find((el) => el.id === elementId);
+
+      if (element) {
+        state.guides = guides;
+        state.elements = state.elements.map((element) =>
+          element.id === state.activeId ? { ...state.activeElement, position: { ...position }, size: { ...size } } : element,
+        );
+      } else {
+        state.elements.push(state.activeElement);
+      }
+    });
+
+    _subscribe('freeDrop: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 = (element) => {
+    try {
+      return api.freeDrop.getElementStyle(element);
+    } catch (error) {
+      console.warn('[FreeDropLibrary] getElementStyle 실행 중 오류 발생:', error);
+      return {};
+    }
+  };
+
+  const setActiveElement = (element, type) => {
+    try {
+      api.freeDrop.setActiveElement(element, type);
+    } catch (error) {
+      console.warn('[FreeDropLibrary] setActiveElement 실행 중 오류 발생:', error);
+    }
+  };
+
+  const addElement = (event, elName) => {
+    try {
+      api.freeDrop.addElement(event, elName);
+    } catch (error) {
+      console.warn('[FreeDropLibrary] addElement 실행 중 오류 발생:', error);
+    }
+  };
+
+  const toggleLock = () => {
+    try {
+      api.freeDrop.toggleLock();
+    } catch (error) {
+      console.warn('[FreeDropLibrary] toggleLock 실행 중 오류 발생:', error);
+    }
+  };
+
+  const handleMouseDown = (event, id) => {
+    try {
+      api.freeDrop.handleMouseDown(event, id);
+    } catch (error) {
+      console.warn('[FreeDropLibrary] handleMouseDown 실행 중 오류 발생:', error);
+    }
+  };
+
+  const startResize = (event, direction) => {
+    try {
+      api.freeDrop.startResize(event, direction);
+    } catch (error) {
+      console.warn('[FreeDropLibrary] startResize 실행 중 오류 발생:', error);
+    }
+  };
+
+  return {
+    state: readonly(state),
+    cleanup,
+    getElementStyle,
+    setActiveElement,
+    addElement,
+    toggleLock,
+    handleMouseDown,
+    startResize,
+  };
+}
+
+export default useFreeDrop;