From 13036b68a7870903986d89cf01d0b7aa2fc37c1a Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 19 Aug 2024 13:13:35 +0800 Subject: [PATCH 1/2] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7?= =?UTF-8?q?=E5=B1=8F):=20=E4=BC=98=E5=8C=96=E5=A4=A7=E5=B1=8F=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E9=80=BB=E8=BE=91=E5=92=8C=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/canvas/CanvasCore.vue | 3 +- .../canvas/ComponentWrapper.vue | 16 ++++++++++- .../data-visualization/canvas/DePreview.vue | 9 +----- .../visualization/common/DeFullscreen.vue | 2 +- .../custom-component/common/CommonAttr.vue | 1 + core/core-frontend/src/utils/style.ts | 11 ++++---- .../editor/editor-style/ChartStyle.vue | 1 + .../views/components/ChartComponentG2Plot.vue | 28 +++++++++++-------- 8 files changed, 42 insertions(+), 29 deletions(-) diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue index ca518daa2c..a0bc770939 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue @@ -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' }) } diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue index 6aa71fcec4..f96d6e05d6 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue @@ -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) } } diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue index 08460a51be..7e0e43281d 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue @@ -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') diff --git a/core/core-frontend/src/components/visualization/common/DeFullscreen.vue b/core/core-frontend/src/components/visualization/common/DeFullscreen.vue index 5ae9de0c68..f197259c4b 100644 --- a/core/core-frontend/src/components/visualization/common/DeFullscreen.vue +++ b/core/core-frontend/src/components/visualization/common/DeFullscreen.vue @@ -21,7 +21,7 @@ const props = defineProps({ default: 'preview' } }) -const { themes, componentType } = toRefs(props) +const { themes } = toRefs(props) const fullscreenChange = () => { if (screenfull.isEnabled) { diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue index 385ce77957..10187f4042 100644 --- a/core/core-frontend/src/custom-component/common/CommonAttr.vue +++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue @@ -187,6 +187,7 @@ const stopEvent = e => { { } let myChart = null const renderG2Plot = async (chart, chartView: G2PlotChartView) => { - 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) } } From c925e9935a39fc36a4760e86a29c08f43a16c6a0 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 19 Aug 2024 15:56:47 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?= =?UTF-8?q?=20=E8=A7=A3=E5=86=B3=E5=9B=A0=E7=BC=A9=E6=94=BE=E5=AF=BC?= =?UTF-8?q?=E8=87=B4Tab=E5=86=85=E5=A4=96=E7=94=BB=E5=B8=83=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E5=AF=BC=E8=87=B4=E7=9A=84=E7=BB=84=E4=BB=B6=E9=A2=84?= =?UTF-8?q?=E7=BD=AE=E4=BD=8D=E7=BD=AE=E7=9A=84=E5=81=8F=E7=A7=BB=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/canvas/Shape.vue | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue index c45ecc4b78..6d41a1aa60 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -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 })