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

style: 大屏分组样式调整

Browse Source
This commit is contained in:
wangjiahao 2023-12-13 22:30:49 +08:00
parent 7a14372864
commit c1b74b1826
2 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/core-frontend/src/custom-component/group/Component.vue
View File

@ -1,10 +1,13 @@
<script setup lang="ts">
import { toRefs } from 'vue'
import { toRefs, computed } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import CanvasGroup from '@/custom-component/common/CanvasGroup.vue'
import { deepCopy } from '@/utils/utils'
import { DEFAULT_CANVAS_STYLE_DATA_DARK } from '@/views/chart/components/editor/util/dataVisualiztion'
const dvMainStore = dvMainStoreWithOut()
const { canvasViewInfo, canvasStyleData } = storeToRefs(dvMainStore)
const sourceCanvasStyle = deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK)
const props = defineProps({
propValue: {
@ -41,7 +44,12 @@ const props = defineProps({
}
})
const { propValue, dvInfo, searchCount } = toRefs(props)
const { propValue, dvInfo, searchCount, element } = toRefs(props)
const customCanvasStyle = computed(() => {
const result = sourceCanvasStyle
result.scale = canvasStyleData.value.scale
return sourceCanvasStyle
})
</script>
<template>
@ -52,7 +60,7 @@ const { propValue, dvInfo, searchCount } = toRefs(props)
:dv-info="dvInfo"
:show-position="showPosition"
:canvas-id="'group-' + element.id"
:canvas-style-data="canvasStyleData"
:canvas-style-data="customCanvasStyle"
:canvas-view-info="canvasViewInfo"
:is-edit="isEdit"
:element="element"

19
core/core-frontend/src/utils/style.ts
View File

@ -1,4 +1,4 @@
import { sin, cos, toPercent } from '@/utils/translate'
import { sin, cos } from '@/utils/translate'
import { imgUrlTrans } from '@/utils/imgUtils'
import { hexColorToRGBA } from '@/views/chart/components/js/util'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@ -201,20 +201,7 @@ export function getCanvasStyle(canvasStyleData) {
export function createGroupStyle(groupComponent) {
const parentStyle = groupComponent.style
groupComponent.propValue.forEach(component => {
// component.groupStyle 的 top left 是相对于 group 组件的位置
// 如果已存在 component.groupStyle，说明已经计算过一次了。不需要再次计算
if (!Object.keys(component.groupStyle).length) {
const style = { ...component.style }
if (component.component.startsWith('SVG')) {
component.groupStyle = getSVGStyle(style)
} else {
component.groupStyle = getStyle(style)
}
component.groupStyle.left = toPercent((style.left - parentStyle.left) / parentStyle.width)
component.groupStyle.top = toPercent((style.top - parentStyle.top) / parentStyle.height)
component.groupStyle.width = toPercent(style.width / parentStyle.width)
component.groupStyle.height = toPercent(style.height / parentStyle.height)
}
component.style.left = component.style.left - parentStyle.left
component.style.top = component.style.top - parentStyle.top
})
}