polarvo-layout 1.0.9 → 1.0.11

package/package.json

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

package/src/components/Layout/FreeLayout.vue

@@ -7,7 +7,7 @@
       class="absolute user-select-none"
       :style="getElementStyle(item)"
       :class="{ 'z-50': item.id === activeId, 'bg-white border-2 border-blue-400': item.id === activeId }"
-      @mousedown.stop="startDrag($event, item.id)"
+      @mousedown.stop="activeEditMode ? null : startDrag($event, item.id)"
     >
       <!-- 리사이즈 핸들 -->
       <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
@@ -34,13 +34,15 @@
           </div>
         </div>
       </div>
+
       <component
         :is="dynamicComponent(item.type)"
         :id="`${sectionKey}-${index}`"
+        :rootId="item.id"
         :ref="(el) => setComponentRef(el, item.id)"
         v-bind="item"
         class="hover:opacity-80"
-        :class="activeEditMode ? `pointer-events-auto` : `pointer-events-none`"
+        :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
       />
     </div>
 
@@ -124,8 +126,8 @@ function setComponentRef(el, elementId) {
 }
 
 const selectedElement = inject('selectedElement');
-
 const activeEditMode = inject('activeEditMode');
+
 function toggleEditMode() {
   activeEditMode.value = !activeEditMode.value;
 }
@@ -159,6 +161,7 @@ watch(
 
 onMounted(() => {
   props.polarvo.components.register('sections', props.sectionKey, getCurrentInstance());
+  activeEditMode.value = false;
 });
 
 onUnmounted(() => {

package/src/components/Layout/GridLayout.vue

@@ -5,15 +5,12 @@
       :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)"
+      :class="{ 'z-50': item.id === activeId, 'bg-white border-2 border-blue-400': item.id === activeId }"
+      @mousedown.stop="activeEditMode ? null : startDrag($event, item.id)"
     >
       <!-- 리사이즈 핸들 -->
-      <div v-if="activeElement?.id === item.id">
+      <div v-if="item.id === activeId">
         <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="flex gap-1 m-1">
           <!-- 잠금 토글-->
@@ -36,10 +33,11 @@
       <component
         :is="dynamicComponent(item.type)"
         :id="`${sectionKey}-${index}`"
+        :rootId="item.id"
         :ref="(el) => setComponentRef(el, item.id)"
         v-bind="item"
         class="hover:opacity-80"
-        :class="activeEditMode ? `pointer-events-auto` : `pointer-events-none`"
+        :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
       />
     </div>
 
@@ -68,7 +66,19 @@
 import LockIcon from '../../icons/action/LockIcon.vue';
 import UnlockIcon from '../../icons/action/UnlockIcon.vue';
 
-import { toRefs, defineAsyncComponent, markRaw, getCurrentInstance, onMounted, onUnmounted, inject, watch, toRaw, computed } from 'vue';
+import {
+  nextTick,
+  toRefs,
+  defineAsyncComponent,
+  markRaw,
+  getCurrentInstance,
+  onMounted,
+  onUnmounted,
+  inject,
+  watch,
+  toRaw,
+  computed,
+} from 'vue';
 const emit = defineEmits(['click:element']);
 const props = defineProps({
   polarvo: {
@@ -91,7 +101,7 @@ const props = defineProps({
 
 const { setActiveDesign } = props.polarvo.display;
 const { updateActiveElement } = props.polarvo.layout;
-const { elements, emptyData, activeCell, activeElement } = toRefs(props.polarvo.gridDrop.state);
+const { elements, emptyData, activeId, activeCell, activeElement } = toRefs(props.polarvo.gridDrop.state);
 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);
@@ -155,6 +165,7 @@ watch(
 
 onMounted(() => {
   props.polarvo.components.register('sections', props.sectionKey, getCurrentInstance());
+  activeEditMode.value = false;
 });
 
 onUnmounted(() => {

package/src/core/engines/GridDropEngine.js

@@ -108,9 +108,15 @@ class GridDropEngine {
       });
     });
 
-    this._subscribe('system:requestUpdateActiveElement', ({ elements }) => {
+    this._subscribe('system:requestUpdateActiveElement', ({ elements, elementId }) => {
       this._elements = elements;
       this._elementsUpdate = true;
+      this.setActiveElement(this._elements.find((x) => x.id === elementId) || null);
+
+      this.eventBus.emit('gridDrop:requestUpdateActiveElement', {
+        elements: cloneDeep(this.gridElements),
+        timestamp: Date.now(),
+      });
     });
 
     this._subscribe('system:requestUpdateElements', ({ elements }) => {
@@ -291,6 +297,7 @@ class GridDropEngine {
       this._elementsUpdate = true;
     }
 
+
     this.eventBus.emit('gridDrop:setActiveElement', {
       action: action,
       activeElement: this._activeElement,
@@ -479,10 +486,6 @@ class GridDropEngine {
       }
       this.setActiveElement(element);
 
-      if (!this._activeElement) {
-        console.error('[GridDropEngine] 활성화된 아이템 정보를 찾을 수 없습니다.');
-        return false;
-      }
       // 배치요소 잠겨 있으면 드래그/삭제 불가
       if (this._activeElement.isLocked) return;
 

package/src/core/managers/EngineManager.js

@@ -222,7 +222,7 @@ class EngineManager {
     this._subscribe('layout:setLayoutName', ({ screenConfig }) => {
       this._layoutData = screenConfig.layoutData;
       this._dataUpdate = true;
-      this.setActiveSection(null, true);
+      this.setActiveSection('section1', true);
 
       this.eventBus.emit('system:updateLayoutData', {
         layoutData: cloneDeep(this._layoutData),

package/src/library/GridDropLibrary.js

@@ -54,6 +54,10 @@ function useGridDrop(api) {
       state.activeId = activeElement?.id ?? null;
     });
 
+    _subscribe('gridDrop:requestUpdateActiveElement', ({ elements }) => {
+      state.elements = elements;
+    });
+
     _subscribe('gridDrop:toggleLock', ({ elementId }) => {
       const element = state.elements.find((el) => el.id === elementId);
       if (element) {