github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

目录结构调整

Browse Source
This commit is contained in:
pipipi-pikachu 2020-12-26 09:35:54 +08:00
parent 93785a9ebc
commit bd7f7b9948
17 changed files with 477 additions and 477 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

284
src/views/_element/EditableElement.vue → src/views/Editor/Canvas/EditableElement.vue
View File

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

2
src/views/Editor/Canvas/index.vue
View File

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

2
src/views/Editor/Thumbnails/index.vue
View File

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

4
src/views/_element/ScreenElement.vue → src/views/Screen/ScreenElement.vue
View File

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

2
src/views/Screen/ScreenSlide.vue
View File

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

4
src/views/_element/BaseElement.vue → src/views/components/ThumbnailSlide/ThumbnailElement.vue
View File

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

6
src/views/ThumbnailSlide.vue → src/views/components/ThumbnailSlide/index.vue
View File

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

138
src/views/_element/ElementOutline.vue → src/views/components/element/ElementOutline.vue
View File

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

2
src/views/_element/ImageElement/BaseImageElement.vue → src/views/components/element/ImageElement/BaseImageElement.vue
View File

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

146
src/views/_element/ImageElement/ImageEllipseOutline.vue → src/views/components/element/ImageElement/ImageEllipseOutline.vue
View File

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

148
src/views/_element/ImageElement/ImagePolygonOutline.vue → src/views/components/element/ImageElement/ImagePolygonOutline.vue
View File

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

154
src/views/_element/ImageElement/ImageRectOutline.vue → src/views/components/element/ImageElement/ImageRectOutline.vue
View File

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

2
src/views/_element/ImageElement/index.vue → src/views/components/element/ImageElement/index.vue
View File

@ -64,7 +64,7 @@ import { computed, defineComponent, PropType } from 'vue'
import { PPTImageElement } from '@/types/slides' import { PPTImageElement } from '@/types/slides'
import { ContextmenuItem } from '@/components/Contextmenu/types' import { ContextmenuItem } from '@/components/Contextmenu/types'
import { CLIPPATHS, ClipPathTypes } from '@/configs/imageClip' 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 ImageRectOutline from './ImageRectOutline.vue'
import ImageEllipseOutline from './ImageEllipseOutline.vue' import ImageEllipseOutline from './ImageEllipseOutline.vue'

4
src/views/_element/TextElement/BaseTextElement.vue → src/views/components/element/TextElement/BaseTextElement.vue
View File

@ -28,9 +28,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType, computed } from 'vue' import { defineComponent, PropType, computed } from 'vue'
import { PPTTextElement } from '@/types/slides' 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({ export default defineComponent({
name: 'base-element-text', name: 'base-element-text',

4
src/views/_element/TextElement/index.vue → src/views/components/element/TextElement/index.vue
View File

@ -36,9 +36,9 @@
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { PPTTextElement } from '@/types/slides' import { PPTTextElement } from '@/types/slides'
import { ContextmenuItem } from '@/components/Contextmenu/types' 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({ export default defineComponent({
name: 'editable-element-text', name: 'editable-element-text',

26
src/views/_element/hooks/useElementOutline.ts → src/views/components/element/hooks/useElementOutline.ts
View File

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

26
src/views/_element/hooks/useElementShadow.ts → src/views/components/element/hooks/useElementShadow.ts
View File

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