目录结构调整

src/views/_element/EditableElement.vue

@@ -1,143 +1,143 @@
-<template>
-  <div 
-    class="editable-element"
-    ref="elementRef"
-    :id="'editable-element-' + elementInfo.id"
-    :style="{ zIndex: elementIndex }"
-  >
-    <component
-      :is="currentElementComponent"
-      :elementInfo="elementInfo"
-      :selectElement="selectElement"
-      :contextmenus="contextmenus"
-    ></component>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
-import { PPTElement } from '@/types/slides'
-import { ContextmenuItem } from '@/components/Contextmenu/types'
-
-import useLockElement from '@/hooks/useLockElement'
-import useDeleteElement from '@/hooks/useDeleteElement'
-import useCombineElement from '@/hooks/useCombineElement'
-import useOrderElement from '@/hooks/useOrderElement'
-import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
-import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
-
-import { ElementOrderCommands, ElementAlignCommands } from '@/types/edit'
-
-import ImageElement from './ImageElement/index.vue'
-import TextElement from './TextElement/index.vue'
-
-export default defineComponent({
-  name: 'editable-element',
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTElement>,
-      required: true,
-    },
-    elementIndex: {
-      type: Number,
-      required: true,
-    },
-    isMultiSelect: {
-      type: Boolean,
-      required: true,
-    },
-    selectElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTElement, canMove?: boolean) => void>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const currentElementComponent = computed(() => {
-      const elementTypeMap = {
-        'image': ImageElement,
-        'text': TextElement,
-      }
-      return elementTypeMap[props.elementInfo.type] || null
-    })
-
-    const { orderElement } = useOrderElement()
-    const { alignElementToCanvas } = useAlignElementToCanvas()
-    const { combineElements, uncombineElements } = useCombineElement()
-    const { deleteElement } = useDeleteElement()
-    const { lockElement, unlockElement } = useLockElement()
-    const { copyElement, cutElement } = useCopyAndPasteElement()
-
-    const contextmenus = (): ContextmenuItem[] => {
-      if(props.elementInfo.lock) {
-        return [{
-          text: '解锁', 
-          handler: () => unlockElement(props.elementInfo),
-        }]
-      }
-
-      return [
-        {
-          text: '剪切',
-          subText: 'Ctrl + X',
-          handler: cutElement,
-        },
-        {
-          text: '复制',
-          subText: 'Ctrl + C',
-          handler: copyElement,
-        },
-        { divider: true },
-        {
-          text: '层级排序',
-          disable: props.isMultiSelect && !props.elementInfo.groupId,
-          children: [
-            { text: '置顶层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.TOP) },
-            { text: '置底层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.BOTTOM) },
-            { divider: true },
-            { text: '上移一层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.UP) },
-            { text: '下移一层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.DOWN) },
-          ],
-        },
-        {
-          text: '水平对齐',
-          children: [
-            { text: '水平居中', handler: () => alignElementToCanvas(ElementAlignCommands.HORIZONTAL) },
-            { text: '左对齐', handler: () => alignElementToCanvas(ElementAlignCommands.LEFT) },
-            { text: '右对齐', handler: () => alignElementToCanvas(ElementAlignCommands.RIGHT) },
-          ],
-        },
-        {
-          text: '垂直对齐',
-          children: [
-            { text: '垂直居中', handler: () => alignElementToCanvas(ElementAlignCommands.VERTICAL) },
-            { text: '上对齐', handler: () => alignElementToCanvas(ElementAlignCommands.TOP) },
-            { text: '下对齐', handler: () => alignElementToCanvas(ElementAlignCommands.BOTTOM) },
-          ],
-        },
-        { divider: true },
-        {
-          text: props.elementInfo.groupId ? '取消组合' : '组合',
-          subText: 'Ctrl + G',
-          handler: props.elementInfo.groupId ? uncombineElements : combineElements,
-          hide: !props.isMultiSelect,
-        },
-        {
-          text: '锁定',
-          subText: 'Ctrl + L',
-          handler: lockElement,
-        },
-        {
-          text: '删除',
-          subText: 'Delete',
-          handler: deleteElement,
-        },
-      ]
-    }
-
-    return {
-      currentElementComponent,
-      contextmenus,
-    }
-  },
-})
+<template>
+  <div 
+    class="editable-element"
+    ref="elementRef"
+    :id="'editable-element-' + elementInfo.id"
+    :style="{ zIndex: elementIndex }"
+  >
+    <component
+      :is="currentElementComponent"
+      :elementInfo="elementInfo"
+      :selectElement="selectElement"
+      :contextmenus="contextmenus"
+    ></component>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+import { PPTElement } from '@/types/slides'
+import { ContextmenuItem } from '@/components/Contextmenu/types'
+
+import useLockElement from '@/hooks/useLockElement'
+import useDeleteElement from '@/hooks/useDeleteElement'
+import useCombineElement from '@/hooks/useCombineElement'
+import useOrderElement from '@/hooks/useOrderElement'
+import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
+import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
+
+import { ElementOrderCommands, ElementAlignCommands } from '@/types/edit'
+
+import ImageElement from '@/views/components/element/ImageElement/index.vue'
+import TextElement from '@/views/components/element/TextElement/index.vue'
+
+export default defineComponent({
+  name: 'editable-element',
+  props: {
+    elementInfo: {
+      type: Object as PropType<PPTElement>,
+      required: true,
+    },
+    elementIndex: {
+      type: Number,
+      required: true,
+    },
+    isMultiSelect: {
+      type: Boolean,
+      required: true,
+    },
+    selectElement: {
+      type: Function as PropType<(e: MouseEvent, element: PPTElement, canMove?: boolean) => void>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const currentElementComponent = computed(() => {
+      const elementTypeMap = {
+        'image': ImageElement,
+        'text': TextElement,
+      }
+      return elementTypeMap[props.elementInfo.type] || null
+    })
+
+    const { orderElement } = useOrderElement()
+    const { alignElementToCanvas } = useAlignElementToCanvas()
+    const { combineElements, uncombineElements } = useCombineElement()
+    const { deleteElement } = useDeleteElement()
+    const { lockElement, unlockElement } = useLockElement()
+    const { copyElement, cutElement } = useCopyAndPasteElement()
+
+    const contextmenus = (): ContextmenuItem[] => {
+      if(props.elementInfo.lock) {
+        return [{
+          text: '解锁', 
+          handler: () => unlockElement(props.elementInfo),
+        }]
+      }
+
+      return [
+        {
+          text: '剪切',
+          subText: 'Ctrl + X',
+          handler: cutElement,
+        },
+        {
+          text: '复制',
+          subText: 'Ctrl + C',
+          handler: copyElement,
+        },
+        { divider: true },
+        {
+          text: '层级排序',
+          disable: props.isMultiSelect && !props.elementInfo.groupId,
+          children: [
+            { text: '置顶层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.TOP) },
+            { text: '置底层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.BOTTOM) },
+            { divider: true },
+            { text: '上移一层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.UP) },
+            { text: '下移一层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.DOWN) },
+          ],
+        },
+        {
+          text: '水平对齐',
+          children: [
+            { text: '水平居中', handler: () => alignElementToCanvas(ElementAlignCommands.HORIZONTAL) },
+            { text: '左对齐', handler: () => alignElementToCanvas(ElementAlignCommands.LEFT) },
+            { text: '右对齐', handler: () => alignElementToCanvas(ElementAlignCommands.RIGHT) },
+          ],
+        },
+        {
+          text: '垂直对齐',
+          children: [
+            { text: '垂直居中', handler: () => alignElementToCanvas(ElementAlignCommands.VERTICAL) },
+            { text: '上对齐', handler: () => alignElementToCanvas(ElementAlignCommands.TOP) },
+            { text: '下对齐', handler: () => alignElementToCanvas(ElementAlignCommands.BOTTOM) },
+          ],
+        },
+        { divider: true },
+        {
+          text: props.elementInfo.groupId ? '取消组合' : '组合',
+          subText: 'Ctrl + G',
+          handler: props.elementInfo.groupId ? uncombineElements : combineElements,
+          hide: !props.isMultiSelect,
+        },
+        {
+          text: '锁定',
+          subText: 'Ctrl + L',
+          handler: lockElement,
+        },
+        {
+          text: '删除',
+          subText: 'Delete',
+          handler: deleteElement,
+        },
+      ]
+    }
+
+    return {
+      currentElementComponent,
+      contextmenus,
+    }
+  },
+})
 </script>

src/views/Editor/Canvas/index.vue

@@ -95,7 +95,7 @@ import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
 import useSelectAllElement from '@/hooks/useSelectAllElement'
 import useScaleCanvas from '@/hooks/useScaleCanvas'
 
-import EditableElement from '@/views/_element/EditableElement.vue'
+import EditableElement from './EditableElement.vue'
 import MouseSelection from './MouseSelection.vue'
 import SlideBackground from './SlideBackground.vue'
 import AlignmentLine from './AlignmentLine.vue'

src/views/Editor/Thumbnails/index.vue

@@ -42,7 +42,7 @@ import { fillDigit } from '@/utils/common'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import useSlideHandler from '@/hooks/useSlideHandler'
 
-import ThumbnailSlide from '@/views/ThumbnailSlide.vue'
+import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
 export default defineComponent({
   name: 'thumbnails',

src/views/_element/ScreenElement.vue

@@ -19,8 +19,8 @@ import { useStore } from 'vuex'
 import { State } from '@/store'
 import { PPTElement, Slide } from '@/types/slides'
 
-import BaseImageElement from './ImageElement/BaseImageElement.vue'
-import BaseTextElement from './TextElement/BaseTextElement.vue'
+import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue'
+import BaseTextElement from '@/views/components/element/TextElement/BaseTextElement.vue'
 
 export default defineComponent({
   name: 'screen-element',

src/views/Screen/ScreenSlide.vue

@@ -25,7 +25,7 @@ import { Slide } from '@/types/slides'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
-import ScreenElement from '@/views/_element/ScreenElement.vue'
+import ScreenElement from './ScreenElement.vue'
 
 export default defineComponent({
   name: 'screen-slide',

src/views/_element/BaseElement.vue

@@ -14,8 +14,8 @@
 import { computed, defineComponent, PropType } from 'vue'
 import { PPTElement } from '@/types/slides'
 
-import BaseImageElement from './ImageElement/BaseImageElement.vue'
-import BaseTextElement from './TextElement/BaseTextElement.vue'
+import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue'
+import BaseTextElement from '@/views/components/element/TextElement/BaseTextElement.vue'
 
 export default defineComponent({
   name: 'base-element',

src/views/ThumbnailSlide.vue

@@ -14,7 +14,7 @@
       }"
     >
       <div class="background" :style="{ ...backgroundStyle }"></div>
-      <BaseElement
+      <ThumbnailElement
         v-for="(element, index) in slide.elements"
         :key="element.id"
         :elementInfo="element"
@@ -30,12 +30,12 @@ import { Slide } from '@/types/slides'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
-import BaseElement from '@/views/_element/BaseElement.vue'
+import ThumbnailElement from './ThumbnailElement.vue'
 
 export default defineComponent({
   name: 'thumbnail-slide',
   components: {
-    BaseElement,
+    ThumbnailElement,
   },
   props: {
     slide: {

src/views/_element/ElementOutline.vue

@@ -1,70 +1,70 @@
-<template>
-  <SvgWrapper 
-    class="element-outline"
-    v-if="outline"
-    overflow="visible" 
-    :width="width"
-    :height="height"
-  >
-    <path 
-      vector-effect="non-scaling-stroke" 
-      stroke-linecap="butt" 
-      stroke-miterlimit="8"
-      stroke-linejoin
-      fill="transparent"
-      :d="`M0,0 L${width},0 L${width},${height} L0,${height} Z`" 
-      :stroke="outlineColor"
-      :stroke-width="outlineWidth" 
-      :stroke-dasharray="outlineStyle === 'dashed' ? '12 9' : '0 0'" 
-    ></path>
-	</SvgWrapper>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, toRef } from 'vue'
-import { PPTElementOutline } from '@/types/slides'
-import SvgWrapper from '@/components/SvgWrapper.vue'
-import useElementOutline from '@/views/_element/hooks/useElementOutline'
-
-export default defineComponent({
-  name: 'element-outline', 
-  components: {
-    SvgWrapper,
-  },
-  props: {
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    outline: {
-      type: Object as PropType<PPTElementOutline>
-    },
-  },
-  setup(props) {
-    const {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    } = useElementOutline(toRef(props, 'outline'))
-
-    return {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    }
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-svg {
-  overflow: visible;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
+<template>
+  <SvgWrapper 
+    class="element-outline"
+    v-if="outline"
+    overflow="visible" 
+    :width="width"
+    :height="height"
+  >
+    <path 
+      vector-effect="non-scaling-stroke" 
+      stroke-linecap="butt" 
+      stroke-miterlimit="8"
+      stroke-linejoin
+      fill="transparent"
+      :d="`M0,0 L${width},0 L${width},${height} L0,${height} Z`" 
+      :stroke="outlineColor"
+      :stroke-width="outlineWidth" 
+      :stroke-dasharray="outlineStyle === 'dashed' ? '12 9' : '0 0'" 
+    ></path>
+	</SvgWrapper>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, toRef } from 'vue'
+import { PPTElementOutline } from '@/types/slides'
+import SvgWrapper from '@/components/SvgWrapper.vue'
+import useElementOutline from '@/views/components/element/hooks/useElementOutline'
+
+export default defineComponent({
+  name: 'element-outline', 
+  components: {
+    SvgWrapper,
+  },
+  props: {
+    width: {
+      type: Number,
+      required: true,
+    },
+    height: {
+      type: Number,
+      required: true,
+    },
+    outline: {
+      type: Object as PropType<PPTElementOutline>
+    },
+  },
+  setup(props) {
+    const {
+      outlineWidth,
+      outlineStyle,
+      outlineColor,
+    } = useElementOutline(toRef(props, 'outline'))
+
+    return {
+      outlineWidth,
+      outlineStyle,
+      outlineColor,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+svg {
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 </style>

src/views/_element/ImageElement/BaseImageElement.vue

@@ -65,7 +65,7 @@ import ImageRectOutline from './ImageRectOutline.vue'
 import ImageEllipseOutline from './ImageEllipseOutline.vue'
 import ImagePolygonOutline from './ImagePolygonOutline.vue'
 
-import useElementShadow from '@/views/_element/hooks/useElementShadow'
+import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
 export default defineComponent({
   name: 'base-element-image',

src/views/_element/ImageElement/ImageEllipseOutline.vue

@@ -1,74 +1,74 @@
-<template>
-  <SvgWrapper 
-    class="image-ellipse-outline"
-    v-if="outline"
-    overflow="visible" 
-    :width="width"
-    :height="height"
-  >
-    <ellipse 
-      vector-effect="non-scaling-stroke" 
-      stroke-linecap="butt" 
-      stroke-miterlimit="8"
-      stroke-linejoin
-      fill="transparent"
-      :cx="width / 2" 
-      :cy="height / 2"
-      :rx="width / 2" 
-      :ry="height / 2"
-      :stroke="outlineColor"
-      :stroke-width="outlineWidth" 
-      :stroke-dasharray="outlineStyle === 'dashed' ? '12 9' : '0 0'" 
-    ></ellipse>
-	</SvgWrapper>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, toRef } from 'vue'
-import { PPTElementOutline } from '@/types/slides'
-import SvgWrapper from '@/components/SvgWrapper.vue'
-import useElementOutline from '@/views/_element/hooks/useElementOutline'
-
-export default defineComponent({
-  name: 'image-ellipse-outline',
-  components: {
-    SvgWrapper,
-  },
-  props: {
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    outline: {
-      type: Object as PropType<PPTElementOutline>
-    },
-  },
-  setup(props) {
-    const {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    } = useElementOutline(toRef(props, 'outline'))
-
-    return {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    }
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-svg {
-  overflow: visible;
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  left: 0;
-}
+<template>
+  <SvgWrapper 
+    class="image-ellipse-outline"
+    v-if="outline"
+    overflow="visible" 
+    :width="width"
+    :height="height"
+  >
+    <ellipse 
+      vector-effect="non-scaling-stroke" 
+      stroke-linecap="butt" 
+      stroke-miterlimit="8"
+      stroke-linejoin
+      fill="transparent"
+      :cx="width / 2" 
+      :cy="height / 2"
+      :rx="width / 2" 
+      :ry="height / 2"
+      :stroke="outlineColor"
+      :stroke-width="outlineWidth" 
+      :stroke-dasharray="outlineStyle === 'dashed' ? '12 9' : '0 0'" 
+    ></ellipse>
+	</SvgWrapper>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, toRef } from 'vue'
+import { PPTElementOutline } from '@/types/slides'
+import SvgWrapper from '@/components/SvgWrapper.vue'
+import useElementOutline from '@/views/components/element/hooks/useElementOutline'
+
+export default defineComponent({
+  name: 'image-ellipse-outline',
+  components: {
+    SvgWrapper,
+  },
+  props: {
+    width: {
+      type: Number,
+      required: true,
+    },
+    height: {
+      type: Number,
+      required: true,
+    },
+    outline: {
+      type: Object as PropType<PPTElementOutline>
+    },
+  },
+  setup(props) {
+    const {
+      outlineWidth,
+      outlineStyle,
+      outlineColor,
+    } = useElementOutline(toRef(props, 'outline'))
+
+    return {
+      outlineWidth,
+      outlineStyle,
+      outlineColor,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+svg {
+  overflow: visible;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+}
 </style>

src/views/_element/ImageElement/ImagePolygonOutline.vue

@@ -1,75 +1,75 @@
-<template>
-  <SvgWrapper 
-    class="image-polygon-outline" 
-    v-if="outline"
-    overflow="visible" 
-    :width="width"
-    :height="height"
-  >
-    <path 
-      vector-effect="non-scaling-stroke" 
-      stroke-linecap="butt" 
-      stroke-miterlimit="8"
-      stroke-linejoin
-      fill="transparent"
-      :d="createPath(width, height)"
-      :stroke="outlineColor"
-      :stroke-width="outlineWidth" 
-      :stroke-dasharray="outlineStyle === 'dashed' ? '12 9' : '0 0'" 
-    ></path>
-	</SvgWrapper>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, toRef } from 'vue'
-import { PPTElementOutline } from '@/types/slides'
-import SvgWrapper from '@/components/SvgWrapper.vue'
-import useElementOutline from '@/views/_element/hooks/useElementOutline'
-
-export default defineComponent({
-  name: 'image-polygon-outline',
-  components: {
-    SvgWrapper,
-  },
-  props: {
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    outline: {
-      type: Object as PropType<PPTElementOutline>
-    },
-    createPath: {
-      type: Function,
-      required: true,
-    },
-  },
-  setup(props) {
-    const {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    } = useElementOutline(toRef(props, 'outline'))
-
-    return {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    }
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-svg {
-  overflow: visible;
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  left: 0;
-}
+<template>
+  <SvgWrapper 
+    class="image-polygon-outline" 
+    v-if="outline"
+    overflow="visible" 
+    :width="width"
+    :height="height"
+  >
+    <path 
+      vector-effect="non-scaling-stroke" 
+      stroke-linecap="butt" 
+      stroke-miterlimit="8"
+      stroke-linejoin
+      fill="transparent"
+      :d="createPath(width, height)"
+      :stroke="outlineColor"
+      :stroke-width="outlineWidth" 
+      :stroke-dasharray="outlineStyle === 'dashed' ? '12 9' : '0 0'" 
+    ></path>
+	</SvgWrapper>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, toRef } from 'vue'
+import { PPTElementOutline } from '@/types/slides'
+import SvgWrapper from '@/components/SvgWrapper.vue'
+import useElementOutline from '@/views/components/element/hooks/useElementOutline'
+
+export default defineComponent({
+  name: 'image-polygon-outline',
+  components: {
+    SvgWrapper,
+  },
+  props: {
+    width: {
+      type: Number,
+      required: true,
+    },
+    height: {
+      type: Number,
+      required: true,
+    },
+    outline: {
+      type: Object as PropType<PPTElementOutline>
+    },
+    createPath: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup(props) {
+    const {
+      outlineWidth,
+      outlineStyle,
+      outlineColor,
+    } = useElementOutline(toRef(props, 'outline'))
+
+    return {
+      outlineWidth,
+      outlineStyle,
+      outlineColor,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+svg {
+  overflow: visible;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+}
 </style>

src/views/_element/ImageElement/ImageRectOutline.vue

@@ -1,78 +1,78 @@
-<template>
-  <SvgWrapper 
-    class="image-rect-outline" 
-    v-if="outline"
-    overflow="visible" 
-    :width="width"
-    :height="height"
-  >
-    <rect 
-      vector-effect="non-scaling-stroke" 
-      stroke-linecap="butt" 
-      stroke-miterlimit="8"
-      stroke-linejoin
-      fill="transparent"
-      :rx="radius" 
-      :ry="radius"
-      :width="width"
-      :height="height"
-      :stroke="outlineColor"
-      :stroke-width="outlineWidth" 
-      :stroke-dasharray="outlineStyle === 'dashed' ? '12 9' : '0 0'" 
-    ></rect>
-	</SvgWrapper>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, toRef } from 'vue'
-import { PPTElementOutline } from '@/types/slides'
-import SvgWrapper from '@/components/SvgWrapper.vue'
-import useElementOutline from '@/views/_element/hooks/useElementOutline'
-
-export default defineComponent({
-  name: 'image-rect-outline',
-  components: {
-    SvgWrapper,
-  },
-  props: {
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    outline: {
-      type: Object as PropType<PPTElementOutline>
-    },
-    radius: {
-      type: String,
-      default: '0',
-    },
-  },
-  setup(props) {
-    const {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    } = useElementOutline(toRef(props, 'outline'))
-
-    return {
-      outlineWidth,
-      outlineStyle,
-      outlineColor,
-    }
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-svg {
-  overflow: visible;
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  left: 0;
-}
+<template>
+  <SvgWrapper 
+    class="image-rect-outline" 
+    v-if="outline"
+    overflow="visible" 
+    :width="width"
+    :height="height"
+  >
+    <rect 
+      vector-effect="non-scaling-stroke" 
+      stroke-linecap="butt" 
+      stroke-miterlimit="8"
+      stroke-linejoin
+      fill="transparent"
+      :rx="radius" 
+      :ry="radius"
+      :width="width"
+      :height="height"
+      :stroke="outlineColor"
+      :stroke-width="outlineWidth" 
+      :stroke-dasharray="outlineStyle === 'dashed' ? '12 9' : '0 0'" 
+    ></rect>
+	</SvgWrapper>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, toRef } from 'vue'
+import { PPTElementOutline } from '@/types/slides'
+import SvgWrapper from '@/components/SvgWrapper.vue'
+import useElementOutline from '@/views/components/element/hooks/useElementOutline'
+
+export default defineComponent({
+  name: 'image-rect-outline',
+  components: {
+    SvgWrapper,
+  },
+  props: {
+    width: {
+      type: Number,
+      required: true,
+    },
+    height: {
+      type: Number,
+      required: true,
+    },
+    outline: {
+      type: Object as PropType<PPTElementOutline>
+    },
+    radius: {
+      type: String,
+      default: '0',
+    },
+  },
+  setup(props) {
+    const {
+      outlineWidth,
+      outlineStyle,
+      outlineColor,
+    } = useElementOutline(toRef(props, 'outline'))
+
+    return {
+      outlineWidth,
+      outlineStyle,
+      outlineColor,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+svg {
+  overflow: visible;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+}
 </style>

src/views/_element/ImageElement/index.vue

@@ -64,7 +64,7 @@ import { computed, defineComponent, PropType } from 'vue'
 import { PPTImageElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import { CLIPPATHS, ClipPathTypes } from '@/configs/imageClip'
-import useElementShadow from '@/views/_element/hooks/useElementShadow'
+import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
 import ImageRectOutline from './ImageRectOutline.vue'
 import ImageEllipseOutline from './ImageEllipseOutline.vue'

src/views/_element/TextElement/BaseTextElement.vue

@@ -28,9 +28,9 @@
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue'
 import { PPTTextElement } from '@/types/slides'
-import ElementOutline from '@/views/_element/ElementOutline.vue'
+import ElementOutline from '@/views/components/element/ElementOutline.vue'
 
-import useElementShadow from '@/views/_element/hooks/useElementShadow'
+import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
 export default defineComponent({
   name: 'base-element-text',

src/views/_element/TextElement/index.vue

@@ -36,9 +36,9 @@
 import { computed, defineComponent, PropType } from 'vue'
 import { PPTTextElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
-import useElementShadow from '@/views/_element/hooks/useElementShadow'
+import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
-import ElementOutline from '@/views/_element/ElementOutline.vue'
+import ElementOutline from '@/views/components/element/ElementOutline.vue'
 
 export default defineComponent({
   name: 'editable-element-text',

src/views/_element/hooks/useElementOutline.ts

@@ -1,14 +1,14 @@
-import { computed, Ref } from 'vue'
-import { PPTElementOutline } from '@/types/slides'
-
-export default (outline: Ref<PPTElementOutline | undefined>) => {
-  const outlineWidth = computed(() => (outline.value && outline.value.width !== undefined) ? outline.value.width : 0)
-  const outlineStyle = computed(() => (outline.value && outline.value.style !== undefined) ? outline.value.style : 'solid')
-  const outlineColor = computed(() => (outline.value && outline.value.color !== undefined) ? outline.value.color : '#41464b')
-
-  return {
-    outlineWidth,
-    outlineStyle,
-    outlineColor,
-  }
+import { computed, Ref } from 'vue'
+import { PPTElementOutline } from '@/types/slides'
+
+export default (outline: Ref<PPTElementOutline | undefined>) => {
+  const outlineWidth = computed(() => (outline.value && outline.value.width !== undefined) ? outline.value.width : 0)
+  const outlineStyle = computed(() => (outline.value && outline.value.style !== undefined) ? outline.value.style : 'solid')
+  const outlineColor = computed(() => (outline.value && outline.value.color !== undefined) ? outline.value.color : '#41464b')
+
+  return {
+    outlineWidth,
+    outlineStyle,
+    outlineColor,
+  }
 }

src/views/_element/hooks/useElementShadow.ts

@@ -1,14 +1,14 @@
-import { Ref } from 'vue'
-import { PPTElementShadow } from '@/types/slides'
-
-export default (shadow: Ref<PPTElementShadow | undefined>) => {
-  let shadowStyle = ''
-  if(shadow.value) {
-    const { h, v, blur, color } = shadow.value
-    shadowStyle = `${h}px ${v}px ${blur}px ${color}`
-  }
-
-  return {
-    shadowStyle,
-  }
+import { Ref } from 'vue'
+import { PPTElementShadow } from '@/types/slides'
+
+export default (shadow: Ref<PPTElementShadow | undefined>) => {
+  let shadowStyle = ''
+  if(shadow.value) {
+    const { h, v, blur, color } = shadow.value
+    shadowStyle = `${h}px ${v}px ${blur}px ${color}`
+  }
+
+  return {
+    shadowStyle,
+  }
 }