github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

rebuilt: history store to pinia

Browse Source
This commit is contained in:
IchliebedichZhu 2024-03-28 13:08:39 +00:00
parent e367de089a
commit e90935d37c
25 changed files with 479 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/methods/addMouseWheel.ts
View File

@ -5,6 +5,7 @@
* @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-02 11:50:00
*/
import { useControlStore } from '@/pinia'
import store from '@/store'
type TAddEventCb = (e: Event) => void
@ -14,6 +15,7 @@ type TAddEventObj = {
export default function(el: HTMLElement | string, cb: Function, altLimit: boolean = true) {
const box = typeof el === 'string' ? document.getElementById(el) : el
const controlStore = useControlStore()
if (!box) return;
addEvent(box, 'mousewheel', (e: any) => {
const ev = e || window.event
@ -23,7 +25,7 @@ export default function(el: HTMLElement | string, cb: Function, altLimit: boolea
// } else {
// console.log('鼠标滚轮向上++++++++++')
// }
if ((altLimit && store.getters.dAltDown) || !altLimit) {
if ((altLimit && controlStore.dAltDown) || !altLimit) {
ev.preventDefault()
cb(down)
}

4
src/components/business/moveable/Moveable.vue
View File

@ -27,7 +27,7 @@ const {
} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'dWidgets', 'updateRect', 'updateSelect'])
const controlStore = useControlStore()
const { guidelines } = storeToRefs(useCanvasStore())
const { showMoveable, showRotatable } = storeToRefs(controlStore)
const { showMoveable, showRotatable, dAltDown } = storeToRefs(controlStore)
let _target: string | null = null
@ -153,7 +153,7 @@ watch(
() => dSelectWidgets.value,
(items) => {
if (!moveable) return
const alt = store.getters.dAltDown
const alt = dAltDown.value
// if (items.length > 1) {
// console.log('打开组合面板')
// }

8
src/components/business/right-click-menu/RcMenu.vue
View File

@ -19,6 +19,8 @@ import {
} from './rcMenuData'
import { getTarget } from '@/common/methods/target'
import { useSetupMapGetters } from '@/common/hooks/mapGetters';
import { storeToRefs } from 'pinia';
import { useControlStore } from '@/pinia';
const store = useStore()
const menuListData = ref<TMenuItemData>({...menu})
@ -26,7 +28,9 @@ const showMenuBg = ref<boolean>(false)
const widgetMenu = ref<TWidgetItemData[]>({...widget})
const pageMenu = ref<TWidgetItemData[]>({...page})
const {dActiveElement, dAltDown, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dAltDown', 'dWidgets', 'dCopyElement'])
const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
const { dAltDown } = storeToRefs(useControlStore())
const styleObj = computed(() => {
return {
@ -52,7 +56,7 @@ async function mouseRightClick(e: MouseEvent) {
if (type) {
let uuid = target.getAttribute('data-uuid') // 设置选中元素
if (uuid !== '-1' && !dAltDown) {
if (uuid !== '-1' && !dAltDown.value) {
let widget = dWidgets.value.find((item: any) => item.uuid === uuid)
if (
widget.parent !== '-1' &&

6
src/components/modules/layout/designBoard/index.vue
View File

@ -94,12 +94,12 @@ const controlStore = useControlStore()
const { pageDesignCanvasId } = defineProps<TProps>()
const {
dWidgets,
dActiveElement, dSelectWidgets, dAltDown,
dActiveElement, dSelectWidgets,
dHoverUuid
} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown'])
} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets'])
const { dPage } = storeToRefs(usePageStore())
const { dZoom, dPaddingTop, dScreen } = storeToRefs(useCanvasStore())
const { dDraging, showRotatable } = storeToRefs(useControlStore())
const { dDraging, showRotatable, dAltDown } = storeToRefs(useControlStore())
let _dropIn: string | null = ''

6
src/components/modules/panel/wrap/TempListWrap.vue
View File

@ -32,7 +32,8 @@ import useConfirm from '@/common/methods/confirm'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import imgWaterFall from './components/imgWaterFall.vue'
import { IGetTempListData } from '@/api/home'
import {useControlStore, usePageStore, useUserStore} from '@/pinia'
import {useControlStore, usePageStore, useUserStore, useHistoryStore} from '@/pinia'
import { storeToRefs } from 'pinia'
type TState = {
loading: boolean
@ -66,7 +67,8 @@ const state = reactive<TState>({
searchKeyword: '',
})
const { tempEditing, dHistoryParams } = useSetupMapGetters(['tempEditing', 'dHistoryParams'])
const { tempEditing } = useSetupMapGetters(['tempEditing'])
const { dHistoryParams } = storeToRefs(useHistoryStore())
const pageOptions: TPageOptions = { page: 0, pageSize: 20, cate: 1 }
const { cate, edit } = route.query

14
src/mixins/methods/dealWithCtrl.ts
View File

@ -7,6 +7,7 @@
*/
import store from '@/store'
import handlePaste from './handlePaste'
import { useHistoryStore } from '@/pinia'
export default function dealWithCtrl(e: any, _this: any) {
switch (e.keyCode) {
@ -77,13 +78,14 @@ function paste() {
* 撤销
*/
function undo(shiftKey: any) {
const historyStore = useHistoryStore()
if (shiftKey) {
if (!(store.getters.dHistoryParams.index === store.getters.dHistoryParams.length - 1)) {
// this.handleHistory('redo')
store.dispatch('handleHistory', 'redo')
if (!(historyStore.dHistoryParams.index === historyStore.dHistoryParams.length - 1)) {
historyStore.handleHistory("redo")
// store.dispatch('handleHistory', 'redo')
}
} else if (!(store.getters.dHistoryParams.index === -1 || (store.getters.dHistoryParams === 0 && store.getters.dHistoryParams.length === 10))) {
// this.handleHistory('undo')
store.dispatch('handleHistory', 'undo')
} else if (!(historyStore.dHistoryParams.index === -1 || (historyStore.dHistoryParams.index === 0 && historyStore.dHistoryParams.length === 10))) {
historyStore.handleHistory("undo")
// store.dispatch('handleHistory', 'undo')
}
}

4
src/mixins/move.ts
View File

@ -5,6 +5,7 @@
* @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-07-31 09:31:52
*/
import { useControlStore } from '@/pinia'
import store from '@/store'
const move = {
@ -49,7 +50,8 @@ const move = {
const moveInit = {
methods: {
initmovement(e: MouseEvent) {
if (!store.getters.dAltDown) {
const controlStore = useControlStore()
if (!controlStore.dAltDown) {
// 设置mouseevent给moveable初始
// 在组合操作时排除
store.commit('setMouseEvent', e)

16
src/mixins/shortcuts.ts
View File

@ -5,13 +5,14 @@
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-09-19 17:29:06
*/
import store from '@/store'
// import store from '@/store'
// const _this: any = {}
// _this.dHistoryParams = store.getters.dHistoryParams
import keyCodeOptions from './methods/keyCodeOptions'
import dealWithCtrl from './methods/dealWithCtrl'
import { useStore, Store } from 'vuex'
import { TControlStore } from '@/pinia/design/control'
const ignoreNode = ['INPUT', 'TEXTAREA']
@ -34,7 +35,7 @@ let hadDown = false
const shortcuts = {
methods: {
handleKeydowm(store: Store<any>, checkCtrl: number | undefined, instance: any, dealCtrl: (e: any, instance: any) => void) {
handleKeydowm(store: TControlStore, checkCtrl: number | undefined, instance: any, dealCtrl: (e: any, instance: any) => void) {
return (e: any) => {
const nodeName = e.target.nodeName
if (ignoreNode.indexOf(nodeName) !== -1 || (nodeName === 'DIV' && e.target.contentEditable === 'true')) {
@ -55,14 +56,16 @@ const shortcuts = {
// hadDown = false
// }
if (shift || ctrl) {
store.dispatch('updateAltDown', true)
store.updateAltDown(true)
// store.dispatch('updateAltDown', true)
clearInterval(checkCtrl)
checkCtrl = setInterval(() => {
// TODO: 防止组合键导致页面失焦无法操作
if (!document.hasFocus()) {
clearInterval(checkCtrl)
hadDown = false
store.dispatch('updateAltDown', false)
store.updateAltDown(false)
// store.dispatch('updateAltDown', false)
}
}, 500)
}
@ -114,13 +117,14 @@ const shortcuts = {
keyCodeOptions(e, { f })
}
},
handleKeyup(store: Store<any>, checkCtrl: number | undefined) {
handleKeyup(store: TControlStore, checkCtrl: number | undefined) {
return (e: any) => {
console.log(e)
clearInterval(checkCtrl)
hadDown = false
if (e.key === 'Alt' || e.key === 'Shift' || e.key === 'Control' || e.key === 'Meta') {
store.dispatch('updateAltDown', false)
store.updateAltDown(false)
// store.dispatch('updateAltDown', false)
}
}
},

4
src/pinia/base/index.ts
View File

@ -6,7 +6,7 @@
* @LastEditTime: 2024-03-18 21:00:00
*/
import { defineStore } from 'pinia'
import { Store, defineStore } from 'pinia'
// import actions from './actions'
// import _config from '@/config'
@ -46,5 +46,7 @@ const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base
}
})
export type TBaseStore = Store<'base', TStoreBaseState, {}, TUserAction>
export default useBaseStore

4
src/pinia/base/user.ts
View File

@ -6,7 +6,7 @@
* @LastEditTime: 2024-03-18 21:00:00
*/
import { defineStore } from "pinia"
import { Store, defineStore } from "pinia"
type TUserStoreState = {
/** 登录状态 */
@ -56,4 +56,6 @@ const useUserStore = defineStore<'userStore', TUserStoreState, {}, TUserAction>(
}
})
export type TUserStore = Store<'userStore', TUserStoreState, {}, TUserAction>
export default useUserStore

19
src/pinia/design/canvas/index.ts
View File

@ -7,7 +7,7 @@
* @LastEditTime: 2024-03-18 21:00:00
*/
import { defineStore } from 'pinia'
import { Store, defineStore } from 'pinia'
type TScreeData = {
/** 记录编辑界面的宽度 */
@ -21,7 +21,7 @@ type TGuidelinesData = {
horizontalGuidelines: number[]
}
type TCanvasStore = {
type TCanvasState = {
/** 画布缩放百分比 */
dZoom: number
/** 画布垂直居中修正值 */
@ -33,10 +33,10 @@ type TCanvasStore = {
}
type TStoreGetter = {
dZoom: (state: TCanvasStore) => number
dPaddingTop: (state: TCanvasStore) => number
dScreen: (state: TCanvasStore) => TScreeData
guidelines: (state: TCanvasStore) => TGuidelinesData
dZoom: (state: TCanvasState) => number
dPaddingTop: (state: TCanvasState) => number
dScreen: (state: TCanvasState) => TScreeData
guidelines: (state: TCanvasState) => TGuidelinesData
}
type TStoreAction = {
@ -50,7 +50,8 @@ type TStoreAction = {
updateGuidelines: (lines: TGuidelinesData) => void
}
export default defineStore<"canvasStore", TCanvasStore, TStoreGetter, TStoreAction>("canvasStore", {
/** 画布全局设置 */
const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>("canvasStore", {
state: () => ({
dZoom: 0, // 画布缩放百分比
dPaddingTop: 0, // 画布垂直居中修正值
@ -94,3 +95,7 @@ export default defineStore<"canvasStore", TCanvasStore, TStoreGetter, TStoreActi
}
}
})
export type TCanvasStore = Store<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>
export default CanvasStore

29
src/pinia/design/control/index.ts
View File

@ -1,4 +1,13 @@
import { defineStore } from "pinia";
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-18 21:00:00
*/
import { Store, defineStore } from "pinia";
type TControlState = {
/** 是否正在移动组件 */
@ -13,6 +22,8 @@ type TControlState = {
showMoveable: boolean
/** 是否显示moveable的旋转按钮 */
showRotatable: boolean
/** 记录是否按下alt键 / 或ctrl */
dAltDown: boolean
}
type TControlAction = {
@ -22,9 +33,11 @@ type TControlAction = {
showRefLine: (isRefLine: boolean) => void
setShowMoveable: (isShowMoveable: boolean) => void
setShowRotatable: (isShowRotatable: boolean) => void
updateAltDown: (isPressAltDown: boolean) => void
}
export default defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
/** 全局控制配置 */
const ControlStore = defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
state: () => ({
dMoving: false, // 是否正在移动组件
dDraging: false, // 是否正在抓取组件
@ -32,6 +45,7 @@ export default defineStore<"controlStore", TControlState, {}, TControlAction>("c
dShowRefLine: true, // 是否显示参考线
showMoveable: false, // 全局控制选择框的显示
showRotatable: true, // 是否显示moveable的旋转按钮
dAltDown: false, // 记录是否按下alt键 / 或ctrl
}),
getters: {},
actions: {
@ -57,5 +71,14 @@ export default defineStore<"controlStore", TControlState, {}, TControlAction>("c
setShowRotatable(e: boolean) {
this.showRotatable = e
},
/** TODO 组合操作 */
updateAltDown(e: boolean) {
this.dAltDown = e
console.log('控制组合按键, 成组功能为: realCombined')
}
}
})
})
export type TControlStore = Store<"controlStore", TControlState, {}, TControlAction>
export default ControlStore

40
src/pinia/design/history/actions/handleHistory.ts Normal file
View File

@ -0,0 +1,40 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-27 21:00:00
*/
import { useControlStore, usePageStore } from "@/pinia"
import { THistoryStore } from ".."
export default function handleHistory(store: THistoryStore, action: "undo" | "redo") {
const pageStore = usePageStore()
const controlStore = useControlStore()
controlStore.setShowMoveable(false) // 清理掉上一次的选择框
// store.commit('setShowMoveable', false) // 清理掉上一次的选择框
const history = store.dHistory
const pageHistory = store.dPageHistory
const historyParams = store.dHistoryParams
if (action === 'undo') {
historyParams.index -= 1 // 下标向前移1 撤销
console.log(historyParams.index)
if (historyParams.index > -1) {
store.state.dWidgets = JSON.parse(history[historyParams.index])
pageStore.setDPage(JSON.parse(pageHistory[historyParams.index]))
}
} else if (action === 'redo') {
historyParams.index += 1 // 下标向后移1 重做
// 如果下标小于历史记录列表长度，直接取出历史记录
// if (historyParams.index < historyParams.length) {
store.state.dWidgets = JSON.parse(history[historyParams.index])
pageStore.setDPage(JSON.parse(pageHistory[historyParams.index]))
// } else {
// // 否则设置下标为列表最后一项
// historyParams.index = historyParams.length - 1
// store.state.dWidgets = JSON.parse(history[historyParams.index])
// store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
// }
}
}

49
src/pinia/design/history/actions/pushHistory.ts Normal file
View File

@ -0,0 +1,49 @@
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-27 21:00:00
*/
import { usePageStore } from "@/pinia"
import { THistoryStore } from ".."
/** push操作历史记录 */
export function pushHistory(store: THistoryStore, msg: string) {
const pageStore = usePageStore()
console.log('history压栈', '来源: ' + msg)
// 如果有上一次记录，并且与新纪录相同，那么不继续操作
if (store.dHistory[history.length - 1] && store.dHistory[history.length - 1] === JSON.stringify(store.state.dWidgets)) {
return
}
if (store.dHistoryParams.index < history.length - 1) {
const index = store.dHistoryParams.index + 1
const len = history.length - index
store.dHistory.splice(index, len)
store.dPageHistory.splice(index, len)
store.dHistoryParams.length = history.length
store.dHistoryParams.index = history.length - 1
}
store.dHistory.push(JSON.stringify(store.state.dWidgets))
store.dPageHistory.push(JSON.stringify(pageStore.dPage))
store.dHistoryParams.index = history.length - 1
store.dHistoryParams.length = history.length
}
/** 添加颜色选择历史记录 */
export function pushColorToHistory(store: THistoryStore, color: string) {
const history = store.dColorHistory
// 如果已经存在就提到前面来，避免重复
const index = history.indexOf(color)
if (index !== -1) {
history.splice(index, 1)
}
// 最多保存3种颜色
if (history.length === 4) {
history.splice(history.length - 1, 1)
}
// 把最新的颜色放在头部
const head = [color]
store.dColorHistory = head.concat(history)
}

77
src/pinia/design/history/index.ts
View File

@ -1,13 +1,78 @@
import { defineStore } from "pinia"
/*
* @Author: Jeremy Yu
* @Date: 2024-03-18 21:00:00
* @Description:
* @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
* @LastEditTime: 2024-03-27 21:00:00
*/
import { Store, defineStore } from "pinia"
import {pushHistory, pushColorToHistory} from "./actions/pushHistory"
import handleHistory from "./actions/handleHistory"
type THistoryStore = {
export type THistoryParamData = {
index: number
length: number
maxLength: number
}
export default defineStore("historyStore", {
type THistoryState = {
/** 记录历史操作（保存整个画布的json数据） */
dHistory: string[]
/** 记录历史操作对应的激活的组件的uuid */
dActiveUuidHistory: string[]
/** 记录历史操作对应的page */
dPageHistory: string[]
dHistoryParams: THistoryParamData,
/** 记录历史选择的颜色 */
dColorHistory: string[]
}
type THistoryAction = {
/**
* 保存操作历史，
* 修改数据、移动完成后都会自动保存
* 同时会保存当前激活的组件的uuid，方便撤回时自动激活
*/
pushHistory: (msg: string) => void
/**
* 操作历史记录
* action为undo表示撤销
* action为redo表示重做
*/
handleHistory: (action: "undo" | "redo") => void
pushColorToHistory: (color: string) => void
}
/** 历史记录Store */
const HistoryStore = defineStore<"historyStore", THistoryState, {}, THistoryAction>("historyStore", {
state: () => ({
})
dHistory: [],
dHistoryParams: {
index: -1,
length: 0,
maxLength: 20,
},
dActiveUuidHistory: [],
dColorHistory: [],
dPageHistory: []
}),
actions: {
pushHistory(msg) {
pushHistory(this, msg)
},
handleHistory(action) {
handleHistory(this, action)
// 激活组件默认为page
store.state.dActiveElement = store.state.dPage
},
pushColorToHistory(color) {
pushColorToHistory(this, color)
}
}
})
export type THistoryStore = Store<"historyStore", THistoryState, {}, THistoryAction>
export default HistoryStore

25
src/pinia/design/page/index.ts
View File

@ -6,9 +6,9 @@
* @LastEditTime: 2024-03-18 21:00:00
*/
import { defineStore } from 'pinia'
import { Store, defineStore } from 'pinia'
export type TPageStore = {
export type TPageState = {
name: string
type: string
uuid: string
@ -39,21 +39,22 @@ export type TPageStore = {
}
type TPageGetter = {
dPage(state: TPageStore): TPageStore
dPage(state: TPageState): TPageState
}
type TPageActions = {
/** 更新Page数据 */
updatePageData<T extends keyof TPageStore>(data: {
updatePageData<T extends keyof TPageState>(data: {
key: T
value: TPageStore[T]
value: TPageState[T]
pushHistory?: boolean
}): void
/** 设置dPage */
setDPage(data: TPageStore): void
setDPage(data: TPageState): void
}
export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("pageStore", {
/** 页面全局配置 */
const PageStore = defineStore<"pageStore", TPageState, TPageGetter, TPageActions>("pageStore", {
state: () => ({
name: '背景页面',
type: 'page',
@ -82,7 +83,7 @@ export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("
actions: {
/** 更新Page数据 */
updatePageData({ key, value, pushHistory }) {
const data = this as TPageStore
const data = this as TPageState
if (data[key] !== value || pushHistory) {
data[key] = value
// 画布修改先不压入历史栈，因为替换模板后会重复压栈
@ -90,12 +91,16 @@ export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("
}
},
/** 设置dPage */
setDPage(data: TPageStore) {
setDPage(data: TPageState) {
const cur = this as Record<string, any>
const keys = Object.keys(data) as (keyof TPageStore)[];
const keys = Object.keys(data) as (keyof TPageState)[];
keys.forEach(val => {
cur[val] = data[val]
})
}
}
})
export type TPageStore = Store<"pageStore", TPageState, TPageGetter, TPageActions>
export default PageStore

0
src/pinia/design/select/index.ts Normal file
View File

4
src/pinia/index.ts
View File

@ -11,11 +11,13 @@ import useUserStore from "./base/user";
import usePageStore from "./design/page"
import useCanvasStore from "./design/canvas"
import useControlStore from './design/control'
import useHistoryStore from './design/history'
export {
useBaseStore,
useUserStore,
usePageStore,
useCanvasStore,
useControlStore
useControlStore,
useHistoryStore,
}

58
src/store/modules/design/actions.ts
View File

@ -1,8 +1,8 @@
// import { nextTick } from 'vue'
import { customAlphabet } from 'nanoid/non-secure'
const nanoid = customAlphabet('1234567890abcdef', 12)
import pushHistory from './methods/pushHistory'
import handleHistory from './methods/handleHistory'
// import pushHistory from './methods/pushHistory'
// import handleHistory from './methods/handleHistory'
export default {
/**
@ -10,19 +10,19 @@ export default {
* 修改数据、移动完成后都会自动保存
* 同时会保存当前激活的组件的uuid，方便撤回时自动激活
*/
pushHistory(store: any, msg: string) {
pushHistory(store, msg)
},
// pushHistory(store: any, msg: string) {
// pushHistory(store, msg)
// },
/**
* 操作历史记录
* action为undo表示撤销
* action为redo表示重做
*/
handleHistory(store: any, action: any) {
handleHistory(store, action)
// 激活组件默认为page
store.state.dActiveElement = store.state.dPage
},
// handleHistory(store: any, action: any) {
// handleHistory(store, action)
// // 激活组件默认为page
// store.state.dActiveElement = store.state.dPage
// },
// updateZoom(store, zoom) {
// store.state.dZoom = zoom
@ -523,21 +523,21 @@ export default {
// const tag = store.state.dPage.tag
// store.state.dPage.tag = tag === 0 ? 0.01 : 0
},
pushColorToHistory(store, color) {
const history = store.state.dColorHistory
// 如果已经存在就提到前面来，避免重复
const index = history.indexOf(color)
if (index !== -1) {
history.splice(index, 1)
}
// 最多保存3种颜色
if (history.length === 4) {
history.splice(history.length - 1, 1)
}
// 把最新的颜色放在头部
const head = [color]
store.state.dColorHistory = head.concat(history)
},
// pushColorToHistory(store, color) {
// const history = store.state.dColorHistory
// // 如果已经存在就提到前面来，避免重复
// const index = history.indexOf(color)
// if (index !== -1) {
// history.splice(index, 1)
// }
// // 最多保存3种颜色
// if (history.length === 4) {
// history.splice(history.length - 1, 1)
// }
// // 把最新的颜色放在头部
// const head = [color]
// store.state.dColorHistory = head.concat(history)
// },
updateHoverUuid(store, uuid) {
store.state.dHoverUuid = uuid
},
@ -614,10 +614,10 @@ export default {
return page
},
// TODO 组合操作
updateAltDown(store, value) {
store.state.dAltDown = value
console.log('控制组合按键, 成组功能为: realCombined')
},
// updateAltDown(store, value) {
// store.state.dAltDown = value
// console.log('控制组合按键, 成组功能为: realCombined')
// },
realCombined(store: any) {
const selectWidgets = store.state.dSelectWidgets
if (selectWidgets.length > 1) {

50
src/store/modules/design/index.ts
View File

@ -61,16 +61,16 @@ const all = {
// record: {},
// },
dWidgets: [], // 已使用的组件
dHistory: [], // 记录历史操作（保存整个画布的json数据）
dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
dPageHistory: [], // 记录历史操作对应的page
dHistoryParams: {
index: -1,
length: 0,
maxLength: 20,
},
dColorHistory: [], // 记录历史选择的颜色
dAltDown: false, // 记录是否按下alt键 / 或ctrl
// dHistory: [], // 记录历史操作（保存整个画布的json数据）
// dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
// dPageHistory: [], // 记录历史操作对应的page
// dHistoryParams: {
// index: -1,
// length: 0,
// maxLength: 20,
// },
// dColorHistory: [], // 记录历史选择的颜色
// dAltDown: false, // 记录是否按下alt键 / 或ctrl
dSelectWidgets: [], // 记录多选的组件
dGroupJson: {}, // 组合的json数据
selectItem: { data: null }, // 记录当前选择的元素, data
@ -120,12 +120,12 @@ const all = {
dWidgets(state) {
return state.dWidgets
},
dHistoryParams(state) {
return state.dHistoryParams
},
dColorHistory(state) {
return state.dColorHistory
},
// dHistoryParams(state) {
// return state.dHistoryParams
// },
// dColorHistory(state) {
// return state.dColorHistory
// },
dHoverUuid(state) {
return state.dHoverUuid
},
@ -138,9 +138,9 @@ const all = {
dCopyElement(state) {
return state.dCopyElement
},
dAltDown(state) {
return state.dAltDown
},
// dAltDown(state) {
// return state.dAltDown
// },
dSelectWidgets(state) {
return state.dSelectWidgets
},
@ -171,12 +171,12 @@ const all = {
dCropUuid(state: any) {
return state.dCropUuid
},
dPageHistory(state: any) {
return state.dPageHistory
},
dHistory(state: any) {
return state.dHistory
},
// dPageHistory(state: any) {
// return state.dPageHistory
// },
// dHistory(state: any) {
// return state.dHistory
// },
// dDragInitData(state: any) {
// return state.dDragInitData
// },

154
src/store/modules/design/methods/handleHistory.ts
View File

@ -5,84 +5,84 @@
* @LastEditors: ShawnPhang
* @LastEditTime: 2022-03-11 10:13:42
*/
export default function handleHistory(store: any, action: any) {
store.commit('setShowMoveable', false) // 清理掉上一次的选择框
const history = store.state.dHistory
const pageHistory = store.state.dPageHistory
const historyParams = store.state.dHistoryParams
if (action === 'undo') {
historyParams.index -= 1 // 下标向前移1 撤销
console.log(historyParams.index)
if (historyParams.index > -1) {
store.state.dWidgets = JSON.parse(history[historyParams.index])
store.state.dPage = JSON.parse(pageHistory[historyParams.index])
}
} else if (action === 'redo') {
historyParams.index += 1 // 下标向后移1 重做
// 如果下标小于历史记录列表长度，直接取出历史记录
// if (historyParams.index < historyParams.length) {
store.state.dWidgets = JSON.parse(history[historyParams.index])
store.state.dPage = JSON.parse(pageHistory[historyParams.index])
// } else {
// // 否则设置下标为列表最后一项
// historyParams.index = historyParams.length - 1
// store.state.dWidgets = JSON.parse(history[historyParams.index])
// store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
// }
}
}
// export default function handleHistory(store: any, action: any) {
// store.commit('setShowMoveable', false) // 清理掉上一次的选择框
// const history = store.state.dHistory
// const pageHistory = store.state.dPageHistory
// const historyParams = store.state.dHistoryParams
// if (action === 'undo') {
// historyParams.index -= 1 // 下标向前移1 撤销
// console.log(historyParams.index)
// if (historyParams.index > -1) {
// store.state.dWidgets = JSON.parse(history[historyParams.index])
// store.state.dPage = JSON.parse(pageHistory[historyParams.index])
// }
// } else if (action === 'redo') {
// historyParams.index += 1 // 下标向后移1 重做
// // 如果下标小于历史记录列表长度，直接取出历史记录
// // if (historyParams.index < historyParams.length) {
// store.state.dWidgets = JSON.parse(history[historyParams.index])
// store.state.dPage = JSON.parse(pageHistory[historyParams.index])
// // } else {
// // // 否则设置下标为列表最后一项
// // historyParams.index = historyParams.length - 1
// // store.state.dWidgets = JSON.parse(history[historyParams.index])
// // store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
// // }
// }
// }
function handleHistory_old(store: any, action: any) {
store.commit('setShowMoveable', false) // 清理掉上一次的选择框
const history = store.state.dHistory
// const uuidHistory = store.state.dActiveUuidHistory
const pageHistory = store.state.dPageHistory
const historyParams = store.state.dHistoryParams
// function handleHistory_old(store: any, action: any) {
// store.commit('setShowMoveable', false) // 清理掉上一次的选择框
// const history = store.state.dHistory
// // const uuidHistory = store.state.dActiveUuidHistory
// const pageHistory = store.state.dPageHistory
// const historyParams = store.state.dHistoryParams
// let uuid = '-1'
console.log(action, historyParams)
// // let uuid = '-1'
// console.log(action, historyParams)
if (action === 'undo') {
// 下标向前移1 撤销
historyParams.index -= 1
// 如果下表大于等于0，直接取出历史记录
if (historyParams.index >= 0) {
console.log(1, history)
console.log(2, pageHistory)
// if (action === 'undo') {
// // 下标向前移1 撤销
// historyParams.index -= 1
// // 如果下表大于等于0，直接取出历史记录
// if (historyParams.index >= 0) {
// console.log(1, history)
// console.log(2, pageHistory)
store.state.dWidgets = JSON.parse(history[historyParams.index])
store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
// uuid = uuidHistory[historyParams.index]
} else if (historyParams.length < 10) {
// 否则如果历史记录长度小于10，则设置组件为空
historyParams.index = -1
store.state.dWidgets = []
store.state.dPage = JSON.parse(pageHistory[0])
} else {
historyParams.index = -1
}
} else if (action === 'redo') {
// 下标向后移1 重做
historyParams.index += 1
// 如果下标小于历史记录列表长度，直接取出历史记录
if (historyParams.index < historyParams.length) {
console.log(1, history)
console.log(2, pageHistory)
store.state.dWidgets = JSON.parse(history[historyParams.index])
store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1] || pageHistory[historyParams.index])
// uuid = uuidHistory[historyParams.index]
} else {
// 否则设置下标为列表最后一项
historyParams.index = historyParams.length - 1
store.state.dWidgets = JSON.parse(history[historyParams.index])
store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
// uuid = uuidHistory[historyParams.index]
}
}
// 激活组件默认为page
// let element = store.state.dPage
// if (uuid !== '-1') {
// element = store.state.dWidgets.find((item) => item.uuid === uuid)
// }
// store.state.dActiveElement = element
}
// store.state.dWidgets = JSON.parse(history[historyParams.index])
// store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
// // uuid = uuidHistory[historyParams.index]
// } else if (historyParams.length < 10) {
// // 否则如果历史记录长度小于10，则设置组件为空
// historyParams.index = -1
// store.state.dWidgets = []
// store.state.dPage = JSON.parse(pageHistory[0])
// } else {
// historyParams.index = -1
// }
// } else if (action === 'redo') {
// // 下标向后移1 重做
// historyParams.index += 1
// // 如果下标小于历史记录列表长度，直接取出历史记录
// if (historyParams.index < historyParams.length) {
// console.log(1, history)
// console.log(2, pageHistory)
// store.state.dWidgets = JSON.parse(history[historyParams.index])
// store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1] || pageHistory[historyParams.index])
// // uuid = uuidHistory[historyParams.index]
// } else {
// // 否则设置下标为列表最后一项
// historyParams.index = historyParams.length - 1
// store.state.dWidgets = JSON.parse(history[historyParams.index])
// store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
// // uuid = uuidHistory[historyParams.index]
// }
// }
// // 激活组件默认为page
// // let element = store.state.dPage
// // if (uuid !== '-1') {
// // element = store.state.dWidgets.find((item) => item.uuid === uuid)
// // }
// // store.state.dActiveElement = element
// }

128
src/store/modules/design/methods/pushHistory.ts
View File

@ -5,69 +5,69 @@
* @LastEditors: ShawnPhang
* @LastEditTime: 2022-03-11 10:12:50
*/
export default function pushHistory(store: any, msg: string) {
console.log('history压栈', '来源: ' + msg)
const history = store.state.dHistory
const pageHistory = store.state.dPageHistory
const historyParams = store.state.dHistoryParams // index = length - 1
// 如果有上一次记录，并且与新纪录相同，那么不继续操作
if (history[history.length - 1] && history[history.length - 1] === JSON.stringify(store.state.dWidgets)) {
return
}
if (historyParams.index < history.length - 1) {
const index = historyParams.index + 1
const len = history.length - index
history.splice(index, len)
pageHistory.splice(index, len)
historyParams.length = history.length
historyParams.index = history.length - 1
}
history.push(JSON.stringify(store.state.dWidgets))
pageHistory.push(JSON.stringify(store.state.dPage))
historyParams.index = history.length - 1
historyParams.length = history.length
}
// export default function pushHistory(store: any, msg: string) {
// console.log('history压栈', '来源: ' + msg)
// const history = store.state.dHistory
// const pageHistory = store.state.dPageHistory
// const historyParams = store.state.dHistoryParams // index = length - 1
// // 如果有上一次记录，并且与新纪录相同，那么不继续操作
// if (history[history.length - 1] && history[history.length - 1] === JSON.stringify(store.state.dWidgets)) {
// return
// }
// if (historyParams.index < history.length - 1) {
// const index = historyParams.index + 1
// const len = history.length - index
// history.splice(index, len)
// pageHistory.splice(index, len)
// historyParams.length = history.length
// historyParams.index = history.length - 1
// }
// history.push(JSON.stringify(store.state.dWidgets))
// pageHistory.push(JSON.stringify(store.state.dPage))
// historyParams.index = history.length - 1
// historyParams.length = history.length
// }
function pushHistory_old(store: any) {
// 历史记录列表
const history = store.state.dHistory
// 历史激活组件记录列表
// const uuidHistory = store.state.dActiveUuidHistory
// 历史page记录列表
const pageHistory = store.state.dPageHistory
// 历史记录列表参数（长度和下标）
const historyParams = store.state.dHistoryParams
// function pushHistory_old(store: any) {
// // 历史记录列表
// const history = store.state.dHistory
// // 历史激活组件记录列表
// // const uuidHistory = store.state.dActiveUuidHistory
// // 历史page记录列表
// const pageHistory = store.state.dPageHistory
// // 历史记录列表参数（长度和下标）
// const historyParams = store.state.dHistoryParams
// 下标不等于-1表示已经存在历史操作记录
// 下标小于历史列表长度-1，则说明不是在末尾添加记录，需要先删除掉下标之后的数据，否则会出现错乱
if (historyParams.index < history.length - 1) {
const index = historyParams.index + 1
const len = history.length - index
// 删除下标之后的所有历史记录
history.splice(index, len)
// 删除下标之后的所有uuid记录
// uuidHistory.splice(index, len)
// 删除下标之后的所有page记录
pageHistory.splice(index + 1, len - 1)
historyParams.length = history.length
}
// 保存当前操作进历史记录
if (history[history.length - 1] !== JSON.stringify(store.state.dWidgets)) {
history.push(JSON.stringify(store.state.dWidgets))
// uuidHistory.push(store.state.dActiveElement.uuid)
pageHistory.push(JSON.stringify(store.state.dPage))
historyParams.index = history.length - 1
historyParams.length = history.length
}
// 历史记录最多n条，如果超过则从头部开始删，因为每次都是一条一条加的，所以只需删一条就行
if (history.length > 20) {
history.splice(0, 1)
// uuidHistory.splice(0, 1)
pageHistory.splice(0, 1)
}
if (pageHistory.length - 1 > history.length) {
pageHistory.splice(0, 1)
}
// historyParams.index = history.length - 1
// historyParams.length = history.length
}
// // 下标不等于-1表示已经存在历史操作记录
// // 下标小于历史列表长度-1，则说明不是在末尾添加记录，需要先删除掉下标之后的数据，否则会出现错乱
// if (historyParams.index < history.length - 1) {
// const index = historyParams.index + 1
// const len = history.length - index
// // 删除下标之后的所有历史记录
// history.splice(index, len)
// // 删除下标之后的所有uuid记录
// // uuidHistory.splice(index, len)
// // 删除下标之后的所有page记录
// pageHistory.splice(index + 1, len - 1)
// historyParams.length = history.length
// }
// // 保存当前操作进历史记录
// if (history[history.length - 1] !== JSON.stringify(store.state.dWidgets)) {
// history.push(JSON.stringify(store.state.dWidgets))
// // uuidHistory.push(store.state.dActiveElement.uuid)
// pageHistory.push(JSON.stringify(store.state.dPage))
// historyParams.index = history.length - 1
// historyParams.length = history.length
// }
// // 历史记录最多n条，如果超过则从头部开始删，因为每次都是一条一条加的，所以只需删一条就行
// if (history.length > 20) {
// history.splice(0, 1)
// // uuidHistory.splice(0, 1)
// pageHistory.splice(0, 1)
// }
// if (pageHistory.length - 1 > history.length) {
// pageHistory.splice(0, 1)
// }
// // historyParams.index = history.length - 1
// // historyParams.length = history.length
// }

26
src/views/Index.vue
View File

@ -72,7 +72,7 @@ import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useRoute } from 'vue-router'
import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
import { storeToRefs } from 'pinia'
import { useCanvasStore, usePageStore } from '@/pinia'
import { useCanvasStore, useControlStore, usePageStore, useHistoryStore } from '@/pinia'
type TState = {
style: CSSProperties
@ -84,10 +84,12 @@ type TState = {
}
const {
dActiveElement, dHistoryParams, dCopyElement
} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement'])
dActiveElement, dCopyElement
} = useSetupMapGetters(['dActiveElement', 'dCopyElement'])
const historyStore = useHistoryStore()
const { dPage } = storeToRefs(usePageStore())
const { dZoom } = storeToRefs(useCanvasStore())
const { dHistoryParams } = storeToRefs(useHistoryStore())
const state = reactive<TState>({
@ -104,10 +106,11 @@ const state = reactive<TState>({
const optionsRef = ref<typeof HeaderOptions | null>(null)
const zoomControlRef = ref<typeof zoomControl | null>(null)
const store = useStore()
const controlStore = useControlStore()
const route = useRoute()
const beforeUnload = function (e: Event): any {
if (store.getters.dHistoryParams.length > 0) {
if (dHistoryParams.value.length > 0) {
const confirmationMessage: string = '系统不会自动保存您未修改的内容';
(e || window.event).returnValue = (confirmationMessage as any) // Gecko and Trident
return confirmationMessage // Gecko and WebKit
@ -129,7 +132,7 @@ defineExpose({
const undoable = computed(() => {
return !(
dHistoryParams.value.index === -1 ||
(dHistoryParams.value === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
(dHistoryParams.value.index === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
})
const redoable = computed(() => {
@ -160,22 +163,23 @@ onMounted(() => {
// initGroupJson(JSON.stringify(wGroup.setting))
window.addEventListener('scroll', fixTopBarScroll)
// window.addEventListener('click', this.clickListener)
document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
document.addEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instanceFn, dealCtrl), false)
document.addEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
loadData()
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', fixTopBarScroll)
// window.removeEventListener('click', this.clickListener)
document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
document.removeEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instanceFn, dealCtrl), false)
document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
document.oncontextmenu = null
})
// ...mapActions(['selectWidget', 'initGroupJson', 'handleHistory']),
function handleHistory(data: string) {
store.dispatch('handleHistory', data)
function handleHistory(data: "undo" | "redo") {
historyStore.handleHistory(data)
// store.dispatch('handleHistory', data)
}
function changeLineGuides() {

8
src/views/Psd.vue
View File

@ -187,15 +187,15 @@ let checkCtrl: number | undefined
onMounted(() => {
const instance = getCurrentInstance()
document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
document.addEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instance, dealCtrl), false)
document.addEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
loadJS()
})
onBeforeMount(() => {
const instance = getCurrentInstance()
document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
document.removeEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instance, dealCtrl), false)
document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
document.oncontextmenu = null
})
// ...mapActions(['selectWidget']),

7
src/views/components/HeaderOptions.vue
View File

@ -40,7 +40,7 @@ import _config from '@/config'
import useConfirm from '@/common/methods/confirm'
// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
import { useControlStore, usePageStore, useUserStore } from '@/pinia/index'
import { useControlStore, useHistoryStore, usePageStore, useUserStore } from '@/pinia/index'
import { storeToRefs } from 'pinia'
type TProps = {
@ -66,12 +66,13 @@ const store = useStore()
const userStore = useUserStore()
const canvasImage = ref<typeof SaveImage | null>(null)
const {
dWidgets, tempEditing, dHistory, dPageHistory
} = useSetupMapGetters(['dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
dWidgets, tempEditing
} = useSetupMapGetters(['dWidgets', 'tempEditing'])
const pageStore = usePageStore()
const controlStore = useControlStore()
const { dPage } = storeToRefs(pageStore)
const { dHistory, dPageHistory } = storeToRefs(useHistoryStore())
const state = reactive<TState>({