polarvo-layout 1.0.70 → 1.0.72

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -71,8 +71,8 @@ const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio }
 
 const getBaseStyle = computed(() => {
   return {
-    gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}%`).join(' '),
-    gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}%`).join(' '),
+    gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}fr`).join(' '),
+    gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}fr`).join(' '),
     marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
     gap: `${gapSize.value}px`,
   };

package/src/configs/resources/elementResource.js

@@ -23,32 +23,20 @@ export const elementResource = {
     w: 300,
     h: 200,
   },
-  basicCalendar: {
-    w: 300,
-    h: 280,
-  },
-  basicPagination: {
-    w: 150,
-    h: 40,
-  },
-  basicRadio: {
-    w: 120,
-    h: 40,
-  },
-  basicSearch: {
-    w: 260,
-    h: 40,
+  email: {
+    w: 480,
+    h: 580,
   },
-  basicTable: {
-    w: 240,
-    h: 120,
+  fax: {
+    w: 440,
+    h: 420,
   },
-  basicTextbox: {
-    w: 200,
-    h: 80,
+  colorMake: {
+    w: 960,
+    h: 600,
   },
-  basicToggle: {
-    w: 120,
-    h: 40,
+  dyeMaker: {
+    w: 860,
+    h: 620,
   },
 };

package/src/core/engines/FreeDropEngine.js

@@ -226,7 +226,9 @@ class FreeDropEngine {
     if (this._elementsUpdate) {
       this._elementsUpdate = false;
 
-      const base = this._elements.filter((x) => x.mode === 'free');
+      // mode 관계없이 모든 요소 렌더링
+      // const base = this._elements.filter((x) => x.mode === 'free');
+      const base = this._elements;
 
       if (this._activeElement) {
         const exists = base.find((x) => x.id === this._activeElement?.id);
@@ -384,6 +386,29 @@ class FreeDropEngine {
   }
 
   /** ---------------------------------- 배치요소 관련 메소드 ---------------------------------- **/
+  getCurrentPosition() {
+    const currentElements = this.freeElements.filter((x) => x.section === this._activeSection);
+    if (!currentElements?.length) return { col: 1, row: 1 };
+
+    let lastRow = 0;
+    let lastCol = 0;
+
+    for (const element of currentElements) {
+      const endRow = element?.position.row + element?.size.rowSpan - 1;
+      const endCol = element?.position.col + element?.size.colSpan - 1;
+
+      // 최대 행 위치보다 크거나 같은 행에서 열 위치가 더 큰 경우 업데이트
+      if (endRow > lastRow || (endRow === lastRow && endCol > lastCol)) {
+        lastRow = endRow;
+        lastCol = endCol;
+      }
+    }
+
+    const { gridColumns = 2 } = this._activeConfig ?? {};
+    // 마지막 행의 최대 열 위치가 columnCount 이상이면 다음 행으로 이동
+    return lastCol >= gridColumns ? { col: 1, row: lastRow + 1 } : { col: lastCol + 1, row: lastRow };
+  }
+
   /** 배치요소 신규 추가 - 메뉴에서 추가 아이템 선택
    * @param {MouseEvent} event - 마우스 이벤트
    * @param {object} item - 추가할 아이템 정보
@@ -395,12 +420,15 @@ class FreeDropEngine {
     this._startPos = { x: event.clientX, y: event.clientY };
 
     const elementSource = this.getResourceByName('elements');
+
     const element = {
       id: elName + '_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7),
       type: elName,
       mode: 'free',
-      position: this._startPos,
-      size: elementSource[elName] || { w: 100, h: 100 },
+      // position: this._startPos,
+      position: { ...this.getCurrentPosition(), ...this._startPos },
+      // size: elementSource[elName] || { w: 100, h: 100 },
+      size: { ...(elementSource[elName] || { w: 100, h: 100 }), colSpan: 1, rowSpan: 1 },
       section: this._activeSection,
       isLocked: false,
       ...(item.propDefaults || {}), // 아이템의 기본 props 설정

package/src/core/engines/GridDropEngine.js

@@ -178,7 +178,9 @@ class GridDropEngine {
     if (this._elementsUpdate) {
       this._elementsUpdate = false;
 
-      const base = this._elements.filter((x) => x.mode === 'grid');
+      // mode 관계없이 모든 요소 렌더링
+      // const base = this._elements.filter((x) => x.mode === 'grid');
+      const base = this._elements;
 
       if (this._activeElement) {
         const exists = base.find((x) => x.id === this._activeElement?.id);
@@ -347,13 +349,16 @@ class GridDropEngine {
     if (this._activeMode !== 'grid') return;
 
     const elName = item.elName;
+    const elementSource = this.elementResource;
 
     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 },
+      // position: { ...this._dragState.activeCell },
+      position: { x: 0, y: 0, ...this._dragState.activeCell },
+      // size: { colSpan: 1, rowSpan: 1 },
+      size: { ...(elementSource[elName] || { w: 100, h: 100 }), colSpan: 1, rowSpan: 1 },
       section: this._activeSection,
       isLocked: false,
       ...(item.propDefaults || {}), // 아이템의 기본 props 설정

package/src/core/managers/EngineManager.js

@@ -384,7 +384,7 @@ class EngineManager {
    * @param {string} type - 'column' | 'row'
    * @param {object} oldValue - 변경 전 gridRatio ({ column, row })
    * @param {object} newValue - 변경 후 gridRatio ({ column, row })
-   * @param {object} oldLayoutData - 변경 전 layoutData. 
+   * @param {object} oldLayoutData - 변경 전 layoutData.
    * 생략 시: 섹션 비율만 조정하는 경우
    * 레이아웃 자체가 바뀌는 호출은 변경 전 layoutData를 넘겨야 함
    */
@@ -408,7 +408,6 @@ class EngineManager {
       return ratios.slice(start, start + span).reduce((sum, v) => sum + v, 0) / 100;
     };
 
-   
     this.state.elements = this.state.elements.map((el) => {
       const oldPos = oldLayoutData?.[el.section]?.layoutPosition; // 변경 전 요소의 섹션 위치
       const newPos = this.state.layoutData?.[el.section]?.layoutPosition; // 변경 후 요소의 섹션 위치
@@ -454,23 +453,34 @@ class EngineManager {
     }
 
     if (!this.activeData || this.activeData.mode === mode) return;
+    // mode 관계없이 모든 요소 렌더링
     const updates = {
       mode: mode,
-      elementIds: this.state.elements.filter((x) => x.section === this.state.activeSection && x.mode === mode).map((x) => x.id),
+      elementIds: this.state.elements.filter((x) => x.section === this.state.activeSection).map((x) => x.id),
+      // elementIds: this.state.elements.filter((x) => x.section === this.state.activeSection && x.mode === mode).map((x) => x.id),
     };
 
-    if (mode === 'grid') {
+    // if (mode === 'grid') {
+    //   updates.config = {
+    //     gridColumns: this.activeData.config?.gridColumns || 2,
+    //     gridRows: this.activeData.config?.gridRows || 2,
+    //     gridGap: this.activeData.config?.gridGap || 4,
+    //     gridRowRatio: this.activeData.config?.gridRowRatio || [],
+    //     gridColumnRatio: this.activeData.config?.gridColumnRatio || [],
+    //   };
+    // } else if (mode === 'free') {
+    //   updates.config = {
+    //     showGuideLine: this.activeData.config?.showGuideLine || false,
+    //   };
+    // }
+
       updates.config = {
         gridColumns: this.activeData.config?.gridColumns || 2,
         gridRows: this.activeData.config?.gridRows || 2,
         gridGap: this.activeData.config?.gridGap || 4,
         gridRowRatio: this.activeData.config?.gridRowRatio || [],
         gridColumnRatio: this.activeData.config?.gridColumnRatio || [],
-      };
-    } else if (mode === 'free') {
-      updates.config = {
         showGuideLine: this.activeData.config?.showGuideLine || false,
-      };
     }
 
     this._updateActiveSectionConfig('mode', updates);
@@ -556,7 +566,11 @@ class EngineManager {
 
       this.state.elements.push(element);
       const targetSectionData = this.state.layoutData?.[element.section];
-      this._updateActiveSectionConfig('elementIds', { elementIds: [...(targetSectionData?.elementIds || []), element.id] }, element.section);
+      this._updateActiveSectionConfig(
+        'elementIds',
+        { elementIds: [...(targetSectionData?.elementIds || []), element.id] },
+        element.section,
+      );
 
       this.eventBus.emit('system:requestUpdateElement', {
         action: 'add',
@@ -576,9 +590,13 @@ class EngineManager {
       const target = this.state.elements.find((el) => el.id === elementId);
       this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
       const targetSectionData = this.state.layoutData?.[target?.section];
-      this._updateActiveSectionConfig('elementIds', {
-        elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
-      }, target?.section);
+      this._updateActiveSectionConfig(
+        'elementIds',
+        {
+          elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
+        },
+        target?.section,
+      );
       // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
       this.eventBus.emit('system:requestUpdateElement', {
@@ -630,7 +648,11 @@ class EngineManager {
 
       this.state.elements.push(element);
       const targetSectionData = this.state.layoutData?.[element.section];
-      this._updateActiveSectionConfig('elementIds', { elementIds: [...(targetSectionData?.elementIds || []), element.id] }, element.section);
+      this._updateActiveSectionConfig(
+        'elementIds',
+        { elementIds: [...(targetSectionData?.elementIds || []), element.id] },
+        element.section,
+      );
       // this._updateActiveElementIds([...this.activeData.elementIds, element.id]);
 
       this.eventBus.emit('system:requestUpdateElement', {
@@ -651,9 +673,13 @@ class EngineManager {
       const target = this.state.elements.find((el) => el.id === elementId);
       this.state.elements = this.state.elements.filter((el) => el.id !== elementId);
       const targetSectionData = this.state.layoutData?.[target?.section];
-      this._updateActiveSectionConfig('elementIds', {
-        elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
-      }, target?.section);
+      this._updateActiveSectionConfig(
+        'elementIds',
+        {
+          elementIds: (targetSectionData?.elementIds || []).filter((elId) => elId !== elementId),
+        },
+        target?.section,
+      );
       // this._updateActiveElementIds(this.activeData.elementIds.filter((elId) => elId !== elementId));
 
       this.eventBus.emit('system:requestUpdateElement', {