polarvo-layout 1.0.2 → 1.0.4

package/package.json

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

package/src/components/FastMenu/DisplayFastMenu.vue

@@ -24,7 +24,7 @@
         min="600"
         max="2400"
         step="50"
-        :value="displaySize.px"
+        :value="displaySize?.px"
         class="border-b-2 pr-1 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
         @change="setDisplaySize('px', $event.target.value)"
       />
@@ -36,7 +36,7 @@
         min="0"
         max="100"
         step="10"
-        :value="displaySize.percent"
+        :value="displaySize?.percent"
         class="border-b-2 pr-1 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
         @change="setDisplaySize('percent', $event.target.value)"
       />
@@ -46,7 +46,7 @@
 </template>
 
 <script setup>
-import { toRefs } from 'vue';
+import { toRefs, onMounted } from 'vue';
 
 const props = defineProps({
   polarvo: {
@@ -56,6 +56,7 @@ const props = defineProps({
 });
 const { displayMode, displaySize } = toRefs(props.polarvo.display.state);
 const { setDisplayMode, setDisplaySize } = props.polarvo.display;
+
 </script>
 
 <style scoped>

package/src/components/FastMenu/HistoryFastMenu.vue

@@ -1,12 +1,27 @@
 <template>
   <!-- editor - title right -->
   <div id="fast-menu" class="flex gap-2 text-gray-400">
-    <UndoIcon class="size-5 cursor-pointer hover:opacity-70 active:text-blue-600" />
-    <RedoIcon class="size-5 cursor-pointer hover:opacity-70 active:text-blue-600" />
+    <button @click="undo" :class="undoable ? 'cursor-pointer hover:opacity-70 ' : 'cursor-not-allowed opacity-50'" :disabled="!undoable">
+      <UndoIcon class="size-5 active:text-blue-600" />
+    </button>
+    <button @click="redo" :class="redoable ? 'cursor-pointer hover:opacity-70' : 'cursor-not-allowed opacity-50'" :disabled="!redoable">
+      <RedoIcon class="size-5 active:text-blue-600" />
+    </button>
   </div>
 </template>
 
 <script setup>
-import UndoIcon from '../../icons//history/UndoIcon.vue';
+import { toRefs } from 'vue';
+import UndoIcon from '../../icons/history/UndoIcon.vue';
 import RedoIcon from '../../icons/history/RedoIcon.vue';
+
+const props = defineProps({
+  polarvo: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { undoable, redoable } = toRefs(props.polarvo.history.state);
+const { undo, redo } = props.polarvo.history;
 </script>

package/src/components/Layout/BaseLayout.vue

@@ -2,7 +2,7 @@
   <div
     :id="preview ? 'previewLayout' : 'baseLayout'"
     class="grid h-full p-2 bg-transparent rounded-lg"
-    :class="[layoutType + '-layout', `grid-cols-${gridNumber.column}`, 'mb-4' ? layoutType === 'three-column-split' : '']"
+    :class="[layoutType + '-layout', `grid-cols-${gridNumber?.column}`, 'mb-4' ? layoutType === 'three-column-split' : '']"
     :style="getBaseStyle"
   >
     <template v-for="(section, key) in layoutData" :key="key">
@@ -34,7 +34,7 @@
 </template>
 
 <script setup>
-import { toRefs, computed } from 'vue';
+import { toRefs, computed, onUnmounted } from 'vue';
 
 import PolarLayout from './PolarLayout.vue';
 import FreeLayout from './FreeLayout.vue';
@@ -67,8 +67,8 @@ const layoutType = computed(() => {
 
 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}%`).join(' '),
+    gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}%`).join(' '),
     marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
     gap: `${gapSize.value}px`,
   };
@@ -88,6 +88,8 @@ const getSectionClass = (key, section) => ({
 });
 
 const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
+
+
 </script>
 
 <style scoped>

package/src/components/Layout/CanvasContainer.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { toRefs, inject, computed, provide } from 'vue';
+import { toRefs, computed, provide } from 'vue';
 import BaseLayout from './BaseLayout.vue';
 
 const props = defineProps({
@@ -18,14 +18,14 @@ const props = defineProps({
 });
 
 const { displaySize } = toRefs(props.polarvo.display.state);
-const gridSize = computed(() => displaySize.value.gridSize || 16);
+const gridSize = computed(() => displaySize.value?.gridSize || 16);
 
 const containerStyle = computed(() => {
   return {
-    aspectRatio: displaySize.value.aspectRatio,
-    width: `${displaySize.value.px}px`,
+    aspectRatio: displaySize.value?.aspectRatio,
+    width: `${displaySize.value?.px}px`,
     margin: `0 auto`,
-    transform: `scale(${displaySize.value.percent / 100})`,
+    transform: `scale(${displaySize.value?.percent / 100})`,
     transformOrigin: 'top center',
     backgroundImage: `
       linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
@@ -38,8 +38,7 @@ const containerStyle = computed(() => {
 const { elements } = toRefs(props.polarvo.layout.state);
 
 // 전체 elements
-provide('elements', elements)
-
+provide('elements', elements);
 </script>
 
 <style scoped lang="scss"></style>

package/src/components/Layout/FreeLayout.vue

@@ -30,7 +30,7 @@
         class="hover:opacity-80 pointer-events-none"
       />
     </div>
-
+    
     <!-- 가이드라인 -->
     <div v-if="isActive">
       <div v-if="guides.x !== null" class="guide absolute z-10 pointer-events-none vertical" :style="{ left: `${guides.x}px` }"></div>
@@ -109,6 +109,7 @@ function setComponentRef(el, elementId) {
 
 const selectedElement = inject('selectedElement');
 
+import { omit, cloneDeep } from 'lodash-es';
 watch(
   () => activeElement.value?.id,
   (newId, oldId) => {
@@ -116,12 +117,11 @@ watch(
     if (!newId) {
       setActiveDesign(null);
     }
-    selectedElement.value = structuredClone(toRaw(activeElement.value));
+    // selectedElement.value = structuredClone(toRaw(activeElement.value));
+    selectedElement.value = cloneDeep(activeElement.value);
   },
-  { immediate: true }
 );
 
-import { omit } from 'lodash-es';
 // 특정 키 값을 제외하고 변경 감지
 const selectedElementForWatch = computed(() => omit(selectedElement.value, ['position', 'size', 'id']));
 

package/src/components/Layout/GridLayout.vue

@@ -1,51 +1,51 @@
 <template>
-  <div
-    v-for="(item, index) in filteredElements"
-    :key="index"
-    :id="item.id"
-    class="relative bg-gray-200"
-    :class="{
-      'z-50': activeElement?.id === item.id,
-      'bg-white border-2 border-blue-400': activeElement?.id === item.id && !preview,
-    }"
-    :style="getElementStyle('element', item)"
-    @mousedown.stop="startDrag($event, item.id)"
-  >
-    <!-- 리사이즈 핸들 -->
-    <div v-if="activeElement?.id === item.id && !preview">
-      <div class="absolute w-4 h-4 bottom-0 right-0 bg-blue-400 z-10 cursor-se-resize" @mousedown="startResize($event, item.id)"></div>
-      <div class="absolute z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
-        <LockIcon v-if="item.isLocked" />
-        <UnlockIcon v-else />
+  <template v-if="!preview">
+    <div
+      v-for="(item, index) in filteredElements"
+      :key="index"
+      :id="item.id"
+      class="relative bg-gray-200"
+      :class="{
+        'z-50': activeElement?.id === item.id,
+        'bg-white border-2 border-blue-400': activeElement?.id === item.id,
+      }"
+      :style="getElementStyle('element', item)"
+      @mousedown.stop="startDrag($event, item.id)"
+    >
+      <!-- 리사이즈 핸들 -->
+      <div v-if="activeElement?.id === item.id">
+        <div class="absolute w-4 h-4 bottom-0 right-0 bg-blue-400 z-10 cursor-se-resize" @mousedown="startResize($event, item.id)"></div>
+        <div class="absolute z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+          <LockIcon v-if="item.isLocked" />
+          <UnlockIcon v-else />
+        </div>
       </div>
-    </div>
 
-    <component
-      v-if="!preview"
-      :is="dynamicComponent(item.type)"
-      :id="`${sectionKey}-${index}`"
-      :ref="(el) => setComponentRef(el, item.id)"
-      v-bind="item"
-      class="hover:opacity-80 pointer-events-none"
-    />
-  </div>
+      <component
+        :is="dynamicComponent(item.type)"
+        :id="`${sectionKey}-${index}`"
+        :ref="(el) => setComponentRef(el, item.id)"
+        v-bind="item"
+        class="hover:opacity-80 pointer-events-none"
+      />
+    </div>
 
-  <!-- 빈 그리드 설정 -->
-  <div
-    v-for="(cell, index) in emptyData[sectionKey]"
-    :key="index"
-    class="flex items-center justify-center bg-gray-100 border border-gray-300"
-    :style="getElementStyle('empty', cell)"
-    @mouseenter="detectHoverCell(cell)"
-  >
+    <!-- 빈 그리드 설정 -->
     <div
-      v-show="!preview"
-      class="text-sm w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500 hover:bg-blue-200 hover:text-white transition-colors cursor-pointer"
-      @click="setActiveCell('new', cell)"
+      v-for="(cell, index) in emptyData[sectionKey]"
+      :key="index"
+      class="flex items-center justify-center bg-gray-100 border border-gray-300"
+      :style="getElementStyle('empty', cell)"
+      @mouseenter="detectHoverCell(cell)"
     >
-      +
+      <div
+        class="text-sm w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-500 hover:bg-blue-200 hover:text-white transition-colors cursor-pointer"
+        @click="setActiveElement({ position: cell }, 'click')"
+      >
+        +
+      </div>
     </div>
-  </div>
+  </template>
 </template>
 
 <script setup>
@@ -70,13 +70,13 @@ const props = defineProps({
   elementIds: {
     type: Array,
     required: true,
-  }
+  },
 });
 
 const { setActiveDesign } = props.polarvo.display;
 const { updateActiveElement } = props.polarvo.layout;
 const { elements, emptyData, activeCell, activeElement } = toRefs(props.polarvo.gridDrop.state);
-const { getElementStyle, setActiveCell, toggleLock, startDrag, detectHoverCell, startResize } = props.polarvo.gridDrop;
+const { getElementStyle, setActiveElement, toggleLock, startDrag, detectHoverCell, startResize } = props.polarvo.gridDrop;
 const filteredElements = computed(() => {
   return elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey);
 });
@@ -104,6 +104,7 @@ function setComponentRef(el, elementId) {
 
 const selectedElement = inject('selectedElement');
 
+import { omit, cloneDeep } from 'lodash-es';
 watch(
   () => activeElement.value?.id,
   (newId, oldId) => {
@@ -111,12 +112,12 @@ watch(
     if (!newId) {
       setActiveDesign(null);
     }
-    selectedElement.value = structuredClone(toRaw(activeElement.value));
+    // selectedElement.value = structuredClone(toRaw(activeElement.value));
+    selectedElement.value = cloneDeep(activeElement.value);
   },
   { immediate: true }
 );
 
-import { omit } from 'lodash-es';
 // 특정 키 값을 제외하고 변경 감지
 const selectedElementForWatch = computed(() => omit(selectedElement.value, ['position', 'size', 'id']));
 

package/src/components/SideBar/LayoutSettingSideBar.vue

@@ -49,8 +49,8 @@
             id="gap-size"
             min="0"
             max="12"
-            :value="gapSize"
-            @change="setGapSize($event.target.value)"
+            :value="activeData?.config?.gridGap"
+            @change="setSectionConfig('gap', $event.target.value)"
           />
         </div>
       </div>
@@ -81,8 +81,8 @@ const props = defineProps({
     required: true,
   },
 });
-const { activeData, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
-const { setGapSize, setRatio, setSectionMode, setSectionConfig } = props.polarvo.layout;
+const { activeData } = toRefs(props.polarvo.layout.state);
+const { setSectionMode, setSectionConfig } = props.polarvo.layout;
 
 const sectionMode = computed(() => activeData.value?.mode);
 </script>

package/src/components/SideBar/LayoutSideBar.vue

@@ -27,8 +27,8 @@
         </div>
 
         <div class="px-4 py-0">
-          <div class="flex flex-row items-center gap-2 mb-2" v-if="gridNumber.column > 1">
-            <template v-for="column in gridNumber.column" :key="column">
+          <div class="flex flex-row items-center gap-2 mb-2" v-if="gridNumber?.column > 1">
+            <template v-for="column in gridNumber?.column" :key="column">
               <label class="text-sm w-12 text-gray-500" :for="`col-ratio-${column}`" v-if="column === 1">열비율</label>
               <input
                 class="text-sm w-12 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
@@ -40,8 +40,8 @@
             </template>
           </div>
 
-          <div class="flex flex-row items-center gap-2 mb-2" v-if="gridNumber.row > 1">
-            <template v-for="row in gridNumber.row" :key="row">
+          <div class="flex flex-row items-center gap-2 mb-2" v-if="gridNumber?.row > 1">
+            <template v-for="row in gridNumber?.row" :key="row">
               <label class="text-sm w-12 text-gray-500" :for="`row-ratio-${row}`" v-if="row === 1">행비율</label>
               <input
                 class="text-sm w-12 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"

package/src/configs/index.js

@@ -3,13 +3,8 @@ import { resources } from './resources/index.js';
 const createDefaultConfig = (overrides = {}) => {
   return {
     initialState: {
-      gridSize: 16,
-      gridNumber: { column: 1, row: 1 },
       elements: [], // 요소들
-      // layoutData: null, // 레이아웃 데이터 - 캐시용
       activeSection: null,
-      // activeData: null,
-      activeId: null,
     },
     resource: {
       display: resources.display,

package/src/core/engines/DisplayEngine.js

@@ -5,8 +5,8 @@ class DisplayEngine {
 
     this.activeMenu = null; // 현재 활성화된 메뉴
     this.activeDesign = null; // 현재 활성화된 디자인 메뉴
-    this.displayMode = 'desktop'; // 현재 디스플레이 모드
-    this.displaySize = { px: 1200, percent: 100, gridSize: 16, aspectRatio: '16/9' }; // 현재 디스플레이 사이즈
+    this.displayMode = 'desktop'; // 현재 디스플레이 모드 (초기값 = 'desktop')
+    this.displaySize = null;
 
     this._subscriptions = []; // 구독 해제 함수 저장용
     this._setupSubscriptions();
@@ -27,29 +27,65 @@ class DisplayEngine {
   /** 구독 설정 */
   _setupSubscriptions() {
     // 초기화 완료 이벤트 구독 - from EngineManager
-    this._subscribe('system:engineInitialized', (data) => {
-      this._setDisplaySizeByMode(this.displayMode);
-    });
+    this._subscribe('system:engineInitialized', () => {
+      this._resetDisplaySizeByMode(this.displayMode);
 
-    this._subscribe('freeDrop:closeActiveMenu', () => {
-      this.setActiveMenu(null);
+      this.eventBus.emit('display:engineInitialized', {
+        displaySize: this.displaySize,
+        timestamp: Date.now(),
+      });
     });
 
-    this._subscribe('freeDrop:closeDesignMenu', () => {
+    this._subscribe('system:setElements', () => {
+      this.setActiveMenu(null);
       this.setActiveDesign(null);
     });
 
-    this._subscribe('system:closeActiveMenu', () => {
+    this._subscribe('freeDrop:startDrag', () => {
       this.setActiveMenu(null);
+      this.setActiveDesign(null);
     });
 
-    this._subscribe('gridDrop:updateActiveCell', ({ type, activeCell }) => {
-      if (type === 'new' && activeCell != null) {
+    this._subscribe('gridDrop:setActiveElement', ({ action }) => {
+      if (action === 'click') {
         this.setActiveMenu('element');
       } else {
-        this.setActiveMenu(activeCell);
+        this.setActiveMenu(null);
       }
+
+      this.setActiveDesign(null);
     });
+
+    // this._subscribe('freeDrop:closeActiveMenu', () => {
+    //   this.setActiveMenu(null);
+    // });
+
+    // this._subscribe('freeDrop:closeDesignMenu', () => {
+    //   this.setActiveDesign(null);
+    // });
+
+    // this._subscribe('system:closeActiveMenu', () => {
+    //   this.setActiveMenu(null);
+    // });
+
+    // this._subscribe('gridDrop:updateActiveCell', ({ type, activeCell }) => {
+    //   if (type === 'new' && activeCell != null) {
+    //     this.setActiveMenu('element');
+    //   } else {
+    //     this.setActiveMenu(activeCell);
+    //   }
+    // });
+
+    // this._subscribe('system:enginesReset', () => {
+    //   this.reset();
+    // })
+  }
+
+  reset() {
+    this.activeMenu = null;
+    this.activeDesign = null;
+    this.displayMode = 'desktop';
+    this.displaySize = { px: 1200, percent: 100, gridSize: 16, aspectRatio: '16/9' }; // 현재 디스플레이 사이즈
   }
 
   /** 삭제 및 정리 */
@@ -67,6 +103,27 @@ class DisplayEngine {
     console.log('[DisplayEngine] 삭제 완료');
   }
 
+  getState() {
+    return {
+      displayMode: this.displayMode,
+      displaySize: { ...this.displaySize },
+      activeMenu: this.activeMenu,
+      activeDesign: this.activeDesign,
+    };
+  }
+
+  setState(state) {
+    this.displayMode = state.displayMode;
+    this.displaySize = { ...state.displaySize };
+    this.activeMenu = state.activeMenu;
+    this.activeDesign = state.activeDesign;
+
+    // this.eventBus.emit('display:restoredState', {
+    //   prev: state,
+    //   timestamp: Date.now(),
+    // });
+  }
+
   /** ---------------------------------- 공통 메소드 ---------------------------------- **/
 
   /** 아이콘바 메뉴 변경
@@ -105,19 +162,29 @@ class DisplayEngine {
     }
 
     if (this.displayMode === mode) return;
+
+    const prevDisplayMode = this.displayMode;
+    const prevDisplaySize = { ...this.displaySize };
+
     this.displayMode = mode;
+    this._resetDisplaySizeByMode(mode);
 
+    // displayMode 변경 시, displaySize도 초기화 됨
     this.eventBus.emit('display:updateDisplayMode', {
-      displayMode: mode,
+      displayMode: this.displayMode,
+      displaySize: this.displaySize,
+      prev: {
+        displayMode: prevDisplayMode,
+        displaySize: prevDisplaySize,
+      },
       timestamp: Date.now(),
     });
-    this._setDisplaySizeByMode(mode);
   }
 
   /** 사이즈 설정
    * @param {string} mode - 디스플레이 모드
    */
-  _setDisplaySizeByMode(mode) {
+  _resetDisplaySizeByMode(mode) {
     if (this.resource[mode]) {
       this.displaySize = {
         px: this.resource[mode]?.defaultWidth || 1200,
@@ -125,11 +192,6 @@ class DisplayEngine {
         gridSize: this.resource[mode]?.gridSize || 16,
         aspectRatio: this.resource[mode]?.aspectRatio || '16/9',
       };
-
-      this.eventBus.emit('display:updateDisplaySizeByMode', {
-        displaySize: this.displaySize,
-        timestamp: Date.now(),
-      });
     }
   }
 
@@ -159,10 +221,14 @@ class DisplayEngine {
       alert(`설정 가능한 최대 ${typeLimit.name}는 ${typeLimit.max}${typeLimit.unit}입니다.`);
     }
 
+    const prevDisplaySize = { ...this.displaySize };
     this.displaySize[type] = Math.min(Math.max(0, numSize), typeLimit.max);
 
     this.eventBus.emit('display:updateDisplaySize', {
       displaySize: this.displaySize,
+      prev: {
+        displaySize: prevDisplaySize,
+      },
       timestamp: Date.now(),
     });
   }