polarvo-layout 1.0.27 → 1.0.29

package/package.json

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

package/src/components/Layout/FreeItem.vue

@@ -5,7 +5,10 @@
     :style="itemStyle"
     :class="{ 'z-50': item.id === activeId, 'bg-white border-2 border-blue-400': item.id === activeId }"
     @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 ">
+        가로: {{ size.w }} 세로: {{ size.h }}</div>
     
     <!-- 리사이즈 핸들 -->
     <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
@@ -56,8 +59,9 @@ const props = defineProps({
   sectionKey: { type: String, required: true },
 });
 
-const { activeId, handles } = toRefs(props.polarvo.freeDrop.state);
+const { activeId, handles, activeElement } = toRefs(props.polarvo.freeDrop.state);
 const { getElementStyle, handleMouseDown, startResize, toggleLock } = props.polarvo.freeDrop;
+const size = computed(() => activeElement.value ? activeElement.value.size : { w: 0, h: 0 });
 
 const activeEditMode = inject('activeEditMode');
 function toggleEditMode() {
@@ -94,7 +98,6 @@ function setRef(el) {
 </script>
 
 <style lang="scss" scoped>
-
 .handle {
   // 모서리
   &.nw {
@@ -166,4 +169,4 @@ function setRef(el) {
     cursor: e-resize;
   }
 }
-</style>
+</style>

package/src/components/Layout/FreeLayout.vue

@@ -7,7 +7,7 @@
       :polarvo="props.polarvo"
       :sectionKey="props.sectionKey"
     ></FreeItem>
-
+    
     <!-- 오버레이 -->
     <div v-if="activeEditMode" class="absolute inset-0 bg-black opacity-50"></div>
 
@@ -112,7 +112,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
 .guide {
   &.vertical {
     top: 0;