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

perf: 元素Operate优化

Browse Source
This commit is contained in:
pipipi-pikachu 2021-09-16 20:03:09 +08:00
parent 6c4dd90a25
commit 7a12bd549a
4 changed files with 8 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/Editor/Canvas/Operate/ChartElementOperate.vue → src/views/Editor/Canvas/Operate/CommonElementOperate.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="chart-element-operate">
<div class="common-element-operate">
<BorderLine
class="operate-border-line"
v-for="line in borderLines"
@ -24,7 +24,7 @@
import { computed, defineComponent, PropType } from 'vue'
import { useStore } from '@/store'
import { PPTShapeElement } from '@/types/slides'
import { PPTShapeElement, PPTVideoElement, PPTLatexElement } from '@/types/slides'
import { OperateResizeHandler } from '@/types/edit'
import useCommonOperate from '../hooks/useCommonOperate'
@ -32,7 +32,7 @@ import ResizeHandler from './ResizeHandler.vue'
import BorderLine from './BorderLine.vue'
export default defineComponent({
name: 'chart-element-operate',
name: 'common-element-operate',
inheritAttrs: false,
components: {
ResizeHandler,
@ -40,7 +40,7 @@ export default defineComponent({
},
props: {
elementInfo: {
type: Object as PropType<PPTShapeElement>,
type: Object as PropType<PPTShapeElement | PPTVideoElement | PPTLatexElement>,
required: true,
},
isActiveGroupElement: {

74
src/views/Editor/Canvas/Operate/LatexElementOperate.vue
View File

@ -1,74 +0,0 @@
<template>
<div class="latex-element-operate">
<BorderLine
class="operate-border-line"
v-for="line in borderLines"
:key="line.type"
:type="line.type"
:style="line.style"
/>
<template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
<ResizeHandler
class="operate-resize-handler"
v-for="point in resizeHandlers"
:key="point.direction"
:type="point.direction"
:style="point.style"
@mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
/>
</template>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { useStore } from '@/store'
import { PPTShapeElement } from '@/types/slides'
import { OperateResizeHandler } from '@/types/edit'
import useCommonOperate from '../hooks/useCommonOperate'
import ResizeHandler from './ResizeHandler.vue'
import BorderLine from './BorderLine.vue'
export default defineComponent({
name: 'latex-element-operate',
inheritAttrs: false,
components: {
ResizeHandler,
BorderLine,
},
props: {
elementInfo: {
type: Object as PropType<PPTShapeElement>,
required: true,
},
isActiveGroupElement: {
type: Boolean,
required: true,
},
isMultiSelect: {
type: Boolean,
required: true,
},
scaleElement: {
type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandler) => void>,
required: true,
},
},
setup(props) {
const store = useStore()
const canvasScale = computed(() => store.state.canvasScale)
const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
return {
scaleWidth,
resizeHandlers,
borderLines,
}
},
})
</script>

74
src/views/Editor/Canvas/Operate/VideoElementOperate.vue
View File

@ -1,74 +0,0 @@
<template>
<div class="video-element-operate">
<BorderLine
class="operate-border-line"
v-for="line in borderLines"
:key="line.type"
:type="line.type"
:style="line.style"
/>
<template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
<ResizeHandler
class="operate-resize-handler"
v-for="point in resizeHandlers"
:key="point.direction"
:type="point.direction"
:style="point.style"
@mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
/>
</template>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { useStore } from '@/store'
import { PPTShapeElement } from '@/types/slides'
import { OperateResizeHandler } from '@/types/edit'
import useCommonOperate from '../hooks/useCommonOperate'
import ResizeHandler from './ResizeHandler.vue'
import BorderLine from './BorderLine.vue'
export default defineComponent({
name: 'video-element-operate',
inheritAttrs: false,
components: {
ResizeHandler,
BorderLine,
},
props: {
elementInfo: {
type: Object as PropType<PPTShapeElement>,
required: true,
},
isActiveGroupElement: {
type: Boolean,
required: true,
},
isMultiSelect: {
type: Boolean,
required: true,
},
scaleElement: {
type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandler) => void>,
required: true,
},
},
setup(props) {
const store = useStore()
const canvasScale = computed(() => store.state.canvasScale)
const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
return {
scaleWidth,
resizeHandlers,
borderLines,
}
},
})
</script>

10
src/views/Editor/Canvas/Operate/index.vue
View File

@ -46,10 +46,8 @@ import ImageElementOperate from './ImageElementOperate.vue'
import TextElementOperate from './TextElementOperate.vue'
import ShapeElementOperate from './ShapeElementOperate.vue'
import LineElementOperate from './LineElementOperate.vue'
import ChartElementOperate from './ChartElementOperate.vue'
import TableElementOperate from './TableElementOperate.vue'
import LatexElementOperate from './LatexElementOperate.vue'
import VideoElementOperate from './VideoElementOperate.vue'
import CommonElementOperate from './CommonElementOperate.vue'
import LinkHandler from './LinkHandler.vue'
export default defineComponent({
@ -107,10 +105,10 @@ export default defineComponent({
[ElementTypes.TEXT]: TextElementOperate,
[ElementTypes.SHAPE]: ShapeElementOperate,
[ElementTypes.LINE]: LineElementOperate,
[ElementTypes.CHART]: ChartElementOperate,
[ElementTypes.TABLE]: TableElementOperate,
[ElementTypes.LATEX]: LatexElementOperate,
[ElementTypes.VIDEO]: VideoElementOperate,
[ElementTypes.CHART]: CommonElementOperate,
[ElementTypes.LATEX]: CommonElementOperate,
[ElementTypes.VIDEO]: CommonElementOperate,
}
return elementTypeMap[props.elementInfo.type] || null
})