github/go-view
github/go-view
4
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-04-22 21:46:23 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into dev-commet

Browse Source
This commit is contained in:
tnt group 2022-10-13 22:19:28 +08:00
commit 35cda43d95
14 changed files with 262 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/packages/components/Charts/Lines/LineGradients/config.vue
View File

@ -12,7 +12,6 @@
<n-input-number
v-model:value="item.lineStyle.width"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>

1
src/packages/index.d.ts vendored
View File

@ -115,7 +115,6 @@ export interface PublicConfigType {
}
filter?: string
status: StatusType
setPosition: Function
}
export interface CreateComponentType extends PublicConfigType, requestConfig {

6
src/packages/public/publicConfig.ts
View File

@ -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
}
}
// 多选成组类

41
src/store/modules/chartEditStore/chartEditStore.ts
View File

@ -493,34 +493,31 @@ export const useChartEditStore = defineStore({
}
const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
e = cloneDeep(e)
// 生成新 id
e.id = getUUID()
e.attr.x = this.getMousePosition.x + 30
e.attr.y = this.getMousePosition.y + 30
// 外层生成新 id
e.id = getUUID()
// 分组列表生成新 id
if (e.isGroup) {
(e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
item.id = getUUID()
})
}
return e
}
const isCut = recordCharts.type === HistoryActionTypeEnum.CUT
const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [ recordCharts.charts ]
// 多项
if (Array.isArray(recordCharts.charts)) {
recordCharts.charts.forEach((e: CreateComponentType) => {
this.addComponentList(parseHandle(e), undefined, true)
// 剪切需删除原数据
if (isCut) {
this.setTargetSelectChart(e.id)
this.removeComponentList(undefined, true)
}
})
if (isCut) this.setRecordChart(undefined)
loadingFinish()
return
}
// 单项
this.addComponentList(parseHandle(recordCharts.charts), undefined, true)
if (isCut) {
this.setTargetSelectChart(recordCharts.charts.id)
this.removeComponentList()
this.setRecordChart(undefined)
}
targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
this.addComponentList(parseHandle(e), undefined, true)
// 剪切需删除原数据
if (isCut) {
this.setTargetSelectChart(e.id)
this.removeComponentList(undefined, true)
}
})
if (isCut) this.setRecordChart(undefined)
loadingFinish()
} catch (value) {
loadingError()

0
src/utils/componets.ts → src/utils/components.ts
View File

2
src/utils/index.ts
View File

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

36
src/utils/utils.ts
View File

@ -7,7 +7,9 @@ import html2canvas from 'html2canvas'
import { downloadByA } from './file'
import { toString } from './type'
import cloneDeep from 'lodash/cloneDeep'
import { WinKeyboard } from '@/enums/editPageEnum'
import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
/**
* * 判断是否是开发环境
@ -72,6 +74,21 @@ 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 元素
@ -249,3 +266,22 @@ export const objToCookie = (obj: RequestParamsObjType) => {
}
return str.substring(0, str.length - 1)
}
/**
* * 设置按下键盘按键的底部展示
* @param keyCode
* @returns
*/
export const setKeyboardDressShow = (keyCode?: number) => {
const code = new Map([[17, WinKeyboard.CTRL]])
const dom = document.getElementById('keyboard-dress-show')
if (!dom) return
if (!keyCode) {
dom.innerText = ''
return
}
if (keyCode && code.has(keyCode)) {
dom.innerText = `按下了「${code.get(keyCode)}」键`
}
}

1
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
View File

@ -128,6 +128,7 @@ const sendHandle = async () => {
const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
loading.value = false
if (res) {
if(!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
showMatching.value = true
return

2
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
View File

@ -27,7 +27,7 @@
</n-timeline-item>
<n-timeline-item v-show="filterShow" color="#97846c" :title="TimelineTitleEnum.FILTER">
<n-space :size="18" vertical>
<n-text depth="3">过滤器将处理接口返回值的「data」字段</n-text>
<n-text depth="3">过滤器默认处理接口返回值的「data」字段</n-text>
<chart-data-monaco-editor></chart-data-monaco-editor>
</n-space>
</n-timeline-item>

12
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
View File

@ -58,20 +58,20 @@
<n-space :size="15" vertical>
<div class="editor-data-show">
<n-space>
<n-text depth="3">目标数据(data)：</n-text>
<n-code :code="toString(sourceData?.data) || 'undefined'" language="json" :word-wrap="true"></n-code>
<n-text depth="3">默认过滤数据(data)：</n-text>
<n-code :code="toString(sourceData?.data) || '暂无'" language="json" :word-wrap="true"></n-code>
</n-space>
</div>
<div class="editor-data-show">
<n-space>
<n-text depth="3">目标数据(res)：</n-text>
<n-code :code="toString(sourceData)" language="json" :word-wrap="true"></n-code>
<n-text depth="3">接口返回数据(res)：</n-text>
<n-code :code="toString(sourceData) || '暂无'" language="json" :word-wrap="true"></n-code>
</n-space>
</div>
<div class="editor-data-show">
<n-space>
<n-text depth="3">过滤器结果：</n-text>
<n-code :code="filterRes" language="json" :word-wrap="true"></n-code>
<n-code :code="filterRes || '暂无'" language="json" :word-wrap="true"></n-code>
</n-space>
</div>
</n-space>
@ -87,7 +87,7 @@
</template>
规则
</n-tag>
<n-text class="go-ml-2" depth="2">过滤器将处理接口返回值的「data」字段</n-text>
<n-text class="go-ml-2" depth="2">过滤器默认处理接口返回值的「data」字段</n-text>
</div>
<n-space>

273
src/views/chart/ContentEdit/components/EditAlignLine/index.vue
View File

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

20
src/views/chart/ContentEdit/components/EditBottom/index.vue
View File

@ -1,11 +1,16 @@
<template>
<div class="go-edit-bottom">
<edit-history></edit-history>
<n-space>
<!-- 历史记录 -->
<edit-history></edit-history>
<!-- CTRL按键触发展示 -->
<n-text id="keyboard-dress-show" depth="3"></n-text>
</n-space>
<n-space class="bottom-ri">
<!-- 快捷键提示 -->
<edit-shortcut-key />
<!-- 缩放比例 -->
<n-select
:disabled="lockScale"
@ -14,18 +19,13 @@
size="mini"
:options="filterOptions"
@update:value="selectHandle"
></n-select>
></n-select>
<!-- 锁定缩放 -->
<n-tooltip trigger="hover">
<template #trigger>
<n-button @click="lockHandle" text>
<n-icon
class="lock-icon"
:class="{ color: lockScale }"
size="18"
:depth="2"
>
<n-icon class="lock-icon" :class="{ color: lockScale }" size="18" :depth="2">
<lock-closed-outline-icon v-if="lockScale"></lock-closed-outline-icon>
<lock-open-outline-icon v-else></lock-open-outline-icon>
</n-icon>
@ -46,7 +46,7 @@
:disabled="lockScale"
:marks="sliderMaks"
@update:value="sliderHandle"
></n-slider>
></n-slider>
</n-space>
</div>
</template>

64
src/views/chart/ContentEdit/hooks/useDrag.hook.ts
View File

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

22
src/views/chart/hooks/useKeyboard.hook.ts
View File

@ -2,8 +2,9 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
import { WinKeyboard, MacKeyboard, MenuEnum } from '@/enums/editPageEnum'
import throttle from 'lodash/throttle'
import debounce from 'lodash/debounce'
import keymaster from 'keymaster'
import { setKeyboardDressShow } from '@/utils'
// Keymaster可以支持识别以下组合键： ⇧，shift，option，⌥，alt，ctrl，control，command，和⌘
const chartEditStore = useChartEditStore()
@ -27,7 +28,7 @@ export const winKeyboardValue = {
[MenuEnum.LOCK]: winCtrlMerge('l'),
[MenuEnum.UNLOCK]: winCtrlMerge(winShiftMerge('l')),
[MenuEnum.HIDE]: winCtrlMerge('h'),
[MenuEnum.SHOW]: winCtrlMerge(winShiftMerge('h')),
[MenuEnum.SHOW]: winCtrlMerge(winShiftMerge('h'))
}
// 这个 Ctrl 后面还是换成了 ⌘
@ -52,7 +53,7 @@ export const macKeyboardValue = {
[MenuEnum.LOCK]: macCtrlMerge('l'),
[MenuEnum.UNLOCK]: macCtrlMerge(macShiftMerge('l')),
[MenuEnum.HIDE]: macCtrlMerge('h'),
[MenuEnum.SHOW]: macCtrlMerge(macShiftMerge('h')),
[MenuEnum.SHOW]: macCtrlMerge(macShiftMerge('h'))
}
// Win 快捷键列表
@ -77,7 +78,7 @@ const winKeyList: Array<string> = [
winKeyboardValue.unLock,
winKeyboardValue.hide,
winKeyboardValue.show,
winKeyboardValue.show
]
// Mac 快捷键列表
@ -102,7 +103,7 @@ const macKeyList: Array<string> = [
macKeyboardValue.unLock,
macKeyboardValue.hide,
macKeyboardValue.show,
macKeyboardValue.show
]
// 处理键盘记录
@ -113,11 +114,18 @@ const keyRecordHandle = () => {
}
document.onkeydown = (e: KeyboardEvent) => {
if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = true
if(e.keyCode === 17 && window.$KeyboardActive) {
setKeyboardDressShow(e.keyCode)
window.$KeyboardActive.ctrl = true
}
}
document.onkeyup = (e: KeyboardEvent) => {
if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = false
if(e.keyCode === 17 && window.$KeyboardActive)
{
window.$KeyboardActive.ctrl = false
setKeyboardDressShow()
}
}
}