polarvo-layout 1.0.62 → 1.0.64

package/package.json

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

package/src/components/Layout/FreeItem.vue

@@ -43,8 +43,9 @@
       :rootId="item.id"
       :ref="setRef"
       v-bind="item"
+      :isHovable="isHovable"
       class="hover:opacity-80"
-      :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
+      :class="activeEditMode || isHovable ? `pointer-events-auto ` : `pointer-events-none`"
       @set:defaultStyle="setDefaultStyle"
     />
   </div>
@@ -59,6 +60,7 @@ const props = defineProps({
   item: { type: Object, required: true },
   polarvo: { type: Object, required: true },
   sectionKey: { type: String, required: true },
+  isHovable: { type: Boolean, required: true },
 });
 
 const { activeId, handles, activeElement } = toRefs(props.polarvo.freeDrop.state);

package/src/components/Layout/FreeLayout.vue

@@ -6,6 +6,7 @@
       :item="item"
       :polarvo="props.polarvo"
       :sectionKey="props.sectionKey"
+      :isHovable="isHovable(item)"
     ></FreeItem>
 
     <!-- 오버레이 -->
@@ -68,6 +69,11 @@ const filteredElements = computed(() => {
 const selectedElement = inject('selectedElement');
 const activeEditMode = inject('activeEditMode');
 
+const isHovable = (item) => {
+  if (!item || props.preview) return true;
+  return activeElement.value?.id === item.id && ['chart'].includes(item.type);
+};
+
 let _isElementSwitching = false;
 import { omit, cloneDeep } from 'lodash-es';
 
@@ -79,6 +85,7 @@ watch(
     if (newId && activeElement.value?.section !== props.sectionKey) return;
 
     if (!newId) {
+      console.l;
       setActiveDesign(null);
       setActiveMenu(null);
     }
@@ -113,6 +120,8 @@ watch(
   (newDesign, oldDesign) => {
     if (newDesign != null || oldDesign == null) return; // null → null이 아닌 값으로 닫히는(값이 있다가 null 되는) 경우만
     if (activeElement.value?.section !== props.sectionKey) return;
+    // selectedElement가 아직 activeElement로 갱신되기 전(요소 전환 레이스)이면 저장하지 않음
+    if (selectedElement.value?.id !== activeElement.value?.id) return;
 
     if (activeElement.value?.id && !activeElement.value.id.includes('inputForm')) {
       updateActiveElement(activeElement.value.id, selectedElementForWatch.value, true);

package/src/components/Layout/GridItem.vue

@@ -41,11 +41,11 @@
         :rootId="item.id"
         :ref="setRef"
         v-bind="item"
+        :isHovable="isHovable"
         class="hover:opacity-80"
-        :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
-      @set:defaultStyle="setDefaultStyle"
+        :class="activeEditMode || isHovable ? `pointer-events-auto ` : `pointer-events-none`"
+        @set:defaultStyle="setDefaultStyle"
       />
-
       <!-- 오버레이 -->
       <div v-if="activeEditMode && item.id !== activeId" class="absolute inset-0 bg-black opacity-50 z-30"></div>
     </template>
@@ -69,6 +69,7 @@ const props = defineProps({
   item: { type: Object, required: true },
   polarvo: { type: Object, required: true },
   sectionKey: { type: String, required: true },
+  isHovable: { type: Boolean, required: true },
 });
 
 const { activeId } = toRefs(props.polarvo.gridDrop.state);

package/src/components/Layout/GridLayout.vue

@@ -6,6 +6,7 @@
       :item="item"
       :polarvo="props.polarvo"
       :sectionKey="props.sectionKey"
+      :isHovable="isHovable(item)"
     ></GridItem>
 
     <!-- 행 크기 조절 -->
@@ -107,6 +108,11 @@ const { activeDesign } = toRefs(props.polarvo.display.state);
 const selectedElement = inject('selectedElement');
 const activeEditMode = inject('activeEditMode');
 
+const isHovable = (item) => {
+  if (!item || props.preview) return true;
+  return activeElement.value?.id === item.id && ['chart'].includes(item.type);
+};
+
 import { omit, cloneDeep, debounce } from 'lodash-es';
 
 const gridColumns = ref(3); // 동적으로 계산
@@ -371,6 +377,8 @@ watch(
   (newDesign, oldDesign) => {
     if (newDesign != null || oldDesign == null) return; // null → null이 아닌 값으로 닫히는(값이 있다가 null 되는) 경우만
     if (activeElement.value?.section !== props.sectionKey) return;
+    // selectedElement가 아직 activeElement로 갱신되기 전(요소 전환 레이스)이면 저장하지 않음
+    if (selectedElement.value?.id !== activeElement.value?.id) return;
 
     if (activeElement.value?.id && !activeElement.value.id.includes('inputForm')) {
       updateActiveElement(activeElement.value.id, selectedElementForWatch.value, true);

package/src/core/engines/DisplayEngine.js

@@ -61,7 +61,8 @@ class DisplayEngine {
       this.displaySize = { ...$screenConfig.displaySize };
     });
 
-    this._subscribe('freeDrop:setActiveElement', () => {
+    this._subscribe('freeDrop:setActiveElement', ({ action }) => {
+      if (action === 'update') return;
       this.setActiveMenu(null);
       this.setActiveDesign(null);
     });

package/src/core/engines/FreeDropEngine.js

@@ -446,13 +446,14 @@ class FreeDropEngine {
    */
   setActiveElement(element, action = null) {
     // 이미 활성화된 요소를 다시 활성화하려는 경우 무시 (단, 속성이 갱신된 경우는 제외)
-    if (action !== 'update' && element && this._activeElement?.id === element?.id) return;
+    if (element && this._activeElement?.id === element?.id) return;
 
     this._activeElement = element;
     this._alreadyExist = action === 'add' ? false : true;
     // this._elementsUpdate = true;
 
     this.eventBus.emit('freeDrop:setActiveElement', {
+      action: action,
       $alreadyExist: this._alreadyExist,
       activeElement: this._activeElement,
       timestamp: Date.now(),

package/src/core/engines/GridDropEngine.js

@@ -223,7 +223,7 @@ class GridDropEngine {
    */
   setActiveElement(element, action = null) {
     // 이미 활성화된 요소를 다시 활성화하려는 경우 무시 (단, 속성이 갱신된 경우는 제외)
-    if (action !== 'update' && element && this._activeElement?.id === element?.id) return;
+    if (element && this._activeElement?.id === element?.id) return;
 
     this._activeElement = element;
     this._elementsUpdate = true;