13
0
forked from github/dataease

refactor: 大屏组合支持双击内部组件再解锁移动

This commit is contained in:
wangjiahao 2023-12-26 22:27:48 +08:00
parent 6e23a564cb
commit 3b26820091
9 changed files with 97 additions and 7 deletions
core/core-frontend/src
components/data-visualization/canvas
custom-component
store/modules/data-visualization
utils
views/data-visualization

View File

@ -148,6 +148,11 @@ const props = defineProps({
type: Number, type: Number,
required: false, required: false,
default: 1 default: 1
},
canvasActive: {
type: Boolean,
required: false,
default: true
} }
}) })
@ -1301,6 +1306,7 @@ defineExpose({
:index="index" :index="index"
:class="{ lock: item.isLock && editMode === 'edit' }" :class="{ lock: item.isLock && editMode === 'edit' }"
:base-cell-info="baseCellInfo" :base-cell-info="baseCellInfo"
:canvas-active="canvasActive"
@onStartResize="onStartResize($event, item, index)" @onStartResize="onStartResize($event, item, index)"
@onStartMove="onStartMove($event, item, index)" @onStartMove="onStartMove($event, item, index)"
@onMouseUp="onMouseUp($event, item, index)" @onMouseUp="onMouseUp($event, item, index)"
@ -1327,6 +1333,7 @@ defineExpose({
:request="item.request" :request="item.request"
@input="handleInput" @input="handleInput"
:dv-info="dvInfo" :dv-info="dvInfo"
:canvas-active="canvasActive"
/> />
<component <component
@ -1342,6 +1349,8 @@ defineExpose({
:canvas-style-data="canvasStyleData" :canvas-style-data="canvasStyleData"
:canvas-view-info="canvasViewInfo" :canvas-view-info="canvasViewInfo"
:dv-info="dvInfo" :dv-info="dvInfo"
:active="item.id === curComponentId"
:canvas-active="canvasActive"
/> />
</Shape> </Shape>
<!-- 右击菜单 --> <!-- 右击菜单 -->

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="shape" ref="shapeInnerRef" :id="domId"> <div class="shape" ref="shapeInnerRef" :id="domId" @dblclick="handleDbClick">
<div <div
class="shape-outer" class="shape-outer"
v-show="contentDisplay" v-show="contentDisplay"
@ -212,11 +212,24 @@ const props = defineProps({
type: Number, type: Number,
required: false, required: false,
default: 1 default: 1
},
canvasActive: {
type: Boolean,
required: false,
default: true
} }
}) })
const { element, defaultStyle, baseCellInfo, index, isTabMoveCheck, canvasId, scale } = const {
toRefs(props) element,
defaultStyle,
baseCellInfo,
index,
isTabMoveCheck,
canvasId,
scale,
canvasActive
} = toRefs(props)
const domId = ref('shape-id-' + element.value.id) const domId = ref('shape-id-' + element.value.id)
const pointList = ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l'] const pointList = ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l']
const pointList2 = ['r', 'l'] const pointList2 = ['r', 'l']
@ -345,6 +358,9 @@ const getCursor = () => {
} }
const handleBoardMouseDownOnShape = e => { const handleBoardMouseDownOnShape = e => {
if (!canvasActive.value) {
return
}
dvMainStore.setCurComponent({ component: element.value, index: index.value }) dvMainStore.setCurComponent({ component: element.value, index: index.value })
handleMouseDownOnShape(e) handleMouseDownOnShape(e)
} }
@ -354,8 +370,18 @@ const areaDataPush = component => {
areaData.value.components.push(component) areaData.value.components.push(component)
} }
} }
const handleDbClick = e => {
console.log('111=0' + element.value.canvasId)
if (element.value.canvasId !== 'canvas-main') {
console.log('111=1' + canvasActive.value)
dvMainStore.setCurComponent({ component: element.value, index: index.value })
}
}
const handleInnerMouseDownOnShape = e => { const handleInnerMouseDownOnShape = e => {
if (!canvasActive.value) {
return
}
if (dvMainStore.batchOptStatus) { if (dvMainStore.batchOptStatus) {
componentEditBarRef.value.batchOptCheckOut() componentEditBarRef.value.batchOptCheckOut()
e.stopPropagation() e.stopPropagation()
@ -510,6 +536,9 @@ const handleMouseDownOnShape = e => {
} }
const selectCurComponent = e => { const selectCurComponent = e => {
if (!canvasActive.value) {
return
}
// //
if (dvInfo.value.type === 'dataV') { if (dvInfo.value.type === 'dataV') {
e.stopPropagation() e.stopPropagation()
@ -528,6 +557,9 @@ const batchSelected = e => {
} }
const handleMouseDownOnPoint = (point, e) => { const handleMouseDownOnPoint = (point, e) => {
if (!canvasActive.value) {
return
}
dashboardActive.value && emit('onStartResize', e) dashboardActive.value && emit('onStartResize', e)
dvMainStore.setInEditorStatus(true) dvMainStore.setInEditorStatus(true)
dvMainStore.setClickComponentStatus(true) dvMainStore.setClickComponentStatus(true)

View File

@ -61,6 +61,7 @@ const { element, isEdit, showPosition, canvasStyleData, canvasViewInfo, dvInfo,
:canvas-style-data="canvasStyleData" :canvas-style-data="canvasStyleData"
:canvas-view-info="canvasViewInfo" :canvas-view-info="canvasViewInfo"
:canvas-id="canvasId" :canvas-id="canvasId"
:canvas-active="element['canvasActive']"
></canvas-core> ></canvas-core>
<de-preview <de-preview
v-else v-else

View File

@ -106,6 +106,7 @@ const list = [
icon: 'bar', icon: 'bar',
innerType: 'bar', innerType: 'bar',
editing: false, editing: false,
canvasActive: false,
x: 1, x: 1,
y: 1, y: 1,
sizeX: 18, sizeX: 18,
@ -123,6 +124,7 @@ const list = [
icon: 'dv-picture-real', icon: 'dv-picture-real',
innerType: 'Picture', innerType: 'Picture',
editing: false, editing: false,
canvasActive: false,
x: 1, x: 1,
y: 1, y: 1,
sizeX: 18, sizeX: 18,
@ -148,6 +150,7 @@ const list = [
icon: 'other_material_icon', icon: 'other_material_icon',
innerType: '', innerType: '',
editing: false, editing: false,
canvasActive: false,
x: 1, x: 1,
y: 1, y: 1,
sizeX: 5, sizeX: 5,
@ -166,6 +169,7 @@ const list = [
icon: 'other_material_board', icon: 'other_material_board',
innerType: '', innerType: '',
editing: false, editing: false,
canvasActive: false,
x: 1, x: 1,
y: 1, y: 1,
sizeX: 15, sizeX: 15,
@ -191,6 +195,7 @@ const list = [
icon: 'dv-tab', icon: 'dv-tab',
innerType: '', innerType: '',
editing: false, editing: false,
canvasActive: false,
x: 1, x: 1,
y: 1, y: 1,
sizeX: 18, sizeX: 18,

View File

@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { toRefs, computed } from 'vue' import { toRefs, computed, watch, nextTick } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import CanvasGroup from '@/custom-component/common/CanvasGroup.vue' import CanvasGroup from '@/custom-component/common/CanvasGroup.vue'
import { deepCopy } from '@/utils/utils' import { deepCopy } from '@/utils/utils'
import { DEFAULT_CANVAS_STYLE_DATA_DARK } from '@/views/chart/components/editor/util/dataVisualiztion' import { DEFAULT_CANVAS_STYLE_DATA_DARK } from '@/views/chart/components/editor/util/dataVisualiztion'
const dvMainStore = dvMainStoreWithOut() const dvMainStore = dvMainStoreWithOut()
const { canvasViewInfo, canvasStyleData } = storeToRefs(dvMainStore) const { canvasViewInfo, canvasStyleData, curComponent } = storeToRefs(dvMainStore)
const sourceCanvasStyle = deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK) const sourceCanvasStyle = deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK)
const props = defineProps({ const props = defineProps({
@ -46,6 +46,10 @@ const props = defineProps({
type: Number, type: Number,
required: false, required: false,
default: 1 default: 1
},
active: {
type: Boolean,
default: false
} }
}) })
@ -57,10 +61,35 @@ const customCanvasStyle = computed(() => {
result.height = (element.value.style.height * 100) / result.scale result.height = (element.value.style.height * 100) / result.scale
return result return result
}) })
const setCanvasActive = () => {
element.value['canvasActive'] = true
}
watch(
() => props.active,
() => {
// canvasActive 1. 2.canvasId
nextTick(() => {
if (
!props.active &&
(!curComponent.value ||
(curComponent.value && !curComponent.value.canvasId.includes(element.value.id)))
) {
element.value['canvasActive'] = false
}
})
},
{ deep: true }
)
</script> </script>
<template> <template>
<div class="group"> <div
class="group"
:class="{ 'canvas-active-custom': element['canvasActive'] }"
@dblclick="setCanvasActive"
>
<canvas-group <canvas-group
:component-data="propValue" :component-data="propValue"
:dv-info="dvInfo" :dv-info="dvInfo"
@ -87,4 +116,8 @@ const customCanvasStyle = computed(() => {
} }
} }
} }
.canvas-active-custom {
outline: 2px solid rgba(51, 112, 255, 1) !important;
}
</style> </style>

View File

@ -91,6 +91,7 @@ export const composeStore = defineStore('compose', {
const groupComponent = { const groupComponent = {
id: newId, id: newId,
component: 'Group', component: 'Group',
canvasActive: false,
name: '组合', name: '组合',
label: '组合', label: '组合',
icon: 'group', icon: 'group',

View File

@ -210,6 +210,15 @@ export const dvMainStore = defineStore('dataVisualization', {
setCurComponent({ component, index }) { setCurComponent({ component, index }) {
if (!component && this.curComponent) { if (!component && this.curComponent) {
this.curComponent['editing'] = false this.curComponent['editing'] = false
this.curComponent['canvasActive'] = false
// 如果当前组件不在主画布中 对应的分组的canvasActive 也要设置为false
if (this.curComponent.canvasId !== 'canvas-main') {
this.componentData.forEach(componentItem => {
if (this.curComponent.canvasId.includes(componentItem.id)) {
componentItem['canvasActive'] = false
}
})
}
} }
if (component) { if (component) {
// Is the current component in editing status // Is the current component in editing status

View File

@ -96,6 +96,7 @@ export function initCanvasDataPrepare(dvId, busiFlag, callBack) {
const canvasStyleResult = JSON.parse(canvasInfo.canvasStyleData) const canvasStyleResult = JSON.parse(canvasInfo.canvasStyleData)
const canvasViewInfoPreview = canvasInfo.canvasViewInfo const canvasViewInfoPreview = canvasInfo.canvasViewInfo
canvasDataResult.forEach(componentItem => { canvasDataResult.forEach(componentItem => {
componentItem['canvasActive'] = false
if (componentItem.component === 'Group') { if (componentItem.component === 'Group') {
componentItem.expand = componentItem.expand || false componentItem.expand = componentItem.expand || false
} }

View File

@ -1,5 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
import RealTimeComponentList from '@/components/data-visualization/RealTimeComponentList.vue'
import CanvasAttr from '@/components/data-visualization/CanvasAttr.vue' import CanvasAttr from '@/components/data-visualization/CanvasAttr.vue'
import { computed, watch, onMounted, reactive, ref, nextTick, onUnmounted } from 'vue' import { computed, watch, onMounted, reactive, ref, nextTick, onUnmounted } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'