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

update

Browse Source
This commit is contained in:
pipipi-pikachu 2021-01-09 15:49:29 +08:00
parent b20f2339bf
commit 395df00bd2
26 changed files with 95 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/IconFont.ts
View File

@ -3,5 +3,5 @@
import { createFromIconfontCN } from '@ant-design/icons-vue'
export default createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2317509_4g5g5hxi0xh.js',
scriptUrl: '//at.alicdn.com/t/font_2317509_83tu8tohuv.js',
}) as any

15
src/hooks/useSlideBackgroundStyle.ts
View File

@ -5,9 +5,20 @@ export default (background: Ref<SlideBackground | undefined>) => {
const backgroundStyle = computed(() => {
if(!background.value) return { backgroundColor: '#fff' }
const { type, value } = background.value
const { type, value, size } = background.value
if(type === 'solid') return { backgroundColor: value }
else if(type === 'image') return { backgroundImage: `url(${value}` }
else if(type === 'image') {
if(size === 'repeat') {
return {
backgroundImage: `url(${value}`,
backgroundRepeat: 'repeat',
}
}
return {
backgroundImage: `url(${value}`,
backgroundSize: size,
}
}
return { backgroundColor: '#fff' }
})

45
src/main.ts
View File

@ -11,8 +11,53 @@ import 'animate.css'
import contextmenu from './plugins/contextmenu'
import clickOutside from './plugins/clickOutside'
import IconFont from '@/components/IconFont'
import FileInput from '@/components/FileInput.vue'
import SvgWrapper from '@/components/SvgWrapper.vue'
import CheckboxButton from '@/components/CheckboxButton.vue'
import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
import ColorPicker from '@/components/ColorPicker/index.vue'
import {
InputNumber,
Divider,
Button,
Tooltip,
Popover,
Slider,
Select,
Switch,
Radio,
Input,
} from 'ant-design-vue'
const app = createApp(App)
app.component('InputNumber', InputNumber)
app.component('Divider', Divider)
app.component('Button', Button)
app.component('ButtonGroup', Button.Group)
app.component('Tooltip', Tooltip)
app.component('Popover', Popover)
app.component('Slider', Slider)
app.component('Select', Select)
app.component('SelectOption', Select.Option)
app.component('Switch', Switch)
app.component('Radio', Radio)
app.component('RadioGroup', Radio.Group)
app.component('RadioButton', Radio.Button)
app.component('Input', Input)
app.component('InputGroup', Input.Group)
app.use(contextmenu)
app.use(clickOutside)
app.component('IconFont', IconFont)
app.component('FileInput', FileInput)
app.component('SvgWrapper', SvgWrapper)
app.component('CheckboxButton', CheckboxButton)
app.component('CheckboxButtonGroup', CheckboxButtonGroup)
app.component('ColorPicker', ColorPicker)
app.use(store)
app.mount('#app')

1
src/types/slides.ts
View File

@ -153,6 +153,7 @@ export interface PPTAnimation {
export interface SlideBackground {
type: 'solid' | 'image';
value: string;
size?: 'cover' | 'contain' | 'repeat';
}
export interface Slide {

5
src/views/Editor/Canvas/ElementCreateSelection.vue
View File

@ -32,13 +32,8 @@ import { computed, defineComponent, onMounted, reactive, Ref, ref } from 'vue'
import { useStore } from 'vuex'
import { MutationTypes, State } from '@/store'
import SvgWrapper from '@/components/SvgWrapper.vue'
export default defineComponent({
name: 'element-create-selection',
components: {
SvgWrapper,
},
setup(props, { emit }) {
const store = useStore<State>()
const ctrlOrShiftKeyActive: Ref<boolean> = computed(() => store.getters.ctrlOrShiftKeyActive)

5
src/views/Editor/Canvas/Operate/ImageClipHandler.vue
View File

@ -52,15 +52,10 @@ import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive,
import { KEYS } from '@/configs/hotkey'
import { ImageClipData, ImageClipDataRange, ImageClipedEmitData } from '@/types/edit'
import SvgWrapper from '@/components/SvgWrapper.vue'
type ScaleClipRangeType = 't-l' | 't-r' | 'b-l' | 'b-r'
export default defineComponent({
name: 'image-clip-handler',
components: {
SvgWrapper,
},
props: {
src: {
type: String,

2
src/views/Editor/CanvasTool/LinePool.vue
View File

@ -47,13 +47,11 @@
import { defineComponent } from 'vue'
import { LINE_LIST, LinePoolItem } from '@/configs/lines'
import SvgWrapper from '@/components/SvgWrapper.vue'
import LinePointMarker from '@/views/components/element/LineElement/LinePointMarker.vue'
export default defineComponent({
name: 'line-pool',
components: {
SvgWrapper,
LinePointMarker,
},
setup(props, { emit }) {

5
src/views/Editor/CanvasTool/ShapePool.vue
View File

@ -31,13 +31,8 @@
import { defineComponent } from 'vue'
import { SHAPE_LIST, ShapePoolItem } from '@/configs/shapes'
import SvgWrapper from '@/components/SvgWrapper.vue'
export default defineComponent({
name: 'shape-pool',
components: {
SvgWrapper,
},
setup(props, { emit }) {
const shapeList = SHAPE_LIST

46
src/views/Editor/CanvasTool/index.vue
View File

@ -1,35 +1,35 @@
<template>
<div class="canvas-tool">
<div class="left-handler">
<UndoOutlined class="handler-item" :class="{ 'disable': !canUndo }" @click="undo()" />
<RedoOutlined class="handler-item" :class="{ 'disable': !canRedo }" @click="redo()" />
<IconFont type="icon-undo" class="handler-item" :class="{ 'disable': !canUndo }" @click="undo()" />
<IconFont type="icon-redo" class="handler-item" :class="{ 'disable': !canRedo }" @click="redo()" />
</div>
<div class="add-element-handler">
<FontSizeOutlined class="handler-item" @click="drawText()" />
<IconFont type="icon-font-size" class="handler-item" @click="drawText()" />
<FileInput @change="files => insertImageElement(files)">
<PictureOutlined class="handler-item" />
<IconFont type="icon-image" class="handler-item" />
</FileInput>
<Popover trigger="click" v-model:visible="isOpenShapePool">
<template #content>
<ShapePool @select="shape => drawShape(shape)" />
</template>
<StarOutlined class="handler-item" />
<IconFont type="icon-star" class="handler-item" />
</Popover>
<Popover trigger="click" v-model:visible="isOpenLinePool">
<template #content>
<LinePool @select="line => drawLine(line)" />
</template>
<LineOutlined class="handler-item" />
<IconFont type="icon-line" class="handler-item" />
</Popover>
<TableOutlined class="handler-item" />
<PieChartOutlined class="handler-item" />
<IconFont type="icon-table" class="handler-item" />
<IconFont type="icon-piechart" class="handler-item" />
</div>
<div class="right-handler">
<MinusOutlined class="handler-item viewport-size" @click="scaleCanvas('-')" />
<IconFont type="icon-minus" class="handler-item viewport-size" @click="scaleCanvas('-')" />
<span class="text">{{canvasScalePercentage}}</span>
<PlusOutlined class="handler-item viewport-size" @click="scaleCanvas('+')" />
<IconFont type="icon-plus" class="handler-item viewport-size" @click="scaleCanvas('+')" />
</div>
</div>
</template>
@ -47,38 +47,12 @@ import useCreateElement from '@/hooks/useCreateElement'
import ShapePool from './ShapePool.vue'
import LinePool from './LinePool.vue'
import FileInput from '@/components/FileInput.vue'
import { Popover } from 'ant-design-vue'
import {
UndoOutlined,
RedoOutlined,
FontSizeOutlined,
PictureOutlined,
StarOutlined,
LineOutlined,
TableOutlined,
PieChartOutlined,
MinusOutlined,
PlusOutlined,
} from '@ant-design/icons-vue'
export default defineComponent({
name: 'canvas-tool',
components: {
ShapePool,
LinePool,
FileInput,
UndoOutlined,
RedoOutlined,
FontSizeOutlined,
PictureOutlined,
StarOutlined,
LineOutlined,
TableOutlined,
PieChartOutlined,
MinusOutlined,
PlusOutlined,
Popover,
},
setup() {
const store = useStore<State>()

6
src/views/Editor/EditorHeader/index.vue
View File

@ -11,7 +11,7 @@
<div class="right">
<div class="menu-item icon">
<GithubOutlined />
<IconFont type="icon-github-fill" />
</div>
</div>
</div>
@ -19,13 +19,9 @@
<script lang="ts">
import { defineComponent } from 'vue'
import { GithubOutlined } from '@ant-design/icons-vue'
export default defineComponent({
name: 'editor-header',
components: {
GithubOutlined,
},
})
</script>

15
src/views/Editor/Toolbar/ElementAnimationPanel.vue
View File

@ -45,10 +45,10 @@
<div class="text">【{{element.elType}}】{{element.animationType}}</div>
<div class="handler">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="预览">
<PlayCircleOutlined class="handler-btn" @click="runAnimation(element.elId, element.type)" />
<IconFont type="icon-play-circle" class="handler-btn" @click="runAnimation(element.elId, element.type)" />
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除">
<CloseOutlined class="handler-btn" @click="deleteAnimation(element.elId)" />
<IconFont type="icon-delete" class="handler-btn" @click="deleteAnimation(element.elId)" />
</Tooltip>
</div>
</div>
@ -67,11 +67,6 @@ import { ELEMENT_TYPE } from '@/configs/element'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import Draggable from 'vuedraggable'
import { Button, Divider, Popover, Tooltip } from 'ant-design-vue'
import {
PlayCircleOutlined,
CloseOutlined,
} from '@ant-design/icons-vue'
const animationTypes: { [key: string]: string } = {}
for(const type of ANIMATIONS) {
@ -84,12 +79,6 @@ export default defineComponent({
name: 'element-animation-panel',
components: {
Draggable,
Button,
Divider,
PlayCircleOutlined,
CloseOutlined,
Popover,
Tooltip,
},
setup() {
const store = useStore<State>()

29
src/views/Editor/Toolbar/ElementPositionPanel.vue
View File

@ -75,10 +75,10 @@
/>
<template v-if="['image', 'shape'].includes(handleElement.type)">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="解除宽高比锁定" v-if="fixedRatio">
<LockOutlined style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
<IconFont type="icon-lock" style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="宽高比锁定" v-else>
<UnlockOutlined style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" />
<IconFont type="icon-unlock" style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" />
</Tooltip>
</template>
<div style="flex: 1;" v-else></div>
@ -106,10 +106,10 @@
<div class="row">
<div style="flex: 3;">旋转：</div>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="逆时针旋转">
<RotateLeftOutlined class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
<IconFont type="icon-rotate-left" class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="顺时针旋转">
<RotateRightOutlined class="icon-btn" @click="updateRotate45('+')" style="flex: 2;" />
<IconFont type="icon-rotate-right" class="icon-btn" @click="updateRotate45('+')" style="flex: 2;" />
</Tooltip>
<div style="flex: 1;"></div>
<InputNumber
@ -135,29 +135,8 @@ import useOrderElement from '@/hooks/useOrderElement'
import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import { InputNumber, Divider, Button, Tooltip } from 'ant-design-vue'
import {
LockOutlined,
UnlockOutlined,
RotateLeftOutlined,
RotateRightOutlined,
} from '@ant-design/icons-vue'
import IconFont from '@/components/IconFont'
export default defineComponent({
name: 'element-positopn-panel',
components: {
InputNumber,
Divider,
Button,
ButtonGroup: Button.Group,
Tooltip,
LockOutlined,
UnlockOutlined,
RotateLeftOutlined,
RotateRightOutlined,
IconFont,
},
setup() {
const store = useStore<State>()
const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)

77
src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
View File

@ -31,7 +31,7 @@
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
<Button class="text-color-btn" style="flex: 1;">
<FontColorsOutlined />
<IconFont type="icon-font-colors" />
<div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
</Button>
</Tooltip>
@ -45,7 +45,7 @@
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
<Button class="text-color-btn" style="flex: 1;">
<HighlightOutlined />
<IconFont type="icon-highlight" />
<div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
</Button>
</Tooltip>
@ -59,7 +59,7 @@
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文本框填充">
<Button class="text-color-btn" style="flex: 1;">
<BgColorsOutlined />
<IconFont type="icon-bg-colors" />
<div class="text-color-block" :style="{ backgroundColor: fill }"></div>
</Button>
</Tooltip>
@ -72,28 +72,28 @@
style="flex: 1;"
:checked="richTextAttrs.bold"
@click="emitRichTextCommand('bold')"
><BoldOutlined /></CheckboxButton>
><IconFont type="icon-bold" /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="斜体">
<CheckboxButton
style="flex: 1;"
:checked="richTextAttrs.em"
@click="emitRichTextCommand('em')"
><ItalicOutlined /></CheckboxButton>
><IconFont type="icon-italic" /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下划线">
<CheckboxButton
style="flex: 1;"
:checked="richTextAttrs.underline"
@click="emitRichTextCommand('underline')"
><UnderlineOutlined /></CheckboxButton>
><IconFont type="icon-underline" /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除线">
<CheckboxButton
style="flex: 1;"
:checked="richTextAttrs.strikethrough"
@click="emitRichTextCommand('strikethrough')"
><StrikethroughOutlined /></CheckboxButton>
><IconFont type="icon-strikethrough" /></CheckboxButton>
</Tooltip>
</CheckboxButtonGroup>
@ -143,13 +143,13 @@
@change="e => emitRichTextCommand('align', e.target.value)"
>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
<RadioButton value="left" style="flex: 1;"><AlignLeftOutlined /></RadioButton>
<RadioButton value="left" style="flex: 1;"><IconFont type="icon-text-align-left" /></RadioButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="居中">
<RadioButton value="center" style="flex: 1;"><AlignCenterOutlined /></RadioButton>
<RadioButton value="center" style="flex: 1;"><IconFont type="icon-text-align-center" /></RadioButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
<RadioButton value="right" style="flex: 1;"><AlignRightOutlined /></RadioButton>
<RadioButton value="right" style="flex: 1;"><IconFont type="icon-text-align-right" /></RadioButton>
</Tooltip>
</RadioGroup>
@ -159,14 +159,14 @@
style="flex: 1;"
:checked="richTextAttrs.bulletList"
@click="emitRichTextCommand('bulletList')"
><UnorderedListOutlined /></CheckboxButton>
><IconFont type="icon-unorderedlist" /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="编号">
<CheckboxButton
style="flex: 1;"
:checked="richTextAttrs.orderedList"
@click="emitRichTextCommand('orderedList')"
><OrderedListOutlined /></CheckboxButton>
><IconFont type="icon-orderedlist" /></CheckboxButton>
</Tooltip>
</CheckboxButtonGroup>
@ -175,14 +175,14 @@
<div class="row">
<div style="flex: 2;">行间距：</div>
<Select style="flex: 3;" :value="lineHeight" @change="value => updateLineHeight(value)">
<template #suffixIcon><ColumnHeightOutlined /></template>
<template #suffixIcon><IconFont type="icon-column-height" /></template>
<SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}倍</SelectOption>
</Select>
</div>
<div class="row">
<div style="flex: 2;">字间距：</div>
<Select style="flex: 3;" :value="wordSpace" @change="value => updateWordSpace(value)">
<template #suffixIcon><ColumnWidthOutlined /></template>
<template #suffixIcon><IconFont type="icon-column-width" /></template>
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
</Select>
</div>
@ -208,27 +208,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ElementOpacity from '../common/ElementOpacity.vue'
import ElementOutline from '../common/ElementOutline.vue'
import ElementShadow from '../common/ElementShadow.vue'
import ColorPicker from '@/components/ColorPicker/index.vue'
import CheckboxButton from '@/components/CheckboxButton.vue'
import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
import { Select, Input, Button, Divider, Popover, Radio, Tooltip } from 'ant-design-vue'
import {
FontColorsOutlined,
HighlightOutlined,
BgColorsOutlined,
BoldOutlined,
ItalicOutlined,
UnderlineOutlined,
StrikethroughOutlined,
AlignLeftOutlined,
AlignCenterOutlined,
AlignRightOutlined,
OrderedListOutlined,
UnorderedListOutlined,
ColumnHeightOutlined,
ColumnWidthOutlined,
} from '@ant-design/icons-vue'
import IconFont from '@/components/IconFont'
export default defineComponent({
name: 'text-style-panel',
@ -236,34 +215,6 @@ export default defineComponent({
ElementOpacity,
ElementOutline,
ElementShadow,
ColorPicker,
CheckboxButton,
CheckboxButtonGroup,
Select,
SelectOption: Select.Option,
InputGroup: Input.Group,
Button,
ButtonGroup: Button.Group,
Divider,
Popover,
RadioGroup: Radio.Group,
RadioButton: Radio.Button,
Tooltip,
FontColorsOutlined,
HighlightOutlined,
BgColorsOutlined,
BoldOutlined,
ItalicOutlined,
UnderlineOutlined,
StrikethroughOutlined,
AlignLeftOutlined,
AlignCenterOutlined,
AlignRightOutlined,
OrderedListOutlined,
UnorderedListOutlined,
ColumnHeightOutlined,
ColumnWidthOutlined,
IconFont,
},
setup() {
const store = useStore<State>()

10
src/views/Editor/Toolbar/MultiPositionPanel.vue
View File

@ -42,18 +42,8 @@ import { getElementListRange } from '@/utils/element'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import useCombineElement from '@/hooks/useCombineElement'
import { Button, Divider, Tooltip } from 'ant-design-vue'
import IconFont from '@/components/IconFont'
export default defineComponent({
name: 'multi-position-panel',
components: {
Button,
ButtonGroup: Button.Group,
Divider,
Tooltip,
IconFont,
},
setup() {
const store = useStore<State>()
const activeElementIdList = computed(() => store.state.activeElementIdList)

2
src/views/Editor/Toolbar/SlideStylePanel.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="slide-style-panel">
slide-style-panel
<div>背景填充</div>
</div>
</template>

5
src/views/Editor/Toolbar/common/ElementOpacity.vue
View File

@ -21,13 +21,8 @@ import { MutationTypes, State } from '@/store'
import { PPTElement } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import { Slider } from 'ant-design-vue'
export default defineComponent({
name: 'element-opacity',
components: {
Slider,
},
setup() {
const store = useStore<State>()
const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)

16
src/views/Editor/Toolbar/common/ElementOutline.vue
View File

@ -32,7 +32,7 @@
</template>
<Button class="color-btn" style="flex: 3;">
<div class="color-block" :style="{ backgroundColor: outline.color }"></div>
<DownOutlined class="color-btn-icon" />
<IconFont type="icon-down" class="color-btn-icon" />
</Button>
</Popover>
</div>
@ -55,22 +55,8 @@ import { MutationTypes, State } from '@/store'
import { PPTElement, PPTElementOutline } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ColorPicker from '@/components/ColorPicker/index.vue'
import { Select, Button, Popover, InputNumber, Switch } from 'ant-design-vue'
import { DownOutlined } from '@ant-design/icons-vue'
export default defineComponent({
name: 'element-outline',
components: {
ColorPicker,
Select,
SelectOption: Select.Option,
Button,
Popover,
InputNumber,
Switch,
DownOutlined,
},
setup() {
const store = useStore<State>()
const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)

14
src/views/Editor/Toolbar/common/ElementShadow.vue
View File

@ -51,7 +51,7 @@
</template>
<Button class="color-btn" style="flex: 3;">
<div class="color-block"></div>
<DownOutlined class="color-btn-icon" />
<IconFont type="icon-down" class="color-btn-icon" />
</Button>
</Popover>
</div>
@ -66,20 +66,8 @@ import { MutationTypes, State } from '@/store'
import { PPTElement, PPTElementShadow } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ColorPicker from '@/components/ColorPicker/index.vue'
import { Slider, Button, Popover, Switch } from 'ant-design-vue'
import { DownOutlined } from '@ant-design/icons-vue'
export default defineComponent({
name: 'element-shadow',
components: {
ColorPicker,
Slider,
Button,
Popover,
Switch,
DownOutlined,
},
setup() {
const store = useStore<State>()
const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)

4
src/views/components/element/ElementOutline.vue
View File

@ -23,14 +23,10 @@
<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,

4
src/views/components/element/ImageElement/ImageEllipseOutline.vue
View File

@ -26,14 +26,10 @@
<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,

4
src/views/components/element/ImageElement/ImagePolygonOutline.vue
View File

@ -23,14 +23,10 @@
<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,

4
src/views/components/element/ImageElement/ImageRectOutline.vue
View File

@ -26,14 +26,10 @@
<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,

2
src/views/components/element/LineElement/BaseLineElement.vue
View File

@ -56,13 +56,11 @@ import { PPTLineElement } from '@/types/slides'
import useElementShadow from '@/views/components/element/hooks/useElementShadow'
import LinePointMarker from './LinePointMarker.vue'
import SvgWrapper from '@/components/SvgWrapper.vue'
export default defineComponent({
name: 'editable-element-shape',
components: {
LinePointMarker,
SvgWrapper,
},
props: {
elementInfo: {

2
src/views/components/element/LineElement/index.vue
View File

@ -60,13 +60,11 @@ import { ContextmenuItem } from '@/components/Contextmenu/types'
import useElementShadow from '@/views/components/element/hooks/useElementShadow'
import LinePointMarker from './LinePointMarker.vue'
import SvgWrapper from '@/components/SvgWrapper.vue'
export default defineComponent({
name: 'editable-element-shape',
components: {
LinePointMarker,
SvgWrapper,
},
props: {
elementInfo: {

5
src/views/components/element/ShapeElement/BaseShapeElement.vue
View File

@ -45,13 +45,8 @@ import { PPTShapeElement } from '@/types/slides'
import useElementOutline from '@/views/components/element/hooks/useElementOutline'
import useElementShadow from '@/views/components/element/hooks/useElementShadow'
import SvgWrapper from '@/components/SvgWrapper.vue'
export default defineComponent({
name: 'base-element-shape',
components: {
SvgWrapper,
},
props: {
elementInfo: {
type: Object as PropType<PPTShapeElement>,

5
src/views/components/element/ShapeElement/index.vue
View File

@ -49,13 +49,8 @@ import { ContextmenuItem } from '@/components/Contextmenu/types'
import useElementOutline from '@/views/components/element/hooks/useElementOutline'
import useElementShadow from '@/views/components/element/hooks/useElementShadow'
import SvgWrapper from '@/components/SvgWrapper.vue'
export default defineComponent({
name: 'editable-element-shape',
components: {
SvgWrapper,
},
props: {
elementInfo: {
type: Object as PropType<PPTShapeElement>,