polarvo-layout 1.0.80 → 1.0.82

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="canvasRoot"
     :id="preview ? 'previewLayout' : 'baseLayout'"
     class="grid h-full p-[10px] bg-transparent rounded-lg"
     :class="[layoutType + '-layout', `grid-cols-${gridNumber?.column}`, { 'mb-4': layoutType === 'three-column-split' }]"
@@ -36,7 +37,7 @@
 </template>
 
 <script setup>
-import { toRefs, computed } from 'vue';
+import { toRefs, computed, onMounted, onUnmounted, ref, inject } from 'vue';
 
 import PolarLayout from './PolarLayout.vue';
 import FreeLayout from './FreeLayout.vue';
@@ -66,8 +67,11 @@ const layoutType = computed(() => {
     .toLowerCase()
     .substring(1);
 });
-
 const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
+const { activeDesign } = toRefs(props.polarvo.display.state);
+const selectedElement = inject('selectedElement');
+const activeEditMode = inject('activeEditMode');
+const activeLeaf = inject('activeLeaf');
 
 const getBaseStyle = computed(() => {
   return {
@@ -95,6 +99,71 @@ const getSectionClass = (key, section) => ({
   'section-active': activeSection.value === key,
   disabled: activeSection.value !== key && !props.preview,
 });
+
+const canvasRoot = ref(null);
+
+function isEligible(e) {
+  // 디자인 설정 패널이 열려있지 않으면 무시
+  if (activeDesign.value !== 'design') return null;
+  // 활성화된 요소가 없거나 activeMode인 경우 무시
+  if (!selectedElement.value?.id || activeEditMode.value) return null;
+
+  // 현재 마우스 위치가 활성화된 요소 내부에 있는지 확인F
+  const activeElRoot = document.getElementById(selectedElement.value.id);
+  if (!activeElRoot?.contains(e.target)) return null;
+
+  return activeElRoot;
+}
+
+let hoveredEl = null;
+
+function setHovered(el) {
+  if (hoveredEl === el) return;
+  hoveredEl?.removeAttribute('data-hovering');
+  hoveredEl = el;
+  hoveredEl?.setAttribute('data-hovering', 'true');
+}
+
+function onHover(e) {
+  const activeElRoot = isEligible(e);
+  if (!activeElRoot) {
+    setHovered(null);
+    return;
+  }
+
+  const leafEl = e.target.closest('[data-leaf]');
+  const ownerEl = e.target.closest('[data-style-owner]');
+  if (!leafEl || !ownerEl) {
+    setHovered(null);
+    return;
+  }
+
+  setHovered(leafEl);
+}
+
+function onClick(e) {
+  const activeElRoot = isEligible(e);
+  if (!activeElRoot) return;
+
+  const leafEl = e.target.closest('[data-leaf]');
+  const ownerEl = e.target.closest('[data-style-owner]');
+  if (!leafEl || !ownerEl) return;
+
+  // leaf 내부의 실제 버튼/링크/폼 제출 등 기본 동작 막기
+  e.preventDefault();
+  e.stopPropagation();
+
+  activeLeaf.value = { owner: ownerEl.dataset.styleOwner, leaf: leafEl.dataset.leaf, elementId: activeElRoot.id };
+}
+onMounted(() => {
+  canvasRoot.value.addEventListener('mouseover', onHover);
+  canvasRoot.value.addEventListener('click', onClick, true);
+});
+
+onUnmounted(() => {
+  canvasRoot.value?.removeEventListener('mouseover', onHover);
+  canvasRoot.value?.removeEventListener('click', onClick, true);
+});
 </script>
 
 <style scoped>
@@ -118,4 +187,19 @@ const getSectionClass = (key, section) => ({
   pointer-events: none;
   opacity: 0.6;
 }
+
+:deep(.pointer-events-auto [data-leaf]) {
+  pointer-events: auto;
+}
+
+:deep([data-leaf][data-hovering]) {
+  border-radius: 2px;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 3px #6366f1;
+  background-color: rgb(99 102 241 / 0.06);
+  transition:
+    box-shadow 120ms ease,
+    background-color 120ms ease;
+}
 </style>

package/src/components/Layout/CanvasContainer.vue

@@ -1,14 +1,17 @@
 <template>
-  <div class="canvas-wrapper w-full h-full max-h-[765px] overflow-y-auto overflow-x-hidden">
-    <div id="canvas-container" class="border rounded-md w-full h-full bg-white" :style="containerStyle">
-      <BaseLayout :polarvo="polarvo" class="relative" />
-      <div
-        class="absolute bottom-4 left-4 right-4 bg-gray-50 flex items-center justify-center text-gray-400 rounded-lg hover:bg-gray-100 hover:text-gray-600 cursor-pointer"
-        @click="expandContainer()"
-      >
-        <font-awesome-icon :icon="['fas', 'plus']" class="h-8 text-xs" />
+  <div class="w-full h-full flex flex-col bg-gray-50">
+    <div class="canvas-wrapper w-full flex-1 min-h-0 overflow-y-auto overflow-x-hidden bg-gray-50">
+      <div id="canvas-container" class="border rounded-md w-full bg-white" :style="containerStyle">
+        <BaseLayout :polarvo="polarvo" class="relative" />
       </div>
     </div>
+    <div
+      class="py-2 px-2 shrink-0 bg-white border border-gray-300 flex items-center justify-center text-gray-500 rounded-lg hover:bg-gray-100 cursor-pointer"
+      :style="{ width: `${displayWidth}px`, margin: '8px auto ' }"
+      @click="expandContainer()"
+    >
+      <font-awesome-icon :icon="['fas', 'plus']" class="h-8 text-xs" />
+    </div>
   </div>
 </template>
 
@@ -55,6 +58,11 @@ watch(
 
 const additionalHeight = ref(0);
 const displayHeight = computed(() => defaultHeight.value + additionalHeight.value);
+const displayWidth = computed(() => {
+  const px = displaySize.value?.px ?? DEFAULT_DISPLAY_SIZE.px;
+  const percent = displaySize.value?.percent ?? DEFAULT_DISPLAY_SIZE.percent;
+  return px * (percent / 100);
+});
 
 function expandContainer() {
   additionalHeight.value += 200;

package/src/components/Layout/FreeItem.vue

@@ -1,13 +1,17 @@
 <template>
   <div
     :id="item.id"
-    class="absolute user-select-none"
+    class="absolute user-select-none p-1"
     :style="itemStyle"
-    :class="{ 'z-50': item.id === activeId, 'bg-white border border-blue-400': item.id === activeId, 'bg-white': item.type === 'chart' }"
+    :class="{
+      'z-50': item.id === activeId,
+      'rounded-sm bg-white shadow-sm outline outline-1 outline-blue-500 outline-offset-[-1px]': item.id === activeId,
+      'bg-white': item.type === 'chart',
+    }"
     @mousedown.stop="activeEditMode ? null : handleMouseDown($event, item.id)"
   >
     <!-- 크기-->
-    <div v-if="item.id === activeId" class="absolute bg-blue-400 px-2 py-1 text-sm text-white right-0 z-10">
+    <div v-if="item.id === activeId" class="absolute right-0 z-20 bg-blue-500 px-2 py-1 text-sm text-white shadow-sm mr-1">
       가로: {{ Math.round(size.w) }} 세로: {{ Math.round(size.h) }}
     </div>
 
@@ -16,22 +20,30 @@
       <div
         v-for="handle in handles"
         :key="handle.name"
-        :class="`handle absolute bg-blue-400 z-10 pointer-events-auto hover:bg-blue-700 ${handle.name}`"
+        :class="`handle absolute z-20 pointer-events-auto rounded-[2px] border border-blue-500 bg-white shadow-sm transition-transform duration-100 hover:scale-125 hover:bg-blue-500 ${handle.name}`"
         @mousedown="startResize($event, handle.name)"
       ></div>
-      <div class="flex flex-row m-1 gap-1">
+      <div class="flex flex-row m-1 gap-2">
         <!-- 잠금 토글-->
-        <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+        <div class="z-20 pointer-events-auto cursor-pointer ring-1 ring-slate-200 rounded-md" @click="toggleLock()">
           <LockIcon v-if="item.isLocked" />
           <UnlockIcon v-else />
         </div>
         <!-- 편집 토글-->
-        <div class="z-10 pointer-events-auto cursor-pointer">
+        <div class="z-20 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">
+            <div
+              v-if="activeEditMode"
+              class="rounded-sm bg-red-100 px-2 py-1 text-sm text-red-400 shadow-sm ring-1 ring-red-200 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
+              v-else
+              class="rounded-sm bg-gray-100 px-2 py-1 text-sm text-gray-600 shadow-sm ring-1 ring-slate-200 transition-colors hover:bg-gray-200"
+            >
+              편집모드 off
+            </div>
           </div>
         </div>
       </div>

package/src/components/Layout/FreeLayout.vue

@@ -71,7 +71,8 @@ const activeEditMode = inject('activeEditMode');
 
 const isHovable = (item) => {
   if (!item || props.preview) return true;
-  return activeElement.value?.id === item.id && ['chart'].includes(item.type);
+  // return activeElement.value?.id === item.id && ['chart'].includes(item.type);
+  return activeElement.value?.id === item.id;
 };
 
 let _isElementSwitching = false;

package/src/components/Layout/GridItem.vue

@@ -1,10 +1,14 @@
 <template>
   <div
     :id="item.id ?? `${item.row}-${item.col}`"
+    class="p-1"
     :class="
       item.id
-        ? ['relative bg-gray-200 user-select-none', { 'z-50 bg-white border-2 border-blue-400': item.id === activeId }]
-        : 'flex items-center justify-center bg-gray-100 border border-gray-300 '
+        ? [
+            'relative bg-gray-200 user-select-none',
+            { 'z-50 rounded-sm bg-white shadow-sm outline outline-2 outline-blue-500 outline-offset-[-2px]': item.id === activeId },
+          ]
+        : 'flex items-center justify-center rounded-sm border border-slate-200 bg-slate-50'
     "
     :style="itemStyle"
     @mousedown.stop="activeEditMode ? null : handleMouseDown($event, item)"
@@ -14,22 +18,30 @@
       <!-- 리사이즈 핸들 -->
       <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
         <div
-          class="absolute w-2 h-2 bottom-0 right-0 bg-blue-400 z-10 pointer-events-auto cursor-se-resize"
+          class="absolute bottom-0 right-0 z-20 h-2 w-2 cursor-se-resize rounded-[2px] border border-blue-500 bg-white pointer-events-auto shadow-sm transition-transform duration-100 hover:scale-125 hover:bg-blue-500"
           @mousedown="startResize($event, item.id)"
         ></div>
-        <div class="flex gap-1 m-1">
+        <div class="flex gap-2 m-1">
           <!-- 잠금 토글-->
-          <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+          <div class="z-20 pointer-events-auto cursor-pointer ring-1 ring-slate-200 rounded-md" @click="toggleLock()">
             <LockIcon v-if="item.isLocked" />
             <UnlockIcon v-else />
           </div>
           <!-- 편집 토글-->
-          <div class="z-10 pointer-events-auto cursor-pointer">
+          <div class="z-20 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">
+              <div
+                v-if="activeEditMode"
+                class="rounded-sm bg-red-100 px-2 py-1 text-sm text-red-400 shadow-sm ring-1 ring-red-200 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
+                v-else
+                class="rounded-sm bg-gray-100 px-2 py-1 text-sm text-gray-600 shadow-sm ring-1 ring-slate-200 transition-colors hover:bg-gray-200"
+              >
+                편집모드 off
+              </div>
             </div>
           </div>
         </div>
@@ -51,7 +63,7 @@
 
     <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"
+        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-sm text-slate-400 shadow-sm transition-colors hover:border-blue-300 hover:bg-blue-50 hover:text-blue-500"
       >
         +
       </div>

package/src/components/Layout/GridLayout.vue

@@ -110,7 +110,8 @@ const activeEditMode = inject('activeEditMode');
 
 const isHovable = (item) => {
   if (!item || props.preview) return true;
-  return activeElement.value?.id === item.id && ['chart'].includes(item.type);
+  // return activeElement.value?.id === item.id && ['chart'].includes(item.type);
+  return activeElement.value?.id === item.id;
 };
 
 import { omit, cloneDeep, debounce } from 'lodash-es';