mirror of
https://github.com/dataease/dataease.git
synced 2025-02-25 03:52:59 +08:00
Merge pull request #11638 from dataease/pr@dev-v2@fix_tab-mov
Pr@dev v2@fix tab mov
This commit is contained in:
王嘉豪
GitHub
commit
bac9a0399b
@ -539,7 +539,8 @@ const getShapeItemShowStyle = item => {
|
||||
dvModel: dvInfo.value.type,
|
||||
cellWidth: cellWidth.value,
|
||||
cellHeight: cellHeight.value,
|
||||
curGap: curGap.value
|
||||
curGap: curGap.value,
|
||||
showPosition: 'edit'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -16,6 +16,20 @@ const componentEditBarRef = ref(null)
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const downLoading = ref(false)
|
||||
|
||||
const commonFilterAttrs = ['width', 'height', 'top', 'left', 'rotate']
|
||||
const commonFilterAttrsFilterBorder = [
|
||||
'width',
|
||||
'height',
|
||||
'top',
|
||||
'left',
|
||||
'rotate',
|
||||
'borderActive',
|
||||
'borderWidth',
|
||||
'borderRadius',
|
||||
'borderStyle',
|
||||
'borderColor'
|
||||
]
|
||||
|
||||
const props = defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
@ -144,7 +158,7 @@ const getComponentStyleDefault = style => {
|
||||
if (config.value.component.includes('Svg')) {
|
||||
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate', 'backgroundColor'])
|
||||
} else {
|
||||
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
|
||||
return getStyle(style, style.borderActive ? commonFilterAttrs : commonFilterAttrsFilterBorder)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -192,14 +192,6 @@ const resetLayout = () => {
|
||||
//div容器获取tableBox.value.clientWidth
|
||||
let canvasWidth = previewCanvas.value.clientWidth
|
||||
let canvasHeight = previewCanvas.value.clientHeight
|
||||
console.log(
|
||||
'===canvasId=' +
|
||||
canvasId.value +
|
||||
';canvasWidth =' +
|
||||
canvasWidth +
|
||||
';canvasHeight =' +
|
||||
canvasHeight
|
||||
)
|
||||
scaleWidthPoint.value = (canvasWidth * 100) / canvasStyleData.value.width
|
||||
scaleHeightPoint.value = (canvasHeight * 100) / canvasStyleData.value.height
|
||||
scaleMin.value = isDashboard()
|
||||
@ -220,6 +212,7 @@ const resetLayout = () => {
|
||||
scaleMin.value,
|
||||
scaleMinHeight
|
||||
)
|
||||
scaleMin.value = isMainCanvas(canvasId.value) ? scaleMin.value : outerScale.value * 100
|
||||
}
|
||||
renderReady.value = true
|
||||
emits('onResetLayout')
|
||||
|
||||
@ -115,7 +115,7 @@ import ComponentEditBar from '@/components/visualization/ComponentEditBar.vue'
|
||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||
import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
|
||||
import { groupSizeStyleAdaptor, groupStyleRevert } from '@/utils/style'
|
||||
import { isGroupCanvas, isMainCanvas, isTabCanvas } from '@/utils/canvasUtils'
|
||||
import { isDashboard, isGroupCanvas, isMainCanvas, isTabCanvas } from '@/utils/canvasUtils'
|
||||
import Board from '@/components/de-board/Board.vue'
|
||||
import { activeWatermarkCheckUser, removeActiveWatermark } from '@/components/watermark/watermark'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
@ -489,6 +489,10 @@ const handleMouseDownOnShape = e => {
|
||||
const pos = { ...defaultStyle.value }
|
||||
const startY = e.clientY
|
||||
const startX = e.clientX
|
||||
|
||||
const offsetY = e.offsetY
|
||||
const offsetX = e.offsetX
|
||||
|
||||
// 如果直接修改属性，值的类型会变为字符串，所以要转为数值型
|
||||
const startTop = Number(pos['top'])
|
||||
const startLeft = Number(pos['left'])
|
||||
@ -502,6 +506,10 @@ const handleMouseDownOnShape = e => {
|
||||
//当前组件宽高 定位
|
||||
const componentWidth = shapeInnerRef.value.offsetWidth
|
||||
const componentHeight = shapeInnerRef.value.offsetHeight
|
||||
let outerTabDom = isTabCanvas(canvasId.value)
|
||||
? document.getElementById('shape-id-' + canvasId.value.split('--')[0])
|
||||
: null
|
||||
const curDom = document.getElementById(domId.value)
|
||||
const move = moveEvent => {
|
||||
hasMove = true
|
||||
const curX = moveEvent.clientX
|
||||
@ -511,6 +519,7 @@ const handleMouseDownOnShape = e => {
|
||||
pos['top'] = top
|
||||
pos['left'] = left
|
||||
// 非主画布非分组画布的情况 需要检测是否从Tab中移除组件(向左移除30px 或者向右移除30px)
|
||||
// 大屏和仪表板暂时做位置算法区分 仪表板暂时使用curX 因为缩放的影响 大屏使用 tab位置 + 组件位置（相对内部画布）+初始触发点
|
||||
if (
|
||||
!isMainCanvas(canvasId.value) &&
|
||||
!isGroupCanvas(canvasId.value) &&
|
||||
@ -518,8 +527,14 @@ const handleMouseDownOnShape = e => {
|
||||
) {
|
||||
contentDisplay.value = false
|
||||
dvMainStore.setMousePointShadowMap({
|
||||
mouseX: curX,
|
||||
mouseY: curY,
|
||||
mouseX:
|
||||
!isDashboard() && outerTabDom
|
||||
? outerTabDom.offsetLeft + curDom.offsetLeft + offsetX
|
||||
: curX,
|
||||
mouseY:
|
||||
!isDashboard() && outerTabDom
|
||||
? outerTabDom.offsetTop + curDom.offsetTop + offsetY + 100
|
||||
: curY,
|
||||
width: componentWidth,
|
||||
height: componentHeight
|
||||
})
|
||||
|
||||
@ -21,7 +21,7 @@ const props = defineProps({
|
||||
default: 'preview'
|
||||
}
|
||||
})
|
||||
const { themes, componentType } = toRefs(props)
|
||||
const { themes } = toRefs(props)
|
||||
|
||||
const fullscreenChange = () => {
|
||||
if (screenfull.isEnabled) {
|
||||
|
||||
@ -187,6 +187,7 @@ const stopEvent = e => {
|
||||
<collapse-switch-item
|
||||
v-if="element && borderSettingShow"
|
||||
v-model="element.style.borderActive"
|
||||
@modelChange="val => onStyleAttrChange({ key: 'borderActive', value: val })"
|
||||
:themes="themes"
|
||||
title="边框"
|
||||
name="borderSetting"
|
||||
|
||||
@ -17,7 +17,10 @@ export function getShapeStyle(style) {
|
||||
return result
|
||||
}
|
||||
|
||||
export function getShapeItemStyle(item, { dvModel, cellWidth, cellHeight, curGap }) {
|
||||
export function getShapeItemStyle(
|
||||
item,
|
||||
{ dvModel, cellWidth, cellHeight, curGap, showPosition = 'preview' }
|
||||
) {
|
||||
let result = {}
|
||||
if (dvModel === 'dashboard' && !item['isPlayer']) {
|
||||
result = {
|
||||
@ -27,11 +30,7 @@ export function getShapeItemStyle(item, { dvModel, cellWidth, cellHeight, curGap
|
||||
left: cellWidth * (item.x - 1) + 'px',
|
||||
top: cellHeight * (item.y - 1) + 'px'
|
||||
}
|
||||
} else if (
|
||||
dvModel === 'dataV' &&
|
||||
isTabCanvas(item.canvasId) &&
|
||||
dvMainStore.editMode === 'preview'
|
||||
) {
|
||||
} else if (dvModel === 'dataV' && isTabCanvas(item.canvasId) && showPosition === 'preview') {
|
||||
result = {
|
||||
padding: curGap + 'px!important',
|
||||
width: toPercent(item.groupStyle.width),
|
||||
|
||||
@ -338,6 +338,7 @@ watch(
|
||||
<collapse-switch-item
|
||||
v-if="showProperties('border-style') && commonBorderPop"
|
||||
v-model="commonBorderPop.borderActive"
|
||||
@modelChange="val => onStyleAttrChange({ key: 'borderActive', value: val })"
|
||||
:themes="themes"
|
||||
title="边框"
|
||||
name="borderSetting"
|
||||
|
||||
@ -234,18 +234,22 @@ const renderChart = async (view, callback?) => {
|
||||
}
|
||||
let myChart = null
|
||||
const renderG2Plot = async (chart, chartView: G2PlotChartView<any, any>) => {
|
||||
myChart?.destroy()
|
||||
myChart = await chartView.drawChart({
|
||||
chartObj: myChart,
|
||||
container: containerId,
|
||||
chart: chart,
|
||||
scale: 1,
|
||||
action,
|
||||
quadrantDefaultBaseline
|
||||
})
|
||||
myChart?.render()
|
||||
if (linkageActiveHistory.value) {
|
||||
linkageActive()
|
||||
try {
|
||||
myChart?.destroy()
|
||||
myChart = await chartView.drawChart({
|
||||
chartObj: myChart,
|
||||
container: containerId,
|
||||
chart: chart,
|
||||
scale: 1,
|
||||
action,
|
||||
quadrantDefaultBaseline
|
||||
})
|
||||
myChart?.render()
|
||||
if (linkageActiveHistory.value) {
|
||||
linkageActive()
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('renderG2Plot error', e)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user