mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-06 03:58:04 +08:00
feat: 合并PR，解决冲突
This commit is contained in:
奔跑的面条
parent
def75f0948
commit
5588205d8d
@ -4,9 +4,30 @@
|
|||||||
<CollapseItem
|
<CollapseItem
|
||||||
v-for="(item, index) in seriesList"
|
v-for="(item, index) in seriesList"
|
||||||
:key="index"
|
:key="index"
|
||||||
:name="`${item.type == 'bar' ? '柱状图' : '折线图'}`"
|
:name="`系列${index + 1}`"
|
||||||
:expanded="true"
|
:expanded="true"
|
||||||
>
|
>
|
||||||
|
<template #header>
|
||||||
|
<n-text class="go-fs-13" depth="3">
|
||||||
|
{{ item.type == 'bar' ? '「柱状图」' : '「折线图」' }}
|
||||||
|
</n-text>
|
||||||
|
</template>
|
||||||
|
<SettingItemBox name="类型">
|
||||||
|
<SettingItem name="宽度">
|
||||||
|
<n-select
|
||||||
|
:value="item.type"
|
||||||
|
size="small"
|
||||||
|
:options="[
|
||||||
|
{ label: '柱状图', value: 'bar' },
|
||||||
|
{ label: '折线图', value: 'line' }
|
||||||
|
]"
|
||||||
|
@update:value="(value: any) => {
|
||||||
|
updateHandle(item, value)
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
|
||||||
|
</SettingItemBox>
|
||||||
<SettingItemBox name="图形" v-if="item.type == 'bar'">
|
<SettingItemBox name="图形" v-if="item.type == 'bar'">
|
||||||
<SettingItem name="宽度">
|
<SettingItem name="宽度">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
@ -34,6 +55,12 @@
|
|||||||
<SettingItem name="类型">
|
<SettingItem name="类型">
|
||||||
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="item.smooth" size="small" />
|
||||||
|
<n-text>曲线</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
<SettingItemBox name="实心点" v-if="item.type == 'line'">
|
<SettingItemBox name="实心点" v-if="item.type == 'line'">
|
||||||
<SettingItem name="大小">
|
<SettingItem name="大小">
|
||||||
@ -63,10 +90,10 @@
|
|||||||
<n-select
|
<n-select
|
||||||
v-model:value="item.label.position"
|
v-model:value="item.label.position"
|
||||||
:options="[
|
:options="[
|
||||||
{ label: 'top', value: 'top' },
|
{ label: '顶部', value: 'top' },
|
||||||
{ label: 'left', value: 'left' },
|
{ label: '左侧', value: 'left' },
|
||||||
{ label: 'right', value: 'right' },
|
{ label: '右侧', value: 'right' },
|
||||||
{ label: 'bottom', value: 'bottom' }
|
{ label: '底部', value: 'bottom' }
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
</setting-item>
|
</setting-item>
|
||||||
@ -75,10 +102,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PropType, computed } from 'vue'
|
import { PropType, computed, toRaw } from 'vue'
|
||||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
import { merge, cloneDeep } from 'lodash';
|
||||||
|
|
||||||
|
import GlobalSetting from '@/components/Pages/ChartItemSetting/GlobalSetting.vue'
|
||||||
|
import CollapseItem from '@/components/Pages/ChartItemSetting/CollapseItem.vue'
|
||||||
|
import SettingItemBox from '@/components/Pages/ChartItemSetting/SettingItemBox.vue'
|
||||||
|
import SettingItem from '@/components/Pages/ChartItemSetting/SettingItem.vue'
|
||||||
|
|
||||||
import { lineConf } from '@/packages/chartConfiguration/echarts'
|
import { lineConf } from '@/packages/chartConfiguration/echarts'
|
||||||
import { GlobalThemeJsonType } from '@/settings/chartThemes'
|
import { GlobalThemeJsonType } from '@/settings/chartThemes'
|
||||||
|
import { barSeriesItem, lineSeriesItem } from './config'
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
optionData: {
|
optionData: {
|
||||||
@ -90,4 +125,14 @@ const props = defineProps({
|
|||||||
const seriesList = computed(() => {
|
const seriesList = computed(() => {
|
||||||
return props.optionData.series
|
return props.optionData.series
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const updateHandle = (item:any, value:string) => {
|
||||||
|
const _label = cloneDeep(toRaw(item.label))
|
||||||
|
lineSeriesItem.label = _label
|
||||||
|
if (value === 'line') {
|
||||||
|
merge(item, lineSeriesItem)
|
||||||
|
} else {
|
||||||
|
merge(item, barSeriesItem)
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -12,6 +12,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, watch, PropType, nextTick } from 'vue'
|
import { ref, computed, watch, PropType, nextTick } from 'vue'
|
||||||
import VChart from 'vue-echarts'
|
import VChart from 'vue-echarts'
|
||||||
|
import { isObject, cloneDeep } from 'lodash'
|
||||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||||
import { use } from 'echarts/core'
|
import { use } from 'echarts/core'
|
||||||
import { CanvasRenderer } from 'echarts/renderers'
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
@ -51,17 +52,35 @@ const option = computed(() => {
|
|||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.chartConfig.option.dataset,
|
() => props.chartConfig.option.dataset,
|
||||||
(newData, oldData) => {
|
(newData: any, oldData) => {
|
||||||
if (newData.dimensions.length !== oldData.dimensions.length) {
|
try {
|
||||||
const seriesArr = []
|
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
if (Array.isArray((newData as any)?.dimensions)) {
|
||||||
seriesArr.push(barSeriesItem, lineSeriesItem)
|
const seriesArr: typeof barSeriesItem[] = []
|
||||||
|
// 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
|
||||||
|
// 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
|
||||||
|
const oldDimensions =
|
||||||
|
Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
|
||||||
|
const newDimensions = (newData as any).dimensions.length >= 1 ? (newData as any).dimensions.length : 1
|
||||||
|
const dimensionsGap = newDimensions - oldDimensions
|
||||||
|
if (dimensionsGap < 0) {
|
||||||
|
props.chartConfig.option.series.splice(newDimensions - 1)
|
||||||
|
} else if (dimensionsGap > 0) {
|
||||||
|
if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
|
||||||
|
props.chartConfig.option.series = []
|
||||||
|
}
|
||||||
|
for (let i = 0; i < dimensionsGap; i++) {
|
||||||
|
seriesArr.push(cloneDeep(barSeriesItem))
|
||||||
|
}
|
||||||
|
props.chartConfig.option.series.push(...seriesArr)
|
||||||
|
}
|
||||||
|
replaceMergeArr.value = ['series']
|
||||||
|
nextTick(() => {
|
||||||
|
replaceMergeArr.value = []
|
||||||
|
})
|
||||||
}
|
}
|
||||||
replaceMergeArr.value = ['series']
|
} catch (error) {
|
||||||
props.chartConfig.option.series = seriesArr
|
console.log(error)
|
||||||
nextTick(() => {
|
|
||||||
replaceMergeArr.value = []
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -24,8 +24,8 @@ export function isArray(p: any): p is [] {
|
|||||||
return Array.isArray(p)
|
return Array.isArray(p)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const toNumber = (number: number | string, toFixedNumber = 2) => {
|
export const toNumber = (number: number | string, toFixedNumber: number = 2) => {
|
||||||
return isString(number) ? parseFloat(parseFloat(number).toFixed(2)) : number
|
return isString(number) ? parseFloat(parseFloat(number).toFixed(toFixedNumber)) : number
|
||||||
}
|
}
|
||||||
|
|
||||||
export const toString = (str: any) => {
|
export const toString = (str: any) => {
|
||||||
|
|||||||
@ -1,388 +1,392 @@
|
|||||||
import { toRaw } from 'vue'
|
import { toRaw } from 'vue'
|
||||||
import { DragKeyEnum, MouseEventButton } from '@/enums/editPageEnum'
|
import { DragKeyEnum, MouseEventButton } from '@/enums/editPageEnum'
|
||||||
import { createComponent } from '@/packages'
|
import { createComponent } from '@/packages'
|
||||||
import { ConfigType } from '@/packages/index.d'
|
import { ConfigType } from '@/packages/index.d'
|
||||||
import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d'
|
import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d'
|
||||||
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
|
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||||
import { loadingStart, loadingFinish, loadingError, setComponentPosition, JSONParse } from '@/utils'
|
import { loadingStart, loadingFinish, loadingError, setComponentPosition, JSONParse } from '@/utils'
|
||||||
import { throttle, cloneDeep } from 'lodash'
|
import { throttle, cloneDeep } from 'lodash'
|
||||||
|
|
||||||
const chartEditStore = useChartEditStore()
|
const chartEditStore = useChartEditStore()
|
||||||
const { onClickOutSide } = useContextMenu()
|
const { onClickOutSide } = useContextMenu()
|
||||||
|
|
||||||
// * 拖拽到编辑区域里
|
// * 拖拽到编辑区域里
|
||||||
export const dragHandle = async (e: DragEvent) => {
|
export const dragHandle = async (e: DragEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
try {
|
try {
|
||||||
loadingStart()
|
loadingStart()
|
||||||
|
|
||||||
// 获取拖拽数据
|
// 获取拖拽数据
|
||||||
const drayDataString = e!.dataTransfer!.getData(DragKeyEnum.DRAG_KEY)
|
const drayDataString = e!.dataTransfer!.getData(DragKeyEnum.DRAG_KEY)
|
||||||
if (!drayDataString) {
|
if (!drayDataString) {
|
||||||
loadingFinish()
|
loadingFinish()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改状态
|
// 修改状态
|
||||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
|
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
|
||||||
const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
|
const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
|
||||||
if (dropData.disabled) return
|
if (dropData.disabled) return
|
||||||
|
|
||||||
// 创建新图表组件
|
// 创建新图表组件
|
||||||
let newComponent: CreateComponentType = await createComponent(dropData)
|
let newComponent: CreateComponentType = await createComponent(dropData)
|
||||||
if (dropData.redirectComponent) {
|
if (dropData.redirectComponent) {
|
||||||
dropData.dataset && (newComponent.option.dataset = dropData.dataset)
|
dropData.dataset && (newComponent.option.dataset = dropData.dataset)
|
||||||
newComponent.chartConfig.title = dropData.title
|
newComponent.chartConfig.title = dropData.title
|
||||||
newComponent.chartConfig.chartFrame = dropData.chartFrame
|
newComponent.chartConfig.chartFrame = dropData.chartFrame
|
||||||
}
|
}
|
||||||
|
|
||||||
setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
|
setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
|
||||||
chartEditStore.addComponentList(newComponent, false, true)
|
chartEditStore.addComponentList(newComponent, false, true)
|
||||||
chartEditStore.setTargetSelectChart(newComponent.id)
|
chartEditStore.setTargetSelectChart(newComponent.id)
|
||||||
loadingFinish()
|
loadingFinish()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
loadingError()
|
loadingError()
|
||||||
window['$message'].warning(`图表正在研发中, 敬请期待...`)
|
window['$message'].warning(`图表正在研发中, 敬请期待...`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// * 进入拖拽区域
|
// * 进入拖拽区域
|
||||||
export const dragoverHandle = (e: DragEvent) => {
|
export const dragoverHandle = (e: DragEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
|
|
||||||
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
|
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
|
||||||
}
|
}
|
||||||
|
|
||||||
// * 不拦截默认行为点击
|
// * 不拦截默认行为点击
|
||||||
export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
|
export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
|
||||||
if (item) {
|
if (item) {
|
||||||
chartEditStore.setTargetSelectChart(item.id)
|
chartEditStore.setTargetSelectChart(item.id)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
chartEditStore.setTargetSelectChart(undefined)
|
chartEditStore.setTargetSelectChart(undefined)
|
||||||
}
|
}
|
||||||
|
|
||||||
// * 框选
|
// * 框选
|
||||||
export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
|
export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
|
||||||
if (e.which == 2) return
|
if (e.which == 2) return
|
||||||
if (window.$KeyboardActive?.space) return
|
if (window.$KeyboardActive?.space) return
|
||||||
|
|
||||||
mousedownHandleUnStop(e)
|
mousedownHandleUnStop(e)
|
||||||
|
|
||||||
// 记录点击初始位置
|
// 记录点击初始位置
|
||||||
const startOffsetX = e.offsetX
|
const startOffsetX = e.offsetX
|
||||||
const startOffsetY = e.offsetY
|
const startOffsetY = e.offsetY
|
||||||
const startScreenX = e.screenX
|
const startScreenX = e.screenX
|
||||||
const startScreenY = e.screenY
|
const startScreenY = e.screenY
|
||||||
|
|
||||||
// 记录缩放
|
// 记录缩放
|
||||||
const scale = chartEditStore.getEditCanvas.scale
|
const scale = chartEditStore.getEditCanvas.scale
|
||||||
|
|
||||||
chartEditStore.setMousePosition(undefined, undefined, startOffsetX, startOffsetY)
|
chartEditStore.setMousePosition(undefined, undefined, startOffsetX, startOffsetY)
|
||||||
|
|
||||||
// 移动框选
|
// 移动框选
|
||||||
const mousemove = throttle((moveEvent: MouseEvent) => {
|
const mousemove = throttle((moveEvent: MouseEvent) => {
|
||||||
// 取消当前选中
|
// 取消当前选中
|
||||||
chartEditStore.setTargetSelectChart()
|
chartEditStore.setTargetSelectChart()
|
||||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_SELECT, true)
|
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_SELECT, true)
|
||||||
|
|
||||||
// 这里先把相对值算好，不然组件无法获取 startScreenX 和 startScreenY 的值
|
// 这里先把相对值算好，不然组件无法获取 startScreenX 和 startScreenY 的值
|
||||||
const currX = startOffsetX + moveEvent.screenX - startScreenX
|
const currX = startOffsetX + moveEvent.screenX - startScreenX
|
||||||
const currY = startOffsetY + moveEvent.screenY - startScreenY
|
const currY = startOffsetY + moveEvent.screenY - startScreenY
|
||||||
chartEditStore.setMousePosition(currX, currY)
|
chartEditStore.setMousePosition(currX, currY)
|
||||||
|
|
||||||
// 计算框选的左上角和右下角
|
// 计算框选的左上角和右下角
|
||||||
const selectAttr = {
|
const selectAttr = {
|
||||||
// 左上角
|
// 左上角
|
||||||
x1: 0,
|
x1: 0,
|
||||||
y1: 0,
|
y1: 0,
|
||||||
// 右下角
|
// 右下角
|
||||||
x2: 0,
|
x2: 0,
|
||||||
y2: 0
|
y2: 0
|
||||||
}
|
}
|
||||||
if (currX > startOffsetX && currY > startOffsetY) {
|
if (currX > startOffsetX && currY > startOffsetY) {
|
||||||
// 右下方向
|
// 右下方向
|
||||||
selectAttr.x1 = startOffsetX
|
selectAttr.x1 = startOffsetX
|
||||||
selectAttr.y1 = startOffsetY
|
selectAttr.y1 = startOffsetY
|
||||||
selectAttr.x2 = Math.round(startOffsetX + (moveEvent.screenX - startScreenX) / scale)
|
selectAttr.x2 = Math.round(startOffsetX + (moveEvent.screenX - startScreenX) / scale)
|
||||||
selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale)
|
selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale)
|
||||||
} else if (currX > startOffsetX && currY < startOffsetY) {
|
} else if (currX > startOffsetX && currY < startOffsetY) {
|
||||||
// 右上方向
|
// 右上方向
|
||||||
selectAttr.x1 = startOffsetX
|
selectAttr.x1 = startOffsetX
|
||||||
selectAttr.y1 = Math.round(startOffsetY - (startScreenY - moveEvent.screenY) / scale)
|
selectAttr.y1 = Math.round(startOffsetY - (startScreenY - moveEvent.screenY) / scale)
|
||||||
selectAttr.x2 = Math.round(startOffsetX + (moveEvent.screenX - startScreenX) / scale)
|
selectAttr.x2 = Math.round(startOffsetX + (moveEvent.screenX - startScreenX) / scale)
|
||||||
selectAttr.y2 = startOffsetY
|
selectAttr.y2 = startOffsetY
|
||||||
} else if (currX < startOffsetX && currY > startOffsetY) {
|
} else if (currX < startOffsetX && currY > startOffsetY) {
|
||||||
selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale)
|
selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale)
|
||||||
selectAttr.y1 = startOffsetY
|
selectAttr.y1 = startOffsetY
|
||||||
selectAttr.x2 = startOffsetX
|
selectAttr.x2 = startOffsetX
|
||||||
selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale)
|
selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale)
|
||||||
// 左下方向
|
// 左下方向
|
||||||
} else {
|
} else {
|
||||||
// 左上方向
|
// 左上方向
|
||||||
selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale)
|
selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale)
|
||||||
selectAttr.y1 = Math.round(startOffsetY - (startScreenY - moveEvent.screenY) / scale)
|
selectAttr.y1 = Math.round(startOffsetY - (startScreenY - moveEvent.screenY) / scale)
|
||||||
selectAttr.x2 = startOffsetX
|
selectAttr.x2 = startOffsetX
|
||||||
selectAttr.y2 = startOffsetY
|
selectAttr.y2 = startOffsetY
|
||||||
}
|
}
|
||||||
|
|
||||||
// 遍历组件
|
// 遍历组件
|
||||||
chartEditStore.getComponentList.forEach(item => {
|
chartEditStore.getComponentList.forEach(item => {
|
||||||
if (!chartEditStore.getTargetChart.selectId.includes(item.id)) {
|
if (!chartEditStore.getTargetChart.selectId.includes(item.id)) {
|
||||||
// 处理左上角
|
// 处理左上角
|
||||||
let isSelect = false
|
let isSelect = false
|
||||||
const { x, y, w, h } = item.attr
|
const { x, y, w, h } = item.attr
|
||||||
const targetAttr = {
|
const targetAttr = {
|
||||||
// 左上角
|
// 左上角
|
||||||
x1: x,
|
x1: x,
|
||||||
y1: y,
|
y1: y,
|
||||||
// 右下角
|
// 右下角
|
||||||
x2: x + w,
|
x2: x + w,
|
||||||
y2: y + h
|
y2: y + h
|
||||||
}
|
}
|
||||||
// 全包含则选中
|
// 全包含则选中
|
||||||
if (
|
if (
|
||||||
targetAttr.x1 - selectAttr.x1 >= 0 &&
|
targetAttr.x1 - selectAttr.x1 >= 0 &&
|
||||||
targetAttr.y1 - selectAttr.y1 >= 0 &&
|
targetAttr.y1 - selectAttr.y1 >= 0 &&
|
||||||
targetAttr.x2 - selectAttr.x2 <= 0 &&
|
targetAttr.x2 - selectAttr.x2 <= 0 &&
|
||||||
targetAttr.y2 - selectAttr.y2 <= 0 &&
|
targetAttr.y2 - selectAttr.y2 <= 0 &&
|
||||||
!item.status.lock &&
|
!item.status.lock &&
|
||||||
!item.status.hide
|
!item.status.hide
|
||||||
) {
|
) {
|
||||||
isSelect = true
|
isSelect = true
|
||||||
chartEditStore.setTargetSelectChart(item.id, true)
|
chartEditStore.setTargetSelectChart(item.id, true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}, 30)
|
}, 30)
|
||||||
|
|
||||||
// 鼠标抬起
|
// 鼠标抬起
|
||||||
const mouseup = () => {
|
const mouseup = () => {
|
||||||
// 鼠标抬起时，结束mousemove的节流函数，避免选框不消失问题
|
// 鼠标抬起时，结束mousemove的节流函数，避免选框不消失问题
|
||||||
mousemove.cancel()
|
mousemove.cancel()
|
||||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_SELECT, false)
|
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_SELECT, false)
|
||||||
chartEditStore.setMousePosition(0, 0, 0, 0)
|
chartEditStore.setMousePosition(0, 0, 0, 0)
|
||||||
document.removeEventListener('mousemove', mousemove)
|
document.removeEventListener('mousemove', mousemove)
|
||||||
document.removeEventListener('mouseup', mouseup)
|
document.removeEventListener('mouseup', mouseup)
|
||||||
}
|
}
|
||||||
document.addEventListener('mousemove', mousemove)
|
document.addEventListener('mousemove', mousemove)
|
||||||
document.addEventListener('mouseup', mouseup)
|
document.addEventListener('mouseup', mouseup)
|
||||||
}
|
}
|
||||||
|
|
||||||
// * 鼠标事件
|
// * 鼠标事件
|
||||||
export const useMouseHandle = () => {
|
export const useMouseHandle = () => {
|
||||||
// * Click 事件, 松开鼠标触发
|
// * Click 事件, 松开鼠标触发
|
||||||
const mouseClickHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
const mouseClickHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
if (item.status.lock) return
|
if (item.status.lock) return
|
||||||
// 若此时按下了 CTRL, 表示多选
|
// 若此时按下了 CTRL, 表示多选
|
||||||
if (window.$KeyboardActive?.ctrl) {
|
if (window.$KeyboardActive?.ctrl) {
|
||||||
// 若已选中，则去除
|
// 若已选中，则去除
|
||||||
if (chartEditStore.targetChart.selectId.includes(item.id)) {
|
if (chartEditStore.targetChart.selectId.includes(item.id)) {
|
||||||
const exList = chartEditStore.targetChart.selectId.filter(e => e !== item.id)
|
const exList = chartEditStore.targetChart.selectId.filter(e => e !== item.id)
|
||||||
chartEditStore.setTargetSelectChart(exList)
|
chartEditStore.setTargetSelectChart(exList)
|
||||||
} else {
|
} else {
|
||||||
chartEditStore.setTargetSelectChart(item.id, true)
|
chartEditStore.setTargetSelectChart(item.id, true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// * 按下事件（包含移动事件）
|
// * 按下事件（包含移动事件）
|
||||||
const mousedownHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
const mousedownHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
if (item.status.lock) return
|
if (item.status.lock) return
|
||||||
onClickOutSide()
|
onClickOutSide()
|
||||||
// 按下左键 + CTRL
|
// 按下左键 + CTRL
|
||||||
if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) return
|
if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) return
|
||||||
|
|
||||||
// 按下右键 + 选中多个 + 目标元素是多选子元素
|
// 按下右键 + 选中多个 + 目标元素是多选子元素
|
||||||
const selectId = chartEditStore.getTargetChart.selectId
|
const selectId = chartEditStore.getTargetChart.selectId
|
||||||
if (e.buttons === MouseEventButton.RIGHT && selectId.length > 1 && selectId.includes(item.id)) return
|
if (e.buttons === MouseEventButton.RIGHT && selectId.length > 1 && selectId.includes(item.id)) return
|
||||||
|
|
||||||
// 选中当前目标组件
|
// 选中当前目标组件
|
||||||
chartEditStore.setTargetSelectChart(item.id)
|
chartEditStore.setTargetSelectChart(item.id)
|
||||||
|
|
||||||
// 按下右键
|
// 按下右键
|
||||||
if (e.buttons === MouseEventButton.RIGHT) return
|
if (e.buttons === MouseEventButton.RIGHT) return
|
||||||
|
|
||||||
const scale = chartEditStore.getEditCanvas.scale
|
const scale = chartEditStore.getEditCanvas.scale
|
||||||
const canvasWidth = chartEditStore.getEditCanvasConfig.width
|
const canvasWidth = chartEditStore.getEditCanvasConfig.width
|
||||||
const canvasHeight = chartEditStore.getEditCanvasConfig.height
|
const canvasHeight = chartEditStore.getEditCanvasConfig.height
|
||||||
|
|
||||||
// 记录图表初始位置和大小
|
// 记录图表初始位置和大小
|
||||||
const targetMap = new Map()
|
const targetMap = new Map()
|
||||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||||
const index = chartEditStore.fetchTargetIndex(id)
|
const index = chartEditStore.fetchTargetIndex(id)
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
const { x, y, w, h } = toRaw(chartEditStore.getComponentList[index]).attr
|
const { x, y, w, h } = toRaw(chartEditStore.getComponentList[index]).attr
|
||||||
targetMap.set(id, { x, y, w, h })
|
targetMap.set(id, { x, y, w, h })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// 记录点击初始位置
|
// 记录点击初始位置
|
||||||
const startX = e.screenX
|
const startX = e.screenX
|
||||||
const startY = e.screenY
|
const startY = e.screenY
|
||||||
|
|
||||||
// 记录历史位置
|
// 记录历史位置
|
||||||
let prevComponentInstance: Array<CreateComponentType | CreateComponentGroupType> = []
|
let prevComponentInstance: Array<CreateComponentType | CreateComponentGroupType> = []
|
||||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||||
if (!targetMap.has(id)) return
|
if (!targetMap.has(id)) return
|
||||||
|
|
||||||
const index = chartEditStore.fetchTargetIndex(id)
|
const index = chartEditStore.fetchTargetIndex(id)
|
||||||
// 拿到初始位置数据
|
// 拿到初始位置数据
|
||||||
prevComponentInstance.push(cloneDeep(chartEditStore.getComponentList[index]))
|
prevComponentInstance.push(cloneDeep(chartEditStore.getComponentList[index]))
|
||||||
})
|
})
|
||||||
|
|
||||||
// 记录初始位置
|
// 记录初始位置
|
||||||
chartEditStore.setMousePosition(undefined, undefined, startX, startY)
|
chartEditStore.setMousePosition(undefined, undefined, startX, startY)
|
||||||
|
|
||||||
// 移动-计算偏移量
|
// 移动-计算偏移量
|
||||||
const mousemove = throttle((moveEvent: MouseEvent) => {
|
const mousemove = throttle((moveEvent: MouseEvent) => {
|
||||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
|
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
|
||||||
chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
|
chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
|
||||||
|
|
||||||
// 当前偏移量，处理 scale 比例问题
|
// 当前偏移量，处理 scale 比例问题
|
||||||
let offsetX = (moveEvent.screenX - startX) / scale
|
let offsetX = (moveEvent.screenX - startX) / scale
|
||||||
let offsetY = (moveEvent.screenY - startY) / scale
|
let offsetY = (moveEvent.screenY - startY) / scale
|
||||||
|
|
||||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||||
if (!targetMap.has(id)) return
|
if (!targetMap.has(id)) return
|
||||||
|
|
||||||
const index = chartEditStore.fetchTargetIndex(id)
|
const index = chartEditStore.fetchTargetIndex(id)
|
||||||
// 拿到初始位置数据
|
// 拿到初始位置数据
|
||||||
const { x, y, w, h } = targetMap.get(id)
|
const { x, y, w, h } = targetMap.get(id)
|
||||||
const componentInstance = chartEditStore.getComponentList[index]
|
const componentInstance = chartEditStore.getComponentList[index]
|
||||||
|
|
||||||
let currX = Math.round(x + offsetX)
|
let currX = Math.round(x + offsetX)
|
||||||
let currY = Math.round(y + offsetY)
|
let currY = Math.round(y + offsetY)
|
||||||
|
|
||||||
// 要预留的距离
|
// 要预留的距离
|
||||||
const distance = 50
|
const distance = 50
|
||||||
|
|
||||||
// 基于左上角位置检测
|
// 基于左上角位置检测
|
||||||
currX = currX < -w + distance ? -w + distance : currX
|
currX = currX < -w + distance ? -w + distance : currX
|
||||||
currY = currY < -h + distance ? -h + distance : currY
|
currY = currY < -h + distance ? -h + distance : currY
|
||||||
|
|
||||||
// 基于右下角位置检测
|
// 基于右下角位置检测
|
||||||
currX = currX > canvasWidth - distance ? canvasWidth - distance : currX
|
currX = currX > canvasWidth - distance ? canvasWidth - distance : currX
|
||||||
currY = currY > canvasHeight - distance ? canvasHeight - distance : currY
|
currY = currY > canvasHeight - distance ? canvasHeight - distance : currY
|
||||||
if (componentInstance) {
|
if (componentInstance) {
|
||||||
componentInstance.attr = Object.assign(componentInstance.attr, {
|
componentInstance.attr = Object.assign(componentInstance.attr, {
|
||||||
x: currX,
|
x: currX,
|
||||||
y: currY
|
y: currY
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
}, 20)
|
}, 20)
|
||||||
|
|
||||||
const mouseup = () => {
|
const mouseup = () => {
|
||||||
try {
|
try {
|
||||||
chartEditStore.setMousePosition(0, 0, 0, 0)
|
chartEditStore.setMousePosition(0, 0, 0, 0)
|
||||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
||||||
// 加入历史栈
|
// 加入历史栈
|
||||||
if (prevComponentInstance.length) {
|
if (prevComponentInstance.length) {
|
||||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||||
if (!targetMap.has(id)) return
|
if (!targetMap.has(id)) return
|
||||||
const index = chartEditStore.fetchTargetIndex(id)
|
const index = chartEditStore.fetchTargetIndex(id)
|
||||||
const curComponentInstance = chartEditStore.getComponentList[index]
|
const curComponentInstance = chartEditStore.getComponentList[index]
|
||||||
// 找到记录的所选组件
|
// 找到记录的所选组件
|
||||||
prevComponentInstance.forEach(preItem => {
|
prevComponentInstance.forEach(preItem => {
|
||||||
if (preItem.id === id) {
|
if (preItem.id === id) {
|
||||||
preItem.attr = Object.assign(preItem.attr, {
|
preItem.attr = Object.assign(preItem.attr, {
|
||||||
offsetX: curComponentInstance.attr.x - preItem.attr.x,
|
offsetX: curComponentInstance.attr.x - preItem.attr.x,
|
||||||
offsetY: curComponentInstance.attr.y - preItem.attr.y
|
offsetY: curComponentInstance.attr.y - preItem.attr.y
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
chartEditStore.moveComponentList(prevComponentInstance)
|
|
||||||
}
|
const moveComponentInstance = prevComponentInstance.filter(
|
||||||
document.removeEventListener('mousemove', mousemove)
|
item => item.attr.offsetX !== 0 && item.attr.offsetY !== 0
|
||||||
document.removeEventListener('mouseup', mouseup)
|
)
|
||||||
} catch (err) {
|
moveComponentInstance.length && chartEditStore.moveComponentList(moveComponentInstance)
|
||||||
console.log(err)
|
}
|
||||||
}
|
document.removeEventListener('mousemove', mousemove)
|
||||||
}
|
document.removeEventListener('mouseup', mouseup)
|
||||||
|
} catch (err) {
|
||||||
document.addEventListener('mousemove', mousemove)
|
console.log(err)
|
||||||
document.addEventListener('mouseup', mouseup)
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// * 进入事件
|
document.addEventListener('mousemove', mousemove)
|
||||||
const mouseenterHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
document.addEventListener('mouseup', mouseup)
|
||||||
e.preventDefault()
|
}
|
||||||
e.stopPropagation()
|
|
||||||
if (!chartEditStore.getEditCanvas.isSelect) {
|
// * 进入事件
|
||||||
chartEditStore.setTargetHoverChart(item.id)
|
const mouseenterHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||||
}
|
e.preventDefault()
|
||||||
}
|
e.stopPropagation()
|
||||||
|
if (!chartEditStore.getEditCanvas.isSelect) {
|
||||||
// * 移出事件
|
chartEditStore.setTargetHoverChart(item.id)
|
||||||
const mouseleaveHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
}
|
||||||
e.preventDefault()
|
}
|
||||||
e.stopPropagation()
|
|
||||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
// * 移出事件
|
||||||
chartEditStore.setTargetHoverChart(undefined)
|
const mouseleaveHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||||
}
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
return { mouseClickHandle, mousedownHandle, mouseenterHandle, mouseleaveHandle }
|
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
||||||
}
|
chartEditStore.setTargetHoverChart(undefined)
|
||||||
|
}
|
||||||
// * 移动锚点
|
|
||||||
export const useMousePointHandle = (e: MouseEvent, point: string, attr: PickCreateComponentType<'attr'>) => {
|
return { mouseClickHandle, mousedownHandle, mouseenterHandle, mouseleaveHandle }
|
||||||
e.stopPropagation()
|
}
|
||||||
e.preventDefault()
|
|
||||||
|
// * 移动锚点
|
||||||
// 设置拖拽状态
|
export const useMousePointHandle = (e: MouseEvent, point: string, attr: PickCreateComponentType<'attr'>) => {
|
||||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
|
e.stopPropagation()
|
||||||
const scale = chartEditStore.getEditCanvas.scale
|
e.preventDefault()
|
||||||
|
|
||||||
const itemAttrX = attr.x
|
// 设置拖拽状态
|
||||||
const itemAttrY = attr.y
|
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
|
||||||
const itemAttrW = attr.w
|
const scale = chartEditStore.getEditCanvas.scale
|
||||||
const itemAttrH = attr.h
|
|
||||||
|
const itemAttrX = attr.x
|
||||||
// 记录点击初始位置
|
const itemAttrY = attr.y
|
||||||
const startX = e.screenX
|
const itemAttrW = attr.w
|
||||||
const startY = e.screenY
|
const itemAttrH = attr.h
|
||||||
|
|
||||||
// 记录初始位置
|
// 记录点击初始位置
|
||||||
chartEditStore.setMousePosition(startX, startY)
|
const startX = e.screenX
|
||||||
|
const startY = e.screenY
|
||||||
const mousemove = throttle((moveEvent: MouseEvent) => {
|
|
||||||
chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
|
// 记录初始位置
|
||||||
|
chartEditStore.setMousePosition(startX, startY)
|
||||||
let currX = Math.round((moveEvent.screenX - startX) / scale)
|
|
||||||
let currY = Math.round((moveEvent.screenY - startY) / scale)
|
const mousemove = throttle((moveEvent: MouseEvent) => {
|
||||||
|
chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
|
||||||
const isTop = /t/.test(point)
|
|
||||||
const isBottom = /b/.test(point)
|
let currX = Math.round((moveEvent.screenX - startX) / scale)
|
||||||
const isLeft = /l/.test(point)
|
let currY = Math.round((moveEvent.screenY - startY) / scale)
|
||||||
const isRight = /r/.test(point)
|
|
||||||
|
const isTop = /t/.test(point)
|
||||||
const newHeight = itemAttrH + (isTop ? -currY : isBottom ? currY : 0)
|
const isBottom = /b/.test(point)
|
||||||
const newWidth = itemAttrW + (isLeft ? -currX : isRight ? currX : 0)
|
const isLeft = /l/.test(point)
|
||||||
|
const isRight = /r/.test(point)
|
||||||
attr.h = newHeight > 0 ? newHeight : 0
|
|
||||||
attr.w = newWidth > 0 ? newWidth : 0
|
const newHeight = itemAttrH + (isTop ? -currY : isBottom ? currY : 0)
|
||||||
attr.x = itemAttrX + (isLeft ? currX : 0)
|
const newWidth = itemAttrW + (isLeft ? -currX : isRight ? currX : 0)
|
||||||
attr.y = itemAttrY + (isTop ? currY : 0)
|
|
||||||
}, 50)
|
attr.h = newHeight > 0 ? newHeight : 0
|
||||||
|
attr.w = newWidth > 0 ? newWidth : 0
|
||||||
const mouseup = () => {
|
attr.x = itemAttrX + (isLeft ? currX : 0)
|
||||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
attr.y = itemAttrY + (isTop ? currY : 0)
|
||||||
chartEditStore.setMousePosition(0, 0, 0, 0)
|
}, 50)
|
||||||
document.removeEventListener('mousemove', mousemove)
|
|
||||||
document.removeEventListener('mouseup', mouseup)
|
const mouseup = () => {
|
||||||
}
|
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
||||||
|
chartEditStore.setMousePosition(0, 0, 0, 0)
|
||||||
document.addEventListener('mousemove', mousemove)
|
document.removeEventListener('mousemove', mousemove)
|
||||||
document.addEventListener('mouseup', mouseup)
|
document.removeEventListener('mouseup', mouseup)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', mousemove)
|
||||||
|
document.addEventListener('mouseup', mouseup)
|
||||||
|
}
|
||||||
|
|||||||
@ -77,7 +77,7 @@ export default defineConfig({
|
|||||||
// minify: 'terser', // 如果需要用terser混淆，可打开这两行
|
// minify: 'terser', // 如果需要用terser混淆，可打开这两行
|
||||||
// terserOptions: terserOptions,
|
// terserOptions: terserOptions,
|
||||||
rollupOptions: rollupOptions,
|
rollupOptions: rollupOptions,
|
||||||
brotliSize: brotliSize,
|
reportCompressedSize: brotliSize,
|
||||||
chunkSizeWarningLimit: chunkSizeWarningLimit
|
chunkSizeWarningLimit: chunkSizeWarningLimit
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user