目录结构调整
This commit is contained in:
pipipi-pikachu
parent
93785a9ebc
commit
bd7f7b9948
|
|
@ -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>
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
@ -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: {
|
||||
|
|
@ -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>
|
||||
|
|
@ -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',
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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'
|
||||
|
|
@ -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',
|
||||
|
|
@ -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',
|
||||
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue