diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts index abcef916..b485dd59 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts @@ -14,7 +14,8 @@ export enum ChartLayoutStoreEnum { DETAILS = 'details', Chart_TYPE = 'chartType', LAYER_TYPE = 'layerType', - PERCENTAGE = 'percentage' + PERCENTAGE = 'percentage', + RE_POSITION_CANVAS = 'rePositionCanvas' } export interface ChartLayoutType { @@ -30,4 +31,6 @@ export interface ChartLayoutType { [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum // 当前正在加载的数量 [ChartLayoutStoreEnum.PERCENTAGE]: number + // 是否重置当前画布位置 + [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean } diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts index 5aa5704e..c2b63592 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts @@ -26,6 +26,8 @@ export const useChartLayoutStore = defineStore({ layerType: LayerModeEnum.THUMBNAIL, // 当前加载数量 percentage: 0, + // 是否重置当前画布位置 + rePositionCanvas: false, // 防止值不存在 ...storageChartLayout }), @@ -47,6 +49,9 @@ export const useChartLayoutStore = defineStore({ }, getPercentage(): number { return this.percentage + }, + getRePositionCanvas(): boolean { + return this.rePositionCanvas } }, actions: { @@ -54,7 +59,10 @@ export const useChartLayoutStore = defineStore({ this.$patch(state => { state[key] = value }) + // 存储本地 setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state) + // 这里需要标记重置画布位置 + this.rePositionCanvas = true; // 重新计算拖拽区域缩放比例 setTimeout(() => { chartEditStore.computedScale() diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue index 13078ec4..184dec52 100644 --- a/src/views/chart/ContentEdit/components/EditRule/index.vue +++ b/src/views/chart/ContentEdit/components/EditRule/index.vue @@ -35,8 +35,11 @@ import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from ' import { listen } from 'dom-helpers' import { useDesignStore } from '@/store/modules/designStore/designStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' +import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' const chartEditStore = useChartEditStore() +const chartLayoutStore = useChartLayoutStore() const designStore = useDesignStore() const thick = 20 @@ -84,6 +87,7 @@ const themeColor = computed(() => { return designStore.getAppTheme }) +// 处理鼠标拖动 const handleWheel = (e: any) => { if (e.ctrlKey || e.metaKey) { e.preventDefault() @@ -102,6 +106,7 @@ const handleWheel = (e: any) => { } } +// 滚动条处理 const handleScroll = () => { if (!$app.value) return const screensRect = $app.value.getBoundingClientRect() @@ -111,6 +116,7 @@ const handleScroll = () => { startY.value = (screensRect.top + thick - canvasRect.top) / scale.value } +// 拖拽处理 const dragCanvas = (e: any) => { e.preventDefault() e.stopPropagation() @@ -148,6 +154,7 @@ const dragCanvas = (e: any) => { }) } +// 计算画布大小 const canvasBox = () => { const layoutDom = document.getElementById('go-chart-edit-layout') if (layoutDom) { @@ -162,7 +169,7 @@ const canvasBox = () => { } } -// 在位置不动的情况下重绘标尺 +// 重绘标尺 const reDraw = () => { sketchRuleReDraw.value = false setTimeout(() => { @@ -170,12 +177,6 @@ const reDraw = () => { }, 10) } -watch( - () => designStore.getDarkTheme, - () => { - reDraw() - } -) // 滚动居中 const canvasPosCenter = () => { @@ -186,13 +187,21 @@ const canvasPosCenter = () => { $app.value.scrollTop = containerHeight / 2 - height / 2 } -// 处理标尺重制大小 +// 处理主题变化 +watch( + () => designStore.getDarkTheme, + () => { + reDraw() + } +) + +// // 处理标尺重制大小 watch( () => scale.value, (newValue, oldValue) => { - if (oldValue !== newValue) { + if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) { + chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false) handleScroll() - chartEditStore.setScale(newValue) setTimeout(() => { canvasPosCenter() }, 500) @@ -200,6 +209,7 @@ watch( } ) +// 处理鼠标样式 watch( () => isPressSpace.value, newValue => {