polarvo-layout 1.0.15 → 1.0.17

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -1,13 +1,14 @@
 <template>
   <div
     :id="preview ? 'previewLayout' : 'baseLayout'"
-    class="grid h-full p-2 bg-transparent rounded-lg "
+    class="grid h-full p-2 bg-transparent rounded-lg"
     :class="[layoutType + '-layout', `grid-cols-${gridNumber?.column}`, 'mb-4' ? layoutType === 'three-column-split' : '']"
     :style="getBaseStyle"
   >
     <template v-for="(section, key) in layoutData" :key="key">
       <PolarLayout
         :id="preview ? `${key}Preview` : `${key}Layout`"
+        :mode="section.mode"
         :style="getSectionStyle(section)"
         :class="[getSectionClass(key, section), activeSection === key && preview ? 'text-blue-400 bg-blue-50' : 'text-gray-400']"
         @click.stop="emit('click:section', key)"
@@ -16,11 +17,19 @@
           {{ key }}
         </div>
         <template v-if="section.mode === 'grid'">
-          <GridLayout :polarvo="polarvo" :preview="preview" :sectionKey="key" :elementIds="section.elementIds" />
+          <GridLayout
+            :id="`grid-${key}`"
+            :polarvo="polarvo"
+            :preview="preview"
+            :sectionKey="key"
+            :sectionData="section"
+            :elementIds="section.elementIds"
+          />
         </template>
 
         <template v-else>
           <FreeLayout
+            :id="`free-${key}`"
             :polarvo="polarvo"
             :preview="preview"
             :sectionKey="key"
@@ -31,7 +40,6 @@
       </PolarLayout>
     </template>
   </div>
-  
 </template>
 
 <script setup>
@@ -70,8 +78,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}%`).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`,
   };
@@ -89,7 +97,6 @@ const getSectionClass = (key, section) => ({
   'section-active': activeSection.value === key,
   disabled: activeSection.value != key && !props.preview,
 });
-
 </script>
 
 <style scoped>

package/src/components/Layout/FreeLayout.vue

@@ -2,12 +2,12 @@
   <div v-if="!preview">
     <div
       v-for="(item, index) in filteredElements"
-      :key="index"
+      :key="item.id"
       :id="item.id"
       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="activeEditMode ? null : startDrag($event, item.id)"
+      @mousedown.stop="activeEditMode ? null : handleMouseDown($event, item.id)"
     >
       <!-- 리사이즈 핸들 -->
       <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
@@ -37,7 +37,7 @@
 
       <component
         :is="dynamicComponent(item.type)"
-        :id="`${sectionKey}-${index}`"
+        :id="`${sectionKey}-${item.id}`"
         :rootId="item.id"
         :ref="(el) => setComponentRef(el, item.id)"
         v-bind="item"
@@ -71,7 +71,17 @@
 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 {
+  toRefs,
+  defineAsyncComponent,
+  markRaw,
+  getCurrentInstance,
+  onMounted,
+  onUnmounted,
+  inject,
+  watch,
+  computed,
+} from 'vue';
 
 const props = defineProps({
   polarvo: {
@@ -99,13 +109,19 @@ const props = defineProps({
 const { setActiveDesign } = props.polarvo.display;
 const { updateActiveElement } = props.polarvo.layout;
 const { elements, activeId, handles, guides, activeElement } = toRefs(props.polarvo.freeDrop.state);
-const { getElementStyle, toggleLock, startDrag, startResize } = props.polarvo.freeDrop;
+const { getElementStyle, toggleLock, handleMouseDown, startResize } = props.polarvo.freeDrop;
 const filteredElements = computed(() => {
   return elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey);
 });
 
+const _componentCache = new Map();
+const modules = import.meta.glob('@/components/elements/*.vue');
+
 function dynamicComponent(elName) {
-  const modules = import.meta.glob('@/components/elements/*.vue');
+  if (_componentCache.has(elName)) {
+    return _componentCache.get(elName);
+  }
+
   const matched = Object.keys(modules).find((path) => {
     return path.includes(elName);
   });
@@ -114,7 +130,9 @@ function dynamicComponent(elName) {
     return markRaw(defineAsyncComponent(async () => ({ template: '<span style="display:none"></span>' })));
   }
 
-  return markRaw(defineAsyncComponent(modules[matched]));
+  const component = markRaw(defineAsyncComponent(modules[matched]));
+  _componentCache.set(elName, component);
+  return component;
 }
 
 function setComponentRef(el, elementId) {
@@ -132,6 +150,7 @@ function toggleEditMode() {
   activeEditMode.value = !activeEditMode.value;
 }
 
+let _isElementSwitching = false;
 import { omit, cloneDeep } from 'lodash-es';
 watch(
   () => activeElement.value?.id,
@@ -140,6 +159,7 @@ watch(
     if (!newId) {
       setActiveDesign(null);
     }
+    _isElementSwitching = true;
     // selectedElement.value = structuredClone(toRaw(activeElement.value));
     selectedElement.value = cloneDeep(activeElement.value);
 
@@ -149,11 +169,15 @@ watch(
 );
 
 // 특정 키 값을 제외하고 변경 감지
-const selectedElementForWatch = computed(() => omit(selectedElement.value, ['position', 'size', 'id']));
+const selectedElementForWatch = computed(() => omit(selectedElement.value, ['mode', 'section', 'position', 'size', 'id']));
 
 watch(
   () => selectedElementForWatch.value,
   (newElement) => {
+    if (_isElementSwitching) {
+      _isElementSwitching = false;
+      return;
+    }
     updateActiveElement(selectedElement.value?.id, newElement);
   },
   { deep: true },

package/src/components/Layout/GridLayout copy.vue

@@ -0,0 +1,187 @@
+<template>
+  <template v-if="!preview">
+    <div
+      v-for="(item, index) in filteredElements"
+      :key="item.id"
+      :id="item.id"
+      class="relative bg-gray-200"
+      :style="getElementStyle('element', item)"
+      :class="{ 'z-50': item.id === activeId, 'bg-white border-2 border-blue-400': item.id === activeId }"
+      @mousedown.stop="activeEditMode ? null : handleMouseDown($event, item)"
+    >
+      <!-- 리사이즈 핸들 -->
+      <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">
+          <!-- 잠금 토글-->
+          <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+            <LockIcon v-if="item.isLocked" />
+            <UnlockIcon v-else />
+          </div>
+          <!-- 편집 토글-->
+          <div class="z-10 pointer-events-auto cursor-pointer">
+            <div v-if="item.type === 'inputForm'" @click="toggleEditMode">
+              <div v-if="activeEditMode" class="bg-red-100 text-red-400 px-2 py-1 text-sm rounded-md hover:opacity-80 animate-pulse">
+                편집모드 on
+              </div>
+              <div v-else class="bg-gray-100 px-2 py-1 text-sm rounded-md hover:bg-gray-200">편집모드 off</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <component
+        :is="dynamicComponent(item.type)"
+        :id="`${sectionKey}-${item.id}`"
+        :rootId="item.id"
+        :ref="(el) => setComponentRef(el, item.id)"
+        v-bind="item"
+        class="hover:opacity-80"
+        :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
+      />
+    </div>
+
+    <!-- 오버레이 -->
+    <div v-if="activeEditMode" class="absolute inset-0 bg-black opacity-50"></div>
+
+    <!-- 빈 그리드 설정 -->
+    <div
+      v-for="(cell, index) in emptyData[sectionKey]"
+      :key="`${cell.row}-${cell.col}`"
+      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"
+        @mousedown="handleMouseDown($event, cell)"
+      >
+        +
+      </div>
+    </div>
+  </template>
+</template>
+
+<script setup>
+import LockIcon from '../../icons/action/LockIcon.vue';
+import UnlockIcon from '../../icons/action/UnlockIcon.vue';
+
+import {
+  toRefs,
+  ref,
+  defineAsyncComponent,
+  markRaw,
+  getCurrentInstance,
+  onMounted,
+  onUnmounted,
+  inject,
+  watch,
+  computed,
+} from 'vue';
+const emit = defineEmits(['click:element']);
+const props = defineProps({
+  polarvo: {
+    type: Object,
+    required: true,
+  },
+  preview: {
+    type: Boolean,
+    default: false,
+  },
+  sectionKey: {
+    type: String,
+    required: true,
+  },
+  elementIds: {
+    type: Array,
+    required: true,
+  },
+});
+
+const { setActiveDesign } = props.polarvo.display;
+const { updateActiveElement } = props.polarvo.layout;
+const { elements, emptyData, activeId, activeCell, activeElement } = toRefs(props.polarvo.gridDrop.state);
+const { getElementStyle, setActiveElement, toggleLock, startDrag, handleMouseDown, detectHoverCell, startResize } = props.polarvo.gridDrop;
+const filteredElements = computed(() => {
+  return elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey);
+});
+
+const _componentCache = new Map();
+const modules = import.meta.glob('@/components/elements/*.vue');
+
+function dynamicComponent(elName) {
+  if (_componentCache.has(elName)) {
+    return _componentCache.get(elName);
+  }
+
+  const matched = Object.keys(modules).find((path) => {
+    return path.includes(elName);
+  });
+
+  if (!matched) {
+    return markRaw(defineAsyncComponent(async () => ({ template: '<span style="display:none"></span>' })));
+  }
+
+  const component = markRaw(defineAsyncComponent(modules[matched]));
+  _componentCache.set(elName, component);
+  return component;
+}
+
+function setComponentRef(el, elementId) {
+  if (el) {
+    props.polarvo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
+  } else {
+    props.polarvo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
+  }
+}
+
+const selectedElement = inject('selectedElement');
+const activeEditMode = inject('activeEditMode');
+
+function toggleEditMode() {
+  activeEditMode.value = !activeEditMode.value;
+}
+
+let _isElementSwitching = false;
+import { omit, cloneDeep } from 'lodash-es';
+watch(
+  () => activeElement.value?.id,
+  (newId, oldId) => {
+    if (newId === oldId) return;
+    if (!newId) {
+      setActiveDesign(null);
+    }
+    _isElementSwitching = true;
+    // selectedElement.value = structuredClone(toRaw(activeElement.value));
+    selectedElement.value = cloneDeep(activeElement.value);
+
+    // activeElement 바뀌면 편집 모드 해제
+    activeEditMode.value = false;
+  },
+  { immediate: true },
+);
+
+// 특정 키 값을 제외하고 변경 감지
+const selectedElementForWatch = computed(() => omit(selectedElement.value, ['mode', 'section', 'position', 'size', 'id']));
+
+watch(
+  () => selectedElementForWatch.value,
+  (newElement) => {
+    if (_isElementSwitching) {
+      _isElementSwitching = false;
+      return;
+    }
+    updateActiveElement(selectedElement.value?.id, newElement);
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  props.polarvo.components.register('sections', props.sectionKey, getCurrentInstance());
+  activeEditMode.value = false;
+});
+
+onUnmounted(() => {
+  props.polarvo.components.unregister('sections', props.sectionKey);
+});
+</script>

package/src/components/Layout/GridLayout.vue

@@ -1,63 +1,66 @@
 <template>
   <template v-if="!preview">
     <div
-      v-for="(item, index) in filteredElements"
-      :key="index"
-      :id="item.id"
-      class="relative bg-gray-200"
-      :style="getElementStyle('element', item)"
-      :class="{ 'z-50': item.id === activeId, 'bg-white border-2 border-blue-400': item.id === activeId }"
-      @mousedown.stop="activeEditMode ? null : startDrag($event, item.id)"
+      v-for="(item, index) in mergedData"
+      :key="item.id ?? `${item.row}-${item.col}`"
+      :id="item.id ?? `${item.row}-${item.col}`"
+      :style="getElementStyle(item.id ? 'element' : 'empty', item)"
+      :class="
+        item.id
+          ? ['relative bg-gray-200', { 'z-50 bg-white border-2 border-blue-400': item.id === activeId }]
+          : 'flex items-center justify-center bg-gray-100 border border-gray-300'
+      "
+      @mousedown="activeEditMode ? null : handleMouseDown($event, item)"
+      @mouseenter="item.id ? null : detectHoverCell(item)"
     >
-      <!-- 리사이즈 핸들 -->
-      <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">
-          <!-- 잠금 토글-->
-          <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
-            <LockIcon v-if="item.isLocked" />
-            <UnlockIcon v-else />
-          </div>
-          <!-- 편집 토글-->
-          <div class="z-10 pointer-events-auto cursor-pointer">
-            <div v-if="item.type === 'inputForm'" @click="toggleEditMode">
-              <div v-if="activeEditMode" class="bg-red-100 text-red-400 px-2 py-1 text-sm rounded-md hover:opacity-80 animate-pulse">
-                편집모드 on
+      <template v-if="item.id">
+        <div>
+          <!-- 리사이즈 핸들 -->
+          <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">
+              <!-- 잠금 토글-->
+              <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+                <LockIcon v-if="item.isLocked" />
+                <UnlockIcon v-else />
+              </div>
+              <!-- 편집 토글-->
+              <div class="z-10 pointer-events-auto cursor-pointer">
+                <div v-if="item.type === 'inputForm'" @click="toggleEditMode">
+                  <div v-if="activeEditMode" class="bg-red-100 text-red-400 px-2 py-1 text-sm rounded-md hover:opacity-80 animate-pulse">
+                    편집모드 on
+                  </div>
+                  <div v-else class="bg-gray-100 px-2 py-1 text-sm rounded-md hover:bg-gray-200">편집모드 off</div>
+                </div>
               </div>
-              <div v-else class="bg-gray-100 px-2 py-1 text-sm rounded-md hover:bg-gray-200">편집모드 off</div>
             </div>
           </div>
+
+          <component
+            :is="dynamicComponent(item.type)"
+            :id="`${sectionKey}-${item.id}`"
+            :rootId="item.id"
+            :ref="(el) => setComponentRef(el, item.id)"
+            v-bind="item"
+            class="hover:opacity-80"
+            :class="activeEditMode ? `pointer-events-auto ` : `pointer-events-none`"
+          />
         </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`"
-      />
-    </div>
 
-    <!-- 오버레이 -->
-    <div v-if="activeEditMode" class="absolute inset-0 bg-black opacity-50"></div>
+        <!-- 오버레이 -->
+        <div v-if="activeEditMode && item.id !== activeId" class="absolute inset-0 bg-black opacity-50"></div>
+      </template>
 
-    <!-- 빈 그리드 설정 -->
-    <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
-        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>
+      <template v-else>
+        <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"
+        >
+          +
+        </div>
+      </template>
     </div>
   </template>
 </template>
@@ -66,19 +69,7 @@
 import LockIcon from '../../icons/action/LockIcon.vue';
 import UnlockIcon from '../../icons/action/UnlockIcon.vue';
 
-import {
-  nextTick,
-  toRefs,
-  defineAsyncComponent,
-  markRaw,
-  getCurrentInstance,
-  onMounted,
-  onUnmounted,
-  inject,
-  watch,
-  toRaw,
-  computed,
-} from 'vue';
+import { toRefs, ref, defineAsyncComponent, markRaw, getCurrentInstance, onMounted, onUnmounted, inject, watch, computed } from 'vue';
 const emit = defineEmits(['click:element']);
 const props = defineProps({
   polarvo: {
@@ -93,6 +84,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  sectionData: {
+    type: Object,
+    required: true,
+  },
   elementIds: {
     type: Array,
     required: true,
@@ -101,14 +96,39 @@ const props = defineProps({
 
 const { setActiveDesign } = props.polarvo.display;
 const { updateActiveElement } = props.polarvo.layout;
-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);
+const { elements, activeId, activeCell, activeElement } = toRefs(props.polarvo.gridDrop.state);
+const { getElementStyle, setActiveElement, toggleLock, handleMouseDown, detectHoverCell, startResize } = props.polarvo.gridDrop;
+
+const mergedData = computed(() => {
+  const { gridColumns, gridRows } = props.sectionData?.config ?? { gridColumns: 3, gridRows: 3 };
+  const grid = Array.from({ length: gridRows + 1 }, () => Array(gridColumns + 1).fill(false));
+
+  const filled = elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey);
+
+  filled.forEach(({ position: { col, row }, size: { colSpan, rowSpan } }) => {
+    for (let r = row; r < row + rowSpan; r++) {
+      for (let c = col; c < col + colSpan; c++) {
+        if (r >= 1 && c >= 1 && r <= gridRows && c <= gridColumns) {
+          grid[r][c] = true;
+        }
+      }
+    }
+  });
+
+  const empty = [];
+  for (let r = 1; r <= gridRows; r++) for (let c = 1; c <= gridColumns; c++) if (!grid[r][c]) empty.push({ row: r, col: c });
+
+  return [...filled, ...empty];
 });
 
+const _componentCache = new Map();
+const modules = import.meta.glob('@/components/elements/*.vue');
+
 function dynamicComponent(elName) {
-  const modules = import.meta.glob('@/components/elements/*.vue');
+  if (_componentCache.has(elName)) {
+    return _componentCache.get(elName);
+  }
+
   const matched = Object.keys(modules).find((path) => {
     return path.includes(elName);
   });
@@ -117,7 +137,9 @@ function dynamicComponent(elName) {
     return markRaw(defineAsyncComponent(async () => ({ template: '<span style="display:none"></span>' })));
   }
 
-  return markRaw(defineAsyncComponent(modules[matched]));
+  const component = markRaw(defineAsyncComponent(modules[matched]));
+  _componentCache.set(elName, component);
+  return component;
 }
 
 function setComponentRef(el, elementId) {
@@ -135,6 +157,7 @@ function toggleEditMode() {
   activeEditMode.value = !activeEditMode.value;
 }
 
+let _isElementSwitching = false;
 import { omit, cloneDeep } from 'lodash-es';
 watch(
   () => activeElement.value?.id,
@@ -143,6 +166,7 @@ watch(
     if (!newId) {
       setActiveDesign(null);
     }
+    _isElementSwitching = true;
     // selectedElement.value = structuredClone(toRaw(activeElement.value));
     selectedElement.value = cloneDeep(activeElement.value);
 
@@ -153,11 +177,15 @@ watch(
 );
 
 // 특정 키 값을 제외하고 변경 감지
-const selectedElementForWatch = computed(() => omit(selectedElement.value, ['position', 'size', 'id']));
+const selectedElementForWatch = computed(() => omit(selectedElement.value, ['mode', 'section', 'position', 'size', 'id']));
 
 watch(
   () => selectedElementForWatch.value,
   (newElement) => {
+    if (_isElementSwitching) {
+      _isElementSwitching = false;
+      return;
+    }
     updateActiveElement(selectedElement.value?.id, newElement);
   },
   { deep: true },

package/src/components/Layout/PolarLayout.vue

@@ -1,5 +1,25 @@
 <template>
-  <div id="polarLayout" class="w-full h-full rounded-md">
+  <div id="polarLayout" class="w-full h-full rounded-md" :class="mode === 'grid' ? 'polar-grid' : null">
     <slot></slot>
   </div>
-</template>
+</template>
+
+<script setup>
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'free',
+  },
+});
+</script>
+
+<style scoped>
+.polar-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
+  gap: var(--grid-gap, 5px);
+  width: 100%;
+  height: 100%;
+  border-radius: 0.375rem;
+}
+</style>

package/src/core/engines/DisplayEngine.js

@@ -72,14 +72,19 @@ class DisplayEngine {
 
     this._subscribe('gridDrop:setActiveElement', ({ action }) => {
       if (action === 'update') return;
-      if (action === 'click') {
-        this.setActiveMenu('element');
-      } else {
+      // if (action === 'click') {
+      //   this.setActiveMenu('element');
+      // } else {
         this.setActiveMenu(null);
-      }
+      // }
 
       this.setActiveDesign(null);
     });
+
+    this._subscribe('gridDrop:requestOpenElementBar', () => {
+      this.setActiveMenu('element');
+      this.setActiveDesign(null);
+    })
   }
 
   /** 삭제 및 정리 */