polarvo-layout 1.0.0

package/src/components/Layout/BaseLayout.vue

@@ -0,0 +1,119 @@
+<template>
+  <div
+    :id="preview ? 'previewLayout' : 'baseLayout'"
+    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`"
+        :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)"
+      >
+        <div v-if="preview" class="absolute text-sm top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+          {{ key }}
+        </div>
+        <template v-if="section.mode === 'grid'">
+          <GridLayout :polavo="polavo" :preview="preview" :sectionKey="key"  />
+        </template>
+
+        <template v-else>
+          <FreeLayout
+            :polavo="polavo"
+            :preview="preview"
+            :sectionKey="key"
+            :isActive="activeSection === key"
+          />
+        </template>
+      </PolarLayout>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { toRefs, reactive, computed } from 'vue';
+
+import PolarLayout from './PolarLayout.vue';
+import FreeLayout from './FreeLayout.vue';
+import GridLayout from './GridLayout.vue';
+
+// 우클릭 방지
+window.oncontextmenu = () => {
+  return false;
+};
+
+const emit = defineEmits(['click:section']);
+const props = defineProps({
+  polavo: {
+    type: Object,
+    required: true,
+  },
+  preview: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const layoutType = computed(() => {
+  if (layoutName.value.eng == null) return 'no-split';
+  return layoutName.value.eng
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .substring(1);
+});
+
+const getBaseStyle = computed(() => {
+  return {
+    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`,
+  };
+});
+
+const getSectionStyle = (section) => ({
+  '--grid-columns': section.config?.gridColumns || 3,
+  '--grid-gap': `${section.config?.gridGap || 5}px`,
+  position: 'relative',
+});
+
+const getSectionClass = (key, section) => ({
+  [key]: true,
+  [section.mode]: true,
+  'section-active': activeSection.value === key,
+  disabled: activeSection.value != key && !props.preview,
+});
+
+const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polavo.layout.state);
+</script>
+
+<style scoped>
+.main-bottom-split-layout :deep(.section1),
+.main-top-split-layout :deep(.section3) {
+  grid-column: span 2 / span 2;
+}
+
+[id^='section'] {
+  border: 1px solid transparent;
+  border-color: gray;
+}
+
+[id^='section'].section-active {
+  border-width: 1px;
+  border-color: #3b82f6; /* blue-500 */
+}
+
+[id^='section'].disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+</style>

package/src/components/Layout/CanvasContainer.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="w-full h-full p-4">
+    <div id="canvas-container" class="border rounded-md w-full h-full bg-white" :style="containerStyle">
+      <BaseLayout ref="baseLayoutRef" :polavo="polavo" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs, inject, computed, provide } from 'vue';
+import BaseLayout from './BaseLayout.vue';
+
+const props = defineProps({
+  polavo: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { displaySize } = toRefs(props.polavo.display.state);
+const gridSize = computed(() => displaySize.value.gridSize || 16);
+
+const containerStyle = computed(() => {
+  return {
+    aspectRatio: displaySize.value.aspectRatio,
+    width: `${displaySize.value.px}px`,
+    margin: `0 auto`,
+    transform: `scale(${displaySize.value.percent / 100})`,
+    transformOrigin: 'top center',
+    backgroundImage: `
+      linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)
+    `,
+    backgroundSize: `${gridSize.value}px ${gridSize.value}px`,
+  };
+});
+
+const { elements } = toRefs(props.polavo.layout.state);
+
+// 전체 elements
+provide('elements', elements)
+
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/Layout/FreeLayout.vue

@@ -0,0 +1,246 @@
+<template>
+  <div>
+    <div
+      v-for="(item, index) in elements"
+      :key="index"
+      :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 && !preview }"
+      @mousedown.stop="startDrag($event, item.id)"
+    >
+      <!-- 리사이즈 핸들 -->
+      <div v-if="item.id === activeId && !preview" class="absolute inset-0 pointer-events-none">
+        <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}`"
+          @mousedown="startResize($event, handle.name)"
+        ></div>
+        <div class="absolute z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+          <LockIcon v-if="item.isLocked" />
+          <UnlockIcon v-else />
+        </div>
+      </div>
+      <component
+        v-if="!preview"
+        :is="dynamicComponent(item.type)"
+        :id="`${sectionKey}-${index}`"
+        :ref="(el) => setComponentRef(el, item.id)"
+        v-bind="item"
+        class="hover:opacity-80 pointer-events-none"
+      />
+    </div>
+
+    <!-- 가이드라인 -->
+    <div v-if="isActive && !preview">
+      <div
+        v-if="guides.x !== null"
+        class="guide absolute z-10 pointer-events-none vertical"
+        :style="{ left: `${guides.x}px` }"
+      ></div>
+      <div
+        v-if="guides.x !== null"
+        class="guide absolute z-10 pointer-events-none vertical"
+        :style="{ left: `${guides.x + guides.w}px` }"
+      ></div>
+      <div
+        v-if="guides.y !== null"
+        class="guide absolute z-10 pointer-events-none horizontal"
+        :style="{ top: `${guides.y}px` }"
+      ></div>
+      <div
+        v-if="guides.y !== null"
+        class="guide absolute z-10 pointer-events-none horizontal"
+        :style="{ top: `${guides.y + guides.h}px` }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+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';
+
+const props = defineProps({
+  polavo: {
+    type: Object,
+    required: true,
+  },
+  preview: {
+    type: Boolean,
+    default: false,
+  },
+  sectionKey: {
+    type: String,
+    required: true,
+  },
+  isActive: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { setActiveDesign } = props.polavo.display;
+const { updateActiveElement } = props.polavo.layout;
+const { elements, activeId, handles, guides, activeElement } = toRefs(props.polavo.freeDrop.state);
+const { getElementStyle, toggleLock, startDrag, startResize } = props.polavo.freeDrop;
+
+function dynamicComponent(elName) {
+  const modules = import.meta.glob('@/components/elements/*.vue');
+  const matched = Object.keys(modules).find((path) => {
+    return path.includes(elName);
+  });
+
+  if (!matched) {
+    return markRaw(defineAsyncComponent(async () => ({ template: '<span style="display:none"></span>' })));
+  }
+
+  return markRaw(defineAsyncComponent(modules[matched]));
+}
+
+function setComponentRef(el, elementId) {
+  if (el) {
+    props.polavo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
+  } else {
+    props.polavo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
+  }
+}
+
+const selectedElement = inject('selectedElement');
+
+watch(
+  () => activeElement.value?.id,
+  (newId, oldId) => {
+     if (newId === oldId) return;
+    if (!newId) {
+      setActiveDesign(null)
+    }
+    selectedElement.value = structuredClone(toRaw(activeElement.value));
+  },
+  { immediate: true }
+);
+
+import { omit } from 'lodash-es';
+// 특정 키 값을 제외하고 변경 감지
+const selectedElementForWatch = computed(() => omit(selectedElement.value, ['position', 'size', 'id']));
+
+watch(
+  () => selectedElementForWatch.value,
+  (newElement) => {
+    updateActiveElement(selectedElement.value?.id, newElement)
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  props.polavo.components.register('sections', props.sectionKey, getCurrentInstance());
+});
+
+onUnmounted(() => {
+  props.polavo.components.unregister('sections', props.sectionKey);
+});
+</script>
+
+<style lang="scss" scoped>
+.handle {
+  // 모서리
+  &.nw {
+    top: -4px;
+    left: -4px;
+    width: 8px;
+    height: 8px;
+    cursor: nw-resize;
+  }
+
+  &.ne {
+    top: -4px;
+    right: -4px;
+    width: 8px;
+    height: 8px;
+    cursor: ne-resize;
+  }
+
+  &.sw {
+    bottom: -4px;
+    left: -4px;
+    width: 8px;
+    height: 8px;
+    cursor: sw-resize;
+  }
+
+  &.se {
+    bottom: -4px;
+    right: -4px;
+    width: 8px;
+    height: 8px;
+    cursor: se-resize;
+  }
+
+  // 가장자리
+  &.n {
+    top: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 8px;
+    height: 8px;
+    cursor: n-resize;
+  }
+
+  &.s {
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 8px;
+    height: 8px;
+    cursor: s-resize;
+  }
+
+  &.w {
+    top: 50%;
+    left: -4px;
+    transform: translateY(-50%);
+    width: 8px;
+    height: 8px;
+    cursor: w-resize;
+  }
+
+  &.e {
+    top: 50%;
+    right: -4px;
+    transform: translateY(-50%);
+    width: 8px;
+    height: 8px;
+    cursor: e-resize;
+  }
+}
+
+.guide {
+  &.vertical {
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    border-left: 1px dashed #60a5fa; // border-blue-400
+  }
+
+  &.horizontal {
+    left: 0;
+    right: 0;
+    height: 1px;
+    border-top: 1px dashed #60a5fa; // border-blue-400
+  }
+}
+</style>

package/src/components/Layout/GridLayout.vue

@@ -0,0 +1,146 @@
+<template>
+  <div
+    v-for="(item, index) in elements"
+    :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 && !preview,
+    }"
+    :style="getElementStyle('element', item)"
+    @mousedown.stop="startDrag($event, item.id)"
+  >
+    <!-- 리사이즈 핸들 -->
+    <div v-if="activeElement?.id === item.id && !preview">
+      <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="absolute z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+        <LockIcon v-if="item.isLocked" />
+        <UnlockIcon v-else />
+      </div>
+    </div>
+
+    <component
+      v-if="!preview"
+      :is="dynamicComponent(item.type)"
+      :id="`${sectionKey}-${index}`"
+      :ref="(el) => setComponentRef(el, item.id)"
+      v-bind="item"
+      class="hover:opacity-80 pointer-events-none"
+    />
+  </div>
+
+  <!-- 빈 그리드 설정 -->
+  <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
+      v-show="!preview"
+      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="setActiveCell('new', cell)"
+    >
+      +
+    </div>
+  </div>
+</template>
+
+<script setup>
+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';
+const emit = defineEmits(['click:element']);
+const props = defineProps({
+  polavo: {
+    type: Object,
+    required: true,
+  },
+  preview: {
+    type: Boolean,
+    default: false,
+  },
+  sectionKey: {
+    type: String,
+    required: true,
+  },
+});
+
+const { setActiveDesign } = props.polavo.display;
+const { updateActiveElement } = props.polavo.layout;
+const { elements, emptyData, activeCell, activeElement } = toRefs(props.polavo.gridDrop.state);
+const { getElementStyle, setActiveCell, toggleLock, startDrag, detectHoverCell, startResize } = props.polavo.gridDrop;
+
+function dynamicComponent(elName) {
+  const modules = import.meta.glob('@/components/elements/*.vue');
+  const matched = Object.keys(modules).find((path) => {
+    return path.includes(elName);
+  });
+
+  if (!matched) {
+    return markRaw(defineAsyncComponent(async () => ({ template: '<span style="display:none"></span>' })));
+  }
+
+  return markRaw(defineAsyncComponent(modules[matched]));
+}
+
+function setComponentRef(el, elementId) {
+  if (el) {
+    props.polavo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
+  } else {
+    props.polavo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
+  }
+}
+
+const selectedElement = inject('selectedElement');
+
+
+watch(
+  () => activeElement.value?.id,
+  (newId, oldId) => {
+    if (newId === oldId) return;
+    if (!newId) {
+      setActiveDesign(null)
+    }
+    selectedElement.value = structuredClone(toRaw(activeElement.value));
+  },
+  { immediate: true }
+);
+
+import { omit } from 'lodash-es';
+// 특정 키 값을 제외하고 변경 감지
+const selectedElementForWatch = computed(() => omit(selectedElement.value, ['position', 'size', 'id']));
+
+watch(
+  () => selectedElementForWatch.value,
+  (newElement) => {
+    updateActiveElement(selectedElement.value?.id, newElement)
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  props.polavo.components.register('sections', props.sectionKey, getCurrentInstance());
+});
+
+onUnmounted(() => {
+  props.polavo.components.unregister('sections', props.sectionKey);
+});
+</script>

package/src/components/Layout/PolarLayout.vue

@@ -0,0 +1,5 @@
+<template>
+  <div id="polarLayout" class="w-full h-full rounded-md">
+    <slot></slot>
+  </div>
+</template>

package/src/components/MiniMenu/LayoutMiniMenu.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="mini-menu">
+    <div class="text-sm text-gray-600 font-semibold mb-1">레이아웃 형태</div>
+    <div class="text-sm text-gray-400 mx-3 my-2">단일화면</div>
+    <div class="grid gap-1 grid-cols-1 mx-1 mb-3">
+      <div
+        class="item flex flex-col items-center gap-1 p-2 border border-gray-200 rounded-md bg-white cursor-pointer hover:border-gray-400"
+        :class="{ active: layoutName.eng == 'NoSplit' }"
+        @click="setLayoutName('NoSplit')"
+      >
+        <component class="text-gray-600" :is="layoutSource.noSplit.icon"></component>
+        <span class="text-xs">{{ layoutSource.noSplit.name }}</span>
+      </div>
+    </div>
+    <div class="text-sm text-gray-400 mx-3 my-2">분할화면</div>
+    <div class="grid gap-1 grid-cols-2 mx-1 mb-3">
+      <div
+        v-for="(layout, key) in layoutSource.split"
+        :key="key"
+        class="item flex flex-col items-center gap-1 p-2 border border-gray-200 rounded-md bg-white cursor-pointer hover:border-gray-400"
+        :class="{ active: layoutName.eng == key }"
+        @click="setLayoutName(key)"
+      >
+        <component class="text-gray-600" :is="layout.icon"></component>
+        <span class="text-xs">{{ layout.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs, watch } from 'vue';
+
+const props = defineProps({
+  polavo: {
+    type: Object,
+    required: true,
+  },
+});
+const { layoutName, layoutSource } = toRefs(props.polavo.layout.state);
+const { setLayoutName } = props.polavo.layout;
+
+const emits = defineEmits(['click:layout']);
+watch(
+  () => layoutName.value,
+  () => {
+    emits('click:layout');
+  },
+  { deep: true }
+);
+</script>
+
+<style scoped>
+.item.active {
+  background-color: #eff6ff; /* bg-blue-100 */
+  border: 1px solid #3b82f6; /* border-blue-500 */
+  color: #3b82f6; /* text-blue-500 */
+}
+.item.active svg {
+  color: #3b82f6; /* text-blue-500 */
+}
+</style>

package/src/components/SideBar/ElementSideBar.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="gap-4 space-y-4">
+    <div
+      v-for="(item, index) in allElements"
+      :key="index"
+      class="flex flex-col items-center justify-center border border-gray-200 rounded-lg p-2 hover:bg-gray-50 transition-colors cursor-pointer active:scale-95"
+      @mousedown.stop="addElementToFree($event, item.elName)"
+      @click="addElementToGrid(item.elName)"
+      >
+      <img :src="item.imgurl" alt="" class="w-24 h-auto rounded" />
+      <h4 class="text-sm">{{ item.elName }}</h4>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount } from 'vue';
+
+const props = defineProps({
+  polavo: {
+    type: Object,
+    required: true,
+  },
+  urlBase: {
+    type: String,
+    required: false,
+    default: '',
+  },
+});
+const { addElement: addElementToFree } = props.polavo.freeDrop;
+const { addElement: addElementToGrid } = props.polavo.gridDrop;
+
+const allElements = ref([]);
+
+/** 프로젝트 폴더에서 요소 컴포넌트 주소를 맞춰줘야 정상 작동합니다.
+ * (현재 /src/components/elements/ 내부에 모든 요소 컴포넌트가 있어야 함) */
+const modules = import.meta.glob('@/components/elements/*.vue');
+async function getElements() {
+  // 특정 컴포넌트는 제외
+  const excludedElements = [
+    'button',
+    'labelInput',
+    'labelSelect',
+    'dataList',
+    'loginForm',
+    'multiCheckRadio',
+    'labelInputRows',
+    'refLabel',
+  ];
+
+  const elementsData = Object.keys(modules)
+    .filter((path) => {
+      const elName = path.split('/').pop().replace('.vue', '');
+      return !excludedElements.includes(elName);
+    })
+    .map((path) => {
+      const elName = path.split('/').pop().replace('.vue', '');
+
+      // 확장자 조건 설정
+      const ext = elName === 'dataList' ? 'gif' : 'png';
+      let result = {
+        elName,
+        imgurl: new URL(`../../assets/el_img/${elName}.${ext}`, props.urlBase),
+        // component: markRaw(defineAsyncComponent(modules[path]))
+      };
+
+      return result;
+    });
+
+  allElements.value = elementsData;
+}
+
+onBeforeMount(() => {
+  getElements();
+});
+</script>