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

vuex优化

Browse Source
This commit is contained in:
pipipi-pikachu 2021-01-29 10:32:32 +08:00
parent c0d6f71c9c
commit 29db40288e
78 changed files with 207 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "pptist", "name": "pptist",
"version": "0.0.1", "version": "0.0.1-dev",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",

2
public/index.html
View File

@ -6,7 +6,7 @@
<meta name="renderer" content="webkit" /> <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>PPTist v0.0.1-dev</title> <title>PPTist</title>
</head> </head>
<body> <body>
<noscript> <noscript>

5
src/App.vue
View File

@ -5,8 +5,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onMounted } from 'vue' import { computed, defineComponent, onMounted } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, ActionTypes, useStore } from '@/store'
import { MutationTypes, ActionTypes, State } from '@/store'
import Editor from './views/Editor/index.vue' import Editor from './views/Editor/index.vue'
import Screen from './views/Screen/index.vue' import Screen from './views/Screen/index.vue'
@ -18,7 +17,7 @@ export default defineComponent({
Screen, Screen,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const screening = computed(() => store.state.screening) const screening = computed(() => store.state.screening)
onMounted(() => { onMounted(() => {

1
src/configs/element.ts
View File

@ -13,5 +13,4 @@ export const MIN_SIZE = {
shape: 15, shape: 15,
chart: 200, chart: 200,
table: 20, table: 20,
formula: 20,
} }

5
src/hooks/useAlignElementToCanvas.ts
View File

@ -1,13 +1,12 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { PPTElement, Slide } from '@/types/slides' import { PPTElement, Slide } from '@/types/slides'
import { ElementAlignCommand, ElementAlignCommands } from '@/types/edit' import { ElementAlignCommand, ElementAlignCommands } from '@/types/edit'
import { getElementListRange } from '@/utils/element' import { getElementListRange } from '@/utils/element'
import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas' import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList) const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)

5
src/hooks/useCombineElement.ts
View File

@ -1,12 +1,11 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { PPTElement, Slide } from '@/types/slides' import { PPTElement, Slide } from '@/types/slides'
import { createRandomCode } from '@/utils/common' import { createRandomCode } from '@/utils/common'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList) const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)

5
src/hooks/useCopyAndPasteElement.ts
View File

@ -1,6 +1,5 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { PPTElement } from '@/types/slides' import { PPTElement } from '@/types/slides'
import { copyText, readClipboard } from '@/utils/clipboard' import { copyText, readClipboard } from '@/utils/clipboard'
import { encrypt } from '@/utils/crypto' import { encrypt } from '@/utils/crypto'
@ -9,7 +8,7 @@ import usePasteTextClipboardData from '@/hooks/usePasteTextClipboardData'
import useDeleteElement from './useDeleteElement' import useDeleteElement from './useDeleteElement'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList) const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)

5
src/hooks/useCreateElement.ts
View File

@ -1,6 +1,5 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { createRandomCode } from '@/utils/common' import { createRandomCode } from '@/utils/common'
import { getImageSize } from '@/utils/image' import { getImageSize } from '@/utils/image'
import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas' import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
@ -24,7 +23,7 @@ interface LineElementPosition {
} }
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const themeColor = computed(() => store.state.theme.themeColor) const themeColor = computed(() => store.state.theme.themeColor)
const fontColor = computed(() => store.state.theme.fontColor) const fontColor = computed(() => store.state.theme.fontColor)

5
src/hooks/useDeleteElement.ts
View File

@ -1,11 +1,10 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { Slide } from '@/types/slides' import { Slide } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)

5
src/hooks/useHistorySnapshot.ts
View File

@ -1,10 +1,9 @@
import { useStore } from 'vuex'
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import throttle from 'lodash/throttle' import throttle from 'lodash/throttle'
import { State, ActionTypes } from '@/store' import { ActionTypes, useStore } from '@/store'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const addHistorySnapshot = debounce(function() { const addHistorySnapshot = debounce(function() {
store.dispatch(ActionTypes.ADD_SNAPSHOT) store.dispatch(ActionTypes.ADD_SNAPSHOT)

5
src/hooks/useLockElement.ts
View File

@ -1,11 +1,10 @@
import { useStore } from 'vuex'
import { computed } from 'vue' import { computed } from 'vue'
import { State, MutationTypes } from '@/store' import { MutationTypes, useStore } from '@/store'
import { PPTElement, Slide } from '@/types/slides' import { PPTElement, Slide } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)

5
src/hooks/useMoveElement.ts
View File

@ -1,12 +1,11 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { Slide } from '@/types/slides' import { Slide } from '@/types/slides'
import { KEYS } from '@/configs/hotkey' import { KEYS } from '@/configs/hotkey'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)

5
src/hooks/useOrderElement.ts
View File

@ -1,12 +1,11 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { PPTElement, Slide } from '@/types/slides' import { PPTElement, Slide } from '@/types/slides'
import { ElementOrderCommand, ElementOrderCommands } from '@/types/edit' import { ElementOrderCommand, ElementOrderCommands } from '@/types/edit'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)
const { addHistorySnapshot } = useHistorySnapshot() const { addHistorySnapshot } = useHistorySnapshot()

5
src/hooks/usePasteTextClipboardData.ts
View File

@ -1,6 +1,5 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { decrypt } from '@/utils/crypto' import { decrypt } from '@/utils/crypto'
import { PPTElement, Slide } from '@/types/slides' import { PPTElement, Slide } from '@/types/slides'
import { createRandomCode } from '@/utils/common' import { createRandomCode } from '@/utils/common'
@ -12,7 +11,7 @@ interface PasteTextClipboardDataOptions {
} }
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)
const { addHistorySnapshot } = useHistorySnapshot() const { addHistorySnapshot } = useHistorySnapshot()

5
src/hooks/useScaleCanvas.ts
View File

@ -1,9 +1,8 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const canvasPercentage = computed(() => store.state.canvasPercentage) const canvasPercentage = computed(() => store.state.canvasPercentage)
const scaleCanvas = (command: '+' | '-') => { const scaleCanvas = (command: '+' | '-') => {

5
src/hooks/useScreening.ts
View File

@ -1,9 +1,8 @@
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { enterFullscreen, exitFullscreen, isFullscreen } from '@/utils/fullscreen' import { enterFullscreen, exitFullscreen, isFullscreen } from '@/utils/fullscreen'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const enterScreening = () => { const enterScreening = () => {
enterFullscreen() enterFullscreen()

5
src/hooks/useSelectAllElement.ts
View File

@ -1,10 +1,9 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { Slide } from '@/types/slides' import { Slide } from '@/types/slides'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)
const selectAllElement = () => { const selectAllElement = () => {

5
src/hooks/useSlideHandler.ts
View File

@ -1,6 +1,5 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { Slide } from '@/types/slides' import { Slide } from '@/types/slides'
import { createRandomCode } from '@/utils/common' import { createRandomCode } from '@/utils/common'
import { copyText, readClipboard } from '@/utils/clipboard' import { copyText, readClipboard } from '@/utils/clipboard'
@ -11,7 +10,7 @@ import usePasteTextClipboardData from '@/hooks/usePasteTextClipboardData'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const slideIndex = computed(() => store.state.slideIndex) const slideIndex = computed(() => store.state.slideIndex)
const theme = computed(() => store.state.theme) const theme = computed(() => store.state.theme)
const slidesLength = computed(() => store.state.slides.length) const slidesLength = computed(() => store.state.slides.length)

4
src/main.ts
View File

@ -1,6 +1,6 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import store from './store' import { store, key } from './store'
import '@icon-park/vue-next/styles/index.css' import '@icon-park/vue-next/styles/index.css'
import 'prosemirror-view/style/prosemirror.css' import 'prosemirror-view/style/prosemirror.css'
@ -71,5 +71,5 @@ app.component('CheckboxButton', CheckboxButton)
app.component('CheckboxButtonGroup', CheckboxButtonGroup) app.component('CheckboxButtonGroup', CheckboxButtonGroup)
app.component('ColorPicker', ColorPicker) app.component('ColorPicker', ColorPicker)
app.use(store) app.use(store, key)
app.mount('#app') app.mount('#app')

2
src/store/actions.ts
View File

@ -1,6 +1,6 @@
import { ActionTree } from 'vuex' import { ActionTree } from 'vuex'
import { IndexableTypeArray } from 'dexie' import { IndexableTypeArray } from 'dexie'
import { State } from './index' import { State } from './state'
import { ActionTypes, MutationTypes } from './constants' import { ActionTypes, MutationTypes } from './constants'
import db, { Snapshot } from '@/utils/database' import db, { Snapshot } from '@/utils/database'

2
src/store/getters.ts
View File

@ -1,5 +1,5 @@
import { GetterTree } from 'vuex' import { GetterTree } from 'vuex'
import { State } from './index' import { State } from './state'
export const getters: GetterTree<State, State> = { export const getters: GetterTree<State, State> = {
currentSlide(state) { currentSlide(state) {

65
src/store/index.ts
View File

@ -1,71 +1,20 @@
import { createStore } from 'vuex' import { InjectionKey } from 'vue'
import { createStore, Store, useStore as baseUseStore } from 'vuex'
import { state, State } from './state'
import { getters } from './getters' import { getters } from './getters'
import { actions } from './actions' import { actions } from './actions'
import { mutations } from './mutations' import { mutations } from './mutations'
import { MutationTypes, ActionTypes } from './constants' import { MutationTypes, ActionTypes } from './constants'
import { Slide, SlideTheme } from '@/types/slides'
import { CreatingElement } from '@/types/edit'
import { ToolbarState } from '@/types/toolbar'
import { slides } from '@/mocks/index'
import { SYS_FONTS } from '@/configs/font'
export { MutationTypes, ActionTypes } export { MutationTypes, ActionTypes }
export interface State { export const key: InjectionKey<Store<State>> = Symbol()
activeElementIdList: string[];
handleElementId: string;
canvasPercentage: number;
canvasScale: number;
thumbnailsFocus: boolean;
editorAreaFocus: boolean;
disableHotkeys: boolean;
showGridLines: boolean;
creatingElement: CreatingElement | null;
availableFonts: typeof SYS_FONTS;
toolbarState: ToolbarState;
theme: SlideTheme;
slides: Slide[];
slideIndex: number;
snapshotCursor: number;
snapshotLength: number;
ctrlKeyState: boolean;
shiftKeyState: boolean;
screening: boolean;
clipingImageElementId: string;
}
const state: State = { export const store = createStore<State>({
activeElementIdList: [],
handleElementId: '',
canvasPercentage: 90,
canvasScale: 1,
thumbnailsFocus: false,
editorAreaFocus: false,
disableHotkeys: false,
showGridLines: false,
creatingElement: null,
availableFonts: [],
toolbarState: 'slideStyle',
theme: {
themeColor: '#d14424',
fontColor: '#333',
fontName: '微软雅黑',
backgroundColor: '#fff',
},
slides: slides,
slideIndex: 0,
snapshotCursor: -1,
snapshotLength: 0,
ctrlKeyState: false,
shiftKeyState: false,
screening: false,
clipingImageElementId: '',
}
export default createStore({
state, state,
getters, getters,
mutations, mutations,
actions, actions,
}) })
export const useStore = () => baseUseStore(key)

2
src/store/mutations.ts
View File

@ -1,7 +1,7 @@
import { MutationTree } from 'vuex' import { MutationTree } from 'vuex'
import omit from 'lodash/omit' import omit from 'lodash/omit'
import { MutationTypes } from './constants' import { MutationTypes } from './constants'
import { State } from './index' import { State } from './state'
import { Slide, PPTElement, SlideTheme } from '@/types/slides' import { Slide, PPTElement, SlideTheme } from '@/types/slides'
import { CreatingElement } from '@/types/edit' import { CreatingElement } from '@/types/edit'
import { SYS_FONTS } from '@/configs/font' import { SYS_FONTS } from '@/configs/font'

56
src/store/state.ts Normal file
View File

@ -0,0 +1,56 @@
import { Slide, SlideTheme } from '@/types/slides'
import { CreatingElement } from '@/types/edit'
import { ToolbarState } from '@/types/toolbar'
import { slides } from '@/mocks/index'
import { SYS_FONTS } from '@/configs/font'
export interface State {
activeElementIdList: string[];
handleElementId: string;
canvasPercentage: number;
canvasScale: number;
thumbnailsFocus: boolean;
editorAreaFocus: boolean;
disableHotkeys: boolean;
showGridLines: boolean;
creatingElement: CreatingElement | null;
availableFonts: typeof SYS_FONTS;
toolbarState: ToolbarState;
theme: SlideTheme;
slides: Slide[];
slideIndex: number;
snapshotCursor: number;
snapshotLength: number;
ctrlKeyState: boolean;
shiftKeyState: boolean;
screening: boolean;
clipingImageElementId: string;
}
export const state: State = {
activeElementIdList: [],
handleElementId: '',
canvasPercentage: 90,
canvasScale: 1,
thumbnailsFocus: false,
editorAreaFocus: false,
disableHotkeys: false,
showGridLines: false,
creatingElement: null,
availableFonts: [],
toolbarState: 'slideStyle',
theme: {
themeColor: '#d14424',
fontColor: '#333',
fontName: '微软雅黑',
backgroundColor: '#fff',
},
slides: slides,
slideIndex: 0,
snapshotCursor: -1,
snapshotLength: 0,
ctrlKeyState: false,
shiftKeyState: false,
screening: false,
clipingImageElementId: '',
}

2
src/utils/crypto.ts
View File

@ -1,6 +1,6 @@
import CryptoJS from 'crypto-js' import CryptoJS from 'crypto-js'
const CRYPTO_KEY = 'zxc_ppt_online_editor' const CRYPTO_KEY = 'pptist'
// 加密函数 // 加密函数
export const encrypt = (msg: string) => { export const encrypt = (msg: string) => {

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

@ -6,8 +6,7 @@
<script lang="ts"> <script lang="ts">
import { computed, PropType, defineComponent } from 'vue' import { computed, PropType, defineComponent } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { AlignmentLineAxis } from '@/types/edit' import { AlignmentLineAxis } from '@/types/edit'
export default defineComponent({ export default defineComponent({
@ -27,7 +26,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const left = computed(() => props.axis.x * canvasScale.value + 'px') const left = computed(() => props.axis.x * canvasScale.value + 'px')

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

@ -20,8 +20,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { ElementTypes, PPTElement } from '@/types/slides' import { ElementTypes, PPTElement } from '@/types/slides'
import { ContextmenuItem } from '@/components/Contextmenu/types' import { ContextmenuItem } from '@/components/Contextmenu/types'
@ -62,7 +61,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const theme = computed(() => store.state.theme) const theme = computed(() => store.state.theme)
const currentElementComponent = computed(() => { const currentElementComponent = computed(() => {

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

@ -29,13 +29,12 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref } from 'vue' import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
export default defineComponent({ export default defineComponent({
name: 'element-create-selection', name: 'element-create-selection',
setup(props, { emit }) { setup(props, { emit }) {
const store = useStore<State>() const store = useStore()
const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive) const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
const creatingElement = computed(() => store.state.creatingElement) const creatingElement = computed(() => store.state.creatingElement)

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

@ -16,16 +16,15 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, computed } from 'vue' import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import tinycolor from 'tinycolor2' import tinycolor from 'tinycolor2'
import { State } from '@/store' import { useStore } from '@/store'
import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas' import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
import { SlideBackground } from '@/types/slides' import { SlideBackground } from '@/types/slides'
export default defineComponent({ export default defineComponent({
name: 'grid-lines', name: 'grid-lines',
setup() { setup() {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide.background) const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide.background)

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

@ -22,8 +22,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { PPTShapeElement } from '@/types/slides' import { PPTShapeElement } from '@/types/slides'
import { OperateResizeHandler } from '@/types/edit' import { OperateResizeHandler } from '@/types/edit'
@ -58,7 +57,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value) const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)

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

@ -27,8 +27,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { PPTImageElement } from '@/types/slides' import { PPTImageElement } from '@/types/slides'
import { OperateResizeHandler } from '@/types/edit' import { OperateResizeHandler } from '@/types/edit'
import useCommonOperate from '../hooks/useCommonOperate' import useCommonOperate from '../hooks/useCommonOperate'
@ -68,7 +67,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const clipingImageElementId = computed(() => store.state.clipingImageElementId) const clipingImageElementId = computed(() => store.state.clipingImageElementId)
const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id) const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)

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

@ -15,8 +15,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { PPTLineElement } from '@/types/slides' import { PPTLineElement } from '@/types/slides'
import { OperateLineHandler, OperateLineHandlers } from '@/types/edit' import { OperateLineHandler, OperateLineHandlers } from '@/types/edit'
@ -48,7 +47,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const resizeHandlers = computed(() => { const resizeHandlers = computed(() => {

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

@ -22,8 +22,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, reactive, PropType, watchEffect, toRefs } from 'vue' import { computed, defineComponent, reactive, PropType, watchEffect, toRefs } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { PPTElement, ElementTypes } from '@/types/slides' import { PPTElement, ElementTypes } from '@/types/slides'
import { getElementListRange } from '@/utils/element' import { getElementListRange } from '@/utils/element'
import { OperateResizeHandler, MultiSelectRange } from '@/types/edit' import { OperateResizeHandler, MultiSelectRange } from '@/types/edit'
@ -49,7 +48,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const localActiveElementList = computed(() => props.elementList.filter(el => activeElementIdList.value.includes(el.id))) const localActiveElementList = computed(() => props.elementList.filter(el => activeElementIdList.value.includes(el.id)))

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

@ -27,8 +27,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { PPTShapeElement } from '@/types/slides' import { PPTShapeElement } from '@/types/slides'
import { OperateResizeHandler } from '@/types/edit' import { OperateResizeHandler } from '@/types/edit'
@ -69,7 +68,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value) const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)

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

@ -22,8 +22,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { PPTTableElement } from '@/types/slides' import { PPTTableElement } from '@/types/slides'
import { OperateResizeHandler } from '@/types/edit' import { OperateResizeHandler } from '@/types/edit'
@ -58,7 +57,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const outlineWidth = computed(() => props.elementInfo.outline.width || 1) const outlineWidth = computed(() => props.elementInfo.outline.width || 1)

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

@ -27,8 +27,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { PPTTextElement } from '@/types/slides' import { PPTTextElement } from '@/types/slides'
import { OperateResizeHandler } from '@/types/edit' import { OperateResizeHandler } from '@/types/edit'
@ -69,7 +68,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value) const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)

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

@ -31,8 +31,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType, computed } from 'vue' import { defineComponent, PropType, computed } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { ElementTypes, PPTElement, Slide } from '@/types/slides' import { ElementTypes, PPTElement, Slide } from '@/types/slides'
import { OperateLineHandler, OperateResizeHandler } from '@/types/edit' import { OperateLineHandler, OperateResizeHandler } from '@/types/edit'
@ -80,7 +79,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const toolbarState = computed(() => store.state.toolbarState) const toolbarState = computed(() => store.state.toolbarState)
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)

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

@ -9,8 +9,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from 'vue' import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { SlideBackground } from '@/types/slides' import { SlideBackground } from '@/types/slides'
import GridLines from './GridLines.vue' import GridLines from './GridLines.vue'
import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle' import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
@ -21,7 +20,7 @@ export default defineComponent({
GridLines, GridLines,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const showGridLines = computed(() => store.state.showGridLines) const showGridLines = computed(() => store.state.showGridLines)
const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide.background) const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide.background)

5
src/views/Editor/Canvas/hooks/useDragElement.ts
View File

@ -1,6 +1,5 @@
import { Ref, computed } from 'vue' import { Ref, computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { ElementTypes, PPTElement } from '@/types/slides' import { ElementTypes, PPTElement } from '@/types/slides'
import { AlignmentLineProps } from '@/types/edit' import { AlignmentLineProps } from '@/types/edit'
import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas' import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
@ -12,7 +11,7 @@ export default (
activeGroupElementId: Ref<string>, activeGroupElementId: Ref<string>,
alignmentLines: Ref<AlignmentLineProps[]>, alignmentLines: Ref<AlignmentLineProps[]>,
) => { ) => {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)

5
src/views/Editor/Canvas/hooks/useDragLineElement.ts
View File

@ -1,6 +1,5 @@
import { Ref, computed } from 'vue' import { Ref, computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { PPTElement, PPTLineElement } from '@/types/slides' import { PPTElement, PPTLineElement } from '@/types/slides'
import { OperateLineHandler, OperateLineHandlers } from '@/types/edit' import { OperateLineHandler, OperateLineHandlers } from '@/types/edit'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@ -11,7 +10,7 @@ interface AdsorptionPoint {
} }
export default (elementList: Ref<PPTElement[]>) => { export default (elementList: Ref<PPTElement[]>) => {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const { addHistorySnapshot } = useHistorySnapshot() const { addHistorySnapshot } = useHistorySnapshot()

5
src/views/Editor/Canvas/hooks/useDropImageOrText.ts
View File

@ -1,11 +1,10 @@
import { computed, onMounted, onUnmounted, Ref } from 'vue' import { computed, onMounted, onUnmounted, Ref } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { getImageDataURL } from '@/utils/image' import { getImageDataURL } from '@/utils/image'
import useCreateElement from '@/hooks/useCreateElement' import useCreateElement from '@/hooks/useCreateElement'
export default (elementRef: Ref<HTMLElement | undefined>) => { export default (elementRef: Ref<HTMLElement | undefined>) => {
const store = useStore<State>() const store = useStore()
const disableHotkeys = computed(() => store.state.disableHotkeys) const disableHotkeys = computed(() => store.state.disableHotkeys)
const { createImageElement } = useCreateElement() const { createImageElement } = useCreateElement()

5
src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts
View File

@ -1,11 +1,10 @@
import { computed, Ref } from 'vue' import { computed, Ref } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { CreateElementSelectionData, CreatingLineElement, CreatingShapeElement } from '@/types/edit' import { CreateElementSelectionData, CreatingLineElement, CreatingShapeElement } from '@/types/edit'
import useCreateElement from '@/hooks/useCreateElement' import useCreateElement from '@/hooks/useCreateElement'
export default (viewportRef: Ref<HTMLElement | undefined>) => { export default (viewportRef: Ref<HTMLElement | undefined>) => {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const creatingElement = computed(() => store.state.creatingElement) const creatingElement = computed(() => store.state.creatingElement)

5
src/views/Editor/Canvas/hooks/useMouseSelection.ts
View File

@ -1,11 +1,10 @@
import { Ref, reactive, computed } from 'vue' import { Ref, reactive, computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { PPTElement } from '@/types/slides' import { PPTElement } from '@/types/slides'
import { getElementRange } from '@/utils/element' import { getElementRange } from '@/utils/element'
export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | undefined>) => { export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | undefined>) => {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const mouseSelectionState = reactive({ const mouseSelectionState = reactive({

5
src/views/Editor/Canvas/hooks/useRotateElement.ts
View File

@ -1,6 +1,5 @@
import { Ref, computed } from 'vue' import { Ref, computed } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { PPTElement, PPTTextElement, PPTImageElement, PPTShapeElement } from '@/types/slides' import { PPTElement, PPTTextElement, PPTImageElement, PPTShapeElement } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@ -14,7 +13,7 @@ const getAngleFromCoordinate = (x: number, y: number) => {
} }
export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | undefined>) => { export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | undefined>) => {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const { addHistorySnapshot } = useHistorySnapshot() const { addHistorySnapshot } = useHistorySnapshot()

5
src/views/Editor/Canvas/hooks/useScaleElement.ts
View File

@ -1,6 +1,5 @@
import { computed, Ref } from 'vue' import { computed, Ref } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { ElementTypes, PPTElement, PPTImageElement, PPTLineElement, PPTShapeElement } from '@/types/slides' import { ElementTypes, PPTElement, PPTImageElement, PPTLineElement, PPTShapeElement } from '@/types/slides'
import { OperateResizeHandlers, AlignmentLineProps, MultiSelectRange } from '@/types/edit' import { OperateResizeHandlers, AlignmentLineProps, MultiSelectRange } from '@/types/edit'
import emitter, { EmitterEvents } from '@/utils/emitter' import emitter, { EmitterEvents } from '@/utils/emitter'
@ -89,7 +88,7 @@ export default (
activeGroupElementId: Ref<string>, activeGroupElementId: Ref<string>,
alignmentLines: Ref<AlignmentLineProps[]>, alignmentLines: Ref<AlignmentLineProps[]>,
) => { ) => {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive) const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)

5
src/views/Editor/Canvas/hooks/useSelectElement.ts
View File

@ -1,7 +1,6 @@
import { Ref, computed } from 'vue' import { Ref, computed } from 'vue'
import { useStore } from 'vuex'
import uniq from 'lodash/uniq' import uniq from 'lodash/uniq'
import { State, MutationTypes } from '@/store' import { MutationTypes, useStore } from '@/store'
import { PPTElement } from '@/types/slides' import { PPTElement } from '@/types/slides'
export default ( export default (
@ -9,7 +8,7 @@ export default (
activeGroupElementId: Ref<string>, activeGroupElementId: Ref<string>,
moveElement: (e: MouseEvent, element: PPTElement) => void, moveElement: (e: MouseEvent, element: PPTElement) => void,
) => { ) => {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const handleElementId = computed(() => store.state.handleElementId) const handleElementId = computed(() => store.state.handleElementId)
const editorAreaFocus = computed(() => store.state.editorAreaFocus) const editorAreaFocus = computed(() => store.state.editorAreaFocus)

5
src/views/Editor/Canvas/hooks/useViewportSize.ts
View File

@ -1,13 +1,12 @@
import { ref, computed, onMounted, onUnmounted, Ref, watch } from 'vue' import { ref, computed, onMounted, onUnmounted, Ref, watch } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas' import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
export default (canvasRef: Ref<HTMLElement | undefined>) => { export default (canvasRef: Ref<HTMLElement | undefined>) => {
const viewportLeft = ref(0) const viewportLeft = ref(0)
const viewportTop = ref(0) const viewportTop = ref(0)
const store = useStore<State>() const store = useStore()
const canvasPercentage = computed(() => store.state.canvasPercentage) const canvasPercentage = computed(() => store.state.canvasPercentage)
const setViewportSize = () => { const setViewportSize = () => {

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

@ -76,9 +76,8 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, provide, ref, watch, watchEffect } from 'vue' import { computed, defineComponent, provide, ref, watch, watchEffect } from 'vue'
import { useStore } from 'vuex'
import throttle from 'lodash/throttle' import throttle from 'lodash/throttle'
import { State, MutationTypes } from '@/store' import { MutationTypes, useStore } from '@/store'
import { ContextmenuItem } from '@/components/Contextmenu/types' import { ContextmenuItem } from '@/components/Contextmenu/types'
import { PPTElement, Slide } from '@/types/slides' import { PPTElement, Slide } from '@/types/slides'
import { AlignmentLineProps } from '@/types/edit' import { AlignmentLineProps } from '@/types/edit'
@ -119,7 +118,7 @@ export default defineComponent({
Operate, Operate,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const handleElementId = computed(() => store.state.handleElementId) const handleElementId = computed(() => store.state.handleElementId)

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

@ -68,8 +68,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, computed, ref } from 'vue' import { defineComponent, computed, ref } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { getImageDataURL } from '@/utils/image' import { getImageDataURL } from '@/utils/image'
import { ShapePoolItem } from '@/configs/shapes' import { ShapePoolItem } from '@/configs/shapes'
import { LinePoolItem } from '@/configs/lines' import { LinePoolItem } from '@/configs/lines'
@ -91,7 +90,7 @@ export default defineComponent({
TableGenerator, TableGenerator,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const canUndo = computed(() => store.getters.canUndo) const canUndo = computed(() => store.getters.canUndo)
const canRedo = computed(() => store.getters.canRedo) const canRedo = computed(() => store.getters.canRedo)

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

@ -58,8 +58,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from 'vue' import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import useScreening from '@/hooks/useScreening' import useScreening from '@/hooks/useScreening'
import useSlideHandler from '@/hooks/useSlideHandler' import useSlideHandler from '@/hooks/useSlideHandler'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@ -67,7 +66,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default defineComponent({ export default defineComponent({
name: 'editor-header', name: 'editor-header',
setup() { setup() {
const store = useStore<State>() const store = useStore()
const { enterScreening, enterScreeningFromStart } = useScreening() const { enterScreening, enterScreeningFromStart } = useScreening()
const { createSlide, deleteSlide } = useSlideHandler() const { createSlide, deleteSlide } = useSlideHandler()

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

@ -33,8 +33,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from 'vue' import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { fillDigit } from '@/utils/common' import { fillDigit } from '@/utils/common'
import { ContextmenuItem } from '@/components/Contextmenu/types' import { ContextmenuItem } from '@/components/Contextmenu/types'
import useSlideHandler from '@/hooks/useSlideHandler' import useSlideHandler from '@/hooks/useSlideHandler'
@ -49,7 +48,7 @@ export default defineComponent({
ThumbnailSlide, ThumbnailSlide,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const slides = computed(() => store.state.slides) const slides = computed(() => store.state.slides)
const slideIndex = computed(() => store.state.slideIndex) const slideIndex = computed(() => store.state.slideIndex)

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

@ -68,8 +68,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref } from 'vue' import { computed, defineComponent, ref } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTAnimation, PPTElement, Slide } from '@/types/slides' import { PPTAnimation, PPTElement, Slide } from '@/types/slides'
import { ANIMATIONS } from '@/configs/animation' import { ANIMATIONS } from '@/configs/animation'
import { ELEMENT_TYPE } from '@/configs/element' import { ELEMENT_TYPE } from '@/configs/element'
@ -90,7 +89,7 @@ export default defineComponent({
Draggable, Draggable,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTElement>(() => store.getters.handleElement) const handleElement = computed<PPTElement>(() => store.getters.handleElement)
const currentSlideAnimations = computed<PPTAnimation[] | null>(() => store.getters.currentSlideAnimations) const currentSlideAnimations = computed<PPTAnimation[] | null>(() => store.getters.currentSlideAnimations)
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)

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

@ -134,9 +134,8 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue' import { computed, defineComponent, ref, watch } from 'vue'
import { useStore } from 'vuex'
import round from 'lodash/round' import round from 'lodash/round'
import { MutationTypes, State } from '@/store' import { MutationTypes, useStore } from '@/store'
import { PPTElement } from '@/types/slides' import { PPTElement } from '@/types/slides'
import { MIN_SIZE } from '@/configs/element' import { MIN_SIZE } from '@/configs/element'
import useOrderElement from '@/hooks/useOrderElement' import useOrderElement from '@/hooks/useOrderElement'
@ -146,7 +145,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default defineComponent({ export default defineComponent({
name: 'element-positopn-panel', name: 'element-positopn-panel',
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTElement>(() => store.getters.handleElement) const handleElement = computed<PPTElement>(() => store.getters.handleElement)
const left = ref(0) const left = ref(0)

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

@ -101,8 +101,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue' import { computed, defineComponent, ref, watch } from 'vue'
import { IBarChartOptions, ILineChartOptions, IPieChartOptions } from 'chartist' import { IBarChartOptions, ILineChartOptions, IPieChartOptions } from 'chartist'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { ChartData, PPTChartElement } from '@/types/slides' import { ChartData, PPTChartElement } from '@/types/slides'
import { CHART_THEME_COLORS } from '@/configs/chartTheme' import { CHART_THEME_COLORS } from '@/configs/chartTheme'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@ -119,7 +118,7 @@ export default defineComponent({
ColorButton, ColorButton,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTChartElement>(() => store.getters.handleElement) const handleElement = computed<PPTChartElement>(() => store.getters.handleElement)
const chartDataEditorVisible = ref(false) const chartDataEditorVisible = ref(false)

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

@ -93,8 +93,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue' import { computed, defineComponent, ref, watch } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTImageElement } from '@/types/slides' import { PPTImageElement } from '@/types/slides'
import { CLIPPATHS } from '@/configs/imageClip' import { CLIPPATHS } from '@/configs/imageClip'
import { getImageDataURL } from '@/utils/image' import { getImageDataURL } from '@/utils/image'
@ -164,7 +163,7 @@ export default defineComponent({
ElementShadow, ElementShadow,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTImageElement>(() => store.getters.handleElement) const handleElement = computed<PPTImageElement>(() => store.getters.handleElement)
const clipPanelVisible = ref(false) const clipPanelVisible = ref(false)

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

@ -64,8 +64,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from 'vue' import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTLineElement } from '@/types/slides' import { PPTLineElement } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@ -79,7 +78,7 @@ export default defineComponent({
ColorButton, ColorButton,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTLineElement>(() => store.getters.handleElement) const handleElement = computed<PPTLineElement>(() => store.getters.handleElement)
const { addHistorySnapshot } = useHistorySnapshot() const { addHistorySnapshot } = useHistorySnapshot()

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

@ -79,8 +79,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue' import { computed, defineComponent, ref, watch } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTShapeElement, ShapeGradient } from '@/types/slides' import { PPTShapeElement, ShapeGradient } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@ -98,7 +97,7 @@ export default defineComponent({
ColorButton, ColorButton,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTShapeElement>(() => store.getters.handleElement) const handleElement = computed<PPTShapeElement>(() => store.getters.handleElement)
const fill = ref<string>() const fill = ref<string>()

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

@ -186,8 +186,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onUnmounted, ref, watch } from 'vue' import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTTableElement, TableCell, TableCellStyle, TableTheme } from '@/types/slides' import { PPTTableElement, TableCell, TableCellStyle, TableTheme } from '@/types/slides'
import emitter, { EmitterEvents } from '@/utils/emitter' import emitter, { EmitterEvents } from '@/utils/emitter'
import { createRandomCode } from '@/utils/common' import { createRandomCode } from '@/utils/common'
@ -205,7 +204,7 @@ export default defineComponent({
ColorButton, ColorButton,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTTableElement>(() => store.getters.handleElement) const handleElement = computed<PPTTableElement>(() => store.getters.handleElement)
const textAttrs = ref({ const textAttrs = ref({

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

@ -219,8 +219,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onUnmounted, ref, watch } from 'vue' import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTTextElement } from '@/types/slides' import { PPTTextElement } from '@/types/slides'
import emitter, { EmitterEvents } from '@/utils/emitter' import emitter, { EmitterEvents } from '@/utils/emitter'
import { TextAttrs } from '@/prosemirror/utils' import { TextAttrs } from '@/prosemirror/utils'
@ -319,7 +318,7 @@ export default defineComponent({
ElementShadow, ElementShadow,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTTextElement>(() => store.getters.handleElement) const handleElement = computed<PPTTextElement>(() => store.getters.handleElement)
const fill = ref<string>() const fill = ref<string>()

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

@ -9,8 +9,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from 'vue' import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { ElementTypes, PPTElement } from '@/types/slides' import { ElementTypes, PPTElement } from '@/types/slides'
import TextStylePanel from './TextStylePanel.vue' import TextStylePanel from './TextStylePanel.vue'
@ -23,7 +22,7 @@ import TableStylePanel from './TableStylePanel.vue'
export default defineComponent({ export default defineComponent({
name: 'element-style-panel', name: 'element-style-panel',
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTElement>(() => store.getters.handleElement) const handleElement = computed<PPTElement>(() => store.getters.handleElement)
const currentPanelComponent = computed(() => { const currentPanelComponent = computed(() => {

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

@ -34,8 +34,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from 'vue' import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTElement, Slide } from '@/types/slides' import { PPTElement, Slide } from '@/types/slides'
import { ElementAlignCommand, ElementAlignCommands } from '@/types/edit' import { ElementAlignCommand, ElementAlignCommands } from '@/types/edit'
import { getElementListRange } from '@/utils/element' import { getElementListRange } from '@/utils/element'
@ -45,7 +44,7 @@ import useCombineElement from '@/hooks/useCombineElement'
export default defineComponent({ export default defineComponent({
name: 'multi-position-panel', name: 'multi-position-panel',
setup() { setup() {
const store = useStore<State>() const store = useStore()
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList) const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)

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

@ -18,15 +18,14 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from 'vue' import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { Slide } from '@/types/slides' import { Slide } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default defineComponent({ export default defineComponent({
name: 'slide-animation-panel', name: 'slide-animation-panel',
setup() { setup() {
const store = useStore<State>() const store = useStore()
const slides = computed(() => store.state.slides) const slides = computed(() => store.state.slides)
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)

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

@ -174,8 +174,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from 'vue' import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { Slide, SlideBackground, SlideTheme } from '@/types/slides' import { Slide, SlideBackground, SlideTheme } from '@/types/slides'
import { PRESET_THEMES } from '@/configs/theme' import { PRESET_THEMES } from '@/configs/theme'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@ -191,7 +190,7 @@ export default defineComponent({
ColorButton, ColorButton,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const slides = computed(() => store.state.slides) const slides = computed(() => store.state.slides)
const theme = computed(() => store.state.theme) const theme = computed(() => store.state.theme)
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)

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

@ -16,15 +16,14 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue' import { computed, defineComponent, ref, watch } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTElement } from '@/types/slides' import { PPTElement } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
export default defineComponent({ export default defineComponent({
name: 'element-opacity', name: 'element-opacity',
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTElement>(() => store.getters.handleElement) const handleElement = computed<PPTElement>(() => store.getters.handleElement)
const opacity = ref<number>() const opacity = ref<number>()

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

@ -47,8 +47,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue' import { computed, defineComponent, ref, watch } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTElement, PPTElementOutline } from '@/types/slides' import { PPTElement, PPTElementOutline } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@ -66,7 +65,7 @@ export default defineComponent({
}, },
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTElement>(() => store.getters.handleElement) const handleElement = computed<PPTElement>(() => store.getters.handleElement)
const outline = ref<PPTElementOutline>() const outline = ref<PPTElementOutline>()

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

@ -58,8 +58,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue' import { computed, defineComponent, ref, watch } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTElement, PPTElementShadow } from '@/types/slides' import { PPTElement, PPTElementShadow } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@ -71,7 +70,7 @@ export default defineComponent({
ColorButton, ColorButton,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const handleElement = computed<PPTElement>(() => store.getters.handleElement) const handleElement = computed<PPTElement>(() => store.getters.handleElement)
const shadow = ref<PPTElementShadow>() const shadow = ref<PPTElementShadow>()

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

@ -17,8 +17,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, watch } from 'vue' import { computed, defineComponent, watch } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { ToolbarState, ToolbarStates } from '@/types/toolbar' import { ToolbarState, ToolbarStates } from '@/types/toolbar'
import ElementStylePanel from './ElementStylePanel/index.vue' import ElementStylePanel from './ElementStylePanel/index.vue'
@ -31,7 +30,7 @@ import MultiPositionPanel from './MultiPositionPanel.vue'
export default defineComponent({ export default defineComponent({
name: 'toolbar', name: 'toolbar',
setup() { setup() {
const store = useStore<State>() const store = useStore()
const toolbarState = computed(() => store.state.toolbarState) const toolbarState = computed(() => store.state.toolbarState)
const elementTabs = [ const elementTabs = [

5
src/views/Editor/useHotkey.ts
View File

@ -1,6 +1,5 @@
import { computed, onMounted, onUnmounted } from 'vue' import { computed, onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { State, MutationTypes } from '@/store'
import { KEYS } from '@/configs/hotkey' import { KEYS } from '@/configs/hotkey'
import useSlideHandler from '@/hooks/useSlideHandler' import useSlideHandler from '@/hooks/useSlideHandler'
@ -14,7 +13,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import useScreening from '@/hooks/useScreening' import useScreening from '@/hooks/useScreening'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const ctrlKeyActive = computed(() => store.state.ctrlKeyState) const ctrlKeyActive = computed(() => store.state.ctrlKeyState)
const shiftKeyActive = computed(() => store.state.shiftKeyState) const shiftKeyActive = computed(() => store.state.shiftKeyState)

5
src/views/Editor/usePasteEvent.ts
View File

@ -1,12 +1,11 @@
import { computed, onMounted, onUnmounted } from 'vue' import { computed, onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { getImageDataURL } from '@/utils/image' import { getImageDataURL } from '@/utils/image'
import usePasteTextClipboardData from '@/hooks/usePasteTextClipboardData' import usePasteTextClipboardData from '@/hooks/usePasteTextClipboardData'
import useCreateElement from '@/hooks/useCreateElement' import useCreateElement from '@/hooks/useCreateElement'
export default () => { export default () => {
const store = useStore<State>() const store = useStore()
const editorAreaFocus = computed(() => store.state.editorAreaFocus) const editorAreaFocus = computed(() => store.state.editorAreaFocus)
const thumbnailsFocus = computed(() => store.state.thumbnailsFocus) const thumbnailsFocus = computed(() => store.state.thumbnailsFocus)
const disableHotkeys = computed(() => store.state.disableHotkeys) const disableHotkeys = computed(() => store.state.disableHotkeys)

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

@ -17,8 +17,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { ElementTypes, PPTElement, Slide } from '@/types/slides' import { ElementTypes, PPTElement, Slide } from '@/types/slides'
import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue' import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue'
@ -57,7 +56,7 @@ export default defineComponent({
return elementTypeMap[props.elementInfo.type] || null return elementTypeMap[props.elementInfo.type] || null
}) })
const store = useStore<State>() const store = useStore()
const theme = computed(() => store.state.theme) const theme = computed(() => store.state.theme)
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)

5
src/views/Screen/SlideThumbnails.vue
View File

@ -14,8 +14,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue' import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
@ -30,7 +29,7 @@ export default defineComponent({
}, },
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const slides = computed(() => store.state.slides) const slides = computed(() => store.state.slides)
const slideIndex = computed(() => store.state.slideIndex) const slideIndex = computed(() => store.state.slideIndex)

5
src/views/Screen/index.vue
View File

@ -61,9 +61,8 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, provide, ref } from 'vue' import { computed, defineComponent, onMounted, onUnmounted, provide, ref } from 'vue'
import { useStore } from 'vuex'
import throttle from 'lodash/throttle' import throttle from 'lodash/throttle'
import { MutationTypes, State } from '@/store' import { MutationTypes, useStore } from '@/store'
import { Slide } from '@/types/slides' import { Slide } from '@/types/slides'
import { VIEWPORT_ASPECT_RATIO, VIEWPORT_SIZE } from '@/configs/canvas' import { VIEWPORT_ASPECT_RATIO, VIEWPORT_SIZE } from '@/configs/canvas'
import { KEYS } from '@/configs/hotkey' import { KEYS } from '@/configs/hotkey'
@ -83,7 +82,7 @@ export default defineComponent({
WritingBoardTool, WritingBoardTool,
}, },
setup() { setup() {
const store = useStore<State>() const store = useStore()
const slides = computed(() => store.state.slides) const slides = computed(() => store.state.slides)
const slideIndex = computed(() => store.state.slideIndex) const slideIndex = computed(() => store.state.slideIndex)
const currentSlide = computed<Slide>(() => store.getters.currentSlide) const currentSlide = computed<Slide>(() => store.getters.currentSlide)

5
src/views/components/ThumbnailSlide/ThumbnailElement.vue
View File

@ -17,8 +17,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { ElementTypes, PPTElement } from '@/types/slides' import { ElementTypes, PPTElement } from '@/types/slides'
import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue' import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue'
@ -41,7 +40,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const theme = computed(() => store.state.theme) const theme = computed(() => store.state.theme)
const currentElementComponent = computed(() => { const currentElementComponent = computed(() => {

5
src/views/components/element/ImageElement/ImageClipHandler.vue
View File

@ -53,8 +53,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive, ref } from 'vue' import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive, ref } from 'vue'
import { useStore } from 'vuex' import { useStore } from '@/store'
import { State } from '@/store'
import { KEYS } from '@/configs/hotkey' import { KEYS } from '@/configs/hotkey'
import { ImageClipData, ImageClipDataRange, ImageClipedEmitData } from '@/types/edit' import { ImageClipData, ImageClipDataRange, ImageClipedEmitData } from '@/types/edit'
@ -92,7 +91,7 @@ export default defineComponent({
}, },
}, },
setup(props, { emit }) { setup(props, { emit }) {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const topImgWrapperPosition = reactive({ const topImgWrapperPosition = reactive({

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

@ -72,8 +72,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTImageElement } from '@/types/slides' import { PPTImageElement } from '@/types/slides'
import { ContextmenuItem } from '@/components/Contextmenu/types' import { ContextmenuItem } from '@/components/Contextmenu/types'
import { CLIPPATHS, ClipPathTypes } from '@/configs/imageClip' import { CLIPPATHS, ClipPathTypes } from '@/configs/imageClip'
@ -107,7 +106,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const clipingImageElementId = computed(() => store.state.clipingImageElementId) const clipingImageElementId = computed(() => store.state.clipingImageElementId)
const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id) const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)

5
src/views/components/element/TableElement/EditableTable.vue
View File

@ -72,14 +72,13 @@
import { computed, defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue' import { computed, defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import tinycolor from 'tinycolor2' import tinycolor from 'tinycolor2'
import { useStore } from '@/store'
import { PPTElementOutline, TableCell, TableCellStyle, TableTheme } from '@/types/slides' import { PPTElementOutline, TableCell, TableCellStyle, TableTheme } from '@/types/slides'
import { ContextmenuItem } from '@/components/Contextmenu/types' import { ContextmenuItem } from '@/components/Contextmenu/types'
import { KEYS } from '@/configs/hotkey' import { KEYS } from '@/configs/hotkey'
import { createRandomCode } from '@/utils/common' import { createRandomCode } from '@/utils/common'
import CustomTextarea from './CustomTextarea.vue' import CustomTextarea from './CustomTextarea.vue'
import { useStore } from 'vuex'
import { State } from '@/store'
export default defineComponent({ export default defineComponent({
name: 'editable-table', name: 'editable-table',
@ -112,7 +111,7 @@ export default defineComponent({
}, },
}, },
setup(props, { emit }) { setup(props, { emit }) {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const subThemeColor = ref(['', '']) const subThemeColor = ref(['', ''])

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

@ -41,8 +41,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue' import { computed, defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { PPTTableElement, TableCell } from '@/types/slides' import { PPTTableElement, TableCell } from '@/types/slides'
import emitter, { EmitterEvents } from '@/utils/emitter' import emitter, { EmitterEvents } from '@/utils/emitter'
import { ContextmenuItem } from '@/components/Contextmenu/types' import { ContextmenuItem } from '@/components/Contextmenu/types'
@ -69,7 +68,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)
const { addHistorySnapshot } = useHistorySnapshot() const { addHistorySnapshot } = useHistorySnapshot()

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

@ -39,8 +39,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue' import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import { useStore } from 'vuex' import { MutationTypes, useStore } from '@/store'
import { MutationTypes, State } from '@/store'
import { EditorView } from 'prosemirror-view' import { EditorView } from 'prosemirror-view'
import { toggleMark, wrapIn, selectAll } from 'prosemirror-commands' import { toggleMark, wrapIn, selectAll } from 'prosemirror-commands'
import { PPTTextElement } from '@/types/slides' import { PPTTextElement } from '@/types/slides'
@ -79,7 +78,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore<State>() const store = useStore()
const { addHistorySnapshot } = useHistorySnapshot() const { addHistorySnapshot } = useHistorySnapshot()
const elementRef = ref<HTMLElement>() const elementRef = ref<HTMLElement>()