Merge pull request #11638 from dataease/pr@dev-v2@fix_tab-mov

Pr@dev v2@fix tab mov

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'
   })
 }
 

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)
   }
 }
 

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')

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,
+        mouseX:
-        mouseY: curY,
+          !isDashboard() && outerTabDom
+            ? outerTabDom.offsetLeft + curDom.offsetLeft + offsetX
+            : curX,
+        mouseY:
+          !isDashboard() && outerTabDom
+            ? outerTabDom.offsetTop + curDom.offsetTop + offsetY + 100
+            : curY,
         width: componentWidth,
         height: componentHeight
       })

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) {

core/core-frontend/src/custom-component/common/CommonAttr.vue

@@ -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"

core/core-frontend/src/utils/style.ts

@@ -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 (
+  } else if (dvModel === 'dataV' && isTabCanvas(item.canvasId) && showPosition === 'preview') {
-    dvModel === 'dataV' &&
-    isTabCanvas(item.canvasId) &&
-    dvMainStore.editMode === 'preview'
-  ) {
     result = {
       padding: curGap + 'px!important',
       width: toPercent(item.groupStyle.width),

core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue

@@ -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"

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

@@ -234,18 +234,22 @@ const renderChart = async (view, callback?) => {
 }
 let myChart = null
 const renderG2Plot = async (chart, chartView: G2PlotChartView<any, any>) => {
-  myChart?.destroy()
+  try {
-  myChart = await chartView.drawChart({
+    myChart?.destroy()
-    chartObj: myChart,
+    myChart = await chartView.drawChart({
-    container: containerId,
+      chartObj: myChart,
-    chart: chart,
+      container: containerId,
-    scale: 1,
+      chart: chart,
-    action,
+      scale: 1,
-    quadrantDefaultBaseline
+      action,
-  })
+      quadrantDefaultBaseline
-  myChart?.render()
+    })
-  if (linkageActiveHistory.value) {
+    myChart?.render()
-    linkageActive()
+    if (linkageActiveHistory.value) {
+      linkageActive()
+    }
+  } catch (e) {
+    console.error('renderG2Plot error', e)
   }
 }