forked from github/dataease
refactor: 大屏组合支持双击内部组件再解锁移动
This commit is contained in:
parent
6e23a564cb
commit
3b26820091
core/core-frontend/src
components/data-visualization/canvas
custom-component
store/modules/data-visualization
utils
views/data-visualization
@ -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>
|
||||||
<!-- 右击菜单 -->
|
<!-- 右击菜单 -->
|
||||||
|
@ -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)
|
||||||
|
@ -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
|
||||||
|
@ -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,
|
||||||
|
@ -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>
|
||||||
|
@ -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',
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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'
|
||||||
|
Loading…
Reference in New Issue
Block a user