mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 16:22:57 +08:00
perf: 优化切换图表导致画布缩放的交互
This commit is contained in:
奔跑的面条
parent
23625ec334
commit
7b000f86c7
@ -1,77 +1,83 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ChartLayoutType, LayerModeEnum, ChartModeEnum } from './chartLayoutStore.d'
|
||||
import { setLocalStorage, getLocalStorage } from '@/utils'
|
||||
import { StorageEnum } from '@/enums/storageEnum'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const { GO_CHART_LAYOUT_STORE } = StorageEnum
|
||||
|
||||
const storageChartLayout: Partial<ChartLayoutType> = getLocalStorage(GO_CHART_LAYOUT_STORE)
|
||||
|
||||
// 编辑区域布局和静态设置
|
||||
export const useChartLayoutStore = defineStore({
|
||||
id: 'useChartLayoutStore',
|
||||
state: (): ChartLayoutType => ({
|
||||
// 图层控制
|
||||
layers: true,
|
||||
// 图表组件
|
||||
charts: true,
|
||||
// 详情设置（收缩为true）
|
||||
details: false,
|
||||
// 组件列表展示类型（默认单列）
|
||||
chartType: ChartModeEnum.SINGLE,
|
||||
// 图层类型（默认图片）
|
||||
layerType: LayerModeEnum.THUMBNAIL,
|
||||
// 当前加载数量
|
||||
percentage: 0,
|
||||
// 是否重置当前画布位置
|
||||
rePositionCanvas: false,
|
||||
// 防止值不存在
|
||||
...storageChartLayout
|
||||
}),
|
||||
getters: {
|
||||
getLayers(): boolean {
|
||||
return this.layers
|
||||
},
|
||||
getCharts(): boolean {
|
||||
return this.charts
|
||||
},
|
||||
getDetails(): boolean {
|
||||
return this.details
|
||||
},
|
||||
getChartType(): ChartModeEnum {
|
||||
return this.chartType
|
||||
},
|
||||
getLayerType(): LayerModeEnum {
|
||||
return this.layerType
|
||||
},
|
||||
getPercentage(): number {
|
||||
return this.percentage
|
||||
},
|
||||
getRePositionCanvas(): boolean {
|
||||
return this.rePositionCanvas
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setItem<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
|
||||
this.$patch(state => {
|
||||
state[key] = value
|
||||
})
|
||||
// 存储本地
|
||||
setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
|
||||
// 这里需要标记重置画布位置
|
||||
this.rePositionCanvas = true;
|
||||
// 重新计算拖拽区域缩放比例
|
||||
setTimeout(() => {
|
||||
chartEditStore.computedScale()
|
||||
}, 500)
|
||||
},
|
||||
setItemUnHandle<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
|
||||
this.$patch(state => {
|
||||
state[key] = value
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
import { defineStore } from 'pinia'
|
||||
import { ChartLayoutType, LayerModeEnum, ChartModeEnum } from './chartLayoutStore.d'
|
||||
import { setLocalStorage, getLocalStorage } from '@/utils'
|
||||
import { StorageEnum } from '@/enums/storageEnum'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const { GO_CHART_LAYOUT_STORE } = StorageEnum
|
||||
|
||||
const storageChartLayout: Partial<ChartLayoutType> = getLocalStorage(GO_CHART_LAYOUT_STORE)
|
||||
|
||||
// 编辑区域布局和静态设置
|
||||
export const useChartLayoutStore = defineStore({
|
||||
id: 'useChartLayoutStore',
|
||||
state: (): ChartLayoutType => ({
|
||||
// 图层控制
|
||||
layers: true,
|
||||
// 图表组件
|
||||
charts: true,
|
||||
// 详情设置（收缩为true）
|
||||
details: false,
|
||||
// 组件列表展示类型（默认单列）
|
||||
chartType: ChartModeEnum.SINGLE,
|
||||
// 图层类型（默认图片）
|
||||
layerType: LayerModeEnum.THUMBNAIL,
|
||||
// 当前加载数量
|
||||
percentage: 0,
|
||||
// 是否重置当前画布位置
|
||||
rePositionCanvas: false,
|
||||
// 防止值不存在
|
||||
...storageChartLayout
|
||||
}),
|
||||
getters: {
|
||||
getLayers(): boolean {
|
||||
return this.layers
|
||||
},
|
||||
getCharts(): boolean {
|
||||
return this.charts
|
||||
},
|
||||
getDetails(): boolean {
|
||||
return this.details
|
||||
},
|
||||
getChartType(): ChartModeEnum {
|
||||
return this.chartType
|
||||
},
|
||||
getLayerType(): LayerModeEnum {
|
||||
return this.layerType
|
||||
},
|
||||
getPercentage(): number {
|
||||
return this.percentage
|
||||
},
|
||||
getRePositionCanvas(): boolean {
|
||||
return this.rePositionCanvas
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setItem<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(
|
||||
key: T,
|
||||
value: K,
|
||||
computedScale = true
|
||||
): void {
|
||||
this.$patch(state => {
|
||||
state[key] = value
|
||||
})
|
||||
// 存储本地
|
||||
setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
|
||||
// 这里需要标记重置画布位置
|
||||
this.rePositionCanvas = true;
|
||||
// 重新计算拖拽区域缩放比例
|
||||
if (computedScale) {
|
||||
setTimeout(() => {
|
||||
chartEditStore.computedScale()
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
setItemUnHandle<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
|
||||
this.$patch(state => {
|
||||
state[key] = value
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,92 +1,92 @@
|
||||
import { shallowReactive, ref } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { renderLang, renderIcon } from '@/utils'
|
||||
import { themeColor, setItem, getCharts } from './useLayout.hook'
|
||||
import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d'
|
||||
// 图表
|
||||
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
// 图标
|
||||
const { BarChartIcon } = icon.ionicons5
|
||||
const {
|
||||
TableSplitIcon,
|
||||
RoadmapIcon,
|
||||
SpellCheckIcon,
|
||||
GraphicalDataFlowIcon,
|
||||
} = icon.carbon
|
||||
|
||||
|
||||
// 图表
|
||||
export type MenuOptionsType = {
|
||||
key: string
|
||||
icon: ReturnType<typeof renderIcon>
|
||||
label: ReturnType<typeof renderLang>
|
||||
list: PackagesType
|
||||
}
|
||||
|
||||
const { getPackagesList } = usePackagesStore()
|
||||
const menuOptions: MenuOptionsType[] = []
|
||||
|
||||
const packagesListObj = {
|
||||
[PackagesCategoryEnum.CHARTS]: {
|
||||
icon: renderIcon(RoadmapIcon),
|
||||
label: PackagesCategoryName.CHARTS,
|
||||
},
|
||||
[PackagesCategoryEnum.INFORMATIONS]: {
|
||||
icon: renderIcon(SpellCheckIcon),
|
||||
label: PackagesCategoryName.INFORMATIONS,
|
||||
},
|
||||
[PackagesCategoryEnum.TABLES]: {
|
||||
icon: renderIcon(TableSplitIcon),
|
||||
label: PackagesCategoryName.TABLES,
|
||||
},
|
||||
[PackagesCategoryEnum.DECORATES]: {
|
||||
icon: renderIcon(GraphicalDataFlowIcon),
|
||||
label: PackagesCategoryName.DECORATES,
|
||||
},
|
||||
}
|
||||
|
||||
// 处理列表
|
||||
const handlePackagesList = () => {
|
||||
for (const val in getPackagesList) {
|
||||
menuOptions.push({
|
||||
key: val,
|
||||
// @ts-ignore
|
||||
icon: packagesListObj[val].icon,
|
||||
// @ts-ignore
|
||||
label: packagesListObj[val].label,
|
||||
// @ts-ignore
|
||||
list: getPackagesList[val],
|
||||
})
|
||||
}
|
||||
}
|
||||
handlePackagesList()
|
||||
|
||||
// 记录选中值
|
||||
let beforeSelect: string = menuOptions[0]['key']
|
||||
const selectValue = ref<string>(menuOptions[0]['key'])
|
||||
|
||||
// 选中的对象值
|
||||
const selectOptions = ref(menuOptions[0])
|
||||
|
||||
// 点击 item
|
||||
const clickItemHandle = (key: string, item: any) => {
|
||||
selectOptions.value = item
|
||||
// 处理折叠
|
||||
if (beforeSelect === key) {
|
||||
setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value)
|
||||
} else {
|
||||
setItem(ChartLayoutStoreEnum.CHARTS, true)
|
||||
}
|
||||
beforeSelect = key
|
||||
}
|
||||
|
||||
export {
|
||||
getCharts,
|
||||
BarChartIcon,
|
||||
themeColor,
|
||||
selectOptions,
|
||||
selectValue,
|
||||
clickItemHandle,
|
||||
menuOptions,
|
||||
}
|
||||
import { shallowReactive, ref } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { renderLang, renderIcon } from '@/utils'
|
||||
import { themeColor, setItem, getCharts } from './useLayout.hook'
|
||||
import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d'
|
||||
// 图表
|
||||
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
// 图标
|
||||
const { BarChartIcon } = icon.ionicons5
|
||||
const {
|
||||
TableSplitIcon,
|
||||
RoadmapIcon,
|
||||
SpellCheckIcon,
|
||||
GraphicalDataFlowIcon,
|
||||
} = icon.carbon
|
||||
|
||||
|
||||
// 图表
|
||||
export type MenuOptionsType = {
|
||||
key: string
|
||||
icon: ReturnType<typeof renderIcon>
|
||||
label: ReturnType<typeof renderLang>
|
||||
list: PackagesType
|
||||
}
|
||||
|
||||
const { getPackagesList } = usePackagesStore()
|
||||
const menuOptions: MenuOptionsType[] = []
|
||||
|
||||
const packagesListObj = {
|
||||
[PackagesCategoryEnum.CHARTS]: {
|
||||
icon: renderIcon(RoadmapIcon),
|
||||
label: PackagesCategoryName.CHARTS,
|
||||
},
|
||||
[PackagesCategoryEnum.INFORMATIONS]: {
|
||||
icon: renderIcon(SpellCheckIcon),
|
||||
label: PackagesCategoryName.INFORMATIONS,
|
||||
},
|
||||
[PackagesCategoryEnum.TABLES]: {
|
||||
icon: renderIcon(TableSplitIcon),
|
||||
label: PackagesCategoryName.TABLES,
|
||||
},
|
||||
[PackagesCategoryEnum.DECORATES]: {
|
||||
icon: renderIcon(GraphicalDataFlowIcon),
|
||||
label: PackagesCategoryName.DECORATES,
|
||||
},
|
||||
}
|
||||
|
||||
// 处理列表
|
||||
const handlePackagesList = () => {
|
||||
for (const val in getPackagesList) {
|
||||
menuOptions.push({
|
||||
key: val,
|
||||
// @ts-ignore
|
||||
icon: packagesListObj[val].icon,
|
||||
// @ts-ignore
|
||||
label: packagesListObj[val].label,
|
||||
// @ts-ignore
|
||||
list: getPackagesList[val],
|
||||
})
|
||||
}
|
||||
}
|
||||
handlePackagesList()
|
||||
|
||||
// 记录选中值
|
||||
let beforeSelect: string = menuOptions[0]['key']
|
||||
const selectValue = ref<string>(menuOptions[0]['key'])
|
||||
|
||||
// 选中的对象值
|
||||
const selectOptions = ref(menuOptions[0])
|
||||
|
||||
// 点击 item
|
||||
const clickItemHandle = (key: string, item: any) => {
|
||||
selectOptions.value = item
|
||||
// 处理折叠
|
||||
if (beforeSelect === key) {
|
||||
setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
|
||||
} else {
|
||||
setItem(ChartLayoutStoreEnum.CHARTS, true, false)
|
||||
}
|
||||
beforeSelect = key
|
||||
}
|
||||
|
||||
export {
|
||||
getCharts,
|
||||
BarChartIcon,
|
||||
themeColor,
|
||||
selectOptions,
|
||||
selectValue,
|
||||
clickItemHandle,
|
||||
menuOptions,
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user