center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #7129 from dataease/pr@dev-v2@feat_canvas-scale-adaptor

Browse Source 
feat: 画布放大缩小其视图支持并同比放大缩小
This commit is contained in:
王嘉豪 2023-12-12 17:07:43 +08:00 committed by GitHub
commit cd35fe45e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 65 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
View File

@ -137,6 +137,11 @@ const props = defineProps({
default() {
return {}
}
},
scale: {
type: Number,
required: false,
default: 1
}
})
@ -191,7 +196,7 @@ const curComponentId = computed(() => {
const { emitter } = useEmitt()
const curScale = computed(() => {
return canvasStyleData.value.scale
return canvasStyleData.value.scale / 100
})
const pointShadowShow = computed(() => {
@ -1269,6 +1274,7 @@ defineExpose({
v-for="(item, index) in componentData"
v-show="item.isShow"
:canvas-id="canvasId"
:scale="curScale"
:key="item.id"
:default-style="item.style"
:style="getShapeItemShowStyle(item)"

4
core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
View File

@ -164,6 +164,8 @@ const commonBackgroundSvgInner = computed(() => {
return null
}
})
const deepScale = computed(() => scale.value / 100)
</script>
<template>
@ -210,7 +212,7 @@ const commonBackgroundSvgInner = computed(() => {
:linkage="config?.linkage"
:show-position="showPosition"
:search-count="searchCount"
:scale="scale"
:scale="deepScale"
:disabled="true"
/>
</div>

10
core/core-frontend/src/components/data-visualization/canvas/Shape.vue
View File

@ -204,10 +204,16 @@ const props = defineProps({
canvasId: {
type: String,
default: 'canvas-main'
},
scale: {
type: Number,
required: false,
default: 1
}
})
const { element, defaultStyle, baseCellInfo, index, isTabMoveCheck, canvasId } = toRefs(props)
const { element, defaultStyle, baseCellInfo, index, isTabMoveCheck, canvasId, scale } =
toRefs(props)
const domId = ref('shape-id-' + element.value.id)
const pointList = ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l']
const pointList2 = ['r', 'l']
@ -645,7 +651,7 @@ const componentBackgroundStyle = computed(() => {
innerPadding,
borderRadius
} = element.value.commonBackground
const style = { padding: innerPadding + 'px', borderRadius: borderRadius + 'px' }
const style = { padding: innerPadding * scale.value + 'px', borderRadius: borderRadius + 'px' }
let colorRGBA = ''
if (backgroundColorSelect && backgroundColor) {
colorRGBA = backgroundColor

15
core/core-frontend/src/custom-component/user-view/Component.vue
View File

@ -42,7 +42,7 @@ const props = defineProps({
scale: {
type: Number,
required: false,
default: 100
default: 1
},
dvType: {
type: String,
@ -58,15 +58,14 @@ const props = defineProps({
const { element, view, active, searchCount, scale } = toRefs(props)
const autoStyle = computed(() => {
if (element.value.innerType === 'richText') {
const curScale = scale.value / 100
if (element.value.innerType === 'rich-text') {
return {
position: 'absolute',
height: 100 / curScale + '%!important',
width: 100 / curScale + '%!important',
left: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
top: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
transform: 'scale(' + curScale + ')'
height: 100 / scale.value + '%!important',
width: 100 / scale.value + '%!important',
left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
transform: 'scale(' + scale.value + ')'
} as CSSProperties
} else {
return {}

13
core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
View File

@ -13,6 +13,7 @@ import { defaultsDeep, cloneDeep } from 'lodash-es'
import ChartError from '@/views/chart/components/views/components/ChartError.vue'
import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
import { deepCopy } from '@/utils/utils'
const dvMainStore = dvMainStoreWithOut()
const { nowPanelTrackInfo, nowPanelJumpInfo } = storeToRefs(dvMainStore)
@ -34,7 +35,7 @@ const props = defineProps({
scale: {
type: Number,
required: false,
default: 100
default: 1
},
terminal: {
type: String,
@ -113,11 +114,13 @@ const renderChart = async view => {
curView = view
// view 为引用对象 需要存库 view.data 直接赋值会导致保存不必要的数据
// 与默认视图对象合并，方便增加配置项
const chart = { ...defaultsDeep(view, cloneDeep(BASE_VIEW_CONFIG)), data: chartData.value }
const chart = deepCopy({
...defaultsDeep(view, cloneDeep(BASE_VIEW_CONFIG)),
data: chartData.value
})
const chartView = chartViewManager.getChartView(view.render, view.type)
console.log('scale=' + scale.value)
recursionTransObj(customAttrTrans, chart.customAttr, scale.value / 100, terminal.value)
recursionTransObj(customStyleTrans, chart.customStyle, scale.value / 100, terminal.value)
recursionTransObj(customAttrTrans, chart.customAttr, scale.value, terminal.value)
recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
switch (chartView.library) {
case ChartLibraryType.L7_PLOT:
renderL7Plot(chart, chartView as L7PlotChartView<any, any>)

21
core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
View File

@ -22,6 +22,8 @@ import { ElPagination } from 'element-plus-secondary'
import ChartError from '@/views/chart/components/views/components/ChartError.vue'
import { defaultsDeep, cloneDeep } from 'lodash-es'
import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
import { deepCopy } from '@/utils/utils'
const dvMainStore = dvMainStoreWithOut()
const { nowPanelTrackInfo, nowPanelJumpInfo } = storeToRefs(dvMainStore)
@ -39,12 +41,21 @@ const props = defineProps({
type: String,
required: false,
default: 'canvas'
},
scale: {
type: Number,
required: false,
default: 1
},
terminal: {
type: String,
default: 'pc'
}
})
const emit = defineEmits(['onChartClick', 'onDrillFilters', 'onJumpClick'])
const { view, showPosition } = toRefs(props)
const { view, showPosition, scale, terminal } = toRefs(props)
const isError = ref(false)
const errMsg = ref('')
@ -113,10 +124,14 @@ const renderChart = (viewInfo: Chart, resetPageInfo: boolean) => {
return
}
// view 为引用对象 需要存库 view.data 直接赋值会导致保存不必要的数据
const chart = {
const chart = deepCopy({
...defaultsDeep(viewInfo, cloneDeep(BASE_VIEW_CONFIG)),
data: chartData.value
} as ChartObj
} as ChartObj)
recursionTransObj(customAttrTrans, chart.customAttr, scale.value, terminal.value)
recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
setupPage(chart, resetPageInfo)
myChart?.destroy()
const chartView = chartViewManager.getChartView(

17
core/core-frontend/src/views/chart/components/views/index.vue
View File

@ -93,11 +93,11 @@ const props = defineProps({
scale: {
type: Number,
required: false,
default: 100
default: 1
}
})
const dynamicAreaId = ref('')
const { view, showPosition, element, active, searchCount } = toRefs(props)
const { view, showPosition, element, active, searchCount, scale } = toRefs(props)
const titleShow = computed(
() =>
@ -201,6 +201,10 @@ watch(
{ deep: true }
)
watch([() => scale.value], () => {
initTitle()
})
watch([() => searchCount.value], () => {
// 内部计时器启动 忽略外部计时器
if (!innerRefreshTimer) {
@ -216,6 +220,12 @@ watch([() => resultMode.value], () => {
queryData()
})
watch([() => scale.value], () => {
nextTick(() => {
chartComponent?.value?.renderChart(view.value)
})
})
watch([() => curComponent.value], () => {
if (curComponent.value && curComponent.value.id === view.value.id) {
state.initReady = false
@ -233,7 +243,7 @@ const initTitle = () => {
const customStyle = view.value.customStyle
if (customStyle.text) {
state.title_show = customStyle.text.show
state.title_class.fontSize = customStyle.text.fontSize + 'px'
state.title_class.fontSize = customStyle.text.fontSize * scale.value + 'px'
state.title_class.color = customStyle.text.color
state.title_class.textAlign = customStyle.text.hPosition
state.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
@ -634,6 +644,7 @@ const toolTip = computed(() => {
/>
<chart-component-s2
:view="view"
:scale="scale"
:show-position="showPosition"
v-else-if="showChartView(ChartLibraryType.S2)"
ref="chartComponent"