From 946d9bcf7a420c3968ab568611d0a897be55a992 Mon Sep 17 00:00:00 2001 From: IchliebedichZhu <54796446@qq.com> Date: Fri, 29 Mar 2024 14:35:58 +0000 Subject: [PATCH] rebuilt: vuex to pinia --- package-lock.json | 17 ++ package.json | 2 + src/common/hooks/dragHelper.ts | 20 ++- src/common/hooks/mapGetters.ts | 28 +-- .../methods/DesignFeatures/setComponents.ts | 17 +- src/common/methods/DesignFeatures/setImage.ts | 13 +- src/common/methods/addMouseWheel.ts | 2 +- .../business/cropper/CropImage/CropImage.vue | 5 +- .../business/cropper/CropImage/index.vue | 4 +- .../image-cutout/ImageCutout/index.vue | 4 +- .../image-cutout/ImageExtraction/index.vue | 8 +- src/components/business/moveable/Moveable.vue | 164 ++++++++++++------ src/components/business/moveable/Selecto.ts | 22 ++- .../business/picture-selector/index.vue | 4 +- src/components/business/qrcode/method.ts | 4 +- .../business/right-click-menu/RcMenu.vue | 71 +++++--- .../business/save-download/CreateCover.vue | 17 +- .../modules/layout/designBoard/index.vue | 107 +++++++----- src/components/modules/layout/lineGuides.vue | 4 +- .../modules/layout/zoomControl/index.vue | 19 +- .../modules/panel/components/layerList.vue | 33 ++-- src/components/modules/panel/stylePanel.vue | 58 +++++-- .../modules/panel/wrap/BgImgListWrap.vue | 24 ++- .../modules/panel/wrap/CompListWrap.vue | 41 +++-- .../modules/panel/wrap/GraphListWrap.vue | 15 +- .../modules/panel/wrap/PhotoListWrap.vue | 15 +- .../modules/panel/wrap/TempListWrap.vue | 28 +-- .../modules/panel/wrap/TextListWrap.vue | 11 +- .../modules/panel/wrap/ToolsListWrap.vue | 13 +- .../modules/panel/wrap/UserWrap.vue | 14 +- .../modules/settings/colorSelect.vue | 4 +- .../modules/settings/numberSlider.vue | 1 - .../modules/settings/valueSelect.vue | 2 +- src/components/modules/widgets/pageStyle.vue | 26 +-- .../modules/widgets/wGroup/wGroup.vue | 42 +++-- .../modules/widgets/wGroup/wGroupStyle.vue | 74 ++++---- .../modules/widgets/wImage/wImage.vue | 37 ++-- .../modules/widgets/wImage/wImageStyle.vue | 98 ++++++----- .../modules/widgets/wQrcode/wQrcode.vue | 20 ++- .../modules/widgets/wQrcode/wQrcodeStyle.vue | 86 +++++---- src/components/modules/widgets/wSvg/wSvg.vue | 36 ++-- .../modules/widgets/wSvg/wSvgStyle.vue | 69 ++++---- .../modules/widgets/wText/pageFontsFilter.ts | 10 +- .../modules/widgets/wText/wText.vue | 48 +++-- .../modules/widgets/wText/wTextStyle.vue | 76 +++++--- src/main.ts | 4 +- src/mixins/methods/dealWithCtrl.ts | 33 ++-- src/mixins/methods/handlePaste.ts | 25 ++- src/mixins/methods/keyCodeOptions.ts | 50 ++++-- src/mixins/move.ts | 52 ++++-- src/pinia/design/canvas/index.ts | 18 +- src/pinia/design/group/action/index.ts | 2 +- .../design/history/actions/pushHistory.ts | 5 +- src/pinia/design/history/index.ts | 2 +- src/pinia/design/widget/actions/align.ts | 2 +- src/pinia/design/widget/actions/index.ts | 4 +- src/pinia/design/widget/actions/layer.ts | 2 +- src/pinia/design/widget/actions/select.ts | 4 +- src/pinia/design/widget/actions/widget.ts | 16 +- src/pinia/design/widget/index.ts | 26 ++- src/utils/utils.ts | 28 +++ src/views/Draw.vue | 28 +-- src/views/Index.vue | 27 +-- src/views/Psd.vue | 18 +- src/views/components/HeaderOptions.vue | 31 ++-- src/views/components/UploadTemplate.vue | 23 +-- yarn.lock | 17 ++ 67 files changed, 1169 insertions(+), 661 deletions(-) diff --git a/package-lock.json b/package-lock.json index 57c6d36..9d13655 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@webtoon/psd": "^0.4.0", "axios": "^0.21.1", "core-js": "^3.6.5", + "cropperjs": "^1.6.1", "dayjs": "^1.10.7", "element-plus": "^2.3.7", "fontfaceobserver": "^2.1.0", @@ -37,6 +38,7 @@ "vuex": "^4.0.0-0" }, "devDependencies": { + "@types/cropperjs": "^1.3.0", "@types/fontfaceobserver": "^2.1.3", "@types/node": "^20.11.24", "@types/throttle-debounce": "^2.1.0", @@ -973,6 +975,16 @@ "framework-utils": "^1.1.0" } }, + "node_modules/@types/cropperjs": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@types/cropperjs/-/cropperjs-1.3.0.tgz", + "integrity": "sha512-U3a/z302duKpXUHfMneFjrWDDoq5n+nsJ/YeJHoTI9LXSBtSsqMUyxEJPIMAzfDawF5nuG5c9FN2gY//ZGl5PA==", + "deprecated": "This is a stub types definition. cropperjs provides its own type definitions, so you do not need this installed.", + "dev": true, + "dependencies": { + "cropperjs": "*" + } + }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -1830,6 +1842,11 @@ "url": "https://opencollective.com/core-js" } }, + "node_modules/cropperjs": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.1.tgz", + "integrity": "sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA==" + }, "node_modules/cross-env": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", diff --git a/package.json b/package.json index c92df3f..be845fa 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@webtoon/psd": "^0.4.0", "axios": "^0.21.1", "core-js": "^3.6.5", + "cropperjs": "^1.6.1", "dayjs": "^1.10.7", "element-plus": "^2.3.7", "fontfaceobserver": "^2.1.0", @@ -40,6 +41,7 @@ "vuex": "^4.0.0-0" }, "devDependencies": { + "@types/cropperjs": "^1.3.0", "@types/fontfaceobserver": "^2.1.3", "@types/node": "^20.11.24", "@types/throttle-debounce": "^2.1.0", diff --git a/src/common/hooks/dragHelper.ts b/src/common/hooks/dragHelper.ts index 1d5e617..c003700 100644 --- a/src/common/hooks/dragHelper.ts +++ b/src/common/hooks/dragHelper.ts @@ -6,7 +6,9 @@ * @LastEditTime: 2023-11-22 18:11:15 */ -import store from '@/store' +import { useControlStore, useWidgetStore } from "@/pinia" + +// import store from '@/store' type TInitial = { offsetX: number @@ -71,7 +73,10 @@ export default class DragHelper { */ public start(e: MouseEvent, finallySize: number) { if (!this.cloneEl) { - store.commit('setDraging', true) + const controlStore = useControlStore() + controlStore.setDraging(true) + // store.commit('setDraging', true) + const app = window.document.getElementById('app') if (!app || !e) return app.classList.add('drag_active') // 整个鼠标全局变成抓取 @@ -134,12 +139,19 @@ export default class DragHelper { } // 结束/完成处理（动画） private finish(done = false) { + if (!this.dragging) { return } + + const controlStore = useControlStore() + const widgetStore = useWidgetStore() this.dragging = false - store.commit('setDraging', false) - store.commit('selectItem', {}) + controlStore.setDraging(false) + // store.commit('setDraging', false) + + widgetStore.setSelectItem({}) + // store.commit('selectItem', {}) if (!done) { const { pageX, offsetX, pageY, offsetY } = this.initial as TInitial diff --git a/src/common/hooks/mapGetters.ts b/src/common/hooks/mapGetters.ts index 98a3008..4423012 100644 --- a/src/common/hooks/mapGetters.ts +++ b/src/common/hooks/mapGetters.ts @@ -1,13 +1,21 @@ -import { ComputedRef, computed } from 'vue' -import { useStore } from 'vuex' +/* + * @Author: Jeremy-Yu + * @Date: 2024-02-14 14:58:48 + * @Description: 同意处理vue3 Mapgetters 已废弃 + * @LastEditors: ShawnPhang + * @LastEditTime: 2023-11-22 18:11:15 + */ -export function useSetupMapGetters(strList: T[]) { - const mapData: Partial<{[x in T]: ComputedRef}> = {} - const getters = useStore().getters +// import { ComputedRef, computed } from 'vue' +// import { useStore } from 'vuex' - strList.forEach(val => { - mapData[val] = computed(() => getters[val]) - }) +// export function useSetupMapGetters(strList: T[]) { +// const mapData: Partial<{[x in T]: ComputedRef}> = {} +// const getters = useStore().getters - return mapData as {[x in T]: ComputedRef} -} +// strList.forEach(val => { +// mapData[val] = computed(() => getters[val]) +// }) + +// return mapData as {[x in T]: ComputedRef} +// } diff --git a/src/common/methods/DesignFeatures/setComponents.ts b/src/common/methods/DesignFeatures/setComponents.ts index 4152131..a72eca6 100644 --- a/src/common/methods/DesignFeatures/setComponents.ts +++ b/src/common/methods/DesignFeatures/setComponents.ts @@ -5,15 +5,20 @@ * @LastEditors: ShawnPhang , Jeremy Yu * @LastEditTime: 2024-03-02 11:50:00 */ -import store from '@/store' -export default async function setCompData(item: TCommonItemData[] | string) { - const group: TCommonItemData[] = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item)) - let parent: Partial = {} +import { useCanvasStore, usePageStore } from '@/pinia' +import { TdWidgetData } from '@/pinia/design/widget' +// import store from '@/store' + +export default async function setCompData(item: TdWidgetData[] | string) { + const canvasStore = useCanvasStore() + const pageStore = usePageStore() + const group: TdWidgetData[] = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item)) + let parent: Partial = {} Array.isArray(group) && group.forEach((element) => { element.type === 'w-group' && (parent = element) }) - const { width: screenWidth, height: screenHeight } = store.getters.dPage + const { width: screenWidth, height: screenHeight } = pageStore.dPage const { width: imgWidth = 0, height: imgHeight = 0 } = parent let ratio = 1 // 先限制在画布内，保证不超过边界 @@ -22,7 +27,7 @@ export default async function setCompData(item: TCommonItemData[] | string) { } // 根据画布缩放比例再进行一次调整 if (ratio < 1) { - ratio *= store.getters.dZoom / 100 + ratio *= canvasStore.dZoom / 100 group.forEach((element) => { element.fontSize && (element.fontSize *= ratio) element.width *= ratio diff --git a/src/common/methods/DesignFeatures/setImage.ts b/src/common/methods/DesignFeatures/setImage.ts index c5ee7f4..6bbde50 100644 --- a/src/common/methods/DesignFeatures/setImage.ts +++ b/src/common/methods/DesignFeatures/setImage.ts @@ -5,8 +5,9 @@ * @LastEditors: ShawnPhang , Jeremy Yu * @LastEditTime: 2024-03-01 20:55:51 */ -import store from '@/store' +// import store from '@/store' import { getImage } from '../getImgDetail' +import { useCanvasStore, usePageStore } from '@/pinia' export type TItem2DataParam = { id?: string | number @@ -24,8 +25,10 @@ export type TItem2DataResult = { } export default async function setItem2Data(item: TItem2DataParam): Promise> { + const canvasStore = useCanvasStore() + const pageStore = usePageStore() const cloneItem = JSON.parse(JSON.stringify(item)) - const { width: screenWidth, height: screenHeight } = store.getters.dPage + const { width: screenWidth, height: screenHeight } = pageStore.dPage let { width: imgWidth, height: imgHeight } = item if (!imgWidth || !imgHeight) { const actual = await getImage(item.url) @@ -39,11 +42,11 @@ export default async function setItem2Data(item: TItem2DataParam): Promise void type TAddEventObj = { diff --git a/src/components/business/cropper/CropImage/CropImage.vue b/src/components/business/cropper/CropImage/CropImage.vue index 907f00a..6348ed0 100644 --- a/src/components/business/cropper/CropImage/CropImage.vue +++ b/src/components/business/cropper/CropImage/CropImage.vue @@ -23,17 +23,16 @@ import api from '@/api' import { ElDialog } from 'element-plus' import { ref, defineComponent, toRefs, reactive, nextTick } from 'vue' -import { useStore } from 'vuex' +// import { useStore } from 'vuex' import 'cropperjs/dist/cropper.css' import Cropper from 'cropperjs' -import { storeToRefs } from 'pinia' import { useControlStore } from '@/pinia' export default defineComponent({ components: { ElDialog }, emits: ['done'], setup(props, context) { - const store = useStore() + // const store = useStore() const state = reactive({ loading: false, url: '', diff --git a/src/components/business/cropper/CropImage/index.vue b/src/components/business/cropper/CropImage/index.vue index b188884..853ee46 100644 --- a/src/components/business/cropper/CropImage/index.vue +++ b/src/components/business/cropper/CropImage/index.vue @@ -23,7 +23,7 @@ import api from '@/api' import { ElDialog } from 'element-plus' import { ref, reactive, nextTick, toRefs } from 'vue' -import { useStore } from 'vuex' +// import { useStore } from 'vuex' import 'cropperjs/dist/cropper.css' import Cropper from 'cropperjs' import { useControlStore } from '@/pinia' @@ -41,7 +41,7 @@ type TOpenItem = { imgUrl: string } -const store = useStore() +// const store = useStore() const controlStore = useControlStore() const state = reactive({ loading: false, diff --git a/src/components/business/image-cutout/ImageCutout/index.vue b/src/components/business/image-cutout/ImageCutout/index.vue index 3e91bca..603c106 100644 --- a/src/components/business/image-cutout/ImageCutout/index.vue +++ b/src/components/business/image-cutout/ImageCutout/index.vue @@ -41,7 +41,7 @@ diff --git a/src/components/business/moveable/Selecto.ts b/src/components/business/moveable/Selecto.ts index bad2aea..4f6ca1b 100644 --- a/src/components/business/moveable/Selecto.ts +++ b/src/components/business/moveable/Selecto.ts @@ -1,8 +1,10 @@ import Selecto from 'selecto' -import { getElementInfo } from 'moveable' -import store from '@/store' +import Moveable, { getElementInfo } from 'moveable' +// import store from '@/store' +import { useWidgetStore } from '@/pinia' -export default function(moveable: any) { +export default function(moveable: Moveable) { + const widgetStore = useWidgetStore() const selecto = new Selecto({ container: document.getElementById('page-design'), selectableTargets: ['.layer'], @@ -23,16 +25,22 @@ export default function(moveable: any) { e.added.forEach((el) => { if (!Array.from(el.classList).includes('layer-lock') && !el.hasAttribute('child')) { el.classList.add('widget-selected') - store.dispatch('selectWidgetsInOut', { - uuid: el.getAttribute('data-uuid'), + widgetStore.selectWidgetsInOut({ + uuid: el.getAttribute('data-uuid') || "", }) + // store.dispatch('selectWidgetsInOut', { + // uuid: el.getAttribute('data-uuid'), + // }) } }) e.removed.forEach((el) => { el.classList.remove('widget-selected') - store.dispatch('selectWidgetsInOut', { - uuid: el.getAttribute('data-uuid'), + widgetStore.selectWidgetsInOut({ + uuid: el.getAttribute('data-uuid') || "", }) + // store.dispatch('selectWidgetsInOut', { + // uuid: el.getAttribute('data-uuid'), + // }) }) moveable.renderDirections = [] // ['nw', 'ne', 'sw', 'se'] // [] moveable.rotatable = false diff --git a/src/components/business/picture-selector/index.vue b/src/components/business/picture-selector/index.vue index 3b7671b..48c46d4 100644 --- a/src/components/business/picture-selector/index.vue +++ b/src/components/business/picture-selector/index.vue @@ -32,7 +32,7 @@ diff --git a/src/components/modules/panel/wrap/PhotoListWrap.vue b/src/components/modules/panel/wrap/PhotoListWrap.vue index 6ed8539..08c3914 100644 --- a/src/components/modules/panel/wrap/PhotoListWrap.vue +++ b/src/components/modules/panel/wrap/PhotoListWrap.vue @@ -31,10 +31,10 @@ import { toRefs, reactive, computed, onMounted } from 'vue' // import wImage from '../../widgets/wImage/wImage.vue' import wImageSetting from '../../widgets/wImage/wImageSetting' import api from '@/api' -import { useStore } from 'vuex' +// import { useStore } from 'vuex' import setImageData from '@/common/methods/DesignFeatures/setImage' import { storeToRefs } from 'pinia' -import { useControlStore, usePageStore } from '@/pinia' +import { useControlStore, usePageStore, useWidgetStore } from '@/pinia' import { TGetImageListResult } from '@/api/material' type TProps = { @@ -57,8 +57,9 @@ type TCurrentCategory = { const props = defineProps() -const store = useStore() +// const store = useStore() const controlStore = useControlStore() +const widgetStore = useWidgetStore() const { dPage } = storeToRefs(usePageStore()) const state = reactive({ @@ -96,7 +97,9 @@ const selectImg = async (index: number, list: TGetImageListResult[]) => { const { width: pW, height: pH } = dPage.value setting.left = pW / 2 - img.width / 2 setting.top = pH / 2 - img.height / 2 - store.dispatch('addWidget', setting) + + widgetStore.addWidget(setting) + // store.dispatch('addWidget', setting) } const getDataList = async () => { @@ -114,7 +117,9 @@ const getDataList = async () => { const dragStart = (index: number, list: TGetImageListResult[]) => { const item = list ? list[index] : state.recommendImgList[index] - store.commit('selectItem', { data: { value: item }, type: 'image' }) + + widgetStore.setSelectItem({ data: { value: item }, type: 'image' }) + // store.commit('selectItem', { data: { value: item }, type: 'image' }) } const searchChange = (e: Event) => { diff --git a/src/components/modules/panel/wrap/TempListWrap.vue b/src/components/modules/panel/wrap/TempListWrap.vue index c3be94c..c070f4e 100644 --- a/src/components/modules/panel/wrap/TempListWrap.vue +++ b/src/components/modules/panel/wrap/TempListWrap.vue @@ -23,16 +23,16 @@ diff --git a/src/components/modules/widgets/wImage/wImage.vue b/src/components/modules/widgets/wImage/wImage.vue index 68fefb7..2885cba 100644 --- a/src/components/modules/widgets/wImage/wImage.vue +++ b/src/components/modules/widgets/wImage/wImage.vue @@ -35,14 +35,14 @@ // 图片组件 // const NAME = 'w-image' import { CSSProperties, StyleValue, computed, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue' -import { mapGetters, mapActions, useStore } from 'vuex' +// import { mapGetters, mapActions, useStore } from 'vuex' import { getMatrix } from '@/common/methods/handleTransform' import setting from "./wImageSetting" import PointImg from '@/utils/plugins/pointImg' -import { useSetupMapGetters } from '@/common/hooks/mapGetters' +// import { useSetupMapGetters } from '@/common/hooks/mapGetters' import { useRoute } from 'vue-router' import { storeToRefs } from 'pinia' -import { useCanvasStore, useControlStore } from '@/pinia' +import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/pinia' type TProps = { params: typeof setting @@ -83,20 +83,26 @@ const state = reactive({ }) const route = useRoute() -const store = useStore() +// const store = useStore() const controlStore = useControlStore() +const widgetStore = useWidgetStore() +const forceStore = useForceStore() const widgetRef = ref(null) const targetRef = ref(null) let rotateTemp: number | null = null let flipTemp: string | null = null -let locksTemp: string[] | null = null +let locksTemp: boolean[] | null = null -const { - dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid -} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']) +// const { +// dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid +// } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']) const { dZoom } = storeToRefs(useCanvasStore()) +const { + dActiveElement, dWidgets, dMouseXY, dDropOverUuid +} = storeToRefs(widgetStore) +const { dCropUuid } = storeToRefs(controlStore) // ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']), const cropEdit = computed(() => { @@ -137,7 +143,8 @@ watch( onUpdated(() => { updateRecord() - store.commit('updateRect') + forceStore.setUpdateRect() + // store.commit('updateRect') }) onMounted(async () => { @@ -218,8 +225,8 @@ function move(payload?: MouseEvent) { } function updateRecord() { - if (dActiveElement.value.uuid === props.params.uuid) { - let record = dActiveElement.value.record + if (dActiveElement.value?.uuid === props.params.uuid) { + let record = dActiveElement.value?.record if (widgetRef.value) { record.width = widgetRef.value.offsetWidth record.height = widgetRef.value.offsetHeight @@ -247,14 +254,14 @@ function setTransform(attrName: string, value: string | number) { } else { setValue = props.params.transform + ` ${attrName}(${value})` } - store.dispatch("updateWidgetData", { + widgetStore.updateWidgetData({ uuid: props.params.uuid, key: 'transform', value: setValue, pushHistory: false, }) - // updateWidgetData({ - // uuid: this.params.uuid, + // store.dispatch("updateWidgetData", { + // uuid: props.params.uuid, // key: 'transform', // value: setValue, // pushHistory: false, @@ -317,7 +324,7 @@ function lockOthers() { } else { locksTemp = [] for (const widget of dWidgets.value) { - locksTemp.push(widget.lock) + locksTemp.push(widget?.lock || false) } dWidgets.value.forEach((widget: any) => { widget.uuid != props.params.uuid && (widget.lock = true) diff --git a/src/components/modules/widgets/wImage/wImageStyle.vue b/src/components/modules/widgets/wImage/wImageStyle.vue index fe4de94..c302122 100644 --- a/src/components/modules/widgets/wImage/wImageStyle.vue +++ b/src/components/modules/widgets/wImage/wImageStyle.vue @@ -72,7 +72,7 @@ // 图片组件样式 // const NAME = 'w-image-style' import { nextTick, reactive, ref, watch, onBeforeUnmount } from 'vue' -import { useStore } from 'vuex' +// import { useStore } from 'vuex' import numberInput from '../../settings/numberInput.vue' import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue' import numberSlider from '../../settings/numberSlider.vue' @@ -86,11 +86,14 @@ import layerIconList from '@/assets/data/LayerIconList' import alignIconList from '@/assets/data/AlignListData' import picBox from '@/components/business/picture-selector' import imageCutout from '@/components/business/image-cutout' -import { useSetupMapGetters } from '@/common/hooks/mapGetters' +// import { useSetupMapGetters } from '@/common/hooks/mapGetters' import wImageSetting, { TImageSetting } from './wImageSetting' import { TGetImageListResult } from '@/api/material' import { storeToRefs } from 'pinia' -import { useControlStore } from '@/pinia' +import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/pinia' +import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget' +import { TupdateLayerIndexData } from '@/pinia/design/widget/actions/layer' +import { TUpdateAlignData } from '@/pinia/design/widget/actions/align' type TState = { picBoxShow: boolean @@ -132,15 +135,17 @@ const state = reactive({ const picBoxRef = ref(null) const imageCutoutRef = ref(null) -const store = useStore() -const { - dActiveElement, dWidgets -} = useSetupMapGetters(['dActiveElement', 'dWidgets']) +// const store = useStore() +const widgetStore = useWidgetStore() +const forceStore = useForceStore() +const canvasStore = useCanvasStore() +// const { +// dActiveElement, dWidgets +// } = useSetupMapGetters(['dActiveElement', 'dWidgets']) const controlStore = useControlStore() const { dMoving } = storeToRefs(controlStore) -// computed: { -// ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']), -// }, +const { dActiveElement, dWidgets } = storeToRefs(widgetStore) + let lastUuid: string | undefined = undefined let tag: boolean @@ -155,6 +160,7 @@ watch( () => dActiveElement.value, (newValue, oldValue) => { change() + if (!newValue) return // 失焦取消编辑模式 if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') { imgCrop(false) @@ -196,34 +202,38 @@ function changeValue() { } for (let key in state.innerElement) { if (state.ingoreKeys.indexOf(key) !== -1) { - dActiveElement.value[key] = state.innerElement[(key as keyof TImageSetting)] - } else if (key !== 'cropEdit' && key !== 'record' && state.innerElement[(key as keyof TImageSetting)] !== dActiveElement.value[key]) { - store.dispatch('updateWidgetData', { - uuid: dActiveElement.value.uuid, - key: key, - value: state.innerElement[(key as keyof TImageSetting)], + (dActiveElement.value as Record)[key] = state.innerElement[(key as keyof TImageSetting)] + } else if ( + key !== 'cropEdit' && key !== 'record' && + state.innerElement[(key as keyof TImageSetting)] !== (dActiveElement.value as Record)[key] + ) { + widgetStore.updateWidgetData({ + uuid: dActiveElement.value?.uuid || "", + key: (key as TUpdateWidgetPayload['key']), + value: (state.innerElement[(key as keyof TImageSetting)] as TUpdateWidgetPayload['value']), }) - // updateWidgetData({ - // uuid: this.dActiveElement.uuid, + // store.dispatch('updateWidgetData', { + // uuid: dActiveElement.value.uuid, // key: key, - // value: this.innerElement[key], + // value: state.innerElement[(key as keyof TImageSetting)], // }) } } } function finishSliceData(key: string, value: number | number[]) { + if (!dActiveElement.value) return const data = dActiveElement.value.sliceData if (data) { data[key] = value - store.dispatch('updateWidgetData', { + widgetStore.updateWidgetData({ uuid: dActiveElement.value.uuid, key: 'sliceData', value: data, pushHistory: true, }) - // updateWidgetData({ - // uuid: dActiveElement.uuid, + // store.dispatch('updateWidgetData', { + // uuid: dActiveElement.value.uuid, // key: 'sliceData', // value: data, // pushHistory: true, @@ -232,14 +242,14 @@ function finishSliceData(key: string, value: number | number[]) { } function finish(key: string = "", value: string | number | (string | number)[] | null = "") { - store.dispatch('updateWidgetData', { - uuid: dActiveElement.value.uuid, - key: key, - value: value, + widgetStore.updateWidgetData({ + uuid: dActiveElement.value?.uuid || "", + key: (key as TUpdateWidgetPayload['key']), + value: value as TUpdateWidgetPayload['value'], pushHistory: true, }) - // this.updateWidgetData({ - // uuid: this.dActiveElement.uuid, + // store.dispatch('updateWidgetData', { + // uuid: dActiveElement.value.uuid, // key: key, // value: value, // pushHistory: true, @@ -248,30 +258,31 @@ function finish(key: string = "", value: string | number | (string | number)[] | function layerAction(item: TIconItemSelectData) { if (item.key === 'zIndex') { - store.dispatch("updateLayerIndex", { - uuid: dActiveElement.value.uuid, - value: item.value, + widgetStore.updateLayerIndex({ + uuid: dActiveElement.value?.uuid || "", + value: (item.value as TupdateLayerIndexData['value']), }) - // this.updateLayerIndex({ - // uuid: this.dActiveElement.uuid, + // store.dispatch("updateLayerIndex", { + // uuid: dActiveElement.value.uuid, // value: item.value, // }) } else { - finish(item.key || "", item.value === dActiveElement.value.flip ? null : item.value) + finish(item.key || "", item.value === dActiveElement.value?.flip ? null : item.value) } } async function alignAction(item: TIconItemSelectData) { - store.dispatch("updateAlign", { - align: item.value, - uuid: dActiveElement.value.uuid, + widgetStore.updateAlign({ + align: (item.value as TUpdateAlignData['align']), + uuid: dActiveElement.value?.uuid || "", }) - // this.updateAlign({ + // store.dispatch("updateAlign", { // align: item.value, - // uuid: this.dActiveElement.uuid, + // uuid: dActiveElement.value.uuid, // }) await nextTick() - store.commit('updateRect') + forceStore.setUpdateRect() + // store.commit('updateRect') } function openCropper() { @@ -311,8 +322,8 @@ function openCropper() { async function selectDone(img: TGetImageListResult) { state.innerElement.imgUrl = img.url const loadImg = await getImage(img.url) - state.innerElement.width = loadImg.width * store.getters.dZoom / 100 - state.innerElement.height = loadImg.height * store.getters.dZoom / 100 + state.innerElement.width = loadImg.width * canvasStore.dZoom / 100 + state.innerElement.height = loadImg.height * canvasStore.dZoom / 100 // this.imgCrop(true) } @@ -331,7 +342,8 @@ function imgCrop(val: boolean) { function cropHandle() { - store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1) + controlStore.setCropUuid(state.innerElement.cropEdit ? state.innerElement.uuid : '-1') + // store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1) } // 图库选择器 diff --git a/src/components/modules/widgets/wQrcode/wQrcode.vue b/src/components/modules/widgets/wQrcode/wQrcode.vue index e9396a6..0c6fac9 100644 --- a/src/components/modules/widgets/wQrcode/wQrcode.vue +++ b/src/components/modules/widgets/wQrcode/wQrcode.vue @@ -35,12 +35,14 @@ // 图片组件 // const NAME = 'w-qrcode' -import { mapGetters, mapActions, useStore } from 'vuex' +// import { mapGetters, mapActions, useStore } from 'vuex' import QRCode from '@/components/business/qrcode' import { TWQrcodeSetting } from './wQrcodeSetting'; import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue'; -import { useSetupMapGetters } from '@/common/hooks/mapGetters'; +// import { useSetupMapGetters } from '@/common/hooks/mapGetters'; import { Options } from 'qr-code-styling'; +import { useForceStore, useWidgetStore } from '@/pinia'; +import { storeToRefs } from 'pinia'; type TProps = { params: TWQrcodeSetting & { @@ -57,12 +59,15 @@ type TState = { qrCodeOptions: Options } -const store = useStore() +// const store = useStore() +const forceStore = useForceStore() +const widgetStore = useWidgetStore() const props = defineProps() const state = reactive({ qrCodeOptions: {} }) -const { dActiveElement } = useSetupMapGetters(['dActiveElement']) +// const { dActiveElement } = useSetupMapGetters(['dActiveElement']) +const { dActiveElement } = storeToRefs(widgetStore) const width = computed(() => Number(props.params.width)) const widgetRef = ref(null) @@ -76,7 +81,8 @@ watch( onUpdated(() => { updateRecord() - store.commit('updateRect') + forceStore.setUpdateRect() + // store.commit('updateRect') }) onMounted(async () => { @@ -88,8 +94,8 @@ onMounted(async () => { }) // ...mapActions(['updateWidgetData']), function updateRecord() { - if (dActiveElement.value.uuid === props.params.uuid) { - let record = dActiveElement.value.record + if (dActiveElement.value?.uuid === props.params.uuid) { + let record = dActiveElement.value?.record if (!widgetRef.value) return record.width = widgetRef.value.offsetWidth record.height = widgetRef.value.offsetHeight diff --git a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue index 660567a..908ba23 100644 --- a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue +++ b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue @@ -58,7 +58,7 @@ // 图片组件样式 // const NAME = 'w-image-style' import { nextTick, reactive, watch } from 'vue' -import { useStore } from 'vuex' +// import { useStore } from 'vuex' import { ElSelect, ElOption } from 'element-plus' import numberInput from '../../settings/numberInput.vue' import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue' @@ -72,9 +72,11 @@ import uploader, { TUploadDoneData } from '@/components/common/Uploader/index.vu import layerIconList from '@/assets/data/LayerIconList' import alignIconList from '@/assets/data/AlignListData' import { wQrcodeSetting, TWQrcodeSetting } from './wQrcodeSetting' -import { useSetupMapGetters } from '@/common/hooks/mapGetters' +// import { useSetupMapGetters } from '@/common/hooks/mapGetters' import { storeToRefs } from 'pinia' -import { useControlStore } from '@/pinia' +import { useControlStore, useForceStore, useWidgetStore } from '@/pinia' +import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget' +import { TUpdateAlignData } from '@/pinia/design/widget/actions/align' type TState = { activeNames: string[] @@ -96,15 +98,17 @@ const state = reactive({ localization, }) -const store = useStore() +// const store = useStore() const controlStore = useControlStore() +const widgetStore = useWidgetStore() +const forceStore = useForceStore() -const { - dActiveElement, dWidgets -} = useSetupMapGetters(['dActiveElement', 'dWidgets']) +// const { +// dActiveElement, dWidgets +// } = useSetupMapGetters(['dActiveElement', 'dWidgets']) const { dMoving } = storeToRefs(useControlStore()) -// ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']) +const { dActiveElement, dWidgets } = storeToRefs(widgetStore) let lastUuid: string | null = null @@ -112,16 +116,17 @@ watch( () => dActiveElement.value, (newValue, oldValue) => { change() + if (!newValue) return // 失焦取消编辑模式 - if (newValue.uuid == -1) { + if (Number(newValue.uuid) == -1) { state.innerElement.cropEdit = false - store.dispatch("updateWidgetData", { - uuid: lastUuid, + widgetStore.updateWidgetData({ + uuid: lastUuid ?? "", key: 'cropEdit', value: false, }) - // this.updateWidgetData({ - // uuid: this.lastUuid, + // store.dispatch("updateWidgetData", { + // uuid: lastUuid, // key: 'cropEdit', // value: false, // }) @@ -163,31 +168,34 @@ function changeValue() { for (let key in state.innerElement) { const itemKey = key as keyof TWQrcodeSetting if (state.ingoreKeys.indexOf(key) !== -1) { - dActiveElement.value[itemKey] = state.innerElement[itemKey] - } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) { - store.dispatch("updateWidgetData", { - uuid: dActiveElement.value.uuid, - key: key, - value: state.innerElement[itemKey], + (dActiveElement.value as Record)[itemKey] = state.innerElement[itemKey] + } else if ( + key !== 'setting' && key !== 'record' && + state.innerElement[itemKey] !== (dActiveElement.value as Record)[itemKey] + ) { + widgetStore.updateWidgetData({ + uuid: dActiveElement.value?.uuid || "", + key: key as TUpdateWidgetPayload['key'], + value: state.innerElement[itemKey] as TUpdateWidgetPayload['value'], }) - // this.updateWidgetData({ - // uuid: this.dActiveElement.uuid, + // store.dispatch("updateWidgetData", { + // uuid: dActiveElement.value.uuid, // key: key, - // value: this.innerElement[key], + // value: state.innerElement[itemKey], // }) } } } function finish(key: string, value: number | number[] | string) { - store.dispatch("updateWidgetData", { - uuid: dActiveElement.value.uuid, - key: key, + widgetStore.updateWidgetData({ + uuid: dActiveElement.value?.uuid || '', + key: key as TUpdateWidgetPayload['key'], value: value, pushHistory: true, }) - // this.updateWidgetData({ - // uuid: this.dActiveElement.uuid, + // store.dispatch("updateWidgetData", { + // uuid: dActiveElement.value.uuid, // key: key, // value: value, // pushHistory: true, @@ -196,27 +204,29 @@ function finish(key: string, value: number | number[] | string) { function layerAction(item: TIconItemSelectData) { console.log(item) - store.dispatch("updateLayerIndex", { - uuid: dActiveElement.value.uuid, - value: item.value, + widgetStore.updateLayerIndex({ + uuid: dActiveElement.value?.uuid || "", + value: item.value as number, }) - // this.updateLayerIndex({ - // uuid: this.dActiveElement.uuid, + // store.dispatch("updateLayerIndex", { + // uuid: dActiveElement.value.uuid, // value: item.value, // }) } async function alignAction(item: TIconItemSelectData) { - store.dispatch("updateAlign", { - align: item.value, - uuid: dActiveElement.value.uuid, + widgetStore.updateAlign({ + align: item.value as TUpdateAlignData['align'], + uuid: dActiveElement.value?.uuid || "", }) - // this.updateAlign({ + // store.dispatch("updateAlign", { // align: item.value, - // uuid: this.dActiveElement.uuid, + // uuid: dActiveElement.value.uuid, // }) + await nextTick() - store.commit('updateRect') + forceStore.setUpdateRect() + // store.commit('updateRect') } async function uploadImgDone(img: TUploadDoneData) { diff --git a/src/components/modules/widgets/wSvg/wSvg.vue b/src/components/modules/widgets/wSvg/wSvg.vue index 1665d44..dc4f3ed 100644 --- a/src/components/modules/widgets/wSvg/wSvg.vue +++ b/src/components/modules/widgets/wSvg/wSvg.vue @@ -20,10 +20,13 @@ diff --git a/src/components/modules/widgets/wText/pageFontsFilter.ts b/src/components/modules/widgets/wText/pageFontsFilter.ts index 088e9f6..08f53c9 100644 --- a/src/components/modules/widgets/wText/pageFontsFilter.ts +++ b/src/components/modules/widgets/wText/pageFontsFilter.ts @@ -5,17 +5,19 @@ * @LastEditors: ShawnPhang * @LastEditTime: 2023-10-14 20:29:26 */ -import store from '@/store' +// import store from '@/store' +import { useWidgetStore } from '@/pinia' import { toRaw } from 'vue' export default () => { + const widgetStore = useWidgetStore() const collector = new Set() const fonts: Record = {} - const { dWidgets: widgets } = store.getters + const { dWidgets: widgets } = widgetStore for (let i = 0; i < widgets.length; i++) { const { type, fontClass } = widgets[i] if (type === 'w-text') { - collector.add(fontClass.id) - fonts[fontClass.id] = toRaw(fontClass) + fontClass && collector.add(fontClass.id) + fontClass && (fonts[fontClass.id] = toRaw(fontClass)) } } return Array.from(collector).map((id: string) => fonts[id]) diff --git a/src/components/modules/widgets/wText/wText.vue b/src/components/modules/widgets/wText/wText.vue index 49e8119..503c092 100644 --- a/src/components/modules/widgets/wText/wText.vue +++ b/src/components/modules/widgets/wText/wText.vue @@ -60,11 +60,12 @@ // const NAME = 'w-text' import { reactive, toRefs, computed, onUpdated, watch, onMounted, ref } from 'vue' -import { useStore } from 'vuex' +// import { useStore } from 'vuex' import { useRoute } from 'vue-router' import { fontWithDraw } from '@/utils/widgets/loadFontRule' import getGradientOrImg from './getGradientOrImg' import { wTextSetting } from './wTextSetting' +import { useForceStore, useHistoryStore, useWidgetStore } from '@/pinia' export type TwTextParams = { rotate?: number @@ -83,7 +84,10 @@ type TProps = { const props = defineProps() -const store = useStore() +// const store = useStore() +const widgetStore = useWidgetStore() +const forceStore = useForceStore() +const historyStore = useHistoryStore() const route = useRoute() const state = reactive({ loading: false, @@ -93,7 +97,7 @@ const state = reactive({ const widget = ref(null) const editWrap = ref(null) -const dActiveElement = computed(() => store.getters.dActiveElement) +const dActiveElement = computed(() => widgetStore.dActiveElement) const isDraw = computed(() => route.name === 'Draw' && fontWithDraw) onUpdated(() => { @@ -142,18 +146,24 @@ watch( watch( () => state.editable, (value) => { - store.dispatch('updateWidgetData', { - uuid: props.params.uuid, + widgetStore.updateWidgetData({ + uuid: String(props.params.uuid), key: 'editable', value, pushHistory: false, }) + // store.dispatch('updateWidgetData', { + // uuid: props.params.uuid, + // key: 'editable', + // value, + // pushHistory: false, + // }) }, ) function updateRecord() { if (!widget.value) return - if (dActiveElement.value.uuid === props.params.uuid) { + if (dActiveElement.value && dActiveElement.value.uuid === String(props.params.uuid)) { let record = dActiveElement.value.record record.width = widget.value.offsetWidth record.height = widget.value.offsetHeight @@ -166,12 +176,18 @@ function updateRecord() { function updateText(e?: Event) { const value = e && e.target ? (e.target as HTMLElement).innerHTML : props.params.text//.replace(/\n/g, '
') if (value !== props.params.text) { - store.dispatch('updateWidgetData', { - uuid: props.params.uuid, + widgetStore.updateWidgetData({ + uuid: String(props.params.uuid), key: 'text', value, pushHistory: false, }) + // store.dispatch('updateWidgetData', { + // uuid: props.params.uuid, + // key: 'text', + // value, + // pushHistory: false, + // }) } } @@ -180,19 +196,27 @@ function writingText(e?: Event) { // TODO: 修正文字选框高度 const el = editWrap.value || widget.value if (!el) return - store.dispatch('updateWidgetData', { - uuid: props.params.uuid, + widgetStore.updateWidgetData({ + uuid: String(props.params.uuid), key: 'height', value: el.offsetHeight, pushHistory: false, }) - store.commit('updateRect') + // store.dispatch('updateWidgetData', { + // uuid: props.params.uuid, + // key: 'height', + // value: el.offsetHeight, + // pushHistory: false, + // }) + forceStore.setUpdateRect() + // store.commit('updateRect') } function writeDone(e: Event) { state.editable = false setTimeout(() => { - store.dispatch('pushHistory', '文字修改') + historyStore.pushHistory("文字修改") + // store.dispatch('pushHistory', '文字修改') }, 100) updateText(e) } diff --git a/src/components/modules/widgets/wText/wTextStyle.vue b/src/components/modules/widgets/wText/wTextStyle.vue index ce9c275..2b58369 100644 --- a/src/components/modules/widgets/wText/wTextStyle.vue +++ b/src/components/modules/widgets/wText/wTextStyle.vue @@ -52,7 +52,7 @@ // 文本组件样式 const NAME = 'w-text-style' import { defineComponent, reactive, toRefs, computed, watch, nextTick, onMounted } from 'vue' -import { useStore } from 'vuex' +// import { useStore } from 'vuex' import { useRoute } from 'vue-router' import { styleIconList1, styleIconList2, alignIconList, TStyleIconData, TStyleIconData2 } from '@/assets/data/TextIconsData' import layerIconList from '@/assets/data/LayerIconList' @@ -67,7 +67,9 @@ import { useFontStore } from '@/common/methods/fonts' import usePageFontsFilter from './pageFontsFilter' import { wTextSetting ,TwTextData } from './wTextSetting'; import { storeToRefs } from 'pinia'; -import { useControlStore } from '@/pinia'; +import { useControlStore, useForceStore, useWidgetStore } from '@/pinia'; +import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'; +import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'; type TState = { activeNames: string[], @@ -84,7 +86,9 @@ type TState = { alignIconList: TIconItemSelectData[], } -const store = useStore() +// const store = useStore() +const widgetStore = useWidgetStore() +const forceStore = useForceStore() const route = useRoute() const state = reactive({ activeNames: [], @@ -100,7 +104,7 @@ const state = reactive({ styleIconList2, alignIconList, }) -const dActiveElement = computed(() => store.getters.dActiveElement) +const dActiveElement = computed(() => widgetStore.dActiveElement) // const dMoving = computed(() => store.getters.dMoving) const { dMoving } = storeToRefs(useControlStore()) @@ -148,22 +152,32 @@ function changeValue() { for (let key in state.innerElement) { const itemKey = key as keyof TwTextData if (state.ingoreKeys.indexOf(itemKey) !== -1) { - dActiveElement.value[itemKey] = state.innerElement[itemKey] - } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) { + (dActiveElement.value as Record)[itemKey] = state.innerElement[itemKey] + } else if ( + key !== 'setting' && key !== 'record' && + state.innerElement[itemKey] !== (dActiveElement.value as Record)[itemKey] + ) { // const pushHistory = !['textEffects', 'transformData', 'fontClass'].includes(key) - store.dispatch('updateWidgetData', { - uuid: dActiveElement.value.uuid, - key, + widgetStore.updateWidgetData({ + uuid: dActiveElement.value?.uuid || '', + key: key as TUpdateWidgetPayload['key'], value: state.innerElement[itemKey], pushHistory: false, }) + // store.dispatch('updateWidgetData', { + // uuid: dActiveElement.value.uuid, + // key, + // value: state.innerElement[itemKey], + // pushHistory: false, + // }) } } } function selectTextEffect({ key, value, style }: any) { - const uuid = dActiveElement.value.uuid - store.commit('setWidgetStyle', { uuid, key, value }) + const uuid = dActiveElement.value?.uuid || '' + widgetStore.setWidgetStyle({ uuid, key, value }) + // store.commit('setWidgetStyle', { uuid, key, value }) if (style) { finish('color', style.color || '') } @@ -182,22 +196,32 @@ function loadFonts() { } function finish(key: string, value: number | Record | string) { - store.dispatch('updateWidgetData', { - uuid: dActiveElement.value.uuid, - key, + widgetStore.updateWidgetData({ + uuid: dActiveElement.value?.uuid || '', + key: key as TUpdateWidgetPayload['key'], value, pushHistory: false, }) + // store.dispatch('updateWidgetData', { + // uuid: dActiveElement.value.uuid, + // key, + // value, + // pushHistory: false, + // }) setTimeout(() => { key === 'fontClass' && (state.fontClassList['当前页面'] = usePageFontsFilter()) }, 300) } function layerAction(item: TIconItemSelectData) { - store.dispatch('updateLayerIndex', { - uuid: dActiveElement.value.uuid, - value: item.value, + widgetStore.updateLayerIndex({ + uuid: dActiveElement.value?.uuid || '', + value: Number(item.value), }) + // store.dispatch('updateLayerIndex', { + // uuid: dActiveElement.value.uuid, + // value: item.value, + // }) } async function textStyleAction(item: TIconItemSelectData) { @@ -206,16 +230,22 @@ async function textStyleAction(item: TIconItemSelectData) { // TODO: 对竖版文字的特殊处理 item.key === 'writingMode' && relationChange() await nextTick() - store.commit('updateRect') + forceStore.setUpdateRect() + // store.commit('updateRect') } async function alignAction(item: TIconItemSelectData) { - store.dispatch('updateAlign', { - align: item.value, - uuid: dActiveElement.value.uuid, + widgetStore.updateAlign({ + align: item.value as TUpdateAlignData['align'], + uuid: dActiveElement.value?.uuid || '', }) + // store.dispatch('updateAlign', { + // align: item.value, + // uuid: dActiveElement.value.uuid, + // }) await nextTick() - store.commit('updateRect') + forceStore.setUpdateRect() + // store.commit('updateRect') } function changeStyleIconList() { @@ -250,7 +280,7 @@ function changeStyleIconList() { function relationChange() { setTimeout(() => { - if (dActiveElement.value.writingMode) { + if (dActiveElement.value && dActiveElement.value.writingMode) { const w_record = dActiveElement.value.width state.innerElement.width = dActiveElement.value.height state.innerElement.height = w_record diff --git a/src/main.ts b/src/main.ts index 4ffcd44..2a120be 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,7 +8,7 @@ import { createApp } from 'vue' import App from './App.vue' import router from './router' -import store from './store' +// import store from './store' import utils from './utils' import 'normalize.css/normalize.css' import '@/assets/styles/index.less' @@ -27,7 +27,7 @@ elementConfig.plugins.forEach((plugin) => { }) app - .use(store) + // .use(store) .use(pinia) .use(router) .use(utils) diff --git a/src/mixins/methods/dealWithCtrl.ts b/src/mixins/methods/dealWithCtrl.ts index abb3085..1782f32 100644 --- a/src/mixins/methods/dealWithCtrl.ts +++ b/src/mixins/methods/dealWithCtrl.ts @@ -5,15 +5,17 @@ * @LastEditors: ShawnPhang * @LastEditTime: 2024-03-15 17:34:51 */ -import store from '@/store' +// import store from '@/store' import handlePaste from './handlePaste' -import { useHistoryStore } from '@/pinia' +import { useGroupStore, useHistoryStore, useWidgetStore } from '@/pinia' -export default function dealWithCtrl(e: any, _this: any) { +export default function dealWithCtrl(e: KeyboardEvent, _this: any) { + const groupStore = useGroupStore() switch (e.keyCode) { case 71: // g e.preventDefault() - store.dispatch('realCombined') + groupStore.realCombined() + // store.dispatch('realCombined') break case 67: // c copy() @@ -43,8 +45,9 @@ export default function dealWithCtrl(e: any, _this: any) { * 对组合的子元素某个值进行判断 */ function checkGroupChild(pid: number | string, key: any) { + const widgetStore = useWidgetStore() let itHas = false - const childs = store.getters.dWidgets.filter((x: any) => x.parent === pid) || [] + const childs = widgetStore.dWidgets.filter((x: any) => x.parent === pid) || [] childs.forEach((element: any) => { element[key] && (itHas = true) }) @@ -54,24 +57,27 @@ function checkGroupChild(pid: number | string, key: any) { * 复制元素 */ function copy() { - if (store.getters.dActiveElement.uuid === '-1') { + const widgetStore = useWidgetStore() + if (widgetStore.dActiveElement?.uuid === '-1') { return - } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) { + } else if (widgetStore.dActiveElement?.isContainer && checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) { return } - !store.getters.dActiveElement.editable && store.dispatch('copyWidget') + !widgetStore.dActiveElement?.editable && widgetStore.copyWidget() + // !widgetStore.dActiveElement?.editable && store.dispatch('copyWidget') } /** * 粘贴 */ function paste() { handlePaste().then(() => { - if (store.getters.dCopyElement.length === 0) { + const widgetStore = useWidgetStore() + if (widgetStore.dCopyElement.length === 0) { return - } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) { + } else if (widgetStore.dActiveElement?.isContainer && checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) { return } - !store.getters.dActiveElement.editable && store.dispatch('pasteWidget') + !widgetStore.dActiveElement?.editable && widgetStore.pasteWidget() }) } /** @@ -79,7 +85,7 @@ function paste() { */ function undo(shiftKey: any) { const historyStore = useHistoryStore() - console.log(store.getters.dHistoryParams); + console.log(historyStore.dHistoryParams); if (shiftKey) { if (!(historyStore.dHistoryParams.index === historyStore.dHistoryParams.length - 1)) { @@ -88,6 +94,7 @@ function undo(shiftKey: any) { } } else if (historyStore.dHistoryParams.index !== -1) { // this.handleHistory('undo') - store.dispatch('handleHistory', 'undo') + historyStore.handleHistory('undo') + // store.dispatch('handleHistory', 'undo') } } diff --git a/src/mixins/methods/handlePaste.ts b/src/mixins/methods/handlePaste.ts index e80d2b0..58dd65e 100644 --- a/src/mixins/methods/handlePaste.ts +++ b/src/mixins/methods/handlePaste.ts @@ -11,7 +11,7 @@ // console.log('主动粘贴', clipdata.getData('text/plain')) // }) -import store from '@/store' +// import store from '@/store' import api from '@/api' import Qiniu from '@/common/methods/QiNiu' import _config from '@/config' @@ -20,18 +20,19 @@ import { getImage } from '@/common/methods/getImgDetail' import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting' import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting' import eventBus from '@/utils/plugins/eventBus' -import { useControlStore, usePageStore } from '@/pinia' +import { useControlStore, usePageStore, useWidgetStore } from '@/pinia' // import wText from '@/components/modules/widgets/wText/wText.vue' export default () => { return new Promise((resolve) => { const pageStore = usePageStore() + const widgetStore = useWidgetStore() const controlStore = useControlStore() navigator.clipboard .read() - .then(async (dataTransfer: any) => { - if (store.getters.dActiveElement.editable) { + .then(async (dataTransfer: ClipboardItems) => { + if (widgetStore.dActiveElement?.editable) { return } for (let i = 0; i < dataTransfer.length; i++) { @@ -41,8 +42,8 @@ export default () => { const file = new File([imageBlob], 'screenshot.png', { type: 'image/png' }) // 上传图片 const qnOptions = { bucket: 'xp-design', prePath: 'user' } - const result: any = await Qiniu.upload(file, qnOptions) - const { width, height }: any = await getImage(file) + const result = await Qiniu.upload(file, qnOptions) + const { width, height } = await getImage(file) const url = _config.IMG_URL + result.key await api.material.addMyPhoto({ width, height, url }) // 刷新用户列表 @@ -58,7 +59,10 @@ export default () => { const { width: pW, height: pH } = pageStore.dPage setting.left = pW / 2 - width / 2 setting.top = pH / 2 - height / 2 - store.dispatch('addWidget', setting) + + widgetStore.addWidget(setting) + // store.dispatch('addWidget', setting) + // 清空剪贴板，防止多次上传图片 navigator.clipboard.write([ new ClipboardItem({ @@ -67,7 +71,8 @@ export default () => { ]) // 最后尝试复制，将图片替换为图片组件 setTimeout(() => { - store.dispatch('copyWidget') + widgetStore.copyWidget() + // store.dispatch('copyWidget') }, 100) break } else if (item.types.toString().indexOf('text') !== -1) { @@ -76,7 +81,9 @@ export default () => { const setting = JSON.parse(JSON.stringify(wTextSetting)) setting.text = await navigator.clipboard.readText() - store.dispatch('addWidget', setting) + + widgetStore.addWidget(setting) + // store.dispatch('addWidget', setting) break } else resolve() } diff --git a/src/mixins/methods/keyCodeOptions.ts b/src/mixins/methods/keyCodeOptions.ts index 1e2ca73..521831b 100644 --- a/src/mixins/methods/keyCodeOptions.ts +++ b/src/mixins/methods/keyCodeOptions.ts @@ -5,12 +5,14 @@ * @LastEditors: ShawnPhang * @LastEditTime: 2023-11-30 10:09:55 */ -import { useControlStore } from '@/pinia' -import store from '@/store' +import { useControlStore, useWidgetStore } from '@/pinia' +import { TdWidgetData } from '@/pinia/design/widget' +// import store from '@/store' export default function keyCodeOptions(e: any, params: any) { const { f } = params const controlStore = useControlStore() + const widgetStore = useWidgetStore() switch (e.keyCode) { case 38: @@ -28,17 +30,22 @@ export default function keyCodeOptions(e: any, params: any) { case 46: case 8: { - if (store.getters.dActiveElement.isContainer) { - if (checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) { + if (widgetStore.dActiveElement?.isContainer) { + if (checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) { return } } - const { type, editable }: any = store.getters.dActiveElement + if (!widgetStore.dActiveElement) return + const { type, editable } = widgetStore.dActiveElement if (type === 'w-text') { // 不在编辑状态则执行删除 - !editable && controlStore.showMoveable && store.dispatch('deleteWidget') - } else store.dispatch('deleteWidget') + !editable && controlStore.showMoveable && widgetStore.deleteWidget() + // !editable && controlStore.showMoveable && store.dispatch('deleteWidget') + } else { + widgetStore.deleteWidget() + // store.dispatch('deleteWidget') + } } break } @@ -46,10 +53,11 @@ export default function keyCodeOptions(e: any, params: any) { /** * 对组合的子元素某个值进行判断 */ -function checkGroupChild(pid: number | string, key: any) { +function checkGroupChild(pid: number | string, key: keyof TdWidgetData) { + const widgetStore = useWidgetStore() let itHas = false - const childs = store.getters.dWidgets.filter((x: any) => x.parent === pid) || [] - childs.forEach((element: any) => { + const childs = widgetStore.dWidgets.filter((x) => x.parent === pid) || [] + childs.forEach((element) => { element[key] && (itHas = true) }) return itHas @@ -57,20 +65,28 @@ function checkGroupChild(pid: number | string, key: any) { /** * TODO 键盘操作上下左右移动组件 */ -function udlr(type: any, value: any, event: any) { - if (store.getters.dActiveElement.uuid != -1) { - if (store.getters.dActiveElement.editable) { +function udlr(type: keyof TdWidgetData, value: any, event: any) { + const widgetStore = useWidgetStore() + if (!widgetStore.dActiveElement) return + if (Number(widgetStore.dActiveElement.uuid) != -1) { + if (widgetStore.dActiveElement.editable) { return - } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) { + } else if (widgetStore.dActiveElement.isContainer && checkGroupChild(widgetStore.dActiveElement.uuid, 'editable')) { return } event.preventDefault() - const result = Number(store.getters.dActiveElement[type]) + value - store.dispatch('updateWidgetData', { - uuid: store.getters.dActiveElement.uuid, + const result = Number(widgetStore.dActiveElement[type]) + value + widgetStore.updateWidgetData({ + uuid: widgetStore.dActiveElement.uuid, key: type, value: result, }) + // store.dispatch('updateWidgetData', { + // uuid: store.getters.dActiveElement.uuid, + // key: type, + // value: result, + // }) + // TODO: 键盘移位需要防抖入栈 // timer = setTimeout(() => { // this.pushHistory() diff --git a/src/mixins/move.ts b/src/mixins/move.ts index 5dfb15b..0d8f271 100644 --- a/src/mixins/move.ts +++ b/src/mixins/move.ts @@ -5,22 +5,29 @@ * @LastEditors: ShawnPhang * @LastEditTime: 2023-07-31 09:31:52 */ -import { useControlStore } from '@/pinia' -import store from '@/store' +import { useControlStore, useWidgetStore } from '@/pinia' +// import store from '@/store' const move = { methods: { initmovement(e: any) { // let target = store.state.pageDesign.dActiveElement - const target = store.getters.dActiveElement - + const widgetStore = useWidgetStore() + const target = widgetStore.dActiveElement + if (!target) return // 设置移动状态初始值 - store.dispatch('initDMove', { + widgetStore.initDMove({ startX: e.pageX, startY: e.pageY, originX: target.left, originY: target.top, }) + // store.dispatch('initDMove', { + // startX: e.pageX, + // startY: e.pageY, + // originX: target.left, + // originY: target.top, + // }) // 绑定鼠标移动事件 document.addEventListener('mousemove', this.handlemousemove, true) @@ -29,20 +36,27 @@ const move = { document.addEventListener('mouseup', this.handlemouseup, true) }, - handlemousemove(e: any) { + handlemousemove(e: MouseEvent) { + const widgetStore = useWidgetStore() e.stopPropagation() e.preventDefault() - store.dispatch('dMove', { + widgetStore.dMove({ x: e.pageX, y: e.pageY, }) + // store.dispatch('dMove', { + // x: e.pageX, + // y: e.pageY, + // }) }, handlemouseup() { + const controlStore = useControlStore() document.removeEventListener('mousemove', this.handlemousemove, true) document.removeEventListener('mouseup', this.handlemouseup, true) - store.dispatch('stopDMove') + controlStore.stopDMove() + // store.dispatch('stopDMove') }, }, } @@ -51,23 +65,35 @@ const moveInit = { methods: { initmovement(e: MouseEvent) { const controlStore = useControlStore() + const widgetStore = useWidgetStore() if (!controlStore.dAltDown) { // 设置mouseevent给moveable初始 // 在组合操作时排除 - store.commit('setMouseEvent', e) + widgetStore.setMouseEvent(e) + // store.commit('setMouseEvent', e) } - const target = store.getters.dActiveElement - store.dispatch('initDMove', { + const target = widgetStore.dActiveElement + if (!target) return + widgetStore.initDMove({ startX: e.pageX, startY: e.pageY, originX: target.left, originY: target.top, }) + // store.dispatch('initDMove', { + // startX: e.pageX, + // startY: e.pageY, + // originX: target.left, + // originY: target.top, + // }) const handlemouseup = () => { - // 销毁选中即刻移动 - store.commit('setMouseEvent', null) + const widgetStore = useWidgetStore() + // 销毁选中即刻移 + widgetStore.setMouseEvent(null) + // store.commit('setMouseEvent', null) + document.removeEventListener('mouseup', handlemouseup, true) } document.addEventListener('mouseup', handlemouseup, true) diff --git a/src/pinia/design/canvas/index.ts b/src/pinia/design/canvas/index.ts index e0d218c..c0b86db 100644 --- a/src/pinia/design/canvas/index.ts +++ b/src/pinia/design/canvas/index.ts @@ -32,13 +32,6 @@ type TCanvasState = { guidelines: TGuidelinesData } -type TStoreGetter = { - dZoom: (state: TCanvasState) => number - dPaddingTop: (state: TCanvasState) => number - dScreen: (state: TCanvasState) => TScreeData - guidelines: (state: TCanvasState) => TGuidelinesData -} - type TStoreAction = { /** 更新画布缩放百分比 */ updateZoom: (zoom: number) => void @@ -53,7 +46,7 @@ type TStoreAction = { } /** 画布全局设置 */ -const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>("canvasStore", { +const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("canvasStore", { state: () => ({ dZoom: 0, // 画布缩放百分比 dPaddingTop: 0, // 画布垂直居中修正值 @@ -71,12 +64,6 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor horizontalGuidelines: [], }, }), - getters: { - dZoom: state => state.dZoom, - dPaddingTop: state => state.dPaddingTop, - dScreen: state => state.dScreen, - guidelines: state => state.guidelines - }, actions: { /** 更新画布缩放百分比 */ updateZoom(zoom: number) { @@ -88,6 +75,7 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor }, /** 更新编辑界面的宽高 */ updateScreen({ width, height }: TScreeData) { + console.log(this.dScreen) this.dScreen.width = width this.dScreen.height = height }, @@ -103,6 +91,6 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor } }) -export type TCanvasStore = Store<"canvasStore", TCanvasState, TStoreGetter, TStoreAction> +export type TCanvasStore = Store<"canvasStore", TCanvasState, {}, TStoreAction> export default CanvasStore diff --git a/src/pinia/design/group/action/index.ts b/src/pinia/design/group/action/index.ts index 94268f0..b2a932c 100644 --- a/src/pinia/design/group/action/index.ts +++ b/src/pinia/design/group/action/index.ts @@ -20,7 +20,7 @@ export function realCombined(store: TGroupStore) { const selectWidgets = widgetStore.dSelectWidgets if (selectWidgets.length > 1) { const widgets = widgetStore.dWidgets - const group: TdWidgetData = JSON.parse(JSON.stringify(store.dGroupJson)) + const group: TdWidgetData = JSON.parse(store.dGroupJson) group.uuid = nanoid() widgets.push(group) let left = Number(pageStore.dPage.width) diff --git a/src/pinia/design/history/actions/pushHistory.ts b/src/pinia/design/history/actions/pushHistory.ts index ce832b6..c124ad4 100644 --- a/src/pinia/design/history/actions/pushHistory.ts +++ b/src/pinia/design/history/actions/pushHistory.ts @@ -8,9 +8,10 @@ import { usePageStore, useWidgetStore } from "@/pinia" import { THistoryStore } from ".." +import { proxyToObject } from "@/utils/utils" /** push操作历史记录 */ -export function pushHistory(store: THistoryStore, msg: string) { +export function pushHistory(store: THistoryStore, msg: string = "") { const pageStore = usePageStore() const selectStore = useWidgetStore() console.log('history压栈', '来源: ' + msg) @@ -27,7 +28,7 @@ export function pushHistory(store: THistoryStore, msg: string) { store.dHistoryParams.index = history.length - 1 } store.dHistory.push(JSON.stringify(selectStore.dWidgets)) - store.dPageHistory.push(JSON.stringify(pageStore.dPage)) + store.dPageHistory.push(JSON.stringify(proxyToObject(pageStore.dPage))) store.dHistoryParams.index = history.length - 1 store.dHistoryParams.length = history.length } diff --git a/src/pinia/design/history/index.ts b/src/pinia/design/history/index.ts index 54843b6..edaf4e2 100644 --- a/src/pinia/design/history/index.ts +++ b/src/pinia/design/history/index.ts @@ -35,7 +35,7 @@ type THistoryAction = { * 修改数据、移动完成后都会自动保存 * 同时会保存当前激活的组件的uuid，方便撤回时自动激活 */ - pushHistory: (msg: string) => void + pushHistory: (msg?: string) => void /** * 操作历史记录 * action为undo表示撤销 diff --git a/src/pinia/design/widget/actions/align.ts b/src/pinia/design/widget/actions/align.ts index 8fb9c14..a519ba6 100644 --- a/src/pinia/design/widget/actions/align.ts +++ b/src/pinia/design/widget/actions/align.ts @@ -14,7 +14,7 @@ type TAlign = 'left' | 'ch' | 'right' | 'top' | 'cv' | 'bottom' export type TUpdateAlignData = { align: TAlign uuid: string - group: TdWidgetData + group?: TdWidgetData } export function updateAlign(store: TWidgetStore, { align, uuid, group }: TUpdateAlignData) { diff --git a/src/pinia/design/widget/actions/index.ts b/src/pinia/design/widget/actions/index.ts index 557eac6..05fe291 100644 --- a/src/pinia/design/widget/actions/index.ts +++ b/src/pinia/design/widget/actions/index.ts @@ -25,7 +25,7 @@ export function initDMove(store: TWidgetStore, payload: TInidDMovePayload) { } export type TMovePayload = { - donotMove: boolean + donotMove?: boolean x: number y: number } @@ -120,6 +120,6 @@ export function setDropOver(store: TWidgetStore, uuid: string) { store.dDropOverUuid = uuid } -export function setMouseEvent(state: TWidgetStore, e: Event | null) { +export function setMouseEvent(state: TWidgetStore, e: MouseEvent | null) { state.activeMouseEvent = e } diff --git a/src/pinia/design/widget/actions/layer.ts b/src/pinia/design/widget/actions/layer.ts index 30036f4..e4eb367 100644 --- a/src/pinia/design/widget/actions/layer.ts +++ b/src/pinia/design/widget/actions/layer.ts @@ -12,7 +12,7 @@ import { TWidgetStore, TdWidgetData } from ".." export type TupdateLayerIndexData = { uuid: string value: number - isGroup: boolean + isGroup?: boolean } export function updateLayerIndex(store: TWidgetStore, { uuid, value, isGroup }: TupdateLayerIndexData) { diff --git a/src/pinia/design/widget/actions/select.ts b/src/pinia/design/widget/actions/select.ts index c03566f..01cb817 100644 --- a/src/pinia/design/widget/actions/select.ts +++ b/src/pinia/design/widget/actions/select.ts @@ -94,8 +94,8 @@ export function selectWidgetsInOut(store: TWidgetStore, { uuid }: TSelectWidgetD } export type TselectItem = { - data: Record - type: string + data?: Record + type?: string } export function selectItem(state: TWidgetStore, { data, type }: TselectItem) { diff --git a/src/pinia/design/widget/actions/widget.ts b/src/pinia/design/widget/actions/widget.ts index 39823bf..42afec9 100644 --- a/src/pinia/design/widget/actions/widget.ts +++ b/src/pinia/design/widget/actions/widget.ts @@ -11,13 +11,13 @@ import { TWidgetStore, TdWidgetData } from ".." import { customAlphabet } from 'nanoid/non-secure' const nanoid = customAlphabet('1234567890abcdef', 12) -type TUpdateWidgetKey = 'width' | 'height' | 'left' | 'top' +type TUpdateWidgetKey = keyof TdWidgetData export type TUpdateWidgetPayload = { uuid: string key: TUpdateWidgetKey - value: number - pushHistory: boolean + value: number | string | boolean | Record + pushHistory?: boolean } /** 更新组件数据 */ @@ -38,8 +38,8 @@ export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHi case 'left': case 'top': if (widget.isContainer) { - let dLeft = widget.left - value - let dTop = widget.top - value + let dLeft = widget.left - Number(value) + let dTop = widget.top - Number(value) if (key === 'left') { dTop = 0 } @@ -57,7 +57,7 @@ export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHi } break } - widget[key] = value + (widget[key] as TUpdateWidgetPayload['value']) = value if (pushHistory) { const historyStore = useHistoryStore() setTimeout(() => { @@ -75,7 +75,7 @@ export type TUpdateWidgetMultiplePayload = { key: TUpdateWidgetKey value: number }[] - pushHistory: boolean + pushHistory?: boolean } /** 一次更新多个widget */ @@ -107,7 +107,7 @@ export function updateWidgetMultiple(store: TWidgetStore, { uuid, data, pushHist } break } - widget[key] = value + (widget[key] as number | string) = value } } setTimeout(() => { diff --git a/src/pinia/design/widget/index.ts b/src/pinia/design/widget/index.ts index 9fc4672..0fae785 100644 --- a/src/pinia/design/widget/index.ts +++ b/src/pinia/design/widget/index.ts @@ -19,10 +19,20 @@ import { TUpdateAlignData, updateAlign } from "./actions/align"; import { TWidgetJsonData, widgetJsonData } from "./getter"; import { TupdateLayerIndexData, ungroup, updateLayerIndex } from "./actions/layer"; -export type TdWidgetData = TPageState & { +export type TdWidgetData = TPageState & Partial & { parent?: string isContainer?: boolean text?: string + editable?: boolean + lock?: boolean + imgUrl?: string + rotate?: string + transform?: string + sliceData?: Record + flip?: boolean + cropEdit?: boolean + fontClass?: Record + writingMode?: string } export type TWidgetState = { @@ -54,11 +64,11 @@ export type TWidgetState = { /** 记录多选的组件 */ dSelectWidgets: TdWidgetData[] /** 复制的组件（可能是单个也可能是数组） */ - dCopyElement: TdWidgetData[] | TdWidgetData + dCopyElement: TdWidgetData[] /** 记录当前选择的元素, data */ - selectItem: { data: Record | null, type?: string } + selectItem: { data?: Record | null, type?: string } /** 正在活动的鼠标事件 */ - activeMouseEvent: Event | null + activeMouseEvent: MouseEvent | null } type TGetter = { @@ -80,7 +90,7 @@ type TAction = { /** 一次更新多个widget */ updateWidgetMultiple: (payload: TUpdateWidgetMultiplePayload) => void /** addWidget */ - addWidget: (setting: TPageState) => void + addWidget: (setting: TdWidgetData) => void /** addGroup */ addGroup: (group: TdWidgetData[]) => void /** setTemplate */ @@ -102,11 +112,11 @@ type TAction = { ungroup: (uuid: string) => void /** 设置拖拽时在哪个图层 */ setDropOver: (uuid: string) => void - selectItem: (data: TselectItem) => void + setSelectItem: (data: TselectItem) => void resize: (data: TResize) => void setWidgetStyle: (data: TsetWidgetStyleData) => void setDWidgets: (data: TdWidgetData[]) => void - setMouseEvent: (e: Event | null) => void + setMouseEvent: (e: MouseEvent | null) => void } const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("widgetStore", { @@ -161,7 +171,7 @@ const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>(" updateLayerIndex(data) { updateLayerIndex(this, data) }, ungroup(uuid) { ungroup(this, uuid) }, setDropOver(uuid) { setDropOver(this, uuid) }, - selectItem(data: TselectItem) { selectItem(this, data) }, + setSelectItem(data: TselectItem) { selectItem(this, data) }, resize(data) { resize(this, data) }, setWidgetStyle(data) { setWidgetStyle(this, data) }, setDWidgets(data) { setDWidgets(this, data) }, diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 30b9d07..7d0bf54 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -78,4 +78,32 @@ export const rndNum = (n: number, m: number) => { return random } +/** Proxy 转 Object */ +export const proxyToObject =

>(proxy: P, seen = new WeakMap()): P => { + if (proxy === null || typeof proxy !== 'object') { + return proxy; + } + + // 检查是否已经处理过该对象 + if (seen.has(proxy)) { + return '[Circular Reference]' as any; + } + + let obj: Record; + + if (Array.isArray(proxy)) { + obj = proxy.map(val => proxyToObject(val, seen)) as any; + } else { + obj = {}; + // 将当前对象添加到已处理对象集合 + seen.set(proxy, obj); + for (let key in proxy) { + if (proxy.hasOwnProperty(key)) { + obj[key] = proxyToObject(proxy[key], seen); + } + } + } + return obj as P; +}; + export default {} diff --git a/src/views/Draw.vue b/src/views/Draw.vue index b2b453b..a567240 100644 --- a/src/views/Draw.vue +++ b/src/views/Draw.vue @@ -10,7 +10,7 @@