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

refactor: script setup 语法重构

Browse Source
This commit is contained in:
pipipi-pikachu 2022-06-17 17:28:49 +08:00
parent 1c4ad8eebd
commit 16acbc6333
143 changed files with 7408 additions and 9249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.js
View File

@ -6,6 +6,7 @@ module.exports = {
root: true,
env: {
node: true,
'vue/setup-compiler-macros': true,
},
extends: [
'plugin:vue/vue3-essential',
@ -60,6 +61,7 @@ module.exports = {
'no-useless-return': 'error',
'array-bracket-spacing': 'error',
'no-useless-escape': 'off',
'no-unused-vars': 'off',
'no-eval': 'error',
'no-var': 'error',
'no-with': 'error',
@ -73,6 +75,10 @@ module.exports = {
'{}': false,
},
}],
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'vue/multi-word-component-names': 'off',
'vue/no-reserved-component-names': 'off',
},
overrides: [
{

117
package-lock.json generated
View File

@ -7007,37 +7007,112 @@
}
},
"eslint-plugin-vue": {
"version": "7.20.0",
"resolved": "https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.20.0.tgz?cache=0&sync_timestamp=1635570504787&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-plugin-vue%2Fdownload%2Feslint-plugin-vue-7.20.0.tgz",
"integrity": "sha1-mMIYhaa/3wcTw6kpV6Wv6q7tklM=",
"version": "9.1.0",
"resolved": "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-9.1.0.tgz",
"integrity": "sha512-EPCeInPicQ/YyfOWJDr1yfEeSNoFCMzUus107lZyYi37xejdOolNzS5MXGXp8+9bkoKZMdv/1AcZzQebME6r+g==",
"dev": true,
"requires": {
"eslint-utils": "^2.1.0",
"eslint-utils": "^3.0.0",
"natural-compare": "^1.4.0",
"semver": "^6.3.0",
"vue-eslint-parser": "^7.10.0"
"nth-check": "^2.0.1",
"postcss-selector-parser": "^6.0.9",
"semver": "^7.3.5",
"vue-eslint-parser": "^9.0.1",
"xml-name-validator": "^4.0.0"
},
"dependencies": {
"eslint-utils": {
"version": "2.1.0",
"resolved": "https://registry.nlark.com/eslint-utils/download/eslint-utils-2.1.0.tgz",
"integrity": "sha1-0t5eA0JOcH3BDHQGjd7a5wh0Gyc=",
"acorn": {
"version": "8.7.1",
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.7.1.tgz",
"integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
"dev": true
},
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
"dev": true,
"requires": {
"eslint-visitor-keys": "^1.1.0"
"ms": "2.1.2"
}
},
"eslint-scope": {
"version": "7.1.1",
"resolved": "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-7.1.1.tgz",
"integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
"dev": true,
"requires": {
"esrecurse": "^4.3.0",
"estraverse": "^5.2.0"
}
},
"eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-1.3.0.tgz?cache=0&sync_timestamp=1636378420914&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-1.3.0.tgz",
"integrity": "sha1-MOvR73wv3/AcOk8VEESvJfqwUj4=",
"version": "3.3.0",
"resolved": "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
"integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
"dev": true
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1616463550093&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz",
"integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
"espree": {
"version": "9.3.2",
"resolved": "https://registry.npmmirror.com/espree/-/espree-9.3.2.tgz",
"integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
"dev": true,
"requires": {
"acorn": "^8.7.1",
"acorn-jsx": "^5.3.2",
"eslint-visitor-keys": "^3.3.0"
}
},
"estraverse": {
"version": "5.3.0",
"resolved": "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz",
"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
"dev": true
},
"nth-check": {
"version": "2.1.1",
"resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
"dev": true,
"requires": {
"boolbase": "^1.0.0"
}
},
"postcss-selector-parser": {
"version": "6.0.10",
"resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"dev": true,
"requires": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
}
},
"vue-eslint-parser": {
"version": "9.0.2",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-9.0.2.tgz",
"integrity": "sha512-uCPQwTGjOtAYrwnU+76pYxalhjsh7iFBsHwBqDHiOPTxtICDaraO4Szw54WFTNZTAEsgHHzqFOu1mmnBOBRzDA==",
"dev": true,
"requires": {
"debug": "^4.3.4",
"eslint-scope": "^7.1.1",
"eslint-visitor-keys": "^3.3.0",
"espree": "^9.3.1",
"esquery": "^1.4.0",
"lodash": "^4.17.21",
"semver": "^7.3.6"
},
"dependencies": {
"semver": {
"version": "7.3.7",
"resolved": "https://registry.npmmirror.com/semver/-/semver-7.3.7.tgz",
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
"dev": true,
"requires": {
"lru-cache": "^6.0.0"
}
}
}
}
}
},
@ -17370,6 +17445,12 @@
"async-limiter": "~1.0.0"
}
},
"xml-name-validator": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
"dev": true
},
"xtend": {
"version": "4.0.2",
"resolved": "https://registry.nlark.com/xtend/download/xtend-4.0.2.tgz",

2
package.json
View File

@ -73,7 +73,7 @@
"@vue/test-utils": "^2.0.0-0",
"babel-plugin-import": "^1.13.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.1.0",
"eslint-plugin-vue": "^9.1.0",
"husky": "^7.0.2",
"less": "^4.1.1",
"less-loader": "^7.1.0",

23
src/App.vue
View File

@ -1,11 +1,11 @@
<template>
<Screen v-if="screening" />
<Editor v-else-if="isPC" />
<Editor v-else-if="_isPC" />
<Mobile v-else />
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
<script lang="ts" setup>
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useScreenStore, useMainStore, useSnapshotStore } from '@/store'
import { LOCALSTORAGE_KEY_DISCARDED_DB } from '@/configs/storage'
@ -15,14 +15,8 @@ import Editor from './views/Editor/index.vue'
import Screen from './views/Screen/index.vue'
import Mobile from './views/Mobile/index.vue'
export default defineComponent({
name: 'app',
components: {
Editor,
Screen,
Mobile,
},
setup() {
const _isPC = isPC()
const mainStore = useMainStore()
const snapshotStore = useSnapshotStore()
const { databaseId } = storeToRefs(mainStore)
@ -47,13 +41,6 @@ export default defineComponent({
const newDiscardedDB = JSON.stringify(discardedDBList)
localStorage.setItem(LOCALSTORAGE_KEY_DISCARDED_DB, newDiscardedDB)
})
return {
screening,
isPC: isPC(),
}
},
})
</script>
<style lang="scss">

9
src/components/CheckboxButton.vue
View File

@ -4,17 +4,12 @@
</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'checkbox-button',
props: {
<script lang="ts" setup>
defineProps({
checked: {
type: Boolean,
default: false,
},
},
})
</script>

6
src/components/CheckboxButtonGroup.vue
View File

@ -4,12 +4,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
<script lang="ts" setup>
export default defineComponent({
name: 'checkbox-button-group',
})
</script>
<style lang="scss" scoped>

30
src/components/ColorPicker/Alpha.vue
View File

@ -16,25 +16,23 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onUnmounted, PropType, ref } from 'vue'
<script lang="ts" setup>
import { computed, onUnmounted, PropType, ref } from 'vue'
import Checkboard from './Checkboard.vue'
import { ColorFormats } from 'tinycolor2'
export default defineComponent({
name: 'alpha',
components: {
Checkboard,
},
emits: ['colorChange'],
props: {
const props = defineProps({
value: {
type: Object as PropType<ColorFormats.RGBA>,
required: true,
},
},
setup(props, { emit }) {
})
const emit = defineEmits<{
(event: 'colorChange', payload: ColorFormats.RGBA): void
}>()
const color = computed(() => props.value)
const gradientColor = computed(() => {
@ -74,17 +72,7 @@ export default defineComponent({
window.addEventListener('mousemove', handleChange)
window.addEventListener('mouseup', unbindEventListeners)
}
onUnmounted(unbindEventListeners)
return {
alphaRef,
gradientColor,
handleMouseDown,
color,
}
},
})
</script>
<style lang="scss" scoped>

43
src/components/ColorPicker/Checkboard.vue
View File

@ -2,8 +2,23 @@
<div class="checkerboard" :style="bgStyle"></div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
<script lang="ts" setup>
import { computed } from 'vue'
const props = defineProps({
size: {
type: Number,
default: 8,
},
white: {
type: String,
default: '#fff',
},
grey: {
type: String,
default: '#e6e6e6',
},
})
const checkboardCache = {}
@ -32,34 +47,10 @@ const getCheckboard = (white: string, grey: string, size: number) => {
return checkboard
}
export default defineComponent({
name: 'checkboard',
emits: ['colorChange'],
props: {
size: {
type: Number,
default: 8,
},
white: {
type: String,
default: '#fff',
},
grey: {
type: String,
default: '#e6e6e6',
},
},
setup(props) {
const bgStyle = computed(() => {
const checkboard = getCheckboard(props.white, props.grey, props.size)
return { backgroundImage: `url(${checkboard})` }
})
return {
bgStyle,
}
},
})
</script>
<style lang="scss" scoped>

24
src/components/ColorPicker/EditableInput.vue
View File

@ -8,20 +8,21 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import tinycolor, { ColorFormats } from 'tinycolor2'
export default defineComponent({
name: 'editable-input',
emits: ['colorChange'],
props: {
const props = defineProps({
value: {
type: Object as PropType<ColorFormats.RGBA>,
required: true,
},
},
setup(props, { emit }) {
})
const emit = defineEmits<{
(event: 'colorChange', payload: ColorFormats.RGBA): void
}>()
const val = computed(() => {
let _hex = ''
if (props.value.a < 1) _hex = tinycolor(props.value).toHex8String().toUpperCase()
@ -33,13 +34,6 @@ export default defineComponent({
const value = (e.target as HTMLInputElement).value
if (value.length >= 6) emit('colorChange', tinycolor(value).toRgb())
}
return {
val,
handleInput,
}
},
})
</script>
<style lang="scss" scoped>

26
src/components/ColorPicker/Hue.vue
View File

@ -15,14 +15,11 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onUnmounted, PropType, ref, watch } from 'vue'
<script lang="ts" setup>
import { computed, onUnmounted, PropType, ref, watch } from 'vue'
import tinycolor, { ColorFormats } from 'tinycolor2'
export default defineComponent({
name: 'hue',
emits: ['colorChange'],
props: {
const props = defineProps({
value: {
type: Object as PropType<ColorFormats.RGBA>,
required: true,
@ -31,8 +28,12 @@ export default defineComponent({
type: Number,
required: true,
},
},
setup(props, { emit }) {
})
const emit = defineEmits<{
(event: 'colorChange', payload: ColorFormats.HSLA): void
}>()
const oldHue = ref(0)
const pullDirection = ref('')
@ -90,16 +91,7 @@ export default defineComponent({
window.addEventListener('mousemove', handleChange)
window.addEventListener('mouseup', unbindEventListeners)
}
onUnmounted(unbindEventListeners)
return {
hueRef,
handleMouseDown,
pointerLeft,
}
},
})
</script>
<style lang="scss" scoped>

30
src/components/ColorPicker/Saturation.vue
View File

@ -18,15 +18,12 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onUnmounted, PropType, ref } from 'vue'
<script lang="ts" setup>
import { computed, onUnmounted, PropType, ref } from 'vue'
import tinycolor, { ColorFormats } from 'tinycolor2'
import { throttle, clamp } from 'lodash'
export default defineComponent({
name: 'saturation',
emits: ['colorChange'],
props: {
const props = defineProps({
value: {
type: Object as PropType<ColorFormats.RGBA>,
required: true,
@ -35,8 +32,12 @@ export default defineComponent({
type: Number,
required: true,
},
},
setup(props, { emit }) {
})
const emit = defineEmits<{
(event: 'colorChange', payload: ColorFormats.HSVA): void
}>()
const color = computed(() => {
const hsva = tinycolor(props.value).toHsv()
if (props.hue !== -1) hsva.h = props.hue
@ -47,7 +48,7 @@ export default defineComponent({
const pointerTop = computed(() => (-(color.value.v * 100) + 1) + 100 + '%')
const pointerLeft = computed(() => color.value.s * 100 + '%')
const emitChangeEvent = throttle(function(param) {
const emitChangeEvent = throttle(function(param: ColorFormats.HSVA) {
emit('colorChange', param)
}, 20, { leading: true, trailing: false })
@ -83,18 +84,7 @@ export default defineComponent({
window.addEventListener('mousemove', handleChange)
window.addEventListener('mouseup', unbindEventListeners)
}
onUnmounted(unbindEventListeners)
return {
saturationRef,
bgColor,
handleMouseDown,
pointerTop,
pointerLeft,
}
},
})
</script>
<style lang="scss" scoped>

47
src/components/ColorPicker/index.vue
View File

@ -72,8 +72,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import tinycolor, { ColorFormats } from 'tinycolor2'
import { debounce } from 'lodash'
import { toCanvas } from 'html-to-image'
@ -86,6 +86,17 @@ import EditableInput from './EditableInput.vue'
import { message } from 'ant-design-vue'
const props = defineProps({
modelValue: {
type: String,
default: '#e86b99',
},
})
const emit = defineEmits<{
(event: 'update:modelValue', payload: string): void
}>()
const RECENT_COLORS = 'RECENT_COLORS'
const presetColorConfig = [
@ -132,23 +143,6 @@ const getPresetColors = () => {
const themeColors = ['#000000', '#ffffff', '#eeece1', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c']
const standardColors = ['#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57', '#00afee', '#0071be', '#00215f', '#72349d']
export default defineComponent({
name: 'color-picker',
components: {
Alpha,
Checkboard,
Hue,
Saturation,
EditableInput,
},
emits: ['update:modelValue'],
props: {
modelValue: {
type: String,
default: '#e86b99',
},
},
setup(props, { emit }) {
const hue = ref(-1)
const recentColors = ref<string[]>([])
@ -281,21 +275,6 @@ export default defineComponent({
document.body.removeChild(maskRef)
})
}
return {
themeColors,
standardColors,
presetColors,
color,
hue,
currentColor,
changeColor,
selectPresetColor,
recentColors,
pickColor,
}
},
})
</script>
<style lang="scss" scoped>

9
src/components/Contextmenu/MenuContent.vue
View File

@ -30,13 +30,11 @@
</ul>
</template>
<script lang="ts">
import { PropType, defineComponent } from 'vue'
<script lang="ts" setup>
import { PropType } from 'vue'
import { ContextmenuItem } from './types'
export default defineComponent({
name: 'menu-content',
props: {
defineProps({
menus: {
type: Array as PropType<ContextmenuItem[]>,
required: true,
@ -45,7 +43,6 @@ export default defineComponent({
type: Function,
required: true,
},
},
})
</script>

22
src/components/Contextmenu/index.vue
View File

@ -20,18 +20,13 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { ContextmenuItem, Axis } from './types'
import MenuContent from './MenuContent.vue'
export default defineComponent({
name: 'contextmenu',
components: {
MenuContent,
},
props: {
const props = defineProps({
axis: {
type: Object as PropType<Axis>,
required: true,
@ -48,8 +43,8 @@ export default defineComponent({
type: Function,
required: true,
},
},
setup(props) {
})
const style = computed(() => {
const MENU_WIDTH = 170
const MENU_HEIGHT = 30
@ -78,13 +73,6 @@ export default defineComponent({
if (item.handler) item.handler(props.el)
props.removeContextmenu()
}
return {
style,
handleClickMenuItem,
}
},
})
</script>
<style lang="scss">

25
src/components/FileInput.vue
View File

@ -12,19 +12,20 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { ref } from 'vue'
export default defineComponent({
name: 'file-input',
emits: ['change'],
props: {
const props = defineProps({
accept: {
type: String,
default: 'image/*',
},
},
setup(props, { emit }) {
})
const emit = defineEmits<{
(event: 'change', payload: FileList): void
}>()
const inputRef = ref<HTMLInputElement>()
const handleClick = () => {
@ -36,14 +37,6 @@ export default defineComponent({
const files = (e.target as HTMLInputElement).files
if (files) emit('change', files)
}
return {
handleClick,
handleChange,
inputRef,
}
},
})
</script>
<style lang="scss" scoped>

9
src/components/FullscreenSpin.vue
View File

@ -2,12 +2,8 @@
<div class="fullscreen-spin" v-if="loading"><Spin :tip="tip" size="large" /></div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'fullscreen-spin',
props: {
<script lang="ts" setup>
const props = defineProps({
loading: {
type: Boolean,
default: false,
@ -16,7 +12,6 @@ export default defineComponent({
type: String,
default: '',
},
},
})
</script>

20
src/components/LaTeXEditor/FormulaContent.vue
View File

@ -19,13 +19,11 @@
</svg>
</template>
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { hfmath } from './hfmath'
export default defineComponent({
name: 'formula-content',
props: {
const props = defineProps({
latex: {
type: String,
required: true,
@ -38,8 +36,8 @@ export default defineComponent({
type: Number,
required: true,
},
},
setup(props) {
})
const box = ref({ x: 0, y: 0, w: 0, h: 0 })
const pathd = ref('')
@ -59,14 +57,6 @@ export default defineComponent({
}
return 1
})
return {
box,
pathd,
scale,
}
},
})
</script>
<style lang="scss" scoped>

18
src/components/LaTeXEditor/SymbolContent.vue
View File

@ -2,19 +2,17 @@
<div class="symbol-content" v-html="svg"></div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
<script lang="ts" setup>
import { computed } from 'vue'
import { hfmath } from './hfmath'
export default defineComponent({
name: 'symbol-content',
props: {
const props = defineProps({
latex: {
type: String,
required: true,
},
},
setup(props) {
})
const svg = computed(() => {
const eq = new hfmath(props.latex)
return eq.svg({
@ -22,10 +20,4 @@ export default defineComponent({
SCALE_Y: 10,
})
})
return {
svg,
}
},
})
</script>

48
src/components/LaTeXEditor/index.vue
View File

@ -65,8 +65,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { hfmath } from './hfmath'
import { FORMULA_LIST, SYMBOL_LIST } from '@/configs/latex'
@ -83,20 +83,28 @@ const tabs: Tab[] = [
{ label: '预置公式', value: 'formula' },
]
export default defineComponent({
name: 'latex-editor',
emits: ['update', 'close'],
components: {
FormulaContent,
SymbolContent,
},
props: {
interface LatexResult {
latex: string
path: string
w: number
h: number
}
const props = defineProps({
value: {
type: String,
default: '',
},
},
setup(props, { emit }) {
})
const emit = defineEmits<{
(event: 'update', payload: LatexResult): void
(event: 'close'): void
}>()
const formulaList = FORMULA_LIST
const symbolList = SYMBOL_LIST
const latex = ref('')
const toolbarState = ref<'symbol' | 'formula'>('symbol')
const textAreaRef = ref<HTMLTextAreaElement>()
@ -133,22 +141,6 @@ export default defineComponent({
textAreaRef.value.focus()
document.execCommand('insertText', false, latex)
}
return {
tabs,
latex,
toolbarState,
selectedSymbolKey,
formulaList: FORMULA_LIST,
symbolList: SYMBOL_LIST,
symbolPool,
textAreaRef,
update,
close,
insertSymbol,
}
},
})
</script>
<style lang="scss" scoped>

29
src/components/WritingBoard.vue
View File

@ -55,13 +55,11 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
import { throttle } from 'lodash'
export default defineComponent({
name: 'writing-board',
props: {
const props = defineProps({
color: {
type: String,
default: '#ffcc00',
@ -74,8 +72,8 @@ export default defineComponent({
type: Boolean,
default: false,
},
},
setup(props) {
})
let ctx: CanvasRenderingContext2D | null = null
const writingBoardRef = ref<HTMLElement>()
const canvasRef = ref<HTMLCanvasElement>()
@ -324,25 +322,10 @@ export default defineComponent({
}
}, 300, { leading: true, trailing: false })
return {
mouse,
mouseInCanvas,
penSize,
rubberSize,
markSize,
writingBoardRef,
canvasRef,
canvasWidth,
canvasHeight,
handleMousedown,
handleMousemove,
handleMouseup,
defineExpose({
clearCanvas,
getImageDataURL,
setImageDataURL,
mousewheelListener,
}
},
})
</script>

2
src/hooks/useExport.ts
View File

@ -62,7 +62,7 @@ export default () => {
}
// 导入pptist文件
const importSpecificFile = (files: File[], cover = false) => {
const importSpecificFile = (files: FileList, cover = false) => {
const file = files[0]
const reader = new FileReader()

2
src/shims-vue.d.ts vendored
View File

@ -1,3 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>

20
src/views/Editor/Canvas/AlignmentLine.vue
View File

@ -4,13 +4,11 @@
</div>
</template>
<script lang="ts">
import { computed, PropType, defineComponent } from 'vue'
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { AlignmentLineAxis } from '@/types/edit'
export default defineComponent({
name: 'alignment-line',
props: {
const props = defineProps({
type: {
type: String as PropType<'vertical' | 'horizontal'>,
required: true,
@ -27,8 +25,8 @@ export default defineComponent({
type: Number,
required: true,
},
},
setup(props) {
})
// 吸附对齐线的位置
const left = computed(() => props.axis.x * props.canvasScale + 'px')
const top = computed(() => props.axis.y * props.canvasScale + 'px')
@ -38,14 +36,6 @@ export default defineComponent({
if (props.type === 'vertical') return { height: props.length * props.canvasScale + 'px' }
return { width: props.length * props.canvasScale + 'px' }
})
return {
left,
top,
sizeStyle,
}
},
})
</script>
<style lang="scss" scoped>

19
src/views/Editor/Canvas/EditableElement.vue
View File

@ -16,8 +16,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { ElementTypes, PPTElement } from '@/types/slides'
import { ContextmenuItem } from '@/components/Contextmenu/types'
@ -41,9 +41,7 @@ import LatexElement from '@/views/components/element/LatexElement/index.vue'
import VideoElement from '@/views/components/element/VideoElement/index.vue'
import AudioElement from '@/views/components/element/AudioElement/index.vue'
export default defineComponent({
name: 'editable-element',
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<PPTElement>,
required: true,
@ -64,8 +62,8 @@ export default defineComponent({
type: Function as PropType<() => void>,
required: true,
},
},
setup(props) {
})
const currentElementComponent = computed(() => {
const elementTypeMap = {
[ElementTypes.IMAGE]: ImageElement,
@ -181,11 +179,4 @@ export default defineComponent({
},
]
}
return {
currentElementComponent,
contextmenus,
}
},
})
</script>

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

@ -25,15 +25,16 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useKeyboardStore } from '@/store'
import { CreateElementSelectionData } from '@/types/edit'
const emit = defineEmits<{
(event: 'created', payload: CreateElementSelectionData): void
}>()
export default defineComponent({
name: 'element-create-selection',
emits: ['created'],
setup(props, { emit }) {
const mainStore = useMainStore()
const { creatingElement } = storeToRefs(mainStore)
const { ctrlOrShiftKeyActive } = storeToRefs(useKeyboardStore())
@ -120,8 +121,8 @@ export default defineComponent({
(Math.abs(endPageX - startPageX) >= minSize || Math.abs(endPageY - startPageY) >= minSize)
) {
emit('created', {
start: start.value,
end: end.value,
start: start.value!,
end: end.value!,
})
}
else if (
@ -129,8 +130,8 @@ export default defineComponent({
(Math.abs(endPageX - startPageX) >= minSize && Math.abs(endPageY - startPageY) >= minSize)
) {
emit('created', {
start: start.value,
end: end.value,
start: start.value!,
end: end.value!,
})
}
else {
@ -203,18 +204,6 @@ export default defineComponent({
height: height + 'px',
}
})
return {
selectionRef,
start,
end,
creatingElement,
createSelection,
lineData,
position,
}
},
})
</script>
<style lang="scss" scoped>

17
src/views/Editor/Canvas/GridLines.vue
View File

@ -13,17 +13,14 @@
</svg>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
<script lang="ts" setup>
import { computed } from 'vue'
import tinycolor from 'tinycolor2'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { VIEWPORT_SIZE } from '@/configs/canvas'
import { SlideBackground } from '@/types/slides'
export default defineComponent({
name: 'grid-lines',
setup() {
const { canvasScale } = storeToRefs(useMainStore())
const { currentSlide, viewportRatio } = storeToRefs(useSlidesStore())
@ -53,15 +50,7 @@ export default defineComponent({
return path
}
return {
canvasScale,
gridColor,
width: VIEWPORT_SIZE,
height: VIEWPORT_SIZE * viewportRatio.value,
path: getPath(),
}
},
})
const path = getPath()
</script>
<style lang="scss" scoped>

28
src/views/Editor/Canvas/LinkDialog.vue
View File

@ -37,8 +37,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTElementLink } from '@/types/slides'
@ -52,13 +52,10 @@ interface TabItem {
label: string
}
export default defineComponent({
name: 'link-dialog',
emits: ['close'],
components: {
ThumbnailSlide,
},
setup(props, { emit }) {
const emit = defineEmits<{
(event: 'close'): void
}>()
const { handleElement } = storeToRefs(useMainStore())
const { slides } = storeToRefs(useSlidesStore())
@ -103,19 +100,6 @@ export default defineComponent({
else address.value = ''
}
}
return {
slides,
tabs,
type,
address,
slideId,
selectedSlide,
close,
save,
}
},
})
</script>
<style lang="scss" scoped>

9
src/views/Editor/Canvas/MouseSelection.vue
View File

@ -9,12 +9,8 @@
></div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'mouse-selection',
props: {
<script lang="ts" setup>
defineProps({
top: {
type: Number,
required: true,
@ -38,7 +34,6 @@ export default defineComponent({
return [1, 2, 3, 4].includes(value)
},
},
}
})
</script>

9
src/views/Editor/Canvas/Operate/BorderLine.vue
View File

@ -2,13 +2,11 @@
<div :class="['border-line', type, { 'wide': isWide }]"></div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
<script lang="ts" setup>
import { PropType } from 'vue'
import { OperateBorderLines } from '@/types/edit'
export default defineComponent({
name: 'border-line',
props: {
defineProps({
type: {
type: String as PropType<OperateBorderLines>,
required: true,
@ -17,7 +15,6 @@ export default defineComponent({
type: Boolean,
default: false,
},
},
})
</script>

31
src/views/Editor/Canvas/Operate/CommonElementOperate.vue
View File

@ -28,7 +28,13 @@
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
export default {
inheritAttrs: false,
}
</script>
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { PPTShapeElement, PPTVideoElement, PPTLatexElement, PPTAudioElement } from '@/types/slides'
@ -41,15 +47,7 @@ import BorderLine from './BorderLine.vue'
type PPTElement = PPTShapeElement | PPTVideoElement | PPTLatexElement | PPTAudioElement
export default defineComponent({
name: 'common-element-operate',
inheritAttrs: false,
components: {
RotateHandler,
ResizeHandler,
BorderLine,
},
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<PPTElement>,
required: true,
@ -66,8 +64,8 @@ export default defineComponent({
type: Function as PropType<(e: MouseEvent, element: PPTElement, command: OperateResizeHandlers) => void>,
required: true,
},
},
setup(props) {
})
const { canvasScale } = storeToRefs(useMainStore())
const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
@ -75,13 +73,4 @@ export default defineComponent({
const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
const cannotRotate = computed(() => ['video', 'audio'].includes(props.elementInfo.type))
return {
scaleWidth,
resizeHandlers,
borderLines,
cannotRotate,
}
},
})
</script>

31
src/views/Editor/Canvas/Operate/ImageElementOperate.vue
View File

@ -27,7 +27,13 @@
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
export default {
inheritAttrs: false,
}
</script>
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { PPTImageElement } from '@/types/slides'
@ -38,15 +44,7 @@ import RotateHandler from './RotateHandler.vue'
import ResizeHandler from './ResizeHandler.vue'
import BorderLine from './BorderLine.vue'
export default defineComponent({
name: 'image-element-operate',
inheritAttrs: false,
components: {
RotateHandler,
ResizeHandler,
BorderLine,
},
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<PPTImageElement>,
required: true,
@ -63,8 +61,8 @@ export default defineComponent({
type: Function as PropType<(e: MouseEvent, element: PPTImageElement, command: OperateResizeHandlers) => void>,
required: true,
},
},
setup(props) {
})
const { canvasScale, clipingImageElementId } = storeToRefs(useMainStore())
const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)
@ -72,15 +70,6 @@ export default defineComponent({
const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
return {
isCliping,
scaleWidth,
resizeHandlers,
borderLines,
}
},
})
</script>
<style lang="scss" scoped>

29
src/views/Editor/Canvas/Operate/LineElementOperate.vue
View File

@ -34,7 +34,13 @@
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
export default {
inheritAttrs: false,
}
</script>
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { PPTLineElement } from '@/types/slides'
@ -42,13 +48,7 @@ import { OperateLineHandlers } from '@/types/edit'
import ResizeHandler from './ResizeHandler.vue'
export default defineComponent({
name: 'line-element-operate',
inheritAttrs: false,
components: {
ResizeHandler,
},
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<PPTLineElement>,
required: true,
@ -61,8 +61,8 @@ export default defineComponent({
type: Function as PropType<(e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void>,
required: true,
},
},
setup(props) {
})
const { canvasScale } = storeToRefs(useMainStore())
const svgWidth = computed(() => Math.max(props.elementInfo.start[0], props.elementInfo.end[0]))
@ -117,15 +117,6 @@ export default defineComponent({
return handlers
})
return {
svgWidth,
svgHeight,
canvasScale,
resizeHandlers,
}
},
})
</script>
<style lang="scss" scoped>

26
src/views/Editor/Canvas/Operate/LinkHandler.vue
View File

@ -10,16 +10,14 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { PPTElement, PPTElementLink } from '@/types/slides'
import useLink from '@/hooks/useLink'
export default defineComponent({
name: 'link-handler',
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<PPTElement>,
required: true,
@ -32,21 +30,11 @@ export default defineComponent({
type: Function as PropType<() => void>,
required: true,
},
},
setup(props) {
const { canvasScale } = storeToRefs(useMainStore())
const { removeLink } = useLink()
const height = computed(() => props.elementInfo.type === 'line' ? 0 : props.elementInfo.height)
return {
canvasScale,
height,
removeLink,
}
},
})
const { canvasScale } = storeToRefs(useMainStore())
const { removeLink } = useLink()
const height = computed(() => props.elementInfo.type === 'line' ? 0 : props.elementInfo.height)
</script>
<style lang="scss" scoped>

26
src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
View File

@ -20,8 +20,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref, PropType, watchEffect } from 'vue'
<script lang="ts" setup>
import { computed, ref, PropType, watchEffect } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { PPTElement } from '@/types/slides'
@ -32,13 +32,7 @@ import useCommonOperate from '../hooks/useCommonOperate'
import ResizeHandler from './ResizeHandler.vue'
import BorderLine from './BorderLine.vue'
export default defineComponent({
name: 'multi-select-operate',
components: {
ResizeHandler,
BorderLine,
},
props: {
const props = defineProps({
elementList: {
type: Array as PropType<PPTElement[]>,
required: true,
@ -47,8 +41,8 @@ export default defineComponent({
type: Function as PropType<(e: MouseEvent, range: MultiSelectRange, command: OperateResizeHandlers) => void>,
required: true,
},
},
setup(props) {
})
const { activeElementIdList, canvasScale } = storeToRefs(useMainStore())
const localActiveElementList = computed(() => props.elementList.filter(el => activeElementIdList.value.includes(el.id)))
@ -82,16 +76,6 @@ export default defineComponent({
return true
})
})
return {
range,
canvasScale,
borderLines,
disableResize,
resizeHandlers,
}
},
})
</script>
<style lang="scss" scoped>

18
src/views/Editor/Canvas/Operate/ResizeHandler.vue
View File

@ -2,13 +2,11 @@
<div :class="['resize-handler', rotateClassName, type]"></div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { OperateResizeHandlers } from '@/types/edit'
export default defineComponent({
name: 'resize-handler',
props: {
const props = defineProps({
type: {
type: String as PropType<OperateResizeHandlers>,
default: '',
@ -17,8 +15,8 @@ export default defineComponent({
type: Number,
default: 0,
},
},
setup(props) {
})
const rotateClassName = computed(() => {
const prefix = 'rotate-'
const rotate = props.rotate
@ -32,12 +30,6 @@ export default defineComponent({
else if (rotate > -67.5 && rotate <= -22.5) return prefix + 135
return prefix + 0
})
return {
rotateClassName,
}
},
})
</script>
<style lang="scss" scoped>

6
src/views/Editor/Canvas/Operate/RotateHandler.vue
View File

@ -2,10 +2,8 @@
<div class="rotate-handler"></div>
</template>
<script lang="ts">
export default {
name: 'rotate-handler',
}
<script lang="ts" setup>
</script>
<style lang="scss" scoped>

30
src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
View File

@ -27,7 +27,13 @@
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
export default {
inheritAttrs: false,
}
</script>
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { PPTShapeElement } from '@/types/slides'
@ -38,15 +44,7 @@ import RotateHandler from './RotateHandler.vue'
import ResizeHandler from './ResizeHandler.vue'
import BorderLine from './BorderLine.vue'
export default defineComponent({
name: 'shape-element-operate',
inheritAttrs: false,
components: {
RotateHandler,
ResizeHandler,
BorderLine,
},
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<PPTShapeElement>,
required: true,
@ -63,19 +61,11 @@ export default defineComponent({
type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandlers) => void>,
required: true,
},
},
setup(props) {
})
const { canvasScale } = storeToRefs(useMainStore())
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>

30
src/views/Editor/Canvas/Operate/TableElementOperate.vue
View File

@ -27,7 +27,13 @@
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
export default {
inheritAttrs: false,
}
</script>
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { PPTTableElement } from '@/types/slides'
@ -38,15 +44,7 @@ import RotateHandler from './RotateHandler.vue'
import ResizeHandler from './ResizeHandler.vue'
import BorderLine from './BorderLine.vue'
export default defineComponent({
name: 'table-element-operate',
inheritAttrs: false,
components: {
RotateHandler,
ResizeHandler,
BorderLine,
},
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<PPTTableElement>,
required: true,
@ -63,8 +61,8 @@ export default defineComponent({
type: Function as PropType<(e: MouseEvent, element: PPTTableElement, command: OperateResizeHandlers) => void>,
required: true,
},
},
setup(props) {
})
const { canvasScale } = storeToRefs(useMainStore())
const outlineWidth = computed(() => props.elementInfo.outline.width || 1)
@ -73,12 +71,4 @@ export default defineComponent({
const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
const { textElementResizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
return {
scaleWidth,
textElementResizeHandlers,
borderLines,
}
},
})
</script>

30
src/views/Editor/Canvas/Operate/TextElementOperate.vue
View File

@ -27,7 +27,13 @@
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
export default {
inheritAttrs: false,
}
</script>
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { PPTTextElement } from '@/types/slides'
@ -38,15 +44,7 @@ import RotateHandler from './RotateHandler.vue'
import ResizeHandler from './ResizeHandler.vue'
import BorderLine from './BorderLine.vue'
export default defineComponent({
name: 'text-element-operate',
inheritAttrs: false,
components: {
RotateHandler,
ResizeHandler,
BorderLine,
},
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<PPTTextElement>,
required: true,
@ -63,20 +61,12 @@ export default defineComponent({
type: Function as PropType<(e: MouseEvent, element: PPTTextElement, command: OperateResizeHandlers) => void>,
required: true,
},
},
setup(props) {
})
const { canvasScale } = storeToRefs(useMainStore())
const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
const { textElementResizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
return {
scaleWidth,
textElementResizeHandlers,
borderLines,
}
},
})
</script>

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

@ -36,8 +36,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { ElementTypes, PPTElement, PPTLineElement, PPTVideoElement, PPTAudioElement } from '@/types/slides'
@ -51,12 +51,7 @@ import TableElementOperate from './TableElementOperate.vue'
import CommonElementOperate from './CommonElementOperate.vue'
import LinkHandler from './LinkHandler.vue'
export default defineComponent({
name: 'operate',
components: {
LinkHandler,
},
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<PPTElement>,
required: true,
@ -93,8 +88,8 @@ export default defineComponent({
type: Function as PropType<() => void>,
required: true,
},
},
setup(props) {
})
const { canvasScale, toolbarState } = storeToRefs(useMainStore())
const { formatedAnimations } = storeToRefs(useSlidesStore())
@ -124,17 +119,6 @@ export default defineComponent({
const rotate = computed(() => 'rotate' in props.elementInfo ? props.elementInfo.rotate : 0)
const height = computed(() => 'height' in props.elementInfo ? props.elementInfo.height : 0)
return {
currentOperateComponent,
canvasScale,
toolbarState,
elementIndexListInAnimation,
rotate,
height,
}
},
})
</script>
<style lang="scss" scoped>

18
src/views/Editor/Canvas/Ruler.vue
View File

@ -36,8 +36,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
@ -48,26 +48,18 @@ interface ViewportStyles {
height: number
}
export default defineComponent({
props: {
const props = defineProps({
viewportStyles: {
type: Object as PropType<ViewportStyles>,
required: true,
},
},
setup(props) {
})
const { canvasScale } = storeToRefs(useMainStore())
const markerSize = computed(() => {
return props.viewportStyles.width * canvasScale.value / 10
})
return {
canvasScale,
markerSize,
}
},
})
</script>

17
src/views/Editor/Canvas/ViewportBackground.vue
View File

@ -7,32 +7,19 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
<script lang="ts" setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { SlideBackground } from '@/types/slides'
import GridLines from './GridLines.vue'
import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
export default defineComponent({
name: 'viewport-background',
components: {
GridLines,
},
setup() {
const { showGridLines } = storeToRefs(useMainStore())
const { currentSlide } = storeToRefs(useSlidesStore())
const background = computed<SlideBackground | undefined>(() => currentSlide.value?.background)
const { backgroundStyle } = useSlideBackgroundStyle(background)
return {
showGridLines,
backgroundStyle,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -91,8 +91,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, provide, ref, watch, watchEffect } from 'vue'
<script lang="ts" setup>
import { onMounted, provide, ref, watch, watchEffect } from 'vue'
import { throttle } from 'lodash'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
@ -130,20 +130,6 @@ import MultiSelectOperate from './Operate/MultiSelectOperate.vue'
import Operate from './Operate/index.vue'
import LinkDialog from './LinkDialog.vue'
export default defineComponent({
name: 'editor-canvas',
components: {
EditableElement,
MouseSelection,
ViewportBackground,
AlignmentLine,
Ruler,
ElementCreateSelection,
MultiSelectOperate,
Operate,
LinkDialog,
},
setup() {
const mainStore = useMainStore()
const {
activeElementIdList,
@ -284,38 +270,6 @@ export default defineComponent({
}
provide(injectKeySlideScale, canvasScale)
return {
elementList,
activeElementIdList,
handleElementId,
activeGroupElementId,
canvasRef,
viewportRef,
viewportStyles,
canvasScale,
mouseSelection,
mouseSelectionVisible,
mouseSelectionQuadrant,
creatingElement,
alignmentLines,
linkDialogVisible,
spaceKeyState,
showRuler,
openLinkDialog,
handleClickBlankArea,
removeEditorAreaFocus,
insertElementFromCreateSelection,
selectElement,
rotateElement,
scaleElement,
dragLineElement,
scaleMultiElement,
handleMousewheelCanvas,
contextmenus,
}
},
})
</script>
<style lang="scss" scoped>

18
src/views/Editor/CanvasTool/ChartPool.vue
View File

@ -14,26 +14,18 @@
</ul>
</template>
<script lang="ts">
<script lang="ts" setup>
import { PresetChartType } from '@/types/slides'
import { defineComponent } from 'vue'
export default defineComponent({
name: 'chart-pool',
emits: ['select'],
setup(props, { emit }) {
const emit = defineEmits<{
(event: 'select', payload: PresetChartType): void
}>()
const chartList: PresetChartType[] = ['bar', 'horizontalBar', 'line', 'area', 'scatter', 'pie', 'ring']
const selectChart = (chart: PresetChartType) => {
emit('select', chart)
}
return {
chartList,
selectChart,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -1,6 +1,6 @@
<template>
<div class="line-pool">
<div class="category" v-for="(item, i) in lineList" :key="item.type">
<div class="category" v-for="(item, i) in LINE_LIST" :key="item.type">
<div class="category-name">{{item.type}}</div>
<div class="line-list">
<div class="line-item" v-for="(line, j) in item.children" :key="j">
@ -48,31 +48,18 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
<script lang="ts" setup>
import { LINE_LIST, LinePoolItem } from '@/configs/lines'
import LinePointMarker from '@/views/components/element/LineElement/LinePointMarker.vue'
export default defineComponent({
name: 'line-pool',
emits: ['select'],
components: {
LinePointMarker,
},
setup(props, { emit }) {
const lineList = LINE_LIST
const emit = defineEmits<{
(event: 'select', payload: LinePoolItem): void
}>()
const selectLine = (line: LinePoolItem) => {
emit('select', line)
}
return {
lineList,
selectLine,
}
},
})
</script>
<style lang="scss" scoped>

26
src/views/Editor/CanvasTool/MediaInput.vue
View File

@ -28,8 +28,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
type TypeKey = 'video' | 'audio'
@ -38,10 +38,12 @@ interface TabItem {
label: string
}
export default defineComponent({
name: 'media-input',
emits: ['insertVideo', 'insertAudio', 'close'],
setup(props, { emit }) {
const emit = defineEmits<{
(event: 'insertVideo', payload: string): void
(event: 'insertAudio', payload: string): void
(event: 'close'): void
}>()
const type = ref<TypeKey>('video')
const videoSrc = ref('https://mazwai.com/videvo_files/video/free/2019-01/small_watermarked/181004_04_Dolphins-Whale_06_preview.webm')
@ -63,18 +65,6 @@ export default defineComponent({
}
const close = () => emit('close')
return {
type,
videoSrc,
audioSrc,
tabs,
insertVideo,
insertAudio,
close,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -1,6 +1,6 @@
<template>
<div class="shape-pool">
<div class="category" v-for="item in shapeList" :key="item.type">
<div class="category" v-for="item in SHAPE_LIST" :key="item.type">
<div class="category-name">{{item.type}}</div>
<div class="shape-list">
<div class="shape-item" v-for="(shape, index) in item.children" :key="index">
@ -33,26 +33,16 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
<script lang="ts" setup>
import { SHAPE_LIST, ShapePoolItem } from '@/configs/shapes'
export default defineComponent({
name: 'shape-pool',
emits: ['select'],
setup(props, { emit }) {
const shapeList = SHAPE_LIST
const emit = defineEmits<{
(event: 'select', payload: ShapePoolItem): void
}>()
const selectShape = (shape: ShapePoolItem) => {
emit('select', shape)
}
return {
shapeList,
selectShape,
}
},
})
</script>
<style lang="scss" scoped>

31
src/views/Editor/CanvasTool/TableGenerator.vue
View File

@ -51,15 +51,20 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
export default defineComponent({
name: 'table-generator',
emits: ['insert', 'close'],
setup(props, { emit }) {
interface InsertData {
row: number
col: number
}
const emit = defineEmits<{
(event: 'insert', payload: InsertData): void
(event: 'close'): void
}>()
const endCell = ref<number[]>([])
const customRow = ref(3)
const customCol = ref(3)
@ -82,18 +87,6 @@ export default defineComponent({
emit('close')
isCustom.value = false
}
return {
endCell,
customRow,
customCol,
handleClickTable,
insertCustomTable,
isCustom,
close,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -106,8 +106,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSnapshotStore } from '@/store'
import { getImageDataURL } from '@/utils/image'
@ -124,17 +124,6 @@ import TableGenerator from './TableGenerator.vue'
import MediaInput from './MediaInput.vue'
import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
export default defineComponent({
name: 'canvas-tool',
components: {
ShapePool,
LinePool,
ChartPool,
TableGenerator,
MediaInput,
LaTeXEditor,
},
setup() {
const mainStore = useMainStore()
const { creatingElement } = storeToRefs(mainStore)
const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
@ -165,7 +154,7 @@ export default defineComponent({
createAudioElement,
} = useCreateElement()
const insertImageElement = (files: File[]) => {
const insertImageElement = (files: FileList) => {
const imageFile = files[0]
if (!imageFile) return
getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
@ -202,37 +191,6 @@ export default defineComponent({
})
linePoolVisible.value = false
}
return {
scaleCanvas,
resetCanvas,
canvasScalePercentage,
canvasScaleVisible,
canvasScalePresetList,
applyCanvasPresetScale,
canUndo,
canRedo,
redo,
undo,
insertImageElement,
shapePoolVisible,
linePoolVisible,
chartPoolVisible,
tableGeneratorVisible,
mediaInputVisible,
latexEditorVisible,
creatingElement,
drawText,
drawShape,
drawLine,
createChartElement,
createTableElement,
createLatexElement,
createVideoElement,
createAudioElement,
}
},
})
</script>
<style lang="scss" scoped>

14
src/views/Editor/EditorHeader/HotkeyDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="hotkey-doc">
<template v-for="item in hotkeys" :key="item.type">
<template v-for="item in HOTKEY_DOC" :key="item.type">
<div class="title">{{item.type}}</div>
<div class="hotkey-item" v-for="hotkey in item.children" :key="hotkey.label">
<div class="label">{{hotkey.label}}</div>
@ -10,18 +10,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
<script lang="ts" setup>
import { HOTKEY_DOC } from '@/configs/hotkey'
export default defineComponent({
name: 'hotkey-doc',
setup() {
return {
hotkeys: HOTKEY_DOC,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -78,8 +78,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import useScreening from '@/hooks/useScreening'
@ -89,12 +89,6 @@ import useExport from '@/hooks/useExport'
import HotkeyDoc from './HotkeyDoc.vue'
export default defineComponent({
name: 'editor-header',
components: {
HotkeyDoc,
},
setup() {
const mainStore = useMainStore()
const { showGridLines, showRuler } = storeToRefs(mainStore)
@ -118,26 +112,6 @@ export default defineComponent({
const goIssues = () => {
window.open('https://github.com/pipipi-pikachu/PPTist/issues')
}
return {
redo,
undo,
showGridLines,
showRuler,
hotkeyDrawerVisible,
importSpecificFile,
setDialogForExport,
enterScreening,
enterScreeningFromStart,
createSlide,
deleteSlide,
toggleGridLines,
toggleRuler,
resetSlides,
goIssues,
}
},
})
</script>
<style lang="scss" scoped>

30
src/views/Editor/ExportDialog/ExportImage.vue
View File

@ -75,20 +75,18 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import useExport from '@/hooks/useExport'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
export default defineComponent({
name: 'export-img-dialog',
components: {
ThumbnailSlide,
},
setup(props, { emit }) {
const emit = defineEmits<{
(event: 'close'): void
}>()
const { slides, currentSlide } = storeToRefs(useSlidesStore())
const imageThumbnailsRef = ref<HTMLElement>()
@ -115,22 +113,6 @@ export default defineComponent({
if (!imageThumbnailsRef.value) return
exportImage(imageThumbnailsRef.value, format.value, quality.value, ignoreWebfont.value)
}
return {
imageThumbnailsRef,
slides,
rangeType,
range,
format,
quality,
ignoreWebfont,
renderSlides,
exporting,
expImage,
close,
}
},
})
</script>
<style lang="scss" scoped>

20
src/views/Editor/ExportDialog/ExportJSON.vue
View File

@ -11,28 +11,18 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import useExport from '@/hooks/useExport'
export default defineComponent({
name: 'export-json-dialog',
setup(props, { emit }) {
const close = () => emit('close')
const emit = defineEmits<{
(event: 'close'): void
}>()
const { slides } = storeToRefs(useSlidesStore())
const { exportJSON } = useExport()
return {
slides,
exportJSON,
close,
}
},
})
const close = () => emit('close')
</script>
<style lang="scss" scoped>

27
src/views/Editor/ExportDialog/ExportPDF.vue
View File

@ -60,20 +60,18 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { print } from '@/utils/print'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
export default defineComponent({
name: 'export-pdf-dialog',
components: {
ThumbnailSlide,
},
setup(props, { emit }) {
const emit = defineEmits<{
(event: 'close'): void
}>()
const { slides, currentSlide } = storeToRefs(useSlidesStore())
const pdfThumbnailsRef = ref<HTMLElement>()
@ -92,19 +90,6 @@ export default defineComponent({
}
print(pdfThumbnailsRef.value, pageSize)
}
return {
pdfThumbnailsRef,
slides,
currentSlide,
rangeType,
count,
padding,
expPDF,
close,
}
},
})
</script>
<style lang="scss" scoped>

28
src/views/Editor/ExportDialog/ExportPPTX.vue
View File

@ -39,17 +39,20 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import useExport from '@/hooks/useExport'
export default defineComponent({
name: 'export-pptx-dialog',
setup(props, { emit }) {
const emit = defineEmits<{
(event: 'close'): void
}>()
const { slides, currentSlide } = storeToRefs(useSlidesStore())
const { exportPPTX, exporting } = useExport()
const rangeType = ref<'all' | 'current' | 'custom'>('all')
const range = ref<[number, number]>([1, slides.value.length])
const masterOverwrite = ref(true)
@ -64,21 +67,6 @@ export default defineComponent({
})
const close = () => emit('close')
const { exportPPTX, exporting } = useExport()
return {
slides,
rangeType,
range,
masterOverwrite,
exporting,
selectedSlides,
exportPPTX,
close,
}
},
})
</script>
<style lang="scss" scoped>

26
src/views/Editor/ExportDialog/ExportSpecificFile.vue
View File

@ -34,17 +34,20 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import useExport from '@/hooks/useExport'
export default defineComponent({
name: 'export-pptist-dialog',
setup(props, { emit }) {
const emit = defineEmits<{
(event: 'close'): void
}>()
const { slides, currentSlide } = storeToRefs(useSlidesStore())
const { exportSpecificFile } = useExport()
const rangeType = ref<'all' | 'current' | 'custom'>('all')
const range = ref<[number, number]>([1, slides.value.length])
@ -58,19 +61,6 @@ export default defineComponent({
})
const close = () => emit('close')
const { exportSpecificFile } = useExport()
return {
slides,
rangeType,
range,
selectedSlides,
exportSpecificFile,
close,
}
},
})
</script>
<style lang="scss" scoped>

16
src/views/Editor/ExportDialog/index.vue
View File

@ -15,8 +15,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
<script lang="ts" setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { DialogForExportTypes } from '@/types/export'
@ -32,9 +32,6 @@ interface TabItem {
label: string
}
export default defineComponent({
name: 'export-dialog',
setup() {
const mainStore = useMainStore()
const { dialogForExport } = storeToRefs(mainStore)
@ -58,15 +55,6 @@ export default defineComponent({
}
return dialogMap[dialogForExport.value] || null
})
return {
currentDialogComponent,
tabs,
dialogForExport,
setDialogForExport,
}
},
})
</script>
<style lang="scss" scoped>

25
src/views/Editor/Remark/index.vue
View File

@ -12,21 +12,22 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
<script lang="ts" setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
export default defineComponent({
name: 'remark',
emits: ['update:height'],
props: {
const props = defineProps({
height: {
type: Number,
required: true,
},
},
setup(props, { emit }) {
})
const emit = defineEmits<{
(event: 'update:height', payload: number): void
}>()
const slidesStore = useSlidesStore()
const { currentSlide } = storeToRefs(slidesStore)
@ -62,14 +63,6 @@ export default defineComponent({
document.onmouseup = null
}
}
return {
remark,
handleInput,
resize,
}
},
})
</script>
<style lang="scss" scoped>

21
src/views/Editor/Thumbnails/LayoutPool.vue
View File

@ -11,33 +11,22 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { Slide } from '@/types/slides'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
export default defineComponent({
name: 'layout-pool',
emits: ['select'],
components: {
ThumbnailSlide,
},
setup(props, { emit }) {
const emit = defineEmits<{
(event: 'select', payload: Slide): void
}>()
const { layouts } = storeToRefs(useSlidesStore())
const selectSlideTemplate = (slide: Slide) => {
emit('select', slide)
}
return {
layouts,
selectSlideTemplate,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -43,8 +43,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
import { fillDigit } from '@/utils/common'
@ -57,14 +57,6 @@ import Draggable from 'vuedraggable'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
import LayoutPool from './LayoutPool.vue'
export default defineComponent({
name: 'thumbnails',
components: {
Draggable,
ThumbnailSlide,
LayoutPool,
},
setup() {
const mainStore = useMainStore()
const slidesStore = useSlidesStore()
const keyboardStore = useKeyboardStore()
@ -242,24 +234,6 @@ export default defineComponent({
},
]
}
return {
slides,
slideIndex,
selectedSlidesIndex,
presetLayoutPopoverVisible,
slidesLoadLimit,
createSlide,
createSlideByTemplate,
setThumbnailsFocus,
handleClickSlideThumbnail,
contextmenusThumbnails,
contextmenusThumbnailItem,
fillDigit,
handleDragEnd,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -30,9 +30,9 @@
<div
class="animation-box"
:class="[
`${prefix}animated`,
`${prefix}fast`,
hoverPreviewAnimation === item.value && `${prefix}${item.value}`,
`${ANIMATION_CLASS_PREFIX}animated`,
`${ANIMATION_CLASS_PREFIX}fast`,
hoverPreviewAnimation === item.value && `${ANIMATION_CLASS_PREFIX}${item.value}`,
]"
>{{item.name}}</div>
</div>
@ -113,8 +113,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { nanoid } from 'nanoid'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
@ -157,12 +157,6 @@ interface TabItem {
const animationTypes: AnimationType[] = ['in', 'out', 'attention']
export default defineComponent({
name: 'element-animation-panel',
components: {
Draggable,
},
setup() {
const slidesStore = useSlidesStore()
const { handleElement, handleElementId } = storeToRefs(useMainStore())
const { currentSlide, formatedAnimations, currentSlideAnimations } = storeToRefs(slidesStore)
@ -327,34 +321,11 @@ export default defineComponent({
handlePopoverVisibleChange(true)
}
return {
tabs,
activeTab,
handleAnimationId,
handleElement,
animationPoolVisible,
animationSequence,
hoverPreviewAnimation,
handleElementAnimation,
popoverMaskHide,
animations: {
const animations = {
in: ENTER_ANIMATIONS,
out: EXIT_ANIMATIONS,
attention: ATTENTION_ANIMATIONS,
},
prefix: ANIMATION_CLASS_PREFIX,
animationTypes,
addAnimation,
deleteAnimation,
handleDragEnd,
runAnimation,
updateElementAnimationDuration,
updateElementAnimationTrigger,
handlePopoverVisibleChange,
openAnimationPool,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -2,12 +2,12 @@
<div class="element-positopn-panel">
<div class="title">层级：</div>
<ButtonGroup class="row">
<Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.TOP)"><IconSendToBack class="btn-icon" /> 置于顶层</Button>
<Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.BOTTOM)"><IconBringToFrontOne class="btn-icon" /> 置于底层</Button>
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.TOP)"><IconSendToBack class="btn-icon" /> 置于顶层</Button>
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.BOTTOM)"><IconBringToFrontOne class="btn-icon" /> 置于底层</Button>
</ButtonGroup>
<ButtonGroup class="row">
<Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.UP)"><IconBringToFront class="btn-icon" /> 上移一层</Button>
<Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.DOWN)"><IconSentToBack class="btn-icon" /> 下移一层</Button>
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.UP)"><IconBringToFront class="btn-icon" /> 上移一层</Button>
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)"><IconSentToBack class="btn-icon" /> 下移一层</Button>
</ButtonGroup>
<Divider />
@ -61,7 +61,7 @@
<div style="flex: 4;" class="label">Y</div>
</div>
<template v-if="handleElement.type !== 'line'">
<template v-if="handleElement!.type !== 'line'">
<div class="row">
<div style="flex: 3;">大小：</div>
<InputNumber
@ -72,7 +72,7 @@
@change="value => updateWidth(value as number)"
style="flex: 4;"
/>
<template v-if="['image', 'shape', 'audio'].includes(handleElement.type)">
<template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="解除宽高比锁定" v-if="fixedRatio">
<IconLock style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
</Tooltip>
@ -85,7 +85,7 @@
:min="minSize"
:max="800"
:step="5"
:disabled="handleElement.type === 'text'"
:disabled="handleElement!.type === 'text'"
:value="height"
@change="value => updateHeight(value as number)"
style="flex: 4;"
@ -99,7 +99,7 @@
</div>
</template>
<template v-if="!['line', 'video', 'audio'].includes(handleElement.type)">
<template v-if="!['line', 'video', 'audio'].includes(handleElement!.type)">
<Divider />
<div class="row">
@ -131,21 +131,17 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, Ref, ref, watch } from 'vue'
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { round } from 'lodash'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTElement } from '@/types/slides'
import { ElementAlignCommands, ElementOrderCommands } from '@/types/edit'
import { MIN_SIZE } from '@/configs/element'
import useOrderElement from '@/hooks/useOrderElement'
import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default defineComponent({
name: 'element-positopn-panel',
setup() {
const slidesStore = useSlidesStore()
const { handleElement, handleElementId } = storeToRefs(useMainStore())
@ -230,30 +226,6 @@ export default defineComponent({
slidesStore.updateElement({ id: handleElementId.value, props })
addHistorySnapshot()
}
return {
handleElement: handleElement as Ref<PPTElement>,
orderElement,
alignElementToCanvas,
left,
top,
width,
height,
rotate,
fixedRatio,
minSize,
updateLeft,
updateTop,
updateWidth,
updateHeight,
updateRotate,
updateFixedRatio,
updateRotate45,
ElementOrderCommands,
ElementAlignCommands,
}
},
})
</script>
<style lang="scss" scoped>

27
src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
View File

@ -5,11 +5,11 @@
<Popover trigger="click">
<template #content>
<ColorPicker
:modelValue="handleElement.color"
:modelValue="handleAudioElement.color"
@update:modelValue="value => updateAudio({ color: value })"
/>
</template>
<ColorButton :color="handleElement.color" style="flex: 3;" />
<ColorButton :color="handleAudioElement.color" style="flex: 3;" />
</Popover>
</div>
@ -17,7 +17,7 @@
<div style="flex: 2;">自动播放：</div>
<div class="switch-wrapper" style="flex: 3;">
<Switch
:checked="handleElement.autoplay"
:checked="handleAudioElement.autoplay"
@change="checked => updateAudio({ autoplay: checked as boolean })"
/>
</div>
@ -27,7 +27,7 @@
<div style="flex: 2;">循环播放：</div>
<div class="switch-wrapper" style="flex: 3;">
<Switch
:checked="handleElement.loop"
:checked="handleAudioElement.loop"
@change="checked => updateAudio({ loop: checked as boolean })"
/>
</div>
@ -35,8 +35,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, Ref } from 'vue'
<script lang="ts" setup>
import { Ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTAudioElement } from '@/types/slides'
@ -44,15 +44,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ColorButton from '../common/ColorButton.vue'
export default defineComponent({
name: 'audio-style-panel',
components: {
ColorButton,
},
setup() {
const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore())
const handleAudioElement = handleElement as Ref<PPTAudioElement>
const { addHistorySnapshot } = useHistorySnapshot()
const updateAudio = (props: Partial<PPTAudioElement>) => {
@ -60,13 +56,6 @@ export default defineComponent({
slidesStore.updateElement({ id: handleElement.value.id, props })
addHistorySnapshot()
}
return {
handleElement: handleElement as Ref<PPTAudioElement>,
updateAudio,
}
}
})
</script>
<style lang="scss" scoped>

39
src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
View File

@ -54,25 +54,27 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, PropType, ref } from 'vue'
import { ChartData } from '@/types/slides'
import { KEYS } from '@/configs/hotkey'
import { pasteCustomClipboardString, pasteExcelClipboardString } from '@/utils/clipboard'
const CELL_WIDTH = 100
const CELL_HEIGHT = 32
export default defineComponent({
name: 'chart-data-editor',
emits: ['save', 'close'],
props: {
const props = defineProps({
data: {
type: Object as PropType<ChartData>,
required: true,
}
},
setup(props, { emit }) {
})
const emit = defineEmits<{
(event: 'save', payload: ChartData): void
(event: 'close'): void
}>()
const CELL_WIDTH = 100
const CELL_HEIGHT = 32
const selectedRange = ref([0, 0])
const tempRangeSize = ref({ width: 0, height: 0 })
const focusCell = ref<[number, number] | null>(null)
@ -279,21 +281,6 @@ export default defineComponent({
tempRangeSize.value = { width: 0, height: 0 }
}
}
return {
tempRangeSize,
rangeLines,
resizablePointStyle,
selectedRange,
focusCell,
changeSelectRange,
getTableData,
closeEditor,
clear,
handlePaste,
}
},
})
</script>
<style lang="scss" scoped>

51
src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
View File

@ -6,7 +6,7 @@
<Divider />
<template v-if="handleElement.chartType === 'line'">
<template v-if="handleChartElement.chartType === 'line'">
<div class="row">
<Checkbox
@change="e => updateOptions({ showArea: e.target.checked })"
@ -26,7 +26,7 @@
>使用平滑曲线</Checkbox>
</div>
</template>
<div class="row" v-if="handleElement.chartType === 'bar'">
<div class="row" v-if="handleChartElement.chartType === 'bar'">
<Checkbox
@change="e => updateOptions({ horizontalBars: e.target.checked })"
:checked="horizontalBars"
@ -36,7 +36,7 @@
:checked="stackBars"
>堆叠样式</Checkbox>
</div>
<div class="row" v-if="handleElement.chartType === 'pie'">
<div class="row" v-if="handleChartElement.chartType === 'pie'">
<Checkbox
@change="e => updateOptions({ donut: e.target.checked })"
:checked="donut"
@ -143,7 +143,7 @@
destroyOnClose
>
<ChartDataEditor
:data="handleElement.data"
:data="handleChartElement.data"
@close="chartDataEditorVisible = false"
@save="value => updateData(value)"
/>
@ -151,8 +151,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onUnmounted, Ref, ref, watch } from 'vue'
<script lang="ts" setup>
import { onUnmounted, Ref, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { ChartData, ChartOptions, PPTChartElement } from '@/types/slides'
@ -178,19 +178,13 @@ const presetChartThemes = [
['#8a7ca8', '#e098c7', '#8fd3e8', '#71669e', '#cc70af', '#7cb4cc'],
]
export default defineComponent({
name: 'chart-style-panel',
components: {
ElementOutline,
ChartDataEditor,
ColorButton,
},
setup() {
const mainStore = useMainStore()
const slidesStore = useSlidesStore()
const { handleElement, handleElementId } = storeToRefs(mainStore)
const { theme } = storeToRefs(slidesStore)
const handleChartElement = handleElement as Ref<PPTChartElement>
const chartDataEditorVisible = ref(false)
const presetThemesVisible = ref(false)
const presetThemeColorHoverIndex = ref<[number, number]>([-1, -1])
@ -309,34 +303,7 @@ export default defineComponent({
emitter.off(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
})
return {
chartDataEditorVisible,
presetThemesVisible,
presetThemeColorHoverIndex,
handleElement: handleElement as Ref<PPTChartElement>,
updateData,
fill,
updateFill,
lineSmooth,
showLine,
showArea,
horizontalBars,
donut,
stackBars,
updateOptions,
themeColor,
gridColor,
legend,
updateTheme,
addThemeColor,
deleteThemeColor,
updateGridColor,
updateLegend,
presetChartThemes,
applyPresetTheme,
}
},
})
// handleElement: handleElement as Ref<PPTChartElement>,
</script>
<style lang="scss" scoped>

33
src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
View File

@ -2,7 +2,7 @@
<div class="image-style-panel">
<div
class="origin-image"
:style="{ backgroundImage: `url(${handleElement.src})` }"
:style="{ backgroundImage: `url(${handleImageElement.src})` }"
></div>
<ElementFlip />
@ -57,8 +57,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, Ref, ref } from 'vue'
<script lang="ts" setup>
import { Ref, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTImageElement, SlideBackground } from '@/types/slides'
@ -105,20 +105,13 @@ const ratioClipOptions = [
},
]
export default defineComponent({
name: 'image-style-panel',
components: {
ElementOutline,
ElementShadow,
ElementFlip,
ElementFilter,
},
setup() {
const mainStore = useMainStore()
const slidesStore = useSlidesStore()
const { handleElement, handleElementId } = storeToRefs(mainStore)
const { currentSlide } = storeToRefs(slidesStore)
const handleImageElement = handleElement as Ref<PPTImageElement>
const clipPanelVisible = ref(false)
const { addHistorySnapshot } = useHistorySnapshot()
@ -207,7 +200,7 @@ export default defineComponent({
}
// 替换图片（保持当前的样式）
const replaceImage = (files: File[]) => {
const replaceImage = (files: FileList) => {
const imageFile = files[0]
if (!imageFile) return
getImageDataURL(imageFile).then(dataURL => {
@ -260,20 +253,6 @@ export default defineComponent({
slidesStore.updateSlide({ background })
addHistorySnapshot()
}
return {
clipPanelVisible,
shapeClipPathOptions,
ratioClipOptions,
handleElement: handleElement as Ref<PPTImageElement>,
clipImage,
presetImageClip,
replaceImage,
resetImage,
setBackgroundImage,
}
},
})
</script>
<style lang="scss" scoped>

30
src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
View File

@ -9,11 +9,11 @@
<Popover trigger="click">
<template #content>
<ColorPicker
:modelValue="handleElement.color"
:modelValue="handleLatexElement.color"
@update:modelValue="value => updateLatex({ color: value })"
/>
</template>
<ColorButton :color="handleElement.color" style="flex: 3;" />
<ColorButton :color="handleLatexElement.color" style="flex: 3;" />
</Popover>
</div>
<div class="row">
@ -21,7 +21,7 @@
<InputNumber
:min="1"
:max="3"
:value="handleElement.strokeWidth"
:value="handleLatexElement.strokeWidth"
@change="value => updateLatex({ strokeWidth: value as number })"
style="flex: 3;"
/>
@ -35,7 +35,7 @@
destroyOnClose
>
<LaTeXEditor
:value="handleElement.latex"
:value="handleLatexElement.latex"
@close="latexEditorVisible = false"
@update="data => { updateLatexData(data); latexEditorVisible = false }"
/>
@ -43,8 +43,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onUnmounted, Ref, ref } from 'vue'
<script lang="ts" setup>
import { onUnmounted, Ref, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTLatexElement } from '@/types/slides'
@ -54,16 +54,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ColorButton from '../common/ColorButton.vue'
import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
export default defineComponent({
name: 'latex-style-panel',
components: {
ColorButton,
LaTeXEditor,
},
setup() {
const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore())
const handleLatexElement = handleElement as Ref<PPTLatexElement>
const latexEditorVisible = ref(false)
const { addHistorySnapshot } = useHistorySnapshot()
@ -90,15 +85,6 @@ export default defineComponent({
onUnmounted(() => {
emitter.off(EmitterEvents.OPEN_LATEX_EDITOR, openLatexEditor)
})
return {
handleElement: handleElement as Ref<PPTLatexElement>,
latexEditorVisible,
updateLatex,
updateLatexData,
}
}
})
</script>
<style lang="scss" scoped>

36
src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
View File

@ -4,7 +4,7 @@
<div style="flex: 2;">线条样式：</div>
<Select
style="flex: 3;"
:value="handleElement.style"
:value="handleLineElement.style"
@change="value => updateLine({ style: value as 'solid' | 'dashed' })"
>
<SelectOption value="solid">实线</SelectOption>
@ -16,17 +16,17 @@
<Popover trigger="click">
<template #content>
<ColorPicker
:modelValue="handleElement.color"
:modelValue="handleLineElement.color"
@update:modelValue="value => updateLine({ color: value })"
/>
</template>
<ColorButton :color="handleElement.color" style="flex: 3;" />
<ColorButton :color="handleLineElement.color" style="flex: 3;" />
</Popover>
</div>
<div class="row">
<div style="flex: 2;">线条宽度：</div>
<InputNumber
:value="handleElement.width"
:value="handleLineElement.width"
@change="value => updateLine({ width: value as number })"
style="flex: 3;"
/>
@ -36,8 +36,8 @@
<div style="flex: 2;">起点样式：</div>
<Select
style="flex: 3;"
:value="handleElement.points[0]"
@change="value => updateLine({ points: [value as 'arrow' | 'dot', handleElement.points[1]] })"
:value="handleLineElement.points[0]"
@change="value => updateLine({ points: [value as 'arrow' | 'dot', handleLineElement.points[1]] })"
>
<SelectOption value="">无</SelectOption>
<SelectOption value="arrow">箭头</SelectOption>
@ -48,8 +48,8 @@
<div style="flex: 2;">终点样式：</div>
<Select
style="flex: 3;"
:value="handleElement.points[1]"
@change="value => updateLine({ points: [handleElement.points[0], value as 'arrow' | 'dot'] })"
:value="handleLineElement.points[1]"
@change="value => updateLine({ points: [handleLineElement.points[0], value as 'arrow' | 'dot'] })"
>
<SelectOption value="">无</SelectOption>
<SelectOption value="arrow">箭头</SelectOption>
@ -62,8 +62,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, Ref } from 'vue'
<script lang="ts" setup>
import { Ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTLineElement } from '@/types/slides'
@ -72,16 +72,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ElementShadow from '../common/ElementShadow.vue'
import ColorButton from '../common/ColorButton.vue'
export default defineComponent({
name: 'line-style-panel',
components: {
ElementShadow,
ColorButton,
},
setup() {
const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore())
const handleLineElement = handleElement as Ref<PPTLineElement>
const { addHistorySnapshot } = useHistorySnapshot()
const updateLine = (props: Partial<PPTLineElement>) => {
@ -89,13 +84,6 @@ export default defineComponent({
slidesStore.updateElement({ id: handleElement.value.id, props })
addHistorySnapshot()
}
return {
handleElement: handleElement as Ref<PPTLineElement>,
updateLine,
}
}
})
</script>
<style lang="scss" scoped>

28
src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
View File

@ -62,7 +62,7 @@
</SelectOption>
</SelectOptGroup>
<SelectOptGroup label="在线字体">
<SelectOption v-for="font in webFonts" :key="font.value" :value="font.value">
<SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
<span>{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
@ -141,8 +141,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTElement, PPTElementOutline, TableCell } from '@/types/slides'
@ -152,14 +152,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ColorButton from '../common/ColorButton.vue'
const webFonts = WEB_FONTS
export default defineComponent({
name: 'multi-style-panel',
components: {
ColorButton,
},
setup() {
const slidesStore = useSlidesStore()
const { richTextAttrs, availableFonts, activeElementList } = storeToRefs(useMainStore())
@ -250,20 +242,6 @@ export default defineComponent({
}
}
}
return {
webFonts,
richTextAttrs,
availableFonts,
fontSizeOptions,
fill,
outline,
updateFill,
updateOutline,
updateFontStyle,
}
}
})
</script>
<style lang="scss" scoped>

41
src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
View File

@ -71,7 +71,7 @@
<ElementFlip />
<Divider />
<template v-if="handleElement?.text?.content">
<template v-if="handleShapeElement.text?.content">
<InputGroup compact class="row">
<Select
style="flex: 3;"
@ -85,7 +85,7 @@
</SelectOption>
</SelectOptGroup>
<SelectOptGroup label="在线字体">
<SelectOption v-for="font in webFonts" :key="font.value" :value="font.value">
<SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
<span>{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
@ -222,8 +222,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, watch } from 'vue'
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTShapeElement, ShapeGradient, ShapeText } from '@/types/slides'
@ -237,22 +237,12 @@ import ElementShadow from '../common/ElementShadow.vue'
import ElementFlip from '../common/ElementFlip.vue'
import ColorButton from '../common/ColorButton.vue'
const webFonts = WEB_FONTS
export default defineComponent({
name: 'shape-style-panel',
components: {
ElementOpacity,
ElementOutline,
ElementShadow,
ElementFlip,
ColorButton,
},
setup() {
const mainStore = useMainStore()
const slidesStore = useSlidesStore()
const { handleElement, handleElementId, richTextAttrs, availableFonts } = storeToRefs(mainStore)
const handleShapeElement = handleElement as Ref<PPTShapeElement>
const fill = ref<string>('#000')
const gradient = ref<ShapeGradient>({
type: 'linear',
@ -321,25 +311,6 @@ export default defineComponent({
const emitRichTextCommand = (command: string, value?: string) => {
emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
}
return {
fill,
gradient,
fillType,
textAlign,
richTextAttrs,
availableFonts,
fontSizeOptions,
webFonts,
handleElement: handleElement as Ref<PPTShapeElement>,
emitRichTextCommand,
updateFillType,
updateFill,
updateGradient,
updateTextAlign,
}
},
})
</script>
<style lang="scss" scoped>

35
src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
View File

@ -13,7 +13,7 @@
</SelectOption>
</SelectOptGroup>
<SelectOptGroup label="在线字体">
<SelectOption v-for="font in webFonts" :key="font.value" :value="font.value">
<SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
<span>{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
@ -185,8 +185,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { nanoid } from 'nanoid'
import { useMainStore, useSlidesStore } from '@/store'
@ -197,15 +197,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ElementOutline from '../common/ElementOutline.vue'
import ColorButton from '../common/ColorButton.vue'
const webFonts = WEB_FONTS
export default defineComponent({
name: 'table-style-panel',
components: {
ElementOutline,
ColorButton,
},
setup() {
const slidesStore = useSlidesStore()
const { handleElement, handleElementId, selectedTableCells: selectedCells, availableFonts } = storeToRefs(useMainStore())
const themeColor = computed(() => slidesStore.theme.themeColor)
@ -398,26 +389,6 @@ export default defineComponent({
}
updateElement(props)
}
return {
availableFonts,
fontSizeOptions,
textAttrs,
updateTextAttrs,
theme,
rowCount,
colCount,
minRowCount,
minColCount,
hasTheme,
toggleTheme,
updateTheme,
setTableRow,
setTableCol,
webFonts,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -25,7 +25,7 @@
</SelectOption>
</SelectOptGroup>
<SelectOptGroup label="在线字体">
<SelectOption v-for="font in webFonts" :key="font.value" :value="font.value">
<SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
<span>{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
@ -270,8 +270,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTTextElement } from '@/types/slides'
@ -358,17 +358,6 @@ const presetStyles = [
},
]
const webFonts = WEB_FONTS
export default defineComponent({
name: 'text-style-panel',
components: {
ElementOpacity,
ElementOutline,
ElementShadow,
ColorButton,
},
setup() {
const slidesStore = useSlidesStore()
const { handleElement, handleElementId, richTextAttrs, availableFonts } = storeToRefs(useMainStore())
@ -458,36 +447,6 @@ export default defineComponent({
emitRichTextCommand('link', link)
linkPopoverVisible.value = false
}
return {
fill,
lineHeight,
wordSpace,
textIndent,
paragraphSpace,
richTextAttrs,
availableFonts,
webFonts,
fontSizeOptions,
lineHeightOptions,
wordSpaceOptions,
textIndentOptions,
paragraphSpaceOptions,
updateLineHeight,
updateParagraphSpace,
updateWordSpace,
updateTextIndent,
updateFill,
emitRichTextCommand,
emitBatchRichTextCommand,
presetStyles,
link,
linkPopoverVisible,
openLinkPopover,
updateLink,
}
},
})
</script>
<style lang="scss" scoped>

21
src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
View File

@ -4,7 +4,7 @@
<div class="background-image-wrapper">
<FileInput @change="files => setVideoPoster(files)">
<div class="background-image">
<div class="content" :style="{ backgroundImage: `url(${handleElement.poster})` }">
<div class="content" :style="{ backgroundImage: `url(${handleVideoElement.poster})` }">
<IconPlus />
</div>
</div>
@ -14,20 +14,19 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
<script lang="ts" setup>
import { Ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTVideoElement } from '@/types/slides'
import { getImageDataURL } from '@/utils/image'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default defineComponent({
name: 'video-style-panel',
setup() {
const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore())
const handleVideoElement = handleElement as Ref<PPTVideoElement>
const { addHistorySnapshot } = useHistorySnapshot()
const updateVideo = (props: Partial<PPTVideoElement>) => {
@ -37,19 +36,11 @@ export default defineComponent({
}
// 设置视频预览封面
const setVideoPoster = (files: File[]) => {
const setVideoPoster = (files: FileList) => {
const imageFile = files[0]
if (!imageFile) return
getImageDataURL(imageFile).then(dataURL => updateVideo({ poster: dataURL }))
}
return {
handleElement,
updateVideo,
setVideoPoster,
}
}
})
</script>
<style lang="scss" scoped>

14
src/views/Editor/Toolbar/ElementStylePanel/index.vue
View File

@ -4,8 +4,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
<script lang="ts" setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { ElementTypes } from '@/types/slides'
@ -33,9 +33,6 @@ const panelMap = {
[ElementTypes.AUDIO]: AudioStylePanel,
}
export default defineComponent({
name: 'element-style-panel',
setup() {
const { activeElementIdList, activeElementList, handleElement, activeGroupElementId } = storeToRefs(useMainStore())
const currentPanelComponent = computed(() => {
@ -48,11 +45,4 @@ export default defineComponent({
return handleElement.value ? (panelMap[handleElement.value.type] || null) : null
})
return {
handleElement,
currentPanelComponent,
}
},
})
</script>

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

@ -36,17 +36,13 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
<script lang="ts" setup>
import { ElementAlignCommands } from '@/types/edit'
import useCombineElement from '@/hooks/useCombineElement'
import useAlignActiveElement from '@/hooks/useAlignActiveElement'
import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
import useUniformDisplayElement from '@/hooks/useUniformDisplayElement'
export default defineComponent({
name: 'multi-position-panel',
setup() {
const { canCombine, combineElements, uncombineElements } = useCombineElement()
const { alignActiveElement } = useAlignActiveElement()
const { alignElementToCanvas } = useAlignElementToCanvas()
@ -59,19 +55,6 @@ export default defineComponent({
if (canCombine.value) alignActiveElement(command)
else alignElementToCanvas(command)
}
return {
canCombine,
displayItemCount,
combineElements,
uncombineElements,
uniformHorizontalDisplay,
uniformVerticalDisplay,
alignElement,
ElementAlignCommands,
}
},
})
</script>
<style lang="scss" scoped>

16
src/views/Editor/Toolbar/SlideAnimationPanel.vue
View File

@ -16,8 +16,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
<script lang="ts" setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { TurningMode } from '@/types/slides'
@ -28,9 +28,6 @@ interface Animations {
value: TurningMode
}
export default defineComponent({
name: 'slide-animation-panel',
setup() {
const slidesStore = useSlidesStore()
const { slides, currentSlide } = storeToRefs(slidesStore)
@ -63,15 +60,6 @@ export default defineComponent({
slidesStore.setSlides(newSlides)
addHistorySnapshot()
}
return {
currentTurningMode,
animations,
updateTurningMode,
applyAllSlide,
}
},
})
</script>
<style lang="scss" scoped>

39
src/views/Editor/Toolbar/SlideDesignPanel.vue
View File

@ -122,7 +122,7 @@
</SelectOption>
</SelectOptGroup>
<SelectOptGroup label="在线字体">
<SelectOption v-for="font in webFonts" :key="font.value" :value="font.value">
<SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
<span>{{font.label}}</span>
</SelectOption>
</SelectOptGroup>
@ -171,7 +171,7 @@
<div class="theme-list" v-if="showPresetThemes">
<div
class="theme-item"
v-for="(item, index) in themes"
v-for="(item, index) in PRESET_THEMES"
:key="index"
:style="{ backgroundColor: item.background }"
@click="updateTheme({
@ -191,8 +191,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { Slide, SlideBackground, SlideTheme } from '@/types/slides'
@ -203,15 +203,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ColorButton from './common/ColorButton.vue'
import { getImageDataURL } from '@/utils/image'
const themes = PRESET_THEMES
const webFonts = WEB_FONTS
export default defineComponent({
name: 'slide-design-panel',
components: {
ColorButton,
},
setup() {
const slidesStore = useSlidesStore()
const { availableFonts } = storeToRefs(useMainStore())
const { slides, currentSlide, viewportRatio, theme } = storeToRefs(slidesStore)
@ -267,7 +258,7 @@ export default defineComponent({
}
// 上传背景图片
const uploadBackgroundImage = (files: File[]) => {
const uploadBackgroundImage = (files: FileList) => {
const imageFile = files[0]
if (!imageFile) return
getImageDataURL(imageFile).then(dataURL => updateBackground({ image: dataURL }))
@ -346,26 +337,6 @@ export default defineComponent({
const updateViewportRatio = (value: number) => {
slidesStore.setViewportRatio(value)
}
return {
availableFonts,
background,
updateBackgroundType,
updateBackground,
uploadBackgroundImage,
applyBackgroundAllSlide,
themes,
theme,
webFonts,
updateTheme,
applyThemeAllSlide,
viewportRatio,
updateViewportRatio,
showPresetThemes,
togglePresetThemesVisible,
}
},
})
</script>
<style lang="scss" scoped>

24
src/views/Editor/Toolbar/SymbolPanel.vue
View File

@ -4,7 +4,7 @@
<div
class="tab"
:class="{ 'active': selectedSymbolKey === item.key }"
v-for="item in symbolPoolList"
v-for="item in SYMBOL_LIST"
:key="item.key"
@click="selectedSymbolKey = item.key"
>{{item.label}}</div>
@ -17,34 +17,20 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { SYMBOL_LIST } from '@/configs/symbol'
import emitter, { EmitterEvents } from '@/utils/emitter'
const symbolPoolList = SYMBOL_LIST
export default defineComponent({
name: 'symbol-panel',
setup() {
const selectedSymbolKey = ref(symbolPoolList[0].key)
const selectedSymbolKey = ref(SYMBOL_LIST[0].key)
const symbolPool = computed(() => {
const selectedSymbol = symbolPoolList.find(item => item.key === selectedSymbolKey.value)
const selectedSymbol = SYMBOL_LIST.find(item => item.key === selectedSymbolKey.value)
return selectedSymbol?.children || []
})
const selectSymbol = (value: string) => {
emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command: 'insert', value } })
}
return {
symbolPoolList,
symbolPool,
selectedSymbolKey,
selectSymbol,
}
},
})
</script>
<style lang="scss" scoped>

9
src/views/Editor/Toolbar/common/ColorButton.vue
View File

@ -7,17 +7,12 @@
</Button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'color-button',
props: {
<script lang="ts" setup>
defineProps({
color: {
type: String,
required: true,
},
},
})
</script>

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

@ -25,8 +25,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTImageElement } from '@/types/slides'
@ -52,9 +52,6 @@ const defaultFilters: FilterOption[] = [
{ label: '不透明度', key: 'opacity', default: 100, value: 100, unit: '%', max: 100, step: 5 },
]
export default defineComponent({
name: 'element-filter',
setup() {
const slidesStore = useSlidesStore()
const { handleElement, handleElementId } = storeToRefs(useMainStore())
@ -100,15 +97,6 @@ export default defineComponent({
}
addHistorySnapshot()
}
return {
filterOptions,
hasFilters,
toggleFilters,
updateFilter,
}
},
})
</script>
<style lang="scss" scoped>

15
src/views/Editor/Toolbar/common/ElementFlip.vue
View File

@ -15,16 +15,13 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { ImageOrShapeFlip } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default defineComponent({
name: 'element-flip',
setup() {
const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore())
@ -45,14 +42,6 @@ export default defineComponent({
slidesStore.updateElement({ id: handleElement.value.id, props: flipProps })
addHistorySnapshot()
}
return {
flipH,
flipV,
updateFlip,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -14,15 +14,12 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default defineComponent({
name: 'element-opacity',
setup() {
const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore())
@ -41,13 +38,6 @@ export default defineComponent({
slidesStore.updateElement({ id: handleElement.value.id, props })
addHistorySnapshot()
}
return {
opacity,
updateOpacity,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -45,8 +45,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTElementOutline } from '@/types/slides'
@ -54,18 +54,13 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ColorButton from './ColorButton.vue'
export default defineComponent({
name: 'element-outline',
components: {
ColorButton,
},
props: {
defineProps({
fixed: {
type: Boolean,
default: false,
},
},
setup() {
})
const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore())
@ -98,15 +93,6 @@ export default defineComponent({
}
addHistorySnapshot()
}
return {
outline,
hasOutline,
toggleOutline,
updateOutline,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -56,8 +56,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTElementShadow } from '@/types/slides'
@ -65,12 +65,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ColorButton from './ColorButton.vue'
export default defineComponent({
name: 'element-shadow',
components: {
ColorButton,
},
setup() {
const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore())
@ -103,15 +97,6 @@ export default defineComponent({
}
addHistorySnapshot()
}
return {
shadow,
hasShadow,
toggleShadow,
updateShadow,
}
},
})
</script>
<style lang="scss" scoped>

16
src/views/Editor/Toolbar/index.vue
View File

@ -15,8 +15,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, watch } from 'vue'
<script lang="ts" setup>
import { computed, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { ToolbarStates } from '@/types/toolbar'
@ -34,9 +34,6 @@ interface ElementTabs {
value: ToolbarStates
}
export default defineComponent({
name: 'toolbar',
setup() {
const mainStore = useMainStore()
const { activeElementIdList, handleElement, toolbarState } = storeToRefs(mainStore)
@ -94,15 +91,6 @@ export default defineComponent({
}
return panelMap[toolbarState.value] || null
})
return {
toolbarState,
currentTabs,
setToolbarState,
currentPanelComponent,
}
},
})
</script>
<style lang="scss" scoped>

24
src/views/Editor/index.vue
View File

@ -29,8 +29,8 @@
</Modal>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import useGlobalHotkey from '@/hooks/useGlobalHotkey'
@ -44,18 +44,6 @@ import Toolbar from './Toolbar/index.vue'
import Remark from './Remark/index.vue'
import ExportDialog from './ExportDialog/index.vue'
export default defineComponent({
name: 'editor',
components: {
EditorHeader,
Canvas,
CanvasTool,
Thumbnails,
Toolbar,
Remark,
ExportDialog,
},
setup() {
const mainStore = useMainStore()
const { dialogForExport } = storeToRefs(mainStore)
const closeExportDialog = () => mainStore.setDialogForExport('')
@ -64,14 +52,6 @@ export default defineComponent({
useGlobalHotkey()
usePasteEvent()
return {
remarkHeight,
dialogForExport,
closeExportDialog,
}
},
})
</script>
<style lang="scss" scoped>

34
src/views/Mobile/MobileEditor/ElementToolbar.vue
View File

@ -96,10 +96,10 @@
<Divider style="margin: 20px 0;" />
<ButtonGroup class="row">
<Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.TOP)"><IconSendToBack class="icon" /> 置顶</Button>
<Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.BOTTOM)"><IconBringToFrontOne class="icon" /> 置底</Button>
<Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.UP)"><IconBringToFront class="icon" /> 上移</Button>
<Button style="flex: 1;" @click="orderElement(handleElement, ElementOrderCommands.DOWN)"><IconSentToBack class="icon" /> 下移</Button>
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.TOP)"><IconSendToBack class="icon" /> 置顶</Button>
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.BOTTOM)"><IconBringToFrontOne class="icon" /> 置底</Button>
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.UP)"><IconBringToFront class="icon" /> 上移</Button>
<Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)"><IconSentToBack class="icon" /> 下移</Button>
</ButtonGroup>
<Divider style="margin: 20px 0;" />
@ -119,8 +119,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, Ref, ref } from 'vue'
<script lang="ts" setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTElement, TableCell } from '@/types/slides'
@ -139,9 +139,6 @@ interface TabItem {
const colors = ['#000000', '#ffffff', '#eeece1', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c', '#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57']
export default defineComponent({
name: 'element-toolbar',
setup() {
const mainStore = useMainStore()
const slidesStore = useSlidesStore()
const { handleElement, handleElementId, richTextAttrs } = storeToRefs(mainStore)
@ -214,25 +211,6 @@ export default defineComponent({
if (handleElement.value.type === 'audio') updateElement(handleElementId.value, { color })
}
return {
handleElement: handleElement as Ref<PPTElement>,
tabs,
activeTab,
richTextAttrs,
colors,
orderElement,
alignElementToCanvas,
copyElement,
deleteElement,
emitRichTextCommand,
updateFontColor,
updateFill,
ElementOrderCommands,
ElementAlignCommands,
}
},
})
</script>
<style lang="scss" scoped>

21
src/views/Mobile/MobileEditor/Header.vue
View File

@ -8,33 +8,22 @@
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
<script lang="ts" setup>
import { PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useSnapshotStore } from '@/store'
import { Mode } from '@/types/mobile'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default defineComponent({
name: 'mobile-editor-header',
props: {
defineProps({
changeMode: {
type: Function as PropType<(mode: Mode) => void>,
required: true,
},
},
setup() {
})
const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
const { redo, undo } = useHistorySnapshot()
return {
redo,
undo,
canUndo,
canRedo,
}
},
})
</script>
<style lang="scss" scoped>

18
src/views/Mobile/MobileEditor/MobileEditableElement.vue
View File

@ -14,8 +14,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { ElementTypes, PPTElement } from '@/types/slides'
import ImageElement from '@/views/components/element/ImageElement/index.vue'
@ -28,9 +28,7 @@ import LatexElement from '@/views/components/element/LatexElement/index.vue'
import VideoElement from '@/views/components/element/VideoElement/index.vue'
import AudioElement from '@/views/components/element/AudioElement/index.vue'
export default defineComponent({
name: 'mobile-editable-element',
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<PPTElement>,
required: true,
@ -43,8 +41,8 @@ export default defineComponent({
type: Function as PropType<(e: TouchEvent, element: PPTElement, canMove?: boolean) => void>,
required: true,
},
},
setup(props) {
})
const currentElementComponent = computed(() => {
const elementTypeMap = {
[ElementTypes.IMAGE]: ImageElement,
@ -59,10 +57,4 @@ export default defineComponent({
}
return elementTypeMap[props.elementInfo.type] || null
})
return {
currentElementComponent,
}
},
})
</script>

26
src/views/Mobile/MobileEditor/MobileOperate.vue
View File

@ -29,8 +29,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { PPTElement, PPTLineElement } from '@/types/slides'
import useCommonOperate from '@/views/Editor/Canvas/hooks/useCommonOperate'
import { OperateResizeHandlers } from '@/types/edit'
@ -38,13 +38,7 @@ import { OperateResizeHandlers } from '@/types/edit'
import BorderLine from '@/views/Editor/Canvas/Operate/BorderLine.vue'
import ResizeHandler from '@/views/Editor/Canvas/Operate/ResizeHandler.vue'
export default defineComponent({
name: 'mobile-operate',
components: {
BorderLine,
ResizeHandler,
},
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<Exclude<PPTElement, PPTLineElement>>,
required: true,
@ -61,25 +55,19 @@ export default defineComponent({
type: Function as PropType<(e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void>,
required: true,
},
},
setup(props) {
})
const rotate = computed(() => 'rotate' in props.elementInfo ? props.elementInfo.rotate : 0)
const scaleWidth = computed(() => props.elementInfo.width * props.canvasScale)
const scaleHeight = computed(() => props.elementInfo.height * props.canvasScale)
const {
borderLines,
resizeHandlers,
resizeHandlers: _resizeHandlers,
textElementResizeHandlers,
} = useCommonOperate(scaleWidth, scaleHeight)
return {
rotate,
borderLines,
resizeHandlers: props.elementInfo.type === 'text' || props.elementInfo.type === 'table' ? textElementResizeHandlers : resizeHandlers,
}
},
})
const resizeHandlers = props.elementInfo.type === 'text' || props.elementInfo.type === 'table' ? textElementResizeHandlers : _resizeHandlers
</script>
<style lang="scss" scoped>

25
src/views/Mobile/MobileEditor/SlideToolbar.vue
View File

@ -29,8 +29,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
<script lang="ts" setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import useSlideHandler from '@/hooks/useSlideHandler'
@ -41,12 +41,6 @@ import { VIEWPORT_SIZE } from '@/configs/canvas'
import MobileThumbnails from '../MobileThumbnails.vue'
export default defineComponent({
name: 'slide-toolbar',
components: {
MobileThumbnails,
},
setup() {
const slidesStore = useSlidesStore()
const { viewportRatio, currentSlide } = storeToRefs(slidesStore)
@ -65,7 +59,7 @@ export default defineComponent({
}, '<p><span style=\"font-size: 24px\">新添加文本</span></p>')
}
const insertImageElement = (files: File[]) => {
const insertImageElement = (files: FileList) => {
if (!files || !files[0]) return
getImageDataURL(files[0]).then(dataURL => createImageElement(dataURL))
}
@ -97,19 +91,6 @@ export default defineComponent({
const value = (e.target as HTMLTextAreaElement).value
slidesStore.updateSlide({ remark: value })
}
return {
remark,
createSlide,
copyAndPasteSlide,
deleteSlide,
insertTextElement,
insertImageElement,
insertShapeElement,
handleInputMark,
}
},
})
</script>
<style lang="scss" scoped>

37
src/views/Mobile/MobileEditor/index.vue
View File

@ -39,8 +39,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, PropType, ref, watchEffect } from 'vue'
<script lang="ts" setup>
import { computed, onMounted, PropType, ref, watchEffect } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTElement } from '@/types/slides'
@ -58,23 +58,13 @@ import SlideToolbar from './SlideToolbar.vue'
import ElementToolbar from './ElementToolbar.vue'
import Header from './Header.vue'
export default defineComponent({
name: 'mobile-editor',
components: {
AlignmentLine,
MobileEditableElement,
MobileOperate,
SlideToolbar,
ElementToolbar,
Header,
},
props: {
defineProps({
changeMode: {
type: Function as PropType<(mode: Mode) => void>,
required: true,
},
},
setup() {
})
const slidesStore = useSlidesStore()
const mainStore = useMainStore()
const { slideIndex, currentSlide, viewportRatio } = storeToRefs(slidesStore)
@ -127,23 +117,6 @@ export default defineComponent({
const handleClickBlankArea = () => {
mainStore.setActiveElementIdList([])
}
return {
contentRef,
slideIndex,
elementList,
canvasScale,
viewportStyles,
backgroundStyle,
activeElementIdList,
alignmentLines,
selectElement,
handleClickBlankArea,
scaleElement,
handleElement,
}
},
})
</script>
<style lang="scss" scoped>

29
src/views/Mobile/MobilePlayer.vue
View File

@ -51,8 +51,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, PropType, ref } from 'vue'
<script lang="ts" setup>
import { computed, onMounted, PropType, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { Mode } from '@/types/mobile'
@ -60,19 +60,13 @@ import { Mode } from '@/types/mobile'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
import MobileThumbnails from './MobileThumbnails.vue'
export default defineComponent({
name: 'mobile-player',
components: {
ThumbnailSlide,
MobileThumbnails,
},
props: {
defineProps({
changeMode: {
type: Function as PropType<(mode: Mode) => void>,
required: true,
},
},
setup() {
})
const slidesStore = useSlidesStore()
const { slides, slideIndex, currentSlide, viewportRatio } = storeToRefs(slidesStore)
@ -130,19 +124,6 @@ export default defineComponent({
if (offsetX > 0 && slideIndex.value < slides.value.length - 1) slidesStore.updateSlideIndex(slideIndex.value + 1)
}
}
return {
slides,
slideIndex,
currentSlide,
playerSize,
slideSize,
toolVisible,
touchStartListener,
touchEndListener,
}
},
})
</script>
<style lang="scss" scoped>

24
src/views/Mobile/MobilePreview.vue
View File

@ -17,8 +17,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, onMounted, ref } from 'vue'
<script lang="ts" setup>
import { PropType, onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import useLoadSlides from '@/hooks/useLoadSlides'
@ -26,18 +26,13 @@ import { Mode } from '@/types/mobile'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
export default defineComponent({
name: 'mobile-preview',
components: {
ThumbnailSlide,
},
props: {
const props = defineProps({
changeMode: {
type: Function as PropType<(mode: Mode) => void>,
required: true,
},
},
setup() {
})
const { slides } = storeToRefs(useSlidesStore())
const { slidesLoadLimit } = useLoadSlides()
@ -48,15 +43,6 @@ export default defineComponent({
if (!mobileRef.value) return
screenWidth.value = mobileRef.value.clientWidth
})
return {
slides,
slidesLoadLimit,
mobileRef,
screenWidth,
}
},
})
</script>
<style lang="scss" scoped>

18
src/views/Mobile/MobileThumbnails.vue
View File

@ -13,20 +13,13 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import useLoadSlides from '@/hooks/useLoadSlides'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
export default defineComponent({
name: 'mobile-thumbnails',
components: {
ThumbnailSlide,
},
setup() {
const slidesStore = useSlidesStore()
const { slides, slideIndex } = storeToRefs(slidesStore)
@ -34,15 +27,6 @@ export default defineComponent({
const changeSlideIndex = (index: number) => {
slidesStore.updateSlideIndex(index)
}
return {
slides,
slideIndex,
slidesLoadLimit,
changeSlideIndex,
}
},
})
</script>
<style lang="scss" scoped>

14
src/views/Mobile/index.vue
View File

@ -7,17 +7,14 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Mode } from '@/types/mobile'
import MobileEditor from './MobileEditor/index.vue'
import MobilePlayer from './MobilePlayer.vue'
import MobilePreview from './MobilePreview.vue'
export default defineComponent({
name: 'mobile',
setup() {
const mode = ref<Mode>('preview')
const changeMode = (_mode: Mode) => mode.value = _mode
@ -30,13 +27,6 @@ export default defineComponent({
}
return componentMap[mode.value] || null
})
return {
currentComponent,
changeMode,
}
},
})
</script>
<style lang="scss" scoped>

43
src/views/Screen/BaseView.vue
View File

@ -58,8 +58,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
<script lang="ts" setup>
import { PropType, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { ContextmenuItem } from '@/components/Contextmenu/types'
@ -73,20 +73,13 @@ import ScreenSlideList from './ScreenSlideList.vue'
import SlideThumbnails from './SlideThumbnails.vue'
import WritingBoardTool from './WritingBoardTool.vue'
export default defineComponent({
name: 'screen',
components: {
ScreenSlideList,
SlideThumbnails,
WritingBoardTool,
},
props: {
const props = defineProps({
changeViewMode: {
type: Function as PropType<(mode: 'base' | 'presenter') => void>,
required: true,
},
},
setup(props) {
})
const { slides, slideIndex } = storeToRefs(useSlidesStore())
const {
@ -167,32 +160,6 @@ export default defineComponent({
},
]
}
return {
slides,
slideIndex,
slideWidth,
slideHeight,
mousewheelListener,
touchStartListener,
touchEndListener,
animationIndex,
contextmenus,
execPrev,
execNext,
turnSlideToIndex,
turnSlideToId,
slideThumbnailModelVisible,
writingBoardToolVisible,
rightToolsVisible,
fullscreenState,
exitScreening,
enterFullscreen,
manualExitFullscreen,
laserPen,
}
},
})
</script>
<style lang="scss" scoped>

47
src/views/Screen/PresenterView.vue
View File

@ -71,8 +71,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, nextTick, ref, watch, PropType } from 'vue'
<script lang="ts" setup>
import { computed, nextTick, ref, watch, PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { ContextmenuItem } from '@/components/Contextmenu/types'
@ -88,20 +88,13 @@ import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
import ScreenSlideList from './ScreenSlideList.vue'
import WritingBoardTool from './WritingBoardTool.vue'
export default defineComponent({
name: 'presenter-view',
components: {
ScreenSlideList,
ThumbnailSlide,
WritingBoardTool,
},
props: {
const props = defineProps({
changeViewMode: {
type: Function as PropType<(mode: 'base' | 'presenter') => void>,
required: true,
},
},
setup(props) {
})
const { slides, slideIndex, viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
const slideListWrapRef = ref<HTMLElement>()
@ -194,36 +187,6 @@ export default defineComponent({
},
]
}
return {
slides,
slideIndex,
viewportRatio,
remarkFontSize,
currentSlideRemark,
setRemarkFontSize,
slideListWrapRef,
thumbnailsRef,
slideWidth,
slideHeight,
animationIndex,
turnSlideToId,
mousewheelListener,
touchStartListener,
touchEndListener,
turnSlideToIndex,
contextmenus,
slidesLoadLimit,
handleMousewheelThumbnails,
exitScreening,
fullscreenState,
enterFullscreen,
manualExitFullscreen,
writingBoardToolVisible,
laserPen,
}
},
})
</script>
<style lang="scss" scoped>

21
src/views/Screen/ScreenElement.vue
View File

@ -19,8 +19,8 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { ElementTypes, PPTElement } from '@/types/slides'
@ -35,9 +35,7 @@ import BaseLatexElement from '@/views/components/element/LatexElement/BaseLatexE
import ScreenVideoElement from '@/views/components/element/VideoElement/ScreenVideoElement.vue'
import ScreenAudioElement from '@/views/components/element/AudioElement/ScreenAudioElement.vue'
export default defineComponent({
name: 'screen-element',
props: {
const props = defineProps({
elementInfo: {
type: Object as PropType<PPTElement>,
required: true,
@ -58,8 +56,8 @@ export default defineComponent({
type: Function as PropType<() => void>,
required: true,
},
},
setup(props) {
})
const currentElementComponent = computed(() => {
const elementTypeMap = {
[ElementTypes.IMAGE]: BaseImageElement,
@ -112,15 +110,6 @@ export default defineComponent({
props.turnSlideToId(link.target)
}
}
return {
currentElementComponent,
needWaitAnimation,
theme,
openLink,
}
},
})
</script>
<style lang="scss" scoped>

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

@ -20,8 +20,8 @@
</div>
</template>
<script lang="ts">
import { computed, PropType, defineComponent, provide } from 'vue'
<script lang="ts" setup>
import { computed, PropType, provide } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store'
import { Slide } from '@/types/slides'
@ -31,12 +31,7 @@ import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
import ScreenElement from './ScreenElement.vue'
export default defineComponent({
name: 'screen-slide',
components: {
ScreenElement,
},
props: {
const props = defineProps({
slide: {
type: Object as PropType<Slide>,
required: true,
@ -57,8 +52,8 @@ export default defineComponent({
type: Function as PropType<() => void>,
required: true,
},
},
setup(props) {
})
const { viewportRatio } = storeToRefs(useSlidesStore())
const background = computed(() => props.slide.background)
@ -66,14 +61,6 @@ export default defineComponent({
const slideId = computed(() => props.slide.id)
provide(injectKeySlideId, slideId)
return {
backgroundStyle,
VIEWPORT_SIZE,
viewportRatio,
}
},
})
</script>
<style lang="scss" scoped>

Some files were not shown because too many files have changed in this diff Show More