From 73090a6f1eb0664f3bf5116aa4540188435988dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Thu, 13 Oct 2022 20:21:33 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=8A=A5=E9=94=99?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E6=8D=95=E8=8E=B7=EF=BC=8C=E5=8E=BB=E9=99=A4?= =?UTF-8?q?setPosition=E8=87=AA=E5=B8=A6=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/index.d.ts | 1 - src/packages/public/publicConfig.ts | 6 - src/utils/{componets.ts => components.ts} | 0 src/utils/index.ts | 2 +- src/utils/utils.ts | 12 + .../components/EditAlignLine/index.vue | 273 +++++++++--------- .../chart/ContentEdit/hooks/useDrag.hook.ts | 64 ++-- 7 files changed, 186 insertions(+), 172 deletions(-) rename src/utils/{componets.ts => components.ts} (100%) diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 1f95d50f..5e800fe9 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -115,7 +115,6 @@ export interface PublicConfigType { } filter?: string status: StatusType - setPosition: Function } export interface CreateComponentType extends PublicConfigType, requestConfig { diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 7bf4ae75..3924834a 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -81,12 +81,6 @@ export class PublicConfigClass implements PublicConfigType { public request = cloneDeep(requestConfig) // 数据过滤 public filter = undefined - - // 设置坐标 - public setPosition(x: number, y: number): void { - this.attr.x = x - this.attr.y = y - } } // 多选成组类 diff --git a/src/utils/componets.ts b/src/utils/components.ts similarity index 100% rename from src/utils/componets.ts rename to src/utils/components.ts diff --git a/src/utils/index.ts b/src/utils/index.ts index fa9fa055..8d2478e6 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -4,6 +4,6 @@ export * from '@/utils/router' export * from '@/utils/storage' export * from '@/utils/style' export * from '@/utils/plugin' -export * from '@/utils/componets' +export * from '@/utils/components' export * from '@/utils/type' export * from '@/utils/file' diff --git a/src/utils/utils.ts b/src/utils/utils.ts index ed607783..3453e291 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -8,6 +8,7 @@ import { downloadByA } from './file' import { toString } from './type' import cloneDeep from 'lodash/cloneDeep' import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' /** * * 判断是否是开发环境 @@ -72,6 +73,17 @@ export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => { window['$message'].warning('您的浏览器不支持全屏功能！') } +/** + * 修改元素位置 + * @param target 对象 + * @param x X轴 + * @param y Y轴 + */ + export const setComponentPosition = (target: CreateComponentType | CreateComponentGroupType, x?: number, y?:number) => { + x && (target.attr.x = x) + y && (target.attr.y = y) +} + /** * * 设置元素属性 * @param HTMLElement 元素 diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue index e65f5c6d..bfa30006 100644 --- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue +++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue @@ -17,6 +17,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d' import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' +import { setComponentPosition } from '@/utils' import throttle from 'lodash/throttle' import cloneDeep from 'lodash/cloneDeep' // 全局颜色 @@ -96,146 +97,150 @@ const canvasPositionList = computed(() => { watch( () => chartEditStore.getMousePosition, throttle(() => { - if (!isComputedLine.value || selectId.value.length !== 1) return - // 获取目标组件数据 + try { + if (!isComputedLine.value || selectId.value.length !== 1) return + // 获取目标组件数据 - const selectW = selectAttr.value.w - const selectH = selectAttr.value.h + const selectW = selectAttr.value.w + const selectH = selectAttr.value.h - // 距离左侧 - const selectLeftX = selectAttr.value.x - const selectHalfX = selectLeftX + selectW / 2 - const selectRightX = selectLeftX + selectW - const seletX = [selectLeftX, selectHalfX, selectRightX] + // 距离左侧 + const selectLeftX = selectAttr.value.x + const selectHalfX = selectLeftX + selectW / 2 + const selectRightX = selectLeftX + selectW + const seletX = [selectLeftX, selectHalfX, selectRightX] - // 距离顶部 - const selectTopY = selectAttr.value.y - const selectHalfY = selectTopY + selectH / 2 - const selectBottomY = selectTopY + selectH - const selectY = [selectTopY, selectHalfY, selectBottomY] + // 距离顶部 + const selectTopY = selectAttr.value.y + const selectHalfY = selectTopY + selectH / 2 + const selectBottomY = selectTopY + selectH + const selectY = [selectTopY, selectHalfY, selectBottomY] - line.select.clear() - line.sorptioned.y = false - // 循环查询所有组件数据 - const componentList = chartEditStore.getComponentList.map((e: CreateComponentType | CreateComponentGroupType) => { - return { - id: e.id, - attr: e.attr - } - }) - componentList.push(canvasPositionList.value) - // 传入画布数据 - line.lineArr.forEach(lineItem => { - componentList.forEach((component: typeof canvasPositionList.value) => { - // 排除自身 - if (selectId.value[0] === component.id) return - const componentW = component.attr.w - const componentH = component.attr.h - - // 距离左侧 - const componentLeftX = component.attr.x - const componentHalfX = componentLeftX + componentW / 2 - const componentRightX = componentLeftX + componentW - const componentX = [componentLeftX, componentHalfX, componentRightX] - - // 距离顶部 - const componentTopY = component.attr.y - const componentHalfY = componentTopY + componentH / 2 - const componentBottomY = componentTopY + componentH - const componentY = [componentTopY, componentHalfY, componentBottomY] - - // 横线对比的是 Y - if (lineItem.includes('rowt')) { - // 顶部 - if (isSorption(selectTopY, componentTopY)) { - line.select.set(lineItem, { y: componentTopY }) - selectTarget.value.setPosition(selectLeftX, componentTopY) - } - if (isSorption(selectTopY, componentHalfY)) { - line.select.set(lineItem, { y: componentHalfY }) - selectTarget.value.setPosition(selectLeftX, componentHalfY) - } - if (isSorption(selectTopY, componentBottomY)) { - line.select.set(lineItem, { y: componentBottomY }) - selectTarget.value.setPosition(selectLeftX, componentBottomY) - } - } - if (lineItem.includes('rowc')) { - // 顶部 - if (isSorption(selectHalfY, componentTopY)) { - line.select.set(lineItem, { y: componentTopY }) - selectTarget.value.setPosition(selectLeftX, componentTopY - selectH / 2) - } - if (isSorption(selectHalfY, componentHalfY)) { - line.select.set(lineItem, { y: componentHalfY }) - selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH / 2) - } - if (isSorption(selectHalfY, componentBottomY)) { - line.select.set(lineItem, { y: componentBottomY }) - selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH / 2) - } - } - if (lineItem.includes('rowb')) { - // 顶部 - if (isSorption(selectBottomY, componentTopY)) { - line.select.set(lineItem, { y: componentTopY }) - selectTarget.value.setPosition(selectLeftX, componentTopY - selectH) - } - if (isSorption(selectBottomY, componentHalfY)) { - line.select.set(lineItem, { y: componentHalfY }) - selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH) - } - if (isSorption(selectBottomY, componentBottomY)) { - line.select.set(lineItem, { y: componentBottomY }) - selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH) - } - } - - // 纵线对比的是 X - if (lineItem.includes('coll')) { - if (isSorption(selectLeftX, componentLeftX)) { - line.select.set(lineItem, { x: componentLeftX }) - selectTarget.value.setPosition(componentLeftX, selectTopY) - } - if (isSorption(selectLeftX, componentHalfX)) { - line.select.set(lineItem, { x: componentHalfX }) - selectTarget.value.setPosition(componentHalfX, selectTopY) - } - if (isSorption(selectLeftX, componentRightX)) { - line.select.set(lineItem, { x: componentRightX }) - selectTarget.value.setPosition(componentRightX, selectTopY) - } - } - if (lineItem.includes('colc')) { - if (isSorption(selectHalfX, componentLeftX)) { - line.select.set(lineItem, { x: componentLeftX }) - selectTarget.value.setPosition(componentLeftX - selectW / 2, selectTopY) - } - if (isSorption(selectHalfX, componentHalfX)) { - line.select.set(lineItem, { x: componentHalfX }) - selectTarget.value.setPosition(componentHalfX - selectW / 2, selectTopY) - } - if (isSorption(selectHalfX, componentRightX)) { - line.select.set(lineItem, { x: componentRightX }) - selectTarget.value.setPosition(componentRightX - selectW / 2, selectTopY) - } - } - if (lineItem.includes('colr')) { - if (isSorption(selectRightX, componentLeftX)) { - line.select.set(lineItem, { x: componentLeftX }) - selectTarget.value.setPosition(componentLeftX - selectW, selectTopY) - } - if (isSorption(selectRightX, componentHalfX)) { - line.select.set(lineItem, { x: componentHalfX }) - selectTarget.value.setPosition(componentHalfX - selectW, selectTopY) - } - if (isSorption(selectRightX, componentRightX)) { - line.select.set(lineItem, { x: componentRightX }) - selectTarget.value.setPosition(componentRightX - selectW, selectTopY) - } + line.select.clear() + line.sorptioned.y = false + // 循环查询所有组件数据 + const componentList = chartEditStore.getComponentList.map((e: CreateComponentType | CreateComponentGroupType) => { + return { + id: e.id, + attr: e.attr } }) - }) + componentList.push(canvasPositionList.value) + // 传入画布数据 + line.lineArr.forEach(lineItem => { + componentList.forEach((component: typeof canvasPositionList.value) => { + // 排除自身 + if (selectId.value[0] === component.id) return + const componentW = component.attr.w + const componentH = component.attr.h + + // 距离左侧 + const componentLeftX = component.attr.x + const componentHalfX = componentLeftX + componentW / 2 + const componentRightX = componentLeftX + componentW + const componentX = [componentLeftX, componentHalfX, componentRightX] + + // 距离顶部 + const componentTopY = component.attr.y + const componentHalfY = componentTopY + componentH / 2 + const componentBottomY = componentTopY + componentH + const componentY = [componentTopY, componentHalfY, componentBottomY] + + // 横线对比的是 Y + if (lineItem.includes('rowt')) { + // 顶部 + if (isSorption(selectTopY, componentTopY)) { + line.select.set(lineItem, { y: componentTopY }) + setComponentPosition(selectTarget.value, selectLeftX, componentTopY) + } + if (isSorption(selectTopY, componentHalfY)) { + line.select.set(lineItem, { y: componentHalfY }) + setComponentPosition(selectTarget.value, selectLeftX, componentHalfY) + } + if (isSorption(selectTopY, componentBottomY)) { + line.select.set(lineItem, { y: componentBottomY }) + setComponentPosition(selectTarget.value, selectLeftX, componentBottomY) + } + } + if (lineItem.includes('rowc')) { + // 顶部 + if (isSorption(selectHalfY, componentTopY)) { + line.select.set(lineItem, { y: componentTopY }) + setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH / 2) + } + if (isSorption(selectHalfY, componentHalfY)) { + line.select.set(lineItem, { y: componentHalfY }) + setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH / 2) + } + if (isSorption(selectHalfY, componentBottomY)) { + line.select.set(lineItem, { y: componentBottomY }) + setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH / 2) + } + } + if (lineItem.includes('rowb')) { + // 顶部 + if (isSorption(selectBottomY, componentTopY)) { + line.select.set(lineItem, { y: componentTopY }) + setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH) + } + if (isSorption(selectBottomY, componentHalfY)) { + line.select.set(lineItem, { y: componentHalfY }) + setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH) + } + if (isSorption(selectBottomY, componentBottomY)) { + line.select.set(lineItem, { y: componentBottomY }) + setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH) + } + } + + // 纵线对比的是 X + if (lineItem.includes('coll')) { + if (isSorption(selectLeftX, componentLeftX)) { + line.select.set(lineItem, { x: componentLeftX }) + setComponentPosition(selectTarget.value, componentLeftX, selectTopY) + } + if (isSorption(selectLeftX, componentHalfX)) { + line.select.set(lineItem, { x: componentHalfX }) + setComponentPosition(selectTarget.value, componentHalfX, selectTopY) + } + if (isSorption(selectLeftX, componentRightX)) { + line.select.set(lineItem, { x: componentRightX }) + setComponentPosition(selectTarget.value, componentRightX, selectTopY) + } + } + if (lineItem.includes('colc')) { + if (isSorption(selectHalfX, componentLeftX)) { + line.select.set(lineItem, { x: componentLeftX }) + setComponentPosition(selectTarget.value, componentLeftX - selectW / 2, selectTopY) + } + if (isSorption(selectHalfX, componentHalfX)) { + line.select.set(lineItem, { x: componentHalfX }) + setComponentPosition(selectTarget.value, componentHalfX - selectW / 2, selectTopY) + } + if (isSorption(selectHalfX, componentRightX)) { + line.select.set(lineItem, { x: componentRightX }) + setComponentPosition(selectTarget.value, componentRightX - selectW / 2, selectTopY) + } + } + if (lineItem.includes('colr')) { + if (isSorption(selectRightX, componentLeftX)) { + line.select.set(lineItem, { x: componentLeftX }) + setComponentPosition(selectTarget.value, componentLeftX - selectW, selectTopY) + } + if (isSorption(selectRightX, componentHalfX)) { + line.select.set(lineItem, { x: componentHalfX }) + setComponentPosition(selectTarget.value, componentHalfX - selectW, selectTopY) + } + if (isSorption(selectRightX, componentRightX)) { + line.select.set(lineItem, { x: componentRightX }) + setComponentPosition(selectTarget.value, componentRightX - selectW, selectTopY) + } + } + }) + }) + } catch (err) { + console.log(err) + } }, 200), { deep: true diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index 39a67327..654e9405 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -1,12 +1,12 @@ import { toRaw } from 'vue' -import { DragKeyEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum' +import { DragKeyEnum, MouseEventButton } from '@/enums/editPageEnum' import { createComponent } from '@/packages' import { ConfigType } from '@/packages/index.d' import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d' import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d' -import { loadingStart, loadingFinish, loadingError } from '@/utils' +import { loadingStart, loadingFinish, loadingError, setComponentPosition } from '@/utils' import { throttle, cloneDeep } from 'lodash' const chartEditStore = useChartEditStore() @@ -33,7 +33,7 @@ export const dragHandle = async (e: DragEvent) => { // 创建新图表组件 let newComponent: CreateComponentType = await createComponent(dropData) - newComponent.setPosition(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.setTargetSelectChart(newComponent.id) loadingFinish() @@ -190,8 +190,7 @@ export const useMouseHandle = () => { if (item.status.lock) return onClickOutSide() // 按下左键 + CTRL - if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) - return + if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) return // 按下右键 + 选中多个 + 目标元素是多选子元素 const selectId = chartEditStore.getTargetChart.selectId @@ -264,38 +263,43 @@ export const useMouseHandle = () => { // 基于右下角位置检测 currX = currX > canvasWidth - distance ? canvasWidth - distance : currX currY = currY > canvasHeight - distance ? canvasHeight - distance : currY - - componentInstance.attr = Object.assign(componentInstance.attr, { - x: currX, - y: currY - }) + if (componentInstance) { + componentInstance.attr = Object.assign(componentInstance.attr, { + x: currX, + y: currY + }) + } }) return }, 20) const mouseup = () => { - chartEditStore.setMousePosition(0, 0, 0, 0) - chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false) - // 加入历史栈 - if (prevComponentInstance.length) { - chartEditStore.getTargetChart.selectId.forEach(id => { - if (!targetMap.has(id)) return - const index = chartEditStore.fetchTargetIndex(id) - const curComponentInstance = chartEditStore.getComponentList[index] - // 找到记录的所选组件 - prevComponentInstance.forEach(preItem => { - if (preItem.id === id) { - preItem.attr = Object.assign(preItem.attr, { - offsetX: curComponentInstance.attr.x - preItem.attr.x, - offsetY: curComponentInstance.attr.y - preItem.attr.y - }) - } + try { + chartEditStore.setMousePosition(0, 0, 0, 0) + chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false) + // 加入历史栈 + if (prevComponentInstance.length) { + chartEditStore.getTargetChart.selectId.forEach(id => { + if (!targetMap.has(id)) return + const index = chartEditStore.fetchTargetIndex(id) + const curComponentInstance = chartEditStore.getComponentList[index] + // 找到记录的所选组件 + prevComponentInstance.forEach(preItem => { + if (preItem.id === id) { + preItem.attr = Object.assign(preItem.attr, { + offsetX: curComponentInstance.attr.x - preItem.attr.x, + offsetY: curComponentInstance.attr.y - preItem.attr.y + }) + } + }) }) - }) - chartEditStore.moveComponentList(prevComponentInstance) + chartEditStore.moveComponentList(prevComponentInstance) + } + document.removeEventListener('mousemove', mousemove) + document.removeEventListener('mouseup', mouseup) + } catch (err) { + console.log(err) } - document.removeEventListener('mousemove', mousemove) - document.removeEventListener('mouseup', mouseup) } document.addEventListener('mousemove', mousemove)