perf: 优化 ctrl 监听

This commit is contained in:
奔跑的面条 2022-10-10 18:47:07 +08:00
parent 293259a97d
commit af1c280f28
5 changed files with 14 additions and 33 deletions

View File

@ -172,10 +172,7 @@ export const useMouseHandle = () => {
e.stopPropagation() e.stopPropagation()
if (item.status.lock) return if (item.status.lock) return
// 若此时按下了 CTRL, 表示多选 // 若此时按下了 CTRL, 表示多选
if ( if (window.$KeyboardActive?.ctrl) {
window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY)
) {
// 若已选中,则去除 // 若已选中,则去除
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)
@ -193,11 +190,7 @@ export const useMouseHandle = () => {
if (item.status.lock) return if (item.status.lock) return
onClickOutSide() onClickOutSide()
// 按下左键 + CTRL // 按下左键 + CTRL
if ( if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl)
e.buttons === MouseEventButton.LEFT &&
(window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY))
)
return return
// 按下右键 + 选中多个 + 目标元素是多选子元素 // 按下右键 + 选中多个 + 目标元素是多选子元素

View File

@ -142,11 +142,7 @@ const optionsHandle = (
// //
const clickHandle = (e: MouseEvent) => { const clickHandle = (e: MouseEvent) => {
// + CTRL // + CTRL
if ( if (window.$KeyboardActive?.ctrl) return
window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY)
)
return
// //
expend.value = !expend.value expend.value = !expend.value
mousedownHandle(e, props.componentGroupData) mousedownHandle(e, props.componentGroupData)
@ -157,11 +153,7 @@ const groupMousedownHandle = (e: MouseEvent) => {
onClickOutSide() onClickOutSide()
// CTRL, // CTRL,
const id = props.componentGroupData.id const id = props.componentGroupData.id
if ( if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
e.buttons === MouseEventButton.LEFT &&
(window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY))
) {
// //
if (chartEditStore.targetChart.selectId.includes(id)) { if (chartEditStore.targetChart.selectId.includes(id)) {
const exList = chartEditStore.targetChart.selectId.filter(e => e !== id) const exList = chartEditStore.targetChart.selectId.filter(e => e !== id)

View File

@ -166,11 +166,7 @@ const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => {
onClickOutSide() onClickOutSide()
// CTRL, // CTRL,
const id = item.id const id = item.id
if ( if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
e.buttons === MouseEventButton.LEFT &&
(window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY))
) {
// //
if (chartEditStore.targetChart.selectId.includes(id)) { if (chartEditStore.targetChart.selectId.includes(id)) {
const exList = chartEditStore.targetChart.selectId.filter(e => e !== id) const exList = chartEditStore.targetChart.selectId.filter(e => e !== id)
@ -198,7 +194,6 @@ const changeLayerType = (value: LayerModeEnum) => {
layerMode.value = value layerMode.value = value
chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYER_TYPE, value) chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYER_TYPE, value)
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -107,16 +107,17 @@ const macKeyList: Array<string> = [
// 处理键盘记录 // 处理键盘记录
const keyRecordHandle = () => { const keyRecordHandle = () => {
// 初始化清空 // 默认赋值
if(window.$KeyboardActive) window.$KeyboardActive = new Set([]) window.$KeyboardActive = {
ctrl: true
}
document.onkeydown = (e: KeyboardEvent) => { document.onkeydown = (e: KeyboardEvent) => {
if(window.$KeyboardActive) window.$KeyboardActive.add(e.key.toLocaleLowerCase()) if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = true
else window.$KeyboardActive = new Set([e.key.toLocaleLowerCase()])
} }
document.onkeyup = (e: KeyboardEvent) => { document.onkeyup = (e: KeyboardEvent) => {
if(window.$KeyboardActive) window.$KeyboardActive.delete(e.key.toLocaleLowerCase()) if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = false
} }
} }

4
types/global.d.ts vendored
View File

@ -6,7 +6,7 @@ interface Window {
$t: any $t: any
$vue: any $vue: any
// 键盘按键记录 // 键盘按键记录
$KeyboardActive?: Set<string> $KeyboardActive?: { [T: string]: boolean }
} }
declare type Recordable<T = any> = Record<string, T> declare type Recordable<T = any> = Record<string, T>